/* ============================================================
 * C4YOS LAND DEMO — visual polish layer
 *
 * Loaded after demo.css. Changes presentation only: no layout the game
 * logic measures (the dice tray keeps its fixed 220x150 size, class names
 * toggled by demo.js are untouched), no new mechanics.
 *
 * It brings the demo onto the site's system: Luckiest Guy (display,
 * always uppercase) + Patrick Hand (everything else), true-black card
 * frames, paper panels, gold = primary action, purple = secondary,
 * red = danger, green = success. The wooden table stays; the play area
 * on it becomes a night-blue playmat so cards and dice read clearly.
 *
 * Order: 1 tokens · 2 type · 3 HUD · 4 panels · 5 decks · 6 monster ·
 * 7 playmat + player · 8 buttons · 9 gadget cards · 10 overlays ·
 * 11 modals · 12 PvP · 13 card draw · 14 feedback (demo-fx.js) ·
 * 15 responsive · 16 reduced motion
 * ============================================================ */

/* ---------- 1. tokens ---------- */

:root {
  --c-black: #000;
  --c-paper: #fff6e3;
  --c-paper-2: #f3e7cb;
  --c-ink: #16110a;
  --c-ink-soft: #3a3226;
  --c-muted: #6d6047;
  --c-gold: #ffc629;
  --c-gold-dk: #b98300;
  --c-purple: #5b36b0;
  --c-red: #f0402f;
  --c-red-text: #c42a1b;
  --c-green: #36b86a;
  --c-green-text: #1c7a42;
  --c-sky: #12a5ee;
  --c-mat: #121e48;
  --c-mat-2: #0b1332;
  --f-display: "Luckiest Guy", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Patrick Hand", ui-rounded, system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-deal: cubic-bezier(.2, .9, .25, 1.15);

  /* remap demo.css variables onto the site palette */
  --ink: #000;
  --ink-text: #16110a;
  --ink-2: #3a3226;
  --cream: #fff6e3;
  --parch-1: #fff6e3;
  --parch-2: #f6ecd3;
  --parch-3: #f1e4c6;
  --purple: #5b36b0;
  --purple-lt: #7a55d6;
  --purple-dk: #3f2384;
  --yellow: #ffc629;
  --yellow-dk: #e9a400;
  --red: #f0402f;
  --green: #36b86a;
  --green-dk: #1c7a42;
  --mono: #6d6047;
  --wood-1: #9c663a;
  --wood-2: #7d4f2d;
  --wood-3: #5d371e;
  --wood-4: #3c2312;
}

/* Mobile browsers count their own toolbars inside 100vh, which pushed the
   bottom of the table (Roll, gadgets) under Safari's address bar on
   tablets. The dynamic viewport unit follows the bars instead; 100%
   width avoids a sideways scrollbar where 100vw includes the scrollbar. */
#pveDemoRoot { width: 100%; height: 100vh; height: 100dvh; }

/* ---------- 2. typography: two faces, one hierarchy ---------- */

.dbz-round-num, .dbz-status-badge, .dbz-panel-heading, .dbz-deck-label, .dbz-deck-count,
.dbz-monster-name, .dbz-ability-heading, .dbz-ability-num, .dbz-ability-name, .dbz-player-label,
.dbz-btn, .dbz-gadget-name, .dbz-overlay-best--new, .dbz-difficulty-btn, .dbz-overlay-tip strong,
.dbz-binder-panel-header .dbz-icon-btn, .dbz-binder-section-title, .dbz-binder-card-name,
.dbz-binder-detail-hp, .dbz-rb-h, .dbz-rb-table th, .dbz-settings-row-label, .dbz-pvp-face-off-note,
.dbz-pvp-card-name, .dbz-overlay-eyebrow, .dbz-monster-hp-badge, .dbz-gadget-tag, .dbz-difficulty-label,
.dbz-binder-title, .dbz-overlay-title, .dbz-binder-detail-name, .dbz-pvp-rolloff-value, .demo-exit,
.dbz-pvp-card-badge, .dbz-rb-tag {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.dbz-root, .dbz-chips-label, .dbz-gadget-hand--empty, .dbz-gadget-hint, .dbz-gadget-hand--disabled-note,
.dbz-overlay-best, .dbz-share-feedback, .dbz-binder-section-title span, .dbz-binder-back,
.dbz-pvp-card-hp, .dbz-pvp-empty-slot, .dbz-round-eyebrow {
  font-family: var(--f-body);
  letter-spacing: 0;
}

.dbz-log-entry--bad { font-weight: 400; }

/* ---------- 3. HUD ---------- */

.demo-exit {
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 14px 7px;
  background: var(--c-black);
  color: var(--c-paper);
  border: 2px solid rgba(255, 246, 227, .28);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  backdrop-filter: none;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
  transition: background .14s, color .14s, transform .14s var(--ease-out);
}
.demo-exit:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-black); transform: translateY(-1px); }
.demo-exit:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

.dbz-header {
  padding-left: 104px; /* clears the fixed Back button */
  gap: 14px;
  margin-bottom: clamp(10px, 1.6vh, 16px);
}

.dbz-round-badge {
  gap: 2px;
  padding: 9px 18px 7px;
  background: var(--c-black);
  border: 0;
  border-radius: 10px;
  transform: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 246, 227, .1);
}
.dbz-round-eyebrow { font-size: 14px; line-height: 1.1; color: #cfc6b3; }
.dbz-round-num { font-size: 23px; line-height: 1; color: var(--c-gold); letter-spacing: .03em; }

.dbz-header-right { gap: 10px; }

/* the status pill answers "what now?" — coloured by whose turn it is */
.dbz-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px 7px 14px;
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45);
  font-size: 16px;
  line-height: 1;
  color: var(--c-ink);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.dbz-status-badge::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: -3px;
  border-radius: 50%;
  border: 2px solid var(--c-black);
  background: #b8ad97;
}
#pveDemoRoot[data-turn="player"] .dbz-status-badge,
#pveDemoRoot[data-turn="trader"] .dbz-status-badge { background: var(--c-gold); }
#pveDemoRoot[data-turn="player"] .dbz-status-badge::before,
#pveDemoRoot[data-turn="trader"] .dbz-status-badge::before { background: var(--c-paper); }
#pveDemoRoot[data-turn="monster"] .dbz-status-badge { background: var(--c-red); color: var(--c-paper); }
#pveDemoRoot[data-turn="monster"] .dbz-status-badge::before { background: var(--c-paper); }
#pveDemoRoot[data-turn="defeated"] .dbz-status-badge { background: var(--c-green); color: var(--c-paper); }
#pveDemoRoot[data-turn="defeated"] .dbz-status-badge::before { background: var(--c-paper); }
.dbz-status-badge.fx-pop { animation: fx-pop 360ms var(--ease-deal); }

.dbz-icon-btn,
.dbz-sound-toggle {
  width: 44px;
  height: 44px;
  padding: 7px;
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
  transition: transform .12s var(--ease-out), box-shadow .12s, background .12s;
}
.dbz-icon-btn:hover,
.dbz-sound-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .5); background: #fff; }
.dbz-icon-btn:active,
.dbz-sound-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); transition-duration: 60ms; }
.dbz-icon-btn:focus-visible,
.dbz-sound-toggle:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.dbz-sound-toggle.is-muted { opacity: 1; background: #cfc6b3; }

/* ---------- 4. panels ---------- */

.dbz-panel {
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .45);
}
.dbz-panel-heading {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--c-purple);
}

.dbz-rules-list { gap: 7px; font-size: 15px; line-height: 1.3; color: var(--c-ink-soft); }

