/* =====================================================================
   sr4 — SweetReels Norwegen
   Mobile-first. Farben aus dem Casino-Auftritt: gelber Header,
   violettes Spielfeld, pinker CTA.
   ===================================================================== */

:root{
  --bg:#1c0730;
  --bg2:#2a0f42;
  --card:#351551;
  --line:rgba(255,255,255,.12);
  --txt:#ffffff;
  --dim:rgba(255,255,255,.68);
  --dim2:rgba(255,255,255,.46);
  --yellow:#fdc63c;
  --pink:#ff3d5a;
  --pink2:#ff6b47;
  --violet:#7b3fbf;
  --green:#3ddc84;
  --r:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  text-wrap:pretty;
  background:var(--bg);
  color:var(--txt);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.frame{max-width:480px;margin:0 auto;position:relative;min-height:100vh}

.view{display:none}
.view.on{display:block}

/* ===================== S1 — SPLASH ===================== */
.splash{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* Bildbuehne oben, Text darunter auf dunklem Grund. Text direkt auf dem
   Foto war auf 390 px kaum lesbar, und beide Motive haben ihr Hauptmotiv
   ohnehin im oberen Drittel. Der Verlauf am unteren Rand blendet das Bild
   in die Seite. */
.hero{
  position:relative;flex:0 0 auto;aspect-ratio:1/1;width:100%;
  background-image:url(assets/hero.webp);
  background-size:cover;background-position:center 18%;background-repeat:no-repeat;
}
/* Auf dem Desktop ist der Viewport breiter als die 480-px-Spalte, aber
   nicht hoeher — ein quadratisches Bild schiebt den CTA dort unter die
   Falz. Deshalb dort flacher, auf dem Handy bleibt es quadratisch. */
@media (min-width:481px){
  .hero{aspect-ratio:5/4}
}

.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:34%;
  background:linear-gradient(180deg,rgba(28,7,48,0) 0%,rgba(28,7,48,.75) 55%,var(--bg) 100%);
}

.topbar{position:absolute;top:0;left:0;z-index:3;padding:14px 18px 0}
.brandlogo{display:block;width:147px;height:auto}

.s1in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:14px 20px 8px;text-align:center}

.geochip{
  display:inline-block;margin:0 auto 16px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.11);border:1px solid var(--line);
  font-size:12px;font-weight:600;letter-spacing:.3px;color:#fff;
}

.kicker{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}

h1{text-wrap:balance;margin:0 0 14px;font-weight:800;letter-spacing:-1px;line-height:.95}
.h1amt{font-size:76px;display:inline-block;background:linear-gradient(180deg,#fff 30%,var(--yellow) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h1sub{font-size:27px;font-weight:700;letter-spacing:-.5px}

.tagline{font-size:16px;color:var(--dim);margin-bottom:26px;line-height:1.45;text-wrap:balance}
.tagline b{color:var(--green);font-weight:700}

.btn{
  display:block;width:100%;border:0;cursor:pointer;
  padding:21px 20px;border-radius:15px;
  background:linear-gradient(135deg,#ff2d55 0%,#ff5c2e 55%,#ff9a2b 100%);
  color:#fff;font-size:19px;font-weight:900;letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  box-shadow:0 10px 30px rgba(255,61,90,.5);
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease;
}
/* Nur der Schein pulsiert, nicht die Geometrie. Ein Button, der staendig
   seine Groesse aendert, ist ein wanderndes Tippziel — beim Test konnte der
   Browser ihn nicht mal zuverlaessig treffen. Aufmerksamkeit ja, Wackeln nein. */
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 30px rgba(255,61,90,.50), 0 0 0 0 rgba(255,154,43,.42)}
  50%    {box-shadow:0 16px 44px rgba(255,61,90,.75), 0 0 0 6px rgba(255,154,43,.16)}
}
@keyframes ctaShine{
  0%  {left:-60%}
  55% {left:130%}
  100%{left:130%}
}
.btn{position:relative;overflow:hidden;animation:ctaPulse 1.9s ease-in-out infinite}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);animation:ctaShine 1.9s ease-in-out infinite;pointer-events:none;
}
/* Wer Bewegung im System abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  .btn{animation:none}
  .btn::after{display:none}
}

.btn:active{transform:translateY(1px) scale(.995);box-shadow:0 4px 14px rgba(255,61,90,.32)}

.ctamicro{font-size:12.5px;color:var(--dim2);text-align:center;margin-top:10px}

.tclink{
  display:block;margin:16px auto 0;background:none;border:0;cursor:pointer;
  color:var(--dim2);font-size:13px;text-decoration:underline;text-underline-offset:3px;
}

.catstrip{margin-top:26px;font-size:12px;letter-spacing:.4px;color:var(--dim2);line-height:1.7}

/* Das Angebot als Rechnung statt als Prozentzahl. "200 %" muss der
   Nutzer selbst umrechnen — diese Zeile nimmt ihm das ab. */
