/* Base */
.tpa-heist {
  --accent: #46b5ff;
  --panel: rgba(255,255,255,.06);
  --panel-b: rgba(255,255,255,.1);
  color:#e8f0ff;
}

.tpa-game--vault_heist {
    background: url(https://trythinkdigital.co.uk/wp-content/plugins/think-prize-arcade/assets/uploads/vault.png) !important;
    background-position: center center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


/* Top nav */
.tpa-heist__nav{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.tpa-back-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#dfe7ff;text-decoration:none;padding:6px 14px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.25s}
.tpa-back-btn:hover{color:#fff;border-color:rgba(80,180,255,.25);box-shadow:0 0 8px rgba(80,180,255,.2)}
.tpa-back-icon{font-size:16px;opacity:.9}
.tpa-heist__progress{display:flex;align-items:center;gap:10px;justify-content: center;}
.tpa-heist__progress .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.tpa-heist__progress .dot.is-active{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.tpa-heist__label{opacity:.85;font-size:13px}

/* Stage shell */
.tpa-stage{background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;padding:14px 14px 12px;margin-bottom:14px}
.tpa-stage__head h3{margin:0 0 4px 0;font-size:18px}
.tpa-stage__hint{margin:0 0 12px 0;opacity:.85;font-size:13px}
.tpa-stage__body{padding:10px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.09);border-radius:10px}
.tpa-stage__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

/* Buttons */
.tpa-btn{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);color:#e9f2ff;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:.25s}
.tpa-btn:hover{background:rgba(70,181,255,.12);border-color:rgba(70,181,255,.35)}
.tpa-link{background:none;border:none;color:#cfe3ff;text-decoration:underline;cursor:pointer}

/* ===== Laser Grid (Stage 1) ===== */
.tpa-sim--lasers{display:flex;justify-content:center}
.laser-area{
  position:relative;
  width:min(680px,92vw); height:min(420px,72vw);
  border-radius:12px; overflow:hidden;
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(70,181,255,.09), rgba(16,18,36,.8) 60%, rgba(0,0,0,.9) 100%),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/ 100% 36px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/ 36px 100%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.02), 0 10px 28px rgba(0,0,0,.35);
}
.node{
  position:absolute; width:72px; height:72px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.02em; text-transform:uppercase;
}
.node.start{left:10px;top:10px;background:rgba(109,214,168,.12);border:1px solid rgba(109,214,168,.35)}
.node.goal{right:10px;bottom:10px;background:rgba(255,214,107,.12);border:1px solid rgba(255,214,107,.35)}
.node span{opacity:.85}

.puck{
  position:absolute; left:22px; top:22px;
  width:26px; height:26px; border-radius:50%;
  background: radial-gradient(100% 100% at 30% 30%, #fff, #a7cfff);
  box-shadow: 0 0 8px rgba(70,181,255,.55), 0 0 18px rgba(70,181,255,.28);
  border:1px solid rgba(255,255,255,.6);
  cursor:grab; touch-action:none; /* prevent scroll while dragging */
	top: auto;
}
.puck:active{cursor:grabbing}
.puck.is-reset{animation:puckReset .25s ease}
@keyframes puckReset{from{transform:scale(.9)}to{transform:scale(1)}}

/* Checkpoints */
.checkpoint{
  position:absolute; width:22px; height:22px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.checkpoint.is-reached{background:rgba(109,214,168,.18); border-color:rgba(109,214,168,.6)}

/* Beams */
.beam{position:absolute; background:linear-gradient(to right, rgba(255,78,122,.0), rgba(255,78,122,.7), rgba(255,78,122,.0))}
.beam.h{height:4px;border-radius:3px;filter:drop-shadow(0 0 6px rgba(255,78,122,.7))}
.beam.v{width:4px;border-radius:3px;filter:drop-shadow(0 0 6px rgba(255,78,122,.7))}
.beam.h::after,.beam.v::after{
  content:''; position:absolute; inset:-10px;
  background:radial-gradient(18px 18px at 50% 50%, rgba(255,78,122,.25), transparent 70%);
  pointer-events:none;
}
/* Gentle oscillation so the field feels alive, not impossible */
@keyframes swayX{from{transform:translateX(-6px)}50%{transform:translateX(6px)}to{transform:translateX(-6px)}}
@keyframes swayY{from{transform:translateY(-6px)}50%{transform:translateY(6px)}to{transform:translateY(-6px)}}
.beam.h{animation:swayY 3.8s ease-in-out infinite}
.beam.h.slow{animation-duration:5.4s}
.beam.v{animation:swayX 4.2s ease-in-out infinite}
.beam.v.slow{animation-duration:6.2s}

/* Mobile path (hidden on desktop) */
.mobile-path{display:none}
@media (max-width: 768px){
  .mobile-path{display:block;position:absolute;inset:0}
  .mobile-path li{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
}







/* === Laser crackle / flicker === */
@keyframes laserFlicker {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,78,122,.70)); opacity: 1; }
  48%      { filter: drop-shadow(0 0 7px rgba(255,78,122,.75)); opacity: 1; }
  50%      { filter: drop-shadow(0 0 3px rgba(255,78,122,.35)); opacity: .75; }
  52%      { filter: drop-shadow(0 0 9px rgba(255,78,122,.9));  opacity: 1; }
}

.beam {
  position:absolute;
  background: linear-gradient(to right, rgba(255,78,122,0), rgba(255,78,122,.75), rgba(255,78,122,0));
  animation: laserFlicker 2.2s infinite;
}

.beam.h { height: 4px; border-radius: 3px; }
.beam.v { width: 4px;  border-radius: 3px; }

/* “Power dip”: when off, we make it really faint and non-colliding via JS */
.beam.is-off {
  opacity: .08 !important;
  filter: none !important;
}

/* Optional: tiny star-like nodes where H/V cross (just aesthetics) */
.beam.h::before, .beam.v::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(18px 18px at 50% 50%, rgba(255,78,122,.22), transparent 70%);
  pointer-events: none;
}

/* Gentle drift like before, but toned down so timing windows matter more */
@keyframes swayX { from { transform: translateX(-4px) } 50% { transform: translateX(4px) } to { transform: translateX(-4px) } }
@keyframes swayY { from { transform: translateY(-4px) } 50% { transform: translateY(4px) } to { transform: translateY(-4px) } }
.beam.h { animation: laserFlicker 2.2s infinite, swayY 4.8s ease-in-out infinite; }
.beam.v { animation: laserFlicker 2.2s infinite, swayX 5.4s ease-in-out infinite; }

/* Noise shimmer overlay (super subtle) */
.laser-area::after{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.02), transparent 40%),
    radial-gradient(120% 160% at 80% 100%, rgba(255,255,255,.015), transparent 50%);
  mix-blend-mode: screen;
  opacity:.6;
}

