@font-face { font-family: 'Pixelify'; src: url('../assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Pixelify'; src: url('../assets/fonts/pixelify-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; }
@font-face { font-family: 'Pixelify'; src: url('../assets/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; }
/* the pixel font draws Z with a bar through it (it reads like a 2): take Z and z from the other pixel font */
@font-face { font-family: 'Pixelify'; src: url('../assets/fonts/jersey-10-latin-400-normal.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+005A, U+007A; size-adjust: 118%; }
/* clean, very readable letters for everything you read closely (card names, card text, prompts): 5/S, 0/O, 1/l all differ */
@font-face { font-family: 'Hyperlegible'; src: url('../assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hyperlegible'; src: url('../assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
@font-face { font-family: 'Jersey'; src: url('../assets/fonts/jersey-10-latin-400-normal.woff2') format('woff2'); }

:root {
  --ink: #f4ead2;
  --ink-dim: #b9ad92;
  --gold: #e2b456;
  --gold-hi: #ffe39a;
  --gold-lo: #8a6424;
  --night: #0c0d1c;
  --panel: #171a33;
  --panel-hi: #232852;
  --line: #2c0f1e;
  --accent: #ff3fbf;
  --blue: #3c7cff;
  --blue-hi: #7fb0ff;
  --red: #ff4a4a;
  --sel: #ffd24a;
  --pixel: 'Pixelify', 'Trebuchet MS', sans-serif;
  --text: 'Hyperlegible', 'Segoe UI', Roboto, Arial, sans-serif;
  --num: 'Jersey', 'Pixelify', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); font-family: var(--pixel); overflow: hidden; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { font-family: var(--pixel); }

/* ---------- the 16:9 stage, scaled to fit any screen ---------- */
#viewport { position: fixed; inset: 0; display: grid; place-items: center; background: #05050c; }
#stage { position: absolute; width: 1600px; height: 900px; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; overflow: clip; }
#bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

/* ---------- cards ---------- */
.card {
  position: absolute; left: 0; top: 0; width: 104px; height: 140px;
  transition: left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1), width .3s, height .3s, transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s, filter .2s;
  transform-origin: 50% 50%; cursor: pointer;
}
.card .face {
  position: absolute; inset: 0; border-radius: 7px; overflow: hidden;
  background: var(--frame, #a9a9b8); border: 2px solid #120d16;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.45);
}
.card .art { position: absolute; left: 5%; right: 5%; top: 15%; height: 62%; border: 2px solid #120d16; background: #222; overflow: hidden; }
.card .art canvas, .card .art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.card .art canvas { image-rendering: pixelated; }
.card .name {
  position: absolute; left: 4%; right: 4%; top: 3%; height: 11%; padding: 0 3px;
  background: linear-gradient(#fbf6e6, #e1d7bb); border: 1.5px solid #120d16; border-radius: 3px;
  color: #1a1410; font: 600 11px/1 var(--pixel); display: flex; align-items: center; white-space: nowrap; overflow: hidden;
}
.card .type {
  position: absolute; left: 4%; right: 4%; top: 78%; height: 9%; padding: 0 3px; background: rgba(250,244,226,.92);
  border: 1.5px solid #120d16; border-radius: 3px; color: #1a1410; font: 400 9px/1 var(--pixel); display: flex; align-items: center; white-space: nowrap; overflow: hidden;
}
.card .pt {
  position: absolute; right: -4px; bottom: -4px; min-width: 46%; height: 23%; padding: 0 6px;
  background: linear-gradient(#ffffff, #d8d8e6); border: 2px solid #120d16; border-radius: 6px;
  color: #141428; font: 400 26px/1 var(--num); display: flex; align-items: center; justify-content: center; letter-spacing: .5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.card .pt.buffed { color: #1d7a2c; } .card .pt.hurt { color: #c22; }
.card .pt.loyal { background: linear-gradient(#40404a, #1e1e26); color: #fff; clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); }
.card .dmg { position: absolute; right: 2px; bottom: 25%; background: #c2202a; color: #fff; font: 400 20px/1 var(--num); padding: 1px 6px; border: 2px solid #120d16; border-radius: 4px; }
.card .icons { position: absolute; left: -5px; bottom: 4%; display: flex; flex-direction: column-reverse; gap: 2px; }
.card .icons i { width: 24px; height: 24px; display: block; background-repeat: no-repeat; border-radius: 50%; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000); }
.card .counters { position: absolute; left: 6%; top: 17%; display: flex; flex-direction: column; gap: 2px; }
.card .counters span { background: #1c1430; color: #ffe39a; border: 1.5px solid var(--gold); border-radius: 4px; font: 400 15px/1 var(--num); padding: 1px 5px; }
.card .cost { position: absolute; right: -8px; top: -20px; display: flex; gap: 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.card .cost i { width: 30px; height: 30px; margin-left: -5px; display: block; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0 0 0 2px #120d16; }
.card.small .cost, .card.onfield .cost { display: none; }
.card.onfield .type { display: none; }
.card.onfield .art { top: 15%; height: 70%; }
.card.land .art { height: 80%; }
.card.land .pt { display: none; }
.card .back { position: absolute; inset: 0; border-radius: 7px; border: 2px solid #120d16; background-size: cover; image-rendering: auto; box-shadow: 0 3px 0 rgba(0,0,0,.45); }
.card.facedown .face { display: none; }
.card:not(.facedown) .back { display: none; }

.card.tapped { filter: brightness(.78) saturate(.85); }
.card.sick .art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,0) 0 6px, rgba(0,0,0,.18) 6px 9px); }
.card.selectable .face, .card.selectable .back { box-shadow: 0 0 0 3px var(--sel), 0 0 18px 4px rgba(255,210,74,.75); animation: pulse 1.3s ease-in-out infinite; }
.card.highlight .face { box-shadow: 0 0 0 3px #4fe0ff, 0 0 18px 4px rgba(79,224,255,.7); }
.card.attacking .face { box-shadow: 0 0 0 3px var(--red), 0 0 22px 6px rgba(255,60,60,.8); }
.card.blocking .face { box-shadow: 0 0 0 3px var(--blue-hi), 0 0 22px 6px rgba(80,140,255,.8); }
.card .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #120d16; color: #fff; border: 2px solid var(--gold); border-radius: 6px; font: 400 18px/1 var(--num); padding: 1px 7px; display: none; }
.card.attacking .tag, .card.blocking .tag { display: block; }
.card.inhand .name { font-size: 15px; }
.card.inhand .type { font-size: 12px; }
.card.inhand .pt { font-size: 34px; }
.card.inhand:hover, .card.inhand.lift { z-index: 500 !important; }
.card.dragging { transition: none !important; z-index: 900 !important; filter: drop-shadow(0 20px 20px rgba(0,0,0,.6)); }
.card.leaving { opacity: 0; transform: scale(.6) !important; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px var(--sel), 0 0 26px 8px rgba(255,210,74,.95); } }

/* ---------- piles ---------- */
.pile { position: absolute; width: 90px; height: 126px; }
.pile .count { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: #120d16; color: var(--ink); border: 2px solid var(--gold-lo); border-radius: 7px; font: 400 20px/1 var(--num); padding: 2px 8px; z-index: 2; }
.pile .label { position: absolute; top: -18px; width: 100%; text-align: center; font-size: 12px; color: var(--ink-dim); text-shadow: 0 1px 0 #000; }
.pile.empty { border: 2px dashed rgba(226,180,86,.35); border-radius: 8px; }

/* ---------- avatars and plates ---------- */
.avatar { position: absolute; width: 132px; height: 132px; transform: translate(-50%, -50%); cursor: pointer; }
.avatar canvas { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 50%; }
.avatar .ring { position: absolute; inset: -7px; border-radius: 50%; border: 5px solid var(--gold); box-shadow: 0 0 0 3px #120d16, inset 0 0 0 3px #120d16, 0 6px 14px rgba(0,0,0,.6); }
.avatar.active .ring { animation: activeRing 2.4s linear infinite; border-color: var(--gold-hi); }
.avatar.active::before { content: ''; position: absolute; inset: -42px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,214,110,.55) 10%, transparent 12% 20%, rgba(255,214,110,.45) 22%, transparent 24% 33%, rgba(255,214,110,.55) 35%, transparent 37% 45%, rgba(255,214,110,.45) 47%, transparent 49% 58%, rgba(255,214,110,.55) 60%, transparent 62% 70%, rgba(255,214,110,.45) 72%, transparent 74% 83%, rgba(255,214,110,.55) 85%, transparent 87% 95%, rgba(255,214,110,.45) 97%, transparent 99%); mask: radial-gradient(circle, transparent 46%, #000 52%, transparent 72%); -webkit-mask: radial-gradient(circle, transparent 46%, #000 52%, transparent 72%); animation: spin 14s linear infinite; }
.avatar.selectable .ring { border-color: var(--sel); box-shadow: 0 0 0 3px #120d16, 0 0 26px 8px rgba(255,210,74,.85); }
.avatar .life { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); min-width: 74px; text-align: center; background: linear-gradient(#2a2848, #12112a); color: #fff; border: 3px solid #120d16; outline: 2px solid var(--gold-lo); border-radius: 22px; font: 400 44px/1 var(--num); padding: 2px 12px 4px; text-shadow: 0 2px 0 #000; }
.avatar .life.hit { animation: hit .5s; } .avatar .life.heal { animation: heal .6s; }
.avatar .poison { position: absolute; right: -18px; top: 6px; background: #1d3a12; color: #b8ff7a; border: 2px solid #120d16; border-radius: 10px; font: 400 20px/1 var(--num); padding: 2px 6px; }
@keyframes hit { 30% { background: #c2202a; transform: translateX(-50%) scale(1.25); } }
@keyframes heal { 30% { background: #1d8a3a; transform: translateX(-50%) scale(1.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes activeRing { 50% { box-shadow: 0 0 0 3px #120d16, 0 0 24px 6px rgba(255,214,110,.7); } }

.plate { position: absolute; display: flex; align-items: center; gap: 10px; padding: 4px 16px 4px 10px; background: linear-gradient(90deg, rgba(10,10,26,.92), rgba(10,10,26,.55) 80%, transparent); font: 600 30px/1 var(--pixel); color: var(--ink); text-shadow: 0 2px 0 #000; }
.plate .wins { display: flex; gap: 5px; }
.plate .wins b { width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--gold); background: transparent; display: block; }
.plate .wins b.on { background: var(--gold-hi); box-shadow: 0 0 8px var(--gold); }
.plate small { font: 400 16px/1 var(--pixel); color: var(--ink-dim); }

.mana { position: absolute; display: flex; gap: 6px; }
.mana button { width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 0 2px #120d16, 0 0 12px 2px rgba(255,255,255,.35); position: relative; cursor: pointer; }
.mana button span { position: absolute; right: -8px; bottom: -6px; background: #120d16; color: #fff; font: 400 18px/1 var(--num); padding: 1px 5px; border-radius: 6px; }

/* ---------- action area ---------- */
#actions { position: absolute; right: 26px; bottom: 26px; width: 360px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#prompt { max-width: 360px; text-align: right; font: 400 19px/1.25 var(--pixel); color: var(--ink); text-shadow: 0 2px 0 #000, 0 0 10px #000; background: rgba(8,8,20,.66); border-right: 3px solid var(--gold); padding: 8px 12px; border-radius: 6px 0 0 6px; }
#prompt:empty { display: none; }
.btn-main { position: relative; min-width: 240px; height: 66px; padding: 0 30px; border-radius: 34px; border: 3px solid #0a1440; background: linear-gradient(#5d8dff, #2449d8 55%, #1b36a8); color: #fff; font: 700 32px/1 var(--pixel); text-shadow: 0 2px 0 #0a1440; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 3px #7fb0ff, 0 0 22px 4px rgba(80,140,255,.65); cursor: pointer; }
.btn-main:disabled { filter: grayscale(.85) brightness(.6); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 0 0 3px #555; cursor: default; }
.btn-main.focus:not(:disabled) { animation: btnGlow 1.6s ease-in-out infinite; }
.btn-main:active:not(:disabled) { transform: translateY(2px); }
.btn-second { min-width: 160px; height: 46px; padding: 0 20px; border-radius: 24px; border: 3px solid #2a0f12; background: linear-gradient(#5c4a5a, #33263a); color: var(--ink); font: 600 22px/1 var(--pixel); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 0 0 2px var(--gold-lo); cursor: pointer; }
.btn-second:disabled { opacity: .35; }
@keyframes btnGlow { 50% { box-shadow: inset 0 3px 0 rgba(255,255,255,.45), 0 0 0 3px #b8d2ff, 0 0 36px 10px rgba(110,160,255,.9); } }

#phases { position: absolute; right: 26px; top: 420px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#phases { background: rgba(8,8,20,.78); border: 2px solid rgba(226,180,86,.45); border-radius: 10px; padding: 8px 6px; }
#phases span { font: 400 15px/1 var(--pixel); color: rgba(244,234,210,.45); padding: 3px 8px; border-radius: 4px; }
#phases span.on { color: #fff; background: rgba(255,63,191,.28); box-shadow: inset 0 0 0 1px var(--accent); }

#tools { position: absolute; left: 330px; bottom: 16px; display: flex; gap: 8px; }
.tool { height: 40px; min-width: 40px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--gold-lo); background: rgba(12,12,30,.85); color: var(--ink); font: 400 17px/1 var(--pixel); cursor: pointer; }
.tool:hover { border-color: var(--gold); }
#topbar { position: absolute; right: 14px; top: 10px; display: flex; gap: 8px; }

/* ---------- stack ---------- */
#stackLabel { position: absolute; right: 30px; top: 196px; font: 600 16px/1 var(--pixel); color: var(--gold-hi); text-shadow: 0 2px 0 #000; }

/* ---------- zoom ---------- */
#zoom { position: absolute; inset: 0; display: none; background: rgba(4,4,12,.62); z-index: 2000; align-items: center; justify-content: center; gap: 40px; pointer-events: auto; }
#zoom.on { display: flex; }
#zoom.peek { background: none; pointer-events: none; justify-content: flex-start; padding-left: 40px; }
#zoom .big { position: relative; width: 420px; height: 586px; }
#zoom .big .card { position: absolute; transition: none; width: 420px !important; height: 586px !important; left: 0 !important; top: 0 !important; transform: none !important; cursor: default; }
#zoom .big .card .name { font-size: 26px; }
#zoom .big .card .type { font-size: 20px; height: 6%; top: 62%; }
#zoom .big .card .art { height: 46%; }
#zoom .big .card .rules { display: block; }
#zoom .big .card .pt { font-size: 64px; }
#zoom .big .card .cost { right: 12px; top: 12px; z-index: 3; }
#zoom .big .card .cost i { width: 46px; height: 46px; margin-left: -4px; }
#zoom .big .card .icons { display: none; }
#zoom .big img.scan { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 20px; z-index: 5; }
.card .rules { display: none; position: absolute; left: 5%; right: 5%; top: 69%; bottom: 13%; background: rgba(250,244,226,.95); border: 2px solid #120d16; border-radius: 4px; color: #1a1410; padding: 8px 10px; font: 400 17px/1.3 Georgia, 'Times New Roman', serif; white-space: pre-wrap; overflow: auto; user-select: text; }
#zoom .kw { width: 340px; display: flex; flex-direction: column; gap: 10px; }
#zoom .kw div { display: flex; gap: 12px; align-items: center; background: rgba(12,12,30,.9); border: 2px solid var(--gold-lo); border-radius: 10px; padding: 8px 12px; font: 400 20px/1.2 var(--pixel); }
#zoom .kw i { width: 40px; height: 40px; flex: none; display: block; border-radius: 50%; }
#zoom.peek .kw { display: none; }

/* ---------- dialogs ---------- */
#dialog { position: absolute; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; background: rgba(4,4,12,.55); pointer-events: auto; }
#dialog.on { display: flex; }
#dialog.peeking { background: none; pointer-events: none; }
#dialog.peeking .panel { opacity: .1; }
.panel { min-width: 520px; max-width: 1300px; max-height: 820px; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; background: linear-gradient(#20244a, #121530); border: 4px solid #120d16; outline: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.7); pointer-events: auto; }
.panel h2 { margin: 0; font: 700 32px/1.1 var(--pixel); color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.panel p { margin: 0; font: 400 22px/1.35 var(--pixel); color: var(--ink); }
.panel .items { display: flex; flex-wrap: wrap; gap: 14px; overflow: auto; padding: 18px 6px 6px; max-height: 520px; }
.panel .items.cards { min-height: 230px; }
.panel .item { position: relative; cursor: pointer; }
.panel .item.text { padding: 12px 18px; border-radius: 10px; background: #2a2f5c; border: 2px solid #3c4485; font: 400 22px/1.2 var(--pixel); color: var(--ink); min-width: 120px; text-align: center; }
.panel .item.text:hover { border-color: var(--gold); }
.panel .item.on.text { background: #5a4410; border-color: var(--gold-hi); }
.panel .item .card { position: relative; transition: transform .15s; }
.panel .item.on .card { transform: translateY(-14px); }
.panel .item.on .card .face { box-shadow: 0 0 0 4px var(--sel), 0 0 22px 6px rgba(255,210,74,.8); }
.panel .item .ord { position: absolute; top: -12px; left: -8px; z-index: 3; background: var(--gold-hi); color: #120d16; font: 400 22px/1 var(--num); padding: 2px 8px; border-radius: 8px; border: 2px solid #120d16; }
.panel .row { display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.panel .row.left { justify-content: flex-start; }
.panel .hint { margin-right: auto; color: var(--ink-dim); font-size: 18px; }
.panel input[type=text], .panel input[type=number], .panel textarea, .panel select { font: 400 22px/1.2 var(--pixel); background: #0c0e22; color: var(--ink); border: 2px solid #3c4485; border-radius: 8px; padding: 8px 12px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 44px; height: 44px; font: 700 26px/1 var(--pixel); border-radius: 10px; border: 2px solid var(--gold-lo); background: #2a2f5c; color: var(--ink); cursor: pointer; }
.stepper b { min-width: 60px; text-align: center; font: 400 40px/1 var(--num); }
.assign { display: flex; gap: 22px; flex-wrap: wrap; }
.assign > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---------- banners ---------- */
#banner { position: absolute; left: 50%; top: 390px; transform: translate(-50%, -50%) scale(.9); padding: 16px 60px; font: 700 54px/1 var(--pixel); color: #fff; text-shadow: 0 3px 0 #000, 0 0 20px var(--accent); background: linear-gradient(90deg, transparent, rgba(10,6,20,.9) 20%, rgba(10,6,20,.9) 80%, transparent); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 1800; white-space: nowrap; }
#banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); background: rgba(12,12,30,.92); border: 2px solid var(--gold); border-radius: 10px; padding: 10px 18px; font: 400 20px/1.3 var(--pixel); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1900; max-width: 900px; text-align: center; }
#toast.on { opacity: 1; }
#stage.flash { animation: flash .35s; }
@keyframes flash { 30% { filter: brightness(1.4) sepia(.6) hue-rotate(-30deg); } }

/* ---------- menus (home / room) ---------- */
.screen { position: absolute; inset: 0; display: none; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; z-index: 3000; pointer-events: auto; background: radial-gradient(circle at 50% 40%, rgba(20,22,52,.55), rgba(5,5,12,.9)); }
.screen.on { display: flex; }
.menu { width: 900px; display: flex; flex-direction: column; gap: 22px; padding: 34px 44px; background: linear-gradient(#1c2046ee, #10122aee); border: 4px solid #120d16; outline: 3px solid var(--gold); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.menu h1 { margin: 0; text-align: center; font: 700 76px/1 var(--pixel); color: var(--gold-hi); text-shadow: 0 4px 0 #3a1a08, 0 0 30px rgba(255,190,80,.4); letter-spacing: 2px; }
.menu .sub { text-align: center; color: var(--ink-dim); font-size: 22px; margin-top: -10px; }
.menu label { display: flex; flex-direction: column; gap: 8px; font: 400 20px/1 var(--pixel); color: var(--ink-dim); }
.menu input, .menu select, .menu textarea { font: 400 26px/1.2 var(--pixel); background: #0a0c20; color: var(--ink); border: 2px solid #3c4485; border-radius: 10px; padding: 12px 14px; }
.menu textarea { font-size: 18px; height: 230px; resize: none; font-family: 'Courier New', monospace; user-select: text; -webkit-user-select: text; }
.menu input:focus, .menu textarea:focus, .menu select:focus { outline: none; border-color: var(--gold); }
.menu .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.menu .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.menu .code { font: 400 96px/1 var(--num); letter-spacing: 16px; text-align: center; color: #fff; text-shadow: 0 0 24px var(--accent); }
.menu .seats { display: flex; flex-direction: column; gap: 10px; }
.menu .seat { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 10px; background: #0e1028; border: 2px solid #2c3366; font-size: 24px; }
.menu .seat .ok { color: #7dff8a; } .menu .seat .wait { color: var(--ink-dim); }
.menu .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.menu .msg { font-size: 19px; color: var(--ink-dim); min-height: 22px; text-align: center; }
.menu .msg.bad { color: #ff8a8a; } .menu .msg.good { color: #8aff9a; }
.menu .bigbtn { height: 72px; font-size: 30px; }
.menu .themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu .themes button { height: 60px; border-radius: 10px; border: 2px solid #3c4485; background: #141838; color: var(--ink); font: 400 20px/1 var(--pixel); cursor: pointer; }
.menu .themes button.on { border-color: var(--gold-hi); background: #3a2c10; }

#rotate { position: fixed; inset: 0; z-index: 9999; display: none; background: #05050c; color: var(--ink); align-items: center; justify-content: center; flex-direction: column; gap: 18px; font: 600 24px/1.3 var(--pixel); text-align: center; padding: 30px; }
#rotate .ph { width: 70px; height: 120px; border: 5px solid var(--gold); border-radius: 12px; animation: turn 2s ease-in-out infinite; }
@keyframes turn { 40%, 60% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate.need { display: flex; } }

.btn-main[data-next]:not([data-next=""])::after { content: attr(data-next); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap; font: 600 18px/1 var(--pixel); color: var(--blue-hi); text-shadow: 0 2px 0 #000, 0 0 4px #000, 0 0 8px rgba(0,0,0,.8); }
#actions { bottom: 46px; }
#zoom .big .card .pt { height: 11%; min-width: 30%; right: 10px; bottom: 10px; font-size: 54px; }
#zoom .big .card .art { top: 13%; height: 47%; }
#zoom .big .card .name { height: 8%; }
#zoom .big .card .counters span { font-size: 26px; }

/* ---------- painted-battlefield layout (reference screenshot) ---------- */
#stage { background: #06060c; }
#bg { image-rendering: pixelated; pointer-events: none; }
.pilebox { position: absolute; width: 236px; height: 168px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(rgba(14,14,30,.82), rgba(8,8,18,.88)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.7); outline-offset: -5px;
  box-shadow: 0 8px 18px rgba(0,0,0,.55); }
.pile .label { top: -22px; font: 600 15px/1 var(--pixel); color: var(--ink); }
.pile.empty { border: 2px dashed rgba(226,180,86,.45); background: rgba(0,0,0,.25); }
.plate { font: 600 28px/1 var(--pixel); padding: 8px 18px; border-radius: 10px; background: linear-gradient(rgba(14,14,30,.9), rgba(8,8,18,.92)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.7); outline-offset: -5px; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
#topbar .tool { height: 40px; font-size: 18px; background: rgba(10,10,24,.88); border-color: rgba(214,166,74,.75); }
#phases { width: 142px; padding: 12px 8px !important; gap: 6px !important; background: linear-gradient(rgba(14,14,30,.9), rgba(8,8,18,.92)) !important;
  border: 2px solid #120d16 !important; outline: 2px solid rgba(214,166,74,.7); outline-offset: -6px; border-radius: 10px !important; box-shadow: 0 8px 18px rgba(0,0,0,.55); }
#phases span { font: 400 21px/1 var(--pixel) !important; padding: 6px 12px !important; color: rgba(244,234,210,.62) !important; position: relative; }
#phases span.on { color: #fff !important; background: rgba(255,63,191,.18) !important; box-shadow: inset 0 0 0 2px #ff5ccd !important; border-radius: 6px; }
#phases span.on::before { content: ''; position: absolute; left: -9px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--gold-hi); }
#actions { right: 24px !important; bottom: 68px !important; width: 264px !important; align-items: center !important; gap: 12px !important; }
#prompt { max-width: 264px; width: 264px; text-align: center !important; border: 2px solid #120d16 !important; outline: 2px solid rgba(214,166,74,.7); outline-offset: -5px;
  background: linear-gradient(rgba(14,14,30,.92), rgba(8,8,18,.94)) !important; border-radius: 10px !important; padding: 10px 12px !important; font-size: 19px !important; }
.btn-second { min-width: 170px; height: 48px; border-radius: 26px; background: linear-gradient(#3a2f4e, #1c1628); border-color: #120d16; box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 0 0 2px rgba(214,166,74,.6); font-size: 22px; }
.btn-main { min-width: 248px; height: 62px; }
.avatar { width: 136px; height: 136px; }
.avatar .life { bottom: -24px; font-size: 42px; }
#stackLabel { right: auto; left: calc(1180px + var(--ex, 0px)); top: 220px; }
#instr { position: absolute; left: 50%; top: 350px; transform: translateX(-50%); max-width: 900px; padding: 14px 30px; text-align: center; pointer-events: none;
  font: 400 26px/1.3 var(--pixel); color: #ffe7a6; text-shadow: 0 2px 0 #000; z-index: 650; opacity: 0; transition: opacity .2s;
  background: linear-gradient(rgba(14,14,30,.93), rgba(8,8,18,.95)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.75); outline-offset: -5px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.6); }
#instr.on { opacity: 1; }
#instr.pulse { animation: instrIn .9s ease-out; }
@keyframes instrIn { 0% { transform: translateX(-50%) scale(1.25); box-shadow: 0 0 0 0 rgba(255,210,110,.9); } 60% { transform: translateX(-50%) scale(1); box-shadow: 0 0 40px 10px rgba(255,210,110,.35); } 100% { box-shadow: 0 8px 20px rgba(0,0,0,.6); } }

/* ---------- real cards in hand ---------- */
.card .scan { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; z-index: 0; }
.card.scanned .scan { display: block; }
.card.scanned .face { background: #120d16; }
.card.scanned .art, .card.scanned .type, .card.scanned .pt, .card.scanned .dmg { display: none; }
.card.scanned .name { z-index: 2; top: 1.5%; left: 3%; right: 3%; height: 12%; font: 700 17px/1 var(--pixel); background: rgba(250,244,226,.96); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.card.scanned .icons { z-index: 2; bottom: 30%; }
.card.scanned .counters { z-index: 2; }
#zoom .flip { position: absolute; left: 50%; bottom: -66px; transform: translateX(-50%); z-index: 6; pointer-events: auto; }
#zoom.peek .flip { display: none; }

/* ---------- piles that look like cards lying on the table ---------- */
.pilebox { width: 296px !important; height: 168px !important; }
.pile { transform: perspective(700px) rotateX(18deg); transform-origin: 50% 100%; cursor: pointer; }
.pile.deck .back-img { transition: transform .3s; }
.pile.deck.empty .back-img { display: none; }
.pile .label { transform: none; }
.card.inpile { cursor: pointer; }

/* ---------- phase list with stop toggles ---------- */
#phases { width: 168px !important; }
#phases .ph-head { display: flex; justify-content: flex-end; gap: 4px; padding: 0 6px 4px 0; }
#phases .ph-head i { width: 26px; text-align: center; font: 400 11px/1 var(--pixel); font-style: normal; color: var(--ink-dim); }
#phases .ph { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 4px; border-radius: 6px; position: relative; }
#phases .ph span { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: visible; font: 400 19px/1 var(--pixel) !important; color: rgba(244,234,210,.62); padding: 3px 2px 3px 6px !important; }
#phases .ph.on { background: rgba(255,63,191,.18); box-shadow: inset 0 0 0 2px #ff5ccd; }
#phases .ph.on span { color: #fff; }
#phases .ph.on::before { content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--gold-hi); }
#phases .ph b { flex: 0 0 26px; width: 26px; height: 18px; display: grid; place-items: center; cursor: pointer; }
#phases .ph b::after { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(214,166,74,.55); background: transparent; }
#phases .ph b.lit::after { background: var(--gold-hi); border-color: var(--gold-hi); box-shadow: 0 0 8px var(--gold); }
#phases .ph b:hover::after { border-color: #fff; }

/* ---------- stack panel ---------- */
#stackPanel { position: absolute; left: calc(1010px + var(--ex, 0px)); top: 196px; width: 262px; display: none; flex-direction: column; gap: 8px; padding: 10px; z-index: 700; pointer-events: auto;
  background: linear-gradient(rgba(14,14,30,.94), rgba(8,8,18,.96)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.75); outline-offset: -5px; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.6); }
#stackPanel.on { display: flex; }
#stackPanel .hd, #logPanel .hd { font: 700 18px/1 var(--pixel); color: var(--gold-hi); display: flex; justify-content: space-between; align-items: center; }
#stackPanel .items { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
#stackPanel .it { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border-radius: 8px; background: rgba(255,255,255,.05); cursor: pointer; border-left: 3px solid #ff6a6a; }
#stackPanel .it.mine { border-left-color: #6ab0ff; }
#stackPanel .it.sel { box-shadow: 0 0 0 2px var(--sel); }
#stackPanel .thumb { width: 52px; height: 40px; flex: none; position: relative; border: 2px solid #120d16; border-radius: 4px; overflow: hidden; }
#stackPanel .thumb .art { position: absolute; inset: 0; }
#stackPanel .thumb canvas, #stackPanel .thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
#stackPanel .tx b { display: block; font: 600 15px/1.15 var(--pixel); color: #fff; }
#stackPanel .tx small { display: block; font: 400 13px/1.25 var(--pixel); color: var(--ink-dim); max-height: 50px; overflow: hidden; }

/* ---------- game log ---------- */
#logPanel { position: absolute; left: 186px; top: 130px; width: 520px; height: 520px; display: none; flex-direction: column; gap: 8px; padding: 12px; z-index: 1600; pointer-events: auto;
  background: linear-gradient(rgba(14,14,30,.96), rgba(8,8,18,.97)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.75); outline-offset: -5px; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.7); }
#logPanel.on { display: flex; }
#logPanel .items { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 3px; user-select: text; -webkit-user-select: text; }
#logPanel .le { font: 400 15px/1.3 var(--pixel); color: var(--ink); padding: 3px 6px; border-radius: 4px; }
#logPanel .le.turn { color: var(--gold-hi); margin-top: 6px; border-top: 1px solid rgba(214,166,74,.3); padding-top: 6px; }
#logPanel .le.damage, #logPanel .le.life { color: #ff9a8a; }
#logPanel .le.combat { color: #ffc27a; }
#logPanel .le.stack_add, #logPanel .le.stack_resolve { color: #9fd0ff; }
#logPanel .le.game_outcome, #logPanel .le.match_results { color: #8aff9a; font-weight: 600; }

/* keyword icons (flying, haste, reach...) on battlefield cards: top-right corner, easy to spot */
.card.onfield .icons { left: auto; right: -9px; top: 13%; bottom: auto; flex-direction: column; gap: 3px; z-index: 3; }
.card.onfield .icons i { filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 2px #000); }
.card.inpile .icons, .card.small .icons { display: none; }

/* ---------- card names: dark plates with gold trim instead of white bars ---------- */
.card .name {
  background: linear-gradient(180deg, rgba(22,18,34,.96), rgba(10,8,18,.92)); color: #f6ecd2;
  border: 1px solid rgba(214,166,74,.85); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,236,180,.18), 0 2px 4px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 #000; font-weight: 600; letter-spacing: .2px; padding: 0 5px;
}
.card .type { background: linear-gradient(180deg, rgba(22,18,34,.92), rgba(10,8,18,.88)); color: #d9ccb0; border: 1px solid rgba(214,166,74,.6); text-shadow: 0 1px 0 #000; }

/* battlefield: art fills the card, the name floats on a dark fade over the top of the picture */
.card.onfield .art { top: 3%; left: 3.5%; right: 3.5%; height: 94%; border-width: 1px; border-radius: 4px; }
.card.onfield .name { top: 3%; left: 3.5%; right: 3.5%; height: 18%; align-items: flex-start; padding: 4px 6px 0; border: none; border-radius: 4px 4px 0 0; box-shadow: none;
  background: linear-gradient(180deg, rgba(6,5,12,.92) 0%, rgba(6,5,12,.7) 55%, rgba(6,5,12,0) 100%); font-size: 12px; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.card.onfield.land .art { height: 94%; }
.card.onfield .face { border-width: 2px; }
.card.onfield .counters { top: 22%; }

/* hand: a slim dark plate over the printed name, readable at a glance */
.card.scanned .name { top: 2%; left: 4%; right: 4%; height: 10.5%; font: 700 16px/1 var(--pixel); color: #fff6dc;
  background: linear-gradient(180deg, rgba(26,20,40,.97), rgba(12,9,20,.95)); border: 1.5px solid #d6a64a; box-shadow: 0 0 0 1px #120d16, 0 3px 6px rgba(0,0,0,.55); }
/* power/toughness in the same dark-and-gold style, bright numbers so they still read at a glance */
.card .pt { background: linear-gradient(180deg, #2a2440, #120e1e); color: #fff; border: 2px solid #d6a64a; box-shadow: 0 0 0 1.5px #120d16, 0 3px 6px rgba(0,0,0,.55); text-shadow: 0 2px 0 #000; }
.card .pt.buffed { color: #8aff9a; } .card .pt.hurt { color: #ff8a8a; }
/* hand: the printed card speaks for itself; the extra name plate is a setting ("Large card names") */
.card.scanned .name { display: none; }
body.big-names .card.scanned .name { display: flex; }

/* ---------- library: a real stack of cards lying on the floor ---------- */
.deck3d { position: absolute; transform: perspective(700px) rotateX(13deg); transform-origin: 50% 100%; cursor: pointer; }
.deck3d .layers i, .deck3d .top { position: absolute; inset: 0; border-radius: 6px; }
.deck3d .layers i { background: linear-gradient(90deg, #cfc6ae, #e9e1cc 50%, #b8ae95); border: 1px solid #5e5442; box-shadow: 0 1px 0 #3a3226; }
.deck3d .layers i:first-child { box-shadow: 0 4px 0 #120d16, 0 10px 18px rgba(0,0,0,.65); }
.deck3d .top { border: 2px solid #120d16; image-rendering: auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.deck3d .count { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); z-index: 40; background: #120d16; color: #fff; border: 2px solid var(--gold-lo);
  border-radius: 8px; font: 400 20px/1 var(--num); padding: 2px 9px; }
.deck3d.empty .top { display: none; }
.deck3d.empty::before { content: ''; position: absolute; inset: 0; border: 2px dashed rgba(226,180,86,.45); border-radius: 6px; }

/* graveyard / exile: small round buttons with a count, click to see the cards */
.zonebtn { position: absolute; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #120d16; outline: 2px solid rgba(214,166,74,.8); outline-offset: -1px;
  background: radial-gradient(circle at 35% 30%, #3a3456, #15122a 70%); color: #e9dcbc; cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 6px 12px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.12); }
.zonebtn svg { width: 30px; height: 30px; }
.zonebtn b { position: absolute; right: -8px; bottom: -6px; min-width: 26px; padding: 1px 6px; border-radius: 10px; background: #120d16; border: 2px solid var(--gold-lo); color: #fff; font: 400 18px/1 var(--num); font-weight: 400; }
.zonebtn.empty { opacity: .55; }
.zonebtn:hover { outline-color: var(--gold-hi); color: #fff; }

/* command zone (Commander games) */
.cmdzone { position: absolute; width: 90px; height: 120px; border-radius: 10px; display: none; pointer-events: none;
  border: 2px dashed rgba(255,214,110,.55); background: rgba(40,30,8,.35); box-shadow: 0 0 22px rgba(255,200,90,.18) inset; }
.cmdzone.on { display: block; }
.cmdzone .label { position: absolute; top: -20px; width: 100%; text-align: center; font: 600 13px/1 var(--pixel); color: var(--gold-hi); text-shadow: 0 1px 0 #000; white-space: nowrap; }
.card .zbadge { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 6; white-space: nowrap; background: #3a2208; color: #ffe39a;
  border: 2px solid #d6a64a; border-radius: 8px; font: 600 13px/1 var(--pixel); padding: 3px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* piles of identical cards */
.card .stackcount { position: absolute; right: -10px; top: -12px; z-index: 7; min-width: 34px; text-align: center; background: #b8242e; color: #fff; border: 2px solid #120d16;
  outline: 2px solid #ffd2a0; border-radius: 14px; font: 400 22px/1 var(--num); padding: 2px 7px; box-shadow: 0 3px 8px rgba(0,0,0,.6); }

/* planeswalkers: the whole printed card, loyalty in a shield at the bottom */
.card.walker.scanned .pt { display: flex !important; z-index: 4; right: 50%; transform: translateX(50%); bottom: -10px; min-width: 40px; font-size: 26px; }
.card.walker.scanned .cost { display: none; }

/* keyword icons inside the card edge (no longer cut off) */
.card.onfield .icons { right: 3px !important; top: 21% !important; }

/* mana cost on cards in hand: a little higher, inside the picture */

/* opponent's hand: an even arc of card backs */
.oppcard { position: absolute; border-radius: 6px; border: 2px solid #120d16; transform-origin: 50% 100%; box-shadow: 0 4px 8px rgba(0,0,0,.55); }

/* poison counters: only appear when a player has some */
.avatar .poison { right: -34px; top: 18px; display: flex; align-items: center; gap: 4px; background: linear-gradient(#2d5a18, #14300a); color: #c8ff8a;
  border: 2px solid #120d16; outline: 2px solid #7fd04a; border-radius: 12px; font: 400 24px/1 var(--num); padding: 3px 8px; box-shadow: 0 0 12px rgba(127,208,74,.5); }

/* someone is talking */
.avatar.talking .ring { box-shadow: 0 0 0 3px #120d16, 0 0 0 6px #6aff9a, 0 0 22px 6px rgba(106,255,154,.7) !important; }
.tool.lit { border-color: #6aff9a; color: #c8ffd8; }

/* zoom: the card turns over */
#zoom .big { transition: transform .23s ease-in; transform-style: preserve-3d; }
#zoom .big.flipping { animation: cardflip .46s ease-in-out; }
@keyframes cardflip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.96); } 100% { transform: rotateY(0); } }

/* coin toss */
.coinov { position: absolute; inset: 0; z-index: 2500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(circle, rgba(10,8,20,.55), rgba(4,4,10,.85)); pointer-events: none; transition: opacity .45s; }
.coinov.out { opacity: 0; }
.coin { width: 190px; height: 190px; position: relative; transform-style: preserve-3d; animation: coinspin 1.7s cubic-bezier(.2,.6,.3,1) forwards; }
.coin.tails { animation-name: coinspin-t; }
.coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff1b0, #e2b456 45%, #8a6424 100%); border: 6px solid #6b4a14; box-shadow: inset 0 0 0 6px #f6d98a, 0 10px 30px rgba(0,0,0,.6); }
.coin .face span { font-size: 96px; color: #6b4a14; text-shadow: 0 2px 0 #fff1b0; }
.coin .face.t { transform: rotateY(180deg); }
@keyframes coinspin { 0% { transform: translateY(160px) rotateY(0) scale(.6); } 45% { transform: translateY(-120px) rotateY(1440deg) scale(1.1); } 100% { transform: translateY(0) rotateY(2160deg) scale(1); } }
@keyframes coinspin-t { 0% { transform: translateY(160px) rotateY(0) scale(.6); } 45% { transform: translateY(-120px) rotateY(1440deg) scale(1.1); } 100% { transform: translateY(0) rotateY(2340deg) scale(1); } }
.coinov .cap { font: 700 46px/1.1 var(--pixel); color: #fff; text-shadow: 0 3px 0 #000, 0 0 24px var(--gold); opacity: 0; transform: translateY(10px); transition: all .35s; text-align: center; max-width: 1000px; }
.coinov.done .cap { opacity: 1; transform: none; }
.deck3d .layers i { background: linear-gradient(180deg, #efe7d2 0 2px, #9c927a 2px 3px, #d9d0b8 3px); border-color: #4a4232; }
.deck3d .layers i:nth-child(odd) { filter: brightness(.93); }
.backpick { display: flex; gap: 22px; align-items: flex-start; }
.backpick .bkprev { width: 150px; height: 210px; flex: none; border-radius: 10px; border: 3px solid #120d16; box-shadow: 0 0 0 2px var(--gold), 0 10px 24px rgba(0,0,0,.6); }
.backpick .bklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
.backpick .bk { height: 46px; justify-content: center; border: 2px solid #3c4485 !important; background: #141838 !important; color: var(--ink) !important; font-size: 16px !important; }
.backpick .bk.on { border-color: var(--gold-hi) !important; background: #3a2c10 !important; }
.backpick .bk { background: none; border: 2px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-dim); font: 400 14px/1 var(--pixel); }
.backpick .bk i { width: 72px; height: 100px; border-radius: 6px; border: 2px solid #120d16; box-shadow: 0 4px 10px rgba(0,0,0,.5); display: block; }
.backpick .bk.on { border-color: var(--gold-hi); background: rgba(214,166,74,.12); color: #fff; }
.card.incmd { transform: none !important; }

#cmdOpp .label { top: auto; bottom: -20px; }
/* planeswalkers: tall art box, loyalty shield bottom right */
.card.walker .art { height: 94%; }
.card.walker .pt.loyal { right: -6px; bottom: -6px; left: auto; transform: none; min-width: 48px; height: 44px; font-size: 32px;
  background: linear-gradient(180deg, #3a3450, #15112a); color: #fff; border: 2px solid #d6a64a; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); padding-bottom: 6px; box-shadow: none; }
/* sideboarding */
.panel.wide { width: 1180px; }
.sbwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sbcol { max-height: 540px; overflow: auto; background: rgba(0,0,0,.25); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.sbcol h3 { margin: 0 0 6px; font: 700 22px/1 var(--pixel); color: var(--gold-hi); display: flex; justify-content: space-between; }
.sbrow { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.04); }
.sbrow:hover { background: rgba(214,166,74,.18); }
.sbrow .card { position: relative !important; flex: none; }
.sbrow .n { font: 400 24px/1 var(--num); color: #fff; min-width: 34px; }
.sbrow .nm { flex: 1; font: 400 18px/1.1 var(--pixel); }
.sbrow .mv { font-size: 22px; color: var(--gold-hi); }

/* deck shelf */
.deckpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 300px; overflow: auto; padding-right: 4px; }
.deckpick .dk { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 2px solid #2c3366; background: #0e1028; color: var(--ink); cursor: pointer; font-family: var(--pixel); }
.deckpick .dk.on { border-color: var(--gold-hi); background: #2e2410; box-shadow: 0 0 14px rgba(255,214,110,.3); }
.deckpick .dk .pip { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #120d16; background: #888; }
.deckpick .dk .pip.W { background: radial-gradient(circle at 35% 30%, #fffbe6, #e9d79a); } .deckpick .dk .pip.U { background: radial-gradient(circle at 35% 30%, #bfe0ff, #2a6ad0); }
.deckpick .dk .pip.B { background: radial-gradient(circle at 35% 30%, #a99ab4, #2a2030); } .deckpick .dk .pip.R { background: radial-gradient(circle at 35% 30%, #ffc0a0, #c03a1e); }
.deckpick .dk .pip.G { background: radial-gradient(circle at 35% 30%, #c8f0a8, #2e7a34); } .deckpick .dk .pip.mine { background: radial-gradient(circle at 35% 30%, #ffe9a8, #a87b26); }
.deckpick .dk b { font: 600 18px/1.1 var(--pixel); } .deckpick .dk small { font: 400 13px/1.2 var(--pixel); color: var(--ink-dim); }
.deckpick .dk .del { position: absolute; right: 6px; top: 4px; font-size: 14px; color: var(--ink-dim); padding: 2px 6px; border-radius: 6px; }
.deckpick .dk .del:hover { color: #ff8a8a; background: rgba(255,0,0,.12); }
#deckPaste textarea { height: 110px !important; }
/* battlefield preview */
.themeprev { margin-top: 10px; height: 200px; border-radius: 12px; background: center / cover no-repeat; border: 3px solid #120d16; box-shadow: 0 0 0 2px var(--gold), 0 10px 24px rgba(0,0,0,.6); position: relative; }
.themeprev::after { content: attr(data-name); position: absolute; left: 12px; bottom: 10px; font: 700 22px/1 var(--pixel); color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px #000; }

/* life: heart + number, big +/- when it changes */
.avatar .life { display: flex; align-items: center; gap: 6px; justify-content: center; }
.avatar .life .heart { font-style: normal; font-size: 26px; color: #ff4a5e; text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,60,90,.6); }
.lifefloat { position: absolute; z-index: 1700; pointer-events: none; font: 400 64px/1 var(--num); text-shadow: 0 4px 0 #000, 0 0 14px currentColor; animation: lifefloat 1.6s ease-out forwards; }
@keyframes lifefloat { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.25); opacity: 1; } 35% { transform: translate(-50%, -24px) scale(1); } 100% { transform: translate(-50%, -90px) scale(1); opacity: 0; } }

/* status badges */
.statusrow { position: absolute; display: flex; gap: 6px; flex-wrap: wrap; max-width: 420px; z-index: 30; }
.statusrow.right { justify-content: flex-end; }
.sbadge { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 16px; cursor: pointer; font: 600 14px/1 var(--pixel); color: #fff;
  background: linear-gradient(rgba(26,20,44,.95), rgba(12,9,22,.95)); border: 2px solid #120d16; outline: 2px solid rgba(214,166,74,.7); outline-offset: -1px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.sbadge i { font-style: normal; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(214,166,74,.25); font-size: 16px; }
.sbadge .thumb { width: 38px; height: 28px; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid #120d16; }
.sbadge .thumb .art { position: absolute; inset: 0; } .sbadge .thumb canvas, .sbadge .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sbadge.extraTurn, .sbadge.onExtraTurn { outline-color: #8ad8ff; box-shadow: 0 0 14px rgba(120,200,255,.5); }
.sbadge.monarch, .sbadge.blessing { outline-color: #ffd76a; }
.sbadge.attached { outline-color: #c78aff; }
#daynight { position: absolute; left: 12px; top: 136px; width: 168px; text-align: center; padding: 6px 0; border-radius: 10px; font: 700 18px/1 var(--pixel); display: none; }
#daynight.day { display: block; background: linear-gradient(#ffe9a0, #e2a83a); color: #4a2a00; box-shadow: 0 0 18px rgba(255,210,90,.6); }
#daynight.night { display: block; background: linear-gradient(#2a3a7a, #10163a); color: #cfe0ff; box-shadow: 0 0 18px rgba(90,120,255,.5); }

/* opponent's revealed cards and a face-up library top */
.oppcard.shown { cursor: pointer; box-shadow: 0 0 0 2px #ffd76a, 0 0 16px rgba(255,214,110,.7); }
.deck3d.revealed .top { box-shadow: 0 0 0 2px #ffd76a, 0 0 16px rgba(255,214,110,.7); }

/* arrows */
#arrows { position: absolute; inset: 0; width: 100%; height: 900px; pointer-events: none; z-index: 15; overflow: visible; }
#arrows path { fill: none; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); animation: dash 1s linear infinite; stroke-dasharray: 14 10; }
#arrows path.atk { stroke: #ff5a4a; color: #ff5a4a; }
#arrows path.blk { stroke: #6ab0ff; color: #6ab0ff; }
#arrows path.tgt { stroke: #ffd76a; color: #ffd76a; stroke-width: 4; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* Chaos Orb */
.card.flying { pointer-events: none; transform-style: preserve-3d; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)); }
.card.orbhit { animation: orbhit 1.2s ease-out; }
.card.orbhit .face { box-shadow: 0 0 0 4px #ff3a3a, 0 0 30px 10px rgba(255,60,60,.9) !important; }
@keyframes orbhit { 0%, 100% { translate: 0 0; } 10% { translate: -8px 3px; } 20% { translate: 7px -4px; } 30% { translate: -6px 2px; } 40% { translate: 5px 0; } 50% { translate: -3px 1px; } }
.orbdust { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 2090; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255,230,180,.8); animation: orbdust .9s ease-out forwards; }
@keyframes orbdust { to { box-shadow: 0 0 0 110px rgba(255,230,180,0); } }
/* computer opponent box */
.botbox { display: none; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(0,0,0,.25); border: 2px solid #2c3366; }
.botbox:not([style*="none"]) { display: flex; }
.botbox .diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.botbox .diffs button { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 2px solid #3c4485; background: #141838; color: var(--ink); font: 600 20px/1 var(--pixel); cursor: pointer; }
.botbox .diffs button small { font: 400 12px/1.2 var(--pixel); color: var(--ink-dim); }
.botbox .diffs button.on { border-color: var(--gold-hi); background: #3a2c10; }
.botbox .diffs button[data-d="extreme"].on { border-color: #ff6a5a; background: #3a1010; }
.botbox select { font-size: 18px !important; padding: 8px !important; }
/* hand cards rise smoothly */
.card.inhand { transition: left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1), width .3s, height .3s, transform .18s ease-out, opacity .3s, filter .2s; }

/* choosing what to attack */
#aimbar { position: absolute; left: 50%; top: 98px; transform: translateX(-50%); display: none; align-items: center; gap: 8px; padding: 8px 12px; z-index: 660;
  background: linear-gradient(rgba(30,10,14,.95), rgba(16,6,8,.96)); border: 2px solid #120d16; outline: 2px solid #ff6a5a; outline-offset: -5px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.6); }
#aimbar.on { display: flex; }
#aimbar .lbl { font: 700 20px/1 var(--pixel); color: #ffb0a0; padding: 0 4px; }
#aimbar .tip { font: 400 15px/1 var(--pixel); color: var(--ink-dim); padding-left: 6px; }
#aimbar .aim { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 2px solid #4a2a30; background: #241216; color: var(--ink); font: 600 17px/1 var(--pixel); cursor: pointer; }
#aimbar .aim i { font-style: normal; }
#aimbar .aim b { background: #120d16; border: 1px solid #d6a64a; border-radius: 6px; padding: 1px 6px; font: 400 16px/1 var(--num); }
#aimbar .aim.on { border-color: #ff6a5a; background: #5a1a1a; box-shadow: 0 0 14px rgba(255,90,70,.6); color: #fff; }
#arrows path.aim { stroke: #ff6a5a; color: #ff6a5a; stroke-width: 6; opacity: .75; stroke-dasharray: 4 12; }
/* battles lie sideways like the printed card */
.card.walker.battle .pt.loyal { background: linear-gradient(180deg, #4a2a10, #1e1006); }
#stackPanel { left: 190px !important; top: 124px !important; }
#aimbar { top: 676px !important; }
#botReroll { min-width: 56px !important; width: 56px; height: 46px; padding: 0; flex: none; }

/* Commander deck tiles: the commander's art in a ring of the deck's colors */
.deckpick .dk .pip.face { width: 42px; height: 42px; border: 4px solid transparent; box-shadow: 0 0 0 2px #120d16; }

/* chosen cards (mulligan bottom, discard, sacrifice...): a bright blue frame on the whole card, scans included */
.card.highlight { box-shadow: 0 0 0 4px #4fe0ff, 0 0 24px 6px rgba(79,224,255,.75) !important; border-radius: 8px; }

/* screens taller than the window scroll; short ones stay centred */
.screen > .menu { margin: auto; flex-shrink: 0; }
#settings > .menu { margin: 24px auto; }
#settings .closex { position: sticky; top: 0; align-self: flex-end; margin: -20px -30px -50px 0; z-index: 2; width: 54px !important; min-width: 0 !important; height: 54px; padding: 0 !important; font-size: 26px; border-radius: 50%; }
/* on a computer screen the menus were oversized: draw them smaller (phones keep the big text) */
body.desk .screen > .menu { zoom: .8; }
.keypick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.keypick .krow { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 20px; }
.keypick .krow button { min-width: 150px; padding: 8px 14px; font-size: 20px; }
.card img, .card canvas { -webkit-user-drag: none; user-drag: none; }
.manatext { display: inline-flex; gap: 2px; vertical-align: -0.2em; margin: 0 2px; }
.manatext i { display: inline-block; border-radius: 50%; }

/* battlefield names: wrap onto a second line instead of being cut ("Selesnya Sanctuary"), never three */
.card.onfield .name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  height: auto; max-height: 30%; padding-bottom: 10px; line-height: 1.12; font-size: 11.5px; overflow: hidden; word-break: break-word; }

/* lands: the mana they make, centred at the bottom of the card; all five colors = a color wheel */
.card .makes { position: absolute; left: 0; right: 0; bottom: 5%; display: none; justify-content: center; gap: 2px; z-index: 3; pointer-events: none; }
.card.onfield.land .makes { display: flex; }
.card .makes i { display: inline-block; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.8); }
.card .makes .wheel { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #120d16; box-shadow: 0 1px 3px rgba(0,0,0,.8);
  background: conic-gradient(#f3e6b0 0 72deg, #3a7ad8 72deg 144deg, #3b2f42 144deg 216deg, #d0442a 216deg 288deg, #3e8e44 288deg 360deg); }
/* whose turn: that column of the phase list glows, its header becomes a gold tab */
#phases .ph-head i { border-radius: 6px 6px 0 0; padding: 4px 0 3px; transition: background .3s, color .3s; }
#phases.turn-mine .ph-head i:nth-child(1), #phases.turn-theirs .ph-head i:nth-child(2) { background: var(--gold-hi); color: #120d16; font-weight: 700; }
#phases .ph b { transition: background .3s; }
/* one continuous see-through band down the column of whoever's turn it is */
#phases::after { content: ''; position: absolute; top: 10px; bottom: 10px; width: 28px; right: 13px; border-radius: 7px; pointer-events: none;
  background: linear-gradient(rgba(255,214,110,.34), rgba(255,214,110,.2)); box-shadow: inset 0 0 0 2px rgba(255,214,110,.6), 0 0 10px rgba(255,214,110,.25); transition: right .35s ease; }
#phases.turn-mine::after { right: 43px; }
#phases:not(.turn-mine):not(.turn-theirs)::after { display: none; }
/* lobby seat rows: name and status may wrap, the Remove button always fits inside */
.menu .seat { gap: 10px; flex-wrap: nowrap; }
.menu .seat > span { min-width: 0; }
.menu .seat .tool { flex: 0 0 auto; padding: 6px 12px; font-size: 16px; white-space: nowrap; }

/* a little life on the table: cards (yours and the opponent's) rise and brighten under the mouse */
@media (pointer: fine) {
  .card.onfield { transition: translate .14s ease-out, filter .14s, box-shadow .14s; }
  .card.onfield:not(.dragging):hover { translate: 0 -7px; filter: brightness(1.12) saturate(1.08); }
  #oppHand > * { transition: translate .14s ease-out, filter .14s; }
  #oppHand > *:hover { translate: 0 12px; filter: brightness(1.15); }
}
.oppcard .flip180 { position: absolute; inset: 0; border-radius: inherit; transform: rotate(180deg); background-size: cover !important; }
.dpiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dpiles .dpile { background: #0e1028; border: 2px solid #2c3366; border-radius: 12px; padding: 10px 12px; min-height: 230px; text-align: left; color: var(--ink); font: inherit; }
.dpiles .dpile h3 { margin: 0 0 4px; font: 700 24px/1 var(--pixel); color: var(--gold-hi); }
.dpiles .dpile h3 small { color: var(--ink-dim); font-size: 18px; }
.dpiles .dpile .items { padding-top: 6px; max-height: 420px; }
.dpiles .dpile.pick { cursor: pointer; }
.dpiles .dpile.pick:hover { border-color: var(--gold-hi); box-shadow: 0 0 18px rgba(255,210,110,.4); }

.dpiles { min-width: 900px; } .dpiles .dpile { position: relative; display: block; }

/* right-click menu (stack yields, phase markers) */
.ctxmenu { position: absolute; z-index: 2600; display: flex; flex-direction: column; min-width: 320px; padding: 6px; border-radius: 10px;
  background: linear-gradient(#20244a, #121530); border: 2px solid #120d16; outline: 2px solid var(--gold); box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.ctxmenu button { text-align: left; padding: 10px 14px; font: 400 19px/1.2 var(--pixel); color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.ctxmenu button:hover { background: rgba(255,210,110,.16); color: #fff; }
#arrows path.tgt.ally { stroke: #6ab0ff; color: #6ab0ff; }
#phases .ph b.mark::after { content: '⏩'; border: 0; width: auto; height: auto; font-size: 13px; background: none; box-shadow: none; color: var(--gold-hi); }
.panel .finder { font: 400 22px/1.2 var(--pixel); padding: 10px 14px; border-radius: 10px; background: #0a0c20; color: var(--ink); border: 2px solid #3c4485; user-select: text; -webkit-user-select: text; }
.panel .finder:focus { outline: none; border-color: var(--gold); }

/* summoning sickness: a slow purple swirl over the art instead of stripes */
.card.sick .art::after { background: none; }
.card.sick .art::before { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 6; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(170,130,255,0) 0deg 20deg, rgba(170,130,255,.5) 30deg, rgba(170,130,255,0) 42deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, rgba(0,0,0,.55) 40%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, rgba(0,0,0,.55) 40%, transparent 62%);
  animation: sickSpin 4s linear infinite; }
.card.sick .art { overflow: hidden; isolation: isolate; }
.card.sick .art > * { position: relative; z-index: 1; }
@keyframes sickSpin { to { transform: rotate(360deg); } }

/* flying: the card hovers above the table with a shadow under it */
.card.flyer { animation: flyBob 2.6s ease-in-out infinite; filter: drop-shadow(0 16px 7px rgba(0,0,0,.5)); }
@keyframes flyBob { 0%, 100% { translate: 0 -5px; } 50% { translate: 0 -12px; } }

/* reach: a glowing green arrow (can block flyers) */
.card.reach-ready::before { content: '⬆'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); z-index: 30; font: 700 26px/1 var(--pixel);
  color: #7dff6a; text-shadow: 0 0 8px #3fdc3a, 0 0 16px #3fdc3a, 0 2px 0 #000; animation: reachGlow 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes reachGlow { 50% { text-shadow: 0 0 2px #3fdc3a, 0 2px 0 #000; opacity: .75; } }

/* touch: dragging a card never scrolls or zooms the page; long-press never opens the phone's own menu */
.card, .oppcard, #phases b, #stackPanel .it { touch-action: none; -webkit-touch-callout: none; }
body.autopass #bottombar .tool[data-act="autopass"] { background: var(--gold-hi); color: #120d16; }
/* keyboard shortcuts only matter with a keyboard */
@media (pointer: coarse) { #keyPick, label:has(> #keyPick) { display: none; } }
/* picker for cards Forge offers from hidden zones (library search...) */
#picker { position: absolute; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; background: rgba(4,4,12,.55); }
#picker .panel { width: 1180px; max-height: 840px; }
#picker .items { max-height: 560px; overflow-y: auto; }
#picker .item.on .card { transform: translateY(-10px); box-shadow: 0 0 0 4px #4fe0ff, 0 0 22px 6px rgba(79,224,255,.75); border-radius: 8px; }
.btnmana { display: inline-block; vertical-align: -0.25em; margin-right: 10px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.7); }
.panel .item.text .manatext i { vertical-align: middle; }
.btnmana { display: inline-block; vertical-align: -0.25em; margin-right: 10px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.7); }
#instr.top { top: 108px; font-size: 21px; padding: 8px 22px; max-width: 980px; }
/* pumped / shrunk creatures */
.card .pt.up { color: #7dff8a !important; text-shadow: 0 0 6px rgba(80,255,120,.6), 0 2px 0 #000; }
.card .pt.down { color: #ff7a6a !important; text-shadow: 0 0 6px rgba(255,90,70,.6), 0 2px 0 #000; }
.card .pt.mixed { color: #ffd76a !important; }
.card .pt { position: absolute; }
.card .pt .ptdelta { position: absolute; right: 0; bottom: 100%; margin-bottom: 2px; font: 700 12px/1 var(--pixel); padding: 2px 5px; border-radius: 6px;
  background: rgba(10,8,18,.9); border: 1px solid currentColor; white-space: nowrap; }
/* a card leaving the battlefield flies to where it went; a card arriving glows for a moment */
.card.ghost { pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); }
.card .ghosttag { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap; z-index: 5;
  font: 700 15px/1 var(--pixel); color: #fff; background: rgba(10,8,18,.92); border: 2px solid var(--gold); border-radius: 8px; padding: 4px 8px; }
.card.entered { animation: entered 1.4s ease-out; }
@keyframes entered { 0% { box-shadow: 0 0 0 4px #fff7c0, 0 0 40px 14px rgba(255,230,140,.9); } 100% { box-shadow: none; } }

/* "well-played" card backs: our own worn-edges layer on every card back (Settings) */
body.worn .card .back::after, body.worn .deck3d .top::after, body.worn .oppcard:not(.shown) .flip180::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: url(../assets/wear/worn.png) center / 100% 100% no-repeat; }
body.worn .deck3d .top, body.worn .oppcard .flip180 { overflow: hidden; }

/* the stack: on the right where the table has room, bigger and simpler */
#stackPanel { left: calc(1130px + var(--ex, 0px)) !important; top: 150px !important; width: 300px !important; padding: 12px !important; }
#stackPanel .hd { font-size: 22px !important; }
#stackPanel .items { max-height: 470px !important; gap: 8px !important; }
#stackPanel .it { padding: 8px !important; gap: 10px !important; align-items: center !important; }
#stackPanel .thumb { width: 64px !important; height: 50px !important; }
#stackPanel .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#stackPanel .tx b { font: 700 17px/1.15 var(--pixel); color: #fff; }
#stackPanel .tx small { font: 400 15px/1.3 var(--pixel); color: var(--ink); }
#stackPanel .who { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 2px solid var(--gold); align-self: flex-start; }
/* compact rows for long lists */
.panel .items:has(.rowitem) { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.panel .item.rowitem { width: 100%; }
.crow { display: grid; grid-template-columns: 1fr auto 260px; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 8px; background: #1a1e40; border: 2px solid #2c3366; }
.crow b { font: 600 20px/1.1 var(--pixel); color: #fff; }
.crow small { font: 400 15px/1.1 var(--pixel); color: var(--ink-dim); text-align: right; }
.panel .item.rowitem:hover .crow { border-color: var(--gold); }
.panel .item.rowitem.on .crow { background: #5a4410; border-color: var(--gold-hi); }
#picker .items:has(.rowitem) { display: flex; flex-direction: column; gap: 4px; }
#picker .item.rowitem.on .crow { background: #0f4a5a; border-color: #4fe0ff; }
/* a card that just came out of a hidden zone, shown big for a moment (click to skip) */
.revealsplash { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1900; display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: rvIn .35s ease-out; filter: drop-shadow(0 20px 30px rgba(0,0,0,.7)); cursor: pointer; }
.revealsplash .cap { font: 700 24px/1 var(--pixel); color: #fff; background: rgba(10,8,18,.92); border: 2px solid var(--gold); border-radius: 10px; padding: 8px 16px; }
.revealsplash.out { transition: opacity .35s, transform .35s; opacity: 0; transform: translate(-50%, -50%) scale(.8); }
@keyframes rvIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
/* FLAWLESS VICTORY (homage to Mortal Kombat): white italic capitals with a hard black shadow, growing in */
#flawless { position: absolute; inset: 0; z-index: 3500; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(0,0,0,0); animation: fwDim 6.2s linear forwards; }
#flawless::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0,0,0,.22) 0 2px, transparent 2px 5px); }
#flawless .fw { image-rendering: pixelated; image-rendering: crisp-edges; width: 1000px; height: auto; opacity: 0; filter: drop-shadow(8px 8px 0 #000); }
#flawless .w2 { width: 894px; }
#flawless .w1 { animation: fwSlam .5s steps(5, end) .5s forwards, fwOut .9s steps(6, end) 5.2s forwards; }
#flawless .w2 { animation: fwSlam .5s steps(5, end) 1.7s forwards, fwOut .9s steps(6, end) 5.2s forwards; }
@keyframes fwDim { 0% { background: rgba(0,0,0,0); } 8% { background: rgba(0,0,0,.62); } 85% { background: rgba(0,0,0,.62); } 100% { background: rgba(0,0,0,0); } }
@keyframes fwSlam { 0% { opacity: 1; transform: scale(2.6); } 70% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fwOut { from { opacity: 1; } to { opacity: 0; transform: scale(1.05); } }
/* commander sitting in the portrait spot: hide the round portrait behind it, keep the life heart */
.avatar.hascmd canvas, .avatar.hascmd .ring { opacity: 0; }
.avatar.hascmd .life { z-index: 5; }
.card.incmd { box-shadow: 0 0 0 3px var(--gold), 0 8px 18px rgba(0,0,0,.6); border-radius: 8px; }

/* whole printed cards on the table: the scan fills the card, tilted back a touch with the table;
   power/toughness, damage, counters, keyword icons and land symbols stay on top */
.card.whole.scanned .scan { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.card.whole.scanned .face { background: #120d16; transform: perspective(520px) rotateX(5deg); transform-origin: 50% 100%; }
.card.whole.scanned .art, .card.whole.scanned .type, .card.whole.scanned .rules, .card.whole.scanned .name { display: none !important; }
.card.whole.scanned .pt, .card.whole.scanned .dmg { display: block; z-index: 3; }
.card.whole.scanned .pt[style*="none"], .card.whole.scanned .dmg[style*="none"] { display: none !important; }
.card.whole.scanned .icons, .card.whole.scanned .counters, .card.whole.scanned .makes { z-index: 3; }
.card.whole.scanned .icons { top: 14%; bottom: auto; }
.card.whole.scanned .makes { bottom: 3%; }
/* the commander sits behind the life heart, as a whole card */
.card.incmd { z-index: 40 !important; }
.avatar.hascmd { z-index: 60; }

/* computer difficulty pips */
.pips { display: inline-flex; gap: 2px; vertical-align: middle; font-style: normal; }
.pips b { width: 6px; height: 9px; background: rgba(244,234,210,.18); border-radius: 1px; }
.pips b.on { background: var(--gold-hi); box-shadow: 0 0 4px rgba(255,214,110,.6); }
.pips.d-extreme b.on { background: #ff6a5a; box-shadow: 0 0 4px rgba(255,106,90,.7); }
.botbox .diffs button .dn { display: flex; align-items: center; gap: 8px; }

/* set-aside shelf (Gonti, Dauthi Voidwalker, flashback...) at the top right */
.card.shelf { border-radius: 5px; box-shadow: 0 0 0 2px rgba(180,140,255,.65), 0 4px 10px rgba(0,0,0,.6); }
.card.shelf.selectable { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px 4px rgba(255,214,110,.85); animation: shelfPulse 1.2s ease-in-out infinite; }
.card.shelf.selectable::before { content: 'PLAY'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 7; font: 400 10px/1 var(--pixel);
  background: var(--gold-hi); color: #1a1208; padding: 2px 5px; border-radius: 4px; }
@keyframes shelfPulse { 50% { box-shadow: 0 0 0 3px #fff3c0, 0 0 26px 8px rgba(255,214,110,.95); } }
.card.shelf .zbadge { font-size: 10px; bottom: -10px; padding: 1px 5px; }
.card.shelf .counters, .card.shelf .icons, .card.shelf .cost { display: none; }
#shelfMore, .shelfmore { position: absolute; z-index: 90; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-hi); background: #241a3a; color: #ffe39a;
  font: 400 18px/1 var(--pixel); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
/* saga chapter, roman numerals */
.card .pt.sagach { letter-spacing: 1px; }

/* attacker notes while you block: "Flying", "Menace", "Can't be blocked"... */
#callouts { position: absolute; inset: 0; pointer-events: none; z-index: 950; }
#callouts .callout { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
#callouts .callout b { white-space: nowrap; font: 400 13px/1 var(--pixel); color: #fff; background: rgba(150,20,40,.92); border: 1px solid #ff8a8a; border-radius: 5px; padding: 3px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.card.shelf.secret { box-shadow: 0 0 0 2px rgba(120,200,255,.8), 0 4px 10px rgba(0,0,0,.6); }
.card.shelf.secret::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(40,60,120,.18) 0 6px, transparent 6px 12px); pointer-events: none; }
/* sagas and planeswalkers in their column: the chapter/loyalty is what matters, not the land's mana symbol */
.card.walker .makes { display: none !important; }
/* commander in the portrait spot: the hidden portrait must not catch taps meant for the card (the life heart still does, for targeting) */
.avatar.hascmd { pointer-events: none; }
.avatar.hascmd .life, .avatar.hascmd .poison { pointer-events: auto; }
/* thrown dice */
.die3d { position: absolute; z-index: 3200; pointer-events: none; width: 0; height: 0; }
.die3d canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.55)); }
.die3d .dieshadow { position: absolute; left: 0; top: 0; height: 22px; transform: translate(-50%, 40%); border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(4px); }
.die3d .dietag { position: absolute; left: 0; top: 0; transform: translate(-50%, 60px) scale(.6); opacity: 0; white-space: nowrap; font: 400 22px/1 var(--pixel);
  color: #fff3c0; background: rgba(20,12,30,.9); border: 2px solid var(--gold-hi); border-radius: 8px; padding: 5px 10px; transition: opacity .25s, transform .25s; }
.die3d.landed .dietag { opacity: 1; transform: translate(-50%, 70px) scale(1); }

/* basic land style picker */
.backpick .bkprev.lp { overflow: hidden; background: #120d16; }
.backpick .bkprev.lp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.backpick .lpside { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.backpick .lpcolors { display: flex; gap: 10px; }
.backpick .lpc { border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px #120d16; opacity: .6; }
.backpick .lpc.on { opacity: 1; box-shadow: 0 0 0 3px var(--gold-hi); }

/* mana cost bubbles: always on the card's own cost line (top right), never floating outside it.
   On a printed card they sit right over the printed symbols, a bit bigger so they read at a glance. */
.card .cost { right: 4.5% !important; left: auto !important; top: 3.6% !important; bottom: auto !important; transform-origin: 100% 0 !important; z-index: 4; gap: 1px; }
.card .cost i { margin-left: 0 !important; }
.card.inhand .cost { transform: scale(.62) !important; }
.card:not(.inhand):not(.zoom) .cost { transform: scale(.5) !important; }
#zoom .big .card .cost { transform: scale(.66) !important; top: 3.4% !important; right: 5% !important; }

/* the instruction banner sits at the top edge, never on top of the cards you are picking */
#instr { top: 108px !important; font-size: 20px !important; padding: 8px 22px !important; max-width: 980px; background: linear-gradient(rgba(14,14,30,.88), rgba(8,8,18,.9)) !important; }

.mana { position: absolute; }
.mana .pooltitle { position: absolute; left: 0; bottom: calc(100% + 4px); white-space: nowrap; font: 400 13px/1 var(--pixel); font-style: normal; color: var(--gold-hi);
  background: rgba(14,14,30,.85); border: 1px solid rgba(214,166,74,.6); border-radius: 5px; padding: 3px 7px; pointer-events: none; }
#manaOpp .pooltitle { left: auto; right: 0; top: calc(100% + 4px); bottom: auto; }

/* while a question is open, the banner would only repeat "waiting...": hide it */
body:has(#dialog.on) #instr { opacity: 0 !important; }

/* the opponent's lands face them, but their mana symbols and counts read the right way up for you */
.card.flipped .makes, .card.flipped .stackcount, .card.flipped .counters { transform: rotate(180deg); }
#arrows path.atk.many { opacity: .35; stroke-width: 2px; }

/* watching: the eye, the show-hand switch, and a calmer screen for watchers (nothing to press) */
#watchbar .watch .eyeicon { display: inline-block; width: 18px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-radius: 50% / 60%; position: relative; }
#watchbar .watch .eyeicon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); background: currentColor; border-radius: 50%; }
#watchbar .watch[data-act="eye"] { color: #9fe0ff; }
#watchbar .watch.on { background: #3a2c10; color: var(--gold-hi); }
body.spectating #actions, body.spectating #topbar [data-act="sort"], body.spectating #topbar [data-act="undo"], body.spectating #topbar [data-act="autopass"], body.spectating #topbar [data-act="concede"] { display: none !important; }
body.spectating #hostRow, body.spectating #btnReady, body.spectating #btnStart, body.spectating #deckBox, body.spectating #settingsBox, body.spectating #botBox { display: none !important; }
#watchNote { display: none; }
body.spectating #watchNote { display: block; color: #9fe0ff; }
body.spectating #roomRight, body.spectating #btnBot { display: none !important; }
.seat.watchers { color: #9fe0ff; }
.seat.watchers .eyeicon { display: inline-block; width: 16px; height: 10px; border: 2px solid currentColor; border-radius: 50% / 60%; vertical-align: -1px; margin-right: 4px; }
#watchbar { position: absolute; left: 16px; top: 122px; display: flex; gap: 8px; z-index: 40; }
#watchbar .tool { font-size: 15px; padding: 4px 10px; }

/* ---------- intro (title screen) ---------- */
#intro { position: absolute; inset: 0; z-index: 6000; background: #000; overflow: hidden; cursor: pointer; }
#intro .ibg { position: absolute; inset: -20px; background: url(../assets/brand/intro-bg.jpg) center / cover; opacity: 0; animation: introBg 1.6s ease-out .2s forwards; image-rendering: pixelated; }
#intro .ibg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.05), rgba(0,0,0,.6)); }
#intro .ishake { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 110px; }
#intro .ilogo { width: 860px; transform: translateY(-1100px) scale(1.25); filter: drop-shadow(0 30px 30px rgba(0,0,0,.75)); animation: introDrop .55s cubic-bezier(.55,0,1,.45) 1.5s forwards, introSettle .7s ease-out 2.05s forwards, introGlow 2.4s ease-in-out 2.8s infinite; }
#intro .ilogo { position: relative; }
#intro .ilogo img { display: block; width: 100%; pointer-events: none; }
#intro .ilogo .iref { position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 50% 83%; transform: scale(2.4); }
#intro.reforged .ilogo .iref { animation: introRef .26s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes introRef { 0% { opacity: 0; transform: scale(2.4) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }
#intro.landed .ishake { animation: introShake .55s linear; }
#intro .iflash { position: absolute; inset: 0; background: #fff4d6; opacity: 0; pointer-events: none; }
#intro.landed .iflash { animation: introFlash .35s ease-out; }
#intro .istart { position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; font: 400 44px/1 var(--pixel); letter-spacing: 6px; color: #ffd35a;
  text-shadow: 0 0 10px #ff7a1a, 0 0 24px #ff4d00, 3px 3px 0 #2a0c00; opacity: 0; }
#intro.wait .ibg, #intro.wait .ilogo { animation-play-state: paused; }
#intro .igate { position: absolute; left: 0; right: 0; top: 50%; margin-top: -22px; text-align: center; font: 400 40px/1 var(--pixel); letter-spacing: 6px; color: #ffd35a;
  text-shadow: 0 0 10px #ff7a1a, 0 0 24px #ff4d00, 3px 3px 0 #2a0c00; animation: introBlink 1.05s steps(1) infinite; }
#intro:not(.ready) { cursor: default; }
#intro.ready .istart { animation: introBlink 1.05s steps(1) infinite; }
#intro.out { animation: introOut .45s ease-in forwards; pointer-events: none; }
#intro .spark { position: absolute; width: 8px; height: 8px; background: #ffb347; box-shadow: 0 0 8px #ff6a00; pointer-events: none; }
@keyframes introBg { to { opacity: 1; } }
@keyframes introDrop { to { transform: translateY(0) scale(1); } }
@keyframes introSettle { 0% { transform: translateY(0) scaleX(1.12) scaleY(.82); } 30% { transform: translateY(-26px) scaleX(.96) scaleY(1.06); } 55% { transform: translateY(0) scaleX(1.04) scaleY(.95); } 75% { transform: translateY(-6px) scale(1); } 100% { transform: translateY(0) scale(1); } }
@keyframes introGlow { 0%, 100% { filter: drop-shadow(0 30px 30px rgba(0,0,0,.75)) drop-shadow(0 0 0 rgba(255,120,30,0)); } 50% { filter: drop-shadow(0 30px 30px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(255,120,30,.75)); } }
@keyframes introShake { 0% { transform: translate(0,0); } 10% { transform: translate(-18px, 14px); } 20% { transform: translate(16px, -12px); } 30% { transform: translate(-12px, 8px); } 45% { transform: translate(10px, -6px); } 60% { transform: translate(-6px, 4px); } 80% { transform: translate(3px, -2px); } 100% { transform: translate(0,0); } }
@keyframes introFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes introBlink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes introOut { to { opacity: 0; transform: scale(1.04); } }
.menu .homelogo { width: 460px; margin: -10px auto 0; display: block; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }

/* ---------- room screen: steps ---------- */
.roommenu { width: 1420px; max-height: 860px; overflow: auto; }
.roomcols { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; }
.roomleft { display: flex; flex-direction: column; gap: 14px; }
.roomsteps { display: flex; flex-direction: column; gap: 14px; }
.step { background: rgba(10,12,30,.45); border: 2px solid #2c3270; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.step h3 { margin: 0; font: 400 22px/1 var(--pixel); color: var(--gold-hi); display: flex; align-items: center; gap: 10px; }
.step h3 > b { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-hi); color: #120d16; display: grid; place-items: center; font-size: 18px; flex: none; }
.step h3 .tool.small, .tool.small { height: 32px; font-size: 14px; padding: 0 10px; }
.step h3 .tool.small { margin-left: auto; }
.fmtpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fmt { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 2px solid #3c4485; background: #141838; color: var(--ink); border-radius: 10px; cursor: pointer; text-align: left; font: 600 22px/1 var(--pixel); }
.fmt small { font: 400 12px/1.2 var(--pixel); color: var(--ink-dim); }
.fmt.on { border-color: var(--gold-hi); background: #3a2c10; }
.fmt:disabled { opacity: .4; cursor: default; }
.fmtrules { font: 400 14px/1.3 var(--pixel); color: var(--ink-dim); }
#deckPaste.folded { display: none; }
#oppStep .oppwait { font: 400 16px var(--pixel); color: var(--ink-dim); }
.botrow { display: flex; align-items: center; gap: 12px; }
.botrow .lbl { width: 90px; flex: none; font: 400 16px var(--pixel); color: var(--ink-dim); }
.botrow select { flex: 1; }
.slider { flex: 1; }
.slider input[type=range] { width: 100%; accent-color: var(--gold-hi); height: 28px; cursor: pointer; }
.slider .ticks { display: flex; justify-content: space-between; font: 400 13px var(--pixel); color: var(--ink-dim); }
#botLevel[data-level="4"] { accent-color: #ff6a5a; }
.adv summary { cursor: pointer; font: 400 18px var(--pixel); color: var(--ink-dim); list-style: none; }
.adv summary::before { content: '▸ '; }
.adv[open] summary::before { content: '▾ '; }
.adv[open] summary { color: var(--gold-hi); margin-bottom: 6px; }
.startrow { justify-content: flex-end; }
/* native drop-down lists at a normal size */
select option { font: 400 16px/1.3 system-ui, sans-serif; }
/* big menus open from the top, not floating in the middle */
#settings > .menu, #room > .menu { margin: 18px auto auto !important; }
.roommenu { max-height: 872px !important; height: auto; }
#room > .menu { margin: 14px auto auto !important; }
.roomleft { position: sticky; top: 0; }
.startcol { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.startcol .bigbtn { width: 100%; }
.startcol #roomMsg { text-align: center; }
body.desk .roommenu { max-height: 1085px !important; }

/* several revealed cards at once: a fan in the middle of the screen */
.revealsplash.fan .rvrow { position: relative; }
.revealsplash.fan .rvcard { transform: rotate(var(--rot)); transform-origin: 50% 120%; transition: transform .18s, top .18s; box-shadow: 0 16px 40px rgba(0,0,0,.7); cursor: pointer; }
.revealsplash.fan .rvcard:hover { transform: rotate(0deg) translateY(-26px) scale(1.06); z-index: 20 !important; }
.revealsplash.fan .rvtag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; font: 400 13px var(--pixel); font-style: normal; color: #fff; background: rgba(10,8,18,.9); border: 1px solid var(--gold); border-radius: 6px; padding: 3px 7px; }

/* pile split: fixed-size piles with arrows between them; each card says where a tap sends it */
.dpiles.split { display: grid; grid-template-columns: auto 60px auto; align-items: center; gap: 8px; }
.dpiles.split .items { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.pilearrows { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--gold-hi); font-size: 34px; text-shadow: 0 0 10px rgba(255,214,110,.6); animation: pileNudge 1.4s ease-in-out infinite; }
@keyframes pileNudge { 50% { transform: scale(1.12); } }
.dpiles.split .item { position: relative; }
.dpiles.split .movetag { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; font: 400 12px var(--pixel); font-style: normal; color: #1a1208; background: var(--gold-hi); border-radius: 5px; padding: 2px 6px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.dpiles.split .item:hover .movetag { opacity: 1; }
@media (hover: none) { .dpiles.split .movetag { opacity: .9; } }

/* commander tax: a gold tag on top of the commander (the life heart covers the bottom) */
.card.incmd .zbadge { top: -14px; bottom: auto; font: 400 16px/1 var(--pixel); background: var(--gold-hi); color: #1a1208; border: 2px solid #120d16; padding: 4px 8px; z-index: 8; box-shadow: 0 3px 8px rgba(0,0,0,.6); }

/* "Respond?" when the opponent's spell is on the stack and you can answer it */
#respond { position: absolute; left: 50%; top: 168px; transform: translate(-50%, -10px); z-index: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 760px;
  padding: 10px 22px; border-radius: 12px; background: linear-gradient(#3a1018, #200810); border: 2px solid #ff8a5a; box-shadow: 0 0 24px rgba(255,110,60,.55), 0 10px 24px rgba(0,0,0,.6);
  color: #fff; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#respond.on { opacity: 1; transform: translate(-50%, 0); animation: respondPulse 1s ease-in-out 3; }
#respond b { font: 400 26px/1 var(--pixel); color: #ffb08a; }
#respond span { font: 400 17px/1.25 var(--pixel); }
#respond small { font: 400 13px/1.2 var(--pixel); color: #ffd9c8; }
@keyframes respondPulse { 50% { box-shadow: 0 0 40px rgba(255,110,60,.9), 0 10px 24px rgba(0,0,0,.6); } }

/* card reveal: the game behind is locked while it is up */
.revealshade { position: absolute; inset: 0; z-index: 1890; background: rgba(4,4,12,.45); cursor: pointer; animation: shadeIn .2s ease-out; }
.revealshade.out { transition: opacity .35s; opacity: 0; }
@keyframes shadeIn { from { opacity: 0; } }
.revealshade .revealsplash { cursor: pointer; }
.revealsplash.pinned, .revealsplash.pinned * { animation-duration: 0s !important; transition-duration: 0s !important; }
.revealsplash.pinned .cap::after { content: '  ·  click to continue'; color: var(--gold-hi); font-size: 16px; }

/* targeting a spell on the stack */
#stackconfirm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 24px; min-width: 420px; max-width: 620px;
  background: linear-gradient(#20244a, #121530); border: 4px solid #120d16; outline: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.75); text-align: center; }
#stackconfirm h3 { margin: 0; font: 400 22px/1.2 var(--pixel); color: var(--gold-hi); }
#stackconfirm p { margin: 0; font: 400 16px/1.3 var(--pixel); color: var(--ink); }
#stackconfirm .row { display: flex; gap: 12px; }
body.stackpick #stackPanel .it.sel { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 18px rgba(255,214,110,.8); animation: pulse 1.2s ease-in-out infinite; cursor: pointer; }

/* section titles inside a choice list (cards on the battlefield / spells on the stack) */
#dialog .items .secthead { flex-basis: 100%; width: 100%; grid-column: 1 / -1; font: 400 18px/1 var(--pixel); color: var(--gold-hi); padding: 6px 2px 2px; border-bottom: 1px solid rgba(214,166,74,.4); }

/* Glow for cards you can pick, without flicker: the glow is its own layer and only its opacity pulses
   (animating a shadow on many tilted cards made the browser redraw them in pieces). */
.card.selectable .face, .card.selectable .back { animation: none !important; box-shadow: 0 0 0 3px var(--sel), 0 0 18px 4px rgba(255,210,74,.75); }
.card.selectable::after { content: ''; position: absolute; inset: -6px; border-radius: 12px; pointer-events: none; z-index: -1;
  box-shadow: 0 0 22px 8px rgba(255,210,74,.9); opacity: .35; animation: selGlow 1.3s ease-in-out infinite; will-change: opacity; }
@keyframes selGlow { 50% { opacity: 1; } }
.card.onfield { backface-visibility: hidden; transform-style: flat; }
.card.shelf.selectable { animation: none !important; }

#peekBack { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2600; height: 54px; padding: 0 28px; font-size: 22px; box-shadow: 0 0 0 3px #120d16, 0 0 20px rgba(80,140,255,.7); }

/* pixel icons: tombstone (graveyard), vortex (exile), heart (life) */
.zonebtn svg { width: 26px; height: 26px; image-rendering: pixelated; }
.avatar .life .heart { display: inline-flex; width: 26px; height: 24px; font-style: normal; filter: drop-shadow(0 2px 0 #000); }
.avatar .life .heart svg { width: 100%; height: 100%; }
/* Sort hand, Auto-pass and Concede live under your name, at the bottom left */
#bottombar { position: absolute; left: 10px; top: 856px; display: flex; gap: 6px; z-index: 40; }
#bottombar .tool { height: 32px; font-size: 14px; padding: 0 9px; }

/* names on the table: one line, cut with "…" (long names used to wrap onto three lines) */
.card.onfield .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: auto; max-height: 18%; line-height: 1.15; padding-bottom: 6px; }
/* "Large card names on the battlefield": a readable plate on every card on the table, art-only or whole */
body.big-names-field .card.onfield .name { display: block !important; font: 700 15px/1.15 var(--pixel) !important; color: #fff6dc; padding: 3px 6px 4px;
  background: linear-gradient(180deg, rgba(26,20,40,.97), rgba(12,9,20,.95)) !important; border: 1.5px solid #d6a64a !important; border-radius: 4px; max-height: none; z-index: 4; }
body.big-names-field .card.onfield.whole.scanned .name { top: 2%; left: 3%; right: 3%; }
/* settings: live preview of the visual options */
.visprev { display: flex; gap: 26px; align-items: flex-end; justify-content: center; padding: 14px; border: 2px solid #2c3270; border-radius: 12px; background: rgba(10,12,30,.5); }
.visprev figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.visprev figcaption { font: 400 13px var(--pixel); color: var(--ink-dim); }
.visprev .card { position: relative !important; left: 0 !important; top: 0 !important; }
body.big-names-field .card.onfield .name { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 14px !important; }

/* ---------- touch screens: bigger buttons for fingers (on a phone the whole table is shrunk to less than half) ---------- */
@media (pointer: coarse) {
  #topbar .tool { height: 54px; font-size: 23px; padding: 0 15px; }
  #bottombar { top: 846px; gap: 6px; }
  #bottombar .tool { height: 46px; font-size: 15px; padding: 0 9px; }
  #watchbar .tool { font-size: 19px; padding: 8px 14px; }
  #logPanel [data-close] { height: 54px; min-width: 54px; font-size: 24px; }
  #btnPaste, #botRemove { font-size: 19px !important; padding: 0 16px !important; height: 44px !important; }
  /* invisible extra touch area around each small button, so a finger that lands near it still counts */
  #topbar .tool, #bottombar .tool, #watchbar .tool, #logPanel [data-close] { position: relative; }
  #topbar .tool::after, #bottombar .tool::after, #watchbar .tool::after, #logPanel [data-close]::after { content: ''; position: absolute; inset: -10px -4px; }
}
button.lit { border-color: #6aff9a !important; color: #c8ffd8 !important; }

/* the fullscreen button only shows on phones when fullscreen is off */
#btnFullTop { display: none; }
body.notfull #btnFullTop { display: inline-block; color: var(--gold-hi); border-color: var(--gold-hi); }

/* phased out (Teferi's Protection...): still on the table, but as though it didn't exist until it phases back in */
.card.phased { opacity: .38; filter: grayscale(.85) brightness(.8); }
.card.phased::before { content: 'Phased out'; position: absolute; left: 50%; top: 42%; transform: translateX(-50%) rotate(-12deg); z-index: 9; padding: 2px 8px; border-radius: 6px;
  background: rgba(10,10,30,.9); color: #b9c6ff; font: 400 15px/1.2 var(--pixel); white-space: nowrap; border: 1px solid #6f7fd0; }

/* the notice Wizards of the Coast asks fan projects to show */
.fanpolicy { margin: 18px auto 0; max-width: 820px; text-align: center; font: 400 13px/1.45 system-ui, sans-serif; color: rgba(220,214,240,.55); }

#backPick .bknote { flex-basis: 100%; margin-top: 8px; font: 400 15px/1.35 system-ui, sans-serif; color: rgba(220,214,240,.6); }

/* credits */
.linkbtn { background: none; border: 0; padding: 0 0 0 6px; color: #d6b8ff; text-decoration: underline; cursor: pointer; font: inherit; }
.creditsov { position: absolute; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(4,4,12,.78); }
.creditsov[hidden] { display: none; }
.creditspanel { width: 900px; max-width: 92%; }
.creditspanel h2 { margin: 0 0 10px; font: 400 40px/1 var(--pixel); color: var(--gold-hi, #ffd35a); text-align: center; }
.creditspanel dl { display: grid; grid-template-columns: 260px 1fr; gap: 10px 22px; margin: 0; font: 400 21px/1.35 system-ui, sans-serif; color: var(--ink); }
.creditspanel dt { color: #c9b27a; text-align: right; font-family: var(--pixel); }
.creditspanel dd { margin: 0; }
.creditspanel .fine { font: 400 14px/1.45 system-ui, sans-serif; color: rgba(220,214,240,.6); text-align: center; margin: 12px 0 0; }

/* dragging cards in dialogs */
.dragsrc { position: relative; z-index: 50; pointer-events: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); transition: none !important; cursor: grabbing; }
.dpile.droptarget { outline: 3px dashed var(--gold-hi, #ffd35a); outline-offset: -4px; background: rgba(255,211,90,.08); }

/* Auto-pay preview: what the Auto button would tap, and floating mana that is used first */
.card.autotap { outline: 3px solid #5ef0ff; outline-offset: 2px; box-shadow: 0 0 18px 4px rgba(94,240,255,.75); animation: autotapPulse 1.1s ease-in-out infinite; }
@keyframes autotapPulse { 50% { box-shadow: 0 0 26px 8px rgba(94,240,255,.95); } }
.mana.poolglow button { box-shadow: 0 0 14px 4px rgba(94,240,255,.85); border-radius: 50%; animation: autotapPulse 1.1s ease-in-out infinite; }
.mana.poolglow .pooltitle::after { content: ' · first'; color: #5ef0ff; }

.botwarn { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(255,170,40,.12); border: 1px solid rgba(255,170,40,.55); color: #ffcf7a; font: 400 16px/1.35 system-ui, sans-serif; }

/* choosing a color: big mana symbols */
.item.manapick { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px !important; min-width: 110px; }
.item.manapick .manapickicon { display: block; width: 64px; height: 64px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.item.manapick span { font: 400 18px/1 var(--pixel); }

/* in-game pop-up */
.gameask { position: absolute; inset: 0; z-index: 7000; display: flex; align-items: center; justify-content: center; background: rgba(4,4,12,.7); }
.gaskpanel { min-width: 520px; max-width: 900px; text-align: center; }
.gasktext { font: 400 30px/1.3 var(--pixel); color: var(--ink); margin: 6px 0 18px; }
.gaskpanel .row { justify-content: center; gap: 18px; }
.gaskpanel .row button { min-width: 200px; height: 64px; font-size: 26px; }
.btn-main.danger { background: linear-gradient(#d8463a, #8e1f18) !important; border-color: #ff8a7a !important; }
.gaskcopy { width: 100%; font: 400 20px/1 monospace; padding: 12px; margin-bottom: 16px; user-select: text; -webkit-user-select: text; }

/* mana wheel */
.manawheel { position: relative; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.manawheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.manawheel .slice { cursor: pointer; transition: transform .12s ease-out, filter .12s; transform-origin: 0 0; }
.manawheel .slice:hover { filter: brightness(1.25); transform: scale(1.04); }
.manawheel .slice:active { transform: scale(.97); }
.manawheel .wheelicon { position: absolute; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.7)); }
.manawheel .wheellabel { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font: 400 17px/1 var(--pixel); color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.wheelholder { padding: 10px 0 4px; }
#wheel2 { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 900; }

/* the cost a card in hand has right now (after reductions/increases); top-left so the next card in the fan never hides it */
.card .costnow { position: absolute; top: -14px; left: 6px; z-index: 7; display: flex; gap: 1px; padding: 3px 5px; border-radius: 14px;
  background: #1b1422; border: 2px solid var(--gold-hi, #f3cf6a); box-shadow: 0 3px 8px rgba(0,0,0,.7); pointer-events: none; }
.card .costnow.cheaper { border-color: #6fe08a; box-shadow: 0 0 10px rgba(111,224,138,.7), 0 3px 8px rgba(0,0,0,.7); }
.card .costnow.dearer { border-color: #ff6e5a; box-shadow: 0 0 10px rgba(255,110,90,.7), 0 3px 8px rgba(0,0,0,.7); }
.card .costnow i { display: inline-block; }
#zoom .costrow { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
#zoom .costrow i { display: inline-block; }

/* ---------------- start screen: three ways to play ---------------- */
.homemenu { width: 1080px; }
.homemenu .homelogo { margin-bottom: -6px; }
.startgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.startgrid[hidden], .lobbyinvite[hidden] { display: none; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px; border-radius: 14px; cursor: pointer; text-align: center;
  background: linear-gradient(#262b5e, #151838); border: 3px solid #3c4485; color: var(--ink); font: inherit; box-shadow: 0 8px 20px rgba(0,0,0,.45); transition: transform .12s, border-color .12s; }
button.choice:hover { transform: translateY(-3px); border-color: var(--gold); }
.choice i { font-style: normal; font-size: 46px; line-height: 1; }
.choice b { font: 400 30px/1 var(--pixel); color: var(--gold-hi); }
.choice span { font-size: 17px; line-height: 1.3; color: var(--ink-dim); }
.choice .coderow { display: flex; gap: 8px; }
.menu .choice .coderow input { width: 170px; text-transform: uppercase; text-align: center; letter-spacing: 6px; padding: 10px; }
.choice .coderow .btn-second { height: 56px; min-width: 70px; }
.lobbyinvite { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lobbyinvite .bigbtn { min-width: 520px; }
.menu .smallrow { font-size: 18px; color: var(--ink-dim); margin-top: -6px; }

/* ---------------- lobby ---------------- */
.lobbymenu { width: 1480px; max-height: 860px; overflow: auto; gap: 18px; }
.lobbyhead { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.lobbytitle .sub { text-align: left; margin: 0; }
.menu .lobbytitle .code { font-size: 72px; letter-spacing: 12px; text-align: left; }
.lobbycols { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 22px; align-items: start; }
.lobbycols section { background: #0e1028; border: 2px solid #2c3366; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-height: 520px; }
.lobbycols h3 { margin: 0; font: 400 28px/1 var(--pixel); color: var(--gold-hi); }
.lobbycols h3 b { color: var(--ink-dim); font-weight: 400; }
.lobbyme { align-items: center; text-align: center; }
#lobbyCrest { width: 150px; height: 150px; image-rendering: pixelated; border-radius: 50%; outline: 4px solid var(--gold); }
.lobbyname { font: 400 30px/1 var(--pixel); color: var(--ink); }
.lobbyme .bigbtn { width: 100%; font-size: 26px; }
.lobbyme .btn-second { width: 100%; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; border-radius: 12px; cursor: pointer;
  background: #161a3e; border: 2px solid #3c4485; color: var(--ink); font: inherit; transition: transform .12s, border-color .12s; }
.person:not(:disabled):hover { transform: translateY(-3px); border-color: var(--gold); }
.person:disabled { cursor: default; opacity: .85; }
.person .lav { image-rendering: pixelated; border-radius: 50%; outline: 3px solid #3c4485; }
.person.free .lav { outline-color: #6fe08a; }
.person.busy .lav { outline-color: #ff8a5a; }
.person.table .lav { outline-color: #f3cf6a; }
.person b { font: 400 20px/1.1 var(--pixel); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstatus { font-size: 15px; padding: 2px 10px; border-radius: 10px; background: #0a0c20; color: var(--ink-dim); }
.person.free .pstatus { color: #8aff9a; } .person.busy .pstatus { color: #ffb08a; } .person.table .pstatus { color: #ffe39a; }
.tables { display: flex; flex-direction: column; gap: 12px; }
.ltable { background: #161a3e; border: 2px solid #3c4485; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ltvs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ltvs em { font-style: normal; color: var(--ink-dim); font-size: 18px; }
.ltp { display: flex; align-items: center; gap: 8px; }
.ltp .lav { image-rendering: pixelated; border-radius: 50%; outline: 2px solid var(--gold); }
.ltp b { font: 400 20px/1 var(--pixel); }
.ltinfo { color: var(--ink-dim); font-size: 17px; }
.ltable .row { justify-content: flex-start; }
.chface { display: flex; justify-content: center; margin-bottom: 8px; }
.chface .lav { image-rendering: pixelated; border-radius: 50%; outline: 4px solid var(--gold); }
/* the opponent looking at one of their cards: it dips toward them a little, as in real life */
#oppHand .oppcard { transition: translate .22s ease; }
#oppHand .oppcard.peek { translate: 0 22px; z-index: 50 !important; }

/* ---------------- buzz, away, lobby chat, format chips ---------------- */
.person { position: relative; }
.person.away .lav { filter: grayscale(.6) brightness(.75); }
.pbuzz { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: #0a0c20; border: 2px solid #3c4485; font-size: 17px; cursor: pointer; transition: transform .12s, border-color .12s; }
.pbuzz:hover { transform: scale(1.12) rotate(-12deg); border-color: var(--gold); }
.pbuzz.sent { opacity: .35; }
#stage.buzzed { animation: buzzShake .11s linear 10; }
@keyframes buzzShake { 0% { translate: 0 0; } 25% { translate: -7px 2px; } 50% { translate: 6px -2px; } 75% { translate: -4px -1px; } 100% { translate: 0 0; } }
#avOpp.away::after { content: '💤 away'; position: absolute; left: -12px; top: 42%; transform: translate(-100%, -50%); white-space: nowrap; padding: 2px 10px; border-radius: 10px;
  background: #120d16; border: 2px solid #6c6c8a; color: #c8c8e0; font: 400 15px/1.2 var(--pixel); z-index: 5; }
.lchat { margin-top: auto; display: flex; flex-direction: column; gap: 8px; border-top: 2px solid #2c3366; padding-top: 12px; }
.lchatlog { height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.lcline { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 1.25; }
.lcline .lav { flex: none; image-rendering: pixelated; border-radius: 50%; }
.lcline b { color: var(--gold-hi); font: 400 17px/1 var(--pixel); flex: none; }
.lcline span { color: var(--ink); word-break: break-word; }
.lcempty { color: var(--ink-dim); font-size: 17px; text-align: center; margin: auto; }
.lchatform { display: flex; gap: 8px; }
.menu .lchatform input { flex: 1; font-size: 20px; padding: 8px 12px; min-width: 0; }
.lchatform .btn-second { height: 46px; }
.quickchat { display: flex; gap: 6px; flex-wrap: wrap; }
.qchip, .fmtchip { background: #161a3e; border: 2px solid #3c4485; border-radius: 16px; color: var(--ink); font: 400 16px/1 var(--pixel); padding: 7px 12px; cursor: pointer; }
.qchip:hover, .fmtchip:hover { border-color: var(--gold); }
.fmtchips { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.fmtchip { font-size: 20px; padding: 10px 16px; }
.fmtchip.on { background: #3a2a08; border-color: var(--gold); color: var(--gold-hi); }
.chface { flex-direction: column; align-items: center; }
#btnAlerts.lit { border-color: var(--gold); color: var(--gold-hi); }
/* about panel, advanced settings */
.aboutpanel { max-width: 900px; }
.aboutpanel p { font-size: 19px; line-height: 1.45; color: var(--ink); margin: 0 0 12px; }
.aboutpanel .aboutver { color: var(--gold-hi); font: 400 20px/1 var(--pixel); }
#settings details.adv { border: 2px solid #2c3366; border-radius: 12px; padding: 10px 16px; background: #0e1028; }
#settings details.adv summary { cursor: pointer; font: 400 22px/1.4 var(--pixel); color: var(--gold-hi); }
#settings .advnote { font-size: 17px; line-height: 1.4; color: var(--ink-dim); margin: 10px 0; }
/* phones: a clear way back to full screen from any screen (menus too), shown only when it's off */
#fullChip { display: none; position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); z-index: 99999;
  padding: 10px 16px; border-radius: 22px; border: 2px solid var(--gold-hi); background: rgba(18,13,22,.92); color: var(--gold-hi);
  font: 400 18px/1 var(--pixel); box-shadow: 0 4px 14px rgba(0,0,0,.6); }
body.notfull #fullChip { display: block; }
body:not(.touch) .touchonly { display: none !important; }
body.notfull.ingame #fullChip { display: none; }   /* in a game the gold ⛶ in the top bar does it */
/* cards that came out of hiding, the quiet way: small cards at the side for a few seconds (nothing is blocked) */
#revealStrip { position: absolute; left: 190px; top: 190px; z-index: 950; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#revealStrip .rsgroup { background: rgba(12,10,24,.82); border: 2px solid var(--gold); border-radius: 12px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.6);
  animation: rsIn .3s ease-out; transition: opacity .35s, transform .35s; }
#revealStrip .rsgroup.out { opacity: 0; transform: translateX(-30px); }
@keyframes rsIn { from { opacity: 0; transform: translateX(-30px); } }
#revealStrip .rscap { font: 400 15px/1 var(--pixel); color: var(--gold-hi); margin-bottom: 6px; }
#revealStrip .rsrow { display: flex; gap: 6px; }
#revealStrip .rscard { position: relative !important; width: 74px; height: 104px; pointer-events: auto; cursor: zoom-in; left: auto !important; top: auto !important; }

/* ---- readable text: the pixel font stays for titles, buttons and the fun bits; what you read closely is clean ---- */
.card .name, .card .type, .card .rules, #instr, #prompt, .panel p, .panel h2.q, #dialog .panel h2, #picker h2,
.panel .item.text, .crow b, .crow small, .gasktext, #toast, #stackPanel .tx b, #stackPanel .tx small, #logPanel .le,
#zoom .kw div, .panel .finder, .lchatlog, .menu .msg, #revealStrip .rscap, .panel input[type=text], .menu input:not([type=range]) {
  font-family: var(--text) !important; letter-spacing: 0;
}
.card .name { font-weight: 700 !important; }
.card .rules { font-size: 16px !important; line-height: 1.3 !important; }
#instr, #prompt { font-weight: 700 !important; }
#dialog .panel h2, #picker h2 { font-weight: 700 !important; font-size: 28px !important; }
#picker .pk-why { margin: -4px 0 4px; font: 400 20px/1.35 var(--text); color: var(--ink-dim); }
/* several abilities on one permanent: big tiles, easy to hit with a thumb */
.abtiles { display: flex; flex-direction: column; gap: 12px; max-height: 470px; overflow: auto; padding: 2px; }
.abtile { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 18px; min-height: 92px; padding: 12px 20px; text-align: left;
  border-radius: 16px; border: 3px solid #3c4485; background: linear-gradient(#262c5c, #1a1e44); color: var(--ink); cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12); transition: transform .12s, border-color .12s, background .12s; }
.abtile:hover, .abtile:active { border-color: var(--gold-hi); background: linear-gradient(#34306a, #221f50); transform: translateY(-2px); }
.abtile.off { opacity: .45; cursor: default; transform: none; }
.abcost { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font: 700 24px/1.2 var(--text); color: var(--gold-hi);
  border-right: 2px solid rgba(214,166,74,.35); padding-right: 14px; min-height: 60px; }
.abwhat { font: 400 22px/1.3 var(--text); }
.abwhat small { display: block; margin-top: 4px; font-size: 16px; color: #ff9a8a; }

/* ---------------- room: host-only setup, guests see the rules ---------------- */
#room .guestonly { display: none; }
#room.guest .guestonly { display: block; }
#room.guest .hostonly { display: none !important; }
#guestRules h3 { margin: 0 0 6px; font: 700 26px/1 var(--pixel); color: var(--gold-hi); }
#guestRules .grules { font: 400 19px/1.3 var(--text); color: var(--ink); }
#guestRules .msg { text-align: left; margin-top: 6px; }
#room.guest .stepn { display: none; }

/* ---------------- deck shelf: big card in the middle, neighbours fanned out ---------------- */
#deckPick { display: block !important; }
.dsh { display: grid; grid-template-columns: 44px 300px 1fr 44px; align-items: center; gap: 10px; min-height: 330px; }
.dsh-nav { height: 120px; border-radius: 14px; border: 2px solid var(--gold-lo); background: rgba(12,12,30,.7); color: var(--gold-hi); font-size: 22px; cursor: pointer; }
.dsh-nav:hover { border-color: var(--gold-hi); background: rgba(40,30,10,.7); }
.dsh-stage { position: relative; height: 320px; perspective: 900px; touch-action: pan-y; user-select: none; cursor: grab; }
.dsh-big, .dsh-side { position: absolute; top: 50%; left: 50%; border-radius: 12px; }
.dsh-big { width: 216px; height: 302px; transform: translate(-50%, -50%); z-index: 5; }
.dsh-img, .dsh-side { background-size: cover; background-position: center; background-color: #120d16; border: 3px solid #120d16; }
.dsh-img { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 0 0 2px var(--gold), 0 14px 34px rgba(0,0,0,.7), 0 0 40px rgba(255,190,90,.18); }
.dsh-img.isadd::after { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 120px/1 var(--pixel); color: #fff; text-shadow: 0 4px 0 #000, 0 0 30px var(--accent); background: rgba(10,6,20,.35); border-radius: 12px; }
.dsh-side { width: 150px; height: 210px; opacity: .55; filter: saturate(.7) brightness(.7); transition: transform .35s, opacity .35s; cursor: pointer; }
.dsh-side.l1 { transform: translate(-112%, -50%) rotateY(32deg) scale(.92); z-index: 4; }
.dsh-side.r1 { transform: translate(12%, -50%) rotateY(-32deg) scale(.92); z-index: 4; }
.dsh-side.l2 { transform: translate(-150%, -50%) rotateY(42deg) scale(.78); z-index: 3; opacity: .3; }
.dsh-side.r2 { transform: translate(50%, -50%) rotateY(-42deg) scale(.78); z-index: 3; opacity: .3; }
.dsh-side:hover { opacity: .85; }
.dsh-big.in-r { animation: dshInR .42s cubic-bezier(.2,.8,.2,1); }
.dsh-big.in-l { animation: dshInL .42s cubic-bezier(.2,.8,.2,1); }
@keyframes dshInR { from { transform: translate(10%, -50%) rotateY(-55deg) scale(.85); opacity: .2; } }
@keyframes dshInL { from { transform: translate(-110%, -50%) rotateY(55deg) scale(.85); opacity: .2; } }
.dsh-badge { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: #1f6a35; border: 2px solid #8ff0a8; color: #fff; font: 700 15px/1 var(--text); white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.dsh-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dsh-info.fade { animation: dshFade .4s ease-out; }
@keyframes dshFade { from { opacity: 0; transform: translateY(8px); } }
.dsh-pos { font: 400 15px/1 var(--text); color: var(--ink-dim); }
.dsh-info h4 { margin: 0; font: 700 30px/1.05 var(--pixel); color: var(--gold-hi); text-shadow: 0 2px 0 #000; }
.dsh-sub { font: 700 18px/1.2 var(--text); color: var(--ink); }
.dsh-mana { display: flex; align-items: center; gap: 6px; min-height: 34px; }
.dsh-mana span { margin-left: 8px; font: 400 17px/1 var(--text); color: var(--ink-dim); }
.dsh-about { margin: 0; font: 400 18px/1.35 var(--text); color: var(--ink); }
.dsh-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dsh-btns .btn-main { min-width: 0; height: 52px; font-size: 24px; padding: 0 22px; }
.dsh-btns .btn-second { min-width: 0; height: 44px; font-size: 18px; }
.dsh-btns .danger { background: linear-gradient(#7a3030, #4a1a1a); }
.dsh-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 4px 6px; scrollbar-width: thin; }
.dsh-dot { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #3c4485; background: #1a1e40 center 30% / cover; cursor: pointer; color: var(--gold-hi); font: 700 26px/1 var(--pixel); transition: transform .15s; }
.dsh-dot.on { border-color: var(--gold-hi); transform: scale(1.18); box-shadow: 0 0 12px rgba(255,200,90,.6); }
.dsh-dot.playing { box-shadow: 0 0 0 3px #3fc46a; }
.dsh-dot.add { border-style: dashed; }

/* ---------------- deck editor ---------------- */
.deckedit { position: absolute; inset: 0; z-index: 6500; background: rgba(4,4,12,.72); display: flex; align-items: center; justify-content: center; }
.dkpanel { display: grid; grid-template-columns: 250px 1fr; gap: 26px; width: 1100px; max-width: calc(100% - 40px); padding: 26px 30px; }
.dk-left { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dk-card { width: 240px; height: 336px; border-radius: 12px; background-size: cover; background-position: center; border: 3px solid #120d16; box-shadow: 0 0 0 2px var(--gold), 0 12px 30px rgba(0,0,0,.7); }
.dk-card.flipin { animation: dkFlip .5s ease-out; }
@keyframes dkFlip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.dk-mana { display: flex; gap: 6px; min-height: 30px; }
.dk-count { font: 400 16px/1.3 var(--text); color: var(--ink-dim); text-align: center; }
.dk-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dk-right label { display: flex; flex-direction: column; gap: 6px; font: 400 17px/1 var(--text); color: var(--ink-dim); }
.dk-right input { font: 400 22px/1.2 var(--text); background: #0a0c20; color: var(--ink); border: 2px solid #3c4485; border-radius: 10px; padding: 10px 12px; }
.dk-list { height: 250px; resize: none; font: 400 17px/1.35 'Courier New', monospace; background: #0a0c20; color: var(--ink); border: 2px solid #3c4485; border-radius: 10px; padding: 10px 12px; user-select: text; -webkit-user-select: text; }
.dk-listlbl { position: relative; }
.dk-import { position: absolute; right: 0; top: -8px; }
.dk-right .row { justify-content: flex-end; }
#deckPick { max-height: none !important; overflow: visible !important; padding: 0 !important; }
.dsh { grid-template-columns: 40px 290px minmax(0, 1fr) 40px; }
.dsh-stage { overflow: visible; }
.dsh-info h4 { overflow-wrap: anywhere; }
.dsh-strip { max-width: 100%; }
.roomsteps, .roomsteps .step, #deckPick, .dsh-info { min-width: 0; }
.roomcols { grid-template-columns: 340px minmax(0, 1fr); }
.dsh { grid-template-columns: 40px 400px minmax(0, 1fr) 40px; }
.dsh-side.l1 { transform: translate(-50%, -50%) translateX(-120px) rotateY(30deg) scale(.86); }
.dsh-side.r1 { transform: translate(-50%, -50%) translateX(120px) rotateY(-30deg) scale(.86); }
.dsh-side.l2 { transform: translate(-50%, -50%) translateX(-170px) rotateY(40deg) scale(.7); }
.dsh-side.r2 { transform: translate(-50%, -50%) translateX(170px) rotateY(-40deg) scale(.7); }
@keyframes dshInR { from { transform: translate(-50%, -50%) translateX(120px) rotateY(-50deg) scale(.86); opacity: .3; } }
@keyframes dshInL { from { transform: translate(-50%, -50%) translateX(-120px) rotateY(50deg) scale(.86); opacity: .3; } }

/* ---------------- lobby stats ---------------- */
.statsov { position: absolute; inset: 0; z-index: 6000; background: rgba(4,4,12,.75); display: flex; align-items: center; justify-content: center; }
.statspanel { width: 1240px; max-width: calc(100% - 30px); height: 820px; max-height: calc(100% - 30px); display: flex; flex-direction: column; gap: 12px; padding: 20px 26px; }
.sthead { display: flex; align-items: center; gap: 20px; }
.sthead h2 { margin: 0; }
.sttabs { display: flex; gap: 6px; flex: 1; }
.sttabs button { height: 44px; padding: 0 20px; border-radius: 22px; border: 2px solid #3c4485; background: #141838; color: var(--ink); font: 600 20px/1 var(--pixel); cursor: pointer; }
.sttabs button.on { border-color: var(--gold-hi); background: #3a2c10; color: var(--gold-hi); }
.stclose { min-width: 0; width: 46px; padding: 0; }
.stbody { flex: 1; overflow: auto; padding-right: 6px; font: 400 18px/1.35 var(--text); color: var(--ink); }
.stempty { font: 400 22px/1.4 var(--text); color: var(--ink-dim); text-align: center; margin-top: 120px; }
.sttiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.sttiles div { background: #141838; border: 2px solid #2c3366; border-radius: 12px; padding: 12px 10px; text-align: center; }
.sttiles b { display: block; font: 700 30px/1.1 var(--pixel); color: var(--gold-hi); }
.sttiles span { font: 400 14px/1.2 var(--text); color: var(--ink-dim); }
.sttable { width: 100%; border-collapse: collapse; }
.sttable th { text-align: left; font: 600 15px/1 var(--text); color: var(--ink-dim); padding: 8px; border-bottom: 2px solid #2c3366; }
.sttable td { padding: 10px 8px; border-bottom: 1px solid #22284f; font: 400 19px/1 var(--text); }
.sttable tr[data-player] { cursor: pointer; }
.sttable tr[data-player]:hover td { background: rgba(214,166,74,.08); }
.sttable tr.me td { color: var(--gold-hi); }
.sttable .pn { font-weight: 700; }
.stnote { color: var(--ink-dim); font-size: 16px; margin: 10px 0; }
.stchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stpick { height: 40px; padding: 0 16px; border-radius: 20px; border: 2px solid #3c4485; background: #141838; color: var(--ink); font: 700 17px/1 var(--text); cursor: pointer; }
.stpick.on { border-color: var(--gold-hi); background: #3a2c10; color: var(--gold-hi); }
.stcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.stcols section { background: #11142f; border: 2px solid #23295a; border-radius: 12px; padding: 12px 14px; }
.stcols h4 { margin: 0 0 8px; font: 700 20px/1 var(--pixel); color: var(--gold-hi); }
.strow { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: 10px; padding: 5px 0; }
.strow[data-player] { cursor: pointer; }
.stname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stnum { font-size: 15px; color: var(--ink-dim); white-space: nowrap; }
.stbar { height: 10px; border-radius: 5px; background: #2a1c24; overflow: hidden; }
.stbar i { display: block; height: 100%; background: linear-gradient(90deg, #3fae5a, #8ff0a8); border-radius: 5px; }
.stline { margin: 6px 0; }
.stchip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 10px; border-radius: 12px; background: #1d2250; font-size: 15px; }
.stdim { color: var(--ink-dim); }
.stmatch { background: #11142f; border: 2px solid #23295a; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.stmh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stscore { font-size: 22px; }
.stscore b { color: var(--gold-hi); }
.stdecks { color: var(--ink-dim); font-size: 15px; margin: 4px 0 8px; }
.stgame { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 6px 0; border-top: 1px solid #22284f; font-size: 16px; }
.stgn { font-weight: 700; color: var(--ink-dim); min-width: 64px; }
.stluck { color: #9fd0ff; }

/* scroll bars in the game's own look (no grey system bars): thin gold thumb on a dark track */
* { scrollbar-width: thin; scrollbar-color: #8a6a2c rgba(10,10,28,.6); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(10,10,28,.6); border-radius: 6px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#c89a44, #7a5a22); border-radius: 6px; border: 2px solid rgba(10,10,28,.6); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#ffd27a, #a8792c); }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; background: transparent; }
.dsh-strip { scrollbar-width: thin; padding-bottom: 10px; }
.sth3 { margin: 18px 0 10px; font: 700 24px/1 var(--pixel); color: var(--gold-hi); }
.stboards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stboard { background: #11142f; border: 2px solid #23295a; border-radius: 12px; padding: 12px 14px; }
.stboard.bad { border-color: #3a2a52; background: #160f2a; }
.stboard h5 { margin: 0; font: 700 19px/1.1 var(--text); color: var(--gold-hi); }
.stboard.bad h5 { color: #c9a8ff; }
.stboard small { display: block; color: var(--ink-dim); font-size: 13px; margin: 2px 0 8px; }
.stbrow { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #22284f; cursor: pointer; font-size: 17px; }
.stbrow:hover { color: var(--gold-hi); }
/* bigger commander on the shelf; tap it to read it full size */
.dsh { grid-template-columns: 40px 440px minmax(0, 1fr) 40px; }
.dsh-stage { height: 380px; }
.dsh-big { width: 256px; height: 358px; cursor: zoom-in; }
.dsh-side { width: 170px; height: 238px; }
.dsh-side.l1 { transform: translate(-50%, -50%) translateX(-140px) rotateY(30deg) scale(.86); }
.dsh-side.r1 { transform: translate(-50%, -50%) translateX(140px) rotateY(-30deg) scale(.86); }
.dsh-side.l2 { transform: translate(-50%, -50%) translateX(-195px) rotateY(40deg) scale(.7); }
.dsh-side.r2 { transform: translate(-50%, -50%) translateX(195px) rotateY(-40deg) scale(.7); }
.dsh-big:hover .dsh-img { box-shadow: 0 0 0 3px var(--gold-hi), 0 14px 34px rgba(0,0,0,.7), 0 0 50px rgba(255,190,90,.35); }

/* ---------------- players at the table ---------------- */
.seat.seat2 { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 14px; }
.seat2 .sav { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-lo); background: #1a1e40; display: flex; align-items: center; justify-content: center; }
.seat2.me .sav { border-color: var(--gold-hi); box-shadow: 0 0 10px rgba(255,200,90,.35); }
.seat2 .sav canvas { width: 100%; height: 100%; }
.seat2 .sav span { font-size: 30px; }
.seat2 .sinfo { min-width: 0; }
.seat2 .sname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 22px/1.1 var(--pixel); color: var(--ink); }
.seat2 .crown { font-style: normal; color: var(--gold-hi); }
.seat2 .youtag, .seat2 .bottag { font: 700 13px/1 var(--text); font-style: normal; padding: 3px 8px; border-radius: 10px; background: #3a2c10; color: var(--gold-hi); }
.seat2 .bottag { background: #1d2a50; color: #9fd0ff; }
.seat2 .sdeck { font: 400 16px/1.25 var(--text); color: var(--ink-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat2 .sstate { grid-column: 2; justify-self: start; font: 700 15px/1 var(--text); padding: 5px 10px; border-radius: 12px; background: #2a2f5c; color: var(--ink); }
.seat2 .sstate.ok { background: #1f6a35; color: #e8ffee; }
.seat2 .sstate.mid { background: #5a4a14; color: #fff3c8; }
.seat2 .sstate.off { background: #3a1a1a; color: #ffb0a0; }
.seat2 .sbtns { grid-column: 1 / 3; display: flex; gap: 8px; justify-content: flex-end; }
.seat2 .sbtns:empty { display: none; }

/* solid panels: nothing from the table shows through behind menus */
.menu { background: linear-gradient(#1c2046, #10122a) !important; }
/* the big card view opens above menus too (deck shelf, settings) */
#zoom { z-index: 6900; }

/* readable letters wherever you read more than a word or two: lists, notes, descriptions, form fields */
textarea, input, select, .msg, .menu label, .menu .sub, .fmt small, #fmtRules, .botbox, #botMsg, .botwarn, .advnote,
.dk-list, .dk-msg, .dk-right label, .lchatlog, .people, .tables, #peopleHint, .watchnote, .oppwait, .slider .ticks, .botrow .lbl,
.backpick .bknote, .keypick, .visprev small, .themes small, .grules, .stbody, .choice span, .about, #aboutBox, .lobbyname small {
  font-family: var(--text) !important; letter-spacing: 0 !important;
}
.dk-list { font-size: 18px !important; line-height: 1.4 !important; }
.fmt small { font-size: 14px !important; }
#fmtRules { font-size: 16px !important; }

/* bigger commander on the shelf, and its text on a solid card so the decks behind never show through */
.dsh { grid-template-columns: 40px 470px minmax(0, 1fr) 40px; }
.dsh-stage { height: 450px; }
.dsh-big { width: 300px; height: 420px; }
.dsh-side { width: 180px; height: 252px; }
.dsh-side.l1 { transform: translate(-50%, -50%) translateX(-150px) rotateY(30deg) scale(.86); }
.dsh-side.r1 { transform: translate(-50%, -50%) translateX(150px) rotateY(-30deg) scale(.86); }
.dsh-side.l2 { transform: translate(-50%, -50%) translateX(-200px) rotateY(40deg) scale(.7); }
.dsh-side.r2 { transform: translate(-50%, -50%) translateX(200px) rotateY(-40deg) scale(.7); }
@keyframes dshInR { from { transform: translate(-50%, -50%) translateX(150px) rotateY(-50deg) scale(.86); opacity: .3; } }
@keyframes dshInL { from { transform: translate(-50%, -50%) translateX(-150px) rotateY(50deg) scale(.86); opacity: .3; } }
.dsh-info { position: relative; z-index: 8; background: linear-gradient(#1a1e44, #121533); border: 2px solid #2c3366; border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.dsh-side { opacity: .5; }
/* a card exiled "with" a permanent peeks out from under it, dimmed with a little exile tag */
.card.exunder { filter: saturate(.6) brightness(.8); }
.card.exunder::after { content: 'exiled'; position: absolute; left: 4px; top: 40%; padding: 1px 7px; border-radius: 8px; background: #3a1a4a; color: #e6c8ff; font: 700 11px/1.3 var(--text); pointer-events: none; z-index: 5; }
#respond span, #respond small, .stackconfirm p, #revealStrip, .gamenote, .tablechip small { font-family: var(--text) !important; }
#respond span { font-weight: 700; }

/* =============== lobby: a round tavern table seen from above =============== */
#lobby.tavern { background: radial-gradient(ellipse at 40% 55%, rgba(30,18,10,.35), rgba(5,4,10,.85) 75%); align-items: stretch; }
.tv-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 18px 26px 20px; box-sizing: border-box; gap: 10px; }
.tv-head { display: flex; align-items: center; gap: 20px; position: relative; }
.tv-plate { display: flex; align-items: baseline; gap: 14px; padding: 8px 20px 10px; border-radius: 14px; background: linear-gradient(#2a1a0e, #170e07); border: 2px solid #120a05; outline: 2px solid var(--gold-lo); box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.tv-plate small { font: 700 15px/1 var(--text); letter-spacing: 2px !important; text-transform: uppercase; color: #c9a46a; }
.tv-plate .code { font-size: 46px; line-height: 1; margin: 0; }
.tv-online { display: flex; align-items: center; gap: 6px; font: 700 16px/1 var(--text); color: #9fe6a8; }
.tv-online i { width: 10px; height: 10px; border-radius: 50%; background: #3fe06a; box-shadow: 0 0 8px #3fe06a; }
.tv-tools { margin-left: auto; display: flex; gap: 10px; }
.tv-tool { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 14px; border: 2px solid #3a2a18; background: linear-gradient(#3a2a1c, #22170e); color: var(--ink); font: 700 18px/1 var(--text); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255,220,160,.12), 0 6px 14px rgba(0,0,0,.5); }
.tv-tool i { font-style: normal; font-size: 22px; }
.tv-tool:hover { border-color: var(--gold); }
.tv-tool.gold { background: linear-gradient(#e0b25a, #9a6a22); color: #1a0f05; border-color: #6a4512; }
.tv-invite { position: absolute; right: 0; top: 62px; z-index: 50; display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #1a1208; border: 2px solid var(--gold-lo); box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.tv-room { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
.tv-tablebox { position: relative; align-self: center; justify-self: center; width: min(100%, 760px); aspect-ratio: 1 / 1; max-height: 100%; }
.tv-table { position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #6b4424 0 60%, #4a2c14 70%, #2c180a 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.75), inset 0 0 0 6px #2a1608, inset 0 0 0 9px #c99a4a, inset 0 0 0 12px #2a1608, inset 0 10px 30px rgba(255,210,150,.15); }
.tv-felt { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 45% 40%, #2b5a3c, #183a26 60%, #0f2618 100%);
  box-shadow: inset 0 0 0 3px #c99a4a, inset 0 0 40px rgba(0,0,0,.6); }
.tv-felt::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); }
.tv-emblem { position: absolute; inset: 22%; background: url('../assets/backs/reforged.webp') center / contain no-repeat; opacity: .13; filter: grayscale(.4); }
.tv-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 16%; text-align: center; }
.tv-center .btn-main { min-width: 0; font-size: 26px; height: 60px; padding: 0 26px; }
.tv-center .btn-second { min-width: 0; }
.tv-hint { font: 400 15px/1.35 var(--text); color: #cfe8d4; opacity: .85; max-width: 300px; }
.tv-seats { position: absolute; inset: 0; pointer-events: none; }
.tvseat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; cursor: pointer; transition: transform .15s; z-index: 2; }
.tvseat:hover { transform: translate(-50%, -50%) scale(1.06); z-index: 5; }
.tvseat .lav { border-radius: 50%; image-rendering: pixelated; outline: 4px solid #6fe08a; outline-offset: 0; box-shadow: 0 8px 18px rgba(0,0,0,.7); background: #120d16; }
.tvseat.table .lav { outline-color: #f3cf6a; } .tvseat.busy .lav { outline-color: #ff8a5a; }
.tvseat.me .lav { outline-color: var(--gold-hi); box-shadow: 0 0 0 4px #120d16, 0 0 26px rgba(255,200,90,.55); }
.tvseat.away .lav { filter: grayscale(.7) brightness(.7); }
.tvseat.buzzed .lav { animation: tvbuzz .5s ease-in-out 2; }
@keyframes tvbuzz { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.tvplate { display: flex; flex-direction: column; align-items: center; padding: 4px 12px 5px; border-radius: 10px; background: linear-gradient(#2a1a0e, #160d06); border: 1px solid #5a3c1a; box-shadow: 0 4px 10px rgba(0,0,0,.6); margin-top: -10px; }
.tvplate b { font: 700 18px/1.1 var(--pixel); color: var(--ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvplate small { font: 700 12px/1.2 var(--text); color: #9fe6a8; }
.tvseat.table .tvplate small { color: #ffe39a; } .tvseat.busy .tvplate small { color: #ffb08a; } .tvseat.me .tvplate small { color: var(--gold-hi); }
.tvpop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #160f08; border: 2px solid var(--gold); box-shadow: 0 14px 30px rgba(0,0,0,.8); white-space: nowrap; }
.tvpop button { min-width: 220px; height: 48px; font-size: 18px; }
.tvbubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); max-width: 240px; width: max-content; padding: 8px 12px; border-radius: 14px; background: #fff7e6; color: #1a1208; font: 700 15px/1.3 var(--text); box-shadow: 0 6px 16px rgba(0,0,0,.6); animation: tvpopin .25s ease-out; transition: opacity .4s; z-index: 15; }
.tvbubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff7e6; }
.tvbubble.out { opacity: 0; }
@keyframes tvpopin { from { opacity: 0; transform: translate(-50%, 8px) scale(.9); } }
.tv-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.tv-side section { background: linear-gradient(#1c1410, #120c08); border: 2px solid #3a2a18; border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 26px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tv-side h3 { margin: 0; font: 700 22px/1 var(--pixel); color: var(--gold-hi); }
.tv-games { flex: 0 1 auto; max-height: 45%; }
.tv-games .tables { overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.tv-chat { flex: 1; }
.tv-chat .lchatlog { flex: 1; height: auto; min-height: 80px; }
.tv-side .ltable { background: #24180e; border-color: #4a3418; }
.tv-side .msg { text-align: left; }
.tv-chat.lchat { margin-top: 0; border-top: 2px solid #3a2a18; padding-top: 14px; }
.tv-invite[hidden] { display: none !important; }
.tv-tablebox { width: auto; height: 100%; max-height: 780px; max-width: 100%; aspect-ratio: 1 / 1; }
.tv-center .btn-main { font-size: 22px; white-space: nowrap; }
.tv-chat .lchatform { display: flex; gap: 8px; }
.tv-chat .lchatform input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 2px solid #4a3418; background: #0e0905; color: var(--ink); font: 400 17px/1 var(--text); }
.tv-chat .lchatform input:focus { outline: none; border-color: var(--gold); }
.tv-chat .quickchat button { font-family: var(--text) !important; font-weight: 700; }
.tv-room { align-items: stretch; }