/* THE DOPAMINE MACHINE — the look escalates with body[data-stage] (0–10). */
:root { --ink:#0b0b0c; --paper:#f4f4f2; --signal:#e5132b; --gold:#ffd23f; --riku:#f2a541; --night:#0e1a2b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; overflow:hidden; background:#e9e9e6; color:var(--ink);
  font:500 16px/1.4 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
#fx { position:fixed; inset:0; z-index:0; }
#stage { position:fixed; inset:0; z-index:1; display:grid; grid-template-rows:auto auto 1fr auto; padding:max(12px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom)); }
body[data-stage]:not([data-stage="0"]):not([data-stage="1"]) { color:#fff; }

/* ── bar + score ── */
.bar { display:flex; align-items:center; gap:10px; }
.brand { font:700 11px ui-monospace,monospace; letter-spacing:.16em; opacity:.7; }
.version { font:700 11px ui-monospace,monospace; padding:2px 7px; border-radius:99px; background:currentColor; }
.version { color:inherit; background:rgba(0,0,0,.08); }
.mute { margin-left:auto; width:40px; height:40px; border-radius:50%; border:1px solid rgba(127,127,127,.45); background:rgba(255,255,255,.12); font-size:16px; color:inherit; }
.score { text-align:center; margin-top:4px; }
.points { font:900 clamp(56px,19vw,110px)/1 system-ui,sans-serif; letter-spacing:-.04em; font-variant-numeric:tabular-nums; text-shadow:0 6px 30px rgba(0,0,0,.18); }
.points.bump { animation:bump .22s ease-out; }
.points.jack { animation:jack .6s ease-out; color:var(--gold); }
@keyframes bump { 40% { transform:scale(1.12); } }
@keyframes jack { 20% { transform:scale(1.5) rotate(-4deg); } 60% { transform:scale(.95) rotate(2deg); } }
.pointsLabel { font:700 11px ui-monospace,monospace; letter-spacing:.2em; opacity:.6; }

/* ── the button ── */
.machine { position:relative; display:grid; place-items:center; align-content:center; }
.btn { position:relative; width:min(62vw,250px); aspect-ratio:1; border-radius:50%; border:0; cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#e8e8e4 38%,#bdbdb8 100%); color:#0b0b0c;
  font:900 26px system-ui,"Hiragino Sans",sans-serif; letter-spacing:.08em;
  box-shadow:0 14px 0 #8f8f8a,0 26px 40px rgba(0,0,0,.28), inset 0 -8px 18px rgba(0,0,0,.12);
  transition:transform .06s, box-shadow .06s; touch-action:manipulation; }
.btn:active, .btn.press { transform:translateY(10px); box-shadow:0 4px 0 #8f8f8a,0 10px 18px rgba(0,0,0,.28), inset 0 -4px 12px rgba(0,0,0,.14); }
.btn:focus-visible { outline:4px solid var(--signal); outline-offset:6px; }
body[data-stage="1"] .btn, body[data-stage="2"] .btn { background:radial-gradient(circle at 35% 30%,#fff7b0 0%,#ffd23f 45%,#e09a00 100%); box-shadow:0 14px 0 #9a6400,0 26px 50px rgba(255,190,0,.45), inset 0 -8px 18px rgba(0,0,0,.15); }
body[data-stage="3"] .btn, body[data-stage="4"] .btn, body[data-stage="5"] .btn { background:radial-gradient(circle at 35% 30%,#ffd6e7 0%,#ff3b6b 50%,#a0003a 100%); color:#fff; box-shadow:0 14px 0 #6d0028,0 26px 60px rgba(255,40,110,.55), inset 0 -8px 18px rgba(0,0,0,.2); }
body[data-stage="6"] .btn, body[data-stage="7"] .btn, body[data-stage="8"] .btn, body[data-stage="9"] .btn, body[data-stage="10"] .btn {
  background:conic-gradient(from var(--spin,0deg),#ff3b6b,#ffd23f,#3bceac,#4cc9f0,#6c5ce7,#f72585,#ff3b6b); color:#fff;
  box-shadow:0 14px 0 #2b0a3d,0 0 60px rgba(255,255,255,.35),0 26px 70px rgba(247,37,133,.6); animation:spin 3s linear infinite; }
@property --spin { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin { to { --spin:360deg; } }
.badge { position:absolute; top:4%; right:4%; min-width:44px; height:44px; padding:0 10px; border-radius:22px; background:#ff1f3d; color:#fff;
  font:900 20px/44px system-ui; font-style:normal; box-shadow:0 4px 14px rgba(255,31,61,.6); animation:throb 1s ease-in-out infinite; }
@keyframes throb { 50% { transform:scale(1.15); } }
.ghost { position:absolute; left:calc(50% + min(22vw,90px)); top:calc(50% + min(18vw,70px)); font-size:40px; pointer-events:none; animation:poke 1.1s ease-in-out infinite; }
@keyframes poke { 0%,100% { transform:translate(0,0); } 45% { transform:translate(-18px,-18px) scale(.9); } }
.streak { position:relative; margin-top:34px; width:min(70vw,280px); height:26px; border-radius:13px; background:rgba(0,0,0,.25); overflow:hidden; }
.streak i { position:absolute; inset:0; transform-origin:left; background:linear-gradient(90deg,#ff8a3d,#ff3b6b); }
.streak span { position:relative; display:block; text-align:center; font:900 14px/26px system-ui; color:#fff; }
.streak.lost { animation:shake .35s; }

/* ── announcement toasts ── */
.toasts { position:fixed; left:12px; right:12px; bottom:max(64px,calc(env(safe-area-inset-bottom) + 58px)); z-index:5; pointer-events:none; display:grid; gap:8px; }
.toast { background:#0b0b0c; color:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 18px 50px rgba(0,0,0,.45); border:2px solid var(--gold);
  animation:slam .45s cubic-bezier(.2,.9,.3,1.3) both; }
.toast.out { animation:leave .35s ease-in forwards; }
.toast b { display:block; font:900 13px ui-monospace,monospace; letter-spacing:.08em; color:var(--gold); }
.toast p { margin:6px 0 0; font:800 17px/1.25 system-ui,"Hiragino Sans",sans-serif; }
.toast small { display:block; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.25); font:500 12.5px/1.4 system-ui,"Hiragino Sans",sans-serif; color:#cfcfcf; }
@keyframes slam { from { opacity:0; transform:translateY(40px) scale(.9) rotate(2deg); } }
@keyframes leave { to { opacity:0; transform:translateY(30px) scale(.96); } }

/* ── fake notifications ── */
.notifs { position:fixed; left:12px; right:90px; top:calc(max(12px,env(safe-area-inset-top)) + 196px); z-index:4; display:grid; gap:6px; }
.notif { justify-self:start; max-width:86%; display:flex; gap:8px; align-items:center; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.95); color:#0b0b0c;
  font:700 13.5px/1.3 system-ui,"Hiragino Sans",sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:pop .3s cubic-bezier(.2,.9,.3,1.4) both; cursor:pointer; }
.notif.pull { background:#ff1f3d; color:#fff; font-family:ui-monospace,monospace; letter-spacing:.03em; }
.notif .av { width:26px; height:26px; border-radius:50%; flex:none; }
@keyframes pop { from { opacity:0; transform:translateX(-30px) scale(.9); } }

/* ── fomo, feed, boxes ── */
.fomo { position:fixed; top:calc(max(12px,env(safe-area-inset-top)) + 150px); left:50%; transform:translateX(-50%); z-index:6; padding:5px 12px; border-radius:99px;
  background:#ff1f3d; color:#fff; font:900 12px ui-monospace,monospace; letter-spacing:.06em; animation:throb .5s ease-in-out infinite; white-space:nowrap; }
.feed { position:fixed; right:0; top:22%; bottom:22%; width:74px; z-index:2; overflow:hidden; mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent); }
.feedTrack { display:grid; gap:8px; padding:0 8px; animation:scrollup 6s linear infinite; }
.feedTrack div { height:88px; border-radius:10px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:26px; }
.feedTrack div span { display:block; font:800 9px ui-monospace,monospace; letter-spacing:.1em; opacity:.8; }
@keyframes scrollup { to { transform:translateY(-50%); } }
.boxes { position:fixed; inset:0; z-index:3; pointer-events:none; }
.box { position:absolute; pointer-events:auto; min-width:92px; white-space:nowrap; text-align:center; cursor:pointer; animation:drop .7s cubic-bezier(.3,1.6,.5,1) both; }
.box span { display:block; font-size:62px; line-height:1; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); animation:wiggle .9s ease-in-out infinite; }
.box em { font:900 10px ui-monospace,monospace; font-style:normal; letter-spacing:.06em; background:#0b0b0c; color:var(--gold); padding:2px 6px; border-radius:6px; }
@keyframes drop { from { transform:translateY(-120vh) rotate(-20deg); } }
@keyframes wiggle { 50% { transform:rotate(8deg) scale(1.06); } }

/* ── the exit ── */
.exit { justify-self:center; display:grid; justify-items:center; gap:4px; padding-bottom:4px; opacity:.55; transition:opacity .3s; }
.exit b { font:700 13px ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
.exit span { font-size:11px; opacity:.8; }
.stillRing { width:140px; height:4px; border-radius:2px; background:rgba(127,127,127,.35); overflow:hidden; }
.stillRing i { display:block; height:100%; width:0; background:var(--riku); }
body.stilling .exit { opacity:1; }
body.stilling #stage > :not(.exit) { filter:saturate(.5) blur(.4px); transition:filter 1s; }

/* ── premium anxiety ── */
body.premium #stage { animation:tremble .18s linear infinite; }
@keyframes tremble { 25% { transform:translate(1px,-1px); } 50% { transform:translate(-1px,1px); } 75% { transform:translate(1px,1px); } }
.shake { animation:shake .35s !important; }
@keyframes shake { 20% { transform:translateX(-10px); } 60% { transform:translateX(10px); } }
.flash::after { content:""; position:fixed; inset:0; background:#fff; z-index:9; pointer-events:none; animation:flash .3s ease-out forwards; }
@keyframes flash { from { opacity:.8; } to { opacity:0; } }

/* ── overlays ── */
.overlay { position:fixed; inset:0; z-index:10; overflow:auto; padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); }
.intro { background:#e9e9e6; display:grid; align-content:center; gap:10px; }
.intro[hidden], .end[hidden] { display:none; }
.kicker { font:700 12px ui-monospace,monospace; letter-spacing:.16em; color:var(--signal); margin:0; }
.intro h1 { font:900 clamp(44px,15vw,84px)/.9 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.04em; margin:6px 0; }
.sub { font-size:18px; font-weight:600; margin:0 0 18px; max-width:24em; }
.startBtn { justify-self:start; padding:18px 28px; border:0; border-radius:999px; background:#0b0b0c; color:#fff; font:800 18px system-ui,"Hiragino Sans",sans-serif; box-shadow:0 8px 0 #444; }
.startBtn:active { transform:translateY(6px); box-shadow:0 2px 0 #444; }
.privacy { font-size:12px; opacity:.6; margin-top:10px; }
.end { background:radial-gradient(ellipse at 50% 30%,#1b2a40,#06080e 70%); color:#f4efe6; animation:fadein 1.4s ease both; }
@keyframes fadein { from { opacity:0; } }
.end h2 { font:900 clamp(38px,12vw,64px)/.95 system-ui,"Hiragino Sans",sans-serif; letter-spacing:-.03em; margin:8px 0 14px; }
.lasted { font:800 20px/1.3 system-ui,"Hiragino Sans",sans-serif; margin:0 0 18px; color:var(--riku); }
.learnedLabel { font:700 12px ui-monospace,monospace; letter-spacing:.14em; color:#ff6b78; margin:0 0 8px; text-transform:uppercase; }
.findings { margin:0 0 18px; padding:0; list-style:none; display:grid; gap:10px; }
.findings li { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.07); border-left:3px solid #ff6b78; font:600 16px/1.4 system-ui,"Hiragino Sans",sans-serif; animation:rise .5s ease both; }
.findings li:nth-child(2) { animation-delay:.5s; } .findings li:nth-child(3) { animation-delay:1s; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.moral { font:800 19px/1.35 system-ui,"Hiragino Sans",sans-serif; margin:6px 0 16px; }
.riku { padding:14px; border-radius:12px; background:rgba(242,165,65,.1); border:1px solid rgba(242,165,65,.4); margin:0 0 16px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.primary, .ghostBtn { padding:14px 18px; border-radius:999px; font:800 15px system-ui,"Hiragino Sans",sans-serif; }
.primary { background:#f4efe6; color:#0b0b0c; border:0; }
.ghostBtn { background:none; color:#f4efe6; border:2px solid #f4efe6; }
.door { display:inline-block; margin-top:14px; padding:14px 18px; border-radius:999px; background:var(--riku); color:var(--night); font:800 15px system-ui,"Hiragino Sans",sans-serif; text-decoration:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important; }
  body.premium #stage { animation:none; }
}

/* The toast is thinner at the bottom so the button stays the hero. */
.toast { padding:11px 14px; }
.toast p { font-size:15.5px; }
.toast small { font-size:12px; margin-top:6px; padding-top:6px; }

/* Codex visual QA: make the machine feel present before the first tap. */
.intro { background:radial-gradient(circle at 50% 42%,rgba(255,210,63,.12),transparent 34%),#e9e9e6; }
.intro h1 { text-wrap:balance; animation:introLock .7s cubic-bezier(.2,.8,.2,1) both; }
.startBtn { transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.startBtn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.startBtn:focus-visible,.btn:focus-visible { outline:3px solid var(--signal); outline-offset:5px; }
@keyframes introLock { from { opacity:0; transform:translateY(12px); } }