/* ===== Moonbrook prototype ===== */
:root {
  --bg: #07141a;
  --teal: #10343c;
  --teal2: #1b4f58;
  --gold: #d8b45f;
  --gold2: #f2d58a;
  --ink: #e8e4d8;
  --muted: #9bb0b3;
  --red: #c23b3b;
  --card-w: 122px;
  --card-h: 170px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
h2, h3, .title, .af-name, .arc-name, .card .name { font-family: Georgia, "Times New Roman", serif; }

.btn { background: linear-gradient(#2a5d66, #173c43); color: var(--ink); border: 1px solid #5a8f98; border-radius: 8px; padding: 8px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .1s, filter .1s; }
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn.primary { background: linear-gradient(#c9a24f, #8c6a23); color: #1a1205; border-color: var(--gold2); font-weight: 700; }
.btn.danger { background: linear-gradient(#8a2d2d, #5a1c1c); border-color: #c66; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.big { padding: 12px 28px; font-size: 18px; }
.btn.ghost { background: transparent; border-color: #456; color: var(--muted); }
.btn.disabled { opacity: .4; pointer-events: none; }
.btn small { display: block; font-weight: 400; font-size: 11px; opacity: .85; margin-top: 2px; }
body.busy #table { pointer-events: none; }

/* ===== Setup ===== */
#screen-setup { height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 20%, #1e5a63 0%, #0b2229 45%, #05101a 100%); }
.setup-inner { max-width: 1100px; padding: 30px; text-align: center; }
.title { font-size: 64px; color: var(--gold2); letter-spacing: 4px; text-shadow: 0 0 30px rgba(216,180,95,.4); }
.subtitle { color: var(--muted); margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.lead { font-size: 16px; }
#arcanist-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.arc-choice input { display: none; }
.arc-box { position: relative; background: #0f2a30; border: 2px solid #2a5a62; border-radius: 14px; padding: 18px 14px; height: 100%; text-align: left; transition: .15s; }
.arc-choice input:checked + .arc-box { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,180,95,.3), 0 0 30px rgba(216,180,95,.25); background: #15383f; }
.arc-box:hover { border-color: var(--sc); }
.arc-box .rec { position: absolute; top: -11px; left: 12px; background: var(--gold); color: #1a1205; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.arc-box .arc-icon { font-size: 40px; }
.arc-box .arc-name { font-size: 20px; color: var(--gold2); margin: 6px 0; }
.arc-box .arc-passive { font-size: 13px; line-height: 1.35; }
.arc-box .arc-tip { font-size: 12px; color: var(--muted); margin-top: 8px; font-style: italic; }
.setup-opts { display: flex; gap: 24px; align-items: center; justify-content: center; margin-top: 10px; }
.setup-opts select { font: inherit; background: #0f2a30; color: var(--ink); border: 1px solid #2a5a62; border-radius: 6px; padding: 6px; margin-left: 6px; }

/* ===== Game layout ===== */
#screen-game { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; display: grid; grid-template-columns: 1fr 300px; grid-template-rows: 100%; } /* one fixed row: the HUD can never stretch the table past 900px */
#table-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 110%, #1d5b64 0%, #0f3339 35%, #07161b 75%); }
#table-bg::before { content: ""; position: absolute; left: -10%; right: -10%; top: 38%; bottom: -20%;
  background: radial-gradient(ellipse at 50% 60%, rgba(216,180,95,.10), rgba(0,0,0,0) 60%), linear-gradient(#123d44, #0a252b);
  border-top: 3px solid rgba(216,180,95,.35); border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  transform: perspective(900px) rotateX(18deg); transform-origin: 50% 100%; box-shadow: 0 -20px 60px rgba(0,0,0,.6) inset; }
#table-bg::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,.015) 0 2px, transparent 2px 24px); pointer-events: none; }

#hud-right { position: relative; z-index: 2; min-height: 0; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); border-left: 1px solid rgba(216,180,95,.2); }
#table { position: relative; z-index: 1; display: grid; grid-template-rows: 250px 1fr 126px 230px 98px; min-width: 0; } /* rows sum to 900 with the Weave row (194px of cards) taking the 1fr */

/* Vitals under the hand: vitality bar + growing mana orb */
#vitals-row { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; } /* bottom-aligned so the orb grows upward, never past the table edge */
#vitals { display: flex; align-items: center; gap: 36px; }
.vit-wrap, .orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vit-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(216,180,95,.7); }
.vit-bar { position: relative; width: 380px; height: 26px; border-radius: 14px; background: #1a0a0f; border: 2px solid #7a3a3a; box-shadow: 0 0 14px rgba(220,60,60,.35), inset 0 2px 6px rgba(0,0,0,.8); overflow: hidden; }
.vit-fill { height: 100%; background: linear-gradient(90deg, #8a1020, #e03a3a 60%, #ff7a6a); box-shadow: 0 0 12px rgba(255,80,80,.7); transition: width .35s; }
.vit-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: 1px; text-shadow: 0 1px 3px #000; }
.orb-wrap { width: 112px; height: 112px; justify-content: flex-end; }
.orb { width: var(--sz); height: var(--sz); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; color: #fff; text-shadow: 0 1px 3px #000;
  background: radial-gradient(circle at 35% 30%, #ffffff66, transparent 35%), radial-gradient(circle at 50% 50%, var(--oc), color-mix(in srgb, var(--oc) 45%, #000));
  border: 2px solid color-mix(in srgb, var(--oc) 70%, #fff); box-shadow: 0 0 calc(var(--sz) / 3) var(--oc), inset 0 -6px 14px rgba(0,0,0,.5); transition: width .3s, height .3s, box-shadow .3s, background .3s; }
.orb.max { animation: orbpulse 1.4s infinite; }
@keyframes orbpulse { 0%,100% { box-shadow: 0 0 30px var(--oc); } 50% { box-shadow: 0 0 50px var(--oc), 0 0 80px var(--oc); } }

/* Locked schools on the pick screen */
.arc-choice.locked .arc-box { opacity: .45; filter: grayscale(1); cursor: not-allowed; text-align: center; }
.arc-choice.locked .arc-box:hover { border-color: #2a5a62; }
.arc-soon { margin-top: 14px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); border: 1px dashed #456; border-radius: 8px; padding: 6px; }

#arcanist-panel { background: rgba(0,0,0,.35); border: 1px solid #2f5f66; border-radius: 12px; padding: 12px; text-align: center; }
#arcanist-panel .arc-icon { font-size: 44px; }
#arcanist-panel .arc-name { font-size: 18px; color: var(--gold2); }
#arcanist-panel .arc-passive { font-size: 11.5px; line-height: 1.35; color: #cfd9da; margin-top: 6px; }

#stats { display: flex; flex-direction: column; gap: 6px; }
.stat { background: rgba(0,0,0,.35); border: 1px solid #2f5f66; border-radius: 10px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden; }
.stat .lab { font-size: 12px; color: var(--muted); flex: 1; }
.stat .val { font-weight: 700; font-size: 16px; }
.stat .val.big { font-size: 28px; color: var(--gold2); }
.stat small { position: absolute; right: 10px; bottom: -1px; font-size: 9px; color: var(--muted); }
.stat.mana { border-color: var(--gold); box-shadow: 0 0 14px rgba(216,180,95,.2) inset; }
.stat.vit { flex-wrap: wrap; }
.stat.vit .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #300; }
.stat.vit .bar .fill { height: 100%; background: linear-gradient(90deg, #d23, #f66); transition: width .3s; }

#deck-piles { display: flex; gap: 8px; }
.pile { width: 58px; height: 80px; border-radius: 8px; background: linear-gradient(#1a3a40, #0b2024); border: 1px solid #3b6c74; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,.5), 3px 3px 0 #0a1b1f, 6px 6px 0 #071317; }
.pile .pile-n { font-size: 20px; font-weight: 700; }
.pile .pile-l { font-size: 10px; color: var(--muted); line-height: 1.1; }
.pile.mine { cursor: pointer; }
.pile.mine:hover { filter: brightness(1.2); }
.pile.void { border-color: #6a3aa0; }
.pile.spark { border-color: #9ec37a; cursor: pointer; }
.pile.spark:hover { filter: brightness(1.25); }
.pile.corr { border-color: #553; }
.pile.grim { border-color: var(--gold); }

#turn-ind { color: var(--gold2); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.btn.end { width: 150px; height: 150px; border-radius: 50%; font-size: 21px; font-weight: 700; background: radial-gradient(circle at 40% 35%, #f0d27f, #a6792a 70%, #6b4d14); color: #1a1205; border: 3px solid var(--gold2); box-shadow: 0 0 25px rgba(216,180,95,.35); }
.btn.end:hover { box-shadow: 0 0 40px rgba(216,180,95,.6); }
.hud-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hud-btns .btn { width: 100%; }

.row-label { position: absolute; left: 10px; top: 4px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(216,180,95,.6); }

/* Top: archfiend */
#top-row { display: flex; align-items: center; justify-content: center; padding-top: 8px; }
#archfiend { display: flex; align-items: center; gap: 24px; }
.af-card { width: 500px; background: linear-gradient(160deg, #2a1a3a, #140c1e); border: 2px solid var(--sc); border-radius: 16px; padding: 12px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 30px color-mix(in srgb, var(--sc) 30%, transparent); cursor: pointer; position: relative; transition: transform .15s, box-shadow .15s; }
.af-card.can:hover { transform: scale(1.02); box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 34px rgba(255,90,90,.5); }
.af-head { display: flex; align-items: center; gap: 12px; }
.af-cost { margin-left: auto; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5aa0e0, #1e4f8a); border: 3px solid #cfe8ff; font-weight: 800; font-size: 30px; display: flex; align-items: center; justify-content: center; color: #fff; text-shadow: 0 1px 2px #000; flex-shrink: 0; box-shadow: 0 0 16px rgba(90,160,224,.5); }
.af-cost s { font-size: 14px; opacity: .7; margin-right: 4px; }
.af-cost.ok { background: radial-gradient(circle at 35% 30%, #f0d27f, #a6792a); border-color: var(--gold2); box-shadow: 0 0 22px rgba(240,210,127,.7); color: #1a1205; text-shadow: none; }
.af-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.af-strike { flex-shrink: 0; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .5px; background: #2a1a1a; border: 1px solid #553; color: #887; }
.af-strike.ready { background: linear-gradient(#8a2d2d, #5a1c1c); border-color: #e77; color: #fff; box-shadow: 0 0 14px rgba(255,80,80,.45); animation: pulse 1.6s infinite; }
.af-strike.done { background: #1a2a1a; border-color: #4a6; color: #8c8; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 10px rgba(255,80,80,.35); } 50% { box-shadow: 0 0 22px rgba(255,80,80,.7); } }
.af-icon { font-size: 44px; filter: drop-shadow(0 0 10px rgba(255,255,255,.3)); }
.af-name { font-size: 24px; color: var(--gold2); }
.af-plane { font-size: 12px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.hpbar { position: relative; height: 20px; background: #2a0a0a; border: 1px solid #733; border-radius: 10px; margin: 8px 0; overflow: hidden; }
.hpfill { height: 100%; background: linear-gradient(90deg, #a11, #e44); transition: width .4s; }
.hpbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.hpbar.mana { background: #1a1a0a; border-color: #776; }
.hpbar.mana .hpfill { background: linear-gradient(90deg, #8a6a1a, #f0d27f); }
.arc-school { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 4px; }
.arc-school b { color: var(--gold2); }
.af-weak { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.af-weak.on { color: #ffd77a; font-weight: 700; }
.af-intents { display: flex; gap: 6px; }
.intent { flex: 1; background: rgba(0,0,0,.35); border: 1px solid #3a2a4a; border-radius: 8px; padding: 4px 6px; font-size: 10px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.intent.now { border-color: #ffd77a; background: rgba(255,215,122,.12); color: var(--ink); box-shadow: 0 0 12px rgba(255,215,122,.25); }
.intent .n { font-size: 9px; letter-spacing: 1px; color: var(--gold); }
.intent .d { line-height: 1.2; }
.ic { display: inline-block; margin-right: 4px; font-weight: 700; font-size: 12px; }
.ic.dmg { color: #ff7b7b; } .ic.cor { color: #c9a0ff; }
.af-flavor { font-size: 11px; font-style: italic; color: #a996b8; }
.af-queue { display: flex; flex-direction: column; gap: 6px; }
.af-queue .q { width: 34px; height: 34px; border-radius: 50%; background: #1a1424; border: 1px solid #3a2a4a; display: flex; align-items: center; justify-content: center; font-size: 16px; opacity: .55; }
.af-queue .q.now { opacity: 1; border-color: var(--gold); box-shadow: 0 0 10px rgba(216,180,95,.5); }
.af-queue .q.done { opacity: .9; color: #8f8; border-color: #4a4; }

/* Weave */
#weave-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 20px 6px; }
#weave { display: flex; gap: 12px; }

/* Board */
#board-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; padding: 14px 20px 0; }
.board-col { position: relative; background: rgba(0,0,0,.18); border: 1px dashed rgba(216,180,95,.25); border-radius: 12px; padding: 18px 10px 4px; overflow: hidden; min-height: 120px; }
.board-col > div:not(.row-label) { display: flex; gap: 6px; align-items: flex-start; min-height: 96px; }
.board-col .card.mini { zoom: .6; }
.board-col.tray { border-color: rgba(216,180,95,.55); background: rgba(216,180,95,.06); }
.card.mini.undoable:hover { border-color: #ffd77a; box-shadow: 0 0 12px rgba(255,215,122,.5); }
.card.mini.locked { opacity: .75; }
.board-col.tray .card.mini:hover { border-color: #f88; }

/* Side piles: Mana Stone + Corruption as full cards in the right panel */
#side-piles { margin-top: auto; display: flex; gap: 12px; justify-content: center; padding-bottom: 14px; }
.side-pile { position: relative; }
#grimoire-card { margin-right: 10px; }
#grimoire-card .pilecard { zoom: 1; }
.pilecard.back.grim { border-color: #8a4fd0; background: radial-gradient(circle at 50% 40%, #3a2252, #140c1e 70%), repeating-linear-gradient(45deg, rgba(138,79,208,.08) 0 6px, transparent 6px 12px); }
.pilecard.back.grim .sigil { color: #c9a0ff; text-shadow: 0 0 16px rgba(138,79,208,.8); }
.pilecard.back.grim .deck-l { color: #c9a0ff; }
.fx-dim { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; animation: fadein .25s; }
.fx-label { font-family: Georgia, serif; font-size: 24px; letter-spacing: 2px; color: var(--gold2); text-shadow: 0 0 20px rgba(216,180,95,.6); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.pile-badge { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: #0b1a1f; border: 1px solid var(--gold); color: var(--gold2); font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; z-index: 3; }

/* Deck + discard as full cards beside End Turn */
#piles-bottom { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
#deck-piles { display: flex; flex-direction: column; gap: 14px; }
.bigpile { position: relative; cursor: pointer; }
.bigpile:hover .pilecard { border-color: var(--gold2); }
.pilecard { zoom: .78; }
.pilecard.back { background: radial-gradient(circle at 50% 40%, #1f4a53, #0b2127 70%), repeating-linear-gradient(45deg, rgba(216,180,95,.06) 0 6px, transparent 6px 12px); border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pilecard.back .sigil { font-size: 40px; color: var(--gold2); text-shadow: 0 0 16px rgba(216,180,95,.7); }
.pilecard.back .deck-n { font-size: 30px; font-weight: 800; color: var(--ink); }
.pilecard.back .deck-l { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.pilecard.empty { display: flex; align-items: center; justify-content: center; }
.stat.mini-stat { cursor: pointer; }
.stat.mini-stat:hover { border-color: var(--gold); }

/* Flying cards */
#fx-root { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.fx-card { position: fixed; transform-origin: 0 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; will-change: transform; transform-style: preserve-3d; }
.fx-card .fx-inner { transform-origin: 0 0; }
.board-empty { color: rgba(216,180,95,.35); font-size: 12px; font-style: italic; align-self: center; width: 100%; text-align: center; }

/* Hand */
#hand-row { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
#hand { display: flex; justify-content: center; align-items: flex-end; height: 226px; padding: 0 40px; }
/* The slot is the hover/click target and never moves, so the pointer can't fall off it. */
.hand-slot { position: relative; width: 140px; height: 196px; margin: 0 -12px; transform: rotate(var(--rot)) translateY(var(--ty)); transform-origin: 50% 130%; cursor: pointer; }
.hand-slot:hover { z-index: 100 !important; }
.hand-slot .card.inhand { width: 140px; height: 196px; transform-origin: 50% 100%; transition: transform .15s, box-shadow .15s; }
.hand-slot:hover .card.inhand { transform: translateY(-64px) scale(1.5) rotate(calc(var(--rot) * -1)); border-color: var(--gold2); box-shadow: 0 24px 50px rgba(0,0,0,.85), 0 0 24px rgba(216,180,95,.5); }

/* ===== Cards ===== */
.card { position: relative; display: flex; flex-direction: column; width: var(--card-w); height: var(--card-h); border-radius: 10px; background: linear-gradient(#1e2b33, #121a20); border: 2px solid #3a5560; box-shadow: 0 4px 10px rgba(0,0,0,.6); color: #eee; font-size: 10px; overflow: hidden; user-select: none; flex-shrink: 0; }
.card.selectable { cursor: pointer; }
.card.selectable:hover { border-color: var(--gold2); }
.card .cost { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5aa0e0, #1e4f8a); border: 2px solid #cfe8ff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; z-index: 2; color: #fff; text-shadow: 0 1px 1px #000; }
.card .cost.no { background: radial-gradient(circle at 35% 30%, #b04040, #5a1a1a); border-color: #f99; }
.card .name { margin: 7px 24px 0 6px; font-weight: 700; font-size: 11px; line-height: 1.1; min-height: 24px; display: flex; align-items: center; }
.card .art { height: 48px; margin: 3px 6px; border-radius: 6px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sc) 65%, #000), color-mix(in srgb, var(--sc) 20%, #000)); display: flex; align-items: center; justify-content: center; font-size: 26px; border: 1px solid color-mix(in srgb, var(--sc) 60%, #000); }
.card .type { font-size: 8px; text-transform: uppercase; letter-spacing: .6px; text-align: center; background: var(--sc); color: #fff; padding: 2px; text-shadow: 0 1px 1px rgba(0,0,0,.6); }
.card .text { flex: 1 1 auto; overflow: hidden; margin-bottom: 26px; padding: 4px 6px 0; font-size: 9.2px; line-height: 1.25; color: #e8e8e8; }
.card .text .kw { color: var(--gold2); }
.card .attack { margin-top: 3px; color: #ff9a9a; }
.card .lore { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4d98a, #9a7420); color: #1a1205; font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffe9b0; }
.card .lore.neg { background: #333; color: #f88; border-color: #a55; }
.card .zone-label { position: absolute; top: 3px; left: 5px; font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.card.kind-Fiend { border-color: #b03030; box-shadow: 0 4px 10px rgba(0,0,0,.6), 0 0 10px rgba(200,40,40,.35); }
.card.kind-Familiar, .card.kind-Sanctum { border-color: #5a9a5a; }
.card.kind-Corruption { background: linear-gradient(#2a1a2f, #140a18); border-color: #553; }
.card.kind-Sealed { border-color: var(--gold); box-shadow: 0 0 14px rgba(216,180,95,.4); }
.card.kind-Starter .art, .card.kind-Corruption .art { opacity: .7; }
.card.empty { border-style: dashed; border-color: rgba(216,180,95,.25); background: rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: rgba(216,180,95,.3); font-size: 11px; }
.card.mini { zoom: .66; }
.card.dim { opacity: .4; }

/* ===== Modal ===== */
#modal-root { position: fixed; inset: 0; z-index: 500; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; }
.modal { background: linear-gradient(#17343b, #0c2026); border: 2px solid var(--gold); border-radius: 16px; padding: 22px 26px; max-width: 900px; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.8); min-width: 420px; }
.modal h2 { margin: 0 0 8px; color: var(--gold2); font-size: 24px; }
.modal-text { font-size: 14px; line-height: 1.45; color: #dfe6e7; }
.modal-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; justify-content: center; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal-btns .btn { min-width: 140px; text-align: left; }
.modal-btns .btn span { display: block; }
.strike-ui { margin: 14px 0; }
.strike-ui input { width: 100%; }
#strike-readout { margin-top: 8px; font-size: 15px; }
.rules { font-size: 13px; line-height: 1.5; max-width: 720px; }
.rules h3 { color: var(--gold2); margin: 12px 0 4px; }
.rules ul, .rules ol { padding-left: 20px; margin: 4px 0; }

/* ===== Log ===== */
#log-panel { position: absolute; right: 272px; top: 10px; bottom: 10px; width: 300px; background: rgba(5,15,20,.94); border: 1px solid #2f5f66; border-radius: 12px; z-index: 60; display: none; flex-direction: column; }
#log-panel.open { display: flex; }
.log-title { padding: 8px 12px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid #2f5f66; }
#log { overflow: auto; padding: 8px 12px; font-size: 12px; line-height: 1.4; flex: 1; }
#log .l.turn { color: var(--gold2); font-weight: 700; margin-top: 6px; }
#log .l.good { color: #9fe3a1; } #log .l.bad { color: #ff9a9a; } #log .l.big { color: var(--gold2); font-weight: 700; }
#flash { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); background: rgba(0,0,0,.85); border: 1px solid var(--gold); color: var(--gold2); padding: 10px 18px; border-radius: 10px; z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s; font-size: 14px; }
#flash.show { opacity: 1; }

/* ===== Tutorial ===== */
#tutorial-root { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.tut-dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); pointer-events: auto; }
.tut-spot { position: absolute; border: 3px solid var(--gold2); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.6), 0 0 30px rgba(242,213,138,.6); pointer-events: none; transition: all .2s; }
.tut-panel { position: absolute; width: 440px; background: linear-gradient(#1a3a42, #0e252b); border: 2px solid var(--gold2); border-radius: 14px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.8); pointer-events: auto; z-index: 2; }
.tut-step { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.tut-panel h3 { margin: 4px 0 8px; font-size: 20px; color: var(--gold2); }
.tut-text { font-size: 13.5px; line-height: 1.45; }
.tut-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tut-wait { font-size: 12px; color: #ffd77a; font-style: italic; }

/* ===== Tips ===== */
#tip-root { position: fixed; left: 16px; top: 12px; z-index: 450; display: flex; flex-direction: column; gap: 10px; width: 300px; }
.strike-ui .good, #strike-readout .good { color: #9fe3a1; } #strike-readout .bad { color: #ff9a9a; }
.tip { background: linear-gradient(#2a2a16, #171708); border: 1px solid var(--gold); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.7); animation: tipin .25s ease-out; }
.tip-title { font-weight: 700; color: var(--gold2); margin-bottom: 4px; }
.tip-text { font-size: 12.5px; line-height: 1.4; margin-bottom: 8px; }
@keyframes tipin { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Mobile UI (body.mobile) =====
   Tuned for a 6.9-inch phone in portrait (about 440x956 CSS px). Same DOM as the desktop
   table: applyUiMode() in game.js moves the right-hand HUD into #m-top / #m-bottom. */
.m-only { display: none; }
#ui-toggle { position: fixed; top: 10px; right: 10px; z-index: 5; }
#preview-root { display: none; }

/* Hover zoom: rest the pointer on any card for 1 s and a full-size copy appears beside it (desktop UI only) */
#card-zoom { position: fixed; z-index: 600; display: none; pointer-events: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.85)); }
#card-zoom.open { display: block; animation: fadein .12s; }
#card-zoom .card { zoom: 2.4; border-color: var(--gold2); box-shadow: 0 0 0 1px rgba(216,180,95,.35), 0 0 30px rgba(216,180,95,.35); }
body.mobile #card-zoom { display: none !important; }
body.mobile { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body.mobile .m-only { display: flex; }

/* Setup screen */
body.mobile #screen-setup { height: 100vh; height: 100dvh; align-items: flex-start; }
body.mobile #ui-toggle { top: calc(8px + env(safe-area-inset-top)); }
body.mobile .setup-inner { padding: calc(44px + env(safe-area-inset-top)) 14px 32px; }
body.mobile .title { font-size: 42px; letter-spacing: 2px; }
body.mobile .subtitle { font-size: 11px; letter-spacing: 1px; }
body.mobile .lead { font-size: 14px; }
body.mobile #arcanist-pick { grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
body.mobile .arc-box { padding: 14px 10px 10px; border-radius: 12px; }
body.mobile .arc-box .arc-icon { font-size: 30px; }
body.mobile .arc-box .arc-name { font-size: 16px; }
body.mobile .arc-box .arc-passive { font-size: 12px; }
body.mobile .arc-box .arc-tip { font-size: 11px; }
body.mobile .setup-opts { flex-direction: column; gap: 12px; align-items: stretch; }
body.mobile .setup-opts label { display: flex; align-items: center; justify-content: center; gap: 6px; }
body.mobile .setup-opts select { flex: 1; max-width: 240px; padding: 8px; }
body.mobile .btn.big { padding: 14px; font-size: 18px; }

/* Game frame: fixed phone-height column, no scaling */
body.mobile #screen-game { position: fixed; inset: 0; width: auto; height: 100vh; height: 100dvh; transform: none !important; display: flex; flex-direction: column; }
body.mobile #table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body.mobile #hud-right { display: none; }

/* Top bar: turn, school chip, buttons, then stats */
body.mobile #m-top { position: relative; z-index: 2; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: rgba(0,0,0,.5); border-bottom: 1px solid rgba(216,180,95,.25); }
body.mobile #turn-ind { font-size: 11px; letter-spacing: 1.5px; order: 1; }
body.mobile #arcanist-panel { order: 2; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 20px; }
body.mobile #arcanist-panel .arc-icon { font-size: 18px; }
body.mobile #arcanist-panel .arc-name { font-size: 13px; }
body.mobile #arcanist-panel .arc-school, body.mobile #arcanist-panel .arc-passive { display: none; }
body.mobile .hud-btns { order: 3; margin-left: auto; display: flex; gap: 4px; }
body.mobile .hud-btns .btn { width: auto; padding: 5px 8px; font-size: 11px; }
body.mobile #stats { order: 4; flex: 1 1 70%; flex-direction: row; gap: 6px; }
body.mobile .stat { padding: 3px 8px; gap: 5px; border-radius: 8px; flex: 1; }
body.mobile .stat .lab { font-size: 11px; white-space: nowrap; }
body.mobile .stat .val { font-size: 13px; }
body.mobile .stat small { display: none; }
body.mobile #void-pile { order: 5; flex: 0 0 auto; }

/* Archfiend */
body.mobile #top-row { order: 1; padding: 8px 10px 0; flex: 0 0 auto; }
body.mobile #archfiend { flex-direction: column; gap: 6px; width: 100%; }
body.mobile .af-card { width: 100%; padding: 8px 10px; border-radius: 12px; }
body.mobile .af-head { gap: 8px; }
body.mobile .af-icon { font-size: 30px; }
body.mobile .af-name { font-size: 18px; }
body.mobile .af-plane { font-size: 10px; }
body.mobile .af-cost { width: 48px; height: 48px; font-size: 22px; }
body.mobile .af-weak { font-size: 10px; margin-bottom: 4px; }
body.mobile .af-flavor { display: none; }
body.mobile .af-foot { margin-top: 6px; justify-content: center; }
body.mobile .af-strike { padding: 6px 12px; font-size: 11px; width: 100%; text-align: center; }
body.mobile .af-queue { flex-direction: row; justify-content: center; gap: 8px; }
body.mobile .af-queue .q { width: 26px; height: 26px; font-size: 13px; }

/* Weave: horizontal strip (Grimoire, 5 slots, Mana Stone, Corruption) */
body.mobile #weave-row { order: 2; flex: 0 0 auto; justify-content: flex-start; gap: 8px; padding: 18px 10px 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
body.mobile #weave-row > * { flex-shrink: 0; scroll-snap-align: start; }
body.mobile #weave { gap: 8px; }
body.mobile #weave-row .card, body.mobile #weave-row .pilecard { zoom: .82; }
body.mobile #grimoire-card { margin-right: 0; }
body.mobile #side-piles { margin: 0; padding: 0; gap: 8px; }
body.mobile #weave-row .pile-badge { bottom: -8px; font-size: 10px; padding: 1px 7px; }

/* Board: three compact columns */
body.mobile #board-row { order: 3; flex: 0 0 auto; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 10px 0; }
body.mobile .board-col { min-height: 88px; padding: 15px 4px 4px; overflow-x: auto; overflow-y: hidden; border-radius: 10px; }
body.mobile .board-col > div:not(.row-label) { min-height: 62px; gap: 4px; }
body.mobile .board-col .card.mini { zoom: .46; }
body.mobile .board-col .row-label { left: 6px; top: 3px; font-size: 8px; letter-spacing: 1px; }
body.mobile .board-empty { font-size: 10px; line-height: 1.2; }

/* Vitals: bar + orb in one row above the hand */
body.mobile #vitals-row { order: 4; flex: 0 0 auto; padding: 8px 12px 0; }
body.mobile #vitals { width: 100%; gap: 12px; }
body.mobile .vit-wrap { flex: 1; }
body.mobile .vit-bar { width: 100%; height: 22px; }
body.mobile .vit-bar span { font-size: 12px; }
body.mobile .orb-wrap { width: 64px; height: 64px; }
body.mobile .orb { width: calc(var(--sz) * .55); height: calc(var(--sz) * .55); font-size: 18px; }
body.mobile .vit-label { font-size: 9px; letter-spacing: 2px; }

/* Hand: horizontal strip, no fan, no hover lift */
body.mobile #hand-row { order: 5; flex: 0 0 auto; display: block; padding: 8px 0 10px; }
body.mobile #hand { height: auto; padding: 4px 10px; gap: 6px; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; }
body.mobile .hand-slot { width: 134px; height: 187px; margin: 0; transform: none; flex-shrink: 0; scroll-snap-align: center; z-index: auto !important; }
body.mobile .hand-slot:first-child { margin-left: auto; }
body.mobile .hand-slot:last-child { margin-right: auto; }
body.mobile .hand-slot .card.inhand { width: 122px; height: 170px; zoom: 1.1; transition: none; }
body.mobile .hand-slot:hover .card.inhand { transform: none; border-color: #3a5560; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
body.mobile .card.selectable:hover, body.mobile .card.mini.undoable:hover, body.mobile .board-col.tray .card.mini:hover { border-color: inherit; box-shadow: none; }
body.mobile .af-card.can:hover { transform: none; }
body.mobile .btn:hover { transform: none; filter: none; }

/* Bottom bar: discard, deck, End Turn */
body.mobile #m-bottom { position: relative; z-index: 2; flex: 0 0 auto; align-items: center; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.55); border-top: 1px solid rgba(216,180,95,.25); }
body.mobile #piles-bottom { width: 100%; align-items: center; gap: 14px; }
body.mobile #deck-piles { flex-direction: row; gap: 16px; }
body.mobile #deck-piles .pilecard { zoom: .44; }
body.mobile #deck-piles .pile-badge { font-size: 10px; padding: 1px 7px; bottom: -9px; }
body.mobile .btn.end { flex: 1; width: auto; height: 58px; border-radius: 29px; font-size: 20px; }

/* Card preview sheet (tap a card to read it, then confirm) */
body.mobile #preview-root.open { position: fixed; inset: 0; z-index: 480; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.78); animation: fadein .15s; }
body.mobile .preview-card .card { zoom: 2; }
body.mobile .preview-btns { display: flex; gap: 10px; width: calc(100% - 32px); max-width: 360px; }
body.mobile .preview-btns .btn { flex: 1; min-height: 50px; font-size: 16px; }
body.mobile .preview-btns .btn.ghost { flex: 0 0 auto; padding: 0 20px; }

/* Overlays */
body.mobile .modal { min-width: 0; width: calc(100vw - 20px); max-height: 90vh; max-height: 90dvh; padding: 16px 14px; border-radius: 14px; }
body.mobile .modal h2 { font-size: 20px; }
body.mobile .modal-text { font-size: 13.5px; }
body.mobile .modal-cards { gap: 8px; }
body.mobile .modal-btns { flex-direction: column; }
body.mobile .modal-btns .btn { min-width: 0; width: 100%; min-height: 46px; text-align: center; }
body.mobile .rules { font-size: 13px; }
body.mobile #log-panel { position: fixed; left: 10px; right: 10px; top: calc(80px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; }
body.mobile #flash { top: 40%; width: max-content; max-width: calc(100vw - 40px); text-align: center; }
body.mobile .tut-panel { width: auto; max-height: 48vh; max-height: 48dvh; overflow: auto; padding: 12px 14px; }
body.mobile .tut-panel h3 { font-size: 17px; }
body.mobile .tut-text { font-size: 13px; }
body.mobile .tut-btns { gap: 8px; flex-wrap: wrap; }
body.mobile #tip-root { left: 12px; right: 12px; width: auto; top: calc(80px + env(safe-area-inset-top)); }
body.mobile .fx-dim { padding-top: 30vh; }
body.mobile .fx-label { font-size: 18px; text-align: center; padding: 0 20px; }


/* Tips and tutorial panels fade out when dismissed or after their 30 s auto-hide */
.tip { transition: opacity .4s, transform .4s; }
.tip.hide { opacity: 0; transform: translateX(-16px); pointer-events: none; }

/* Game logs: copy button in the log panel, and the saved-games list on the start screen */
.log-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.log-title .btn { padding: 2px 8px; font-size: 11px; letter-spacing: 0; text-transform: none; }
.loglist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 50vh; overflow: auto; }
.logrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #2f5f66; border-radius: 8px; font-size: 13px; }
.logrow small { color: var(--muted); }
.logrow-btns { display: flex; gap: 6px; flex-shrink: 0; }
.go-btns { margin-top: 12px; }
.muted { color: var(--muted); }
.muted.small { font-size: 12px; margin: 8px 0 0; }
body.mobile .logrow { flex-direction: column; align-items: stretch; }