/* AXIOM — slot preview styles
   Stage is authored in the backdrop's native 2752x1536 pixel space and
   scaled to the window with a single CSS transform (see game.js fitStage).
   All glow / light effects live here — the UI sprites carry no glow. */

:root {
  --cyan: #19E3FF;
  --amber: #FF9A1F;
  --gold: #F5C542;
  --gold-hi: #FFE9A6;
  --ink: #E9FDFF;
  --cell-w: 350px;
  --cell-h: 324px;
  --font-num: 'Barlow Condensed', 'Bahnschrift SemiCondensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }

#stage {
  position: absolute;
  left: 0; top: 0;
  width: 2752px; height: 1536px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #05070a;
  font-family: var(--font-num);
}

#backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ======================= Reels ======================= */

#reels { position: absolute; overflow: hidden; contain: strict; }

.reel { position: absolute; top: 0; width: var(--cell-w); height: 100%; overflow: hidden; }

/* landing flash: a quick cyan light along the column edges */
.reel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(25, 227, 255, .28), transparent 18%, transparent 82%, rgba(25, 227, 255, .28));
}
.reel.landed::after { animation: landFlash .42s ease-out; }
@keyframes landFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

.strip {
  position: absolute; left: 0; top: 0;
  width: var(--cell-w);
  will-change: transform;
  backface-visibility: hidden;
}

.cell { position: relative; width: var(--cell-w); height: var(--cell-h); }

.cell img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 8%;
  object-fit: contain;
  pointer-events: none;
  transition: filter .25s ease, opacity .25s ease;
}

.cell.dim img { filter: brightness(.36) saturate(.45); }
.cell.win img {
  filter: drop-shadow(0 0 22px rgba(255, 170, 60, .75)) brightness(1.12);
  animation: symPulse 1.1s ease-in-out infinite;
}
@keyframes symPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.075); }
}

.blur-seg { display: block; width: var(--cell-w); }

/* ======================= Wins ======================= */

