:root { --bg:#14161b; --panel:#1e2129; --text:#e8e8ea; --muted:#9aa0aa; --accent:#e0a526; --ok:#3fb36b; --bad:#e05454; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#0f1115; border-bottom:1px solid #2a2e38; position:sticky; top:0; z-index:5; }
header h1 { font-size:1.15rem; margin:0; }
main { max-width:1200px; margin:0 auto; padding:12px; }
.hidden { display:none !important; }
.card-panel { background:var(--panel); border-radius:12px; padding:16px; margin-bottom:14px; }
#home { display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { #home { grid-template-columns: 1fr 1.6fr; align-items:start; } #homeErr { grid-column: 1 / -1; } }
h2 { margin-top:0; font-size:1.1rem; } h3 { font-size:1rem; }
label { display:block; margin:8px 0; font-size:.9rem; color:var(--muted); }
input, textarea { width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid #333845; background:#12141a; color:var(--text); font-size:16px; }
textarea { font-family: ui-monospace, monospace; font-size:13px; }
button { padding:10px 14px; border-radius:8px; border:1px solid #3a3f4c; background:#2a2e38; color:var(--text); font-size:15px; cursor:pointer; }
button.primary { background:var(--accent); color:#1a1300; border-color:var(--accent); font-weight:600; }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.muted { color:var(--muted); } .err { color:var(--bad); min-height:1em; }
.code { font-family: ui-monospace, monospace; letter-spacing:2px; color:var(--accent); }
.players { list-style:none; padding:0; }
.players li { padding:6px 0; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:var(--bad); }
.dot.on { background:var(--ok); }
.draft-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.timer { font-weight:700; font-size:1.1rem; color:var(--accent); }
.timer.low { color:var(--bad); }
.table { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:8px 0 12px; }
.table li { background:var(--panel); padding:5px 10px; border-radius:999px; font-size:.85rem; }
.table li.me { outline:2px solid var(--accent); }
.badge { background:#3a3f4c; border-radius:999px; padding:0 7px; margin-left:4px; font-size:.75rem; }
.cards { display:grid; gap:8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width:480px) { .cards { grid-template-columns: repeat(3, 1fr); gap:5px; } }
.mtg { position:relative; border-radius:4.5% / 3.5%; overflow:hidden; aspect-ratio: 488/680; background:#2a2e38; cursor:pointer; border:2px solid transparent; transition: transform .1s; }
.mtg img { width:100%; height:100%; display:block; object-fit:cover; }
.mtg .fallback { padding:8px; font-size:.85rem; }
.mtg:hover { transform: translateY(-2px); }
.mtg.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent); }
.mtg .flip { position:absolute; right:4px; top:4px; padding:2px 6px; font-size:12px; background:#000a; border:none; }
.confirm-bar { position:sticky; bottom:0; padding:10px; background:#0f1115ee; display:flex; gap:10px; justify-content:center; align-items:center; margin-top:8px; }
.waiting { padding:40px; text-align:center; color:var(--muted); background:var(--panel); border-radius:12px; }
.pool { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; }
.pool .col { min-width:110px; width:110px; }
.pool .col h4 { margin:0 0 4px; font-size:.75rem; color:var(--muted); font-weight:500; }
.pool .stack .mtg { margin-bottom:-118%; }
.pool .stack .mtg:last-child { margin-bottom:0; }
details { margin:10px 0; } summary { cursor:pointer; color:var(--muted); }
select { width:100%; padding:10px; border-radius:8px; border:1px solid #333845; background:#12141a; color:var(--text); font-size:16px; flex:1; }
.row.nowrap { flex-wrap:nowrap; } .nowrap { white-space:nowrap; }
.row.nowrap input { margin-top:0; flex:1; min-width:0; }
.filebtn { display:inline-block; margin:0; padding:10px 14px; border-radius:8px; border:1px solid #3a3f4c; background:#2a2e38; color:var(--text); font-size:15px; cursor:pointer; }
button.danger { background:#4a2226; border-color:#7a3036; }
.editor { background:#171a21; border-radius:10px; padding:8px 10px; margin:8px 0; }
.cardlist { list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; border-top:1px solid #2a2e38; }
.cardlist li { display:flex; align-items:center; gap:6px; padding:3px 0; border-bottom:1px solid #22262f; font-size:.9rem; }
.cardlist li span { flex:1; cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cardlist li input { margin:0; padding:4px 6px; font-size:14px; flex:1; }
.cardlist li button { padding:2px 8px; font-size:13px; }
.cardlist li.more { color:var(--muted); justify-content:center; }
#needMsg.bad { color:var(--bad); }
.pickhint { color:var(--accent); font-weight:600; }
/* Compact settings: inline label + narrow number inputs */
.settings { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0; }
.settings label { display:flex; align-items:center; gap:6px; margin:0; white-space:nowrap; font-size:.85rem; }
.settings input { width:4.5em; margin:0; padding:6px 4px; text-align:center; font-size:16px; }
@media (max-width:480px) {
  .settings { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
  .settings label { justify-content:space-between; }
}
#needMsg { margin:6px 0; font-size:.85rem; }
.card-panel h3 { margin:12px 0 6px; }
.cardlist { max-height:200px; }
/* Home layout: desktop = join + settings on the left, cube editor on the right; mobile = join, cube, settings */
#home { grid-template-areas: "join" "cube" "settings" "err"; }
#joinPanel { grid-area: join; } #cubePanel { grid-area: cube; } #settingsPanel { grid-area: settings; } #homeErr { grid-area: err; }
#home .card-panel { margin-bottom:0; }
@media (min-width: 800px) {
  #home { grid-template-columns: 1fr 1.4fr; grid-template-areas: "join cube" "settings cube" "err cube"; grid-template-rows: auto auto 1fr; }
}
#home { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { #home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }

/* Expanded card viewer: full-screen overlay, big touch targets */
body.noscroll { overflow:hidden; }
.viewer { position:fixed; inset:0; z-index:30; background:rgba(8,9,12,.94); display:flex; flex-direction:column; padding:max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
.vtop { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:0 6px 8px; font-weight:600; }
.vtop #vTitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vstage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; }
.vcard { height:100%; max-height:min(100%, 760px); aspect-ratio:488/680; max-width:calc(100vw - 140px); display:flex; align-items:center; justify-content:center; border-radius:4.5% / 3.5%; border:3px solid transparent; }
.vcard img { width:100%; height:100%; object-fit:contain; border-radius:4.5% / 3.5%; display:block; }
.vcard.selected { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent); }
.vfallback { background:var(--panel); border-radius:14px; padding:24px; text-align:center; width:100%; }
.vnav { width:56px; height:96px; font-size:40px; line-height:1; padding:0; background:#2a2e38cc; border-radius:12px; flex:none; }
.vactions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding-top:10px; }
.vactions button { min-height:52px; min-width:120px; font-size:17px; border-radius:12px; }
@media (max-width:600px) {
  .vcard { max-width:100%; width:100%; height:auto; }
  .vnav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:72px; font-size:32px; z-index:2; background:#000a; }
  #vPrev { left:0; } #vNext { right:0; }
  .vactions { display:grid; grid-template-columns:1fr 1fr; }
  .vactions button { min-width:0; width:100%; }
  .vactions button.hidden + button, .vactions > :only-child { grid-column:auto; }
}

/* Double-click/tap selection in the pack grid */
.mtg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.mtg.selected { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent), 0 0 18px #e0a52699; }
.mtg.selected::after { content:'✓'; position:absolute; left:6px; top:6px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#1a1300; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px #000a; }
.pickbar { position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; gap:12px; align-items:center; justify-content:center; padding:10px 14px max(10px, env(safe-area-inset-bottom)); background:#0f1115f2; border-top:1px solid #2a2e38; }
.pickbar .pickhint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pickbar button { min-height:48px; padding:10px 22px; font-size:16px; flex:none; }
#draft.has-pickbar { padding-bottom:80px; }

/* ---------- shared: context menu, modal, toast, pips ---------- */
.small { font-size:.8rem; }
.ctxmenu { position:fixed; z-index:50; min-width:200px; max-width:300px; max-height:80vh; overflow-y:auto; background:#1e2129; border:1px solid #3a3f4c; border-radius:10px; padding:4px; box-shadow:0 8px 30px #000a; }
.ctxmenu button { display:block; width:100%; text-align:left; border:none; background:transparent; padding:8px 10px; font-size:14px; border-radius:6px; }
.ctxmenu button:hover:not(:disabled) { background:#2f3440; }
.ctxmenu hr { border:none; border-top:1px solid #333845; margin:4px 0; }
.ctx-title { padding:6px 10px; font-weight:700; color:var(--accent); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctxmenu.sheet { left:0 !important; right:0; bottom:0; top:auto !important; max-width:none; border-radius:14px 14px 0 0; padding-bottom:max(8px, env(safe-area-inset-bottom)); }
.ctxmenu.sheet button { padding:13px 14px; font-size:16px; }
.modal { position:fixed; inset:0; z-index:200; background:#000b; display:flex; align-items:center; justify-content:center; padding:12px; }
.modal-box { background:var(--panel); border-radius:12px; padding:16px; width:min(720px, 100%); max-height:90vh; overflow-y:auto; }
.modal-box h3 { margin-top:0; }
.chk { display:inline-flex; align-items:center; gap:4px; margin:0 8px 0 0; color:var(--text); }
.chk input { width:auto; margin:0; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(30px); opacity:0; transition:.2s; background:#3a1d1f; color:#fff; padding:10px 16px; border-radius:10px; z-index:60; pointer-events:none; }
.toast.on { opacity:1; transform:translateX(-50%); }
.pip { display:inline-flex; width:18px; height:18px; border-radius:50%; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#111; margin-left:2px; vertical-align:middle; }
.pip-W { background:#f8f3d6; } .pip-U { background:#5aa2e0; } .pip-B { background:#9a8b94; } .pip-R { background:#e46a4f; } .pip-G { background:#4fae6e; }
#playPanel { grid-area: play; }
#home { grid-template-areas: "join" "play" "cube" "settings" "err"; }
@media (min-width: 800px) { #home { grid-template-areas: "join cube" "play cube" "settings cube" "err cube"; grid-template-rows: auto auto auto 1fr; } }
#playPanel p { margin:0 0 6px; }
#playPanel select, #gameLobby select { width:auto; padding:6px; font-size:15px; }

/* ---------- deck builder ---------- */
.db-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.db-head input { width:auto; flex:1; min-width:160px; margin:0; }
.db-head select { width:auto; flex:none; max-width:220px; }
.db-stats { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; background:var(--panel); border-radius:10px; padding:8px 12px; }
.basics { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.basics label { display:flex; align-items:center; gap:4px; margin:0; font-weight:700; color:var(--text); }
.basics input { width:3.6em; margin:0; padding:5px; text-align:center; }
.curve { display:flex; gap:4px; align-items:flex-end; height:58px; }
.curve .bar { width:22px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
.curve .bar span { width:100%; background:var(--accent); border-radius:3px 3px 0 0; min-height:1px; }
.curve .bar b { position:absolute; top:-2px; font-size:10px; }
.curve .bar i { font-style:normal; font-size:10px; color:var(--muted); }
.mtg.offid { outline:2px dashed var(--bad); }

/* ---------- tabletop ---------- */
#game { --cw: 66px; --ch: calc(var(--cw) * 1.395); }
main:has(#game:not(.hidden)) { max-width:none; padding:6px; }
.gtop { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:4px 2px 8px; }
.gturn { font-size:.95rem; }
.phases { display:flex; gap:2px; flex-wrap:wrap; }
.phases .ph { padding:4px 8px; font-size:12px; border-radius:6px; background:#22262f; }
.phases .ph.on { background:var(--accent); color:#1a1300; font-weight:700; }
.gtools { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.gtools button { padding:6px 10px; font-size:14px; }
.logtoggle { display:none; }
.gmain { display:grid; grid-template-columns: 1fr 260px; gap:8px; align-items:start; }
.glog { background:var(--panel); border-radius:10px; padding:6px; position:sticky; top:56px; display:flex; flex-direction:column; height:calc(100vh - 120px); }
.loglist { flex:1; overflow-y:auto; font-size:12.5px; line-height:1.35; }
.le { padding:3px 4px; border-bottom:1px solid #262a33; }
.le.mine { color:#d8c79a; } .le.chat { color:#9fd0ff; } .le.warn { color:var(--bad); font-weight:700; }
.glog form { margin:6px 0 0; } .glog input { margin:0; padding:6px; font-size:14px; } .glog button { padding:6px 10px; }
.gboard { display:flex; flex-direction:column; gap:8px; min-width:0; }
.parea { background:#191c23; border:1px solid #262a33; border-radius:10px; padding:6px; }
.parea.active { border-color:#6b5520; box-shadow: inset 0 0 0 1px #6b5520; }
.parea.conceded { opacity:.55; }
.phead { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:2px 4px 6px; }
.parea.mine .phead { padding:6px 4px; }
.pname { font-weight:700; }
.life { display:inline-flex; align-items:center; gap:4px; }
.life button { padding:2px 10px; font-size:16px; }
.lifeval { font-size:1.35rem; min-width:2.2ch; text-align:center; cursor:pointer; }
.poison { cursor:pointer; color:#a3d977; }
.cmddmg { background:#2a2e38; border-radius:999px; padding:1px 8px; font-size:12px; }
.cmddmg.lethal, .warn { background:#5a1f22; color:#ffb3b3; border-radius:999px; padding:1px 8px; font-size:12px; font-weight:700; }
.prow { display:flex; gap:8px; }
.bf { position:relative; flex:1; min-height:calc(var(--ch) * 2 + 24px); background:#14171d; border-radius:8px; border:1px dashed #2a2e38; overflow:hidden; }
.parea.mine .bf { min-height:calc(var(--ch) * 2.4 + 24px); }
.piles { display:flex; flex-direction:column; flex-wrap:wrap; gap:4px; align-content:flex-start; max-height:calc(var(--ch) * 2.6 + 24px); }
.pile { width:calc(var(--cw) * 0.8 + 8px); cursor:pointer; text-align:center; }
.pile-card { width:calc(var(--cw) * 0.8); height:calc(var(--ch) * 0.8); margin:0 auto; border-radius:5px; overflow:hidden; background:#22262f; touch-action:none; }
.pile-card img { width:100%; height:100%; object-fit:cover; display:block; }
.pile-card .empty { width:100%; height:100%; border:1px dashed #3a3f4c; border-radius:5px; }
.pile-label { font-size:10.5px; overflow-wrap:anywhere; color:var(--muted); line-height:1.2; }
.pile-label b { color:var(--text); }
.cardback { width:100%; height:100%; border-radius:5px; background: radial-gradient(circle at 50% 45%, #c08a3e 0 18%, transparent 19%), radial-gradient(ellipse at center, #5a3a22, #2b1a10 70%); border:3px solid #1a1009; box-sizing:border-box; }
.hand { display:flex; gap:4px; overflow-x:auto; min-height:calc(var(--ch) + 8px); padding:4px; background:#14171d; border-radius:8px; align-items:center; }
.hand .gcard { position:relative; flex:none; }
.gcard { position:absolute; width:var(--cw); height:var(--ch); border-radius:5px; background:#2a2e38; cursor:grab; user-select:none; touch-action:none; transition: transform .12s; box-shadow:0 1px 4px #0008; }
.gcard img { width:100%; height:100%; display:block; border-radius:5px; pointer-events:none; }
.gcard.tapped { transform: rotate(90deg); }
.gcard.facedown img { filter: brightness(.55) saturate(.4); }
.gcard.dragging { opacity:.35; }
.gcard.revealed { outline:2px solid #6fc1ff; }
.gcard.commander { box-shadow:0 0 0 2px #c9a34a, 0 1px 4px #0008; }
.gcard.ghost { position:fixed; z-index:70; pointer-events:none; transform: translate(-50%, -50%) scale(1.07); opacity:.95; max-width:none; box-shadow: 0 10px 24px #000c, 0 0 0 2px #f0d36b; border-radius: 6px; }
.gcard.ghost img { width:100%; height:100%; object-fit:cover; }
.gcard.ghost.tapped { transform: translate(-50%, -50%) rotate(90deg) scale(1.07); }
.gcard.big { position:relative; width:200px; height:279px; }
.tokenface { width:100%; height:100%; border-radius:5px; background:linear-gradient(160deg,#3b4252,#262a33); border:2px solid #5d6476; padding:4px; box-sizing:border-box; display:flex; flex-direction:column; font-size:10px; line-height:1.15; overflow:hidden; }
.tokenface b { font-size:11px; } .tokenface small { color:var(--muted); }
.tokenface .pt { margin-top:auto; align-self:flex-end; background:#111; padding:1px 4px; border-radius:4px; font-weight:700; }
.badges { position:absolute; left:2px; right:2px; bottom:2px; display:flex; flex-wrap:wrap; gap:2px; pointer-events:none; }
.ctr { background:#000c; color:#fff; font-size:10px; font-weight:700; border-radius:4px; padding:0 4px; }
.ctr.p1 { background:#2d6a3e; } .ctr.tax { background:#6b5520; } .ctr.fd { background:#444; } .ctr.rv { background:#1f4f73; }
.revealed { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.revealed .gcard { position:relative; --cw:44px; width:44px; height:61px; }
.zonegrid { display:flex; flex-wrap:wrap; gap:8px; }
.zonegrid .gcard { position:relative; width:110px; height:153px; }
.zonegrid .gcard.big { width:200px; height:279px; }
.peek { position:fixed; right:12px; bottom:12px; z-index:35; width:min(560px, calc(100vw - 24px)); max-height:70vh; overflow-y:auto; background:var(--panel); border:1px solid var(--accent); border-radius:12px; padding:10px; box-shadow:0 8px 30px #000c; }
.peek-list { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.peek-item { display:flex; gap:8px; align-items:center; }
.peek-item .gcard { position:relative; width:60px; height:84px; }
.peek-btns { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.peek-btns button { padding:4px 8px; font-size:13px; }
.peek-btns button.on { background:#5a1f22; }
@media (max-width: 900px) {
  #game { --cw: 50px; }
  .gmain { grid-template-columns: 1fr; }
  .glog { display:none; position:fixed; left:8px; right:8px; bottom:8px; top:auto; height:45vh; z-index:30; box-shadow:0 8px 30px #000c; }
  body.show-log .glog { display:flex; }
  .logtoggle { display:inline-block; }
  .gtools button { padding:8px 10px; }
}
@media (max-width: 520px) {
  #game { --cw: 42px; }
  .phases .ph { padding:6px 6px; font-size:11px; }
  .piles { flex-direction:row; max-height:none; }
  .prow { flex-direction:column; }
}

.homelink { color:inherit; text-decoration:none; }
@media (max-width:520px) { .pile { width:calc(var(--cw) + 14px); } .pile-label { font-size:9.5px; } }

.seats { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.seats select { width:auto; padding:4px 6px; font-size:13px; margin:0; }
.seats label { margin:0; color:var(--text); }
.seats .ap { padding:4px 8px; font-size:12px; }
.seats .ap.on { background:#2d6a3e; border-color:#2d6a3e; }
.badge.ctl { background:#6b5520; }

/* ---- game settings (collapsible) ---- */
.gsbox { margin: 6px 0; }
.gsbox summary { cursor: pointer; font-weight: 600; }
.gsbox .settings { margin-top: 6px; }
.settings label.chk { display: inline-flex; align-items: center; gap: 4px; }
.settings label.chk input { width: auto; margin: 0; }
#gsSummary { font-weight: 400; }

/* ---- pod: revealed strips, trades ---- */
.podbox { margin: 12px 0; }
.podbox:empty { display: none; }
.podbox h3 { margin: 6px 0; }
.pod-row { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.pod-name { min-width: 90px; font-weight: 600; padding-top: 6px; }
.pod-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; flex: 1; }
.pod-strip .mtg { width: 92px; flex: 0 0 auto; }
.badge.broker { background: #6b5520; }
.pod-trade { border-top: 1px solid var(--line, #333); margin-top: 6px; padding-top: 6px; }
.offer { border: 1px solid var(--line, #333); border-radius: 8px; padding: 8px; margin: 8px 0; }
.offer.open { border-color: #c9a227; }
.offer:not(.open) { opacity: .65; }
.offer-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.offer-cols > div { min-width: 0; }
.pod-log { margin-top: 6px; }
.modal.wide .modal-box { width: min(960px, 96vw); max-width: none; }
.trade-grid .pod-strip { flex-wrap: wrap; max-height: 34vh; overflow-y: auto; }
.trade-grid .mtg { width: 86px; }

/* ---- deck builder: docked panel on the right ---- */
.db-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.dock-open .db-layout { grid-template-columns: minmax(0, 1fr) 330px; }
.db-dock { position: sticky; top: 8px; align-self: start; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--panel, #1b1d24); border: 1px solid var(--line, #333); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.dock-top { display: flex; align-items: center; gap: 6px; }
.dock-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-top button { padding: 2px 8px; }
.dock-stage { display: flex; align-items: center; gap: 4px; }
.dock-card { flex: 1; min-width: 0; }
.dock-card img { width: 100%; border-radius: 4.5%; display: block; max-height: 56vh; object-fit: contain; }
.dock-stage .vnav { padding: 18px 6px; font-size: 22px; }
.dock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dock-actions button { padding: 9px 6px; }
.dock-actions #dkMove { grid-column: 1 / -1; }
#deckbuild .mtg.docked { outline: 3px solid #4da3ff; outline-offset: 1px; }
.db-session { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.timer.urgent, .clock.urgent { color: #ffb347; }
.clock { margin-left: 8px; font-variant-numeric: tabular-nums; }
.clock.over { color: #ff6b6b; font-weight: 700; }
#deckbuild.locked #dbBasics, #deckbuild.locked #dbSuggest, #deckbuild.locked #dbAllMain, #deckbuild.locked #dbAllSide { pointer-events: none; opacity: .5; }
.handwarn { align-self: center; color: #ffb347; font-size: 12px; margin-right: 6px; white-space: nowrap; }
button.handwarn { padding: 4px 8px; }
@media (max-width: 760px) {
  body.dock-open .db-layout { grid-template-columns: minmax(0, 1fr); }
  .db-dock { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 72vh; border-radius: 14px 14px 0 0; z-index: 60; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
  .dock-card img { max-height: 40vh; }
  body.dock-open #deckbuild { padding-bottom: 72vh; }
  .pod-strip .mtg { width: 72px; }
  .offer-cols { grid-template-columns: 1fr; }
}
/* compact join panel + inline host name (keeps the host screen within 1280x800 with Game settings added) */
#joinPanel { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em auto; gap: 0 8px; align-items: end; }
#joinPanel > h2, #joinPanel > :not(label):not(button) { grid-column: 1 / -1; }
#joinPanel > label { margin: 0; }
#joinPanel > button { margin: 0 0 1px; }
#settingsPanel > label { display: flex; align-items: center; gap: 8px; }
#settingsPanel > label input { flex: 1; }
#gameSettingsBox summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- card zoom ---- */
.zoombar { display: inline-flex; gap: 4px; vertical-align: middle; }
.zoombar button { padding: 4px 8px; font-size: 14px; line-height: 1; min-width: 44px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(var(--zw, 140px), 45vw), 1fr)); }
@media (max-width:480px) { .cards { grid-template-columns: repeat(auto-fill, minmax(calc(var(--zw, 140px) * .72), 1fr)); } }
.pool .col { min-width: var(--pw, 110px); width: var(--pw, 110px); }
.pod-strip .mtg { width: calc(var(--pw, 110px) * .85); }
.db-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---- responsive shell: fluid width, no horizontal scroll ---- */
html, body { max-width: 100%; overflow-x: hidden; }
main { max-width: min(100%, 2400px); padding: clamp(6px, 1vw, 16px); box-sizing: border-box; }
main:has(#home:not(.hidden)), main:has(#lobby:not(.hidden)), main:has(#gameLobby:not(.hidden)) { max-width: min(100%, 1400px); }
main:has(#done:not(.hidden)) { max-width: min(100%, 1800px); }
img { max-width: 100%; }
.card-panel, .db-stats, .db-head { min-width: 0; }
input, select, textarea { max-width: 100%; box-sizing: border-box; }
@media (min-width: 1700px) { body.dock-open .db-layout { grid-template-columns: minmax(0, 1fr) clamp(330px, 22vw, 480px); } }
@media (min-width: 761px) and (max-width: 1100px) { body.dock-open .db-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
#gsSummary { display:inline-block; max-width:calc(100% - 9em); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

/* ---- card-played spotlight (non-modal) ---- */
.spot { position: fixed; inset: 0; z-index: 45; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(8px, 3vw, 48px) 24px; }
.spot-card { pointer-events: auto; cursor: pointer; width: clamp(200px, 22vw, 340px); background: #14161cf0; border: 2px solid #c9a227; border-radius: 14px; padding: 10px; box-shadow: 0 12px 40px #000c; animation: spotIn .18s ease-out; }
.spot-card img { width: 100%; display: block; border-radius: 4.5% / 3.5%; }
.spot-card .vfallback { aspect-ratio: 488/680; }
.spot-label { font-size: 15px; margin: 0 2px 8px; line-height: 1.3; }
.spot-tools { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.spot-tools button { padding: 3px 8px; }
.spot-tools button.on { background: #c9a227; color: #111; }
.spot-q { color: var(--muted); font-size: 13px; }
@keyframes spotIn { from { transform: translateX(30px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.spot-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 6px; z-index: 46; pointer-events: none; background: #0006; }
.spot-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #c9a227, #f0d36b); }
.spot-bar.pinned span { background: #4da3ff; }
@media (max-width: 600px) { .spot { justify-content: center; align-items: flex-start; padding-top: 60px; } .spot-card { width: min(62vw, 260px); } }

/* ---- battlefield grid layout (public/board-layout.js) ---- */
.bf { min-height: 0; transition: height .25s ease; }
.parea.mine .bf { min-height: 0; }
.bf .gcard { width: var(--cw); height: var(--ch); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, transform .12s; }
.bf .gcard.noanim { transition: none; }
.bf .gcard .ctr { font-size: clamp(8px, calc(var(--cw) * .14), 12px); }

/* ---- multi-player table: 2x2 (4p), 2 top + me full width (3p) ---- */
@media (min-width: 700px) {
  .gboard.n4 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"o1 o2" "me o3"; gap:8px; align-items:stretch; }
  .gboard.n3 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"o1 o2" "me me"; gap:8px; align-items:stretch; }
  .gboard.n3 .parea, .gboard.n4 .parea { min-width:0; display:flex; flex-direction:column; }
  .gboard.n4 .parea .pile, .gboard.n3 .parea.opp .pile { width:calc(var(--pw-pile, 46px) + 6px); }
  .gboard.n4 .parea .pile-card, .gboard.n3 .parea.opp .pile-card { width:var(--pw-pile, 46px); height:calc(var(--pw-pile, 46px) * 1.395); }
}
.gboard { position:relative; }
.gutter { position:absolute; z-index:40; touch-action:none; }
.gutter::after { content:''; position:absolute; background:#3a3f4b; border-radius:3px; opacity:.0; transition:opacity .15s; }
.gutter:hover::after, .gutter.drag::after { opacity:1; background:var(--accent); }
.gutter-h { height:10px; cursor:row-resize; } .gutter-h::after { left:40%; right:40%; top:3px; height:4px; }
.gutter-v { width:10px; cursor:col-resize; } .gutter-v::after { top:40%; bottom:40%; left:3px; width:4px; }
@media (pointer:coarse) { .gutter::after { opacity:.6; } .gutter-h { height:18px; } .gutter-v { width:18px; } }
@media (min-width: 700px) {
  /* in the 2x2/3p grid the side piles never make an area taller than its battlefield: they wrap into columns */
  .gboard.n3 .piles, .gboard.n4 .piles { height:0; min-height:100%; max-height:none; overflow:hidden; flex-direction:column; flex-wrap:wrap; }
}

/* ---- pregame panel ---- */
.pregame { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:60; width:min(620px, calc(100vw - 16px)); max-height:calc(100vh - 80px); overflow:auto; background:#1d212aee; border:1px solid var(--accent); border-radius:12px; box-shadow:0 10px 40px #000c; padding:8px 12px; backdrop-filter:blur(4px); }
.pregame.min .pg-body { display:none; }
.pg-head { display:flex; align-items:center; gap:8px; } .pg-min { margin-left:auto; padding:2px 10px; }
.pg-step { border-top:1px solid #2c313c; padding:6px 0; } .pg-step h4 { margin:2px 0 4px; font-size:13px; color:var(--accent); }
.pg-roll span { margin-right:10px; } .pg-roll span.win b { color:var(--accent); }
.pg-hand { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; } .pg-hand .mtg { width:64px; cursor:pointer; } .pg-hand .mtg.selected { outline:3px solid var(--accent); }
.pg-table { width:100%; font-size:13px; margin-top:6px; border-collapse:collapse; } .pg-table td { padding:3px 4px; border-bottom:1px solid #262a33; } .pg-table tr.ready td:last-child { color:#7fd18b; font-weight:700; }
body.in-pregame #gPass, body.in-pregame #gUntapAll, body.in-pregame #gToken { opacity:.4; pointer-events:none; }

/* ---- priority windows ---- */
.pstack { position:fixed; right:10px; top:96px; z-index:55; width:min(330px, calc(100vw - 20px)); max-height:45vh; overflow:auto; background:#1d212af0; border:1px solid #5a4a1c; border-radius:10px; padding:6px 8px; box-shadow:0 8px 30px #000b; font-size:13px; }
.ps-head { font-weight:700; margin-bottom:4px; }
.ps-item { display:flex; gap:8px; padding:4px 0; border-top:1px solid #2c313c; opacity:.7; } .ps-item.top { opacity:1; }
.ps-card { width:40px; flex:none; } .ps-card img { width:40px; border-radius:3px; display:block; } .ps-fd { width:40px; height:56px; border-radius:3px; background:#3a2f55; display:grid; place-items:center; font-weight:700; }
.ps-status { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.chip { padding:1px 6px; border-radius:9px; background:#2a2e38; font-size:12px; } .chip.passed { background:#1f3b26; color:#8fe0a0; } .chip.holding { background:#4a1f1f; color:#ff9c9c; } .chip.deciding { background:#3d3418; color:#f0d27a; }
.chip .tiny { padding:0 5px; font-size:11px; margin-left:3px; }
.prio-ov { position:absolute; inset:auto 0 0 0; top:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#0008; pointer-events:none; }
.prio-ov.holding { background:transparent; justify-content:flex-end; padding-bottom:8px; }
.prio-q { background:#14171dee; padding:6px 12px; border-radius:8px; font-size:15px; pointer-events:auto; }
.prio-btns { display:flex; gap:14px; pointer-events:auto; }
.prio-btns button { font-size:22px; font-weight:800; padding:14px 34px; border-radius:12px; border:0; color:#fff; box-shadow:0 6px 18px #000a; }
.prio-pass { background:#2f9e47; } .prio-pass:hover { background:#38b552; }
.prio-hold { background:#c93a3a; } .prio-hold:hover { background:#de4646; }
.prio-ov.holding .prio-btns button { font-size:17px; padding:9px 22px; }
body.prio-wait #gPass, body.prio-wait #gUntapAll { opacity:.4; pointer-events:none; }
#spot.held, #spot.held * { pointer-events:none !important; } /* held for a priority window: never blocks drops onto the board */

/* ---- hand strip: fixed across the bottom of the screen, cards peek ~20% ---- */
#gHand.handstrip { position:fixed; left:0; right:0; bottom:6px; height:var(--peek, 30px); z-index:45; background:linear-gradient(#0000, #0009); border-radius:0; padding:0; overflow:visible; display:block; min-height:0; pointer-events:none; }
#game.hidden #gHand { display:none; }
#gHand .gcard .badges { top:2px; bottom:auto; } /* revealed badge visible on the peeking part */
#gHand .handwarn { position:absolute; left:8px; bottom:calc(var(--peek) + 4px); pointer-events:auto; }
#gHand .handempty { position:absolute; left:50%; transform:translateX(-50%); bottom:4px; pointer-events:none; }
#game:not(.hidden) { padding-bottom:var(--hand-reserve, 0px); }
.toast { bottom:calc(var(--hand-reserve, 0px) + 24px); } /* stay above the hand strip */

/* hand strip v2: higher peek overlapping the board, expand view */
#gHand.expanded { z-index:47; }
#gHand.expanded .handwarn { bottom:calc(50vh + var(--hh) / 2 + 30px); }
#gHandBack.hidden, #gHandBtn.hidden { display:none; }
#gHandBtn { position:fixed; left:8px; bottom:calc(var(--hand-reserve, 40px) - 4px); z-index:48; padding:4px 8px; border-radius:8px; font-size:16px; background:#222833; border:1px solid #445; color:#fff; box-shadow:0 2px 8px #000a; }
#gHandBtn span { font-size:11px; margin-left:2px; }
#gHandBtn.on { background:var(--accent); color:#111; }
#gHandBtn.on span { display:inline-block; transform:rotate(180deg); }
.phase-banner { position:fixed; transform:translate(-50%, -50%); z-index:44; pointer-events:none; opacity:0; transition:opacity .25s, letter-spacing .4s;
  font-family:system-ui, -apple-system, 'Segoe UI', Inter, Roboto, sans-serif; font-size:clamp(22px, 3vw, 40px); font-weight:200; text-transform:uppercase;
  letter-spacing:.32em; color:#f2f2f2e6; padding:.35em 1.2em .35em 1.52em; background:linear-gradient(90deg, #0000, #0007 25%, #0007 75%, #0000);
  border-top:1px solid #ffffff22; border-bottom:1px solid #ffffff22; white-space:nowrap; }
.phase-banner.show { opacity:1; }
.phase-banner.turn { color:#e9d9a6; }


/* ---- hand cards: GPU-only hover (transform/opacity); position (bottom/left) never animates ---- */
#gHand .gcard { position:absolute; width:var(--hw); height:var(--hh); bottom:calc(var(--peek) - var(--hh)); pointer-events:auto;
  transform-origin:50% 100%; transform:rotate(var(--rot, 0deg)); transition:transform .16s ease-out; will-change:transform;
  box-shadow:0 -3px 10px #000b, 0 0 0 1px #0008; contain:layout style; backface-visibility:hidden; }
/* lift shadow + outline pre-rendered on a pseudo-element; only its opacity animates */
#gHand .gcard::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .16s;
  box-shadow:0 10px 40px #000e, 0 0 0 2px var(--accent); }
#gHand .gcard.lift::after { opacity:1; }
#gHand .gcard.lift { transform:translateY(calc(var(--peek) - var(--hh) - 8px)) scale(1.7); z-index:200 !important; }
#gHand .gcard.nb-l { transform:translateX(calc(var(--hw) * -0.35)) rotate(var(--rot, 0deg)); }
#gHand .gcard.nb-r { transform:translateX(calc(var(--hw) * 0.35)) rotate(var(--rot, 0deg)); }
#gHand .gcard.dragging { transform:none; transition:none; }
#gHand.expanded .gcard { bottom:calc(50vh - var(--hh) / 2); transform:rotate(calc(var(--rot, 0deg) * 0.5)); }
#gHand.expanded .gcard.lift { transform:translateY(-14px) scale(1.15); }
#gHand.expanded .gcard.nb-l { transform:translateX(calc(var(--hw) * -0.15)); }
#gHand.expanded .gcard.nb-r { transform:translateX(calc(var(--hw) * 0.15)); }
#gHandBack { position:fixed; inset:0; background:#000c; z-index:46; } /* plain color, no backdrop-filter */
.parea { contain:layout; }
.bf { contain:layout paint; }

/* phase column beside your own board */
.phasecol { display:flex; flex-direction:column; gap:4px; flex:none; width:68px; justify-content:center; }
.phasecol .ph { padding:6px 4px; font-size:12px; border-radius:7px; background:#222833; border:1px solid #333a47; color:#ddd; }
.phasecol .ph.on { background:var(--accent); color:#111; font-weight:700; border-color:var(--accent); }
.phasecol .ph.pass { margin-top:6px; background:#3a2f12; border-color:#6b5520; color:#f0d36b; }
.phasecol.off { opacity:.4; }
.phasecol .ph:disabled { cursor:default; }
@media (max-width:700px) { .phasecol { width:52px; } .phasecol .ph { font-size:10px; padding:4px 2px; } }

/* ================= Allspark branding ================= */
header h1 a.homelink { display:inline-flex; align-items:center; gap:10px; }
header .logo { width:34px; height:34px; filter:drop-shadow(0 0 6px #3aa0ff66); }
.wordmark { font-family:system-ui, -apple-system, 'Segoe UI', Inter, Roboto, sans-serif; font-weight:300; letter-spacing:.34em; font-size:1.05rem;
  background:linear-gradient(180deg, #ffffff, #b9c3cf 55%, #8d98a6); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px #3aa0ff33; }

/* ================= Home: sections grid (room for future sections) ================= */
#home:not(.hidden) { display:block; }
.home-grid { display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 900px) { .home-grid { grid-template-columns:minmax(0, 1fr) minmax(240px, 300px); align-items:start; } }
.section-title { font-family:system-ui, sans-serif; font-weight:300; letter-spacing:.22em; text-transform:uppercase; font-size:.95rem; color:#aab6c4; margin:0 0 10px; }
.play-grid { display:grid; gap:12px; grid-template-columns:minmax(0, 1fr); grid-template-areas:"join" "settings" "play"; }
@media (min-width: 800px) { .play-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas:"join settings" "play settings"; align-items:start; } }
.cube-pick { gap:8px; align-items:center; } .cube-pick label { display:flex; align-items:center; gap:6px; margin:0; }
.cube-pick #hostName { width:9em; } .cube-pick .grow { flex:1; min-width:0; } .cube-pick select { flex:1; min-width:0; width:100%; }
.grow { flex:1; }
.home-side { display:grid; gap:12px; align-content:start; }
.feature-card { display:grid; grid-template-columns:64px 1fr; grid-template-areas:"icon title" "icon desc" "icon go"; gap:2px 14px; padding:18px; border-radius:14px; text-decoration:none; color:inherit;
  background:radial-gradient(120% 140% at 0% 0%, #1c3550 0%, #161a22 55%); border:1px solid #2c4a6b; box-shadow:0 0 0 1px #0004, 0 10px 30px #0006, inset 0 0 30px #3aa0ff14; transition:transform .15s, box-shadow .15s; }
.feature-card:not(.soon):hover { transform:translateY(-2px); box-shadow:0 0 0 1px #3aa0ff55, 0 14px 34px #0008, inset 0 0 40px #3aa0ff22; }
.feature-card .fc-icon { grid-area:icon; width:64px; height:64px; align-self:center; filter:drop-shadow(0 0 10px #3aa0ff66); }
.fc-title { grid-area:title; font-size:1.25rem; font-weight:600; } .fc-desc { grid-area:desc; font-size:.86rem; color:#b8c2ce; } .fc-go { grid-area:go; color:#6cc4ff; font-size:.9rem; margin-top:4px; }
.feature-card.soon { grid-template-columns:1fr; grid-template-areas:"title" "desc"; background:#14171d; border-style:dashed; border-color:#2a2e38; box-shadow:none; opacity:.7; padding:12px 16px; }
.feature-card.soon .fc-title { font-size:1rem; font-weight:400; }

/* ================= Cube Manager ================= */
main:has(#cubemgr:not(.hidden)) { max-width:100%; }
.cm-head { display:flex; align-items:center; gap:14px; margin-bottom:10px; } .cm-head h2 { margin:0; font-weight:400; letter-spacing:.06em; }
.cm-back { color:#9fb4c9; text-decoration:none; } .cm-back:hover { color:#fff; }
.cm-layout { display:grid; gap:12px; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 900px) { .cm-layout { grid-template-columns:320px minmax(0, 1fr); align-items:start; } body.cm-dock-open .cm-layout { grid-template-columns:300px minmax(0, 1fr) 320px; } }
.cm-left { display:grid; gap:10px; align-content:start; } .cm-left .card-panel { margin:0; } .cm-left h3 { margin:0 0 6px; font-size:1rem; }
#cubePanel .row:has(#savedCubes) { display:none; }
#cubePanel .cardlist { max-height:22vh; }
.cm-list { list-style:none; margin:0 0 8px; padding:0; max-height:24vh; overflow:auto; }
.cm-list li { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer; }
.cm-list li:hover { background:#20252f; } .cm-list li.on { background:#1d3247; box-shadow:inset 2px 0 0 #3aa0ff; }
.cm-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.cm-tools label { display:flex; gap:4px; align-items:center; margin:0; } .cm-tools select { width:auto; } #cmSearch { width:16em; }
.cm-toggles { display:inline-flex; gap:2px; }
.cm-tg { padding:3px 7px; font-size:12px; border-radius:6px; opacity:.45; } .cm-tg.on { opacity:1; box-shadow:inset 0 0 0 1px #6cc4ff88; }
.col-W { background:#f3ecd2; color:#222; } .col-U { background:#2d6fb8; color:#fff; } .col-B { background:#3a3340; color:#fff; } .col-R { background:#c2412d; color:#fff; } .col-G { background:#2f7d47; color:#fff; } .col-M { background:linear-gradient(90deg, #d4a93c, #c2412d, #2d6fb8); color:#fff; } .col-C { background:#9aa3ad; color:#111; } .col-L { background:#6b5a3e; color:#fff; }
.cm-stats { display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:#14171d; border:1px solid #262a33; border-radius:10px; padding:8px 12px; margin-bottom:8px; }
.cm-stat { padding-right:12px; border-right:1px solid #262a33; } .cm-stat:last-child { border:0; }
.cm-pips { display:flex; gap:3px; flex-wrap:wrap; } .cm-pip { padding:1px 6px; border-radius:5px; font-size:12px; }
.cm-curve { display:flex; gap:4px; align-items:flex-end; height:52px; } .cm-curve span { display:flex; flex-direction:column; align-items:center; font-size:10px; color:#9aa; width:16px; justify-content:flex-end; height:100%; }
.cm-curve i { display:block; width:12px; background:linear-gradient(#6cc4ff, #2d6fb8); border-radius:3px 3px 0 0; margin-bottom:2px; }
.cm-grid { max-height:calc(100vh - 230px); overflow:auto; padding-right:4px; contain:layout paint; }
.cm-ghead { margin:10px 0 6px; font-weight:500; border-bottom:1px solid #262a33; padding-bottom:3px; }
.cm-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--cmw, 150px), 1fr)); gap:6px; }
.cm-card { aspect-ratio:488/680; border-radius:4.5%; overflow:hidden; cursor:pointer; background:#1a1d24; outline:2px solid transparent; transition:transform .12s; }
.cm-card:hover { transform:translateY(-2px); } .cm-card.sel { outline-color:#6cc4ff; }
.cm-card img { width:100%; height:100%; display:block; object-fit:cover; }
.cm-card .vfallback { padding:8px; font-size:12px; height:100%; }
.cm-dock { position:sticky; top:60px; } .cm-info { margin:6px 0; color:#c8d0da; } .cm-oracle { white-space:pre-wrap; margin-top:4px; color:#9fb0c0; max-height:16vh; overflow:auto; }
@media (max-width: 899px) { .cm-dock { position:fixed; left:0; right:0; bottom:0; top:auto; max-height:70vh; overflow:auto; z-index:30; border-radius:14px 14px 0 0; } .cm-grid { max-height:none; } }
#cubemgr #cubePanel { grid-area:auto; margin:0; }
/* art picker */
.ap-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; max-height:62vh; overflow:auto; margin:8px 0; }
.ap-item { display:flex; flex-direction:column; padding:4px; background:#181b22; border:2px solid transparent; border-radius:8px; text-align:left; color:inherit; }
.ap-item:hover { border-color:#3aa0ff88; } .ap-item.on { border-color:var(--accent); }
.ap-item img { width:100%; border-radius:5%; display:block; aspect-ratio:146/204; object-fit:cover; }
.ap-cap { font-size:11px; line-height:1.3; margin-top:3px; }
.cm-card.art { box-shadow:0 0 0 1px #3aa0ff66; }
.cm-artrow { margin:4px 0 0; }
/* ---- cube selection grid ---- */
main:has(#cubesel:not(.hidden)) { max-width:100%; }
.cs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.cs-tile { display:flex; flex-direction:column; background:#171a21; border:1px solid #2a2f3a; border-radius:14px; overflow:hidden; cursor:pointer; text-align:left; color:inherit; padding:0;
  transition:transform .15s, box-shadow .15s, border-color .15s; min-height:300px; }
.cs-tile:hover, .cs-tile:focus-visible { transform:translateY(-3px); border-color:#3aa0ff88; box-shadow:0 12px 30px #0008, 0 0 0 1px #3aa0ff44; outline:none; }
.cs-fan, .cs-empty { position:relative; height:190px; background:radial-gradient(120% 100% at 50% 0%, #1e3148, #12151b 70%); overflow:hidden; }
.cs-fan img { position:absolute; width:118px; aspect-ratio:488/680; border-radius:6px; left:50%; bottom:-34px; box-shadow:0 6px 16px #000b;
  transform-origin:50% 120%; transform:translateX(-50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg)); }
.cs-fan.n1 { --n:1; } .cs-fan.n2 { --n:2; } .cs-fan.n3 { --n:3; } .cs-fan.n4 { --n:4; }
.cs-empty { display:flex; align-items:center; justify-content:center; } .cs-empty img { width:96px; filter:drop-shadow(0 0 14px #3aa0ff66); }
.cs-meta { padding:10px 14px 12px; display:grid; gap:4px; }
.cs-name { font-size:1.1rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-sub { font-size:.88rem; color:#b8c2ce; }
.cs-bar { display:flex; height:7px; border-radius:4px; overflow:hidden; background:#262a33; } .cs-bar i { display:block; } .cs-bar .col-none { background:#2a2e38; }
.cs-add { align-items:center; justify-content:center; gap:8px; border-style:dashed; background:#14171d; font-size:1.05rem; color:#9fb4c9; }
.cs-plus { font-size:3rem; line-height:1; color:#6cc4ff; }
.cm-title { font-size:1.25rem; font-weight:500; background:transparent; border:1px solid transparent; padding:4px 8px; width:min(26em, 50vw); }
.cm-title:hover, .cm-title:focus { border-color:#3a4150; background:#14171d; }
@media (min-width: 900px) { .cm-layout { grid-template-columns:300px minmax(0, 1fr); } }

/* ================= ability editor ================= */
.abed { position:fixed; inset:0; z-index:95; background:#000b; display:flex; align-items:center; justify-content:center; }
.abed.hidden { display:none; }
.abed-box { width:min(1400px, 98vw); height:min(900px, 96vh); background:#14171d; border:1px solid #2c3442; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px #000c; position:relative; }
.abed-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #262a33; background:#171b22; }
.abed-body { flex:1; min-height:0; display:grid; grid-template-columns:230px minmax(0, 1fr) 300px; }
.abed-palette, .abed-work, .abed-ref { overflow:auto; padding:10px; }
.abed-palette { border-right:1px solid #262a33; } .abed-ref { border-left:1px solid #262a33; }
.abed-palette summary { font-weight:600; margin:6px 0 4px; cursor:pointer; color:#aab6c4; }
.ae-blocks { display:flex; flex-wrap:wrap; gap:4px; }
.ae-pb, .ae-blk { border-radius:8px; padding:5px 9px; font-size:12.5px; color:#fff; user-select:none; touch-action:none; }
.ae-pb { cursor:grab; box-shadow:inset 0 -2px 0 #0004; } .ae-pb:hover { filter:brightness(1.15); }
.cat-kind { background:#5b4bb5; } .cat-trigger { background:#c27a1a; } .cat-cost { background:#a0384f; } .cat-effect { background:#2d73b8; } .cat-target { background:#2f8f6a; } .cat-value { background:#6b6f7a; }
.ae-ghost { position:fixed; z-index:200; pointer-events:none; opacity:.9; box-shadow:0 8px 20px #000a; }
.ae-ab { border:1px solid #2c3442; border-left:4px solid #5b4bb5; border-radius:10px; padding:8px 10px; margin-bottom:10px; background:#181c24; }
.ae-ab.sel { border-color:#6cc4ff88; box-shadow:0 0 0 1px #6cc4ff55; }
.ae-ab header { display:flex; gap:6px; align-items:center; margin-bottom:6px; } .ae-ab header button, .ae-tools button { padding:1px 6px; font-size:11px; }
.ae-slot { display:flex; flex-wrap:wrap; gap:5px; align-items:center; min-height:34px; padding:5px; border:1px dashed #333b48; border-radius:8px; margin:4px 0; }
.ae-effects { flex-direction:column; align-items:stretch; }
.ae-lbl { font-size:11px; color:#8b97a6; text-transform:uppercase; letter-spacing:.08em; width:58px; }
.ae-hint { color:#5d6878; font-size:12px; }
.ae-over { outline:2px solid #6cc4ff; background:#6cc4ff14; }
.ae-blk { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .ae-blk.sel { box-shadow:0 0 0 2px #fff8; }
.ae-blk input, .ae-blk select, .ae-ab header select { padding:2px 4px; font-size:12px; width:auto; background:#0e1116; color:#fff; border:1px solid #fff3; border-radius:5px; }
.ae-num { width:3.2em; text-align:center; } .ae-f { display:inline-flex; gap:3px; align-items:center; margin:0; font-size:11px; }
.ae-tgt { border-radius:6px; padding:1px; background:#2f8f6a; }
.ae-tools { margin-left:auto; display:inline-flex; gap:2px; }
.ae-prev { margin-top:6px; font-style:italic; color:#e8e1c8; } .ae-err { color:#ff9c8a; font-size:12px; margin:2px 0; }
.ae-card img { width:100%; border-radius:4.5%; } .ae-oracle { white-space:pre-wrap; font-size:12.5px; margin:6px 0; color:#c8d0da; background:#0e1116; border-radius:6px; padding:6px; }
.ae-preview { padding-left:18px; font-style:italic; color:#e8e1c8; font-size:13px; } .ae-preview li { margin-bottom:4px; }
.ae-sugg { background:#3a2f12; color:#f0d36b; border-radius:6px; padding:2px 8px; font-size:12px; }
.ae-msg { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:#3a1d1f; padding:8px 14px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; }
.ae-msg.on { opacity:1; }
.ae-empty { padding:20px; }
@media (max-width: 900px) { .abed-body { grid-template-columns:1fr; grid-auto-rows:auto; overflow:auto; } .abed-palette, .abed-ref { border:0; } }
.cm-card .ab-badge { position:absolute; right:4px; top:4px; background:#5b4bb5; color:#fff; border-radius:6px; font-size:11px; padding:1px 5px; box-shadow:0 1px 4px #000a; }
.cm-card { position:relative; }

/* ================= in-game abilities ================= */
.abrun { position:fixed; left:50%; bottom:calc(var(--hand-reserve, 0px) + 110px); transform:translateX(-50%); z-index:58; background:#1b1830f2; border:1px solid #6d5bd8; border-radius:12px; padding:10px 14px; max-width:min(560px, 92vw); box-shadow:0 10px 30px #000a; }
.abrun.hidden, .abtarget.hidden { display:none; }
.abrun .ar-item { display:flex; gap:10px; align-items:center; } .abrun .ar-item + .ar-item { margin-top:8px; padding-top:8px; border-top:1px solid #ffffff1a; }
.abrun img { width:54px; border-radius:4px; } .abrun .ar-text { font-style:italic; color:#e8e1c8; } .abrun .ar-btns { display:flex; gap:6px; margin-left:auto; }
.abrun .ar-wait { color:#aab; font-size:12.5px; }
.abtarget { position:fixed; left:50%; bottom:calc(var(--hand-reserve, 0px) + 110px); transform:translateX(-50%); z-index:59; background:#123a2c; border:1px solid #2f8f6a; border-radius:10px; padding:8px 14px; box-shadow:0 10px 30px #000a; display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:92vw; }
.gcard.tgt-ok { outline:3px solid #36d399; outline-offset:1px; cursor:crosshair; animation:tgtpulse 1s infinite alternate; }
.phead.tgt-ok, .pinfo.tgt-ok { outline:2px solid #36d399; border-radius:8px; cursor:crosshair; }
@keyframes tgtpulse { to { outline-color:#36d39955; } }
.ctr.dmg { background:#b3261e; color:#fff; } .ctr.pump { background:#2d73b8; color:#fff; } .ctr.abl { background:#5b4bb5; color:#fff; }

body.ab-targeting #abRun { display:none; }

/* ================= profiles + stats ================= */
header { display:flex; align-items:center; gap:10px; }
.prof-chip { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; border-radius:20px; background:#1b2029; border:1px solid #2c3442; color:#e8edf3; font-size:14px; }
.prof-chip:hover { border-color:#6cc4ff88; } .pc-caret { opacity:.6; font-size:11px; }
.avatar { display:inline-block; vertical-align:middle; border-radius:50%; flex:none; }
.avatar.guest { background:#3a3f48; color:#ccd; text-align:center; font-weight:700; line-height:26px; }
.pf-hide { display:none !important; }
.pf-asname { display:inline-flex; align-items:center; gap:6px; color:#c8d0da; }
.pf-form label { display:block; margin:6px 0; } .pf-lbl { font-size:12px; color:#8b97a6; margin-top:8px; }
.pf-avatars, .pf-colors, .pf-ident { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0; }
.pf-avatars button { padding:2px; border-radius:50%; background:none; border:2px solid transparent; } .pf-avatars button.on { border-color:#fff; }
.pf-colors button { width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0; } .pf-colors button.on { border-color:#fff; }
.pf-ident button { padding:3px 8px; } .pf-ident button.on { background:#2d73b8; color:#fff; }
.pf-pin { width:7em; letter-spacing:.3em; }
.pip { display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:middle; border:1px solid #0006; margin-right:2px; }
.fc-emoji { font-size:40px; line-height:1; }
#players, #playerStats { padding:8px 4px; }
.pl-title { margin:0; font-size:20px; }
.st-table { border-collapse:collapse; width:100%; font-size:13px; }
.st-table th, .st-table td { padding:5px 8px; border-bottom:1px solid #262a33; text-align:left; }
.st-table th { color:#8b97a6; font-weight:600; position:sticky; top:0; background:#14171d; }
.st-table th.sortable { cursor:pointer; user-select:none; } .st-table th.asc::after { content:' ▲'; } .st-table th.desc::after { content:' ▼'; }
.st-table tr.clickable { cursor:pointer; } .st-table tr.clickable:hover, .cs-cards tbody tr:hover { background:#1c2230; }
.pl-table .pl-name { display:flex; align-items:center; gap:8px; }
.ps-head { display:flex; align-items:center; gap:10px; } .ps-name { font-size:20px; }
.ps-kpis { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.ps-kpis > div { background:#181c24; border:1px solid #2c3442; border-radius:10px; padding:8px 16px; text-align:center; min-width:84px; }
.ps-kpis b { display:block; font-size:22px; } .ps-kpis span { font-size:12px; color:#8b97a6; }
.ps-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:10px; }
.ps-box { background:#161a21; border:1px solid #262c37; border-radius:10px; padding:8px 10px; max-height:360px; overflow:auto; }
.ps-box h4 { margin:2px 0 6px; }
.ps-bar { display:flex; align-items:center; gap:6px; margin:4px 0; font-size:12px; } .ps-bar span { height:8px; background:#3a7fe0; border-radius:4px; display:inline-block; }
.ps-recent { padding-left:16px; margin:0; } .ps-recent li { margin:3px 0; }
.cm-tabs { display:inline-flex; gap:2px; } .cm-tabs button.on { background:#2d73b8; color:#fff; }
.cm-statsview { padding:6px 2px; } .cs-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cs-tablewrap { max-height:52vh; overflow:auto; border:1px solid #262c37; border-radius:8px; }
.cs-mini { padding-left:20px; margin:0; } .cs-mini li { margin:2px 0; cursor:default; }
.cs-hover { position:fixed; width:240px; border-radius:12px; z-index:120; pointer-events:none; box-shadow:0 10px 30px #000c; display:none; }
.narrow { width:4em; }
.gover { position:fixed; inset:0; z-index:90; background:#000a; display:flex; align-items:center; justify-content:center; }
.gover.hidden { display:none; }
.go-box { background:#161a22; border:1px solid #3a4456; border-radius:14px; padding:20px 26px; min-width:min(420px, 92vw); text-align:center; box-shadow:0 20px 60px #000c; }
.go-title { font-size:15px; color:#aab6c4; letter-spacing:.06em; } .go-res { font-size:30px; font-weight:700; margin:6px 0; color:#f0d36b; }
.go-life { margin:10px 0; } .go-box .row { justify-content:center; gap:8px; } .btn { display:inline-block; padding:6px 12px; border-radius:8px; background:#222833; color:#e8edf3; text-decoration:none; border:1px solid #3a4456; }
.pip { flex:none; } .ps-box a { color:#7cc4ff; }
.avatar.art { background-color:#222; background-repeat:no-repeat; border-radius:50%; display:inline-block; vertical-align:middle; box-shadow:0 0 0 1px #fff3; }
.pf-mi { display:inline-flex; align-items:center; gap:6px; }
.pf-artbtn { display:inline-flex; align-items:center; gap:4px; border-radius:18px !important; padding:2px 10px 2px 2px !important; border:2px solid transparent; }
.pf-artbtn.on { border-color:#fff !important; }
.pf-art { border:1px solid #2c3442; border-radius:10px; padding:8px; margin:6px 0; }
.pf-art input#pfArtQ { flex:1; }
.pf-artgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:6px; max-height:170px; overflow:auto; margin-top:6px; }
.pf-artgrid button { padding:0; border:2px solid transparent; border-radius:6px; background:#111; display:flex; flex-direction:column; font-size:10px; color:#aab; }
.pf-artgrid button.on { border-color:#6cc4ff; } .pf-artgrid img { width:100%; aspect-ratio:626/457; object-fit:cover; border-radius:4px; }
.pf-artedit { display:flex; gap:12px; align-items:center; margin-top:8px; }
.pf-artprev { cursor:grab; touch-action:none; } .pf-artctl { display:flex; flex-direction:column; gap:4px; }
#modalBody:has(#pfForm) { max-height:92vh; overflow:auto; }
/* in-person logging + history */
.fc-sub { margin-left:10px; font-size:12px; color:#9fd0ff; text-decoration:underline; cursor:pointer; }
.ip-form { max-width:1100px; } .ip-top { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:8px 0; } .ip-top .grow { flex:1; } .ip-top .grow input { width:100%; }
.ip-players td { vertical-align:middle; } .ip-pl { display:flex; align-items:center; gap:6px; } .ip-cmd { display:flex; gap:4px; } .ip-cmd input { width:190px; }
.ip-col { white-space:nowrap; } .ipK { padding:2px 4px; opacity:.35; } .ipK.on { opacity:1; background:#2d73b8; }
.ip-notes { display:block; margin:6px 0; } .ip-notes textarea { width:100%; } .ok { color:#7fd99a; }
.badge.src-online { background:#2d73b8; color:#fff; } .badge.src-mock { background:#555c66; color:#fff; } .badge.src-in-person { background:#2f8a4e; color:#fff; }
.hi-act { white-space:nowrap; } .hi-act .btn, .hi-act button { padding:2px 8px; }

/* ================= polish: roomy header on hub pages, chunky leaderboard ================= */
/* hub pages = home, cube select, players, player stats, history, log (game/draft keep the compact header) */
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header { min-height:68px; padding:8px 24px; box-sizing:border-box; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header .logo { width:46px; height:46px; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header .wordmark { font-size:1.4rem; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) .prof-chip { padding:4px 16px 4px 4px; gap:10px; font-size:16px; border-radius:26px; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) .prof-chip .pc-name { font-weight:600; }
/* compact headers elsewhere: the chip avatar stays small */
.prof-chip > .avatar { width:26px; height:26px; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) .prof-chip > .avatar { width:40px; height:40px; }
/* content: tighter top, wider */
main:has(#players:not(.hidden)), main:has(#playerStats:not(.hidden)), main:has(#history:not(.hidden)), main:has(#inperson:not(.hidden)), main:has(#search:not(.hidden)), main:has(#suggestions:not(.hidden)), main:has(#decks:not(.hidden)), main:has(#deckedit:not(.hidden)) { max-width:min(100%, 1600px); padding-top:8px; }
main:has(#home:not(.hidden)), main:has(#cubesel:not(.hidden)) { padding-top:8px; }
#players, #playerStats, #history, #inperson, #search, #suggestions { padding:0 4px; }
#players .cm-head, #playerStats .cm-head, #history .cm-head, #inperson .cm-head, #search .cm-head, #suggestions .cm-head { margin:0 0 10px; }
.ip-form { max-width:none; }
/* leaderboard */
.pl-list { display:flex; flex-direction:column; gap:8px; }
.pl-row { display:grid; grid-template-columns:44px 72px minmax(160px, 1.4fr) repeat(4, minmax(64px, 90px)) minmax(160px, 1fr); align-items:center; gap:14px;
  min-height:88px; padding:10px 18px; background:#161a21; border:1px solid #262c37; border-radius:14px; cursor:pointer; transition:background .15s, border-color .15s, transform .15s; }
.pl-row:hover, .pl-row:focus-visible { background:#1b2130; border-color:#3a4a66; transform:translateY(-1px); outline:none; }
.pl-row:nth-child(1) .pl-rank { color:#f0d36b; } .pl-row:nth-child(2) .pl-rank { color:#cfd6e0; } .pl-row:nth-child(3) .pl-rank { color:#d39b6a; }
.pl-rank { font-size:24px; font-weight:700; color:#6f7b8b; text-align:center; }
.pl-row > .avatar { width:68px !important; height:68px !important; box-shadow:0 0 0 2px #fff2, 0 4px 14px #0008; }
.pl-row > .avatar.art { background-color:#222; }
.pl-who { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pl-nm { font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pl-id .pip { width:14px; height:14px; }
.pl-stat { display:flex; flex-direction:column; align-items:center; font-size:12px; color:#8b97a6; } .pl-stat b { font-size:22px; color:#e8edf3; }
.pl-stat[data-k="wins"] b { color:#7fd99a; }
.pl-rate { display:flex; align-items:center; gap:10px; } .pl-rate b { font-size:20px; min-width:3.2em; text-align:right; }
.pl-bar { position:relative; flex:1; height:12px; background:#252b36; border-radius:6px; overflow:hidden; }
.pl-bar i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, #2f8a4e, #7fd99a); border-radius:6px; z-index:1; }
.pl-bar s { position:absolute; inset:auto auto 0 0; height:3px; background:#3a7fe0aa; text-decoration:none; } /* games played (relative) */
@media (max-width: 760px) { .pl-row { grid-template-columns:32px 56px 1fr; grid-template-rows:auto auto; gap:8px 10px; min-height:80px; }
  .pl-row > .avatar { width:56px !important; height:56px !important; } .pl-stat[data-k="losses"], .pl-stat[data-k="drafts"] { display:none; }
  .pl-stat, .pl-rate { grid-row:2; } .pl-stat[data-k="wins"] { grid-column:1 / 3; } .pl-rate { grid-column:3; } .pl-stat[data-k="games"] { display:none; } }
/* player stats header */
.ps-head { gap:18px; } .ps-head > .avatar { width:120px !important; height:120px !important; box-shadow:0 0 0 3px #fff2, 0 8px 24px #000a; }
.ps-head .ps-name { font-size:28px; }
#playerStats .cm-head { align-items:center; }
.ps-bar > .pip { height:12px; width:12px; background-clip:padding-box; } .ps-bar > span:not(.pip) { height:8px; }
.ps-bar span.pip { border-radius:50%; }
.fc-sub { display:block; margin:6px 0 0; }
.pl-row { grid-template-columns:44px 72px minmax(160px, 1.4fr) 100px repeat(4, minmax(60px, 84px)) minmax(160px, 1fr); }
.pl-fav { display:flex; gap:4px; align-items:center; justify-content:center; min-height:26px; } .pl-fav img { filter:drop-shadow(0 1px 2px #000a); }
@media (max-width: 760px) { .pl-fav { display:none; } }
@media (max-width: 600px) {
  body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header { padding:8px 10px; min-height:60px; }
  body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header .wordmark { font-size:1.05rem; letter-spacing:.2em; }
  body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) header .logo { width:36px; height:36px; }
  .prof-chip { min-width:0; } .prof-chip .pc-name { max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  header #status { font-size:0; } header #status::first-letter { font-size:14px; }
}

/* ================= master cube ================= */
.cs-tile { position:relative; } .cs-tile.master { border-color:#f0d36b88; box-shadow:0 0 0 1px #f0d36b55, 0 0 24px #f0d36b22; }
.cs-master { position:absolute; top:8px; left:8px; z-index:2; background:#f0d36b; color:#1a1408; font-weight:700; font-size:12px; padding:3px 9px; border-radius:12px; box-shadow:0 2px 8px #0008; }
#cmMaster.on { background:#f0d36b; color:#1a1408; border-color:#f0d36b; }

/* ================= animated card-sheet background (hub pages only) ================= */
html { background:var(--bg); }
body { background:transparent; }
#bgSheet { display:none; position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; opacity:0; transition:opacity 1.2s ease; contain:strict; }
body:is(:has(#home:not(.hidden)), :has(#cubesel:not(.hidden)), :has(#cubemgr:not(.hidden)), :has(#players:not(.hidden)), :has(#playerStats:not(.hidden)), :has(#history:not(.hidden)), :has(#inperson:not(.hidden)), :has(#search:not(.hidden)), :has(#suggestions:not(.hidden)), :has(#decks:not(.hidden)), :has(#deckedit:not(.hidden))) #bgSheet { display:block; }
#bgSheet.ready { opacity:.26; }
.bg-tilt { position:absolute; left:50%; top:var(--bg-top, 24%); width:5400px; height:0; transform:translate(-50%, 0) perspective(720px) rotateX(50deg) rotateZ(-12deg); transform-style:flat; }
.bg-track { position:absolute; left:0; top:-1900px; width:5400px; will-change:transform; animation:bg-drift 132s linear infinite; backface-visibility:hidden; }
.bg-block { display:grid; grid-template-columns:repeat(36, 150px); grid-auto-rows:209px; gap:0; padding:0; justify-content:center; }
.bg-block img { width:150px; height:209px; border-radius:0; display:block; object-fit:cover; filter:grayscale(1) sepia(1) hue-rotate(178deg) saturate(3) brightness(.85); /* static: rasterized once */ }
@keyframes bg-drift { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(0, -50%, 0); } }
body.bg-paused .bg-track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .bg-track { animation:none; } }
.bg-veil { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, #0b1220 0%, #0b122000 0%, #0b1220aa 60%, #0b1220 100%), linear-gradient(180deg, #1c4b8a22, #0b122000 40%, #0b1220cc); }
/* home: My profile tile + tighter side cards so home fits 1280x800 */
.home-side { gap:10px !important; }
.home-side .feature-card { padding-top:12px; padding-bottom:12px; }
.my-prof { display:flex; flex-direction:column; gap:6px; cursor:default; }
.my-prof .mp-top { display:flex; align-items:center; gap:12px; } .my-prof .mp-top > .avatar { width:64px !important; height:64px !important; box-shadow:0 0 0 2px #fff3, 0 4px 14px #0008; }
.mp-who { display:flex; flex-direction:column; gap:4px; min-width:0; } .mp-name { font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mp-fav { display:flex; gap:3px; }
.mp-stats { display:flex; gap:6px; } .mp-stats span { flex:1; display:flex; flex-direction:column; align-items:center; background:#0f1520aa; border-radius:8px; padding:3px 0; font-size:11px; color:#8b97a6; } .mp-stats b { font-size:17px; color:#e8edf3; }
.mp-line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-links { display:flex; justify-content:space-between; align-items:center; font-size:13px; } .mp-links a { color:#7cc4ff; }
.linkish { background:none !important; border:none !important; color:#9fd0ff; padding:0 !important; cursor:pointer; font-size:13px; }
.my-prof.guest button { align-self:flex-start; }
/* ---------- Card Search + master read-only ---------- */
.feature-card.fc-compact { grid-template-areas:"icon title" "icon desc"; padding-top:10px !important; padding-bottom:10px !important; }
.feature-card.fc-compact .fc-icon { width:44px; height:44px; font-size:30px; }
.sr-tools { flex-wrap:wrap; gap:6px 8px; } .sr-tools #srQ { flex:1 1 320px; min-width:220px; } .tiny { width:58px; }
.sr-more { display:flex; justify-content:center; padding:14px; min-height:40px; }
.cm-card { position:relative; }
.sr-badge { position:absolute; left:4px; bottom:4px; background:#e8b23ae6; color:#1a1300; font-size:10px; font-weight:700; padding:1px 5px; border-radius:6px; pointer-events:none; }
.sr-badge.inline { position:static; margin-left:6px; }
.sr-qline { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace, monospace; }
.sr-arts { display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:6px; max-height:220px; overflow:auto; }
.sr-arts .ap-item img { width:100%; }
.sr-toast { pointer-events:auto; } .sr-toast a { color:#7cc4ff; margin-left:4px; }
#cmRoBanner:not(.hidden) { margin:0 0 8px; padding:8px 12px; border-radius:10px; background:#2a2210cc; border:1px solid #e8b23a66; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
body.cm-ro #cubePanel .editor, body.cm-ro #saveCube, body.cm-ro #loadSample, body.cm-ro #cubePanel .filebtn, body.cm-ro #cubecobra, body.cm-ro #importCC,
body.cm-ro #cmdRemove { display:none !important; }
#cmPromote { border-color:#e8b23a; color:#ffd77a; }
@media (min-width: 900px) { .cm-layout.sr-layout { grid-template-columns:minmax(0, 1fr) !important; } body.cm-dock-open .cm-layout.sr-layout { grid-template-columns:minmax(0, 1fr) 340px !important; } }
#srDock { position:sticky; top:8px; max-height:calc(100vh - 16px); overflow:auto; }
/* home right column: keep 4 tiles within 1280x800 */
.home-side .feature-card .fc-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.home-side .feature-card:not(.my-prof) .fc-icon { width:52px; height:52px; }
.home-side .feature-card:not(.my-prof) { grid-template-columns:52px 1fr; }
.cm-artall { display:block; margin-top:4px; }
/* ---------- Recommend Cards + changelog ---------- */
.sg-count { display:inline-block; margin-left:6px; font-size:11px; font-weight:700; background:#e8b23a; color:#1a1300; border-radius:9px; padding:1px 7px; vertical-align:middle; }
.sg-tools { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.sg-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(520px, 1fr)); gap:12px; }
.sg-item { display:flex; gap:14px; padding:12px; border-radius:12px; background:#151a24e6; border:1px solid #2a3344; }
.sg-item[data-status="approved"] { border-color:#3aa05a88; } .sg-item[data-status="rejected"], .sg-item[data-status="withdrawn"] { opacity:.75; }
.sg-cards { display:flex; flex-direction:column; gap:6px; align-items:center; flex:0 0 170px; }
.sg-img { width:170px; border-radius:8px; aspect-ratio:488/680; background:#0b0f16; }
.sg-cut { display:flex; align-items:center; gap:6px; width:100%; } .sg-cut img { width:44px; border-radius:4px; aspect-ratio:488/680; background:#0b0f16; } .sg-cut .small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.sg-title { font-size:1.1rem; } .sg-st { font-size:11px; padding:1px 7px; border-radius:8px; margin-left:6px; vertical-align:middle; }
.sg-st.open { background:#3a7fe033; color:#9fd0ff; } .sg-st.ok { background:#3aa05a33; color:#8fe0a8; } .sg-st.no { background:#d9534a33; color:#ff9a92; } .sg-st.wd { background:#55555544; color:#bbb; }
.sg-by { display:flex; align-items:center; gap:6px; } .sg-reason { margin:0; font-style:italic; color:#cfd8e3; }
.sg-votes { display:grid; grid-template-columns:120px auto 1fr; gap:4px 8px; align-items:center; }
.sg-bar { height:8px; border-radius:4px; background:#0b0f16; overflow:hidden; } .sg-bar i { display:block; height:100%; background:#3aa05a; } .sg-bar.r i { background:#d9534a; }
.sg-voters { display:flex; gap:2px; } .sg-vote.on.ok { background:#2d7a45; border-color:#3aa05a; } .sg-vote.on.no { background:#8a2f29; border-color:#d9534a; }
.sg-comments summary { cursor:pointer; } .sg-c { padding:4px 0; border-top:1px solid #222a38; font-size:13px; }
.sg-form form, .sg-f { display:grid; gap:6px; } .sg-form.card-panel { margin-bottom:10px; max-width:640px; }
#srdSgForm { margin-top:8px; }
.sr-badge.sg { left:auto; right:4px; background:#3a7fe0e6; color:#fff; } .sr-badge.inline.sg { position:static; }
.cl-row { display:grid; grid-template-columns:28px 64px 150px 1fr; gap:8px; align-items:start; padding:6px 8px; border-bottom:1px solid #222a38; }
.cl-ic { font-weight:700; text-align:center; } .cl-add .cl-ic, .cl-suggestion .cl-ic { color:#8fe0a8; } .cl-remove .cl-ic { color:#ff9a92; } .cl-promote .cl-ic { color:#ffd77a; }
.cl-card { display:inline-block; margin:2px 4px 0 0; padding:0 6px; border-radius:6px; background:#1d2534; font-size:12px; cursor:default; }
/* home right column: compact tiles so 5 fit at 1280x800 */
.home-side .feature-card:not(.my-prof) { padding-top:8px !important; padding-bottom:8px !important; grid-template-columns:40px 1fr !important; grid-template-areas:"icon title" "icon desc" "icon go"; row-gap:0; }
.home-side .feature-card:not(.my-prof) .fc-icon { width:40px; height:40px; font-size:28px; }
.home-side .feature-card:not(.my-prof) .fc-title { font-size:1.05rem; }
.home-side .feature-card:not(.my-prof) .fc-desc { -webkit-line-clamp:1; font-size:12.5px; }
.home-side .feature-card:not(.my-prof) .fc-go { font-size:12.5px; }
#cmLogView:not(.hidden) { background:#121722e6; border:1px solid #2a3344; border-radius:12px; padding:10px 14px; }
#cmLogView a, .cl-d a { color:#7cc4ff; }
.sg-cut > .small:first-child { flex:none; }
/* ---------- wide card detail panel (Card Search, Cube Manager, deck builder) ---------- */
:root { --dockw: clamp(340px, 34vw, 460px); }
@media (min-width: 1100px) {
  body.dock-open .db-layout { grid-template-columns:minmax(0, 1fr) var(--dockw) !important; }
  body.cm-dock-open .cm-layout { grid-template-columns:260px minmax(0, 1fr) var(--dockw) !important; }
  body.cm-dock-open .cm-layout.sr-layout { grid-template-columns:minmax(0, 1fr) var(--dockw) !important; }
  .db-dock, .cm-dock { top:72px; max-height:calc(100vh - 80px); overflow-y:auto; }
  .dock-stage { position:relative; gap:0; }
  .dock-stage .vnav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; padding:16px 4px; opacity:.55; }
  .dock-stage .vnav:hover { opacity:1; } .dock-stage .vnav:first-child { left:-4px; } .dock-stage .vnav:last-child { right:-4px; }
  /* whole card visible without scrolling: limited by panel width and viewport height (title bar + margins) */
  .dock-card img { width:auto; max-width:100%; max-height:calc(100vh - 150px); aspect-ratio:488/680; object-fit:contain; margin:0 auto; }
}
/* Recommend Cards: compact rows + detail panel */
.sg-layout .sg-list { grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); }
body.cm-dock-open .sg-layout .sg-list { grid-template-columns:1fr; }
.sg-row { align-items:center; gap:10px; padding:8px 10px; cursor:pointer; }
.sg-row:hover { border-color:#3aa0ff88; } .sg-row.sel { border-color:#3aa0ff; box-shadow:0 0 0 1px #3aa0ff; }
.sg-thumb { width:54px; aspect-ratio:488/680; border-radius:4px; background:#0b0f16; flex:none; }
.sg-rbody { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .sg-rbody .sg-title { font-size:1rem; }
.sg-rbody .sg-reason { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sg-cutname { color:#ff9a92; }
.sg-rvotes { display:flex; flex-direction:column; gap:2px; align-items:flex-end; flex:none; } .sg-rvotes .ok { color:#8fe0a8; } .sg-rvotes .no { color:#ff9a92; }
.sg-dock .dock-top { display:flex; gap:6px; align-items:center; } .sg-dock .dock-top strong { flex:1; }
.sg-which { display:flex; gap:4px; } .sg-which button.on { background:#2b4f7f; border-color:#3aa0ff; }
.sg-dbody { display:flex; flex-direction:column; gap:8px; }
.sg-dbody .sg-comments { border-top:1px solid #222a38; padding-top:6px; }
@media (min-width: 1100px) {
  /* Recommend Cards: the panel is pinned to the right edge below the header so the whole card is always visible */
  .sg-dock { position:fixed !important; top:76px !important; right:12px; bottom:auto; height:calc(100vh - 86px); width:var(--dockw); max-height:none !important; overflow-y:auto !important; z-index:4; box-sizing:border-box; }
  body.cm-dock-open .cm-layout.sg-layout { grid-template-columns:minmax(0, 1fr) !important; }
  body.cm-dock-open #suggestions { padding-right:calc(var(--dockw) + 16px); }
}
#suggestions .cm-head h2, #suggestions .cm-head .cm-back, #suggestions .cm-head .btn, #suggestions .cm-head button { white-space:nowrap; } #suggestions .cm-head { flex-wrap:wrap; }
.as-prog { height:10px; border-radius:5px; background:#0b0f16; overflow:hidden; } .as-prog i { display:block; height:100%; width:0; background:linear-gradient(90deg, #3a7fe0, #7cc4ff); transition:width .15s; }
.as-counts { display:flex; gap:16px; margin:6px 0; } .as-counts .ok { color:#8fe0a8; } .as-counts .no { color:#ff9a92; }
.as-list { max-height:48vh; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:6px; margin:6px 0; }
.as-row { display:flex; gap:8px; align-items:center; padding:4px 6px; border-radius:8px; background:#151a24; cursor:pointer; } .as-row img { width:40px; border-radius:3px; }
.as-skipped { max-height:22vh; overflow:auto; margin-bottom:8px; }
.as-row input { width:auto !important; flex:none; margin:0; } .as-row > span { flex:1; text-align:left; min-width:0; } .as-row img { flex:none; aspect-ratio:488/680; background:#0b0f16; }

/* ability editor v2: modifier blocks (filter / condition / may / unless / instead / up to / modal) */
.cat-mod { background:#7a5a12; }
.ae-mods { flex-basis:100%; display:flex; flex-direction:column; gap:4px; margin-top:3px; }
.ae-mod { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:4px 7px; border-radius:7px; background:#0006; border-left:4px solid #b88a1f; font-size:12px; }
.ae-mod b { font-weight:600; margin-right:2px; }
.ae-mod.mod-filter { border-left-color:#2f8f6a; } .ae-mod.mod-cond { border-left-color:#c27a1a; } .ae-mod.mod-may { border-left-color:#5b8de0; }
.ae-mod.mod-unless { border-left-color:#c0485f; } .ae-mod.mod-instead { border-left-color:#9a6ad6; } .ae-mod.mod-upto { border-left-color:#3fb0b0; }
.ae-mod select, .ae-mod input { padding:2px 4px; font-size:11.5px; width:auto; background:#0e1116; color:#fff; border:1px solid #fff3; border-radius:5px; }
.ae-mod input[type=checkbox] { width:auto; }
.ae-mdel { margin-left:auto; background:none; border:0; color:#fff9; cursor:pointer; padding:0 3px; }
.ae-modal { font-size:12px; color:var(--muted, #aab); }
.ar-opt { margin-top:4px; }
.ae-ab header .ae-modal { white-space:nowrap; display:inline-flex; gap:4px; } .ae-ab header .ae-modal input { width:auto; }
/* ---- automated combat ---- */
.combat-panel { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; background: rgba(14, 22, 40, 0.96); border: 1px solid #3c5a9a; border-radius: 10px; padding: 10px 14px; min-width: 320px; max-width: min(560px, 92vw); max-height: 44vh; overflow: auto; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); font-size: 13px; }
.combat-panel .cb-head { font-weight: 700; margin-bottom: 6px; }
.combat-panel .cb-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.combat-panel .cb-row { background: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 4px 8px; }
.combat-panel .cb-bl { color: #9fd0ff; font-size: 12px; margin-top: 2px; }
.combat-panel .cb-asg { font-size: 12px; margin-top: 3px; color: #ffcf8a; }
.combat-panel .cb-asg input { width: 46px; padding: 1px 4px; }
.combat-panel .cb-x { padding: 0 4px; font-size: 11px; line-height: 1.2; }
.combat-panel button { margin-top: 2px; }
.gcard.cb-elig { box-shadow: 0 0 0 2px rgba(255, 210, 90, 0.75); cursor: pointer; }
.gcard.cb-sel, .gcard.cb-att { box-shadow: 0 0 0 3px #ff5a4f, 0 0 14px rgba(255, 90, 79, 0.7); }
.gcard.cb-blk { box-shadow: 0 0 0 3px #4fb0ff, 0 0 14px rgba(79, 176, 255, 0.7); }
.gcard.cb-pick { box-shadow: 0 0 0 3px #7dff9a, 0 0 16px rgba(125, 255, 154, 0.8); }
.gcard.cb-target { outline: 3px dashed #7dff9a; outline-offset: 2px; cursor: crosshair; }
.combat-arrows { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 55; }
.combat-arrows line { stroke-width: 4; stroke-linecap: round; opacity: 0.85; }
.combat-arrows line.att, .combat-arrows path.att { stroke: #ff5a4f; fill: #ff5a4f; }
.combat-arrows line.blk, .combat-arrows path.blk { stroke: #4fb0ff; fill: #4fb0ff; }
.combat-arrows line.sel, .combat-arrows path.sel { stroke: #ffd25a; fill: #ffd25a; stroke-dasharray: 8 6; }
.ctr.ptm { background: #2c3e66; color: #fff; font-weight: 700; }
.ctr.ptm.up { background: #1f6b3a; }
.ctr.ptm.down { background: #7a2a2a; }
.ctr.kwg { background: #5a3b8a; color: #fff; }
.ctr.rst { background: #6b4a12; color: #fff; }
.ctr.sick { background: rgba(0, 0, 0, 0.55); }
.ae-pb.cat-static, .ae-blk.cat-static { border-left: 4px solid #c8a24a; }
.ae-pb.cat-static { background: rgba(200, 162, 74, 0.14); }
.ae-static .ae-blk.cat-static { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ae-mod.mod-scope, .ae-mod.mod-pt, .ae-mod.mod-restrict { border-left-color: #c8a24a; }
.ae-mod.mod-nv { border-left-color: #4ac8b5; }
.ae-mod.mod-link { border-left-color: #888; }
.ae-addcond { font-size: 12px; padding: 2px 8px; align-self: flex-start; }
.ctr[data-tip] { position: relative; cursor: help; pointer-events: auto; }
.ctr[data-tip]:hover::after { content: attr(data-tip); white-space: pre; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 80; background: rgba(10, 16, 30, 0.97); color: #e8eefc; border: 1px solid #3c5a9a; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-weight: 500; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); pointer-events: none; }
/* ================= Deck Manager ================= */
#decks, #deckedit { padding:0 4px; }
#decks .cm-head, #deckedit .cm-head { margin:0 0 10px; gap:8px; flex-wrap:wrap; }
.dk-colors { display:inline-flex; gap:2px; }
.dk-col { padding:2px 4px; opacity:.45; background:transparent; border:1px solid #2a2f3a; } .dk-col.on { opacity:1; border-color:#3aa0ff; }
.dk-tile .dk-art { height:120px; background:#20252f center 25%/cover no-repeat; }
.dk-owner { display:flex; align-items:center; gap:10px; padding:0 14px; margin-top:-30px; font-size:17px; }
.dk-owner .avatar, .dk-owner svg, .dk-owner .dk-noav { width:56px; height:56px; border-radius:50%; box-shadow:0 0 0 3px #171a21; flex:none; }
.dk-owner b { margin-top:26px; text-shadow:0 1px 3px #000; }
.dk-noav { display:inline-flex; align-items:center; justify-content:center; background:#333; font-size:22px; }
.dk-body { padding:6px 14px 12px; display:flex; flex-direction:column; gap:4px; }
.dk-name { font-size:16px; font-weight:700; }
.dk-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; }
.de-name { font-size:18px; font-weight:700; min-width:240px; }
.de-body { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(360px, 1fr); gap:14px; align-items:start; }
.de-search, .de-deck { background:#151922ee; border:1px solid #262c37; border-radius:12px; padding:10px; }
.de-results { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; margin-top:8px; max-height:calc(100vh - 220px); overflow:auto; }
.de-card img { width:100%; border-radius:6px; cursor:pointer; display:block; } .de-card img:hover { outline:2px solid #3aa0ff; }
.de-total.ok { color:#7dd892; } .de-total.bad { color:#ffb36b; } .de-total { font-weight:600; margin-bottom:6px; }
.de-curve { display:flex; gap:4px; height:70px; align-items:flex-end; margin-bottom:4px; }
.de-bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; position:relative; font-size:11px; }
.de-bar span { width:100%; background:#3a6ea8; border-radius:3px 3px 0 0; min-height:1px; } .de-bar b { position:absolute; top:0; font-size:11px; }
.de-basics { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .de-basic input { width:48px; }
.de-sec h4 { margin:10px 0 4px; }
.de-row { display:flex; gap:8px; align-items:center; padding:2px 4px; border-radius:4px; font-size:13px; } .de-row:hover { background:#1f2530; }
.de-q { width:26px; text-align:right; color:#9fb3d1; } .de-cn { flex:1; cursor:default; }
.de-tools { display:none; gap:2px; } .de-row:hover .de-tools { display:inline-flex; } .de-tools button { padding:0 5px; font-size:12px; }
.de-prints { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; max-height:60vh; overflow:auto; margin:8px 0; } .de-prints img { width:100%; cursor:pointer; border-radius:6px; }
.dk-export { width:100%; font-family:monospace; }
@media (max-width:900px) { .de-body { grid-template-columns:1fr; } }
.cs-tile.dk-tile { min-height:0; height:auto; align-self:start; } .dk-grid { align-items:start; }
/* floating mana pool */
.mpool { display:inline-flex; gap:2px; align-items:center; background:#14324a; border:1px solid #2d6a99; border-radius:10px; padding:0 4px; font-size:12px; }
.mpool .mp { padding:0 4px; font-size:12px; border-radius:6px; background:#1d2633; border:1px solid #3a4a66; color:#dde; cursor:pointer; }
.mpool .mp-W { color:#f6f0c8; } .mpool .mp-U { color:#7cc0ff; } .mpool .mp-B { color:#c9a3ff; } .mpool .mp-R { color:#ff8a70; } .mpool .mp-G { color:#7ddb8a; } .mpool .mp:disabled { cursor:default; opacity:.85; }
/* parameterized blocks: chips, spinners, scope */
.ae-chip { display:inline-flex; align-items:center; gap:2px; padding:0 5px; margin:1px; border:1px solid #3a4a66; border-radius:9px; font-size:11px; background:#1a2130; cursor:pointer; white-space:nowrap; }
.ae-chip input { margin:0; } .ae-chip:has(input:checked) { background:#24456e; border-color:#3aa0ff; }
.ae-kws { display:inline-flex; flex-wrap:wrap; gap:1px; max-width:520px; vertical-align:middle; }
.ae-spin { width:48px; } .ae-amt select, .ae-scope select { margin:0 3px; }
.ar-cost { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; }
.ar-cost label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ae-cslot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 6px; margin: 0 2px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 6px; background: rgba(0,0,0,.18); min-width: 60px; }
.ae-cslot.ae-over { border-color: #ffd34d; background: rgba(255,211,77,.15); }
.ae-cobj { font-style: italic; opacity: .85; }
.ae-chk { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.cat-object { background: #6b4f9e; }
.ae-zslot { display:inline-flex; padding:1px 4px; border:1.5px dashed rgba(255,255,255,.45); border-radius:6px; } .ae-zslot.ae-over { border-color:#ffd34d; } .cat-zone { background:#7a5a2a; }
.swipeable { touch-action: pan-y; will-change: transform; }

#rollFx { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 60; }
#rollFx.show { display: flex; }
#rollFx .rf-box { background: rgba(15,18,28,.92); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 18px 26px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: rfIn .25s ease-out; }
#rollFx .rf-who { font-weight: 600; margin-bottom: 10px; }
#rollFx .rf-faces { display: flex; gap: 14px; justify-content: center; }
#rollFx .rf-coin { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a3, #d4a017 60%, #8a6508); display: flex; align-items: center; justify-content: center; font: 700 30px/1 serif; color: #5b3d00; box-shadow: inset 0 0 0 4px #b8860b; }
#rollFx .rf-spin { animation: rfSpin .3s linear infinite; }
#rollFx .rf-die { width: 74px; height: 74px; border-radius: 14px; background: linear-gradient(145deg, #fafafa, #c9ced8); color: #1b2030; display: flex; align-items: center; justify-content: center; font: 700 30px/1 system-ui; box-shadow: 0 4px 0 #8a92a6; }
#rollFx .rf-d4 { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; padding-top: 22px; }
#rollFx .rf-d20, #rollFx .rf-d12, #rollFx .rf-d10, #rollFx .rf-d8 { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; }
#rollFx .rf-tumble { animation: rfTumble .45s ease-in-out infinite; }
#rollFx .rf-res { margin-top: 12px; font-size: 1.25em; font-weight: 700; color: #ffd34d; }
@keyframes rfSpin { 0% { transform: rotateY(0) } 100% { transform: rotateY(360deg) } }
@keyframes rfTumble { 0% { transform: rotate(0) translateY(0) } 50% { transform: rotate(180deg) translateY(-14px) } 100% { transform: rotate(360deg) translateY(0) } }
@keyframes rfIn { from { transform: scale(.8); opacity: 0 } to { transform: none; opacity: 1 } }
.cat-result { background:#2f6b5a; }

.ae-review { background:#5a4210; color:#ffd77a; border:1px solid #b8860b; border-radius:6px; padding:1px 6px; font-size:.85em; }
.ae-review button { font-size:.85em; padding:0 5px; margin-left:4px; }
.ab-review { background:#b8860b !important; color:#111 !important; }

.pile-card .libtop { width:100%; height:100%; object-fit:cover; border-radius:6px; cursor:zoom-in; box-shadow:0 0 0 2px #ffd34d; }
.pile-card { position:relative; }
.lib-badge { position:absolute; left:2px; bottom:2px; font-size:10px; padding:0 4px; border-radius:4px; background:#ffd34dcc; color:#111; pointer-events:none; }
.lib-badge.look { background:#7fb2ffcc; }

.phasecol .ph.hard { border-left:3px solid #e0a63a; }

/* ---- prompt dock: all prompts at the top, never over the hand strip ---- */
#promptDock { position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:85; display:flex; flex-direction:column; align-items:center; gap:6px; width:min(640px, calc(100vw - 16px)); max-height:calc(100vh - var(--hand-reserve, 0px) - 140px); overflow-y:auto; pointer-events:none; }
#promptDock > * { position:relative !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; margin:0 !important; width:100% !important; max-width:100% !important; max-height:none; pointer-events:auto; box-sizing:border-box; font-size:13px; }
#promptDock > .hidden { display:none !important; }
#promptDock > .tucked { max-height:30px !important; overflow:hidden !important; padding-top:4px !important; padding-bottom:4px !important; opacity:.92; }
#promptDock .dock-tuck { position:absolute; right:4px; top:3px; z-index:2; padding:0 6px; font-size:12px; line-height:18px; border-radius:6px; background:#0006; border:1px solid #fff3; color:#fff; cursor:pointer; }
#promptDock .prio-ov { background:#1d212af2; border:1px solid #5a4a1c; border-radius:10px; padding:6px 10px; flex-direction:row; flex-wrap:wrap; gap:8px; justify-content:center; }
#promptDock .prio-btns button { font-size:15px; padding:6px 18px; }
#promptDock .prio-q { font-size:13px; }
.toast, body .toast { top:58px; bottom:auto !important; transform:translateX(-50%) translateY(-30px); }
.toast.show { transform:translateX(-50%) translateY(0); }
#rollFx { align-items:flex-start !important; padding-top:90px; }
.ctxmenu { z-index:300 !important; }

/* ---- expanded card with actions on both sides ---- */
#cardExpand { position:fixed; inset:0; z-index:150; background:#000a; display:flex; align-items:center; justify-content:center; }
#cardExpand.hidden { display:none; }
#cardExpand .cx-wrap { display:flex; align-items:center; gap:14px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
#cardExpand .cx-col { display:flex; flex-direction:column; gap:8px; min-width:120px; }
#cardExpand .cx-col button { padding:8px 12px; border-radius:8px; white-space:nowrap; }
#cardExpand .cx-card img { height:min(70vh, 520px); max-width:60vw; object-fit:contain; border-radius:14px; box-shadow:0 10px 30px #000c; display:block; }
#cardExpand .cx-name { text-align:center; margin-top:6px; }
#cardExpand .cx-close { position:absolute; top:12px; right:14px; }
@media (max-width:600px) { #cardExpand .cx-wrap { flex-wrap:wrap; justify-content:center; } #cardExpand .cx-card { order:-1; width:100%; text-align:center; } #cardExpand .cx-card img { height:auto; width:min(70vw, 300px); margin:0 auto; } #cardExpand .cx-col { flex-direction:row; flex-wrap:wrap; min-width:0; } }
/* ---- zone grid overlay: transparent backdrop, board visible, quick hide/show ---- */
.zone-ov { position:fixed; inset:0; z-index:120; background:transparent; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; padding-top:54px; }
.zone-ov.hidden { display:none; }
.zone-ov .zo-panel { pointer-events:auto; width:min(980px, calc(100vw - 16px)); max-height:calc(100vh - var(--hand-reserve, 0px) - 80px); display:flex; flex-direction:column; background:#14171dcc; border:1px solid #4a5263; border-radius:12px; box-shadow:0 10px 30px #0008; }
.zone-ov .zo-head { display:flex; align-items:center; gap:8px; padding:6px 10px; flex-wrap:wrap; }
.zone-ov .zo-head .grow { flex:1; }
.zone-ov .zo-grid { overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; padding:8px 10px 12px; }
.zone-ov .zo-card { position:relative; width:auto; height:auto; aspect-ratio:488/680; cursor:pointer; }
.zone-ov .zo-card img { width:100%; height:100%; border-radius:7px; }
.zone-ov.collapsed .zo-grid { display:none; }
.zone-ov.collapsed .zo-panel { width:auto; opacity:.9; }
.toast { z-index:400 !important; }
/* dock sits top-right over the log column so it never hides a board or the hand strip */
#promptDock { left:auto !important; right:8px; transform:none !important; width:min(400px, calc(100vw - 16px)); align-items:stretch; }
@media (max-width: 899px) { #promptDock { left:8px !important; right:8px; width:auto; } }

/* ---- mana counter (top bar of each board) ---- */
.mcount { display:inline-flex; gap:3px; align-items:center; margin-left:6px; }
.mcount .mc { display:inline-flex; align-items:center; gap:1px; padding:0 3px; border-radius:9px; background:#1a1f29; border:1px solid #333b4a; font-size:11px; opacity:.6; }
.mcount .mc.has { opacity:1; border-color:#6b7a99; box-shadow:0 0 6px #7cc0ff55; }
.mcount .mc-pip { font-style:normal; font-weight:800; width:14px; height:14px; line-height:14px; text-align:center; border-radius:50%; color:#111; font-size:10px; }
.mc-W .mc-pip { background:#f6f0c8; } .mc-U .mc-pip { background:#7cc0ff; } .mc-B .mc-pip { background:#b89ad8; } .mc-R .mc-pip { background:#ff8a70; } .mc-G .mc-pip { background:#7ddb8a; } .mc-C .mc-pip { background:#c8c8c8; }
.mcount .mc-n { min-width:12px; text-align:center; cursor:default; }
.mcount.mine .mc-n { cursor:text; }
.mcount .mc-a { padding:0 2px; font-size:10px; line-height:12px; background:none; border:0; color:#9ab; cursor:pointer; }
.mcount .mc-a:hover { color:#fff; }
.mcount .mc-in { width:34px; font-size:11px; padding:0 2px; }

/* token piles */
.gcard.tpile { box-shadow: 3px 3px 0 -1px #2a2f3a, 3px 3px 0 0 #7a8499, 6px 6px 0 -1px #2a2f3a, 6px 6px 0 0 #59627a; }
.ctr.stackn { background:#f0d36b; color:#111; font-weight:800; font-size:12px; }

/* bulk recommend */
.sr-selbar { position:sticky; top:0; z-index:5; display:flex; gap:8px; align-items:center; padding:6px 10px; background:#20283a; border:1px solid #3c5a9a; border-radius:8px; margin:6px 0; }
.sr-selbar.hidden { display:none; }
#srSelBtn.on { background:#3c5a9a; color:#fff; }
.cm-card.picked { outline:3px solid #f0d36b; outline-offset:-3px; }
.cm-card.picked::after { content:'✔'; position:absolute; top:6px; right:8px; background:#f0d36b; color:#111; border-radius:50%; width:22px; height:22px; text-align:center; line-height:22px; font-weight:800; }
.sg-bulk textarea[name=list] { font-family:ui-monospace, monospace; font-size:12px; }
.sg-bt { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.sg-bt td { padding:3px 6px; border-bottom:1px solid #2a2f3a; }
.sg-bt tr.err td { color:#f2a3a3; } .sg-bt tr.merge td { color:#f0d36b; } .sg-bt tr.ok td:first-child { color:#7ddb8a; }

/* ---- batch 4: consent prompts, PASS ALL, look viewer, sounds, multi-move, manual sorting ---- */
.vote-prompt { background: #1d2333; border: 2px solid #5a6b94; border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px #0008; min-width: 260px; max-width: 380px; }
.vote-prompt.urgent { border-color: #f5c542; animation: vpPulse 1.4s ease-in-out infinite; }
@keyframes vpPulse { 0%,100% { box-shadow: 0 0 0 0 #f5c54266, 0 6px 24px #0008; } 50% { box-shadow: 0 0 0 6px #f5c54233, 0 6px 24px #0008; } }
.vote-prompt .vp-q { margin-bottom: 4px; }
.vote-prompt .vp-btns { display: flex; gap: 8px; margin-top: 8px; }
.bigbtn { font-size: 1.05rem; font-weight: 700; padding: 9px 16px; min-height: 42px; border-radius: 8px; cursor: pointer; flex: 1; }
.bigbtn.ok { background: #2f9e55; color: #fff; border: 1px solid #45c46f; }
.bigbtn.no { background: #4a2a2e; color: #fff; border: 1px solid #a5464f; }
.bigbtn:hover { filter: brightness(1.15); }
/* bigger priority / confirm buttons */
#prioPrompt button, .prio-ov button, #gStack button.primary, #combatPanel button.primary, #abTarget button.primary { font-size: 1.02rem; font-weight: 700; padding: 8px 14px; min-height: 40px; }
#prioPrompt button.primary, .prio-ov button.primary { background: #f5c542; color: #222; border-color: #ffd866; box-shadow: 0 0 10px #f5c54266; }
#gPass { font-weight: 700; }
#gPass:disabled { opacity: .55; }
.passall { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: .75rem; padding: 0 5px; white-space: nowrap; border: 1px solid #556; border-radius: 6px; cursor: pointer; user-select: none; }
.passall:has(input:checked) { background: #3b4f2e; border-color: #7bbf5a; }
.snd-btn { padding: 2px 8px; }
.pname { font-weight: 700; }
.ph.back { opacity: .85; }
.zo-card.zo-sel { outline: 3px solid #f5c542; outline-offset: 2px; }
.zo-head button.on { background: #f5c542; color: #222; }
.ms-bar { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: .85rem; }
.ms-bar label { display: inline-flex !important; align-items: center; gap: 4px; margin: 0; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ms-bar label input { width: auto; margin: 0; }
.ms-col { min-width: 110px; min-height: 120px; border: 1px dashed transparent; border-radius: 6px; }
.ms-zone .ms-col { border-color: #444a; }
.ms-col.ms-over { border-color: #f5c542; background: #f5c5420f; }
.ms-col .stack > * { cursor: grab; }

/* ---- PWA / notch safe areas (iPhone standalone, viewport-fit=cover) ---- */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
header { padding-top: calc(10px + env(safe-area-inset-top)); }
#gHand.handstrip { bottom: calc(6px + env(safe-area-inset-bottom)); }
#promptDock { top: calc(54px + env(safe-area-inset-top)); }
#ctxMenu.sheet { padding-bottom: env(safe-area-inset-bottom); }