.example{display:flex;align-items:center;justify-content:center;gap:16px;
         margin:0 0 22px;padding:13px 12px;border-radius:14px;
         background:rgba(255,255,255,.06);border:1px solid var(--line)}
.ex{display:flex;flex-direction:column;align-items:center;gap:2px}
.exk{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim2)}
.exv{font-size:22px;font-weight:800;color:#fff}
.exv.hi{color:var(--yellow)}
.exar{font-size:19px;color:var(--dim2)}

/* ===================== S2 — PROOF ===================== */
.wrap{padding:16px 18px 30px}
/* Marke bleibt praesent, ohne Platz zu fressen: der Nutzer soll auf dem
   zweiten Screen nicht raten muessen, bei wem er gerade ist. */
.s2logo{display:flex;justify-content:center;margin-bottom:14px}
.s2logo img{display:block;width:112px;height:auto;opacity:.95}


.reserved{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-radius:12px;margin-bottom:20px;
  background:rgba(61,220,132,.11);border:1px solid rgba(61,220,132,.32);
  font-size:14px;
}
.reserved b{color:var(--green)}
.rdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 8px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

h2{text-wrap:balance;margin:0 0 6px;font-size:25px;font-weight:800;letter-spacing:-.5px}
.h2s{font-size:14.5px;color:var(--dim);margin-bottom:18px;text-wrap:balance}

.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.amtwrap{position:relative}
.tag{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:2;
  padding:2px 7px;border-radius:999px;background:var(--yellow);color:#2a0f42;
  font-size:9px;font-weight:800;letter-spacing:.3px;white-space:nowrap;
}
.amt{
  width:100%;padding:15px 4px;border-radius:12px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);
  color:#fff;font-size:15px;font-weight:700;
  transition:border-color .12s ease, background .12s ease;
}
.amt.sel{border-color:var(--yellow);background:rgba(253,198,60,.15);color:var(--yellow)}

