/* Framed cards (2026-11-10). Hand cards and board units are built on painted frames:
   art sits in the frame's window (.win), the keyed frame image (.frm) lies on top, and the cost, name,
   zone tag and stats sit in the frame's own sockets and plates. Positions are fractions of the cropped
   frame (art/ui/frames.json, made by tools/process_frames.py). Depth comes from the painted bevels plus
   a drop shadow that follows the frame's outline (filter: drop-shadow), a gentle fan and a mouse tilt.

   Sizing: cards scale with the screen. --uw (board token width) and --hw (hand card width) follow the
   window height, capped by the width so three lanes of two tokens always fit; every font inside a card
   is a fraction of its card's width, so nothing needs per-breakpoint tuning. */
:root {
  /* Steeper than plain vh: about 55px tokens on a 680px laptop, about 150px on a 1230px monitor. */
  --uwb: min(clamp(46px, calc(17vh - 60px), 150px), calc((min(100vw, 1120px) - 34px) / 6.4));
  --hw: min(clamp(72px, calc(15vh - 28px), 165px), 23vw);
}
/* Tokens step down as the Medium and Far rows open (game.js sets data-rows = open rows on the board). */
#app { --uw: var(--uwb); }
#app[data-rows="2"] { --uw: max(46px, calc(var(--uwb) * .85)); }
#app[data-rows="4"] { --uw: max(44px, calc(var(--uwb) * .7)); }

/* ---------- shared ---------- */
.hc.fr, .u.fr { border: 0 !important; background: none !important; padding: 0 !important; overflow: visible; isolation: isolate; }
.hc.fr::before, .u.fr::before { display: none; } /* the old art gradient; the window has its own */
.fr .win { position: absolute !important; background: #2a251b center/cover no-repeat; display: flex; align-items: center; justify-content: center; z-index: 0;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .65); }
.fr .win .ic { font-size: 26px; filter: saturate(.55) sepia(.25); visibility: visible !important; }
.fr .frm { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; }
.fr > .cost, .fr > .zn, .fr > .nm, .fr > .st, .fr > .ep, .fr > .kw, .fr > .back { position: absolute !important; z-index: 3; }
.spent-mark, .ability-strip, .ability-mark, .cooldown { z-index: 6 !important; }

/* ---------- hand card (frame 830 x 963) ---------- */
#app .hc.fr { width: var(--hw); height: calc(var(--hw) * 1.16); border-radius: 6px;
  transform-origin: 50% 120%; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg));
  transition: transform .18s ease-out, filter .18s;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .75)); }
.hc.fr .win { left: 15.06%; top: 10.28%; width: 70.48%; height: 65.01%; border-radius: 3px; }
.hc.fr .cost { left: -1.5%; top: -2.8%; width: 22%; height: auto; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 900 calc(var(--hw) * .125)/1 Cinzel, Georgia, serif; color: #f4f8ff; text-shadow: 0 1px 1px #061224;
  background: radial-gradient(circle at 35% 30%, #b9d6f2 0%, #4d7aa6 38%, #1d3854 70%, #0f1e2e 100%);
  border: 1px solid #d5e4f4; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .6), 0 2px 3px #000; }
.hc.fr .zn { right: 3%; top: 2.6%; padding: 1px 3px; font: 700 calc(var(--hw) * .0625)/1.2 Arial, sans-serif; letter-spacing: .05em; border-radius: 2px; }
.hc.fr .ep { left: 50%; top: 2.2%; transform: translateX(-50%); font: 700 calc(var(--hw) * .077)/1 Cinzel, Georgia, serif; color: #e8c991; text-shadow: 0 1px 1px #000; }
.hc.fr .nm { left: 10%; right: 12%; top: 78%; height: 9.5%; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 calc(var(--hw) * .0865)/1 Cinzel, Georgia, serif; color: #f2e4c4; text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; }
.hc.fr .nm.l { font-size: calc(var(--hw) * .073); letter-spacing: -.01em; }
.hc.fr .nm.xl { font-size: calc(var(--hw) * .063); letter-spacing: -.02em; }
.hc.fr .st { left: 17%; right: 16%; top: 90%; height: 7%; margin: 0; width: auto; display: flex; align-items: center; justify-content: center;
  background: none !important; box-shadow: none !important; font: 900 calc(var(--hw) * .106)/1 Cinzel, Georgia, serif; color: #f3e2b8; text-shadow: 0 1px 1px #000; }
.hc.fr.lock { opacity: 1; filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .75)) grayscale(.75) brightness(.6); }
.hc.fr.lock::after { content: '🔒'; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--hw) * .17); z-index: 4; }
.hc.fr.play { filter: drop-shadow(0 0 3px #e4c27f) drop-shadow(0 7px 6px rgba(0, 0, 0, .75)); }
#app .hc.fr:hover, #app .hc.fr:focus-visible { z-index: 5; filter: drop-shadow(0 16px 10px rgba(0, 0, 0, .8));
  transform: translateY(-12px) rotate(0deg) perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.07); }
#app .hc.fr.play:hover { filter: drop-shadow(0 0 4px #f0d38e) drop-shadow(0 16px 10px rgba(0, 0, 0, .8)); }
#app .hc.fr.sel { z-index: 5; transform: translateY(-14px) rotate(0deg) scale(1.06); outline: none; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 12px 8px #000c); }
#app .hc.fr:active { transform: translateY(-6px) rotate(0deg) scale(1.02); transition-duration: .06s; }
/* Light sweeps across the art window as the mouse moves. */
.hc.fr .win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at var(--mx, 30%) var(--my, 0%), rgba(255, 250, 230, .22), rgba(255, 250, 230, 0) 60%); }

