:root {
  --ink: #070d0f;
  --ink-2: #0d161a;
  --ink-3: #142128;
  --line: #22343b;
  --bone: #e9eee6;
  --bone-dim: #8a9a98;
  --amber: #c9f05a;            /* primary accent (name kept for the themes) */
  --accent-rgb: 201, 240, 90;
  --on-accent: #0f1a04;
  --fury: #d9242b; --calm: #3f9a3a; --mind: #1f7fd1; --body: #e8761a; --chaos: #7a3fc4; --order: #d9b013;
  --you: var(--amber);
  --them: #ff6fb5;
  --them-rgb: 255, 111, 181;
  --card-w: 112px;
  --card-h: 156px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--bone); font-family: "Barlow", "IBM Plex Sans", system-ui, sans-serif; font-size: 14px; overflow: hidden; }
button { font: inherit; cursor: pointer; }
.mono { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; }
.muted { color: var(--bone-dim); }
[hidden] { display: none !important; }

/* ---------- pre-game screens: spine nav + ledger pages ---------- */
.pre { position: fixed; inset: 0; display: grid; grid-template-columns: 168px 1fr; background:
  linear-gradient(90deg, rgba(var(--accent-rgb),.04), transparent 30%), radial-gradient(1400px 700px at 80% 120%, var(--ink-3) 0%, var(--ink) 60%); overflow: hidden; }
