:root {
  /* Default theme "Hextech": Runeterra navy, hextech gold, cyan magic, blue side vs red side. */
  --ink: #050b16;
  --ink-2: #0b1629;
  --ink-3: #13253f;
  --line: #4a3c22;
  --bone: #f0e6d2;
  --bone-dim: #a39c8b;
  --amber: #d9b56a;            /* primary accent (name kept for the themes) */
  --accent-rgb: 217, 181, 106;
  --on-accent: #1a1205;
  --hex: #0ac8b9;              /* secondary glow; hextech cyan; other themes use their accent */
  --hex-rgb: 10, 200, 185;
  --ok: #7df0a0;
  --fury: #d9242b; --calm: #3f9a3a; --mind: #1f7fd1; --body: #e8761a; --chaos: #7a3fc4; --order: #d9b013;
  --them: #ef4b5f;
  --them-rgb: 239, 75, 95;
  --font-head: "Cinzel", "Chakra Petch", serif;
  --card-w: 112px;
  --card-h: 156px;
}
/* Resolved on body so every theme's accent flows into "you" and the glow color. */
body { --you: var(--amber); }
body[class*="theme-"]:not(.theme-ink):not(.theme-hextech) { --hex: var(--amber); --hex-rgb: var(--accent-rgb); }
* { 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); }
#build-steps:not([hidden]) ~ .editor { height: calc(100vh - 270px); min-height: 420px; }
.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, var(--ink-3) 0 5px, color-mix(in srgb, var(--ink-3) 65%, var(--line)) 5px 10px); box-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--ink-2); }
.pile-card.rune-back { background: repeating-linear-gradient(135deg, #2a2418 0 5px, #3a3220 5px 10px); }
.pile-card.hand-back { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-3) 85%, var(--hex)) 0 5px, color-mix(in srgb, var(--ink-3) 62%, var(--hex)) 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: linear-gradient(transparent, 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; }
/* The whole battlefield card is shown (contain), so its name and text stay readable; the letterbox around it is filled with
   a blurred, darkened copy of the same art instead of flat bars. */
.bf::before { content: ""; position: absolute; inset: -24px; background: var(--bf-art) center / cover no-repeat; filter: blur(16px) brightness(.32) saturate(.8); pointer-events: none; }
.bf::after { content: ""; position: absolute; inset: 0; background: var(--tint), var(--bf-art) center / contain no-repeat; pointer-events: none; transition: background .3s; }
.bf > * { position: relative; z-index: 1; }
.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 var(--you); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.25), 0 0 30px rgba(var(--accent-rgb),.45); }
.bf.targetable { animation: target-pulse 1.4s ease-in-out infinite; }
.bf.targetable .bf-head::after { content: "CHOOSE"; margin-left: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 2px; color: var(--on-accent); background: var(--amber); padding: 1px 6px; }
/* 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(var(--ink-3), var(--ink-2)); 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); }
/* Picked targets: a thick accent ring plus a corner tick, readable over any card art (white alone vanished on light art). */
.card.selected { outline: 4px solid var(--you); outline-offset: 1px; box-shadow: 0 0 0 7px rgba(0,0,0,.65), 0 0 22px rgba(var(--accent-rgb),.8); }
.card.selected::after { content: "✓"; position: absolute; top: 4px; right: 4px; z-index: 3; width: 22px; height: 22px; display: grid; place-items: center; background: var(--you); color: var(--on-accent); font-weight: 800; font-size: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #000; }
@keyframes target-pulse { 0%, 100% { outline-color: var(--amber); } 50% { outline-color: rgba(var(--accent-rgb),.35); } }
.confirm-move { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-left: 3px solid var(--amber); background: rgba(var(--accent-rgb),.08); margin-right: 6px; }
.confirm-move b { font-size: 15px; } .confirm-move span { font-size: 13px; color: var(--bone-dim); }
.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-text.long { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 1.3; color: var(--bone); border-left: 3px solid var(--amber); padding-left: 10px; }
.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: color-mix(in srgb, var(--ink) 82%, transparent); 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.floatable { cursor: pointer; }
.rune.floatable:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 0 2px rgba(var(--accent-rgb),.55); transform: translateY(-2px); }
.rune.floatable.exh:hover { transform: rotate(90deg) scale(.8) translateX(-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(var(--ink-3), var(--ink-2)); }
.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; }
.look-left { position: sticky; top: 0; }
.look-left .avatar-grid { max-height: calc(100vh - 560px); min-height: 180px; }
@media (max-width: 900px) { .look-left { position: static; } .look-left .avatar-grid { max-height: 60vh; } }
.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; }

body.theme-ink { --ink: #070d0f; --ink-2: #0d161a; --ink-3: #142128; --line: #22343b; --bone: #e9eee6; --bone-dim: #8a9a98; --amber: #c9f05a; --accent-rgb: 201, 240, 90; --on-accent: #0f1a04; --hex: #c9f05a; --hex-rgb: 201, 240, 90; --them: #ff6fb5; --them-rgb: 255, 111, 181; }
/* ---------- 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, .choice .sleeve-sw.sleeve-fury .pile-card { 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, .choice .sleeve-sw.sleeve-calm .pile-card { 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, .choice .sleeve-sw.sleeve-mind .pile-card { 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, .choice .sleeve-sw.sleeve-body .pile-card { 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, .choice .sleeve-sw.sleeve-chaos .pile-card { 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, .choice .sleeve-sw.sleeve-order .pile-card { 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, .choice .sleeve-sw.sleeve-showcase .pile-card { 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, .choice .sleeve-sw.sleeve-hex .pile-card { 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; }


.deck-open { background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 7px 8px; font: inherit; font-size: 13px; max-width: 200px; }
.deck-open:focus { outline: none; border-color: var(--amber); }


/* ---------- guided deck building: a four-stop rail (legend, champion, battlefields, main deck) ---------- */
.build-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 6px; border: 1px solid var(--line); background: var(--ink-2); }
.build-steps .step { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--ink); border: 0; border-right: 1px solid var(--line); color: var(--bone-dim); text-align: left; cursor: pointer; min-width: 0; position: relative; }
.build-steps .step:last-child { border-right: 0; }
.build-steps .step i { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; border: 1px solid currentColor; border-radius: 50%; }
.build-steps .step span { display: flex; flex-direction: column; min-width: 0; }
.build-steps .step b { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; }
.build-steps .step small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bone-dim); }
.build-steps .step.done { color: #7df0a0; } .build-steps .step.done i { background: rgba(125,240,160,.12); }
.build-steps .step.on { color: var(--on-accent); background: var(--amber); } .build-steps .step.on small { color: var(--on-accent); opacity: .8; }
.build-steps .step.on::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--amber); border-bottom: 0; }
.build-steps .step.locked { opacity: .35; cursor: default; }
.build-hint { font-size: 13px; color: var(--bone); padding: 4px 2px 12px; line-height: 1.35; }
.build-hint:empty { display: none; }
@media (max-width: 760px) { .build-steps { grid-template-columns: repeat(2, 1fr); } .build-steps .step:nth-child(2) { border-right: 0; } .build-steps .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- 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; }
}


/* ---------- update notice: a tear-off strip across the top, above everything (lobby and table) ---------- */
.update-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: stretch; max-width: min(760px, calc(100vw - 16px));
  background: var(--ink-2); border: 1px solid var(--amber); border-top: 0; box-shadow: 0 12px 40px #000c; animation: ub-drop .35s cubic-bezier(.2,.8,.2,1.2); }
.update-bar .ub-mark { writing-mode: vertical-rl; transform: rotate(180deg); background: var(--amber); color: var(--on-accent); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 2px; padding: 8px 5px; }
.update-bar .ub-text { padding: 10px 14px; font-size: 13px; line-height: 1.35; align-self: center; }
.update-bar button { border: 0; border-left: 1px dashed var(--line); background: none; font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; letter-spacing: 1px; padding: 0 16px; cursor: pointer; }
.update-bar .ub-go { color: var(--amber); font-size: 16px; }
.update-bar .ub-go:hover { background: rgba(var(--accent-rgb),.12); }
.update-bar .ub-later { color: var(--bone-dim); font-size: 11px; }
body:has(#table:not([hidden])) .update-bar { top: 52px; border-top: 1px solid var(--amber); }
@keyframes ub-drop { from { transform: translate(-50%, -110%); } to { transform: translate(-50%, 0); } }
@media (max-width: 760px) { .update-bar { left: 8px; right: 8px; transform: none; max-width: none; animation: none; } .update-bar .ub-text { font-size: 12px; padding: 8px 10px; } .update-bar button { padding: 0 10px; } body:has(#table:not([hidden])) .update-bar { top: auto; bottom: calc(46vh + 6px); } }

/* ================= 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; } }

/* ---------- cosmetics vault (admin) ---------- */
.vault { padding: 0; border: 1px solid var(--amber); background: var(--ink-2); color: var(--bone); width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.7); }
.vault::backdrop { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 88%, transparent) 0 10px, color-mix(in srgb, var(--ink) 78%, transparent) 10px 20px); }
.vault-in { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.vault-head { display: flex; align-items: flex-end; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), transparent 60%); }
.vault-kicker { font-size: 10px; letter-spacing: 3px; color: var(--amber); }
.vault-head h2 { margin: 2px 0 0; font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 22px; letter-spacing: 1px; white-space: pre; }
.vault-tally { margin-left: auto; font-size: 12px; color: var(--bone-dim); letter-spacing: 1px; }
.vault-tools { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.vault-tools .muted { font-size: 11px; color: var(--bone-dim); margin-left: 6px; }
.vault-body { overflow-y: auto; padding: 6px 18px 14px; }
.vault-sec { margin-top: 14px; }
.vault-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: "Chakra Petch", sans-serif; font-size: 12px; letter-spacing: 2px; }
.vault-sec-h .mono { color: var(--bone-dim); font-size: 11px; }
.vault-sec-h button { margin-left: auto; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vault-grid.faces { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.vault-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 9px; text-align: left; background: var(--ink); border: 1px solid var(--line); color: var(--bone-dim); cursor: pointer; font: inherit; overflow: hidden; }
.vault-item:hover { border-color: var(--bone-dim); }
.vault-item .vn { font-size: 13px; line-height: 1.2; }
.vault-item .vs { font-size: 9px; letter-spacing: 1.5px; }
.vault-item img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) brightness(.5); margin-bottom: 4px; }
.vault-item.on { color: var(--bone); border-color: rgba(var(--accent-rgb),.55); background: linear-gradient(180deg, rgba(var(--accent-rgb),.08), var(--ink)); }
.vault-item.on img { filter: none; }
.vault-item.on .vs { color: var(--amber); }
.vault-item.changed::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 14px 14px 0; border-color: transparent #7df0a0 transparent transparent; }
.vault-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--ink); }
.vault-foot .mono { font-size: 12px; color: var(--bone-dim); }
.vault-foot button { margin-left: auto; }
.vault-open { white-space: nowrap; }
@media (max-width: 640px) { .vault-head { flex-wrap: wrap; } .vault-tally { margin-left: 0; } .vault-grid { grid-template-columns: 1fr 1fr; } .vault-grid.faces { grid-template-columns: repeat(3, 1fr); } }

/* ---------- look: fitting room (live theme + sleeve preview) ---------- */
.panel-sub { font-size: 10px; letter-spacing: 1px; margin-left: 8px; text-transform: none; }
.spec-state { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: var(--amber); text-transform: uppercase; }
.panel-title:has(.spec-state) { display: flex; align-items: baseline; }
.specimen { position: relative; border: 1px solid var(--line); background:
  linear-gradient(180deg, rgba(var(--them-rgb),.07), transparent 38%, transparent 62%, rgba(var(--accent-rgb),.08)), var(--ink);
  padding: 10px 12px 12px; display: grid; gap: 10px; overflow: hidden; transition: background .35s; }