/* The hand never scrolls: cards spread out, or overlap when crowded (game.js fitHand sets --hgap),
   and the hand stays pinned to the bottom of the screen even if the board above has to scroll. */
/* Lanes are only as tall as their tokens need; leftover height goes to the hand tray below the cards,
   so the cards sit higher on the screen (clear of a taskbar) instead of under a stretched, empty board. */
#app #lanes { flex: 1 1 auto; max-height: calc(var(--uw) * 2.05 + 150px); } /* a little breathing room, never a stretched empty board */
#app #hand { flex: 1 0 auto; position: sticky; bottom: 0; z-index: 4; perspective: 900px; overflow: visible; gap: 0; justify-content: center; align-items: flex-start;
  min-height: calc(var(--hw) * 1.16 + 30px); padding: 14px 12px calc(16px + var(--safe-b)); }
#hand .hc + .hc { margin-left: var(--hgap, 10px); }
#handPrev, #handNext { display: none !important; }
/* The closed card sheet slides below the screen; fixed positioning keeps it from adding a phantom scroll to #app. */
#app #sheet { position: fixed; }

/* ---------- board unit (frame 847 x 866) ---------- */
#app .u.fr { width: var(--uw); height: calc(var(--uw) * 1.022); border-radius: 4px; transition: transform .15s ease-out, filter .15s;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .75)); box-shadow: none !important; }
#app .slot { width: var(--uw); height: calc(var(--uw) * 1.022); box-shadow: inset 0 2px 6px #0007; }
#app #lanes .units { min-height: calc(var(--uw) * 1.022 + 4px); }
#app #lanes { min-height: calc(var(--uw) * 2.1 + 80px); }
#app .row:not(.locked) { min-height: calc(var(--uw) * 1.022 + 10px); }
.u.fr .win { left: 12.75%; top: 10.62%; width: 74.62%; height: 65.36%; border-radius: 2px; }
.u.fr .win::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); }
#app .u.fr .nm { display: block; left: 13%; right: 13%; bottom: 25%; top: auto; max-height: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 max(6px, calc(var(--uw) * .105))/1.1 Cinzel, Georgia, serif; color: #f2e4c4; text-shadow: 0 1px 2px #000; }
.u.fr .st { left: 0; right: 0; top: 75%; height: 15%; width: auto; padding: 0; background: none !important; }
/* Centered on the token's two round sockets (17.7% and 82% across the bottom bar). */
#app .u.fr .st span { position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center;
  font: 900 max(10px, calc(var(--uw) * .19))/1 Cinzel, Georgia, serif; text-shadow: 0 1px 1px #000, 0 0 4px #000; }
