/* Thunder Throne: the game's own look over the tumble kit (kits/tumble/client/tumble.css stays as it is).
   The approved style board (docs/asgf/style-boards/thunder-throne): a daytime lavender sky with the temple
   mountain on the left, the 6×5 grid on a deep navy panel with a slim gold border, the Storm Orb medallion
   top left, the logo top right, Zeus standing full-body on his rock beside the grid. Free spins: the night
   storm Throne Hall. HUD in marble, gold and lapis.
   Everything here is presentation only, driven by the kit's own state classes (tb-free, tease, charge,
   landed, win, plain, shake, show, tb-reduced). Under html.tb-reduced nothing loops, flashes or shakes. */

:root {
  --tt-gold: #d9a521; --tt-gold-hi: #ffe9a8; --tt-gold-lo: #8a5a00; --tt-navy: #1f2a6b; --tt-navy-deep: #121a4a;
  --tt-lapis: #2f56b0; --tt-marble: #f4f1ea; --tt-violet: #6a3fb5; --tt-indigo: #2b2466; --tt-bolt: #fff3c4;
  --tt-panel: linear-gradient(180deg, #2a3784f2, #161f58f2);
  --tt-side: 0px;
  --font: "Trebuchet MS", "Segoe UI", system-ui, var(--asgf-fallback, sans-serif);
}
html, body { background: var(--tt-indigo); }

/* ------------------------------------------------------------------ scene */
.tt-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tt-world { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 16 / 9)); height: max(100vh, calc(100vw * 9 / 16)); }
.tt-sky { position: absolute; inset: 0; background: center / cover no-repeat; }
.tt-day { background-image: url(../assets/bg-day.webp); }
.tt-night { background-image: url(../assets/bg-free.webp); opacity: 0; transition: opacity 1.4s ease; }
body.tb-free .tt-night { opacity: 1; }
body.tb-free .tt-clouds, body.tb-free .tt-falls { opacity: 0; }
.tt-dim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, #0d0a2a00, #0d0a2a99); opacity: 0; transition: opacity .6s ease; }
body:has(.tb-board.tease) .tt-dim { opacity: 1; }