/* Make sure the mobile path list never shows bullets if CSS fails elsewhere */
.mobile-path { list-style: none; margin: 0; padding: 0; }




/* ===== Stage 1: Vertical Laser Run ===== */
.tpa-sim--laser-run{display:flex;justify-content:center}

.laser-run{
  position:relative;
  width:min(560px,92vw);
  height:min(620px,140vw);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(160% 160% at 50% 0%, rgba(70,181,255,.10), rgba(16,18,36,.86) 58%, rgba(0,0,0,.92) 100%),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 36px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/36px 100%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.02), 0 12px 28px rgba(0,0,0,.38);
}

.laser-run .hud{position:absolute; left:12px; right:12px; top:10px; display:flex; gap:12px; align-items:center; z-index:5}
.laser-run .timer{flex:1; height:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:999px; overflow:hidden}
.laser-run .timer .fill{display:block; height:100%; width:0%; background:linear-gradient(90deg, #46b5ff, #6dd6a8); box-shadow:0 0 10px rgba(70,181,255,.45)}
.laser-run .status{font-size:12px; opacity:.85}

.laser-run .puck{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:24px;
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(100% 100% at 30% 30%, #fff, #a7cfff);
  box-shadow: 0 0 10px rgba(70,181,255,.55), 0 0 18px rgba(70,181,255,.28);
  border:1px solid rgba(255,255,255,.6);
  cursor:grab; touch-action:none;
  z-index:4;
}
.laser-run .puck:active{cursor:grabbing}

.laser-layer{position:absolute; inset:0; overflow:hidden; z-index:3}

/* An individual falling laser */
.fall-laser{
  position:absolute; left:0; top:-20px;
  width:100%; height:12px;
  pointer-events:none;
  /* subtle flicker */
  animation: laserFlicker 2.1s infinite;
}
.fall-laser .beam-left,
.fall-laser .beam-right{
  position:absolute; top:0; height:100%;
  background: linear-gradient(to right, rgba(255,78,122,0), rgba(255,78,122,.85), rgba(255,78,122,0));
  filter: drop-shadow(0 0 8px rgba(255,78,122,.85));
  border-radius:3px;
}
.fall-laser .gap{
  position:absolute; top:0; height:100%;
  background: radial-gradient(20px 40px at 50% 50%, rgba(255,255,255,.15), rgba(255,255,255,0) 70%);
  opacity:.25;
}

@keyframes laserFlicker {
  0%,100%{opacity:1}
  48%{opacity:1}
  50%{opacity:.8}
  52%{opacity:1}
}

.laser-run.is-failed .puck{animation: hitflash .35s ease}
@keyframes hitflash{
  0%{box-shadow:0 0 0 rgba(255,78,122,0); background:#fff}
  40%{box-shadow:0 0 20px rgba(255,78,122,.75); background:#ffd4df}
  100%{box-shadow:0 0 10px rgba(70,181,255,.55); background: radial-gradient(100% 100% at 30% 30%, #fff, #a7cfff)}
}

@media (prefers-reduced-motion: reduce){
  .fall-laser{animation:none!important}
}




/* Vault reveal */
.tpa-vaultreveal{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
@media (max-width:780px){.tpa-vaultreveal{grid-template-columns:1fr}}
.tpa-vaultreveal .door{position:relative;width:min(360px,80vw);aspect-ratio:1;border-radius:50%;
  background: radial-gradient(120% 120% at 50% 20%, rgba(70,181,255,.18), rgba(20,25,45,.6) 58%, rgba(0,0,0,.7) 100%);
  margin:auto;box-shadow:0 12px 28px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.06);overflow:hidden}
.tpa-vaultreveal .wins{background:var(--panel);border:1px solid var(--panel-b);border-radius:12px;padding:12px}
.tpa-vaultreveal .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tpa-chip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.tpa-chip__ticket{font-weight:600}
.tpa-empty{opacity:.85}
.summary{margin-top:10px}
.summary .row{display:flex;justify-content:space-between;gap:12px}
.acts{margin-top:10px}

/* Vault open */
.tpa-heist.is-open .tpa-vaultreveal .door{transform:perspective(800px) rotateY(-18deg);transform-origin:left center;transition:transform .6s ease}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}


/* ───────── Cinematic overlay ───────── */
.tpa-cinematics {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: auto;
}

.tpa-cinematics__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  padding: 20px 24px;
  color: #dbeaff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  font-size: 20px;
  line-height: 1.4;
}

/* add to / replace parts of your overlay styles */
.tpa-cinematics--black {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;        /* solid black base */
  pointer-events: auto;
  overflow: hidden;        /* so the sweep edges don't show */
  /* optional tunables */
  --siren-opacity: .24;
  --siren-blur: 24px;
  --siren-speed: 2400ms;
}

.tpa-cinematics--black::before,
.tpa-cinematics--black::after {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: 0;
  filter: blur(var(--siren-blur));
  opacity: var(--siren-opacity);
  mix-blend-mode: screen; /* keeps it subtle over black */
  background:
    radial-gradient(50% 60% at 30% 50%, rgba(255,60,60,0.75), transparent 60%),
    radial-gradient(50% 60% at 70% 50%, rgba(70,181,255,0.75), transparent 60%);
  transform: translateX(-35%);
  animation: tpa-siren-sweep var(--siren-speed) ease-in-out infinite;
}
.tpa-cinematics--black::after {
  opacity: calc(var(--siren-opacity) * .75);
  animation-delay: calc(var(--siren-speed) / 2); /* stagger second layer */
}

@keyframes tpa-siren-sweep {
  0%   { transform: translateX(-35%); }
  50%  { transform: translateX(35%); }
  100% { transform: translateX(-35%); }
}

/* keep your text above the sweep */
.tpa-cinematics--black .tpa-cinematics__inner { position: relative; z-index: 1; }

/* reduced-motion: keep it static + softer */
@media (prefers-reduced-motion: reduce) {
  .tpa-cinematics--black::before,
  .tpa-cinematics--black::after { animation: none; opacity: .14; }
}


.tpa-cine-line {
  min-height: 2.2em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.tpa-cine-line.is-show {
  opacity: 1;
  transform: translateY(0);
}

.tpa-cine-acts {
  margin-top: 10px;
  opacity: 0.75;
}

.tpa-link.tpa-cine-skip {
  color: #9ecbff;
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Siren sweep background (police ambience) */
.tpa-cinematics__siren,
.tpa-cinematics__vignette {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tpa-cinematics__siren::before,
.tpa-cinematics__siren::after {
  content: "";
  position: absolute; inset: -20%;
  filter: blur(22px);
  opacity: 0.28;
  transform: translateX(-30%);
  background:
    radial-gradient(50% 60% at 30% 50%, rgba(255,60,60,0.65), transparent 60%),
    radial-gradient(50% 60% at 70% 50%, rgba(70,181,255,0.65), transparent 60%);
  animation: tpa-siren-sweep 2400ms ease-in-out infinite;
}
.tpa-cinematics__siren::after {
  animation-delay: 1200ms;
  opacity: 0.22;
}

@keyframes tpa-siren-sweep {
  0%   { transform: translateX(-35%); }
  50%  { transform: translateX(35%); }
  100% { transform: translateX(-35%); }
}

.tpa-cinematics__vignette {
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(5,8,18,0) 40%, rgba(5,8,18,0.35) 70%, rgba(5,8,18,0.7) 100%),
    rgba(6,8,17,0.4);
}

/* Reduced motion: kill sweep, keep static */
@media (prefers-reduced-motion: reduce) {
  .tpa-cinematics__siren::before, .tpa-cinematics__siren::after { animation: none; opacity: 0.18; }
}

/* ───────── Reveal polish ───────── */
.tpa-vaultreveal .door {
  position: relative;
  margin: 0 auto 16px;
}
.tpa-vaultreveal .wins {
  position: relative;
}

/* Title pulse on reveal */
.tpa-reveal__title {
  text-align: center;
  margin: 6px 0 14px;
  color: #e7f3ff;
  text-shadow: 0 0 18px rgba(70,181,255,0.5);
  transform-origin: center;
  animation: tpa-title-pop 380ms cubic-bezier(.17,.88,.24,1.1) both;
}
@keyframes tpa-title-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Stagger chips in with slide+fade */
[data-chips] [data-chip] {
  opacity: 0; transform: translateY(8px) scale(.98);
}
[data-chips].is-show [data-chip] {
  animation: tpa-chip-in 340ms cubic-bezier(.15,.65,.2,1) forwards;
}
[data-chips].is-show [data-chip]:nth-child(1){ animation-delay: 40ms; }
[data-chips].is-show [data-chip]:nth-child(2){ animation-delay: 90ms; }
[data-chips].is-show [data-chip]:nth-child(3){ animation-delay: 140ms; }
[data-chips].is-show [data-chip]:nth-child(4){ animation-delay: 190ms; }
[data-chips].is-show [data-chip]:nth-child(5){ animation-delay: 240ms; }
/* add more nth-child as you like */

@keyframes tpa-chip-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* No-wins alert vibe (red glow) */
.tpa-empty {
  text-align: center;
  color: #ffd5d5;
  background: linear-gradient(180deg, rgba(255,80,80,0.08), rgba(255,80,80,0.02));
  border: 1px solid rgba(255,120,120,0.18);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 24px rgba(255, 96, 96, 0.15) inset;
}

/* ───────────────── Overlay: solid black ───────────────── */
.tpa-cinematics--black {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;                 /* SOLID BLACK */
  color: #e4eeff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.tpa-cinematics--black .tpa-cinematics__inner {
  max-width: 720px;
  padding: 24px 28px;
  text-align: center;
  font-size: 20px;
  line-height: 1.45;
}
.tpa-cine-line {
  min-height: 2.2em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.tpa-cine-line.is-show { opacity: 1; transform: translateY(0); }
.tpa-cine-acts { margin-top: 12px; opacity: .8; }
.tpa-cine-skip { color: #9ecbff; text-decoration: underline; }

/* Reduced motion: show line immediately */
@media (prefers-reduced-motion: reduce) {
  .tpa-cine-line { transition: none; opacity: 1; transform: none; }
}

/* ───────────────── Results panel (Manifest) ───────────────── */
.tpa-manifest {
  --card-bg: radial-gradient(120% 140% at 50% 0%, #0b1020 0%, #080c18 55%, #070a16 100%);
  --border: color-mix(in oklab, var(--tpa-accent, #46b5ff), #fff 8%);
  background: var(--card-bg);
  border: 1px solid rgba(150, 190, 255, .16);
  border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 24px color-mix(in srgb, var(--tpa-accent, #46b5ff) 18%, transparent) inset;
  max-width: 880px;
  margin: 0 auto;
}
.tpa-manifest[hidden] { display: none !important; }

.tpa-manifest__head {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-bottom: 12px;
}
.tpa-manifest__title {
  margin: 0;
  font-size: 24px;
  color: #e7f3ff;
  text-shadow: 0 0 16px rgba(70,181,255,.45);
  animation: tpa-title-pop 360ms cubic-bezier(.17,.88,.24,1.1) both;
}
@keyframes tpa-title-pop {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.tpa-manifest__kpis {
  display: grid;
  grid-auto-flow: column;
  gap: 18px;
}
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(150, 190, 255, .16);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  min-width: 120px;
}
.kpi .k { display: block; font-size: 12px; color: #9ecbff; margin-bottom: 4px; }
.kpi .v { font-variant-numeric: tabular-nums; font-size: 24px; color: #eaf3ff; }

/* Haul list */
.haul {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 10px;
  margin-top: 6px;
}
.haul__chip {
  background: linear-gradient(180deg, rgba(70,181,255,.10), rgba(70,181,255,.03));
  border: 1px solid rgba(70,181,255,.28);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  color: #dff2ff;
  opacity: 0; transform: translateY(8px) scale(.98);
}
.haul.is-show .haul__chip {
  animation: tpa-chip-in 320ms cubic-bezier(.15,.65,.2,1) forwards;
}
.haul.is-show .haul__chip:nth-child(1){ animation-delay: 40ms; }
.haul.is-show .haul__chip:nth-child(2){ animation-delay: 90ms; }
.haul.is-show .haul__chip:nth-child(3){ animation-delay: 140ms; }
.haul.is-show .haul__chip:nth-child(4){ animation-delay: 190ms; }
.haul.is-show .haul__chip:nth-child(5){ animation-delay: 240ms; }
@keyframes tpa-chip-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.haul__ticket { font-weight: 600; color: #eaf3ff; }
.haul__prize  { font-size: 13px; color: #9efff7; }

/* Failure card */
.tpa-fail {
  text-align: center;
  margin-top: 4px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 130, 130, .22);
  background: linear-gradient(180deg, rgba(255,60,60,.10), rgba(255,60,60,.03));
  box-shadow: 0 0 22px rgba(255, 80, 80, .14) inset;
}
.tpa-fail__badge { font-size: 28px; margin-bottom: 6px; }
.tpa-fail__msg { color: #ffd5d5; margin: 0; }

/* Footer actions */
.tpa-manifest__acts { display: flex; justify-content: center; margin-top: 14px; }

/* Small screens */
@media (max-width: 520px){
  .tpa-manifest__kpis { grid-auto-flow: row; }
  .kpi { min-width: 0; }
}

/* ───────── Solid black cinematic overlay ───────── */
.tpa-cinematics--black {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #000; /* solid */
  pointer-events: auto;
}
.tpa-cinematics--black .tpa-cinematics__inner {
  color: #dbeaff;
  max-width: 720px; text-align: center;
  padding: 22px 24px; font-size: 20px; line-height: 1.4;
}
.tpa-cine-line { min-height: 2.2em; opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.tpa-cine-line.is-show { opacity: 1; transform: translateY(0); }
.tpa-cine-acts { margin-top: 10px; opacity: .8; }
.tpa-link.tpa-cine-skip { color: #9ecbff; text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* Reduced motion: no fades between lines */
@media (prefers-reduced-motion: reduce) {
  .tpa-cine-line { transition: none; }
}

/* ───────── New results UI ───────── */
.tpa-heistreveal { position: relative; }
.tpa-results {
  --c-bg: #0a0f1e; --c-card: #0e152b; --c-border: rgba(70,181,255,0.25);
  --c-cyan: #46b5ff; --c-green: #34ffa8; --c-text: #eaf4ff; --c-sub: #9ecbff;
  background: radial-gradient(120% 140% at 50% 20%, #0b1020 0%, #070a16 60%, #060811 100%);
  border: 1px solid var(--c-border);
  border-radius: 16px; padding: 18px; box-shadow:
    0 12px 30px rgba(0,0,0,0.35),
    0 0 24px rgba(70,181,255,0.12) inset;
}

.tpa-results__head { display: grid; gap: 10px; justify-items: center; margin-bottom: 12px; }
.tpa-results__badge {
  font-size: 12px; letter-spacing: .24em; color: var(--c-green);
  border: 1px solid rgba(52,255,168,0.35);
  background: linear-gradient(180deg, rgba(52,255,168,.08), rgba(52,255,168,0));
  border-radius: 999px; padding: 4px 10px;
  text-shadow: 0 0 8px rgba(52,255,168,.4);
}
.tpa-results__title {
  margin: 0; color: var(--c-text);
  text-shadow: 0 0 18px rgba(70,181,255,.45);
  font-weight: 700; letter-spacing: .02em;
}

.tpa-results__stats {
  display: grid; grid-auto-flow: column; gap: 16px; align-items: end;
}
.tpa-results__stats .stat { background: rgba(10,15,30,.5); border: 1px solid var(--c-border);
  padding: 8px 12px; border-radius: 12px; min-width: 120px; text-align: center;
}
.tpa-results__stats .k { display: block; font-size: 12px; color: var(--c-sub); opacity: .9; }
.tpa-results__stats .v { display: block; font-size: 28px; font-weight: 800; color: var(--c-text); }

/* Win cards */
.tpa-win-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 12px; }
.win-card { position: relative; overflow: hidden; border-radius: 14px; padding: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 18px rgba(70,181,255,.08) inset;
  opacity: 0; transform: translateY(8px) scale(.98);
  animation: tpa-card-in 340ms cubic-bezier(.15,.65,.2,1) forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes tpa-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }

.win-card__glow { position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(60% 50% at 30% 50%, rgba(70,181,255,.15), transparent 60%),
              radial-gradient(60% 50% at 70% 50%, rgba(52,255,168,.12), transparent 60%);
  filter: blur(16px);
}
.win-card__head { display: flex; justify-content: space-between; align-items: baseline; color: var(--c-sub); font-size: 12px; }
.win-card__id { color: var(--c-text); font-weight: 700; }
.win-card__prize { margin-top: 6px; font-size: 16px; color: var(--c-text); }

/* No-wins panel */
.tpa-results__empty {
  margin-top: 8px;
  border: 1px solid rgba(255,96,96,.25);
  background: linear-gradient(180deg, rgba(255,80,80,.08), rgba(255,80,80,.02));
  border-radius: 14px; padding: 16px; text-align: center; color: #ffdfe0;
  position: relative; overflow: hidden;
}
.tpa-results__empty h5 { margin: 6px 0 4px; font-size: 18px; }
.tpa-results__empty p { margin: 0; opacity: .9; }
.tpa-results__empty .empty__pulse { position: absolute; inset: -10%; pointer-events: none;
  background: radial-gradient(55% 45% at 40% 50%, rgba(255,100,100,.15), transparent 60%),
              radial-gradient(55% 45% at 60% 50%, rgba(255,0,0,.12), transparent 60%);
  filter: blur(16px); opacity: .6; animation: tpa-empty-pulse 1800ms ease-in-out infinite;
}
@keyframes tpa-empty-pulse { 50% { opacity: .2 } }

/* Footer actions */
.tpa-results__acts { display:flex; justify-content:center; margin-top: 16px; }

/* Count-up emphasis */
[data-count-up] { text-shadow: 0 0 12px rgba(70,181,255,.45); }

/* Reduced motion: remove continuous pulses/animations */
@media (prefers-reduced-motion: reduce) {
  .tpa-results__empty .empty__pulse { animation: none; opacity: .18; }
  .win-card { animation: none; opacity: 1; transform: none; }
}