/**
 * Scoped styles for the dice PvE demo (prefix "dbz-" = dice-battle).
 * Deliberately NO Tailwind/global.css tokens - a standalone island in
 * the "C4YOS Land Hero" cartoon style.
 *
 * VISUAL OVERHAUL (see ARCHITECTURE.md): physical tabletop feel instead
 * of a "digital UI panel" - wooden table backdrop, parchment with
 * grain/texture, hand-drawn irregular corners, card stacks with a real
 * back design, a fanned/overlapping gadget hand, a pinned log note.
 * Pure CSS textures (gradients/filters) instead of image files - no
 * texture assets were available. Game logic/functionality unchanged -
 * only the class names that game logic toggles programmatically
 * (is-hit/is-active/is-drawn/is-filled/is-empty/disabled) are kept
 * exactly as they were.
 */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#pveDemoRoot {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/**
 * FLUID fit-to-screen: no more fixed canvas (which letterboxed on
 * windows that weren't a 1600:1000 aspect ratio - visible empty margin
 * left/right). Instead `.dbz-app` truly fills 100vw x 100vh and the
 * internal layout is itself flexible (flex/grid with `flex:1`/
 * `min-height:0`, key sizes coupled to window height via `clamp()`) -
 * adapts to any aspect ratio instead of scaling a fixed image.
 */

.demo-exit {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 50;
  background: rgba(13, 11, 9, .72);
  color: #fdfaf2;
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(2px);
  transition: background .15s;
}
.demo-exit:hover {
  background: rgba(13, 11, 9, .9);
}

/* Custom properties live on :root, not just .dbz-root, so elements
   mounted directly on <body> (sound toggle, card binder modal) - which
   sit outside #pveDemoRoot's re-rendered subtree on purpose, so they
   survive render() wiping #pveDemoRoot's innerHTML - can use them too. */
:root {
  --ink: #0d0b09;
  --ink-text: #12100c;
  --ink-2: #2b2317;
  --cream: #fdfaf2;
  --parch-1: #efe3c4;
  --parch-2: #e2d3b0;
  --parch-3: #ddcda4;
  --purple: #6b3fa0;
  --purple-lt: #7f4cc0;
  --purple-dk: #5a2f92;
  --yellow: #ffd955;
  --yellow-dk: #f0b21c;
  --red: #d93a2b;
  --green: #4fbf72;
  --green-dk: #2e8b4f;
  --blue: #3fa9e8;
  --mono: #5c4f3c;
  --wood-1: #a9713f;
  --wood-2: #8a5a34;
  --wood-3: #6b4022;
  --wood-4: #4a2c17;
}

.dbz-root {
  width: 100%;
  height: 100%;
  font-family: "Patrick Hand", ui-rounded, system-ui, sans-serif;
  color: var(--ink-2);
}

.dbz-root,
.dbz-root * {
  box-sizing: border-box;
}

/* ---------- wood tabletop shell ---------- */

.dbz-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 1.2vh, 14px) clamp(14px, 2vw, 20px) clamp(10px, 1.6vh, 16px);
  box-sizing: border-box;
  overflow: hidden;
  background:
    /* fine wood grain */
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 9px),
    /* plank seams, wider spacing for real board separations */
    repeating-linear-gradient(89deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 152px),
    /* warm hanging-lamp pool, off-center like a real light source */
    radial-gradient(ellipse 60% 46% at 44% 22%, rgba(255, 220, 165, .17), transparent 64%),
    /* soft central falloff toward the edges - depth, not a flat sheet */
    radial-gradient(ellipse 78% 70% at 50% 46%, transparent 45%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(155deg, var(--wood-1), var(--wood-2) 45%, var(--wood-3) 80%, var(--wood-4));
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .5), inset 0 0 200px rgba(0, 0, 0, .4);
}

.dbz-bubbles {
  display: none;
}

/* ---------- header ---------- */

.dbz-header {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.dbz-round-badge {
  background: linear-gradient(var(--wood-2), var(--wood-3));
  border: 3px solid var(--ink);
  border-radius: 7px 10px 8px 11px;
  padding: 9px 20px 10px;
  transform: rotate(-1.4deg);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dbz-round-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--yellow);
}

.dbz-round-num {
  font-family: "Bangers", cursive;
  font-size: 21px;
  letter-spacing: .05em;
  color: var(--cream);
}

.dbz-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dbz-status-badge {
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 20px 8px 20px 8px;
  padding: 8px 20px;
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--ink-2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

.dbz-icon-btn {
  appearance: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  padding: 7px;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 9px 7px 10px 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
  transition: transform .12s, box-shadow .12s;
}
.dbz-icon-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.dbz-icon-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- shared: parchment panel with hand-drawn edge + grain ---------- */

.dbz-panel {
  position: relative;
  background:
    repeating-radial-gradient(circle at 15% 20%, rgba(43, 35, 23, .045) 0 1px, transparent 1px 3px),
    linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 11px 8px 12px 9px;
  padding: 9px 12px 10px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .32), 0 16px 20px -8px rgba(0, 0, 0, .4), inset 0 0 18px rgba(122, 90, 43, .18);
}

.dbz-panel-heading {
  font-family: "Bangers", cursive;
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--purple);
  margin-bottom: 8px;
}

/* ---------- layout ---------- */

.dbz-layout {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(160px, 13vw, 200px) minmax(0, 1fr) clamp(190px, 15vw, 230px);
  gap: clamp(10px, 1.2vw, 18px);
  align-items: stretch;
}