.dbz-log-panel { transform: rotate(.5deg); }
.dbz-log-panel::before { background: radial-gradient(circle at 35% 30%, #ff8a78, var(--c-red) 70%); border-color: var(--c-black); }
.dbz-log-list { gap: 8px; font-size: 15px; line-height: 1.3; color: var(--c-ink-soft); }
.dbz-log-entry:first-child { color: var(--c-ink); }
.dbz-log-entry--bad { color: var(--c-red-text); }
.dbz-log-entry--good { color: var(--c-green-text); }
.dbz-log-icon { width: 18px; height: 18px; }

/* ---------- 5. deck stacks: real card backs, portrait ---------- */

.dbz-deck { gap: 4px; }
.dbz-deck-label {
  padding: 6px 9px 3px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--c-paper);
  transform: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}
.dbz-deck--adventure .dbz-deck-label { background: var(--c-purple); }
.dbz-deck--gadget .dbz-deck-label { background: #0f6ea3; }
.dbz-deck--discard .dbz-deck-label { background: #3b3731; }

.dbz-deck-stack { width: 88px; height: 108px; margin-top: 6px; }
.dbz-deck-card {
  width: 68px;
  height: 94px;
  top: 4px;
  border: 3px solid var(--c-black);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
}
.dbz-deck-card:nth-child(1) { transform: translateX(-50%) rotate(-6deg) translateY(4px); }
.dbz-deck-card:nth-child(2) { transform: translateX(-50%) rotate(3deg) translateY(1px); }
.dbz-deck-card:nth-child(3) { transform: translateX(-50%) rotate(-1deg) translateY(-2px); }
.dbz-deck--adventure .dbz-deck-card { background: #5b36b0; }
.dbz-deck--gadget .dbz-deck-card { background: #1291d6; }
.dbz-deck--discard .dbz-deck-card { background: #57524a; }
.dbz-deck-card svg { inset: auto; left: 0; top: 50%; height: auto; transform: translateY(-50%); }

.dbz-deck-count {
  right: -4px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  padding-top: 3px;
  background: var(--c-gold);
  border: 3px solid var(--c-black);
  font-size: 14px;
  color: var(--c-ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.dbz-deck--discard .dbz-deck-count { background: var(--c-paper); }

/* ---------- 6. monster: the printed card on the table ---------- */

.dbz-monster-panel {
  grid-template-columns: clamp(210px, 35vh, 370px) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding-bottom: 14px;
}

.dbz-monster-frame { padding-top: 4px; }

.dbz-monster-portrait {
  background: #fff;
  border: 7px solid var(--c-black);
  outline: 0;
  border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .5), 0 12px 0 rgba(0, 0, 0, .18);
}
.dbz-monster-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(240, 64, 47, 0);
}
.dbz-monster-portrait.is-hit::after { animation: fx-red-flash 380ms ease-out; }

/* name plate straddles the bottom edge, like on the cards */
.dbz-monster-name {
  top: auto;
  bottom: -16px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: 94%;
  padding: 11px 20px 6px;
  background:
    linear-gradient(135deg, transparent 11px, var(--c-black) 0) left / 50.5% 100% no-repeat,
    linear-gradient(225deg, transparent 11px, var(--c-black) 0) right / 50.5% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(14px, .6vw + 9px, 18px);
  line-height: 1.05;
  color: var(--c-paper);
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}

.dbz-monster-hp-badge {
  top: -8px;
  right: -12px;
  left: auto;
  bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px 5px;
  background: var(--c-red);
  border: 3px solid var(--c-black);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--c-black);
  font-size: 17px;
  line-height: 1;
  color: var(--c-paper);
  transform: rotate(4deg);
}
.dbz-monster-hp-badge .dbz-heart { color: var(--c-paper); margin-top: -3px; }

.dbz-monster-side { gap: 10px; }
.dbz-monster-side .dbz-panel { padding: 14px 16px 12px; }

.dbz-ability-heading { margin-bottom: 8px; font-size: 13px; color: var(--c-muted); }
.dbz-ability-list { gap: 6px; }
.dbz-ability {
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 9px;
  transition: background .2s, transform .2s var(--ease-out), border-color .2s;
}
.dbz-ability-num {
  width: 28px;
  height: 28px;
  padding-top: 3px;
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  color: var(--c-ink);
  font-size: 14px;
  box-shadow: none;
}
.dbz-ability-text { gap: 2px; padding-top: 2px; }
.dbz-ability-name { font-size: 14px; line-height: 1.1; color: var(--c-ink); }
.dbz-ability-desc { font-size: 15px; line-height: 1.25; color: var(--c-ink-soft); }
.dbz-ability.is-active {
  background: var(--c-gold);
  border-color: var(--c-black);
  outline: 0;
  box-shadow: 0 3px 0 var(--c-black);
  transform: translateX(4px);
}
.dbz-ability.is-active .dbz-ability-num { background: var(--c-black); color: var(--c-gold); }
.dbz-ability.is-active:not(.fx-settled) { animation: fx-ability-hit 460ms var(--ease-deal); }
.dbz-ability.is-locked { opacity: .45; }
.dbz-hp-note { margin-top: 8px; font-size: 15px; color: var(--c-muted); }

/* defeated: the card greys out and gets stamped */
#pveDemoRoot[data-turn="defeated"] .dbz-monster-portrait img { filter: grayscale(1) brightness(.85); transition: filter .4s; }
#pveDemoRoot[data-turn="defeated"] .dbz-monster-portrait::before {
  content: "Defeated";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 44%;
  padding: 10px 14px 6px;
  background: var(--c-paper);
  border: 4px solid var(--c-red-text);
  border-radius: 6px;
  font-family: var(--f-display);
  font-size: clamp(18px, 2.4vh, 26px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-red-text);
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
#pveDemoRoot[data-turn="defeated"] .dbz-monster-portrait:not(.fx-settled)::before { animation: fx-stamp 420ms var(--ease-deal); }

/* ---------- 7. playmat + player ---------- */

.dbz-arena {
  position: relative;
  border: 6px solid var(--c-black);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 70% at 26% 55%, #1d3068, transparent 70%),
    linear-gradient(160deg, var(--c-mat), var(--c-mat-2));
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
  padding: clamp(12px, 1.6vh, 18px) clamp(18px, 2vw, 28px);
}
/* stitched edge of the mat */
.dbz-arena::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px dashed rgba(255, 246, 227, .12);
  border-radius: 11px;
  pointer-events: none;
}
/* hit flash: an overlay fading in and out (opacity only, no repaint) */
.dbz-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(240, 64, 47, .55) 100%);
  opacity: 0;
  pointer-events: none;
}
.dbz-arena.fx-hurt::after { animation: fx-hurt 420ms ease-out; }

.dbz-battlefield { position: relative; z-index: 1; min-width: 240px; gap: clamp(8px, 1.2vh, 12px); }

.dbz-gadget-side {
  position: relative;
  z-index: 1;
  border-left: 2px dashed rgba(255, 246, 227, .16);
  padding-top: 26px;
}
.dbz-gadget-side::before {
  content: "Gadgets";
  position: absolute;
  top: 6px;
  left: clamp(12px, 1.4vw, 22px);
  font-family: var(--f-display);
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(255, 246, 227, .55);
}

.dbz-player-panel {
  padding: 9px 16px 8px;
  background: var(--c-black);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 246, 227, .12);
}
.dbz-player-label { margin-bottom: 6px; font-size: 13px; line-height: 1; color: var(--c-gold); }
.dbz-chip { border-color: var(--c-black); }
.dbz-player-panel .dbz-chip.is-filled { box-shadow: 0 0 0 1.5px rgba(255, 246, 227, .35), inset 0 -2px 2px rgba(0, 0, 0, .25); }
.dbz-player-panel .dbz-chip.is-empty { background: rgba(255, 246, 227, .1); border-color: rgba(255, 246, 227, .3); box-shadow: none; }
.dbz-chips-label { margin-top: 6px; font-size: 16px; text-align: center; color: var(--c-paper); }
.dbz-chip-float { font-family: var(--f-display); font-size: 15px; }
.dbz-chip-float--dmg { color: #ff7a66; }
.dbz-chip-float--heal { color: #6fe39a; }

/* dice tray: same fixed size (the roll animation depends on it) */
.dbz-die-tray {
  border-color: var(--c-black);
  background: linear-gradient(#6a4124, #4a2c17);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .5), inset 0 0 0 4px rgba(0, 0, 0, .25);
}
.dbz-die-tray::before { background: radial-gradient(circle at 45% 35%, #2d6457, #183f37 75%); }

/* ---------- 8. buttons: physical keys ---------- */

.dbz-btn {
  position: relative;
  padding: 13px 24px 9px;
  border: 3px solid var(--c-black);
  border-radius: 10px;
  font-size: 19px;
  line-height: 1;
  box-shadow: 0 6px 0 var(--c-black);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), background .12s;
  -webkit-tap-highlight-color: transparent;
}
.dbz-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--c-black); }
.dbz-btn:not(:disabled):active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-black); transition-duration: 50ms; }
.dbz-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dbz-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, #3a3848 0 8px, #33313f 8px 16px);
  color: rgba(255, 246, 227, .55);
  box-shadow: 0 2px 0 var(--c-black);
  transform: translateY(4px);
}

