/* ═══════════════════════════════════════════════════════════════════════
   STRIKA — bet-success · "THE SURGE"
   ═══════════════════════════════════════════════════════════════════════
   Not a card that appears. A sequence that rises.

   Three states live on one attribute — [data-state] on the overlay — so
   the whole thing is a set of transitions between them rather than a
   re-render. Nothing is destroyed and rebuilt mid-motion, which is what
   makes it read as one continuous movement instead of three separate
   animations that happen to run in order.

     surge   liquid floods up from the bottom edge, the mark strikes,
             the return figure rolls up from zero
     settle  liquid relaxes into a wave; the crown lifts and shrinks;
             the sheet cascades up through it
     rest    everything at final size, scrollable

   Motion is transform and opacity only — no width, height, top or margin
   is animated anywhere — so it composites on the GPU and holds up on a
   mid-range phone with the blur layer active.
   ═══════════════════════════════════════════════════════════════════════ */

.sg{
  --sg-ease:cubic-bezier(.22,.68,0,1.08);
  --sg-ease-soft:cubic-bezier(.4,0,.2,1);
  --sg-slow:.72s; --sg-mid:.46s; --sg-fast:.26s;
  --sg-volt:#0BB55F; --sg-volt-2:#0A9A4F; --sg-deep:#04381D;
}

@keyframes sgFade{from{opacity:0}to{opacity:1}}
@keyframes sgOut{to{opacity:0;transform:scale(.985)}}
/* the tick is drawn, not faded in */
@keyframes sgStrike{
  0%{stroke-dashoffset:48;opacity:0}
  18%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes sgMarkIn{
  0%{transform:scale(.3) rotate(-14deg);opacity:0}
  58%{transform:scale(1.12) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
/* two crests at different speeds — one alone reads as a shape, two
   reading against each other read as liquid */
@keyframes sgSwellA{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(-3%) translateY(-8px)}
}
@keyframes sgSwellB{
  0%,100%{transform:translateX(-2%) translateY(-4px)}
  50%{transform:translateX(1%) translateY(4px)}
}
@keyframes sgSpark{
  0%{transform:translate(0,0) scale(0);opacity:0}
  14%{opacity:1;transform:translate(0,-10px) scale(1)}
  100%{transform:translate(var(--x,0),-260px) scale(.2);opacity:0}
}
@keyframes sgCascade{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

/* ── STAGE ── full viewport, not a bottom sheet ── */
.bet-success-overlay.sg{
  position:fixed;inset:0;z-index:11000;
  display:flex;flex-direction:column;
  background:var(--overlay-scrim,rgba(9,12,28,.5));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:sgFade .2s ease;
  font-family:var(--font-body,'Manrope',sans-serif);
  overflow:hidden;
}
.bet-success-overlay.sg.sg-out{animation:sgOut .26s var(--sg-ease-soft) forwards}

.sg-stage{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  width:100%;max-width:560px;margin:0 auto;
}

/* ── THE LIQUID ──
   In `surge` it fills the viewport; in `settle`/`rest` it retreats to a
   band behind the crown. Same element throughout, so the flood BECOMES
   the header rather than being swapped for one. */
/* Full-bleed and never transformed. Translating it by a percentage of
   its own height was fragile — the gap it left between the crown and
   the sheet showed the blurred page through. The retreat is now an
   illusion created by the sheet rising to cover it, which is both
   simpler and impossible to get wrong at any viewport height. */
.sg-fluid{
  position:absolute;inset:0;
  pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,
    var(--sg-volt-2) 0%, var(--sg-volt) 38%, var(--sg-deep) 100%);
}

/* The wave rides the waterline — the point where liquid meets the
   sheet. It moves up as the sheet rises, so the two stay joined. */
.sg-wave{
  position:absolute;left:-6%;width:112%;height:120px;opacity:.5;
  transition:top var(--sg-slow) var(--sg-ease);
}
.sg[data-state="surge"] .sg-wave{top:62%}
.sg[data-state="settle"] .sg-wave,
.sg[data-state="rest"] .sg-wave{top:196px}
.sg-wave path{fill:currentColor}
.sg-wave-back{color:var(--sg-volt-2);opacity:.55;animation:sgSwellA 6.5s ease-in-out infinite}
.sg-wave-front{color:var(--sg-volt);animation:sgSwellB 5s ease-in-out infinite}

.sg-sparks{position:absolute;inset:0;overflow:hidden}
.sg-sparks i{
  position:absolute;bottom:34%;
  width:var(--sz,3px);height:var(--sz,3px);
  border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 0 10px rgba(255,255,255,.7);
  animation:sgSpark var(--dur,2s) var(--sg-ease-soft) var(--d,0ms) forwards;
}
.sg[data-state="rest"] .sg-sparks{opacity:0;transition:opacity .4s}

/* ── 1 · CROWN ──
   Centred and large during surge; lifts, shrinks and settles into a
   header. One element, transformed — never re-laid-out. */
.sg-crown{
  position:relative;z-index:2;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:0 24px;
  transition:transform var(--sg-slow) var(--sg-ease),
             height var(--sg-slow) var(--sg-ease),
             padding var(--sg-slow) var(--sg-ease);
}
.sg[data-state="surge"] .sg-crown{height:100dvh}
.sg[data-state="settle"] .sg-crown,
.sg[data-state="rest"] .sg-crown{
  height:250px;padding-top:calc(env(safe-area-inset-top) + 14px);
}

.sg-mark{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.4);
  animation:sgMarkIn .58s var(--sg-ease) both;
  transition:transform var(--sg-mid) var(--sg-ease);
}
.sg-mark svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round}
.sg-tick{stroke-dasharray:48;animation:sgStrike .5s var(--sg-ease-soft) .28s both}
.sg[data-state="settle"] .sg-mark,
.sg[data-state="rest"] .sg-mark{transform:scale(.62)}