#paylines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.payline polyline {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine .42s cubic-bezier(.3, .7, .2, 1) forwards;
}
.pl-glow { stroke: var(--amber); stroke-width: 34; opacity: .45; filter: blur(10px); }
.pl-core { stroke: var(--amber); stroke-width: 13; }
.pl-hot  { stroke: #FFE2B0; stroke-width: 4.5; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

#win-layer { position: absolute; pointer-events: none; }

.win-frame {
  position: absolute;
  width: calc(var(--cell-w) - 16px);
  height: calc(var(--cell-h) - 16px);
  margin: 8px;
  border-radius: 26px;
  border: 6px solid var(--gold);
  box-shadow:
    0 0 0 2px rgba(255, 233, 166, .55) inset,
    0 0 26px 4px rgba(255, 154, 31, .55),
    0 0 40px rgba(255, 154, 31, .35) inset;
  animation: framePop .28s cubic-bezier(.2, 1.6, .4, 1) both;
}
.win-frame::after {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 34px;
  box-shadow: 0 0 46px 12px rgba(255, 154, 31, .55);
  animation: glowPulse 1.1s ease-in-out infinite;
}
@keyframes framePop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes glowPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.line-badge {
  position: absolute;
  transform: translate(-50%, 0);
  padding: 4px 26px 6px;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(24, 16, 6, .92), rgba(8, 6, 3, .92));
  border: 3px solid var(--gold);
  box-shadow: 0 0 24px rgba(255, 154, 31, .6);
  color: var(--gold-hi);
  font: 700 54px/1 var(--font-num);
  letter-spacing: 1px;
  text-shadow: 0 0 14px rgba(255, 154, 31, .8);
  white-space: nowrap;
  animation: badgeIn .3s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes badgeIn { from { transform: translate(-50%, 14px) scale(.7); opacity: 0; } }

#win-amount {
  position: absolute;
  left: 1373px; top: 762px;
  transform: translate(-50%, -50%) scale(.6);
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 110px 34px;
  border-radius: 40px;
  background: radial-gradient(ellipse at center, rgba(6, 10, 16, .88) 40%, rgba(6, 10, 16, 0) 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
#win-amount.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#win-amount .lbl {
  font: 700 64px/1 var(--font-num);
  letter-spacing: 14px;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(25, 227, 255, .9);
}
#win-amount .num {
  font: 800 190px/1 var(--font-num);
  letter-spacing: 2px;
  background: linear-gradient(180deg, #FFF6D0 0%, var(--gold) 45%, #C27A12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 154, 31, .75)) drop-shadow(0 6px 0 rgba(0, 0, 0, .6));
}

/* ======================= Readouts ======================= */

.readout {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 58px;
  pointer-events: none;
}
.readout .num {
  font: 700 64px/1 var(--font-num);
  letter-spacing: 2px;
  color: var(--ink);
  text-shadow: 0 0 10px rgba(25, 227, 255, .75), 0 0 28px rgba(25, 227, 255, .35);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
#balance.up .num { animation: goldFlash 1.2s ease-out; }
@keyframes goldFlash {
  0%, 60% { color: var(--gold-hi); text-shadow: 0 0 14px rgba(255, 154, 31, .95), 0 0 34px rgba(255, 154, 31, .5); }
}
#total-bet.bump .num { animation: bump .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bump { 0% { transform: scale(1.25); color: #fff; } 100% { transform: scale(1); } }

/* ======================= Buttons ======================= */

.hot {
  position: absolute;
  padding: 0; margin: 0;
  border: 0; border-radius: 50%;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.hot:focus-visible { box-shadow: 0 0 0 6px rgba(25, 227, 255, .8); }
.hot img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform .12s ease, filter .15s ease;
}
.hot:hover img { filter: brightness(1.1); }
.hot.pressed img { transform: translate(-50%, -50%) scale(.94); filter: brightness(1.3); }
.hot.disabled { cursor: default; }
.hot.disabled img { filter: brightness(.6) saturate(.4); }

#btn-spin img { width: 100%; }

/* AUTOPLAY / BET: plate faces cut from the backdrop itself, so they match
   the baked art exactly and can still scale / light up when pressed. */
#btn-auto, #btn-bet { border-radius: 20px; }
.hot .face {
  position: absolute; inset: 0;
  border-radius: 20px;
  background-image: url('art/screens/main_screen_clean.webp');
  background-size: 2752px 1536px;
  pointer-events: none;
  transition: transform .12s ease, filter .15s ease;
}
.hot:hover .face { filter: brightness(1.15); }
.hot.pressed .face { transform: scale(.94); filter: brightness(1.35); box-shadow: 0 0 0 10px #15181c; }
.hot.disabled .face { filter: brightness(.55) saturate(.4); }

/* idle "call to action" halo behind SPIN */
#btn-spin .halo {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 31, .55) 30%, rgba(255, 154, 31, 0) 68%);
  animation: breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(.94); } 50% { opacity: .75; transform: scale(1.03); } }

/* rotating light arc (spinning / autoplay) */
.hot .ring {
  position: absolute; inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 13px), #000 calc(100% - 3px), transparent);
          mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 13px), #000 calc(100% - 3px), transparent);
  animation: rot 1s linear infinite;
}
#btn-spin .ring {
  background: conic-gradient(from 0deg, transparent 0 45%, rgba(255, 210, 120, .2) 60%, #FFE2A8 88%, transparent 90%,
                                         transparent 0 95%, rgba(255, 210, 120, .2));
  filter: drop-shadow(0 0 10px var(--amber));
}
#btn-auto .ring {
  inset: -2px;
  border-radius: 22px;
  -webkit-mask: none; mask: none;
  border: 4px solid rgba(25, 227, 255, .9);
  box-shadow: 0 0 22px rgba(25, 227, 255, .8), inset 0 0 22px rgba(25, 227, 255, .45);
  animation: autoPulse 1.2s ease-in-out infinite;
}
@keyframes autoPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rot { to { transform: rotate(360deg); } }

#stage.is-spinning #btn-spin .ring { opacity: 1; }
#stage.is-spinning #btn-spin .halo { animation-duration: .8s; }
#btn-auto.active .ring { opacity: 1; }
#btn-auto.active .face { filter: brightness(1.25) hue-rotate(-10deg); }

/* ======================= Toast ======================= */