.u.fr .st .atk { left: 17.7%; } .u.fr .st .hp { left: 82%; }
.u.fr .atk { color: #f1c766; } .u.fr .hp { color: #f4f1ec; } .u.fr .hp.hurt { color: #ffb48a; }
.u.fr .kw { top: 11%; right: 13%; left: auto; }
.u.fr .back { left: 13%; top: 30%; }
#app .u.fr:hover { transform: translateY(-3px); filter: drop-shadow(0 9px 6px rgba(0, 0, 0, .8)); }
#app .u.fr.can { filter: drop-shadow(0 0 3px #e9c77d) drop-shadow(0 5px 4px rgba(0, 0, 0, .75)); }
#app .u.fr.spent { opacity: .7; filter: grayscale(.55) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } /* exhausted cards lie flatter */
.u.fr.is-guard { border: 0 !important; }
.u.fr.is-guard .frm { filter: drop-shadow(0 -2px 0 #e9d9a8); } /* Guard: a lit top edge instead of the old double border */

/* ---------- tall desktop windows (>= 700 x 1100): full cards in hand, narrow Medium/Far lanes always shown ----------
   game.js bigHand() uses the same thresholds. The hand shows the full card (bigCard) scaled by --hk (set in render,
   card height = min(310px, 26vh)). Medium/Far rows are always visible, locked ones as empty narrow lanes, so the
   layout never jumps when a zone opens; their tokens are 72% of the Close-lane tokens. */
@media (min-height: 1100px) and (min-width: 700px) {
  #app { --uwl: min(clamp(52px, calc((100vh - 690px) / 5.2), 150px), calc((min(100vw, 1120px) - 34px) / 6.4)); --uw: var(--uwl); }
  #app[data-rows] { --uw: var(--uwl); }
  #app .row { --uw: calc(var(--uwl) * .72); }
  #app .row.locked { min-height: calc(var(--uw) * 1.022 + 10px); position: relative; justify-content: flex-start; font-size: inherit; }
  #app .row.locked .lbl, #app .row.locked .slot { opacity: .5; }
  #app .row.locked .lockmsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; padding: 4px 10px; border-radius: 3px;
    background: rgba(20, 26, 22, .88); border: 1px solid #5b5845; font: 11px Arial, sans-serif; letter-spacing: .04em; color: #d2c6ae; }
  #app .row.locked .both { display: none; }

  #app #hand.full { min-height: calc(375px * var(--hk, .8) + 30px); }
  #app .hc.full { width: calc(250px * var(--hk, .8)); height: calc(375px * var(--hk, .8)); border: 0 !important; background: none !important; padding: 0 !important;
    border-radius: 12px; overflow: visible; flex: none; transform-origin: 50% 120%; transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg));
    transition: transform .18s ease-out, filter .18s; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .75)); }
  #app .hc.full::before { display: none; }
  #app .hc.full .bc { zoom: var(--hk, .8); margin: 0; }
  #app .hc.full .ability-strip { display: none; } /* the full card already lists its keywords */
  #app .hc.full.play { filter: drop-shadow(0 0 4px #e4c27f) drop-shadow(0 9px 8px rgba(0, 0, 0, .75)); }
  #app .hc.full.lock { opacity: 1; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .75)) grayscale(.75) brightness(.6); }
  #app .hc.full.lock::after { content: '🔒'; position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%); font-size: calc(60px * var(--hk, .8)); z-index: 4; }
  #app .hc.full:hover, #app .hc.full:focus-visible { z-index: 5; filter: drop-shadow(0 18px 12px rgba(0, 0, 0, .8));
    transform: translateY(-14px) rotate(0deg) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.05); }
  #app .hc.full.play:hover { filter: drop-shadow(0 0 5px #f0d38e) drop-shadow(0 18px 12px rgba(0, 0, 0, .8)); }
  #app .hc.full.sel { z-index: 5; transform: translateY(-16px) rotate(0deg) scale(1.04); outline: none; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 14px 10px #000c); }
}
/* Shorter windows: one merged lock line per side, compact framed hand cards. */
@media not all and (min-height: 1100px) and (min-width: 700px) {
  #app .row.merged { display: none; }
  #app .row.locked .lbl, #app .row.locked .slot { display: none; }
}