.dbz-side {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  min-height: 0;
}

/* ---------- deck stacks ---------- */

.dbz-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dbz-deck-label {
  align-self: flex-start;
  font-family: "Bangers", cursive;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--purple);
  background: var(--ink);
  color: var(--cream);
  padding: 2px 10px 3px;
  border-radius: 5px;
  transform: rotate(-1deg);
}
.dbz-deck--adventure .dbz-deck-label { background: var(--purple-dk); }
.dbz-deck--gadget .dbz-deck-label { background: #234b6e; }
.dbz-deck--discard .dbz-deck-label { background: #3a3530; }

.dbz-deck-stack {
  position: relative;
  width: 98px;
  height: 78px;
  margin: 4px auto 0;
}

.dbz-deck-card {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 92px;
  height: 68px;
  border: 3px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 8px 10px -4px rgba(0, 0, 0, .4);
}
.dbz-deck-card:nth-child(1) { transform: translateX(-50%) rotate(-4deg) translateY(6px); z-index: 1; }
.dbz-deck-card:nth-child(2) { transform: translateX(-50%) rotate(2deg) translateY(2px); z-index: 2; }
.dbz-deck-card:nth-child(3) { transform: translateX(-50%) rotate(-1.5deg) translateY(-2px); z-index: 3; }

.dbz-deck--adventure .dbz-deck-card { background: linear-gradient(135deg, #7f4cc0, #4d2680); }
.dbz-deck--gadget .dbz-deck-card { background: linear-gradient(135deg, #4f9fd8, #234b6e); }
.dbz-deck--discard .dbz-deck-card { background: linear-gradient(135deg, #6b675f, #3a3530); }

.dbz-deck-card svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dbz-deck-count {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #2b1a05;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .4);
}
.dbz-deck--discard .dbz-deck-count { background: var(--parch-1); }

.dbz-rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.3;
}

/* ---------- log (pinned parchment note) ---------- */

.dbz-log-panel {
  transform: rotate(.6deg);
}
.dbz-log-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0605a, var(--red) 75%);
  border: 2px solid var(--ink);
  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
  z-index: 3;
}

.dbz-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  line-height: 1.3;
}

.dbz-log-entry {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.dbz-log-icon {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.dbz-log-entry--bad { font-weight: bold; color: var(--red); }
.dbz-log-entry--good { color: var(--green-dk); }

/* ---------- main battle area ---------- */

#monsterPanelContainer,
#gadgetHandContainer,
#continueBtnContainer {
  flex: none;
}

.dbz-main {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, .8vh, 10px);
  min-height: 0;
  min-width: 0;
  /* KEIN overflow-y:auto hier (frühere Version) - das schnitt das
     Namensschild/HP-Abzeichen ab, die absichtlich mit negativem
     Offset über den Kartenrahmen hinausragen. Die Gadget-Karten
     stehen jetzt neben statt unter dem Würfel (.dbz-arena), wodurch
     der Platzbedarf ohnehin deutlich sinkt. */
}

.dbz-monster-panel {
  flex: none;
  display: grid;
  grid-template-columns: clamp(190px, 24vh, 290px) minmax(0, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
}

.dbz-monster-frame {
  position: relative;
}

.dbz-monster-name {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%) rotate(-1.5deg);
  z-index: 4;
  background: var(--purple);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 9px 6px 10px 7px;
  padding: 5px 20px 7px;
  font-family: "Bangers", cursive;
  font-size: 19px;
  letter-spacing: .06em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  white-space: nowrap;
}

.dbz-monster-portrait {
  position: relative;
  aspect-ratio: 706 / 647;
  border: 6px solid var(--wood-3);
  outline: 3px solid var(--ink);
  outline-offset: -6px;
  border-radius: 13px 9px 14px 10px;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .4), 0 20px 26px -8px rgba(0, 0, 0, .5), inset 0 0 22px rgba(0, 0, 0, .3);
  background: linear-gradient(var(--wood-1), var(--wood-2));
  transition: transform .12s;
}
.dbz-monster-portrait.is-hit {
  animation: dbz-shake .38s ease;
}
.dbz-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.dbz-monster-hp-badge {
  position: absolute;
  right: 4px;
  top: -58px;
  z-index: 5;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 10px 7px 11px 8px;
  padding: 5px 12px 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  white-space: nowrap;
}
.dbz-monster-hp-badge .dbz-heart {
  color: var(--red);
}

.dbz-monster-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dbz-ability-heading {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--purple);
  margin-bottom: 4px;
}

.dbz-ability-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dbz-ability {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 7px;
  transition: background .2s;
}
.dbz-ability.is-active {
  background: rgba(217, 58, 43, .14);
  outline: 2px dashed var(--red);
}
.dbz-ability.is-locked {
  opacity: .5;
}

.dbz-ability-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: "Bangers", cursive;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.dbz-ability-text {
  display: flex;
  flex-direction: column;
}

.dbz-ability-name {
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--ink-text);
}

.dbz-ability-desc {
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--ink-2);
}

.dbz-hp-note {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--mono);
}

/* ---------- life chips ---------- */