.spine { border-right: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; align-items: stretch; padding: 18px 0 14px; gap: 6px; }
.spine-logo { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 24px; line-height: .9; letter-spacing: 1px; text-align: center; color: var(--amber); margin-bottom: 22px; }
.spine-btn { background: none; border: 0; border-left: 3px solid transparent; color: var(--bone-dim); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; padding: 12px 0 12px 14px; text-align: left; }
.spine-btn.on { color: var(--bone); border-left-color: var(--amber); background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), transparent); }
.spine-btn:hover { color: var(--bone); }
.spine-btn.small { font-size: 13px; letter-spacing: 1px; margin-top: 6px; white-space: nowrap; }
.spine-user { margin-top: auto; padding: 0 12px; font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; color: var(--amber); word-break: break-all; }
.spine-foot { padding: 10px 12px 0; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone-dim); }
.screen { overflow: auto; padding: 36px 44px 40px; }
.screen-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.screen-head h1, .ledger-head h1 { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 44px; letter-spacing: 1px; margin: 0; line-height: 1; font-weight: 400; }
.ledger-no { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 12px; color: var(--amber); letter-spacing: 1px; border: 1px solid var(--amber); padding: 3px 6px; }
.record { margin-left: auto; font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 12px; color: var(--bone-dim); }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ledger { max-width: 440px; margin: 8vh auto 0; background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--amber); padding: 26px 30px 20px; position: relative; }
.ledger-head { margin-bottom: 14px; } .ledger-head p { color: var(--bone-dim); margin: 10px 0 0; font-size: 13px; }
.ledger label, .opp-choice .sub label { display: block; margin: 12px 0 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone-dim); }
.ledger input, .opp-choice input[type=text], .opp-choice input:not([type]), .opp-choice select, .name-input, .search-bar input, .search-bar select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: inherit; }
.ledger input:focus, .name-input:focus, .search-bar input:focus, #room-code:focus { outline: none; border-color: var(--amber); }
.ledger-actions { display: flex; gap: 8px; margin-top: 20px; }
.ledger-foot { margin-top: 16px; text-align: center; }
button.primary { background: var(--amber); color: var(--on-accent); border: 1px solid var(--amber); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; padding: 10px 22px; }
button.primary.big { width: 100%; font-size: 26px; padding: 14px; margin-top: 18px; }
button.primary:disabled { opacity: .5; cursor: default; }
button.ghost { background: none; color: var(--bone-dim); border: 1px solid var(--line); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; padding: 8px 14px; }
button.ghost:hover { color: var(--bone); border-color: var(--bone-dim); }
button.ghost.danger { color: #e6a2a2; border-color: #6b2d2d; }
button.link { background: none; border: 0; color: var(--amber); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.form-error { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--fury); background: rgba(217,36,43,.12); font-size: 13px; }
.panel { background: var(--ink-2); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
.panel-title { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 1px; color: var(--bone-dim); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.panel-title .mono { font-size: 11px; letter-spacing: 0; text-align: right; }
.panel-foot { margin-top: 12px; }
.lobby-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.deck-card { position: relative; background: var(--ink); border: 1px solid var(--line); padding: 12px 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s; }
.deck-card:hover { border-color: var(--bone-dim); transform: translateY(-2px); }
.deck-card.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), 0 0 24px rgba(var(--accent-rgb),.15); }
.deck-card.bad { border-color: #6b2d2d; }
.deck-card b { font-size: 15px; }
.deck-card .muted { font-size: 12px; }
.deck-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }
.deck-doms, .doms { display: flex; gap: 4px; } .deck-doms i, .doms i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.dom-fury { background: var(--fury); } .dom-calm { background: var(--calm); } .dom-mind { background: var(--mind); } .dom-body { background: var(--body); } .dom-chaos { background: var(--chaos); } .dom-order { background: var(--order); }
.opp-choice .opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); margin-top: 8px; cursor: pointer; }
.opp-choice .opt:has(input:checked) { border-color: var(--amber); background: rgba(var(--accent-rgb),.06); }
.opp-choice .opt input { margin-top: 3px; accent-color: var(--amber); }
.opp-choice .opt b { display: block; } .opp-choice .opt small { color: var(--bone-dim); }
.opp-choice .sub { padding: 0 10px 4px 32px; }
/* deck editor */
.editor { display: grid; grid-template-columns: 1.1fr 1.3fr .9fr; gap: 16px; height: calc(100vh - 150px); }
.editor .panel { overflow: hidden; }
.search-bar { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.search-bar input, .search-bar select { margin-top: 0; }
.domain-chips { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: none; color: var(--bone-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 4px 8px; position: relative; padding-left: 18px; }
.chip::before { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: currentColor; opacity: .6; }
.chip.dom-fury { background: none; color: var(--fury); } .chip.dom-calm { background: none; color: var(--calm); } .chip.dom-mind { background: none; color: var(--mind); } .chip.dom-body { background: none; color: var(--body); } .chip.dom-chaos { background: none; color: var(--chaos); } .chip.dom-order { background: none; color: var(--order); }
.chip.on { border-color: currentColor; background: rgba(255,255,255,.05); }
.results, .decklist { overflow-y: auto; flex: 1; min-height: 0; }
.row, .drow { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
.row:hover, .drow:hover { background: rgba(var(--accent-rgb),.06); }
.row .cost, .drow .cost { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 12px; color: var(--amber); }
.row .nm b, .drow .nm b { display: block; font-weight: 600; font-size: 13px; }
.row .nm small { color: var(--bone-dim); font-size: 11px; }
.row .add { width: 26px; height: 26px; border: 1px solid var(--line); background: none; color: var(--bone); font-size: 16px; }
.row .add:hover { border-color: var(--amber); color: var(--amber); }
.grp { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--bone-dim); margin: 10px 0 2px; }
.drow .ctr { display: flex; align-items: center; gap: 4px; }
.drow .ctr button { width: 22px; height: 22px; border: 1px solid var(--line); background: none; color: var(--bone); font-size: 14px; line-height: 1; }
.drow .ctr button:disabled { opacity: .3; }
.drow .ctr b { min-width: 16px; text-align: center; font-family: "JetBrains Mono", "IBM Plex Mono", monospace; }
.drow.fixed .ctr button { visibility: hidden; }
.curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; height: 54px; align-items: end; margin-bottom: 6px; border-bottom: 1px solid var(--line); padding-bottom: 14px; position: relative; }
.curve .bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.curve .bar::after { content: ""; display: block; width: 100%; height: var(--h); background: linear-gradient(180deg, var(--amber), rgba(var(--accent-rgb),.35)); min-height: 1px; }
.curve .bar i { position: absolute; bottom: calc(var(--h) + 2px); left: 0; right: 0; text-align: center; font-size: 10px; font-style: normal; color: var(--bone-dim); }
.curve .bar span { position: absolute; bottom: -14px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--bone-dim); }
.raw { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.raw summary { cursor: pointer; font-size: 12px; color: var(--bone-dim); letter-spacing: 1px; text-transform: uppercase; }
.raw textarea { width: 100%; height: 160px; margin-top: 8px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: 12px "JetBrains Mono", "IBM Plex Mono", monospace; padding: 8px; }
.raw-actions { display: flex; gap: 8px; margin-top: 6px; }
.inspect-card { min-height: 200px; margin-bottom: 14px; }
.inspect-card img { width: 100%; max-width: 230px; display: block; margin-bottom: 8px; border: 1px solid #000; }
.inspect-card b { font-size: 15px; } .inspect-card p { font-size: 13px; line-height: 1.45; }
.problems { font-size: 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.problems .ok { color: var(--calm); } .problems .bad { color: #ff9b9b; padding-left: 8px; border-left: 2px solid var(--fury); } .problems .warn { color: var(--amber); padding-left: 8px; border-left: 2px solid var(--amber); }
.name-input { width: 260px; margin: 0; }
/* profile */
.profile-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.history { display: flex; flex-direction: column; }
.hrow { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; align-items: center; }
.hrow .res { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.hrow.win .res { color: var(--calm); } .hrow.loss .res { color: #ff9b9b; }
#j-status { margin-top: 10px; min-height: 18px; font-size: 12px; }

/* ---------- table layout ---------- */
.table { position: fixed; inset: 0; display: grid; grid-template-rows: 48px 1fr 222px; }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--ink-2); }
.turnline { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; display: flex; gap: 14px; align-items: baseline; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.turnline span:nth-child(n+2) { color: var(--bone-dim); font-size: 16px; }
#t-showdown { color: var(--amber); }
.scores { display: flex; align-items: center; gap: 22px; }
.score { display: flex; align-items: baseline; gap: 10px; }
.score b { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; font-weight: 400; }
.score i { font-style: normal; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 34px; line-height: 1; transition: transform .2s; }
.score i.bump { transform: scale(1.5); }
.score.me i { color: var(--you); } .score.them i { color: var(--them); }
.score small { color: var(--bone-dim); font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; }
.vs { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bone-dim); }
.topbtns { justify-self: end; display: flex; gap: 6px; }
.ghost { background: transparent; color: var(--bone-dim); border: 1px solid var(--line); padding: 5px 10px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.ghost:hover { color: var(--bone); border-color: var(--bone-dim); }
.ghost.on { color: var(--amber); border-color: var(--amber); }

.board { display: grid; grid-template-columns: 196px 1fr 196px; min-height: 0; }
.rail { padding: 10px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--ink-2); }
.rail.right { border-right: 0; border-left: 1px solid var(--line); }
.rail-title { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--bone-dim); margin: 12px 0 6px; display: flex; justify-content: space-between; }
.rail-title:first-child { margin-top: 0; }
.legend-slot { min-height: 60px; }
.runes { display: flex; flex-wrap: wrap; gap: 5px; }
.rune { width: 26px; height: 36px; border-radius: 3px; border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: transform .25s, opacity .25s; }
.rune.exh { opacity: .35; transform: rotate(90deg) scale(.8); }
.slot-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.slot-row.trash .card { --card-w: 56px; --card-h: 78px; }
.piles { display: flex; gap: 10px; margin-top: 12px; }
.pile { position: relative; width: 56px; text-align: center; }
.pile-card { width: 56px; height: 78px; border-radius: 5px; border: 1px solid #000; background: repeating-linear-gradient(135deg, #1b2230 0 5px, #232c3c 5px 10px); box-shadow: 2px 2px 0 #0b0f15, 4px 4px 0 #1a212c; }
.pile-card.rune-back { background: repeating-linear-gradient(135deg, #2a2418 0 5px, #3a3220 5px 10px); }
.pile-card.hand-back { background: repeating-linear-gradient(135deg, #1a2a33 0 5px, #223845 5px 10px); }
.pile-n { position: absolute; top: 26px; left: 0; right: 0; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 24px; color: #fff; text-shadow: 0 1px 3px #000; }
.pile-l { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: var(--bone-dim); margin-top: 4px; }
.chain { display: flex; flex-direction: column; gap: 4px; }
.chain-item { padding: 6px 8px; background: var(--ink-3); border-left: 3px solid var(--amber); font-size: 12px; }
.chain-item.them { border-left-color: var(--them); }

.center { display: grid; grid-template-rows: minmax(110px, .8fr) minmax(230px, 1.6fr) minmax(110px, .8fr); min-height: 0; overflow: hidden; padding: 10px 14px; gap: 10px;
  background: radial-gradient(900px 500px at 50% 50%, var(--ink-3) 0%, var(--ink) 70%); }
.base { position: relative; border: 1px dashed var(--line); padding: 22px 10px 8px; min-height: 0; overflow: auto; transition: background .15s, border-color .15s; }
.base.me { border-color: rgba(var(--accent-rgb),.35); }
.base.them { border-color: rgba(var(--them-rgb),.35); }
.zone-label { position: absolute; top: 4px; left: 10px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--bone-dim); }
.units { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

.battlefields { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; min-height: 0; }
.bf { --tint: transparent; --edge: var(--line); position: relative; display: grid; grid-template-rows: auto 1fr 1fr; border: 1px solid var(--edge); background: var(--ink-2); min-height: 0; overflow: hidden; transition: outline-color .15s, border-color .3s, box-shadow .3s; }
.bf::before { content: ""; position: absolute; inset: 0; background: var(--bf-art) center 35% / cover no-repeat; pointer-events: none; }
.bf::after { content: ""; position: absolute; inset: 0; background: var(--tint); pointer-events: none; transition: background .3s; }
.bf > * { position: relative; }
.bf.held-me { --edge: var(--you); --tint: linear-gradient(rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.05) 40%, rgba(var(--accent-rgb),.22)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 24px rgba(var(--accent-rgb),.18); }
.bf.held-them { --edge: var(--them); --tint: linear-gradient(rgba(var(--them-rgb),.24), rgba(var(--them-rgb),.05) 40%, rgba(var(--them-rgb),.24)); box-shadow: inset 0 0 0 1px rgba(var(--them-rgb),.35), 0 0 24px rgba(var(--them-rgb),.18); }
.bf.held-me .bf-head { background: linear-gradient(90deg, rgba(var(--accent-rgb),.35), rgba(0,0,0,.55)); }
.bf.held-them .bf-head { background: linear-gradient(90deg, rgba(var(--them-rgb),.35), rgba(0,0,0,.55)); }
.bf-head { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 10px; background: rgba(0,0,0,.55); border-bottom: 1px solid var(--edge); }
.bf-head b { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; font-weight: 400; }
.bf-head .ctl { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; color: var(--bone-dim); }
.bf-head .ctl.me { color: var(--you); } .bf-head .ctl.them { color: var(--them); }
.bf.contested .bf-head { box-shadow: inset 0 -2px 0 var(--fury); }
.bf-side { padding: 6px; min-height: 136px; overflow: auto; }
.bf-side .units { gap: 6px; }
.bf-side.theirs { border-bottom: 1px dashed rgba(255,255,255,.12); }
.bf.targetable { outline: 2px solid var(--amber); cursor: pointer; }
.bf.selected { outline: 3px solid #fff; }
/* drop zones while dragging */
.zone.droppable, .bf.droppable { outline: 2px dashed var(--amber); background-color: rgba(var(--accent-rgb),.07); }
.zone.dropover, .bf.dropover { outline: 3px solid var(--amber); background-color: rgba(var(--accent-rgb),.16); }

/* ---------- cards & units ---------- */
.card { position: relative; width: var(--card-w); height: var(--card-h); border-radius: 6px; overflow: hidden; background: var(--ink-3); border: 1px solid #000; flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.6); transition: transform .18s, outline-color .12s, margin .18s; user-select: none; -webkit-user-drag: none; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card .fallback { position: absolute; inset: 0; padding: 30px 6px 8px; font-size: 11px; background: linear-gradient(#20283a, #121720); overflow: hidden; }
.card .fallback b { display: block; font-size: 12px; margin-bottom: 4px; }
.card .badge { position: absolute; left: 4px; top: 4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #000c; color: #fff; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 22px; text-align: center; }
.card .might { position: absolute; right: 4px; bottom: 4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 4px; background: #000d; color: #fff; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; line-height: 26px; text-align: center; border: 1px solid #fff3; }
.card .might.up { color: #7df0a0; } .card .might.down { color: #ff8a8a; }
.card .dmg { position: absolute; left: 4px; bottom: 4px; padding: 0 6px; height: 22px; border-radius: 4px; background: var(--fury); color: #fff; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 22px; }
.card .tags { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.card .tag { font-size: 9px; letter-spacing: 1px; padding: 1px 4px; background: #000c; border-radius: 2px; text-transform: uppercase; }
.card .tag.stun { background: var(--mind); } .card .tag.emp { background: var(--order); color: #000; } .card .tag.atk { background: var(--fury); } .card .tag.def { background: var(--calm); } .card .tag.buff { background: #2a8f5a; }
/* exhausted: a true 90 degree tap; margins reserve the rotated footprint so neighbours do not overlap */
.card.exh { transform: rotate(90deg); filter: brightness(.7); margin: 0 calc((var(--card-h) - var(--card-w)) / 2); }
.card.them { outline: 1px solid rgba(var(--them-rgb),.45); }
.card.clickable { cursor: grab; outline: 2px solid var(--amber); box-shadow: 0 0 14px var(--amber)66, 0 2px 8px #000a; }
.card.clickable:hover { transform: translateY(-4px) scale(1.03); }
.card.clickable.exh:hover { transform: rotate(90deg) translateY(-4px); }
.card.selected { outline: 3px solid #fff; box-shadow: 0 0 18px #fff8; }
.card.dragging { opacity: .35; }
.card.facedown .fallback { background: repeating-linear-gradient(45deg, #1a1f2a 0 6px, #222a38 6px 12px); display: grid; place-items: center; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--bone-dim); padding: 0; }
.card.legend { --card-w: 168px; --card-h: 112px; }
.card.legend img { object-position: center 20%; }
.card.legend.exh { margin: 0; transform: rotate(0) scale(.96); filter: brightness(.55); }
.units .card { --card-w: 92px; --card-h: 128px; }
.card.pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- dock ---------- */
.dock { display: grid; grid-template-columns: 1fr 380px; border-top: 1px solid var(--line); background: var(--ink-2); min-height: 0; }
.hand { display: flex; gap: 8px; align-items: flex-end; justify-content: center; padding: 10px 14px; overflow-x: auto; }
.hand .card { --card-w: 118px; --card-h: 165px; }
.hand .card:hover { z-index: 2; }
.prompt { border-left: 1px solid var(--line); padding: 12px 14px 8px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; }
.p-text { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; color: var(--amber); }
.p-text.idle { color: var(--bone-dim); }
.p-buttons { display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto; align-content: flex-start; }
.p-buttons button { padding: 8px 12px; background: var(--ink-3); color: var(--bone); border: 1px solid var(--line); font-size: 13px; }
.p-buttons button:hover { border-color: var(--amber); }
.p-buttons button.primary { background: var(--amber); color: var(--on-accent); border-color: var(--amber); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: 1px; }
.p-buttons button.primary.warn { background: transparent; color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.p-buttons button.danger { border-color: #5a2222; color: #ff9a9a; }
.p-buttons button:disabled { opacity: .35; cursor: default; }
.p-buttons .dmg-row { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; }
.p-buttons .dmg-row input { width: 52px; padding: 4px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); }
.p-hint { font-size: 10px; letter-spacing: .3px; }

/* ---------- overlays ---------- */
.preview { position: fixed; left: 206px; bottom: 232px; width: 300px; z-index: 20; pointer-events: none; background: var(--ink-2); border: 1px solid var(--line); padding: 8px; box-shadow: 0 10px 40px #000c; }
.preview.pinned { pointer-events: auto; border-color: var(--amber); }
.preview img { width: 100%; display: block; border-radius: 10px; }
.preview div { padding: 8px 2px 2px; font-size: 12px; line-height: 1.4; white-space: pre-wrap; }
#preview-kw { color: var(--bone-dim); font-size: 11px; border-top: 1px solid var(--line); margin-top: 4px; }
.menu { position: fixed; z-index: 30; min-width: 220px; background: var(--ink-2); border: 1px solid var(--amber); box-shadow: 0 10px 40px #000c; padding: 6px; }
.menu .menu-title { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; background: transparent; color: var(--bone); border: 0; }
.menu button:hover { background: var(--ink-3); }
.log { position: fixed; top: 48px; right: 0; bottom: 222px; width: 380px; z-index: 15; background: color-mix(in srgb, var(--ink-2) 94%, transparent); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); }
#log-body { overflow-y: auto; padding: 8px 12px; font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.5; color: var(--bone-dim); }
#log-body div.hot { color: var(--bone); }
.toast { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 40; background: var(--ink-2); border: 1px solid var(--amber); padding: 10px 16px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; }
.banner { position: fixed; left: 0; right: 0; top: 22%; z-index: 45; text-align: center; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 72px; letter-spacing: 5px; color: var(--amber); text-shadow: 0 4px 30px #000; pointer-events: none; animation: banner 1.6s ease-out forwards; background: linear-gradient(90deg, transparent, #000a 30%, #000a 70%, transparent); padding: 10px 0; }
.banner.them { color: var(--them); }
@keyframes banner { 0% { opacity: 0; transform: scale(.9); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.splash { position: fixed; right: 220px; top: 50%; transform: translateY(-50%); z-index: 44; width: 260px; text-align: center; pointer-events: none; animation: splash 2.2s ease-out forwards; }
.splash img { width: 100%; border-radius: 12px; box-shadow: 0 20px 60px #000; }
.splash div { margin-top: 8px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: var(--them); text-shadow: 0 2px 10px #000; }
@keyframes splash { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.8); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -55%) scale(.95); } }
.drag-ghost { position: fixed; z-index: 50; width: 100px; height: 140px; border-radius: 6px; overflow: hidden; pointer-events: none; box-shadow: 0 16px 40px #000; transform: translate(-50%, -60%) rotate(-3deg); border: 2px solid var(--amber); background: var(--ink-3); }
.drag-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drag-ghost .fallback { position: absolute; inset: 0; padding: 40px 8px; text-align: center; font-weight: 600; font-size: 13px; }

.dom-fury { background: var(--fury); } .dom-calm { background: var(--calm); } .dom-mind { background: var(--mind); } .dom-body { background: var(--body); } .dom-chaos { background: var(--chaos); } .dom-order { background: var(--order); }

.card.dim { filter: brightness(.55) saturate(.5); }
.card.dim:hover { filter: brightness(.8) saturate(.7); }
#preview-why { margin-top: 8px; padding: 6px 8px; border-left: 3px solid var(--fury); background: rgba(217,36,43,.12); font-size: 12px; color: var(--bone); }

/* bug reporter */
.topbtns .bug { border-color: #6b2d2d; color: #e6a2a2; }
.topbtns .bug:hover { background: rgba(217,36,43,.15); }
.bugform { position: fixed; inset: 0; z-index: 60; background: rgba(5,7,10,.78); display: flex; align-items: center; justify-content: center; }
.bug-card { width: min(640px, 92vw); background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--fury); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 80px #000; }
.bug-head { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 24px; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: baseline; }
.bug-head span { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0; color: var(--bone-dim); }
#bug-thumb { width: 100%; max-height: 240px; object-fit: contain; background: #000; border: 1px solid var(--line); }
#bug-text { width: 100%; min-height: 110px; resize: vertical; background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 10px; font: 14px "Barlow", "IBM Plex Sans", system-ui, sans-serif; }
#bug-text:focus { outline: none; border-color: var(--amber); }
.bug-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bug-actions button { padding: 8px 18px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; cursor: pointer; }
.bug-actions .primary { background: var(--amber); color: var(--on-accent); border: 1px solid var(--amber); }
.rune.clickable { outline: 2px solid var(--amber); cursor: pointer; transform: translateY(-2px); }
.rune.selected { outline: 3px solid #fff; }
.guest-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.guest-row input { width: 140px; margin: 0; padding: 6px 8px; font-size: 12px; }

/* ---------- batch 4: player cards, lobby columns, social, limited, gallery, record, look, settings ---------- */
:root { --anim: 1; --text-scale: 1; }
body { font-size: calc(14px * var(--text-scale)); }
button.ghost.small { font-size: 13px; letter-spacing: 1px; padding: 5px 10px; }
button.ghost.tiny { font-size: 11px; letter-spacing: 1px; padding: 3px 8px; margin-left: auto; opacity: .7; }
.pcard { margin-left: auto; }
.pcard-inner { display: flex; align-items: center; gap: 12px; background: var(--ink-2); border: 1px solid var(--line); padding: 8px 14px 8px 8px; position: relative; }
.pcard-inner::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.pcard-inner .avatar { width: 46px; height: 46px; border-radius: 4px; overflow: hidden; border: 1px solid #000; background: var(--ink-3); flex: 0 0 auto; }
.pcard-inner .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.pcard-inner .avatar.rune { background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 4px, transparent 4px 8px), var(--amber); }
.pcard-text { display: flex; flex-direction: column; line-height: 1.25; }
.pcard-text b { font-size: 15px; } .pcard-text .ttl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); } .pcard-text .mono { font-size: 11px; color: var(--bone-dim); }
.resume { display: flex; align-items: center; gap: 16px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--amber); background: rgba(var(--accent-rgb),.08); }
.lobby-grid3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.learn-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.puzzles { display: flex; flex-direction: column; }
.puzzle-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.puzzle-row .nm b { display: block; font-size: 13px; } .puzzle-row .nm small { color: var(--bone-dim); font-size: 11px; line-height: 1.3; display: block; }
.diff { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 3px 0; border: 1px solid var(--line); }
.diff.easy { color: var(--calm); border-color: var(--calm); } .diff.medium { color: var(--amber); border-color: var(--amber); } .diff.hard { color: #ff8a8a; border-color: var(--fury); }
.invites { display: flex; flex-direction: column; gap: 6px; }
.invite { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--amber); background: rgba(var(--accent-rgb),.08); font-size: 13px; animation: pulse-edge 1.6s infinite; }
.invite.muted { border-color: var(--line); background: none; animation: none; }
.invite span { flex: 1; }
@keyframes pulse-edge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.0); } 50% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); } }
.friends { display: flex; flex-direction: column; margin-top: 6px; }
.friend { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.friend .nm b { display: block; } .friend .nm small { color: var(--bone-dim); font-size: 11px; }
.friend .dot { width: 8px; height: 8px; border-radius: 50%; background: #3a4452; } .friend.online .dot { background: var(--calm); box-shadow: 0 0 8px var(--calm); }
.add-friend { display: flex; gap: 6px; margin-top: 10px; }
.add-friend input { flex: 1; padding: 7px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: inherit; }
.live { display: flex; flex-direction: column; }
.live-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.live-row .nm { flex: 1; }
.ladder { display: flex; flex-direction: column; }
.ladder-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.ladder-row .rank { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; color: var(--bone-dim); }
.ladder-row.me { background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), transparent); } .ladder-row.me .rank { color: var(--amber); }
.ladder-row .mono { font-size: 11px; } .ladder-row .muted { font-size: 11px; }
.fmt { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--mind); border: 1px solid var(--mind); padding: 0 4px; margin-left: 6px; }
.warn-note { display: block; font-size: 11px; color: var(--amber); border-left: 2px solid var(--amber); padding-left: 6px; margin-top: 4px; }
/* limited */
.limited-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.limited-bar select { padding: 6px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: inherit; }
.draft { margin-bottom: 14px; }
.draft .gallery-grid { max-height: 330px; overflow-y: auto; }
/* gallery */
.gallery-bar { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(120px, .6fr)) auto; gap: 8px; align-items: center; margin-bottom: 14px; }
.gallery-bar input, .gallery-bar select { padding: 8px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: inherit; }
.gallery-bar .domain-chips { margin: 0; }
.gallery-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.gallery-grid.small { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tile { position: relative; aspect-ratio: 5 / 7; background: var(--ink-3); border: 1px solid #000; overflow: hidden; cursor: pointer; transition: transform calc(.15s * var(--anim)), outline-color .1s; outline: 2px solid transparent; }
.tile:hover { transform: translateY(-3px); outline-color: var(--bone-dim); }
.tile.on { outline-color: var(--amber); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .tname { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 11px; line-height: 1.2; background: linear-gradient(transparent, #000d 60%); opacity: 0; transition: opacity .15s; }
.tile:hover .tname, .tile.noart .tname, .tile.av .tname { opacity: 1; }
.tile.noart { background: linear-gradient(#20283a, #121720); }
.tile.noart .tname { top: 0; bottom: auto; padding: 8px 6px; background: none; font-size: 12px; font-weight: 600; }
.tile.unscripted::before { content: "no script"; position: absolute; top: 6px; right: -22px; transform: rotate(35deg); background: var(--amber); color: var(--on-accent); font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 1px; padding: 1px 26px; z-index: 1; }
.tile.locked { filter: grayscale(1) brightness(.5); cursor: not-allowed; }
.tile.locked::after { content: "🔒"; position: absolute; top: 6px; left: 6px; font-size: 14px; filter: none; }
.gallery-more { margin-top: 14px; text-align: center; }
.glossary { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.gl { font-size: 12px; line-height: 1.4; border-left: 2px solid var(--line); padding-left: 8px; }
.gl b { display: block; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--amber); font-weight: 400; }
/* record */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile-stat { background: var(--ink-2); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tile-stat::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--amber), transparent); }
.tile-stat b { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 36px; line-height: 1; font-weight: 400; }
.tile-stat span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone-dim); margin-top: 4px; }
.tile-stat small { font-size: 11px; color: var(--bone-dim); margin-top: 2px; }
.hrow .acts { display: flex; gap: 10px; align-items: center; }
.hrow .nm small { display: block; color: var(--bone-dim); font-size: 11px; }
.hrow .left { color: var(--bone-dim); }
/* look */
.look-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.avatar-grid .tile { aspect-ratio: 1; }
.avatar-grid .tile img { object-position: center 18%; }
.rune-av { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 5px, transparent 5px 10px), var(--ink-3); }
.rune-av.dom-fury { background-color: var(--fury); } .rune-av.dom-calm { background-color: var(--calm); } .rune-av.dom-mind { background-color: var(--mind); } .rune-av.dom-body { background-color: var(--body); } .rune-av.dom-chaos { background-color: var(--chaos); } .rune-av.dom-order { background-color: var(--order); }
.choice-list { display: flex; flex-direction: column; }
.choice { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 8px; border-left: 3px solid transparent; cursor: pointer; font-size: 13px; }
.choice:hover { background: rgba(255,255,255,.03); }
.choice.on { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), transparent); }
.choice.locked { color: var(--bone-dim); cursor: not-allowed; } .choice.locked b::before { content: "🔒 "; font-size: 11px; }
.choice small { color: var(--bone-dim); font-size: 11px; text-align: right; }
/* settings */
.settings { max-width: 560px; gap: 14px; }
.settings label { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.settings label.check { grid-template-columns: auto 1fr; }
.settings input[type=range] { accent-color: var(--amber); }
.settings select { padding: 6px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: inherit; }
.settings button.primary { justify-self: start; margin-top: 8px; width: fit-content; }
.settings .muted { font-size: 12px; }

/* ---------- table overlays: clock, emotes, coach, summary, replay, spectate ---------- */
.rope { position: fixed; left: 0; right: 0; top: 48px; height: 4px; z-index: 35; background: rgba(255,255,255,.06); }
.rope i { display: block; height: 100%; width: 100%; background: var(--amber); transition: width .25s linear; }
.rope.urgent i { background: var(--fury); animation: rope-blink .5s infinite; }
@keyframes rope-blink { 50% { opacity: .35; } }
.emote-wheel { position: fixed; right: 14px; bottom: 236px; z-index: 36; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--ink-2); border: 1px solid var(--amber); padding: 6px; box-shadow: 0 10px 40px #000c; }
.emote-wheel button { background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 7px 12px; font-size: 13px; }
.emote-wheel button:hover { border-color: var(--amber); color: var(--amber); }
.emote-bubble { position: fixed; z-index: 37; background: var(--bone); color: var(--ink); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: 1px; padding: 8px 16px; border-radius: 18px; box-shadow: 0 8px 30px #000a; animation: bubble-in calc(.25s * var(--anim)) ease-out; pointer-events: none; }
.emote-bubble.me { left: 24px; bottom: 240px; border-bottom-left-radius: 2px; }
.emote-bubble.them { left: 24px; top: 64px; border-top-left-radius: 2px; background: var(--them); color: #1a0710; }
@keyframes bubble-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.coach { position: fixed; right: 14px; top: 64px; width: 320px; z-index: 34; background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--calm); padding: 10px 12px; font-size: 13px; line-height: 1.45; box-shadow: 0 10px 40px #000a; animation: bubble-in calc(.25s * var(--anim)) ease-out; }
.coach.anchored { right: auto; top: auto; width: 300px; animation: coach-in calc(.35s * var(--anim)) cubic-bezier(.2,.8,.2,1); }
.coach.anchored::before { content: ""; position: absolute; width: 10px; height: 10px; background: var(--ink-2); border: 1px solid var(--line); transform: rotate(45deg); }
.coach.from-left::before { left: -6px; top: 14px; border-right: 0; border-top: 0; }
.coach.from-right::before { right: -6px; top: 14px; border-left: 0; border-bottom: 0; }
.coach.from-bottom::before { bottom: -6px; right: 18px; border-left: 0; border-top: 0; }
.coach.from-top::before { top: -6px; right: 18px; border-right: 0; border-bottom: 0; }
.coach.from-left { --coach-dx: -10px; --coach-dy: 0; } .coach.from-right { --coach-dx: 10px; --coach-dy: 0; } .coach.from-bottom { --coach-dx: 0; --coach-dy: 10px; } .coach.from-top { --coach-dx: 0; --coach-dy: -10px; }
@keyframes coach-in { from { opacity: 0; transform: translate(var(--coach-dx, 0), var(--coach-dy, 0)); } to { opacity: 1; transform: none; } }
.coach-ring { position: fixed; z-index: 33; pointer-events: none; border: 2px solid var(--calm); border-radius: 8px; box-shadow: 0 0 0 0 rgba(63, 154, 58, .45); animation: coach-ring-in calc(.35s * var(--anim)) ease-out, coach-pulse calc(2.2s * var(--anim)) ease-in-out calc(.35s * var(--anim)) infinite; }
@keyframes coach-ring-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes coach-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 154, 58, .45); border-color: var(--calm); } 50% { box-shadow: 0 0 0 8px rgba(63, 154, 58, 0); border-color: #7fd37a; } }
.coach-head { display: flex; justify-content: space-between; align-items: center; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--calm); margin-bottom: 6px; }
.coach-head button { font-size: 14px; padding: 0 8px; border: 0; }
.summary { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-width: 94vw; max-height: 90vh; overflow: auto; z-index: 48; background: var(--ink-2); border: 1px solid var(--line); border-top: 4px solid var(--amber); padding: 22px 26px 18px; box-shadow: 0 30px 80px #000; animation: bubble-in calc(.3s * var(--anim)) ease-out; }
.sum-title { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 48px; letter-spacing: 2.5px; line-height: 1; }
.sum-title.won { color: var(--amber); } .sum-title.lost { color: var(--them); }
.sum-sub { color: var(--bone-dim); margin-bottom: 14px; font-size: 12px; }
.sum-graph { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.sum-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: end; }
.sum-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sum-name.me { color: var(--you); } .sum-name.them { color: var(--them); }
.sum-bars { display: flex; gap: 3px; height: 56px; align-items: flex-end; border-bottom: 1px solid var(--line); }
.sum-bars i { flex: 1; min-height: 2px; background: var(--bone-dim); opacity: .8; }
.sum-row:first-child .sum-bars i { background: var(--you); } .sum-row:nth-child(2) .sum-bars i { background: var(--them); }
.sum-bars i.turn { outline: 1px solid #fff; }
.sum-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sum-stat { background: var(--ink); border: 1px solid var(--line); padding: 8px 10px; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; }
.sum-stat b { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone-dim); font-weight: 400; }
.sum-stat span { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 22px; } .sum-stat .me { color: var(--you); } .sum-stat .them { color: var(--them); }
.sum-unlocks { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sum-unlocks b { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); font-weight: 400; margin-right: 4px; }
.unlock { border: 1px solid var(--amber); color: var(--amber); font-size: 11px; padding: 2px 8px; letter-spacing: 1px; }
.sum-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.replay-bar { position: fixed; left: 50%; bottom: 232px; transform: translateX(-50%); z-index: 38; display: flex; align-items: center; gap: 8px; background: var(--ink-2); border: 1px solid var(--amber); padding: 8px 12px; box-shadow: 0 10px 40px #000c; }
.replay-bar input[type=range] { width: 280px; accent-color: var(--amber); }
.replay-bar .mono { font-size: 11px; min-width: 60px; color: var(--bone-dim); }
.spec-banner { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 38; display: flex; gap: 12px; align-items: center; background: var(--ink-2); border: 1px solid var(--them); color: var(--them); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; padding: 6px 14px; }
body.spectating .hand, body.replaying .hand { opacity: .35; pointer-events: none; }
body.spectating .prompt .p-buttons, body.replaying .prompt .p-buttons { display: none; }
body.replaying #btn-emote, body.spectating #btn-emote { display: none; }

/* ---------- cosmetics: board themes, sleeves, rune styles, colorblind, text size ---------- */
body.theme-noxus { --ink: #120909; --ink-2: #1c0f0f; --ink-3: #2a1616; --line: #4a2626; --amber: #ff4d4d; --accent-rgb: 255, 77, 77; --on-accent: #1a0505; --them: #ffd27a; --them-rgb: 255, 210, 122; }
body.theme-ionia { --ink: #110a10; --ink-2: #1b1119; --ink-3: #271a25; --line: #46303f; --amber: #f3a7c7; --accent-rgb: 243, 167, 199; --on-accent: #1d0a14; --them: #7fe3b3; --them-rgb: 127, 227, 179; }
body.theme-piltover { --ink: #0f0e0a; --ink-2: #1a1810; --ink-3: #262216; --line: #4a4022; --amber: #e5b85c; --accent-rgb: 229, 184, 92; --on-accent: #1a1200; --bone: #efe6d2; --them: #7fb2ff; --them-rgb: 127, 178, 255; }
body.theme-freljord { --ink: #070c14; --ink-2: #0d1522; --ink-3: #152033; --line: #26405d; --amber: #9fd4ff; --accent-rgb: 159, 212, 255; --on-accent: #06131f; --them: #ffb86b; --them-rgb: 255, 184, 107; }
body.theme-void { --ink: #0b0712; --ink-2: #140c1f; --ink-3: #1e1330; --line: #3a2660; --amber: #c78cff; --accent-rgb: 199, 140, 255; --on-accent: #140824; --them: #7fe0d0; --them-rgb: 127, 224, 208; }
body.theme-demacia { --ink: #0d0c08; --ink-2: #19160d; --ink-3: #262013; --line: #4f4420; --amber: #ffd45c; --accent-rgb: 255, 212, 92; --on-accent: #1a1200; --them: #7fb2ff; --them-rgb: 127, 178, 255; }
body.theme-bilgewater { --ink: #0e0a06; --ink-2: #19120b; --ink-3: #261a10; --line: #4d3521; --amber: #e39a4b; --accent-rgb: 227, 154, 75; --on-accent: #1a0e02; --bone: #efdcc0; --them: #6fd3e0; --them-rgb: 111, 211, 224; }
body.theme-shadow { --ink: #060a0a; --ink-2: #0b1313; --ink-3: #112020; --line: #1f3a3a; --amber: #52e0d2; --accent-rgb: 82, 224, 210; --on-accent: #041412; --them: #c4a0ff; --them-rgb: 196, 160, 255; --bone: #d6e6e0; }
body[class*="theme-"]:not(.theme-ink) .pre { background: radial-gradient(1400px 700px at 80% 120%, var(--ink-3) 0%, var(--ink) 60%); }
body.sleeve-fury .pile-card, body.sleeve-fury .hand-back { background: repeating-linear-gradient(135deg, #3a0f12 0 5px, #5a181c 5px 10px); border-color: var(--fury); }
body.sleeve-calm .pile-card, body.sleeve-calm .hand-back { background: repeating-linear-gradient(135deg, #0f2a12 0 5px, #18401c 5px 10px); border-color: var(--calm); }
body.sleeve-mind .pile-card, body.sleeve-mind .hand-back { background: repeating-linear-gradient(135deg, #0c2340 0 5px, #133460 5px 10px); border-color: var(--mind); }
body.sleeve-body .pile-card, body.sleeve-body .hand-back { background: repeating-linear-gradient(135deg, #3a1e08 0 5px, #5a2f0d 5px 10px); border-color: var(--body); }
body.sleeve-chaos .pile-card, body.sleeve-chaos .hand-back { background: repeating-linear-gradient(135deg, #22103a 0 5px, #341a58 5px 10px); border-color: var(--chaos); }
body.sleeve-order .pile-card, body.sleeve-order .hand-back { background: repeating-linear-gradient(135deg, #3a3008 0 5px, #58480d 5px 10px); border-color: var(--order); }
body.sleeve-showcase .pile-card, body.sleeve-showcase .hand-back { background: conic-gradient(from 45deg, var(--amber), #d9242b, #7a3fc4, #1f7fd1, #3f9a3a, var(--amber)); border-color: #fff; }
body.sleeve-hex .pile-card, body.sleeve-hex .hand-back { background: radial-gradient(circle at 50% 50%, #1e2a44 0 30%, transparent 31%), repeating-linear-gradient(60deg, #0e1a2e 0 6px, #1a2b4a 6px 12px); border-color: var(--them); }
body[class*="sleeve-"]:not(.sleeve-plain) .pile-card.rune-back { filter: saturate(.6); }
body.rune-square .rune { background-image: none; }
body.rune-gem .rune { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset -4px -6px 10px rgba(0,0,0,.45), inset 3px 4px 6px rgba(255,255,255,.35); }
body.rune-glyph .rune { background-image: none; border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: 0; box-shadow: none; }
body.rune-glyph .rune::after { content: attr(data-d); display: block; text-align: center; line-height: 30px; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
body.cb { --fury: #d55e00; --calm: #009e73; --mind: #0072b2; --body: #e69f00; --chaos: #cc79a7; --order: #f0e442; --them: #56b4e9; --you: #f0e442; }
body.cb .rune::after, body.cb .deck-doms i::after, body.cb .doms i::after { content: attr(data-d); display: block; text-align: center; font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; line-height: 30px; color: #000; font-weight: 700; }
body.cb .deck-doms i::after, body.cb .doms i::after { line-height: 12px; font-size: 9px; }
body.cb .bf.held-me { border-style: double; border-width: 3px; } body.cb .bf.held-them { border-style: dashed; border-width: 2px; }
body.text-0 .card .fallback { font-size: 10px; } body.text-2 .card .fallback { font-size: 12.5px; } body.text-2 .preview { width: 360px; }
.card { transition: transform calc(.18s * var(--anim)), outline-color .12s, margin calc(.18s * var(--anim)); }
.rune { transition: transform calc(.25s * var(--anim)), opacity calc(.25s * var(--anim)); }
#deck-records .hrow, #legend-records .hrow, #matchups .hrow { grid-template-columns: 1fr auto auto; }
.puzzle-head { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 1px; color: var(--amber); margin: 4px 0 2px; }
.puzzle-row.solved .nm b { color: var(--calm); }
.sum-solution { margin: 12px 0; font-size: 13px; line-height: 1.5; }
.sum-solution b { display: block; margin-bottom: 4px; color: var(--amber); font-weight: 600; }
.sum-solution ol { margin: 0; padding-left: 22px; } .sum-solution li.sub { list-style: none; color: var(--bone-dim); margin-left: -8px; font-size: 12px; }

/* real rune art: the symbol from the rune card, cropped */
body.rune-art .rune { background-image: var(--rune-img); background-size: 220% auto; background-position: 50% 24%; background-repeat: no-repeat; border-radius: 4px; box-shadow: 0 1px 3px #000, inset 0 0 0 1px rgba(255,255,255,.12); }
body.rune-art .rune.exh { filter: grayscale(.6); }
.avatar.rune-art, .rune-art { background-size: 220% auto; background-position: 50% 24%; background-repeat: no-repeat; }
.tile .rune-art { position: absolute; inset: 0; }
.tile.av img { object-position: center 14%; }
.pcard-inner .avatar img { object-position: center 14%; }

/* play: mode first, then deck */
.play-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
.col.side .panel { padding: 12px 14px; }
.mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mode { background: var(--ink); border: 1px solid var(--line); color: var(--bone); text-align: left; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color .15s, transform .15s; position: relative; }
.mode b { font-family: "Chakra Petch", sans-serif; font-weight: 700; letter-spacing: 1px; font-size: 16px; }
.mode small { color: var(--bone-dim); font-size: 12px; line-height: 1.3; }
.mode:hover { border-color: var(--bone-dim); transform: translateY(-2px); }
.mode.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), 0 0 24px rgba(var(--accent-rgb),.15); }
.mode.on::after { content: "✓"; position: absolute; right: 12px; top: 10px; color: var(--amber); font-weight: 700; }
.mode-options { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.mode-options label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bone-dim); min-width: 240px; }
.mode-options input, .mode-options select { padding: 8px 10px; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: 14px "Barlow", sans-serif; }
#deck-step .panel-title { align-items: center; }
#deck-step .panel-title button { margin-left: auto; }
#lobby-play { margin-top: 14px; }
/* learn */
.learn-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; align-items: start; }
.learn-grid p { font-size: 14px; line-height: 1.5; color: var(--bone-dim); margin: 0 0 14px; }
.howto { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.howto b { color: var(--amber); }
#screen-puzzles > p { max-width: 720px; margin: 0 0 16px; }
#screen-puzzles .puzzles { max-width: 820px; }
#screen-puzzles .puzzle-row { padding: 12px 0; }

/* ---------- bot strength picker: three stepped tiers, pips fill like a rank insignia ---------- */
.bot-level { display: flex; flex-direction: column; gap: 6px; min-width: 100%; }
.bot-level-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bone-dim); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.tier { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px 10px 10px; background: var(--ink); color: var(--bone-dim); border: 0; border-right: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.tier:last-child { border-right: 0; clip-path: none; }
.tier .pips { grid-row: 1 / span 2; display: flex; flex-direction: column-reverse; gap: 3px; }
.tier .pips s { display: block; width: 14px; height: 4px; background: var(--line); transform: skewX(-25deg); }
.tier b { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 15px; letter-spacing: 1.5px; }
.tier small { font-size: 11px; line-height: 1.25; }
.tier:hover { color: var(--bone); }
.tier.on { background: linear-gradient(100deg, rgba(var(--accent-rgb),.14), transparent 70%); color: var(--bone); }
.tier.on .pips s { background: var(--amber); box-shadow: 0 0 6px rgba(var(--accent-rgb),.6); }
.tier.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--amber); }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } .tier { border-right: 0; border-bottom: 1px solid var(--line); clip-path: none; } }

/* ---------- opponent "thinking": a trace line sweeping under their score, not a spinner ---------- */
.score.them { position: relative; }
.think { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.think em { font-style: normal; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--them); opacity: .85; }
.think-trace { position: relative; width: 100%; height: 2px; overflow: hidden; background: rgba(var(--them-rgb), .15); }
.think-trace::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; left: -35%;
  background: linear-gradient(90deg, transparent, var(--them), transparent); animation: think-sweep 1.1s cubic-bezier(.6,.1,.4,.9) infinite; }
@keyframes think-sweep { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .think-trace::before { animation: none; left: 0; width: 100%; opacity: .6; } }

.rp-turn { min-width: 64px; text-align: center; color: var(--amber); letter-spacing: 2px; font-size: 11px; }

/* Engine note on a simplified card: a dashed "margin note" strip, distinct from the red can't-play reason. */
#preview-note { margin-top: 8px; padding: 6px 8px 6px 10px; font-size: 11px; line-height: 1.35; color: var(--bone); border-left: 2px dashed var(--amber);
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0 6px, transparent 6px 12px); }
#preview-note::before { content: "ENGINE NOTE  "; font-size: 9px; letter-spacing: 2px; color: var(--amber); }
.engine-note { margin-top: 10px; padding: 8px 10px; border-left: 2px dashed var(--amber); font-size: 12px; line-height: 1.4;
  background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0 6px, transparent 6px 12px); }
.engine-note b { display: block; font-size: 9px; letter-spacing: 2px; color: var(--amber); margin-bottom: 3px; }


/* ---------- admin ---------- */
.spine-btn.admin-btn { color: var(--amber); }
.form-note { margin-top: 12px; padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(var(--accent-rgb),.10); font-size: 13px; }
.adm-count { color: var(--bone-dim); font-size: 12px; }
.adm-gate { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0; border: 1px solid var(--line); background: var(--ink-2); margin-bottom: 18px; }
.gate-cell { padding: 14px 16px; border-right: 1px solid var(--line); }
.gate-label { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bone-dim); margin-bottom: 8px; }
.gate-status:empty { display: none; }
.gate-status { align-self: end; padding: 14px 16px; font-size: 11px; color: var(--bone-dim); min-width: 150px; }
/* a two-position lever: the amber block slides under whichever side is set */
.lever { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--ink); isolation: isolate; }
.lever::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 6px); background: var(--amber); z-index: -1; transition: transform .22s cubic-bezier(.3,.7,.2,1.2); }
.lever[data-pos="r"]::before { transform: translateX(calc(100% + 6px)); }
.lever:not([data-pos])::before { opacity: 0; }
.lever button { background: none; border: 0; padding: 10px 12px 8px; color: var(--bone-dim); font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 1px; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.lever button small { font-family: "Barlow", sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .8; }
.lever button.on { color: var(--on-accent); }
.adm-pending { border-color: var(--amber); margin-bottom: 18px; }
.pending-list { display: flex; flex-direction: column; }
.pending { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
.pending:first-child { border-top: 0; }
.pending .who { display: flex; flex-direction: column; } .pending .who .mono { font-size: 11px; color: var(--bone-dim); }
.pending button.primary { font-size: 15px; padding: 6px 14px; }
.adm-q { margin-left: auto; background: var(--ink); border: 1px solid var(--line); color: var(--bone); padding: 5px 8px; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; width: 200px; }
.adm-q:focus { outline: none; border-color: var(--amber); }
.adm-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 860px; }
.adm-table th { text-align: left; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--bone-dim); padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
.adm-table th:hover { color: var(--bone); }
.adm-table th[data-sort="asc"]::after { content: " ▲"; color: var(--amber); } .adm-table th[data-sort="desc"]::after { content: " ▼"; color: var(--amber); }
.adm-table th.num, .adm-table td.num { text-align: right; }
.adm-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; white-space: nowrap; }
.adm-table td.mono, .adm-table td .mono { font-family: "JetBrains Mono", "IBM Plex Mono", monospace; font-size: 12px; }
.adm-table tbody tr:hover { background: rgba(255,255,255,.025); }
.adm-table tr.locked td { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.025) 8px 16px); color: var(--bone-dim); }
.adm-table .who { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.adm-table .who .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-table .who > .mono { color: var(--bone-dim); font-size: 11px; }
.adm-table .tag { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border: 1px solid currentColor; }
.adm-table .tag.adm { color: var(--amber); } .adm-table .tag.on { color: #7df0a0; }
.adm-table .wp { display: inline-block; width: 46px; height: 4px; background: var(--ink-3); margin-right: 8px; vertical-align: middle; }
.adm-table .wp i { display: block; height: 100%; width: var(--p); background: var(--amber); }
.adm-table td.access .acc { display: flex; align-items: center; gap: 8px; }
.adm-table .state { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1px; min-width: 62px; }
.adm-table .state.ok { color: #7df0a0; } .adm-table .state.no { color: var(--fury); }
.ghost.small { font-size: 11px; padding: 3px 8px; }
@media (max-width: 760px) {
  .adm-gate { grid-template-columns: 1fr; }
  .gate-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .adm-q { width: 100%; margin: 8px 0 0; }
  .panel-title:has(.adm-q) { flex-wrap: wrap; }
}

/* ================= phone and small tablet (portrait) =================
   Pre-game: the spine folds into a top strip that scrolls sideways; pages go single column.
   Table: everything stacks in one scrolling column, theirs on top and yours under it, with the hand and the prompt pinned
   to the bottom as a dock. Long press any card for its full text; tap to act. */
@media (max-width: 760px) {
  html, body { font-size: 13px; }
  .pre { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .spine { flex-direction: row; align-items: center; padding: 0 8px 0 0; gap: 0; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; position: relative; }
  .spine::-webkit-scrollbar { display: none; }
  .spine-logo { font-size: 13px; margin: 0; padding: 10px 12px; flex: 0 0 auto; border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; background: rgba(var(--accent-rgb),.08); }
  .spine-btn { font-size: 14px; padding: 14px 12px 11px; border-left: 0; border-bottom: 3px solid transparent; flex: 0 0 auto; }
  .spine-btn.on { border-bottom-color: var(--amber); background: linear-gradient(0deg, rgba(var(--accent-rgb),.14), transparent); }
  .spine-btn.small { margin: 0; font-size: 11px; }
  .spine-user, .spine-foot { display: none; }
  .screen { padding: 16px 16px 40px; }
  .screen-head { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .screen-head h1, .ledger-head h1 { font-size: 30px; }
  .pcard { margin-left: 0; width: 100%; }
  .ledger { margin: 4vh 0 0; padding: 20px 18px 16px; max-width: none; }
  .play-grid, .lobby-grid, .lobby-grid3, .profile-grid, .gallery-body, .editor { grid-template-columns: 1fr; }
  .editor { height: auto; }
  .mode-row { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gallery-bar { grid-template-columns: 1fr 1fr; }
  .gallery-bar > :first-child { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .resume { flex-wrap: wrap; }

  /* --- table --- */
  .table { grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
  .topbar, .board, .dock { min-width: 0; max-width: 100vw; }
  .scores .score { min-width: 0; }
  .scores .score b { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-title { display: none; }
  .rail-title:has(+ .trash), .rail-title:has(+ .chain:not(:empty)) { display: flex; width: 100%; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "scores scores" "turn btns"; padding: 4px 8px; row-gap: 2px; }
  .scores { justify-content: space-between; }
  .scores { grid-area: scores; gap: 10px; }
  .scores .vs { font-size: 10px; }
  .turnline { grid-area: turn; font-size: 13px; gap: 8px; }
  .turnline span:nth-child(n+2) { font-size: 12px; }
  .topbtns { grid-area: btns; gap: 3px; }
  .topbtns button { padding: 4px 6px; font-size: 10px; letter-spacing: .5px; }
  #btn-sound { display: none; }
  .board { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rail { overflow: visible; border: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .rail.right { order: 0; border-left: 0; }
  .center { order: 1; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
  .rail.left { order: 2; border-top: 1px solid var(--line); }
  .rail-title { margin: 0; font-size: 10px; flex: 0 0 auto; gap: 8px; justify-content: flex-start; }
  .rail .legend-slot { order: 1; } .rail #me-champ, .rail #them-champ { order: 2; } .rail .piles { order: 3; }
  .rail .runes { flex: 1 1 100%; order: 4; }
  .rail .rail-title:has(+ .trash) { order: 5; } .rail .trash { order: 6; }
  .rail .rail-title:has(+ .chain) { order: 7; } .rail .chain { order: 8; }
  .rail, .center { flex: 0 0 auto; }
  .battlefields { flex: 0 0 auto; }
  .bf { min-height: 230px; }
  .rail .legend-slot { min-height: 0; }
  .rail .card.legend { --card-w: 108px; --card-h: 72px; }
  .rail .slot-row { min-height: 0; }
  .rail .slot-row .card { --card-w: 52px; --card-h: 72px; }
  .rail .slot-row.trash .card { --card-w: 36px; --card-h: 50px; }
  .rail .slot-row.trash { max-width: 100%; }
  .piles { margin: 0; gap: 6px; }
  .pile, .pile-card { width: 40px; } .pile-card { height: 56px; }
  .pile-n { top: 16px; font-size: 18px; }
  .pile-l { font-size: 9px; }
  .chain { width: 100%; }
  .card .fallback { font-size: 9px; padding: 24px 4px 4px; } .card .fallback b { font-size: 10px; }
  .card .badge { font-size: 12px; height: 18px; line-height: 18px; min-width: 18px; }
  .card .might { font-size: 14px; height: 20px; line-height: 20px; min-width: 20px; padding: 0 4px; }
  .units .card { --card-w: 62px; --card-h: 86px; }
  .base { min-height: 112px; padding: 18px 6px 6px; flex: 0 0 auto; }
  .battlefields { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
  .bf-head b { font-size: 13px; }
  .bf-head .ctl { font-size: 9px; text-align: right; }
  .bf-side { min-height: 98px; padding: 4px; }
  .dock { grid-template-columns: 1fr; grid-template-rows: auto auto; max-height: 46vh; }
  .hand { justify-content: flex-start; padding: 6px 8px; scroll-snap-type: x proximity; }
  .hand .card { --card-w: 78px; --card-h: 109px; scroll-snap-align: start; }
  .card.clickable:hover { transform: none; }
  .prompt { border-left: 0; border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); grid-template-rows: auto auto; gap: 6px; }
  .p-text { font-size: 14px; }
  .p-buttons { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
  .p-buttons button { flex: 0 0 auto; padding: 10px 12px; }
  .p-buttons button.primary { font-size: 15px; padding: 10px 14px; }
  .p-buttons > span, .p-buttons > .muted { flex: 0 1 auto; font-size: 11px; max-width: 40%; }
  .p-hint { display: none; }
  .rope { top: 0; height: 3px; }
  .toast { font-size: 13px; padding: 8px 12px; max-width: calc(100vw - 24px); width: max-content; text-align: center; top: 64px; }
  .banner { font-size: 34px; letter-spacing: 2px; }
  .p-buttons:has(.dmg-row) { flex-wrap: wrap; overflow-x: visible; }
  .p-buttons .dmg-row span { flex: 1; }
  .summary { padding: 16px 14px 14px; width: calc(100vw - 16px); max-width: none; }
  .sum-title { font-size: 34px; }
  .sum-stats { grid-template-columns: 1fr; gap: 6px; }
  .sum-row { grid-template-columns: 60px minmax(0, 1fr); }
  .preview { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; max-height: calc(100vh - 16px); overflow-y: auto; }
  .preview img { max-width: 240px; margin: 0 auto; }
  .menu { left: 8px !important; right: 8px; min-width: 0; }
  .menu button { padding: 12px 10px; font-size: 15px; }
  .log { top: 0; bottom: 0; width: 100%; z-index: 40; }
  .replay-bar { flex-wrap: wrap; }
}
@media (hover: none) { .card.clickable:hover { transform: none; } }
/* Laptop-height screens: smaller units so a full battlefield side fits without scrolling. */
@media (min-width: 761px) and (max-height: 960px) { .units .card { --card-w: 74px; --card-h: 103px; } .bf-side { min-height: 0; } }