.specimen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px); }
.sp-top { display: flex; align-items: center; justify-content: space-between; }
.sp-score { display: flex; align-items: baseline; gap: 6px; font-family: "Chakra Petch", sans-serif; }
.sp-score i { font-style: normal; font-weight: 700; font-size: 26px; line-height: 1; }
.sp-score small { font-size: 9px; letter-spacing: 2px; color: var(--bone-dim); }
.sp-score.me i { color: var(--amber); } .sp-score.them i { color: var(--them); }
.sp-phase { font-size: 9px; letter-spacing: 2px; color: var(--bone-dim); border: 1px solid var(--line); padding: 2px 6px; }
.sp-field { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-bf { position: relative; min-height: 64px; border: 1px solid var(--line); background: var(--ink-2); display: flex; align-items: flex-end; gap: 4px; padding: 16px 6px 6px; }
.sp-bf > span { position: absolute; top: 3px; left: 6px; font-size: 8px; letter-spacing: 1.5px; color: var(--bone-dim); }
.sp-bf.held { border-color: rgba(var(--accent-rgb),.6); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.18), inset 0 -18px 30px -18px rgba(var(--accent-rgb),.35); }
.sp-unit { width: 26px; height: 36px; border-radius: 3px; background: linear-gradient(var(--ink-3), var(--ink-2)); }
.sp-unit.you { box-shadow: 0 0 0 1.5px var(--amber); } .sp-unit.them { box-shadow: 0 0 0 1.5px var(--them); }
.sp-hand { display: flex; justify-content: center; height: 70px; padding-top: 4px; }
.sp-hand .pile-card { width: 44px; height: 62px; margin: 0 -5px; box-shadow: 0 4px 10px rgba(0,0,0,.5); transform-origin: 50% 140%; transition: background .3s; }
.sp-hand .pile-card:nth-child(1) { transform: rotate(-12deg); } .sp-hand .pile-card:nth-child(2) { transform: rotate(-4deg) translateY(-3px); }
.sp-hand .pile-card:nth-child(3) { transform: rotate(4deg) translateY(-3px); } .sp-hand .pile-card:nth-child(4) { transform: rotate(12deg); }
.sp-bottom { display: flex; align-items: center; gap: 12px; }
.sp-pile { display: flex; align-items: center; gap: 8px; } .sp-pile .pile-card { width: 30px; height: 42px; } .sp-pile span { font-size: 9px; letter-spacing: 1px; color: var(--bone-dim); }
.sp-runes { display: flex; gap: 4px; } .sp-runes s { width: 9px; height: 14px; background: var(--line); transform: skewX(-18deg); }
.sp-runes s.on { background: var(--amber); box-shadow: 0 0 6px rgba(var(--accent-rgb),.55); }
.specimen .sp-btn { margin-left: auto; pointer-events: none; padding: 6px 14px; font-size: 12px; letter-spacing: 1.5px; min-height: 0; height: auto; line-height: 1.2; }
.sp-lock { margin: 0 -12px -12px; padding: 5px 10px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .5px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 92%, transparent) 0 6px, color-mix(in srgb, var(--ink-2) 92%, transparent) 6px 12px); color: var(--amber); border-top: 1px dashed var(--amber); }
.spec-hint { font-size: 10px; color: var(--bone-dim); margin-top: 8px; line-height: 1.5; }
.choice.tryable { align-items: center; }
.choice .swatch { flex: none; width: 34px; height: 18px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.choice b { margin-right: auto; }
.choice.wearing:not(.on) { border-left-color: var(--bone-dim); border-left-style: dashed; background: rgba(255,255,255,.03); }
.choice.locked.tryable { cursor: pointer; }
.sleeve-sw .pile-card { position: absolute; inset: -1px; width: auto; height: auto; border-radius: 0; box-shadow: none; }
#look-save.dirty { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--amber); animation: save-pulse 1.6s ease-in-out infinite; }
@keyframes save-pulse { 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px rgba(var(--accent-rgb),.25); } }
.swatch.theme-sw-ink { background: linear-gradient(90deg, #070d0f 0 50%, #c9f05a 50% 78%, #ff6fb5 78%); }
.swatch.theme-sw-hextech { background: linear-gradient(90deg, #0b1629 0 40%, #d9b56a 40% 64%, #0ac8b9 64% 82%, #ef4b5f 82%); }
.swatch.theme-sw-noxus { background: linear-gradient(90deg, #120909 0 50%, #ff4d4d 50% 78%, #ffd27a 78%); }
.swatch.theme-sw-ionia { background: linear-gradient(90deg, #110a10 0 50%, #f3a7c7 50% 78%, #7fe3b3 78%); }
.swatch.theme-sw-piltover { background: linear-gradient(90deg, #0f0e0a 0 50%, #e5b85c 50% 78%, #7fb2ff 78%); }
.swatch.theme-sw-freljord { background: linear-gradient(90deg, #070c14 0 50%, #9fd4ff 50% 78%, #ffb86b 78%); }
.swatch.theme-sw-void { background: linear-gradient(90deg, #0b0712 0 50%, #c78cff 50% 78%, #7fe0d0 78%); }
.swatch.theme-sw-demacia { background: linear-gradient(90deg, #0d0c08 0 50%, #ffd45c 50% 78%, #7fb2ff 78%); }
.swatch.theme-sw-bilgewater { background: linear-gradient(90deg, #0e0a06 0 50%, #e39a4b 50% 78%, #6fd3e0 78%); }
.swatch.theme-sw-shadow { background: linear-gradient(90deg, #060a0a 0 50%, #52e0d2 50% 78%, #c4a0ff 78%); }
.choice .sleeve-sw.sleeve-plain .pile-card.hand-back { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-3) 85%, var(--hex)) 0 5px, color-mix(in srgb, var(--ink-3) 62%, var(--hex)) 5px 10px); border-color: #000; }


/* ================= RIFT CHROME (from the Stitch pass) =================
   League-client framing over the RiftGrounds palette: Cinzel mastheads, accent corner brackets, diamond markers,
   mono telemetry, flat glowing CTAs, faction-colored card edges. Everything reads tokens, so all themes recolor it. */
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line); } ::-webkit-scrollbar-thumb:hover { background: var(--bone-dim); }
.pre { background:
  radial-gradient(circle at 45% 25%, color-mix(in srgb, var(--ink-3) 70%, transparent) 0%, transparent 70%),
  radial-gradient(circle at 82% 82%, rgba(31,127,209,.05) 0%, transparent 50%),
  radial-gradient(circle at 20% 92%, rgba(var(--accent-rgb),.045) 0%, transparent 42%), var(--ink); }
.table { background: radial-gradient(1000px 520px at 50% 42%, color-mix(in srgb, var(--ink-3) 55%, transparent), transparent 70%), var(--ink); }
.dia { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--amber); margin-right: 12px; vertical-align: 2px; flex: none; }

/* --- spine --- */
.spine { background: var(--ink-2); border-right: 1px solid var(--line); padding-top: 0; gap: 2px; }
.spine-logo { display: flex; align-items: center; gap: 12px; padding: 20px 16px 18px; margin: 0 0 14px; border-bottom: 1px solid var(--line); text-align: left; color: var(--bone); }
.logo-gem { position: relative; width: 30px; height: 30px; flex: none; transform: rotate(45deg); border: 1.5px solid var(--amber); box-shadow: 0 0 12px rgba(var(--accent-rgb),.25); }
.logo-gem::after { content: ""; position: absolute; inset: 8px; background: var(--amber); }
.spine-logo span { display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 3px; line-height: 1.25; }
.spine-logo b { color: var(--amber); font-weight: 800; }
.spine-btn { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: 3px; padding: 13px 16px 13px 24px; border-left-width: 3px; position: relative; }
.spine-btn.on { color: var(--amber); border-left-color: var(--amber); background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), transparent 85%); text-shadow: 0 0 14px rgba(var(--accent-rgb),.35); }
.spine-btn.on::after { content: ""; position: absolute; right: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--amber); transform: rotate(45deg); box-shadow: 0 0 8px var(--amber); }
.spine-btn:hover:not(.on) { color: var(--bone); background: rgba(255,255,255,.02); }
.spine-btn.admin-btn { color: var(--amber); }
.spine-user { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; border-top: 1px solid var(--line); font-size: 13px; }
.spine-user:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); flex: none; }
.spine-foot { padding: 10px 16px 0; font-family: "JetBrains Mono", monospace; letter-spacing: .5px; }

/* --- mastheads --- */
.screen { padding: 30px 40px 40px; }
.screen-head { align-items: center; gap: 22px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 28px; }
.screen-head h1, .ledger-head h1 { font-family: var(--font-head); font-weight: 700; font-size: 38px; letter-spacing: 5px; color: var(--bone); background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.screen-head::before, .screen-head::after { content: none; }
.ledger-no { color: var(--amber); border: 1px solid var(--line); background: var(--ink-2); padding: 7px 10px; font-weight: 700; font-size: 13px; }
.head-sub { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--bone-dim); }
.head-sub::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--line); background: var(--ink-3); }

/* --- frames: accent corner brackets --- */
.panel, .ledger { --c: var(--amber); --bl: 10px; --bw: 2px; position: relative; border: 1px solid var(--line);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--bl) var(--bw) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--bl) var(--bw) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--bl) var(--bw) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--bw) var(--bl) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--bl) var(--bw) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--bw) var(--bl) no-repeat,
    var(--ink-2);
  box-shadow: none; }
.ledger { border-top: 1px solid var(--line); }
.ledger::before { content: none; }
.panel-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 3px; color: var(--bone);
  margin: -14px -16px 14px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.panel-title::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--amber); flex: none; margin-right: -2px; }
.panel-title { justify-content: flex-start; }
.panel-title > :last-child:not(:first-child) { margin-left: auto; }
.panel-title .mono { color: var(--amber); font-weight: 700; letter-spacing: 1px; }

/* --- buttons --- */
button.primary { font-family: var(--font-head); font-weight: 800; letter-spacing: 3px; background: var(--amber); color: var(--on-accent); border: 1px solid var(--amber);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.28); transition: box-shadow .15s, filter .15s; }
button.primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 0 26px rgba(var(--accent-rgb),.5); }
button.primary.big::after { content: "  →"; font-family: "JetBrains Mono", monospace; font-weight: 400; }
button.ghost { font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line); }
button.ghost:hover { color: var(--amber); border-color: var(--amber); background: rgba(var(--accent-rgb),.05); box-shadow: none; }
button.link { color: var(--amber); }

/* --- inputs --- */
.ledger input, .name-input, .search-bar input, .search-bar select, .adm-q, .add-friend input, .mode-options input, .mode-options select { background: var(--ink) !important; border: 1px solid var(--line); font-family: "JetBrains Mono", monospace; }
.ledger input:focus, .name-input:focus, .search-bar input:focus, .adm-q:focus, .add-friend input:focus { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); outline: none; }

/* --- play: mode cards --- */
.mode-row { gap: 14px; }
.mode { --c: var(--amber); position: relative; padding: 18px 18px 16px; gap: 10px; border: 1px solid var(--line);
  background:
    linear-gradient(var(--c), var(--c)) top left / 8px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 8px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 8px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 8px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 8px no-repeat,
    var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mode-kick { font-size: 11px; letter-spacing: 3px; color: var(--bone-dim); display: flex; align-items: center; justify-content: space-between; }
.mode-kick::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--bone-dim); }
.mode b { display: flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: 3px; line-height: 1.15; margin-top: 4px; }
.mode small { font-size: 13px; line-height: 1.55; min-height: 3.1em; }
.mode dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px; }
.mode dt { color: var(--bone-dim); } .mode dd { margin: 0; text-align: right; color: var(--bone); font-weight: 500; }
.mode:hover { border-color: var(--bone-dim); transform: translateY(-2px); }
.mode.on { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 0 28px rgba(var(--accent-rgb),.14); background-color: var(--ink-2); }
.mode.on::after { content: none; }
.mode.on .mode-kick { color: var(--amber); } .mode.on .mode-kick::after { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 8px var(--amber); }
.mode.on .dia { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.mode.on b { color: var(--amber); } .mode.on dd { color: var(--amber); }

/* --- lists --- */
.choice.on { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), transparent); }
.choice:hover { background: rgba(255,255,255,.025); }

/* --- game table --- */
.topbar { background: var(--ink-2); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(var(--accent-rgb),.08); }
.turnline { gap: 10px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: 1px; -webkit-mask-image: none; }
.turnline > span { border: 1px solid var(--line); padding: 4px 10px; background: var(--ink); white-space: nowrap; }
.turnline > span:empty { display: none; }
#t-turn { color: var(--bone); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
#t-turn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.turnline span:nth-child(n+2) { font-size: 12px; color: var(--bone-dim); }
#t-showdown:not(:empty) { color: var(--them); border-color: rgba(var(--them-rgb),.6); }
.score b { font-family: var(--font-head); font-weight: 700; letter-spacing: 3px; font-size: 17px; }
.score.me b { color: var(--bone); } .score.them b { color: var(--them); }
.score i { font-family: var(--font-head); font-weight: 800; text-shadow: 0 0 18px currentColor; }
.vs { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.05); color: var(--amber); padding: 4px 12px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; }
.vs i { width: 5px; height: 5px; background: var(--amber); transform: rotate(45deg); }
.topbtns .ghost { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: 1px; }
#btn-sound { color: var(--amber); border-color: rgba(var(--accent-rgb),.5); }
.zone-label { font-family: var(--font-head); letter-spacing: 2px; }
.bf { border: 1px solid var(--edge); }
.bf.held-me { --edge: var(--amber); } .bf.held-them { --edge: var(--them); }
.bf-head { background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.35)); align-items: center; padding: 8px 12px; }
.bf-head b { font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; font-size: 16px; color: var(--bone); text-shadow: 0 1px 2px #000; display: flex; align-items: center; gap: 10px; }
.bf-head b::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--edge); flex: none; }
.bf:not(.held-me):not(.held-them) .bf-head b::before { background: var(--bone-dim); }
.bf-head .ctl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); background: rgba(0,0,0,.45); }
.bf-head .ctl.me { color: var(--amber); border-color: rgba(var(--accent-rgb),.6); } .bf-head .ctl.them { color: var(--them); border-color: rgba(var(--them-rgb),.6); }
.dock { background: var(--ink-2); border-top: 1px solid var(--line); }
.prompt { border-left: 1px solid var(--line); background: var(--ink); }
.p-text { font-family: var(--font-head); font-weight: 700; letter-spacing: 1.5px; border-left: 3px solid var(--amber); padding-left: 10px; }
.p-text.idle { border-left-color: var(--them); }
.p-hint { font-family: "JetBrains Mono", monospace; font-size: 10px; border-top: 1px solid var(--line); padding-top: 6px; }