#toast {
  position: absolute;
  left: 1373px; top: 330px;
  transform: translate(-50%, -20px);
  padding: 18px 48px;
  border-radius: 60px;
  background: rgba(4, 12, 18, .9);
  border: 2px solid rgba(25, 227, 255, .7);
  box-shadow: 0 0 30px rgba(25, 227, 255, .45);
  color: var(--ink);
  font: 700 48px/1 var(--font-num);
  letter-spacing: 4px;
  opacity: 0;
  pointer-events: none;
}
#toast.show { animation: toast 2.2s ease both; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  12%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ======================= Layout debug overlay (key L) ======================= */

#layout-debug { position: absolute; inset: 0; pointer-events: none; display: none; }
#stage.show-layout #layout-debug { display: block; }
#layout-debug div { position: absolute; outline: 3px dashed rgba(255, 0, 200, .85); background: rgba(255, 0, 200, .08); }
#layout-debug .round { border-radius: 50%; }

/* ======================= Big / Mega / Epic win ======================= */

#bigwin {
  --tier-rgb: 245, 197, 66;
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  cursor: pointer;
}
#bigwin.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
#bigwin > * { position: absolute; pointer-events: none; }

.bw-scrim {
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .82) 70%);
}

.bw-rays {
  left: 1376px; top: 640px;
  width: 2000px; height: 2000px;
  margin: -1000px 0 0 -1000px;
  will-change: transform;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(var(--tier-rgb), 0) 0deg 7deg,
    rgba(var(--tier-rgb), .28) 10deg,
    rgba(var(--tier-rgb), 0) 13deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .6) 30%, transparent 62%);
          mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, .6) 30%, transparent 62%);
  animation: rot 22s linear infinite;
  transition: background .4s ease;
}

.bw-glow {
  left: 1376px; top: 640px;
  mix-blend-mode: screen;
  width: 1500px; height: 1300px;
  margin: -650px 0 0 -750px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--tier-rgb), .55) 0%, rgba(var(--tier-rgb), .18) 35%, transparent 65%);
  animation: breathe 1.8s ease-in-out infinite;
}

.bw-plaque { width: 0; height: 0; }
.plaque-wrap {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.plaque-wrap img { display: block; width: 100%; height: 100%; }
.plaque-wrap.plaque-in {
  animation: plaquePunch .62s cubic-bezier(.2, 1.7, .35, 1) both, plaqueFloat 2.6s ease-in-out .62s infinite;
}
.plaque-wrap.plaque-out { animation: plaqueOut .35s ease-in both; }

/* light sweep across the metal, clipped to the plaque silhouette */
.plaque-shine {
  position: absolute; inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
.plaque-shine .band {
  position: absolute;
  top: -20%; left: 0;
  width: 45%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 75%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  animation: sweep 2.6s cubic-bezier(.5, 0, .3, 1) .5s infinite;
}
@keyframes sweep {
  0% { transform: translateX(-120%) skewX(-12deg); }
  45%, 100% { transform: translateX(330%) skewX(-12deg); }
}

@keyframes plaquePunch {
  0%   { transform: translate(-50%, -50%) scale(2.1); opacity: 0; filter: brightness(3) blur(6px); }
  45%  { opacity: 1; filter: brightness(1.5); }
  70%  { filter: none; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes plaqueFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -51.2%) scale(1.025); }
}
@keyframes plaqueOut { to { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }

.bw-amount {
  left: 1376px;
  transform: translate(-50%, -50%);
  font: 800 230px/1 var(--font-num);
  letter-spacing: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFBE6 0%, #FFE08A 30%, var(--gold) 55%, #B86A0C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .85));
}
/* tier-coloured glow sits on its own static layer behind the digits */
.bw-amount-glow {
  left: 1376px; top: 1262px;
  width: 1300px; height: 300px;
  margin: -150px 0 0 -650px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--tier-rgb), .5), transparent 68%);
}
.bw-amount.land { animation: amountLand .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes amountLand { 0% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(1); } }

.bw-hint {
  left: 1376px; top: 1452px;
  transform: translateX(-50%);
  font: 700 40px/1 var(--font-num);
  letter-spacing: 10px;
  color: rgba(233, 253, 255, .55);
  text-shadow: 0 0 12px rgba(25, 227, 255, .6);
  animation: hintBlink 1.6s ease-in-out infinite;
}
@keyframes hintBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.bw-flash { inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .95), rgba(var(--tier-rgb), .4) 40%, transparent 75%); opacity: 0; }
.bw-flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

