@charset "UTF-8";
:root {
  --brown_tx: #574b3b;
  --blue3: hsl(210, 15%, 22%);
  --activate_red: #f53737;
}

.center-fmt {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

html {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

body {
  background-color: #f1f1f1;
  color: var(--brown_tx);
}

h1 {
  font-weight: normal;
  margin: 24px 0 16px;
}

h2 {
  font-size: 10px;
  font-weight: normal;
  margin: 4px;
  white-space: nowrap;
}

h3 {
  font-size: 10px;
}

h2[data-maisu]::after,
h3[data-maisu]::after {
  content: "（" attr(data-maisu) "）";
}

details {
  margin: 16px 8px 16px;
  font-size: small;
}

#play-option {
  border: none;
}
#play-option > label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#play-option > label > input {
  margin-right: 4px;
}
#play-option > label > input:checked + span {
  color: initial;
}
#play-option > label > input:disabled + span {
  color: #ccc;
}
#play-option > label > input:disabled + span + i {
  color: #ccc;
}
#play-option > label > span { /* DCI No 入力欄 */ }
#play-option > label > span + i {
  margin-left: 0.5em;
}
#play-option > label > span + i + input {
  margin-left: 0.5em;
  width: 9em;
}
#play-option > label ~ label {
  margin-top: 4px;
}

a {
  border-bottom: 1px solid;
  color: var(--brown_tx);
  padding: 0 0 0;
  text-decoration: none;
  -webkit-transition: color 0.4s, padding 0.4s;
  transition: color 0.4s, padding 0.4s;
}
a:hover {
  border-color: var(--blue3);
  color: var(--blue3);
  padding: 0 0 4px;
}
a:not([href]) {
  border-bottom: none;
}

textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 4px 0 RGB(0 0 0/10%);
          box-shadow: 0 1px 4px 0 RGB(0 0 0/10%);
  color: var(--brown_tx);
  padding: 0.75em;
  height: 176px;
  font-size: 17px;
  width: 100%;
}

#paste-list-type {
  font-size: 12px;
}
#paste-list-type > fieldset {
  border: none;
  display: inline-block;
}
#paste-list-type > fieldset::before {
  content: "[";
}
#paste-list-type > fieldset::after {
  content: "]";
}
#paste-list-type > fieldset > label {
  color: #ccc;
}
#paste-list-type > fieldset > label.match {
  color: initial;
}
#paste-list-type > fieldset > label > input {
  display: none;
}
#paste-list-type > fieldset > label > input:checked + span {
  color: initial;
}
#paste-list-type > fieldset > label ~ label::before {
  content: "|";
  margin: 0 0.5em 0 0;
}

#mulligan-check-btn {
  margin-top: 16px;
}

footer {
  text-align: right;
}
footer > small {
  white-space: nowrap;
  color: #6f6f6d;
}

/* 以下、プレイ時のCSS */
body.playmat {
  margin: 0;
}
body.playmat header,
body.playmat article,
body.playmat footer {
  display: none;
}
body.playmat main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
}

main section {
  border: 1px solid;
}

#keep-or-mulligan {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: -webkit-backdrop-filter 0.6s, backdrop-filter 0.6s;
  text-align: center;
}

#keep-or-mulligan.kept {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  pointer-events: none; /*z-index: -1;*/
}

#zone-hand {
  min-height: 160px;
  margin-bottom: 32px;
}

#zone-hand > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#return-to-library {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  padding: 0 40px 0 0;
  border: 1px solid;
  min-width: 150px;
}

#return-to-library[hidden] {
  display: none;
}

#return-to-library > li {
  width: 64px;
  margin: 16px; /*opacity: .8; border-style: dotted; */
}

#return-to-library:not([hidden]) + #your-hand {
  padding-left: 40px;
}

#your-hand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-left: 0;
}

/* card style */
ul[id] > li {
  width: 92px;
  margin: 8px;
}
ul[id] > li[data-piece-num] {
  border: 1px solid;
  border-radius: 8px;
  font-size: 12px;
  padding: 8px;
  overflow: hidden;
  aspect-ratio: 2.5/3.5;
}
ul[id] > li[data-piece-num="0"] {
  background-color: RGB(191 133 104);
  color: RGB(29 120 175);
  font-weight: bold;
  font-size: 17px;
  min-width: 64px;
  position: absolute;
  right: 0;
}
ul[id] > li.drag-elm {
  opacity: 0.2;
  border-style: dashed;
}
ul[id] > li.d-over {
  border-color: green;
  color: green;
}

/*.draggable { cursor: move; position: absolute; user-select: none; }*/
/*[draggable] { user-select: none; }*/
#keep-or-mulligan button ~ button {
  margin-left: 24px;
}

#controller-panel {
  list-style-type: none;
  position: absolute;
  top: 0;
  right: 8px;
  border: 1px solid;
  border-radius: 8px;
  padding: 16px 24px;
}

#controller-panel > li ~ li {
  margin-top: 8px;
}

#restart-btn {
  margin-bottom: 16px;
}

#next-turn-btn {
  margin-top: 16px;
}

#zone-battlefield {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
}

#your-battlefield {
  height: 100%;
  margin: 0;
  padding-left: 0;
}

#owner-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 200px;
  overflow: hidden;
}

#zone-kept-hand {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  overflow: hidden;
}

#your-library {
  position: relative;
  height: 100%;
  margin: 0;
  padding-left: 0;
}
#your-library > li {
  position: absolute;
  width: 64px;
  background-color: #f1f1f1;
}

#your-graveyard {
  position: relative;
  height: 100%;
  margin: 0;
  padding-left: 0;
}
#your-graveyard > li {
  position: absolute;
  width: 64px;
  background-color: #f1f1f1;
}

#your-exile {
  position: relative;
  height: 100%;
  margin: 0;
  padding-left: 0;
}
#your-exile > li {
  position: absolute;
  width: 64px;
  background-color: #f1f1f1;
}

#your-sideboard {
  position: relative;
  height: 100%;
  margin: 0;
  padding-left: 0;
}
#your-sideboard > li {
  position: absolute;
  width: 64px;
  background-color: #f1f1f1;
}

#zone-library,
#zone-graveyard,
#zone-exile,
#zone-sideboard {
  -ms-flex-preferred-size: 148px;
      flex-basis: 148px;
}

/* スマホ */
@media only screen and (max-width: 1300px) {
  #zone-graveyard,
  #zone-exile,
  #zone-sideboard {
    display: none;
  }
  #controller-panel {
    padding: 0 8px;
  }
  #restart-btn {
    margin-bottom: 0;
  }
  #next-turn-btn {
    margin-top: 0;
  }
  #owner-area {
    min-height: 170px;
  }
}