/* The game UI is not text-selectable — no stray blue highlight on the gold chrome.
   Only the things worth copying stay selectable: chat, card text, and form fields. */
body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, [contenteditable], .co-msgs, .idesc, .bk-desc, .bk-name, [data-selectable] {
  -webkit-user-select: text; user-select: text;
}
::selection { background: rgba(231,198,107,.30); color: #fff7e0; }

:root {
  --bg: #0a0a0c;
  --panel: #141418;
  --line: #2a2a33;
  --gold: #e7c66b;
  --gold-dim: #8c7a3f;
  --p0: #4aa3ff;
  --p1: #ff5d6c;
  --txt: #e8e8ec;
  --muted: #888;
  --atk: #ffcf6b;
  --def: #7fd1a0;
  /* ── ONE button identity (used by .btn/.btn-primary/.btn-pill + the base
     button below). Tweak the look in ONE place and every page follows. ── */
  --btn-radius: 10px;
  --btn-pad: 9px 16px;
  --btn-gold: linear-gradient(180deg, #f0d488, #c8a04a);   /* the primary gold fill */
  --btn-gold-hi: linear-gradient(180deg, #f7e3a0, #d6ab53); /* hover */
  --btn-dark: linear-gradient(160deg, #241c10, #14100a);    /* secondary (dark gold-trim) */
  --btn-dark-hi: linear-gradient(160deg, #2e2415, #1a140c);
  --btn-ink: #1a1408;                                        /* text on gold */
  --btn-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(231,198,107,.08);
  --btn-shadow-gold: 0 8px 22px rgba(231,198,107,.32), inset 0 1px 0 rgba(255,245,210,.6);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -10%, #16161d, var(--bg));
  color: var(--txt);
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* ── shared HUD bar ── a subtle game-header lift used by every page that loads
   only style.css (leaderboard / book / chat / replay / menu). game.css overrides
   this with !important on game.html + cards.html, so this never fights those;
   play.html's fitscreen header keeps its own padding/flex (set later). Kept
   light: a faint depth gradient, a soft shadow, and a fading gold underline. */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  position: relative;
  background: linear-gradient(180deg, rgba(231,198,107,.045), rgba(0,0,0,0) 70%);
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
}
/* fading gold underline (over the plain border) + a centered filigree glow */
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 22%, var(--gold) 50%, var(--gold-dim) 78%, transparent);
  opacity: .55; pointer-events: none;
}
header h1 { font-size: 15px; margin: 0; letter-spacing: .12em; color: var(--gold); font-weight: 700;
  font-family: "Cinzel", "Segoe UI", serif;
  text-shadow: 0 0 14px rgba(231,198,107,.22); }
/* shared masthead wordmark: the $YUGIOH brand reads identically on every page
   (bright Cinzel gold), with the page name as a dimmer engraved suffix after a
   thin gold separator — matching the main-menu identity. */
header h1 .wm { color: var(--gold); font-weight: 900; text-shadow: 0 0 16px rgba(231,198,107,.4), 0 2px 0 #6b4a1a; }
header h1 .sep { color: var(--gold-dim); margin: 0 .5em; opacity: .8; font-weight: 400; }
header h1 .pg { color: #cdb98a; font-weight: 700; letter-spacing: .14em; }

/* ── shared "the Eye watches" identity layer ──────────────────────────────
   A single faint centered Wedjat behind the content — the SAME canonical eye
   as the menu / shop / curtain / icons — so book, leaderboard and the replay
   theater all share the menu's watched-over soul instead of feeling like plain
   pages. Fixed + pointer-events:none + behind everything = zero layout impact,
   honours the responsive model. Reduced-FX leaves it (it's static anyway). */
body.eye-watermark::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20220%20140'%3E%3Cg%20fill='none'%20stroke='%23e7c66b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%2070%20Q110%2014%20202%2070%20Q110%20126%2018%2070%20Z'/%3E%3Cpath%20d='M22%2050%20Q110%2010%20198%2052'%20opacity='.7'/%3E%3Ccircle%20cx='110'%20cy='70'%20r='28'/%3E%3Ccircle%20cx='110'%20cy='70'%20r='11'%20fill='%23e7c66b'%20stroke='none'/%3E%3Cpath%20d='M96%20120%20L86%20138'/%3E%3Cpath%20d='M120%20118%20q22%202%2020%2022'/%3E%3C/g%3E%3C/svg%3E")
    center 42% / min(620px, 64vmin) auto no-repeat fixed;
  opacity: .05;
}
header .meta { color: var(--muted); font-size: 11px; }
/* HUD nav links (MENU / All Cards) get a faint gold hover wash */
header .hud-link { transition: text-shadow .14s ease, opacity .14s ease; }
header .hud-link:hover { text-shadow: 0 0 12px rgba(231,198,107,.5); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 14px; }
/* economy app (game.html mounts #app.wrap): widen to use the empty horizontal
   space so the card/sealed-pack grids reflow to more per row. max-width only
   caps — never forces — so it still collapses at small/narrow/vertical sizes
   and the mobile breakpoint padding override still applies. */
#app.wrap { max-width: min(1600px, 94vw); }

/* ── player info / LP ── */
.pinfo { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.pinfo .who { font-weight: 700; min-width: 130px; }
.pinfo.p0 .who { color: var(--p0); }
.pinfo.p1 .who { color: var(--p1); }
.lpbar { flex: 1; height: 14px; background: #1c1c22; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; position: relative; }
.lpfill { height: 100%; transition: width .25s ease; }
.p0 .lpfill { background: linear-gradient(90deg, #1d5fa8, var(--p0)); }
.p1 .lpfill { background: linear-gradient(90deg, #a83d46, var(--p1)); }
.lpnum { min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.counts { color: var(--muted); font-size: 11px; min-width: 150px; text-align: right; }

/* ── board ── */
.board { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 7px 0; }
.row.field { grid-template-columns: 64px repeat(5, 1fr) 64px; }
.slot {
  aspect-ratio: 59/86; border: 1px dashed #33333d; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; padding: 3px; text-align: center; min-height: 78px;
  background: #101015;
}
.slot.occupied { border-style: solid; border-color: var(--gold-dim); background: #1a1812; }
.slot.def { background: #12161a; }
.slot.def.occupied { border-color: #3f6a52; }
.slot .nm { font-size: 10px; line-height: 1.15; font-weight: 600; overflow: hidden; max-height: 38px; }
.slot .st { font-size: 9px; color: var(--muted); letter-spacing: .1em; }
.slot .ad { font-size: 10px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.slot .ad .a { color: var(--atk); } .slot .ad .d { color: var(--def); }
/* current stat differs from the printed base: green = buffed, red = weakened */
.slot .ad .up { color: #6dd06d; font-weight: 800; text-shadow: 0 0 5px rgba(109,208,109,.6); }
.slot .ad .down { color: #ff6b6b; font-weight: 800; text-shadow: 0 0 5px rgba(255,107,107,.6); }
.slot.facedown { background: repeating-linear-gradient(45deg, #2a2212, #2a2212 6px, #1f1a0e 6px, #1f1a0e 12px); border-color: #6b5430; }
.slot.facedown .st { color: #cdb98a; }
.slot.attacker { outline: 2px solid var(--gold); }
.slot.target { outline: 2px solid var(--p1); }
.slot .pill { position: absolute; top: 3px; right: 4px; font-size: 8px; color: var(--muted); }
.endcap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; color: var(--muted); }
.endcap b { color: var(--txt); font-size: 14px; }

/* ── center strip ── */
.center { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px; margin: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.center .turn { color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.center .phase { background: #1c1c22; border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px; }
.center .chain { color: var(--p1); font-weight: 600; }
.center .atk { color: var(--gold); }

/* hand */
.hand { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 2px; min-height: 30px; }
.card-mini { font-size: 10px; padding: 4px 7px; border: 1px solid var(--gold-dim); border-radius: 5px; background: #1a1812; }
.card-mini.back { background: #2a2212; border-color: #6b5430; color: #cdb98a; }

/* controls */
.controls { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }

/* ── ONE GOLD BUTTON SYSTEM ───────────────────────────────────────────────
   The default <button> IS the secondary gold-trim button, so every plain
   button across the app (book nav, replay controls, deck builder, dev tools)
   inherits the game identity instead of the old flat grey "website" look.
   .btn-primary = the gold call-to-action; .btn-pill = a rounded chip.
   Per-page buttons can still override, but they now share these tokens. */
button, .btn {
  background: var(--btn-dark); color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: var(--btn-radius);
  padding: var(--btn-pad); cursor: pointer; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; box-shadow: var(--btn-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}
button:hover, .btn:hover { border-color: var(--gold); background: var(--btn-dark-hi); color: #f6e3a4; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(231,198,107,.16), inset 0 1px 0 rgba(231,198,107,.14); }
button:active, .btn:active { transform: translateY(0) scale(.99); }
button:disabled { opacity: .55; cursor: default; transform: none; filter: grayscale(.3); }
button.primary, .btn-primary {
  background: var(--btn-gold); color: var(--btn-ink); border: 1px solid var(--gold);
  font-weight: 800; box-shadow: var(--btn-shadow-gold);
}
button.primary:hover, .btn-primary:hover { background: var(--btn-gold-hi); color: var(--btn-ink); filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(231,198,107,.4), inset 0 1px 0 rgba(255,245,210,.7); }
.btn-pill { border-radius: 22px; padding: 8px 20px; }
button.primary.btn-pill, .btn-primary.btn-pill { border-radius: 22px; }
.controls .scrub { flex: 1; }
.controls .pos { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 110px; text-align: right; }
input[type=range] { accent-color: var(--gold); }

/* log */
.log { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; height: 150px; overflow: auto; padding: 8px 10px; font: 11px/1.5 ui-monospace, "Cascadia Code", monospace; }
.log .l { color: #bdbdc6; }
.log .l.cur { color: var(--gold); }
.log .l.evt-win { color: var(--p1); font-weight: 700; }
.log .l.evt-chain { color: #c9a6ff; }
.log .l.evt-damage { color: var(--atk); }
.log .l.evt-turn { color: var(--gold); }
.winner-banner { text-align: center; padding: 10px; margin-top: 10px; border-radius: 8px; background: #1a1812; border: 1px solid var(--gold-dim); color: var(--gold); font-weight: 700; letter-spacing: .08em; display: none; }
.winner-banner.show { display: block; }

/* ── live play: prompt panel ── */
.prompt { margin-top: 12px; background: linear-gradient(165deg, #1a160e, #110d08); border: 1px solid var(--gold-dim); border-radius: 10px; padding: 12px 14px; min-height: 60px; }
.prompt.idle { opacity: .55; border-color: var(--line); }
.prompt-title { font-weight: 700; color: var(--gold); margin-bottom: 8px; letter-spacing: .03em; }
.prompt-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-choices button { background: linear-gradient(160deg, #2a2412, #16120b); border: 1px solid var(--gold-dim); color: #e8ddc4; padding: 9px 14px; border-radius: 8px; font-size: 13px; transition: transform .1s ease, background .1s ease, border-color .1s ease;
  /* long labels (full SELECT_OPTION mode text) WRAP inside the panel instead of
     overflowing or clipping — two distinct modes must stay fully readable. */
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.prompt-choices button:hover { background: linear-gradient(180deg, #f0d488, #c8a04a); color: #1a1408; border-color: var(--gold); transform: translateX(2px); }

/* ── game-styled gold scrollbars across the duel chrome (was plain OS bars) ── */
.log, .prompt, .prompt-choices, .inspect, .duel-side, .idesc { scrollbar-width: thin; scrollbar-color: #6b5430 #14110b; }
.duel-side *::-webkit-scrollbar, .log::-webkit-scrollbar, .prompt-choices::-webkit-scrollbar { width: 9px; height: 9px; }
.duel-side *::-webkit-scrollbar-track, .log::-webkit-scrollbar-track { background: rgba(20,17,11,.6); border-radius: 8px; }
.duel-side *::-webkit-scrollbar-thumb, .log::-webkit-scrollbar-thumb { background: linear-gradient(#7a6136, #4a3a1e); border-radius: 8px; border: 2px solid rgba(20,17,11,.6); }
.duel-side *::-webkit-scrollbar-thumb:hover, .log::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
.prompt.waiting-ai .prompt-title::after { content: " ⏳"; }

/* ── boss select overlay ── */
.select-overlay { position: fixed; inset: 0; background: rgba(6,6,9,.92); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; z-index: 50; }
.select-overlay.hidden { display: none; }
.select-box { text-align: center; padding: 30px 40px; margin: auto; }
.select-box h2 { color: var(--gold); letter-spacing: .1em; margin: 0 0 22px; font-weight: 700; }
.boss-list { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* AI difficulty picker on the opponent-select screen */
.diffbar { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; margin-bottom: 12px; flex-wrap: wrap; }
.diff-lbl { color: var(--muted); font-size: 13px; letter-spacing: .08em; margin-right: 4px; }
.diff-opt { cursor: pointer; font-size: 13px; padding: 6px 14px; border-radius: 20px; color: #cdb98a; background: linear-gradient(#241c10, #15110a); border: 1px solid var(--gold-dim); transition: .12s; }
.diff-opt.on { color: #1a1408; background: linear-gradient(180deg, #f0d488, #c8a04a); border-color: var(--gold); font-weight: 700; }
.diff-opt:hover { border-color: var(--gold); }
.boss-card { width: 180px; padding: 20px 16px; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 12px; cursor: pointer; transition: .15s; }
.boss-card:hover { border-color: var(--gold); background: #1a1812; transform: translateY(-3px); }
.boss-card .bn { font-size: 18px; font-weight: 700; color: var(--txt); letter-spacing: .05em; }
.boss-card .bb { font-size: 12px; color: var(--gold); margin-top: 8px; }
/* battle-mode cards (VS AI / Casual / Ranked / Friend) */
.mode-card { width: 200px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mode-card .mode-ico { font-size: 42px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.mode-card .mode-ico .mode-portrait { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 2px solid var(--gold-dim); box-shadow: 0 2px 12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(231,198,107,.2); background: #0c0a07; transition: border-color .14s; }
.mode-card:hover .mode-ico .mode-portrait { border-color: var(--gold); }
.mode-card .bn { font-family: "Cinzel", serif; letter-spacing: .12em; color: var(--gold); }
.mode-card .bb { color: #b8a478; }
.mode-card.locked { opacity: .5; cursor: default; }
.mode-card.locked:hover { border-color: var(--gold-dim); background: var(--panel); transform: none; }
.mode-card.locked .bn { color: #8f7a55; }

/* ── interactive cards + timer ── */
.slot.clickable, .card-mini.clickable { cursor: pointer; outline: 2px solid var(--gold); outline-offset: 1px; animation: clickpulse 1.3s ease-in-out infinite; }
.card-mini.clickable { background: #2a2410; }
.slot.clickable:hover, .card-mini.clickable:hover { background: var(--gold); color: #1a1408; }
@keyframes clickpulse { 0%,100% { outline-color: var(--gold); } 50% { outline-color: rgba(231,198,107,.35); } }
/* RESPONSE WINDOW (trap / quick-effect): the cards you can act on glow hot & pulse,
   so in the fast 5s clock your eye snaps straight to what you can activate. */
body.respond-now .slot.clickable, body.respond-now .card-mini.clickable {
  outline-color: #ff6a3c; box-shadow: 0 0 16px rgba(255,95,55,.85), 0 0 5px rgba(255,95,55,.9);
  animation: respondPulse .55s ease-in-out infinite;
}
@keyframes respondPulse { 0%,100% { outline-color:#ff6a3c; box-shadow: 0 0 14px rgba(255,95,55,.8); } 50% { outline-color:#ffb347; box-shadow: 0 0 28px rgba(255,120,60,1); } }
.prompt-timerbar { height: 4px; background: #221d30; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.prompt-timer { height: 100%; width: 100%; background: linear-gradient(90deg, var(--p1), var(--gold)); transition: width .1s linear; }
/* quick response window: a hotter, pulsing bar so the short clock reads as urgent */
.prompt-timerbar:has(.prompt-timer.quick) { height: 6px; box-shadow: 0 0 10px rgba(255,90,60,.6); }
.prompt-timer.quick { background: linear-gradient(90deg, #ff3b2f, #ff9d3b); animation: quickPulse .6s ease-in-out infinite; }
@keyframes quickPulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
.prompt-hint { margin-top: 9px; font-size: 11px; color: var(--muted); font-style: italic; }
.prompt.idle .prompt-hint { display: none; }

/* ── duel board card art ── */
.slot.hasart { padding: 0; overflow: hidden; }
.slotart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.hasart .pill, .slot.hasart .ad { position: absolute; z-index: 2; }
.slot.hasart .pill { top: 2px; right: 3px; background: rgba(0,0,0,.65); padding: 0 4px; border-radius: 3px; color: #fff; }
.slot.hasart .ad { bottom: 0; left: 0; right: 0; text-align: center; background: rgba(0,0,0,.7); font-size: 10px; padding: 1px 0; }
.card-mini.hasart { padding: 0; border: none; width: 48px; background: none; }
.card-mini.hasart .cart { width: 48px; aspect-ratio: 59/86; object-fit: cover; border-radius: 4px; display: block; }
.card-mini.hasart.clickable { outline: 2px solid var(--gold); }

/* attack/effect target highlight (red) */
.slot.targetable { outline: 2px solid var(--p1) !important; animation: tgtpulse 1s ease-in-out infinite; }
.slot.targetable:hover { background: var(--p1); }
@keyframes tgtpulse { 0%,100% { outline-color: var(--p1); } 50% { outline-color: rgba(255,93,108,.4); } }

/* multi-select chosen target */
.slot.selected { outline: 3px solid var(--gold) !important; box-shadow: 0 0 12px var(--gold); }

/* counter / equip badges on board cards */
.cbadge, .ebadge { position: absolute; left: 3px; z-index: 3; }
/* the counter TOKEN: a classic circular gold chip with the count, sitting on the card */
.cbadge {
  top: 3px; display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #4a2f00; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background: radial-gradient(circle at 34% 28%, #ffe9a8 0%, #f0c560 38%, #d99a23 78%, #ab6f12 100%);
  border: 1.5px solid #fff0c0;
  box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(120,75,0,.55), 0 0 6px rgba(255,200,90,.45);
}
.ebadge { top: 25px; font-size: 9px; padding: 1px 4px; border-radius: 4px; background: rgba(0,0,0,.75); color: #9fd1ff; }

/* ── Phase D: battle juice ── */
.slot.lunge-up { animation: lungeUp .45s cubic-bezier(.3,1.4,.5,1); z-index: 5; }
.slot.lunge-down { animation: lungeDown .45s cubic-bezier(.3,1.4,.5,1); z-index: 5; }
@keyframes lungeUp { 30% { transform: translateY(-26px) scale(1.06); } 100% { transform: none; } }
@keyframes lungeDown { 30% { transform: translateY(26px) scale(1.06); } 100% { transform: none; } }
.slot.hit-shake, .pinfo.hit-shake { animation: hitShake .45s ease; }
@keyframes hitShake { 15%,45%,75% { transform: translateX(-5px); } 30%,60%,90% { transform: translateX(5px); } }
/* summon SLAM: the card drops onto the mat and lands with weight */
.slot.summon-pop { animation: summonSlam .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes summonSlam {
  0% { transform: translateY(-52px) scale(1.22); opacity: 0; }
  50% { transform: translateY(0) scale(.95); opacity: 1; }
  72% { transform: scale(1.05); }
  100% { transform: none; }
}
/* impact burst: ring + sparks + flash, injected on summon landings & attack hits */
.impact { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.impact .flash { position: absolute; inset: 0; border-radius: 8px;
  background: radial-gradient(circle, rgba(255,240,200,.85), transparent 65%); animation: impFlash .35s ease-out forwards; }
.impact.hit .flash { background: radial-gradient(circle, rgba(255,150,90,.9), transparent 65%); }
@keyframes impFlash { to { opacity: 0; } }
.impact .ring { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(231,198,107,.8);
  transform: translate(-50%,-50%) scale(.25); animation: impRing .5s ease-out forwards; }
.impact.hit .ring { border-color: #ff6b4a; box-shadow: 0 0 18px rgba(255,107,74,.85); }
@keyframes impRing { to { transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }
.impact .sp { position: absolute; left: 50%; top: 50%; width: 5px; height: 15px; border-radius: 3px;
  background: linear-gradient(var(--gold), transparent); animation: impSpark .5s ease-out forwards; }
.impact.hit .sp { background: linear-gradient(#ffb24a, transparent); }
@keyframes impSpark {
  0% { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-10px); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--a)) translateY(-48px); opacity: 0; }
}
.lp-float { position: absolute; top: -6px; font-weight: 800; font-size: 15px; pointer-events: none; animation: lpFloat 1.25s ease-out forwards; }
.lp-float.dmg { color: var(--p1); text-shadow: 0 0 8px rgba(255,93,108,.6); }
.lp-float.heal { color: var(--def); }
@keyframes lpFloat { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
/* rolling LP counter — the number scales + flashes red on damage (Reduced-FX gated in JS) */
.lp-hit { display: inline-block; animation: lpHit .5s ease-out; }
@keyframes lpHit { 0% { transform: scale(1); } 28% { transform: scale(var(--lp-punch, 1.2)); text-shadow: 0 0 14px #ff4d4d; } 100% { transform: scale(1); } }

/* ── Phase D(2): grave ghost, draw slide, chain flash, toasts ── */
.slot .ghost { position: absolute; inset: 0; z-index: 4; animation: ghostOut .7s ease forwards; pointer-events: none; }
.slot .ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
@keyframes ghostOut { 0% { opacity: .95; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(14px) scale(.85); filter: grayscale(1) brightness(.5); } }
/* a destroyed SET card dies the authentic way: it flips face-up in DEFENSE
   orientation (rotated 90° like a real set monster — `--defrot`) → holds the
   reveal in colour → turns GREY in place (the "destroyed" beat) → then slides
   away to the graveyard. So an attacked face-down monster shows what it was and
   visibly dies, instead of just vanishing. `--defrot` is 90deg for a set monster
   (set monsters are always face-down DEFENSE) and 0deg for a face-up card. */
/* `--defrot` rotates the card to DEFENSE orientation (90° for a set monster) and
   `--defscale` is the matching fit-down (.686, same as `.slot.def .slotart`) so the
   portrait art doesn't overflow when laid sideways — without it a rotated card
   reads as vertically stretched (the same trap the flip animation documents). */
.slot .ghost.reveal-fade { --defrot: 90deg; --defscale: .686; animation: ghostReveal 1.25s ease both; transform-origin: 50% 50%; }
@keyframes ghostReveal {
  /* edge-on, rotated to defense */
  0%   { opacity: 0; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(85deg) scale(calc(var(--defscale) * .97)); filter: none; }
  /* flipped fully open, face-up in defense, full colour */
  20%  { opacity: 1; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(0deg) scale(var(--defscale)); filter: none; }
  /* hold the reveal so you read what it was */
  44%  { opacity: 1; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(0deg) scale(var(--defscale)); filter: none; }
  /* GO GREY in place — the destroyed beat (distinct, before it leaves) */
  64%  { opacity: 1; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(0deg) scale(calc(var(--defscale) * .97)); filter: grayscale(1) brightness(.55); }
  /* hold the grey corpse a touch */
  78%  { opacity: .92; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(0deg) scale(calc(var(--defscale) * .95)); filter: grayscale(1) brightness(.5); }
  /* then slide/fade off to the graveyard, still grey */
  100% { opacity: 0; transform: perspective(460px) rotateZ(var(--defrot)) rotateY(0deg) translateY(18px) scale(calc(var(--defscale) * .82)); filter: grayscale(1) brightness(.45); }
}
.card-mini.draw-in { animation: drawIn .35s cubic-bezier(.2,1.2,.4,1) both; }
/* a drawn card flies in and SETTLES INTO its fan slot (rotate/arc), not flat —
   the 100% state matches the resting fan transform (see ~"your hand FANS" rule)
   so there's no pop when JS strips the class afterwards. */
@keyframes drawIn {
  0%   { opacity: 0; transform: rotate(calc(var(--fan, 0deg) + 6deg)) translateY(var(--arc, 0px)) translateX(26px) translateY(-10px); }
  100% { opacity: 1; transform: rotate(var(--fan, 0deg)) translateY(var(--arc, 0px)) translateX(0px) translateY(0px); }
}
.center .chain.chain-flash { animation: chainFlash .9s ease; }
@keyframes chainFlash { 0%,60% { color: #fff; text-shadow: 0 0 12px #c9a6ff; } 100% { color: var(--p1); text-shadow: none; } }
#toasts { position: fixed; top: 54px; right: 14px; z-index: 90; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: rgba(16,16,22,.95); border: 1px solid var(--gold-dim); border-left-width: 4px; color: var(--txt); padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 18px rgba(0,0,0,.5); animation: toastIn .25s ease; max-width: 280px; }
.toast.t-chain { border-left-color: #c9a6ff; }
.toast.t-dmg { border-left-color: var(--p1); }
.toast.t-hint { border-left-color: #7fd6ff; }
.toast.out { transition: .45s; opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* BECOME_TARGET reticle — a ring that pulses on a targeted slot before resolution */
.slot.targeted { outline: 3px solid #ffd166; outline-offset: -1px; box-shadow: 0 0 14px 3px rgba(255,209,102,.7), inset 0 0 12px rgba(255,209,102,.35); border-radius: 6px; animation: tgtPulse .45s ease-in-out 0 2 alternate; z-index: 4; }
@keyframes tgtPulse { from { box-shadow: 0 0 6px 1px rgba(255,209,102,.5), inset 0 0 6px rgba(255,209,102,.2); } to { box-shadow: 0 0 18px 5px rgba(255,209,102,.85), inset 0 0 16px rgba(255,209,102,.45); } }
body.fxreduced .slot.targeted { animation: none; }

/* counter badge pop when a counter is added/removed */
.cbadge.cpop { animation: cPop .4s ease; }
@keyframes cPop { 0% { transform: scale(1); } 35% { transform: scale(1.7); filter: brightness(1.6); } 100% { transform: scale(1); } }
body.fxreduced .cbadge.cpop { animation: none; }

/* PUBLIC coin/dice toss overlay (Time Wizard, Skull/Graceful Dice, Cup of Ace…) */
.tossoverlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); pointer-events: auto; }
.toss-box { background: linear-gradient(160deg, #211b0e, #14110b); border: 2px solid var(--gold, #e7c66b); border-radius: 16px; padding: 22px 30px; text-align: center; box-shadow: 0 18px 60px rgba(0,0,0,.7), 0 0 40px rgba(231,198,107,.3); animation: tossIn .3s ease; }
.toss-h { font-weight: 800; letter-spacing: .06em; color: var(--gold, #e7c66b); margin-bottom: 12px; font-size: 16px; }
.toss-faces { display: flex; gap: 20px; justify-content: center; align-items: center; }
.toss-faces > b { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; color: #ece3cf; }
.toss-coin, .toss-die { font-size: 46px; line-height: 1; display: inline-block; }
.toss-box:not(.settled) .toss-coin { animation: coinSpin .5s linear infinite; }
.toss-box:not(.settled) .toss-die { animation: dieTumble .4s ease-in-out infinite; }
.toss-box.settled .toss-coin, .toss-box.settled .toss-die { animation: tossSettle .35s ease; }
@keyframes coinSpin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes dieTumble { 0% { transform: rotate(-18deg) translateY(0); } 50% { transform: rotate(18deg) translateY(-6px); } 100% { transform: rotate(-18deg) translateY(0); } }
@keyframes tossSettle { 0% { transform: scale(1.5); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes tossIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
body.fxreduced .toss-coin, body.fxreduced .toss-die { animation: none !important; }

/* ATK/DEF change floater — rises off a buffed/debuffed monster ("+700 ATK" green /
   "−500 DEF" red). Reduced-FX is gated in JS (caller skips spawn), so no anim here
   to neutralize, but keep z-index above the slot art. */
.statfloat { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; align-items: center; white-space: nowrap;
  font-weight: 900; font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); animation: statFloatRise 1.1s ease-out forwards; }
.statfloat .up { color: #5fe08a; }
.statfloat .down { color: #ff6b6b; }
@keyframes statFloatRise { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -2px) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }

/* ── mobile: duel board reflow ── */
@media (max-width: 720px) {
  .wrap { padding: 8px; }
  .row { gap: 4px; margin: 5px 0; }
  .row.field { grid-template-columns: 44px repeat(5, 1fr) 44px; }
  .slot { min-height: 58px; border-radius: 4px; }
  .slot .ad { font-size: 8px; }
  .endcap b { font-size: 12px; }
  .center { gap: 8px; padding: 6px 2px; flex-wrap: wrap; font-size: 12px; }
  .pinfo .who { min-width: 90px; font-size: 12px; }
  .counts { min-width: 0; font-size: 10px; }
  .prompt-choices button { padding: 10px 12px; font-size: 14px; } /* fat-finger friendly */
  .log { height: 110px; }
  .card-mini.hasart, .card-mini.hasart .cart { width: 40px; }
  #toasts { top: 46px; right: 8px; }
  .toast { max-width: 220px; font-size: 12px; }
}

/* ── a11y: visible keyboard focus ── */
button:focus-visible, .slot:focus-visible, .card-mini:focus-visible, .boss-card:focus-visible {
  outline: 3px solid var(--p0) !important; outline-offset: 2px;
}

/* search filter for big choice lists (declare-a-card etc.) */
.choice-filter { width: 100%; margin-bottom: 8px; padding: 9px 12px; background: #101015; border: 1px solid var(--gold-dim); border-radius: 7px; color: var(--txt); font-size: 14px; }
.prompt-choices { max-height: 260px; overflow-y: auto; }

/* card-art picker: SELECT_CARD from off-board piles (graveyard / deck / banished)
   shown as the actual cards instead of "Select X" buttons. */
.cardpick { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-height: 50vh; overflow-y: auto; padding: 4px 2px 6px; margin-bottom: 6px; }
.pickcard { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; padding: 4px; background: #1a1812; border: 1px solid var(--gold-dim); border-radius: 7px; color: var(--txt); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pickcard .cart { width: 60px; aspect-ratio: 59/86; object-fit: cover; border-radius: 4px; display: block; background: #0c0a07; }
.pickcard .pcname { font-size: 10px; line-height: 1.15; text-align: center; max-width: 64px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pickcard:hover { border-color: var(--gold); background: #2a2410; box-shadow: 0 4px 14px rgba(231,198,107,.4); transform: translateY(-3px); }
.pickcard.selected { border-color: var(--gold); outline: 2px solid var(--gold); background: #2a2410; }
.pickcard:focus-visible { outline: 2px solid var(--gold); }
body.respond-now .pickcard { animation: clickpulse 1.3s ease-in-out infinite; }

/* ── duel layout: use the whole screen (board + sidebar) ── */
.duel-wrap { max-width: 1880px; }
.duel-side { display: flex; flex-direction: column; gap: 12px; }
.duel-side .prompt, .duel-side .log { margin-top: 0; }
@media (min-width: 1280px) {
  .duel-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 21vw, 380px); gap: 16px; align-items: start; }
  /* centered mat, ~20% roomier than the classic 770px (align-self centers a
     flex item properly; auto margins would shrink-to-fit instead) */
  .duel-main .board { width: 100%; max-width: 1000px; align-self: center; margin-left: 0; margin-right: 0; }
  .duel-main .pinfo, .duel-main .hand { width: 100%; max-width: 1000px; align-self: center; margin-left: 0; margin-right: 0; }
  .row.field { grid-template-columns: 78px repeat(5, 1fr) 78px; }
  .slot .ad { font-size: 13px; }
  .slot .pill { font-size: 10px; padding: 1px 5px; }
  .cbadge { width: 22px; height: 22px; font-size: 12px; }
  .ebadge { top: 28px; font-size: 11px; }
  /* big hand — cards lift on hover like a real card game */
  .myhand { min-height: 186px; justify-content: center; align-items: flex-end; flex-wrap: nowrap; overflow: visible; }
  .myhand .card-mini.hasart { width: 120px; transition: transform .16s ease; position: relative; }
  .myhand .card-mini.hasart .cart { width: 120px; }
  .myhand .card-mini.hasart:hover { transform: translateY(-30px) scale(1.4); z-index: 30; box-shadow: 0 14px 30px rgba(0,0,0,.7); }
  .duel-side { position: sticky; top: 10px; }
  .duel-side .log { height: 210px; }
}

/* ── card inspector (hover any card) ── */
.inspect { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-height: 248px; display: flex; gap: 14px; }
.inspect-empty { color: var(--muted); font-style: italic; margin: auto; }
.inspect img.iart { width: 152px; aspect-ratio: 59/86; object-fit: cover; border-radius: 8px; flex-shrink: 0; align-self: flex-start; }
.inspect .ibody { min-width: 0; }
.inspect .iname { font-weight: 700; font-size: 16px; color: var(--gold); margin-bottom: 6px; line-height: 1.25; }
.inspect .istats { font-size: 13px; margin-bottom: 8px; }
.inspect .istats .a { color: var(--atk); font-weight: 700; }
.inspect .istats .d { color: var(--def); font-weight: 700; }
.inspect .istats .up { color: #5ed65e; } /* buffed above base */
.inspect .istats .down { color: #ff6a6a; } /* weakened below base */
.inspect .istats .basenote { color: var(--muted); font-size: 11px; font-weight: 400; }
.inspect .imods { font-size: 12px; color: #d8be7c; margin: -2px 0 8px; }
.inspect .idesc { font-size: 12.5px; color: #cfcfd6; line-height: 1.55; max-height: 168px; overflow-y: auto; white-space: pre-wrap; }

/* tighten vertical budget so the whole duel fits 1080p with no scroll */
@media (min-width: 1280px) {
  .duel-wrap { padding: 8px 14px; }
  .board { padding: 10px; }
  .board .row { margin: 5px 0; }
  .row.field { grid-template-columns: 70px repeat(5, 1fr) 70px; }
  .center { padding: 5px; margin: 4px 0; }
  .pinfo { padding: 3px 4px; }
  .myhand { min-height: 168px; }
  .myhand .card-mini.hasart, .myhand .card-mini.hasart .cart { width: 112px; }
  #p1hand { min-height: 24px; padding: 2px; }
}

/* ── card showcase: center-screen splash on activate / big summon / flip ── */
#showcase { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 80; }
.sc-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: scIn .3s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 18px 40px rgba(0,0,0,.85)); }
/* rotating burst rays behind the zoomed card (Legacy-of-the-Duelist energy) */
.sc-rays { position: absolute; left: 50%; top: 50%; width: 620px; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(rgba(231,198,107,.20) 0 8deg, transparent 8deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 66%); mask: radial-gradient(circle, #000 28%, transparent 66%);
  animation: raysSpin 8s linear infinite; }
.sc-activate .sc-rays { background: repeating-conic-gradient(rgba(201,166,255,.22) 0 8deg, transparent 8deg 16deg); }
.sc-flip .sc-rays { background: repeating-conic-gradient(rgba(127,209,160,.20) 0 8deg, transparent 8deg 16deg); }
@keyframes raysSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.sc-card img { width: 280px; aspect-ratio: 59/86; object-fit: cover; border-radius: 12px; }
.sc-card.sc-activate img { box-shadow: 0 0 52px #c9a6ffcc; }
.sc-card.sc-summon img { box-shadow: 0 0 52px #e7c66bcc; }
.sc-card.sc-flip img { box-shadow: 0 0 52px #7fd1a0cc; }
.sc-banner { font-weight: 900; font-size: 20px; letter-spacing: .35em; padding: 5px 20px 5px 24px; border-radius: 7px; color: #0d0d12; }
.sc-activate .sc-banner { background: #c9a6ff; }
.sc-summon .sc-banner { background: var(--gold); }
.sc-flip .sc-banner { background: #7fd1a0; }
.sc-name { font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 2px 8px #000; background: rgba(10,10,14,.8); padding: 3px 14px; border-radius: 6px; }
@keyframes scIn { 0% { opacity: 0; transform: scale(.55) translateY(26px); } 100% { opacity: 1; transform: none; } }
.sc-card.sc-out { animation: scOut .3s ease both; }
@keyframes scOut { to { opacity: 0; transform: scale(1.12); } }

/* ── defense position: card lies sideways (the classic YGO look) ── */
.slot.def.occupied.hasart .slotart { transform: rotate(90deg) scale(.686); }

/* ── 3D flip reveal ── */
.slot.flip-anim { animation: flipIn .5s ease; }
/* perspective is what makes this a real flip — without it rotateY is just a flat
   horizontal squish, which on a sideways DEFENCE card reads as the art being
   stretched vertically mid-flip. */
@keyframes flipIn { 0% { transform: perspective(600px) rotateY(88deg); } 100% { transform: perspective(600px) rotateY(0deg); } }
/* summon ceremonies: a swirling vortex for Fusions, a rune glyph for Rituals (Reduced-FX gated in JS) */
.slot .ceremony { position: absolute; inset: -28%; z-index: 5; pointer-events: none; border-radius: 50%; }
.slot .ceremony.fusion { background: conic-gradient(from 0deg, transparent, rgba(180,120,255,.6), transparent 40%, rgba(120,180,255,.55), transparent 80%); animation: cerFusion .9s ease-out forwards; }
@keyframes cerFusion { 0% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.45) rotate(330deg); } }
.slot .ceremony.ritual { background: radial-gradient(circle, transparent 42%, rgba(255,205,95,.55) 46%, transparent 56%); border: 2px solid rgba(255,210,120,.7); animation: cerRitual 1s ease-out forwards; }
@keyframes cerRitual { 0% { opacity: 0; transform: scale(.4) rotate(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35) rotate(190deg); } }
/* classic TRIBUTE (advance) summon: the monster rises through an expanding gold
   PORTAL — a bold outer ring + an inner second ring (the double ring sets it apart
   from the single Ritual ring) + a vertical glow column rising up through the card.
   No rotation (Ritual spins; this rises) so the two read as different ceremonies. */
.slot .ceremony.tribute { inset: -42%; border: 3px solid rgba(255,214,120,.92);
  box-shadow: 0 0 26px rgba(255,205,95,.75), inset 0 0 22px rgba(255,205,95,.55);
  background: radial-gradient(circle, rgba(255,214,120,.30) 0%, transparent 58%);
  animation: cerTribute 1.1s cubic-bezier(.16,.84,.36,1) forwards; }
.slot .ceremony.tribute .ring2 { position: absolute; inset: 22%; border-radius: 50%;
  border: 2px solid rgba(255,230,160,.85); box-shadow: 0 0 16px rgba(255,214,120,.7);
  animation: cerTribute2 1.1s cubic-bezier(.16,.84,.36,1) forwards; }
.slot .ceremony.tribute .glow { position: absolute; left: 50%; bottom: 0; width: 46%; height: 150%;
  transform: translateX(-50%); border-radius: 50% 50% 12% 12%; pointer-events: none;
  background: linear-gradient(to top, rgba(255,214,120,.7), rgba(255,205,95,.22) 55%, transparent);
  animation: cerTributeGlow 1.1s ease-out forwards; }
@keyframes cerTribute { 0% { opacity: 0; transform: scale(.25); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cerTribute2 { 0% { opacity: 0; transform: scale(.15); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes cerTributeGlow { 0% { opacity: 0; transform: translateX(-50%) translateY(40%) scaleY(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-30%) scaleY(1.2); } }

/* ── phase / turn banner sweep ── */
#phasebanner { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 75; }
.pb { font-size: 46px; font-weight: 900; letter-spacing: .4em; padding: 14px 90px 14px 110px; color: var(--gold);
  background: linear-gradient(90deg, transparent, rgba(10,10,14,.92) 18%, rgba(10,10,14,.92) 82%, transparent);
  text-shadow: 0 0 30px #000, 0 4px 18px rgba(231,198,107,.45); animation: pbSweep 1.15s ease both; white-space: nowrap; }
.pb.enemy { color: var(--p1); text-shadow: 0 0 30px #000, 0 4px 18px rgba(255,93,108,.45); }
@keyframes pbSweep { 0% { opacity: 0; transform: translateX(-70px) skewX(-8deg); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(70px); } }

/* ── attack arrow ── */
#fxlayer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }
.atk-line { stroke: #ff5d6c; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 9px #ff5d6c); stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: arrowDash .4s ease forwards; }
.atk-head { fill: #ff5d6c; filter: drop-shadow(0 0 9px #ff5d6c); animation: scIn .25s ease both; animation-delay: .3s; }
@keyframes arrowDash { to { stroke-dashoffset: 0; } }

/* ── victory / defeat screen ── */
#endscreen { position: fixed; inset: 0; background: radial-gradient(900px 500px at 50% 40%, rgba(30,26,14,.96), rgba(5,5,8,.96)); display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; z-index: 95; animation: scIn .45s ease both; }
#endscreen h2 { font-size: 60px; letter-spacing: .32em; margin: 0 0 0 .32em; font-weight: 900; }
#endscreen.win h2 { color: var(--gold); text-shadow: 0 0 50px rgba(231,198,107,.55); }
#endscreen.lose h2 { color: var(--p1); text-shadow: 0 0 50px rgba(255,93,108,.45); }
#endscreen.draw h2 { color: var(--muted); }
#endscreen .sub { color: #bdbdc6; font-size: 15px; letter-spacing: .08em; }
.end-prog { color: #efe6cf; font-size: 16px; margin-top: 6px; }
.end-prog b { color: var(--gold); }
.end-prog .up { color: #4ade80; font-weight: 700; }
.end-prog .down { color: #ff6b6b; font-weight: 700; }
/* ranked ante card-pick */
.ante-box { margin: 14px auto 4px; max-width: 640px; }
.ante-title { color: var(--gold); font-weight: 800; letter-spacing: .08em; margin-bottom: 10px; }
.ante-title.win { color: #4ade80; } .ante-title.lose { color: #ff8f6c; }
.ante-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 230px; overflow-y: auto; padding: 4px; }
.ante-card { width: 84px; cursor: pointer; border: 2px solid var(--gold-dim); border-radius: 8px; padding: 4px; background: rgba(231,198,107,.05); transition: transform .12s, border-color .12s; }
.ante-card:hover { transform: translateY(-3px) scale(1.05); border-color: var(--gold); box-shadow: 0 8px 20px rgba(231,198,107,.3); }
.ante-card img { width: 100%; aspect-ratio: 59/86; object-fit: cover; border-radius: 5px; display: block; }
.ante-card span { display: block; font-size: 10px; color: #cdb98a; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ante-card.r-god { border-color: #ff5d6c; } .ante-card.r-ultra { border-color: #e7c66b; } .ante-card.r-super { border-color: #7cc7ff; }
.ante-hint { color: var(--muted); font-size: 12px; margin-top: 8px; font-style: italic; }
#endscreen button { margin-top: 14px; font-size: 16px; padding: 12px 30px; }

/* ── premium end screen (gold bloom + spinning rays + crest + champ teaser) ── */
#endscreen.win::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(700px 380px at 50% 42%, rgba(231,198,107,.18), transparent 70%); }
#endscreen.win::after { content: ""; position: fixed; left: 50%; top: 42%; width: 1100px; height: 1100px; transform: translate(-50%,-50%);
  pointer-events: none; z-index: -1; opacity: .55; animation: raysSpin 42s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(231,198,107,.08) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 52%, transparent 76%); mask: radial-gradient(circle, transparent 28%, #000 52%, transparent 76%); }
#endscreen .end-crest { font-size: 54px; line-height: 1; margin-bottom: -8px; filter: drop-shadow(0 0 18px rgba(231,198,107,.5)); animation: crestPop .6s cubic-bezier(.2,1.4,.4,1) both; }
#endscreen.win .end-crest { color: var(--gold); }
#endscreen.lose .end-crest { color: var(--p1); filter: drop-shadow(0 0 18px rgba(255,93,108,.5)); }
@keyframes crestPop { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
#endscreen.win h2 { background: linear-gradient(180deg, #fbe6ad, #d9b257 60%, #9a7426); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 16px rgba(231,198,107,.45)); }
#endscreen .sub { background: rgba(231,198,107,.06); border: 1px solid rgba(231,198,107,.22); border-radius: 999px; padding: 6px 18px; }
.end-champ { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 18px; border: 1px solid var(--gold-dim); border-radius: 12px;
  background: linear-gradient(135deg, rgba(231,198,107,.12), rgba(231,198,107,.03)); box-shadow: inset 0 1px 0 rgba(231,198,107,.12); }
.end-champ .ec-ico { font-size: 18px; filter: drop-shadow(0 0 8px rgba(231,198,107,.6)); }
.end-champ .ec-txt { color: var(--gold); font-family: "Cinzel", serif; font-weight: 800; letter-spacing: .14em; font-size: 14px; }
.end-champ .ec-when { color: #cdb98a; font-size: 12px; letter-spacing: .04em; }
/* generic inline-glyph sizing (so window.IG glyphs size right on pages that don't load game.css, e.g. the duel) */
.tg { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; margin-right: 6px; }
.tg .ygi { width: 1em; height: 1em; }
/* World Championship teaser on the main menu */
.m-champ { display: inline-flex; align-items: center; gap: 12px; margin: 2px auto 6px; padding: 9px 22px; border: 1px solid var(--gold-dim); border-radius: 14px;
  background: linear-gradient(135deg, rgba(231,198,107,.14), rgba(231,198,107,.03)); box-shadow: inset 0 1px 0 rgba(231,198,107,.14), 0 4px 18px rgba(0,0,0,.4); }
.m-champ .mc-ico { font-size: 20px; filter: drop-shadow(0 0 9px rgba(231,198,107,.6)); }
.m-champ .mc-txt { color: var(--gold); font-family: "Cinzel", serif; font-weight: 800; letter-spacing: .16em; }
.m-champ .mc-when { color: #cdb98a; font-size: 12px; letter-spacing: .04em; }
@media (max-width: 520px) { .m-champ { flex-direction: column; gap: 2px; text-align: center; } .m-champ .mc-when { font-size: 11px; } }
.end-btns button.primary { background: linear-gradient(180deg, #f0d488, #c8a04a); color: #1a1408; border: 1px solid var(--gold); font-weight: 800; box-shadow: 0 6px 20px rgba(231,198,107,.3), inset 0 1px 0 rgba(255,245,210,.6); }
.end-btns button:not(.primary) { background: linear-gradient(#2c1806, #1a0e04); color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 10px; transition: transform .12s, box-shadow .12s; }
.end-btns button:not(.primary):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(231,198,107,.18); }

/* face-down cards: striped back on an inner card so defense can lie sideways */
.slot.facedown { background: #101015; }
.fdcard { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #2a2212, #2a2212 6px, #1f1a0e 6px, #1f1a0e 12px);
  border: 1px solid #6b5430; border-radius: 6px; }
.slot.def .fdcard { transform: rotate(90deg) scale(.686); }

/* ════ Power-of-Chaos style reskin (duel page) ════ */

/* playmat board: the duel happens ON a painted arena (real field-spell art).
   Default/PvP gets the wasteland; each boss overrides with their own arena. */
.board {
  background: linear-gradient(rgba(20,16,8,.42), rgba(10,8,4,.58)), url("img/ui/field_wasteland.jpg") center/cover;
  border: 3px solid #7a4a1a;
  box-shadow: inset 0 0 50px rgba(0,0,0,.45), 0 6px 28px rgba(0,0,0,.5);
  position: relative;
}
/* open field (not "in jail"): faint cell separators, cards rest on the mat */
.slot { background: rgba(231,198,107,.035); border: 1px solid rgba(231,198,107,.20); border-radius: 7px; box-shadow: none; }
.slot.occupied { border-color: rgba(231,198,107,.34); background: rgba(231,198,107,.02); }
.slot.def { background: rgba(120,170,140,.06); }
.endcap { background: rgba(20,12,4,.42); border: 1px solid rgba(231,198,107,.18); color: #c9a06a; }
.endcap b { color: var(--gold); }

/* ── deck draw-pile: a real stack of card backs that shrinks as you draw ── */
.deckpile { position: relative; overflow: hidden; }
/* the card-back pile keeps real card proportions (centred in the tall endcap)
   so cover-fit no longer slices the top/bottom off the back art */
.deckpile .dk-stack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 94%; aspect-ratio: 59 / 86; z-index: 0; } /* card-back fills the (now full-width) deck zone, matching a field card */
.deckpile .dk-back { position: absolute; inset: 0;
  background: url("img/ui/back.jpg") center/cover, radial-gradient(circle at 50% 44%, #6b5430 0 16%, #463618 42%, #241a0c 78%), #14100a;
  border: 1px solid #0e0b06; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.6);
  /* layers fan DOWN-RIGHT and stay inside the slot (no top clipping) */
  transform: translate(calc(var(--i) * 1.1px), calc(var(--i) * 1.1px)); }
.deckpile b, .deckpile span { position: relative; z-index: 2; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.deckpile.dk-low .dk-back:last-child { box-shadow: 0 0 8px rgba(231,198,107,.7); }
.deckpile.dk-low b { color: var(--gold); }
.deckpile.dk-last .dk-back:last-child { box-shadow: 0 0 12px rgba(255,120,60,.95); }
.deckpile.dk-last b, .deckpile.dk-empty b { color: #ff6b4a; animation: lpDanger 1s ease-in-out infinite; }
.deckpile.dk-empty { border-color: #ff6b4a; box-shadow: inset 0 0 14px rgba(255,80,60,.4); }
.deckpile.dk-empty span::after { content: " OUT!"; color: #ff6b4a; }
/* graveyard is clickable to view its cards (both players', view-only) */
.gycell.viewable { cursor: pointer; }
.gycell.viewable:hover { outline: 2px solid var(--gold, #e7c66b); outline-offset: 1px; }
/* pile viewer overlay (graveyard contents) */
.pileview { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.68); }
.pv-panel { background: #15110a; border: 1px solid rgba(231,198,107,.45); border-radius: 12px; max-width: min(860px, 92vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 18px 54px rgba(0,0,0,.75); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(231,198,107,.22); color: var(--gold, #e7c66b); font-weight: 700; letter-spacing: .4px; }
.pv-x { background: none; border: 1px solid rgba(231,198,107,.35); color: var(--gold, #e7c66b); border-radius: 6px; cursor: pointer; width: 30px; height: 30px; font-size: 14px; }
.pv-x:hover { background: var(--gold, #e7c66b); color: #1a1408; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: 8px; padding: 16px; overflow-y: auto; justify-content: center; }
.pv-card img { width: 84px; aspect-ratio: 59/86; object-fit: cover; border-radius: 6px; display: block; }
.pv-card[data-code] { cursor: zoom-in; }
.pv-card[data-code]:hover img { outline: 2px solid var(--gold, #e7c66b); }
/* a face-DOWN banished card: shown as a back, no identity, not zoomable */
.pv-card.back { cursor: default; }
.pv-card.back img { opacity: .92; }
.pv-empty { color: var(--muted, #8a7a52); padding: 30px; font-size: 13px; }
/* Banished-pile badge sitting on the GY cell — shown only when something is banished */
.rmbadge { position: absolute; top: 3px; left: 3px; z-index: 3; display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 5px; font-size: 10px; font-weight: 700; line-height: 1.4; color: #d9c79a;
  background: rgba(20,16,8,.92); border: 1px solid var(--gold-dim, #6b5430); border-radius: 8px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.rmbadge:hover { background: var(--gold, #e7c66b); color: #1a1408; border-color: var(--gold, #e7c66b); }
.rmbadge:focus-visible { outline: 2px solid var(--gold, #e7c66b); }
/* your Fusion (Extra) Deck pile is clickable to view */
.extracell.viewable { cursor: pointer; }
.extracell.viewable:hover { outline: 2px solid var(--gold, #e7c66b); outline-offset: 1px; }
/* tap-to-zoom: a card shown big with full art + text */
.cardzoom { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.8); cursor: zoom-out; }
.cz-inner { display: flex; gap: 22px; align-items: center; max-width: 92vw; max-height: 90vh; padding: 18px; }
.cz-art { height: min(78vh, 560px); aspect-ratio: 59/86; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.8); }
.cz-text { max-width: 360px; color: #ece3cf; }
.cz-name { font-weight: 800; font-size: 22px; color: var(--gold, #e7c66b); margin-bottom: 10px; }
.cz-desc { font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 60vh; overflow-y: auto; }
@media (max-width: 640px) { .cz-inner { flex-direction: column; gap: 12px; } .cz-art { height: 58vh; } .cz-text { max-width: 90vw; } }

/* PEEK reveal overlay (A Man with Wdjat & co. — "look at a Set card"). Reuses the
   .cardzoom backdrop; its own column layout with a heading + card(s) + dismiss. */
.peekreveal { z-index: 130; cursor: default; }
.pk-inner { flex-direction: column; gap: 14px; align-items: center; }
.pk-head { font-weight: 800; font-size: 18px; color: var(--gold, #e7c66b); text-align: center; letter-spacing: .03em; text-shadow: 0 0 18px rgba(231,198,107,.4); }
.pk-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 92vw; }
.pk-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pk-art { height: min(56vh, 420px); aspect-ratio: 59/86; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.8), 0 0 30px rgba(231,198,107,.25); }
.pk-name { font-weight: 700; font-size: 15px; color: #ece3cf; text-align: center; max-width: 240px; }
.pk-ad { font-size: 13px; color: #cdb98a; }
.pk-ok { padding: 9px 22px; border-radius: 8px; font-size: 14px; }
.center { border-top: 1px solid #8a5a22; border-bottom: 1px solid #8a5a22; background: rgba(24,13,4,.5); }
.center .phase { background: #241303; border-color: #8a5a22; color: var(--gold); }

/* LCD life points */
.lpnum {
  font-family: "Consolas", ui-monospace, monospace; font-size: 26px; font-weight: 800;
  background: #160c04; border: 2px solid #7a4a1a; border-radius: 8px;
  padding: 3px 14px; min-width: 118px; color: var(--gold);
  text-shadow: 0 0 10px #ff9d2b, 0 0 2px #fff; letter-spacing: 2px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.8);
}
.pinfo.p1 .lpnum { color: #ff7a52; text-shadow: 0 0 10px #ff5d2b, 0 0 2px #fff; }

/* vertical phase strip (DP/SP/M1/BP/M2/EP) on the board's left edge */
.phasestrip { position: absolute; left: -52px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; z-index: 5; }
/* with the left card panel present, the strip gets its own lane at the center
   column's left edge (Power-of-Chaos: card panel | phase strip | field) */
body.fitscreen .duel-main { position: relative; padding-left: 56px; }
body.fitscreen .phasestrip { left: 3px; }
.ph { width: 50px; height: 46px; border-radius: 9px; background: linear-gradient(#2c1806, #1a0e04); border: 2px solid #7a4a1a;
  color: #b08a52; font-weight: 900; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,210,74,.15), 0 3px 8px rgba(0,0,0,.5); user-select: none; }
.ph.cur { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 16px rgba(255,157,43,.55), inset 0 0 8px rgba(255,157,43,.3); }
.ph.click { cursor: pointer; color: #fff; border-color: var(--gold); animation: clickpulse 1.3s ease-in-out infinite; }
.ph.click:hover { background: var(--gold); color: #1a1006; }

/* opponent hand: classic card backs */
.cardback { width: 58px; height: 84px; border-radius: 6px; display: inline-block;
  background: radial-gradient(circle at 50% 44%, #6b5430 0 16%, #463618 42%, #241a0c 78%), #14100a;
  border: 2px solid #0e0b06; box-shadow: inset 0 0 0 3px #8a6f3a, inset 0 0 16px #000, 0 2px 6px rgba(0,0,0,.6); }

/* inspector as a card frame: gold name bar, tan effect box */
.inspect { background: linear-gradient(#3a2410, #241608); border: 2px solid #8a5a22; }
.inspect .iname { background: linear-gradient(#d9b257, #9a7426); color: #1a1006; padding: 4px 10px; border-radius: 5px; text-shadow: none; }
.inspect.spell .iname { background: linear-gradient(#2f9f86, #1d6b5a); color: #eafff8; }
.inspect.trap .iname { background: linear-gradient(#c46a9c, #8f3a6b); color: #ffeaf6; }
.inspect .idesc { background: #e8dcc0; color: #241608; padding: 8px 10px; border-radius: 5px; font-size: 12.5px; }
.inspect .istats { color: var(--gold); }

/* victory spoils (free pack reward) */
.spoils-title { color: var(--gold); font-weight: 800; letter-spacing: .2em; margin-top: 6px; }
.spoils-title.dim { color: var(--muted); font-weight: 600; letter-spacing: .08em; font-style: italic; }
.spoils { display: flex; gap: 12px; margin-top: 4px; }
.spoil { width: 110px; text-align: center; animation: scIn .35s ease both; }
.spoil:nth-child(2){animation-delay:.1s}.spoil:nth-child(3){animation-delay:.2s}.spoil:nth-child(4){animation-delay:.3s}.spoil:nth-child(5){animation-delay:.4s}
.spoil img { width: 110px; aspect-ratio: 59/86; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.7); }
.spoil.r-ultra img { box-shadow: 0 0 22px rgba(231,198,107,.7); }
.spoil.r-super img { box-shadow: 0 0 22px rgba(176,107,255,.6); }
.spoil .sp-name { font-size: 11px; margin-top: 5px; color: #e8e8ec; }

/* ════ PoC presentation pass ════ */

/* cinematic ace summon: speed-lines + huge card + shake */
#cine { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.cine-lines { position: absolute; inset: -20%;
  background: repeating-linear-gradient(180deg, rgba(120,160,255,.0) 0 6px, rgba(140,180,255,.22) 6px 9px, rgba(40,80,200,.12) 9px 14px),
              linear-gradient(180deg, #0b1740, #2a4fae 45%, #dfe9ff 50%, #2a4fae 55%, #0b1740);
  animation: cineScroll .9s linear infinite; }
@keyframes cineScroll { from { transform: translateX(0); } to { transform: translateX(-140px); } }
.cine-card { position: relative; animation: cineCard 2.3s cubic-bezier(.2,1.1,.3,1) both; filter: drop-shadow(0 0 60px rgba(255,230,140,.85)); }
.cine-card img { width: 320px; aspect-ratio: 59/86; object-fit: cover; border-radius: 12px; }
@keyframes cineCard { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.18) rotate(2deg); opacity: 1; } 28% { transform: scale(1); } 82% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.cine-name { position: absolute; bottom: -54px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 26px; font-weight: 900; letter-spacing: .18em; color: #ffe9a8; text-shadow: 0 0 24px #ffb12b, 0 3px 6px #000; }

/* ── GOD TAKEOVER: the three Egyptian Gods get a longer, darker, gold cinematic ── */
#cine.god { background: radial-gradient(circle at 50% 45%, rgba(60,30,0,.25), rgba(0,0,0,.94) 72%); }
.god-veil { position: absolute; inset: 0; background: #000; animation: godVeil 3.2s ease forwards; }
@keyframes godVeil { 0% { opacity: 0; } 14% { opacity: .9; } 78% { opacity: .9; } 100% { opacity: 0; } }
#cine.god .cine-lines { opacity: .45; animation-duration: 1.1s;
  background: repeating-linear-gradient(180deg, rgba(255,205,90,0) 0 6px, rgba(255,215,100,.2) 6px 9px, rgba(170,110,15,.14) 9px 14px),
              linear-gradient(180deg, #160d00, #5a3c00 45%, #ffe9a8 50%, #5a3c00 55%, #160d00); }
#cine.god .cine-card { animation: godRise 3.2s cubic-bezier(.2,1.05,.3,1) both; filter: drop-shadow(0 0 90px rgba(255,200,70,.95)) drop-shadow(0 0 38px rgba(255,120,0,.7)); }
#cine.god .cine-card img { width: 380px; }
#cine.god .cine-name { font-size: 30px; color: #ffe06b; text-shadow: 0 0 30px #ff9b1f, 0 3px 8px #000; }
@keyframes godRise { 0% { transform: scale(.15) translateY(40px); opacity: 0; } 22% { transform: scale(1.28) rotate(1deg); opacity: 1; } 34% { transform: scale(1.08); } 86% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
/* EXODIA OBLITERATE — a gold, pulsing end screen for the five-piece win (reason 16) */
#endscreen.exodia h2 { color: #ffe06b; text-shadow: 0 0 30px #ff9b1f, 0 0 64px #ff7b00, 0 3px 8px #000; animation: exodiaPulse 1s ease 3; }
@keyframes exodiaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.shake-screen { animation: hitShake .5s ease; }
/* damage-scaled global screen shake — amplitude via --shk; Reduced-FX gated in JS */
.dmg-shake { animation: dmgShake .42s ease; }
@keyframes dmgShake {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(calc(var(--shk,4px) * -1), 1px); }
  30% { transform: translate(var(--shk,4px), -1px); }
  45% { transform: translate(calc(var(--shk,4px) * -1), 0); }
  60% { transform: translate(var(--shk,4px), 1px); }
  80% { transform: translate(calc(var(--shk,4px) * -0.5), 0); }
}
/* lethal freeze — the killing blow desaturates + zooms + holds the board (Reduced-FX gated in JS) */
.lethal-freeze { animation: lethalFreeze 1.2s ease forwards; }
@keyframes lethalFreeze {
  0% { filter: none; transform: scale(1); }
  16% { filter: grayscale(.6) brightness(1.5) contrast(1.1); transform: scale(1.06); }
  100% { filter: grayscale(.92) brightness(.72); transform: scale(1.03); }
}

/* ── accessibility: honour the OS "reduce motion" preference AND the manual
   Reduced (calm) toggle. Neutralizes ALL animations/transitions — covers even
   the effects that aren't JS-gated (lunge, summon-pop, banners). Cleanup is
   setTimeout-based, so nothing relies on a real animation duration to finish. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body.fxreduced *, body.fxreduced *::before, body.fxreduced *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* boss speech bubble */
#bubble { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 86; pointer-events: none; }
.bub { background: #fff; color: #111; font-weight: 700; font-size: 16px; padding: 12px 20px; border-radius: 16px; border: 3px solid #222;
  box-shadow: 0 8px 26px rgba(0,0,0,.55); animation: bubIn .25s ease both; max-width: 480px; }
.bub::after { content: ""; position: absolute; left: 40px; bottom: -14px; border: 8px solid transparent; border-top-color: #fff; filter: drop-shadow(0 3px 0 #222); }
.bub .who { color: #b3261e; font-size: 12px; letter-spacing: .15em; display: block; margin-bottom: 2px; }
@keyframes bubIn { from { opacity: 0; transform: translateY(-10px) scale(.92); } to { opacity: 1; transform: none; } }
.bub.out { transition: .3s; opacity: 0; transform: translateY(-8px); }

/* spell/trap screen flash */
#flash { position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0; }
#flash.go-spell { animation: flashGo .5s ease; background: radial-gradient(circle, rgba(120,255,190,.5), rgba(20,120,80,.18) 60%, transparent); }
#flash.go-trap  { animation: flashGo .5s ease; background: radial-gradient(circle, rgba(220,140,255,.5), rgba(110,30,160,.2) 60%, transparent); }
@keyframes flashGo { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* per-boss duel arenas */
body[data-boss="kaiba"] .board {
  background:
    radial-gradient(460px 320px at 50% 50%, rgba(70,130,220,.3), transparent 72%),
    repeating-linear-gradient(45deg, #142a4a 0 3px, #102240 3px 6px),
    linear-gradient(#10223f, #0a1428);
  border-color: #3c6db0; }
body[data-boss="kaiba"] .slot { border-color: #38629e; background: rgba(8,16,30,.6); }
body[data-boss="kaiba"] .slot.occupied { border-color: #7fb0e8; }
body[data-boss="kaiba"] .endcap { border-color: #38629e; background: rgba(8,16,30,.75); color: #8fb4dd; }
body[data-boss="yugi"] .board {
  background:
    radial-gradient(460px 320px at 50% 50%, rgba(140,80,220,.3), transparent 72%),
    repeating-linear-gradient(45deg, #2a1845 0 3px, #221238 3px 6px),
    linear-gradient(#241239, #150a24);
  border-color: #6b4aa8; }
body[data-boss="yugi"] .slot { border-color: #5c3f96; background: rgba(16,8,28,.6); }
body[data-boss="yugi"] .slot.occupied { border-color: #a886e0; }
body[data-boss="yugi"] .endcap { border-color: #5c3f96; background: rgba(16,8,28,.75); color: #b49ade; }
body[data-boss="joey"] .board {
  background:
    radial-gradient(460px 320px at 50% 50%, rgba(220,110,40,.3), transparent 72%),
    repeating-linear-gradient(45deg, #4a1f10 0 3px, #3e180c 3px 6px),
    linear-gradient(#3f1c0c, #240e05);
  border-color: #a85a2a; }
body[data-boss="joey"] .slot { border-color: #96512a; background: rgba(28,12,5,.6); }
body[data-boss="joey"] .slot.occupied { border-color: #e0a070; }
body[data-boss="joey"] .endcap { border-color: #96512a; background: rgba(28,12,5,.75); color: #dda77a; }
body[data-boss="mai"] .slot { border-color: #964278; background: rgba(26,8,22,.6); }
body[data-boss="mai"] .slot.occupied { border-color: #e882c4; }
body[data-boss="mai"] .endcap { border-color: #964278; background: rgba(26,8,22,.75); color: #dd92c2; }
body[data-boss="mai"] .board { border-color: #b04a8e; }
body[data-boss="pegasus"] .slot { border-color: #348a5b; background: rgba(6,20,12,.6); }
body[data-boss="pegasus"] .slot.occupied { border-color: #7fe0a8; }
body[data-boss="pegasus"] .endcap { border-color: #348a5b; background: rgba(6,20,12,.75); color: #8fdcae; }
body[data-boss="pegasus"] .board { border-color: #3da06a; }

/* mute toggle */
#sndBtn { cursor: pointer; user-select: none; }

/* ── real assets: official card back + field-spell art arenas ── */
.cardback, .fdcard {
  background: url("img/ui/back.jpg") center/cover,
    radial-gradient(circle at 50% 44%, #6b5430 0 16%, #463618 42%, #241a0c 78%), #14100a;
}
body[data-boss="kaiba"] .board {
  background: linear-gradient(rgba(8,14,28,.42), rgba(8,14,28,.60)), url("img/ui/field_mountain.jpg") center/cover; }
body[data-boss="yugi"] .board {
  background: linear-gradient(rgba(14,6,24,.42), rgba(14,6,24,.60)), url("img/ui/field_yami.jpg") center/cover; }
body[data-boss="joey"] .board {
  background: linear-gradient(rgba(24,12,4,.40), rgba(24,12,4,.56)), url("img/ui/field_sogen.jpg") center/cover; }
body[data-boss="mai"] .board {
  background: linear-gradient(rgba(26,6,20,.40), rgba(26,6,20,.56)), url("img/ui/field_umi.jpg") center/cover; }
body[data-boss="pegasus"] .board {
  background: linear-gradient(rgba(5,18,10,.40), rgba(5,18,10,.56)), url("img/ui/field_forest.jpg") center/cover; }

/* EDOPro target reticle on targetable cards */
.slot.targetable::after { content: ""; position: absolute; inset: 0; z-index: 6;
  background: url("img/ui/target.png") center/64% no-repeat; animation: tgtSpin 1.6s linear infinite; pointer-events: none; }
@keyframes tgtSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* play page backdrop */
body.duelbg { background: linear-gradient(rgba(8,8,12,.72), rgba(8,8,12,.86)), url("img/ui/bg.png") center/cover fixed; }

/* ════ ONE-SIZE duel: a single fixed design, scaled as ONE unit to fit any
   window. The board looks IDENTICAL at every size (just bigger/smaller) — no
   per-element reflow, no "things shrink at different rates". --fit is computed
   in play.js (fitStage) = min(stageW/--dw, stageH/--dh). ════ */
html, body.fitscreen { height: 100dvh; overflow: hidden; }
body.fitscreen { display: flex; flex-direction: column; }
body.fitscreen header { flex: 0 0 auto; padding: 6px 16px; }

/* the stage centers the fixed board and clips any rounding overflow */
#stage { flex: 1; min-height: 0; position: relative; overflow: hidden; }

body.fitscreen {
  --dw: 1520; --dh: 854;   /* THE design size everyone sees — 16:9 (keep in sync w/ play.js) */
  --slotH: 110px;          /* fixed board-slot height (also = square monster-zone size) */
  --handH: 140px;          /* fixed player-hand card height */
  --oppH: 92px;            /* fixed opponent-hand card height (face-down) */
}
body.fitscreen .duel-wrap {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--dw) * 1px); height: calc(var(--dh) * 1px);
  margin: 0; padding: 0;
  transform: translate(-50%, -50%) scale(calc(var(--fit, 1) * var(--uiScale, 1)));
  transform-origin: center center;
  display: grid; grid-template-columns: 256px minmax(0, 1fr) 312px; gap: 14px; align-items: stretch;
}
/* Replay Theater now has the same left card-inspect panel as the live duel (added in
   the replay-fidelity pass) — inspector + board + log — so it uses the live 3-column
   layout. Without this the inspector grabbed the 1fr column and the board was squeezed
   into 312px with the log wrapping below. */
body.theater.fitscreen .duel-wrap { grid-template-columns: 256px minmax(0, 1fr) 312px; }
/* LEFT card-detail panel (Power-of-Chaos style): the inspected card, big & clear */
body.fitscreen .duel-left { height: 100%; min-height: 0; display: flex; flex-direction: column; }
body.fitscreen .duel-left .inspect {
  flex: 1; min-height: 0; flex-direction: column; gap: 10px; padding: 14px; overflow: hidden;
}
body.fitscreen .duel-left .inspect .iart { width: 100%; align-self: center; max-width: 232px; }
body.fitscreen .duel-left .inspect .ibody { width: 100%; display: flex; flex-direction: column; min-height: 0; }
body.fitscreen .duel-left .inspect .iname { font-size: 18px; }
body.fitscreen .duel-left .inspect .istats { font-size: 14px; }
body.fitscreen .duel-left .inspect .idesc { flex: 1; max-height: none; font-size: 14.5px; line-height: 1.6; }
body.fitscreen .duel-left .inspect-empty { margin: auto; }
body.fitscreen .duel-main { display: flex; flex-direction: column; height: 100%; min-height: 0; justify-content: center; gap: 4px; }
body.fitscreen .duel-main .board { flex: 0 0 auto; }

/* ── 3D field: the mat tilts away like Power of Chaos / Legacy of the Duelist.
   Pure CSS perspective — opponent's side recedes, your side stays close. Click
   targets keep working (browser hit-testing follows the transform). Toggle in
   Settings (body.tilt3d). ── */
body.fitscreen.tilt3d .duel-main { perspective: 1500px; perspective-origin: 50% 30%; }
body.fitscreen.tilt3d .duel-main .board {
  transform: rotateX(11deg);
  transform-origin: 50% 88%;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 22px 38px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.5);
}
/* depth cues: far (opponent) edge dims slightly, near edge catches light */
body.fitscreen.tilt3d .board::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.06) 40%, transparent 60%, rgba(255,235,180,.04)); }
body.fitscreen .board .row { display: flex; justify-content: center; gap: 8px; margin: 3px 0; }
body.fitscreen .board { padding: 8px 16px; }
body.fitscreen .slot { height: var(--slotH); aspect-ratio: 59/86; width: auto; min-height: 0; flex: 0 0 auto; }
body.fitscreen .slot.endcap { aspect-ratio: auto; width: var(--slotH); } /* match the field-card slot width (deck/extra/GY no longer a thin sliver) */

/* ── UNIFORM, OPEN ZONES (Power-of-Chaos field — cards rest on the mat, not in
   "jail") ───────────────────────────────────────────────────────────────────
   EVERY zone is the same square so both rows line up and a card keeps ONE size
   standing up (attack) or lying sideways (defense/set) — no shrink. The art sits
   portrait-centred on the mat; cells are split by a faint line (no heavy boxes,
   no oval cages). */
body.fitscreen .board .row .slot {
  aspect-ratio: 1 / 1; width: var(--slotH); height: var(--slotH);
}
body.fitscreen .board .row .slot.hasart .slotart,
body.fitscreen .board .row .slot .fdcard {
  inset: 0; margin: auto; width: auto; height: 100%;
  aspect-ratio: 59 / 86; object-fit: cover;
}
/* sideways = the SAME size, just turned — MONSTER rows only (sets stay upright) */
body.fitscreen .board .row:not(.field) .slot.def.occupied.hasart .slotart,
body.fitscreen .board .row:not(.field) .slot.def .fdcard {
  transform: rotate(90deg);
}
/* pin the ATK/DEF chip + stat bar to the CARD, not the wider square */
body.fitscreen .board .row .slot.hasart .ad {
  left: 50%; right: auto; transform: translateX(-50%); width: calc(var(--slotH) * 59 / 86);
}
body.fitscreen .board .row .slot.hasart .pill {
  right: calc((var(--slotH) - var(--slotH) * 59 / 86) / 2 + 3px);
}
body.fitscreen .board .row .slot.hasart .cbadge,
body.fitscreen .board .row .slot.hasart .ebadge {
  left: calc((var(--slotH) - var(--slotH) * 59 / 86) / 2 + 3px);
}
/* the Field Zone is tinted green (monster row, far left) */
.fieldcell { border-color: rgba(47,159,134,.45) !important; }
.fieldcell .zlbl { margin: auto; color: #8fe0cf; font-size: 10px; letter-spacing: .14em; font-weight: 700; opacity: .85; }

body.fitscreen .myhand { min-height: var(--handH); }
body.fitscreen .myhand .card-mini.hasart, body.fitscreen .myhand .card-mini.hasart .cart { width: calc(var(--handH) * .686); }
body.fitscreen #p1hand { min-height: var(--oppH); padding: 2px; }
body.fitscreen .duel-side { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
body.fitscreen .duel-side .log { flex: 1; min-height: 60px; height: auto; }
body.fitscreen .duel-side .inspect { flex: 0 0 auto; min-height: 0; padding: 10px; }
body.fitscreen .inspect img.iart { width: 116px; }
body.fitscreen .inspect .idesc { max-height: 120px; }
/* tighter move buttons → more options visible before the list scrolls */
body.fitscreen .prompt { padding: 10px 12px; margin-top: 0; }
body.fitscreen .prompt-choices button { padding: 6px 11px; font-size: 12.5px; }
body.fitscreen .prompt-hint { display: none; } /* the tip eats space once you know how to play */

/* portrait phones still get the rotate overlay (#rotate); landscape just scales. */
@media (max-height: 560px) {
  body.fitscreen header { display: none; }
  #toasts { top: 6px; }
  .pb { font-size: 26px; padding: 8px 40px 8px 54px; }
  .sc-card img { width: 150px; } .cine-card img { width: 190px; }
}

/* portrait phones: ask for landscape (the game is built horizontal). TOUCH only —
   a portrait DESKTOP monitor (mouse → pointer:fine) skips the wall and gets the
   scaled board, so a small vertical monitor can still duel. */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 880px) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 200; background: #0d0518;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    color: var(--gold); font-size: 19px; font-weight: 700; letter-spacing: .06em; text-align: center; }
  #rotate .ric { font-size: 64px; animation: rotHint 1.6s ease-in-out infinite; }
  @keyframes rotHint { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
}

/* set SPELLS/TRAPS stay upright — only MONSTERS lie sideways in defense */
.row.field .slot.def .fdcard { transform: none; }
.row.field .slot.def.occupied.hasart .slotart { transform: none; }
.row.field .slot.def { background: rgba(18,10,3,.55); }

/* rock-paper-scissors opener */
.rps { text-align: center; padding: 18px 8px; }
.rps-title { font-size: 22px; font-weight: 900; letter-spacing: .14em; color: var(--gold); margin: 12px 0 4px; text-shadow: 0 2px 8px #000; }
.rps-sub { color: #cdb98a; font-size: 13px; letter-spacing: .08em; }
.rps-btns { display: flex; gap: 14px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.rps-hand { font-size: 44px; padding: 14px 22px; background: linear-gradient(#2c2412, #1a1408); border: 2px solid var(--gold-dim);
  border-radius: 16px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.rps-hand:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 24px rgba(231,198,107,.4); border-color: var(--gold); }
.rps-pick { font-size: 16px; font-weight: 800; letter-spacing: .06em; padding: 12px 22px; color: #1a1408;
  background: linear-gradient(180deg, #f0d488, #c8a04a); border: 2px solid var(--gold); border-radius: 22px; cursor: pointer; }
.rps-pick:hover { filter: brightness(1.1); transform: translateY(-2px); }
.rps-duel { display: flex; gap: 18px; align-items: center; justify-content: center; margin-bottom: 6px; }
.rps-big { font-size: 64px; animation: rpsPop .4s ease; }
.rps-vs { color: #a9966a; font-weight: 900; letter-spacing: .2em; }
@keyframes rpsPop { from { transform: scale(.2) rotate(-18deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* on-card context menu (press a card -> options pop up on it) */
#cardMenu { position: fixed; z-index: 95; min-width: 200px; max-width: 320px; padding: 6px;
  background: linear-gradient(#221c10, #110d08); border: 2px solid var(--gold); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.75), 0 0 22px rgba(231,198,107,.25); animation: cmIn .14s ease; }
@keyframes cmIn { from { transform: translateY(6px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
#cardMenu .cm-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--gold);
  padding: 4px 8px 6px; border-bottom: 1px solid rgba(231,198,107,.25); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cardMenu .cm-opt { display: block; width: 100%; text-align: left; padding: 9px 10px; margin: 2px 0;
  background: rgba(231,198,107,.08); border: 1px solid transparent; border-radius: 8px; color: #efe6cf;
  font-size: 13px; cursor: pointer; }
#cardMenu .cm-opt:hover { background: rgba(231,198,107,.22); border-color: var(--gold); color: #fff; }

/* active (face-up) spells & traps on the field glow so their effect is obvious */
.slot.st-active { border-color: var(--gold); box-shadow: 0 0 14px rgba(231,198,107,.45), inset 0 0 10px rgba(231,198,107,.18); animation: stGlow 1.8s ease-in-out infinite; }
@keyframes stGlow { 0%,100% { box-shadow: 0 0 14px rgba(231,198,107,.45), inset 0 0 10px rgba(231,198,107,.18); } 50% { box-shadow: 0 0 22px rgba(231,198,107,.75), inset 0 0 14px rgba(231,198,107,.3); } }
.slot .pill.stpill { top: auto; bottom: 3px; right: auto; left: 50%; transform: translateX(-50%); color: #1a1408;
  background: var(--gold); font-weight: 800; font-size: 9px; padding: 1px 7px; border-radius: 8px; letter-spacing: .06em; }

/* how-to-play overlay */
#help.select-overlay { z-index: 80; }
.help-box { max-width: 560px; margin: auto; background: linear-gradient(#221c10, #110d08); border: 2px solid var(--gold);
  border-radius: 14px; padding: 22px 28px; text-align: left; box-shadow: 0 16px 50px rgba(0,0,0,.8); }
.help-box h2 { color: var(--gold); letter-spacing: .1em; margin: 0 0 14px; text-align: center; }
.help-box ul { margin: 0 0 16px; padding: 0; list-style: none; }
.help-box li { padding: 6px 0; font-size: 13.5px; line-height: 1.5; color: #efe6cf; border-bottom: 1px solid rgba(231,198,107,.12); }
.help-box li b { color: var(--gold); }
.help-box .primary { display: block; margin: 0 auto; padding: 10px 28px; font-weight: 800; letter-spacing: .08em; }

/* victory pack serial */
.spoils-title .packserial { color: var(--gold); font-size: 12px; letter-spacing: .12em; margin-left: 8px; opacity: .9; }

/* sealed victory pack note on the end screen */
.spoils-sealed { text-align: center; color: #efe6cf; font-size: 14px; margin-top: 8px; }

.spoils-packimg { width: 74px; border-radius: 5px; border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.7); margin-bottom: 6px; animation: packDrop .5s ease; }
@keyframes packDrop { from { transform: translateY(-18px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* boss portraits */
.boss-card .bp { width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 8px; margin-bottom: 10px;
  border: 1px solid var(--gold-dim); background: #14110a; filter: saturate(1.05); }
.boss-card:hover .bp { border-color: var(--gold); }
.bub { display: flex; align-items: center; gap: 10px; }
.bub-face { width: 52px; height: 52px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid var(--gold); flex: 0 0 auto; background: #14110a; }
.bub-txt { min-width: 0; }

/* MR5 Extra Monster Zones — fusions land here when the main row is full */
.slot.emz { border-style: dashed; border-color: var(--gold-dim); background: rgba(231,198,107,.04); }
.slot.emz:not(.occupied)::after { content: "EX"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: rgba(231,198,107,.3); font-weight: 900; font-size: 14px; letter-spacing: .2em; pointer-events: none; }
.slot.emz.occupied { border-style: solid; border-color: var(--gold); box-shadow: 0 0 12px rgba(231,198,107,.3); }

/* opponent's HAND cards are real face-down cards, same proportions as yours
   (just the card back). The field itself stays full size and un-mirrored. */
body.fitscreen #p1hand .cardback {
  width: calc(var(--oppH) * .686);
  height: var(--oppH);
}
/* revealed opponent hand cards (Confiscation etc.) match the back size + glow */
body.fitscreen #p1hand .card-mini.hasart,
body.fitscreen #p1hand .card-mini.hasart .cart { width: calc(var(--oppH) * .686); }
#p1hand .card-mini.revealed .cart { border-radius: 6px; box-shadow: 0 0 12px var(--gold); }
/* subtle depth cue: the far edge of the mat darkens slightly */
.board { position: relative; }
.board::before { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(0,0,0,.18), transparent); pointer-events: none; border-radius: 10px 10px 0 0; }
/* EX (Extra Monster) zones stay invisible until a fusion actually needs them */
.slot.emz:not(.occupied):not(.clickable) { display: none; }

/* attribute icons (yugipedia) */
.attr-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }

/* field spell zone mini-slot (after the GY endcap) */
.slot.fieldzone { border-color: #3da06a; box-shadow: 0 0 10px rgba(61,160,106,.35); }
.slot.fieldzone::before { content: "FIELD"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #7fd1a0; letter-spacing: .15em; }

/* EDOPro activation ring spins under ACTIVE spells/traps */
.slot.st-active::after { content: ""; position: absolute; inset: -14%; z-index: 5; pointer-events: none;
  background: url("img/ui/act.png") center/contain no-repeat; opacity: .5; animation: actSpin 5s linear infinite; }
@keyframes actSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.board { transition: background-image .4s ease; }

/* ── battle math card: explains every attack ── */
#battleMath { position: fixed; top: 13%; left: 50%; transform: translateX(-50%); z-index: 70; pointer-events: none; }
.bm { position: relative; display: grid; grid-template-columns: auto auto auto; gap: 22px; align-items: center; justify-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #2a2210f2, #0e0b06f7); border: 2px solid var(--gold); border-radius: 16px;
  padding: 18px 30px 14px; box-shadow: 0 18px 55px rgba(0,0,0,.85), 0 0 40px rgba(231,198,107,.35), inset 0 1px 0 rgba(231,198,107,.2);
  animation: bmIn .32s cubic-bezier(.2,1.5,.4,1); }
/* a clash flash bursts behind the cards as the card appears */
.bm::before { content: ""; position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%,-50%) scale(.3);
  border-radius: 50%; background: radial-gradient(circle, rgba(255,210,140,.6), transparent 60%); animation: bmFlash .5s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes bmFlash { to { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
.bm.out { animation: bmOut .3s ease forwards; }
@keyframes bmIn { 0% { transform: translateY(-18px) scale(.8); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: none; opacity: 1; } }
@keyframes bmOut { to { transform: translateY(-12px) scale(.96); opacity: 0; } }
.bm-side { position: relative; text-align: center; width: 108px; }
.bm-side img { width: 92px; aspect-ratio: 59/86; object-fit: cover; border-radius: 7px; border: 2px solid var(--gold-dim);
  box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.bm-side.bm-dead img { filter: grayscale(1) brightness(.5); border-color: var(--p1); }
.bm-skull { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: 34px; text-shadow: 0 2px 10px #000; animation: skullPop .4s ease both .15s; }
@keyframes skullPop { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }
.bm-nm { font-size: 11px; font-weight: 700; margin-top: 5px; line-height: 1.15; color: #efe6cf; }
.bm-stat { font-size: 13px; color: var(--atk); font-weight: 900; }
.bm-vs { font-size: 26px; font-weight: 900; color: var(--p1); letter-spacing: .08em; text-shadow: 0 0 16px rgba(255,93,108,.8); animation: vsPulse .6s ease-in-out infinite alternate; }
@keyframes vsPulse { from { transform: scale(1); } to { transform: scale(1.14); } }
.bm-direct { font-size: 48px; }
.bm-directside .bm-nm { color: var(--p1); font-weight: 900; letter-spacing: .12em; }
.bm-verdict { grid-column: 1 / -1; font-size: 14px; color: #efe6cf; text-align: center; border-top: 1px solid rgba(231,198,107,.3); padding-top: 9px; margin-top: 2px; width: 100%; letter-spacing: .02em; }
.bm-verdict b { color: var(--gold); }
@media (max-height: 560px) { #battleMath { top: 6%; } .bm-side img { width: 60px; } .bm-side { width: 76px; } }

/* official level stars */
.star-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 1px; }
.stars { white-space: nowrap; }

/* ── typography: Cinzel (Millennium-stone caps) for display, Crimson Text
   (Stone-Serif feel) for card text — self-hosted, OFL-licensed ── */
header h1, .m-title .yg, .m-title .sub, .m-btn, .select-box h2, .boss-card .bn,
.winner-banner, .banner, .bk-name, .rps-title, .cer-serial, .cer-god,
.shop-tagline, .spoils-title, .prompt-title, .cm-title, .bub .who,
#endscreen .end-title, .jp-name {
  font-family: "Cinzel", "Segoe UI", serif;
}
.idesc, .bk-desc, .inspect .iname, .bm-verdict, .bk-mystery {
  font-family: "Crimson Text", Georgia, serif;
}
.idesc, .bk-desc { font-size: 14.5px; }
.inspect .iname { font-size: 18px; }

/* navigation affordances: every overlay/screen has a way back */
.overlay-back { display: inline-block; margin-top: 22px; color: #cdb98a; text-decoration: none; font-size: 13px;
  letter-spacing: .1em; padding: 8px 18px; border: 1px solid rgba(185,166,224,.3); border-radius: 18px; transition: .15s; }
.overlay-back:hover { color: var(--gold); border-color: var(--gold); }
.end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.end-btns button { font-size: 14px; padding: 10px 20px; }

/* ── settings gear + panel ── */
#settingsGear { position: fixed; right: 14px; bottom: 14px; z-index: 96; width: 44px; height: 44px; border-radius: 50%;
  font-size: 20px; background: rgba(22,19,32,.92); border: 2px solid var(--gold-dim); color: var(--gold); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.6); transition: .15s; }
#settingsGear:hover { border-color: var(--gold); transform: rotate(30deg); }
#settingsPanel { position: fixed; inset: 0; z-index: 97; background: rgba(6,6,9,.85); display: flex; align-items: center; justify-content: center; }
.sg-box { width: min(380px, 92vw); background: linear-gradient(#221c10, #110d08); border: 2px solid var(--gold);
  border-radius: 14px; padding: 22px 26px; box-shadow: 0 16px 50px rgba(0,0,0,.8); }
.sg-box h3 { margin: 0 0 16px; color: var(--gold); letter-spacing: .18em; text-align: center; font-family: "Cinzel", serif; }
.sg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid rgba(231,198,107,.12); font-size: 13.5px; color: #efe6cf; }
.sg-row input[type=range] { width: 150px; }
.sg-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); }
.sg-close { display: block; margin: 16px auto 0; padding: 9px 30px; font-weight: 800; letter-spacing: .1em;
  background: var(--gold); color: #1a1408; border: none; border-radius: 20px; cursor: pointer; }

.boss-card.pvp-card { border-color: var(--p1); }
.boss-card.pvp-card .bn { color: var(--p1); }
.boss-card.pvp-card:hover { border-color: var(--p1); box-shadow: 0 0 18px rgba(255,93,108,.35); }

/* opponent hand row reserves its real height + centers the face-down cards */
body.fitscreen #p1hand { flex: 0 0 auto; min-height: calc(var(--oppH) + 6px); align-items: flex-start; justify-content: center; overflow: visible; }

/* ════ MODERN CLIENT pass — vintage cards, sleek frame ════ */

/* your hand FANS like a modern card game: each card gets --fan/--arc from JS */
body.fitscreen .myhand { gap: 0; }
body.fitscreen .myhand .card-mini.hasart { margin-left: -12px; transition: transform .18s cubic-bezier(.3,1.3,.5,1), box-shadow .18s ease; transform: rotate(var(--fan, 0deg)) translateY(var(--arc, 0px)); transform-origin: 50% 120%; }
body.fitscreen .myhand .card-mini.hasart:first-child { margin-left: 0; }
body.fitscreen .myhand .card-mini.hasart:hover { transform: rotate(0deg) translateY(-34px) scale(1.45); z-index: 30; box-shadow: 0 16px 34px rgba(0,0,0,.75), 0 0 22px rgba(231,198,107,.25); }

/* glassmorphism: the duel chrome floats like a modern HUD */
body.fitscreen .duel-side .inspect, body.fitscreen .duel-side .prompt, body.fitscreen .duel-side .log,
#cardMenu, .help-box, .sg-box {
  background: linear-gradient(165deg, rgba(28,23,14,.72), rgba(12,10,7,.78));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}

/* low LP = danger: the readout burns red and pulses */
.lpnum.low { color: #ff6b4a !important; text-shadow: 0 0 10px #ff4a2b, 0 0 2px #fff !important; animation: lpDanger 1.1s ease-in-out infinite; }
@keyframes lpDanger { 0%,100% { box-shadow: inset 0 0 10px rgba(0,0,0,.8); } 50% { box-shadow: inset 0 0 10px rgba(0,0,0,.8), 0 0 20px rgba(255,80,60,.75); } }

/* ambient arena light: a slow breathing glow behind the tilted mat (fx-gated) */
body.fitscreen:not(.fxreduced) #stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: 920px; height: 560px;
  transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, rgba(231,198,107,.10), transparent 65%);
  animation: arenaBreathe 5.5s ease-in-out infinite; }
@keyframes arenaBreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

body[data-boss="keith"] .slot { border-color: rgba(224,192,80,.22); }
body[data-boss="keith"] .slot.occupied { border-color: rgba(224,192,80,.38); }
body[data-boss="keith"] .board { border-color: #a8923a;
  background: linear-gradient(rgba(20,18,6,.40), rgba(20,18,6,.56)), url("img/ui/field_wasteland.jpg") center/cover; }