.sg-eyebrow{
  margin-top:14px;
  font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  transition:margin var(--sg-mid) var(--sg-ease);
}
.sg[data-state="settle"] .sg-eyebrow,
.sg[data-state="rest"] .sg-eyebrow{margin-top:8px}

/* the figure is the hero — nothing else on this screen competes */
.sg-figure{
  display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:10px;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-weight:800;letter-spacing:-.045em;line-height:1;
  text-shadow:0 6px 30px rgba(0,0,0,.32);
  font-size:clamp(44px,15vw,68px);
  transition:font-size var(--sg-slow) var(--sg-ease);
}
.sg[data-state="settle"] .sg-figure,
.sg[data-state="rest"] .sg-figure{font-size:clamp(32px,10vw,44px)}
.sg-figure-cur{font-size:.42em;font-weight:700;opacity:.72}
.sg-figure-num{font-variant-numeric:tabular-nums}

.sg-figure-cap{
  margin-top:10px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.66);transition:opacity var(--sg-fast);
}
.sg[data-state="rest"] .sg-figure-cap{opacity:.5}

/* ── 2 · SHEET ──
   Below the fold during surge; rises through the wave on settle. Only
   scrollable at rest — scrolling mid-animation fights the transform. */
.sg-sheet{
  position:relative;z-index:3;flex:1;min-height:0;
  background:var(--paper,#fff);
  border-radius:26px 26px 0 0;
  box-shadow:0 -20px 60px rgba(9,12,28,.36);
  padding:0 18px calc(env(safe-area-inset-bottom) + 18px);
  overflow:hidden;
  transform:translateY(100%);
  transition:transform var(--sg-slow) var(--sg-ease);
  will-change:transform;
}
.sg[data-state="settle"] .sg-sheet,
.sg[data-state="rest"] .sg-sheet{transform:none}
.sg[data-state="rest"] .sg-sheet{overflow-y:auto;scrollbar-width:none}
.sg-sheet::-webkit-scrollbar{display:none}

.sg-grab{width:40px;height:4px;border-radius:2px;background:var(--line-2,#D3DAEA);margin:10px auto 16px}

/* children cascade on a shared index — the stagger is what sells it as
   one movement rather than a block arriving */
.sg-sheet > *:not(.sg-grab){
  opacity:0;animation:sgCascade .5s var(--sg-ease) both;animation-play-state:paused;
}
.sg[data-state="settle"] .sg-sheet > *:not(.sg-grab),
.sg[data-state="rest"] .sg-sheet > *:not(.sg-grab){
  animation-play-state:running;
  animation-delay:calc(var(--i,0) * 70ms + 180ms);
}

/* ── metrics ── */
.sg-meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--sunken,#EEF1F8);border-radius:16px;overflow:hidden;
}
.sg-meta-cell{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 10px;text-align:center;
  border-right:1px solid var(--line,#E4E8F2);
}
.sg-meta-cell:last-child{border-right:none}
.sg-meta-l{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);
}
.sg-meta-v{
  font-family:var(--font-mono,monospace);font-weight:800;font-size:16px;
  letter-spacing:-.02em;color:var(--ink,#0B1024);text-transform:capitalize;
}
.sg-meta-v.brass{color:var(--brass,#9A6412)}

.sg-bonus{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding:11px 14px;
  background:var(--brass-soft,#FDF1DC);
  border:1px solid var(--brass-border,rgba(154,100,18,.24));
  border-radius:14px;
  font-size:12.5px;font-weight:700;color:var(--brass,#9A6412);
}
.sg-bonus strong{font-family:var(--font-mono,monospace);font-size:14px}

/* ── ticket + QR ── */
.sg-ticket-row{display:flex;gap:10px;margin-top:10px}
.sg-code{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  padding:12px 14px;text-align:left;
  background:var(--sunken,#EEF1F8);
  border:1.5px dashed var(--line-3,#BFC8DE);
  border-radius:14px;cursor:pointer;transition:.14s;
}
.sg-code:hover{border-style:solid;border-color:var(--volt,#0A9A4F)}
.sg-code-l{
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4,#8791AE);flex-shrink:0;
}
.sg-code-v{
  flex:1;min-width:0;
  font-family:var(--font-mono,monospace);font-weight:800;font-size:15px;
  letter-spacing:.16em;color:var(--ink,#0B1024);
  overflow:hidden;text-overflow:ellipsis;
}
.sg-code-act{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;flex-shrink:0;
  background:var(--volt-soft,#E3F6EC);color:var(--volt,#0A9A4F);
}
.sg-code-act.copied{background:var(--win-soft,#E4F7EE);color:var(--win,#0A9A4F)}
.sg-qr{
  width:64px;height:64px;flex-shrink:0;padding:6px;
  display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--line,#E4E8F2);
  border-radius:14px;cursor:pointer;
}
.sg-qr canvas{width:100%;height:100%;display:block;image-rendering:pixelated}

/* ── picks: cards, not list rows ── */
.sg-picks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sg-pick{
  display:flex;align-items:center;gap:11px;padding:12px 13px;
  background:var(--paper,#fff);
  border:1px solid var(--line,#E4E8F2);
  border-radius:14px;
  box-shadow:0 2px 10px -6px rgba(11,16,36,.22);
  transition:transform .16s,box-shadow .16s;
}
.sg-pick:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(11,16,36,.3)}
.sg-pick-n{
  font-family:var(--font-mono,monospace);font-weight:800;font-size:10px;
  color:var(--ink-5,#AEB6CD);flex-shrink:0;
}
.sg-pick-body{flex:1;min-width:0}
.sg-pick-choice{
  font-weight:800;font-size:14px;letter-spacing:-.015em;color:var(--ink,#0B1024);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sg-pick-fixture{
  font-size:11.5px;color:var(--ink-4,#8791AE);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sg-pick-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.sg-pick-mkt{
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-5,#AEB6CD);
}
.sg-pick-odd{
  font-family:var(--font-mono,monospace);font-weight:800;font-size:15px;
  color:var(--brass,#9A6412);
}

/* ── actions ── */
.sg-actions{display:flex;gap:9px;margin-top:16px}
.sg-btn{
  height:52px;border-radius:15px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;transition:.14s;
}
.sg-btn:active{transform:scale(.96)}
.sg-btn.ghost{
  width:52px;flex-shrink:0;
  background:var(--sunken,#EEF1F8);color:var(--ink-3,#586287);
}
.sg-btn.ghost:hover{background:var(--sunken-2,#E4E9F4)}
.sg-btn.ghost svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.sg-btn.solid{
  flex:1;color:#fff;
  background:var(--volt-grad,linear-gradient(135deg,#0BB55F,#0A9A4F));
  box-shadow:0 12px 26px -12px rgba(10,154,79,.5);
}
.sg-btn.solid:hover{transform:translateY(-1px)}

.sg-slip-peek{margin-top:12px;text-align:center}
.sg-slip-tab{
  font-size:12px;font-weight:700;color:var(--ink-4,#8791AE);
  background:none;border:none;cursor:pointer;padding:6px;
}
.sg-slip-tab:hover{color:var(--volt,#0A9A4F)}

/* ── responsive ── */
@media(min-width:600px){
  .bet-success-overlay.sg{align-items:center;justify-content:center;padding:24px}
  .sg-stage{
    /* Hug the content instead of a fixed tall panel — a two-pick slip
       left a wide band of empty white below the actions. */
    height:auto;max-height:min(88dvh,880px);
    border-radius:28px;overflow:hidden;
    box-shadow:0 30px 80px -20px rgba(9,12,28,.6);
  }
  .sg[data-state="surge"] .sg-crown{height:340px}
  .sg-sheet{flex:0 1 auto;border-radius:26px 26px 28px 28px}
  .sg[data-state="rest"] .sg-sheet{max-height:60dvh}
  /* The fluid spans the stage, so once the sheet stops short of the
     bottom a band of it shows underneath. Stop it at the waterline. */
  .sg[data-state="settle"] .sg-fluid,
  .sg[data-state="rest"] .sg-fluid{bottom:auto;height:300px}
}

/* Reduced motion: no surge, no waves, no roll — same content, still. */
@media(prefers-reduced-motion:reduce){
  .sg-fluid,.sg-crown,.sg-sheet{transition:none!important}
  .sg-wave-back,.sg-wave-front,.sg-sparks i,.sg-mark,.sg-tick{animation:none!important}
  .sg-sheet > *:not(.sg-grab){animation:none!important;opacity:1!important}
  .sg-tick{stroke-dashoffset:0}
  .sg-sparks{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   SLIP ZOOM — shared with the booking board
   ═══════════════════════════════════════════════════════════════════ */
@keyframes bsFadeIn{from{opacity:0}to{opacity:1}}
@keyframes bsRise{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bsConfetti{0%{transform:translateY(-16px) rotate(0);opacity:1}100%{transform:translateY(340px) rotate(720deg);opacity:0}}

.bs-confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:bsConfetti 2.4s ease-out forwards}

.slip-zoom{
  position:fixed;inset:0;z-index:11500;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:var(--overlay-scrim,rgba(9,12,28,.46));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  cursor:zoom-out;
}
.slip-zoom.open,.slip-zoom{display:flex;animation:bsFadeIn .16s ease}
.slip-zoom-inner{
  max-width:min(580px,94vw);max-height:90dvh;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  border-radius:var(--r-2xl,26px);
  box-shadow:var(--sh-3,0 24px 60px -18px rgba(11,16,36,.34));
  animation:bsRise .24s ease;
}
.slip-zoom-inner::-webkit-scrollbar{display:none}
.slip-zoom-inner svg,.slip-zoom-inner img{width:100%;height:auto;display:block}