/* faction edges on cards */
.card[data-dom] { border: 2px solid var(--dom, #000); }
.card[data-dom="fury"] { --dom: var(--fury); } .card[data-dom="calm"] { --dom: var(--calm); } .card[data-dom="mind"] { --dom: var(--mind); }
.card[data-dom="body"] { --dom: var(--body); } .card[data-dom="chaos"] { --dom: var(--chaos); } .card[data-dom="order"] { --dom: var(--order); }
.card[data-dom2="fury"] { --dom2: var(--fury); } .card[data-dom2="calm"] { --dom2: var(--calm); } .card[data-dom2="mind"] { --dom2: var(--mind); }
.card[data-dom2="body"] { --dom2: var(--body); } .card[data-dom2="chaos"] { --dom2: var(--chaos); } .card[data-dom2="order"] { --dom2: var(--order); }
.card[data-dom2] { border-right-color: var(--dom2); border-bottom-color: var(--dom2); }
.card .badge { border-radius: 2px; background: rgba(0,0,0,.82); border: 1px solid var(--dom, var(--line)); font-family: "JetBrains Mono", monospace; }
.card .might { border-radius: 2px; }
.mode dl { margin-top: auto; }
.rail-title { font-family: var(--font-head); font-weight: 700; letter-spacing: 2.5px; font-size: 12px; color: var(--bone-dim); display: flex; align-items: center; gap: 8px; }
.rail-title::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--amber); flex: none; }
.ledger-head .ledger-no { display: inline-block; margin-bottom: 14px; }
.rail-title { justify-content: flex-start; } .rail-title > :last-child { margin-left: auto; }

/* ---------- judge call ---------- */
.topbtns .judge { color: var(--amber); border-color: rgba(var(--accent-rgb),.55); }
.judge-card { border-top-color: var(--amber); }
.judge-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.judge-reasons button { background: var(--ink); color: var(--bone-dim); border: 1px solid var(--line); padding: 7px 12px; font: 600 13px "Barlow", sans-serif; letter-spacing: .3px; }
.judge-reasons button:hover { color: var(--bone); border-color: var(--bone-dim); }
.judge-reasons button.on { color: var(--on-accent); background: var(--amber); border-color: var(--amber); }
#judge-text { width: 100%; min-height: 80px; resize: vertical; background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 10px; font: 14px "Barlow", sans-serif; }
#judge-text:focus { outline: none; border-color: var(--amber); }
.judge-foot { font-size: 11px; color: var(--bone-dim); }
.judge-banner { position: fixed; left: 50%; top: 58px; z-index: 70; transform: translate(-50%, -140%); padding: 10px 22px; background: var(--ink-2); color: var(--amber);
  border: 1px solid var(--amber); box-shadow: 0 0 24px rgba(var(--accent-rgb),.3); font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; font-size: 15px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1.2); pointer-events: none; white-space: nowrap; }
.judge-banner.show { transform: translate(-50%, 0); }
.topbtns { display: flex; gap: 6px; justify-content: flex-end; } .topbtns .ghost { font-size: 12px; padding: 6px 10px; white-space: nowrap; letter-spacing: 1px; }

