/* ============================================================
 * C4YOS LAND DEMO — THE TABLE (demo rework, battle screen)
 *
 * You sit at a table. The printed cards are the game: the monster's
 * card lies on a stitched felt mat, life is counted in chips, your
 * hand peeks over the table edge. No text panels.
 *
 * Markup comes from demo-next.js (buildShell / updateBattleUI).
 * .tbl-stage has a fixed logical size and is scaled to the window by
 * fitStage(); data-layout switches between "wide" (1180-1760 x 768)
 * and "tall" (390 x 700-960). All sizes below are stage pixels.
 * ============================================================ */

body.tbl-on { overflow: hidden; background: #2e1908; }
body.tbl-on .demo-exit,
body.tbl-on .dbz-sound-toggle { display: none; }

.tbl-app {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--f-body);
  color: var(--c-paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 190, 110, .18), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .78) 100%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #5a3519, #43260f 60%, #2e1908);
}
.tbl-app *, .tbl-app *::before, .tbl-app *::after { box-sizing: border-box; }
.tbl-app button { font: inherit; color: inherit; cursor: pointer; }
.tbl-app [hidden] { display: none !important; }
.tbl-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.tbl-label {
  display: block;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 246, 227, .5);
}

/* a printed card: the real card image, rounded like the physical one */
.tbl-card {
  display: block;
  padding: 0;
  border: 0;
  background: #000;
  border-radius: 4.6% / 3.1%;
  overflow: hidden;
}
.tbl-card img { display: block; width: 100%; height: 100%; pointer-events: none; }
.tbl-card:focus-visible { outline: 4px solid var(--c-gold); outline-offset: 3px; }

/* ------------------------------------------------------------
 * top bar
 * ------------------------------------------------------------ */

