:root { --chb: max(54px, 13.86vh); --ch: var(--chb); --cw: calc(var(--ch) * .7143); --hch: calc(var(--chb) * .6); --hcw: calc(var(--hch) * .7143); --bg: #14161c; --panel: #1e212b; --line: #333847; --text: #e6e8ee; --muted: #8b90a0; --accent: #5b8def; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 14px system-ui, sans-serif; }
button { background: #2a2f3d; color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 5px 9px; cursor: pointer; font: inherit; }
button:hover { background: #363c4f; }
button.primary { background: var(--accent); border-color: var(--accent); }
button.danger:hover { background: #8b2b2b; }
input, select { background: #0f1116; color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; font: inherit; }
.muted { color: var(--muted); }
.err { color: #ff7b7b; min-height: 1.2em; }

/* ---------- main menu / sign-in ---------- */
body { background: radial-gradient(1100px 650px at 50% -8%, #1c2b47 0%, #111623 52%, #0a0d14 100%) fixed; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
#lobby { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
#lobbyCard { width: min(500px, 100%); background: #161b27ee; border: 1px solid #ffffff14; border-radius: 20px; padding: 34px 32px 26px; box-shadow: 0 30px 80px #000b, 0 0 0 1px #00000040; display: grid; gap: 22px; }
#lobbyCard.wide { width: min(980px, 100%); }
#lobbyCard h1, #lobbyCard h2, #lobbyCard h3, #lobbyCard p { margin: 0; }
#lobbyCard h2 { font-size: 22px; letter-spacing: -.01em; }
#lobbyCard label { display: grid; gap: 6px; font-size: 13px; color: #b7bccb; font-weight: 600; }
#lobbyCard input { padding: 13px 14px; font-size: 16px; border-radius: 11px; background: #0d1119; border: 1px solid #2b3245; }
#lobbyCard input:focus, #lobbyCard textarea:focus { outline: none; border-color: #5b8def; box-shadow: 0 0 0 3px #5b8def33; }
#lobbyCard form, #menu2 { display: grid; gap: 16px; }
#menu2 section { display: grid; gap: 14px; }
.brand { text-align: center; }
.brand .logo { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 17px; display: grid; place-items: center; font-size: 30px; color: #fff;
  background: linear-gradient(135deg, #4d7de8, #8f6bf0); box-shadow: 0 10px 30px #4d7de866; }
.brand h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.tagline { color: var(--muted); margin-top: 6px !important; font-size: 15px; }
.notice { text-align: center; padding: 10px 14px; border-radius: 10px; background: #ffb4541a; color: #ffd9a3; border: 1px solid #ffb45440; }
.err { color: #ff8a8a; min-height: 0; text-align: center; }
.err:empty { display: none; }

/* segmented sign-in / create-account switch */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #0d1119; border-radius: 13px; border: 1px solid #ffffff10; }
.seg .tab { padding: 11px; border: 0; background: transparent; border-radius: 10px; color: #9aa1b5; font-size: 15px; font-weight: 600; }
.seg .tab:hover { color: #fff; background: #ffffff0a; }
.seg .tab.on { background: #2a3556; color: #fff; box-shadow: 0 2px 8px #0006; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cta { padding: 15px 18px; font-size: 17px; font-weight: 700; border-radius: 13px; border: 0; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4d7de8, #6b5be0); box-shadow: 0 8px 24px #4d7de844; transition: transform .08s, filter .15s; }
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); background: linear-gradient(135deg, #4d7de8, #6b5be0); }
.cta:active { transform: none; }

/* home menu: two labelled groups, and Admin sits beside the username */
.menugroup { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 0; }
.menugroup.second { margin-top: 10px; padding-top: 16px; border-top: 1px solid #ffffff14; }
.adminbtn { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; background: #ffffff10; border: 1px solid #ffffff1c; color: #dfe4f5; cursor: pointer; }
.adminbtn:hover { background: #5b8def33; border-color: #5b8def; color: #fff; }
/* who is signed in */
.userbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #ffffff08; border: 1px solid #ffffff10; }
.userbar .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, #5b8def, #8f6bf0); flex: none; }
.userbar .who { display: grid; min-width: 0; }
.userbar b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbar small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* big, simple menu buttons */
.bigbtn { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px 20px; border-radius: 15px; border: 1px solid #ffffff18; background: #ffffff0b;
  color: #fff; text-align: left; cursor: pointer; transition: transform .08s, background .15s, border-color .15s, box-shadow .15s; }
.bigbtn:hover { background: #ffffff16; border-color: #5b8def99; transform: translateY(-1px); box-shadow: 0 8px 22px #0006; }
.bigbtn:active { transform: none; }
.bigbtn .ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: #ffffff16; }
.bigbtn .txt { display: grid; gap: 2px; min-width: 0; }
.bigbtn b { font-size: 18px; font-weight: 700; }
.bigbtn small { color: #ffffffa8; font-size: 13.5px; font-weight: 400; }
.bigbtn.primary { border-color: transparent; background: linear-gradient(135deg, #4d7de8, #6b5be0); box-shadow: 0 10px 28px #4d7de855; }
.bigbtn.primary:hover { background: linear-gradient(135deg, #5b8af0, #7a6aeb); }
.bigbtn.primary .ico { background: #ffffff26; }
.bigbtn.ghost { justify-content: center; min-height: 50px; background: transparent; border-color: #ffffff12; color: #aab0c2; font-size: 15px; font-weight: 600; }
.bigbtn.ghost:hover { color: #fff; box-shadow: none; }
.back { justify-self: start; background: none; border: 0; padding: 4px 2px; color: #9aa1b5; font-size: 15px; cursor: pointer; }
.back:hover { color: #fff; background: none; }
.codein { text-align: center; font-size: 26px !important; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; padding: 16px !important; }
.codein::placeholder { letter-spacing: .12em; font-size: 18px; font-weight: 600; opacity: .5; }

/* your games */
.game { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff14; }
.game .info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.game .info b { font-size: 17px; letter-spacing: .06em; }
.game button { padding: 11px 20px; border-radius: 11px; font-size: 15px; font-weight: 700; }
.game button.gamedel { width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 13px; line-height: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #666; margin-right: 4px; }
.dot.on { background: #4caf50; }

/* deck lists */
.deckedit button { padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.dechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dechead h2 { margin: 0; }
button.newdeck { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; background: #2e9e57; border: 1px solid #38b767; color: #fff; cursor: pointer; }
button.newdeck:hover { background: #38b767; }
/* saved decks: a box of selectable rows with status columns (cards, mana curve, commander, colours) */
.deckbox { display: grid; gap: 2px; margin: 10px 0 14px; padding: 6px; max-height: 40vh; overflow-y: auto; border: 1px solid #ffffff1c; border-radius: 12px; background: #0d1119; }
.dmrow { display: grid; grid-template-columns: minmax(0, 1fr) 86px 46px 210px minmax(0, 1.1fr) 118px 26px; align-items: center; gap: 12px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dmrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.dmrow:hover { background: #ffffff10; }
button.dmrow.on { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); }
.dmrow .n { text-align: right; font-variant-numeric: tabular-nums; }
.dmrow .dn { font-weight: 700; }
.dmrow.head { cursor: default; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #ffffff80; padding-top: 2px; padding-bottom: 2px; }
.dmrow .cols { display: flex; gap: 3px; overflow: visible; }
.dmrow .cv { overflow: visible; }
.dmrow .rowdel { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: 12px; color: #ffffff90; text-overflow: clip; }
.dmrow .rowdel:hover { background: #a03a3a; color: #fff; }
.curve { display: flex; align-items: flex-end; gap: 3px; height: 47px; }
.curve .cc { flex: 1; min-width: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.curve .cc b { font-size: 10px; font-weight: 700; line-height: 12px; color: #dfe6ff; font-variant-numeric: tabular-nums; }
.curve .cc.zero b { color: #ffffff40; font-weight: 400; }
.curve .cc i { display: block; width: 100%; background: linear-gradient(#7aa2ff, #4d7de8); border-radius: 2px 2px 0 0; min-height: 0; }
.curve .cc.zero i { height: 2px !important; background: #ffffff25; }
.curve .cc { height: 100%; }
/* average mana value: one plain line, vertically centred like the other columns so it lines up with the card count */
.curve .avg { align-self: center; display: flex; align-items: baseline; gap: 4px; margin-right: 6px; padding-right: 8px; border-right: 1px solid #ffffff20; white-space: nowrap; }
.curve .avg b { font-size: 13px; font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; }
.curve .avg small { font-size: 10px; color: #ffffff80; }
.curve .cc small { font-size: 9px; line-height: 11px; color: #ffffff80; }
.curve .cc:not(.zero) i { flex: none; }
img.mana { width: 20px; height: 20px; vertical-align: middle; filter: drop-shadow(0 1px 1px #0008); }
.deckedit { display: flex; flex-direction: column; gap: 10px; }
.deckedit textarea { flex: 1; min-height: 300px; background: #0d1119; color: var(--text); border: 1px solid #2b3245; border-radius: 11px; padding: 12px; font: 13px ui-monospace, monospace; resize: vertical; }
@media (max-width: 700px) { .dmrow { grid-template-columns: minmax(0, 1fr) 40px 110px 80px 26px; } .dmrow > .dc, .dmrow > .dt { display: none; } #lobbyCard { padding: 26px 20px 20px; } }

/* admin table */
.tablewrap { overflow: auto; }
table.adm { width: 100%; border-collapse: collapse; font-size: 13px; }
table.adm th, table.adm td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.adm td.actions { display: flex; gap: 4px; }

/* ---------- game screen (Arena-style playmat) ---------- */
#app { height: 100%; display: flex; flex-direction: column; }
#topbar { display: flex; gap: 8px; align-items: center; padding: 5px 12px; background: #0b0e14; border-bottom: 1px solid #ffffff14; font-size: 13px; position: relative; z-index: 40; }
#turnInfo { color: #ffd479; font-weight: 600; }
#menuPanel { position: absolute; right: 8px; top: 38px; z-index: 45; background: #262a37; border: 1px solid #4a5068; border-radius: 8px; padding: 6px; display: grid; gap: 4px; min-width: 230px; box-shadow: 0 8px 24px #000a; }
#menuPanel button { text-align: left; }
#menuPanel hr { border: 0; border-top: 1px solid #4a5068; width: 100%; margin: 2px 0; }
#menuPanel .menusection { display: grid; gap: 4px; padding: 4px; border: 1px solid #a03a3a66; border-radius: 6px; background: #a03a3a12; }
#menuPanel .menulabel { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #ffffff80; padding: 0 2px; }
.zoom input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid #ffffff40; border-radius: 6px; background: none; cursor: pointer; }
.zoom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
#zoomPct { display: inline-block; min-width: 42px; text-align: center; }
main { flex: 1; display: flex; min-height: 0; }

#stage { position: relative; flex: 1; min-width: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #33465c 0%, #1e2a3a 48%, #0d1119 100%); }
#board { height: 100%; display: flex; flex-direction: column; padding-bottom: calc(var(--hch) * .74 + 50px); } /* room for the (smaller) hand plus your name/life bar below it */
#oppRow { flex: 1; display: flex; flex-wrap: wrap; align-content: stretch; min-height: 0; }
#oppRow > .seat { flex: 0 0 calc(100% / var(--cols, 1)); }
#oppRow > .waiting { flex: 1 1 100%; }
/* one clean divider between the two halves: a soft line that fades out toward the edges */
#meSeat { flex: 1; display: flex; min-height: 0; position: relative; }
#meSeat::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; z-index: 6; pointer-events: none; background: linear-gradient(90deg, transparent, #ffffff55 15%, #ffffff55 85%, transparent); }
.codecopy { cursor: pointer; padding: 1px 8px; border-radius: 6px; background: #ffffff14; border: 1px solid #ffffff30; color: #fff; letter-spacing: .08em; }
.codecopy:hover { background: var(--accent); }
.waiting { margin: auto; color: var(--muted); font-size: 16px; text-align: center; }

.seat { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr auto; position: relative; }
.seat + .seat { border-left: 1px solid #ffffff14; }
.opp { --ch: calc(var(--chb) * var(--os, .8)); --cw: calc(var(--ch) * .7143); }
/* name + life: a compact bar centred on the table edge nearest the player (bottom for you, top for opponents) */
.side { position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; display: grid; grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr); align-items: center; gap: 4px 16px; max-width: calc(100% - 16px); padding: 4px 20px; border-radius: 34px; background: #000000c0; border: 2px solid var(--pc); }
.side .pinfo { display: grid; gap: 1px; justify-items: start; }
.side .pcs { justify-content: flex-end; }
/* an opponent's bar stays the compact single-row pill it was: name, time, life and counters in a wrapping row (only your own bar uses the three columns) */
.opp .side { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; padding: 3px 18px; }
.opp .side { grid-row: 1; } /* same row as the card backs (which are centered), the bar is on the right, so the seat's rows stay as they were */
.opp .side .pinfo { display: contents; }
.opp .side .hand { order: 5; }
.opp .side .pcs { justify-content: center; }
/* an opponent's hand: their cards face down in a fan, in the middle of the top of their side of the table */
.opphand { grid-column: 1 / -1; grid-row: 1; align-self: center; justify-self: center; margin: 6px 0 0; display: flex; align-items: center; z-index: 7; pointer-events: auto; }
.oback { display: block; width: 26px; height: 37px; margin-left: -14px; border-radius: 4px; border: 2px solid #1b120a; box-shadow: 0 2px 5px #0009;
  background: repeating-linear-gradient(45deg, #5a3b1e, #5a3b1e 4px, #6d4926 4px, #6d4926 8px); }
.oback:first-child { margin-left: 0; }
.opphand { flex-direction: column; gap: 3px; }
.ofan { display: flex; align-items: center; }
.ocount { font-size: 12px; font-weight: 700; color: #ffffffb8; letter-spacing: .03em; text-shadow: 0 1px 4px #000; }
/* on your turn the whole bar is tinted in your colour with a thicker outline (steady: no glow or pulsing) */
#meBar.turn .side, .seat.turn .side { background: color-mix(in srgb, var(--pc) 26%, #000000d0); box-shadow: 0 0 0 2px var(--pc); }
.turnbadge { padding: 0 8px; border-radius: 8px; background: var(--pc); color: #111; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
/* your own bar lives below the hand, at the bottom edge of the stage (not inside the seat) */
#meBar { position: absolute; right: 10px; bottom: 6px; z-index: 12; max-width: calc(100% - 330px); }
#meBar .side { position: static; transform: none; }
#meBar.turn .orb { border-width: 4px; }
/* an opponent's bar is the first row of their seat, so it can wrap to two lines without covering their cards */
.opp { grid-template-rows: auto minmax(0, 1fr); }
.opp .side { position: static; transform: none; grid-column: 1 / -1; margin: 6px 26px 0 auto; } /* right-hand side, like your own bar */
.me .bf { padding-bottom: 0; }
.opp .bf { padding-top: 0; }
.orb { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--pc); background: radial-gradient(circle at 30% 28%, #3d475d, #151a25); display: grid; place-items: center; font-size: 20px; font-weight: 800; cursor: pointer; user-select: none; }
.seat.turn .orb { border-width: 4px; }
.liferow { display: flex; align-items: center; gap: 6px; }
.liferow button { border-radius: 50%; width: 26px; height: 26px; padding: 0; }
/* free-text note on a card: a yellow label across the card's lower third */
.cardnote { position: absolute; left: 4px; right: 4px; bottom: 26%; z-index: 4; padding: 2px 5px; border-radius: 5px; background: #f2c94ccc; color: #1b1400; font-size: 11px; font-weight: 700; line-height: 13px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; pointer-events: none; box-shadow: 0 1px 4px #0008; }
/* running life change next to the orb: damage in red, life gained in green, gone 5 seconds after the last adjustment */
.orb { position: relative; }
.ldelta { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 1px 9px; border-radius: 10px; font-size: 16px; font-weight: 900; line-height: 20px; white-space: nowrap; pointer-events: none; z-index: 20; box-shadow: 0 2px 8px #000a; animation: ldeltain .15s ease-out; }
.ldelta.neg { background: #c0322f; color: #fff; }
.ldelta.pos { background: #2f9b57; color: #fff; }
@keyframes ldeltain { from { transform: translate(-50%, 6px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
/* first-turn roll: one die over each player's board, then the winner lit up */
#firstlayer { position: absolute; inset: 0; z-index: 69; pointer-events: auto; background: #04060bb8; overflow: hidden; }
#firstlayer.done { cursor: pointer; }
.fdie { position: absolute; width: var(--sz); height: var(--sz); transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .3s, filter .3s; }
.fdie svg { width: 100%; height: 100%; overflow: visible; fill: #182036; stroke: var(--pc, #fff); stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(0 10px 24px #000c); }
.fdie svg .facet { fill: none; stroke: color-mix(in srgb, var(--pc, #fff) 55%, transparent); stroke-width: 1.4; }
.fdie .dnum { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--sz) * .34); font-weight: 900; color: #fff; text-shadow: 0 2px 8px #000; font-variant-numeric: tabular-nums; }
.fdie .flabel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 800; color: var(--pc, #fff); white-space: nowrap; text-shadow: 0 2px 6px #000; }
.fdie.tumble svg { animation: ftumble .5s linear infinite; }
@keyframes ftumble { to { transform: rotate(360deg); } }
.fdie.dim { opacity: .35; filter: grayscale(.6); }
.fdie.tie svg { stroke: #ffd479; stroke-width: 5; animation: ftie .5s ease-in-out 3; }
@keyframes ftie { 50% { transform: scale(1.12); } }
.fdie.win { transform: translate(-50%, -50%) scale(1.35); z-index: 2; }
.fdie.win svg { stroke-width: 5; filter: drop-shadow(0 0 30px var(--pc)) drop-shadow(0 0 60px var(--pc)); }
.fdie.win .flabel::after { content: ' · FIRST'; color: #ffd479; }
.fbanner { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font-size: clamp(18px, 3.4vh, 32px); font-weight: 800; color: #e6e9f2; text-shadow: 0 2px 10px #000; pointer-events: none; }
.fbanner.winner { font-size: clamp(26px, 5.4vh, 54px); color: #fff; }
.fhint { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-size: 14px; color: #ffffff99; pointer-events: none; }
/* a revealed card: full-screen view over the table, click anywhere to close */
#revealbox { position: absolute; inset: 0; z-index: 68; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; cursor: pointer; background: radial-gradient(circle at 50% 45%, #0d1220e0, #05070cf2); animation: dicefade .2s ease-out; }
#revealbox img { max-height: calc(100% - 90px); max-width: 100%; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 4.5% / 3.2%; box-shadow: 0 20px 70px #000, 0 0 40px color-mix(in srgb, var(--pc, #fff) 35%, transparent); }
.revealblank { padding: 40px; border-radius: 14px; background: #2b3040; font-size: 28px; font-weight: 800; }
.revealwho { font-size: clamp(16px, 2.6vh, 24px); color: #e6e9f2; }
.revealwho b { color: var(--pc, #fff); }
.revealwho b:last-child { color: #ffd479; }
.revealhint { font-size: 12px; color: #ffffff66; }
.cardname.revealed { cursor: pointer; text-decoration: underline dotted; }
/* "no commander marked" warning with an example */
.cmdrwarn { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #f2c94c1f; border: 1px solid #f2c94c66; font-size: 13px; }
.cmdrwarn b { color: #ffd479; font-size: 14px; }
.cmdrwarn pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: #0d1119; color: #d5d9e4; font: 12.5px ui-monospace, monospace; white-space: pre-wrap; }
/* commander tax adjuster */
.taxadj { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 10px 0; }
.taxadj button { width: 64px; height: 44px; font-size: 18px; font-weight: 800; border-radius: 10px; }
.taxadj button[disabled] { opacity: .4; }
.taxval { min-width: 90px; text-align: center; font-size: 38px; font-weight: 800; color: #ffe9a8; font-variant-numeric: tabular-nums; }
/* changelog */
.vertop { font-size: 11px; color: #ffffff59; cursor: pointer; align-self: center; margin-right: 2px; }
.vertop:hover { color: #ffffffb0; }
.changelog { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 8px; overscroll-behavior: contain; }
.changelog h3 { margin: 10px 0 2px; font-size: 15px; }
.changes { margin: 4px 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; color: #d5d9e4; }
.curver { color: #8fd18f; font-weight: 700; }
.verlink { display: block; margin: 10px auto 0; background: none; border: 0; color: #ffffff90; font-size: 13px; cursor: pointer; text-decoration: underline; }
.verlink:hover { color: #fff; }
/* opening hand: seven cards, keep or mulligan */
#opening { position: absolute; inset: 0; z-index: 66; display: grid; place-items: center; padding: 16px; overflow: auto; background: radial-gradient(circle at 50% 45%, #0a0f1cc0, #04060bee); }
.openbox { display: grid; gap: 14px; justify-items: center; max-width: 100%; padding: 22px 26px; border-radius: 16px; background: #141a29f0; border: 1px solid #ffffff22; box-shadow: 0 24px 80px #000c; }
.openbox h2 { margin: 0; }
.openhand { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.openhand img, .openhand .blankcard { width: min(15vw, 170px); border-radius: 8px; box-shadow: 0 6px 18px #000a; }
.openhand .blankcard { aspect-ratio: 5 / 7; background: #2b3040; padding: 6px; font-size: 12px; }
.openhand .opencard.chosen { outline: 4px solid #ffd479; outline-offset: 2px; transform: translateY(-8px); opacity: .85; }
.openhand .opencard { transition: transform .1s; }
#opening button[disabled] { opacity: .45; cursor: default; }
.housebox { color: #c9cddb; font-size: 14px; cursor: pointer; }
/* tight deck list: name | cards | commander | colours */
.decklist { display: grid; gap: 2px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.deckrow { display: grid; grid-template-columns: minmax(0, 1.2fr) 80px 52px minmax(0, 1.4fr) 110px; align-items: center; gap: 12px; padding: 5px 10px; border: 0; border-radius: 6px; background: #ffffff0a; color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
button.deckrow:hover { background: var(--accent); }
.deckrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckrow .n { text-align: right; font-variant-numeric: tabular-nums; }
.deckrow .dn { font-weight: 700; }
.deckrow.head { background: none; cursor: default; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #ffffff80; padding-top: 0; padding-bottom: 2px; }
.deckrow .cols { display: flex; gap: 3px; overflow: visible; }
.ptime { min-width: 62px; text-align: center; font-size: 13px; color: #ffffffb0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seat.turn .ptime, #meBar.turn .ptime { color: #ffd479; font-weight: 700; }
.pname { font-weight: 700; text-align: center; font-size: 15px; white-space: nowrap; }
.pname.off { opacity: .5; }
.pcs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.pc { font-size: 12px; background: #0005; border-radius: 10px; padding: 2px 8px; cursor: pointer; user-select: none; }
.chip { padding: 2px 8px; font-size: 12px; }
/* the number chips are sized for two digits (up to 99) so the bar never resizes as a count grows */
.pc.poison, .pc.cmd { display: inline-block; box-sizing: border-box; min-width: 54px; padding: 3px 10px; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pc.poison { color: #b8f0a6; }
.pc.tax { background: #5a4510; color: #ffe9a8; }
.slotcard { position: relative; }
.taxbadge { position: absolute; left: 3px; bottom: 3px; padding: 1px 7px; border-radius: 9px; background: #5a4510; color: #ffe9a8; font-size: 11px; font-weight: 800; border: 1px solid #ffd47966; pointer-events: none; }
.pc.status { background: #3b2f6b; color: #efe9ff; }
.pc.lethal { background: #a12a2a; color: #fff; }

.bf { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* visible, not hidden: a stack's extra layers, its count badge and tapped (sideways) cards stick out past the card, and at the edge of a lane they were cut off */
.lane { position: relative; overflow: visible; min-height: 0; }
.lane.main { flex: 1; z-index: 2; }
.lane.lands { z-index: 1; }
.lane.lands { flex: none; height: calc(var(--ch) + 14px); background: #00000026; }
.opp .lane.lands { border-bottom: 1px solid #ffffff12; }
.me .lane.lands { border-top: 1px solid #ffffff12; }
.lane.drop { background: #5b8def22; }
.lane-label { position: absolute; left: 8px; bottom: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffffff2e; pointer-events: none; }
.opp .lane-label { bottom: auto; top: 4px; }
.probe { position: absolute; visibility: hidden; width: var(--cw); height: var(--ch); pointer-events: none; }

.piles { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 10px; padding: 8px 10px; align-content: start; }
.me .piles { align-content: end; }
.slot { cursor: pointer; width: calc(var(--cw) * .8); border-radius: 6px; }
.slot.drop { outline: 2px dashed var(--accent); }
.slotlabel { font-size: 11px; color: #ffffffa0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slotcard { width: 100%; height: calc(var(--ch) * .8); border-radius: 5px; overflow: hidden; background: #000; display: grid; place-items: center; font-size: 11px; text-align: center; box-shadow: 0 2px 8px #0008; }
.slotcard img { width: 100%; height: 100%; display: block; }
/* several commanders: the extra ones sit behind the top card, each stepped down so its bottom strip is visible */
.slotcard.cmdstack { overflow: visible; z-index: 0; margin-bottom: calc(var(--n, 1) * 12px + 2px); }
.slotcard.cmdstack > img { position: relative; z-index: 1; border-radius: 5px; }
.cmdghost { position: absolute; inset: 0; z-index: 0; border-radius: 5px; overflow: hidden; background: #000; box-shadow: 0 2px 8px #0008; outline: 1px solid #ffffff30;
  transform: translateY(calc(var(--k) * 12px)); }
.cmdghost img { width: 100%; height: 100%; display: block; }
.slotcard.empty { background: #00000030; border: 1px dashed #ffffff30; box-shadow: none; }
.slotcard.back { background: repeating-linear-gradient(45deg, #5a3b1e, #5a3b1e 5px, #6d4926 5px, #6d4926 10px); border: 2px solid #1b120a; }

/* action buttons: bottom-left, in the same band as your name/life bar */
#actions { position: absolute; left: 10px; bottom: 6px; display: flex; gap: 6px; z-index: 9; }
@media (max-width: 1250px) { #actions { bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; width: 130px; } }
#actions button { padding: 8px 6px; }
#actions button:disabled { opacity: .45; cursor: not-allowed; }
#actions #btnPass { font-weight: 700; padding: 11px 6px; }

.card { width: var(--cw); height: var(--ch); border-radius: 6px; position: relative; flex: none; user-select: none; background: #000; }
.card img { width: 100%; height: 100%; border-radius: 6px; display: block; pointer-events: none; }
.card.tapped { transform: rotate(90deg); }
/* turning a card sideways (tap) and back (untap), smoothly */
.card.tap-on { animation: tapOn .25s cubic-bezier(.3, .7, .3, 1); }
.card.tap-off { animation: tapOff .25s cubic-bezier(.3, .7, .3, 1); }
@keyframes tapOn { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes tapOff { from { transform: rotate(90deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .card.tap-on, .card.tap-off { animation: none; } }
.card.back, .card.blank { background: repeating-linear-gradient(45deg, #5a3b1e, #5a3b1e 6px, #6d4926 6px, #6d4926 12px); border: 3px solid #1b120a; }
.card.blank { background: #2b3040; border: 2px solid #777; padding: 6px; font-size: 12px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.card.fd img { opacity: .5; }
.card.revealed { box-shadow: 0 0 0 2px gold; }
.lane .card { position: absolute; cursor: grab; box-shadow: 0 3px 10px #0009; }
/* counters and keyword markers: top-left, in the upper third of the card */
/* a stack of identical cards: layered edges behind the card plus a count badge beside it */
.lane .card.stack { isolation: isolate; }
.stackghost { position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: #000 center / cover; outline: 1px solid #4a5578; pointer-events: none;
  transform: translate(calc(var(--k) * 6px), calc(var(--k) * 6px)); }
.stackghost.tapped { transform: translate(calc(var(--k) * 8px), calc(var(--k) * 4px)) rotate(90deg); }
/* when every card is tapped the top card is rotated, and the layers inherit that rotation: already sideways, offset in its rotated frame */
.card.tapped .stackghost.tapped { transform: translate(calc(var(--k) * 6px), calc(var(--k) * -6px)); }
.stackcount { position: absolute; right: -10px; bottom: -10px; z-index: 4; min-width: 32px; padding: 1px 9px; text-align: center; white-space: nowrap; pointer-events: none;
  background: #ffd479; color: #1b1300; font-weight: 900; font-size: 15px; border-radius: 15px; border: 2px solid #000; box-shadow: 0 2px 6px #000a; }
/* while dragging: the card you're about to stack onto / attach to lights up with an overlay (drag away to cancel) */
.lane .card.drop-stack, .lane .card.drop-attach { outline: 3px solid #ffd479; outline-offset: 2px; z-index: 40; }
.lane .card.drop-attach { outline-color: #b9a3ff; }
.lane .card.drop-stack::after, .lane .card.drop-attach::after { content: attr(data-hint); position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; text-align: center;
  font-weight: 900; font-size: 15px; color: #fff; background: #000b; border-radius: 6px; text-shadow: 0 2px 6px #000; pointer-events: none; }/* an attachment (aura, equipment…) is tucked behind its host so its name bar stays visible */
.lane .card.attached { outline: 2px solid #b9a3ff; outline-offset: -1px; }
/* "Attach to…" pick mode: every battlefield card is a target */
body.picking .lane .card { cursor: crosshair; outline: 2px dashed #ffd479; outline-offset: -2px; }
.badges { position: absolute; left: 3px; top: 9%; display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 2; }
.badge { background: #000c; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 8px; width: max-content; }
.tag { position: absolute; top: 2px; right: 2px; background: #000b; font-size: 10px; padding: 1px 4px; border-radius: 4px; pointer-events: none; }

/* fanned hand along the bottom edge */
#handbar { position: absolute; bottom: 46px; left: 20px; right: calc(var(--ch) * 1.15 + 34px); height: calc(var(--hch) * .78); display: flex; justify-content: center; align-items: flex-end; z-index: 10; }
#handbar.drop { background: #5b8def22; }
#handlabel { position: absolute; left: -12px; /* the hand bar starts 20px in; this puts the text at the same x as the lane labels (8px) */ top: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #ffffff2e; pointer-events: none; }
#hand { display: flex; align-items: flex-end; }
#hand .card { width: var(--hcw); height: var(--hch); cursor: grab; margin-left: 8px; transform: translateY(26%); transition: transform .12s; box-shadow: 0 4px 12px #000a; }
#hand .card:first-child { margin-left: 0; }
#hand.n2 .card:not(:first-child) { margin-left: calc(var(--hcw) * -.32); }
#hand.n3 .card:not(:first-child) { margin-left: calc(var(--hcw) * -.48); }
#hand.n4 .card:not(:first-child) { margin-left: calc(var(--hcw) * -.62); }
#hand .card:hover { transform: translateY(-14%) scale(1.1); z-index: 30; }

/* keyboard shortcuts panel */
.keys { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; align-content: start; }
.keys h3 { grid-column: 1 / -1; margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.keyrow { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.keyrow span { color: #c9cddb; }
kbd { flex: none; min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 5px; background: #0f1116; border: 1px solid #4a5068; border-bottom-width: 3px; font: 600 12px ui-monospace, monospace; color: #fff; white-space: nowrap; }
@media (max-width: 700px) { .keys { grid-template-columns: 1fr; } }

/* each player's board is tinted with their own colour so it's obvious whose side is whose */
.seat { background: color-mix(in srgb, var(--pc, #888) 9%, transparent); }
.seat + .seat { border-left-color: color-mix(in srgb, var(--pc, #888) 55%, transparent); }
.lane.lands { background: color-mix(in srgb, var(--pc, #888) 15%, #00000030); }
.opp .lane.lands, .me .lane.lands { border-color: #ffffff12; }
.slotcard.empty { border-color: color-mix(in srgb, var(--pc, #888) 45%, transparent); }
/* game type: picker in the New game dialog, tag in the top bar, filter on the Stats screen */
.formatpick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fmtcard { display: grid; gap: 6px; text-align: left; padding: 20px 18px; border-radius: 16px; border: 1px solid #ffffff1c; background: #ffffff0b; color: #fff; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; }
.fmtcard:hover { background: #5b8def22; border-color: #5b8def; transform: translateY(-2px); }
.fmtcard b { font-size: 22px; }
.fmtcard small { color: #ffffffa8; font-size: 13.5px; line-height: 1.4; }
@media (max-width: 600px) { .formatpick { grid-template-columns: 1fr; } }
.fmttag { padding: 2px 10px; border-radius: 10px; background: #2a3556; color: #cdd6f4; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.statfilter { grid-template-columns: repeat(3, 1fr); }
/* monarch / initiative card: to the right of the holder's board, before the piles */
.seat.hasdesig { grid-template-columns: 1fr auto auto; }
.desig { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 4px; }
.me .desig { justify-content: flex-end; }
.desigcard { width: calc(var(--cw) * .8); cursor: pointer; border-radius: 6px; }
.desigcard img { width: 100%; display: block; border-radius: 5px; box-shadow: 0 0 0 2px #ffd479, 0 4px 14px #000a; }
.desigcard:hover img { box-shadow: 0 0 0 2px #fff, 0 6px 18px #000c; }
.desigfallback { aspect-ratio: 5 / 7; display: grid; place-content: center; text-align: center; gap: 4px; font-size: 26px; color: #ffd479; border-radius: 6px; background: #2a2413; box-shadow: 0 0 0 2px #ffd479; }
.desigfallback b { font-size: 12px; }
.desiglabel { font-size: 10.5px; text-align: center; color: #ffd479; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
/* stat tracker */
#clock { color: #cfd6ea; font-variant-numeric: tabular-nums; font-size: 13px; }
table.stbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.stbl th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; text-align: left; padding: 7px 10px; white-space: nowrap; }
table.stbl td { padding: 9px 10px; border-top: 1px solid #ffffff12; white-space: nowrap; }
table.stbl th:nth-child(n+3), table.stbl td:nth-child(n+3) { text-align: center; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.statcard { display: grid; gap: 3px; padding: 14px 14px 12px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff12; }
.statcard b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.statcard span { color: var(--muted); font-size: 12.5px; }
#statsBody h3 { margin: 22px 0 8px; font-size: 15px; letter-spacing: .04em; color: #c9cee0; }
.res { display: inline-block; min-width: 54px; text-align: center; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.res.won { background: #1f6f43; color: #eafff3; }
.res.lost { background: #8c1d2e; color: #ffe9ec; }
.res.ended { background: #3a4156; color: #dfe3ee; }
.matches { display: grid; gap: 8px; }
.match { border-radius: 14px; background: #ffffff08; border: 1px solid #ffffff10; overflow: hidden; }
.matchrow { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; }
.matchrow:hover, .matchrow.open { background: #ffffff0d; }
.minfo { display: grid; gap: 2px; min-width: 0; }
.minfo b { font-size: 15px; }
.minfo small, .mmeta small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmeta { display: grid; gap: 2px; text-align: right; font-size: 13.5px; }
.matchdetail { padding: 4px 12px 12px; border-top: 1px solid #ffffff10; }
/* dice roll overlay */
#dice { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 45%, #0d1220d0, #05070cee); animation: dicefade .2s ease-out; }
@keyframes dicefade { from { opacity: 0; } to { opacity: 1; } }
.dicebox { display: grid; justify-items: center; gap: 14px; animation: tumble .9s cubic-bezier(.2, .9, .25, 1); }
@keyframes tumble { 0% { transform: translateY(-40vh) rotate(-540deg) scale(.4); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; } }
.die { position: relative; width: min(44vh, 70vw); aspect-ratio: 1; }
.die svg { width: 100%; height: 100%; overflow: visible; fill: #182036; stroke: var(--pc, #fff); stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(0 16px 40px #000c) drop-shadow(0 0 22px color-mix(in srgb, var(--pc, #fff) 45%, transparent)); }
.die svg .facet { fill: none; stroke: color-mix(in srgb, var(--pc, #fff) 55%, transparent); stroke-width: 1.4; }
.dnum { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(64px, 15vh, 150px); font-weight: 900; color: #fff; text-shadow: 0 4px 18px #000a; font-variant-numeric: tabular-nums; }
.dnum.word { font-size: clamp(34px, 8vh, 80px); letter-spacing: .06em; }
#dice.done .dnum { animation: dicepop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dicepop { from { transform: scale(.6); } to { transform: none; } }
.dwho { font-size: clamp(18px, 3.2vh, 30px); font-weight: 800; color: var(--pc, #fff); letter-spacing: .03em; }
.dnote { min-height: 1.4em; font-size: clamp(16px, 3vh, 26px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dnote.crit { color: #ffd479; text-shadow: 0 0 20px #ffb300; }
.dnote.fail { color: #ff8a8a; }
.dhint { color: #ffffff70; font-size: 13px; }
.dicepick { display: flex; flex-wrap: wrap; gap: 10px; }
.dicepick button { min-width: 84px; padding: 16px 18px; font-size: 20px; font-weight: 800; border-radius: 12px; }
/* game over: defeat prompt and victory screen (centred on the battlefield, not the whole window) */
#endgame { position: absolute; inset: 0; z-index: 65; display: grid; place-items: center; padding: 16px; overflow: auto; background: radial-gradient(circle at 50% 45%, #0a0f1cc0, #04060bee); animation: dicefade .2s ease-out; }
#endgame.victory { z-index: 80; cursor: pointer; }
.endbox { position: relative; z-index: 2; width: min(720px, 100%); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 26px 26px 22px; border-radius: 20px;
  background: #141a29f0; border: 2px solid color-mix(in srgb, var(--pc) 70%, #000); box-shadow: 0 24px 80px #000c, 0 0 60px color-mix(in srgb, var(--pc) 30%, transparent); animation: tumble .7s cubic-bezier(.2, .9, .25, 1); }
.endbox h1 { margin: 0; font-size: clamp(34px, 7vh, 64px); font-weight: 900; color: var(--pc); letter-spacing: -.01em; }
.endbox h2 { margin: 0; font-size: 24px; color: #fff; }
.endsub { color: #c6cbda; font-size: 17px; }
.congrats { font-size: 15px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #ffd479; }
.endbtns { justify-content: center; gap: 12px; margin-top: 4px; }
.endbtns button { padding: 13px 22px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.trophy svg { width: clamp(70px, 14vh, 130px); fill: #ffd479; stroke: #b8860b; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 6px 20px #ffb300aa); animation: dicepop .6s cubic-bezier(.2, 1.6, .4, 1) .3s both; }
.trophy svg .h { fill: none; stroke: #ffd479; stroke-width: 5; stroke-linecap: round; }
table.results { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 15px; }
table.results th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: 6px 10px; text-align: left; }
table.results td { padding: 9px 10px; text-align: left; border-top: 1px solid #ffffff14; }
table.results th:nth-child(n+3), table.results td:nth-child(n+3) { text-align: center; }
table.results tr.winner td { background: #ffd47914; font-weight: 700; }
table.results tr.defeated td { color: #b0b5c6; }
table.results td.bad { color: #ff8a8a; font-weight: 800; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .95; animation: confetti linear infinite; }
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); } }
.seat.out { filter: grayscale(.9) brightness(.7); }
/* other players' pointers */
#cursors { position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.cursor { position: absolute; transition: left .07s linear, top .07s linear, opacity .4s; }
.cursor i { display: block; width: 16px; height: 22px; background: var(--pc); filter: drop-shadow(0 1px 2px #000c);
  clip-path: polygon(0 0, 0 100%, 30% 78%, 52% 100%, 68% 92%, 46% 70%, 80% 70%); }
.cursor span { position: absolute; left: 14px; top: 16px; background: var(--pc); color: #111; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.cursor.idle { opacity: .3; }

/* collapsible game log */
#logpanel { position: relative; width: var(--logw, 270px); flex: none; display: flex; flex-direction: column; background: #0b0e14; border-left: 1px solid #ffffff14; overflow: hidden; transition: width .15s; }
#logpanel > :not(#logresize) { min-width: var(--logw, 270px); }
/* drag handle on the log's left edge */
#logresize { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 5; }
#logresize:hover, body.resizing #logresize { background: #5b8def66; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing #logpanel { transition: none; }
#logpanel.collapsed { width: 0; border-left: 0; }
#loghead { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
#log { flex: 1; overflow-y: auto; padding: 0 8px 8px; font-size: 12.5px; color: #c4c8d4; }
/* formatted log lines.
   Colour is used for exactly one thing per channel so nothing collides:
   - PLAYER identity = bold coloured TEXT + the coloured stripe on the left (nothing else on the line is coloured text)
   - ACTIONS = filled pills with light text (a red "damage" pill can't be mistaken for a red player name)
   - ZONES = low-saturation chips, NUMBERS/CARDS = neutral white/cream */
.logline { padding: 3px 7px; margin: 2px 0; line-height: 1.75; border-left: 3px solid var(--pc, #ffffff22); background: #ffffff08; border-radius: 0 5px 5px 0; overflow-wrap: anywhere; color: #d5d9e4; }
.logline .who { font-weight: 800; color: var(--pc); }
.logline .cardname { color: #f3ead0; font-style: italic; font-weight: 600; }
.logline .arrow { color: #8b90a0; padding: 0 1px; }
.logline .t-num { color: #fff; font-weight: 800; }
.logline .pill, .logline .zone, .logline [class^="t-"]:not(.t-num) { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11.5px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; vertical-align: 1px; }
.logline .t-good   { background: #1f6f43; color: #eafff3; }   /* gain: draw, create, join     */
.logline .t-act    { background: #2c3f5e; color: #dbe8ff; }   /* neutral action: move, reveal */
.logline .t-dmg    { background: #8c1d2e; color: #ffe9ec; }   /* harm: takes, loses, mills    */
.logline .t-alert  { background: #8a5a00; color: #fff2d1; }   /* game-level: restart, end     */
.logline .t-poison { background: #4b5a1f; color: #f0f7d2; }
.logline .t-mana   { background: #3b3556; color: #efe9ff; }   /* "for mana" */
.logline .life-dn  { background: #8c1d2e; color: #ffe9ec; }
.logline .life-up  { background: #1f6f43; color: #eafff3; }
.logline .zone { color: #e7ebf3; }
.zone.z-hand { background: #2f3f57; } .zone.z-bf { background: #2f4a3c; } .zone.z-gy { background: #3f3552; }
.zone.z-ex { background: #55402c; } .zone.z-lib { background: #4d4636; } .zone.z-cmd { background: #55492a; }.logline.turnline { margin: 10px 0 6px; padding: 5px 8px; text-align: center; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--pc);
  background: color-mix(in srgb, var(--pc) 16%, transparent); border: 0; border-top: 1px solid var(--pc); border-bottom: 1px solid var(--pc); border-radius: 4px; }
#hover { position: fixed; z-index: 60; pointer-events: none; border-radius: 4.5% / 3.2%; box-shadow: 0 8px 30px #000c; background: #000; }
#modal { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50; }
#modalBox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; width: min(900px, 94vw); max-height: 88vh; display: flex; flex-direction: column; padding: 14px; gap: 10px; }
#modalBox h2 { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
#modalBox textarea { width: 100%; height: 300px; background: #0f1116; color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 8px; font: 13px monospace; }
.grid { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; padding: 4px; }
.grid .card { cursor: pointer; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#menu, #submenu { position: fixed; z-index: 100; background: #262a37; border: 1px solid #4a5068; border-radius: 6px; padding: 4px; min-width: 190px; box-shadow: 0 6px 20px #000a; max-height: 90vh; overflow-y: auto; }
#submenu { z-index: 101; min-width: 210px; overflow: visible; }
/* only real items (.mi) highlight, one at a time */
.mi { padding: 5px 10px; cursor: pointer; border-radius: 4px; white-space: nowrap; user-select: none; }
.mi:hover { background: var(--accent); }
.mi:has(> .hk) { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
kbd.hk { margin-left: 8px; padding: 0 5px; border: 1px solid #ffffff40; border-bottom-width: 2px; border-radius: 4px; background: #ffffff14; color: #ffffffb0; font: 600 10px/16px inherit; font-family: inherit; letter-spacing: .04em; }
.mi:hover kbd.hk { color: #fff; }
.mi.sub { display: flex; justify-content: space-between; gap: 18px; }
.mi.sub .arrow { opacity: .7; }
.mi.custom { color: #ffd479; }
.mi.custom:hover { color: #fff; }
.mi.active { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #2f4a34; }
.mi.active:hover { background: #a03a3a; } /* hovering an applied item shows that a click will remove it */
.mi.active .plus { padding: 0 8px; line-height: 18px; }
.mi.active.counter { cursor: default; }
.mi.active.counter:hover { background: #2f4a34; }
.mi.active .stepper { display: inline-flex; gap: 4px; }
.mi.active .stepper button { width: 24px; padding: 0; line-height: 18px; font-weight: 800; }
.mi.active .stepper .minus:hover { background: #a03a3a; }
.mi.active .stepper .plus:hover { background: #2e7d4a; }
#submenu .ptrow { display: flex; align-items: center; gap: 5px; padding: 2px 2px 6px; }
#submenu .ptlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; white-space: nowrap; }
#submenu .ptin { width: 46px; padding: 3px 4px; text-align: center; }
#submenu .msearch { width: 100%; margin-bottom: 4px; }
#submenu .plist { max-height: min(340px, 60vh); overflow-y: auto; }
#submenu .ghead { padding: 6px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); user-select: none; }label.pm { display: grid; gap: 6px; }
label.pm input { width: 100%; }
#menu hr { border: 0; border-top: 1px solid #4a5068; margin: 3px 0; }

@media (max-width: 800px) { #logpanel { display: none; } }