#bigwin.shake { animation: shake .4s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-14px, 8px); }
  30% { transform: translate(12px, -10px); }
  45% { transform: translate(-9px, 6px); }
  60% { transform: translate(6px, -4px); }
  80% { transform: translate(-3px, 2px); }
}

#fx {
  position: absolute; left: 0; top: 0;
  width: 2752px; height: 1536px;
  pointer-events: none;
}

/* nothing under the scrim keeps animating while the plaque is up */
#stage.bigwin-on .cell img { animation: none; filter: brightness(.5); }
#stage.bigwin-on .win-frame, #stage.bigwin-on .win-frame::after { animation: none; }
#stage.bigwin-on #btn-spin .halo { animation: none; opacity: 0; }

/* ======================= Anticipation / special landings ======================= */

.reel::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 5px rgba(255, 190, 80, .9), inset 0 0 70px rgba(255, 154, 31, .55);
  background: linear-gradient(180deg, rgba(255, 154, 31, .18), transparent 30%, transparent 70%, rgba(255, 154, 31, .18));
  transition: opacity .2s ease;
}
.reel.anticipate::before { opacity: 1; animation: tease .5s ease-in-out infinite alternate; }
@keyframes tease { from { opacity: .45; } to { opacity: 1; } }

.cell.land-pop img { animation: landPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.cell.land-pop::after {
  content: ''; position: absolute; inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 150, .8), rgba(255, 154, 31, 0) 65%);
  animation: popFlash .55s ease-out both;
  pointer-events: none;
}
@keyframes landPop { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes popFlash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }

.win-frame.trigger {
  border-color: #FFC266;
  box-shadow: 0 0 0 2px rgba(255, 240, 200, .6) inset, 0 0 34px 8px rgba(255, 154, 31, .75), 0 0 50px rgba(255, 154, 31, .45) inset;
}

/* ======================= OVERRIDE free spins mode ======================= */

#backdrop { transition: filter 1.2s ease; }
#stage.fs #backdrop { filter: sepia(.55) saturate(1.55) hue-rotate(-14deg) brightness(.92); }
#stage::after {           /* amber vignette */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(255, 110, 20, .32) 100%);
  transition: opacity 1.2s ease;
}
#stage.fs::after { opacity: 1; }

/* every Sentinel Head turns Wild: visor cyan -> amber + WILD tag */
#stage.fs .cell[data-sym="H5"] img {
  filter: hue-rotate(186deg) saturate(1.5) brightness(1.08) drop-shadow(0 0 18px rgba(255, 140, 30, .85));
}
#stage.fs .cell.dim[data-sym="H5"] img { filter: hue-rotate(186deg) saturate(.8) brightness(.4); }
#stage.fs .cell[data-sym="H5"]::before {
  content: 'WILD';
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 18px 4px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FFB347, #D86A00);
  color: #1a0b00;
  font: italic 900 44px/1 var(--font-num);
  letter-spacing: 3px;
  box-shadow: 0 0 18px rgba(255, 140, 30, .8);
}

#fs-counter {
  position: absolute;
  transform: translate(-50%, -50%) scale(.8);
  display: flex; align-items: baseline; gap: 22px;
  padding: 14px 44px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 14, 2, .94), rgba(10, 5, 0, .94));
  border: 3px solid rgba(255, 170, 60, .95);
  box-shadow: 0 0 30px rgba(255, 140, 30, .6), inset 0 0 22px rgba(255, 140, 30, .25);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
#fs-counter.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#fs-counter.bump .val { animation: bump .35s cubic-bezier(.2, 1.8, .4, 1); }
#fs-counter .lbl { font: 700 40px/1 var(--font-num); letter-spacing: 6px; color: #FFD9A0; }
#fs-counter .val {
  display: inline-block;
  font: 800 66px/1 var(--font-num);
  color: #fff;
  text-shadow: 0 0 16px rgba(255, 150, 40, .95);
  font-variant-numeric: tabular-nums;
}
#fs-counter .won { font: 700 40px/1 var(--font-num); color: var(--gold-hi); letter-spacing: 2px; }
#fs-counter .won:empty { display: none; }

/* features lock BET */
#stage.in-feature #btn-bet .face { filter: brightness(.55) saturate(.4); }

/* ======================= Portrait feature screens ======================= */