/* ---------- aiming arrow + damage preview ---------- */
#aim { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; opacity: 0; transition: opacity .1s; }
#aim.on { opacity: 1; }
#aim .aim-line { fill: none; stroke: #f3d27a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 11; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .9)); animation: aimMarch .5s linear infinite; }
#aim.lock .aim-line { stroke: #ffe9a8; stroke-dasharray: none; stroke-width: 6; }
#aim .aim-dot { fill: #f3d27a; stroke: #3a2a10; stroke-width: 2; }
@keyframes aimMarch { to { stroke-dashoffset: -13; } }
#aimLabel { position: fixed; z-index: 46; pointer-events: none; transform: translate(-50%, -100%); padding: 4px 10px; border-radius: 4px; white-space: nowrap;
  background: rgba(20, 24, 18, .94); border: 1px solid #f3d27a; color: #fff1d3; font: 700 13px Arial, sans-serif; letter-spacing: .03em;
  box-shadow: 0 4px 12px #000c; opacity: 0; transition: opacity .08s; }
#aimLabel.on { opacity: 1; }
#mybar.supply-drop { box-shadow: inset 0 0 0 2px #f3d27a, inset 0 0 22px rgba(243, 210, 122, .25); }
.u .dmgpv { position: absolute !important; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center;
  padding: 2px 7px; border-radius: 4px; background: #5a1d14; border: 1px solid #ff9b85; color: #fff1ea; box-shadow: 0 2px 8px #000c;
  font: 900 max(13px, calc(var(--uw) * .22))/1 Cinzel, Georgia, serif; white-space: nowrap; }