.dbz-chips-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dbz-chip {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 48% 52% 51% 49%;
  border: 2px solid var(--ink);
  overflow: visible;
}
.dbz-chip.is-filled {
  background: radial-gradient(circle at 32% 28%, #ff8d80 0 18%, #f0605a 30%, var(--red) 75%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 -2px 2px rgba(0, 0, 0, .2);
}
.dbz-chip.is-empty {
  background: rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.dbz-chips--sm .dbz-chip {
  width: 12px;
  height: 12px;
}

.dbz-chips-label {
  position: relative;
  margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.dbz-heart {
  color: var(--red);
}

/* ---------- life chip break/heal animation ---------- */

.dbz-chip.is-breaking {
  animation: dbz-chip-impact 80ms ease-out, dbz-chip-break-out 300ms ease-in forwards;
  animation-delay: 0ms, 80ms;
}
.dbz-chip.is-healing {
  animation: dbz-chip-pop 350ms cubic-bezier(.34, 1.56, .64, 1) forwards, dbz-chip-heal-glow 480ms ease-out forwards;
}
.dbz-chip-pulse {
  animation: dbz-chip-pulse-all 260ms ease-in-out;
}

.dbz-chip-crack {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 13px;
  height: 15px;
  animation: dbz-chip-crack-in 90ms ease-in forwards;
  animation-delay: 80ms;
  opacity: 0;
  pointer-events: none;
}

.dbz-chip-frag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--red);
  border: 1px solid var(--ink);
  border-radius: 1px;
  animation: dbz-chip-frag-fly 320ms ease-out forwards;
  animation-delay: 230ms;
  opacity: 0;
  pointer-events: none;
}

.dbz-player-panel.dbz-chips-shake {
  animation: dbz-chips-container-shake 300ms ease-out;
}

.dbz-chips-count.dbz-flash-text {
  display: inline-block;
  animation: dbz-flash-text 300ms ease-out;
}

.dbz-chip-float {
  position: absolute;
  left: 100%;
  top: -2px;
  margin-left: 6px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  animation: dbz-float-up-fade 500ms ease-out forwards;
}
.dbz-chip-float--dmg { color: #ff5544; }
.dbz-chip-float--heal { color: var(--green-dk, #2e8b4f); }

@keyframes dbz-chip-impact {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(.84) translate(-2px, 1px) rotate(-4deg); }
  60% { transform: scale(.9) translate(2px, -1px) rotate(4deg); }
  100% { transform: scale(.95) rotate(0deg); }
}
@keyframes dbz-chip-break-out {
  0% { transform: scale(.95) rotate(0deg); opacity: 1; }
  35% { transform: scale(1.1) rotate(-8deg); opacity: 1; }
  100% { transform: scale(.1) rotate(25deg); opacity: 0; }
}
@keyframes dbz-chip-crack-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes dbz-chip-frag-fly {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)) scale(.15) rotate(var(--fr)); opacity: 0; }
}
@keyframes dbz-chips-container-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes dbz-chip-pop {
  0% { transform: scale(.4) translateY(6px); opacity: 0; }
  55% { transform: scale(1.14) translateY(0); opacity: 1; }
  78% { transform: scale(.95) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes dbz-chip-heal-glow {
  0% { box-shadow: 0 0 0 rgba(255, 214, 120, 0); }
  45% { box-shadow: 0 0 10px 3px rgba(255, 214, 120, .95); }
  100% { box-shadow: 0 0 0 rgba(255, 214, 120, 0); }
}
@keyframes dbz-chip-pulse-all {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes dbz-flash-text {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes dbz-float-up-fade {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-16px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dbz-chip.is-breaking,
  .dbz-chip.is-healing,
  .dbz-chip-pulse,
  .dbz-chip-crack,
  .dbz-chip-frag,
  .dbz-player-panel.dbz-chips-shake,
  .dbz-chips-count.dbz-flash-text,
  .dbz-chip-float {
    animation: none !important;
  }
}

/* ---------- arena (Würfel-Bereich + Gadget-Hand nebeneinander) ---------- */

/**
 * Auftrag: Gadgetkarten rechts neben den Würfel statt darunter stapeln -
 * spart genau die Höhe ein, die vorher zum Überlauf/Scroll-Sicherheitsnetz
 * geführt hat (die Gadget-Hand kostete vorher zusätzliche Zeilenhöhe im
 * vertikalen Stack; jetzt teilt sie sich die Zeile mit dem Würfel-Bereich).
 */
.dbz-arena {
  flex: 1;
  min-height: 310px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 20px);
  background:
    repeating-linear-gradient(85deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, var(--wood-1), var(--wood-2) 60%, var(--wood-3));
  border: 5px solid var(--ink);
  border-radius: 13px 9px 14px 10px;
  box-shadow: 0 9px 0 rgba(0, 0, 0, .4), inset 0 0 30px rgba(0, 0, 0, .3);
  padding: clamp(8px, 1.2vh, 14px) 20px;
}

.dbz-battlefield {
  flex: none;
  /* Muss immer >= Würfel-Tray(150, fest) + Spieler-Panel(~70) +
     Würfeln-Button(~50) + Gaps sein, sonst schneidet das Arena-
     overflow:hidden die nicht-schrumpfbaren Kinder an. */
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vh, 10px);
}

.dbz-gadget-side {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 3px dashed rgba(253, 250, 242, .18);
  padding-left: clamp(10px, 1.4vw, 20px);
}

.dbz-player-panel {
  flex: none;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 10px 7px 11px 8px;
  padding: 6px 20px 7px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
  transition: transform .12s;
}
.dbz-player-panel.is-hit {
  animation: dbz-shake .38s ease;
}

.dbz-player-label {
  font-family: "Bangers", cursive;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--purple);
  text-align: center;
}

.dbz-die-tray {
  flex: none;
  position: relative;
  width: 220px;
  height: 150px;
  border-radius: 16px;
  background: linear-gradient(var(--wood-2), var(--wood-3));
  border: 5px solid var(--wood-4);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(0, 0, 0, .15);
  overflow: visible;
}
.dbz-die-tray::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  background: radial-gradient(circle at 45% 35%, #2f5d55, #1c3d38 75%);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, .5);
}

.dbz-die-shadow {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 90px;
  height: 20px;
  margin-left: -45px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  z-index: 1;
}

.dbz-die-pop {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.dbz-die {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 88px;
  height: 88px;
  margin-left: -44px;
  margin-bottom: -18px;
  will-change: transform;
  transform: rotate(-4deg);
}
.dbz-die svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3));
}

