:root{
  --bg:#0b0716; --panel:#160d2b; --panel2:#1f1340; --ink:#f4ecff; --muted:#b6a7d8;
  --gold:#ffd23f; --hot:#ff3d7f; --cool:#5aa9ff; --good:#36e07a;
  --r:18px; --glow:0 0 40px rgba(255,210,63,.35);
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#241046 0%,var(--bg) 60%);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 120px}

/* header */
.hero{text-align:center;padding:30px 0 10px}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 8px;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,#ffd23f 40%,#ff8a00 70%,#ff3d7f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);max-width:760px;margin:6px auto;font-size:16px;line-height:1.55}
.thesis{display:inline-flex;gap:10px;align-items:center;margin-top:16px;background:var(--panel);border:1px solid #38245f;
  padding:10px 18px;border-radius:999px;font-size:14px;color:#e6dafc}
.thesis b{color:var(--gold)}

/* theme tabs */
.tabs{display:flex;gap:8px;justify-content:center;margin:22px 0 8px}
.tab{cursor:pointer;border:1px solid #3a2563;background:var(--panel);color:var(--ink);padding:9px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:.18s}
.tab[aria-selected=true]{background:linear-gradient(90deg,#ffd23f,#ff8a00);color:#1a0c00;border-color:transparent;box-shadow:var(--glow)}

/* section card */
.card{background:linear-gradient(180deg,var(--panel),#120a25);border:1px solid #2c1b4d;border-radius:var(--r);
  padding:22px;margin:22px 0;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.card h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card .sub{color:var(--muted);font-size:14px;margin:0 0 16px;line-height:1.5;max-width:820px}
.badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.b-free{background:rgba(54,224,122,.16);color:#7dffb0;border:1px solid #2f7d52}
.b-key{background:rgba(90,169,255,.16);color:#a9d2ff;border:1px solid #3a6fa8}
.b-rive{background:rgba(255,61,127,.16);color:#ff9dc0;border:1px solid #a83a6f}
.tier{font-size:12px;font-weight:800;color:#1a0c00;background:var(--gold);padding:3px 9px;border-radius:6px}

/* stage */
.stage{position:relative;background:
   radial-gradient(120% 90% at 50% 0%, #2a1850 0%, #0c0720 70%);
  border:1px solid #2c1b4d;border-radius:14px;overflow:hidden}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
button.act{cursor:pointer;border:none;border-radius:12px;padding:11px 18px;font-weight:800;font-size:14px;color:#1a0c00;
  background:linear-gradient(180deg,#ffe07a,#ff9d2f);box-shadow:0 6px 18px rgba(255,140,0,.3);transition:.12s}
button.act:hover{transform:translateY(-1px)}
button.act:active{transform:translateY(1px)}
button.act.ghost{background:#22153f;color:#e6dafc;border:1px solid #3a2563;box-shadow:none}
button.act.hot{background:linear-gradient(180deg,#ff7aa8,#ff2e6a);color:#fff}

/* reel grid */
.reels{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:20px}
.cell{aspect-ratio:1;border-radius:14px;background:linear-gradient(180deg,#2a1a52,#1a0f38);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
.cell img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));will-change:transform,filter}
.cell.win img{animation:none}
.cell .ring{position:absolute;inset:-3px;border-radius:16px;border:3px solid var(--gold);opacity:0;
  box-shadow:0 0 22px var(--gold),inset 0 0 14px rgba(255,210,63,.6);pointer-events:none}

/* idle "alive" micro-loops (Tier A, zero AI) */
.alive .cell img{animation:breathe 2.8s ease-in-out infinite}
.alive .cell:nth-child(2n) img{animation-duration:3.3s;animation-delay:.4s}
.alive .cell:nth-child(3n) img{animation-duration:2.4s;animation-delay:.8s}
.alive .cell:nth-child(5n) img{animation-duration:3.6s;animation-delay:1.1s}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}

/* character */
.charwrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:20px}
.char{width:240px;height:240px;position:relative;flex:0 0 auto}
.char img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .14s;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.char img.on{opacity:1}
.charwrap .note{color:var(--muted);font-size:14px;max-width:420px;line-height:1.55}

/* svg gallery */
.svgrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;padding:22px}
.svgcell{text-align:center}
.svgcell .frame{width:170px;height:170px;border-radius:16px;background:radial-gradient(100% 100% at 50% 0,#241248,#0c0720);
  display:flex;align-items:center;justify-content:center;border:1px solid #2c1b4d}
.svgcell .frame img{width:84%;height:84%}
.svgcell .frame.static img{width:78%;height:78%}
.svgcell label{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.svgcell .kib{color:#7dffb0;font-weight:700}

/* cinematic */
.cine{position:relative;height:320px;border-radius:14px;overflow:hidden}
.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 18s ease-in-out infinite alternate}
.cine .vig{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(5,2,15,.85) 100%)}
.cine .tag{position:absolute;left:18px;bottom:16px;background:rgba(8,4,20,.7);border:1px solid #3a2563;border-radius:10px;
  padding:8px 12px;font-size:13px;color:#e6dafc;backdrop-filter:blur(4px)}
.cine .title{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:clamp(30px,6vw,64px);font-weight:900;
  color:#fff;text-shadow:0 4px 30px rgba(255,140,0,.7),0 0 4px #000;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,#ffd23f,#ff8a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes kenburns{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.18) translate(-2%,-3%)}}

/* big win banner */
.banner{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9500;pointer-events:none;opacity:0}
.banner .box{text-align:center;transform:scale(.5)}
.banner .lbl{font-size:clamp(40px,9vw,110px);font-weight:900;letter-spacing:-.03em;line-height:.9;
  background:linear-gradient(180deg,#fff7d6,#ffd23f 45%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px rgba(120,40,0,.4);text-shadow:0 8px 50px rgba(255,160,0,.8)}
.banner .amt{font-size:clamp(28px,6vw,64px);font-weight:900;color:#fff;text-shadow:0 0 30px rgba(90,169,255,.9)}

/* recommendation */
.rec table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.rec th,.rec td{text-align:left;padding:10px 12px;border-bottom:1px solid #2c1b4d;vertical-align:top}
.rec th{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.rec td:first-child{font-weight:800;white-space:nowrap}
.keybox{margin-top:18px;background:linear-gradient(180deg,#1c1330,#120a25);border:1px solid #3a6fa8;border-radius:14px;padding:18px}
.keybox h3{margin:0 0 6px;color:var(--cool)}
.keybox code{background:#0c0720;padding:2px 7px;border-radius:6px;color:#ffd23f;font-size:13px}
.loading{color:var(--muted);font-style:italic}
.footnote{color:#6f5f93;font-size:12px;text-align:center;margin-top:40px;line-height:1.6}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;background:#22153f;border:1px solid #3a2563;color:#cbb9f2;margin:2px}

/* ─────────── JUICE v2 — daylight skin (scope: body.juiced / .juiced) ───────────
   Re-grounds every effect so bloom reads as wet-sugar glisten over a bright board,
   not neon-light-in-the-dark (bible §5). Shadows go soft warm Cocoa, never black. */
.juiced .stage{background:linear-gradient(180deg,#8FD3FF 0%,#BFE6FF 28%,#FFE6F2 62%,#FFF6E6 100%)}
.juiced .cell{background:linear-gradient(180deg,#ffffffcc,#fff1facc);border:1px solid #6b4a8626}
.juiced .cell img{filter:drop-shadow(0 6px 10px rgba(107,74,134,.38))}   /* Cocoa #6B4A86, soft+short */
.juiced .char img{filter:drop-shadow(0 14px 22px rgba(107,74,134,.42))}
.juiced .svgcell .frame{background:radial-gradient(100% 100% at 50% 0,#FFF6E6,#FFE6F2);border-color:#6b4a8626}
/* juicier idle breathe — a touch of squash so candies feel gummy at rest */
.juiced .alive .cell img{animation:breathe-juice 2.8s ease-in-out infinite}
@keyframes breathe-juice{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-5px) scale(1.05,1.03)}}

/* Classic ⟷ Juiced A/B toggle + live rubric strip (rig.html) */
.juicebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.juicebar .seg{display:inline-flex;background:#160d2b;border:1px solid #3a2563;border-radius:999px;padding:3px;gap:2px}
.juicebar .seg button{cursor:pointer;border:none;background:transparent;color:#b6a7d8;font-weight:800;font-size:13px;padding:7px 16px;border-radius:999px;transition:.15s}
.juicebar .seg button[aria-pressed=true]{background:linear-gradient(180deg,#ffe07a,#ff9d2f);color:#1a0c00}
.juicebar .rub{font-size:12px;color:#b6a7d8;background:#160d2b;border:1px solid #3a2563;border-radius:999px;padding:6px 12px}
.juicebar .rub b{color:#7dffb0}
/* A/B compare boxes: classic = dark & floaty, juiced = daylight & grounded */
.cmp .one .canvasbox{width:240px;height:240px;border-radius:18px;overflow:hidden;border:1px solid #2c1b4d;display:flex;align-items:center;justify-content:center}
.cmp .one.classic .canvasbox{background:radial-gradient(100% 100% at 50% 0,#241248,#0c0720)}
.cmp .one.juiced .canvasbox{background:linear-gradient(180deg,#BFE6FF,#FFE6F2 60%,#FFF6E6);border-color:#6b4a8633}
.cmp .one canvas{width:100%;height:100%;display:block}