/* ============================================================
   RANDOM SIDE HUSTLE — styles
   ============================================================ */

:root{
  --bg:            #04040a;
  --bg-soft:       #0a0a14;
  --ink:           #f2f3f8;
  --ink-dim:       #a4a8bd;
  --ink-faint:     #6b7089;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);
  --glass:         rgba(255,255,255,.035);

  /* accent is swapped per category at reveal time */
  --accent:        #7c5cff;
  --accent-2:      #22d3ee;
  --accent-soft:   rgba(124,92,255,.30);

  --reel-h:        76px;   /* height of one reel row */
  --reel-rows:     5;

  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.2,1.4,.35,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
html{ overflow-x:clip; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------------- ambient background ---------------- */

.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  opacity:.55;
  mix-blend-mode:screen;
  will-change:transform;
}
.blob-a{
  width:52vw; height:52vw; min-width:420px; min-height:420px;
  background:radial-gradient(circle at 30% 30%, #7c5cff 0%, rgba(124,92,255,0) 68%);
  top:-14%; left:-10%;
  animation:driftA 26s var(--ease-out) infinite alternate;
}
.blob-b{
  width:46vw; height:46vw; min-width:380px; min-height:380px;
  background:radial-gradient(circle at 60% 40%, #ff4d9d 0%, rgba(255,77,157,0) 68%);
  bottom:-18%; right:-8%;
  animation:driftB 31s var(--ease-out) infinite alternate;
}
.blob-c{
  width:40vw; height:40vw; min-width:320px; min-height:320px;
  background:radial-gradient(circle at 50% 50%, #22d3ee 0%, rgba(34,211,238,0) 70%);
  top:38%; left:52%;
  animation:driftC 24s var(--ease-out) infinite alternate;
}

@keyframes driftA{ to{ transform:translate3d(14vw,10vh,0) scale(1.18); } }
@keyframes driftB{ to{ transform:translate3d(-12vw,-12vh,0) scale(1.12); } }
@keyframes driftC{ to{ transform:translate3d(-16vw,8vh,0) scale(.86); } }

.grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 45%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 60% at 50% 45%, #000 0%, transparent 78%);
  opacity:.7;
  animation:gridPan 40s linear infinite;
}
@keyframes gridPan{ to{ background-position:64px 64px, 64px 64px; } }

.grain{
  position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 90% 75% at 50% 45%, transparent 35%, rgba(2,2,6,.72) 100%);
}

#bg-canvas{ position:fixed; inset:0; z-index:1; pointer-events:none; }
#fx-canvas{ position:fixed; inset:0; z-index:60; pointer-events:none; }

/* ---------------- chrome ---------------- */

.topbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px clamp(18px,4vw,42px);
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(34,211,238,.55);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(34,211,238,.55); }
  70%{ box-shadow:0 0 0 12px rgba(34,211,238,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,238,0); }
}
.brand-name{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
}
.brand-accent{ color:var(--accent-2); }

.topbar-right{ display:flex; align-items:center; gap:14px; }

.counter{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.01em; }
.counter strong{ color:var(--ink-dim); font-weight:600; font-variant-numeric:tabular-nums; }

.sound-btn{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:11px;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--ink-faint);
  cursor:pointer;
  transition:color .22s, border-color .22s, background .22s, transform .22s var(--ease-spring);
}
.sound-btn:hover{ color:var(--ink); border-color:var(--line-strong); transform:translateY(-1px); }
.sound-btn:active{ transform:scale(.93); }
.sound-btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
.sound-btn[aria-pressed="true"]{ color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 34%, transparent); }
.sound-btn .ico{ grid-area:1 / 1; }
.sound-btn[aria-pressed="true"] .ico-off{ display:none; }
.sound-btn[aria-pressed="false"] .ico-on{ display:none; }

.footer{
  position:relative; z-index:10;
  padding:18px clamp(18px,4vw,42px) 26px;
  text-align:center;
  font-size:12px; color:var(--ink-faint);
}

/* ---------------- stage & panels ---------------- */

.stage{
  position:relative; z-index:10;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  padding:8px clamp(18px,4vw,42px);
}

.panel{
  grid-area:1 / 1;
  width:100%;
  min-width:0;
  justify-self:center;
  max-width:720px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.panel[aria-hidden="true"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.965) translateY(10px);
  filter:blur(6px);
}
.panel[aria-hidden="false"]{
  opacity:1;
  visibility:visible;
  transform:none;
  filter:none;
}
.panel{ transition:opacity .42s var(--ease-out), transform .52s var(--ease-out), filter .42s var(--ease-out), visibility .42s; }

/* ---------------- idle ---------------- */

