/* The online table (mp-server/public/client.js). The look follows the
   vs-computer table (features/playtest-ai/arena.css): a dark felt, cards with
   rounded corners, blue for "you can pick this", gold for "picked". */

:root {
  --bg: #0c1512;
  --panel: rgba(14, 20, 26, .86);
  --panel-2: #1b232d;
  --line: #2c3743;
  --text: #e8ecf1;
  --muted: #95a1b0;
  --accent: #4f8cff;
  --accent-2: #7b5cff;
  --gold: #e3b95f;
  --good: #35c27a;
  --bad: #ff6b6b;
  --warn: #f0a93b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(46, 98, 80, .35), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, .6), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
}
[hidden] { display: none !important; }
button {
  font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; line-height: 1.2;
}
button:hover:not([disabled]) { border-color: #4a5868; background: #232d39; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; font-weight: 600; }
button.primary:hover:not([disabled]) { filter: brightness(1.1); background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
button.warn { background: #5a3b0c; border-color: var(--warn); color: #ffe0a8; }
button.ghost { background: transparent; border-color: transparent; color: #b8c1cd; }
button.ghost:hover:not([disabled]) { background: rgba(255, 255, 255, .06); border-color: transparent; }
button.small, .small button { padding: 3px 8px; font-size: 12px; }
button[disabled] { opacity: .45; cursor: default; }
input, select, textarea {
  font: inherit; color: var(--text); background: #0b1015; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 100%;
}
textarea { width: 100%; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.ok { color: var(--good); }
.bad { color: var(--bad); }
.err { color: var(--bad); }
.spacer { flex: 1; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; font-size: 12px; background: rgba(0, 0, 0, .25); white-space: nowrap;
}
.chip.warn { border-color: var(--warn); color: #ffd59a; }
.chip.you { border-color: var(--accent); color: #bcd3ff; }
.chip.out { border-color: var(--bad); color: #ffb3b3; }
.chip.wait { border-color: var(--accent); color: #cfe0ff; }
.badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 10px; line-height: 16px; text-align: center; margin-left: 3px; }
.boot { padding: 60px 16px; text-align: center; color: var(--muted); }

/* ---- Mana symbols (drawn, so the page needs no symbol images) ---- */
.pip {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; border-radius: 50%;
  font-size: .82em; font-style: normal; font-weight: 700; color: #1a1a1a; background: #c9c2b8; vertical-align: -.12em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4); margin: 0 .5px; letter-spacing: -.04em;
}
.pip-W { background: #f8f3d6; }
.pip-U { background: #a9d4f2; }
.pip-B { background: #b9adb0; }
.pip-R { background: #f3a98c; }
.pip-G { background: #9fd3a4; }
.pip-C { background: #d6d2cc; }
.pip-H { background: linear-gradient(135deg, #f3a98c 50%, #a9d4f2 50%); font-size: .6em; }

/* ---- Start page and lobby ---- */
.page { max-width: 1100px; margin: 0 auto; padding: 16px 16px 48px; }
.page h1 { font-size: 22px; margin: 6px 0 8px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; backdrop-filter: blur(6px); min-width: 0; }
.panel h2 { font-size: 15px; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel h2 + h2, .form + h2 { margin-top: 18px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 14px; }
.form { display: grid; gap: 8px; }
.form label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.form.row { display: flex; }
.form.row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }
.rooms { display: grid; gap: 6px; }
.room-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .2); }
.deck-text { min-height: 150px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0 8px; resize: vertical; }
.deck-name { width: min(360px, 100%); display: block; margin: 3px 0 0; }
.code-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.code { font: 700 22px/1 ui-monospace, monospace; letter-spacing: .14em; color: var(--gold); padding: 4px 10px; border: 1px dashed var(--gold); border-radius: 8px; }
.seats { display: grid; gap: 6px; }
.seat-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-left: 4px solid var(--seat); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .2); }
.seat-n { font-weight: 700; color: var(--muted); width: 16px; text-align: center; }
.seat-row .op-dot { display: none; }
.seat-who { flex: 1; min-width: 0; }
.seat-ctl { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.start-row { margin-top: 12px; }
.chat-panel .chat-log { height: 220px; overflow: auto; }
.chat-form { display: flex; gap: 6px; margin-top: 8px; }
.chat-form input { flex: 1; min-width: 0; }
.ch { padding: 2px 0; word-wrap: break-word; }
.ch.sys { color: var(--muted); font-style: italic; }

.banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 8px 14px; border-radius: 12px; background: #3a2a0c; border: 1px solid var(--warn); color: #ffe0a8; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 24px); }
.banner.end { background: #1a2a1f; border-color: var(--good); color: #d7ffe8; top: auto; bottom: 20px; font-weight: 600; }
.page > .banner { position: static; transform: none; margin: 8px 0; }

/* ---- The table ---- */
body.in-game { overflow: hidden; }
.tb {
  --cw: clamp(46px, 4.4vw, 84px);
  --hw: clamp(64px, 5.8vw, 110px);
  display: grid;
  height: 100dvh;
  gap: 8px;
  padding: 8px;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 20vw, 300px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar" "top side" "center side" "hand side";
  user-select: none; -webkit-user-select: none;
}
.tb.has-sides {
  grid-template-columns: minmax(170px, .75fr) minmax(0, 2fr) minmax(170px, .75fr) clamp(230px, 18vw, 290px);
  grid-template-areas: "bar bar bar bar" "left top right side" "left center right side" "hand hand hand side";
}
.tb:not(.has-sides) .opps-left, .tb:not(.has-sides) .opps-right { display: none; }
.tb[data-top="0"] .opps-top { display: none; }
.bar { grid-area: bar; }
.opps-left { grid-area: left; }
.opps-right { grid-area: right; }
.opps-top { grid-area: top; }
.center { grid-area: center; }
.hand { grid-area: hand; }
.side { grid-area: side; }
.opps-left, .opps-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; scrollbar-width: thin; }
.opps-left .op, .opps-right .op { flex: 1 1 0; }
.opps-top { display: flex; gap: 8px; min-width: 0; min-height: clamp(110px, 22vh, 240px); max-height: 38vh; }
.opps-top .op { flex: 1 1 0; }
.center { min-height: 0; display: flex; }

/* ---- Bar ---- */
.bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
  background: rgba(10, 14, 18, .84); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; backdrop-filter: blur(6px);
}
.turn { display: flex; align-items: baseline; gap: 6px; padding: 0 10px 0 4px; border-right: 1px solid var(--line); }
.turn span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.turn b { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.phases { display: flex; background: #0b0e12; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ph { color: var(--muted); border-radius: 999px; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.ph.done { color: #5f6b7a; }
.ph.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 2px 12px rgba(79, 140, 255, .45); }
.whose { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.prompt { flex: 1 1 260px; min-width: 0; color: #d9e1ea; }
.bar-btns { display: flex; gap: 6px; }
.bar-btns button { padding: 7px 14px; }
.side-btn { position: relative; display: none; }
.tmr { font-variant-numeric: tabular-nums; color: #cfe0ff; }
.tmr.big { font-size: 15px; padding: 3px 8px; border-radius: 8px; background: rgba(79, 140, 255, .15); border: 1px solid rgba(79, 140, 255, .5); }
.tmr.low { color: #ffb3b3; border-color: var(--bad); background: rgba(255, 107, 107, .15); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.op-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--seat); display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); }

/* ---- Player panels ---- */
.op, .me {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: rgba(8, 14, 12, .55); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: inset 4px 0 0 var(--seat);
}
.op { --cw: clamp(30px, 2.5vw, 50px); overflow: hidden; }
.tb[data-opps="1"] .op { --cw: clamp(40px, 3.6vw, 68px); }
.tb[data-opps="2"] .op { --cw: clamp(34px, 3vw, 58px); }
.op.active, .me.active { border-color: color-mix(in srgb, var(--seat) 70%, transparent); }
.op.waiting, .me.waiting { box-shadow: inset 4px 0 0 var(--seat), 0 0 0 2px var(--accent), 0 0 18px rgba(79, 140, 255, .35); }
.op.lost, .me.lost { opacity: .5; filter: grayscale(.7); }
.op-head, .me-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px 6px 12px; min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05); border-radius: 12px 12px 0 0;
}
.op-head.hl, .me-head.hl { background: rgba(79, 140, 255, .18); box-shadow: inset 0 0 0 2px var(--accent); cursor: pointer; }
.op-head.chosen, .me-head.chosen { background: rgba(227, 185, 95, .2); box-shadow: inset 0 0 0 2px var(--gold); }
.op-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.op-name small { color: var(--muted); font-weight: 400; }
.mk { font-size: 13px; line-height: 1; }
.mk.turn { color: var(--seat); }
.mk.crown { color: var(--gold); }
.mk.init { color: #b9e3ff; }
.mk.off { color: var(--warn); }
.life {
  font: 800 20px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: center;
  padding: 3px 7px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); transition: background .3s, color .3s;
}
.life.low { color: #ffb3b3; border-color: var(--bad); }
.life.down { background: rgba(255, 80, 80, .45); }
.life.up { background: rgba(53, 194, 122, .45); }
.op-counts { display: flex; gap: 2px; flex-wrap: wrap; }
.cnt { font-size: 12px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .25); color: #c6cfda; white-space: nowrap; border: 1px solid transparent; }
button.cnt { line-height: 1.4; }
.cnt.poison { color: #b6f0a0; border-color: #4d7d3c; }
.cmd-dmg small { color: var(--muted); }
.pools { display: inline-flex; gap: 4px; }
.pool { font-size: 12px; display: inline-flex; align-items: center; gap: 1px; }
.lands-played { font-size: 11px; color: var(--muted); }
.op-toggle { display: none; margin-left: auto; padding: 2px 10px; }
.op-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px 6px 10px; scrollbar-width: thin; }
.op-hand { display: flex; gap: 2px; align-items: center; min-height: 12px; margin-bottom: 3px; }
.mini-back { width: 9px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, #6b3f1f, #2d1a0c); border: 1px solid #8a6a3a; display: inline-block; }
.op-hand b { font-size: 11px; color: var(--muted); }
.op-cmd, .me-cmd, .me-plays { display: flex; gap: 4px; align-items: flex-end; flex-wrap: wrap; margin-top: 4px; }
.lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); width: 100%; }

/* ---- Battlefield rows ---- */
.row { min-height: calc(var(--cw) * .7); }
.op .row.empty, .op .row:empty { display: none; }
.op-board .row { padding-top: 6px; }
.op-board .row + .row { margin-top: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; }
.me-board .row { position: relative; padding: 9px 6px 4px; border-radius: 10px; background: rgba(255, 255, 255, .02); min-height: calc(var(--cw) * 1.395 + 8px); }
.me-board .row.empty::before { content: attr(data-label); color: rgba(255, 255, 255, .16); font-size: 12px; align-self: center; padding-left: 4px; }
.me-board .row[data-row="creatures"] { flex-grow: 1.3; align-content: flex-start; }
.pile-grp { display: flex; position: relative; }
.pile-grp .cs.stacked { margin-left: calc(var(--cw) * -.72); }
.pile-grp .cs.tapped.stacked { margin-left: calc(var(--cw) * -1.1); }
.grp-n { position: absolute; right: -4px; top: -6px; z-index: 5; font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: #000c; border: 1px solid var(--line); }

/* ---- Cards ---- */
.cs { position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.395); cursor: pointer; transition: width .15s ease; touch-action: manipulation; }
.cs.tapped { width: calc(var(--cw) * 1.395); }
.cc {
  container-type: size; position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.395);
  border-radius: 6% / 4.3%; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); transition: transform .15s ease, box-shadow .15s ease;
}
.cs.tapped .cc { left: calc(var(--cw) * .1975); transform: rotate(90deg); filter: brightness(.82) saturate(.85); }
.cc > img, .cc > .fc-txt, .cc > .fc-back { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.cc.is-cmd { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(227, 185, 95, .35), 0 3px 10px rgba(0, 0, 0, .55); }
.cs.hl .cc { box-shadow: 0 0 0 3px rgba(79, 140, 255, .95), 0 0 18px rgba(79, 140, 255, .6); }
.cs.chosen .cc { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(227, 185, 95, .6); transform: translateY(-5px); }
.cs.tapped.chosen .cc { transform: rotate(90deg) translateX(-5px); }
.cs.castable .cc { box-shadow: 0 0 0 2px rgba(53, 194, 122, .9), 0 -2px 14px rgba(0, 0, 0, .55); }
.cs.sick .cc::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0, 0, 0, .2) 8px 10px); pointer-events: none; }
.fc-back { background: radial-gradient(ellipse at 50% 45%, #7a4a22, #3a2210 60%, #1c1008); border: 2px solid #8a6a3a; }
.fc-back.fc-fd { display: flex !important; align-items: center; justify-content: center; text-align: center; color: #f0d9a8; font-size: max(8px, 11cqw); padding: 4px; }
.fc-back.fc-ab { display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 20px; }
.fc-txt {
  position: relative; overflow: hidden; display: flex !important; flex-direction: column; gap: 2cqw; padding: 5cqw;
  color: #1c1c1c; font-size: 8.5cqw; line-height: 1.18; border: 3cqw solid #1b1b1b; background: #d8d2c6;
}
.fc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2px; background: rgba(255, 255, 255, .6); border-radius: 3cqw; padding: 1.5cqw 3cqw; }
.fc-name { font-size: 9.5cqw; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fc-cost { white-space: nowrap; font-size: 8cqw; }
.fc-type { font-size: 7.5cqw; background: rgba(255, 255, 255, .55); border-radius: 3cqw; padding: 1cqw 3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-text { flex: 1; min-height: 0; overflow: hidden; font-size: 7cqw; background: rgba(255, 255, 255, .5); border-radius: 3cqw; padding: 2cqw 3cqw; white-space: pre-line; }
.fc-pt { position: absolute; right: 4cqw; bottom: 3cqw; font-weight: 800; font-size: 10cqw; background: #f3efe6; border: 1px solid #333; border-radius: 3cqw; padding: 0 3cqw; }
.fc-txt.c-W { background: linear-gradient(160deg, #fbf6e4, #d8cfae); }
.fc-txt.c-U { background: linear-gradient(160deg, #cfe6f7, #5d98cb); }
.fc-txt.c-B { background: linear-gradient(160deg, #b7adb3, #5a5058); }
.fc-txt.c-R { background: linear-gradient(160deg, #f7ccb5, #d4623d); }
.fc-txt.c-G { background: linear-gradient(160deg, #cfe7c2, #5c9a5d); }
.fc-txt.c-C { background: linear-gradient(160deg, #e6e8eb, #9aa2ab); }
.fc-txt.c-M { background: linear-gradient(160deg, #f5e6a9, #c9a24a); }
.fc-txt.is-token { border-color: #3a3a3a; border-style: double; }
@container (max-width: 64px) {
  .fc-text, .fc-type, .fc-cost { display: none; }
  .fc-name { font-size: 13cqw; -webkit-line-clamp: 3; }
  .fc-txt { padding: 4cqw; }
}
.pt {
  position: absolute; right: 3%; bottom: 2.5%; z-index: 2; font: 800 max(9px, 15cqw)/1.1 system-ui, sans-serif;
  padding: 0 4cqw; border-radius: 5cqw; background: rgba(10, 12, 16, .88); color: #e6e9ee; border: 1px solid #56606e; font-variant-numeric: tabular-nums;
}
.pt.hurt { color: #ffb0b0; border-color: var(--bad); }
.pt.loy { color: #f6d68b; border-color: var(--gold); }
.ctrs { position: absolute; left: 3%; bottom: 3%; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.ctr { font: 700 max(8px, 11cqw)/1.2 system-ui, sans-serif; padding: 0 3cqw; border-radius: 4cqw; background: rgba(10, 12, 16, .9); border: 1px solid #56606e; color: #dde3ea; white-space: nowrap; }
.ctr b { margin-left: 2px; }
.ctr.plus { border-color: var(--good); color: #9ff0c5; }
.ctr.minus { border-color: var(--bad); color: #ffb0b0; }
.cb { position: absolute; left: -3px; top: -6px; z-index: 3; display: flex; align-items: center; gap: 2px; font-size: max(10px, 14cqw); padding: 0 4px; border-radius: 6px; background: #000d; border: 1px solid var(--bad); color: #ffd0d0; max-width: 170%; white-space: nowrap; }
.cb em { font-style: normal; font-size: max(8px, 10cqw); overflow: hidden; text-overflow: ellipsis; }
.cb.blk { border-color: var(--accent); color: #d0e0ff; }
.att { position: absolute; left: 3%; top: 3%; z-index: 2; font-size: max(8px, 9cqw); background: #000c; padding: 0 3px; border-radius: 4px; color: #cfd7e2; max-width: 94%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bds { position: absolute; right: 3%; top: 18%; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; z-index: 2; }
.bd { font-size: max(8px, 9cqw); background: #000c; border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; color: #ffd59a; }
.cs.tapped .cb, .cs.tapped .pt, .cs.tapped .ctrs { transform: rotate(-90deg); }

/* ---- My side ---- */
.me { flex: 1; }
.me-main { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 6px 8px 8px 12px; }
.me-board { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; scrollbar-width: thin; }
.me.drop-on { box-shadow: inset 4px 0 0 var(--seat), 0 0 0 3px var(--good); }
.me-zones { flex: none; width: calc(var(--cw) * 1.2 + 10px); display: flex; flex-direction: column; gap: 8px; align-items: center; overflow: auto; scrollbar-width: none; }
.zone-pile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; border: 0; font-size: 11px; color: var(--muted); }
.zone-pile:hover:not([disabled]) { background: none; }
.zp-card { width: calc(var(--cw) * .9); height: calc(var(--cw) * .9 * 1.395); border-radius: 6% / 4.3%; border: 1px dashed #3a4654; overflow: hidden; container-type: size; }
.zp-card > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.zone-pile b { color: var(--text); }

/* ---- Hand ---- */
.hand { min-width: 0; position: relative; }
.hand-cards { display: flex; justify-content: center; align-items: flex-end; height: calc(var(--hw) * 1.395 + 10px); padding: 6px 20px 0; }
.hand .cs { --cw: var(--hw); margin: 0 calc(var(--hw) * -.08); }
.hand .cc { transform: rotate(var(--rot, 0deg)) translateY(var(--drop, 0px)); transform-origin: 50% 120%; }
.hand .cs:hover { z-index: 20; }
.hand .cs:hover .cc { transform: translateY(-16%) scale(1.08); box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
.hand .cs.castable:hover .cc { box-shadow: 0 0 0 2px rgba(53, 194, 122, .9), 0 18px 40px rgba(0, 0, 0, .7); }
.hand-empty { color: var(--muted); align-self: center; }
.decide { background: rgba(10, 14, 18, .9); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px; margin: 0 auto 6px; max-width: 900px; display: grid; gap: 6px; }
.dc-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dc-row .lbl { width: auto; margin-right: 4px; }
.dc-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-item { display: inline-flex; gap: 6px; align-items: center; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .25); font-size: 13px; }
.dc-item select { padding: 2px 6px; font-size: 13px; }
.dc-item .x { padding: 2px 6px; }
.chip-btn { border-radius: 999px; padding: 3px 10px; font-size: 13px; border-left: 4px solid var(--seat, var(--line)); }
.chip-btn.on { background: rgba(227, 185, 95, .2); border-color: var(--gold); border-left-color: var(--seat, var(--gold)); color: #ffe7b0; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.drag-ghost { position: fixed !important; z-index: 200; pointer-events: none; width: var(--hw, 90px); height: calc(var(--hw, 90px) * 1.395); --hw: 96px; transform: rotate(4deg) scale(1.04); box-shadow: 0 20px 40px rgba(0, 0, 0, .7); }

/* ---- Side: stack, log, chat ---- */
.side { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.stack, .tabs { background: rgba(10, 14, 18, .84); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 0; }
.stack { flex: 0 1 auto; max-height: 45%; overflow: auto; scrollbar-width: thin; }
.stack.is-empty { flex: none; }
.side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.stack-empty { color: var(--muted); font-size: 12px; }
.st-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--seat); background: rgba(0, 0, 0, .25); margin-bottom: 6px; }
.st-item.top { border-color: var(--gold); border-left-color: var(--seat); }
.st-item.hl { box-shadow: 0 0 0 2px var(--accent); cursor: pointer; }
.st-item.chosen { box-shadow: 0 0 0 2px var(--gold); }
.st-face { width: 44px; flex: none; aspect-ratio: 488 / 680; container-type: size; }
.st-face > * { width: 100%; height: 100%; display: block; border-radius: 6% / 4.3%; object-fit: cover; }
.st-text { min-width: 0; font-size: 13px; }
.st-text .small { color: var(--muted); overflow-wrap: anywhere; }
.tabs { flex: 1 1 0; display: flex; flex-direction: column; }
.tab-row { display: flex; gap: 4px; margin-bottom: 6px; }
.tab-row button { padding: 4px 10px; font-size: 12px; background: transparent; }
.tab-row button.on { background: var(--panel-2); border-color: #4a5868; }
.side-close { display: none; margin-left: auto; }
.log-list, .chat-box { flex: 1; min-height: 0; overflow: auto; font-size: 12.5px; scrollbar-width: thin; user-select: text; -webkit-user-select: text; }
.chat-box { display: flex; flex-direction: column; overflow: hidden; }
.chat-box .chat-log { flex: 1; min-height: 0; overflow: auto; }
.lg { padding: 2px 0 2px 8px; border-left: 2px solid transparent; color: #cdd5df; }
.lg.by { border-left-color: var(--seat); }
.lg-turn { margin: 6px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }

/* ---- Dialogs, zoom, menu, toasts ---- */
.dlg {
  width: min(560px, 94vw); max-height: 90dvh; overflow: auto; color: var(--text); background: #121820; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.dlg.wide { width: min(980px, 96vw); }
.dlg::backdrop { background: rgba(4, 6, 8, .62); backdrop-filter: blur(2px); }
.dlg-head h2 { margin: 0 0 2px; font-size: 18px; }
.dlg-head { margin-bottom: 12px; }
.dlg-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.dlg input:not([type]), .dlg input[type="number"] { display: block; width: 100%; margin: 2px 0 8px; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.th { position: relative; width: clamp(82px, 13vw, 130px); cursor: pointer; transition: transform .12s; container-type: inline-size; }
.th > img, .th > .fc-txt, .th > .fc-back { width: 100%; aspect-ratio: 488 / 680; height: auto; display: block; border-radius: 6% / 4.3%; object-fit: cover; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.th:hover { transform: translateY(-3px); }
.th-name { font-size: 11px; color: var(--muted); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th.chosen > img, .th.chosen > .fc-txt { opacity: .45; filter: grayscale(.6); outline: 3px solid var(--gold); }
.th.chosen::after { content: attr(data-label); position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--gold); color: #1a1406; font-weight: 800; padding: 2px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.decide-box { display: flex; gap: 14px; align-items: flex-start; }
.dc-src .th { width: 110px; }
.dc-text { flex: 1; font-size: 15px; }
.modes { display: grid; gap: 6px; flex: 1; }
.mode-btn, .mode-opt { text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); display: block; cursor: pointer; }
.mode-opt.on { border-color: var(--gold); background: rgba(227, 185, 95, .12); }
.mode-opt.off { opacity: .5; cursor: default; }
.arrange { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.arr { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.arr.bottom .th > *:first-child, .arr.graveyard .th > *:first-child { opacity: .5; }
.arr-move { display: flex; gap: 2px; }
.seg { display: flex; }
.seg button { border-radius: 0; padding: 3px 8px; font-size: 12px; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.num-row .num { width: 120px; font-size: 20px; }

.zoom { position: fixed; z-index: 120; display: flex; gap: 10px; align-items: flex-start; pointer-events: none; max-width: calc(100vw - 16px); animation: zin .12s ease-out; }
@keyframes zin { from { opacity: 0; transform: scale(.97); } }
.zm-card { width: 250px; flex: none; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; box-shadow: 0 24px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); container-type: inline-size; }
.zm-card > * { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.zm-card > .fc-txt { font-size: 7cqw; }
.zm-notes { max-width: 240px; background: rgba(10, 14, 18, .94); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; display: grid; gap: 3px; }
.zm-text { margin-top: 4px; white-space: pre-line; }
.zoom.touch { flex-direction: column; align-items: center; pointer-events: auto; }
.zoom.touch .zm-card { width: min(300px, 78vw); }
.zoom.touch .zm-notes { max-width: min(300px, 90vw); }
.zm-close { font-size: 12px; color: var(--muted); background: #000a; padding: 3px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .zoom { animation: none; } .cc, .cs { transition: none; } }

.menu { position: fixed; z-index: 150; min-width: 200px; max-width: min(320px, 94vw); background: #151c25; border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); display: grid; gap: 2px; }
.menu-title { font-size: 12px; color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu button { text-align: left; background: transparent; border-color: transparent; padding: 8px 10px; }
.menu button:hover:not([disabled]), .menu button:focus-visible { background: rgba(79, 140, 255, .18); }
.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 300; display: grid; gap: 6px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { background: #1b2430; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: opacity .5s, transform .5s; }
.toast.bad { border-color: var(--bad); color: #ffd0d0; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---- Narrower screens ---- */
@media (max-width: 1180px) {
  .tb.has-sides { grid-template-columns: minmax(150px, .7fr) minmax(0, 2fr) minmax(150px, .7fr) 230px; }
  .prompt { flex-basis: 100%; order: 10; }
}

/* ---- Phones and small tablets: one column, opponents as strips ---- */
@media (max-width: 860px) {
  body.in-game { overflow: auto; }
  .tb, .tb.has-sides {
    --cw: 44px; --hw: 66px;
    display: flex; flex-direction: column; height: auto; min-height: 100dvh; padding: 6px 6px 0; gap: 6px;
  }
  .tb:not(.has-sides) .opps-left, .tb:not(.has-sides) .opps-right { display: none; }
  .bar { order: 0; position: sticky; top: 0; z-index: 30; gap: 6px; padding: 5px 6px; }
  .turn { padding-right: 6px; }
  .turn b { font-size: 17px; }
  .phases { order: 11; flex-basis: 100%; }
  .prompt { order: 12; flex-basis: 100%; font-size: 13px; }
  .bar-btns { order: 13; flex: 1; }
  .bar-btns button { flex: 1; padding: 9px 12px; }
  .tmr.big { order: 13; }
  .whose { font-size: 13px; }
  .side-btn { display: inline-block; }
  .opps-left, .opps-top, .opps-right { order: 2; display: flex; flex-direction: column; gap: 6px; min-height: 0; max-height: none; overflow: visible; }
  .opps-left { order: 1; }
  .opps-right { order: 3; }
  .op, .tb[data-opps] .op { --cw: 36px; flex: none; }
  .op-head { padding: 5px 6px 5px 10px; gap: 4px; }
  .op-name { max-width: 9em; }
  .life { font-size: 17px; padding: 2px 6px; }
  .op-toggle { display: inline-block; }
  .op-body { display: none; }
  .op.open .op-body { display: block; }
  .side { display: contents; }
  .stack { order: 4; max-height: 30vh; }
  .stack.is-empty { display: none; }
  .center { order: 5; min-height: 46vh; }
  .me-main { padding: 4px 4px 6px 8px; gap: 4px; }
  .me-zones { width: 54px; }
  .zp-card { width: 38px; height: 53px; }
  .zone-pile span { font-size: 9.5px; text-align: center; }
  .ph { padding: 2px 8px; font-size: 11px; }
  .phases { padding: 2px; }
  .me-board .row { min-height: calc(var(--cw) * 1.395 + 6px); padding: 3px; }
  .hand { order: 6; position: sticky; bottom: 0; z-index: 25; margin: 0 -6px; padding: 4px 6px 6px; background: linear-gradient(to top, rgba(8, 12, 12, .98) 70%, rgba(8, 12, 12, .7)); }
  .hand-cards { justify-content: flex-start; overflow-x: auto; height: calc(var(--hw) * 1.395 + 8px); padding: 4px 2px 0; gap: 4px; scrollbar-width: none; }
  .hand .cs { margin: 0; }
  .hand .cc { transform: none; }
  .hand .cs:hover .cc { transform: none; }
  .decide { max-height: 34vh; overflow: auto; }
  .tabs { display: none; }
  .side.open .tabs {
    display: flex; position: fixed; z-index: 90; left: 6px; right: 6px; bottom: 6px; top: 25vh; box-shadow: 0 -10px 40px rgba(0, 0, 0, .7);
  }
  .side-close { display: inline-block; }
  .banner { top: auto; bottom: calc(var(--hw) * 1.395 + 30px); }
  .dlg { padding: 12px; }
  .th { width: clamp(70px, 26vw, 110px); }
  .decide-box { flex-direction: column; }
  .zm-notes { display: none; }
  .zoom.touch .zm-notes { display: grid; }
}

/* Fan Content Policy notice (the same as the main site's footer): in the lobby, not at the table. */
.site-footer { max-width: 1100px; margin: 0 auto; padding: 16px 16px 28px; color: var(--muted); font-size: 11px; line-height: 1.5; border-top: 1px solid var(--line); }
.site-footer p { margin: 0 0 4px; }
.site-footer a { color: inherit; text-decoration: underline; }
body.in-game .site-footer { display: none; }