.dbz-die-fx {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.dbz-die-fx i {
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
}
.dbz-die-ring {
  border: 3px solid rgba(253, 250, 242, .5);
  border-radius: 50%;
}
.dbz-die-dust {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.dbz-die-line {
  background: var(--cream);
  border-radius: 2px;
  height: 3px;
}
.dbz-die-bub {
  border-radius: 50%;
  border: 1.5px solid rgba(13, 11, 9, .55);
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, .95) 0 16%, rgba(200, 235, 255, .5) 17% 64%, rgba(255, 255, 255, .15) 65%);
}

.dbz-roll-btn {
  flex: none;
  min-width: 190px;
}

/* ---------- buttons ---------- */

.dbz-btn {
  appearance: none;
  cursor: pointer;
  border: 4px solid var(--ink);
  border-radius: 11px 8px 12px 9px;
  padding: 10px 24px;
  font-family: "Bangers", cursive;
  font-size: 20px;
  letter-spacing: .05em;
  transition: transform .12s, box-shadow .12s;
}
.dbz-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.dbz-btn--gold {
  background: linear-gradient(#8fdb9f, var(--green-dk));
  color: #fdfaf2;
  box-shadow: 0 7px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.dbz-btn--gold:not(:disabled):hover {
  transform: translateY(3px);
  box-shadow: 0 4px 0 var(--ink), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.dbz-btn--purple {
  background: linear-gradient(var(--purple-lt), var(--purple-dk));
  color: var(--cream);
  box-shadow: 0 7px 0 var(--ink);
}
.dbz-btn--purple:hover {
  transform: translateY(3px);
  box-shadow: 0 4px 0 var(--ink);
}

/* ---------- gadget hand (fanned, overlapping) ---------- */

.dbz-gadget-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
}
.dbz-gadget-hand--empty {
  text-align: center;
  font-size: 14px;
  color: var(--parch-1);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  padding: 12px;
}

.dbz-gadget-card {
  appearance: none;
  cursor: pointer;
  position: relative;
  width: 128px;
  margin-left: -26px;
  background:
    repeating-radial-gradient(circle at 20% 15%, rgba(43, 35, 23, .04) 0 1px, transparent 1px 3px),
    linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 10px 7px 11px 8px;
  padding: 8px 10px 8px;
  text-align: center;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 12px 14px -6px rgba(0, 0, 0, .45);
  transition: transform .16s, box-shadow .16s, z-index 0s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dbz-gadget-card:first-child {
  margin-left: 0;
}
.dbz-gadget-card:nth-child(6n+1) { transform: rotate(-9deg) translateY(6px); }
.dbz-gadget-card:nth-child(6n+2) { transform: rotate(-5deg) translateY(1px); }
.dbz-gadget-card:nth-child(6n+3) { transform: rotate(-1deg) translateY(-3px); }
.dbz-gadget-card:nth-child(6n+4) { transform: rotate(3deg) translateY(-3px); }
.dbz-gadget-card:nth-child(6n+5) { transform: rotate(7deg) translateY(1px); }
.dbz-gadget-card:nth-child(6n+6) { transform: rotate(11deg) translateY(6px); }

.dbz-gadget-card:not(:disabled):hover {
  transform: translateY(-10px) scale(1.08) rotate(0deg) !important;
  z-index: 20;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .4);
}
.dbz-gadget-card:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.dbz-gadget-card.is-drawn {
  outline: 3px solid var(--green);
}

.dbz-gadget-rarity {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--purple-lt);
  border: 1.5px solid var(--ink);
}

.dbz-gadget-icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 7px 5px 8px 6px;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.dbz-gadget-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbz-gadget-name {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--purple);
}

.dbz-gadget-desc {
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-2);
}

.dbz-gadget-hint {
  margin-top: 1px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--red);
}

.dbz-gadget-tag {
  margin-top: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--mono);
}

.dbz-gadget-hand--passive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(43, 35, 23, .25);
}
.dbz-gadget-card--passive {
  cursor: default;
  outline: 2px solid var(--yellow-dk);
}
.dbz-gadget-card--passive:hover {
  transform: none !important;
}

.dbz-gadget-hand--disabled-note {
  width: 100%;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--red);
  margin-bottom: 6px;
}

/* ---------- intro / victory / defeat overlays ---------- */

.dbz-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    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));
}
/* Content taller than the viewport still needs to fully scroll into view -
   flex auto-margins on the child (below) do that; centering only kicks in
   once it actually fits. */
.dbz-overlay-card {
  margin: auto;
}

.dbz-overlay-card {
  max-width: 460px;
  width: 100%;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 5px solid var(--ink);
  border-radius: 15px 10px 16px 11px;
  box-shadow: 0 11px 0 rgba(0, 0, 0, .4);
  padding: 32px 30px 34px;
  text-align: center;
}
.dbz-overlay-card--good { border-color: var(--green); }
.dbz-overlay-card--bad { border-color: var(--red); }

