/* Bundled fallbacks: a serif for systems without Georgia (Steam Deck / Proton, Linux) and the few symbols the UI uses. */
@font-face { font-family: 'Arcane Serif'; src: url('fonts/arcane-serif.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arcane Serif'; src: url('fonts/arcane-serif-italic.woff') format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arcane Symbols'; src: url('fonts/arcane-symbols.woff') format('woff'); font-display: block; }
:root {
  --gold: #e8b85c;
  --gold-2: #ffd98a;
  --ink: #0b0a10;
  --panel: rgba(16, 14, 24, 0.82);
  --panel-2: rgba(28, 24, 40, 0.9);
  --line: rgba(232, 184, 92, 0.35);
  --text: #efe8dc;
  --muted: #a9a0b6;
  --blue: #39a0ff;
  --red: #ff4a3d;
  --green: #4fd27b;
  --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Arcane Serif', 'Arcane Symbols', serif;
  --sans: 'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, Roboto, Arial, 'Arcane Symbols', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #060509; color: var(--text); font-family: var(--sans); overflow: hidden; user-select: none; }
button { font-family: var(--sans); color: inherit; cursor: pointer; }
.hidden { display: none !important; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; }

/* ---------- loading ---------- */
.screen { position: absolute; inset: 0; z-index: 20; }
#loading { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2a1d3d 0%, #0b0911 60%, #050408 100%); }
.loading-inner { width: min(520px, 86vw); text-align: center; }
.logo { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--serif); letter-spacing: 0.28em; font-size: 34px; color: var(--gold-2); text-shadow: 0 0 24px rgba(255, 190, 90, 0.35); }
.logo-mark { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(255, 190, 90, 0.5), inset 0 0 14px rgba(255, 190, 90, 0.4); background: radial-gradient(circle, #3e2a6d, #120d24); position: relative; }
.logo-mark::after { content: ''; position: absolute; inset: 9px; border: 1.5px solid var(--gold); transform: rotate(45deg); }
.loading-status { margin: 26px 0 12px; color: var(--muted); font-size: 14px; min-height: 20px; }
.bar { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; width: 5%; background: linear-gradient(90deg, #b27a2a, var(--gold-2)); transition: width 0.4s; }

/* ---------- home ---------- */
.home-left { padding: 28px 34px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.home-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home-header .logo { font-size: 24px; justify-content: flex-start; }
.home-tabs { display: flex; gap: 6px; }
.tab { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 8px 16px; border-radius: 20px; font-size: 14px; }
.tab.active { border-color: var(--line); color: var(--gold-2); background: rgba(232, 184, 92, 0.08); }
.deck-tools { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.search { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: 14px; outline: none; }
.search:focus { border-color: var(--line); }
.color-filter { display: flex; gap: 4px; }
.pip { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.6); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #111; opacity: 0.45; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.pip.on { opacity: 1; box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255,200,100,0.5); }
.pip.W { background: #f6f0d4; } .pip.U { background: #9ccbf0; } .pip.B { background: #b0a4ad; } .pip.R { background: #f19a7c; } .pip.G { background: #9acf9f; } .pip.C { background: #cfcac5; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-rows: 246px; align-content: start; gap: 16px; overflow-y: auto; padding: 4px 8px 40px 2px; min-height: 0; }
.deck-grid::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 8px; }
.deck-grid::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: rgba(232, 184, 92, 0.25); border-radius: 8px; }
.deck-tile { position: relative; height: 246px; border-radius: 12px; overflow: hidden; cursor: pointer; background: #1a1624; border: 2px solid rgba(255,255,255,0.06); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.deck-tile:hover { transform: translateY(-4px); border-color: rgba(232, 184, 92, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.deck-tile.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(255, 190, 90, 0.35); }
.deck-art { position: absolute; inset: 0; background-size: 175%; background-position: 50% 18%; filter: saturate(1.05); }
.deck-art canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.deck-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(8,6,12,0.95) 88%); }
.deck-meta { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; }
.deck-name { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px #000; }
.deck-sub { font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-pips { display: flex; gap: 3px; margin-top: 6px; }
.deck-pips .pip { width: 16px; height: 16px; font-size: 9px; opacity: 1; border-width: 1px; cursor: default; }
.deck-badge { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 10px; padding: 3px 7px; border-radius: 10px; background: rgba(0,0,0,0.65); color: var(--gold-2); border: 1px solid var(--line); }
.deck-badge.illegal { color: #ff9b8f; border-color: rgba(255, 90, 70, 0.5); }

.home-right { background: linear-gradient(180deg, rgba(20, 16, 30, 0.92), rgba(10, 8, 16, 0.96)); border-left: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.panel-title { font-family: var(--serif); font-size: 13px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.selected-deck { display: flex; gap: 14px; align-items: center; min-height: 92px; }
.selected-deck .thumb { width: 66px; height: 92px; border-radius: 6px; overflow: hidden; flex: none; background: #221d2e; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
.selected-deck .thumb img, .selected-deck .thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.selected-deck .info .n { font-family: var(--serif); font-size: 17px; }
.selected-deck .info .c { color: var(--muted); font-size: 12px; margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
.field input[type=text], .field select, textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none; font-family: var(--sans); }
.field select option { background: #1b1726; }
.seg { display: flex; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 3px; border: 1px solid rgba(255,255,255,0.08); }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 8px; font-size: 13px; color: var(--muted); }
.seg button.on { background: linear-gradient(180deg, rgba(232,184,92,0.25), rgba(232,184,92,0.12)); color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line); }
.toggle { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text); gap: 10px; }
.toggle small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.switch { width: 42px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.15); position: relative; flex: none; transition: background 0.2s; border: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ddd; transition: left 0.2s; }
.switch.on { background: #b98a3a; } .switch.on::after { left: 21px; background: #fff3d8; }
.play-btn { margin-top: auto; height: 64px; border-radius: 14px; border: 0; font-family: var(--serif); font-size: 24px; letter-spacing: 0.18em; color: #1a1005; background: linear-gradient(180deg, #ffd98a, #d99a3a 60%, #b0701f); box-shadow: 0 0 0 1px #ffe6b0 inset, 0 8px 30px rgba(255, 170, 60, 0.35); transition: transform 0.15s, filter 0.15s; }
.play-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.play-btn:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; transform: none; }
.ghost-btn { border: 1px solid var(--line); background: rgba(232,184,92,0.06); color: var(--gold-2); padding: 9px 14px; border-radius: 10px; font-size: 13px; }
.ghost-btn:hover { background: rgba(232,184,92,0.14); }
.danger-btn { border: 1px solid rgba(255,90,70,0.4); background: rgba(255,90,70,0.08); color: #ffb3a8; padding: 9px 14px; border-radius: 10px; font-size: 13px; }

/* ---------- modal (shared) ---------- */
.modal-back { position: absolute; inset: 0; background: rgba(4, 3, 8, 0.72); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60; }
.modal { width: min(920px, 94vw); max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(30, 25, 44, 0.97), rgba(14, 12, 22, 0.98)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); overflow: hidden; }
.modal-head { padding: 18px 22px 10px; }
.modal-title { font-family: var(--serif); font-size: 20px; color: var(--gold-2); }
.modal-msg { color: var(--text); font-size: 14px; margin-top: 6px; white-space: pre-wrap; line-height: 1.4; }
.modal-body { padding: 8px 22px; overflow-y: auto; min-height: 0; }
.modal-foot { padding: 14px 22px 18px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; border-top: 1px solid rgba(255,255,255,0.06); }
.modal-foot .spacer { flex: 1; color: var(--muted); font-size: 13px; }
.modal-error { color: #ff9b8f; font-size: 13px; margin-top: 6px; }
.pbtn { border: 0; border-radius: 10px; padding: 11px 22px; font-size: 14px; font-weight: 600; color: #1a1005; background: linear-gradient(180deg, #ffd98a, #d99a3a); box-shadow: 0 0 0 1px #ffe6b0 inset; }
.pbtn:disabled { filter: grayscale(1) brightness(0.55); cursor: default; }
.sbtn { border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 10px 18px; font-size: 14px; background: rgba(255,255,255,0.05); color: var(--text); }
.sbtn:hover { background: rgba(255,255,255,0.1); }
textarea { width: 100%; min-height: 260px; resize: vertical; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 13px; line-height: 1.45; user-select: text; }
.import-result { font-size: 13px; margin-top: 8px; color: var(--muted); max-height: 140px; overflow: auto; user-select: text; }
.cmd-cands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- in-game HUD ---------- */
#game-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#game-ui > * { pointer-events: auto; }
#arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; overflow: visible; }
#plates, #stack-labels { position: absolute; inset: 0; pointer-events: none !important; }
.plate { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; pointer-events: auto; transition: filter 0.2s; }
.plate.placed:not(.bottom-seat) { transition: filter 0.2s, left 0.3s ease, top 0.3s ease; }
.plate.bottom-seat { transform: none; left: 24px; bottom: 24px; }
.plate-eye { flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.12); color: var(--muted); cursor: pointer; backdrop-filter: blur(4px);
  transition: color 0.15s, border-color 0.15s, background 0.15s; }
.plate-eye:hover, .plate-eye:focus-visible { color: var(--gold); border-color: rgba(232,184,92,0.6); background: rgba(232,184,92,0.1); }
.plate.bottom-seat .plate-eye { display: none; }
#seat-view { position: absolute; left: 24px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px;
  background: var(--panel); border: 1px solid rgba(232,184,92,0.45); border-radius: 999px; font-size: 13px; pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35); zoom: var(--ui-scale); }
#seat-view .sv-eye { color: var(--gold); display: grid; }
#seat-view .sv-text { font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#seat-view .sv-back { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
#seat-view .sv-back:hover { border-color: rgba(232,184,92,0.6); color: var(--gold); }
.avatar { width: 74px; height: 74px; border-radius: 50%; position: relative; background: #211c2d; border: 3px solid #3b3346; box-shadow: 0 6px 20px rgba(0,0,0,0.7); overflow: hidden; flex: none; cursor: pointer; }
.avatar .art { position: absolute; inset: 0; background-size: 260%; background-position: 50% 17%; }
.avatar .art canvas { position: absolute; width: 260%; left: -80%; top: -17%; }
.avatar .life { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.85)); font-family: var(--serif); font-weight: 700; font-size: 21px; text-align: center; line-height: 1.35; text-shadow: 0 1px 2px #000; }
.plate.small .avatar { width: 60px; height: 60px; }
.plate.small .avatar .life { font-size: 18px; }
.plate.turn .avatar { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 215, 130, 0.35), 0 0 28px rgba(255, 190, 90, 0.55); }
.plate.priority .avatar::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; border-top-color: #9fd4ff; animation: spin 1.1s linear infinite; z-index: 3; }
@keyframes spin { to { transform: rotate(360deg); } }
.plate.selectable .avatar { border-color: #ffc631; box-shadow: 0 0 0 3px rgba(255, 198, 49, 0.5), 0 0 30px rgba(255, 198, 49, 0.7); animation: pulse 1.2s ease-in-out infinite; }
.plate.chosen .avatar { border-color: #ff8a1f; box-shadow: 0 0 0 3px rgba(255, 138, 31, 0.7), 0 0 34px rgba(255, 138, 31, 0.8); }
.plate.lost { filter: grayscale(1) brightness(0.5); }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 198, 49, 0.25), 0 0 40px rgba(255, 198, 49, 0.9); } }
.plate-info { background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 6px 10px; min-width: 132px; backdrop-filter: blur(4px); }
.plate-name { font-weight: 600; font-size: 13px; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.plate-name .tag { font-size: 10px; color: var(--gold); margin-left: 6px; font-weight: 400; }
.plate-stats { display: flex; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.plate-stats span { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.plate-stats span:hover { color: var(--text); }
.plate-badges { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pbadge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.08); }
.pbadge.poison { background: rgba(80, 200, 90, 0.2); color: #9df0a8; }
.pbadge.cmd { background: rgba(255, 90, 70, 0.18); color: #ffb3a8; }
.pbadge.mon { background: rgba(255, 210, 90, 0.2); color: var(--gold-2); }
.float-num { position: absolute; font-family: var(--serif); font-weight: 800; font-size: 34px; pointer-events: none; text-shadow: 0 2px 6px #000, 0 0 16px currentColor; animation: floatUp 1.3s ease-out forwards; z-index: 40; transform: translate(-50%, -50%); }
.float-num.dmg { color: #ff5a4a; } .float-num.gain { color: #69f08f; } .float-num.poison { color: #9df0a8; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.shake { animation: shake 0.4s; }
@keyframes shake { 20% { transform: translate(calc(-50% - 6px), -50%); } 40% { transform: translate(calc(-50% + 5px), -50%); } 60% { transform: translate(calc(-50% - 3px), -50%); } 80% { transform: translate(calc(-50% + 2px), -50%); } }
.plate.me.shake { animation: shakeMe 0.4s; }
@keyframes shakeMe { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }

#action-cluster { position: absolute; right: 26px; bottom: 26px; display: flex; flex-direction: row; align-items: center; gap: 12px; }
#action-hint { position: absolute; right: 8px; bottom: -18px; white-space: nowrap; }
.btn-main { min-width: 176px; height: 62px; border-radius: 31px; border: 0; padding: 0 28px; font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: linear-gradient(180deg, #4aa3ff, #1c63c9 70%, #144a99); box-shadow: 0 0 0 2px rgba(180, 220, 255, 0.5) inset, 0 8px 26px rgba(40, 120, 255, 0.45); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.12s, filter 0.2s, background 0.3s; }
.btn-main:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-main.gold { color: #1b1004; background: linear-gradient(180deg, #ffdb8e, #e0a040 65%, #b8761f); box-shadow: 0 0 0 2px #ffe9ba inset, 0 8px 26px rgba(255, 170, 60, 0.5); }
.btn-main.red { background: linear-gradient(180deg, #ff7a5e, #d33a26 70%, #9e2414); box-shadow: 0 0 0 2px rgba(255, 190, 170, 0.5) inset, 0 8px 26px rgba(255, 80, 50, 0.45); }
.btn-main:disabled, .btn-main.waiting { filter: grayscale(0.9) brightness(0.55); cursor: default; transform: none; }
.btn-main-sub { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: 0.85; margin-top: -2px; }
.btn-secondary { border: 1px solid rgba(255,255,255,0.22); background: var(--panel); color: var(--text); height: 38px; padding: 0 18px; border-radius: 19px; font-size: 14px; backdrop-filter: blur(4px); }
.btn-secondary:hover { border-color: var(--line); color: var(--gold-2); }
#action-hint { font-size: 11px; color: var(--muted); text-shadow: 0 1px 2px #000; }
#phase-ladder { transition: opacity 0.16s ease; position: absolute; right: 26px; bottom: 150px; display: flex; gap: 3px; align-items: flex-end; background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px 8px; backdrop-filter: blur(4px); }
.phase { width: 30px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; color: var(--muted); position: relative; cursor: pointer; border: 1px solid transparent; }
.phase svg { width: 17px; height: 17px; opacity: 0.7; }
.phase:hover { background: rgba(255,255,255,0.06); }
.phase.current { color: #fff; background: linear-gradient(180deg, rgba(74,163,255,0.35), rgba(28,99,201,0.25)); border-color: rgba(120, 190, 255, 0.6); }
.phase.current svg { opacity: 1; }
.phase.stop::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.phase.opp.current { background: linear-gradient(180deg, rgba(255,90,70,0.35), rgba(180,40,30,0.25)); border-color: rgba(255,130,110,0.6); }
.phase-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.1); margin: 0 2px; }
/* Who the table is waiting on, and what that player has to decide. */
#decision-bar { display: flex; align-items: center; gap: 10px; max-width: 760px; padding: 7px 14px; border-radius: 10px; font-size: 14px; line-height: 1.25;
  background: linear-gradient(180deg, rgba(30, 26, 42, 0.95), rgba(16, 13, 24, 0.95)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
#decision-bar.mine { border-color: rgba(255, 210, 130, 0.75); background: linear-gradient(180deg, rgba(58, 44, 26, 0.96), rgba(26, 19, 12, 0.96)); box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 22px rgba(255, 190, 90, 0.28); }
#decision-bar .db-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: var(--muted); border: 1px solid rgba(255,255,255,0.12); }
#decision-bar.mine .db-tag { background: linear-gradient(180deg, #ffd98a, #e8a33c); color: #221803; border-color: rgba(255, 226, 160, 0.8); animation: dbTag 1.6s ease-in-out infinite; }
@keyframes dbTag { 50% { box-shadow: 0 0 14px rgba(255, 200, 110, 0.8); } }
#decision-bar .db-what { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#decision-bar.mine .db-what { color: #ffeec9; }
#decision-bar .db-who { color: var(--gold-2); font-weight: 600; }
#decision-bar .db-also { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
#decision-bar .db-wait { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(159, 212, 255, 0.35); border-top-color: #9fd4ff; animation: spin 1.1s linear infinite; }
.plate-doing { font-size: 11.5px; color: #9fd4ff; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.plate-doing::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgba(159, 212, 255, 0.3); border-top-color: #9fd4ff; animation: spin 1.1s linear infinite; }
.plate.deciding .avatar { border-color: #9fd4ff; box-shadow: 0 0 0 2px rgba(159, 212, 255, 0.35), 0 0 24px rgba(120, 190, 255, 0.45); }
/* floating mana, on the player's banner beside their hand and graveyard counts */
.plate-mana { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pmana { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); line-height: 16px; }
.plate.me .pmana { cursor: pointer; }
.plate.me .pmana:hover { border-color: rgba(232,184,92,0.7); background: rgba(232,184,92,0.16); }
.pmana i { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #1b1408; border: 1px solid rgba(0,0,0,0.45); }
.pmana.m-W i { background: #f6f0d4; } .pmana.m-U i { background: #9ccbf0; } .pmana.m-B i { background: #b0a4ad; }
.pmana.m-R i { background: #f19a7c; } .pmana.m-G i { background: #9acf9f; } .pmana.m-C i { background: #cfcac5; }
.plate.small .pmana { font-size: 11px; padding: 0 6px 0 2px; }
#top-bar { position: absolute; left: 16px; top: 14px; display: flex; gap: 10px; align-items: flex-start; }
#btn-menu, #btn-topdown, #btn-hand, #turn-indicator { flex: none; }
#btn-topdown, #btn-hand { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer; position: relative; }
#btn-topdown:hover, #btn-hand:hover { border-color: rgba(232,184,92,0.6); color: var(--gold); }
#btn-topdown.on, #btn-hand.on { border-color: rgba(232,184,92,0.9); color: #221803; background: linear-gradient(180deg, #ffd98a, #e8a33c); }
#btn-hand .hand-count:not(:empty) { position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #12161f; color: var(--text); border: 1px solid rgba(255,255,255,0.25); font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }
#zoom-pill { position: absolute; left: 16px; top: 64px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(12, 15, 22, 0.82); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 70; }
#zoom-pill button { min-width: 30px; height: 28px; padding: 0 9px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }
#zoom-pill button:hover { background: rgba(255,255,255,0.1); color: var(--gold); }
#zoom-pill #zoom-reset { font-size: 12px; font-weight: 600; color: var(--muted); }
#zoom-level { min-width: 48px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
#stage canvas.panning { cursor: grabbing; }
#btn-menu { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: var(--panel); font-size: 18px; }
#turn-indicator { background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--muted); }
#turn-indicator b { color: var(--text); }
#card-preview { position: absolute; top: 50%; transform: translateY(-54%); display: flex; gap: 12px; align-items: flex-start; pointer-events: none !important; z-index: 80; }
#card-preview.left { left: 24px; } #card-preview.right { right: 24px; flex-direction: row-reverse; }
.preview-card { width: 300px; filter: drop-shadow(0 18px 40px rgba(0,0,0,0.8)); }
.preview-card canvas, .preview-card img { width: 100%; border-radius: 14px; display: block; }
.preview-details { width: 250px; background: var(--panel-2); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; max-height: 420px; overflow: hidden; }
.preview-details:empty { display: none; }
.preview-details .pd-name { font-family: var(--serif); font-size: 16px; color: var(--gold-2); }
.preview-details .pd-type { color: var(--muted); margin-bottom: 6px; }
.preview-details .pd-stat { display: inline-block; margin: 4px 6px 0 0; padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,0.08); }
.preview-details .pd-stat.up { color: #8ff0a8; } .preview-details .pd-stat.down { color: #ff9b8f; }
.preview-details .pd-stat.ring { color: #f4d98b; background: rgba(244,217,139,0.14); }
#log-panel { position: absolute; right: 14px; top: 14px; width: 360px; max-height: 52vh; display: flex; flex-direction: column; align-items: flex-end; }
#log-toggle { position: relative; border: 1px solid rgba(255,255,255,0.15); background: var(--panel); border-radius: 10px; padding: 8px 14px; font-size: 13px; }
#log-toggle.unread::after { content: attr(data-unread); position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold-2); color: #1a1005; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#log-head { display: none; width: 100%; margin-top: 6px; gap: 6px; align-items: center; background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 7px 8px; }
#log-panel:not(.collapsed) #log-head { display: flex; }
.log-chips { display: flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: wrap; }
.log-chip { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 7px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.log-chip:hover { color: var(--text); }
.log-chip.on { color: var(--gold-2); border-color: rgba(232,184,92,0.35); background: rgba(232,184,92,0.1); }
.log-search { flex: none; width: 72px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.25); color: var(--text); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-family: var(--sans); }
.log-search:focus { outline: none; border-color: var(--line); width: 110px; }
#log-list { width: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 10px 10px; padding: 6px 10px 8px; font-size: 12px; line-height: 1.4; user-select: text; }
#log-panel.collapsed #log-list, #log-panel.collapsed #chat-body { display: none; }
.log-row { display: flex; gap: 7px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); color: #d8d0e2; }
.log-row.filtered { display: none; }
.log-mark { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #6e6584; position: relative; top: -1px; }
.log-row.TURN { display: block; color: var(--gold-2); font-weight: 600; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(232,184,92,0.25); border-bottom: 0; font-family: var(--serif); letter-spacing: .02em; }
.log-row.DAMAGE .log-mark, .log-row.LIFE .log-mark { background: #ff7a66; }
.log-row.DAMAGE, .log-row.LIFE { color: #ffc4bc; }
.log-row.STACK_ADD .log-mark { background: #39a0ff; } .log-row.STACK_ADD { color: #bcdcff; }
.log-row.STACK_RESOLVE .log-mark { background: #8b6cff; }
.log-row.COMBAT .log-mark { background: #ffb857; } .log-row.COMBAT { color: #ffe0b8; }
.log-row.ZONE_CHANGE .log-mark, .log-row.LAND .log-mark { background: #4fd27b; }
.log-row.MANA .log-mark { background: #e8b85c; } .log-row.MANA { color: #bfb6a4; }
.log-row.INFORMATION .log-mark { background: #a9a0b6; }
.log-row.GAME_OUTCOME, .log-row.MATCH_RESULTS { color: var(--gold-2); font-weight: 600; }
/* a line only you were told: what your own search of your library put where */
.log-row.log-note .log-mark { background: var(--gold-2); }
.log-row.log-note { color: #ffe9c2; font-style: italic; }
.log-row.has-card { cursor: pointer; } .log-row.has-card:hover .log-text { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); }
.stack-label { position: absolute; transform: translate(-50%, 0); background: rgba(12, 10, 20, 0.94); border: 1px solid rgba(150, 120, 255, 0.55); color: #e6ddff; border-radius: 9px; padding: 5px 11px; font-size: 13px; line-height: 1.3; max-width: 300px; text-align: center; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.stack-label.top { border-color: rgba(255, 210, 130, 0.75); color: #fff3d8; font-size: 13.5px; box-shadow: 0 8px 22px rgba(0,0,0,0.65), 0 0 18px rgba(255,190,90,0.2); }

#turn-banner { position: absolute; left: 0; right: 0; top: 38%; height: 110px; display: grid; place-items: center; pointer-events: none !important; z-index: 45; }
#turn-banner .tb-inner { font-family: var(--serif); font-size: 44px; letter-spacing: 0.12em; color: #fff; text-shadow: 0 0 30px rgba(255, 190, 90, 0.8), 0 3px 8px #000; padding: 18px 80px; background: linear-gradient(90deg, transparent, rgba(20, 14, 30, 0.85) 20%, rgba(20, 14, 30, 0.85) 80%, transparent); animation: banner 1.5s ease-in-out forwards; }
#turn-banner.mine .tb-inner { color: var(--gold-2); }

.deck-offline { margin: -6px 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 190, 90, 0.35); background: rgba(58, 44, 26, 0.55); }

/* ---------- the coin ----------
   The coin itself is thrown in the scene, over the middle of the table; what lives here is the sentence
   that lands with it, set down under where it came to rest. */
#coin-flip { position: absolute; left: 0; right: 0; top: 26%; display: grid; place-items: center; pointer-events: none !important; z-index: 46; }
#coin-flip .coin-result { font-family: var(--serif); font-size: 22px; letter-spacing: 0.05em; color: var(--gold-2); text-shadow: 0 0 22px rgba(255, 190, 90, 0.6), 0 2px 6px #000;
  padding: 7px 22px; border-radius: 999px; background: rgba(14, 10, 22, 0.82); border: 1px solid var(--line); text-align: center; max-width: min(560px, 88vw);
 }
/* placed under the coin it belongs to; centred on the screen when there is no coin to sit under */
#coin-flip.at .coin-result { transform: translate(-50%, 0); }
#coin-flip.lost .coin-result { color: #ffb4ab; border-color: rgba(255, 120, 100, 0.45); text-shadow: 0 0 20px rgba(255, 90, 70, 0.45), 0 2px 6px #000; }
#coin-flip.leaving { animation: coinGone 0.35s ease-in forwards; }

/* the label under each of Krark's two coins: tapping one waves that coin away */
#coin-pick { position: absolute; inset: 0; pointer-events: none; z-index: 47; }
#coin-pick .coin-ignore { position: absolute; transform: translate(-50%, 0); pointer-events: auto; white-space: nowrap;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: rgba(14, 10, 22, 0.88); color: var(--text);
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.04em; text-transform: capitalize; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
#coin-pick .coin-ignore:hover, #coin-pick .coin-ignore:focus-visible { border-color: var(--gold); color: var(--gold-2); background: rgba(40, 28, 14, 0.92); }
body:is(.device-deck, .touch-used) #coin-pick .coin-ignore { padding: 10px 18px; font-size: 15px; }
@keyframes coinGone { to { opacity: 0; } }
@keyframes banner { 0% { opacity: 0; transform: scaleX(0.4); } 18% { opacity: 1; transform: scaleX(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.1); } }

#zone-viewer, #dialog-layer, #game-menu, #game-over { position: absolute; inset: 0; z-index: 50; }
.card-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 6px 2px 12px; }
.card-tile { width: 150px; position: relative; cursor: pointer; transition: transform 0.15s; border-radius: 9px; }
.card-tile canvas, .card-tile img { width: 100%; border-radius: 8px; display: block; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.card-tile:hover { transform: translateY(-4px) scale(1.03); }
.card-tile.sel { box-shadow: 0 0 0 3px #ffc631, 0 0 26px rgba(255, 198, 49, 0.7); }
/* a card you may cast or play from this zone: blue, so it is not mistaken for a choice a prompt is asking for */
.card-tile.playable::after { content: ''; position: absolute; inset: -3px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(110, 180, 255, 0.95), 0 0 18px rgba(110, 180, 255, 0.55); pointer-events: none; }
.card-tile .tile-note { position: absolute; left: 6px; right: 6px; bottom: 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #eaf4ff; background: rgba(40, 90, 150, 0.92); border: 1px solid rgba(110, 180, 255, 0.8); border-radius: 999px; padding: 3px 6px; pointer-events: none; }
.preview-details .pd-stat.play { background: rgba(40, 90, 150, 0.55); color: #eaf4ff; box-shadow: inset 0 0 0 1px rgba(110, 180, 255, 0.7); }
body.high-contrast .card-tile.playable::after { box-shadow: 0 0 0 4px #7fc0ff, 0 0 0 6px #000; }
.card-tile.disabled { opacity: 0.4; cursor: default; }
.card-tile.selectable::after { content: ''; position: absolute; inset: -3px; border-radius: 11px; box-shadow: 0 0 0 2px rgba(255, 198, 49, 0.8), 0 0 18px rgba(255, 198, 49, 0.6); pointer-events: none; }
.card-tile .order-badge { position: absolute; top: -8px; left: -8px; width: 30px; height: 30px; border-radius: 50%; background: #ff8a1f; color: #1a0f00; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.card-tile .tile-label { font-size: 12px; text-align: center; margin-top: 5px; color: var(--muted); }
.opt-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.opt { text-align: left; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--text); white-space: pre-wrap; }
.opt:hover:not(:disabled) { border-color: var(--line); background: rgba(232,184,92,0.08); }
.opt.sel { border-color: #ffc631; background: rgba(255, 198, 49, 0.12); }
.opt:disabled { opacity: 0.45; cursor: default; }
.dist-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dist-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; }
.dist-ctrl { display: flex; align-items: center; gap: 8px; }
.dist-ctrl button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); font-size: 18px; }
.dist-ctrl .v { font-family: var(--serif); font-size: 24px; min-width: 34px; text-align: center; }
.num-row { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 20px 0; }
.num-row input[type=range] { width: 320px; }
.num-row .v { font-family: var(--serif); font-size: 40px; min-width: 70px; text-align: center; color: var(--gold-2); }
.menu-panel { width: 360px; }
.menu-panel .modal-body { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; }
.go-panel { text-align: center; padding: 40px 50px; width: min(560px, 92vw); }
.go-title { font-family: var(--serif); font-size: 64px; letter-spacing: 0.14em; }
.go-title.win { color: var(--gold-2); text-shadow: 0 0 40px rgba(255, 190, 90, 0.8); }
.go-title.lose { color: #c9c2d6; text-shadow: 0 0 30px rgba(120, 100, 180, 0.6); }
.go-summary { color: var(--muted); margin: 14px 0 26px; line-height: 1.6; font-size: 14px; }
/* the match score between games of a best-of-three */
.go-score { font-family: var(--serif); font-size: 22px; letter-spacing: 0.06em; color: var(--gold-2); margin: -14px 0 24px; }
/* sideboarding between games: the deck on the left, what is waiting on the right */
.sb-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 0 10px; }
.sb-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 2px 0 6px; }
.sb-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: inherit; font: inherit; cursor: pointer; }
.sb-row:hover { border-color: var(--gold-2); }
.sb-row .sb-n { font-family: var(--serif); color: var(--gold-2); min-width: 18px; }
.sb-row .sb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sb-row .sb-move { color: var(--muted); font-size: 15px; }
@media (max-width: 620px) { .sb-wrap { grid-template-columns: 1fr; } }
#toasts { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 90; pointer-events: none; }
.toast { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 18px; font-size: 14px; max-width: 70vw; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: toastIn 0.25s ease-out; white-space: pre-wrap; }
.toast.error { border-color: rgba(255, 90, 70, 0.6); color: #ffd0c8; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
#fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.flash-red { position: absolute; inset: 0; box-shadow: inset 0 0 90px rgba(255, 40, 30, 0.4); animation: flashFade 0.6s ease-out forwards; pointer-events: none; }
@keyframes flashFade { to { opacity: 0; } }
.kbd { display: inline-block; padding: 0 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); font-size: 10px; margin-left: 4px; }
.connection-lost { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); background: #5a1a14; border: 1px solid #ff7a66; padding: 8px 16px; border-radius: 10px; z-index: 95; font-size: 13px; }

.home-footer { color: var(--muted); font-size: 11px; line-height: 1.5; }
.starting { position: absolute; inset: 0; display: grid; place-items: center; z-index: 55; background: radial-gradient(ellipse at center, rgba(20,14,30,0.75), rgba(5,4,8,0.9)); }
.starting .logo-mark { width: 64px; height: 64px; animation: spin 3s linear infinite; }
.starting .txt { margin-top: 18px; font-family: var(--serif); letter-spacing: 0.2em; color: var(--gold-2); text-align: center; }
.starting .sub { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.pbadge.tax { background: rgba(160, 130, 255, 0.18); color: #d6c8ff; }


/* =====================================================================
   0.2 — app shell, menus, rooms, results, settings
   ===================================================================== */
:root { --ui-scale: 1; --shell-h: 60px; --surface: #17131f; --surface-2: #1d1828; --hair: rgba(255,255,255,0.08); --ok: #6fdc8c; --bad: #ff8f80; --warn: #ffcf70; --critical: #d03b3b; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
input, select, textarea { font-family: var(--sans); user-select: text; }
.muted { color: var(--muted); } .small { font-size: 12px; } .tiny { font-size: 11px; } .mono { font-family: Consolas, 'Cascadia Mono', monospace; }
.err { color: var(--bad); } .warn { color: var(--warn); } .ok-text { color: var(--ok); }
.spacer { flex: 1; }
.scroll { overflow-y: auto; }
.scroll::-webkit-scrollbar { width: 8px; } .scroll::-webkit-scrollbar-thumb { background: rgba(232,184,92,0.25); border-radius: 8px; }
.empty { color: var(--muted); padding: 22px; text-align: center; font-size: 14px; line-height: 1.5; }
.empty.small { padding: 10px 0; text-align: left; font-size: 13px; }
.hidden { display: none !important; }

/* shell */
#shell { position: absolute; left: 0; right: 0; top: 0; height: var(--shell-h); z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: linear-gradient(180deg, rgba(10,8,16,0.96), rgba(10,8,16,0.82)); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); zoom: var(--ui-scale); }
.shell-brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; font-family: var(--serif); letter-spacing: 0.24em; color: var(--gold-2); font-size: 15px; padding: 6px 8px; }
.logo-mark.small { width: 26px; height: 26px; border-width: 1.5px; } .logo-mark.small::after { inset: 5px; border-width: 1px; }
.shell-nav { display: flex; gap: 4px; margin-left: 10px; }
.nav-tab { position: relative; background: transparent; border: 1px solid transparent; color: var(--muted); padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.nav-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-tab.active { color: var(--gold-2); border-color: var(--line); background: rgba(232,184,92,0.08); }
.nav-tab.pulse::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #ff6b5a; box-shadow: 0 0 8px #ff6b5a; animation: livePulse 1.6s infinite; }
.nav-tab.pulse { padding-left: 20px; }
.nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ff6b5a; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.shell-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.shell-status .lbl { margin-right: 6px; }
.status-online { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 18px; padding: 5px 10px; color: var(--text); font-size: 12px; }
.shell-profile { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 22px; padding: 3px 12px 3px 3px; font-size: 13px; color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #6b6478; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(111,220,140,0.6); } .dot.wait { background: var(--warn); animation: livePulse 1.4s infinite; } .dot.bad { background: #ff6b5a; } .dot.off { background: #5a5466; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6b5a; box-shadow: 0 0 10px #ff6b5a; animation: livePulse 1.6s infinite; margin-right: 6px; flex: none; }
@keyframes livePulse { 50% { opacity: 0.35; } }
.ping { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 4px; vertical-align: middle; }
.ping i { width: 3px; background: rgba(255,255,255,0.18); border-radius: 1px; } .ping i:nth-child(1) { height: 4px; } .ping i:nth-child(2) { height: 6px; } .ping i:nth-child(3) { height: 9px; } .ping i:nth-child(4) { height: 12px; }
.ping.q4 i.on, .ping.q3 i.on { background: var(--ok); } .ping.q2 i.on { background: var(--warn); } .ping.q1 i.on { background: #ff6b5a; }

/* menu screens */
#screens { position: absolute; inset: 0; pointer-events: none; }
#screens > .screen { pointer-events: auto; }
.screen.menu { top: var(--shell-h); z-index: 20; overflow-y: auto; background: linear-gradient(180deg, rgba(8,6,13,0.72), rgba(8,6,13,0.9) 60%); }
.screen.menu > * { zoom: var(--ui-scale); }
.screen.menu.overlay { z-index: 58; background: rgba(8,6,13,0.95); }
body[data-screen="match"] #screens > .screen:not(.overlay) { display: none; }
.screen-title { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--gold-2); margin: 0 0 18px; letter-spacing: 0.04em; }
.section-title { font-family: var(--serif); font-size: 13px; letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; }
.panel { background: linear-gradient(180deg, rgba(28,23,40,0.9), rgba(16,13,24,0.92)); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 12px; background: rgba(255,255,255,0.07); color: var(--text); border: 1px solid transparent; white-space: nowrap; }
.chip.small { font-size: 11px; padding: 2px 7px; }
.chip.ok { background: rgba(111,220,140,0.12); color: #9ff0b4; border-color: rgba(111,220,140,0.3); }
.chip.bad { background: rgba(255,110,90,0.12); color: #ffb3a8; border-color: rgba(255,110,90,0.35); }
.chip.gold { background: rgba(232,184,92,0.12); color: var(--gold-2); border-color: var(--line); }
.chip.live { background: rgba(255,107,90,0.12); color: #ffc7bf; border-color: rgba(255,107,90,0.35); }
.callout { background: rgba(232,184,92,0.07); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.callout b { color: var(--gold-2); display: block; margin-bottom: 2px; }
.pbtn.small, .sbtn.small, .ghost-btn.small, .danger-btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.ghost-btn.tiny, .danger-btn.tiny { padding: 3px 8px; font-size: 11.5px; border-radius: 7px; }
.pbtn.wide { width: 100%; }
.danger-btn.solid { background: linear-gradient(180deg, #e25b47, #a8321f); color: #fff; border: 0; font-weight: 600; padding: 11px 20px; }
.danger-btn:disabled, .ghost-btn:disabled, .sbtn:disabled { opacity: 0.45; cursor: default; }
.ghost-btn.on { background: rgba(232,184,92,0.3); }
.link { background: none; border: 0; color: var(--gold-2); text-decoration: underline; padding: 0; font-size: inherit; }
.text-in { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none; width: 100%; }
.text-in:focus { border-color: var(--line); }
.text-in:disabled { opacity: 0.6; }
/* shared text input: same skin as .text-in, used by the sign-in panel and the art picker search */
.inp { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none; }
.inp::placeholder { color: var(--muted); }
.inp:focus { border-color: var(--line); }
.inp:disabled { opacity: 0.6; }
.sel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 13px; outline: none; max-width: 100%; }
.sel option { background: #1b1726; }
.sel:disabled { opacity: 0.6; }
.seg.disabled { opacity: 0.6; } .seg button:disabled { cursor: default; }
.slider { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.slider input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(255,255,255,0.14) var(--p, 50%)); outline-offset: 6px; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff3d8; border: 2px solid var(--gold); box-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; }
.slider-v { min-width: 44px; text-align: right; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stepper input { width: 64px; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 7px 4px; font-size: 15px; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper > button { width: 30px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); font-size: 16px; }
.stepper .presets { display: flex; gap: 4px; margin-left: 6px; }
.stepper .presets button { border: 1px solid var(--hair); background: none; border-radius: 12px; color: var(--muted); font-size: 11.5px; padding: 3px 8px; }
.stepper .presets button:hover { color: var(--gold-2); border-color: var(--line); }
.inline-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 10px; }
.check input { margin-top: 2px; accent-color: var(--gold); }
.sigil { flex: none; border-radius: 50%; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.55)); }
.sigil svg { display: block; }
.sigil .st { fill: none; }
.sigil .dark { fill: #120e1c; stroke: #120e1c; }
.sigil .st.dark { fill: none; }
.art-box, .seat-art, .deck-chip-art, .thumb, .place-art, .fav-art, .deck-head-art { position: relative; overflow: hidden; background-size: 180%; background-position: 50% 18%; background-color: #211c2d; }
.art-box canvas, .seat-art canvas, .deck-chip-art canvas, .thumb canvas, .place-art canvas, .fav-art canvas, .deck-head-art canvas, .deck-art-inner canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hover-card { position: fixed; width: 230px; z-index: 120; pointer-events: none; filter: drop-shadow(0 14px 34px rgba(0,0,0,0.8)); }
.hover-card canvas { width: 100%; border-radius: 11px; display: block; }
.card-ref { cursor: help; }
.card-search { position: relative; margin-top: 8px; }
.card-search input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text); border-radius: 8px; padding: 8px 11px; font-size: 13px; outline: none; }
.cs-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #1b1726; border: 1px solid var(--line); border-radius: 10px; z-index: 30; box-shadow: 0 12px 30px rgba(0,0,0,0.6); overflow: hidden; }
.cs-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.cs-item small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cs-item.on, .cs-item:hover { background: rgba(232,184,92,0.12); }
.deck-chip { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 6px 12px 6px 6px; color: var(--text); min-width: 0; }
.deck-chip:hover:not(:disabled) { border-color: var(--line); background: rgba(232,184,92,0.06); }
.deck-chip.wide { width: 100%; }
.deck-chip-art { width: 38px; height: 50px; border-radius: 6px; flex: none; }
.deck-chip-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.deck-chip-text b { font-family: var(--serif); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-chip-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-chip .chev { color: var(--gold-2); font-size: 12px; margin-left: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat-tile { background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; }
.stat-l { font-size: 11.5px; color: var(--muted); }
.stat-v { font-size: 22px; font-weight: 600; margin-top: 2px; }
.code-in { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--gold-2); border-radius: 10px; font-family: Consolas, 'Cascadia Mono', monospace; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; outline: none; }
.code-in.big { width: 100%; font-size: 34px; padding: 14px 8px; margin: 6px 0 12px; }
.code-in.small { width: 120px; font-size: 15px; padding: 7px 6px; letter-spacing: 0.14em; }
.code-in:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,184,92,0.15); }
.path { display: block; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 12px; background: rgba(0,0,0,0.35); border: 1px solid var(--hair); border-radius: 6px; padding: 6px 8px; word-break: break-all; user-select: text; color: #d8d0e2; margin-top: 6px; }
.app-modal .modal { max-height: 88vh; }
.app-modal .modal-body { padding-bottom: 12px; }
.modal-back.clear { background: rgba(4,3,8,0.35); backdrop-filter: none; }

/* home */
.home-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 24px 28px 40px; max-width: 1500px; margin: 0 auto; }
.home-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero { position: relative; border-radius: 18px; padding: 28px 30px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 85% 20%, rgba(232,184,92,0.18), transparent 55%), linear-gradient(135deg, rgba(48,34,78,0.92), rgba(18,14,28,0.94)); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.hero.live { background: radial-gradient(ellipse at 85% 20%, rgba(255,107,90,0.18), transparent 55%), linear-gradient(135deg, rgba(64,28,40,0.92), rgba(18,14,28,0.94)); border-color: rgba(255,120,100,0.45); }
.hero-kicker { display: flex; align-items: center; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.hero-title { font-family: var(--serif); font-size: 36px; margin-top: 8px; color: #fff4dd; }
.hero-sub { color: #cfc6dc; margin-top: 6px; font-size: 15px; max-width: 640px; line-height: 1.45; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hero-btn { margin: 0; height: 58px; padding: 0 44px; font-size: 22px; }
.hero .deck-chip { max-width: 320px; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quick-card { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; background: linear-gradient(180deg, rgba(28,23,40,0.9), rgba(16,13,24,0.92)); border: 1px solid var(--hair); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.quick-card:hover { border-color: var(--line); transform: translateY(-2px); }
.quick-text { flex: 1; min-width: 0; }
.quick-title { font-family: var(--serif); font-size: 16px; color: var(--gold-2); }
.quick-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.quick-join { display: flex; gap: 6px; width: 100%; }
.recent { min-height: 200px; }
.match-list { display: flex; flex-direction: column; gap: 6px; max-height: 420px; }
.match-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid transparent; cursor: pointer; }
.match-row:hover { border-color: var(--line); background: rgba(232,184,92,0.05); }
.place-badge { width: 52px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,0.06); color: var(--muted); }
.place-badge.won { background: linear-gradient(180deg, #ffd98a, #c9892e); color: #1a1005; }
.place-badge.p2 { color: #e5e0ea; }
.mr-main { flex: 1; min-width: 0; }
.mr-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.thumbs { display: flex; gap: 4px; }
.thumb { width: 30px; height: 40px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.12); }
.thumb.winner { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.profile-card .pc-top { display: flex; align-items: center; gap: 12px; }
.pc-top > div:nth-child(2) { flex: 1; min-width: 0; }
.pc-name { font-family: var(--serif); font-size: 20px; }
.stat-tiles.three { grid-template-columns: repeat(3, 1fr); }
.fav { display: flex; gap: 10px; align-items: center; }
.fav-art { width: 44px; height: 58px; border-radius: 6px; }
.fav-name { font-family: var(--serif); font-size: 15px; }
.status-card { display: flex; flex-direction: column; gap: 10px; }
.status-row { display: flex; align-items: center; gap: 10px; }
.sr-text { flex: 1; min-width: 0; }
.sr-title { font-size: 14px; }
.status-card .ver { margin-top: 2px; }
.player-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.player-row:last-child { border-bottom: 0; }

/* play */
.play-wrap { padding: 24px 28px 40px; max-width: 1400px; margin: 0 auto; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.mode-card { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, rgba(34,27,50,0.92), rgba(16,13,24,0.94)); border: 1px solid var(--hair); border-radius: 16px; padding: 18px; }
.mode-head { display: flex; gap: 12px; align-items: center; }
.mode-title { font-family: var(--serif); font-size: 20px; color: var(--gold-2); }
.mode-foot { margin-top: auto; display: flex; gap: 8px; }
.mode-foot.two > * { flex: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.browser.loading .room-table { opacity: 0.6; }
.filters { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.filters .search { max-width: 320px; }
.room-table { display: flex; flex-direction: column; }
.rt-row { display: grid; grid-template-columns: minmax(180px, 2fr) 120px 110px minmax(140px, 1.5fr) 90px 150px; gap: 10px; align-items: center; padding: 9px 8px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.rt-row.head { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.rt-name { display: flex; flex-direction: column; min-width: 0; }
.rt-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.seat-dots { display: inline-flex; align-items: center; gap: 3px; }
.seat-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); }
.seat-dots i.on { background: var(--gold); border-color: var(--gold); }
.state-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; background: rgba(111,220,140,0.12); color: #9ff0b4; justify-self: start; }
.state-chip.playing { background: rgba(255,107,90,0.12); color: #ffc7bf; }
.rt-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* decks */
#decks { display: grid; grid-template-columns: minmax(0, 1fr) 520px; }
.deck-main { padding: 24px 24px 0 28px; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.deck-browser { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.deck-browser .deck-tools { flex-wrap: wrap; }
.deck-browser.in-modal { height: 70vh; }
.deck-art-inner { position: absolute; inset: 0; }
.deck-side { border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,30,0.94), rgba(10,8,16,0.97)); padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.deck-head { display: flex; gap: 14px; }
.deck-head-art { width: 92px; height: 128px; border-radius: 8px; flex: none; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.deck-head-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.deck-head-name { font-family: var(--serif); font-size: 21px; color: var(--gold-2); line-height: 1.15; }
.deck-head-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.deck-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-list { flex: 1; min-height: 0; padding-right: 4px; }
.dl-group { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin: 10px 0 4px; }
.dl-row { display: grid; grid-template-columns: 24px 30px 1fr auto auto; gap: 9px; align-items: center; padding: 3px 6px; font-size: 14px; border-radius: 6px; }
.dl-thumb { width: 30px; height: 22px; border-radius: 4px; background: #211c2d center 22% / 170% no-repeat; box-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.dl-row:hover { background: rgba(255,255,255,0.05); }
.dl-n { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.dl-cost { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; }

/* charts (dataviz: thin marks, hairline grid, text in text tokens) */
.viz-wrap { position: relative; }
.viz { width: 100%; height: auto; display: block; overflow: visible; }
.viz-axis { stroke: #3a3448; stroke-width: 1; }
.viz-grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.viz-fill { fill: #3987e5; }
.viz-bar:hover .viz-fill, .viz-bar:focus .viz-fill { fill: #5598e7; }
.viz-bar { outline: none; }
.viz-val { fill: var(--text); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.viz-tick { fill: var(--muted); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.viz-tick.end { text-anchor: end; } .viz-tick.start { text-anchor: start; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-label { fill: #d8d0e2; font-size: 12px; }
.viz-cross { stroke: rgba(255,255,255,0.35); stroke-width: 1; }
.viz-tip { position: absolute; top: 4px; transform: translateX(-50%); background: #0f0c16; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 6px 9px; font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.5); z-index: 5; }
.viz-tip b { color: #fff; font-variant-numeric: tabular-nums; }
.tip-h { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.55; }
.tip-row b { min-width: 26px; text-align: right; }
.tip-row span { color: #cfc6dc; }
.line-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; flex: none; }
.key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; flex: none; }
.viz-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #d8d0e2; margin-bottom: 6px; }
.viz-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 6px 8px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table thead th { color: var(--muted); font-weight: 500; font-size: 12px; }
.data-table th.rowh, .data-table td:first-child, .data-table thead th:first-child { text-align: left; }
.data-table th.rowh { font-weight: 400; color: #d8d0e2; }
.data-table td.best { color: #fff; font-weight: 700; }
.data-table th.me { color: var(--gold-2); }
.data-table.matrix td.zero { color: #5d566b; }
.data-table.matrix td.lethal { color: #fff; background: rgba(208,59,59,0.28); font-weight: 700; }
.lethal-tag { display: block; font-size: 10px; font-weight: 600; color: #ffb3a8; }
.table-scroll { overflow-x: auto; }
.table-scroll.scroll { max-height: 280px; }

/* room */
#room { display: flex; flex-direction: column; overflow: hidden; }
.room-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; }
.room-main { padding: 18px 24px 20px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.room-header { display: flex; align-items: center; gap: 14px; }
.room-title h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--gold-2); }
.room-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.code-chip { display: flex; flex-direction: column; align-items: center; background: rgba(232,184,92,0.08); border: 1px solid var(--line); border-radius: 12px; padding: 6px 16px; color: var(--gold-2); }
.code-chip small { font-size: 10px; letter-spacing: 0.2em; color: var(--muted); }
.code-chip b { font-family: Consolas, 'Cascadia Mono', monospace; font-size: 24px; letter-spacing: 0.18em; }
.code-chip:hover { background: rgba(232,184,92,0.16); }
.seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.seats.n3 .seat:last-child { grid-column: span 2; }
.seat { position: relative; min-height: 196px; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(30,25,44,0.94), rgba(16,13,24,0.96)); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.seat > * { position: relative; z-index: 1; }
.seat .seat-art { position: absolute; inset: 0; z-index: 0; opacity: 0.32; background-size: cover; background-position: 50% 22%; }
.seat .seat-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,11,20,0.96) 30%, rgba(14,11,20,0.55)); }
.seat.mine { border-color: var(--line); box-shadow: inset 0 0 0 1px rgba(232,184,92,0.25); }
.seat.ready { border-color: rgba(111,220,140,0.45); }
.seat.seat-open { border: 1.5px dashed rgba(255,255,255,0.18); background: rgba(16,13,24,0.6); }
.seat.seat-closed { background: rgba(10,8,14,0.6); opacity: 0.8; }
.seat-top { display: flex; align-items: center; justify-content: space-between; }
.seat-no { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.team-badge { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 9px; border: 0; }
.team-badge.t0 { background: rgba(57,135,229,0.25); color: #b8d6ff; } .team-badge.t1 { background: rgba(217,89,38,0.25); color: #ffc9b0; }
.team-badge:disabled { cursor: default; }
.seat-who { display: flex; gap: 12px; align-items: center; }
.seat-name { min-width: 0; }
.sn { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.crown { color: var(--gold-2); font-size: 15px; }
.you { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1005; background: var(--gold-2); border-radius: 6px; padding: 1px 6px; }
.tag { font-size: 10px; color: var(--gold); margin-left: 4px; }
.seat-deck { min-height: 44px; }
.sd-name { font-family: var(--serif); font-size: 15px; }
.sd-cmd { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.seat-status { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.seat-tools { display: flex; gap: 5px; margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.seat:hover .seat-tools, .seat:focus-within .seat-tools { opacity: 1; }
.seat-ai-tools { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: auto; }
.seat-ai-tools .sel { min-width: 0; }
.seat-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; }
.se-title { font-family: var(--serif); font-size: 18px; }
.seat-empty-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.my-deck .my-deck-row { display: flex; gap: 10px; }
.validation { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.validation .vi { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.validation.ok { background: rgba(111,220,140,0.08); border: 1px solid rgba(111,220,140,0.25); } .validation.ok .vi { background: rgba(111,220,140,0.2); color: var(--ok); }
.validation.bad { background: rgba(255,110,90,0.08); border: 1px solid rgba(255,110,90,0.3); } .validation.bad .vi { background: rgba(255,110,90,0.2); color: #ffb3a8; }
.validation.warn { background: rgba(255,207,112,0.07); border: 1px solid rgba(255,207,112,0.25); } .validation.warn .vi { background: rgba(255,207,112,0.18); color: var(--warn); }
.issues { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.issue { display: flex; gap: 10px; align-items: baseline; font-size: 13px; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,0.03); }
.issue .ik { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #ffb3a8; min-width: 92px; }
.room-side { border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,30,0.95), rgba(10,8,16,0.97)); display: flex; flex-direction: column; min-height: 0; }
.side-tabs { display: flex; gap: 4px; padding: 12px 14px 0; border-bottom: 1px solid var(--hair); }
.side-tabs .tab { border-radius: 10px 10px 0 0; padding: 9px 12px; }
.side-tabs .tab.active { border-bottom-color: transparent; }
.room-side-body { flex: 1; min-height: 0; padding: 14px 16px 18px; }
.rules { display: flex; flex-direction: column; gap: 18px; }
.rule-section { display: flex; flex-direction: column; gap: 10px; }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rule.col { grid-template-columns: 1fr; }
.rule-t { font-size: 13.5px; }
.rule-h { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.rule-c { display: flex; justify-content: flex-end; }
.rule-c .text-in { width: 200px; }
.rule-c .seg { min-width: 150px; }
.rule-c .sel { max-width: 190px; }
.rule-fixed { margin-top: -2px; }
.ban-editor { display: flex; flex-direction: column; gap: 6px; }
.ban-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ban-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 9px; border-radius: 12px; background: rgba(208,59,59,0.16); color: #ffc7bf; border: 1px solid rgba(208,59,59,0.35); }
.ban-chip.allow { background: rgba(111,220,140,0.12); color: #aff2c0; border-color: rgba(111,220,140,0.3); }
.ban-chip button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.3); color: inherit; font-size: 13px; line-height: 1; padding: 0; }
.ban-list { max-height: 50vh; margin-top: 10px; }
.ban-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.ban-row .bn { flex: 1; }
.ban-row.allowed .bn { color: var(--ok); }
.house-rules { min-height: 90px; margin-top: 6px; font-family: var(--sans); font-size: 13px; }
.chat { display: flex; flex-direction: column; gap: 6px; }
.chat-sys { font-size: 12px; color: var(--muted); font-style: italic; text-align: center; padding: 2px 0; }
.chat-msg { font-size: 13.5px; line-height: 1.4; }
.chat-head { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.chat-name { background: none; border: 0; padding: 0; font-weight: 700; font-size: 13px; }
.chat-text { color: #e7e0ee; word-wrap: break-word; user-select: text; }
.chat-msg.mine .chat-text { color: #fff4dd; }
.chat-input { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--hair); }
.people { display: flex; flex-direction: column; gap: 6px; }
.people .section-title { margin-top: 8px; }
.person { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.person-t { flex: 1; min-width: 0; font-size: 13.5px; }
.person-t > div:first-child { display: flex; align-items: center; gap: 6px; }
.person-tools { display: flex; gap: 4px; }
.room-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,30,0.97), rgba(10,8,16,0.99)); zoom: var(--ui-scale); }
.room-bar-status { flex: 1; display: flex; align-items: center; font-size: 14px; min-width: 0; }
.room-bar-actions { display: flex; align-items: center; gap: 10px; }
.play-btn.bar-btn { margin: 0; height: 52px; padding: 0 38px; font-size: 20px; }
.play-btn.bar-btn.is-ready { background: linear-gradient(180deg, #9cf0b2, #3fae66 60%, #2a8a4c); box-shadow: 0 0 0 1px #c9ffd8 inset, 0 8px 26px rgba(80, 220, 120, 0.3); }

/* results */
#results { display: flex; flex-direction: column; overflow: hidden; }
.results-wrap { flex: 1; overflow-y: auto; padding: 22px 28px 26px; }
.results-hero { text-align: center; padding: 18px 0 20px; }
.rh-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.rh-title { font-family: var(--serif); font-size: 64px; letter-spacing: 0.14em; color: #d8d0e2; margin-top: 4px; }
.results-hero.win .rh-title { color: var(--gold-2); text-shadow: 0 0 40px rgba(255,190,90,0.6); }
.results-hero.lose .rh-title { color: #c9c2d6; text-shadow: 0 0 30px rgba(120,100,180,0.5); }
.rh-sub { color: #cfc6dc; font-size: 15px; margin-top: 4px; }
.rh-place { display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--gold-2); font-size: 13px; }
.results-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 16px; max-width: 1500px; margin: 0 auto; }
.rg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.place-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--hair); }
.place-row:last-child { border-bottom: 0; }
.place-row.me { background: rgba(232,184,92,0.05); border-radius: 8px; }
.place-num { width: 42px; font-family: var(--serif); font-size: 20px; color: var(--muted); text-align: center; }
.place-num.p1 { color: var(--gold-2); font-size: 24px; }
.place-art { width: 44px; height: 58px; border-radius: 6px; flex: none; }
.place-main { flex: 1; min-width: 0; }
.place-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px; min-width: 0; }
.place-name .pn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.place-main { min-width: 0; }
.place-main .deck-pips { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; }
.place-out { color: #d8d0e2; margin-top: 3px; }
.place-row.won .place-out { color: var(--gold-2); }
.place-life { text-align: right; }
.place-life b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.place-life small { color: var(--muted); font-size: 11px; }
.highlights { display: flex; flex-direction: column; gap: 8px; }
.highlight { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,0.03); }
.hl-v { min-width: 52px; font-size: 26px; font-weight: 600; text-align: center; color: #fff; }
.hl-t { font-size: 13.5px; }
.results-bar { flex: none; }
.report-desc { min-height: 140px; font-family: var(--sans); font-size: 13.5px; }
.report .field { margin-bottom: 10px; }

/* settings */
#settings { overflow: hidden; }
.settings-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: 100%; }
.settings-nav { border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,30,0.95), rgba(10,8,16,0.97)); padding: 22px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.sn-item { text-align: left; background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; color: var(--text); display: flex; flex-direction: column; }
.sn-item span { font-size: 14.5px; } .sn-item small { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.sn-item:hover { background: rgba(255,255,255,0.04); }
.sn-item.active { border-color: var(--line); background: rgba(232,184,92,0.08); } .sn-item.active span { color: var(--gold-2); }
.settings-nav .back { margin-top: 16px; }
.settings-body { padding: 24px 32px 50px; min-height: 0; }
.settings-content { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.sgroup .panel-head { margin-bottom: 6px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.srow:last-child { border-bottom: 0; }
.srow-t { font-size: 14px; }
.srow-h { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; max-width: 560px; }
.srow-c { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.srow-c .seg { min-width: 260px; }
.srow-c .text-in { width: 280px; }
.stops-table { display: flex; flex-direction: column; }
.st-row { display: grid; grid-template-columns: 1fr 110px 140px; align-items: center; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--hair); }
.st-row.head { color: var(--muted); font-size: 12px; }
.st-row input { justify-self: center; width: 16px; height: 16px; accent-color: var(--gold); }
.st-row.head span:not(:first-child) { text-align: center; }
.key-btn { min-width: 150px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 7px 12px; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 13px; color: var(--gold-2); }
.key-btn.capturing { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,184,92,0.2); animation: livePulse 1.2s infinite; }
.test-sounds { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-edit { display: flex; gap: 20px; align-items: flex-start; padding: 12px 0; }
.pe-right { flex: 1; }
.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 6px; margin-top: 6px; }
.pe-right { min-width: 0; }
.avatar-picker .ap { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; background: none; padding: 0; display: grid; place-items: center; }
.avatar-picker .ap.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,184,92,0.5); }
.color-picker { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.color-picker .cp { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.5); }
.color-picker .cp.on { box-shadow: 0 0 0 2px #fff; }
.addr-row { display: flex; gap: 8px; align-items: center; }
.addr-row .text-in { width: 300px; }
.test-result { font-size: 13px; padding: 6px 10px; border-radius: 8px; margin: 2px 0 8px; background: rgba(255,255,255,0.04); }
.test-result.ok { color: #9ff0b4; } .test-result.bad { color: #ffb3a8; }
.privacy { margin: 0; padding-left: 18px; color: #d8d0e2; font-size: 13px; line-height: 1.55; }
.privacy li { margin: 4px 0; }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin-bottom: 14px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.kv span:last-child { text-align: right; overflow-wrap: anywhere; }
.about-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.log-tail { max-height: 320px; margin: 0; font-family: Consolas, 'Cascadia Mono', monospace; font-size: 11.5px; line-height: 1.45; color: #cfc6dc; white-space: pre-wrap; user-select: text; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px; }
.credits { line-height: 1.55; }

/* in-game additions */
.menu-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 12px; color: var(--text); }
.menu-item span { font-size: 14px; } .menu-item small { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.menu-item:hover { border-color: var(--line); background: rgba(232,184,92,0.06); }
.menu-item.danger span { color: #ffb3a8; }
#game-ui.spectating #btn-secondary, #game-ui.spectating #phase-ladder { display: none !important; }
#game-ui.spectating #btn-main { filter: none; background: linear-gradient(180deg, rgba(60,50,80,0.9), rgba(30,24,44,0.95)); box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset; }
.btn-main.urgent { animation: urgent 0.9s ease-in-out infinite; }
@keyframes urgent { 50% { box-shadow: 0 0 0 3px rgba(255,90,70,0.7), 0 0 30px rgba(255,90,70,0.6); } }
.nudge { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 96; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255,120,100,0.6); background: linear-gradient(180deg, rgba(64,28,40,0.97), rgba(30,16,24,0.98)); color: var(--text); font-size: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.6); animation: toastIn 0.25s ease-out; }
.nudge b { color: var(--gold-2); }
.fps { position: absolute; right: 8px; bottom: 6px; z-index: 99; font: 11px Consolas, monospace; color: #9ff0b4; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
#captions { position: absolute; left: 24px; bottom: 120px; z-index: 97; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.caption { background: rgba(0,0,0,0.78); color: #fff; font-size: 14px; padding: 3px 9px; border-radius: 6px; width: fit-content; animation: toastIn 0.2s ease-out; }
#action-cluster, #phase-ladder, #top-bar, #zoom-pill, #log-panel, #card-preview, .plate > *, #dialog-layer .modal, #zone-viewer .modal, #game-menu .modal, #game-over .modal, #toasts, .connection-lost { zoom: var(--ui-scale); }
body[data-preview="small"] .preview-card { width: 230px; } body[data-preview="small"] .preview-details { width: 210px; font-size: 11.5px; }
body[data-preview="large"] .preview-card { width: 380px; } body[data-preview="large"] .preview-details { width: 290px; font-size: 13.5px; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
body.reduced-motion .live-dot, body.reduced-motion .dot.wait { animation: none !important; }
body.fast-anim #turn-banner .tb-inner { animation-duration: 0.9s; }
body.reduce-flashing .flash-red { display: none; }
body.reduce-flashing .btn-main.urgent { animation: none; box-shadow: 0 0 0 3px rgba(255,90,70,0.8); }
body.high-contrast .card-tile.selectable::after { box-shadow: 0 0 0 4px #ffe14d, 0 0 0 6px #000; }
body.high-contrast .card-tile.sel { box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #000; }
body.high-contrast .plate.selectable .avatar { border-color: #ffe14d; box-shadow: 0 0 0 4px #ffe14d, 0 0 0 7px #000; }
body.high-contrast .chip, body.high-contrast .panel { border-color: rgba(255,255,255,0.28); }
body.high-contrast .muted { color: #c9c2d6; }
body:not(.cb-pips) .deck-pips .pip { color: transparent; }

.seat-meta { display: flex; align-items: center; gap: 6px; }
.mode-card .mode-head > .ghost-btn { white-space: nowrap; flex: none; align-self: flex-start; }

/* ---------------------------------------------------------------- 0.2.4 Steam Deck / Proton */
.shell-quit { width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--panel); border: 1px solid rgba(255,255,255,0.12); color: var(--muted); }
.shell-quit:hover, .shell-quit:focus-visible { color: #ff9d8a; border-color: rgba(255,122,102,0.6); }
.menu-panel { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.menu-panel .modal-body { overflow-y: auto; min-height: 0; }
.dropdown-back { position: fixed; inset: 0; z-index: 900; }
.dropdown-list { position: fixed; z-index: 901; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; background: #16121f; border: 1px solid rgba(232,184,92,0.35); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,0.6); }
.dropdown-item { text-align: left; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 14px; white-space: nowrap; }
.dropdown-item:hover, .dropdown-item:focus-visible { background: rgba(255,255,255,0.08); }
.dropdown-item.on { color: var(--gold-2); background: rgba(232,184,92,0.12); }
.dropdown-item:disabled { opacity: 0.4; }
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row .code-in { flex: 1; min-width: 0; }
.keypad { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.keypad-display { display: flex; gap: 8px; align-items: center; font-family: Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace; font-size: 30px; }
.kp-slot { width: 44px; height: 54px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--gold-2); }
.kp-slot.cur { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,184,92,0.25); }
.kp-dash { color: var(--muted); }
.keypad-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: 100%; }
.kp-key { height: 48px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: var(--text); font-size: 18px; font-weight: 600; }
.kp-key:hover, .kp-key:focus-visible { border-color: var(--gold); color: var(--gold-2); }
.kp-key.wide { grid-column: span 1; font-size: 13px; font-weight: 500; }
.pad-btn { display: inline-block; min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); font-weight: 600; font-size: 13px; }
.name-callout { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: rgba(232,184,92,0.4); margin-bottom: 14px; }
.name-callout .name-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.name-callout .text-in { width: 220px; }

/* An opened touch hand lands exactly where the phase ladder sits, and the ladder is decoration — the phase
   is named in the turn indicator. It steps aside until the hand tucks again. */
body.hand-open #phase-ladder { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- touch */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#stage canvas { touch-action: none; }
/*
 * Holding a card reads it — that press must not also be iOS's "select and copy" gesture, which grey-washes
 * the whole page behind a callout bar. Safari needs both the prefixed properties: the unprefixed
 * `user-select` at the top of this file does not suppress the callout, and older iOS ignores it entirely.
 * Fields and anything else deliberately selectable opt back in below.
 */
html, body, #app, #game-ui, #stage, #stage canvas { -webkit-touch-callout: none; -webkit-user-select: none; }
input, select, textarea, .path, .chat-text, .log-tail, #log-list, .import-result { -webkit-user-select: text; -webkit-touch-callout: default; }
.viz-hit { touch-action: pan-y; }
body.device-deck .seat-tools, body.touch-used .seat-tools { opacity: 1; }
.touch-tip { position: fixed; z-index: 1000; max-width: min(320px, 90vw); padding: 7px 11px; border-radius: 8px; background: #221b2e; border: 1px solid rgba(232,184,92,0.45); color: var(--text); font-size: 13px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,0.5); pointer-events: none; animation: tipIn 0.12s ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.drag-scrolling, body.drag-scrolling * { cursor: grabbing !important; }
/* bigger hit areas for fingers, without moving anything */
body:is(.device-deck, .touch-used) :is(.plate-eye, .ghost-btn.tiny, .ghost-btn.small, .stepper button, .shell-quit, .sv-back, .plate-stats span, .seg button, .presets button, .phase, .switch, .pbadge, .code-chip) { position: relative; }
body:is(.device-deck, .touch-used) :is(.plate-eye, .ghost-btn.tiny, .ghost-btn.small, .stepper button, .shell-quit, .sv-back, .seg button, .presets button, .switch, .code-chip)::before { content: ''; position: absolute; inset: -7px; }
body:is(.device-deck, .touch-used) :is(.plate-stats span, .phase)::before { content: ''; position: absolute; inset: -5px -3px; }
body:is(.device-deck, .touch-used) .dropdown-item { padding: 12px 14px; }
body:is(.device-deck, .touch-used) .plate-eye { width: 34px; height: 34px; }

/* ---------------------------------------------------------------- controller pointer (Steam Deck) */
.pad-cursor { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; margin: -2px 0 0 -3px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); will-change: transform; }
.pad-click { position: fixed; left: 0; top: 0; z-index: 1999; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(255, 217, 138, 0.9); animation: padClick 0.35s ease-out forwards; }
.pad-click.right { border-color: rgba(159, 212, 255, 0.9); }
@keyframes padClick { from { opacity: 1; scale: 0.4; } to { opacity: 0; scale: 1.2; } }
#stage canvas.drag-play { cursor: grabbing; }
.modal-pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.modal-pager .mp-count { font-size: 12px; color: var(--muted); margin-right: auto; }

.preview-details .pd-text { margin-top: 8px; white-space: pre-wrap; }
.preview-details .pd-keys { margin-top: 9px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.preview-details .pd-head { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2); }
.preview-details .pd-key { font-size: 12px; line-height: 1.35; color: #d8d2e4; }
.preview-details .pd-key b { color: #fff; }
.preview-details .pd-key.muted { color: var(--muted); }
.preview-details .attached-to { margin-top: 8px; color: var(--gold-2); }

/* ---- choosing which art a deck uses for a card ---- */
.dl-row { position: relative; }
/* the button is always there now — it was a hover-only icon that most people never found */
.dl-art { flex: none; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; opacity: 0.85; transition: opacity 0.12s; }
.dl-row:hover .dl-art, .dl-art:focus-visible, .dl-art.on { opacity: 1; }
.dl-art:hover { color: var(--gold); border-color: rgba(232,184,92,0.5); background: rgba(232,184,92,0.12); }
.dl-art.on { color: var(--gold-2); border-color: rgba(232,184,92,0.45); background: rgba(232,184,92,0.1); }
.ap-body { display: flex; flex-direction: column; gap: 10px; }
.ap-stage { display: flex; align-items: center; gap: 8px; }
.ap-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ap-preview { width: 240px; max-width: 100%; aspect-ratio: 488 / 680; border-radius: 12px; overflow: hidden; position: relative;
  background: rgba(255,255,255,0.05); display: grid; place-items: center; }
.ap-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-img.missing { opacity: 0.25; }
.ap-renamed { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; background: rgba(8,10,15,0.82); text-align: center; }
.ap-caption { font-size: 12.5px; text-align: center; }
.ap-counter { font-size: 11.5px; }
.ap-arrow { flex: none; width: 38px; height: 58px; font-size: 22px; line-height: 1; padding: 0; }
.ap-arrow[disabled] { opacity: 0.3; cursor: default; }
.ap-search { width: 100%; }
.ap-results { max-height: 190px; overflow-y: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.ap-row { display: flex; align-items: center; gap: 8px; padding: 5px 9px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ap-row:last-child { border-bottom: 0; }
.ap-row:hover { background: rgba(255,255,255,0.06); }
.ap-row.on { background: rgba(232,184,92,0.16); color: var(--text); }
.ap-set { flex: none; min-width: 42px; font-weight: 700; color: var(--gold-2); }
.ap-setname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ap-cn { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-more { padding: 6px 9px; font-size: 11.5px; }
.ap-copies { display: flex; align-items: center; gap: 10px; }
.ap-range { flex: 1; }

/* ---------- sign in (hosted play only) ---------- */
.signin-screen { z-index: 40; display: grid; place-items: center; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 35%, #2a1d3d 0%, #0b0911 60%, #050408 100%); transition: opacity .2s ease; }
.signin-screen.leaving { opacity: 0; pointer-events: none; }
.signin-inner { width: min(420px, 92vw); padding: 32px 0; }
.signin-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.signin-card .logo { font-size: 22px; letter-spacing: .22em; gap: 10px; }
.signin-card .logo-mark { width: 30px; height: 30px; }
.signin-card .logo-mark::after { inset: 6px; }
.signin-where { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 22px; }
.signin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0,0,0,.28);
  border: 1px solid var(--hair); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.signin-tab { background: none; border: 0; border-radius: 7px; padding: 9px 6px; font-size: 13px; color: var(--muted); transition: background .15s, color .15s; }
.signin-tab:hover { color: var(--text); }
.signin-tab.on { background: rgba(232,184,92,.16); color: var(--gold-2); }
.signin-field { margin-bottom: 14px; }
.signin-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.signin-field .inp { width: 100%; }
.signin-hint { margin-top: 5px; min-height: 13px; }
.signin-hint:empty { min-height: 0; }
.signin-error { color: var(--bad); font-size: 13px; min-height: 18px; margin: 2px 0 12px; }
.signin-error:empty { min-height: 0; margin-bottom: 4px; }
.signin-foot { margin: 18px 0 0; text-align: center; line-height: 1.5; }
.signin-screen .pbtn[disabled] { opacity: .6; cursor: default; }

/* ==================================================================================================
   Small screens: phones and tablets
   ==================================================================================================
   The rules here only ever *add* to the desktop layout below a breakpoint — nothing above 900px wide
   changes shape. Two ideas run through all of it:

   1. The match is landscape. A Commander table has four seats and a hand; in portrait the cards end up
      smaller than their own rules text. #rotate-hint asks for landscape instead, so the board always has
      roughly the proportions every camera angle in the scene was built against.
   2. Menus are not. Reading a deck list or typing a password is fine in portrait, so the menu screens
      simply stop being two columns and stack.
   ================================================================================================== */

:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
        --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }

/* ---------- turn your device sideways ---------- */
#rotate-hint { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #241a35 0%, #0b0911 62%, #050408 100%);
  padding: 24px calc(24px + var(--safe-r)) 24px calc(24px + var(--safe-l)); }
#rotate-hint .rot-inner { max-width: 340px; }
#rotate-hint h2 { font-family: var(--serif); font-size: 22px; color: var(--gold-2); margin: 22px 0 10px; font-weight: 600; }
#rotate-hint p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.rot-phone { width: 64px; height: 104px; margin: 0 auto; border: 2px solid var(--gold); border-radius: 10px;
  position: relative; animation: rot-turn 2.6s ease-in-out infinite; }
.rot-phone .rot-screen { position: absolute; inset: 7px; border-radius: 3px; background: rgba(232,184,92,0.16); }
@keyframes rot-turn { 0%, 28% { transform: rotate(0deg); } 55%, 88% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rot-phone { animation: none; transform: rotate(-90deg); } }
/* the board keeps rendering behind the prompt, but nothing is clickable through it */
body.needs-landscape #game-ui { pointer-events: none; }

/* ==================================================================================================
   The match HUD
   Everything in #game-ui is absolutely positioned against the viewport, so each piece needs its own
   answer. The hard case is a phone in landscape: ~844x390, where height is what runs out.
   ================================================================================================== */

@media (max-width: 1000px), (max-height: 560px) {
  /* keep the whole HUD clear of notches and the home indicator */
  /* stretching the bar to the full width lets its contents wrap, but #game-ui > * gives it pointer
     capture — so as a full-width box it would swallow every tap across the top of the screen, including
     the opponent chips sitting in the same band. The bar itself stops catching; its children still do. */
  #top-bar { left: calc(16px + var(--safe-l)); top: calc(10px + var(--safe-t)); right: calc(16px + var(--safe-r)); gap: 8px;
    pointer-events: none; }
  #top-bar > * { pointer-events: auto; }
  #log-panel { right: calc(10px + var(--safe-r)); top: calc(10px + var(--safe-t)); }
  #action-cluster { right: calc(16px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); }
  .plate.bottom-seat { left: calc(14px + var(--safe-l)) !important; bottom: calc(14px + var(--safe-b)) !important; }
  #captions { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(96px + var(--safe-b)); text-align: center; }

  /* the ladder is 360px of decoration; the phase name is already in the turn indicator */
  #phase-ladder { display: none; }

  /* the flip's words, small enough to sit under the coin without covering the board */
  #coin-flip .coin-result { font-size: 15px; padding: 6px 16px; }

  /* a card preview that is wider or taller than the screen helps nobody */
  #card-preview { gap: 8px; }
  #card-preview .preview-card { width: min(300px, 40vw, calc((100dvh - 90px) * 0.717)); height: auto; }
  #card-preview .preview-details { width: min(250px, 38vw); max-height: calc(100dvh - 110px); overflow-y: auto; }

  /* the log is a sheet pinned to the right, never wider than half the screen */
  #log-panel { width: min(360px, 56vw); max-height: min(52dvh, calc(100dvh - 90px)); }
  .log-search { width: 64px; }

  #turn-banner .tb-inner { font-size: clamp(22px, 6vw, 44px); padding: 12px clamp(20px, 8vw, 80px); }
  .go-title { font-size: clamp(30px, 9vw, 64px); }
  .menu-panel { width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
  .num-row input[type=range] { width: min(320px, 60vw); }
  .stack-label { max-width: min(300px, 60vw); }
}

/* A short viewport (phone held sideways) is mostly a height problem. */
@media (max-height: 460px) {
  #action-cluster .btn-main { height: 50px; min-width: 140px; font-size: 15px; }
  #action-cluster .btn-secondary { height: 34px; }
  .plate .avatar { width: 56px; height: 56px; }
  .plate.small .avatar { width: 46px; height: 46px; }
  .plate-info { min-width: 0; }
  #top-bar { top: calc(6px + var(--safe-t)); }
  #btn-menu, #btn-topdown, #btn-hand { width: 36px; height: 36px; }
  #zoom-pill { transform: scale(0.9); transform-origin: right center; }
  #captions { bottom: calc(78px + var(--safe-b)); }
}

/* ==================================================================================================
   Menu screens: stack instead of squeezing
   ================================================================================================== */

@media (max-width: 1080px) {
  .settings-wrap { grid-template-columns: 220px minmax(0, 1fr); }
  .srow-c .text-in, .addr-row .text-in { width: 100%; max-width: 280px; }
  .srow-c .seg { min-width: 0; }
  .slider { min-width: 0; }
}

/* Stacking is for narrow screens, not short ones. A phone held sideways has 844px of width and only 390px
   of height: stacking there would push everything below the fold, when what it actually needs is less
   vertical chrome and the columns kept. So the stack is tied to portrait, and landscape gets its own pass. */
@media (max-width: 900px) and (orientation: portrait) {
  /* every two-column app screen becomes one column, side rail last */
  .home-wrap, #decks, .room-wrap, .results-grid, .settings-wrap {
    grid-template-columns: minmax(0, 1fr); }
  .home-wrap { padding: 18px 16px; gap: 16px; }
  .settings-wrap { grid-template-rows: auto minmax(0, 1fr); }
  .settings-nav { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; }
  .sn-item { flex: 0 0 auto; }
  .sn-item small { display: none; }
  .settings-body { padding: 18px 16px; }
  .deck-side, .room-side { max-height: none; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .seats { grid-template-columns: minmax(0, 1fr); }
  .kv-grid { grid-template-columns: minmax(0, 1fr); }
  /* the room browser is a real table: let it scroll sideways rather than crush every column */
  .room-table { overflow-x: auto; }
  .rt-row { min-width: 760px; }
  .avatar-picker { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .results-wrap { padding: 0 16px; }
  .rule-c .text-in { width: 100%; max-width: 200px; }
  .rule-c .seg { min-width: 0; }
}

@media (max-width: 640px) {
  /* phone: one column everywhere, smaller headings, controls at full width */
  .quick, .stat-tiles, .st-row, .field-row { grid-template-columns: minmax(0, 1fr); }
  .st-row { gap: 6px; }
  .srow, .rule { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
  .srow-c, .rule-c { justify-content: flex-start; }
  .srow-c .text-in, .rule-c .text-in, .addr-row .text-in, .key-btn { width: 100%; max-width: none; }
  .hero-title, .rh-title { font-size: clamp(26px, 8vw, 44px); line-height: 1.1; }
  .screen-title { font-size: 22px; }
  .settings-body, .deck-main, .room-main { padding: 14px 12px; }
  .home-wrap { padding: 14px 12px; }
  .panel { border-radius: 12px; }
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .modal { width: min(560px, 96vw) !important; max-height: 88dvh; }
  .app-modal .modal { max-height: 88dvh; }
  .deck-browser.in-modal { height: 62dvh; }
  .ban-list { max-height: 46dvh; }
  .code-in.big { font-size: 26px; letter-spacing: 0.16em; }
  .keypad-grid { grid-template-columns: repeat(4, 1fr); }
  .shell-brand span:last-child { display: none; }
  .nav-tab { padding: 8px 11px; }
}

/* The shell header must never push its tabs off the screen. Below a tablet it drops the wordmark text,
   then the connection pills (the Home screen reports the same thing in full), then the profile name —
   in that order, because each is the least useful thing still present when the row runs out of room. */
@media (max-width: 820px) {
  #shell { gap: 8px; padding: 0 calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
  .shell-nav { margin-left: 4px; gap: 2px; }
  .shell-status .lbl { display: none; }
}
@media (max-width: 700px) {
  .shell-status { display: none; }
  .shell-profile span { display: none; }
  .shell-profile { padding: 3px; gap: 0; }
  .settings-wrap { padding-top: 0; }
}
@media (max-width: 460px) {
  .nav-tab { padding: 8px 9px; font-size: 13px; }
  #shell { gap: 4px; }
}

/* ==================================================================================================
   Touch
   No hover means anything revealed by hovering has to be reachable another way, and anything worth
   tapping has to be big enough to hit.
   ================================================================================================== */

/* The art picker button is the only way into choosing a card's printing — it cannot be hover-only. */
body.touch-used .dl-art, body.device-deck .dl-art { opacity: 1; }
body.touch-used .dl-art, body.device-deck .dl-art,
body.touch-used .ban-chip button, body.device-deck .ban-chip button { min-width: 34px; min-height: 34px; }

@media (pointer: coarse) {
  /* comfortable targets: nothing you are meant to tap should be under ~40px */
  .dl-art { opacity: 1; height: 34px; }
  .ban-chip button { width: 30px; height: 30px; font-size: 16px; }
  .st-row input[type=checkbox] { width: 24px; height: 24px; }
  .color-picker .cp, .pip { width: 36px; height: 36px; }
  .cs-item { padding: 11px 13px; }
  .dist-ctrl button { width: 42px; height: 42px; }
  #zoom-pill button { width: 38px; height: 34px; }
  .tab, .nav-tab, .ghost-btn, .danger-btn, .sbtn, .pbtn { min-height: 40px; }
  .pbtn.small, .sbtn.small, .ghost-btn.small { min-height: 36px; }
  .ghost-btn.tiny { min-height: 32px; }
  .avatar-picker .ap { min-width: 44px; min-height: 44px; }
  /* a caret that only appears on hover is invisible on a touchscreen */
  .seat-tools, .dl-art { opacity: 1; }
}

/* ==================================================================================================
   Phone match layout
   The opponents stop being three more mats competing with yours and become one compact rail along the
   top. Everything the plate showed is still there — life, hand, library, graveyard, commander damage,
   what they are doing, and the eye that looks at their board — just at a size that leaves the table
   the screen it needs.
   ================================================================================================== */

/* the container still covers the screen, so the bottom-seat plate can stay pinned bottom-left; the
   opponents flow as a centred row under the top bar, and absolute children sit out of that flow */
#plates.rail { display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-wrap: nowrap;
  padding: calc(42px + var(--safe-t)) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l)); }
/* sharing the top band with the menu buttons and the turn indicator: no row of its own, no height spent */
#plates.rail.inline { justify-content: flex-start; align-items: flex-start; }
#plates.rail.inline { gap: 4px; }
#plates.rail.inline .plate:not(.bottom-seat) { max-width: none; }

/* A chip is an avatar with a life total and two short lines. The eye button is gone — its 32px plus a gap
   was a third of the chip — and tapping the name or the counts looks at that player's board instead.
   Graveyard and exile counts go too: they matter, but not enough to spend a phone's width on every frame,
   and they are one tap away in that player's view. */
/* The avatar stands on its own with its life ring, and the counts are their own small pill beside it —
   the same two-piece shape the plates have always had, just small. Wrapping the avatar in a pill clipped
   the life band off its bottom edge. */
#plates.rail .plate:not(.bottom-seat) {
  position: static; transform: none; overflow: visible; flex: 0 1 auto; min-width: 0; gap: 4px;
  align-items: center; background: none; border: 0; padding: 0; }
#plates.rail .plate .avatar { width: 34px; height: 34px; }
#plates.rail .plate .avatar .life { font-size: 13px; }
/* One line, no name: the avatar is that player's commander art, which tells them apart better than six
   truncated characters would, and tapping the chip opens their seat where the name is written in full.
   A one-line chip is also narrow enough to sit beside the turn indicator instead of below it. */
#plates.rail .plate-info { min-width: 0; gap: 0; cursor: pointer; display: flex; align-items: center;
  border-radius: 999px; padding: 3px 7px; background: rgba(14, 12, 20, 0.8); }
#plates.rail .plate-name { display: none; }
#plates.rail .plate-stats { font-size: 10px; line-height: 1; gap: 4px; }
#plates.rail .plate-stats span:nth-child(n+3) { display: none; }
#plates.rail .plate-doing { display: none; }
#plates.rail .plate-mana { margin-top: 1px; }
#plates.rail .plate-badges { gap: 2px; }
#plates.rail .plate-badges > * { font-size: 9px; padding: 0 4px; }
/* the eye stays, as a small glyph rather than a button: without it nothing says the chip can be tapped */
#plates.rail .plate-eye { width: 18px; height: 18px; border: 0; background: none; opacity: 0.55;
  margin-left: -3px; align-self: center; flex: none; padding: 0; }
#plates.rail .plate-eye svg { width: 13px; height: 13px; }
#plates.rail .plate-eye::before { content: ''; position: absolute; inset: -9px; }

/* your own plate: you know your own name, so it is a life ring and your counts and nothing else */
body.phone-match .plate.bottom-seat { gap: 6px; background: none; border: 0; padding: 0; }
body.phone-match .plate.bottom-seat .plate-info { min-width: 0; border-radius: 999px; padding: 4px 10px; }
body.phone-match .plate.bottom-seat .avatar { width: 38px; height: 38px; }
body.phone-match .plate.bottom-seat .avatar .life { font-size: 14px; }
body.phone-match .plate.bottom-seat .plate-name { display: none; }
body.phone-match .plate.bottom-seat .plate-stats { font-size: 10px; gap: 5px; }
body.phone-match .plate.bottom-seat .plate-doing { display: none; }

/* less chrome overall: the board is the thing worth looking at */
body.phone-match #top-bar { gap: 6px; }
body.phone-match #btn-menu, body.phone-match #btn-topdown, body.phone-match #btn-hand { width: 34px; height: 34px; }
body.phone-match #turn-indicator { font-size: 12px; padding: 5px 9px; }
body.phone-match #log-toggle { padding: 5px 10px; font-size: 12px; }
body.phone-match #action-cluster .btn-main { height: 52px; min-width: 132px; font-size: 15px; }
body.phone-match #action-cluster .btn-secondary { height: 34px; font-size: 12px; padding: 0 12px; }
body.phone-match #action-hint { display: none; }

/* ==================================================================================================
   Short and wide: a phone held sideways in the menus
   Width is plentiful here and height is not, so the columns stay and the chrome gives up its padding.
   ================================================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --shell-h: 44px; }
  .shell-brand span:last-child { display: none; }
  .shell-status { display: none; }
  .shell-profile span { display: none; }
  .shell-profile { padding: 3px; gap: 0; }
  .nav-tab { padding: 6px 10px; font-size: 13px; }

  .settings-wrap, .room-wrap, #decks, .home-wrap, .results-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
  .settings-wrap { grid-template-columns: 200px minmax(0, 1fr); }
  .sn-item { padding: 6px 10px; }
  .sn-item small { display: none; }

  .screen-title { font-size: 18px; margin: 0 0 8px; }
  .room-header { padding: 8px 0 6px; }
  .room-main, .deck-main, .settings-body, .home-wrap { padding: 10px 14px; }
  .room-bar, .deck-side, .room-side { padding-top: 8px; padding-bottom: 8px; }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .seat { min-height: 0; }
  .seat .avatar { width: 46px; height: 46px; }
  .hero { padding: 12px 14px; }
  .hero-title { font-size: 22px; }
  .quick, .modes { gap: 8px; }
  /* with a side rail taking 320px there is not room for three cards across: their titles shred */
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-title, .mode-title { font-size: 15px; }
  .mode-head .sigil, .mode-head svg { width: 38px; height: 38px; }
}

/* The decision bar carries things the action button does not — who else is still deciding, and what each
   of them is doing — so it stays. It lifts out of the top row instead and floats just under the strip,
   which keeps the row a fixed width so the opponent rail always fits beside the turn indicator rather
   than jumping to a second row every time the message gets long. */
body.phone-match #decision-bar { position: absolute; top: calc(44px + var(--safe-t)); left: 50%;
  transform: translateX(-50%); max-width: min(70vw, 420px); font-size: 12px; padding: 5px 10px; z-index: 2; }
body.phone-match #decision-bar .db-tag { font-size: 10px; padding: 2px 6px; }
body.phone-match #decision-bar .db-what { -webkit-line-clamp: 2; }

/* the other face of a previewed card, and the way back */
.pd-face { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 12.5px; }
.pd-face-btn { flex: none; border: 1px solid var(--line); background: rgba(232, 184, 92, 0.1); color: var(--gold-2); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; pointer-events: auto; }
.pd-face-btn:hover { background: rgba(232, 184, 92, 0.22); }

/* ---------- side panel: log and chat share it ---------- */
#side-toggles { display: flex; gap: 6px; }
#log-toggle.on, #chat-toggle.on { border-color: rgba(232,184,92,0.45); color: var(--gold-2); }
#chat-toggle { position: relative; border: 1px solid rgba(255,255,255,0.15); background: var(--panel); border-radius: 10px; padding: 8px 14px; font-size: 13px; }
#chat-toggle.unread::after { content: attr(data-unread); position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold-2); color: #1a1005; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#chat-body { width: 100%; margin-top: 6px; display: flex; flex-direction: column; min-height: 0; max-height: 46vh; background: var(--panel); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; }
#chat-list { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; user-select: text; }
#chat-list .chat-empty { color: var(--muted); font-size: 12px; padding: 6px 0; }
#chat-list .chat-msg { margin: 6px 0 0; } #chat-list .chat-msg.mine .chat-name { color: var(--gold-2); }
#chat-list .chat-head { display: flex; gap: 8px; align-items: baseline; }
#chat-list .chat-name { font-weight: 700; font-size: 12px; } #chat-list .chat-when { color: var(--muted); font-size: 10.5px; }
#chat-list .chat-text { color: #e6dff0; white-space: pre-wrap; overflow-wrap: anywhere; }
#chat-list .chat-sys { color: var(--muted); font-size: 11.5px; font-style: italic; margin: 6px 0 0; }
#chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
#chat-input { flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.3); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: var(--sans); }
#chat-input:focus { outline: none; border-color: var(--line); }
#chat-input:disabled { opacity: .5; }
body.phone-match #chat-toggle { padding: 5px 10px; font-size: 12px; }

/* ---------- card back chooser ---------- */
.cardback-edit { display: flex; gap: 20px; align-items: flex-start; padding: 12px 0; }
.cardback-preview { flex: none; width: 122px; height: 170px; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.6); background: #120f0c; }
.cardback-preview img, .cardback-preview canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- deck list rows: bigger, with an art thumbnail and a labelled art button ---------- */
.dl-art { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--muted); border-radius: 7px; padding: 3px 8px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.dl-art:hover { color: var(--text); border-color: var(--line); }
.dl-art.on { color: var(--gold-2); border-color: rgba(232,184,92,0.45); background: rgba(232,184,92,0.1); }
.deck-star { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(10,8,16,0.75); color: rgba(255,255,255,0.45); font-size: 15px; line-height: 26px; text-align: center; cursor: pointer; padding: 0; }
.deck-star:hover { color: var(--gold-2); }
.deck-star.on { color: var(--gold-2); border-color: rgba(232,184,92,0.5); text-shadow: 0 0 8px rgba(255,217,138,0.6); }
.deck-tile { position: relative; }
.ghost-btn.fav-on { color: var(--gold-2); border-color: rgba(232,184,92,0.45); }

/* ---------- deck editor ---------- */
#editor { display: flex; flex-direction: column; min-height: 0; }
.ed-head { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: rgba(12,10,18,0.7); }
.ed-head .spacer { flex: 1; }
.ed-name { width: min(380px, 40vw); border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.3); color: var(--gold-2); border-radius: 10px; padding: 8px 12px; font-family: var(--serif); font-size: 19px; }
.ed-name:focus { outline: none; border-color: var(--line); }
.ed-status { min-width: 60px; }
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; }
.ed-search, .ed-list, .ed-stats { min-height: 0; display: flex; flex-direction: column; padding: 16px 18px; gap: 8px; }
.ed-search { border-right: 1px solid var(--line); }
.ed-stats { border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,30,0.94), rgba(10,8,16,0.97)); overflow-y: auto; }
.ed-list { overflow-y: auto; }
.ed-col-title { font-family: var(--serif); font-size: 17px; color: var(--gold-2); margin-bottom: 2px; }
.ed-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-filters .sel { flex: 1; min-width: 0; }
.ed-hint { padding: 8px 2px; line-height: 1.45; }
.ed-count { padding: 2px; }
.ed-results { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; }
.ed-result { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; }
.ed-result:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.ed-result.in-deck { background: rgba(232,184,92,0.07); }
.ed-r-name { font-size: 13.5px; color: var(--text); }
.ed-r-cost { color: var(--muted); font-size: 12px; font-family: Consolas, monospace; text-align: right; }
.ed-r-type { color: var(--muted); font-size: 11.5px; grid-column: 1; }
.ed-r-in { grid-column: 2; grid-row: 2; text-align: right; color: var(--gold-2); font-size: 12px; font-weight: 700; }
.ed-row { display: grid; grid-template-columns: 24px 30px 1fr auto auto; gap: 9px; align-items: center; padding: 3px 6px; font-size: 14px; border-radius: 6px; }
.ed-row:hover { background: rgba(255,255,255,0.05); }
.ed-row.cmd { background: rgba(232,184,92,0.08); }
.ed-row.cmd .dl-name { color: var(--gold-2); }
.ed-ctls { display: flex; gap: 3px; }
.ed-ctl { width: 26px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.ed-ctl:hover { border-color: var(--line); background: rgba(232,184,92,0.12); }
.ed-ctl.crown { color: rgba(255,255,255,0.35); }
.ed-ctl.crown.on { color: var(--gold-2); border-color: rgba(232,184,92,0.5); background: rgba(232,184,92,0.14); }
.ed-identity { display: flex; align-items: center; gap: 8px; }
.stat-tile.ok .stat-v { color: var(--green); } .stat-tile.warn .stat-v { color: var(--amber, #ffb857); }
.ed-bars { display: flex; flex-direction: column; gap: 3px; }
.ed-bar-row { display: grid; grid-template-columns: 34px 1fr 26px; gap: 8px; align-items: center; font-size: 12px; }
.ed-bars.wide .ed-bar-row { grid-template-columns: 90px 1fr 26px; }
.ed-bar-l { color: var(--muted); text-align: right; }
.ed-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.ed-bar-fill { height: 100%; background: linear-gradient(90deg, #b27a2a, var(--gold-2)); border-radius: 4px; }
.ed-bar-n { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ed-legal { margin-top: 6px; }
.ed-issue { font-size: 12.5px; color: #d8d2e4; padding: 4px 0 4px 10px; border-left: 2px solid rgba(255,255,255,0.15); margin-top: 4px; line-height: 1.35; }
.ed-issue.bad { border-left-color: var(--red); }
.ed-tabs { display: none; }
/* A small screen shows one column at a time, chosen from the header: the search, the deck, or the numbers. */
@media (max-width: 1000px), (max-height: 560px) {
  .ed-tabs { display: flex; flex: none; }
  .ed-tabs button { padding: 6px 12px; }
  .ed-body { grid-template-columns: minmax(0, 1fr); }
  .ed-search, .ed-list, .ed-stats { display: none; border: 0; padding: 10px 14px; }
  #editor.pane-search .ed-search, #editor.pane-list .ed-list, #editor.pane-stats .ed-stats { display: flex; }
  .ed-head { padding: 8px 12px; gap: 8px; }
  .ed-name { width: min(260px, 30vw); padding: 6px 10px; font-size: 15px; }
  .ed-head .spacer { flex: 0 0 4px; }
  .ed-status { min-width: 0; }
  .ed-col-title { font-size: 15px; }
}
@media (max-width: 640px) {
  .ed-head { flex-wrap: wrap; }
  .ed-name { width: 100%; order: -1; }
  .ed-tabs { width: 100%; order: 5; }
}
.ed-search .search { flex: none; width: 100%; }
.ed-search .ed-filters .sel { flex: 1; }

/* On a touch device the interface sits over a picture that changes every frame, and a blurred backdrop has
   to be blurred again each time it does — on a phone that is a large part of every frame. Solid panels
   there, a shade more opaque so nothing reads through them. */
@media (hover: none) {
  :root { --panel: rgba(16, 14, 24, 0.9); }
  .plate-info, .plate-eye, .btn-secondary, #phase-ladder, .modal-back { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* The same on a Steam Deck or in the app window under Proton: the blur is re-rendered behind each panel every
   frame the table moves, and the Deck's GPU has better things to do with that time. */
body.device-proton, body.device-deck { --panel: rgba(16, 14, 24, 0.9); }
body.device-proton .plate-info, body.device-proton .plate-eye, body.device-proton .btn-secondary, body.device-proton #phase-ladder, body.device-proton .modal-back,
body.device-deck .plate-info, body.device-deck .plate-eye, body.device-deck .btn-secondary, body.device-deck #phase-ladder, body.device-deck .modal-back { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Steam Deck and the app window: a scrollbar you can see and drag with the trackpad, on every list that
   scrolls. Chromium draws these itself, so they show whatever the platform's own scrollbars do. */
body.device-proton ::-webkit-scrollbar, body.in-shell ::-webkit-scrollbar { width: 16px; height: 16px; }
body.device-proton ::-webkit-scrollbar-track, body.in-shell ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
body.device-proton ::-webkit-scrollbar-thumb, body.in-shell ::-webkit-scrollbar-thumb {
  background: rgba(232, 184, 92, 0.45); background-clip: padding-box; border: 4px solid transparent; border-radius: 10px; min-height: 44px; }
body.device-proton ::-webkit-scrollbar-thumb:hover, body.in-shell ::-webkit-scrollbar-thumb:hover,
body.device-proton ::-webkit-scrollbar-thumb:active, body.in-shell ::-webkit-scrollbar-thumb:active { background-color: rgba(255, 217, 138, 0.8); }
body.device-proton ::-webkit-scrollbar-corner, body.in-shell ::-webkit-scrollbar-corner { background: transparent; }

/* The opening hand on a phone: one row you swipe along, each card as tall as the window allows, so every
   card is whole and readable rather than seven specks on the table. */
.mull-grid { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 12px; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; }
.mull-grid .card-tile { flex: none; width: clamp(120px, calc((100dvh - 205px) / 1.4), 190px); }
#zone-viewer .modal-body:has(.mull-grid) { overflow-y: hidden; }