:root {
  --action-positive:#1d6251; --action-negative:#78343a;
  --action-main:#245c91; --action-attack:#64468f; --action-neutral:#394958;
  --phase-button-level:#715718; --phase-button-main:var(--action-main); --phase-button-attack:var(--action-attack); --phase-button-end:#245c75;
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101821;
  color: #e8eef5;
}
/* One semantic palette shared by the HUD, dialogs and lobby. */
button[data-action-tone] { background:var(--action-neutral); border-color:#8796a7; color:#fff; }
button[data-action-tone="positive"] { background:var(--action-positive); border-color:#76d7be; }
button[data-action-tone="negative"],button[data-action-tone="danger"] { background:var(--action-negative); border-color:#ee9ba3; }
button[data-action-tone="main"] { background:var(--action-main); border-color:#84b7f4; }
button[data-action-tone="attack"] { background:var(--action-attack); border-color:#c1a1f4; }
button[data-action-tone]:hover:not(:disabled) { filter:brightness(1.2); }
button[data-action-tone]:focus-visible { outline:3px solid #f0ce72; outline-offset:3px; }
button[data-action-tone]:disabled { opacity:.5; filter:saturate(.5); cursor:not-allowed; }
.battle-log-modal,.battle-lifecycle-modal {
 position:fixed; inset:0; margin:auto; width:min(940px,94vw); max-width:94vw; max-height:90dvh;
 padding:22px; border:1px solid #58738e; border-radius:16px; color:#e8eef5; background:#101d2f; box-shadow:0 16px 80px #000a;
 overflow:hidden; overscroll-behavior:contain;
}
.battle-log-modal::backdrop,.battle-lifecycle-modal::backdrop { background:#0009; }
.battle-log-modal[open] { display:flex; flex-direction:column; height:min(780px,88dvh); gap:10px; }
.battle-modal-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.battle-modal-heading h2 { margin:0; }
.battle-modal-heading button { font-size:24px; min-width:42px; }
.battle-log-entries { overflow:auto; overscroll-behavior:contain; overflow-anchor:none; min-height:0; flex:1; padding:0 12px 0 0; }
.battle-log-entries h3 { color:#efcf78; padding:9px 0; margin:0; border-bottom:1px solid #405569; }
.battle-log-entry { padding:9px 4px; border-bottom:1px solid #31465e; overflow-wrap:anywhere; }
.battle-log-entry p { margin:0 0 6px; }
.battle-log-entry button { margin:3px 6px 0 0; padding:5px 9px; }
.log-power-details { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; font-size:14px; }
.log-power-details dt,.log-power-details dd { margin:0; }
.log-power-details dd { font-variant-numeric:tabular-nums; }
.log-card-highlight { outline:4px solid #efcf78!important; box-shadow:0 0 20px #efcf78; }
.battle-modal-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; flex:none; }
.battle-modal-actions button { min-height:44px; min-width:130px; font-size:15px; font-weight:700; }
.battle-lifecycle-modal[open] { display:flex; flex-direction:column; align-items:center; gap:12px; overflow:auto; text-align:center; }
.battle-lifecycle-modal p,.battle-lifecycle-modal h2 { margin:0; }
.battle-announcement { font-size:clamp(28px,4vw,48px); letter-spacing:.12em; color:#efcf78; }
.battle-lifecycle-modal h2 { font-size:clamp(24px,3vw,36px); color:#efcf78; }
.battle-lifecycle-modal[data-outcome="defeat"] .battle-announcement,.battle-lifecycle-modal[data-outcome="defeat"] h2 { color:#ffa5ae; }
.battle-lifecycle-modal[data-outcome="draw"] .battle-announcement,.battle-lifecycle-modal[data-outcome="draw"] h2 { color:#d2dce7; }
.battle-opening-hand { display:flex; justify-content:center; gap:10px; width:100%; }
.battle-opening-hand > button { padding:0; background:transparent; border:0; width:min(130px,16%); min-width:0; }
.battle-opening-hand img { display:block; width:100%; height:auto; max-height:210px; object-fit:contain; }
.mulligan-explanation { max-width:650px; line-height:1.6; color:#d1dce8; }
.mulligan-question { font-size:20px; font-weight:800; }
.battle-modal-status { padding:8px 12px; border:1px solid #73869a; border-radius:8px; }
.deck-selection { margin: 12px 0; }
.deck-selection select { max-width: 100%; margin-right: 8px; }
#deck-editor { width: min(1100px, 96vw); max-width: 96vw; height: min(850px, 94vh); max-height: 94vh; padding: 18px; overflow: auto; }
#deck-editor[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto minmax(180px, 1fr) auto auto auto; gap: 8px; }
#deck-editor > h2, #deck-editor > p, #deck-editor > .deck-catalog, #deck-editor > .deck-tools { grid-column: 1 / -1; margin: 0; }
#deck-editor > input, #deck-editor > select { width: 100%; min-width: 0; }
#deck-editor .deck-catalog { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); align-content: start; gap: 8px; }
#deck-check { max-height: 14vh; overflow: auto; }
.deck-card-row { display: grid; grid-template-columns: minmax(0, 1fr) 35px 24px 35px; align-items: center; gap: 4px; border: 1px solid #405569; padding: 6px; }
.deck-card-row .card { min-width: 0; max-width: none; width: 100%; height: 100%; }
.deck-card-row > button:not(.card) { padding: 8px 2px; }
.deck-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#deck-check, .notice { white-space: pre-line; }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: #192735;
  border-bottom: 1px solid #405569;
}
h1 {
  font-size: 24px;
  margin: 0;
}
h1 small {
  color: #97b9da;
}
h2 {
  font-size: 18px;
}
h3 {
  font-size: 15px;
}
main {
  max-width: 1800px;
  margin: auto;
  padding: 20px;
}
button,
select,
input {
  font: inherit;
  border: 1px solid #627991;
  border-radius: 6px;
  padding: 9px 12px;
  background: #203447;
  color: inherit;
}
button {
  cursor: pointer;
}
button:hover:not(:disabled) {
  background: #315676;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
input {
  margin-right: 8px;
}
section {
  padding: 14px;
  border: 1px solid #3d5063;
  border-radius: 9px;
  margin-bottom: 14px;
}
.lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lane {
  border: 1px solid #40566c;
  padding: 10px;
  border-radius: 6px;
  min-height: 100px;
}
.cards,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card {
  text-align: left;
  min-width: 155px;
  max-width: 245px;
  font-size: 13px;
}
.card strong {
  display: block;
}
.card small {
  display: block;
  color: #b8cadb;
}
.effect {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.actions button {
  border-color: #79ad8b;
}
.choice {
  border: 2px solid #e6bc61;
}
.choice button.selected {
  background: #785925;
}
.notice {
  color: #ffca73;
  margin: 10px 0;
  white-space: pre-wrap;
}
.room-code {
  font-family: monospace;
  font-size: 25px;
  letter-spacing: 0.12em;
}
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
}
.match-board, .player-zone, .playmat, .playmat .lanes { min-width:0; }
.log {
  max-height: 420px;
  overflow: auto;
  font-size: 12px;
  color: #b9cbdc;
  overflow-anchor: none;
}
.log p { overflow-wrap: anywhere; line-height: 1.55; }
.card-preview {
  position: fixed;
  z-index: 20;
  width: min(380px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 16px));
  overflow: auto;
  padding: 16px;
  background: #192735;
  border: 1px solid #97b9da;
  border-radius: 10px;
  box-shadow: 0 6px 24px #0009;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.card-preview h2 { margin-top: 0; }
.draggable-card { cursor: grab; }
.draggable-card:active { cursor: grabbing; }
.drop-allowed { outline: 3px dashed #9ecd9a; outline-offset: -3px; }
.drop-over { background: #284735; }
.choice-candidate { outline: 2px solid #e6bc61; }
.card.selected { background: #785925; }
.gesture-help { font-size: 13px; line-height: 1.5; }
:focus-visible { outline: 3px solid #e6bc61; outline-offset: 2px; }
dialog {
  background: #192735;
  color: #fff;
  border: 1px solid #63829d;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  line-height: 1.7;
}
dialog::backdrop {
  background: #0009;
}
.winner {
  padding: 20px;
  border: 2px solid #9ecd9a;
  font-size: 24px;
}
.muted {
  color: #99b0c3;
}
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.player-bar h2, .player-bar p { margin: 0 0 6px; font-size: 13px; }
.player-bar p { color: #b8cadb; }
.playmat {
  display: grid;
  grid-template-columns: minmax(110px, .75fr) minmax(0, 1.5fr) minmax(120px, 1fr) minmax(110px, .75fr);
  grid-template-areas: "leader unit unit deck" "leader damage skill trash";
  grid-template-rows: 150px 125px;
  gap: 7px;
}
.opponent-zone .playmat {
  /* Rotate the common mat once; descendants and floating details do not rotate. */
  transform: rotate(180deg);
}
.mat-zone { border: 1px solid #40566c; border-radius: 7px; padding: 7px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mat-zone > h3 { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 0 5px; font-size: 12px; flex: none; }
.zone-count { border-radius: 5px; background: #284052; padding: 1px 6px; font-size: 15px; }
.zone-leader { grid-area: leader; border-color: #9b8260; background: #242222; }
/* Long bilingual names/artwork scroll inside the card; Level/face stay in the zone. */
.zone-leader > .card { flex: 1; min-height: 0; overflow: auto; }
.zone-leader > .level-value, .zone-leader > .leader-face { flex: none; margin: 3px 0 0; line-height: 1.2; }
.zone-leader > .level-value { font-size: 18px; white-space: nowrap; }
.zone-leader > .leader-face { font-size: 12px; }
.zone-leader > h3 .zone-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-unit { grid-area: unit; padding: 0; border: 0; }
.zone-deck { grid-area: deck; background: #182a3a; }
.zone-damage { grid-area: damage; border-color: #805966; background: #241d28; }
.zone-skill { grid-area: skill; border-color: #527e75; background: #172a29; }
.zone-trash { grid-area: trash; background: #21252b; }
.deck-back { flex: 1; min-height: 0; display: grid; place-items: center; border: 2px double #63829d; border-radius: 6px; color: #99b0c3; background: repeating-linear-gradient(135deg, #203447, #203447 8px, #233c50 8px, #233c50 10px); }
.level-value { font-size: 22px; font-weight: 700; color: #f3d197; margin: 8px 0 0; }
.zone-cards { min-height: 0; flex: 1; overflow: auto; align-content: flex-start; gap: 5px; padding: 3px; overflow-anchor: none; }
.zone-damage .zone-cards, .zone-skill .zone-cards { flex-wrap: nowrap; align-items: flex-start; }
.zone-damage .card, .zone-skill .card { flex: 0 0 130px; }
.zone-trash .card { flex: 0 0 100%; }
.playmat .lanes { flex: 1; min-height: 0; gap: 6px; }
.playmat .lane { min-height: 0; min-width: 0; overflow: auto; padding: 6px; overflow-anchor: none; }
.playmat .lane h3 { margin: 0 0 5px; font-size: 12px; color: #99b0c3; }
.lane-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.lane-label { white-space: nowrap; }
.lane-stats { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lane-stat { display: inline-flex; gap: 2px; font-size: 11px; color: #e8eef5; }
.lane-stat .stat-label { font-size: 10px; font-weight: 400; color: #99b0c3; }
.lane-stat[data-stat="power"] strong { color: #f3d197; }
.playmat .lane-unit-card small { display: none; }
.playmat .card, .hand-zone .card { min-width: 0; width: 100%; padding: 6px; font-size: 12px; overflow-wrap: anywhere; }
.playmat .effect, .hand-zone .effect { display: none; }
.playmat .card small, .hand-zone .card small { font-size: 10px; }
.lane .card + .card { margin-top: 4px; }
.empty-zone { color: #99b0c3; font-size: 12px; margin: auto; padding: 6px; }
.hand-zone { margin-top: 7px; min-width: 0; }
.hand-zone h3 { margin: 0 0 4px; font-size: 12px; }
.hand-zone .cards { flex-wrap: nowrap; overflow: auto; padding: 3px; overflow-anchor: none; }
.hand-zone .card { flex: 0 0 150px; }
/* Tall desktops keep the match in the viewport; shorter screens use document flow. */
@media (min-width: 1000px) and (min-height: 720px) {
  header { height: 60px; padding: 8px 20px; }
  main.in-match { height: calc(100dvh - 60px); padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
  .in-match > * { flex-shrink: 0; }
  .match-room { display: flex; align-items: center; gap: 18px; margin: 0; padding: 5px 10px; }
  .match-room .room-code { font-size: 18px; }
  .match-room p { margin: 0; font-size: 12px; }
  .in-match > h2 { margin: 0; font-size: 14px; }
  .in-match > .winner, .in-match > .notice { margin: 0; padding: 5px 10px; font-size: 15px; }
  .in-match .layout { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; }
  .match-board { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
  .player-zone { min-width: 0; min-height: 0; padding: 7px; margin: 0; display: flex; flex-direction: column; }
  .player-bar { flex: none; }
  .playmat { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hand-zone { flex: 0 0 82px; min-height: 0; display: flex; flex-direction: column; }
  .hand-zone .cards { flex: 1; min-height: 0; }
  .match-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .match-sidebar section { padding: 9px; margin: 0; }
  .match-sidebar h2 { margin: 0 0 6px; font-size: 16px; }
  .match-sidebar button { font-size: 13px; padding: 6px 8px; }
  .action-panel { flex: 0 1 auto; max-height: 55%; overflow: auto; }
  .gesture-help { margin: 5px 0; font-size: 11px; }
  .log-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .log-panel > button { align-self: flex-start; flex: none; }
  .log-panel .log { flex: 1; min-height: 0; max-height: none; }
}
@media (max-width: 650px) {
  .playmat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "unit unit" "leader deck" "damage skill" "trash trash"; grid-template-rows: 160px 150px 140px 120px; }
  .player-bar { flex-wrap: wrap; }
}
a {
  color: #a2cffb;
}
.trigger-notice {
  border: 2px solid #ffd166;
  border-left-width: 8px;
  border-radius: 12px;
  background: #302713;
  color: #fff4d1;
  padding: 12px 18px;
  margin: 0;
  flex: 0 0 auto;
  max-height: 30vh;
  overflow: auto;
}
.trigger-notice h2 { margin: 0; font-size: 1.2rem; }
.trigger-notice p { margin: 8px 0; }
.trigger-notice button { margin-left: 16px; }
.log .trigger-log { border-left: 4px solid #ffd166; padding-left: 8px; color: #ffd166; font-weight: 700; }
.card-detail-layout { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); gap: 14px; }
.detail-title { grid-column: 1 / -1; margin: 0; padding: 10px; background: #823b49; color: white; border-radius: 8px; }
.card-art img { display: block; width: 100%; max-height: 460px; object-fit: contain; border-radius: 8px; }
.art-placeholder { border: 2px dashed #70879b; border-radius: 8px; padding: 24px 8px; white-space: pre-line; text-align: center; }
.detail-info { min-width: 0; overflow: auto; max-height: 58vh; }
.detail-info small { display: block; overflow-wrap: anywhere; margin-top: 10px; }
.detail-effect { white-space: pre-wrap; line-height: 1.75; font-size: 16px; }
.ability-badge { display: inline-block; padding: 0 5px; margin: 0 2px; border-radius: 4px; background: #715095; color: white; }
.card-preview { width: min(780px, calc(100vw - 16px)); }
#detail { width: min(850px, 94vw); max-width: 94vw; max-height: 92dvh; overflow: auto; }
.card .card-art.compact img { height: 62px; max-height: 62px; }
.card .card-art.compact { flex: 0 0 auto; }
.card .card-art.compact .art-placeholder { height: 62px; padding: 4px; font-size: 10px; overflow: hidden; }
@media (max-width: 500px) {
  .card-detail-layout { grid-template-columns: minmax(100px, 35%) minmax(0, 1fr); gap: 8px; }
  .detail-effect { font-size: 14px; }
}
@media (max-width: 850px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  header {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }
  .card {
    min-width: 120px;
  }
  .lanes {
    gap: 5px;
  }
  main {
    padding: 10px;
  }
}

#research-browser { width:min(1100px,94vw); max-width:94vw; max-height:88vh; overflow:auto; }
.research-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:12px; }
.research-controls label { display:grid; gap:4px; }
#research-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:12px; }
.research-card { display:flex; flex-direction:column; gap:6px; text-align:left; padding:10px; min-width:0; overflow-wrap:anywhere; }
.research-card .card-art.compact { width:100%; max-height:245px; height:245px; }
.research-card .card-art img { max-height:245px; width:100%; object-fit:contain; }
.attribute-mark { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; white-space:nowrap; }
.attribute-icon { width:18px; height:18px; flex:0 0 18px; object-fit:contain; border-radius:50%; }
.card-meta .attribute-icon,.research-card-identity .attribute-icon { width:14px; height:14px; flex-basis:14px; }
.detail-identity { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.detail-identity .attribute-mark { font-weight:700; }
@media(max-width:520px) { #research-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .research-card .card-art.compact { height:180px; } }

/* Match guidance and hand presentation never determine game legality. */
.phase-center {
  width:min(820px,calc(100% - 24px)); margin:4px auto 8px; padding:7px 14px;
  box-sizing:border-box; text-align:center; border:1px solid #496381; border-radius:14px;
  background:linear-gradient(180deg,#13253f,#0c182c); box-shadow:0 8px 24px #0005;
}
.phase-center-turn { display:flex; justify-content:center; gap:18px; color:#a9bed6; font-size:12px; font-weight:700; }
.phase-center-current { display:flex; align-items:baseline; justify-content:center; gap:10px; margin:3px 0 7px; }
.phase-center-current small { color:#91a9c4; font-size:11px; letter-spacing:.08em; }
.phase-center-current strong { color:#fff1b8; font-size:clamp(20px,2vw,28px); letter-spacing:.04em; text-shadow:0 1px 6px #000; }
.phase-center .phase-progress { justify-content:center; padding:2px 0 0; }
.phase-action-summary { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.phase-action-chip { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border:1px solid #426681; border-radius:999px; color:#d9efff; background:#142b45; font-size:11px; font-weight:800; }
.phase-action-guide { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.phase-action-guide > span { color:#c6d8eb; font-size:12px; font-weight:700; }
.phase-action-panel .phase-advance-button {
  width:100%; min-width:0; min-height:60px; padding:12px 10px; border:1px solid #76d7be; border-radius:10px;
  color:#f7fbff; background:var(--phase-button-main); font-size:17px; font-weight:900; box-shadow:0 4px 14px #0006;
}
/* Phase destinations have distinct colors from affirmative/negative decisions. */
.phase-action-panel .phase-advance-button[data-phase-target="LEVEL"],
.phase-action-panel .phase-advance-button[data-phase-target="DRAW"] {
  border-color:#f0c95f; background:var(--phase-button-level); color:#fff7cf; box-shadow:0 4px 14px #0006,0 0 12px #d7ad3a24;
}
.phase-action-panel .phase-advance-button[data-phase-target="MAIN"] {
  border-color:#84b7f4; background:var(--phase-button-main); color:#f7fbff; box-shadow:0 4px 14px #0006;
}
.phase-action-panel .phase-advance-button[data-phase-target="ATTACK"] {
  border-color:#c1a1f4; background:var(--phase-button-attack); color:#faf7ff; box-shadow:0 4px 14px #0006;
}
.phase-action-panel .phase-advance-button[data-phase-target="END"] {
  border-color:#84d4f4; background:var(--phase-button-end); color:#eefaff; box-shadow:0 4px 14px #0006,0 0 12px #66c9ef24;
}
.phase-action-panel .phase-advance-button[data-phase-target="LEVEL"]:hover:not(:disabled),
.phase-action-panel .phase-advance-button[data-phase-target="DRAW"]:hover:not(:disabled) { background:#8b6b1d; border-color:#ffdb7d; }
.phase-action-panel .phase-advance-button[data-phase-target="MAIN"]:hover:not(:disabled) { filter:brightness(1.2); border-color:#b4d7ff; }
.phase-action-panel .phase-advance-button[data-phase-target="ATTACK"]:hover:not(:disabled) { filter:brightness(1.2); border-color:#d9c7ff; }
.phase-action-panel .phase-advance-button[data-phase-target="END"]:hover:not(:disabled) { background:#2d7290; border-color:#a8e3fa; }
.phase-advance-button:focus-visible { outline:3px solid #f0ce72; outline-offset:2px; }
.phase-progress { display:flex; gap:5px; flex-wrap:wrap; padding:3px 0; }
.phase-progress span { color:#afbdce; padding:3px 7px; border:1px solid #435669; border-radius:5px; font-size:12px; }
.phase-progress [aria-current="step"] { color:#fff2c7; background:#4d4328; border-color:#eccb74; font-weight:700; }
.motion-controls { display:flex; align-items:center; gap:5px; font-size:11px; }
.motion-controls select { max-width:145px; font-size:11px; padding:3px; }
.choice-explanation { border-left:3px solid #e6bc61; padding:8px!important; background:#252f39; }
.choice-explanation p { margin:5px 0; font-size:12px; }
.choice-explanation small { display:block; font-size:11px; color:#ddd2ab; }
.choice-explanation .card-art { width:85px; float:left; margin:4px 8px 4px 0; }
.choice-explanation .card-art img { max-height:120px; }
.choice-explanation .cause-effect { white-space:pre-wrap; overflow-wrap:anywhere; }
.choice-explanation button { clear:both; }

/* Required effect/processing choices are handled in one centered interaction surface.
   This is presentation only: legal options and confirmation still come from server state. */
.choice-modal-backdrop {
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  box-sizing:border-box; padding:22px;
  background:#020711b5; backdrop-filter:blur(2px);
}
.choice-modal-panel {
  box-sizing:border-box; width:min(900px,calc(100vw - 32px)); max-height:min(82dvh,760px);
  margin:0; padding:0; overflow:hidden; display:flex; flex-direction:column;
  border:2px solid #e6bc61; border-radius:16px;
  background:linear-gradient(180deg,#132440 0%,#0d192e 100%);
  box-shadow:0 22px 70px #000d,0 0 0 1px #f1cf7355;
}
.choice-modal-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex:none; padding:14px 18px 12px; border-bottom:1px solid #3e5575;
  background:#10213a;
}
.choice-modal-header h2 { margin:0; font-size:20px; letter-spacing:.02em; }
.choice-modal-progress {
  flex:none; padding:5px 10px; border:1px solid #7e6d3d; border-radius:999px;
  color:#ffe7a1; background:#3b321c; font-weight:800; font-size:13px;
}
.choice-modal-panel > .choice-explanation {
  flex:none; max-height:31dvh; overflow:auto; margin:14px 18px 10px;
  border:1px solid #435979; border-left:4px solid #e6bc61; border-radius:9px;
  background:#18263c;
}
.choice-modal-panel .choice-explanation > strong { font-size:15px; color:#fff0bd; }
.choice-source { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:start; margin-top:9px; }
.choice-source .card-art,.choice-source .card-art.compact { width:96px; height:auto; aspect-ratio:5/7; margin:0; float:none; overflow:hidden; border-radius:7px; background:#0a1426; }
.choice-source .card-art img { width:100%; height:100%; max-height:none; object-fit:contain; }
.choice-source .art-placeholder { display:grid; place-items:center; height:100%; padding:5px; font-size:9px; }
.choice-source-text { min-width:0; }
.choice-source-text p { overflow-wrap:anywhere; }
.choice-order-note { flex:none; margin:0 18px 8px; color:#d8e2f2; font-weight:700; text-align:center; }
.escape-order-guidance { margin:0 0 8px!important; padding:9px 11px; border:1px solid #b88d3c; border-radius:8px; color:#fff0b8; background:#3a2d15; font-weight:800; }
.choice-order-preview {
  flex:none; display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:7px;
  margin:0 18px 8px; padding:8px; border:1px solid #3f5877; border-radius:10px; background:#0b1729;
}
.choice-order-slot { display:flex; align-items:center; gap:6px; min-width:150px; max-width:220px; padding:7px 9px; border:1px dashed #526987; border-radius:8px; color:#8fa4bd; background:#101d31; }
.choice-order-slot strong { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#25364d; color:#d5e3f2; }
.choice-order-slot span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.choice-order-slot.filled { border-style:solid; border-color:#e6bc61; color:#fff2c3; background:#302817; }
.choice-order-slot.filled strong { background:#e6bc61; color:#182033; }
.choice-order-reset { min-height:34px; align-self:center; padding:6px 10px; border-color:#6f7f92; background:#182538; font-size:11px; }
.escape-current-hand { flex:none; margin:0 18px 8px; padding:7px 10px; border:1px solid #526987; border-radius:8px; }
.escape-current-hand summary { cursor:pointer; font-weight:700; color:#dcecff; }
.escape-hand-cards { display:flex; gap:7px; overflow:auto; max-height:145px; padding-top:7px; }
.escape-hand-card { flex:0 0 78px; width:78px; padding:2px; }
.escape-hand-card .card-art.compact,.escape-hand-card .card-art.compact img { width:100%; height:auto; max-height:120px; object-fit:contain; }
.escape-next-panel:has(.escape-current-hand[open]) .choice-card-option { font-size:13px; line-height:1.45; }
.escape-next-panel:has(.escape-current-hand[open]) .choice-card-option .card-art.compact { height:120px; max-height:120px; aspect-ratio:auto; }
.escape-next-panel:has(.escape-current-hand[open]) .choice-card-option .card-art.compact img { height:100%; object-fit:contain; }
.choice-modal-options {
  flex:1 1 auto; min-height:120px; overflow:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr));
  align-content:start; gap:10px; padding:8px 18px 14px;
}
.choice-modal-option {
  min-height:54px; width:100%; box-sizing:border-box; padding:10px 12px;
  text-align:left; border:1px solid #4d668a; border-radius:10px;
  color:#eef6ff; background:#172b49; font-weight:700;
}
.choice-modal-option:hover:not(:disabled) { background:#23466c; border-color:#79b7d5; }
.choice-modal-option.selected {
  border-color:#e6bc61; background:#684f20;
  box-shadow:0 0 0 2px #e6bc6155,0 0 18px #e6bc6133;
}
.choice-option-wrap {
  min-width:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:5px;
}
.choice-card-option {
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
  min-height:0; padding:7px; white-space:pre-line;
}
.choice-card-option .card-art,.choice-card-option .card-art.compact {
  display:block; width:100%; height:auto; max-height:none; aspect-ratio:5/7;
  overflow:hidden; border-radius:7px; background:#091326;
}
.choice-card-option .card-art img,.choice-card-option .card-art.compact img {
  display:block; width:100%; height:100%; max-height:none; object-fit:contain;
}
.choice-card-option .art-placeholder {
  display:grid; place-items:center; height:100%; padding:7px; font-size:10px; text-align:center;
}
.choice-option-detail { padding:5px 8px; font-size:11px; border-color:#526985; background:#142438; }
.choice-modal-footer {
  flex:none; display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:12px 18px 14px; border-top:1px solid #3e5575; background:#0c1729;
}
.choice-modal-footer button { min-width:150px; min-height:42px; font-weight:800; }
.choice-modal-footer .choice-confirm { border-color:#79d2b0; background:#215a4a; }
.choice-modal-footer .choice-confirm:hover:not(:disabled) { background:#2f755f; }
.choice-modal-footer .choice-decline { border-color:#806b62; background:#362724; }
.choice-sidebar-note { padding:7px 9px; border:1px solid #4b5f79; border-radius:7px; background:#101d31; }

@media(max-width:650px) {
  .choice-modal-backdrop { padding:7px; align-items:center; }
  .choice-modal-panel { width:calc(100vw - 14px); max-height:90dvh; border-radius:12px; }
  .choice-modal-header { padding:10px 11px; gap:8px; }
  .choice-modal-header h2 { font-size:17px; }
  .choice-modal-progress { padding:4px 7px; font-size:11px; }
  .choice-modal-panel > .choice-explanation { margin:9px 10px 6px; max-height:28dvh; padding:8px!important; }
  .choice-source { grid-template-columns:72px minmax(0,1fr); gap:7px; }
  .choice-source .card-art,.choice-source .card-art.compact { width:72px; }
  .choice-order-preview { margin:0 10px 6px; padding:6px; gap:5px; }
  .choice-order-slot { min-width:calc(50% - 4px); max-width:none; box-sizing:border-box; padding:5px 6px; }
  .choice-order-slot span { font-size:10px; }
  .choice-modal-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:6px 10px 10px; }
  .choice-modal-option { min-height:48px; padding:8px; font-size:12px; }
  .choice-modal-footer { padding:9px 10px 10px; }
  .choice-modal-footer button { min-width:0; flex:1; min-height:40px; }
}
@media(max-height:560px) {
  .choice-modal-backdrop { padding:5px; }
  .choice-modal-panel { max-height:94dvh; }
  .choice-modal-panel > .choice-explanation { max-height:23dvh; }
  .choice-card-option .card-art,.choice-card-option .card-art.compact { max-height:96px; aspect-ratio:auto; }
}
.opponent-hand-summary { font-size:11px; color:#9fb3c7; }
.card.compact-zone-card { display:flex; flex-direction:column; gap:2px; width:165px; flex:0 0 165px; padding:5px; }
.compact-zone-card > strong { order:1; font-size:11px; line-height:1.2; }
.compact-zone-card > small { order:2; }
.compact-zone-card .verification-badge { order:3; margin:0; padding:0; background:none; color:#dfc285; font-size:9px!important; }
.compact-zone-card .card-art.compact { order:0; overflow:hidden; width:100%; height:104px; flex:0 0 104px; border-radius:6px; }
.compact-zone-card .card-art.compact img { width:100%; height:104px; max-height:104px; object-fit:cover; object-position:var(--hand-x,50%) var(--hand-y,0%); }
.compact-zone-card .card-art.compact .art-placeholder { height:104px; display:grid; place-items:center; }
.hand-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hand-heading h3 { margin:0; }
.hand-heading small { color:#8fa6bf; font-size:10px; white-space:nowrap; }
.hand-zone .cards { padding:14px 5px 5px; }
.hand-zone .hand-card { position:relative; transform-origin:center bottom; transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,filter .12s ease; }
@media(hover:hover) and (pointer:fine) {
 .hand-zone .hand-card:hover,.hand-zone .hand-card:focus-visible { transform:translateY(-8px) scale(1.035); z-index:20; }
}
.hand-card.playable:not(.choice-candidate) { border:2px solid #78e6a0; box-shadow:none; }
.hand-card.playable:not(.choice-candidate):hover,.hand-card.playable:not(.choice-candidate):focus-visible { box-shadow:none; }
.hand-card.choice-candidate { outline:2px solid #e6bc61; box-shadow:0 0 7px #e6bc6160; }
.hand-card.selected { background:#74501b; outline:3px solid #f2c55a; }
.motion-card { position:fixed; z-index:65; pointer-events:none; width:120px; height:160px; overflow:hidden; border:2px solid #92abc2; border-radius:9px; padding:4px; box-sizing:border-box; background:repeating-linear-gradient(135deg,#203447,#203447 8px,#30485b 8px,#30485b 12px); box-shadow:0 8px 20px #0008; font-size:11px; color:white; }
.motion-card img { width:100%; height:100%; object-fit:contain; }
@media(min-width:1000px) and (min-height:720px) {
 .hand-zone { flex-basis:174px; }
 .match-board { grid-template-rows:minmax(0,1fr) minmax(0,1.65fr); }
 .phase-progress { padding:0; }
 .phase-progress span { font-size:11px; padding:2px 6px; }
}
@media(max-width:650px) {
 .card.compact-zone-card { flex-basis:155px; }
 .hand-heading small { display:none; }
 .hand-zone .cards { padding-top:8px; }
 .hand-zone .hand-card:hover,.hand-zone .hand-card:focus-visible { transform:none; }
 .hand-zone .card.compact-zone-card { width:160px; flex-basis:160px; }
 .phase-center { width:calc(100% - 10px); margin:5px auto 8px; padding:8px; border-radius:10px; }
 .phase-center-turn { gap:10px; font-size:10px; }
 .phase-center-current { margin:2px 0 5px; }
 .phase-center-current strong { font-size:20px; }
 .phase-center-current small { font-size:9px; }
 .phase-center .phase-progress { position:static; justify-content:center; background:transparent; z-index:auto; gap:3px; padding:2px 0 6px; }
 .phase-center .phase-progress span { font-size:9px; padding:2px 4px; }
 .phase-action-summary { gap:4px; margin-bottom:4px; }
 .phase-action-chip { min-height:20px; padding:2px 6px; font-size:9px; }
 .phase-action-guide { gap:6px; }
 .phase-action-panel .phase-advance-button { min-width:0; min-height:52px; padding:10px; font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .hand-card { transition:none; } }
@media(min-width:1000px) and (min-height:720px) {
 /* Keep a full hand and both lane-stat rows visible even after a trigger/winner banner. */
 .in-match .trigger-notice { max-height:72px; padding:5px 10px; overflow:auto; }
 .in-match .trigger-notice h2 { display:inline; font-size:14px; }
 .in-match .trigger-notice p { display:inline; margin:0 8px; font-size:12px; }
 .in-match .trigger-notice button { margin:0 5px; padding:4px 6px; font-size:12px; }
}
@media(min-width:1000px) and (min-height:720px) {
 /* Text-only ST01 cards do not need the artwork row's reserved height. */
 .hand-zone { flex-basis:82px; }
 .hand-zone:has(.card-art) { flex-basis:174px; }
 .hand-zone .cards { align-items:flex-start; }
}


/* Match crops start at the printed card's top; full detail art stays contain. */
.zone-unit .card .card-art.compact img { object-fit:cover; object-position:center top; }
.compact-zone-card:has(> .card-art > img) > .card-name { display:none; }

/* Portrait units use the available lane height; attached cards fan behind them. */
.playmat .lane { display:flex; flex-direction:column; overflow:hidden; }
.lane-heading { flex:none; }
/* Put both players' C/P/H rows toward the center line for quick comparison:
   own stats stay above the unit; opponent stats sit below the opponent unit. */
.opponent-zone .lane-heading { order:3; margin:5px 0 0; }
.opponent-zone .lane-cards { order:1; }
.opponent-zone .empty-zone { order:1; }
.own-zone .lane-heading { order:0; }
.own-zone .lane-cards,.own-zone .empty-zone { order:1; }
.lane-cards { flex:1; min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,165px); justify-content:center; gap:4px; }
.lane-cards > .lane-unit-card { grid-column:1; grid-row:1; display:flex; flex-direction:column; min-height:0; max-width:165px; gap:2px; }
.lane-cards > .lane-unit-card .card-art.compact { order:0; flex:1; min-height:0; width:100%; overflow:hidden; max-height:235px; }
.lane-cards > .lane-unit-card .card-art.compact img { width:100%; height:100%; max-height:235px; object-fit:contain; object-position:center top; }
.lane-cards > .lane-unit-card > strong { order:1; font-size:10px; line-height:1.1; }
.lane-cards > .lane-unit-card > .verification-badge { display:block; order:3; background:none; margin:0; padding:0; font-size:8px; color:#dfc285; }
.lane-cards .effect { display:none; }
/* Equipment fans out below/left of its host, retaining a separate hit target per card. */
.lane-cards.has-equipment {
 --field-card-width:clamp(132px,10vw,165px);
 --field-card-height:calc(var(--field-card-width) * 88 / 63);
 --equipment-step-x:28px;
 --equipment-step-y:calc(var(--field-card-height) * .30);
 position:relative; isolation:isolate; display:block; flex:none;
 width:calc(var(--field-card-width) + var(--equipment-count) * var(--equipment-step-x));
 height:calc(var(--field-card-height) + var(--equipment-count) * var(--equipment-step-y) + 30px);
 margin:0 auto;
}
/* Text-only ST01 cards retain the compact board height; artwork keeps its full ratio. */
.lane-cards.has-equipment:not(:has(.card-art)) { --field-card-height:72px; }
.has-equipment > .lane-unit-card, .lane-equipment > .attached-card {
 position:absolute; width:var(--field-card-width); height:var(--field-card-height);
 padding:0; margin:0!important; min-width:0; overflow:hidden; border-radius:6px;
 box-shadow:0 2px 5px #0008;
}
.has-equipment > .lane-unit-card { left:calc(var(--equipment-count) * var(--equipment-step-x)); top:0; z-index:2; }
.lane-equipment { position:absolute; inset:0; }
.lane-equipment > .attached-card {
 left:calc((var(--equipment-count) - var(--equipment-order)) * var(--equipment-step-x));
 top:calc(var(--equipment-order) * var(--equipment-step-y));
 z-index:calc(100 - var(--equipment-order));
}
.lane-equipment { z-index:1; }
.has-equipment > .lane-unit-card .card-art.compact, .lane-equipment > .attached-card .card-art.compact {
 width:100%; height:100%; max-height:none; flex:none;
}
.has-equipment > .lane-unit-card .card-art.compact img, .lane-equipment > .attached-card .card-art.compact img {
 width:100%; height:100%; max-height:none; object-fit:contain; object-position:center top;
}
.has-equipment .card:has(.card-art) > .card-name, .has-equipment .card > small { display:none; }
.has-equipment .card:not(:has(.card-art)) { padding:5px; }
.lane-equipment > .attached-card:not(:has(.card-art)) .effect { display:block; font-size:10px; }
.attached-card:has(.art-placeholder:not([hidden])) > .effect { display:block; position:absolute; bottom:3px; left:4px; right:4px; max-height:32%; overflow:hidden; font-size:9px; line-height:1.3; background:#142433; }
.equipment-cost { position:absolute; top:3px; left:2px; min-width:22px; text-align:center; font-size:16px; line-height:24px; font-weight:700; background:#142433; border:1px solid #c2d4e7; border-radius:4px; }
.lane-equipment > .equipment-list { position:absolute; left:0; bottom:0; width:auto; max-width:none; height:26px; flex-direction:row; padding:2px 5px; border-color:#627991; }
.equipment-list .stack-icon { display:none; }
.equipment-list .stack-caption { font-size:11px; }
.attached-card:focus-visible { outline-offset:-3px; }
/* A fan needs its natural height; page flow keeps every exposed strip reachable. */
.playmat:has(.has-equipment .card-art) { grid-template-rows:auto minmax(76px,auto); }
.playmat .lane:has(.has-equipment):not(:has(.card-art)) { overflow:auto; }
.playmat .lane:has(.has-equipment):not(:has(.card-art)) .lane-heading { position:sticky; top:0; z-index:3; background:#101821; }
.playmat:has(.has-equipment) .lanes { display:flex; overflow-x:auto; align-items:stretch; }
.playmat:has(.has-equipment) .lane { flex:1 0 180px; min-width:max-content; overflow:visible; }
@media(min-width:1000px) and (min-height:720px) {
 main.in-match:has(.has-equipment .card-art) { height:auto; overflow:visible; }
 .in-match:has(.has-equipment .card-art) .match-board { display:flex; flex-direction:column; }
}
@media(max-width:650px) {
 .playmat:has(.has-equipment) { grid-template-rows:auto 150px 140px 120px; }
}
@media(max-width:850px) {
 .playmat:has(.has-equipment) .lanes { display:grid; grid-template-columns:1fr; overflow:visible; }
 .playmat:has(.has-equipment) .lane { min-width:0; }
}
@media(min-width:1000px) and (min-height:720px) {
 .playmat { grid-template-rows:minmax(0,1.7fr) minmax(0,1fr); }
}

/* Public piles share one compact icon and one modeless list. No card identity on backs. */
.zone-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:78px; min-width:0; padding:4px; background:transparent; border:1px solid transparent; }
.stack-icon { position:relative; display:block; width:60px; height:56px; }
.stack-back { position:absolute; width:35px; height:46px; border:2px solid #64aaa7; border-radius:4px; background:linear-gradient(135deg,#204865,#133346); box-shadow:0 2px 3px #0008; top:5px; left:4px; transform:rotate(-12deg); }
.stack-back:nth-child(2) { left:11px; top:3px; transform:rotate(-6deg); }
.stack-back:nth-child(3) { left:18px; top:1px; transform:none; }
.stack-back:nth-child(3)::after { content:'◆'; display:block; color:#79d5bf; text-align:center; line-height:40px; font-size:24px; }
.stack-count { position:absolute; right:0; top:0; min-width:22px; padding:2px 4px; border-radius:10px; color:#d8f8ee; background:#102f36; border:1px solid #619690; font-size:13px; font-weight:bold; }
.stack-caption { font-size:11px; color:#d7e5eb; }
.zone-stack.choice-candidate { border-color:#e5c063; }
.lane-equipment .zone-stack { width:100%; max-width:78px; }
.zone-popup { position:fixed; z-index:35; box-sizing:border-box; width:min(570px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); padding:10px; border:1px solid #668696; border-radius:10px; background:#142433; box-shadow:0 8px 28px #0009; }
.zone-popup[hidden] { display:none; }
.zone-popup > header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.zone-popup h3 { margin:0; font-size:14px; }
.zone-popup-close { padding:4px 8px; }
.zone-popup .zone-popup-cards { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; max-height:calc(100dvh - 88px); overflow:auto; margin-top:8px; }
.zone-popup .effect { display:none; }
.zone-popup .card > small { font-size:10px; }
@media(min-width:1000px) and (min-height:720px) {
 .playmat { grid-template-rows:minmax(0,1.7fr) minmax(0,1fr); }
}
.zone-stack { padding:2px; }
.lane-equipment .stack-icon { transform:scale(.72); transform-origin:center; margin:-7px; }
.card-preview { z-index:40; }

/* Pile rows flex with the board after winner/trigger banners; never starve lane headings. */
.mat-zone > .zone-stack { flex:1; min-height:0; max-height:76px; padding:0; gap:0; }
.mat-zone > .zone-stack .stack-caption { display:none; }
.mat-zone > .zone-stack .stack-icon { flex:1; min-height:0; max-height:56px; }
.mat-zone > .zone-stack .stack-back { height:calc(100% - 8px); width:auto; aspect-ratio:35 / 46; }
.zone-trash > h3, .zone-damage > h3, .zone-skill > h3 { margin-bottom:2px; }
.zone-trash > h3 .zone-count, .zone-damage > h3 .zone-count, .zone-skill > h3 .zone-count { font-size:11px; line-height:1.2; padding:1px 5px; }
.mat-zone > .zone-stack .stack-count { font-size:10px; line-height:12px; padding:1px 3px; }
.mat-zone > .zone-stack .stack-back { overflow:hidden; }
.mat-zone > .zone-stack .stack-back:nth-child(3)::after { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
.damage-row { display:flex; flex:1; min-height:0; min-width:0; gap:3px; }
.damage-strip { display:flex; flex:1; min-width:0; min-height:30px; max-height:96px; overflow-x:auto; overflow-y:hidden; padding:1px; isolation:isolate; }
.playmat .damage-card { position:relative; flex:0 0 54px; width:54px; max-width:54px; height:100%; min-width:0; padding:0; margin:0 -26px 0 0; z-index:var(--damage-order); overflow:hidden; }
.playmat .damage-card:last-child { margin-right:0; }
.damage-card .card-art.compact { width:100%; height:100%; }
.damage-card .card-art.compact img { width:100%; height:100%; max-height:none; object-fit:contain; }
.damage-card > small, .damage-card:has(.card-art) > .card-name { display:none; }
.damage-card > .card-name { font-size:8px; padding:20px 2px 0; }
.damage-cost { position:absolute; left:1px; top:1px; min-width:20px; font-weight:700; font-size:12px; line-height:18px; text-align:center; background:#142433; border-radius:3px; border:1px solid #c2d4e7; }
.damage-list { flex:0 0 28px; width:28px; padding:2px; }
.damage-list .stack-icon { display:none; }
.damage-list .stack-caption { font-size:10px; }
.log-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.log-heading h2 { margin:0; }
.log-heading button { font-size:11px; padding:4px 6px; }
.log-panel.is-collapsed { flex:none; min-height:0!important; max-height:none!important; }
.log[hidden] { display:none!important; }
.available-actions-panel { flex:none; padding:10px!important; border:1px solid #47617f!important; background:linear-gradient(180deg,#12213a,#0c172a)!important; }
.available-actions-panel h2 { margin:0 0 8px!important; font-size:14px!important; color:#e7f0ff; }
.available-action-rows { display:grid; gap:6px; }
.available-action-row { box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:5px 8px; border:1px solid #3c5674; border-radius:8px; background:#152944; color:#d8e9f9; }
.available-action-row strong { display:grid; place-items:center; min-width:34px; height:32px; border-radius:999px; background:#265a65; color:#f2ffff; font-size:20px; font-weight:900; }
.available-action-row.is-zero { opacity:.28; }
.available-action-row.is-zero strong { background:#29384c; color:#a6b5c7; }
.available-action-row:not(.is-zero) { border-color:#5d9b9d; color:#f0fffc; }
.phase-action-panel { position:sticky; bottom:8px; z-index:22; margin-top:auto!important; flex:none; padding:10px!important; background:#0e1b32f5!important; box-shadow:0 -5px 18px #081020bb; }
.phase-action-guide > span { text-align:center; }
.available-action-status { display:block; margin-top:7px; color:#91a6be; font-size:10px; text-align:center; }
@media(min-width:1000px) {
 main.in-match.wide-board { max-width:none; }
 .in-match.wide-board .layout { grid-template-columns:minmax(0,1fr) 210px; }
 .in-match.wide-board .motion-controls { flex-wrap:wrap; }
 .in-match.wide-board .motion-controls select { max-width:110px; }
}
.zone-trash > h3 .zone-label, .zone-damage > h3 .zone-label, .zone-skill > h3 .zone-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zone-trash > h3 .zone-count, .zone-damage > h3 .zone-count, .zone-skill > h3 .zone-count { flex:none; }

@media(min-width:1000px) and (min-height:720px) {
 /* Full art hands/banners may need more room: scroll the board, keeping leader cards usable. */
 .match-board { overflow-y:auto; grid-template-rows:minmax(180px,1fr) minmax(280px,1.65fr); }
 .match-board:has(.own-zone .hand-zone .card-art) { grid-template-rows:minmax(180px,1fr) minmax(372px,1.65fr); }
 .playmat { min-height:140px; }
}

#deck-editor > .deck-research-controls { grid-column: 1 / -1; }
.deck-research-controls select { width: 100%; }
.deck-research-controls p { margin: 6px 0 0; }
.deck-card-row[data-deck-research-card] { grid-template-columns: minmax(0, 1fr); }

#deck-editor[open].has-research { grid-template-rows: auto auto auto auto auto auto minmax(180px, 1fr) auto auto auto; }

/* Desktop battle table: matching lane indices share a column. Opponent text/art stays upright. */
:root { --ink:#e9efff; --muted:#95a8c8; --edge:#344767; --surface:#101c33; --attack:#ffb56c; --target:#69dcff; background:#080f20; color:var(--ink); }
body { background:radial-gradient(ellipse at 50% 20%,#192b49 0,transparent 65%),#080f20; }
body > header { background:#0c1528ed; border-color:#293c5c; }
button,select,input { border-color:#3d5379; background:#1a2c49; }
button:hover:not(:disabled) { background:#29446b; }
.in-match .player-zone { background:linear-gradient(135deg,#142340ee,#0c182e); border-color:#34496c; border-radius:12px; box-shadow:0 5px 18px #0003; }
.in-match .own-zone { border-color:#3e727e; }
.in-match .player-zone.is-active-player { border-color:#d7b96b; box-shadow:0 0 0 1px #d7b96b55,0 0 22px #d7b96b24,0 5px 18px #0003; }
.in-match .player-zone.is-active-player .player-bar { position:relative; }
/* White is painted into field backgrounds only: never apply opacity/filter to a player subtree.
   Inset shadows are below child cards, including equipment and damage strips. */
.in-match .player-zone.is-active-player {
 background:linear-gradient(#ffffff18,#ffffff18),linear-gradient(135deg,#142340ee,#0c182e);
}
.in-match .player-zone.is-active-player .mat-zone,
.in-match .player-zone.is-active-player .playmat .lane {
 box-shadow:inset 0 0 0 9999px #ffffff12;
}
.active-turn-badge { flex:none; margin-left:auto; padding:3px 8px; border:1px solid #d8bc72; border-radius:999px; color:#fff0bd; background:#3b311c; font-size:10px; font-weight:900; letter-spacing:.08em; }
.player-bar h2 { letter-spacing:.04em; font-size:13px; }
.player-bar p,.opponent-hand-summary { color:var(--muted); }
.match-board { position:relative; isolation:isolate; }
.opponent-zone .playmat { transform:none; grid-template-areas:"leader damage skill trash" "leader unit unit deck"; }
.playmat { grid-template-columns:minmax(150px,.8fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(58px,.32fr); grid-template-areas:"leader unit unit deck" "leader damage skill trash"; grid-template-rows:minmax(160px,auto) 62px; gap:8px; }
.opponent-zone .playmat { grid-template-rows:62px minmax(160px,auto); }
.mat-zone { background:#0b162a; border-color:#304462; border-radius:8px; padding:6px; }
.mat-zone > h3 { color:var(--muted); font-size:10px; letter-spacing:.04em; }
.zone-leader { align-items:center; justify-content:center; border-color:#6f664e; background:linear-gradient(145deg,#202b40,#131e32); }
.zone-leader > h3 { width:100%; }
.zone-leader > .leader-card { display:block; flex:none; width:100%; max-width:260px; min-height:64px; overflow:hidden; padding:0; border-color:#bdad7a; background:#111c30; }
.leader-card > .card-name,.leader-card > small,.leader-card > .effect { display:none; }
.leader-art { position:relative; width:100%; aspect-ratio:369 / 256; overflow:hidden; border-radius:6px; display:grid; place-items:center; }
.leader-art .leader-pair { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.zone-leader > .leader-card .leader-art .leader-pair img { position:absolute; left:0; top:0; width:100%; height:201.171875%; max-height:none; object-fit:fill; border-radius:0; }
.zone-leader > .leader-card .leader-art[data-face="awakened"] .leader-pair img { top:-100.78125%; }
.zone-leader > .leader-card .leader-art .art-placeholder { height:100%; display:grid; place-items:center; padding:5px; }
.zone-leader > .leader-card .leader-art .art-placeholder[hidden] { display:none; }
.zone-leader > .level-value { font-size:18px; letter-spacing:.03em; }
.zone-leader > .leader-face { font-size:10px; color:#c0cae0; }
/* The real leader retains its layout and action binding while its visual copy travels. */
.leader-card.is-awakening-source > .leader-art { visibility:hidden; }
.leader-awakening { position:fixed; inset:0; z-index:60; display:grid; place-items:center; pointer-events:none; }
.leader-awakening-card { position:relative; width:min(380px,46vw,calc(58dvh * 369 / 256)); aspect-ratio:369 / 256; perspective:1000px; }
.leader-awakening-card::before { content:''; position:absolute; inset:-18%; border-radius:50%; background:radial-gradient(ellipse,#aee5ff42,transparent 70%); }
.leader-awakening-flip { position:absolute; inset:0; transform-style:preserve-3d; }
.leader-awakening-flip.is-awakened { transform:rotateY(180deg); }
.leader-awakening-card .leader-art { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; backface-visibility:hidden; border:1px solid #d8eaff; box-sizing:border-box; box-shadow:0 0 24px #9bddff66,0 12px 38px #0008; }
.leader-awakening-card .leader-awakening-awakened { transform:rotateY(180deg); }
.leader-awakening-card .leader-pair img { position:absolute; left:0; top:0; width:100%; height:201.171875%; max-height:none; object-fit:fill; border-radius:0; }
.leader-awakening-card .leader-art[data-face='awakened'] .leader-pair img { top:-100.78125%; }
.leader-awakening-card .art-placeholder { height:100%; display:grid; place-items:center; background:#111c30; }
.leader-awakening-card .art-placeholder[hidden] { display:none; }
.leader-awakening-label { position:absolute; bottom:calc(100% + 14px); left:-10%; width:120%; text-align:center; color:#f2f8ff; font-weight:800; font-size:clamp(13px,1.5vw,20px); text-shadow:0 2px 8px #000; }
@media (prefers-reduced-motion:reduce) { .leader-awakening-card::before { display:none; } }
.zone-unit,.zone-unit > h3 { background:none; }
.playmat .lanes,.playmat:has(.has-equipment) .lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:10px; }
.playmat .lane,.playmat:has(.has-equipment) .lane { container-type:inline-size; min-width:0; min-height:150px; overflow:visible; padding:5px; background:linear-gradient(#16274055,#0b152855); border:1px solid #304663; border-radius:9px; }
.lane-heading { justify-content:center; }
.lane-stats { width:100%; justify-content:center; gap:8px; }
.lane-stat { font-size:12px; }
.lane-stat strong { font-size:14px; }
.lane-cards,.lane-cards.has-equipment { --equipment-step-x:clamp(10px,1.15vw,18px); --equipment-step-y:0px; --field-card-width:clamp(112px,12vw,176px); --field-card-height:calc(var(--field-card-width) * 88 / 63); position:relative; isolation:isolate; display:block; flex:none; width:100%; max-width:none; height:var(--field-card-height); min-width:0; margin:0 auto; }
.lane-cards:not(:has(.card-art)),.lane-cards.has-equipment:not(:has(.card-art)) { --field-card-height:82px; }
.lane-cards > .lane-unit-card,.has-equipment > .lane-unit-card { position:absolute; left:50%; top:0; translate:-50% 0; width:var(--field-card-width); max-width:100%; height:var(--field-card-height); margin:0; padding:0; z-index:120; overflow:hidden; border-radius:7px; box-shadow:0 4px 9px #0006; }
/* Equipping must not shrink the host unit. Keep the same portrait width as an unequipped unit;
   the equipment fan may use the lane's overflow/overlap space instead. */
.lane-cards.has-equipment { --field-card-width:min(clamp(112px,12vw,176px),100cqw); }
.lane-cards.has-equipment > .lane-unit-card { left:calc(50% + var(--equipment-count) * var(--equipment-step-x) / 2); }
.lane-cards > .lane-equipment { z-index:auto; }
.lane-equipment > .attached-card { left:calc(50% + var(--equipment-count) * var(--equipment-step-x) / 2 - var(--equipment-order) * var(--equipment-step-x)); top:0; translate:-50% 0; width:var(--field-card-width); height:var(--field-card-height); z-index:calc(100 - var(--equipment-order)); }
.lane-equipment > .attached-card:hover,.lane-equipment > .attached-card:focus-visible { z-index:130!important; box-shadow:0 0 0 2px #7bd7ef,0 5px 16px #000a; }
.lane-cards .card-art.compact,.lane-cards > .lane-unit-card .card-art.compact { width:100%; height:100%; max-height:none; }
.lane-cards > .lane-unit-card .card-art.compact { flex:none; }
.lane-cards .card-art.compact img,.lane-cards > .lane-unit-card .card-art.compact img { width:100%; height:100%; max-height:none; object-fit:cover; object-position:center top; }
.lane-cards .card:has(.card-art) > .card-name,.lane-cards > .lane-unit-card > small { display:none; }
.lane-cards .card:not(:has(.card-art)) { padding:5px; }
/* Browser tabletop: reserve the same lane-frame height even when a unit slot is empty.
   Use the occupied portrait-card height so placing/removing a unit never resizes the lane. */
.browser-board .playmat .lane,
.browser-board .playmat:has(.has-equipment) .lane {
 min-height:calc(clamp(112px,12vw,176px) * 88 / 63 + 56px);
 padding-bottom:27px!important;
}
.lane-equipment > .equipment-list { left:0; bottom:-22px; height:21px; width:auto; max-width:none; }
.lane:has(.has-equipment) { padding-bottom:27px!important; }
.equipment-cost { left:0; top:2px; min-width:var(--equipment-step-x); width:var(--equipment-step-x); font-size:11px; line-height:19px; border-radius:3px; }
.playmat:has(.has-equipment .card-art),.playmat:has(.has-equipment) { grid-template-rows:minmax(160px,auto) 62px; }
.opponent-zone .playmat:has(.has-equipment) { grid-template-rows:62px minmax(160px,auto); }
.zone-deck .deck-back { font-size:11px; min-height:45px; }
.zone-damage { background:#241b31; }
.zone-skill { background:#112a30; }
.zone-trash { background:#172035; }
.damage-strip { max-height:40px; min-height:22px; }
.zone-count { background:#253858; color:#e7efff; }
.in-match .match-sidebar > section { background:#0e1b32; border-color:#34496c; border-radius:10px; }
.in-match .trigger-notice { background:#322b1e; border-color:#a88844; }
.phase-progress [aria-current="step"] { background:#3a3444; border-color:#d6b979; box-shadow:0 0 12px #d6b97914; }
.log p { border-bottom:1px solid #253650; padding:7px 0; margin:0; }
.log p:first-child { color:#eff6ff; border-left:2px solid #79bdcf; padding-left:7px; background:#22385455; }
.combat-source { outline:3px solid var(--attack)!important; box-shadow:0 0 22px #ffab6599!important; }
.combat-target { outline:3px solid var(--target)!important; box-shadow:0 0 22px #69dcff99!important; }
[data-combat]::after { content:attr(data-combat); position:absolute; bottom:2px; left:2px; right:2px; border-radius:3px; padding:3px 2px; text-align:center; font-size:10px; font-weight:700; background:#1b1b2be8; color:var(--ink); z-index:4; }
.zone-damage.combat-target { position:relative; }
.combat-status { position:sticky; top:0; z-index:7; flex:none; grid-column:1 / -1; padding:7px 12px; border:1px solid #9b8059; border-radius:8px; color:#f2e2c6; background:#17223aef; font-size:12px; }
.combat-line { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:hidden; }
.combat-line > path { fill:none; stroke:#ffba79; stroke-width:3; stroke-dasharray:8 5; filter:drop-shadow(0 0 4px #ffc38d); }
@media(min-width:1000px) {
 main.in-match { max-width:1800px; padding:8px 12px; height:auto; min-height:calc(100dvh - 60px); overflow:visible; display:flex; flex-direction:column; gap:6px; }
 .in-match.wide-board { max-width:none; }
 .in-match .layout { display:grid; grid-template-columns:minmax(0,1fr) 248px; flex:1; min-height:0; align-items:start; }
 .in-match.wide-board .layout { grid-template-columns:minmax(0,1fr) 220px; }
 .match-board,.in-match:has(.has-equipment .card-art) .match-board { display:flex; flex-direction:column; gap:8px; overflow:visible; min-height:0; }
 .player-zone { margin:0; padding:8px; }
 .playmat { flex:none; min-height:0; }
 .player-bar { min-height:22px; }
 .player-bar h2,.player-bar p { margin:0 0 4px; }
 .zone-unit > h3 { display:none; }
 .in-match .match-sidebar { position:sticky; top:8px; height:calc(100dvh - var(--sidebar-top,260px) - 8px); max-height:calc(100dvh - 16px); display:flex; flex-direction:column; gap:8px; }
 .action-panel { min-height:88px; max-height:46dvh; flex:1 1 auto; overflow:auto; }
 .match-sidebar .phase-action-panel { position:static; }
 .log-panel { min-height:88px; max-height:25dvh; flex:0 1 auto; overflow:auto; }
 .log-panel:not(.is-collapsed) .log { min-height:16px; }
 .hand-zone,.hand-zone:has(.card-art) { flex:none; margin-top:7px; }
 .hand-zone .cards { max-height:196px; }
 .hand-zone .card.compact-zone-card { width:176px; flex-basis:176px; }
 .hand-zone .compact-zone-card .card-art.compact,
 .hand-zone .compact-zone-card .card-art.compact img,
 .hand-zone .compact-zone-card .card-art.compact .art-placeholder { height:114px; max-height:114px; }
}
@media(max-width:999px) and (min-width:651px) {
 .layout { grid-template-columns:minmax(0,1fr); }
 .playmat { grid-template-columns:minmax(120px,.65fr) minmax(0,1.5fr) minmax(0,1.5fr) 55px; }
 .lane-cards,.lane-cards.has-equipment { --field-card-width:min(clamp(88px,14vw,138px),100cqw); }
 .browser-board .playmat .lane,.browser-board .playmat:has(.has-equipment) .lane { min-height:calc(clamp(88px,14vw,138px) * 88 / 63 + 56px); }
}
@media(max-width:650px) {
 .playmat,.opponent-zone .playmat { grid-template-columns:1fr 1fr; grid-template-areas:"unit unit" "leader deck" "damage skill" "trash trash"; grid-template-rows:auto auto 70px 65px; }
 .playmat:has(.has-equipment),.opponent-zone .playmat:has(.has-equipment) { grid-template-rows:auto auto 70px 65px; }
 .playmat .lanes,.playmat:has(.has-equipment) .lanes { gap:4px; }
 .playmat .lane,.playmat:has(.has-equipment) .lane { padding:3px; min-height:146px; }
 .browser-board .playmat .lanes { container-type:inline-size; }
 /* One equipped card can be wider than the regular mobile card; reserve its height too. */
 .browser-board .playmat .lane,.browser-board .playmat:has(.has-equipment) .lane { min-height:calc(max(clamp(62px,22vw,120px), (100cqw - 8px) / 3 - 16px) * 88 / 63 + 56px); }
 .lane-cards,.lane-cards.has-equipment { --field-card-width:clamp(62px,22vw,120px); --equipment-step-x:8px; }
 .lane-cards.has-equipment { --field-card-width:min(clamp(62px,22vw,120px),100cqw); }
 .lane-stat,.lane-stat strong { font-size:10px; }
 .lane-stats { gap:3px; }
 .zone-leader > .leader-card { max-width:220px; }
 .combat-status { font-size:11px; }
}
/* Keep pile counters inside the narrow deck/trash column. */
.mat-zone > .zone-stack { width:100%; max-width:100%; }
.mat-zone > .zone-stack .stack-icon { max-width:100%; }
/* Activity tables share the navy palette and card presentation of the battle board. */
.activity-lobby{max-width:1080px;margin:3vh auto;padding:clamp(18px,3vw,40px);border:1px solid #31486b;border-radius:22px;background:linear-gradient(145deg,#111e35,#080f20);box-shadow:0 24px 80px #0006}
.activity-lobby h2{font-size:clamp(24px,3vw,36px);letter-spacing:.06em;color:#e3efff}.activity-lobby>p{color:#a9bbd6;line-height:1.7}
.activity-table-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:24px 0}
.activity-table-card{padding:26px;border:1px solid #3c5478;border-radius:16px;background:linear-gradient(160deg,#1c2d48,#101b30)}
.activity-table-card h3{font-size:25px;margin:0 0 18px;color:#f3f7ff}.activity-table-card p{color:#bdd0e9}.activity-table-card button{margin:10px 8px 0 0;min-height:46px;padding:10px 20px;border-radius:9px;background:#24538b;border:1px solid #6693ca;color:#f3f8ff;font-weight:700}.activity-table-card button:disabled{opacity:.4}
.activity-table-card[data-table-status="PLAYING"]{border-color:#57a8d0}.activity-table-card[data-table-status="FINISHED"]{border-color:#c6a461}
.activity-table-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;border:1px solid #344e73;border-radius:12px;background:#0b1628;margin-bottom:12px}.activity-table-controls>span{font-weight:700;color:#bcd8ff}.activity-table-controls h2{color:#ebca84}.activity-table-controls p{flex-basis:100%;margin:4px 0;color:#b8cbe4}.activity-table-controls button{min-height:40px;padding:8px 16px;border-radius:8px}.activity-leave-confirm{flex-basis:100%;padding:14px;border:1px solid #d29b59;border-radius:10px;background:#2c211c}.activity-leave-confirm button{margin-right:10px}
@media(max-width:700px){.activity-table-grid{grid-template-columns:1fr}.activity-lobby{margin:12px}.activity-table-controls{align-items:stretch}}
/* Image-first deck editor. All selectors are scoped away from the match board. */
#deck-editor { width:min(1900px,99vw); max-width:99vw; height:98dvh; max-height:98dvh; padding:12px; background:#0d172b; border:1px solid #385471; border-radius:16px; }
#deck-editor[open], #deck-editor[open].has-research { display:flex; flex-direction:column; gap:10px; overflow:hidden; }
#deck-editor p, #deck-editor h2, #deck-editor h3 { margin:0; }
#deck-editor > p { font-size:11px; color:#9db0c9; flex:none; }
.deck-editor-header { display:grid; grid-template-columns:auto minmax(180px,1fr) minmax(260px,1.4fr); gap:8px; align-items:center; flex:none; }
.deck-current-leader { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:7px; color:#c8d8ec; font-size:12px; overflow:hidden; }
.deck-current-leader strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deck-current-leader .attribute-icon { width:20px; height:20px; flex-basis:20px; }
.deck-leader-picker { flex:none; min-width:0; margin-bottom:0; padding:0; border:1px solid #293e5b; border-radius:10px; background:#0d1a30; overflow:hidden; }
.deck-leader-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; color:#b9cee7; cursor:pointer; user-select:none; list-style:none; }
.deck-leader-summary::-webkit-details-marker { display:none; }
.deck-leader-summary::before { content:'▶'; flex:none; color:#78c9e7; font-size:10px; transition:transform .12s ease; }
.deck-leader-picker[open] .deck-leader-summary::before { transform:rotate(90deg); }
.deck-leader-summary strong { font-size:13px; }
.deck-leader-summary span { margin-left:auto; color:#8fa9c5; font-size:11px; }
.deck-leader-picker[open] .deck-leader-summary { border-bottom:1px solid #293e5b; background:#10213a; }
.deck-leader-grid { display:grid; grid-auto-flow:column; grid-auto-columns:112px; gap:10px; overflow-x:auto; overflow-y:hidden; padding:10px 12px 12px; scrollbar-width:thin; }
#deck-editor .deck-leader-choice { position:relative; display:flex; flex-direction:column; gap:6px; width:112px; min-width:112px; padding:6px; border:2px solid #344b69; border-radius:10px; background:#0a1426; color:#e9efff; }
#deck-editor .deck-leader-choice:hover:not(:disabled) { background:#142a46; border-color:#5f7c9d; }
#deck-editor .deck-leader-choice[aria-pressed="true"],#deck-editor .deck-leader-choice.selected { border-color:#5de8ff; box-shadow:0 0 0 1px #39c5ef,0 0 14px #31c5ed70; background:#102c43; }
#deck-editor .deck-leader-choice .card-art.compact { width:100%; height:auto; aspect-ratio:5/7; overflow:hidden; border-radius:6px; background:#091326; }
#deck-editor .deck-leader-choice .card-art.compact img { width:100%; height:100%; max-height:none; object-fit:contain; }
#deck-editor .deck-leader-choice > .leader-art { position:relative; width:100%; aspect-ratio:369 / 256; overflow:hidden; border-radius:7px; background:#091326; }
#deck-editor .deck-leader-choice > .leader-art .leader-pair { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; overflow:hidden; border-radius:0; }
#deck-editor .deck-leader-choice > .leader-art .leader-pair img { position:absolute; left:0; top:-100.78125%; width:100%; height:201.171875%; max-height:none; object-fit:fill; border-radius:0; }
#deck-editor .deck-leader-choice > .leader-art .art-placeholder { height:100%; display:grid; place-items:center; padding:4px; font-size:8px; }
#deck-editor .deck-leader-choice .art-placeholder { display:grid; place-items:center; height:100%; padding:3px; font-size:8px; overflow:hidden; }
.deck-leader-caption { display:flex; flex-direction:column; align-items:flex-start; min-width:0; gap:2px; text-align:left; }
.deck-leader-caption strong,.deck-leader-caption small { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deck-leader-caption strong { font-size:11px; color:#bcd2ea; }
.deck-leader-caption small { font-size:11px; color:#eef5ff; }
.deck-leader-caption .attribute-mark { font-size:10px; }
.deck-leader-caption .attribute-icon { width:15px; height:15px; flex-basis:15px; }
#deck-count { grid-column:1/-1; color:#b4eafa; font-weight:800; padding:6px 10px; border:1px solid #365a78; border-radius:8px; background:#0a2037; font-variant-numeric:tabular-nums; }
#deck-count.deck-count-complete { color:#c8ffe8; border-color:#3b9276; background:#103326; }
#deck-count.deck-count-warning { color:#ffd6a0; border-color:#a66d39; background:#382415; }
.deck-search { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:none; }
.deck-search h3 { color:#91adc7; }
.deck-search input { flex:1; min-width:150px; }
#deck-editor .deck-research-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#deck-research-note { font-size:11px; }
.deck-quick-filters { display:flex; flex:1 1 100%; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.deck-filter-chips { display:flex; flex-wrap:wrap; gap:5px; }
#deck-editor .deck-filter-chips button { min-height:30px; padding:4px 9px; border-radius:999px; font-size:12px; color:#b9cae0; background:#152743; }
#deck-editor .deck-filter-chips button .attribute-mark { gap:5px; }
#deck-editor .deck-filter-chips button .attribute-icon { width:17px; height:17px; flex-basis:17px; }
#deck-editor .deck-filter-chips button.active,#deck-editor .deck-filter-chips button[aria-pressed="true"] { color:#fff; border-color:#62c7e2; background:#17607d; box-shadow:0 0 0 1px #62c7e255; }
.deck-workspace { display:grid; grid-template-columns:minmax(0,2fr) minmax(270px,1.05fr) minmax(300px,1.25fr); gap:12px; flex:1; min-height:180px; }
.deck-workspace > section { min-width:0; min-height:0; padding:10px; border:1px solid #293e5b; border-radius:12px; background:#111f35; display:flex; flex-direction:column; gap:10px; }
#deck-editor .deck-catalog { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:12px; min-height:0; overflow:auto; padding:5px; }
#deck-editor .deck-card-row, #deck-editor .deck-card-row[data-deck-research-card] { display:block; position:relative; padding:0; border:0; min-width:0; }
#deck-editor .deck-quick-quantity { position:absolute; left:6px; bottom:6px; z-index:5; display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #5a7898; border-radius:8px; background:#07182be8; box-shadow:0 3px 10px #0008; opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity .12s ease,transform .12s ease; }
#deck-editor .deck-card-row:hover .deck-quick-quantity,#deck-editor .deck-card-row:focus-within .deck-quick-quantity { opacity:1; transform:none; pointer-events:auto; }
#deck-editor .deck-quick-quantity button { width:30px; min-width:30px; height:30px; padding:0; display:grid; place-items:center; font-size:19px; font-weight:800; line-height:1; }
#deck-editor .deck-quick-quantity strong { min-width:20px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; }
@media(hover:none) { #deck-editor .deck-quick-quantity { opacity:1; transform:none; pointer-events:auto; } }
#deck-editor .deck-image-card { position:relative; display:block; width:100%; min-width:0; max-width:none; height:auto; padding:0; border:2px solid transparent; border-radius:9px; background:#091326; overflow:hidden; cursor:pointer; }
#deck-editor .deck-image-card .card-art, #deck-editor .deck-image-card .card-art.compact { display:block; width:100%; height:auto; max-height:none; margin:0; aspect-ratio:5/7; }
#deck-editor .deck-image-card .card-art img, #deck-editor .deck-image-card .card-art.compact img { display:block; width:100%; height:100%; max-height:none; object-fit:contain; border-radius:6px; }
#deck-editor .deck-image-card .art-placeholder { display:grid; place-items:center; height:100%; padding:8px; font-size:11px; }
#deck-editor .deck-image-card .art-placeholder[hidden] { display:none; }
#deck-editor .deck-image-card.editor-selected { border-color:#5de8ff; box-shadow:0 0 0 1px #39c5ef,0 0 17px #31c5ed80; }
#deck-editor .deck-image-card:focus-visible { outline:3px solid #a0f1ff; outline-offset:1px; }
.deck-count-badge { position:absolute; right:4px; bottom:4px; padding:3px 7px; color:#fff; background:#082037ed; border:1px solid #54bbdc; border-radius:7px; font-weight:800; font-size:14px; pointer-events:none; }
.deck-count-badge[hidden] { display:none; }
.deck-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:9px; align-content:start; overflow:auto; min-height:0; padding:5px; }
.deck-detail-body { overflow:auto; min-height:0; }
#deck-editor .deck-detail-body .card-detail-layout { display:flex; flex-direction:column; gap:10px; }
#deck-editor .deck-detail-body .detail-title { font-size:14px; overflow-wrap:anywhere; }
#deck-editor .deck-detail-body .card-art { width:min(100%,290px); margin:auto; }
#deck-editor .deck-detail-body .card-art img { max-height:400px; }
#deck-editor .deck-detail-body .detail-info { font-size:12px; }
#deck-selected-count { display:block; margin:10px 0; color:#b4eafa; }
.deck-quantity-controls { display:flex; gap:12px; position:sticky; bottom:0; background:#111f35; padding:8px 0; }
.deck-quantity-controls button { flex:1; min-height:44px; font-size:26px; padding:7px; }
#deck-recommendations, .deck-transfer-extra { flex:none; border:1px solid #293e5b; border-radius:8px; padding:7px 10px; }
#deck-editor summary { cursor:pointer; color:#b4c7df; font-weight:600; }
#deck-recommendations[open] { max-height:35vh; overflow:auto; }
.deck-preset-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; margin-top:8px; }
.deck-preset-grid button { text-align:left; padding:8px; font-size:12px; background:#182c46; }
#deck-preset-preview { border-top:1px solid #36516e; padding-top:10px; margin-top:10px; }
#deck-preset-preview[hidden] { display:none; }
#deck-preset-preview p { font-size:12px; }
.deck-preset-images { max-height:210px; margin-top:10px; grid-template-columns:repeat(auto-fill,minmax(85px,100px)); }
.deck-transfer-extra[open] { max-height:100px; overflow:auto; }
.deck-editor-footer { flex:none; padding-top:8px; border-top:1px solid #36516e; }
#deck-editor .deck-tools { margin:0; gap:6px; }
#deck-editor .deck-tools button { padding:7px 12px; font-size:12px; }
#deck-editor #deck-save { background:#087ea3; border-color:#51d9f4; color:white; font-size:15px; font-weight:800; min-width:110px; }
#deck-editor #deck-check { font-size:12px; max-height:8vh; }
@media (max-width:1100px) { .deck-workspace { grid-template-columns:minmax(0,1.45fr) minmax(220px,1fr) minmax(200px,.9fr); gap:8px; } #deck-editor .deck-catalog { grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:7px; } .deck-image-grid { grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); } }
@media (min-width:1101px) and (min-height:700px) {
 #deck-editor .deck-workspace > section { padding:12px; }
 #deck-editor .deck-workspace > section > h3 { font-size:16px; }
 #deck-editor .deck-image-card { border-radius:10px; }
 #deck-editor .deck-count-badge { font-size:16px; padding:4px 8px; }
 #deck-editor #deck-selected-count { font-size:14px; }
 #deck-editor .deck-detail-body .detail-info { font-size:13px; }
 #deck-editor .deck-detail-body .detail-effect { font-size:14px; }
}
@media (max-height:800px) and (min-width:761px) {
 #deck-editor[open], #deck-editor[open].has-research { gap:6px; }
 .deck-workspace { min-height:120px; }
 .deck-leader-summary { padding:5px 8px; }
 .deck-leader-summary strong { font-size:12px; }
 .deck-leader-summary span { font-size:10px; }
 .deck-leader-grid { grid-auto-columns:86px; gap:6px; padding:6px 8px 7px; }
 #deck-editor .deck-leader-choice { width:86px; min-width:86px; padding:4px; }
 .deck-leader-caption small { display:none; }
 .deck-leader-caption .attribute-label { display:none; }
}
@media (max-width:760px), (max-height:550px) { #deck-editor[open], #deck-editor[open].has-research { overflow:auto; } .deck-workspace { flex:none; min-height:0; grid-template-columns:1fr; } #deck-editor .deck-catalog, #deck-current { max-height:50vh; } .deck-detail-body { max-height:55vh; } .deck-editor-header { grid-template-columns:1fr 1fr; } .deck-editor-header h2 { grid-column:1/-1; } .deck-current-leader { justify-content:flex-start; } .deck-leader-grid { grid-auto-columns:90px; } #deck-editor .deck-leader-choice { width:90px; min-width:90px; } .deck-editor-footer { position:sticky; bottom:0; background:#0d172b; z-index:2; } }
#deck-editor .deck-image-card { aspect-ratio:5/7; align-self:start; }
#deck-editor .deck-image-card .card-art, #deck-editor .deck-image-card .card-art.compact { position:absolute; inset:0; height:100%; aspect-ratio:auto; }
#deck-editor .deck-count-badge { display:flex; align-items:center; gap:0; white-space:nowrap; }
#deck-editor .deck-count-badge[hidden] { display:none; }
#deck-editor .deck-count-badge strong { display:inline; }
#deck-editor .deck-quantity-controls { top:0; bottom:auto; z-index:1; }
#deck-editor .deck-image-grid, #deck-editor .deck-catalog { grid-auto-rows:max-content; }
#deck-editor .deck-search, #deck-editor .deck-workspace > section { margin-bottom:0; }
#deck-editor .deck-search { padding:8px; }
#deck-editor input, #deck-editor select { padding:6px 8px; font-size:13px; }
#deck-editor .deck-detail-body { display:grid; grid-template-columns:1fr 100px; align-content:start; gap:8px; }
#deck-editor #deck-selected-count { grid-row:1; grid-column:1; margin:0; align-self:center; font-size:13px; }
#deck-editor .deck-quantity-controls { grid-row:1; grid-column:2; padding:0; gap:5px; }
#deck-editor .deck-quantity-controls button { min-height:40px; font-size:23px; padding:4px; }
#deck-editor .deck-detail-body > :not(#deck-selected-count):not(.deck-quantity-controls) { grid-column:1/-1; }
#deck-editor .deck-detail-body .card-detail-layout { margin:0; padding:0; border:0; }
#deck-editor .deck-detail-body .detail-title { display:none; }
#deck-editor .deck-detail-body .card-art img { width:auto; max-width:100%; max-height:clamp(190px,calc(100dvh - 430px),400px); margin:auto; }
#deck-editor .deck-detail-body .detail-effect { font-size:13px; }

#activity-diagnostics { margin: .5rem 1rem; font-size: .8rem; }
#activity-diagnostics pre { max-height: 35vh; overflow: auto; white-space: pre-wrap; user-select: text; }
body > header[hidden] { display: none; }


/* Unified close affordance for Research, deck editor, and enlarged cards. */
#research-browser, #detail { box-sizing:border-box; }
#research-browser > .modal-close,
#detail > .modal-close {
  position:sticky; top:0; float:right; z-index:12; margin:-4px -4px 4px 8px;
}
.modal-close {
  display:grid;place-items:center;flex-shrink:0;
  width:38px;height:38px;padding:0;border:1px solid #6387a8;
  border-radius:9px;background:#233b59;color:#fff;font-size:25px;
  font-weight:700;line-height:1;cursor:pointer;
}
.modal-close:hover {background:#365d85;border-color:#91d6f0;}
.modal-close:focus-visible {outline:3px solid #e6bc61;outline-offset:2px;}
#deck-editor .deck-editor-header {position:sticky;top:0;z-index:8;padding-right:48px;padding-top:2px;padding-bottom:4px;background:#0d172bf7;}
#deck-editor .deck-editor-close {position:absolute;top:0;right:0;z-index:10;}
#deck-editor .deck-editor-toolbar {
  display:flex;align-items:center;gap:8px;flex:none;
  overflow-x:auto;white-space:nowrap;min-width:0;
  border:1px solid #293e5b;border-radius:9px;
  padding:7px 10px;background:#111f35;scrollbar-width:thin;
}
#deck-editor .deck-editor-toolbar .deck-tools {
  display:flex;gap:6px;flex-wrap:nowrap;align-items:center;flex:0 0 auto;
}
#deck-editor .deck-editor-toolbar .deck-transfer-tools {
  padding-left:10px;border-left:1px solid #375370;
}
#deck-editor .deck-editor-toolbar button {white-space:nowrap;}
#deck-editor #deck-ip-filter {min-width:125px;max-width:225px;}
#research-browser .research-controls {clear:both;}
#research-browser .research-card {gap:7px;}
.detail-command-panel {
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  margin-top:14px;padding:12px;border-radius:10px;border:1px solid #4d829d;
  background:#122b3d;
}
.detail-command-panel h3 {width:100%;margin:0;font-size:15px;}
.detail-command-panel button {font-weight:650;border-color:#80cee7;background:#13415b;}
.detail-command-panel button:disabled {opacity:.45;}
.card.main-effect-ready {position:relative;outline:3px solid #38dbc9;outline-offset:-3px;box-shadow:0 0 16px #27dec088;}
.card.main-effect-ready:focus-visible {outline:4px solid #e6bc61;}
@media (max-width:760px) {
  #deck-editor .deck-editor-toolbar {position:sticky;bottom:0;z-index:3;}
  #research-browser > .modal-close,
  #detail > .modal-close {top:0;}
}

/* Keep the combined filters compact instead of inheriting the old full-width rows. */
#deck-editor .deck-research-controls { flex:1 1 430px; }
#deck-editor .deck-research-controls select { width:auto; min-width:80px; flex:1 1 90px; }
#deck-editor .deck-research-controls p { flex-basis:100%; }
.preview-controls {display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px;border:1px solid #385471;border-radius:12px;background:#10283c;}
.preview-controls strong {flex-basis:100%;color:#8ee7dd;}
.preview-link {display:inline-block;margin:16px;}
.browser-invite {display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.browser-invite input {flex-basis:100%;max-width:95%;}
@media (max-width:760px), (max-height:550px) {
  #deck-editor .deck-editor-header {position:sticky;top:-14px;z-index:8;background:#0d172b;padding-top:8px;padding-bottom:8px;}
}

/* Rotate complete source cards, leaving targets, lane layout and floating details readable. */
.opponent-rotated .opponent-zone .lane-unit-card,
.opponent-rotated .opponent-zone .attached-card,
.opponent-rotated .opponent-zone .leader-card,
.opponent-rotated .opponent-zone .damage-card { transform:rotate(180deg); }

/* Browser tabletop: rotate the peripheral layout, keeping lane order and centers aligned.
   Equal side rails allow either player's leader to fit without shifting opposing lanes. */
@media(min-width:651px) {
 .browser-board .playmat { grid-template-columns:minmax(120px,.8fr) minmax(0,1.5fr) minmax(0,1.5fr) minmax(120px,.8fr); }
 .browser-board .opponent-zone .playmat { grid-template-areas:"trash skill damage leader" "deck unit unit leader"; }
}
/* Zone UI stays upright. Only cards rotate; preserve the deck back's existing
   presentation and position, counter-rotating its text without adding artwork. */
.browser-board .opponent-zone .zone-deck { flex-direction:column-reverse; }
.browser-board .opponent-zone .deck-back { transform:rotate(180deg); }
.browser-board .opponent-zone .deck-caption { display:inline-block; transform:rotate(180deg); }
.opponent-rotated .opponent-zone .card > .equipment-cost,
.opponent-rotated .opponent-zone .card > .damage-cost { transform:rotate(180deg); }
/* The opponent's left-hand equipment is on our right, regardless of the readability toggle. */
.browser-board .opponent-zone .lane-cards.has-equipment > .lane-unit-card { left:calc(50% - var(--equipment-count) * var(--equipment-step-x) / 2); }
.browser-board .opponent-zone .lane-equipment > .attached-card { left:calc(50% - var(--equipment-count) * var(--equipment-step-x) / 2 + var(--equipment-order) * var(--equipment-step-x)); }
.browser-board .opponent-zone .lane-equipment > .equipment-list { left:auto; right:0; }
/* At 0 degrees the visible equipment strip is still its right edge. */
.browser-board:not(.opponent-rotated) .opponent-zone .equipment-cost { left:auto; right:0; }
@media(max-width:650px) {
 .browser-board .opponent-zone .playmat { grid-template-areas:"trash trash" "skill damage" "deck leader" "unit unit"; grid-template-rows:65px 70px auto auto; }
 .browser-board .opponent-zone .playmat:has(.has-equipment) { grid-template-rows:65px 70px auto auto; }
}


/* Beginner guide: short, lobby-first onboarding with permanent official links. */
.beginner-guide-entry { display:flex; justify-content:flex-start; margin:8px 0; }
#beginner-guide-open { padding:8px 13px; border-color:#6f96c2; background:#173250; font-weight:800; }
.beginner-first-visit { margin:10px 0; padding:12px 14px; border:1px solid #5e7fa7; border-radius:12px; background:linear-gradient(135deg,#162b49,#0f1d34); box-shadow:0 5px 18px #0003; }
.beginner-first-visit strong { display:block; margin-bottom:4px; color:#f1f6ff; font-size:15px; }
.beginner-first-visit p { margin:4px 0 9px; color:#b8cbe0; font-size:12px; line-height:1.55; }
.beginner-first-actions { display:flex; flex-wrap:wrap; gap:8px; }
.beginner-first-actions button:first-child { border-color:#74cdb6; background:#1b5b4e; font-weight:900; }

.beginner-guide-backdrop { position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:16px; background:#050b16d9; backdrop-filter:blur(5px); }
.beginner-guide-panel { width:min(720px,calc(100vw - 32px)); max-height:min(86dvh,720px); display:flex; flex-direction:column; overflow:hidden; border:1px solid #5f7899; border-radius:16px; background:linear-gradient(180deg,#13233d,#0b1729); box-shadow:0 22px 70px #000a; }
.beginner-guide-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 18px 8px; border-bottom:1px solid #273c59; }
.beginner-guide-header small { display:block; margin-bottom:3px; color:#89a3c0; font-size:10px; font-weight:800; letter-spacing:.08em; }
.beginner-guide-header h2 { margin:0; color:#f4f7ff; font-size:22px; }
.beginner-guide-close { flex:none; width:36px; height:36px; padding:0; border-radius:50%; font-size:22px; line-height:1; }
.beginner-guide-progress { display:flex; gap:5px; padding:9px 18px 0; }
.beginner-guide-progress span { flex:1; height:4px; border-radius:999px; background:#273a53; }
.beginner-guide-progress span.current { background:#e0bd6a; box-shadow:0 0 8px #e0bd6a55; }
.beginner-guide-content { flex:1; min-height:0; overflow:auto; padding:16px 22px 18px; }
.beginner-guide-content p { margin:0 0 12px; color:#d2deec; font-size:14px; line-height:1.75; }
.beginner-phase-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:4px 0 16px; }
.beginner-phase-flow strong { padding:6px 10px; border:1px solid #4a6483; border-radius:999px; background:#162a45; color:#e6effa; font-size:11px; }
.beginner-phase-flow strong:not(:last-child)::after { content:" →"; margin-left:8px; color:#d6b979; }
.beginner-official-links { display:grid; gap:8px; margin-top:16px; padding-top:13px; border-top:1px solid #314865; }
.beginner-official-links a { display:block; padding:10px 12px; border:1px solid #45617f; border-radius:9px; background:#132944; color:#cfe8ff; font-weight:800; text-decoration:none; }
.beginner-official-links a:hover,.beginner-official-links a:focus-visible { border-color:#74a8d9; background:#1a3556; }
.beginner-guide-footer { display:flex; justify-content:space-between; gap:8px; padding:10px 16px 14px; border-top:1px solid #273c59; }
.beginner-guide-footer button:last-child { margin-left:auto; min-width:120px; font-weight:900; }

@media(max-width:650px){
 .beginner-guide-backdrop { padding:6px; }
 .beginner-guide-panel { width:calc(100vw - 12px); max-height:92dvh; border-radius:12px; }
 .beginner-guide-header { padding:12px 12px 7px; }
 .beginner-guide-header h2 { font-size:19px; }
 .beginner-guide-content { padding:13px 14px 14px; }
 .beginner-guide-content p { font-size:13px; line-height:1.65; }
 .beginner-phase-flow { justify-content:flex-start; }
 .beginner-guide-footer { padding:8px 10px 10px; }
}


/* Trusted browser entry: fixed two-table lobby. */
.browser-table-lobby { max-width:980px; margin:18px auto; padding:clamp(16px,2vw,24px); border:1px solid #314b70; border-radius:18px; background:linear-gradient(145deg,#111f38,#0a1426); box-shadow:0 14px 40px #0005; }
.browser-table-lobby > h2 { margin:0 0 6px; font-size:24px; }
.browser-table-lobby > p { color:#afc0d6; line-height:1.6; }
.browser-table-mode { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0; padding:10px 12px; border:1px solid #334d70; border-radius:10px; background:#101d33; }
.browser-table-mode select { min-width:280px; }
.browser-table-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:14px 0; }
.browser-table-card { min-height:190px; display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid #456488; border-radius:15px; background:linear-gradient(180deg,#162b49,#0f1b31); box-shadow:0 7px 20px #0004; }
.browser-table-card[data-table-status="PLAYING"] { border-color:#7c4b52; background:linear-gradient(180deg,#35202b,#181927); }
.browser-table-card[data-table-status="PREPARING"] { border-color:#8b7441; background:linear-gradient(180deg,#30291c,#171b27); }
.browser-table-card h3 { margin:0; font-size:22px; }
.browser-table-status { font-size:17px; color:#ecf5ff; }
.browser-table-mode-label { color:#94afd0; font-weight:800; }
.browser-table-card button { margin-top:auto; min-height:48px; font-size:15px; font-weight:900; }
.browser-table-card .muted { margin:0; color:#8fa3bb; font-size:11px; }
@media(max-width:650px){
 .browser-table-lobby { margin:8px 5px; padding:12px; border-radius:12px; }
 .browser-table-lobby > h2 { font-size:21px; }
 .browser-table-mode { align-items:stretch; flex-direction:column; }
 .browser-table-mode select { min-width:0; width:100%; }
 .browser-table-grid { grid-template-columns:1fr; gap:10px; }
 .browser-table-card { min-height:150px; padding:14px; }
}


.browser-spectator-count { color:#9dc7df; font-weight:800; }
.browser-table-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:auto; }
.browser-table-actions button { margin-top:0; }
.browser-table-actions button:only-child { grid-column:1 / -1; }
.browser-spectator-banner { margin:8px 0 12px; padding:9px 12px; border:1px solid #4b7892; border-radius:10px; background:#102a3b; color:#d8f2ff; font-weight:800; }
@media(max-width:650px){
 .browser-table-actions { grid-template-columns:1fr; }
 .browser-table-actions button { grid-column:1!important; }
}

/* Explicit departure remains separate from the reversible lobby navigation. */
.browser-leave-button { border-color: #c86b72; color: #ffc6cb; }
.browser-leave-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; background: #121e32; color: #edf3ff; border: 1px solid #c86b72; border-radius: 12px; padding: 24px; }
.browser-leave-dialog::backdrop { background: #000a; }
.browser-leave-dialog h2 { margin-top: 0; }
.browser-leave-dialog p { line-height: 1.7; }
.browser-leave-dialog button { margin: 6px 8px 0 0; min-height: 44px; }

/* Independent metrics slots: TURN/hidden-hand badges never redistribute SIZE/Cost. */
.player-bar { display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:3px 8px; align-items:start; }
.player-bar > h2 { grid-column:1; grid-row:1; }
.player-bar > .player-metrics { grid-column:2; grid-row:1; justify-self:end; text-align:right; white-space:nowrap; }
.player-bar > .active-turn-badge { grid-column:1; grid-row:2; justify-self:start; }
.player-bar > .opponent-hand-summary { grid-column:2; grid-row:2; justify-self:end; }
.turn-phase-heading { margin:0 0 8px; text-align:center; font-size:17px!important; color:var(--ink); }
/* The same destination color token drives the existing advance button and opponent text.
   A light existing surface gives these unchanged dark button colors readable contrast. */
.turn-phase-heading.opponent-turn { background:var(--ink); border-radius:6px; padding:8px 5px; }
.turn-phase-heading.opponent-turn[data-phase-target="DRAW"],.turn-phase-heading.opponent-turn[data-phase-target="LEVEL"] { color:var(--phase-button-level); }
.turn-phase-heading.opponent-turn[data-phase-target="MAIN"] { color:var(--phase-button-main); }
.turn-phase-heading.opponent-turn[data-phase-target="ATTACK"] { color:var(--phase-button-attack); }
.turn-phase-heading.opponent-turn[data-phase-target="END"] { color:var(--phase-button-end); }
.decision-controls { display:flex; flex-direction:column; gap:6px; min-height:0; max-height:48dvh; overflow:auto; }
.decision-controls:empty { display:none; }
.decision-controls button { width:100%; }
.decision-controls .choice-modal-footer { padding:0; display:flex; flex-direction:column; border:0; }
.decision-controls .choice-modal-progress { text-align:center; }
.decision-instruction { margin:0; font-size:13px; font-weight:700; }
.phase-action-panel { min-width:0; }
/* Candidate surface occupies only the board column. Bottom-right decisions stay reachable. */
.layout > .match-board { grid-column:1; grid-row:1; }
.layout > .match-sidebar { grid-column:2; grid-row:1; }
.layout > .choice-modal-backdrop { position:relative; inset:auto; grid-column:1; grid-row:1; z-index:20; padding:8px; width:100%; min-width:0; align-self:start; background:var(--surface); backdrop-filter:none; }
.layout > .choice-modal-backdrop .choice-modal-panel { width:100%; max-height:calc(100dvh - 32px); }
.choice-card-option { position:relative; padding:4px; min-width:0; }
.choice-modal-options .choice-card-option .card-art.compact { width:100%; height:190px; max-height:none; aspect-ratio:auto; }
.choice-modal-options .choice-card-option .card-art.compact img { width:100%; height:100%; max-height:none; object-fit:contain; }
.image-only-art .art-placeholder { display:grid; place-items:center; min-height:140px; font-size:56px; background:var(--surface); color:var(--muted); border:2px solid var(--edge); border-radius:8px; }
.image-only-art .art-placeholder[hidden] { display:none; }
.choice-check { position:absolute; top:8px; right:8px; padding:4px 8px; border-radius:6px; background:var(--ink); color:var(--surface); font-weight:900; }
#card-preview:has(.image-only-art) { width:270px; padding:6px; }
#card-preview .image-only-art img { width:100%; max-height:70dvh; object-fit:contain; }
.choice-order-slot .image-only-art { width:45px; height:60px; }
.choice-order-slot .image-only-art img { width:100%; height:100%; object-fit:contain; }
@media(min-width:651px) {
 .in-match .match-sidebar { display:grid; grid-template-rows:auto minmax(0,1fr) auto; align-content:stretch; }
 .sidebar-scroll { min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; }
 .sidebar-scroll > section { flex:none; background:#0e1b32; border-color:#34496c; border-radius:10px; }
 .sidebar-scroll > .action-panel { max-height:none; min-height:0; overflow:visible; }
 .sidebar-scroll > .log-panel { max-height:18dvh; min-height:60px; }
 .match-sidebar > .phase-action-panel { margin-top:0!important; }
}

@media(max-width:999px) {
 .layout > .match-sidebar { grid-column:1; grid-row:2; }
 .layout:has(.choice-modal-backdrop) > .match-board { visibility:hidden; max-height:70dvh; overflow:hidden; }
 .match-sidebar .phase-action-panel { position:sticky; bottom:8px; }
 .player-bar { grid-template-columns:minmax(0,1fr) max-content; }
 .player-bar h2,.player-bar .player-metrics { font-size:11px; }
}

.match-info-panel { flex:none; min-width:0; }
.player-info-row { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px; align-items:center; }
.player-info-row strong { font-size:11px; }
.player-info-row .player-metrics { margin:3px 0; text-align:right; font-size:12px; color:var(--muted); }
@media(max-width:999px) and (min-width:651px) {
 .in-match .layout { grid-template-columns:minmax(0,1fr) 220px; }
 .layout > .match-sidebar { grid-column:2; grid-row:1; position:sticky; top:8px; height:calc(100dvh - var(--sidebar-top,260px) - 8px); }
 .layout:has(.choice-modal-backdrop) > .match-board { visibility:visible; max-height:none; }
}

.choice-modal-options:empty { display:none; }

/* Selection updates retain their DOM; snapshots commit a complete view atomically. */
.choice-modal-options { grid-auto-rows:max-content; }
.in-match { overflow-anchor:none; }
.deck-image-card .card-art { position:relative; }
.deck-regulation-badge { position:absolute; top:4px; left:4px; z-index:5; padding:3px 7px; border:1px solid currentColor; border-radius:5px; font-size:13px; font-weight:900; pointer-events:none; }
.deck-regulation-badge.is-banned { background:#8d2433; color:#fff; }
.deck-regulation-badge.is-limited { background:#ffcb60; color:#201600; }
.deck-regulation-detail { font-size:13px; font-weight:700; }
.browser-history-dialog { width:min(850px,94vw); max-height:88dvh; overflow:auto; }

/* Keep semantic decision colors through all legacy panel/hover selectors. */
:root button[data-action-tone="positive"] { background:var(--action-positive); border-color:#76d7be; color:#fff; }
:root button[data-action-tone="negative"],:root button[data-action-tone="danger"] { background:var(--action-negative); border-color:#ee9ba3; color:#fff; }
:root button[data-action-tone="main"] { background:var(--action-main); border-color:#84b7f4; color:#fff; }
:root button[data-action-tone="attack"] { background:var(--action-attack); border-color:#c1a1f4; color:#fff; }

/* Explicitly enabled CPU practice sits outside both fixed match tables. */
.cpu-practice-panel { margin-top:22px; padding:18px; border:1px solid #567b8c; border-radius:14px; background:linear-gradient(155deg,#152d3d,#0e1d30); display:grid; gap:10px; }
.cpu-practice-panel h3 { margin:0; font-size:21px; }
.cpu-practice-panel p { margin:4px 0; line-height:1.5; }
.cpu-practice-panel > select { width:100%; min-height:42px; color:var(--ink); background:var(--surface); }
.cpu-deck-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; max-height:185px; overflow:auto; padding:4px; }
.cpu-deck-option { display:flex; align-items:center; gap:8px; min-width:0; border:1px solid #3c597a; border-radius:8px; padding:9px; background:#1b324d; }
.cpu-deck-option input { flex:none; width:17px; height:17px; accent-color:#26a377; }
.cpu-deck-option span { overflow-wrap:anywhere; }
.cpu-practice-panel > button { justify-self:start; min-height:45px; min-width:200px; font-weight:800; }
@media(max-width:650px){ .cpu-practice-panel {padding:12px} .cpu-practice-panel > button {width:100%} }

/* CPU practice cards share the existing dark palette; avoid hiding PvP controls. */
.cpu-opponent-label {margin:6px 0; color:#b7e8db; font-weight:800;}
.cpu-thinking {color:#f6d18b; font-weight:700;}


/* Bilingual read-only glossary: works in browser, CPU, spectator and Discord Activity. */
#glossary-open {
  position:fixed; top:70px; right:12px; z-index:80;
  min-height:40px; padding:7px 13px;
  border:1px solid #87add3; border-radius:10px;
  background:#193a58; color:#f5faff; font-size:13px; font-weight:800;
  box-shadow:0 4px 14px #0007;
}
body:has(> header[hidden]) #glossary-open { top:8px; }
#glossary-open:focus-visible,.glossary-term:focus-visible,.glossary-item:focus-visible {
  outline:3px solid #efcf78; outline-offset:2px;
}
#glossary-dialog {
  width:min(860px,95vw); max-width:95vw; max-height:90dvh;
  padding:16px; overflow:hidden; color:#e8eef5;
  border:1px solid #58738e; border-radius:14px; background:#101d2f;
}
#glossary-dialog::backdrop { background:#000b; }
#glossary-dialog[open] { display:flex; flex-direction:column; }
.glossary-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.glossary-header h2 { margin:0 0 12px; font-size:20px; }
.glossary-close,.glossary-inline-close { min-width:40px; min-height:40px; font-size:24px; padding:2px 8px; }
.glossary-body { display:grid; grid-template-columns:minmax(180px,.85fr) minmax(0,1.15fr); gap:16px; min-height:0; overflow:hidden; }
.glossary-left { display:flex; flex-direction:column; gap:8px; min-height:0; }
#glossary-query { width:100%; min-height:44px; }
.glossary-count { margin:0; font-size:12px; color:#a7bfd8; }
.glossary-results { display:flex; flex-direction:column; gap:5px; min-height:0; overflow:auto; padding:2px 6px 4px 0; }
.glossary-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:44px; text-align:left; padding:8px 10px; }
.glossary-item strong { font-size:13px; }
.glossary-item small { color:#c1d3e6; font-size:12px; }
.glossary-item[aria-pressed="true"] { background:#31567d; border-color:#a4c7ed; }
.glossary-detail { min-width:0; min-height:160px; padding:16px; overflow:auto; border:1px solid #3d5d7b; border-radius:12px; background:#12243a; line-height:1.65; }
.glossary-detail h3 { margin:0 0 8px; font-size:20px; }
.glossary-detail p { overflow-wrap:anywhere; }
.glossary-detail small,.glossary-translation { color:#a9bfd5; }
.glossary-caveat { padding:9px 10px; border-left:3px solid #a89b67; background:#28303d; font-size:12px; }
.ability-badge.glossary-term {
  display:inline; padding:0 5px; margin:0 2px;
  border:0; border-radius:4px; line-height:inherit; font:inherit; font-weight:inherit;
  text-decoration:underline dotted #e3d9ff; text-underline-offset:3px; cursor:help;
}
.glossary-tooltip {
  position:fixed; z-index:9999; width:min(330px,calc(100vw - 16px));
  max-height:180px; overflow:auto; padding:10px 12px;
  border:1px solid #93b9df; border-radius:8px;
  background:#14263d; color:#fff; font-size:13px; line-height:1.5;
  box-shadow:0 8px 25px #000b; white-space:normal;
}
.glossary-tooltip[hidden] { display:none; }
.glossary-inline {
  position:relative; margin:12px 0; padding:12px 14px; background:#142c44;
  border:1px solid #7da6d2; border-radius:10px; white-space:normal; line-height:1.5;
}
.glossary-inline p { margin:7px 0; }
.glossary-inline small { color:#bbd0e6; }
.glossary-inline-close { float:right; margin:-5px -7px 5px 8px; }
@media(max-width:650px) {
  #glossary-open { top:54px; right:8px; min-height:44px; }
  body:has(> header[hidden]) #glossary-open { top:8px; }
  #glossary-dialog { width:calc(100vw - 12px); max-width:none; max-height:94dvh; padding:12px; }
  .glossary-body { display:flex; flex-direction:column; }
  .glossary-left { max-height:38dvh; }
  .glossary-detail { min-height:150px; }
  .glossary-item small { font-size:11px; }
}

/* Cosmetic names stay in the existing player-name region. */
.player-display-name { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; font-size:clamp(11px,1vw,15px); }
.player-bar h2.player-display-name { flex:0 1 auto; }
.match-room > p { overflow-wrap:anywhere; }
.match-name-summary { overflow-wrap:anywhere; }
.battle-modal .match-name-summary { font-size:clamp(13px,2vw,18px); }
.turn-phase-heading { overflow-wrap:anywhere; }

/* Canonical ability UI tokens, independent from attribute colors. */
[data-ability-color] { color:var(--ability-ink); }
.ability-badge[data-ability-color] { color:var(--ability-ink); background:#101c2e; border:1px solid var(--ability-color); font:inherit; font-size:.94em; line-height:1.5; vertical-align:baseline; cursor:pointer; }
span.ability-badge[data-ability-color] { cursor:inherit; }
.glossary-item[data-ability-color] { color:var(--ability-ink); background:#101c2e; border-left:3px solid var(--ability-color); }
.glossary-item[data-ability-color] strong,.glossary-item[data-ability-color] small { color:inherit; }
.glossary-item[data-ability-color][aria-pressed="true"] { background:#243b55; border-color:var(--ability-color); }
.glossary-translation[data-ability-color] { color:var(--ability-ink); }
.glossary-tooltip[data-ability-color] { border-color:var(--ability-color); color:#e9f0fc; }
.glossary-header .glossary-back { font-size:12px; margin-left:auto; max-width:180px; }
.glossary-back[hidden] { display:none; }
.glossary-detail h3:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.glossary-inline { max-height:min(45dvh,420px); overflow:auto; }
@media (pointer:coarse) { .ability-badge.glossary-term { min-height:32px; padding:3px 6px; } }

/* Fixed instruction region, using the server's current legal projection. */
.next-operation { margin:5px 0 0; padding:5px 10px; border:1px solid #7b94b0; border-radius:6px; background:#13253d; color:#f3f6ff; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.gesture-select { padding:3px 6px; font-size:11px; line-height:1.4; min-height:24px; background:#1c3654; border:1px solid #a3bbd7; border-radius:4px; color:#fff; }
.gesture-select[aria-pressed="true"] { background:#3b556d; outline:2px solid #fff; }
.hand-zone .gesture-card-group { display:flex; flex-direction:column; gap:3px; flex:0 0 176px; min-width:0; }
.hand-zone .gesture-card-group > .hand-card { flex:0 1 auto; width:100%; }
.lane-cards > .gesture-select { position:absolute; top:100%; left:50%; translate:-50% 2px; z-index:130; width:max-content; max-width:100%; }
.gesture-source { outline:3px solid #fff; outline-offset:1px; }
.drop-allowed { position:relative; outline:3px dashed #c3f6d7; outline-offset:-3px; }
.drop-allowed::after { content:'✓'; position:absolute; top:3px; right:3px; width:22px; height:22px; background:#163d2d; border:1px solid #fff; border-radius:50%; color:#fff; font-weight:900; text-align:center; line-height:20px; z-index:140; pointer-events:none; }
.drop-allowed:focus-visible { outline:3px solid white; }
.board-feedback { margin:0; min-height:0; font-size:12px; color:#fce5ad; }
.board-feedback:empty { display:none; }
.zone-popup .card { position:relative; }
.stack-order { position:absolute; top:3px; left:3px; z-index:2; min-width:21px; padding:1px 4px; border:1px solid #fff; border-radius:4px; background:#0b1729; color:#fff; font-weight:700; }
.effect-cue { padding:8px; border:1px solid #6f88aa; border-radius:8px; background:#14243a; overflow-wrap:anywhere; }
.effect-cue small { color:#b1c9e5; }
.effect-cue p { margin:4px 0; font-size:12px; }
.effect-cue button:not(.ability-badge) { font-size:11px; padding:3px 5px; margin:2px; }
.effect-source { box-shadow:0 0 0 3px #f9dc87 !important; }
.effect-target { outline:2px dashed #b2dafa; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .gesture-source,.drop-allowed { transition:none; } }
.phase-action-panel .next-operation { margin:0 0 5px; padding:5px 7px; font-size:11px; max-height:54px; overflow:auto; }
/* A newly required choice must remain reachable after a hand-level scroll. */
.layout > .choice-modal-backdrop { position:sticky; top:8px; }


/* Local logo artwork is never cropped. Failure leaves the same card silhouette. */
.card-back { display:block; position:relative; aspect-ratio:1061/1482; border-radius:8%; overflow:hidden; background:linear-gradient(135deg,#7a265b,#080c16 44%,#14344d); box-shadow:0 2px 8px #0009; }
.card-back img { display:block; width:100%; height:100%; object-fit:contain; }
.deck-back { background:none!important; border:0!important; position:relative; }
.deck-back > .card-back { width:100%; height:100%; box-shadow:3px 3px 0 #5b6678,6px 6px 0 #1d293e,9px 9px 9px #0008; }
.deck-back:before,.deck-back:after { display:none!important; }
.deck-back .deck-caption { position:absolute; left:0; right:0; bottom:4px; background:#07101bce; color:white; text-align:center; font-size:10px; }
.deck-back.is-empty { outline:1px dashed #637089; box-shadow:none; }
.hidden-hand-fan { display:flex; width:min(210px,22vw); height:44px; margin:3px auto; justify-content:center; }
.hidden-hand-fan .card-back { width:31px; flex:0 0 31px; height:44px; }
.hidden-hand-fan .card-back + .card-back { margin-left:calc(-1 * max(4px,31px - 175px / max(1,var(--back-count)))); }
.opponent-hand-summary { overflow:visible!important; }
.motion-card > .card-back { width:100%; height:100%; }
.available-action-row { width:100%; cursor:pointer; text-align:left; color:#edf3ff; border:1px solid #47617f; border-radius:7px; }
.available-action-row:not(:disabled):hover { border-color:#7bcdff; background:#1b3554; }
.action-list-dialog { width:min(780px,90vw); max-height:85vh; padding:18px; border:1px solid #587da5; border-radius:16px; background:#0c182a; color:#e9f3ff; box-shadow:0 24px 90px #000c; }
.action-list-dialog::backdrop { background:#020713ba; }
.action-list-dialog header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.action-list-dialog h2 { font-size:20px; margin:4px 0 14px; }
.action-list-dialog .action-list-close { font-size:24px; min-width:42px; }
.action-list-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; overflow-y:auto; max-height:64vh; padding:4px; }
.action-list-entry { min-width:0; display:flex; flex-direction:column; gap:9px; padding:10px; border:1px solid #304763; border-radius:10px; background:#12233a; }
.action-list-card { display:flex; flex-direction:column; gap:8px; text-align:left; align-items:center; min-height:100px; }
.action-list-card .card-art { width:110px; height:153px; flex:none; }
.action-list-card small { font-size:11px; overflow-wrap:anywhere; }
.action-list-entry > button:focus-visible,.available-action-row:focus-visible { outline:3px solid #74d8ff; outline-offset:2px; }
/* Non-interactive, bounded event effects; authoritative card/stat DOM remains live. */
.battle-fx { position:fixed; z-index:1100; pointer-events:none!important; border-radius:12px; box-sizing:border-box; }
.battle-fx-attack { background:linear-gradient(132deg,transparent 39%,#72cfff99 45%,#fff 49%,#b7f3ff 52%,transparent 60%); filter:drop-shadow(0 0 9px #48bdff); }
.battle-fx-shield { display:grid; place-items:center; color:#c5f3ff; font-size:95px; font-weight:800; text-shadow:0 0 13px #52cfff; background:radial-gradient(ellipse,#60caff44,transparent 65%); }
.battle-fx-damage { border:3px solid #ff839b; box-shadow:inset 0 0 35px #ff527a99,0 0 16px #ff6a8599; }
.battle-fx-ability { border:3px solid #ffe4a0; box-shadow:0 0 18px #ffc868,inset 0 0 24px #ffc86855; }
.battle-fx-trigger { border:4px double #f2d18a; border-radius:50%; box-shadow:0 0 20px #e9c166; }
.battle-fx-power,.battle-fx-hit { display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:#ffe9a4; text-shadow:0 2px 5px #000,0 0 8px #000; white-space:nowrap; background:linear-gradient(transparent,#101a2fd9,transparent); }
.battle-fx-finish { border:5px solid #effaff; box-shadow:inset 0 0 60px #8bdcff99,0 0 30px #a4deff; border-radius:18px; }
.sound-controls { border:1px solid #304660; border-radius:8px; margin:10px 0; padding:8px; }
.sound-controls label { display:flex; align-items:center; gap:8px; margin:5px 0; }
.sound-controls input[type=range] { min-width:70px; width:100%; accent-color:#78caff; }
.sound-controls label { white-space:nowrap; font-size:12px; }


/* Presentation-only layer. Card pixels use the board's reviewed face renderer. */
.battle-intro { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; color:#f3f6ff; background:radial-gradient(ellipse at 20% 45%,#273957aa,transparent 58%),radial-gradient(ellipse at 80% 45%,#233c5d99,transparent 58%),linear-gradient(135deg,#070d1a,#101c31 48%,#060b17); z-index:10000; }
.battle-intro::backdrop { background:transparent; }
.battle-intro::before { content:''; position:absolute; inset:-30%; pointer-events:none; background:linear-gradient(115deg,transparent 39%,#c6ddff09 40%,transparent 41%,transparent 55%,#eed39b0b 56%,transparent 57%); }
.battle-intro::after { content:''; position:absolute; width:50vmin; height:50vmin; left:50%; top:48%; border:1px solid #e0bd7930; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; }
.battle-intro-brand { position:absolute; top:8vh; left:0; right:0; text-align:center; color:#d1b67f; font-size:clamp(13px,1.3vw,21px); letter-spacing:.4em; font-weight:700; }
.battle-intro-heading { position:absolute; top:13vh; left:0; right:0; margin:0; text-align:center; color:#9caecb; font-size:clamp(12px,1vw,16px); letter-spacing:.15em; font-weight:400; }
.battle-intro-scene { position:relative; display:grid; grid-template-columns:minmax(0,1fr) clamp(110px,14vw,210px) minmax(0,1fr); align-items:center; width:94%; max-width:1500px; height:100%; margin:auto; padding:80px 0 35px; box-sizing:border-box; isolation:isolate; }
.battle-intro-player { border:0; padding:0; margin:0; background:none; display:flex; flex-direction:column; align-items:center; min-width:0; position:relative; }
.battle-intro-card { width:min(35vw,530px,calc((100dvh - 250px) * 1.4414)); aspect-ratio:369 / 256; position:relative; border-radius:8px; box-shadow:0 22px 50px #0009,0 0 0 1px #8398be50,0 0 50px #9bbdee15; }
.battle-intro-card > .leader-art,.battle-intro-card > .card-art { width:100%; height:100%; box-sizing:border-box; }
.battle-intro-card .leader-pair img { position:absolute; left:0; top:0; width:100%; height:201.171875%; max-height:none; object-fit:fill; border-radius:0; }
.battle-intro-card .leader-art[data-face='awakened'] .leader-pair img { top:-100.78125%; }
.battle-intro-card > .card-art:not(.leader-pair) img { width:100%; height:100%; object-fit:contain; }
.battle-intro-card .art-placeholder { display:grid; place-items:center; white-space:pre-line; width:100%; height:100%; box-sizing:border-box; border-radius:8px; background:#101d33; color:#bfcee6; font-size:clamp(14px,1.8vw,25px); text-align:center; }
.battle-intro-card .art-placeholder[hidden] { display:none; }
.battle-intro-name { font-size:clamp(17px,2vw,30px); line-height:1.3; margin:26px 0 8px; max-width:95%; overflow-wrap:anywhere; text-align:center; font-weight:750; text-shadow:0 2px 12px #000a; }
.battle-intro-own { color:#e7eefa; font-size:13px; letter-spacing:.15em; min-height:20px; }
.battle-intro-own[hidden] { display:block; visibility:hidden; }
.battle-intro-order { display:block; min-width:130px; margin-top:16px; padding:9px 24px; border:1px solid; border-radius:4px; text-align:center; font-size:clamp(17px,1.8vw,25px); line-height:1.3; }
.battle-intro-player[data-order='first'] .battle-intro-order { border-color:#b9954a; background:linear-gradient(110deg,#7d5a2520,#c99e4338,#7d5a2520); color:#ffe0a0; box-shadow:0 0 24px #bd903c1c; }
.battle-intro-player[data-order='second'] .battle-intro-order { border-color:#5d88bc; background:linear-gradient(110deg,#28548720,#659ada28,#28548720); color:#d5e8ff; }
.battle-intro-player[data-own='true'] .battle-intro-name { text-decoration:underline; text-decoration-color:#c4d6f04d; text-underline-offset:7px; }
.battle-intro-vs { display:block; text-align:center; font:italic 900 clamp(76px,10vw,155px)/1 Georgia,serif; color:#f2d8a1; text-shadow:0 5px 0 #5d451f,0 16px 35px #0009; transform:translateY(-50px); }
.battle-intro[data-mode='normal'] { animation:intro-exit var(--intro-exit) 3600ms ease-in both; }
.battle-intro[data-mode='normal'] .battle-intro-player[data-seat='A'] { animation:intro-arrive-left var(--intro-arrival) cubic-bezier(.16,.8,.22,1) both; }
.battle-intro[data-mode='normal'] .battle-intro-player[data-seat='B'] { animation:intro-arrive-right var(--intro-arrival) cubic-bezier(.16,.8,.22,1) both; }
.battle-intro[data-mode='normal'] .battle-intro-vs { animation:intro-versus var(--intro-versus) var(--intro-arrival) cubic-bezier(.15,.75,.3,1) both; }
.battle-intro[data-mode='normal'] .battle-intro-order { animation:intro-order var(--intro-order) 2000ms ease-out both; }
.battle-intro[data-mode='normal'] .battle-intro-scene { animation:intro-camera var(--intro-versus) var(--intro-arrival) ease-out both; }
.battle-intro[data-mode='normal']::after { animation:intro-wave 650ms var(--intro-arrival) ease-out both; }
.battle-intro[data-mode='reduced'] { animation:intro-reduced 700ms linear both; }
@keyframes intro-arrive-left { from { opacity:0; transform:translateX(-45vw) scale(.88); } 80% { opacity:1; } to { opacity:1; transform:none; } }
@keyframes intro-arrive-right { from { opacity:0; transform:translateX(45vw) scale(.88); } 80% { opacity:1; } to { opacity:1; transform:none; } }
@keyframes intro-versus { 0% { opacity:0; transform:translateY(-50px) scale(1.55); } 22% { opacity:1; color:#fff3d9; text-shadow:0 0 25px #f7ce83a0; } 65%,100% { opacity:1; transform:translateY(-50px); } }
@keyframes intro-order { from { opacity:0; transform:translateY(12px); } 55%,100% { opacity:1; transform:none; } }
@keyframes intro-camera { from { transform:scale(1); } to { transform:scale(1.018); } }
@keyframes intro-wave { from { opacity:0; transform:translate(-50%,-50%) scale(.2); } 20% { opacity:.45; } to { opacity:0; transform:translate(-50%,-50%) scale(2); } }
@keyframes intro-exit { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.97); } }
@keyframes intro-reduced { 0%,100% { opacity:0; } 18%,82% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .battle-intro[data-mode='normal'],.battle-intro[data-mode='normal'] *,.battle-intro[data-mode='normal']::after { animation:none; } }

/* Effect choices are one bounded central surface; only candidates scroll. */
.layout > .choice-modal-backdrop { position:fixed; inset:0; top:0; z-index:70; padding:16px; width:auto; align-self:auto; background:#020711b5; backdrop-filter:blur(2px); }
.layout > .choice-modal-backdrop .choice-modal-panel { width:min(940px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); }
.choice-modal-panel > .choice-explanation { margin:8px 16px; padding:8px 10px; max-height:none; overflow:visible; }
.choice-modal-panel .choice-source { grid-template-columns:64px minmax(0,1fr); margin-top:6px; }
.choice-modal-panel .choice-source .card-art { width:64px; max-height:90px; }
.choice-source-text details { margin-top:4px; }
.choice-source-text details[open] { position:absolute; z-index:2; max-height:180px; overflow:auto; background:#15253b; padding:10px; border:1px solid #567; max-width:700px; }
.choice-required { margin-left:10px; font-size:12px; color:#ffe7a1; }
.choice-modal-panel .choice-modal-options { flex:1 1 auto; min-height:0; overflow:auto; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); }
.choice-modal-panel .choice-modal-footer { flex:none; position:relative; margin:0; padding:10px 16px; background:#10213a; border-top:1px solid #3e5575; display:flex; gap:8px; flex-wrap:wrap; }
.choice-modal-footer button { flex:1; min-width:120px; }
.choice-modal-panel > .choice-order-preview,.choice-modal-panel > .choice-order-note { flex:none; margin:4px 16px; }
.layout:has(.choice-modal-backdrop) > .match-board { visibility:visible; max-height:none; }
.decision-controls[hidden] { display:none; }
.hand-card.playable,.card.main-effect-ready { outline:2px solid #69c58a; outline-offset:2px; box-shadow:none; }
.card.choice-candidate { outline:2px solid #e4be65; outline-offset:2px; }
.card.selected { outline:3px solid #77baff; outline-offset:3px; }
@media(max-height:800px) { .choice-modal-header { padding:10px 16px; } .choice-modal-panel .choice-source .card-art { width:48px; max-height:66px; } .choice-modal-panel .choice-source { grid-template-columns:48px minmax(0,1fr); } .choice-modal-panel .choice-modal-options .choice-card-option .card-art.compact { height:170px; } }

.ability-diagnostics { clear:both; display:grid; gap:10px; margin:12px 0; }
.ability-diagnostic { border:1px solid #435979; border-radius:10px; padding:12px; background:#13243a; }
.ability-diagnostic h3 { margin:0 0 6px; font-size:15px; }
.ability-available { color:#90d7a8; }.ability-unavailable { color:#ffc281; }
.ability-diagnostic ul { margin:6px 0; padding-left:20px; }.ability-diagnostic li { margin:5px 0; }
/* Accepted movements remain visible if the next choice arrives in the same snapshot. */
.motion-card { z-index:80; }

.ability-payment-notes { margin-top:8px; padding:8px; border-left:3px solid #e1b565; background:#4a371b33; font-size:13px; }