.dbz-overlay-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--purple);
  text-transform: uppercase;
}

.dbz-overlay-title {
  margin: 6px 0 0;
  font-family: "Luckiest Guy", system-ui, cursive;
  font-size: 44px;
  color: var(--ink-text);
  text-shadow: 0 3px 0 rgba(255, 255, 255, .5);
}

.dbz-overlay-text {
  margin: 14px 0 22px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-2);
}

.dbz-overlay-best {
  margin: -8px 0 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.dbz-overlay-best--new {
  font-family: "Bangers", cursive;
  font-size: 20px;
  letter-spacing: .05em;
  color: var(--yellow-dk);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.dbz-difficulty-picker {
  margin: 4px 0 20px;
}
.dbz-difficulty-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mono);
  margin-bottom: 8px;
}
.dbz-difficulty-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.dbz-difficulty-btn {
  appearance: none;
  cursor: pointer;
  border: 3px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  padding: 7px 16px;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink-2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  transition: transform .12s, box-shadow .12s;
}
.dbz-difficulty-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.dbz-difficulty-btn.is-selected {
  color: var(--cream);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .35);
  transform: translateY(2px);
}
.dbz-difficulty-btn--easy.is-selected { background: linear-gradient(var(--green), var(--green-dk)); }
.dbz-difficulty-btn--standard.is-selected { background: linear-gradient(var(--purple-lt), var(--purple-dk)); }
.dbz-difficulty-btn--hard.is-selected { background: linear-gradient(var(--yellow), var(--yellow-dk)); color: var(--ink-text); }
.dbz-difficulty-btn--hell.is-selected { background: linear-gradient(#e8523f, var(--red)); }

.dbz-overlay-tip {
  margin-top: 22px;
  padding: 14px 16px;
  text-align: left;
  background: rgba(43, 35, 23, .06);
  border: 2px dashed rgba(43, 35, 23, .3);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.dbz-overlay-tip strong {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--purple);
}
.dbz-overlay-tip ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.dbz-overlay-tip li + li {
  margin-top: 6px;
}

.dbz-launch-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px dashed rgba(43, 35, 23, .2);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mono);
}
.dbz-launch-note strong {
  color: var(--purple);
}

.dbz-share-row {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dbz-share-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dbz-share-feedback {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--green-dk);
}

.dbz-btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(#3ddc73, #1fae53);
  color: #fdfaf2;
  box-shadow: 0 7px 0 var(--ink);
  text-decoration: none;
}
.dbz-btn--whatsapp:hover {
  color: #fdfaf2;
  transform: translateY(3px);
  box-shadow: 0 4px 0 var(--ink);
}
.dbz-btn--whatsapp svg { width: 17px; height: 17px; flex: none; display: block; }

/* ---------- sound toggle (floating, independent of phase) ---------- */

.dbz-sound-toggle {
  appearance: none;
  cursor: pointer;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  width: 42px;
  height: 42px;
  padding: 7px;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 9px 7px 10px 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
  transition: transform .12s, box-shadow .12s;
}
.dbz-sound-toggle:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}
.dbz-sound-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dbz-sound-toggle.is-muted {
  opacity: .6;
}

/* ---------- card binder (floating modal, independent of phase) ---------- */

.dbz-binder-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
.dbz-binder-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dbz-binder-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 11, 9, .72);
  cursor: pointer;
}

.dbz-binder-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#241b10, #150f09);
  border: 5px solid var(--ink);
  border-radius: 15px 10px 16px 11px;
  box-shadow: 0 14px 0 rgba(0, 0, 0, .45);
  overflow: hidden;
}

.dbz-binder-panel-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}

.dbz-binder-title {
  font-family: "Luckiest Guy", system-ui, cursive;
  font-size: 24px;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.dbz-binder-panel-header .dbz-icon-btn {
  font-family: "Bangers", cursive;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
}

.dbz-binder-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.dbz-binder-section-title {
  font-family: "Bangers", cursive;
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--yellow);
  margin: 18px 0 10px;
}
.dbz-binder-section-title:first-child {
  margin-top: 0;
}
.dbz-binder-section-title span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
  margin-left: 4px;
}

.dbz-binder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.dbz-binder-card {
  appearance: none;
  cursor: pointer;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 3px 0 rgba(0, 0, 0, .35);
  transition: transform .12s, box-shadow .12s;
}
.dbz-binder-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 6px 0 rgba(0, 0, 0, .4);
}

.dbz-binder-card-img {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 6px 4px 7px 5px;
  overflow: hidden;
}
.dbz-binder-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbz-binder-card-name {
  font-family: "Bangers", cursive;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--purple);
  text-align: center;
  line-height: 1.15;
}

.dbz-binder-back {
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--yellow);
  padding: 0 0 14px;
}
.dbz-binder-back:hover {
  text-decoration: underline;
}

.dbz-binder-detail {
  display: flex;
  gap: 18px;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 12px 8px 13px 9px;
  padding: 16px;
}

.dbz-binder-detail-portrait {
  flex: none;
  width: 150px;
  border: 3px solid var(--ink);
  border-radius: 9px 6px 10px 7px;
  overflow: hidden;
  align-self: flex-start;
}
.dbz-binder-detail-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbz-binder-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dbz-binder-detail-name {
  font-family: "Luckiest Guy", system-ui, cursive;
  font-size: 22px;
  color: var(--ink-text);
}