.dbz-btn--gold,
.dbz-root [data-action="continue"] {
  background: var(--c-gold);
  color: var(--c-ink);
  box-shadow: 0 6px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .12);
}
.dbz-btn--gold:not(:disabled):hover,
.dbz-root [data-action="continue"]:hover { color: var(--c-ink); box-shadow: 0 8px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .12); }
.dbz-btn--purple {
  background: var(--c-purple);
  color: var(--c-paper);
  box-shadow: 0 6px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .18);
}
.dbz-btn--purple:hover { color: var(--c-paper); }
.dbz-btn--whatsapp { background: #25b85a; box-shadow: 0 6px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .25); }

.dbz-roll-btn { min-width: 200px; font-size: 22px; padding-block: 14px 10px; }
.dbz-roll-btn::after { content: ""; position: absolute; inset: -4px; border: 3px solid var(--c-gold); border-radius: 13px; opacity: 0; pointer-events: none; }
.dbz-roll-btn.fx-ready::after { animation: fx-ready 900ms var(--ease-out); }

/* ---------- 9. gadget cards: printed gadget cards ---------- */

.dbz-gadget-hand { row-gap: 14px; padding: 10px 6px 16px; }

.dbz-gadget-card {
  width: 138px;
  margin-left: -20px;
  padding: 0 0 10px;
  gap: 5px;
  overflow: hidden;
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--c-black);
  transition: transform .18s var(--ease-out);
}
.dbz-gadget-card:not(:disabled):hover,
.dbz-gadget-card:not(:disabled):focus-visible {
  transform: translateY(-16px) scale(1.06) rotate(0deg) !important;
  z-index: 20;
  box-shadow: 0 9px 0 var(--c-black);
}
.dbz-gadget-card:not(:disabled):active {
  transform: translateY(-6px) scale(1.02) rotate(0deg) !important;
  box-shadow: 0 3px 0 var(--c-black);
  transition-duration: 60ms;
}
.dbz-gadget-card:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.dbz-gadget-card:disabled { opacity: .62; }
.dbz-gadget-card.is-drawn { outline: 0; box-shadow: 0 0 0 4px var(--c-green), 0 4px 0 var(--c-black); }

.dbz-gadget-rarity { right: 7px; top: 7px; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--c-black); background: var(--c-paper); }

.dbz-gadget-icon {
  width: 100%;
  height: 86px;
  border: 0;
  border-bottom: 3px solid var(--c-black);
  border-radius: 0;
  background: var(--c-sky);
  box-shadow: none;
}
.dbz-gadget-img { object-fit: contain; padding: 4px; }

.dbz-gadget-name { padding: 2px 8px 0; font-size: 13px; line-height: 1.05; color: var(--c-ink); }
.dbz-gadget-desc { padding: 0 9px; font-size: 13.5px; line-height: 1.2; color: var(--c-ink-soft); }
.dbz-gadget-hint { padding: 0 8px; font-size: 13px; line-height: 1.15; color: var(--c-red-text); }
.dbz-gadget-tag {
  margin-top: 3px;
  padding: 5px 8px 2px;
  border-radius: 4px;
  background: var(--c-black);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-paper);
}

.dbz-gadget-hand--passive { border-bottom-color: rgba(255, 246, 227, .16); }
.dbz-gadget-card--passive { outline: 0; }
.dbz-gadget-card--passive .dbz-gadget-icon { border-bottom-color: var(--c-gold); background: #0f7bb8; }
.dbz-gadget-card--passive .dbz-gadget-tag { background: var(--c-gold); color: var(--c-ink); }

.dbz-gadget-hand--empty { max-width: 24ch; margin: 0 auto; font-size: 17px; line-height: 1.35; color: rgba(255, 246, 227, .6); }
.dbz-gadget-hand--disabled-note {
  width: auto;
  display: table;
  margin: 0 auto 8px;
  padding: 6px 12px 4px;
  background: var(--c-red);
  border: 2px solid var(--c-black);
  border-radius: 999px;
  font-size: 15px;
  color: var(--c-paper);
}

/* ---------- 10. overlays: start, victory, defeat, PvP screens ---------- */

.dbz-overlay {
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, transparent 30%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 7px),
    linear-gradient(155deg, var(--wood-1), var(--wood-2) 45%, var(--wood-3) 80%, var(--wood-4));
}

.dbz-overlay-card {
  position: relative;
  max-width: 480px;
  padding: 34px 32px 30px;
  background: var(--c-paper);
  border: 5px solid var(--c-black);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .5), 0 50px 70px -30px rgba(0, 0, 0, .85);
}
.dbz-overlay-card--good { border-color: var(--c-black); box-shadow: 0 10px 0 rgba(0, 0, 0, .5), 0 0 0 6px var(--c-gold), 0 50px 70px -30px rgba(0, 0, 0, .85); }
.dbz-overlay-card--bad { border-color: var(--c-black); box-shadow: 0 10px 0 rgba(0, 0, 0, .5), 0 0 0 6px var(--c-red), 0 50px 70px -30px rgba(0, 0, 0, .85); }

.dbz-overlay-eyebrow { font-size: 15px; line-height: 1; color: var(--c-gold-dk); }
.dbz-overlay-card--bad .dbz-overlay-eyebrow { color: var(--c-red-text); }
.dbz-overlay-title {
  margin-top: 10px;
  font-size: clamp(34px, 5vw, 50px);
  line-height: .95;
  color: var(--c-ink);
  text-shadow: none;
  text-wrap: balance;
}
.dbz-overlay-text { margin: 14px 0 22px; font-size: 19px; line-height: 1.4; color: var(--c-ink-soft); }
.dbz-overlay-best { margin: -6px 0 18px; font-size: 16px; color: var(--c-muted); }
.dbz-board-note { margin: -6px 0 18px; font-size: 16px; line-height: 1.35; color: var(--c-ink-soft); }
.dbz-board-note strong { color: var(--c-ink); }
.dbz-board-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dbz-board-note--busy { opacity: .75; }
.dbz-overlay-best.dbz-overlay-best--new {
  font-family: var(--f-display);
  text-transform: uppercase;
  display: table;
  margin: -6px auto 18px;
  padding: 8px 14px 5px;
  background: var(--c-gold);
  border: 3px solid var(--c-black);
  border-radius: 999px;
  font-size: 18px;
  color: var(--c-ink);
  text-shadow: none;
  transform: rotate(-3deg);
}

/* start screen: the logo sits on top of the card */
.dbz-overlay-card:has([data-action="start"]) { padding-top: 88px; margin-top: 70px; }
.dbz-overlay-card:has([data-action="start"])::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -76px;
  width: min(300px, 80%);
  height: 140px;
  transform: translateX(-50%) rotate(-2deg);
  background: url("assets/web/logo-480.webp") center / contain no-repeat;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45));
}
.dbz-overlay-card:has([data-action="start"]) .dbz-overlay-eyebrow { display: none; }