.portrait-overlay {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.portrait-overlay.show { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.pt-bg {
  position: absolute; inset: -60px;
  width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover;
  filter: blur(36px) brightness(.38) saturate(1.3);
  pointer-events: none;
}
.pt {
  position: absolute; top: 0;
  transform-origin: 0 0;
  overflow: hidden;
  box-shadow: 0 0 120px rgba(0, 0, 0, .9);
}
.pt-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait-overlay.show .pt-img { animation: ptIn .7s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ptIn { from { transform: scale(1.08); filter: brightness(2.2); } to { transform: scale(1); filter: none; } }

/* scanline sweep on entry */
.pt-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 260px;
  background: linear-gradient(180deg, transparent, rgba(25, 227, 255, .28), rgba(255, 255, 255, .5) 52%, transparent 54%);
  opacity: 0;
  pointer-events: none;
}
.portrait-overlay.show .pt-scan { animation: scan 1.1s ease-in .1s both; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-260px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(2752px); } }
.portrait-overlay.show .pt-scan.full { animation-name: scanFull; }
@keyframes scanFull { 0% { opacity: 1; transform: translateY(-260px); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(1536px); } }

/* "12 FREE SPINS" replacement for 8 / 20 */
.spins-patch {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
}
/* soft dark backing: a blurred plate, so it feathers into the art instead of a box */
.spins-patch::before {
  content: '';
  position: absolute; inset: 8px 14px;
  border-radius: 80px;
  background: rgba(8, 9, 12, .98);
  filter: blur(18px);
}
.spins-text { position: relative; }
/* matches the big-heads art: chrome letters with a gold rim */
.spins-text {
  font: 900 158px/1 var(--font-num);
  letter-spacing: 10px;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE6EE 38%, #8C99A6 52%, #E9F1F7 70%, #9AA7B3 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 5px #D89A3A;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 14px rgba(255, 170, 60, .55)) drop-shadow(0 6px 0 rgba(40, 18, 0, .9));
}
.spins-text b { font-weight: 900; }

.tap-hint {
  position: absolute; left: 0; right: 0; top: 2420px;
  text-align: center;
  font: 700 46px/1 var(--font-num);
  letter-spacing: 18px;
  color: #fff;
  text-shadow: 0 0 22px rgba(255, 150, 40, .95);
  opacity: 0;
}
.portrait-overlay.ready .tap-hint { animation: hintBlink 1.4s ease-in-out infinite; }
#fs-intro { cursor: pointer; }

/* ======================= Hack Bonus ======================= */

.hk-bar {
  position: absolute;
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(180deg, #07090c, #14181e);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, .9), 0 0 0 3px rgba(80, 90, 100, .6);
}
.hk-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(180deg, #FFE7A8, #FFB13B 45%, #E07800);
  box-shadow: 0 0 30px rgba(255, 160, 40, .9);
  transition: width .6s cubic-bezier(.2, 1.2, .4, 1);
}
.hk-bar-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 50px/1 var(--font-num);
  letter-spacing: 10px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, .9), 0 0 18px rgba(25, 227, 255, .8);
}