/* ---------- art sleeves (wwwroot/sleeves/*.webp, 5:7) ---------- */
/* Classic Back is the default card back; the rune deck keeps its own pattern. */
.pile-card:not(.rune-back), .pile-card.hand-back { background: #033651 url(sleeves/classic.webp) center / cover no-repeat; border-color: #000; }
body.sleeve-inferno .pile-card:not(.rune-back), body.sleeve-inferno .hand-back, .choice .sleeve-sw.sleeve-inferno .pile-card { background: #0a0a0a url(sleeves/inferno.webp) center 30% / cover no-repeat; border-color: #000; }
body.sleeve-starlight .pile-card:not(.rune-back), body.sleeve-starlight .hand-back, .choice .sleeve-sw.sleeve-starlight .pile-card { background: #0a0a0a url(sleeves/starlight.webp) center 30% / cover no-repeat; border-color: #000; }
body.sleeve-mixtape .pile-card:not(.rune-back), body.sleeve-mixtape .hand-back, .choice .sleeve-sw.sleeve-mixtape .pile-card { background: #0a0a0a url(sleeves/mixtape.webp) center 30% / cover no-repeat; border-color: #000; }
body.sleeve-wildfire .pile-card:not(.rune-back), body.sleeve-wildfire .hand-back, .choice .sleeve-sw.sleeve-wildfire .pile-card { background: #0a0a0a url(sleeves/wildfire.webp) center 30% / cover no-repeat; border-color: #000; }
body.sleeve-flute .pile-card:not(.rune-back), body.sleeve-flute .hand-back, .choice .sleeve-sw.sleeve-flute .pile-card { background: #0a0a0a url(sleeves/flute.webp) center 30% / cover no-repeat; border-color: #000; }
.choice .sleeve-sw.sleeve-plain .pile-card.hand-back { background: #033651 url(sleeves/classic.webp) center / cover no-repeat; }
.pile-n { text-shadow: 0 0 4px #000, 0 1px 3px #000, 0 0 10px #000; }

/* ---------- group moves ---------- */
.card.grouped { outline: 3px solid var(--amber); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(0,0,0,.55), 0 0 20px rgba(var(--accent-rgb),.75); }
.card.grouped::after { content: "✓"; position: absolute; top: 4px; right: 4px; z-index: 3; width: 20px; height: 20px; display: grid; place-items: center; background: var(--amber); color: var(--on-accent); font-weight: 800; font-size: 13px; }
.bf.move-dest, .zone.move-dest { outline: 2px dashed var(--amber); outline-offset: -3px; cursor: pointer; box-shadow: inset 0 0 40px rgba(var(--accent-rgb),.12); }
.bf.move-dest:hover, .zone.move-dest:hover { outline-style: solid; box-shadow: inset 0 0 60px rgba(var(--accent-rgb),.22); }
.move-group { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid rgba(var(--accent-rgb),.6); background: rgba(var(--accent-rgb),.06); width: 100%; }
.move-group > b { font-family: var(--font-head); letter-spacing: 2px; font-size: 13px; color: var(--amber); }
.move-group .mg-names { font-size: 13px; }
.move-group .mg-dests { display: flex; flex-wrap: wrap; gap: 6px; }
.move-group .mg-dests button { padding: 5px 12px; font-size: 13px; letter-spacing: 1px; }
.move-group .mg-hint { font-size: 11px; }

/* ---------- region cosmetics (generated; original emblems, no Riot crests) ---------- */
body.theme-shurima { --ink: #0f0b05; --ink-2: #1a140a; --ink-3: #281f10; --line: #5a4520; --bone: #f3e7cc; --amber: #f2c14e; --accent-rgb: 242, 193, 78; --on-accent: #1a1200; --them: #4fc3d9; --them-rgb: 79, 195, 217; }
body.theme-zaun { --ink: #060b08; --ink-2: #0c1610; --ink-3: #13231a; --line: #2a4a33; --amber: #8be04e; --accent-rgb: 139, 224, 78; --on-accent: #0a1a04; --them: #ff7ad9; --them-rgb: 255, 122, 217; }
body.theme-targon { --ink: #070816; --ink-2: #0e1026; --ink-3: #171a3a; --line: #33386b; --bone: #e8e9f7; --amber: #b9c4ff; --accent-rgb: 185, 196, 255; --on-accent: #0a0c22; --them: #ffb35c; --them-rgb: 255, 179, 92; }
body.theme-ixtal { --ink: #050d09; --ink-2: #0a1812; --ink-3: #12261c; --line: #2a5a40; --amber: #3fd18a; --accent-rgb: 63, 209, 138; --on-accent: #031a0d; --them: #ff9a4a; --them-rgb: 255, 154, 74; }
body.theme-bandle { --ink: #0f0a12; --ink-2: #1a1220; --ink-3: #281c32; --line: #4e3a5e; --amber: #ffcf5a; --accent-rgb: 255, 207, 90; --on-accent: #1a1200; --them: #6fe3c8; --them-rgb: 111, 227, 200; }
.swatch.theme-sw-shurima { background: linear-gradient(90deg, #1a140a 0 50%, #f2c14e 50% 78%, #4fc3d9 78%); }
.swatch.theme-sw-zaun { background: linear-gradient(90deg, #0c1610 0 50%, #8be04e 50% 78%, #ff7ad9 78%); }
.swatch.theme-sw-targon { background: linear-gradient(90deg, #0e1026 0 50%, #b9c4ff 50% 78%, #ffb35c 78%); }
.swatch.theme-sw-ixtal { background: linear-gradient(90deg, #0a1812 0 50%, #3fd18a 50% 78%, #ff9a4a 78%); }
.swatch.theme-sw-bandle { background: linear-gradient(90deg, #1a1220 0 50%, #ffcf5a 50% 78%, #6fe3c8 78%); }
.pm-sw.playmat-sw-none { background: var(--ink); }
body[class*="playmat-"]:not(.playmat-none) .table .bf::before { opacity: .55; }

/* ---------- regions panel, playmat swatches, alt-art picker ---------- */
.regions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.region { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.region .swatch { width: 30px; height: 30px; border: 1px solid var(--line); }
.region.fresh { opacity: .62; }
.region .rg-mid b { display: block; font-size: 13px; margin-bottom: 4px; }
.rg-bar { position: relative; height: 4px; background: var(--ink-3); }
.rg-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber); box-shadow: 0 0 6px rgba(var(--accent-rgb),.5); }
.rg-bar i { position: absolute; top: -3px; width: 7px; height: 7px; margin-left: -4px; transform: rotate(45deg); background: var(--ink-2); border: 1px solid var(--line); z-index: 1; }
.rg-bar i.got { background: var(--amber); border-color: var(--amber); }
.region small { font-size: 10px; color: var(--bone-dim); white-space: nowrap; }
.region.done small { color: var(--amber); }
.arts-summary { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--bone-dim); line-height: 1.6; }
.choice .swatch.pm-sw { width: 34px; height: 18px; border: 1px solid var(--line); }
.specimen.pm-sw { background-size: 40% auto, cover; background-position: center; }
.alt-badge { position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 9px; letter-spacing: 1px; padding: 2px 5px; background: rgba(0,0,0,.75); color: var(--amber); border: 1px solid rgba(var(--accent-rgb),.6); }
.art-picker { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.art-head { font-family: var(--font-head); font-size: 12px; letter-spacing: 2px; color: var(--amber); margin-bottom: 8px; }
.art-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.art-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--ink); border: 1px solid var(--line); color: var(--bone); cursor: pointer; text-align: left; overflow: hidden; }
.art-opt img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block; }
.art-opt .art-l { font-size: 10px; line-height: 1.25; }
.art-opt.on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 14px rgba(var(--accent-rgb),.35); }
.art-opt.locked img { filter: grayscale(1) brightness(.45); }
.art-opt .art-lock { position: absolute; left: 4px; right: 4px; top: 40%; text-align: center; font-size: 9px; letter-spacing: 1px; background: rgba(0,0,0,.7); padding: 3px 0; color: var(--bone); }
.art-opt .art-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--amber); }
.gallery-grid .tile { position: relative; }

/* playmats: the region pattern under the board; bases go see-through so it shows */
body[class*="playmat-"]:not(.playmat-none) .base { background: rgba(0,0,0,.12); }
.specimen.pm-sw::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); pointer-events: none; }
.specimen > * { position: relative; z-index: 1; }
.specimen.pm-sw { background-size: 34% auto, cover; }

/* ---------- log + chat panel ---------- */
.log-head { gap: 10px; }
.log-tabs { display: flex; border: 1px solid var(--line); }
.log-tabs button { position: relative; background: none; border: 0; border-right: 1px solid var(--line); color: var(--bone-dim); padding: 5px 12px; font: 700 11px "JetBrains Mono", monospace; letter-spacing: 1.5px; cursor: pointer; }
.log-tabs button:last-child { border-right: 0; }
.log-tabs button:hover { color: var(--bone); }
.log-tabs button.on { background: var(--amber); color: var(--on-accent); }
#chat-dot, #log-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--them); box-shadow: 0 0 6px var(--them); }
#btn-log { position: relative; }
.log { display: flex; flex-direction: column; }
.log #log-body, .log .chat-pane { min-height: 0; }
.log.mode-log .chat-pane { display: none; }
.log.mode-chat #log-body { display: none; }
.log.mode-log #log-body, .log.mode-chat .chat-pane { flex: 1; }
.log.mode-both #log-body { flex: 1.1; border-bottom: 1px solid var(--line); }
.log.mode-both .chat-pane { flex: 1; }
.chat-pane { display: flex; flex-direction: column; }
#chat-body { flex: 1; overflow-y: auto; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
#chat-body > div { margin-bottom: 5px; word-wrap: break-word; }
#chat-body b { font-weight: 700; margin-right: 6px; }
#chat-body .chat-me b { color: var(--you); } #chat-body .chat-them b { color: var(--them); }
#chat-body .chat-note { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--bone-dim); border-left: 2px solid var(--line); padding-left: 8px; }
.chat-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 7px 9px; font: 13px "Barlow", sans-serif; }
.chat-form input:focus { outline: none; border-color: var(--amber); }
.chat-form button { padding: 5px 12px; font-size: 12px; }
.chat-off { margin: 12px; padding: 14px; border: 1px dashed var(--line); background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.02) 8px 16px); display: flex; flex-direction: column; gap: 10px; }
.chat-off b { font-family: var(--font-head); letter-spacing: 2px; color: var(--amber); }
.chat-off span { font-size: 13px; color: var(--bone-dim); line-height: 1.5; }
.chat-off em { font-style: normal; color: var(--bone); }
.chat-off button { align-self: flex-start; padding: 7px 14px; font-size: 13px; }

/* ---------- region crests: official icons from /regionicon/{id} (server-fetched), our emblem until then ---------- */
body.sleeve-rg-noxus .pile-card:not(.rune-back), body.sleeve-rg-noxus .hand-back, .choice .sleeve-sw.sleeve-rg-noxus .pile-card { background: url("regions/noxus-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #d9363e2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%232a0708%22/%3E%3Cstop offset=%221%22 stop-color=%22%23120304%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23d9363e%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23d9363e%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23d9363e%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23d9363e%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #120304; border-color: #000; }
body.playmat-noxus .table .center { background: radial-gradient(1000px 520px at 50% 50%, #2a0708, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #d9363e08 22px 23px), linear-gradient(180deg, #120304, var(--ink)); }
body.playmat-noxus .table .center::before { background-image: url("regionicon/noxus"); }
.pm-sw.playmat-sw-noxus { background: url("regionicon/noxus") center / 72% auto no-repeat, radial-gradient(circle, #2a0708, #120304); }
body.sleeve-rg-demacia .pile-card:not(.rune-back), body.sleeve-rg-demacia .hand-back, .choice .sleeve-sw.sleeve-rg-demacia .pile-card { background: url("regions/demacia-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #e9d7a32e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%231b2433%22/%3E%3Cstop offset=%221%22 stop-color=%22%230b1018%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23e9d7a3%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23e9d7a3%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23e9d7a3%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23e9d7a3%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #0b1018; border-color: #000; }
body.playmat-demacia .table .center { background: radial-gradient(1000px 520px at 50% 50%, #1b2433, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #e9d7a308 22px 23px), linear-gradient(180deg, #0b1018, var(--ink)); }
body.playmat-demacia .table .center::before { background-image: url("regionicon/demacia"); }
.pm-sw.playmat-sw-demacia { background: url("regionicon/demacia") center / 72% auto no-repeat, radial-gradient(circle, #1b2433, #0b1018); }
body.sleeve-rg-ionia .pile-card:not(.rune-back), body.sleeve-rg-ionia .hand-back, .choice .sleeve-sw.sleeve-rg-ionia .pile-card { background: url("regions/ionia-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #f3a7c72e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%232a1222%22/%3E%3Cstop offset=%221%22 stop-color=%22%23110810%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23f3a7c7%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23f3a7c7%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23f3a7c7%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23f3a7c7%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #110810; border-color: #000; }
body.playmat-ionia .table .center { background: radial-gradient(1000px 520px at 50% 50%, #2a1222, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #f3a7c708 22px 23px), linear-gradient(180deg, #110810, var(--ink)); }
body.playmat-ionia .table .center::before { background-image: url("regionicon/ionia"); }
.pm-sw.playmat-sw-ionia { background: url("regionicon/ionia") center / 72% auto no-repeat, radial-gradient(circle, #2a1222, #110810); }
body.sleeve-rg-freljord .pile-card:not(.rune-back), body.sleeve-rg-freljord .hand-back, .choice .sleeve-sw.sleeve-rg-freljord .pile-card { background: url("regions/freljord-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #bfe6ff2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%230b2033%22/%3E%3Cstop offset=%221%22 stop-color=%22%2305101a%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23bfe6ff%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23bfe6ff%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23bfe6ff%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23bfe6ff%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #05101a; border-color: #000; }
body.playmat-freljord .table .center { background: radial-gradient(1000px 520px at 50% 50%, #0b2033, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #bfe6ff08 22px 23px), linear-gradient(180deg, #05101a, var(--ink)); }
body.playmat-freljord .table .center::before { background-image: url("regionicon/freljord"); }
.pm-sw.playmat-sw-freljord { background: url("regionicon/freljord") center / 72% auto no-repeat, radial-gradient(circle, #0b2033, #05101a); }
body.sleeve-rg-piltover .pile-card:not(.rune-back), body.sleeve-rg-piltover .hand-back, .choice .sleeve-sw.sleeve-rg-piltover .pile-card { background: url("regions/piltover-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #e5b85c2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%232a2110%22/%3E%3Cstop offset=%221%22 stop-color=%22%23120e06%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23e5b85c%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23e5b85c%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23e5b85c%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23e5b85c%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #120e06; border-color: #000; }
body.playmat-piltover .table .center { background: radial-gradient(1000px 520px at 50% 50%, #2a2110, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #e5b85c08 22px 23px), linear-gradient(180deg, #120e06, var(--ink)); }
body.playmat-piltover .table .center::before { background-image: url("regionicon/piltover"); }
.pm-sw.playmat-sw-piltover { background: url("regionicon/piltover") center / 72% auto no-repeat, radial-gradient(circle, #2a2110, #120e06); }
body.sleeve-rg-zaun .pile-card:not(.rune-back), body.sleeve-rg-zaun .hand-back, .choice .sleeve-sw.sleeve-rg-zaun .pile-card { background: url("regions/zaun-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #8be04e2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%230e2214%22/%3E%3Cstop offset=%221%22 stop-color=%22%2305100a%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%238be04e%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%238be04e%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%238be04e%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%238be04e%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #05100a; border-color: #000; }
body.playmat-zaun .table .center { background: radial-gradient(1000px 520px at 50% 50%, #0e2214, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #8be04e08 22px 23px), linear-gradient(180deg, #05100a, var(--ink)); }
body.playmat-zaun .table .center::before { background-image: url("regionicon/zaun"); }
.pm-sw.playmat-sw-zaun { background: url("regionicon/zaun") center / 72% auto no-repeat, radial-gradient(circle, #0e2214, #05100a); }
body.sleeve-rg-bilgewater .pile-card:not(.rune-back), body.sleeve-rg-bilgewater .hand-back, .choice .sleeve-sw.sleeve-rg-bilgewater .pile-card { background: url("regions/bilgewater-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #e39a4b2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%230e2426%22/%3E%3Cstop offset=%221%22 stop-color=%22%23051112%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23e39a4b%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23e39a4b%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23e39a4b%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23e39a4b%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #051112; border-color: #000; }
body.playmat-bilgewater .table .center { background: radial-gradient(1000px 520px at 50% 50%, #0e2426, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #e39a4b08 22px 23px), linear-gradient(180deg, #051112, var(--ink)); }
body.playmat-bilgewater .table .center::before { background-image: url("regionicon/bilgewater"); }
.pm-sw.playmat-sw-bilgewater { background: url("regionicon/bilgewater") center / 72% auto no-repeat, radial-gradient(circle, #0e2426, #051112); }
body.sleeve-rg-shadow .pile-card:not(.rune-back), body.sleeve-rg-shadow .hand-back, .choice .sleeve-sw.sleeve-rg-shadow .pile-card { background: url("regions/shadow-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #52e0d22e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23082220%22/%3E%3Cstop offset=%221%22 stop-color=%22%23030e0d%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%2352e0d2%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%2352e0d2%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%2352e0d2%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%2352e0d2%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #030e0d; border-color: #000; }
body.playmat-shadow .table .center { background: radial-gradient(1000px 520px at 50% 50%, #082220, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #52e0d208 22px 23px), linear-gradient(180deg, #030e0d, var(--ink)); }
body.playmat-shadow .table .center::before { background-image: url("regionicon/shadow"); }
.pm-sw.playmat-sw-shadow { background: url("regionicon/shadow") center / 72% auto no-repeat, radial-gradient(circle, #082220, #030e0d); }
body.sleeve-rg-shurima .pile-card:not(.rune-back), body.sleeve-rg-shurima .hand-back, .choice .sleeve-sw.sleeve-rg-shurima .pile-card { background: url("regions/shurima-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #f2c14e2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%232e230b%22/%3E%3Cstop offset=%221%22 stop-color=%22%23120d04%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23f2c14e%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23f2c14e%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23f2c14e%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23f2c14e%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #120d04; border-color: #000; }
body.playmat-shurima .table .center { background: radial-gradient(1000px 520px at 50% 50%, #2e230b, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #f2c14e08 22px 23px), linear-gradient(180deg, #120d04, var(--ink)); }
body.playmat-shurima .table .center::before { background-image: url("regionicon/shurima"); }
.pm-sw.playmat-sw-shurima { background: url("regionicon/shurima") center / 72% auto no-repeat, radial-gradient(circle, #2e230b, #120d04); }
body.sleeve-rg-targon .pile-card:not(.rune-back), body.sleeve-rg-targon .hand-back, .choice .sleeve-sw.sleeve-rg-targon .pile-card { background: url("regions/targon-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #b9c4ff2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23121436%22/%3E%3Cstop offset=%221%22 stop-color=%22%23060717%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23b9c4ff%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23b9c4ff%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23b9c4ff%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23b9c4ff%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #060717; border-color: #000; }
body.playmat-targon .table .center { background: radial-gradient(1000px 520px at 50% 50%, #121436, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #b9c4ff08 22px 23px), linear-gradient(180deg, #060717, var(--ink)); }
body.playmat-targon .table .center::before { background-image: url("regionicon/targon"); }
.pm-sw.playmat-sw-targon { background: url("regionicon/targon") center / 72% auto no-repeat, radial-gradient(circle, #121436, #060717); }
body.sleeve-rg-ixtal .pile-card:not(.rune-back), body.sleeve-rg-ixtal .hand-back, .choice .sleeve-sw.sleeve-rg-ixtal .pile-card { background: url("regions/ixtal-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #3fd18a2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%230c2a1a%22/%3E%3Cstop offset=%221%22 stop-color=%22%2304120b%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%233fd18a%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%233fd18a%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%233fd18a%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%233fd18a%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #04120b; border-color: #000; }
body.playmat-ixtal .table .center { background: radial-gradient(1000px 520px at 50% 50%, #0c2a1a, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #3fd18a08 22px 23px), linear-gradient(180deg, #04120b, var(--ink)); }
body.playmat-ixtal .table .center::before { background-image: url("regionicon/ixtal"); }
.pm-sw.playmat-sw-ixtal { background: url("regionicon/ixtal") center / 72% auto no-repeat, radial-gradient(circle, #0c2a1a, #04120b); }
body.sleeve-rg-void .pile-card:not(.rune-back), body.sleeve-rg-void .hand-back, .choice .sleeve-sw.sleeve-rg-void .pile-card { background: url("regions/void-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #c78cff2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%231e0f33%22/%3E%3Cstop offset=%221%22 stop-color=%22%230a0517%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23c78cff%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23c78cff%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23c78cff%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23c78cff%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #0a0517; border-color: #000; }
body.playmat-void .table .center { background: radial-gradient(1000px 520px at 50% 50%, #1e0f33, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #c78cff08 22px 23px), linear-gradient(180deg, #0a0517, var(--ink)); }
body.playmat-void .table .center::before { background-image: url("regionicon/void"); }
.pm-sw.playmat-sw-void { background: url("regionicon/void") center / 72% auto no-repeat, radial-gradient(circle, #1e0f33, #0a0517); }
body.sleeve-rg-bandle .pile-card:not(.rune-back), body.sleeve-rg-bandle .hand-back, .choice .sleeve-sw.sleeve-rg-bandle .pile-card { background: url("regions/bandle-color.png") center 50% / 88% auto no-repeat, radial-gradient(circle at 50% 48%, #ffcf5a2e, transparent 45%), url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 50 70%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2270%25%22%3E%3Cstop offset=%220%22 stop-color=%22%232a1a33%22/%3E%3Cstop offset=%221%22 stop-color=%22%23110a17%22/%3E%3C/radialGradient%3E%3Cpattern id=%22p%22 width=%226%22 height=%226%22 patternUnits=%22userSpaceOnUse%22 patternTransform=%22rotate(45)%22%3E%3Cpath d=%22M0 0 V6%22 stroke=%22%23ffcf5a%22 stroke-opacity=%22.07%22 stroke-width=%222%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23g)%22/%3E%3Crect width=%2250%22 height=%2270%22 fill=%22url(%23p)%22/%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2245%22 height=%2265%22 rx=%221.5%22 fill=%22none%22 stroke=%22%23ffcf5a%22 stroke-opacity=%22.7%22 stroke-width=%22.8%22/%3E%3Crect x=%224.5%22 y=%224.5%22 width=%2241%22 height=%2261%22 fill=%22none%22 stroke=%22%23ffcf5a%22 stroke-opacity=%22.3%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M25 4.5 L27 6.5 L25 8.5 L23 6.5Z M25 61.5 L27 63.5 L25 65.5 L23 63.5Z%22 fill=%22%23ffcf5a%22 fill-opacity=%22.8%22/%3E%3C/svg%3E") center / 100% 100% no-repeat, #110a17; border-color: #000; }
body.playmat-bandle .table .center { background: radial-gradient(1000px 520px at 50% 50%, #2a1a33, transparent 75%), repeating-linear-gradient(45deg, transparent 0 22px, #ffcf5a08 22px 23px), linear-gradient(180deg, #110a17, var(--ink)); }
body.playmat-bandle .table .center::before { background-image: url("regionicon/bandle"); }
.pm-sw.playmat-sw-bandle { background: url("regionicon/bandle") center / 72% auto no-repeat, radial-gradient(circle, #2a1a33, #110a17); }
body[class*="playmat-"]:not(.playmat-none) .table .center { position: relative; }
body[class*="playmat-"]:not(.playmat-none) .table .center::before { content: ""; position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: auto 78%; opacity: .11; pointer-events: none; filter: saturate(1.2); }
body[class*="playmat-"]:not(.playmat-none) .table .center > * { position: relative; z-index: 1; }

/* ---------- playtester Discord call-out (lobby) ---------- */
.discord-call { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; text-decoration: none; color: var(--bone); overflow: hidden;
  border: 1px solid #5865f2; background: linear-gradient(135deg, rgba(88,101,242,.30), rgba(88,101,242,.08) 55%, var(--ink-2)); box-shadow: 0 0 22px rgba(88,101,242,.18); transition: box-shadow .2s, transform .2s; }
.discord-call::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border: 1px solid rgba(88,101,242,.5); transform: rotate(45deg); }
.discord-call:hover { box-shadow: 0 0 34px rgba(88,101,242,.4); transform: translateY(-2px); }
.discord-call .dc-kick { font-size: 10px; letter-spacing: 2.5px; color: #aab2ff; }
.discord-call b { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: 2px; }
.discord-call .dc-sub { font-size: 13px; color: var(--bone-dim); line-height: 1.45; }
.discord-call .dc-go { align-self: flex-start; margin-top: 4px; padding: 6px 12px; background: #5865f2; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.discord-foot { margin-top: 10px; }
.discord-call > * { position: relative; z-index: 1; } .discord-call::after { opacity: .45; }

/* ---------- brand: emblem + wordmark (black backgrounds drop out with screen blending) ---------- */
.logo-emblem { width: 36px; height: auto; flex: none; }
.brand-mast { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -6px 0 14px; }
.brand-mast img { display: block; }
.bm-emblem { width: 92px; }
.bm-word { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--font-head); font-weight: 700; font-size: 30px; letter-spacing: 6px; line-height: 1; }
.bm-word span { background: linear-gradient(180deg, #fff3cf 0%, #e4c27a 45%, #a9822f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bm-word span:last-child { filter: brightness(.82); }
.bm-word i { width: 3px; height: 38px; background: linear-gradient(180deg, transparent, #7ff7ea 30%, #0ac8b9 70%, transparent); box-shadow: 0 0 8px rgba(10,200,185,.7); clip-path: polygon(40% 0, 100% 30%, 20% 55%, 100% 80%, 50% 100%, 0 70%, 70% 45%, 0 20%); }
.discord-foot a.link, .discord-foot a.link:visited { color: #aab2ff; }

/* browser autofill keeps the dark field */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--bone); -webkit-box-shadow: 0 0 0 1000px var(--ink) inset; caret-color: var(--bone); transition: background-color 9999s; }
.brand-mast { margin-bottom: 22px; }

/* ---------- form controls: themed sliders, checkboxes, selects (no bright browser defaults) ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--amber) var(--fill, 50%), var(--ink-3) var(--fill, 50%)); border: 1px solid var(--line); }
input[type=range]::-moz-range-track { height: 4px; background: var(--ink-3); border: 1px solid var(--line); }
input[type=range]::-moz-range-progress { height: 4px; background: var(--amber); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--amber); border: 2px solid var(--ink); transform: rotate(45deg); box-shadow: 0 0 6px rgba(var(--accent-rgb),.5); }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--amber); border: 2px solid var(--ink); border-radius: 0; transform: rotate(45deg); }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1px solid var(--line); background: var(--ink); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
input[type=checkbox]::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg) scale(0); background: var(--on-accent); transition: transform .12s; }
input[type=checkbox]:checked { background: var(--amber); border-color: var(--amber); }
input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
input[type=checkbox]:focus-visible, input[type=range]:focus-visible, select:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.settings select { background: var(--ink); color: var(--bone); border: 1px solid var(--line); }
.settings select:focus { outline: none; border-color: var(--amber); }
.settings label { color: var(--bone); }
.settings label.check { cursor: pointer; padding: 4px 0; align-items: center; gap: 12px; color: color-mix(in srgb, var(--bone) 88%, var(--bone-dim)); }
.settings label.check:hover { color: var(--bone); }
.settings > .muted { color: var(--bone-dim); font-size: 12px; }

/* ---------- hidden (facedown) cards ---------- */
/* Theirs: a sealed card back with a closed-eye sigil in their color. Mine: my art, veiled, with a HIDDEN band. */
.card.facedown { overflow: hidden; }
.card.fd-theirs { border: 1px solid rgba(var(--them-rgb),.7); box-shadow: 0 0 14px rgba(var(--them-rgb),.25), inset 0 0 0 1px rgba(0,0,0,.6); }
.card.fd-theirs .fallback { background: radial-gradient(circle at 50% 45%, rgba(var(--them-rgb),.22), transparent 55%), repeating-linear-gradient(135deg, var(--ink-2) 0 7px, var(--ink-3) 7px 14px); font-size: 0; color: transparent; }
.card.fd-theirs .fd-seal { position: absolute; left: 50%; top: 44%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--them); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cpath d=%22M24 2 L46 24 L24 46 L2 24 Z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M10 22 Q24 34 38 22%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M15 27 L12 32 M24 30 V36 M33 27 L36 32%22 stroke=%22%23000%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cpath d=%22M24 2 L46 24 L24 46 L2 24 Z%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.5%22/%3E%3Cpath d=%22M10 22 Q24 34 38 22%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M15 27 L12 32 M24 30 V36 M33 27 L36 32%22 stroke=%22%23000%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(var(--them-rgb),.8)); animation: fd-breathe 3.2s ease-in-out infinite; }
@keyframes fd-breathe { 50% { opacity: .55; } }
.card.fd-mine img { filter: saturate(.35) brightness(.55); }
.card.fd-mine:not(.clickable) { border: 1px dashed rgba(var(--accent-rgb),.8); }
.card .fd-tag { position: absolute; left: 0; right: 0; bottom: 18%; z-index: 2; padding: 3px 0; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: var(--bone); background: linear-gradient(90deg, transparent, rgba(0,0,0,.8) 20%, rgba(0,0,0,.8) 80%, transparent); }
.card.fd-theirs .fd-tag { color: var(--them); }
.card.fd-mine .fd-tag { color: var(--amber); }
.card.fd-mine.clickable .fd-tag { font-size: 0; } .card.fd-mine.clickable .fd-tag::after { content: "READY"; font-size: 9px; color: var(--ok); }
.card.fd-mine.clickable img { filter: saturate(.8) brightness(.85); }

/* exclusive (admin-granted) titles: a moving gold-to-cyan sheen */
.ttl.exclusive, .choice b.exclusive { background: linear-gradient(100deg, #e4c27a 0%, #fff3cf 30%, #7ff7ea 50%, #fff3cf 70%, #e4c27a 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: excl-sheen 4s linear infinite; font-weight: 700; letter-spacing: .5px; }
.ttl.exclusive::before, .choice b.exclusive::before { content: "◆ "; -webkit-text-fill-color: #0ac8b9; font-size: .8em; }
@keyframes excl-sheen { to { background-position: -250% 0; } }

/* =====================================================================================================
   PHONE LAYOUT (portrait, ≤760px). Written last so it wins over the desktop chrome above.
   Menus: a slim top bar with the logo, bottom tabs (Play, Decks, Gallery, Armory, More) and a More sheet.
   Table: one screen, no page scroll. Top bar, their strip, the board (scrolls only if crowded), my strip,
   then the hand and the prompt as a dock. Long-press any card for its text.
   ===================================================================================================== */
.mtop, .mdrawer, .tmenu-btn { display: none; }
@media (max-width: 760px) {
  :root { --tabs-h: env(safe-area-inset-bottom); }
  html, body { font-size: 14px; }

  /* ---- menus: top bar + side drawer ---- */
  .pre { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .spine { display: none !important; }
  .mtop { display: flex; position: sticky; top: 0; z-index: 30; align-items: center; gap: 10px; height: 54px; padding: 0 12px 0 6px; background: color-mix(in srgb, var(--ink-2) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .mtop:not(.authed) { display: none; }
  .mtop-brand { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 6px 8px; color: var(--bone); }
  .mtop-brand:active { background: rgba(var(--accent-rgb),.08); }
  .mtop-burger { display: flex; flex-direction: column; gap: 3px; width: 16px; }
  .mtop-burger i { height: 2px; background: var(--amber); border-radius: 1px; }
  .mtop-burger i:nth-child(2) { width: 70%; }
  .mtop-brand img { width: 28px; }
  .mtop-name { font-family: var(--font-head); font-weight: 700; letter-spacing: 3px; font-size: 13px; }
  .mtop-name b { color: var(--amber); font-weight: 800; }
  .mtop em { margin-left: auto; font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 2.5px; color: var(--amber); padding: 5px 10px; border: 1px solid rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.06); }
  .mdrawer { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0); transition: background .2s; }
  .mdrawer[hidden] { display: none; }
  .mdrawer.open { background: rgba(0,0,0,.6); }
  .mdrawer-in { position: absolute; top: 0; bottom: 0; left: 0; width: min(310px, 84vw); display: flex; flex-direction: column; overflow-y: auto; background: var(--ink-2); border-right: 1px solid var(--amber);
    box-shadow: 10px 0 40px rgba(0,0,0,.6); transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom); }
  .mdrawer.open .mdrawer-in { transform: none; }
  .md-brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--line); }
  .md-brand img { width: 34px; }
  .md-brand span { font-family: var(--font-head); font-weight: 700; letter-spacing: 3px; font-size: 14px; color: var(--bone); }
  .md-brand b { color: var(--amber); font-weight: 800; }
  .md-close { margin-left: auto; width: 36px; height: 36px; background: none; border: 1px solid var(--line); color: var(--bone-dim); font-size: 20px; line-height: 1; }
  .md-user { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .md-user:empty { display: none; }
  .md-user .pcard { width: 100%; margin: 0; }
  .md-nav { display: flex; flex-direction: column; padding: 6px 0; }
  .dnav { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: none; border: 0; color: var(--bone-dim); font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 3px; text-align: left; }
  .dnav svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
  .dnav.on { color: var(--amber); background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), transparent 80%); }
  .dnav.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
  .dnav.on::after { content: ""; margin-left: auto; width: 7px; height: 7px; transform: rotate(45deg); background: var(--amber); }
  #mdrawer-admin { color: var(--amber); }
  .md-discord { display: flex; flex-direction: column; gap: 2px; margin: 8px 14px; padding: 12px 14px; text-decoration: none; border: 1px solid #5865f2; background: rgba(88,101,242,.14); color: #c9cfff; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 2px; }
  .md-discord small { font-family: "Barlow", sans-serif; font-weight: 400; letter-spacing: 0; font-size: 12px; color: var(--bone-dim); }
  .md-out { margin: auto 14px 14px; padding: 12px; background: none; border: 1px solid var(--line); color: var(--bone-dim); font-family: var(--font-head); font-weight: 700; letter-spacing: 2px; }

  .screen { padding: 18px 16px calc(var(--tabs-h) + 24px); overflow: visible; }
  .screen-head { flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; padding-bottom: 12px; }
  .screen-head h1 { font-size: 28px; letter-spacing: 3px; }
  .head-sub { font-size: 10px; letter-spacing: 2px; }
  .head-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .head-actions > * { flex: 1 1 auto; min-width: 0; }
  .head-actions .name-input { flex: 1 1 100%; }
  .record { margin-left: 0; }
  .panel { padding: 12px 14px; }
  .panel-title { margin: -12px -14px 12px; padding: 12px 14px 10px; font-size: 13px; flex-wrap: wrap; }
  .play-grid, .lobby-grid, .lobby-grid3, .profile-grid, .gallery-body, .editor, .look-grid, .learn-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .col { min-width: 0; }
  .look-left { position: static; }
  .look-left .avatar-grid { max-height: 52vh; }
  .regions { grid-template-columns: 1fr; }
  .mode-row { grid-template-columns: 1fr; gap: 10px; }
  .mode { padding: 14px; }
  .mode small { min-height: 0; }
  .mode b { font-size: 19px; }
  .discord-call { padding: 14px; }
  .discord-call b { font-size: 16px; }
  .settings label { grid-template-columns: 1fr; gap: 6px; }
  .settings label.check { grid-template-columns: auto 1fr; }
  .settings input[type=range] { width: 100%; }
  .choice { flex-wrap: wrap; }
  .choice small { flex: 1 1 100%; text-align: left; padding-left: 0; }
  .choice.tryable small { padding-left: 44px; }
  .limited-bar { flex-wrap: wrap; }
  .limited-bar > * { flex: 1 1 auto; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcard { width: 100%; }
  .ledger { margin: 3vh auto 0; padding: 18px 16px 14px; }
  .bm-word { font-size: 22px; letter-spacing: 4px; gap: 8px; }
  .bm-word i { height: 28px; }
  .bm-emblem { width: 72px; }
  .adm-scroll { margin: 0 -14px; padding: 0 14px; }
  .update-bar { bottom: calc(var(--tabs-h) + 8px); top: auto; }
  .screen-head h1 { font-size: 26px; }

  /* ---- the table ---- */
  .table { display: grid; grid-template-rows: 44px minmax(0, 1fr) auto; height: 100dvh; background: var(--ink); }
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; align-items: center; gap: 8px; padding: 0 8px; height: 44px; row-gap: 0; }
  .turnline { grid-area: auto; gap: 4px; font-size: 11px; overflow: hidden; }
  .turnline > span { padding: 3px 6px; font-size: 10px !important; }
  #t-state, #t-showdown:empty { display: none; }
  #t-phase { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .scores { grid-area: auto; justify-content: center; gap: 8px; min-width: 0; }
  .score { gap: 4px; min-width: 0; }
  .score b { font-size: 11px !important; letter-spacing: 1px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .score i { font-size: 22px !important; }
  .score small, .think em { display: none; }
  .vs { font-size: 9px; padding: 2px 6px; letter-spacing: 1px; white-space: nowrap; }
  .vs i { display: none; }
  .tmenu-btn { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 34px; padding: 0 9px; background: var(--ink); border: 1px solid var(--line); }
  .tmenu-btn i { display: block; height: 2px; background: var(--amber); }
  .topbtns { display: none; position: fixed; top: 46px; right: 6px; z-index: 60; flex-direction: column; gap: 0; background: var(--ink-2); border: 1px solid var(--amber); box-shadow: 0 12px 40px #000c; min-width: 200px; }
  .topbtns.open { display: flex; }
  .topbtns button, .topbtns .ghost { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px !important; font-size: 13px !important; background: none; }
  #btn-sound { display: block; }

  .board { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .center { order: 1; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rail { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 5px 8px; border: 0; background: var(--ink-2); overflow: visible; max-height: none; }
  .rail.right { order: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .rail.left { order: 2; border-top: 1px solid var(--line); }
  .rail .rail-title { display: none; margin: 0; }
  .rail .legend-slot { order: 1; min-height: 0; }
  .rail .card.legend { --card-w: 62px; --card-h: 42px; border-width: 1px; }
  .rail #me-champ, .rail #them-champ { order: 2; min-height: 0; gap: 4px; }
  .rail .slot-row .card { --card-w: 34px; --card-h: 48px; }
  .rail .slot-row .card .fallback, .rail .slot-row .card .badge, .rail .slot-row .card .might { display: none; }
  .rail .piles { order: 3; margin: 0; gap: 5px; }
  .rail .pile, .rail .pile-card { width: 30px; }
  .rail .pile-card { height: 42px; box-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink-2); }
  .rail .pile-n { top: 10px; font-size: 15px; }
  .rail .pile-l { font-size: 7px; letter-spacing: .5px; margin-top: 2px; }
  .rail .runes { order: 4; flex: 1 1 auto; justify-content: flex-end; gap: 3px; min-width: 0; }
  .rail .rune { width: 20px; height: 28px; }
  .rail.left .rune { width: 24px; height: 33px; }
  /* trash: a tappable count; opens as a row (and opens by itself when you must pick from it) */
  .rail .rail-title:has(+ .trash) { display: flex; order: 5; padding: 4px 8px; border: 1px solid var(--line); font-size: 9px; letter-spacing: 1px; cursor: pointer; }
  .rail .rail-title:has(+ .trash)::before { display: none; }
  .rail .trash { display: none; order: 6; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .rail.show-trash .trash, .rail .trash:has(.clickable) { display: flex; }
  .rail .trash .card { --card-w: 34px; --card-h: 48px; flex: none; }
  .rail .rail-title:has(+ .chain:not(:empty)) { display: flex; order: 7; flex: 1 1 100%; font-size: 9px; }
  .rail .chain { order: 8; flex: 1 1 100%; }
  .rail .chain:empty { display: none; }
  .chain-item { padding: 4px 8px; font-size: 11px; }

  .base { flex: 0 0 auto; min-height: 66px; padding: 16px 4px 4px; }
  .zone-label { font-size: 8px; top: 3px; left: 6px; letter-spacing: 1.5px; }
  .battlefields { flex: 1 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; min-height: 0; }
  .bf { min-height: 190px; grid-template-rows: auto 1fr 1fr; }
  .bf-head { padding: 5px 6px; flex-wrap: wrap; gap: 2px; }
  .bf-head b { font-size: 11px; letter-spacing: 1px; gap: 5px; }
  .bf-head b::before { width: 5px; height: 5px; }
  .bf-head .ctl { font-size: 7.5px; padding: 1px 4px; letter-spacing: .5px; width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bf-side { min-height: 0; padding: 3px; }
  .units { gap: 3px; flex-wrap: wrap; }
  .units .card { --card-w: 46px; --card-h: 64px; }
  .card .fallback { font-size: 7px; padding: 16px 3px 3px; }
  .card .fallback b { font-size: 8px; }
  .card .badge { font-size: 10px; height: 16px; line-height: 16px; min-width: 16px; padding: 0 3px; top: 2px; left: 2px; }
  .card .might { font-size: 12px; height: 17px; line-height: 17px; min-width: 17px; padding: 0 3px; right: 2px; bottom: 2px; }
  .units .card .fd-tag { font-size: 7px; letter-spacing: 1px; }

  .dock { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-height: none; padding-bottom: env(safe-area-inset-bottom); }
  .hand { display: flex; gap: 5px; overflow-x: auto; overflow-y: visible; justify-content: flex-start; align-items: flex-end; padding: 6px 8px 4px; scroll-snap-type: x proximity; min-height: 0; }
  .hand .card { --card-w: 64px; --card-h: 90px; flex: none; scroll-snap-align: start; }
  .hand:empty { display: none; }
  .prompt { border-left: 0; border-top: 1px solid var(--line); padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; background: var(--ink); }
  .p-text { font-size: 13px !important; line-height: 1.3; letter-spacing: .5px; padding-left: 8px; }
  .p-text.long { font-size: 12px !important; }
  .p-buttons { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: stretch; }
  .p-buttons::-webkit-scrollbar { display: none; }
  .p-buttons > span.muted { display: none; }
  .p-buttons button { flex: 0 0 auto; min-height: 42px; padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .p-buttons button.primary { order: -1; font-size: 14px; letter-spacing: 2px; padding: 8px 18px; }
  .p-buttons .move-group { flex: 0 0 auto; width: auto; min-width: 260px; }
  .p-buttons:has(.dmg-row), .p-buttons:has(.confirm-move) { flex-wrap: wrap; }
  .p-hint { display: none; }

  .preview { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 70vh; overflow-y: auto; z-index: 70; padding: 10px; }
  .preview img { max-width: 210px; display: block; margin: 0 auto 6px; }
  .splash { left: 50%; right: auto; top: 40%; transform: translate(-50%, -50%); width: 160px; }
  .splash div { font-size: 13px; }
  .menu { max-width: calc(100vw - 16px); }
  .menu button { padding: 12px 14px; font-size: 14px; }
  .log { top: 44px; left: 0; right: 0; width: auto; bottom: 0; z-index: 55; }
  .emote-wheel { bottom: 160px; right: 8px; }
  .judge-banner { top: 50px; font-size: 12px; padding: 8px 14px; max-width: calc(100vw - 16px); white-space: normal; text-align: center; }
  .bug-card, .judge-card { padding: 14px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hand .card { --card-w: 54px; --card-h: 76px; }
  .bf { min-height: 160px; }
}

@media (max-width: 760px) {
  .preview:not(.pinned) { display: none !important; }
  .preview.pinned::after { content: "TAP TO CLOSE"; display: block; text-align: center; margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 2px; color: var(--bone-dim); }
  .rail .rail-title:has(+ .trash) { width: auto !important; flex: 0 0 auto; }
  .score b { display: none; }
  .scores { gap: 10px; }
  .toast { top: auto; bottom: 46%; font-size: 12px; padding: 6px 12px; }
  .banner { font-size: 30px; }
}

/* ---------- choose prompts: picked options vs the confirm button ---------- */
.p-buttons:has(.p-cta) { flex-direction: column; align-items: stretch; gap: 8px; flex-wrap: nowrap; overflow: visible; }
.p-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.p-opts .opt { background: var(--ink-2); color: var(--bone); border: 1px solid var(--line); padding: 8px 12px; font-size: 13px; }
.p-opts .opt.picked { border-color: var(--amber); color: var(--amber); background: rgba(var(--accent-rgb),.1); box-shadow: inset 3px 0 0 var(--amber); }
.p-cta { display: flex; gap: 6px; }
.p-cta .confirm-cta { flex: 1; font-size: 17px; letter-spacing: 3px; padding: 12px 16px; }
.p-cta .confirm-cta.ready { background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 80%, #fff), var(--amber)); border-color: color-mix(in srgb, var(--amber) 60%, #fff);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--hex), 0 0 22px rgba(var(--hex-rgb),.55); animation: cta-pulse 1.6s ease-in-out infinite; }
.p-cta .confirm-cta:disabled { opacity: .45; animation: none; box-shadow: none; }
.p-cta .ghost { flex: 0 0 auto; }
@keyframes cta-pulse { 50% { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--hex), 0 0 34px rgba(var(--hex-rgb),.8); } }
@media (max-width: 760px) {
  .p-buttons:has(.p-cta) { overflow: visible; }
  .p-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p-opts::-webkit-scrollbar { display: none; }
  .p-opts .opt { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  .p-cta .confirm-cta { min-height: 48px; font-size: 15px; }
}


/* ---------- reaction prompts switch: always visible at the top of the prompt panel ---------- */
.react-seg { display: flex; align-items: stretch; align-self: flex-start; border: 1px solid var(--line); background: var(--ink-2); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1.5px; }
.react-seg span { padding: 5px 8px; color: var(--bone-dim); border-right: 1px solid var(--line); display: flex; align-items: center; }
.react-seg button { background: none; border: 0; border-right: 1px solid var(--line); color: var(--bone-dim); padding: 5px 10px; font: inherit; font-weight: 700; letter-spacing: 1.5px; cursor: pointer; }
.react-seg button:last-child { border-right: 0; }
.react-seg button:hover { color: var(--bone); }
.react-seg button.on { color: var(--on-accent); background: var(--amber); }
.react-seg[data-mode="on"] button.on { background: var(--hex); color: #021412; }
.react-seg[data-mode="off"] button.on { background: var(--bone-dim); color: var(--ink); }
.prompt { grid-template-rows: auto auto 1fr auto; }
@media (max-width: 760px) {
  .react-seg { align-self: stretch; font-size: 9px; }
  .react-seg span { padding: 4px 8px; }
  .react-seg button { flex: 1; padding: 6px 4px; }
}

/* ---------- fuller pages: gallery sizes, play "between games", learn, puzzles, record, settings ---------- */
/* gallery: the card images are full resolution, so tiles are sized to read the rules text */
.gallery-body { grid-template-columns: minmax(0, 1fr) 380px; }
.gallery-grid:not(.small) { grid-template-columns: repeat(var(--gcols, 5), minmax(0, 1fr)); gap: clamp(8px, calc(40px / var(--gcols, 5)), 18px); }
.gallery-grid .tile { transition: transform .14s ease, box-shadow .14s ease; }
.gallery-grid .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accent-rgb), .55); z-index: 2; }
.gallery-grid .tile img { image-rendering: auto; }
.per-row { grid-column: -3 / -1; justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--bone-dim); font-size: 11px; letter-spacing: 1.5px; }
.per-row input { width: 160px; accent-color: var(--amber); }
.per-row b { color: var(--amber); font-size: 14px; min-width: 14px; text-align: right; }
.g-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
#g-inspect img { max-width: 100%; cursor: zoom-in; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
#g-inspect p { font-size: 14px; }
.g-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0 4px; text-align: center; color: var(--bone-dim); font-size: 13px; line-height: 1.5; }
.g-ghost { width: 62%; aspect-ratio: 5 / 7; border: 1px dashed var(--line); border-radius: 10px; position: relative;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--accent-rgb), .04) 10px 11px); }
.g-ghost::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 1px solid rgba(var(--accent-rgb), .6); transform: translate(-50%, -50%) rotate(45deg); }
.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.86); display: grid; place-items: center; cursor: zoom-out; backdrop-filter: blur(3px); }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 92vh; max-width: 92vw; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.8); }

/* play: between games */
.between-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; }
.between-grid .bg-cell { padding: 2px 18px 4px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.between-grid .bg-cell + .bg-cell { padding: 2px 0 4px 18px; border-left: 1px solid var(--line); align-items: stretch; }
.mini-h { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.recent { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.recent p { margin: 0; font-size: 13px; line-height: 1.45; }
.form-strip { display: flex; gap: 4px; }
.form-strip .fs { width: 22px; height: 26px; display: grid; place-items: center; font: 700 11px "JetBrains Mono", monospace; font-style: normal; border: 1px solid var(--line); color: var(--bone-dim); }
.form-strip .fs.win { color: var(--calm); border-color: color-mix(in srgb, var(--calm) 60%, transparent); background: color-mix(in srgb, var(--calm) 12%, transparent); }
.form-strip .fs.loss { color: #ff9b9b; border-color: rgba(255,120,120,.45); background: rgba(255,90,90,.08); }
.form-line { font-family: "Chakra Petch", "Barlow", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.recent .link { padding: 0; }
.pz-chip { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--ink); border: 1px solid var(--line); color: var(--bone); padding: 10px 12px; cursor: pointer; font: inherit; }
.pz-chip:hover { border-color: var(--amber); }
.pz-chip .pz-nm b { display: block; font-size: 13px; }
.pz-chip .pz-nm small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--bone-dim); font-size: 11px; line-height: 1.35; }
.pz-chip .pz-go { color: var(--amber); font-size: 11px; letter-spacing: 1px; }
.pz-bar { height: 3px; background: var(--line); width: 100%; }
.pz-bar i { display: block; height: 100%; background: var(--amber); }

/* learn */
.learn-grid > .col { gap: 18px; }
.learn-grid .col .ghost { align-self: flex-start; margin-top: 12px; }
.practice-list { display: flex; flex-direction: column; gap: 8px; }
.paygrid { display: flex; flex-direction: column; gap: 14px; }
.pay { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.pay b { display: block; font-family: "Chakra Petch", "Barlow", sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; color: var(--amber); }
.pay span { font-size: 13px; line-height: 1.45; color: var(--bone-dim); }
.pay-glyph { width: 34px; height: 34px; display: grid; place-items: center; font: 700 15px "Chakra Petch", sans-serif; font-style: normal; }
.pay-glyph.energy { border-radius: 50%; background: var(--bone); color: #111; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3px var(--bone-dim); }
.pay-glyph.power { position: relative; }
.pay-glyph.power::before, .pay-glyph.power::after { content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg); left: 10px; }
.pay-glyph.power::before { top: 2px; background: var(--fury); } .pay-glyph.power::after { top: 18px; background: var(--calm); }
.pay-glyph.any { border-radius: 50%; color: #fff; background: conic-gradient(var(--fury), var(--body, #e8822f), var(--order, #d9c03c), var(--calm), var(--mind), var(--chaos), var(--fury)); text-shadow: 0 1px 2px #000; }
.pay-glyph.rune { width: 24px; height: 34px; margin-left: 5px; border: 1px solid var(--amber); border-radius: 4px; background: linear-gradient(160deg, rgba(var(--accent-rgb), .35), transparent 60%), var(--ink); }

/* puzzles: tiles */
#screen-puzzles .puzzles { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pz-meter { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.pzm { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--ink-2); padding: 8px 12px; font-size: 11px; letter-spacing: 1.5px; }
.pzm-pips { display: flex; gap: 3px; }
.pzm-pips i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid currentColor; opacity: .55; }
.pzm-pips i.on { background: currentColor; opacity: 1; }
.pzm.easy { color: var(--calm); } .pzm.medium { color: var(--amber); } .pzm.hard { color: #ff8a8a; }
.pzm b { color: var(--bone); font-size: 12px; }
.pz-tile { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--ink-2); border: 1px solid var(--line); padding: 16px 18px 16px 22px; overflow: hidden; min-height: 190px; }
.pz-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); }
.pz-tile.easy::before { background: var(--calm); } .pz-tile.hard::before { background: var(--fury); }
.pz-tile::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border: 1px solid rgba(var(--accent-rgb), .12); transform: rotate(45deg); pointer-events: none; }
.pz-tile:hover { border-color: rgba(var(--accent-rgb), .6); }
.pz-top { display: flex; align-items: center; gap: 10px; }
.pz-top .diff { padding: 3px 8px; }
.pz-no { font-size: 26px; color: rgba(var(--accent-rgb), .45); line-height: 1; margin-right: auto; }
.pz-done { font-size: 10px; letter-spacing: 1.5px; color: var(--calm); }
.pz-name { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 22px; letter-spacing: .5px; text-transform: uppercase; }
.pz-goal { margin: 0; color: var(--bone-dim); font-size: 13px; line-height: 1.5; flex: 1; }
.pz-tile button { align-self: flex-start; font-size: 16px; padding: 8px 18px; }
.pz-tile.solved { background: linear-gradient(160deg, color-mix(in srgb, var(--calm) 7%, transparent), transparent 55%), var(--ink-2); }

/* record: empty state */
.tiles.dim { opacity: .45; }
.record-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 56px 24px; border: 1px dashed var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), .08), transparent 60%), var(--ink-2); }
.record-empty[hidden] { display: none; }
.re-mark { font-size: 48px; letter-spacing: 6px; color: rgba(var(--accent-rgb), .25); line-height: 1; }
.record-empty b { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 26px; letter-spacing: 3px; }
.record-empty span { max-width: 520px; color: var(--bone-dim); font-size: 14px; line-height: 1.55; }
.re-go { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.profile-grid[hidden] { display: none; }

/* settings: two columns */
.settings-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 18px; align-items: start; }
.settings-grid .settings { max-width: none; }
.react-explain { display: flex; flex-direction: column; gap: 8px; }
.rx { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-left-width: 3px; cursor: pointer; }
.rx b { font: 700 12px "JetBrains Mono", monospace; letter-spacing: 2px; color: var(--bone-dim); padding-top: 2px; }
.rx span { font-size: 13px; line-height: 1.45; color: var(--bone-dim); }
.rx:hover { border-color: rgba(var(--accent-rgb), .5); }
.rx.on { border-color: var(--amber); background: rgba(var(--accent-rgb), .07); }
.rx.on b { color: var(--amber); } .rx.on span { color: var(--bone); }
.keys { display: flex; flex-direction: column; gap: 10px; }
.key { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bone-dim); }
.key span { margin-left: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; font: 700 11px "JetBrains Mono", monospace; color: var(--bone); background: linear-gradient(var(--ink-3, #1c2430), var(--ink)); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 5px; }

@media (max-width: 760px) {
  .gallery-body { grid-template-columns: minmax(0, 1fr); }
  .g-side { position: static; max-height: none; }
  #screen-gallery .gallery-grid:not(.small) { grid-template-columns: repeat(var(--gcols, 2), minmax(0, 1fr)); }
  .per-row { grid-column: 1 / -1; justify-self: stretch; }
  .per-row input { flex: 1; width: auto; }
  .between-grid { grid-template-columns: 1fr; }
  .between-grid .bg-cell + .bg-cell { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 12px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  #screen-puzzles .puzzles { grid-template-columns: minmax(0, 1fr); }
  .record-empty { padding: 36px 16px; }
}

.pz-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pz-group:first-child { margin-top: 0; }
.pz-group b { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 18px; letter-spacing: 3px; }
.pz-group span { font-size: 11px; letter-spacing: 1px; color: var(--bone-dim); }
.pz-group.easy b { color: var(--calm); } .pz-group.medium b { color: var(--amber); } .pz-group.hard b { color: #ff8a8a; }

/* ---------- action panel: wider, controls as compact keycaps ---------- */
.dock { grid-template-columns: minmax(0, 1fr) 470px; }
.prompt { padding: 10px 14px 8px; gap: 7px; }
.p-text { font-size: 18px; }
.p-text.long { font-size: 15px; }
.p-hint { display: flex; flex-wrap: wrap; gap: 3px 10px; font-family: "Barlow", sans-serif; font-size: 10.5px; letter-spacing: 0; color: var(--bone-dim); padding-top: 6px; line-height: 1.2; }
.p-hint span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.p-hint kbd { min-width: 0; height: 16px; padding: 0 5px; font-size: 9px; border-bottom-width: 2px; border-radius: 3px; }
@media (max-width: 1280px) { .dock { grid-template-columns: minmax(0, 1fr) 420px; } }
@media (max-width: 760px) { .dock { grid-template-columns: minmax(0, 1fr); } .p-hint { display: none; } }
/* Laptop widths: the top-right buttons were running into the score */
@media (min-width: 761px) and (max-width: 1400px) { .topbtns { gap: 4px; } .topbtns .ghost, .topbtns button { padding: 5px 7px; font-size: 11px; letter-spacing: .4px; } .scores { gap: 14px; } }

/* ---------- deck import / export ---------- */
.xp-wrap { position: relative; }
.xp-btn { display: inline-flex; align-items: center; gap: 8px; }
.xp-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.xp-btn.on { color: var(--bone); border-color: var(--amber); }
.xp-btn.on::after { transform: translateY(2px) rotate(-135deg); }
.xp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 340px; padding: 6px; background: var(--ink-2); border: 1px solid var(--amber); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.65); }
.xp-menu::before { content: ""; position: absolute; right: 22px; top: -6px; width: 10px; height: 10px; background: var(--ink-2); border-left: 1px solid var(--amber); border-top: 1px solid var(--amber); transform: rotate(45deg); }
.xp-kick { font-size: 10px; letter-spacing: 3px; color: var(--amber); padding: 6px 10px 8px; border-bottom: 1px dashed var(--line); margin-bottom: 4px; }
.xp-menu button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 100%; text-align: left; padding: 9px 10px; background: none; border: 0; border-left: 2px solid transparent; color: var(--bone); cursor: pointer; }
.xp-menu button:hover, .xp-menu button:focus-visible { background: linear-gradient(90deg, rgba(var(--accent-rgb),.12), transparent); border-left-color: var(--amber); outline: none; }
.xp-menu b { font-family: "Chakra Petch", "Barlow", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.xp-menu span { grid-column: 2; font-size: 12px; color: var(--bone-dim); line-height: 1.3; }
.xp-menu button.done span { color: var(--ok); }
.xp-menu button.bad span { color: #f0a0a0; }
.xp-ico { grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; display: grid; place-items: center; color: var(--amber); background: linear-gradient(160deg, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.03)); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: background .15s, color .15s; }
.xp-ico svg { width: 22px; height: 22px; display: block; }
.xp-menu button:hover .xp-ico, .xp-menu button:focus-visible .xp-ico { background: var(--amber); color: var(--on-accent); }
.xp-menu button.done .xp-ico { background: rgba(125,240,160,.18); color: var(--ok); }

.imp { width: min(880px, calc(100vw - 32px)); }
.imp-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; padding: 14px 18px; min-height: 0; overflow: auto; }
.imp-body textarea { width: 100%; height: 340px; resize: vertical; background: var(--ink); color: var(--bone); border: 1px solid var(--line); font: 12.5px/1.5 "JetBrains Mono", "IBM Plex Mono", monospace; padding: 10px 12px; box-sizing: border-box; }
.imp-body textarea:focus { outline: none; border-color: var(--amber); }
.imp-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.imp-kind { font-size: 11px; letter-spacing: 2.5px; color: var(--bone-dim); padding: 8px 10px; border: 1px dashed var(--line); }
.imp-kind.on { color: var(--amber); border-style: solid; border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.06); }
.imp-summary { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.imp-summary .bad { color: #f0a0a0; } .imp-summary .warn { color: #e8c37a; }
.imp-deck { display: flex; gap: 10px; align-items: center; }
.imp-deck .doms { display: flex; flex-direction: column; gap: 3px; }
.imp-deck .doms i { width: 8px; height: 18px; display: block; }
.imp-deck b { display: block; font-family: "Chakra Petch", sans-serif; font-size: 18px; }
.imp-deck span { font-size: 13px; }
.imp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.imp-stats span { padding: 8px 6px; text-align: center; border-left: 1px solid var(--line); }
.imp-stats span:first-child { border-left: 0; }
.imp-stats b { display: block; font-size: 20px; color: var(--bone); }
.imp-stats i { font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--bone-dim); }
.imp-help { margin: auto 0 0; padding-left: 16px; font-size: 12px; line-height: 1.45; }
.imp-help li + li { margin-top: 4px; }
#imp .vault-foot, #wall .vault-foot { gap: 8px; }
#imp .vault-foot button, #wall .vault-foot button { margin-left: 0; }
#imp .vault-foot > .mono:first-child, #wall .vault-foot > .mono:first-child { margin-right: auto; }
#imp .vault-foot button.primary, #wall .vault-foot button.primary { font-size: 16px; padding: 8px 18px; }

.wall { width: min(1320px, calc(100vw - 32px)); }
.wall-body { display: grid; grid-template-columns: 250px 1fr; gap: 18px; padding: 16px 18px; min-height: 0; overflow: auto; }
.wall-opts { display: flex; flex-direction: column; gap: 14px; }
.wall-opt { display: flex; flex-direction: column; gap: 6px; }
.wall-opt > .mono { font-size: 10px; letter-spacing: 2.5px; color: var(--amber); }
.wall-opt select { background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 7px 8px; font: 14px Barlow, sans-serif; }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { flex: 1; background: var(--ink); color: var(--bone-dim); border: 0; border-left: 1px solid var(--line); padding: 7px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.seg button:first-child { border-left: 0; }
.seg button b { font-family: "Chakra Petch", sans-serif; font-size: 14px; font-weight: 600; }
.seg button i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 9px; opacity: .75; }
.seg button.on { color: var(--on-accent); background: var(--amber); }
/* Toggles: a rail with a sliding gold slug, and the whole tile lights up when on. */
.wall-tog { position: relative; flex-direction: row; align-items: center; gap: 12px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); background: var(--ink); transition: border-color .15s, background .15s; }
.wall-tog:hover { border-color: var(--bone-dim); }
.wall-tog input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; order: 2; margin: 0 0 0 auto; width: 46px; height: 22px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, rgba(240,230,210,.06) 0 4px, transparent 4px 8px), #04070d; position: relative; display: block; cursor: pointer; transition: border-color .15s; }
.wall-tog input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 14px; background: var(--bone-dim); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transition: left .18s cubic-bezier(.3,1.4,.6,1), background .15s; }
.wall-tog input[type=checkbox]::after { content: "OFF"; width: auto; height: auto; background: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font: 600 8px "JetBrains Mono", monospace; letter-spacing: 1px; color: var(--bone-dim); }
.wall-tog input[type=checkbox]:checked { border-color: var(--amber); background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.10) 0 4px, transparent 4px 8px), #04070d; }
.wall-tog input[type=checkbox]:checked::before { left: 25px; background: var(--amber); box-shadow: 0 0 10px rgba(var(--accent-rgb),.7); }
.wall-tog input[type=checkbox]:checked::after { content: "ON"; right: auto; left: 6px; color: var(--amber); transform: translateY(-50%); }
.wall-tog input[type=checkbox]:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.wall-tog:has(input:checked) { border-color: rgba(var(--accent-rgb),.55); background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), var(--ink) 70%); }
.wall-tog:has(input:checked)::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--amber); }
.wall-tog b { display: block; font-size: 14px; color: var(--bone); }
.wall-tog i { font-style: normal; font-size: 11px; color: var(--bone-dim); }
.wall-tog:has(input:disabled) { opacity: .45; cursor: default; }
.wall-stage { position: relative; align-self: start; border: 1px solid var(--line); background: #000; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.wall-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wall-busy { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; letter-spacing: 4px; color: var(--amber); background: rgba(5,8,14,.75); }
@media (max-width: 760px) {
  .imp-body, .wall-body { grid-template-columns: 1fr; }
  .imp-body textarea { height: 200px; }
  .xp-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  .xp-menu::before { display: none; }
  .wall-opts { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- judge: paused veil and the judge's desk ---------- */
.judge-veil { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
  background: repeating-linear-gradient(135deg, rgba(5,8,14,.78) 0 14px, rgba(5,8,14,.66) 14px 28px); backdrop-filter: grayscale(.7); }
.judge-veil b { font-family: "Chakra Petch", sans-serif; font-size: clamp(26px, 5vw, 46px); letter-spacing: 6px; color: var(--amber); text-shadow: 0 0 30px rgba(var(--accent-rgb),.45); padding: 10px 26px; border-top: 2px solid var(--amber); border-bottom: 2px solid var(--amber); }
.judge-veil span { max-width: 520px; color: var(--bone); font-size: 15px; }
.judge-banner { z-index: 950; }

.judge-desk { position: fixed; left: 14px; top: 84px; z-index: 960; width: 286px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--line); border-left: 4px solid var(--amber); box-shadow: 0 24px 60px rgba(0,0,0,.6); color: var(--bone); }
.judge-desk.paused { border-left-color: var(--them); }
.jd-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.07) 0 1px, transparent 1px 6px); }
.jd-seal { width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; color: var(--on-accent); background: var(--amber); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.jd-head b { display: block; font-family: "Chakra Petch", sans-serif; letter-spacing: 3px; font-size: 14px; }
.jd-head .mono { font-size: 10.5px; color: var(--bone-dim); letter-spacing: 1px; }
.jd-min { margin-left: auto; width: 26px; height: 26px; background: none; border: 1px solid var(--line); color: var(--bone-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.judge-desk.min .jd-body { display: none; }
.jd-body { overflow-y: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.jd-big { width: 100%; padding: 11px; font-family: "Chakra Petch", sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 15px; background: var(--amber); color: var(--on-accent); border: 0; cursor: pointer; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.jd-big.on { background: var(--them); color: #fff; }
.jd-sec h4 { margin: 0 0 7px; font: 500 10px "JetBrains Mono", monospace; letter-spacing: 2.5px; color: var(--amber); display: flex; align-items: center; gap: 8px; }
.jd-sec h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jd-turns { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; max-height: 168px; overflow-y: auto; }
.jd-turn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 7px; background: var(--ink); border: 1px solid var(--line); color: var(--bone); cursor: pointer; text-align: left; min-width: 0; }
.jd-turn b { font-family: "Chakra Petch", sans-serif; font-size: 15px; }
.jd-turn span { font-size: 10px; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jd-turn:hover { border-color: var(--amber); background: rgba(var(--accent-rgb),.08); }
.jd-line { width: 100%; margin-top: 6px; padding: 7px 9px; text-align: left; background: none; border: 1px dashed var(--line); color: var(--bone-dim); font-size: 12.5px; cursor: pointer; }
.jd-line:hover:not(:disabled) { color: var(--bone); border-color: var(--bone-dim); }
.jd-line:disabled { opacity: .4; cursor: default; }
.jd-line.danger:hover { color: #f0a0a0; border-color: #8a3a3a; }
.jd-muted { font-size: 11.5px; color: var(--bone-dim); }
.jd-note { display: flex; }
.jd-note input { flex: 1; min-width: 0; background: var(--ink); color: var(--bone); border: 1px solid var(--line); border-right: 0; padding: 7px 8px; font: 13px Barlow, sans-serif; }
.jd-note input:focus { outline: none; border-color: var(--amber); }
.jd-note button { background: none; border: 1px solid var(--amber); color: var(--amber); font: 600 12px "Chakra Petch", sans-serif; letter-spacing: 2px; padding: 0 10px; cursor: pointer; }
.jd-note button:hover { background: var(--amber); color: var(--on-accent); }
.jd-award { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jd-win { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 8px; background: var(--ink); border: 1px solid var(--line); color: var(--bone); cursor: pointer; text-align: left; min-width: 0; }
.jd-win small { font: 500 9px "JetBrains Mono", monospace; letter-spacing: 2px; color: var(--bone-dim); }
.jd-win b { font-family: "Chakra Petch", sans-serif; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jd-win span { font-size: 10px; color: var(--bone-dim); }
.jd-win:hover { border-color: var(--ok); }
.jd-win:hover small { color: var(--ok); }
.jd-status { font-size: 11px; min-height: 14px; color: var(--bone-dim); }
.jd-status.ok { color: var(--ok); } .jd-status.bad { color: #f0a0a0; }
@media (max-width: 760px) { .judge-desk { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 55vh; } }
.menu button.menu-strong { color: var(--amber); font-weight: 600; border-left: 2px solid var(--amber); }

/* Occupied battlefield: the card art floats at the right edge (tint still covers the panel), units keep the rest. */
.bf.occupied::after { background: var(--tint), var(--bf-art) right 10px center / var(--bf-art-w, 30%) auto no-repeat; }
.bf.occupied .bf-side { padding-right: calc(var(--bf-art-w, 30%) + 16px); }
.bf.occupied .bf-side.theirs { border-bottom-color: rgba(255,255,255,.08); }
.bf.occupied::before { filter: blur(18px) brightness(.26) saturate(.8); }
@media (max-width: 760px) { .bf.occupied { --bf-art-w: 26%; } .bf.occupied .bf-side { padding-right: calc(var(--bf-art-w) + 8px); } }

.bf-head .scored-chip { flex-basis: 100%; order: 3; font: 500 10px "JetBrains Mono", monospace; letter-spacing: 1px; color: var(--ok); padding: 2px 0 0; }
.bf-head .scored-chip.them { color: var(--them); }
.bf-head { flex-wrap: wrap; }
.bf-head .scored-chip { flex-basis: auto; margin-top: 3px; padding: 2px 7px; background: rgba(4,7,12,.82); border-left: 2px solid currentColor; }

/* Hover preview: lower-left by default; hovering something on the left half moves it to the right rail side instead. */
.preview.flip { left: auto; right: 206px; }
@media (max-width: 760px) { .preview.flip { left: 8px; right: 8px; } }

/* ---------- events (Nexus Night) ---------- */
.ev-create { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.2fr; gap: 12px 14px; align-items: end; padding: 14px; margin-bottom: 16px; border: 1px solid var(--amber); background: linear-gradient(180deg, rgba(var(--accent-rgb),.06), transparent); }
.ev-f { display: flex; flex-direction: column; gap: 6px; }
.ev-f.wide { grid-column: 1 / -1; }
.ev-f > .mono { font-size: 10px; letter-spacing: 2.5px; color: var(--amber); }
.ev-f input, .ev-f select { background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 8px 9px; font: 14px Barlow, sans-serif; }
.ev-f input:focus, .ev-f select:focus { outline: none; border-color: var(--amber); }
.ev-f.end { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 8px; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ev-empty { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px dashed var(--line); text-align: center; }
.ev-empty b { font-family: "Chakra Petch", sans-serif; font-size: 20px; letter-spacing: 2px; }
.ev-card { position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px 14px 20px; background: var(--ink-2); border: 1px solid var(--line); color: var(--bone); cursor: pointer; overflow: hidden; }
.ev-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bone-dim); }
.ev-card.st-signup::before { background: var(--ok); } .ev-card.st-running::before { background: var(--amber); } .ev-card.st-done::before { background: var(--line); }
.ev-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border: 1px solid var(--line); transform: rotate(45deg); opacity: .6; }
.ev-card:hover { border-color: var(--amber); }
.ev-card-top { display: flex; gap: 8px; }
.ev-st { font-size: 10px; letter-spacing: 2px; color: var(--bone-dim); }
.st-signup .ev-st { color: var(--ok); } .st-running .ev-st { color: var(--amber); }
.ev-in { font-size: 10px; letter-spacing: 2px; color: var(--on-accent); background: var(--amber); padding: 0 6px; }
.ev-card-name { font-family: "Chakra Petch", sans-serif; font-size: 21px; letter-spacing: .5px; }
.ev-card-meta { font-size: 11px; color: var(--bone-dim); }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ev-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ev-col section, .ev-hist { background: var(--ink-2); border: 1px solid var(--line); padding: 12px 14px; }
.ev-col h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: 3px; color: var(--amber); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.ev-col h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ev-you { border-left: 4px solid var(--amber) !important; }
.ev-join { display: flex; gap: 8px; } .ev-join select { flex: 1; background: var(--ink); color: var(--bone); border: 1px solid var(--line); padding: 8px; font: 14px Barlow, sans-serif; }
.ev-reg, .ev-prow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ev-reg b, .ev-prow b { display: block; } .ev-reg span, .ev-prow span { font-size: 12px; }
.ev-prow { border-bottom: 1px dashed var(--line); } .ev-prow > div { flex: 1; min-width: 0; }
.ev-col .doms { display: inline-flex; flex-direction: column; gap: 2px; flex: none; } .ev-col .doms i { width: 6px; height: 14px; display: block; }
.ev-table { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 8px; border: 1px solid rgba(var(--accent-rgb),.4); background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.05) 0 8px, transparent 8px 16px); }
.ev-table.done { border-color: var(--line); background: none; }
.ev-table.bye b { font-family: "Chakra Petch", sans-serif; font-size: 22px; letter-spacing: 4px; color: var(--amber); }
.ev-tno { font-size: 10px; letter-spacing: 2px; color: var(--bone-dim); }
.ev-vs { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ev-vs b { font-family: "Chakra Petch", sans-serif; font-size: 20px; }
.ev-score { font-size: 18px; color: var(--amber); }
.ev-play { font-size: 18px; padding: 10px 26px; }
.ev-host-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-pair { display: grid; grid-template-columns: 34px 1fr auto 1fr 64px auto; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ev-pair .a { text-align: right; } .ev-pair .win { color: var(--ok); }
.ev-pair .ev-score { font-size: 13px; color: var(--bone-dim); text-align: center; min-width: 44px; }
.ev-pair.done .ev-score { color: var(--bone); }
.ev-pair.mine { background: rgba(var(--accent-rgb),.08); box-shadow: inset 3px 0 0 var(--amber); }
.ev-pst { font-size: 9px; letter-spacing: 2px; color: var(--amber); text-align: right; } .ev-pair.done .ev-pst { color: var(--bone-dim); }
.ev-set { background: var(--ink); color: var(--bone-dim); border: 1px solid var(--line); font-size: 12px; padding: 3px 4px; max-width: 130px; }
.ev-hist summary { cursor: pointer; font-size: 11px; letter-spacing: 3px; color: var(--bone-dim); }
.ev-hist[open] summary { margin-bottom: 6px; color: var(--amber); }
.ev-table-st { width: 100%; border-collapse: collapse; font-size: 13px; }
.ev-table-st th { text-align: left; font-size: 9px; letter-spacing: 2px; color: var(--bone-dim); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--amber); }
.ev-table-st td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ev-table-st td:nth-child(2) { display: flex; gap: 8px; align-items: center; }
.ev-table-st td b { display: block; } .ev-table-st td small { font-size: 11px; }
.ev-table-st .pts { color: var(--amber); font-size: 15px; }
.ev-table-st tr.mine td { background: rgba(var(--accent-rgb),.08); }
.ev-table-st tr.dropped { opacity: .5; }
.ev-table-st tr.top1 td:first-child { color: var(--on-accent); background: var(--amber); text-align: center; }
.ev-table-st tr.top2 td:first-child, .ev-table-st tr.top3 td:first-child { color: var(--amber); }
.ev-col p.small, .ev-col .small { font-size: 12px; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: 1fr; } .ev-create { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ev-pair { grid-template-columns: 30px 1fr auto 1fr; } .ev-pair .ev-pst, .ev-pair .ev-set { grid-column: 2 / -1; text-align: left; } }

/* Opponent's card on the chain: stays until the chain moves on. */
.chain-spot { position: fixed; right: 14px; bottom: 232px; z-index: 25; width: 380px; background: linear-gradient(180deg, var(--ink-2), var(--ink)); border: 1px solid var(--them); border-top: 3px solid var(--them); box-shadow: 0 18px 50px rgba(0,0,0,.65); animation: cs-in .22s ease-out; }
@keyframes cs-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.chain-spot header { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--line); }
.chain-spot header .mono { font-size: 9.5px; letter-spacing: 2.5px; color: var(--them); }
.chain-spot header b { font-family: "Chakra Petch", sans-serif; font-size: 13px; letter-spacing: 1px; color: var(--bone); }
.chain-spot header button { margin-left: auto; width: 24px; height: 22px; background: none; border: 1px solid var(--line); color: var(--bone-dim); cursor: pointer; }
.cs-body { display: grid; grid-template-columns: 124px 1fr; gap: 12px; padding: 10px 12px 12px; }
.cs-body img { width: 124px; border-radius: 7px; cursor: zoom-in; display: block; }
.cs-body img[hidden] { display: none; } .cs-body:has(img[hidden]) { grid-template-columns: 1fr; }
.cs-text b { display: block; font-family: "Chakra Petch", sans-serif; font-size: 16px; color: var(--bone); margin-bottom: 6px; }
.cs-text p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--bone); white-space: pre-wrap; }
.cs-tg { display: block; margin-top: 8px; font-size: 10px; letter-spacing: 1.5px; color: var(--amber); }
.chain-item { cursor: help; }
@media (max-width: 760px) { .chain-spot { left: 8px; right: 8px; top: 56px; bottom: auto; width: auto; } .cs-body { grid-template-columns: 84px 1fr; } .cs-body img { width: 84px; } }

/* Move-together tray and box select. */
.move-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 4px 0 2px; }
.mt-label { font-size: 9.5px; letter-spacing: 2.5px; color: var(--amber); margin-right: 4px; }
.mt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; background: var(--ink); border: 1px solid var(--line); color: var(--bone); font-size: 12.5px; cursor: pointer; }
.mt-chip i { width: 15px; height: 15px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; border: 1px solid var(--bone-dim); color: var(--on-accent); }
.mt-chip.on { border-color: var(--amber); background: rgba(var(--accent-rgb),.12); }
.mt-chip.on i { background: var(--amber); border-color: var(--amber); }
.mt-chip:hover { border-color: var(--amber); }
.mt-hint { font-size: 11.5px; }
.marquee { position: fixed; z-index: 40; pointer-events: none; border: 1px dashed var(--amber); background: rgba(var(--accent-rgb),.10); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.card.marquee-in, .card.tray-hover { outline: 2px dashed var(--amber); outline-offset: 2px; }
.jd-hidden { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.jd-hp { border-left: 2px solid var(--amber); padding-left: 8px; }
.jd-hp b { font-family: "Chakra Petch", sans-serif; font-size: 13px; }
.jd-hp ul { margin: 4px 0; padding-left: 16px; font-size: 12.5px; }
.jd-hp li.hid { color: var(--amber); }
.jd-top, .jd-at { display: block; font-size: 9.5px; letter-spacing: 1px; color: var(--bone-dim); }