.dbz-difficulty-picker { margin: 6px 0 22px; }
.dbz-difficulty-label { margin-bottom: 10px; font-size: 14px; color: var(--c-muted); }
.dbz-difficulty-row { gap: 8px; }
.dbz-difficulty-btn {
  min-height: 42px;
  padding: 10px 14px 7px;
  background: #fff;
  border: 3px solid var(--c-black);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--c-ink);
  box-shadow: 0 4px 0 var(--c-black);
  transition: transform .12s var(--ease-out), box-shadow .12s, background .12s;
}
.dbz-difficulty-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--c-black); }
.dbz-difficulty-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-black); }
.dbz-difficulty-btn:focus-visible { outline: 3px solid var(--c-purple); outline-offset: 3px; }
.dbz-difficulty-btn.is-selected { color: var(--c-paper); transform: translateY(3px); box-shadow: 0 1px 0 var(--c-black), inset 0 3px 0 rgba(0, 0, 0, .18); }
.dbz-difficulty-btn--easy.is-selected { background: var(--c-green); }
.dbz-difficulty-btn--standard.is-selected { background: var(--c-purple); }
.dbz-difficulty-btn--hard.is-selected { background: var(--c-gold); color: var(--c-ink); }
.dbz-difficulty-btn--hell.is-selected { background: var(--c-red); }
/* phones: the four difficulties stay one row of equal keys */
@media (max-width: 480px) {
  .dbz-difficulty-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .dbz-difficulty-btn { min-height: 44px; padding: 10px 2px 7px; font-size: clamp(12px, 3.6vw, 15px); }
}

.dbz-overlay-btn-row { gap: 14px; }

.dbz-overlay-tip {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, .04);
  border: 2px dashed rgba(0, 0, 0, .2);
  border-radius: 12px;
  font-size: 15px;
  color: var(--c-ink-soft);
}
.dbz-overlay-tip strong { font-size: 14px; color: var(--c-purple); }
.dbz-launch-note { font-size: 15px; color: var(--c-muted); border-top-color: rgba(0, 0, 0, .14); }
.dbz-launch-note strong { color: var(--c-purple); font-weight: 400; }
.dbz-share-feedback { font-size: 16px; color: var(--c-green-text); }

/* entrances — demo-fx.js marks re-renders of the same screen as settled */
.dbz-overlay:not(.fx-settled) { animation: fx-fade 320ms ease-out both; }
.dbz-overlay:not(.fx-settled) .dbz-overlay-card { animation: fx-deal 600ms var(--ease-deal) both; }
.dbz-overlay:not(.fx-settled) .dbz-overlay-title { animation: fx-slam 520ms var(--ease-deal) 160ms both; }

/* victory: a single burst of light behind the card */
.dbz-overlay:has(.dbz-overlay-card--good)::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 140vmax;
  height: 140vmax;
  margin: -70vmax 0 0 -70vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 198, 41, .16) 0 10deg, transparent 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 55%);
  mask-image: radial-gradient(circle, #000 10%, transparent 55%);
  pointer-events: none;
}
.dbz-overlay:not(.fx-settled):has(.dbz-overlay-card--good)::before { animation: fx-rays 1600ms var(--ease-out) both; }

/* defeat: the room goes red for a moment */
.dbz-overlay:has(.dbz-overlay-card--bad)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 180px rgba(240, 64, 47, .45);
  opacity: 0;
}
.dbz-overlay:not(.fx-settled):has(.dbz-overlay-card--bad)::after { animation: fx-vignette 1400ms ease-out; }

/* ---------- 11. modals: binder, rulebook, settings ---------- */