.tbl-bar { position: absolute; left: 0; right: 0; top: 0; height: 70px; display: flex; align-items: center; gap: 18px; padding: 0 22px; z-index: 6; }
.tbl-exit { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; color: rgba(255, 246, 227, .8); text-decoration: none; padding: 8px 4px; }
.tbl-exit b { font-weight: 400; }
.tbl-exit:hover { color: var(--c-gold); }
.tbl-progress { display: flex; align-items: center; gap: 14px; margin-left: 14px; }
.tbl-round { font-family: var(--f-display); font-size: 22px; line-height: 1; color: var(--c-gold); text-shadow: 0 3px 0 #000; white-space: nowrap; }
.tbl-track { display: flex; align-items: center; gap: 5px; }
.tbl-track.is-long { gap: 4px; }
.tbl-track.is-long .tbl-pip:not(.is-boss) { width: 10px; }
.tbl-pip { flex: none; width: 19px; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 2px solid #000; }
.tbl-pip.is-done { background: var(--c-gold); }
.tbl-pip.is-now { background: var(--c-paper); box-shadow: 0 0 0 3px rgba(255, 198, 41, .5); }
.tbl-pip.is-boss { width: 20px; height: 20px; border-radius: 50%; background: #7a1c1c; position: relative; }
.tbl-pip.is-boss::after { content: "♛"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: var(--c-paper); }
.tbl-pip.is-boss.is-done { background: var(--c-gold); }
.tbl-pip.is-boss.is-done::after { color: #1d1300; }
.tbl-pip.is-boss.is-now { background: #e02a2a; }

.tbl-turn {
  position: absolute;
  left: 50%;
  top: 14px;
  translate: -50% 0;
  padding: 9px 26px 6px;
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--c-gold);
  color: #1d1300;
  border: 4px solid #000;
  border-radius: 12px;
  box-shadow: 0 5px 0 #000;
  rotate: -1.5deg;
  transition: background-color .25s, color .25s;
}
[data-turn="monster"] .tbl-turn, [data-turn="rolling"] .tbl-turn { background: var(--c-paper); }
[data-turn="defeated"] .tbl-turn { background: var(--c-green); }
.is-boss[data-turn="monster"] .tbl-turn { background: #e02a2a; color: #fff; }
.tbl-turn.is-new { animation: tbl-pop .36s var(--ease-deal); }

.tbl-tools { margin-left: auto; display: flex; gap: 10px; }
.tbl-knob {
  width: 46px; height: 46px; padding: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a5a2c, #4a2a10);
  border: 3px solid #000; box-shadow: 0 4px 0 #000;
  display: grid; place-items: center;
  transition: translate .12s, box-shadow .12s;
}
.tbl-knob svg { width: 100%; height: 100%; display: block; }
.tbl-knob:hover { translate: 0 -2px; box-shadow: 0 6px 0 #000; }
.tbl-knob:active { translate: 0 3px; box-shadow: 0 1px 0 #000; }
.tbl-knob.is-muted { filter: grayscale(.7) brightness(.8); }

/* ------------------------------------------------------------
 * the playmat
 * ------------------------------------------------------------ */

.tbl-mat {
  position: absolute;
  left: 50%;
  top: 86px;
  width: 1066px;
  height: 512px;
  margin-left: -533px;
  border-radius: 30px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(90, 130, 255, .22), transparent 70%),
    linear-gradient(180deg, #17255c, #0f1a45);
  border: 5px solid #000;
  box-shadow: 0 18px 0 rgba(0, 0, 0, .45), 0 40px 60px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .06);
  transition: background-color .4s;
}
.tbl-mat::before { content: ""; position: absolute; inset: 14px; border-radius: 20px; border: 2px dashed rgba(255, 246, 227, .22); pointer-events: none; }
.tbl-mat::after { content: ""; position: absolute; inset: 0; border-radius: 25px; background: #e02a2a; opacity: 0; pointer-events: none; }
.tbl-mat.is-hurt { animation: tbl-shake .34s ease-out; }
.tbl-mat.is-hurt::after { animation: tbl-red .5s ease-out; }
.is-boss .tbl-mat {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255, 70, 60, .26), transparent 70%),
    linear-gradient(180deg, #3d1220, #24091a);
}

/* decks */
.tbl-decks { position: absolute; left: 46px; top: 30px; display: grid; gap: 34px; }
.tbl-deck { position: relative; width: 104px; }
.tbl-deck-stack { position: relative; display: block; width: 104px; height: 155px; margin-top: 14px; }
.tbl-deck-stack i { position: absolute; inset: 0; border-radius: 8px; border: 3px solid #000; display: grid; place-items: center; }
.tbl-deck-stack i:nth-child(1) { translate: 6px 6px; }
.tbl-deck-stack i:nth-child(2) { translate: 3px 3px; }
.tbl-deck-stack svg { width: 76%; height: auto; }
.tbl-deck--adventure .tbl-deck-stack i { background: repeating-linear-gradient(45deg, #5b36b0 0 10px, #4a2a95 10px 20px); }
.tbl-deck--gadget .tbl-deck-stack i { background: repeating-linear-gradient(45deg, #1489d8 0 10px, #0f6fb3 10px 20px); }
.tbl-deck.is-empty .tbl-deck-stack i { background: rgba(0, 0, 0, .25); border-style: dashed; border-color: rgba(255, 246, 227, .3); translate: 0 0; }
.tbl-deck.is-empty .tbl-deck-stack svg { opacity: .2; }
.tbl-deck-count {
  position: absolute; right: -14px; bottom: -12px; min-width: 34px; height: 34px; padding: 2px 6px 0; border-radius: 17px;
  background: var(--c-gold); color: #1d1300; border: 3px solid #000;
  display: grid; place-items: center; font-family: var(--f-display); font-size: 16px; line-height: 1;
}

/* the monster */
.tbl-foe { position: absolute; left: 180px; top: 20px; width: 380px; height: 480px; }
.tbl-monster {
  position: absolute; left: 68px; top: 6px; width: 280px; height: 418px; rotate: -2.5deg;
  box-shadow: 0 0 0 3px #000, 0 14px 0 rgba(0, 0, 0, .5), 0 34px 50px rgba(0, 0, 0, .6);
  transition: rotate .25s var(--ease-out), translate .25s var(--ease-out), filter .4s;
}
.tbl-monster:hover { rotate: -1deg; translate: 0 -4px; }
.tbl-monster.is-boss { box-shadow: 0 0 0 3px #000, 0 0 0 8px #e02a2a, 0 14px 0 rgba(0, 0, 0, .5), 0 0 60px rgba(255, 60, 50, .55); }
.tbl-monster::after { content: ""; position: absolute; inset: 0; background: #ff2a1a; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.tbl-monster.is-hit { animation: tbl-jolt .38s ease-out; }
.tbl-monster.is-hit::after { animation: tbl-red .38s ease-out; }
.tbl-monster.is-defeated img { filter: grayscale(1) brightness(.7); transition: filter .4s; }
.tbl-stamp {
  position: absolute; left: 50%; top: 32%; translate: -50% -50%; rotate: -12deg; padding: 10px 18px 5px;
  font-family: var(--f-display); font-size: 40px; line-height: 1; text-transform: uppercase; letter-spacing: .03em;
  color: #ff4a3d; border: 5px solid #ff4a3d; border-radius: 10px; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
}
.tbl-monster.is-defeated .tbl-stamp { opacity: 1; animation: tbl-stamp .42s var(--ease-deal); }

.tbl-foe-hp { position: absolute; left: 6px; top: 44px; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tbl-foe-hp.is-many { top: 20px; gap: 4px; }
.tbl-foe-hp.is-many .tbl-chip { width: 24px; height: 24px; }
.tbl-foe-hp.is-many .tbl-chip::after { font-size: 9px; }
.tbl-chip {
  display: block; width: 28px; height: 28px; border-radius: 50%; position: relative; flex: none;
  background:
    radial-gradient(circle at 50% 50%, #ff5a4d 0 38%, transparent 39%),
    repeating-conic-gradient(#fff6e3 0 18deg, #e02a2a 18deg 45deg);
  border: 3px solid #000;
  box-shadow: 0 3px 0 #000, inset 0 0 0 3px #e02a2a;
}
.tbl-chip::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff6e3; }
.tbl-chip.is-lost { background: rgba(0, 0, 0, .35); border-style: dashed; border-color: rgba(255, 246, 227, .35); box-shadow: none; }
.tbl-chip.is-lost::after { content: ""; }
.tbl-chip.is-breaking { animation: tbl-chip-out .42s ease-out; }
.tbl-chip.is-healing { animation: tbl-chip-in .42s var(--ease-deal); }
.tbl-foe-count { margin-top: 6px; font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1; color: var(--c-paper); text-shadow: 0 3px 0 #000; }

.tbl-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tbl-tags--foe { position: absolute; left: 60px; top: 436px; width: 300px; justify-content: center; }
.tbl-tag { padding: 4px 9px 2px; border-radius: 8px; border: 2px solid #000; font-size: 15px; line-height: 1.15; background: var(--c-paper); color: var(--c-ink); }
.tbl-tag--bad { background: #ffd9d2; color: #7a140b; }
.tbl-tag--good { background: #cdf5dc; color: #0d4a25; }
.tbl-tag--dim { background: rgba(0, 0, 0, .45); color: rgba(255, 246, 227, .7); border-color: rgba(255, 246, 227, .25); }

/* what the die just did */
.tbl-said { position: absolute; left: 566px; top: 22px; width: 264px; height: 88px; display: grid; place-items: center; text-align: center; }
.tbl-said-line { margin: 0; font-family: var(--f-display); font-size: 24px; line-height: 1.05; text-transform: uppercase; color: var(--c-paper); text-shadow: 0 3px 0 #000; rotate: 2deg; animation: tbl-pop .36s var(--ease-deal); }
.tbl-said-line em { font-style: normal; font-size: 34px; color: var(--c-gold); }
.tbl-slip {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left;
  background: var(--c-paper); color: var(--c-ink); border: 4px solid #000; border-radius: 12px; box-shadow: 0 5px 0 #000;
  rotate: -1deg; animation: tbl-pop .36s var(--ease-deal);
}
.tbl-slip-die { flex: none; width: 42px; height: 42px; }
.tbl-slip-die svg { display: block; width: 100%; height: 100%; }
.tbl-slip-text { min-width: 0; font-size: 16px; line-height: 1.15; color: var(--c-ink-soft); }
.tbl-slip-text b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 17px; line-height: 1.05; text-transform: uppercase; color: var(--c-red-text); }
.tbl-slip-text span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* die tray + the big button */
.tbl-rollrow { position: absolute; left: 580px; top: 116px; width: 236px; }
.tbl-tray {
  position: relative; width: 236px; height: 196px; border-radius: 26px;
  background: linear-gradient(180deg, #7a4a22, #54300f); border: 4px solid #000;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .5), inset 0 3px 0 rgba(255, 255, 255, .18);
}
.tbl-tray::before {
  content: ""; position: absolute; inset: 16px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 35%, #2f8a5d, #17573a); border: 3px solid #000;
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, .45);
}
.tbl-tray-in { position: absolute; left: 0; top: 0; width: 236px; height: 196px; transform-origin: 0 0; }
.tbl-tray .dbz-die { bottom: 64px; width: 96px; height: 96px; margin-left: -48px; }
.tbl-tray .dbz-die-shadow { bottom: 62px; }
.tbl-tray .dbz-die-fx { bottom: 66px; }

.tbl-actions { margin-top: 26px; display: grid; gap: 10px; }
.tbl-roll {
  width: 100%; height: 74px; padding: 6px 0 0; border-radius: 16px;
  background: linear-gradient(180deg, #ffd95a, #ffc629 55%, #e9a400);
  border: 4px solid #000; box-shadow: 0 9px 0 #000;
  font-family: var(--f-display) !important; font-size: 34px !important; line-height: 1; text-transform: uppercase; color: #1d1300 !important;
  transition: translate .1s, box-shadow .1s, filter .2s;
}
.tbl-roll:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 11px 0 #000; }
.tbl-roll:active:not(:disabled) { translate: 0 7px; box-shadow: 0 2px 0 #000; }
.tbl-roll:disabled { filter: grayscale(.85) brightness(.75); cursor: default; }
.tbl-roll:focus-visible, .tbl-btn:focus-visible, .tbl-knob:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
[data-turn="player"] .tbl-roll, [data-turn="trader"] .tbl-roll { animation: tbl-ready 1.6s ease-in-out infinite; }
.tbl-keys { display: none; }

.tbl-btn {
  display: block; width: 100%; padding: 13px 14px 9px; border-radius: 14px; border: 4px solid #000; box-shadow: 0 6px 0 #000;
  font-family: var(--f-display) !important; font-size: 19px !important; line-height: 1.05; text-transform: uppercase; text-align: center;
  transition: translate .1s, box-shadow .1s;
}
.tbl-btn:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 8px 0 #000; }
.tbl-btn:active:not(:disabled) { translate: 0 4px; box-shadow: 0 2px 0 #000; }
.tbl-btn:disabled { filter: grayscale(.85) brightness(.75); cursor: default; }
.tbl-btn--purple { background: var(--c-purple); color: #fff !important; }
.tbl-btn--gold { background: var(--c-gold); color: #1d1300 !important; }
.tbl-btn--paper { background: var(--c-paper); color: var(--c-ink) !important; }
.tbl-continue { height: 74px; font-size: 22px !important; background: var(--c-green); color: #04220f !important; animation: tbl-ready 1.6s ease-in-out infinite; }

/* you */
.tbl-you { position: absolute; left: 854px; top: 60px; width: 190px; }
.tbl-you > .tbl-label { font-family: var(--f-display); font-size: 19px; letter-spacing: .02em; color: var(--c-gold); text-shadow: 0 3px 0 #000; }
.tbl-you #playerChips { position: relative; margin-top: 10px; }
.tbl-app .dbz-chips-row { display: grid; grid-template-columns: repeat(5, 34px); gap: 8px 4px; }
.tbl-app .dbz-chip { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #000; }
.tbl-app .dbz-chip.is-filled {
  background:
    radial-gradient(circle at 50% 50%, #ff5a4d 0 38%, transparent 39%),
    repeating-conic-gradient(#fff6e3 0 18deg, #e02a2a 18deg 45deg);
  box-shadow: 0 4px 0 #000, inset 0 0 0 3px #e02a2a;
}
.tbl-app .dbz-chip.is-filled::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; line-height: 1; color: #fff6e3; }
.tbl-app .dbz-chip.is-breaking::after { content: none; }
.tbl-app .dbz-chip.is-empty { background: rgba(0, 0, 0, .35); border-style: dashed; border-color: rgba(255, 246, 227, .35); box-shadow: none; }
.tbl-app .dbz-chip-crack { top: 4px; left: 6px; width: 20px; height: 24px; }
.tbl-app .dbz-chips-label { margin-top: 12px; font-family: var(--f-display); font-size: 26px; line-height: 1; text-align: left; color: var(--c-paper); text-shadow: 0 3px 0 #000; }
.tbl-app .dbz-chips-label .dbz-heart { display: none; }
.tbl-app .dbz-chip-float { display: none; }
.tbl-you.dbz-chips-shake { animation: dbz-chips-container-shake 300ms ease-out; }
.tbl-you .tbl-tags { margin-top: 10px; }
.tbl-passives { margin-top: 18px; }
.tbl-passive-row { display: flex; gap: 10px; margin-top: 10px; }
.tbl-passive { width: 84px; height: 125px; box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--c-green), 0 8px 0 rgba(0, 0, 0, .45); transition: translate .2s var(--ease-out), rotate .2s var(--ease-out); }
.tbl-passive:nth-child(odd) { rotate: 2deg; }
.tbl-passive:nth-child(even) { rotate: -2deg; }
.tbl-passive:hover { translate: 0 -5px; rotate: 0deg; }
.tbl-passive-row:has(.tbl-passive:nth-child(3)) .tbl-passive { width: 58px; height: 87px; }

/* ------------------------------------------------------------
 * your hand: real cards, fanned, peeking over the table edge
 * ------------------------------------------------------------ */

.tbl-hand { position: absolute; left: 50%; top: 572px; width: 0; height: 0; z-index: 4; }
.tbl-hand-card {
  position: absolute; left: -79px; top: 0; width: 158px; height: 236px;
  translate: calc(var(--o) * var(--sw)) calc(var(--o) * var(--o) * 7px);
  rotate: calc(var(--o) * var(--r));
  transform-origin: 50% 120%;
  box-shadow: 0 0 0 3px #000, 0 -6px 30px rgba(0, 0, 0, .55);
  transition: translate .18s var(--ease-out), rotate .18s var(--ease-out), scale .18s var(--ease-out), box-shadow .18s, filter .2s;
}
.tbl-hand-card.is-off img { filter: saturate(.55) brightness(.72); }
.tbl-hand-card::after {
  content: attr(data-key); position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: #000; color: var(--c-gold); display: grid; place-items: center; padding-top: 2px;
  font-family: var(--f-display); font-size: 14px; line-height: 1;
}
.tbl-hand-card.is-off::after { color: rgba(255, 246, 227, .5); }
@media (hover: hover) and (pointer: fine) {
  .tbl-hand-card:hover, .tbl-hand-card:focus-visible {
    translate: calc(var(--o) * var(--sw)) -34px; rotate: 0deg; z-index: 20 !important;
    box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--c-gold), 0 -10px 40px rgba(255, 198, 41, .45);
  }
  .tbl-hand-card.is-off:hover, .tbl-hand-card.is-off:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(255, 246, 227, .5), 0 -6px 30px rgba(0, 0, 0, .55); }
}
.tbl-hand-card.is-drawn, .tbl-passive.is-drawn { animation: tbl-drawn 1.2s ease-out; }
.tbl-hand-empty { position: absolute; left: -200px; width: 400px; top: 70px; margin: 0; text-align: center; font-size: 19px; color: rgba(255, 246, 227, .45); }

/* the hovered hand card, big enough to read (pointer passes through it) */
.tbl-peek {
  position: absolute; top: 176px; width: 250px; height: 373px; margin-left: -125px; z-index: 25; pointer-events: none;
  box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--c-gold), 0 24px 60px rgba(0, 0, 0, .75);
  animation: tbl-peek .16s var(--ease-out);
}
.tbl-peek.is-off { box-shadow: 0 0 0 4px #000, 0 0 0 8px rgba(255, 246, 227, .45), 0 24px 60px rgba(0, 0, 0, .75); }
[data-layout="tall"] .tbl-peek { display: none; }

/* a played card on its way to the monster */
.tbl-ghost { position: fixed; z-index: 600; pointer-events: none; border-radius: 4.6% / 3.1%; overflow: hidden; box-shadow: 0 0 0 3px #000, 0 20px 40px rgba(0, 0, 0, .6); }
.tbl-ghost img { display: block; width: 100%; height: 100%; }

/* a card drawn from a stack (playCardDraw) */
.dbz-draw-overlay--tcard .dbz-flip-face--front,
.dbz-draw-overlay--tcard .dbz-flip-face--back { border-radius: 4.6% / 3.1%; border: 3px solid #000; background: #000; padding: 0; }
.dbz-draw-overlay--tcard .dbz-flip-face--front { background: repeating-linear-gradient(45deg, #5b36b0 0 10px, #4a2a95 10px 20px); }
.dbz-draw-overlay--tcard .dbz-flip-face--back img { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------
 * newest line of the battle log, and the log itself
 * ------------------------------------------------------------ */

.tbl-ticker {
  position: absolute; right: 22px; bottom: 22px; max-width: 280px; padding: 9px 14px 7px; border: 0; border-radius: 12px;
  background: rgba(0, 0, 0, .6); font-size: 17px !important; line-height: 1.25; text-align: left; color: rgba(255, 246, 227, .92) !important; z-index: 5;
}
.tbl-ticker:empty { display: none; }
.tbl-ticker--bad { box-shadow: inset 4px 0 0 #ff5a4d; }
.tbl-ticker--good { box-shadow: inset 4px 0 0 #36d67b; }
.tbl-ticker--monster { box-shadow: inset 4px 0 0 #c9a2ff; }
.tbl-ticker.is-new { animation: tbl-tick .3s var(--ease-out); }
.tbl-log { position: absolute; right: 26px; bottom: 76px; width: 330px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, .88); border: 3px solid #000; z-index: 7; }
.tbl-log ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.tbl-log-entry { font-size: 16px; line-height: 1.25; color: rgba(255, 246, 227, .85); padding-left: 10px; border-left: 3px solid rgba(255, 246, 227, .25); }
.tbl-log-entry--bad { border-color: #ff5a4d; }
.tbl-log-entry--good { border-color: #36d67b; }
.tbl-log-entry--monster { border-color: #c9a2ff; }

/* ------------------------------------------------------------
 * numbers that pop off a target
 * ------------------------------------------------------------ */

.tbl-float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.tbl-float { position: absolute; width: 0; height: 0; animation: tbl-float 1.05s ease-out forwards; }
.tbl-float i {
  position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; background: var(--c-gold);
  clip-path: polygon(50% 0, 61% 30%, 90% 12%, 74% 42%, 100% 50%, 74% 60%, 88% 90%, 60% 72%, 50% 100%, 40% 72%, 12% 90%, 26% 60%, 0 50%, 26% 42%, 10% 12%, 39% 30%);
}
.tbl-float b {
  position: absolute; left: -80px; top: -40px; width: 160px; text-align: center;
  font-family: var(--f-display); font-weight: 400; font-size: 72px; line-height: 80px;
  color: #ff4a3d; -webkit-text-stroke: 8px #000; paint-order: stroke fill; rotate: 9deg;
}
.tbl-float--heal i { background: #36d67b; }
.tbl-float--heal b { color: #eaffef; }

/* ------------------------------------------------------------
 * a card held up close
 * ------------------------------------------------------------ */

.tbl-zoom { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; }
.tbl-zoom-back { position: absolute; inset: 0; background: rgba(8, 5, 2, .82); animation: tbl-fade .18s ease-out; }
.tbl-zoom-panel { position: relative; display: flex; align-items: center; gap: 34px; animation: tbl-zoom-in .26s var(--ease-deal); }
.tbl-zoom-card { width: 380px; height: 567px; flex: none; rotate: -1.5deg; box-shadow: 0 0 0 4px #000, 0 30px 70px rgba(0, 0, 0, .8); }
.tbl-zoom-info { width: 360px; padding: 22px 24px; background: var(--c-paper); color: var(--c-ink); border: 4px solid #000; border-radius: 16px; box-shadow: 0 8px 0 #000; }
.tbl-zoom-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; }
.tbl-zoom-desc { margin: 12px 0 0; font-size: 20px; line-height: 1.3; color: var(--c-ink-soft); }
.tbl-zoom-kind { margin: 12px 0 0; display: inline-block; padding: 4px 10px 1px; border-radius: 7px; background: var(--c-ink); color: var(--c-paper); font-family: var(--f-display); font-size: 14px; letter-spacing: .04em; }
.tbl-zoom-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.tbl-zoom-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.25; color: var(--c-ink-soft); }
.tbl-zoom-list li.is-locked { opacity: .55; }
.tbl-zoom-list b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: var(--c-ink); }
.tbl-zoom-die { flex: none; width: 40px; height: 40px; }
.tbl-zoom-die svg { display: block; width: 100%; height: 100%; }
.tbl-zoom-why { margin: 0 0 4px; font-size: 17px; color: var(--c-red-text); }
.tbl-zoom-foot { margin-top: 20px; display: grid; gap: 10px; }

/* ============================================================
 * TALL — phones. Same table, stacked: monster on top, die + roll
 * in thumb reach, chips, then the hand over the bottom edge.
 * ============================================================ */

[data-layout="tall"] .tbl-bar { height: 52px; padding: 0 10px; gap: 8px; }
[data-layout="tall"] .tbl-exit { font-size: 24px; }
[data-layout="tall"] .tbl-exit b { display: none; }
[data-layout="tall"] .tbl-progress { margin-left: 0; gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
[data-layout="tall"] .tbl-track { min-width: 0; overflow: hidden; padding: 3px 0; }
[data-layout="tall"] .tbl-pip { flex: none; }
[data-layout="tall"] .tbl-round { font-size: 16px; text-shadow: 0 2px 0 #000; }
[data-layout="tall"] .tbl-track { gap: 3px; }
[data-layout="tall"] .tbl-pip { width: 9px; height: 8px; border-radius: 4px; }
[data-layout="tall"] .tbl-pip.is-boss { width: 12px; height: 12px; }
[data-layout="tall"] .tbl-pip.is-boss::after { content: none; }
[data-layout="tall"] .tbl-tools { gap: 6px; }
[data-layout="tall"] .tbl-knob { width: 38px; height: 38px; padding: 5px; box-shadow: 0 3px 0 #000; }
[data-layout="tall"] .tbl-knob--sound { display: none; }
[data-layout="tall"] .tbl-turn { top: 56px; padding: 6px 18px 3px; font-size: 18px; border-width: 3px; border-radius: 10px; box-shadow: 0 4px 0 #000; }

[data-layout="tall"] .tbl-mat { left: 10px; right: 10px; top: 52px; bottom: calc(var(--hand) + 30px); width: auto; height: auto; margin-left: 0; border-width: 4px; border-radius: 22px; box-shadow: 0 10px 0 rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 255, 255, .06); }
[data-layout="tall"] .tbl-mat::before { inset: 9px; border-radius: 15px; }
[data-layout="tall"] .tbl-mat::after { border-radius: 18px; }

[data-layout="tall"] .tbl-foe { left: 0; right: 0; top: 42px; bottom: 158px; width: auto; height: auto; display: grid; place-items: center; }
[data-layout="tall"] .tbl-monster { position: relative; left: auto; top: auto; height: 100%; width: auto; aspect-ratio: 460 / 686; max-width: 244px; max-height: 364px; rotate: -1.5deg; box-shadow: 0 0 0 3px #000, 0 10px 0 rgba(0, 0, 0, .5), 0 24px 34px rgba(0, 0, 0, .55); }
[data-layout="tall"] .tbl-foe-hp { left: 14px; top: 10px; width: 40px; gap: 4px; }
[data-layout="tall"] .tbl-chip { width: 26px; height: 26px; }
[data-layout="tall"] .tbl-foe-hp.is-many { gap: 3px; }
[data-layout="tall"] .tbl-foe-hp.is-many .tbl-chip { width: 20px; height: 20px; border-width: 2px; box-shadow: 0 2px 0 #000, inset 0 0 0 2px #e02a2a; }
[data-layout="tall"] .tbl-foe-hp.is-many .tbl-chip::after { font-size: 8px; }
[data-layout="tall"] .tbl-foe-count { font-size: 16px; text-shadow: 0 2px 0 #000; }
[data-layout="tall"] .tbl-tags--foe { left: 58px; right: 58px; top: auto; bottom: 58px; width: auto; z-index: 2; justify-content: center; pointer-events: none; }
[data-layout="tall"] .tbl-tag { font-size: 13px; padding: 3px 7px 1px; }
[data-layout="tall"] .tbl-stamp { font-size: 30px; }

[data-layout="tall"] .tbl-decks { left: auto; right: 14px; top: 52px; gap: 14px; }
[data-layout="tall"] .tbl-deck { width: 38px; }
[data-layout="tall"] .tbl-deck .tbl-label { display: none; }
[data-layout="tall"] .tbl-deck-stack { width: 38px; height: 56px; margin-top: 0; }
[data-layout="tall"] .tbl-deck-stack i { border-width: 2px; border-radius: 5px; }
[data-layout="tall"] .tbl-deck-stack i:nth-child(1) { translate: 3px 3px; }
[data-layout="tall"] .tbl-deck-stack i:nth-child(2) { translate: 1.5px 1.5px; }
[data-layout="tall"] .tbl-deck-count { right: -9px; bottom: -8px; min-width: 22px; height: 22px; padding: 1px 4px 0; border-width: 2px; font-size: 12px; }

/* on a phone the slip lies over the card text it spells out; the plain roll line is left to the die */
[data-layout="tall"] .tbl-said { left: 60px; right: 60px; top: auto; bottom: 164px; width: auto; height: auto; z-index: 3; pointer-events: none; }
[data-layout="tall"] .tbl-said:not(.tbl-said--slip) { display: none; }
[data-layout="tall"] .tbl-said-line { font-size: 19px; }
[data-layout="tall"] .tbl-said-line em { font-size: 26px; }
[data-layout="tall"] .tbl-slip { padding: 5px 10px; border-width: 3px; box-shadow: 0 4px 0 #000; }
[data-layout="tall"] .tbl-slip-die { width: 34px; height: 34px; }
[data-layout="tall"] .tbl-slip-text { font-size: 14px; }
[data-layout="tall"] .tbl-slip-text b { font-size: 15px; }

[data-layout="tall"] .tbl-rollrow { left: 16px; right: 16px; top: auto; bottom: 56px; width: auto; height: 92px; display: flex; gap: 14px; align-items: stretch; }
[data-layout="tall"] .tbl-tray { width: 112px; height: 92px; flex: none; border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .5); }
[data-layout="tall"] .tbl-tray::before { inset: 9px; border-radius: 10px; }
[data-layout="tall"] .tbl-tray-in { transform: scale(.47); left: 0; }
[data-layout="tall"] .tbl-tray .dbz-die { bottom: 58px; }
[data-layout="tall"] .tbl-tray .dbz-die-shadow { bottom: 54px; }
[data-layout="tall"] .tbl-actions { flex: 1; margin-top: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
[data-layout="tall"] .tbl-roll { flex: 1; height: auto; min-height: 44px; font-size: 38px !important; border-radius: 18px; box-shadow: 0 8px 0 #000; }
[data-layout="tall"] .tbl-keys { display: none; }
[data-layout="tall"] .tbl-continue { height: 84px; font-size: 20px !important; }
[data-layout="tall"] .tbl-btn { padding: 10px 10px 6px; font-size: 16px !important; }
[data-layout="tall"] #continueBtnContainer:empty { display: none; }

[data-layout="tall"] .tbl-you { position: static; }
[data-layout="tall"] .tbl-you > .tbl-label { display: none; }
[data-layout="tall"] .tbl-you #playerChips { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; }
[data-layout="tall"] .tbl-app .dbz-chips, [data-layout="tall"] .dbz-chips { display: flex; align-items: center; gap: 8px; }
[data-layout="tall"] .dbz-chips-row { display: flex; gap: 3px; flex-wrap: nowrap; }
[data-layout="tall"] .dbz-chip { width: 26px; height: 26px; }
[data-layout="tall"] .dbz-chip.is-filled::after { font-size: 10px; }
[data-layout="tall"] .dbz-chips-label { margin: 2px 0 0 auto; font-size: 19px; text-shadow: 0 2px 0 #000; white-space: nowrap; }
[data-layout="tall"] .tbl-you .tbl-tags { position: absolute; left: 136px; right: 16px; bottom: 138px; margin: 0; justify-content: flex-end; z-index: 3; pointer-events: none; }
[data-layout="tall"] .tbl-passives { position: absolute; right: 12px; top: 196px; margin: 0; }
[data-layout="tall"] .tbl-passives .tbl-label { display: none; }
[data-layout="tall"] .tbl-passive-row { flex-direction: column; gap: 9px; margin: 0; }
[data-layout="tall"] .tbl-passive, [data-layout="tall"] .tbl-passive-row:has(.tbl-passive:nth-child(3)) .tbl-passive { width: 42px; height: 63px; rotate: 0deg; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c-green); }

[data-layout="tall"] .tbl-hand { top: auto; bottom: var(--hand); }
[data-layout="tall"] .tbl-hand-card { left: -56px; width: 112px; height: 167px; translate: calc(var(--o) * var(--st)) calc(var(--o) * var(--o) * 4px); box-shadow: 0 0 0 3px #000, 0 -5px 20px rgba(0, 0, 0, .55); }
[data-layout="tall"] .tbl-hand-card::after { display: none; }
[data-layout="tall"] .tbl-hand-card:active { translate: calc(var(--o) * var(--st)) -14px; }
[data-layout="tall"] .tbl-hand-empty { left: -170px; width: 340px; top: 60px; font-size: 17px; }

[data-layout="tall"] .tbl-ticker { left: 16px; right: 16px; bottom: calc(var(--hand) + 3px); max-width: none; padding: 4px 10px 2px; border-radius: 8px; font-size: 14px !important; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, .7); z-index: 5; }
[data-layout="tall"] .tbl-log { left: 16px; right: 16px; bottom: calc(var(--hand) + 34px); width: auto; }

[data-layout="tall"] .tbl-float i { left: -56px; top: -56px; width: 112px; height: 112px; }
[data-layout="tall"] .tbl-float b { left: -56px; top: -30px; width: 112px; font-size: 50px; line-height: 60px; -webkit-text-stroke: 6px #000; }

[data-layout="tall"] .tbl-zoom-panel { flex-direction: column; gap: 14px; }
[data-layout="tall"] .tbl-zoom-card { width: 250px; height: 373px; }
[data-layout="tall"] .tbl-zoom-info { width: 350px; padding: 14px 16px; }
[data-layout="tall"] .tbl-zoom-title { font-size: 24px; }
[data-layout="tall"] .tbl-zoom-desc { font-size: 18px; margin-top: 8px; }
[data-layout="tall"] .tbl-zoom-list { gap: 8px; margin-top: 10px; }
[data-layout="tall"] .tbl-zoom-list li { font-size: 16px; }
[data-layout="tall"] .tbl-zoom-foot { margin-top: 14px; grid-auto-flow: column; grid-auto-columns: 1fr; }

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

@keyframes tbl-pop { 0% { scale: .6; opacity: 0; } 60% { scale: 1.08; opacity: 1; } 100% { scale: 1; } }
@keyframes tbl-fade { from { opacity: 0; } }
@keyframes tbl-peek { from { opacity: 0; translate: 0 16px; scale: .92; } }
@keyframes tbl-zoom-in { from { scale: .8; opacity: 0; } }
@keyframes tbl-tick { from { translate: 0 8px; opacity: 0; } }
@keyframes tbl-red { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes tbl-shake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 3px; } 40% { translate: 6px -3px; } 60% { translate: -4px 2px; } 80% { translate: 3px -1px; } }
@keyframes tbl-jolt { 0% { translate: 0 0; scale: 1; } 25% { translate: 9px -5px; scale: .97; } 55% { translate: -6px 3px; scale: 1.01; } 100% { translate: 0 0; scale: 1; } }
@keyframes tbl-stamp { 0% { scale: 2.4; opacity: 0; } 70% { scale: .94; opacity: 1; } 100% { scale: 1; } }
@keyframes tbl-chip-out { 0% { scale: 1; background: #fff; } 40% { scale: 1.3; } 100% { scale: 1; } }
@keyframes tbl-chip-in { 0% { scale: .3; } 100% { scale: 1; } }
@keyframes tbl-ready { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12) drop-shadow(0 0 14px rgba(255, 198, 41, .6)); } }
@keyframes tbl-drawn { 0%, 60% { box-shadow: 0 0 0 3px #000, 0 0 0 7px var(--c-gold), 0 0 40px rgba(255, 198, 41, .8); } }
@keyframes tbl-float {
  0% { scale: .3; opacity: 0; }
  14% { scale: 1.15; opacity: 1; }
  24% { scale: 1; }
  78% { scale: 1; opacity: 1; translate: 0 -14px; }
  100% { scale: .9; opacity: 0; translate: 0 -40px; }
}

@media (prefers-reduced-motion: reduce) {
  .tbl-app *, .tbl-app *::before, .tbl-app *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
 * ROUND 2 — roll preview, table details, defeat effects, guide
 * ============================================================ */

/* the Roll key glows through a layer that only fades (cheap on slow machines) */
[data-turn="player"] .tbl-roll, [data-turn="trader"] .tbl-roll, .tbl-continue { animation: none; position: relative; }
.tbl-roll::after, .tbl-continue::after {
  content: ""; position: absolute; inset: -10px; border-radius: 24px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 4px rgba(255, 236, 160, .9), 0 0 34px 8px rgba(255, 198, 41, .75);
}
[data-turn="player"] .tbl-roll:not(:disabled)::after, [data-turn="trader"] .tbl-roll:not(:disabled)::after, .tbl-continue::after { animation: tbl-halo 1.5s ease-in-out infinite; }
@keyframes tbl-halo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* what a roll would do */
.tbl-preview { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; }
.tbl-preview:empty { visibility: hidden; }
.tbl-pre-cap { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 246, 227, .5); margin-right: 2px; }
.tbl-pre { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 9px; background: rgba(0, 0, 0, .4); border: 2px solid rgba(255, 246, 227, .18); }
.tbl-pre-die { width: 22px; height: 22px; flex: none; }
.tbl-pre-die svg { display: block; width: 100%; height: 100%; }
.tbl-pre b { font-family: var(--f-display); font-weight: 400; font-size: 18px; line-height: 1; padding-top: 3px; color: var(--c-paper); }
.tbl-pre i { font-style: normal; font-size: 13px; color: #ff8a7a; }
.tbl-pre.is-kill { background: var(--c-gold); border-color: #000; }
.tbl-pre.is-kill b { color: #1d1300; }
[data-layout="tall"] .tbl-preview { gap: 5px; min-height: 24px; }
[data-layout="tall"] .tbl-pre-cap { display: none; }
[data-layout="tall"] .tbl-pre { padding: 1px 7px 1px 2px; flex: 1; justify-content: center; }
[data-layout="tall"] .tbl-pre-die { width: 19px; height: 19px; }
[data-layout="tall"] .tbl-pre b { font-size: 16px; }
[data-layout="tall"] .tbl-preview:empty { display: none; }

/* the monster card leans toward the mouse, a gloss follows */
.tbl-monster.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: rotate .25s var(--ease-out), translate .25s var(--ease-out); }
.tbl-monster::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .34), transparent 46%);
}
.tbl-monster.is-tilting::before { opacity: 1; }

/* the table is set: everything arrives once */
.is-setting .tbl-deck { animation: tbl-set-left .5s var(--ease-deal) backwards; }
.is-setting .tbl-deck:nth-child(2) { animation-delay: .08s; }
.is-setting .tbl-tray { animation: tbl-set-drop .5s var(--ease-deal) .12s backwards; }
.is-setting .tbl-actions { animation: tbl-set-up .45s var(--ease-out) .26s backwards; }
.is-setting .tbl-you { animation: tbl-set-up .45s var(--ease-out) .2s backwards; }
.is-setting .dbz-chip { animation: tbl-chip-in .4s var(--ease-deal) backwards; animation-delay: calc(.3s + var(--ci, 0) * 35ms); }
.is-setting .dbz-chip:nth-child(2) { --ci: 1; } .is-setting .dbz-chip:nth-child(3) { --ci: 2; } .is-setting .dbz-chip:nth-child(4) { --ci: 3; }
.is-setting .dbz-chip:nth-child(5) { --ci: 4; } .is-setting .dbz-chip:nth-child(6) { --ci: 5; } .is-setting .dbz-chip:nth-child(7) { --ci: 6; }
.is-setting .dbz-chip:nth-child(8) { --ci: 7; } .is-setting .dbz-chip:nth-child(9) { --ci: 8; } .is-setting .dbz-chip:nth-child(10) { --ci: 9; }
.is-setting .tbl-bar { animation: tbl-fade .5s ease-out backwards; }
@keyframes tbl-set-left { from { translate: -60px 0; opacity: 0; } }
@keyframes tbl-set-drop { from { translate: 0 -40px; scale: 1.15; opacity: 0; } }
@keyframes tbl-set-up { from { translate: 0 24px; opacity: 0; } }

/* stars and chips fly when a monster goes down */
.tbl-star {
  position: absolute; width: 30px; height: 30px; background: var(--c-gold);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
}
.tbl-star--chip { width: 22px; height: 22px; clip-path: none; border-radius: 50%; background: #e02a2a; border: 3px solid #fff6e3; }

/* the beaten card flips over on its way off the mat */
.tbl-ghost--away { overflow: visible; box-shadow: none; transform-style: preserve-3d; perspective: 900px; }
.tbl-ghost-front, .tbl-ghost-back { position: absolute; inset: 0; border-radius: 4.6% / 3.1%; overflow: hidden; backface-visibility: hidden; box-shadow: 0 0 0 3px #000, 0 20px 40px rgba(0, 0, 0, .6); }
.tbl-ghost-front img { filter: grayscale(1) brightness(.7); }
.tbl-ghost-back { transform: rotateY(180deg); display: grid; place-items: center; background: repeating-linear-gradient(45deg, #5b36b0 0 10px, #4a2a95 10px 20px); }
.tbl-ghost-back svg { width: 70%; height: auto; }

/* guided first run */
.tbl-coach {
  position: absolute; z-index: 26; width: 300px; padding: 14px 16px 16px;
  background: var(--c-paper); color: var(--c-ink); border: 4px solid #000; border-radius: 16px; box-shadow: 0 7px 0 #000, 0 20px 40px rgba(0, 0, 0, .5);
  animation: tbl-pop .3s var(--ease-deal);
}
.tbl-coach::before { content: ""; position: absolute; width: 22px; height: 22px; background: var(--c-paper); border: 4px solid #000; border-right: 0; border-top: 0; }
.tbl-coach[data-side="left"]::before { left: -15px; top: 34px; rotate: 45deg; }
.tbl-coach[data-side="bottom"]::before { left: calc(50% - 11px); bottom: -15px; rotate: -45deg; }
.tbl-coach[data-side="top"]::before { left: calc(50% - 11px); top: -15px; rotate: 135deg; }
.tbl-coach-step { margin: 0; font-size: 14px; letter-spacing: .1em; color: var(--c-muted); }
.tbl-coach-title { margin: 2px 0 6px; font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; }
.tbl-coach-text { margin: 0 0 12px; font-size: 17px; line-height: 1.3; color: var(--c-ink-soft); }
.tbl-coach .tbl-btn { padding: 9px 12px 6px; font-size: 16px !important; box-shadow: 0 4px 0 #000; }
.is-coached { outline: 4px solid var(--c-gold); outline-offset: 6px; animation: tbl-coached 1.1s ease-in-out infinite; }
@keyframes tbl-coached { 50% { outline-offset: 11px; outline-color: #fff; } }
[data-layout="tall"] .tbl-coach { width: 280px; padding: 10px 12px 12px; }
[data-layout="tall"] .tbl-coach-title { font-size: 19px; }
[data-layout="tall"] .tbl-coach-text { font-size: 15px; margin-bottom: 8px; }

/* ============================================================
 * TITLE SCREEN + END SCREENS (overlayHTML in demo-next.js)
 * ============================================================ */

body:has(.tt-app) { background: #2e1908; }
body:has(.tt-app) .demo-exit { background: rgba(0, 0, 0, .55); }
.tt-app {
  position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: grid; place-items: center; padding: 28px 16px 40px;
  font-family: var(--f-body); color: var(--c-paper); text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255, 190, 110, .22), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .78) 100%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #5a3519, #43260f 60%, #2e1908);
}
.tt-app *, .tt-app *::before, .tt-app *::after { box-sizing: border-box; }
.tt-app button { font-family: inherit; cursor: pointer; }
.tt-menu, .tt-end { width: min(560px, 100%); display: grid; justify-items: center; gap: 14px; }

/* the logo on a fan of real cards */
.tt-hero { position: relative; width: 100%; height: clamp(210px, 34vh, 300px); display: grid; place-items: end center; }
.tt-fan { position: absolute; left: 50%; bottom: 26px; width: 0; height: 0; }
.tt-fan-card {
  position: absolute; left: -75px; bottom: 0; width: 150px; height: 224px; border-radius: 4.6% / 3.1%;
  box-shadow: 0 0 0 3px #000, 0 12px 30px rgba(0, 0, 0, .6);
  translate: calc(var(--o) * 84px) calc(var(--o) * var(--o) * 11px); rotate: calc(var(--o) * 9deg); transform-origin: 50% 130%;
  filter: brightness(.8);
  animation: tt-deal .6s var(--ease-deal) backwards; animation-delay: calc((var(--o) + 2) * 70ms);
}
@keyframes tt-deal { from { translate: 0 120px; rotate: 0deg; opacity: 0; } }
.tt-logo { position: relative; width: min(360px, 78%); height: auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(0, 0, 0, .6)); animation: tbl-pop .5s var(--ease-deal) .3s backwards; }

.tt-app .dbz-overlay-title { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--c-paper); -webkit-text-stroke: 0; text-shadow: 0 4px 0 #000; }
.tt-kicker { font-size: 20px !important; letter-spacing: .12em; color: var(--c-gold) !important; }
.tt-lead { margin: 0 !important; max-width: 40ch; font-size: 19px !important; line-height: 1.35 !important; color: var(--c-paper) !important; }

/* the one big key */
.tt-play {
  position: relative; width: min(340px, 100%); padding: 20px 20px 14px; border-radius: 20px;
  background: linear-gradient(180deg, #ffd95a, #ffc629 55%, #e9a400); border: 5px solid #000; box-shadow: 0 10px 0 #000;
  font-family: var(--f-display) !important; font-size: 34px; line-height: 1; text-transform: uppercase; color: #1d1300;
  transition: translate .1s, box-shadow .1s;
}
.tt-play:hover { translate: 0 -2px; box-shadow: 0 12px 0 #000; }
.tt-play:active { translate: 0 8px; box-shadow: 0 2px 0 #000; }
.tt-play:focus-visible, .tt-mode:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.tt-play::after { content: ""; position: absolute; inset: -11px; border-radius: 28px; pointer-events: none; box-shadow: 0 0 0 4px rgba(255, 236, 160, .9), 0 0 36px 8px rgba(255, 198, 41, .7); animation: tbl-halo 1.6s ease-in-out infinite; }

.tt-app .dbz-difficulty-picker { margin: 4px 0 0; }
.tt-app .dbz-difficulty-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 246, 227, .5); margin-bottom: 8px; font-family: var(--f-body); }
.tt-app .dbz-difficulty-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tt-app .dbz-difficulty-btn { background: rgba(0, 0, 0, .45); color: var(--c-paper); border: 3px solid #000; box-shadow: 0 4px 0 #000; }
.tt-app .dbz-difficulty-btn.is-selected { background: var(--c-paper); color: var(--c-ink); }

.tt-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 6px; }
.tt-mode { width: auto; flex: 1 1 200px; max-width: 260px; }
.tt-mode--daily { background: var(--c-sky); color: #04202f !important; }
.tt-mode--pvp { background: var(--c-purple); color: #fff !important; }
.tt-note { margin: 0 !important; font-size: 16px !important; color: rgba(255, 246, 227, .6) !important; }
.tt-app .dbz-overlay-best { margin: 0; font-size: 17px; color: var(--c-gold); }
.tt-app .dbz-overlay-best--new { font-family: var(--f-display); font-size: 24px; color: #1d1300; background: var(--c-gold); padding: 8px 18px 4px; border: 4px solid #000; border-radius: 12px; rotate: -2deg; box-shadow: 0 5px 0 #000; }
.tt-app .dbz-launch-note { margin: 6px 0 0; font-size: 17px; color: rgba(255, 246, 227, .9); }
.tt-app .dbz-launch-note strong { color: var(--c-gold); }
.tt-app .dbz-resume { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .4); border: 2px dashed rgba(255, 246, 227, .25); }
.tt-app .dbz-resume-note { margin: 0; font-size: 16px; color: rgba(255, 246, 227, .7); }

/* end screens */
.tt-eyebrow { margin: 0 !important; font-size: 15px !important; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 246, 227, .9) !important; }
.tt-title { font-size: clamp(54px, 13vw, 96px) !important; line-height: .95 !important; -webkit-text-stroke: 10px #000 !important; paint-order: stroke fill; animation: tbl-stamp .5s var(--ease-deal) backwards; }
.tt-app--bad .tt-title { color: #ff4a3d !important; }
.tt-app--good .tt-title { color: var(--c-gold) !important; }

.tt-trophies { position: relative; width: 100%; height: 158px; margin: 6px 0 2px; }
.tt-trophy {
  position: absolute; left: 50%; top: 0; width: 100px; height: 149px; margin-left: -50px; border-radius: 4.6% / 3.1%; overflow: hidden;
  --step: min(86px, calc((min(560px, 100vw - 32px) - 100px) / max(var(--n) - 1, 1)));
  translate: calc(var(--o) * var(--step)) calc(var(--o) * var(--o) * 2px); rotate: calc(var(--o) * 3deg);
  box-shadow: 0 0 0 3px #000, 0 8px 18px rgba(0, 0, 0, .55);
  animation: tt-deal .5s var(--ease-deal) backwards; animation-delay: calc(.25s + var(--i) * 80ms);
}
.tt-trophy img { display: block; width: 100%; height: 100%; }

.tt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.tt-stat { display: grid; gap: 2px; padding: 12px 4px 8px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 3px solid #000; }
.tt-stat b { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--c-gold); }
.tt-stat span { font-size: 15px; line-height: 1.1; color: rgba(255, 246, 227, .92); }
.tt-end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; width: 100%; margin-top: 6px; }
.tt-end-actions .tt-play { width: auto; flex: 1 1 220px; max-width: 320px; font-size: 28px; }
.tt-menu-btn { width: auto; flex: 0 1 180px; }
.tt-app .dbz-share-row { width: 100%; margin-top: 2px; }
.tt-app .dbz-share-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tt-app .dbz-share-btn-row .dbz-btn { font-size: 15px; padding: 9px 14px 6px; box-shadow: 0 4px 0 #000; }
.tt-app .dbz-share-feedback { display: block; margin-top: 8px; color: var(--c-gold); }
.tt-app .dbz-board-top, .tt-app .dbz-board-note { width: 100%; }

@media (max-width: 520px) {
  .tt-app { padding: 64px 14px 32px; place-items: start center; }
  .tt-hero { height: 210px; }
  .tt-fan-card { left: -58px; width: 116px; height: 173px; translate: calc(var(--o) * 60px) calc(var(--o) * var(--o) * 8px); }
  .tt-play { font-size: 30px; }
  .tt-stats { grid-template-columns: repeat(2, 1fr); }
  .tt-trophies { height: 128px; }
  .tt-trophy { width: 80px; height: 119px; margin-left: -40px; --step: min(66px, calc((100vw - 28px - 80px) / max(var(--n) - 1, 1))); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-app *, .tt-app *::before, .tt-app *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
 * 1v1 PvP — pages (draft, choose, result) and the table
 * ============================================================ */

.pv-page { width: min(920px, 100%); }
.pv-title { font-size: clamp(34px, 6vw, 56px) !important; line-height: 1 !important; color: var(--c-gold) !important; -webkit-text-stroke: 8px #000 !important; paint-order: stroke fill; }
.tt-app--bad .pv-title { color: #ff4a3d !important; }

/* a card you can pick */
.pv-pick { position: relative; width: 100%; aspect-ratio: 460 / 686; box-shadow: 0 0 0 3px #000, 0 8px 0 rgba(0, 0, 0, .45); transition: translate .15s var(--ease-out), box-shadow .15s; }
button.pv-pick { cursor: pointer; }
button.pv-pick:hover { translate: 0 -6px; box-shadow: 0 0 0 3px #000, 0 0 0 7px rgba(255, 246, 227, .7), 0 14px 0 rgba(0, 0, 0, .45); }
.pv-pick.is-selected { translate: 0 -8px; box-shadow: 0 0 0 3px #000, 0 0 0 8px var(--c-gold), 0 16px 0 rgba(0, 0, 0, .45); }
.pv-pick.is-out img { filter: grayscale(1) brightness(.55); }
.pv-pick-check { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c-gold); color: #1d1300; border: 3px solid #000; font-size: 22px; font-weight: 700; }
.pv-pick-hp { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; padding: 5px 12px 2px; border-radius: 10px; background: #000; color: var(--c-paper); font-family: var(--f-display); font-size: 16px; white-space: nowrap; }

.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; width: 100%; margin: 8px 0; }
.pv-grid--few { grid-template-columns: repeat(auto-fit, minmax(150px, 210px)); justify-content: center; }
.pv-versus { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; margin: 6px 0; }
.pv-team { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; justify-items: center; }
.pv-team-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.pv-vs { font-family: var(--f-display); font-size: 34px; color: var(--c-gold); -webkit-text-stroke: 6px #000; paint-order: stroke fill; }
.pv-face { display: grid; justify-items: center; gap: 10px; width: min(210px, 60%); margin-bottom: 14px; }
.pv-face-note { margin: 0; font-size: 17px; color: rgba(255, 246, 227, .8); white-space: nowrap; }
.tt-app .tt-play:disabled { filter: grayscale(.85) brightness(.7); cursor: default; }
.tt-app .tt-play:disabled::after { display: none; }

@media (max-width: 520px) {
  .pv-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pv-grid--few { grid-template-columns: repeat(auto-fit, minmax(100px, 150px)); }
  .pv-versus { flex-direction: column; gap: 6px; }
  .pv-pick-check { width: 28px; height: 28px; font-size: 16px; right: 4px; top: 4px; }
}

/* ---- the table: your card left, the CPU's right, the die between ---- */

.tbl-stage--pvp .tbl-exit { background: none; border: 0; }
.pv-side { position: absolute; top: 22px; width: 300px; display: grid; justify-items: center; gap: 8px; }
.pv-side--p1 { left: 44px; }
.pv-side--p2 { right: 44px; }
.pv-head { display: flex; align-items: baseline; gap: 10px; }
.pv-name { font-family: var(--f-display); font-size: 22px; line-height: 1; color: var(--c-gold); text-shadow: 0 3px 0 #000; text-transform: uppercase; }
.pv-side--p2 .pv-name { color: #ff8a7a; }
.pv-count { font-family: var(--f-display); font-size: 18px; color: var(--c-paper); text-shadow: 0 2px 0 #000; }
.pv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 28px; }
.pv-chips .tbl-chip { width: 24px; height: 24px; }
.pv-chips .tbl-chip::after { font-size: 9px; }
.pv-card { position: relative; left: auto; top: auto; width: 214px; height: 319px; rotate: -2deg; animation: tbl-deal .5s var(--ease-deal) backwards; }
.pv-side--p2 .pv-card { rotate: 2deg; }
.pv-card.is-turn { box-shadow: 0 0 0 3px #000, 0 0 0 8px var(--c-gold), 0 14px 0 rgba(0, 0, 0, .5), 0 0 50px rgba(255, 198, 41, .45); }
@keyframes tbl-deal { from { translate: 0 -60px; scale: 1.2; opacity: 0; } }
.pv-empty { width: 214px; height: 319px; display: grid; place-items: center; border-radius: 12px; border: 3px dashed rgba(255, 246, 227, .3); color: rgba(255, 246, 227, .5); font-size: 18px; }
.pv-rollval { width: 214px; height: 319px; display: grid; place-items: center; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 3px dashed rgba(255, 246, 227, .3); font-family: var(--f-display); font-size: 150px; line-height: 1; color: var(--c-paper); text-shadow: 0 8px 0 #000; }
.pv-rollval.is-new { animation: tbl-pop .4s var(--ease-deal); }
.pv-roster { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.pv-mini { width: 44px; height: 66px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px #000; }
.pv-mini img { display: block; width: 100%; height: 100%; }
.pv-mini--active { box-shadow: 0 0 0 2px #000, 0 0 0 5px var(--c-gold); }
.pv-mini--defeated img { filter: grayscale(1) brightness(.45); }
.pv-note { margin: 0; text-align: center; font-size: 18px; line-height: 1.25; color: rgba(255, 246, 227, .85); }

.tbl-stage--pvp .tbl-said { left: 401px; width: 264px; }
.tbl-stage--pvp .tbl-rollrow { left: 415px; }
.tbl-slip--p2 .tbl-slip-text b { color: var(--c-purple); }
.tbl-stage--pvp .tbl-ticker { right: auto; left: 50%; translate: -50% 0; max-width: 620px; bottom: 30px; text-align: center; }

[data-layout="tall"].tbl-stage--pvp .tbl-mat { bottom: 46px; }
[data-layout="tall"] .pv-side { top: 40px; width: 160px; gap: 5px; }
[data-layout="tall"] .pv-side--p1 { left: 12px; }
[data-layout="tall"] .pv-side--p2 { right: 12px; }
[data-layout="tall"] .pv-name { font-size: 17px; text-shadow: 0 2px 0 #000; }
[data-layout="tall"] .pv-count { font-size: 14px; }
[data-layout="tall"] .pv-chips { gap: 2px; min-height: 40px; align-content: flex-start; }
[data-layout="tall"] .pv-chips .tbl-chip { width: 17px; height: 17px; border-width: 2px; box-shadow: 0 2px 0 #000, inset 0 0 0 2px #e02a2a; }
[data-layout="tall"] .pv-chips .tbl-chip::after { content: ""; }
[data-layout="tall"] .pv-card, [data-layout="tall"] .pv-empty, [data-layout="tall"] .pv-rollval { height: clamp(150px, calc(var(--sh, 700px) - 446px), 224px); width: auto; aspect-ratio: 460 / 686; max-width: none; max-height: none; }
[data-layout="tall"] .pv-rollval { font-size: 100px; }
[data-layout="tall"] .pv-roster { gap: 5px; margin-top: 4px; }
[data-layout="tall"] .pv-mini { width: 34px; height: 51px; }
[data-layout="tall"].tbl-stage--pvp .tbl-said { left: 16px; right: 16px; width: auto; bottom: 120px; }
[data-layout="tall"].tbl-stage--pvp .tbl-rollrow { left: 16px; right: 16px; bottom: 16px; }
#pvpContinueContainer { display: grid; gap: 8px; }
#pvpContinueContainer:empty { display: none; }
[data-layout="tall"] .pv-note { font-size: 15px; }
[data-layout="tall"].tbl-stage--pvp .tbl-ticker { left: 16px; right: 16px; translate: none; bottom: 12px; max-width: none; }

/* pages: the content column may use the full width it is given */
.tt-app { grid-template-columns: minmax(0, 1fr); }
.tt-menu, .tt-end { justify-self: center; }
.pv-page { width: min(880px, 100%); }
@media (min-width: 900px) { .pv-grid:not(.pv-grid--few) { grid-template-columns: repeat(4, 1fr); } }
/* the confirm / exit keys stay in reach while the cards scroll */
.tt-app--pvp .tt-end-actions { position: sticky; bottom: 0; z-index: 3; padding: 16px 0 10px; margin-bottom: -10px; background: linear-gradient(180deg, transparent, rgba(34, 18, 6, .96) 34%); }

/* scrolling inside the demo's overlays stays inside them */
.tt-app, .dbz-binder-modal, .dbz-overlay, .tbl-page { overscroll-behavior: contain; }

/* end of a run: the pitch for the real cards (screens.part.js / pvp.part.js) */
.tt-ks {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 4px 0 6px;
  padding: 18px 16px 20px;
  border: 4px solid #000;
  border-radius: 18px;
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(90, 130, 255, .25), transparent 70%), linear-gradient(180deg, #17255c, #0f1a45);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45);
}
.tt-ks-title { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 6vw, 32px); line-height: 1.05; text-align: center; text-transform: uppercase; color: var(--c-paper); -webkit-text-stroke: .08em #000; paint-order: stroke fill; text-shadow: 0 .07em 0 #000; text-wrap: balance; }
.tt-ks .tt-end-actions { margin-top: 0; }
a.tt-play { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; text-decoration: none; text-align: center; color: #1d1300; }
.tt-end-actions .tt-play--ks { flex: 1 1 260px; max-width: 360px; font-size: 26px; }
.tt-ks .tt-menu-btn { min-height: 48px; }

/* newsletter on the end screen: one paper slip under the pitch */
.tt-nl {
  width: 100%;
  max-width: 520px;
  display: grid;
  gap: 8px;
  margin: 2px 0 6px;
  padding: 14px 14px 12px;
  background: var(--c-paper, #fff6e3);
  color: #1d1300;
  border: 4px solid #000;
  border-radius: 16px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
  text-align: left;
}
.tt-nl-label { font-family: var(--f-display); font-size: 20px; line-height: 1.1; text-transform: uppercase; color: #1d1300; }
.tt-nl-row { display: flex; gap: 8px; }
.tt-nl-input {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  font: inherit;
  font-size: 17px;
  color: #1d1300;
  background: #fff;
  border: 3px solid #000;
  border-radius: 10px;
}
.tt-nl-input:focus-visible { outline: 3px solid var(--c-gold, #ffc629); outline-offset: 2px; }
.tt-nl-btn { flex: 0 0 auto; min-height: 48px; width: auto; padding-inline: 16px; }
.tt-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tt-nl-status { margin: 0; min-height: 1.2em; font-size: 16px; line-height: 1.3; color: #5a4a2a; }
.tt-nl-status--ok { color: #1f7a3a; }
.tt-nl-status--warn { color: #b3261e; }
.tt-nl-fine { margin: 0; font-size: 14px; color: #6d6047; }
.tt-nl.is-done .tt-nl-row, .tt-nl.is-done .tt-nl-fine { display: none; }
@media (max-width: 480px) {
  .tt-nl-row { flex-wrap: wrap; }
  .tt-nl-btn { flex: 1 1 100%; }
}