.dbz-binder-detail-hp {
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dbz-binder-detail-desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .dbz-binder-detail {
    flex-direction: column;
  }
  .dbz-binder-detail-portrait {
    width: 100%;
    max-width: 220px;
  }
}

/* ---------- rulebook modal (reuses .dbz-binder-* chrome, own content) ---------- */

.dbz-rulebook-panel {
  max-width: 780px;
}

.dbz-rb-h {
  font-family: "Bangers", cursive;
  font-size: 18px;
  letter-spacing: .05em;
  color: var(--yellow);
  margin: 20px 0 8px;
}
.dbz-rb-h:first-child {
  margin-top: 0;
}

.dbz-rb-p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
}

.dbz-rb-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
}
.dbz-rb-list li {
  margin-bottom: 6px;
}
.dbz-rb-list li b {
  color: var(--yellow);
}

.dbz-rb-sublist {
  margin: 6px 0 0;
  padding-left: 18px;
  list-style: circle;
}

.dbz-rb-tag {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px 6px 20px 6px;
  background: rgba(255, 255, 255, .08);
  color: rgba(253, 250, 242, .65);
  vertical-align: middle;
}
.dbz-rb-tag--live {
  background: rgba(79, 191, 114, .22);
  color: var(--green);
}

.dbz-rb-table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--cream);
}
.dbz-rb-table th,
.dbz-rb-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dbz-rb-table th {
  font-family: "Bangers", cursive;
  letter-spacing: .04em;
  color: var(--yellow);
  font-size: 12px;
}
.dbz-rb-table-total td {
  font-weight: bold;
  color: var(--yellow);
  border-bottom: none;
}

/* ---------- settings modal (reuses .dbz-binder-* chrome, own content) ---------- */

.dbz-settings-panel {
  max-width: 400px;
}

.dbz-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
}
.dbz-settings-row + .dbz-settings-row {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.dbz-settings-row-label {
  font-family: "Bangers", cursive;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--cream);
}

.dbz-settings-row-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(253, 250, 242, .6);
}

.dbz-toggle {
  flex: none;
  appearance: none;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

.dbz-toggle-track {
  display: block;
  width: 46px;
  height: 26px;
  border-radius: 20px;
  border: 2.5px solid var(--ink);
  background: #574632;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3);
  transition: background .15s;
  position: relative;
}

.dbz-toggle-thumb {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  transition: transform .15s;
}

.dbz-toggle.is-on .dbz-toggle-track {
  background: var(--green-dk);
}
.dbz-toggle.is-on .dbz-toggle-thumb {
  transform: translateX(20px);
}

/**
 * ---------- mobile PvE battle screen (stacked, scrollable) ----------
 * The 3-column `.dbz-layout` grid needs ~350px just for its two side
 * columns' minimums, which doesn't leave room for `.dbz-main` on a
 * ~375px phone (the side columns' content used to overflow on top of
 * the main column). Below this width the whole "fits in one viewport,
 * no scroll" layout is relaxed into a single scrollable stacked column,
 * with the battle content (`.dbz-main`) reordered to the top since it's
 * what the player actually needs first.
 */
@media (max-width: 720px) {
  html, body {
    overflow: auto;
  }
  #pveDemoRoot {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .dbz-app {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .dbz-header {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-top: 46px;
  }
  .dbz-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3vw, 18px);
  }
  .dbz-main {
    order: 1;
  }
  .dbz-side--right {
    order: 2;
  }
  /* Was a plain flex column: the sidebar's three deck stacks (each only
     ~110px wide by design) ended up marching one per full-width row down
     the page, each mostly empty space either side - a big part of why
     the phone screen read as a long stack of disconnected boxes. Row +
     wrap puts the three compact stacks side by side like a shelf, with
     only the Key Rules panel (genuinely full-width content) wrapping to
     its own line below. */
  .dbz-side--left {
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(10px, 4vw, 22px);
  }
  .dbz-side--left .dbz-deck {
    flex: 0 1 auto;
  }
  .dbz-side--left .dbz-rules-panel {
    flex: 1 1 100%;
  }
  /* Was a forced single column (portrait full-width, then the whole
     ability list below it) - stacking the two nearly doubled this panel's
     height and was the single biggest reason the phone layout needed
     constant scrolling just to play a turn. Kept side-by-side, with the
     portrait column narrowed instead of widened, so the row's height is
     the taller of the two instead of their sum. */
  .dbz-monster-panel {
    grid-template-columns: clamp(124px, 38vw, 170px) minmax(0, 1fr);
    gap: 10px;
  }
  /* Desktop pokes these above the frame on negative offsets sized for a
     ~290px-wide card; at this breakpoint's ~110px-wide frame that poke
     had nowhere to go but into the header above it (the two visibly
     overlapped). Laid directly over the portrait's own top edge instead,
     which needs no extra clearance above the frame at all. A wider
     column (above) plus wrapping here (was a single ellipsis-truncated
     line - "Karate Goldfish" came out as "KARA...") gives long names
     room to break onto a second line instead of getting cut off. */
  .dbz-monster-name {
    left: 6px;
    top: 6px;
    right: 6px;
    transform: none;
    max-width: calc(100% - 12px);
    white-space: normal;
    line-height: 1.2;
    font-size: 11px;
    padding: 3px 8px 4px;
  }
  /* Was top-right, same corner/row as the name badge above - once that
     name could wrap to two lines, the two started overlapping. Moved
     to the portrait's bottom-right instead, clear of the name however
     many lines it wraps to. */
  .dbz-monster-hp-badge {
    top: auto;
    bottom: 6px;
    right: 6px;
    font-size: 11px;
    padding: 3px 7px 4px;
  }
  .dbz-arena {
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }
  .dbz-battlefield {
    min-width: 0;
    width: 100%;
  }
  .dbz-gadget-side {
    width: 100%;
    border-left: none;
    border-top: 3px dashed rgba(253, 250, 242, .18);
    padding-left: 0;
    padding-top: clamp(10px, 3vw, 16px);
  }
}