.hero{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(38px,8.2vw,74px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin-bottom:18px;
}
.hero-line{ display:block; }
.hero-line:first-child{
  color:var(--ink);
  animation:riseIn .8s var(--ease-out) both;
}
.hero-glow{
  background:linear-gradient(100deg,#7c5cff 0%,#c084fc 26%,#22d3ee 58%,#7c5cff 100%);
  background-size:260% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:riseIn .8s .09s var(--ease-out) both, sheen 7s linear infinite 1s;
  filter:drop-shadow(0 0 34px rgba(124,92,255,.38));
}
@keyframes sheen{ to{ background-position:260% center; } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

.hero-sub{
  color:var(--ink-dim);
  font-size:clamp(14.5px,2.1vw,17.5px);
  max-width:44ch;
  margin-bottom:38px;
  animation:riseIn .8s .18s var(--ease-out) both;
}

.spin-btn{
  position:relative;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  color:var(--ink);
  font:inherit;
  font-size:16px;
  padding:18px 30px;
  border-radius:18px;
  cursor:pointer;
  overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 50px -18px rgba(124,92,255,.6), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease-out), border-color .28s;
  animation:riseIn .8s .27s var(--ease-out) both, breathe 3.6s ease-in-out infinite 1.2s;
}
.spin-btn:hover{
  transform:translateY(-3px) scale(1.025);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 26px 66px -18px rgba(124,92,255,.85), inset 0 1px 0 rgba(255,255,255,.2);
}
.spin-btn:active{ transform:translateY(0) scale(.985); }
.spin-btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:4px; }

@keyframes breathe{
  0%,100%{ box-shadow:0 18px 50px -18px rgba(124,92,255,.55), inset 0 1px 0 rgba(255,255,255,.14); }
  50%    { box-shadow:0 22px 62px -18px rgba(124,92,255,.9),  inset 0 1px 0 rgba(255,255,255,.18); }
}

.spin-btn-glow{
  position:absolute; inset:-60% -20%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(124,92,255,.55) 60deg, rgba(34,211,238,.55) 130deg, transparent 200deg);
  animation:spinGlow 4.5s linear infinite;
  opacity:.5;
  pointer-events:none;
}
@keyframes spinGlow{ to{ transform:rotate(360deg); } }

.spin-btn-label{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  font-weight:500;
}

.keycap{
  font-family:'Space Grotesk',monospace;
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 13px 8px;
  border-radius:9px;
  background:linear-gradient(180deg,#20213a,#12132a);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 3px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
  color:#dfe1f5;
  transform:translateY(-1px);
}
.keycap-sm{ font-size:10.5px; padding:4px 9px 5px; box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }

.key-press .keycap{ transform:translateY(2px); box-shadow:0 0 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1); }

.micro-hint{
  margin-top:26px;
  font-size:12px; color:var(--ink-faint); letter-spacing:.03em;
  animation:riseIn .8s .36s var(--ease-out) both;
}

/* ---------------- reel machine ---------------- */

.machine{ position:relative; width:100%; max-width:600px; }

.machine-glow{
  position:absolute; inset:-46px -4px;
  background:radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 70%);
  filter:blur(26px);
  animation:machinePulse 1.15s ease-in-out infinite;
  pointer-events:none;
}
@keyframes machinePulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }

.reel-window{
  position:relative;
  height:calc(var(--reel-h) * var(--reel-rows));
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(10,10,22,.86), rgba(6,6,14,.94));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 40px 90px -34px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(124,92,255,.14);
}

.reel-strip{ will-change:transform, filter; }

.reel-item{
  height:var(--reel-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 26px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(16px,2.5vw,23px);
  letter-spacing:-.02em;
  color:var(--ink-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reel-item.is-winner{ color:#fff; }

.reel-fade{ position:absolute; left:0; right:0; height:38%; pointer-events:none; }
.reel-fade-top{ top:0; background:linear-gradient(180deg, rgba(5,5,12,.98) 8%, rgba(5,5,12,0) 100%); }
.reel-fade-bottom{ bottom:0; background:linear-gradient(0deg, rgba(5,5,12,.98) 8%, rgba(5,5,12,0) 100%); }

.reel-line{
  position:absolute; left:14px; right:14px;
  top:50%; height:var(--reel-h);
  transform:translateY(-50%);
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg, transparent, rgba(124,92,255,.13), transparent);
  pointer-events:none;
}

.reel-scan{
  position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(124,92,255,.14), transparent);
  animation:scan 1.5s linear infinite;
  pointer-events:none;
}
@keyframes scan{ from{ transform:translateY(-120%); } to{ transform:translateY(340%); } }

.machine-caption{
  margin-top:22px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
  animation:flicker 1.6s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

.reel-settle{ animation:settle .5s var(--ease-spring); }
@keyframes settle{
  0%{ transform:translateY(var(--settle-y)); }
  45%{ transform:translateY(calc(var(--settle-y) - 9px)); }
  100%{ transform:translateY(var(--settle-y)); }
}

/* ---------------- result card ---------------- */

.panel-result{ max-width:760px; }

.card{
  position:relative;
  width:100%;
  text-align:left;
  padding:clamp(24px,4vw,38px);
  border-radius:26px;
  border:1px solid var(--line-strong);
  background:linear-gradient(165deg, rgba(19,19,34,.92), rgba(8,8,16,.95));
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:
    0 50px 110px -40px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.09);
  overflow:hidden;
}

.panel-result[aria-hidden="false"] .card{
  animation:cardIn .82s var(--ease-spring) both;
}
@keyframes cardIn{
  0%{ opacity:0; transform:perspective(1200px) rotateX(11deg) scale(.9) translateY(34px); }
  100%{ opacity:1; transform:perspective(1200px) rotateX(0) scale(1) translateY(0); }
}

.card-ring{
  position:absolute; inset:-2px;
  border-radius:28px;
  background:conic-gradient(from 180deg, transparent, var(--accent), var(--accent-2), transparent 75%);
  opacity:0;
  filter:blur(16px);
  pointer-events:none;
}
.panel-result[aria-hidden="false"] .card-ring{ animation:ringFlash 1.5s var(--ease-out) both; }
@keyframes ringFlash{
  0%{ opacity:.95; transform:scale(1.06); }
  60%{ opacity:.34; transform:scale(1); }
  100%{ opacity:.24; transform:scale(1); }
}

.card-shine{
  position:absolute; top:0; bottom:0; width:46%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-16deg);
  pointer-events:none;
  left:-60%;
}
.panel-result[aria-hidden="false"] .card-shine{ animation:shine 1.25s .22s var(--ease-out) both; }
@keyframes shine{ from{ left:-60%; } to{ left:130%; } }

.card > *:not(.card-shine):not(.card-ring){ position:relative; z-index:1; }

.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:16px;
}

