@font-face { font-family: AbPop; src: url(../fonts/poppins-900i.woff2) format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: AbSans; src: url(../fonts/publicsans.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: AbMono; src: url(../fonts/jbmono.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
:root { --ink: #0A0A0F; --pink: #FF2E88; --cyan: #34E0F0; --yel: #FFD23F; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; font-family: AbSans, "Helvetica Neue", Arial, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.gone { display: none !important; }

.hud { position: fixed; inset: 0; pointer-events: none; max-width: 520px; margin: 0 auto; }
.top { position: absolute; top: calc(var(--safe-t) + 6px); left: 8px; right: 8px; display: flex; align-items: center; gap: 7px; }
.clockbox { min-width: 58px; text-align: center; line-height: 1; }
.night { font: 700 10px AbMono, monospace; color: #cfc8ff; margin-top: 2px; text-shadow: 0 1px 0 #000; white-space: nowrap; }
.timer { font: italic 900 24px AbPop, sans-serif; color: var(--yel); text-shadow: 0 2px 0 #000; }
.want { flex: 1; position: relative; height: 38px; background: #15121f; border: 2px solid #000; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 #000, inset 0 2px 0 rgba(255,255,255,.08); transition: transform .08s; }
.want .ebar { position: absolute; inset: 0 0 5px 0; background: linear-gradient(180deg, #ff5ca3, var(--pink) 60%, #b81a60); transform-origin: left; transform: scaleX(.6); transition: background .15s; }
.want.safe .ebar { background: linear-gradient(180deg, #a9ff9c, #4fe04a 60%, #1f9a2a); }
.want.danger { animation: jamshake .1s infinite; border-color: #FF3B3B; }
.want .etick { position: absolute; left: 80%; top: 0; bottom: 5px; width: 3px; background: #fff; box-shadow: 0 0 6px #fff; }
.want .elabel { position: absolute; left: 0; right: 0; top: 0; bottom: 5px; display: flex; align-items: center; justify-content: center; font: italic 900 17px AbPop, sans-serif; color: #fff; letter-spacing: .3px; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.want .wbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--yel); transform-origin: left; }
.strikes { display: flex; gap: 3px; }
.strikes b { width: 12px; height: 16px; border-radius: 3px 3px 6px 6px; background: #fff; display: block; box-shadow: 0 0 0 2px #000; }
.strikes b.x { background: #FF3B3B; box-shadow: 0 0 10px #FF3B3B; }
.mute { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #444; background: rgba(20,18,28,.8); color: #fff; font-size: 16px; }
.mute.off { color: #666; text-decoration: line-through; }
.say { position: absolute; top: var(--sayY, 19%); left: 50%; transform: translateX(-50%); background: #fff; color: var(--ink); font: italic 900 15px AbPop, sans-serif; padding: 5px 13px; border-radius: 14px; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; box-shadow: 0 3px 0 #000; border: 2px solid #000; z-index: 3; }
.say::before { content: ''; position: absolute; left: 50%; top: -9px; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #000; }
.say.on { opacity: 1; animation: wob .28s; }
.say.red { background: #FF3B3B; color: #fff; }
.say { overflow: visible; white-space: normal; text-align: center; width: max-content; max-width: 92%; line-height: 1.15; }
@keyframes wob { 0% { transform: translateX(-50%) scale(.7) rotate(-3deg); } 60% { transform: translateX(-50%) scale(1.08) rotate(2deg); } 100% { transform: translateX(-50%) scale(1); } }

.pops { position: absolute; inset: 0; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; font: italic 900 22px AbPop, sans-serif; white-space: nowrap; color: #fff; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; animation: pop 1.1s forwards; will-change: transform, opacity; }
.pop small { display: block; font: 700 13px AbMono, monospace; color: var(--yel); text-align: center; text-shadow: 0 1px 0 #000, 0 0 6px #000; }
.pop.bad { color: #FF3B3B; }
.pop.think { font: 700 13px AbMono, monospace; color: #14121c; text-shadow: none; background: #fff; padding: 6px 10px 7px; border-radius: 14px 14px 14px 3px; box-shadow: 0 3px 0 #0006; max-width: 190px; white-space: normal; text-align: left; line-height: 1.25; }
@keyframes pop { 0% { opacity: 0; transform: var(--xy) translateY(14px) scale(.6); } 14% { opacity: 1; transform: var(--xy) translateY(0) scale(1.14); } 26% { transform: var(--xy) translateY(-5px) scale(1); } 100% { opacity: 0; transform: var(--xy) translateY(-84px) scale(.96); } }

.grid { position: absolute; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); height: 114px; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); grid-template-rows: 54px 54px; gap: 6px; pointer-events: auto; }
.grid.n1 { padding: 0 20%; }
.cap.r2 { grid-row: 2; } .cap.r1 { grid-row: 1; }
/* until the 5th button (t = 30 s) there is ONE row: the scene owns the space (no empty band under the monitor) */
.grid.one { height: 54px; grid-template-rows: 54px; } .grid.one .cap.r2 { grid-row: 1; }
.cap.locked { display: none; }
.cap.arrive { animation: arrive .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes arrive { from { transform: translateY(40px) scale(.3); opacity: 0; } }
.cap { position: relative; border: 0; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff 8%) 0%, color-mix(in srgb, var(--c) 55%, #0a0a0f 45%) 100%); color: #0A0A0F; padding: 3px 3px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; touch-action: manipulation; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.28), 0 4px 0 #000; transition: transform .06s; }
.cap:active, .cap.hit { transform: translateY(3px) scale(.96); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.28), 0 1px 0 #000; }
.cap .ic { font-size: 22px; line-height: 1.05; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.cap .nm { font: 800 11px/1.1 AbSans, sans-serif; white-space: nowrap; text-align: center; letter-spacing: -.1px; margin-top: 2px; }
.cap .sb { display: none; }
.grid.n1 .cap, .grid.n2 .cap { flex-direction: row; gap: 8px; } .grid.n1 .ic, .grid.n2 .ic { font-size: 28px; } .grid.n1 .nm, .grid.n2 .nm { font-size: 15px; margin: 0; }
.cap .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: rgba(10,10,15,.72); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }
.cap.deny { animation: deny .22s; }
@keyframes deny { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cap .x2 { position: absolute; top: 4px; right: 6px; background: #0A0A0F; color: var(--yel); font: 800 11px AbMono, monospace; padding: 1px 5px; border-radius: 6px; opacity: 0; transition: opacity .1s; }
.cap.hot .x2 { opacity: 1; }
.cap.hot { outline: 3px solid #fff; outline-offset: -3px; }
@supports not (background: color-mix(in srgb, red 50%, blue)) { .cap { background: var(--c); } }

.big { position: fixed; left: 0; right: 0; top: 30%; text-align: center; font: italic 900 36px/1.08 AbPop, sans-serif; padding: 0 18px; pointer-events: none; color: #fff; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000; opacity: 0; transition: opacity .25s; z-index: 5; }
.big.on { opacity: 1; }
.howto { position: fixed; left: 8px; right: 8px; top: var(--howY, 66%); text-align: center; font: italic 900 21px AbPop, sans-serif; color: var(--yel); text-shadow: 0 2px 0 #000, 0 0 8px #000; animation: hop .6s infinite alternate; pointer-events: none; z-index: 4; }
@keyframes hop { to { transform: translateY(-7px); } }

.title { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(120% 80% at 50% 10%, rgba(255,46,136,.20), rgba(10,10,15,.86) 60%), rgba(10,10,15,.55); z-index: 10; }
.t-mark { width: 124px; height: auto; }
.title h1 { font: italic 900 56px/1.0 AbPop, "Helvetica Neue", sans-serif; margin: 6px 0 14px; letter-spacing: -1px; text-shadow: 0 4px 0 #000; }
.title h1 em { color: var(--pink); font-style: italic; }
.tag { font: 800 19px/1.3 AbSans, sans-serif; margin: 0 0 6px; max-width: 340px; }
.tag2 { font: 500 16px/1.3 AbSans, sans-serif; margin: 0 0 24px; max-width: 340px; color: var(--yel); }
.go { font: italic 900 30px AbPop, sans-serif; color: var(--ink); background: var(--yel); border: 0; border-radius: 20px; padding: 16px 44px; box-shadow: 0 7px 0 #000, 0 0 40px rgba(255,210,63,.45); min-height: 72px; }
.go:disabled { background: #3a3648; color: #a8a4b8; font: 700 14px AbMono, monospace; box-shadow: none; }
.go:not(:disabled):active { transform: translateY(4px); box-shadow: 0 3px 0 #000; }
.fine { font: 500 12px/1.4 AbSans, sans-serif; color: rgba(255,255,255,.55); margin-top: 24px; max-width: 320px; }

.end { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--safe-t) + 10px) 14px calc(var(--safe-b) + 12px); background: var(--ink); z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: fadein .4s; user-select: auto; -webkit-user-select: auto; -webkit-touch-callout: default; }
.end[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }
.card { height: calc(100vh - 208px); height: calc(100dvh - 208px); width: auto; max-width: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 0 40px rgba(255,46,136,.45); flex: none; }
.end-btns { width: min(100%, 400px); display: flex; flex-direction: column; gap: 9px; margin-top: 14px; align-items: stretch; flex: none; }
.btn { font: italic 900 20px AbPop, sans-serif; text-align: center; text-decoration: none; color: var(--ink); background: #fff; border: 0; border-radius: 14px; padding: 13px 10px; min-height: 52px; }
.btn.main { background: var(--pink); color: #fff; }
.btn.ghost { background: transparent; color: #fff; border: 2px solid #4a4658; }
.end-row { display: flex; gap: 8px; } .end-row .btn { flex: 1; font-size: 16px; padding: 12px 4px; }
.hint { font: 500 13px AbSans, sans-serif; text-align: center; color: var(--cyan); margin: 0; }

/* 2026-11-09 upgrade: chute states, hot/meh popups, the loose-corner tip */
.cap.busy::after { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 4px; border-radius: 2px; background: #FFB020; box-shadow: 0 0 8px #FFB020; }
.cap.jam { filter: saturate(.25) brightness(.7); animation: jamshake .12s infinite; }
.cap.jam::after { content: ''; position: absolute; left: 8px; right: 8px; top: 5px; height: 4px; border-radius: 2px; background: #FF2020; box-shadow: 0 0 10px #FF2020; }
@keyframes jamshake { 0% { transform: translateX(-1px); } 50% { transform: translateX(1px); } 100% { transform: translateX(-1px); } }
.pop.hot { color: var(--yel); font-size: 28px; }
.pop.meh { color: #9a94b0; font-size: 18px; }
.tip { position: fixed; z-index: 6; max-width: 210px; background: #fff; color: var(--ink); font: 800 13px AbSans, sans-serif; padding: 6px 10px; border-radius: 12px; box-shadow: 0 3px 0 #000; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s, transform .2s; pointer-events: none; }
.tip::after { content: ''; position: absolute; left: 14px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; } /* points UP at the corner (Ryō sits above it) */
.tip.on { opacity: 1; transform: none; }

/* teach-by-doing: every capsule goes dark except one, a finger shows where */
.grid.teaching .cap:not(.teach) { filter: saturate(.15) brightness(.3); }
.cap.teach { animation: teach .55s infinite alternate; outline: 4px solid #fff; outline-offset: -4px; z-index: 2; }
@keyframes teach { from { transform: scale(1); } to { transform: scale(1.06); } }
.finger { position: fixed; z-index: 7; font-size: 52px; line-height: 1; pointer-events: none; animation: tap .5s infinite alternate ease-in-out; filter: drop-shadow(0 3px 0 #000); }
@keyframes tap { from { transform: translateY(14px) scale(.92); } to { transform: translateY(-4px) scale(1.05); } }
.howto.go { color: var(--pink); font-size: 44px; animation: none; }

/* juice: fail cam + countdown */
.rec { position: fixed; z-index: 8; left: 0; right: 0; top: 22%; text-align: center; font: 800 15px AbMono, monospace; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 0 #000; pointer-events: none; }
.rec::before { content: ''; position: fixed; inset: 0; border: 6px solid rgba(255,59,59,.85); pointer-events: none; }
.rec i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #FF3B3B; margin-right: 7px; animation: blink .4s infinite alternate; vertical-align: -1px; }
.rec b { color: var(--yel); font: italic 900 22px AbPop, sans-serif; display: block; margin-top: 3px; }
@keyframes blink { to { opacity: .2; } }
.timer.beat { color: #FF3B3B; transform: scale(1.25); transition: transform .05s; }

/* 11-09 opening gag: one line, one glowing button, a giant capsule, HOOKED! */
.open { position: fixed; left: 10px; right: 10px; bottom: var(--openB, 16%); text-align: center; z-index: 6; pointer-events: none; animation: openin .35s cubic-bezier(.2,1.4,.4,1); }
.open span { display: block; font: 800 21px/1.15 AbSans, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px #000, 0 0 18px #000; }
.open b { display: block; font: italic 900 31px/1.1 AbPop, sans-serif; color: var(--yel); text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 4px 0 #000; margin-top: 2px; }
@keyframes openin { from { opacity: 0; transform: translateY(12px) scale(.9); } }
.zzz { position: fixed; z-index: 5; font-size: 34px; line-height: 1; background: #fff; border: 3px solid #000; border-radius: 26px; padding: 6px 10px 4px; box-shadow: 0 3px 0 #000; pointer-events: none; animation: bob 1.1s infinite alternate ease-in-out; }
.zzz small { font: italic 900 16px AbPop, sans-serif; color: #6b5cff; margin-left: 3px; vertical-align: 6px; }
.zzz::after { content: ''; position: absolute; left: 8px; bottom: -16px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #000; }
@keyframes bob { to { transform: translateY(-6px) rotate(3deg); } }
.stamp { position: fixed; left: 50%; top: var(--stampY, 30%); z-index: 9; font: italic 900 66px/1 AbPop, sans-serif; color: #FF2E55; padding: 6px 18px 10px; border: 7px solid #FF2E55; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 6px 0 #000; transform: translateX(-50%) rotate(-9deg); pointer-events: none; animation: stamp .32s cubic-bezier(.3,1.7,.5,1); white-space: nowrap; }
@keyframes stamp { from { opacity: 0; transform: translateX(-50%) rotate(-25deg) scale(3.2); } 70% { opacity: 1; } }
.newt { position: fixed; left: 50%; top: var(--newY, 70%); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 3px solid #000; border-radius: 16px; padding: 6px 14px 7px 10px; box-shadow: 0 4px 0 #000; pointer-events: none; animation: newin .4s cubic-bezier(.2,1.5,.4,1); max-width: 94vw; }
.newt .ni { font-size: 36px; line-height: 1; }
.newt .nt { display: flex; flex-direction: column; min-width: 0; }
.newt small { font: 800 10px AbMono, monospace; color: var(--pink); letter-spacing: 1px; }
.newt b { font: italic 900 20px/1.05 AbPop, sans-serif; white-space: nowrap; }
.newt em { font: 700 13px/1.2 AbSans, sans-serif; font-style: normal; color: #3a3550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes newin { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.7) rotate(-4deg); } }