.dbz-binder-backdrop { background: rgba(0, 0, 0, .72); }
.dbz-binder-panel {
  background: linear-gradient(180deg, #121c42, #0a1230);
  border: 5px solid var(--c-black);
  border-radius: 18px;
  box-shadow: 0 12px 0 rgba(0, 0, 0, .5), 0 50px 80px -30px #000;
}
.dbz-binder-modal.fx-enter .dbz-binder-backdrop { animation: fx-fade 240ms ease-out both; }
.dbz-binder-modal.fx-enter .dbz-binder-panel { animation: fx-deal 420ms var(--ease-deal) both; }

.dbz-binder-panel-header { background: var(--c-black); border-bottom: 0; padding: 14px 16px 12px 20px; }
.dbz-binder-title { font-size: 22px; line-height: 1; text-shadow: none; color: var(--c-paper); }
.dbz-binder-panel-header .dbz-icon-btn { font-size: 22px; padding: 0 0 2px; color: var(--c-ink); }
.dbz-binder-scroll { padding: 20px; }
.dbz-binder-section-title { font-size: 15px; color: var(--c-gold); }
.dbz-binder-section-title span { font-size: 15px; color: rgba(255, 246, 227, .55); }

.dbz-binder-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.dbz-binder-card {
  padding: 0 0 8px;
  gap: 6px;
  overflow: hidden;
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--c-black);
  transition: transform .16s var(--ease-out), box-shadow .16s;
}
.dbz-binder-card:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--c-black); }
.dbz-binder-card:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.dbz-binder-card-img { border: 0; border-bottom: 3px solid var(--c-black); border-radius: 0; background: #fff; }
.dbz-binder-card-name { padding: 0 6px; font-size: 11.5px; line-height: 1.1; color: var(--c-ink); }
.dbz-binder-back { font-size: 17px; color: var(--c-gold); }
.dbz-binder-detail { background: var(--c-paper); border: 3px solid var(--c-black); border-radius: 14px; }
.dbz-binder-detail-portrait { border-width: 4px; border-radius: 10px; background: #fff; }
.dbz-binder-detail-name { font-size: 24px; line-height: 1; }
.dbz-binder-detail-hp { font-size: 15px; color: var(--c-red-text); }
.dbz-binder-detail-desc { font-size: 16px; }
.dbz-binder-detail .dbz-gadget-tag { align-self: flex-start; }

.dbz-rb-h { font-size: 17px; color: var(--c-gold); }
.dbz-rb-p, .dbz-rb-list { font-size: 16px; color: #e6dfcf; }
.dbz-rb-list li b { color: var(--c-gold); font-weight: 400; }
.dbz-rb-table { font-size: 15px; color: #e6dfcf; }
.dbz-rb-table th { font-size: 13px; color: var(--c-gold); }
.dbz-rb-tag { padding: 4px 8px 2px; font-size: 11px; border-radius: 4px; }

.dbz-settings-row-label { font-size: 15px; color: var(--c-paper); }
.dbz-settings-row-sub { font-size: 15px; }
.dbz-toggle-track { background: #2a2f4a; border-color: var(--c-black); }
.dbz-toggle.is-on .dbz-toggle-track { background: var(--c-green); }
.dbz-toggle:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 20px; }

/* ---------- 12. PvP ---------- */

.dbz-pvp-card {
  background: var(--c-paper);
  border: 3px solid var(--c-black);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--c-black);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s;
}
button.dbz-pvp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 0 var(--c-black); }
button.dbz-pvp-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-black); }
button.dbz-pvp-card:focus-visible { outline: 3px solid var(--c-purple); outline-offset: 3px; }
.dbz-pvp-card.is-selected { outline: 0; box-shadow: 0 0 0 4px var(--c-gold), 0 5px 0 var(--c-black); transform: translateY(-3px); }
.dbz-pvp-card.is-disabled { opacity: 1; filter: grayscale(.8) brightness(.8); }
.dbz-pvp-card-check { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-black); font-weight: 700; }
.dbz-pvp-card-badge { padding: 5px 8px 2px; font-size: 11px; background: var(--c-red); border-color: var(--c-black); }
.dbz-pvp-card-portrait { border: 3px solid var(--c-black); border-radius: 8px; background: #fff; }
.dbz-pvp-card-name { font-size: 13px; line-height: 1.05; color: var(--c-ink); }
.dbz-pvp-card-hp { font-size: 15px; color: var(--c-red-text); }
.dbz-pvp-card-abilities .dbz-ability-name { font-size: 11px; }
.dbz-pvp-card-abilities .dbz-ability-desc { font-size: 12.5px; }
.dbz-pvp-card-abilities .dbz-ability-num { width: 20px; height: 20px; border-width: 2px; font-size: 11px; padding-top: 2px; }
.dbz-pvp-roster-icon { border-color: var(--c-black); border-radius: 8px; background: #fff; }
.dbz-pvp-roster-icon--active { outline: 3px solid var(--c-gold); outline-offset: 1px; }
.dbz-pvp-face-off-note { font-size: 14px; color: var(--c-purple); }

.dbz-pvp-rolloff,
.dbz-pvp-battle-center {
  position: relative;
  border: 6px solid var(--c-black);
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #1d3068, transparent 70%),
    linear-gradient(160deg, var(--c-mat), var(--c-mat-2));
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
}
.dbz-pvp-battle-panel { justify-content: center; }
.dbz-pvp-battle-panel .dbz-panel-heading { align-self: flex-start; }
.dbz-pvp-battle-panel .dbz-pvp-card { max-width: 270px; }
.dbz-pvp-log-panel { transform: none; }
.dbz-header-right .dbz-icon-btn:not(:has(svg)) { font-family: var(--f-display); font-size: 24px; line-height: 1; padding: 2px 0 0; color: var(--c-ink); }
.dbz-pvp-rolloff-panel { background: var(--c-black); border-color: var(--c-black); }
.dbz-pvp-rolloff-panel .dbz-panel-heading { color: var(--c-gold); }
.dbz-pvp-rolloff-value { font-size: 48px; color: var(--c-paper); }
.dbz-pvp-empty-slot { font-size: 16px; color: var(--c-muted); }

/* ---------- 13. card draw flight: new card chrome ---------- */

.dbz-draw-overlay--gadget .dbz-flip-face--front,
.dbz-draw-overlay--gadget .dbz-flip-face--back { border: 3px solid var(--c-black); border-radius: 11px; }
.dbz-draw-overlay--gadget .dbz-flip-face--front { background: repeating-linear-gradient(45deg, #1291d6 0 7px, #0f7bb8 7px 14px); }
.dbz-draw-overlay--gadget .dbz-flip-face--back { background: var(--c-paper); padding: 0 0 10px; justify-content: flex-start; }
.dbz-draw-overlay--monster .dbz-flip-face--front,
.dbz-draw-overlay--monster .dbz-flip-face--back { border: 7px solid var(--c-black); outline: 0; border-radius: 14px; }
.dbz-draw-overlay--monster .dbz-flip-face--front { background: repeating-linear-gradient(45deg, #5b36b0 0 9px, #4b2a98 9px 18px); }
.dbz-draw-overlay--monster .dbz-flip-face--back { background: #fff; }

/* ---------- 14. feedback elements created by demo-fx.js ---------- */

.fx-float {
  position: absolute;
  z-index: 30;
  pointer-events: none;
  padding: 8px 12px 4px;
  border: 3px solid var(--c-black);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  color: var(--c-paper);
  background: var(--c-red);
  box-shadow: 0 4px 0 var(--c-black);
  animation: fx-float 900ms var(--ease-out) forwards;
}
.fx-float--heal { background: var(--c-green); }

.fx-banner {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 14px;
  padding: 10px 22px 6px;
  background: var(--c-black);
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 246, 227, .12);
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -12px);
}
.fx-banner--monster { color: #ff8a78; }
.fx-banner--boss { background: var(--c-red); color: var(--c-paper); }
.fx-banner.is-showing { animation: fx-banner 1100ms var(--ease-out) forwards; }

.fx-ghost {
  position: fixed;
  z-index: 600;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.fx-toast {
  position: fixed;
  z-index: 700;
  max-width: 240px;
  padding: 9px 12px 7px;
  background: var(--c-black);
  border: 2px solid var(--c-red);
  border-radius: 8px;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .7);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.25;
  color: var(--c-paper);
  pointer-events: none;
  animation: fx-toast 1600ms var(--ease-out) forwards;
}
.fx-nope { animation: fx-nope 320ms ease; }

@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fx-red-flash { 0% { background: rgba(240, 64, 47, .45); } 100% { background: rgba(240, 64, 47, 0); } }
@keyframes fx-ability-hit { 0% { transform: translateX(0) scale(.97); } 55% { transform: translateX(8px) scale(1.03); } 100% { transform: translateX(4px) scale(1); } }
@keyframes fx-stamp { 0% { transform: translate(-50%, -50%) rotate(-24deg) scale(2); opacity: 0; } 70% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
@keyframes fx-hurt { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-ready { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-deal { from { opacity: 0; transform: translateY(40px) rotate(-2deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-slam { 0% { opacity: 0; transform: scale(1.5); } 60% { opacity: 1; transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes fx-rays { 0% { opacity: 0; transform: rotate(-20deg) scale(.6); } 40% { opacity: 1; } 100% { opacity: .8; transform: rotate(8deg) scale(1); } }
@keyframes fx-vignette { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-float { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -48px) scale(1); } }
@keyframes fx-banner { 0% { opacity: 0; transform: translate(-50%, -14px); } 18% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes fx-toast { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-nope { 0%, 100% { translate: 0 0; } 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

/* ---------- 15. responsive ---------- */

@media (min-width: 1300px) and (min-height: 860px) {
  .dbz-gadget-card { width: 152px; }
  .dbz-gadget-icon { height: 98px; }
  .dbz-gadget-desc { font-size: 14.5px; }
}

@media (max-width: 1180px) {
  .dbz-layout { grid-template-columns: 150px minmax(0, 1fr) 200px; }
  .dbz-gadget-card { width: 126px; }
  .dbz-gadget-icon { height: 76px; }
}

/* shorter desktop screens: the side column must still fit without scrolling */
@media (min-width: 1001px) and (max-height: 880px) {
  .dbz-side { gap: 8px; }
  .dbz-deck-stack { width: 70px; height: 80px; margin-top: 3px; }
  .dbz-deck-card { width: 50px; height: 70px; border-width: 2.5px; border-radius: 6px; }
  .dbz-deck-count { width: 26px; height: 26px; font-size: 12px; right: -8px; }
  .dbz-deck-label { font-size: 11px; padding: 5px 7px 2px; }
  .dbz-rules-panel { padding: 9px 11px; }
  .dbz-rules-list { font-size: 13.5px; gap: 4px; line-height: 1.2; }
  .dbz-rules-panel .dbz-panel-heading { margin-bottom: 6px; }
}

/* tablet: the play area keeps full width; decks and log move below */
@media (min-width: 721px) and (max-width: 1000px) {
  html, body { overflow: auto; }
  #pveDemoRoot { height: auto; min-height: 100svh; overflow: visible; }
  .dbz-app { height: auto; min-height: 100svh; overflow: visible; }
  .dbz-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "main main" "left right";
  }
  .dbz-main { grid-area: main; }
  .dbz-side--left { grid-area: left; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
  .dbz-side--left .dbz-rules-panel { flex: 1 1 100%; }
  .dbz-side--right { grid-area: right; }
  .dbz-arena { min-height: 340px; }
}

@media (max-width: 720px) {
  .demo-exit { left: 12px; top: 12px; }
  .dbz-header { padding-left: 0; margin-top: 58px; flex-wrap: wrap; row-gap: 10px; }
  .dbz-header-right { flex: 1 1 100%; justify-content: flex-end; }
  .dbz-header-right .dbz-status-badge { margin-right: auto; font-size: 14px; padding: 9px 14px 6px 12px; min-height: 42px; }
  .dbz-round-badge { padding: 8px 14px 6px; }
  .dbz-round-num { font-size: 20px; }

  .dbz-monster-panel { grid-template-columns: clamp(130px, 40vw, 180px) minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 6px; }
  .dbz-monster-portrait { border-width: 5px; border-radius: 10px; }
  .dbz-monster-name {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    max-width: none;
    padding: 9px 8px 5px;
    font-size: 11px;
    background: var(--c-black);
    border-radius: 0 0 6px 6px;
  }
  .dbz-monster-hp-badge { top: -8px; right: -8px; bottom: auto; padding: 7px 9px 3px; font-size: 13px; }
  .dbz-monster-side .dbz-panel { padding: 10px 10px 8px; }
  .dbz-ability { gap: 8px; padding: 6px; }
  .dbz-ability-num { width: 24px; height: 24px; font-size: 12px; }
  .dbz-ability-name { font-size: 12px; }
  .dbz-ability-desc { font-size: 14px; }

  .dbz-arena { flex-direction: column; min-height: 0; overflow: visible; padding: 16px 12px; }
  .dbz-battlefield { min-width: 0; width: 100%; }
  .dbz-gadget-side { width: 100%; border-left: 0; border-top: 2px dashed rgba(255, 246, 227, .16); padding-left: 0; padding-top: 34px; }
  .dbz-gadget-side::before { top: 12px; left: 4px; }
  .dbz-gadget-card { width: 124px; margin-left: -18px; }
  .dbz-gadget-icon { height: 72px; }

  .dbz-overlay-card { padding: 28px 20px 24px; }
  .dbz-overlay-card:has([data-action="start"]) { padding-top: 70px; margin-top: 64px; }
  .dbz-overlay-card:has([data-action="start"])::before { top: -62px; height: 116px; }
  .dbz-overlay-btn-row .dbz-btn { flex: 1 1 auto; }

  .dbz-sound-toggle { bottom: 12px; right: 12px; }
}

/* Phones, portrait: one turn (read the monster, roll, see the hit) has to
   fit the visible screen, browser bars included. Header on two tight
   rows beside the Back key, a square portrait, a denser attack list and
   a slimmer mat. The die tray keeps its fixed 220x150 size. */
@media (max-width: 720px) {
  /* re-declared: the dvh height above would otherwise win over demo.css */
  #pveDemoRoot { height: auto; min-height: 100svh; overflow: visible; }
  .demo-exit { top: 10px; left: 10px; }
  .dbz-app { padding-top: 10px; }
  .dbz-header {
    margin: 0 0 10px;
    padding-left: 92px;
    min-height: 44px;
    align-items: center;
    column-gap: 8px;
    row-gap: 14px;
  }
  .dbz-header-right { display: contents; }
  .dbz-round-badge { order: 1; padding: 6px 12px 4px; }
  .dbz-round-eyebrow { font-size: 12px; }
  .dbz-round-num { font-size: 18px; }
  .dbz-header-right .dbz-icon-btn { order: 2; width: 40px; height: 44px; padding: 7px 6px; }
  .dbz-header-right .dbz-round-badge + .dbz-icon-btn,
  .dbz-header-right > .dbz-icon-btn:first-of-type { margin-left: auto; }
  .dbz-header-right .dbz-status-badge {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
    justify-content: center;
    margin-left: -92px;
  }
  .dbz-layout { gap: 10px; }

  .dbz-monster-panel { grid-template-columns: clamp(104px, 29vw, 128px) minmax(0, 1fr); gap: 10px; padding-bottom: 0; }
  .dbz-monster-frame { padding-top: 6px; }
  .dbz-monster-portrait { height: auto; aspect-ratio: 1; }
  .dbz-monster-portrait .dbz-portrait-img { height: 100%; object-fit: cover; }
  .dbz-monster-hp-badge { top: -4px; right: -6px; padding: 6px 8px 3px; font-size: 13px; }
  .dbz-monster-side .dbz-panel { padding: 8px 10px 8px; }
  .dbz-ability-heading { margin-bottom: 4px; }
  .dbz-ability-list { gap: 2px; }
  .dbz-ability { padding: 4px 4px; gap: 8px; }
  .dbz-ability-desc { font-size: 14px; line-height: 1.22; }
  .dbz-hp-note { margin-top: 4px; font-size: 13px; }

  .dbz-arena { padding: 10px 10px 14px; }
  .dbz-battlefield { gap: 8px; }
  .dbz-player-panel { padding: 6px 14px 5px; }
  .dbz-player-label { margin-bottom: 3px; }
  .dbz-chips-label { margin-top: 2px; font-size: 15px; }
}

/* the monster frame is 72px on the tiniest screens, so its name plate
   gets a size it can actually wrap in */
@media (max-width: 360px) {
  .dbz-monster-name { font-size: 10px; padding: 7px 4px 4px; }
  .dbz-ability-desc { font-size: 13.5px; }
  /* Back + round badge on the first row; status and the three tools share the second */
  .dbz-header {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) repeat(3, 36px);
    grid-template-areas: ". round round round round" "status status i1 i2 i3";
    padding-left: 0;
    column-gap: 6px;
    row-gap: 14px;
  }
  .dbz-round-badge { grid-area: round; justify-self: start; white-space: nowrap; }
  .dbz-header-right .dbz-status-badge { grid-area: status; margin: 0; min-width: 0; padding-inline: 10px; font-size: 13px; }
  .dbz-header-right .dbz-icon-btn { width: 36px; margin: 0; }
  .dbz-header-right .dbz-icon-btn:nth-of-type(1) { grid-area: i1; }
  .dbz-header-right .dbz-icon-btn:nth-of-type(2) { grid-area: i2; }
  .dbz-header-right .dbz-icon-btn:nth-of-type(3) { grid-area: i3; }
}

/* Phones held sideways: too short for a stacked turn, so the monster and
   the mat sit side by side and the header is a single row. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  html, body { overflow: auto; }
  #pveDemoRoot, .dbz-app { height: auto; min-height: 100svh; overflow: visible; }
  .dbz-app { padding-top: 8px; }
  .demo-exit { top: 8px; left: 8px; }
  .dbz-header { margin: 0 0 16px; padding-left: 92px; flex-wrap: nowrap; min-height: 44px; }
  .dbz-round-badge { padding: 5px 12px 3px; }
  .dbz-round-eyebrow { font-size: 12px; }
  .dbz-round-num { font-size: 18px; }
  .dbz-header-right { flex: 1; justify-content: flex-end; gap: 8px; }
  .dbz-header-right .dbz-status-badge { margin-right: auto; min-height: 40px; font-size: 14px; }
  .dbz-header-right .dbz-icon-btn { width: 40px; height: 44px; }

  .dbz-layout { display: flex; flex-direction: column; gap: 12px; }
  .dbz-main {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
  }
  .dbz-side--right { order: 2; }
  .dbz-side--left { order: 3; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
  .dbz-side--left .dbz-rules-panel { flex: 1 1 100%; }

  .dbz-monster-panel { grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 0; }
  .dbz-monster-portrait { height: auto; aspect-ratio: 1; border-width: 5px; border-radius: 10px; }
  .dbz-monster-portrait .dbz-portrait-img { height: 100%; object-fit: cover; }
  .dbz-monster-name { left: 0; right: 0; bottom: 0; top: auto; transform: none; max-width: none; padding: 7px 6px 4px; font-size: 10px; border-radius: 0 0 6px 6px; }
  .dbz-monster-side .dbz-panel { padding: 8px 10px; }
  .dbz-ability { padding: 3px 4px; gap: 8px; }
  .dbz-ability-desc { font-size: 13.5px; line-height: 1.2; }

  .dbz-arena { flex-direction: column; min-height: 0; overflow: visible; padding: 8px 10px 10px; grid-row: 1 / span 2; grid-column: 2; }
  .dbz-battlefield { min-width: 0; gap: 6px; }
  .dbz-player-panel { padding: 5px 12px 4px; }
  .dbz-player-label { display: none; }
  .dbz-gadget-side { width: 100%; border-left: 0; border-top: 2px dashed rgba(255, 246, 227, .16); padding: 26px 0 0; }
  .dbz-gadget-side::before { top: 6px; left: 4px; }
  .dbz-gadget-card { width: 118px; }
  .dbz-gadget-icon { height: 68px; }
}

/* ---------- 16. reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .dbz-overlay, .dbz-overlay-card, .dbz-overlay-title, .dbz-overlay::before, .dbz-overlay::after,
  .dbz-ability.is-active, .dbz-monster-portrait::before, .dbz-status-badge, .dbz-roll-btn,
  .dbz-arena, .dbz-arena::after, .dbz-roll-btn::after, .dbz-binder-panel, .dbz-binder-backdrop {
    animation: none !important;
  }
  .fx-float, .fx-banner, .fx-ghost, .fx-toast { display: none !important; }
}

/* daily challenge */
.dbz-daily { margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(0, 0, 0, .18); text-align: center; }
.dbz-btn--daily { background: #12a5ee; color: var(--c-ink); box-shadow: 0 6px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .3); } /* the gadget-card sky blue */
.dbz-btn--daily:hover { color: var(--c-ink); filter: brightness(1.05); }
.dbz-daily-note { margin: 10px 0 0; font-size: 15px; line-height: 1.35; color: var(--c-muted); }
.dbz-daily-invite .dbz-btn--daily { animation: dbz-daily-pulse 1.6s ease-in-out 3; }
@keyframes dbz-daily-pulse { 50% { transform: scale(1.06); box-shadow: 0 6px 0 var(--c-black), 0 0 0 6px rgba(18, 165, 238, .3); } }
@media (prefers-reduced-motion: reduce) { .dbz-daily-invite .dbz-btn--daily { animation: none; } }
@media (max-width: 560px) { .dbz-btn--daily { width: 100%; } }

/* ---------- 17. play-through polish (2026-09-28) ----------
   Everything here layers on the rules above: a resumable run on the menu,
   run stats on the end screens, a keyboard hint, hit feedback on the
   monster, a boss glow, and a phone layout where one turn - monster, chips,
   die, roll, gadgets - fits on the screen instead of a long scroll. */

/* the wood table also covers the page itself, so a screen shorter than the
   viewport (the end screens on phones) never shows white below it */
html, body { background: var(--wood-4, #4a2c17); }

/* "Continue run" on the menu */
.dbz-resume {
  margin: 4px 0 20px;
  padding: 14px 14px 12px;
  background: rgba(255, 198, 41, .16);
  border: 2px dashed var(--c-gold-dk);
  border-radius: 12px;
}
.dbz-resume-btn { width: 100%; max-width: 320px; }
.dbz-resume-note { margin: 9px 0 0; font-size: 15px; line-height: 1.3; color: var(--c-muted); }

/* run stats on the end screens */
.dbz-run-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.dbz-run-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 7px;
  background: var(--c-black);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 227, .12);
}
.dbz-run-stat-num { font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--c-gold); }
.dbz-run-stat-label { font-size: 13px; line-height: 1.1; color: rgba(255, 246, 227, .72); }
.dbz-run-trophies { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 20px; }
.dbz-run-trophy {
  width: 46px;
  height: 46px;
  object-fit: cover;
  background: #fff;
  border: 3px solid var(--c-black);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--c-black);
}
.dbz-run-trophy:nth-child(2n) { transform: rotate(3deg); }
.dbz-run-trophy:nth-child(2n+1) { transform: rotate(-3deg); }
@media (max-width: 480px) {
  .dbz-run-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* keyboard hint under the roll key: pointer devices only */
.dbz-key-hint { margin-top: 2px; font-size: 14px; line-height: 1; color: rgba(255, 246, 227, .42); text-align: center; }
@media (hover: none), (max-width: 720px) { .dbz-key-hint { display: none; } }

/* the monster card jolts when it takes a hit (the red flash stays) */
.dbz-monster-frame:has(.dbz-monster-portrait.is-hit) { animation: fx-hit-jolt 380ms var(--ease-out); }
@keyframes fx-hit-jolt {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 2px) rotate(-1.5deg); }
  45% { transform: translate(6px, -2px) rotate(1deg); }
  70% { transform: translate(-3px, 1px); }
  100% { transform: translate(0, 0); }
}

/* big hits float bigger */
.fx-float--big { font-size: 46px; }

/* boss round: the card frame burns red */
.fx-boss .dbz-monster-portrait {
  box-shadow: 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 4px var(--c-red), 0 0 26px rgba(240, 64, 47, .55);
  animation: fx-boss-glow 2.2s ease-in-out infinite;
}
.fx-boss .dbz-monster-hp-badge { background: var(--c-red); }
@keyframes fx-boss-glow {
  50% { box-shadow: 0 6px 0 rgba(0, 0, 0, .5), 0 0 0 4px var(--c-red), 0 0 44px rgba(240, 64, 47, .85); }
}

/* phone ticker (demo-fx.js): newest log line under the monster */
.fx-ticker {
  display: none;
  margin: -2px 0 10px;
  padding: 7px 12px 5px;
  background: var(--c-black);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.25;
  color: var(--c-paper);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-ticker:empty { display: none !important; }
.fx-ticker--bad { color: #ff8a78; }
.fx-ticker--good { color: #6fe39a; }
.fx-ticker--player { color: var(--c-gold); }
.fx-ticker.is-new { animation: fx-ticker-in 360ms var(--ease-deal); }
@keyframes fx-ticker-in { 0% { transform: translateY(-6px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* the four difficulty keys were clipping "Standard" on narrow phones */
@media (max-width: 480px) {
  .dbz-difficulty-btn { letter-spacing: .02em; font-size: clamp(11.5px, 3.4vw, 15px); padding-inline: 0; }
}

/* PvP draft: the confirm key stays in reach while the team list scrolls */
.dbz-pvp-draft-card > .dbz-overlay-btn-row {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  margin: 6px -8px 0;
  padding: 10px 8px;
  background: var(--c-paper);
  border-radius: 12px;
  box-shadow: 0 -10px 16px -8px rgba(0, 0, 0, .35);
}

@media (max-width: 720px) {
  .fx-ticker { display: block; }
  .dbz-overlay { min-height: 100svh; }

  /* menu: the logo no longer runs into the Back key, and sits lower on the card */
  .dbz-overlay-card:has([data-action="start"]) { margin-top: 66px; padding-top: 56px; }
  .dbz-overlay-card:has([data-action="start"])::before { top: -62px; width: min(200px, 58%); height: 104px; }
  .dbz-sound-toggle { width: 40px; height: 40px; bottom: 10px; right: 10px; opacity: .9; }

  /* battle: the mat becomes a grid - chips on top, die tray beside a tall
     roll key, continue/walk-away full width, gadgets as a swipe strip */
  .dbz-battlefield {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "chips chips" "tray roll" "cont cont";
    align-items: center;
    justify-items: stretch;
    column-gap: 12px;
    row-gap: 10px;
  }
  .dbz-player-panel { grid-area: chips; }
  .dbz-die-tray { grid-area: tray; zoom: .76; }
  .dbz-roll-btn { grid-area: roll; width: 100%; min-width: 0; min-height: 96px; font-size: 27px; }
  #continueBtnContainer { grid-area: cont; }
  #continueBtnContainer:empty { display: none; }
  #continueBtnContainer .dbz-btn { width: 100%; }
  /* "Defeat it to get 1 gadget card!" - known by the second monster; the trader's own note stays */
  .dbz-monster-frame:has(.dbz-monster-hp-badge) + .dbz-monster-side .dbz-hp-note { display: none; }
  .dbz-ability-desc { font-size: 13.5px; }

  .dbz-gadget-side { padding-top: 26px; align-items: flex-start; }
  .dbz-gadget-side::before { top: 8px; }
  .dbz-gadget-hand,
  .dbz-gadget-hand--passive {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 10px 14px;
    margin: 0 -10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dbz-gadget-hand::-webkit-scrollbar { display: none; }
  .dbz-gadget-hand--empty { display: block; padding: 8px 12px 10px; margin: 0; }
  .dbz-gadget-card {
    flex: none;
    width: 118px;
    margin-left: 0;
    scroll-snap-align: center;
    transform: none !important;
  }
  .dbz-gadget-card:not(:disabled):active { transform: translateY(-4px) !important; }
  .dbz-gadget-icon { height: 68px; }
  .dbz-gadget-desc { font-size: 12.5px; }

  /* PvP tiles: a touch more room for the text */
  .dbz-pvp-draft-card { padding-inline: 12px; }
  .dbz-pvp-tile-grid { gap: 8px; }
  .dbz-pvp-card-abilities .dbz-ability-desc { font-size: 12px; }
  /* the page is the scroll container here, so the sticky confirm row sticks to the screen */
  .dbz-overlay { overflow: visible; }
}

/* PvP battle on phones: both monsters side by side above the mat instead of
   a 2000px column with the opponent out of sight while you roll */
@media (max-width: 760px) {
  html, body { overflow: auto; }
  #pveDemoRoot, .dbz-pvp-app { height: auto; min-height: 100svh; overflow: visible; }
  .dbz-pvp-battle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "p1 p2" "mat mat";
    gap: 10px;
    min-height: 0;
  }
  #pvpBattleP1 { grid-area: p1; }
  #pvpBattleP2 { grid-area: p2; }
  .dbz-pvp-battle-panel { height: auto; overflow: visible; padding: 8px 8px 10px; }
  .dbz-pvp-battle-panel .dbz-panel-heading { font-size: 14px; margin-bottom: 6px; }
  .dbz-pvp-battle-panel .dbz-pvp-card { max-width: none; padding: 6px 6px 8px; }
  .dbz-pvp-battle-panel .dbz-pvp-card-portrait { max-width: 120px; margin-inline: auto; }
  .dbz-pvp-battle-panel .dbz-pvp-card-abilities .dbz-ability-name { font-size: 10.5px; }
  .dbz-pvp-battle-panel .dbz-pvp-card-abilities .dbz-ability-desc { font-size: 11.5px; }
  .dbz-pvp-battle-panel .dbz-pvp-roster-icon { width: 34px; height: 34px; }
  .dbz-pvp-battle-center {
    grid-area: mat;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }
  .dbz-pvp-battle-center .dbz-die-tray { zoom: .72; }
  .dbz-pvp-battle-center .dbz-roll-btn { flex: 1 1 120px; min-width: 0; min-height: 92px; font-size: 24px; }
  #pvpContinueContainer:empty { display: none; }
  #pvpContinueContainer { flex: 1 1 100%; text-align: center; }
  #pvpContinueContainer .dbz-btn { width: 100%; }
  .dbz-pvp-log-panel { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dbz-monster-frame, .fx-boss .dbz-monster-portrait, .fx-ticker { animation: none !important; }
}

/* ---------- 18. coach, progress, inspect, share image, install, top 5 (2026-09-28) ---------- */

.dbz-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* run progress: one pip per round, bosses with a crown */
.dbz-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 2px;
}
.dbz-progress:empty { display: none; }
.dbz-progress-label { flex: none; font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; color: rgba(255, 246, 227, .75); white-space: nowrap; }
.dbz-progress-track { display: flex; flex: 1; align-items: center; gap: 5px; min-width: 0; }
.dbz-progress-pip {
  position: relative;
  flex: 1 1 0;
  max-width: 34px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1.5px rgba(255, 246, 227, .28);
}
.dbz-progress-pip.is-done { background: var(--c-gold); box-shadow: inset 0 0 0 1.5px var(--c-black); }
.dbz-progress-pip.is-now { background: var(--c-paper); box-shadow: 0 0 0 2px var(--c-black), 0 0 0 4px rgba(255, 246, 227, .5); }
.dbz-progress-pip.is-boss { height: 12px; }
.dbz-progress-pip.is-boss::after {
  content: "\265B";
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  color: var(--c-red);
  text-shadow: 0 1px 0 var(--c-black);
}
.dbz-progress-pip.is-boss.is-done { background: var(--c-red); }
@media (max-width: 720px) {
  .dbz-progress { margin: -2px 0 8px; }
  .dbz-progress-label { font-size: 12px; }
}

/* the monster card opens on tap; small "i" in its corner says so */
.dbz-monster-portrait[data-action] { cursor: zoom-in; }
.dbz-monster-portrait:focus-visible { outline: 4px solid var(--c-gold); outline-offset: 3px; }
.dbz-inspect-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 2px solid var(--c-black);
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  color: var(--c-ink);
  box-shadow: 0 2px 0 var(--c-black);
  pointer-events: none;
}
.dbz-gadget-card, .dbz-monster-portrait { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.dbz-gadget-card img, .dbz-monster-portrait img { -webkit-user-drag: none; pointer-events: none; }

/* share / install keys */
.dbz-share-btn-row { flex-wrap: wrap; justify-content: center; }
.dbz-install { margin-top: 14px; }
.dbz-btn--install { display: inline-flex; align-items: center; gap: 8px; background: var(--c-paper); color: var(--c-ink); box-shadow: 0 6px 0 var(--c-black), inset 0 3px 0 rgba(255, 255, 255, .6); }
.dbz-btn--install:hover { color: var(--c-ink); }
.dbz-btn--install svg { width: 20px; height: 20px; margin-top: -3px; }

/* top 5 on the end screen */
.dbz-board-top { margin: -4px 0 16px; padding: 10px 12px 8px; background: rgba(0, 0, 0, .05); border: 2px dashed rgba(0, 0, 0, .2); border-radius: 12px; text-align: left; }
.dbz-board-top-title { font-family: var(--f-display); font-size: 15px; letter-spacing: .03em; color: var(--c-purple); margin-bottom: 4px; text-align: center; }
.dbz-board-list { list-style: none; margin: 0; padding: 0; }
.dbz-board-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 4px; font-size: 16px; line-height: 1.25; color: var(--c-ink-soft); border-radius: 6px; }
.dbz-board-row.is-me { background: var(--c-gold); color: var(--c-ink); }
.dbz-board-rank { flex: none; width: 22px; font-family: var(--f-display); font-size: 14px; color: var(--c-ink); }
.dbz-board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbz-board-score { flex: none; font-family: var(--f-display); font-size: 15px; color: var(--c-ink); }
.dbz-board-unit { font-family: var(--f-body); font-size: 14px; color: var(--c-muted); }

/* modals and the coach live on <body>, outside .dbz-root: give them the site's hand font.
   Card buttons don't inherit the font on Android, so they get it explicitly too. */
.dbz-binder-modal, .coach-bubble, .dbz-gadget-card, .dbz-pvp-card { font-family: var(--f-body); }

/* the guided first turn (demo-coach.js) */
.coach-spot, .coach-bubble, .coach-bubble * { box-sizing: border-box; }
.coach-spot {
  position: fixed;
  z-index: 150;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .58), 0 0 0 4px var(--c-gold);
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease, left .25s var(--ease-out), top .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out);
}
.coach-spot.is-on { opacity: 1; }
.coach-bubble {
  position: fixed;
  z-index: 151;
  padding: 16px 16px 14px;
  background: var(--c-paper);
  border: 4px solid var(--c-black);
  border-radius: 14px;
  box-shadow: 0 8px 0 var(--c-black), 0 30px 40px -20px rgba(0, 0, 0, .8);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .28s ease, transform .28s var(--ease-out);
}
.coach-bubble.is-on { opacity: 1; transform: none; }
.coach-bubble::before {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 18px;
  height: 18px;
  background: var(--c-paper);
  border: 4px solid var(--c-black);
  border-right: 0;
  border-bottom: 0;
  transform: translateX(-50%) rotate(45deg);
  top: -13px;
}
.coach-bubble:not(.is-below)::before { top: auto; bottom: -13px; transform: translateX(-50%) rotate(225deg); }
.coach-title { font-family: var(--f-display); font-size: 22px; line-height: 1; color: var(--c-ink); margin-bottom: 8px; }
.coach-text { margin: 0 0 12px; font-size: 17px; line-height: 1.35; color: var(--c-ink-soft); }
.coach-ok { font-size: 17px; padding: 11px 18px 8px; }
@media (prefers-reduced-motion: reduce) { .coach-spot, .coach-bubble { transition: none; } }