/* ---------- 1v1 PvP mode ---------- */

.dbz-overlay-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.dbz-pvp-draft-card {
  max-width: 920px;
  padding: 22px 24px 26px;
}

.dbz-pvp-face-off-note {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--purple);
  margin-bottom: 8px;
}

.dbz-pvp-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
  text-align: left;
}
.dbz-pvp-tile-grid--single {
  grid-template-columns: minmax(140px, 240px);
  justify-content: center;
  margin-bottom: 16px;
}

.dbz-pvp-card {
  position: relative;
  appearance: none;
  cursor: pointer;
  width: 100%;
  background: linear-gradient(var(--parch-1), var(--parch-3));
  border: 3px solid var(--ink);
  border-radius: 11px 8px 12px 9px;
  padding: 8px 8px 10px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .32);
  transition: transform .12s, box-shadow .12s;
  text-align: center;
}
button.dbz-pvp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, .35);
}
.dbz-pvp-card.is-selected {
  outline: 3px solid var(--green-dk);
  outline-offset: 2px;
}
.dbz-pvp-card.is-disabled {
  cursor: default;
  opacity: .5;
}
.dbz-pvp-card.is-hit {
  animation: dbz-shake .38s ease;
}

.dbz-pvp-card-check {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-dk);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-size: 14px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

.dbz-pvp-card-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background: var(--red);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .06em;
}

.dbz-pvp-card-portrait {
  aspect-ratio: 706 / 647;
  border: 3px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  overflow: hidden;
  margin-bottom: 6px;
}

.dbz-pvp-card-name {
  font-family: "Bangers", cursive;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--purple);
}

.dbz-pvp-card-hp {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--red);
  margin: 2px 0 4px;
}

.dbz-pvp-card-abilities {
  text-align: left;
}
.dbz-pvp-card-abilities .dbz-ability-list {
  gap: 2px;
}
.dbz-pvp-card-abilities .dbz-ability {
  padding: 2px 4px;
  gap: 6px;
}
.dbz-pvp-card-abilities .dbz-ability-num {
  width: 16px;
  height: 16px;
  font-size: 10px;
  box-shadow: none;
}
.dbz-pvp-card-abilities .dbz-ability-name {
  font-size: 11.5px;
}
.dbz-pvp-card-abilities .dbz-ability-desc {
  font-size: 10.5px;
  line-height: 1.15;
}

.dbz-pvp-roster {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.dbz-pvp-roster-icon {
  width: 38px;
  height: 38px;
  border: 2px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  overflow: hidden;
  opacity: .5;
  filter: grayscale(.6);
}
.dbz-pvp-roster-icon--active {
  opacity: 1;
  filter: none;
  outline: 2px solid var(--green-dk);
  outline-offset: 1px;
}
.dbz-pvp-roster-icon--available {
  opacity: .85;
  filter: none;
}
.dbz-pvp-roster-icon--defeated {
  opacity: .35;
  filter: grayscale(1);
}
.dbz-pvp-roster-icon-img {
  width: 100%;
  height: 100%;
}
.dbz-pvp-roster-icon-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dbz-pvp-rolloff {
  flex: 1;
  min-height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  background:
    repeating-linear-gradient(85deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, var(--wood-1), var(--wood-2) 60%, var(--wood-3));
  border: 5px solid var(--ink);
  border-radius: 13px 9px 14px 10px;
  box-shadow: 0 9px 0 rgba(0, 0, 0, .4), inset 0 0 30px rgba(0, 0, 0, .3);
  padding: clamp(8px, 1.2vh, 14px) 20px;
}

.dbz-pvp-rolloff-side {
  flex: none;
}

.dbz-pvp-rolloff-panel {
  text-align: center;
  min-width: 120px;
}

.dbz-pvp-rolloff-value {
  font-family: "Luckiest Guy", system-ui, cursive;
  font-size: 44px;
  color: var(--ink-text);
}

.dbz-pvp-rolloff-center {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 10px);
}

.dbz-pvp-battle-layout {
  flex: 1;
  min-height: 310px;
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 20px);
}

.dbz-pvp-battle-side {
  flex: 1;
  min-width: 0;
}

.dbz-pvp-battle-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
/* The active-monster card here reuses the same .dbz-pvp-card used for
   small grid tiles elsewhere, but this panel can be much wider - without
   a cap the aspect-ratio portrait grows to fill that width and pushes
   the name/HP/abilities out of view. */
.dbz-pvp-battle-panel .dbz-pvp-card {
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
}

.dbz-pvp-battle-center {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vh, 10px);
  background:
    repeating-linear-gradient(85deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, var(--wood-1), var(--wood-2) 60%, var(--wood-3));
  border: 5px solid var(--ink);
  border-radius: 13px 9px 14px 10px;
  box-shadow: 0 9px 0 rgba(0, 0, 0, .4), inset 0 0 30px rgba(0, 0, 0, .3);
  padding: clamp(8px, 1.2vh, 14px) 20px;
}

.dbz-pvp-empty-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--mono);
  text-align: center;
  padding: 20px;
}