/* the waterfall on the temple mountain (its place in bg-day.webp, in % of the 16:9 picture) */
.tt-falls { position: absolute; left: 23.5%; top: 45%; width: 3.1%; height: 30%; opacity: .55; mix-blend-mode: screen; transition: opacity 1s;
  background: repeating-linear-gradient(180deg, #ffffff00 0 14px, #ffffffaa 18px, #ffffff00 26px) 0 0 / 100% 52px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
  animation: tt-falls .9s linear infinite; }
@keyframes tt-falls { to { background-position: 0 52px; } }

/* two banks of cloud drifting at different speeds (parallax) */
.tt-clouds { position: absolute; left: -12%; right: -12%; pointer-events: none; transition: opacity 1s; }
.tt-clouds-a { bottom: -4%; height: 34%; opacity: .75;
  background: radial-gradient(28% 55% at 12% 70%, #ffffffd0, #ffffff00 70%), radial-gradient(24% 50% at 38% 80%, #f6f0ffc8, #ffffff00 70%),
    radial-gradient(30% 60% at 66% 75%, #ffffffc0, #ffffff00 70%), radial-gradient(26% 50% at 92% 72%, #efe8ffc8, #ffffff00 70%);
  animation: tt-drift 70s ease-in-out infinite alternate; }
.tt-clouds-b { top: 8%; height: 22%; opacity: .45;
  background: radial-gradient(18% 40% at 20% 50%, #ffe9fbb0, #ffffff00 70%), radial-gradient(22% 45% at 58% 40%, #f4ecffa0, #ffffff00 70%),
    radial-gradient(16% 38% at 86% 55%, #ffe9fba8, #ffffff00 70%);
  animation: tt-drift 110s ease-in-out infinite alternate-reverse; }
@keyframes tt-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }

/* distant lightning: a small glow somewhere in the sky (js/thunder.js places it; two soft pulses, never strobing) */
.tt-flash { position: absolute; width: 28%; height: 30%; left: var(--fx, 60%); top: var(--fy, 10%); opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #f3eaffcc, #c9b8f055 45%, #c9b8f000); }
.tt-flash.on { animation: tt-flash .7s ease-out; }
body.tb-free .tt-flash { background: radial-gradient(closest-side, #ffffffd8, #a184ee66 45%, #a184ee00); }
@keyframes tt-flash { 0% { opacity: 0; } 8% { opacity: .55; } 22% { opacity: .08; } 34% { opacity: .42; } 100% { opacity: 0; } }

/* Zeus, on the rock at the right of the day picture */
.tt-zeus { position: absolute; z-index: 0; aspect-ratio: 607 / 1208; height: min(74vh, 39vw); right: 2vw; bottom: 1.5vh;
  transform-origin: 50% 100%; transition: filter 1.2s; }
.tt-zeus img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; animation: tt-breathe 4.6s ease-in-out infinite; }
@keyframes tt-breathe { 50% { transform: scale(1.006, 1.014); } }
body.tb-free .tt-zeus { filter: brightness(.82) saturate(.9) drop-shadow(0 0 18px #a184ee88); }
.tt-cloak { position: absolute; left: 34%; top: 15%; width: 64%; height: 14%; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(40% 60% at 30% 50%, #ffffffc0, #ffffff00 70%), radial-gradient(40% 60% at 70% 40%, #dcd6f0b0, #ffffff00 70%);
  animation: tt-churn 7s ease-in-out infinite alternate; }
@keyframes tt-churn { from { transform: translateX(-4%) scale(1, .9); } to { transform: translateX(5%) scale(1.08, 1.05); } }
/* the bolt in his fist (31 %, 54 % of the figure); raised on charge, high on a big win */
.tt-bolt { position: absolute; left: 21%; top: 47%; width: 15%; height: auto; transform-origin: 70% 12%; transform: rotate(28deg);
  filter: drop-shadow(0 0 6px #ffe9a8) drop-shadow(0 0 14px #ffd34d); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); animation: tt-crackle 2.4s steps(1) infinite; }
@keyframes tt-crackle { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 50% { opacity: 1; } 83% { opacity: .9; } }
.tt-zeus.tt-raise .tt-bolt { transform: rotate(-160deg) scale(1.35); filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #ffd34d); }
.tt-zeus.tt-triumph img { animation: tt-triumph 1.6s ease-out; }
.tt-zeus.tt-triumph .tt-bolt { transform: rotate(-170deg) scale(1.6) translateY(-12%); filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 30px #ffd34d); }
@keyframes tt-triumph { 30% { transform: scale(1.035) translateY(-1.2%); filter: brightness(1.18); } 100% { transform: none; filter: none; } }

/* ------------------------------------------------------------------ stage */
.tb-stage { position: relative; z-index: 1; display: grid; max-width: none; width: 100%;
  grid-template-columns: 96px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-content: start; justify-items: center;
  grid-template-areas: "mult head" "mult seq" "fs fs" "board board" "msg msg" "hud hud" "tools tools"; }
.tb-head { grid-area: head; justify-self: start; width: auto; min-height: 0; gap: 8px; }
.tb-head > div:not(.tb-chip) { display: none; }
.tt-logo { display: block; height: 52px; width: auto; max-width: min(46vw, 190px); object-fit: contain; filter: drop-shadow(0 2px 6px #1b124a99); }
.tb-chip { background: #161f58e0; border-color: #d9a52166; color: var(--tt-marble); }
.tb-meters { display: contents; }
.tb-board-wrap { grid-area: board; }
.tb-msg { grid-area: msg; }
.tb-hud { grid-area: hud; }
.tb-tools { grid-area: tools; }
.tb-fs { grid-area: fs; }

/* the Storm Orb medallion: the kit's multiplier meter */
.tb-meter.mult { grid-area: mult; position: relative; align-self: start; width: 90px; height: 96px; max-width: none; padding: 0; flex: none;
  background: url(../assets/medallion.webp) center top / contain no-repeat; border-radius: 0; box-shadow: none; overflow: visible; }
.tb-meter.mult .v { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font-size: 19px; min-height: 0; color: #fff;
  text-shadow: 0 0 6px #ffd34d, 0 1px 2px #000; }
.tb-meter.mult .k { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: max-content; padding: 1px 8px; border-radius: 999px;
  background: #161f58f0; border: 1px solid var(--tt-gold); color: var(--tt-gold-hi); font-size: 12px; letter-spacing: .02em; }
.tb-meter.mult::before { content: ''; position: absolute; left: 22%; top: 28%; width: 56%; height: 56%; border-radius: 50%; opacity: .35;
  background: url(../assets/sym/stormorb.webp) center / 120% no-repeat; transition: opacity .3s, filter .3s; }
.tb-meter.mult.on { box-shadow: none; }
.tb-meter.mult.on::before { opacity: .55; filter: brightness(1.2) drop-shadow(0 0 10px #ffd34d); animation: tt-orb-glow 1.6s ease-in-out infinite alternate; }
@keyframes tt-orb-glow { to { filter: brightness(1.45) drop-shadow(0 0 16px #ffd34d); } }
.tb-meter:not(.mult) { grid-area: seq; justify-self: start; align-self: end; width: auto; min-width: 150px; max-width: 200px;
  background: var(--tt-panel); border: 1px solid #d9a52199; box-shadow: inset 0 1px 0 #ffffff22; }
.tb-meter .k { color: #e8dcff; }
.tb-meter .v { color: var(--tt-marble); }

/* the board: a deep navy panel with a slim gold border */
.tb-board, body.tb-free .tb-board { background: radial-gradient(120% 90% at 50% 35%, #2c3c94, var(--tt-navy) 55%, #141b4f);
  border-radius: 12px; box-shadow: 0 0 0 2px var(--tt-gold), 0 0 0 4px #5a3d08, 0 0 0 5px #ffe9a855, 0 12px 40px #12083a99; }
body.tb-free .tb-board { box-shadow: 0 0 0 2px var(--tt-gold), 0 0 0 4px #3a2470, 0 0 0 5px #c9b8f066, 0 0 34px #6a3fb5aa; }
.tb-board.tease, body.tb-free .tb-board.tease { animation: tt-gather 1s ease-in-out infinite alternate;
  box-shadow: 0 0 0 2px var(--tt-bolt), 0 0 0 4px #6a3fb5, 0 0 30px #c9b8f0, 0 0 60px #6a3fb5; }
@keyframes tt-gather { to { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8a5fe0, 0 0 44px #fff3c4, 0 0 80px #8a5fe0; } }

/* tiles: idle loops per symbol, staggered by cell (never in unison), only on ::before */
.tb-tile::before { content: none; position: absolute; inset: var(--cell-gap); pointer-events: none;
  animation-delay: calc(var(--c, 0) * -.83s + var(--r, 0) * -1.37s); }
.sym-zeus::before { content: ''; inset: auto var(--cell-gap) var(--cell-gap) var(--cell-gap); height: 38%; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(40% 60% at 30% 70%, #ffffffb0, #fff0 70%), radial-gradient(40% 60% at 75% 60%, #e3ddf5a0, #fff0 70%);
  animation: tt-churn 5.5s ease-in-out infinite alternate; }
.sym-owlhelm::before { content: ''; background: radial-gradient(3.6% 3.6% at 39.8% 53.9%, #c9cbd3 98%, #0000), radial-gradient(3.6% 3.6% at 59.7% 53.9%, #c9cbd3 98%, #0000);
  transform-origin: 50% 53.9%; transform: scaleY(0); animation: tt-blink 6.2s linear infinite; }
@keyframes tt-blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.sym-athena::before { content: ''; background: linear-gradient(115deg, #fff0 40%, #ffffff55 50%, #fff0 60%) -200% 0 / 300% 100% no-repeat; mix-blend-mode: screen;
  border-radius: 12%; animation: tt-sheen 7s ease-in-out infinite; }
.sym-apollo::before { content: ''; background: radial-gradient(38% 34% at 50% 34%, #fff6d0aa, #ffe9a800 70%); mix-blend-mode: screen; animation: tt-halo 3.2s ease-in-out infinite alternate; }
@keyframes tt-halo { from { opacity: .15; transform: scale(.92); } to { opacity: .8; transform: scale(1.06); } }
.sym-lyre::before { content: ''; background: linear-gradient(90deg, #fff0 38%, #fff8dcaa 47%, #fff0 52%) -120% 0 / 220% 100% no-repeat; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(26% 32% at 50% 48%, #000 70%, #0000); mask: radial-gradient(26% 32% at 50% 48%, #000 70%, #0000); animation: tt-strings 3.8s ease-in-out infinite; }
@keyframes tt-strings { 0% { background-position: -120% 0; } 45%, 100% { background-position: 220% 0; } }
.tb-tile.sym-wingedcrown:not(.win):not(.charge) .tb-face { animation: tt-flex 3.4s ease-in-out infinite; animation-delay: calc(var(--c, 0) * -.61s + var(--r, 0) * -1.1s); }
@keyframes tt-flex { 50% { transform: scale(1.035, .985); } }
.sym-ruby::before, .sym-sapphire::before, .sym-emerald::before, .sym-amethyst::before, .sym-topaz::before { content: '';
  background: linear-gradient(120deg, #fff0 42%, #ffffffd8 50%, #fff0 58%) -200% 0 / 300% 100% no-repeat; mix-blend-mode: screen;
  -webkit-mask: var(--tt-mask) center / contain no-repeat; mask: var(--tt-mask) center / contain no-repeat; animation: tt-sheen 5.5s ease-in-out infinite; }
.sym-ruby { --tt-mask: url(../assets/sym/ruby.webp); } .sym-sapphire { --tt-mask: url(../assets/sym/sapphire.webp); }
.sym-emerald { --tt-mask: url(../assets/sym/emerald.webp); } .sym-amethyst { --tt-mask: url(../assets/sym/amethyst.webp); }
.sym-topaz { --tt-mask: url(../assets/sym/topaz.webp); }
@keyframes tt-sheen { 0%, 70% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sym-thunderthrone::before { content: ''; background: radial-gradient(30% 22% at 50% 12%, #fff6d0cc, #fff0 70%); mix-blend-mode: screen; animation: tt-spark 2.6s steps(1) infinite; }
@keyframes tt-spark { 0%, 100% { opacity: .35; } 40% { opacity: .9; } 44% { opacity: .4; } 70% { opacity: .75; } }
.sym-stormorb::before { content: ''; background: radial-gradient(22% 22% at 50% 50%, #ffffffd0, #ffd34d00 70%); mix-blend-mode: screen; animation: tt-halo 1.8s ease-in-out infinite alternate; }

/* Storm Orbs: land dim, crackle when they charge; the value sits on the ring */
.tb-orb .tb-face-img { filter: brightness(.88) drop-shadow(0 0 6px #ffd34d88); }
.tb-orb.landed .tb-face-img, .tb-orb.charge .tb-face-img { filter: brightness(1.15) drop-shadow(0 0 10px #ffd34d); }
.tb-orb-value { top: auto; bottom: 7%; padding: 0 7px; border-radius: 999px; background: #161f58e8; border: 1px solid var(--tt-gold-hi); color: var(--tt-gold-hi);
  text-shadow: 0 1px 2px #000; line-height: 1.25; }
.tb-tile.charge::after { content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: conic-gradient(from 0deg, #fff0, #fff3c4cc 8%, #fff0 16%, #fff0 40%, #ffe9a8bb 47%, #fff0 55%, #fff0 75%, #fffbe6cc 82%, #fff0 90%);
  -webkit-mask: radial-gradient(closest-side, #0000 70%, #000 74%, #000 92%, #0000); mask: radial-gradient(closest-side, #0000 70%, #000 74%, #000 92%, #0000);
  animation: tt-spin .55s linear infinite; }
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tb-flyer { width: 64px; height: 64px; padding: 0; display: grid; place-items: center; font-size: 18px; color: var(--tt-gold-hi); text-shadow: 0 0 4px #000, 0 0 8px #000;
  background: url(../assets/sym/stormorb.webp) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 14px #ffd34d); }

/* wins: celebrated ones flash white-gold (the kit's particles burst in gold and marble); plain ones keep the kit's quiet outline */
.tb-tile.win:not(.plain)::after { border: 2px solid var(--tt-gold-hi); border-radius: 14px; box-shadow: 0 0 12px #ffd76a, inset 0 0 14px #fff3c480; }
.tb-tile.trigger::after { border-color: var(--tt-bolt); box-shadow: 0 0 16px #fff3c4, 0 0 30px #a184ee; }

/* the impact puff under a tile that has just landed (js/thunder.js) */
.tt-puff { position: absolute; z-index: 2; width: calc(100% / var(--cols)); height: calc(30% / var(--rows)); pointer-events: none;
  left: calc(var(--c) * 100% / var(--cols)); top: calc((var(--r) + .82) * 100% / var(--rows));
  background: radial-gradient(50% 50% at 50% 60%, #f4f1eacc, #c9b8f055 55%, #fff0 75%); animation: tt-puff .42s ease-out forwards; }
@keyframes tt-puff { from { transform: scale(.4, .6); opacity: .9; } to { transform: scale(1.35, 1); opacity: 0; } }

/* ------------------------------------------------------------------ HUD in marble, gold and lapis */
.tb-msg { max-width: min(720px, 100%); width: auto; min-width: min(260px, 100%); padding: 2px 16px; border-radius: 999px; background: #161f58d8; border: 1px solid #d9a52166; }
.tb-msg span { color: var(--tt-marble); }
.tb-msg.win span { color: var(--tt-gold-hi); text-shadow: 0 0 10px #ffd34d99; }
.tb-hud { padding: 6px 10px; border-radius: 16px; background: var(--tt-panel); border: 1px solid #d9a521aa; box-shadow: inset 0 1px 0 #ffffff26, 0 6px 20px #12083a66; }
.tb-hud .k { color: #d8cdf5; letter-spacing: .05em; }
.tb-hud .v { color: var(--tt-marble); }
.tb-spin { background: radial-gradient(circle at 38% 32%, #fff6d6, var(--tt-gold-hi) 18%, var(--tt-gold) 55%, var(--tt-gold-lo)); color: var(--tt-navy);
  box-shadow: 0 0 0 3px #fff3c4, 0 0 0 5px #8a5a00, 0 6px 22px #ffd34d66; }
.tb-spin svg { filter: drop-shadow(0 1px 0 #fff8); }
.tb-round { background: radial-gradient(circle at 40% 35%, #4a6fd0, var(--tt-lapis) 60%, #1d3478); border: 2px solid var(--tt-gold); color: var(--tt-marble); }
.tb-tool { background: linear-gradient(180deg, #34449a, #1d2867); border: 1px solid #d9a521aa; color: var(--tt-marble); }
.tb-tool.on { background: linear-gradient(180deg, var(--tt-gold-hi), var(--tt-gold)); color: var(--tt-navy); }
#tb-win.pop { color: var(--tt-gold-hi); }
.tb-fs > div { background: linear-gradient(180deg, #4a2f8ef2, #2b1d66f2); border: 1px solid #c9b8f0aa; }
.tb-fs .k { color: #eadfff; }
.tb-toast { background: #161f58f2; border: 1px solid var(--tt-gold); color: var(--tt-marble); }
.tb-sheet { background: linear-gradient(180deg, #232d75, #171e55); border: 1px solid #d9a52188; }
.tb-sheet h3 { color: var(--tt-gold-hi); }
.tb-pt-item, .tb-close, .tb-set-row select { background: #2a3784; }
.tb-loader { background: var(--tt-indigo) url(../assets/bg-day.webp) center / cover no-repeat; }
.tb-loader .tb-title { display: none; }
.tt-loader-logo { width: min(78vw, 460px); height: auto; filter: drop-shadow(0 4px 14px #1b124acc); }
/* on the RGS the loader ends above the menu's panel (kits/tumble): the logo gives way on a short screen */
html.asgf-menu .tt-loader-logo { width: auto; max-width: min(78vw, 460px); max-height: max(48px, calc((100vh - var(--asgf-menu-h, 0px)) * .38)); }
.tb-loader .tb-tag { color: var(--tt-marble); background: #161f58cc; padding: 2px 12px; border-radius: 999px; }
.tb-loader .bar { background: #161f58cc; } .tb-loader .bar i { background: var(--tt-gold); }
.tb-loader .start { background: radial-gradient(circle at 40% 30%, var(--tt-gold-hi), var(--tt-gold) 60%, var(--tt-gold-lo)); color: var(--tt-navy); box-shadow: 0 0 0 2px #fff3c4; }

/* ------------------------------------------------------------------ overlays */
.tb-overlay { background: radial-gradient(90% 80% at 50% 45%, #2b2466e6, #07051ce8); }
.tb-bigwin { background: radial-gradient(70% 60% at 50% 45%, #3a2a8af0, #0b0826f4); }
.tb-tier, .tb-tier.big, .tb-tier.mega, .tb-tier.epic { color: transparent; }
.tb-tier { background: linear-gradient(180deg, #fffbea, #ffe9a8 40%, var(--tt-gold) 58%, #a8700c); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 #5a3d08) drop-shadow(0 0 18px #ffd34d99); font-family: Georgia, "Times New Roman", serif; letter-spacing: .06em; }
.tb-tier.mega { background-image: linear-gradient(180deg, #fff, #e9dcff 35%, #a184ee 60%, #4d2c9a); filter: drop-shadow(0 2px 0 #2b1d66) drop-shadow(0 0 20px #c9b8f0); }
.tb-tier.epic { background-image: linear-gradient(180deg, #fff, #fff3c4 30%, #ffd34d 52%, #2f56b0 54%, #7fa4ff); filter: drop-shadow(0 2px 0 #121a4a) drop-shadow(0 0 26px #fff3c4); }
.tb-big-amount { color: var(--tt-marble); text-shadow: 0 2px 0 #5a3d08, 0 0 14px #ffd34d88; }
.tb-feat-title { color: var(--tt-gold-hi); font-family: Georgia, "Times New Roman", serif; text-shadow: 0 2px 0 #5a3d08, 0 0 16px #ffd34d88; }
.tb-feat-big { color: #fff; text-shadow: 0 0 6px #fff3c4, 0 0 18px #a184ee, 0 0 30px #6a3fb5; }
.tb-hint { color: #e8dcff; }
/* each tier is struck by one bolt behind its title */
.tt-strike { position: absolute; left: 50%; top: 4%; width: min(14vw, 90px); height: auto; transform: translateX(-50%); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 30px #ffd34d); }
.tb-bigwin.show .tt-strike { animation: tt-strike .9s ease-out; }
@keyframes tt-strike { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top; } 12% { opacity: 1; transform: translateX(-50%) scaleY(1); } 30% { opacity: .2; } 42% { opacity: .85; } 100% { opacity: 0; transform: translateX(-50%) scaleY(1); } }
.tb-bigwin > :not(.tt-strike), #tb-intro > :not(.tt-cine) { position: relative; z-index: 1; }

/* the free-spins intro: the camera rises out of the day sky, through the storm, into the Throne Hall; then the kit's
   award (tap anywhere starts, and so skips the rest). One soft flash only. */
#tb-intro { background: #07051c; overflow: hidden; }
.tt-cine { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tt-cine > div { position: absolute; inset: -15%; background-position: center; background-size: cover; background-repeat: no-repeat; }
.tt-cine > .tt-cine-day { background-image: url(../assets/bg-day.webp);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.tt-cine::after { content: ''; position: absolute; inset: 0; background: radial-gradient(42% 34% at 50% 50%, #07051ccc, #07051c00); opacity: 0; }
#tb-intro.show .tt-cine::after { animation: tt-fade-in .8s ease-out 3.4s forwards; }
@keyframes tt-fade-in { to { opacity: 1; } }
.tt-cine > .tt-cine-night { background-image: url(../assets/bg-free.webp); opacity: 0; }
.tt-cine > .tt-cine-cloud { background-image: radial-gradient(60% 40% at 50% 50%, #ffffffee, #c9b8f0aa 50%, #fff0 80%), radial-gradient(40% 30% at 20% 30%, #6a3fb5aa, #6a3fb500 80%), radial-gradient(40% 30% at 80% 70%, #2b2466cc, #2b246600 80%); opacity: 0; }
.tt-cine > .tt-cine-flash { background-image: radial-gradient(40% 45% at 50% 40%, #fffbe6b0, #fff0); opacity: 0; }
#tb-intro.show .tt-cine-day { animation: tt-rise-day 2.2s cubic-bezier(.5, 0, .9, .6) forwards; }
#tb-intro.show .tt-cine-cloud { animation: tt-rise-cloud 2.4s ease-in-out .9s forwards; }
#tb-intro.show .tt-cine-night { animation: tt-rise-night 2.2s cubic-bezier(.2, .7, .3, 1) 1.6s forwards; }
#tb-intro.show .tt-cine-flash { animation: tt-cine-flash .5s ease-out 3.6s forwards; }
#tb-intro.show > :not(.tt-cine) { opacity: 0; animation: tt-carve .7s ease-out 3.7s forwards; }
@keyframes tt-rise-day { to { transform: translateY(55%) scale(1.25); opacity: .2; } }
@keyframes tt-rise-cloud { 0% { opacity: 0; transform: translateY(-60%) scale(1.2); } 45% { opacity: .95; } 100% { opacity: 0; transform: translateY(70%) scale(1.6); } }
@keyframes tt-rise-night { from { opacity: 0; transform: translateY(-25%) scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes tt-cine-flash { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
@keyframes tt-carve { from { opacity: 0; transform: scale(1.12); filter: blur(3px) brightness(2); } to { opacity: 1; transform: none; filter: none; } }

/* ------------------------------------------------------------------ landscape: grid centre, medallion left, logo and Zeus right
   Landscape is any viewport not taller than 1.05 × its width (the slot kit's rule, kits/tumble/client/tumble.css),
   so an embedded 660×410 preview and a phone on its side get this layout too, not the portrait column. */
@media (min-aspect-ratio: 20/21) {
  :root { --tt-side: clamp(210px, 21vw, 330px); --tt-chrome: 190px; }
  html.tb-topbar { --tt-chrome: 226px; }
  html.asgf-menu { --tt-chrome: 70px; }
  .tb-stage { grid-template-columns: var(--tt-side) minmax(0, 1fr) var(--tt-side); column-gap: 10px; row-gap: 8px; padding: 10px 14px;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas: "mult board head" "seq board head" "fs board ." "tools board ." ". board ." ". msg ." ". hud ."; }
  .tb-board, body.tb-free .tb-board { width: min(calc(100vw - 2 * var(--tt-side) - 48px), calc((var(--vh) - var(--tt-chrome)) * var(--cols, 6) / var(--rows, 5)), 820px); }
  .tb-head { justify-self: center; flex-direction: column; align-items: center; gap: 6px; }
  .tt-logo { height: auto; width: min(100%, calc(var(--tt-side) - 10px)); max-width: none; max-height: 30vh; }
  .tb-head .tb-chip { display: block; }
  .tb-meter.mult { width: min(180px, calc(var(--tt-side) - 30px)); height: auto; aspect-ratio: 400 / 426; justify-self: center; margin-bottom: 10px; }
  .tb-meter.mult .v { font-size: clamp(24px, 2.6vw, 38px); }
  .tb-meter.mult .k { font-size: 13px; bottom: -12px; }
  .tb-meter:not(.mult) { justify-self: center; align-self: start; min-width: min(190px, calc(var(--tt-side) - 20px)); }
  .tb-fs { flex-direction: column; align-items: stretch; width: min(190px, calc(var(--tt-side) - 20px)); }
  .tb-tools { flex-direction: row; align-items: center; flex-wrap: wrap; width: min(220px, calc(var(--tt-side) - 10px)); align-self: start; }
  .tb-tools .tb-tool { flex: 1 1 auto; }
  .tb-hud { max-width: 820px; width: 100%; gap: 4px 8px; grid-template-columns: 1fr auto auto auto 1fr; grid-template-areas: "bal bet spin . win"; }
  .tb-hud-bet { justify-content: center; }
  /* Zeus on the rock of the day picture, right of the grid, never past the right edge (his raised arm stays in view) */
  .tt-zeus { height: min(76vh, 42vw); right: max(0px, calc((var(--tt-side) + 14px - min(76vh, 42vw) * .5025) / 2)); bottom: 2vh; }
}
/* compact landscape (narrower than 900 px or shorter than 600 px: a phone on its side, the Create preview frame):
   the side columns narrow to what they hold, the HUD and the tools share one bar along the bottom (as the slot
   kit's landscape HUD: the tools at the left end, the HUD at the right), and Zeus stands on that bar in the right column, scaled to fit whole under the logo. */
@media (min-aspect-ratio: 20/21) and (max-width: 899px), (min-aspect-ratio: 20/21) and (max-height: 599px) {
  :root { --tt-side: clamp(132px, 20vw, 260px); --tt-chrome: 120px; --tt-bar: 64px;
    --tt-board: min(calc(100vw - 2 * var(--tt-side) - 48px), calc((var(--vh) - var(--tt-chrome)) * 6 / 5), 820px);
    --tt-col: calc((100vw - 48px - var(--tt-board)) / 2); }
  html.tb-topbar { --tt-chrome: 154px; }
  html.asgf-menu { --tt-chrome: 104px; }
  html.asgf-menu.tb-topbar { --tt-chrome: 138px; }
  .tb-stage { grid-template-columns: minmax(var(--tt-side), 1fr) auto minmax(var(--tt-side), 1fr); padding: 6px 14px; row-gap: 6px;
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "mult board head" "seq board fs" ". board ." ". board ." ". msg ." "bar bar bar"; }
  /* the free-spins panel goes under the logo: the medallion and the tumble win fill the left column */
  .tb-fs { align-self: start; }
  .tb-board, body.tb-free .tb-board { width: var(--tt-board); }
  .tt-logo { width: min(100%, 200px); max-height: 22vh; }
  html.asgf-menu .tt-logo { max-height: calc(var(--vh, 100vh) * .2); } /* the space above the menu's panel, not the window: the tools stay above it (render check) */
  .tb-head .tb-chip { max-width: 100%; white-space: normal; text-align: center; }
  .tb-meter.mult { width: min(110px, calc(var(--tt-col) - 20px), 22vh); margin-bottom: 8px; }
  html.asgf-menu .tb-meter.mult { width: min(110px, calc(var(--tt-col) - 20px), calc(var(--vh, 100vh) * .22)); margin-bottom: 4px; } /* sized to the space above the panel */
  .tb-meter.mult .v { font-size: clamp(16px, 4.4vh, 26px); }
  .tb-meter.mult .k { bottom: -10px; font-size: 12px; }
  .tb-meter:not(.mult) { min-width: 0; width: min(100%, 190px); }
  .tb-meter:not(.mult) .v { font-size: 18px; }
  .tb-msg { min-height: 26px; padding: 0 14px; }
  .tb-msg span { font-size: 14px; }
  /* one bar: the HUD in the middle, the tools at the right end */
  .tb-hud { grid-area: bar; justify-self: end; width: auto; max-width: 100%; height: var(--tt-bar); padding: 4px 14px; gap: 0 14px;
    grid-template-columns: auto auto auto auto; grid-template-areas: "bal bet spin win"; }
  .tb-hud-l, .tb-hud-r { gap: 0; }
  .tb-hud-r { text-align: left; align-items: flex-start; }
  .tb-hud-bet { gap: 6px; }
  .tb-hud-bet .k { display: none; }
  .tb-hud-bet .v { min-width: 58px; }
  .tb-spin { width: 54px; height: 54px; box-shadow: 0 0 0 2px #fff3c4, 0 0 0 4px #8a5a00, 0 4px 14px #ffd34d66; }
  .tb-spin svg { width: 32px; height: 32px; }
  .tb-tools { grid-area: bar; justify-self: start; align-self: center; flex-wrap: nowrap; width: auto; }
  .tb-tools .tb-tool { flex: none; padding: 0 10px; min-width: 0; }
  html.asgf-menu .tb-tools { justify-self: center; }
  /* Zeus on the bar, centred in the right column, the whole figure in view */
  .tt-zeus { --tt-zh: min(calc(var(--vh) - var(--tt-bar) - 70px), calc((var(--tt-col) - 8px) / .5025), 74vh);
    height: var(--tt-zh); right: max(4px, calc(14px + (var(--tt-col) - var(--tt-zh) * .5025) / 2)); bottom: calc(var(--tt-bar) + 14px); }
}
/* where the bar is wide enough the HUD is centred under the grid; the tools keep the left end */
@media (min-aspect-ratio: 20/21) and (min-width: 1120px) and (max-height: 599px) {
  .tb-hud { justify-self: center; }
}
/* portrait: the medallion and the logo above the grid; Zeus stands behind them on the right */
@media not all and (min-aspect-ratio: 20/21) {
  .tt-world { width: max(100vw, calc(100vh * 9 / 16)); height: max(100vh, calc(100vw * 16 / 9)); }
  .tt-day { background-image: url(../assets/bg-day-portrait.webp); }
  .tt-falls { left: 43.3%; top: 22%; width: 6.4%; height: 17%; }
  .tt-zeus { height: min(40vh, 330px); right: 0; bottom: auto; top: calc(var(--tt-top, 0px) + 2px); }
  html.tb-topbar { --tt-top: 34px; }
  .tb-meter:not(.mult) { max-width: calc(100vw - 96px - 8px - 24px - 26vw); min-width: 140px; }
}
@media not all and (min-aspect-ratio: 20/21) {
  @media (min-height: 760px) { .tb-stage { align-content: center; } .tt-logo { height: 64px; max-width: min(48vw, 230px); } }
}

/* ------------------------------------------------------------------ reduced motion: nothing loops, flashes or flies */
html.tb-reduced .tt-falls, html.tb-reduced .tt-clouds, html.tb-reduced .tt-zeus img, html.tb-reduced .tt-cloak, html.tb-reduced .tt-bolt,
html.tb-reduced .tb-tile::before, html.tb-reduced .tb-face, html.tb-reduced .tb-board, html.tb-reduced .tb-meter.mult::before { animation: none !important; }
html.tb-reduced .tb-tile::before, html.tb-reduced .tt-flash, html.tb-reduced .tt-puff, html.tb-reduced .tt-strike, html.tb-reduced .tt-cine-flash,
html.tb-reduced .tt-cine-cloud, html.tb-reduced .tt-cine-day, html.tb-reduced .tb-tile.charge::after { display: none; }
html.tb-reduced #tb-intro.show .tt-cine-night { animation: none; opacity: 1; transform: none; }
html.tb-reduced #tb-intro.show > :not(.tt-cine), html.tb-reduced #tb-intro.show .tt-cine::after { animation: none; opacity: 1; }
html.tb-reduced .tt-zeus, html.tb-reduced .tt-bolt { transition: none; }

/* ------------------------------------------------------------------ a short phone held upright
   Under 480 px above the RGS panel (platform/board-fit.js sets html.asgf-short; a 360×640 phone leaves about 420 px):
   the medallion smaller and the logo and Tumble Win on one row beside it, so the grid gets the height (mobile-first
   audit, 7 Nov 2026: the grid was 57% of the width). Text stays >= 12 px. */
html.asgf-short .tb-stage { grid-template-columns: 66px auto minmax(0, 1fr); row-gap: 4px; column-gap: 6px; padding-top: 4px; padding-bottom: 4px;
  grid-template-areas: "mult head seq" "fs fs fs" "board board board" "msg msg msg" "hud hud hud" "tools tools tools"; }
html.asgf-short .tb-meter.mult { width: 60px; height: 64px; }
html.asgf-short .tb-meter.mult .v { font-size: 15px; }
html.asgf-short .tb-meter.mult .k { bottom: -8px; padding: 0 6px; }
html.asgf-short .tt-logo { height: 40px; max-width: 120px; }
html.asgf-short .tb-meter:not(.mult) { align-self: center; justify-self: stretch; min-width: 0; max-width: none; padding: 2px 8px; }
html.asgf-short .tb-meter:not(.mult) .v { font-size: 15px; min-height: 18px; }
html.asgf-short .tb-msg { min-height: 24px; }