.hk-head { position: absolute; left: 0; right: 0; top: 520px; text-align: center; pointer-events: none; }
.hk-title {
  font: italic 900 150px/1 var(--font-num);
  letter-spacing: 6px;
  background: linear-gradient(180deg, #F2FEFF, #7FEFFF 45%, #0FA9C8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(25, 227, 255, .8));
}
.hk-sub { margin-top: 10px; font: 700 52px/1 var(--font-num); letter-spacing: 14px; color: #CFF8FF; text-shadow: 0 0 12px rgba(25, 227, 255, .8); }

.hk-tally {
  position: absolute; left: 50%; top: 2062px;
  transform: translateX(-50%);
  padding: 22px 70px 28px;
  border-radius: 30px;
  background: rgba(4, 10, 16, .88);
  border: 3px solid rgba(25, 227, 255, .55);
  box-shadow: 0 0 40px rgba(0, 0, 0, .8), 0 0 26px rgba(25, 227, 255, .35);
  white-space: nowrap;
  display: flex; justify-content: center; align-items: baseline; gap: 34px;
  pointer-events: none;
  font: 800 110px/1 var(--font-num);
  text-shadow: 0 6px 0 rgba(0, 0, 0, .7);
}
.hk-tally .c { color: var(--gold-hi); text-shadow: 0 0 24px rgba(255, 160, 40, .9), 0 6px 0 rgba(0, 0, 0, .7); }
.hk-tally .x { color: #9FF4FF; text-shadow: 0 0 24px rgba(25, 227, 255, .9), 0 6px 0 rgba(0, 0, 0, .7); }
.hk-tally:empty { display: none; }
.hk-tally.bump { animation: tallyBump .4s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes tallyBump { 0% { transform: translateX(-50%) scale(1.2); } 100% { transform: translateX(-50%) scale(1); } }

.hk-rack {
  position: absolute;
  padding: 0; margin: 0; border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  border-radius: 26px;
}
#hack:not(.ready) .hk-rack:not(.open) { cursor: default; }

.hk-shield {
  position: absolute; inset: 0;
  border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background:
    repeating-linear-gradient(0deg, rgba(25, 227, 255, .06) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 40%, rgba(10, 40, 56, .9), rgba(3, 10, 16, .94) 70%);
  border: 4px solid rgba(25, 227, 255, .75);
  box-shadow: 0 0 26px rgba(25, 227, 255, .45), inset 0 0 40px rgba(25, 227, 255, .25);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#hack.ready .hk-rack:not(.open):hover .hk-shield {
  transform: scale(1.04);
  border-color: #BFF7FF;
  box-shadow: 0 0 50px rgba(25, 227, 255, .85), inset 0 0 60px rgba(25, 227, 255, .4);
}
#hack.ready .hk-rack:not(.open) .hk-shield { animation: shieldIdle 2.4s ease-in-out infinite; }
@keyframes shieldIdle { 50% { box-shadow: 0 0 40px rgba(25, 227, 255, .7), inset 0 0 50px rgba(25, 227, 255, .35); } }

/* padlock drawn in CSS */
.hk-lock { position: relative; width: 120px; height: 150px; }
.hk-lock::before {               /* shackle */
  content: ''; position: absolute; left: 22px; top: 0;
  width: 76px; height: 86px;
  border: 14px solid #8FEFFF; border-bottom: 0;
  border-radius: 50px 50px 0 0;
  box-sizing: border-box;
  filter: drop-shadow(0 0 10px rgba(25, 227, 255, .9));
}
.hk-lock i {                     /* body */
  position: absolute; left: 0; bottom: 0;
  width: 120px; height: 88px;
  border-radius: 16px;
  background: linear-gradient(180deg, #BFF7FF, #19B8D6);
  box-shadow: 0 0 20px rgba(25, 227, 255, .9);
}
.hk-lock i::after { content: ''; position: absolute; left: 50%; top: 26px; width: 18px; height: 34px; margin-left: -9px; border-radius: 9px; background: #06303a; }
.hk-code { font: 700 40px/1 var(--font-num); letter-spacing: 8px; color: #9FF4FF; text-shadow: 0 0 10px rgba(25, 227, 255, .9); }

.hk-prize {
  position: absolute; inset: 0;
  border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 45%, rgba(40, 24, 4, .94), rgba(8, 5, 2, .97) 72%);
  border: 4px solid var(--gold);
  box-shadow: 0 0 40px rgba(255, 154, 31, .7), inset 0 0 50px rgba(255, 154, 31, .35);
  opacity: 0;
  transform: scale(.6);
}
.hk-prize .v { font: 800 112px/1 var(--font-num); color: var(--gold-hi); text-shadow: 0 0 24px rgba(255, 154, 31, .95); white-space: nowrap; }
.hk-prize .t { font: 700 36px/1 var(--font-num); letter-spacing: 8px; color: #FFD9A0; }
.hk-rack.mult .hk-prize {
  background: radial-gradient(ellipse at 50% 45%, rgba(4, 34, 44, .94), rgba(2, 8, 12, .97) 72%);
  border-color: var(--cyan);
  box-shadow: 0 0 40px rgba(25, 227, 255, .75), inset 0 0 50px rgba(25, 227, 255, .35);
}
.hk-rack.mult .hk-prize .v { font-size: 170px; color: #E6FDFF; text-shadow: 0 0 26px rgba(25, 227, 255, 1); }
.hk-rack.mult .hk-prize .t { color: #9FF4FF; }

.hk-flash { position: absolute; inset: -30px; border-radius: 40px; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(25, 227, 255, .5) 40%, transparent 70%); opacity: 0; pointer-events: none; }

/* breach: shield glitches apart, flash, prize punches in */
.hk-rack.open .hk-shield { animation: breach .45s steps(1, end) forwards; }
.hk-rack.open.picked .hk-flash { animation: flash .55s ease-out; }
.hk-rack.open .hk-prize { animation: prizeIn .45s cubic-bezier(.2, 1.7, .4, 1) .22s forwards; }
.hk-rack.open.missed .hk-prize { animation: prizeMiss .35s ease-out forwards; }
.hk-rack.open.missed .hk-shield { animation: fadeOut .3s ease forwards; }
@keyframes breach {
  0%   { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  15%  { clip-path: inset(10% 0 55% 0); transform: translate(-18px, 0); filter: hue-rotate(160deg) brightness(1.8); }
  30%  { clip-path: inset(48% 0 12% 0); transform: translate(22px, 0); }
  45%  { clip-path: inset(0 0 72% 0); transform: translate(-10px, 0); filter: brightness(2.5); }
  60%  { clip-path: inset(70% 0 0 0); transform: translate(14px, 0); }
  75%  { clip-path: inset(30% 0 40% 0); opacity: .6; }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; }
}
@keyframes prizeIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes prizeMiss { from { opacity: 0; transform: scale(.85); } to { opacity: .55; transform: scale(.94); filter: saturate(.3) brightness(.7); } }
@keyframes fadeOut { to { opacity: 0; } }

/* ======================= Summary panel ======================= */

#panel {
  --rgb: 255, 160, 40;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85));
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  cursor: pointer;
}
#panel[data-theme="cyan"] { --rgb: 25, 227, 255; }
#panel.show { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.pn-card {
  min-width: 1200px;
  padding: 60px 120px 56px;
  text-align: center;
  border-radius: 40px;
  background:
    linear-gradient(180deg, rgba(var(--rgb), .14), transparent 30%),
    linear-gradient(180deg, rgba(16, 20, 26, .97), rgba(6, 8, 11, .97));
  border: 5px solid rgba(var(--rgb), .9);
  box-shadow: 0 0 80px rgba(var(--rgb), .55), inset 0 0 60px rgba(var(--rgb), .2);
  transform: scale(.7);
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1);
}
#panel.show .pn-card { transform: scale(1); }
.pn-title {
  font: italic 900 128px/1 var(--font-num);
  letter-spacing: 4px;
  color: #fff;
  text-shadow: 0 0 30px rgba(var(--rgb), .95), 0 6px 0 rgba(0, 0, 0, .6);
}
.pn-label { margin-top: 30px; font: 700 54px/1 var(--font-num); letter-spacing: 16px; color: rgba(255, 255, 255, .75); }
.pn-amount {
  margin-top: 16px;
  font: 800 230px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFBE6 0%, #FFE08A 30%, var(--gold) 55%, #B86A0C 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .85));
}
.pn-amount.land { animation: amountLandPlain .5s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes amountLandPlain { from { transform: scale(1.3); } to { transform: scale(1); } }
.pn-sub { margin-top: 14px; font: 700 52px/1 var(--font-num); letter-spacing: 6px; color: rgba(var(--rgb), 1); }
.pn-sub:empty { display: none; }
.pn-hint { margin-top: 40px; font: 700 40px/1 var(--font-num); letter-spacing: 10px; color: rgba(233, 253, 255, .6); opacity: 0; }
#panel.ready .pn-hint { animation: hintBlink 1.6s ease-in-out infinite; }

/* ======================= Splash ======================= */

#splash {
  position: absolute; inset: 0;
  background: #000;
  cursor: default;
  transition: opacity .8s ease, transform .9s cubic-bezier(.5, 0, .2, 1);
}
#splash img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#splash.ready { cursor: pointer; }
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

.sp-track {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #050608, #12151a);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9);
}
.sp-fill {
  position: absolute; inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: 14px;
  background: linear-gradient(180deg, #FFF0C2 0%, #FFC04A 40%, #F08A0C 75%, #B85E00 100%);
  box-shadow: 0 0 18px rgba(255, 160, 40, .9);
}
/* moving glint on the fill */
.sp-fill::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: glint 1.3s linear infinite;
}
@keyframes glint { from { transform: translateX(-100%); } to { transform: translateX(650%); } }

.sp-pct {
  position: absolute; left: 0; right: 0; top: 1490px;
  text-align: center;
  font: 700 32px/1 var(--font-num);
  letter-spacing: 12px;
  color: rgba(255, 220, 160, .8);
  text-shadow: 0 0 10px rgba(255, 140, 30, .7);
}
.sp-tap {
  position: absolute; left: 0; right: 0; top: 1358px;
  text-align: center;
  font: 800 76px/1 var(--font-num);
  letter-spacing: 22px;
  color: #fff;
  text-shadow: 0 0 20px rgba(25, 227, 255, .95), 0 0 50px rgba(25, 227, 255, .5), 0 4px 0 rgba(0, 0, 0, .8);
  opacity: 0;
}
#splash.ready .sp-tap { animation: tapIn .5s ease-out both, hintBlink 1.6s ease-in-out .5s infinite; }
@keyframes tapIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ======================= Polish ======================= */

/* idle shimmer across the AXIOM plate (clip-path keeps it on the plate; overlay blend only lifts the metal) */
#plate-shine {
  position: absolute;
  left: 1130px; top: 40px; width: 490px; height: 240px;
  clip-path: polygon(2% 52%, 14% 9%, 40% 9%, 50% 0%, 60% 9%, 86% 9%, 98% 52%, 86% 90%, 14% 90%);
  mix-blend-mode: overlay;
  pointer-events: none;
  overflow: hidden;
}
#plate-shine i {
  position: absolute; top: -20%; left: 0;
  width: 26%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: plateSweep 6s cubic-bezier(.55, 0, .35, 1) 1.2s infinite;
}
@keyframes plateSweep {
  0% { transform: translateX(-120%) skewX(-18deg); }
  22%, 100% { transform: translateX(480%) skewX(-18deg); }
}
/* the cyan core of the plate breathes */
#plate-shine::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 180px; height: 180px; margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 227, 255, .7), transparent 65%);
  animation: breathe 3.2s ease-in-out infinite;
}
#stage.fs #plate-shine::after { background: radial-gradient(circle, rgba(255, 154, 31, .75), transparent 65%); }