.dbz-pvp-log-panel {
  flex: none;
  margin-top: clamp(6px, 1vh, 10px);
  max-height: 140px;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .dbz-pvp-battle-layout {
    flex-direction: column;
  }
  .dbz-pvp-rolloff {
    flex-direction: column;
    min-height: 0;
    gap: clamp(10px, 3vw, 20px);
  }
}

/* ---------- motion ---------- */

@keyframes dbz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-1deg); }
  40% { transform: translateX(5px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ---------- card draw flight (new monster / newly-drawn gadget) ----------
 * A temporary, unclipped overlay (position:fixed on <body>) flies from the
 * relevant stack pile's actual screen position to the real card's actual
 * screen position - real cross-screen travel, not an in-place pop - then
 * hands off to the already-rendered real element underneath.
 *
 * Draw-animation spec: anticipation (scale/lift/rotate + fade in) -> flight
 * with an easeOutBack arcade overshoot -> easeOutQuad settle, 720ms total.
 * The face-swap is a 2D scaleX "squash flip" (card side-on at the midpoint,
 * content swaps there) rather than a 3D rotateY - deliberately avoids
 * rotateY/backface-visibility per the animation spec (unreliable in some
 * render hosts); scaleX also sidesteps the need for a 3D perspective
 * context entirely. */

.dbz-draw-overlay {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}
.dbz-draw-inner {
  position: absolute;
  inset: 0;
  animation: dbz-draw-outer .6s linear forwards;
}

.dbz-flip-face--front,
.dbz-flip-face--back {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.dbz-flip-face--front {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dbz-draw-front-out .6s linear forwards;
}
.dbz-flip-face--front svg {
  width: 45%;
  height: 45%;
}
.dbz-flip-face--back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  animation: dbz-draw-back-in .6s linear forwards;
}

/* Card chrome - the overlay only carries loose content by default, so give
   each context its real card frame (border/background/shadow) to fly with,
   matching the actual card/portrait/deck-pile styling. */
.dbz-draw-overlay--gadget .dbz-flip-face--front,
.dbz-draw-overlay--gadget .dbz-flip-face--back {
  border: 3px solid var(--ink);
  border-radius: 10px 7px 11px 8px;
}
.dbz-draw-overlay--gadget .dbz-flip-face--front {
  background: linear-gradient(135deg, #4f9fd8, #234b6e);
}
.dbz-draw-overlay--gadget .dbz-flip-face--back {
  background:
    repeating-radial-gradient(circle at 20% 15%, rgba(43, 35, 23, .04) 0 1px, transparent 1px 3px),
    linear-gradient(var(--parch-1), var(--parch-3));
  padding: 8px 10px;
}

.dbz-draw-overlay--monster .dbz-flip-face--front,
.dbz-draw-overlay--monster .dbz-flip-face--back {
  border: 6px solid var(--wood-3);
  outline: 3px solid var(--ink);
  outline-offset: -6px;
  border-radius: 13px 9px 14px 10px;
}
.dbz-draw-overlay--monster .dbz-flip-face--front {
  background: linear-gradient(135deg, #7f4cc0, #4d2680);
}
.dbz-draw-overlay--monster .dbz-flip-face--back {
  background: linear-gradient(var(--wood-1), var(--wood-2));
}

.dbz-flip-face--back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .6) 52%, transparent 62%);
  background-size: 250% 250%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
  animation: dbz-card-shine .4s ease-out .4s;
}

/* Outer: a brief lift+shrink+tilt from the measured stack position
   (--draw-dx/--draw-dy) into a clean easeOutBack settle at (0,0) - a small,
   controlled snap rather than a big bounce. Times as fractions of 600ms:
   130ms=21.7%, 480ms(flightEnd)=80%, 600ms=100%. */
@keyframes dbz-draw-outer {
  0%   { transform: translate(var(--draw-dx), var(--draw-dy)) scale(.68) rotate(-4deg); opacity: 0; }
  21.7% { transform: translate(var(--draw-dx), calc(var(--draw-dy) - 10px)) scale(.74) rotate(-2deg); opacity: 1; }
  80%  { transform: translate(0, 0) scale(1.025) rotate(.6deg); opacity: 1; animation-timing-function: cubic-bezier(.22, 1.12, .48, 1); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
}

/* Squash-flip: scaleX sweeps 1 -> ~0 -> content crossfades at the crossing
   (card edge-on) -> back face sweeps ~0 -> 1. Turn happens over 130ms-480ms
   (easeInOutQuad); crossing at 305ms=50.8%, crossfade over a few % either
   side rather than an instant cut. */
@keyframes dbz-draw-front-out {
  0%     { transform: scaleX(1); opacity: 1; }
  21.7%  { transform: scaleX(1); opacity: 1; }
  49.2%  { transform: scaleX(.05); opacity: 1; animation-timing-function: cubic-bezier(.455, .03, .515, .955); }
  52.5%  { transform: scaleX(.05); opacity: 0; }
  100%   { transform: scaleX(.05); opacity: 0; }
}
@keyframes dbz-draw-back-in {
  0%     { transform: scaleX(.05); opacity: 0; }
  49.2%  { transform: scaleX(.05); opacity: 0; }
  52.5%  { transform: scaleX(.05); opacity: 1; animation-timing-function: cubic-bezier(.455, .03, .515, .955); }
  80%    { transform: scaleX(1); opacity: 1; }
  100%   { transform: scaleX(1); opacity: 1; }
}

@keyframes dbz-card-shine {
  0% { background-position: 130% 0; opacity: 0; }
  25% { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dbz-root * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}