.live{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.lrow{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14.5px;color:var(--dim)}
.lrow b{color:#fff;font-weight:700;font-size:16px}
.lrow .pos{color:var(--green)}
.lrow.big{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:16px;color:#fff}
.lrow.big b{font-size:27px;font-weight:800;color:var(--yellow)}

.lspins{margin-top:9px;padding-top:10px;border-top:1px dashed var(--line);
        font-size:12.5px;line-height:1.55;color:var(--dim2);text-wrap:pretty}
.lspins b{color:var(--dim)}

.anchor{font-size:13px;color:var(--dim2);text-align:center;margin-bottom:22px}
.anchor b{color:var(--dim)}


/* Womit kann ich einzahlen — bei einer unbekannten Marke eine der ersten
   stillen Fragen, und ein Absprunggrund, wenn man sie erst im Cashier klaert. */
.pay{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
     padding:12px 14px;border-radius:12px;margin-bottom:24px;
     background:rgba(255,255,255,.05);border:1px solid var(--line)}
.payk{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--dim2)}
.payv{font-size:13.5px;color:var(--dim);font-weight:600;text-wrap:balance}
.payv.todo{color:var(--dim2);font-weight:400;font-style:italic}

.secth{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim2);margin-bottom:11px}
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.game{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.gph{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
     border-radius:11px;margin-bottom:5px;border:1px solid var(--line)}
.gname{display:block;font-size:11px;color:var(--dim2);line-height:1.3}
.gnote{font-size:12.5px;color:var(--dim2);margin-bottom:24px}


.cashbox{background:linear-gradient(150deg,rgba(61,220,132,.15) 0%,rgba(61,220,132,.05) 100%);
         border:1px solid rgba(61,220,132,.34);border-radius:var(--r);padding:16px;margin:20px 0}
.cbtop{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.cbpct{font-size:46px;font-weight:800;line-height:1;letter-spacing:-1.5px;color:var(--green)}
.cbt{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.2px}
.cbt i{font-style:normal;font-size:13px;font-weight:400;color:var(--dim)}
.cbex{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
      padding:11px 13px;border-radius:11px;background:rgba(0,0,0,.22);font-size:13.5px;color:var(--dim)}
.cbex b{color:var(--green);font-size:14.5px}
.cbnote{text-wrap:pretty;margin-top:11px;font-size:12.5px;line-height:1.6;color:var(--dim2)}

.nolist{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.no{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dim)}
.nox{flex:0 0 18px;height:18px;border-radius:50%;background:rgba(61,220,132,.18);
     border:1px solid rgba(61,220,132,.4);color:var(--green);font-size:10px;font-weight:700;
     display:flex;align-items:center;justify-content:center}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 24px}
.tb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 5px;border-radius:12px;
    background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:11px;text-align:center;color:var(--dim);line-height:1.35}
.tbi{font-size:17px}
.tb i{font-style:normal;color:var(--dim2);font-size:10px}

.closer{text-wrap:balance;margin-top:18px;padding:13px 14px;border-radius:12px;text-align:center;
        background:rgba(61,220,132,.09);border:1px solid rgba(61,220,132,.26);
        font-size:13.5px;color:var(--dim);line-height:1.5}

.howto{margin-top:22px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.hk{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim2);
    cursor:pointer;list-style:none;padding:2px 0}
.hk::-webkit-details-marker{display:none}
.howto[open] .hk{margin-bottom:10px}
.hr{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14px;color:var(--dim);line-height:1.5}
.hr b{color:#fff}
.hn{flex:0 0 22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hr.hi .hn{background:var(--yellow);color:#2a0f42}

.back{display:block;margin:20px auto 0;background:none;border:0;cursor:pointer;color:var(--dim2);font-size:13px}

footer{padding:26px 18px 40px;border-top:1px solid var(--line);margin-top:26px;font-size:11.5px;color:var(--dim2);line-height:1.6}
footer p{margin:0 0 5px}
footer a{color:var(--dim)}
.rg{margin-top:11px;padding:11px;border-radius:10px;background:rgba(255,255,255,.05);line-height:1.6}
.rg strong{color:var(--dim)}

/* ===================== S3 — HANDOFF ===================== */
.done{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--dim)}
.spinner{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===================== Sheet ===================== */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.65);display:none;align-items:flex-end;justify-content:center}
.sheet.on{display:flex}
.sheetin{width:100%;max-width:480px;max-height:82vh;overflow-y:auto;background:var(--bg2);border-radius:20px 20px 0 0;border-top:1px solid var(--line)}
.sheeth{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:var(--bg2);border-bottom:1px solid var(--line);font-weight:700}
.sheetx{background:none;border:0;color:var(--dim);font-size:19px;cursor:pointer;padding:0 4px}
.sheetb{padding:14px 18px 30px}
.f{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.f .k{color:var(--dim)}
.f .v{color:#fff;font-weight:600;text-align:right}
.f .v.todo{color:var(--dim2);font-weight:400;font-style:italic}
.sheetn{margin-top:14px;font-size:12px;color:var(--dim2);line-height:1.6}

/* ===================== Sticky ===================== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(110%);transition:transform .22s ease;
  background:linear-gradient(180deg,rgba(28,7,48,0) 0%,var(--bg) 32%);padding:16px 18px calc(16px + env(safe-area-inset-bottom))}
.sticky.on{transform:translateY(0)}
.sticky .in{max-width:480px;margin:0 auto}
.sticky .btn{font-size:17px;padding:19px 16px}
.sticky .mi{font-size:11.5px;color:var(--dim2);text-align:center;margin-top:7px}

@media (max-width:360px){
  .h1amt{font-size:62px}
  .h1sub{font-size:23px}
  .amt{font-size:13.5px;padding:13px 2px}
}