#corner {
  position: absolute; right: 44px; top: 36px;
  display: flex; gap: 22px;
}
.corner-btn {
  width: 92px; height: 92px;
  padding: 20px;
  border-radius: 50%;
  border: 3px solid rgba(25, 227, 255, .45);
  background: rgba(4, 12, 18, .6);
  box-shadow: 0 0 18px rgba(0, 0, 0, .6);
  cursor: pointer;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.corner-btn:hover { border-color: rgba(25, 227, 255, .95); box-shadow: 0 0 22px rgba(25, 227, 255, .6); }
.corner-btn:active { transform: scale(.92); }
.corner-btn:focus-visible { box-shadow: 0 0 0 6px rgba(25, 227, 255, .8); }
.corner-btn svg { width: 100%; height: 100%; fill: none; stroke: #BFF7FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.corner-btn .spk { fill: #BFF7FF; }
#btn-sound .waves { display: none; }
#btn-sound.on .waves { display: inline; }
#btn-sound.on .mute { display: none; }
#btn-sound.on { border-color: rgba(25, 227, 255, .95); }

/* fullscreen button shows "exit" arrows while fullscreen is on */
#btn-full .fs-exit { display: none; }
#btn-full.on .fs-enter { display: none; }
#btn-full.on .fs-exit { display: inline; }
#btn-full.on { border-color: rgba(25, 227, 255, .95); }

/* "Back to case study": top-left, only on the standalone page, above the splash */
#btn-back {
  position: absolute; left: 44px; top: 36px; z-index: 60;
  display: none;
}
.standalone #btn-back { display: inline-flex; }
.corner-pill {
  width: auto; padding: 0 40px 0 26px;
  border-radius: 46px;
  align-items: center; gap: 14px;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 36px;
  letter-spacing: .06em; text-transform: uppercase; color: #BFF7FF;
}
.corner-pill svg { width: 44px; height: 44px; flex: none; stroke-width: 2.6; }