.u .dmgpv small { display: block; font: 700 max(8px, calc(var(--uw) * .1)) Arial, sans-serif; margin-top: 2px; opacity: .9; }
.u .dmgpv.kill { background: #2a0a06; border-color: #ff6a4a; }
.u .dmgpv.heal { background: #22401f; border-color: #9cc786; color: #e4f6d4; }

/* ---------- menu: opponent pick ---------- */
.foes { display: flex; gap: 10px; align-items: center; color: var(--dim); font: 12px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#foePick { display: flex; gap: 8px; }
.foe { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 3px; border: 1px solid #73634a; background: #252d23; color: #f3e8cd;
  font: 700 13px Cinzel, Georgia, serif; text-transform: none; letter-spacing: 0; cursor: pointer; }
.foe img { width: 28px; height: 28px; object-fit: contain; }
.foe.on { border-color: #dfb66d; background: #423d2c; }
.teams { flex-wrap: wrap; justify-content: center; }

/* ---------- battlefield: terrain, sites, morale, stars, doctrines ---------- */
.lane .name .lt { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font: 700 10px Arial, sans-serif; letter-spacing: .02em;
  text-transform: none; background: #2b3a2a; color: #dfe8c0; border: 1px solid #5d6e45; vertical-align: 1px; cursor: help; }
.lane .name .lt.site { background: #3a3220; color: #f3e2b8; border-color: #8a7444; }
.bar .pill.hi { border-color: #e8c27c; color: #fff0cf; box-shadow: 0 0 8px rgba(232, 194, 124, .35); }
.bar .pill.doc { border-color: #8a7444; background: #3a3220; color: #f3e2b8; font: 700 11px Cinzel, Georgia, serif; }
.u .stars { position: absolute !important; left: 13%; top: 11%; z-index: 7; font: 700 max(9px, calc(var(--uw) * .15))/1 Arial, sans-serif; color: #cfd6dd; text-shadow: 0 1px 2px #000; pointer-events: none; }
.u .stars.vet { color: #f3d27a; }
#docbox { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(ellipse at 50% 45%, rgba(10, 12, 10, .6), rgba(5, 6, 5, .88)); }
.docs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.docopt { flex: 1; min-width: 180px; max-width: 240px; display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; border-radius: 4px; cursor: pointer; text-align: left;
  border: 1px solid #8a7444; background: linear-gradient(#3a3220, #262116); color: #f3e8cd; box-shadow: 0 4px 0 #15140f, 0 8px 14px #0008; }
.docopt:hover, .docopt:focus-visible { border-color: #f3d27a; background: linear-gradient(#4a3f26, #2e2819); }
.docopt b { font: 900 17px Cinzel, Georgia, serif; color: #e8c991; }
.docopt span { font: 13px/1.4 Arial, sans-serif; color: #d2c6ae; }

/* ---------- draft mode ---------- */
.menubtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.big.alt { background: linear-gradient(#4d5a3e, #2c3524); border-color: #9cb07a; }
#draft { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 14px; background: linear-gradient(140deg, #141b17f5, #373329fa); }
.dbox { max-width: 860px; }
.dcards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 6px 0 12px; }
.dpick { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; transition: transform .15s, filter .15s; filter: drop-shadow(0 8px 10px #000a); }
.dpick .bc { zoom: var(--dz, .8); margin: 0; }
.dpick:hover, .dpick:focus-visible { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 0 6px #f3d27a) drop-shadow(0 12px 14px #000c); }
@media (max-width: 700px) { .dcards { --dz: .5; gap: 8px; } }
@media (max-height: 820px) { .dcards { --dz: .62; } }

/* ---------- upgrades ---------- */
.u .upg { position: absolute !important; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 7; padding: 2px 6px; border-radius: 3px;
  background: #2e4a2a; color: #e4f6d4; border: 1px solid #9cc786; font: 700 max(10px, calc(var(--uw) * .17)) Arial, sans-serif; box-shadow: 0 2px 6px #000a; pointer-events: none; }
.u .upg-dot { position: absolute !important; left: 9%; top: 9%; z-index: 7; width: max(14px, calc(var(--uw) * .2)); height: max(14px, calc(var(--uw) * .2));
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2e4a2a; color: #e4f6d4; border: 1px solid #9cc786;
  font: 700 max(9px, calc(var(--uw) * .13)) Arial, sans-serif; pointer-events: none; }

/* ---------- block box: the AI attacks, you choose who blocks ---------- */
#blockbox { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 12, 10, .55), rgba(5, 6, 5, .85)); }
.bbox { max-width: 640px; }
.bcols { display: flex; gap: 16px; align-items: flex-start; justify-content: center; text-align: left; }
.batt { flex: none; text-align: center; }
.batt .bc { zoom: .62; margin: 0; }
.bcap { font: 700 11px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #e2a292; margin-bottom: 4px; }
.bopts { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.bopt { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 4px; cursor: pointer; text-align: left;
  border: 1px solid #73634a; background: #2b3027; color: #f3e8cd; box-shadow: 0 3px 0 #15140f, 0 6px 10px #0008; }
.bopt:hover, .bopt:focus-visible { border-color: #e8c27c; background: #3a3d2e; }
.bopt .bmini { flex: none; width: calc(250px * .3); height: calc(375px * .3); overflow: hidden; border-radius: 5px; }
.bopt .bmini .bc { zoom: .3; margin: 0; }
.btxt { display: flex; flex-direction: column; gap: 3px; font: 13px/1.35 Arial, sans-serif; }
.btxt b { font: 700 14px Cinzel, Georgia, serif; color: #e8c991; }
.btxt .bad { font: inherit; color: #ff9b85; } .btxt .good { font: inherit; color: #b9e39c; }
.bopt.take { background: #3a2a22; border-color: #8a5a44; padding-left: 14px; min-height: 52px; }
@media (max-width: 520px) { .bcols { flex-direction: column; align-items: stretch; } .batt .bc { zoom: .45; } .batt { align-self: center; } }

/* ---------- hover preview: the full card pops up beside the hovered card (mouse only) ---------- */
#peek { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .12s ease-out, transform .12s ease-out; }
#peek.on { opacity: 1; transform: none; }
#peek .bc { margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(232, 201, 145, .35); }
@media (hover: none) { #peek { display: none; } } /* touch screens keep tap-to-open */

/* ---------- enemy hand: a fan of card backs ---------- */
.foe-hand { display: inline-flex; align-items: center; gap: 6px; padding-top: 3px !important; padding-bottom: 3px !important; }
.foe-hand .backs { display: inline-flex; }
.foe-hand .backs img { width: 15px; height: 21px; margin-left: -9px; filter: drop-shadow(0 1px 1px #000); }
.foe-hand .backs img:first-child { margin-left: 0; }
.foe-hand .backs img:nth-child(odd) { transform: rotate(-6deg); } .foe-hand .backs img:nth-child(even) { transform: rotate(5deg); }
.foe-hand b { font: 700 13px Cinzel, Georgia, serif; }

/* ---------- opening hand box ---------- */
#mull { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 12, 10, .72), rgba(5, 6, 5, .92)); }
.mbox { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 18px 16px 14px; text-align: center; border-radius: 6px;
  background: linear-gradient(#323729, #1c201b); border: 2px solid #c5a168;
  box-shadow: 0 24px 70px #000d, inset 0 1px 0 rgba(255, 240, 200, .18), inset 0 0 0 1px #000a; }
.mbox h2 { margin: 0 0 6px; font: 900 22px Cinzel, Georgia, serif; color: #e8c991; letter-spacing: .04em; }
.mbox p { margin: 0 auto 12px; max-width: 420px; font: 13px/1.45 Arial, sans-serif; color: #d2c6ae; }
.mcards { --hw: min(120px, 26vw, 15vh); display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 18px 16px; padding: 10px 0 16px; perspective: 900px; }
#app .mcards .hc.fr { --rot: 0deg; --lift: 0px; }
#app .mcards .hc.fr.back { transform: translateY(8px) rotate(-4deg) scale(.92); filter: grayscale(.7) brightness(.55) drop-shadow(0 4px 4px #000a); }
#app .mcards .hc.fr.back:hover { transform: translateY(4px) rotate(-2deg) scale(.95); }
.mcards .rtn, .mcards .new { position: absolute !important; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 6;
  font: 700 12px Cinzel, Georgia, serif; letter-spacing: .06em; padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
.mcards .rtn { background: #5a2418; color: #ffe3cf; border: 1px solid #e08a6a; box-shadow: 0 2px 6px #000a; }
.mcards .new { top: 62%; transform: translate(-50%, -50%); background: #2e4a2a; color: #e4f6d4; border: 1px solid #9cc786; }
#app .mcards .hc.fr.fresh { filter: drop-shadow(0 0 4px #9cc786) drop-shadow(0 7px 6px rgba(0, 0, 0, .75)); }
.macts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.macts button { min-width: 150px; padding: 11px 16px; border-radius: 3px; border: 1px solid #73634a; background: #34382f; color: #f3e8cd;
  font: 700 13px Arial, sans-serif; letter-spacing: .04em; cursor: pointer; box-shadow: 0 3px 0 #15140f, 0 6px 10px #0008; }
.macts button.go { background: linear-gradient(#a47a3c, #674820); border-color: #e8c27c; color: #fff0cf; text-transform: uppercase; letter-spacing: .08em; }
.macts button:active { transform: translateY(2px); box-shadow: 0 1px 0 #15140f, 0 3px 6px #0008; }
.macts button:disabled { opacity: .4; cursor: default; transform: none; }
.mfoot { margin-top: 10px; font: 11px Arial, sans-serif; color: #a39a84; }

/* Deal-in: each card starts face down (the card back) and flips over, one after another. */
#mull.deal .mc { animation: dealIn .5s cubic-bezier(.2, .8, .3, 1.1) backwards; animation-delay: var(--d, 0ms); }
#mull.deal .mc::before { content: ''; display: block !important; position: absolute; inset: 0; z-index: 7; border-radius: 6px;
  background: url(art/ui/card-back.webp) center/100% 100% no-repeat; opacity: 0; animation: backOff .5s linear both; animation-delay: var(--d, 0ms); pointer-events: none; }
@keyframes dealIn { 0% { opacity: 0; transform: translateY(46px) rotateY(180deg) scale(.8); } 30% { opacity: 1; } 100% { transform: none; } }
@keyframes backOff { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (max-width: 420px) {
  .mbox { padding: 14px 10px 12px; }
  .mcards { gap: 14px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .hc.fr, #app .hc.fr:hover, #app .hc.fr.sel, #app .mcards .hc.fr.back { transform: none !important; }
  #mull.deal .mc::before { display: none !important; }
}