.chip{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 13px;
  border-radius:999px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.card-index{
  font-family:'Space Grotesk',monospace;
  font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

.card-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(26px,4.6vw,42px);
  line-height:1.08;
  letter-spacing:-.032em;
  margin-bottom:16px;
  color:#fff;
}
.panel-result[aria-hidden="false"] .card-title{ animation:riseIn .6s .22s var(--ease-out) both; }

.card-desc{
  color:var(--ink-dim);
  font-size:clamp(14.5px,1.9vw,16.5px);
  line-height:1.72;
  margin-bottom:26px;
}
.panel-result[aria-hidden="false"] .card-desc{ animation:riseIn .6s .3s var(--ease-out) both; }

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px;
  margin-bottom:26px;
}

.stat{
  display:flex; flex-direction:column; gap:5px;
  padding:13px 15px;
  border-radius:14px;
  background:var(--glass);
  border:1px solid var(--line);
}
.panel-result[aria-hidden="false"] .stat{ animation:riseIn .55s var(--ease-out) both; }
.panel-result[aria-hidden="false"] .stat:nth-child(1){ animation-delay:.36s; }
.panel-result[aria-hidden="false"] .stat:nth-child(2){ animation-delay:.42s; }
.panel-result[aria-hidden="false"] .stat:nth-child(3){ animation-delay:.48s; }
.panel-result[aria-hidden="false"] .stat:nth-child(4){ animation-delay:.54s; }

.stat-k{ font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); }
.stat-v{ font-size:14px; font-weight:500; color:var(--ink); line-height:1.4; }

.card-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.panel-result[aria-hidden="false"] .card-actions{ animation:riseIn .55s .6s var(--ease-out) both; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:14.5px; font-weight:500;
  padding:13px 20px;
  border-radius:13px;
  cursor:pointer;
  border:1px solid var(--line-strong);
  transition:transform .22s var(--ease-spring), box-shadow .22s, background .22s, border-color .22s;
}
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }

.btn-primary{
  color:#0a0a14;
  background:linear-gradient(180deg, #fff, #d8dbf0);
  border-color:transparent;
  box-shadow:0 12px 34px -14px rgba(255,255,255,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -14px rgba(255,255,255,.7); }

.btn-ghost{
  color:var(--ink-dim);
  background:var(--glass);
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--line-strong); background:rgba(255,255,255,.07); transform:translateY(-2px); }

.result-hint{
  margin-top:20px;
  font-size:12px; color:var(--ink-faint);
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.panel-result[aria-hidden="false"] .result-hint{ animation:riseIn .55s .7s var(--ease-out) both; }

/* ---------------- responsive ---------------- */

@media (max-width:720px){
  :root{ --reel-h:64px; --reel-rows:5; }
  .topbar{ padding:16px 18px; }
  .counter{ font-size:11.5px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .card-actions .btn{ flex:1; justify-content:center; }
}

@media (max-width:359px){
  :root{ --reel-h:58px; }
  .stats{ grid-template-columns:1fr; }
  .brand-name{ font-size:13.5px; }
}

@media (max-height:680px){
  :root{ --reel-rows:3; }
  .hero{ font-size:clamp(32px,7vw,50px); }
  .hero-sub{ margin-bottom:26px; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .blob,.grid,.reel-scan,.machine-glow{ animation:none !important; }
}