:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  --cream: #fff0ce;
  --gold: #f3a64a;
  --brown: #7c3b17;
  --ink: #100906;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #100906; color: var(--cream); touch-action: none; }
body { min-height: 100svh; }
button { min-width: 44px; min-height: 44px; border: 0; color: inherit; font: 900 14px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#app, .screen { position: fixed; inset: 0; }
.screen { isolation: isolate; overflow: hidden; }
.eyebrow { margin: 0 0 7px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.display { font-family: "Archivo Black", Impact, sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.boot-screen { display: grid; place-items: center; background: #100906; color: #d9b99a; font-size: 11px; font-weight: 900; letter-spacing: .15em; line-height: 1.6; text-align: center; }

.title-screen { overflow: hidden; background: #160c08; perspective: 900px; }
.title-webgl { position: fixed; inset: 0; z-index: -3; overflow: hidden; }
.title-webgl canvas { display: block; width: 100% !important; height: 100% !important; }
.title-shade { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(8,3,1,.34), rgba(12,5,2,.07) 30%, rgba(12,5,2,.015) 42%, rgba(12,5,2,.12) 72%, rgba(7,3,2,.46)); transition: opacity .68s ease; }
.title-hero { position: relative; width: 100%; min-height: 100svh; }
.settings-button { position: absolute; right: max(18px, env(safe-area-inset-right)); top: calc(var(--safe-top) + 2px); z-index: 3; width: 46px; height: 46px; border: 2px solid #c8923c; border-radius: 50%; background: radial-gradient(circle at 38% 30%,#4a2e1c,#160b05 70%); box-shadow: inset 0 1px 0 rgba(255,226,170,.45),0 6px 16px rgba(0,0,0,.45); transition: transform .68s cubic-bezier(.2,.75,.2,1), opacity .5s ease; }
.settings-button::before { content: "⋯"; display: block; margin-top: -8px; color: #fff0ce; font: 900 25px/1 Inter, sans-serif; letter-spacing: .05em; }
.sound-button, .haptic-button { flex: 0 0 48px; width: 48px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(0,0,0,.45); font-size: 19px; }
.opener-play { position: absolute; left: 50%; top: 82%; z-index: 4; display: grid; place-content: center; width: min(64vw,300px); height: 56px; padding: 6px 24px 5px; overflow: hidden; border: 3px solid #c8923c; border-radius: 999px; background: linear-gradient(180deg,#fffdf8 0%,#f2ebdf 46%,#ddd0bb 100%); color: #4a230e; box-shadow: 0 0 0 1px #6b4214,inset 0 2px 0 #fff,inset 0 -7px 14px rgba(120,82,42,.28),inset 0 0 0 1px rgba(255,236,190,.9),0 14px 30px rgba(10,4,1,.5); transform: translate(-50%,-50%); transition: transform .68s cubic-bezier(.2,.75,.2,1),opacity .5s ease;  }
.opener-play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255,219,150,.55); animation: opener-play-breathe 3.2s ease-in-out infinite; pointer-events: none; }
.opener-play::before { content: ""; position: absolute; inset: -35% auto -35% -30%; width: 24%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); transform: skewX(-18deg) translateX(-240%); animation: opener-play-sweep 5s ease-in-out infinite; pointer-events: none; }
.opener-play strong,.opener-play small { position: relative; z-index: 1; display: block; }
.opener-play strong { color: #4a230e; font: 900 20px/1 "Archivo Black",Impact,sans-serif; letter-spacing: .14em; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.opener-play small { margin-top: 4px; color: #9a6421; font: 900 11px/1 Inter,sans-serif; letter-spacing: .12em; }
.opener-play:active { animation: none; transform: translate(-50%,-50%) scale(.97); }
.title-screen.to-journey .settings-button, .title-screen.to-level .settings-button { transform: translateY(-90px); opacity: 0; }
.title-screen.to-journey .opener-play, .title-screen.to-level .opener-play { transform: translate(-50%,90px) scale(.98); opacity: 0; animation: none; }
.title-screen.to-journey .title-shade, .title-screen.to-level .title-shade { opacity: .25; }
.level-heading { display: flex; justify-content: space-between; color: #ccab88; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.level-card { --tile-rx: 0deg; --tile-ry: 0deg; position: relative; aspect-ratio: 16 / 9; min-height: 62px; overflow: hidden; border: 2px solid rgba(200,146,60,.55); border-radius: 9px; background: #24150f; text-align: left; transform: perspective(480px) rotateX(var(--tile-rx)) rotateY(var(--tile-ry)); transform-style: preserve-3d; transition: transform .12s ease; }
.level-card:active { transform: perspective(480px) rotateX(var(--tile-rx)) rotateY(var(--tile-ry)) scale(.94); }
.level-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.level-card.cleared img, .level-card.current img { opacity: 1; }
.level-card.locked img { opacity: 1; filter: brightness(.18) saturate(.35); }
.tile-medal { position: absolute; right: 7px; bottom: 7px; z-index: 2; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; color: #b46a38; background: #4c260f; box-shadow: 0 2px 7px rgba(0,0,0,.55); font-size: 15px; font-style: normal; }
.tile-medal.silver { color: #d7e0e2; background: #60676b; }
.tile-medal.gold { color: #fff0a2; background: #b57612; }
.level-card.cleared::after { content: "✓"; position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #5c2b10; color: #ffe3b5; font-size: 10px; font-weight: 900; }
.level-card.current { border: 2px solid #f0c060; }
.level-card.current::before { content: ""; position: absolute; inset: 2px; z-index: 1; border: 2px solid #ffd28b; border-radius: 6px; animation: current-frame 1.35s ease-in-out infinite; pointer-events: none; }
.bonus-marker { position: absolute; left: 7px; bottom: 6px; z-index: 3; width: 12px; height: 16px; border-radius: 70% 35% 60% 40% / 75% 70% 35% 30%; background: linear-gradient(135deg,#fff2a0,#d38a16 65%); transform: rotate(42deg); box-shadow: 0 2px 7px rgba(0,0,0,.55); }

.journey-screen { overflow-y: auto; background: #120805; touch-action: pan-y; }
.journey-ambient { position: fixed; inset: 0; z-index: -3; background: #120805 var(--journey-face) center / cover no-repeat; opacity: .22; transform: scale(1.08); }
.journey-shade { position: fixed; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(255,226,180,.045) 1px,transparent 1px) 0 0 / 44px 44px,linear-gradient(0deg,rgba(255,226,180,.045) 1px,transparent 1px) 0 0 / 44px 44px,radial-gradient(120% 60% at 50% 0%,rgba(80,44,20,.35),transparent 70%),linear-gradient(180deg,rgba(6,3,2,.55),#140906 48%,#090402); }
.journey-header { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; width: min(960px,100%); margin: auto; padding: calc(var(--safe-top) + 8px) clamp(16px,4vw,42px) 12px; animation: journey-rise .58s .08s cubic-bezier(.18,.78,.2,1) both; }
.journey-back { flex: 0 0 46px; width: 46px; border: 2px solid #c8923c; border-radius: 50%; background: radial-gradient(circle at 38% 30%,#fffaf1,#e3d7c3 70%); color: #4a230e; box-shadow: inset 0 -3px 6px rgba(120,82,42,.3),0 6px 16px rgba(0,0,0,.45); font-size: 21px; font-weight: 900; }
.journey-header p { margin: 0; color: #e6b25e; font-size: 10px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; }
.journey-content { width: min(960px,100%); margin: auto; padding: 4px clamp(16px,4vw,42px) calc(var(--safe-bottom) + 40px); }
.journey-hero { position: relative; display: block; width: 100%; aspect-ratio: 1.33; overflow: hidden; border: 3px solid #c8923c; border-radius: 26px; background: #241109; box-shadow: 0 0 0 1px #5a360f,inset 0 0 0 1px rgba(255,230,180,.55),0 18px 45px rgba(0,0,0,.5); text-align: left; animation: journey-rise .62s .14s cubic-bezier(.18,.78,.2,1) both; }
.journey-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(9,3,1,.88)); }
.journey-hero img { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; object-position: var(--focal) 40%; transform: translate(var(--journey-x,0),var(--journey-y,0)) scale(1.04); transition: transform .18s ease-out; }
.journey-hero span { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; }
.journey-hero small, .journey-hero strong { display: block; }
.journey-hero small { margin-bottom: 7px; color: #e8bc89; font-size: 9px; letter-spacing: .15em; }
.journey-hero strong { font: 900 clamp(19px,5.4vw,32px)/1 "Archivo Black",Impact,sans-serif; letter-spacing: -.035em; }
.journey-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 14px; animation: journey-rise .58s .22s cubic-bezier(.18,.78,.2,1) both; }
.journey-stats > div { display: grid; grid-template-columns: auto 1fr; align-items: center; min-width: 0; padding: 11px 9px; border: 1px solid rgba(255,244,226,.9); border-radius: 13px; background: linear-gradient(180deg,#fffdf8,#ece3d4 60%,#d9ccb6); color: #3e1e0b; box-shadow: inset 0 -4px 8px rgba(120,82,42,.2),0 8px 18px rgba(0,0,0,.35); }
.journey-stats i { grid-row: 1 / 3; margin-right: 7px; color: #b86e35; font-style: normal; }
.journey-stats i.gold { color: #d99a12; }.journey-stats i.silver { color: #8c979c; }.journey-stats i.bronze { color: #a8612f; }
.journey-stats strong { font-size: 16px; }.journey-stats span { overflow: hidden; color: #8a6440; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.journey-levels { margin-top: 20px; animation: journey-rise .58s .3s cubic-bezier(.18,.78,.2,1) both; }
.journey-level-heading { display: flex; justify-content: space-between; margin-bottom: 11px; color: #cfa783; font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.journey-levels .level-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.journey-levels .level-card { min-height: 0; aspect-ratio: 4 / 5; }
.journey-levels .tile-medal { width: 22px; height: 22px; right: 6px; bottom: 6px; font-size: 12px; }
.journey-screen.to-opener .journey-header, .journey-screen.to-opener .journey-content { opacity: 0; transform: translateY(70px); transition: transform .62s cubic-bezier(.2,.75,.2,1),opacity .45s ease; }
.journey-screen.to-level { opacity: .35; transition: opacity .45s ease; }
.shared-face-transition { position: fixed; z-index: 100; object-fit: cover; object-position: var(--focal) 40%; border-radius: 24px; transform-origin: 0 0; transition: transform .45s cubic-bezier(.18,.78,.2,1),border-radius .45s ease; pointer-events: none; }
.shared-face-transition.expanded { border-radius: 0; transform: translate(var(--shared-x),var(--shared-y)) scale(var(--shared-sx),var(--shared-sy)); }

.settings-sheet { position: fixed; inset: 0; z-index: 20; display: grid; align-items: end; background: rgba(5,2,1,.5); animation: settings-fade .2s ease-out both; }
.settings-sheet.leaving { animation: settings-fade .2s ease-out reverse both; }
.settings-dismiss { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.settings-panel { position: relative; width: min(100%, 620px); margin: 0 auto; padding: 12px 20px calc(var(--safe-bottom) + 18px); border: 1px solid rgba(255,218,160,.36); border-bottom: 0; border-radius: 26px 26px 0 0; background: rgba(25,11,5,.98); box-shadow: 0 -16px 52px rgba(0,0,0,.5); animation: settings-rise .24s cubic-bezier(.2,.8,.2,1) both; }
.settings-sheet.leaving .settings-panel { animation: settings-rise .2s ease-in reverse both; }
.settings-handle { width: 42px; height: 4px; margin: 0 auto 18px; border-radius: 999px; background: rgba(255,255,255,.28); }
.settings-panel p { margin: 0 0 7px; color: #d89a5c; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.settings-panel h2 { margin: 0 0 18px; font-size: 32px; }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; margin-top: 8px; padding: 0 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.055); text-align: left; }
.settings-toggle strong { color: #f1ab5f; }
.settings-reset { width: 100%; min-height: 52px; margin-top: 14px; border-radius: 12px; color: #e8c9aa; background: #4b200f; }
.settings-status { display: block; min-height: 18px; margin-top: 10px; color: #efbd82; text-align: center; }

.game-screen { background: #0a0605; }
.webgl, .play-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.webgl { z-index: 1; overflow: hidden; }
.webgl canvas { display: block; width: 100% !important; height: 100% !important; }
.play-canvas { z-index: 3; pointer-events: none; }
.hole-pulse { box-sizing: border-box; position: absolute; z-index: 4; border: 3px solid rgba(212,132,53,.64); border-radius: 50%; pointer-events: none; animation: hole-ring var(--hole-ring-period, 1.4s) ease-out infinite; }
.hole-pulse::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(35,12,4,.72); border-radius: inherit; }
.hole-pulse.near { border-color: rgba(255,178,76,.9); }
.hole-pulse.hover { border-color: #ffd58c; }
.game-screen.diarrhea .hole-pulse { visibility: hidden; }
.game-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.38), transparent 18%, transparent 76%, rgba(0,0,0,.36)); }
.entrance-focus { --spawn-x: 50%; position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.entrance-focus.active { opacity: 1; }
.entrance-focus::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 115px 115% at var(--spawn-x) -8%, transparent 0 34%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.25)); }
.entrance-focus::after { content: ""; position: absolute; left: calc(var(--spawn-x) - 115px); top: -4px; width: 230px; height: 72%; background: linear-gradient(180deg, rgba(255,224,175,.18), rgba(255,191,104,.035) 72%, transparent); clip-path: polygon(44% 0,56% 0,100% 100%,0 100%); opacity: .9; }
.entrance-word { position: absolute; left: var(--spawn-x, 50%); top: max(52px, 8vh); z-index: 7; color: #ffd099; font-size: 44px; line-height: 1; text-shadow: 0 5px 0 #411607, 0 10px 26px #000; opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.65); }
.entrance-word.active { animation: entrance-word 1.1s cubic-bezier(.2,.75,.2,1) both; }
.entrance-word.landed { opacity: 0; transform: translateX(-50%) scale(1.08); transition: transform .32s ease, opacity .32s ease; }
.entrance-word:not(.active) { visibility: hidden; }
.game-screen.entrance-shake { animation: entrance-shake .12s linear 1; }
.game-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.game-hud button { pointer-events: auto; }
.game-screen.diarrhea .game-vignette, .game-screen.diarrhea .game-hud { visibility: hidden; }
.back-button { position: absolute; left: max(12px, env(safe-area-inset-left)); top: var(--safe-top); width: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(9,5,3,.52); font-size: 20px; }
.level-label { position: absolute; left: 50%; top: calc(var(--safe-top) + 4px); transform: translateX(-50%); padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(9,5,3,.52); font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; }
.level-label { max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bonus-hud .level-label { border-color: rgba(255,218,108,.8); color: #fff0aa; background: rgba(76,42,4,.82); }
.bonus-chip { color: #f5bb45; }
.streak-badge { display: inline-flex; align-items: center; min-height: 26px; margin-left: 8px; padding: 0 8px; border-radius: 999px; color: #fff0ce; background: #7a2610; letter-spacing: .04em; }
.speed-counter { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); color: #fff2b5; font: 900 clamp(44px, 14vw, 82px)/1 "Archivo Black", Impact, sans-serif; text-shadow: 0 5px 0 #421407; }
.timer-number { position: absolute; right: max(14px, env(safe-area-inset-right)); top: var(--safe-top); min-width: 58px; font: 900 clamp(32px, 9vw, 52px)/1 "Archivo Black", Impact, sans-serif; text-align: right; text-shadow: 0 3px 0 #000; }
.timer-number.danger { color: #ff544d; animation: pulse .55s ease-in-out infinite; }
.steer-hint { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 8px); visibility: hidden; opacity: 0; transform: translateX(-50%); width: max-content; max-width: 86vw; padding: 9px 14px; border-radius: 999px; background: rgba(10,6,4,.62); color: #e7ceb2; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: opacity .35s, visibility 0s .35s; }
.steer-hint.visible { visibility: visible; opacity: 1; transition-delay: 0s; }
.game-screen.intro .steer-hint { opacity: 0; }
.hole-pulse.bonus-hidden { visibility: hidden; }
.golden-drop-toast { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 8px); z-index: 7; padding: 10px 15px; border: 1px solid rgba(255,236,142,.72); border-radius: 999px; color: #fff0a0; background: rgba(91,55,7,.86); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; animation: golden-toast 1.8s ease both; transform: translateX(-50%); }
@media (orientation: landscape) {
  .game-hud .level-label { left: calc(max(12px, env(safe-area-inset-left)) + 56px); top: var(--safe-top); max-width: 96px; transform: none; }
}
.pause-steering { display: grid; grid-template-columns: 1fr auto auto; align-items: center; min-height: 48px; padding: 0 16px; color: #e5c5a2; }
.pause-steering strong { color: #f1ab5f; }.pause-steering i { margin-left: 12px; color: #f1ab5f; font-size: 22px; font-style: normal; }
.pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pause-actions button { min-height: 52px; border-radius: 12px; background: #f1a24d; color: #1b0b05; }
.pause-actions .pause-title-button { border: 1px solid rgba(255,255,255,.2); color: #e8c9aa; background: #4b200f; }
.ready-cue { --ready-angle: 0deg; position: absolute; left: 50%; top: 52%; z-index: 7; display: grid; justify-items: center; width: min(280px, 74vw); min-height: 276px; padding: 22px 20px 18px; border: 1px solid rgba(255,211,142,.48); border-radius: 24px; background: rgba(21,10,5,.88); box-shadow: 0 14px 48px rgba(0,0,0,.42); opacity: 0; pointer-events: none; transform: translate(-50%,-46%) scale(.92); transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease; }
.ready-cue.shown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
/* hidden for real when not shown: an opacity-0 button still has a box, and the geometry
   audit rightly refuses a control whose centre pixel it cannot own */
.ready-cue:not(.shown) { visibility: hidden; }
.ready-cue.leaving { opacity: 0; pointer-events: none; transform: translate(-50%,-54%) scale(.94); }
.ready-cue strong { margin-top: 13px; color: #ffd092; font-size: clamp(28px, 8vw, 40px); line-height: .88; text-align: center; text-shadow: 0 4px 0 #4a1d0b; }
.ready-cue small { margin-top: 9px; color: #dbc0a5; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.ready-phone-stage { position: relative; display: grid; place-items: center; width: 112px; height: 112px; }
.ready-phone { position: relative; z-index: 2; display: block; width: 52px; height: 86px; border: 5px solid #fff0ce; border-radius: 11px; background: #3f1d0c; transform: rotate(var(--ready-angle)); transform-origin: 50% 58%; transition: transform .12s ease; }
.ready-cue.moving .ready-phone { animation: ready-rock .7s ease-in-out infinite; }
.ready-cue.calm .ready-phone { transform: rotate(0deg); animation: none; }
.ready-phone i { position: absolute; left: 50%; bottom: 5px; width: 7px; height: 7px; border: 1px solid #f6bd70; border-radius: 50%; transform: translateX(-50%); }
.ready-motion-trail { position: absolute; z-index: 1; width: 45px; height: 72px; border: 2px solid rgba(65,227,214,.58); border-radius: 12px; opacity: 0; transform: translateX(0) rotate(var(--ready-angle)); transition: transform .15s ease, opacity .15s ease; }
.ready-motion-trail.trail-b { border-color: rgba(168,107,255,.5); }
.ready-cue.moving .trail-a { opacity: .72; transform: translateX(-19px) rotate(calc(var(--ready-angle) - 7deg)); }
.ready-cue.moving .trail-b { opacity: .58; transform: translateX(19px) rotate(calc(var(--ready-angle) + 7deg)); }
.ready-cue.calm .ready-motion-trail { opacity: 0; transform: translateX(0) rotate(0deg); }
.ready-upright-mark { position: absolute; width: 58px; height: 92px; border: 2px dashed rgba(246,189,112,.55); border-radius: 13px; }
.ready-upright-mark::after { content: "↑"; position: absolute; right: -32px; top: 30px; color: #f6bd70; font-size: 28px; }
.ready-progress { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 13px; border: 2px solid rgba(255,255,255,.34); border-radius: 50%; }
.ready-cue.calm .ready-progress { border-color: rgba(65,227,214,.78); }
.ready-progress-fill { display: block; width: 14px; height: 14px; border-radius: 50%; background: #f3a64a; transform: scale(0); transition: transform .06s linear; }
.ready-fine { position: absolute; left: 50%; top: 54%; z-index: 8; color: #fff0ce; font-size: 24px; opacity: 0; pointer-events: none; transform: translate(-50%,-40%) scale(.8); transition: transform .18s ease, opacity .18s ease; }
.ready-fine.shown { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.intro-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 80px 18px; background: linear-gradient(180deg, rgba(12,5,2,.08), rgba(12,5,2,.3)); transition: transform .28s ease, opacity .28s ease; }
.intro-overlay.leaving { transform: scale(.96); opacity: 0; pointer-events: none; }
.intro-lockup { width: min(700px, 100%); color: var(--cream); font-size: clamp(46px, 15vw, 104px); line-height: .78; text-align: center; text-shadow: 0 7px 0 #371206; }
.intro-beat { display: block; opacity: 0; transform: scale(1.65) rotate(2deg); transition: transform .42s cubic-bezier(.12,.76,.18,1.3), opacity .2s ease-out; }
.intro-beat:nth-child(2) { color: #ef8e3e; }
.intro-beat.active { opacity: 1; transform: scale(1) rotate(-1deg); }
.bonus-interstitial { position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; overflow: hidden; padding: 24px; background: #190d06 var(--bonus-face) center / cover no-repeat; }
.bonus-interstitial-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(75,43,5,.24), rgba(8,4,2,.92) 72%); }
.bonus-lockup { position: relative; width: min(680px, 100%); padding: 30px 22px; border: 2px solid #f3c45d; border-radius: 20px; background: rgba(27,14,5,.82); box-shadow: 0 18px 70px rgba(0,0,0,.62); text-align: center; animation: bonus-slam .52s cubic-bezier(.12,.76,.18,1.3) both; }
.bonus-lockup p { margin: 0 0 10px; color: #e6c888; font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.bonus-lockup h2 { margin: 0; color: #ffd65d; font-size: clamp(54px, 17vw, 112px); line-height: .76; text-shadow: 0 7px 0 #65400b; }
.bonus-lockup strong { display: block; margin: 22px 0 28px; color: #fff0ce; font-size: clamp(28px, 9vw, 56px); line-height: .86; }
.bonus-start-button { width: min(100%, 360px); min-height: 66px; border: 2px solid #ffe399; border-radius: 12px; color: #271304; background: #f2b842; font-size: 18px; }
.bonus-start-button:disabled { opacity: .48; cursor: wait; }

/* ── SUPER DELUXE chapters ─────────────────────────────────────────────────── */
.chapter-chip { margin-right: 2px; padding: 1px 6px 0; border-radius: 5px; color: #1c0d04; background: #f0c060; font-size: 9px; letter-spacing: .12em; }
.chapter-chip.chapter-brutal { background: #f08a3c; } .chapter-chip.chapter-insane { color: #fff3e0; background: #c0392b; } .chapter-chip.chapter-hell { color: #ffe0c0; background: #3a0a05; box-shadow: inset 0 0 0 1px #ff6a2a; }
.chapter-card { position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; overflow: hidden; padding: 24px; }
.chapter-card-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(120,60,10,.32), rgba(8,4,2,.93) 70%); animation: chapter-shade .4s ease-out both; }
.chapter-lockup { position: relative; width: min(600px, 100%); padding: 30px 22px 26px; border: 3px solid #c8923c; border-radius: 22px; background: linear-gradient(180deg, #fffdf8, #ece2d0 70%, #d8c9b1); color: #3e1e0b; box-shadow: 0 0 0 1px #5a360f, 0 24px 80px rgba(0,0,0,.7); text-align: center; animation: bonus-slam .56s cubic-bezier(.12,.76,.18,1.3) both; }
.chapter-lockup p { margin: 0 0 8px; color: #8a5a22; font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.chapter-name { margin: 0; color: #4a1f08; font-size: clamp(64px, 21vw, 128px); line-height: .8; text-shadow: 0 6px 0 #c8923c; }
.chapter-hell .chapter-name { color: #7a0c02; text-shadow: 0 6px 0 #ff7a2a; }
.chapter-subtitle { display: block; margin: 14px 0 12px; color: #9a6421; font-size: clamp(22px, 7vw, 40px); line-height: .9; }
.chapter-new { display: grid; gap: 6px; margin: 0 auto 22px; padding: 0; width: fit-content; list-style: none; text-align: left; font-size: 13px; font-weight: 800; }
.chapter-new li::before { content: "● "; color: #c8923c; }
.chapter-start-button { width: min(100%, 340px); min-height: 62px; border: 3px solid #c8923c; border-radius: 999px; color: #fff3dc; background: linear-gradient(180deg, #6b3514, #3e1a07); font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.chapter-start-button:disabled { opacity: .5; cursor: wait; }
.chapter-card.leaving { opacity: 0; transition: opacity .34s ease; }
.hazard-cue { position: absolute; left: 50%; top: calc(var(--safe-top) + 64px); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 7px 14px 6px; border: 2px solid #b48cff; border-radius: 999px; color: #f3ecff; background: rgba(30,12,48,.82); font-size: 13px; letter-spacing: .1em; opacity: 0; transform: translate(-50%, -10px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.hazard-icon { font-size: 18px; line-height: 1; }
.gravity-warn .hazard-cue { opacity: 1; transform: translate(-50%, 0); animation: hazard-pulse .32s ease-in-out infinite alternate; }
.gravity-flipped .hazard-cue { opacity: 1; transform: translate(-50%, 0); border-color: #fff; background: rgba(90,30,150,.9); }
.gravity-flipped .hazard-icon { transform: rotate(180deg); }
.gravity-flipped .game-vignette { box-shadow: inset 0 0 90px rgba(140,70,255,.45); }
@keyframes hazard-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes chapter-shade { from { opacity: 0; } to { opacity: 1; } }
.journey-chapters { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.journey-chapters::-webkit-scrollbar { display: none; }
.chapter-tab { flex: 1 1 0; min-width: 0; padding: 8px 2px 7px; border: 1px solid rgba(200,146,60,.5); border-radius: 10px; color: #e6b25e; background: rgba(20,9,4,.7); text-align: center; }
.chapter-tab strong { display: block; font: 900 11px/1 "Archivo Black", Impact, sans-serif; letter-spacing: .04em; }
.chapter-tab small { display: block; margin-top: 3px; color: #a47a4e; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.chapter-tab.sealed { opacity: .5; }
.chapter-tab.active { border: 2px solid #c8923c; color: #3e1e0b; background: linear-gradient(180deg, #fffdf8, #e6dac5); opacity: 1; }
.chapter-tab.active small { color: #8a6440; }
.offline-note { position: absolute; left: 50%; top: 42%; z-index: 9; transform: translate(-50%,-50%); width: min(80%, 340px); padding: 18px; border-radius: 12px; background: #26130c; text-align: center; }
.video-note { margin: 8px 0 0; color: #ffd09b; font-size: 12px; }
.splat-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.flush-burst { position: absolute; width: var(--d); height: var(--d); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%,-50%) scale(.4); }
.flush-burst.foam { border: 5px solid rgba(238,220,178,.85); box-shadow: 0 0 0 2px rgba(60,26,8,.5), inset 0 0 14px rgba(255,244,214,.5); animation: flush-burst .62s cubic-bezier(.1,.7,.25,1) forwards; }
.flush-burst.wave { background: radial-gradient(circle, rgba(66,28,8,0) 44%, rgba(98,46,14,.55) 58%, rgba(66,28,8,0) 72%); animation: flush-burst .9s cubic-bezier(.15,.6,.3,1) .08s forwards; }
.edge-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px rgba(255,120,60,.5), inset 0 0 38px 10px rgba(160,40,12,.55); will-change: opacity; }
.game-screen.diarrhea .edge-glow { visibility: hidden; }
.mode-flash { position: absolute; inset: 0; z-index: 11; background: radial-gradient(circle at var(--flush-x,50%) var(--flush-y,80%), #c07a36, #6b3010 34%, #2e1105 90%); opacity: 0; pointer-events: none; }
.mode-flash.flashing { animation: mode-flash .22s ease-out both; }
.splat { position: absolute; width: var(--size); height: calc(var(--size) * .78); transform: translate(-50%,-50%); animation: splat-slide var(--slide-time, 2.6s) cubic-bezier(.45,0,.75,.75) calc(var(--delay) + .5s) forwards; }
.splat b { position: absolute; inset: 0; border-radius: 48% 52% 44% 56%; background: radial-gradient(ellipse 16% 10% at 36% 30%, rgba(255,236,200,.8), rgba(255,236,200,0)), radial-gradient(ellipse at 50% 56%, #653010 0 38%, #4a1f08 72%, #321204); box-shadow: inset 0 0 5px 1px rgba(24,8,2,.55), 0 3px 7px rgba(0,0,0,.35); opacity: 0; transform: scale(.1) rotate(var(--rot)); animation: splat .52s cubic-bezier(.1,.8,.2,1) var(--delay) forwards; }
.splat u { position: absolute; left: 50%; bottom: 50%; width: 24%; height: var(--slide); margin-left: -12%; border-radius: 40% 40% 50% 50%; background: linear-gradient(to top, rgba(62,25,7,.9), rgba(62,25,7,.55) 55%, rgba(62,25,7,0)); transform-origin: 50% 100%; transform: scaleY(0); animation: splat-drip var(--slide-time, 2.6s) cubic-bezier(.45,0,.75,.75) calc(var(--delay) + .5s) forwards; }
/* flat satellite lobes: a lobe with its own copy of the gloss read as a cluster of beads, not a splash */
.splat b::before, .splat b::after { content: ""; position: absolute; border-radius: 50%; background: #4a1f08; box-shadow: inset 0 0 3px rgba(24,8,2,.6); }
.splat b::before { width: 38%; height: 50%; left: -22%; top: 18%; }
.splat b::after { width: 24%; height: 31%; right: -18%; bottom: 2%; }

.result-overlay { position: absolute; inset: 0; z-index: 10; display: grid; align-content: end; overflow: hidden; padding: clamp(12px,2.4vh,20px) max(18px,env(safe-area-inset-right)) calc(var(--safe-bottom) + clamp(8px,1.8vh,16px)) max(18px,env(safe-area-inset-left)); background: none; }
.result-panel { width: min(700px,100%); max-height: min(52dvh,calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)); margin: 0 auto; padding: clamp(10px,1.7vh,14px) clamp(12px,2.2vw,16px) clamp(12px,1.9vh,16px); overflow: hidden; border: 1px solid rgba(255,221,170,.2); border-radius: 16px; background: linear-gradient(180deg, rgba(46,20,8,.66), rgba(8,3,1,.74)); box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,232,196,.14); animation: card-land .5s cubic-bezier(.2,.8,.3,1) both; transform-origin: 50% 100%; }
.mode-slam { position: absolute; left: 50%; top: 15%; width: 100%; transform: translateX(-50%) rotate(2deg); color: #f39a45; -webkit-text-stroke: 2px #2b0d03; paint-order: stroke fill; font-size: clamp(40px,13vw,100px); line-height: .78; text-align: center; text-shadow: 0 4px 0 #6a2a0c, 0 8px 0 #371206, 0 16px 30px rgba(0,0,0,.55); animation: slam .62s cubic-bezier(.3,.7,.3,1) both; }
.result-kicker { margin: 0 0 7px; color: #f0a553; font-size: 11px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.result-title { margin: 0; font-size: clamp(32px,10vw,72px); line-height: .86; text-wrap: balance; overflow-wrap: anywhere; }
.result-name-clamped { display: -webkit-box; line-height: 1.1; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.result-name-ellipsis { text-overflow: ellipsis; }
.result-copy { margin: clamp(8px,1.6vh,14px) 0 clamp(10px,1.9vh,18px); color: #e7cab0; font-size: clamp(12px,1.65vh,14px); line-height: 1.35; }
.result-copy strong { color: white; }
.medal-earned { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #ca7d48; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.medal-earned i { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; font-style: normal; }
.medal-earned.silver { color: #dce4e6; }
.medal-earned.gold { color: #ffe179; }
.result-streak { color: #ffb06b; font-weight: 900; }
.golden-drop-award { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: 8px; border: 2px solid #fff0a4; border-radius: 50%; color: #fff3a8; background: #a86a10; font-size: 25px; box-shadow: 0 0 24px rgba(255,215,82,.5); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px,1.2vh,10px); }
.result-actions.single { grid-template-columns: 1fr; }
.result-actions button { min-height: clamp(44px,6.5vh,58px); border-radius: 10px; background: linear-gradient(180deg, #f7b560, #e08a38); color: #1b0b05; box-shadow: inset 0 1px 0 rgba(255,240,210,.55), 0 3px 0 #7a3a12; }
.result-actions .secondary { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: white; }
.result-actions.win-actions .share-button { grid-column: 1 / -1; color: #fff0ce; background: linear-gradient(180deg, #7e3516, #4c1d0b); }
.result-actions button:disabled { opacity: .62; cursor: wait; }
.lose-overlay { background: linear-gradient(180deg, rgba(34,5,2,.18), rgba(11,3,2,.97) 65%); }
.lose-overlay .result-panel { background: rgba(18,3,2,.82); }
.lose-overlay .result-title { color: #ff6b55; font-size: clamp(44px,14vw,96px); }

@keyframes breathe { 0%,100% { transform: scale(.98); opacity: .55; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes current-frame { 0%,100% { transform: scale(.98); opacity: .5; } 50% { transform: scale(1.02); opacity: 1; } }
@keyframes splat { 0% { transform: scale(.1) rotate(var(--rot)); opacity: 0; } 45% { transform: scale(1.18, .9) rotate(var(--rot)); opacity: .96; } 70% { transform: scale(.95, 1.04) rotate(var(--rot)); } 100% { transform: scale(1) rotate(var(--rot)); opacity: .92; } }
@keyframes splat-slide { from { transform: translate(-50%,-50%); } to { transform: translate(-50%, calc(-50% + var(--slide))); } }
@keyframes splat-drip { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes card-land { 0% { transform: translateY(60%) scale(.96); opacity: 0; } 45% { transform: translateY(-3%) scale(1.01, .98); opacity: 1; } 65% { transform: translateY(1%) scale(.995, 1.01); } 82% { transform: translateY(-.5%); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes slam { 0% { transform: translateX(-50%) rotate(2deg) scale(2.6); opacity: 0; } 38% { transform: translateX(-50%) rotate(2deg) scale(.86, .8); opacity: 1; } 56% { transform: translateX(-50%) rotate(2deg) scale(1.1, 1.14); } 74% { transform: translateX(-50%) rotate(2deg) scale(.97); } 88% { transform: translateX(-50%) rotate(2deg) scale(1.02); } 100% { transform: translateX(-50%) rotate(2deg) scale(1); opacity: 1; } }
@keyframes flush-burst { 0% { transform: translate(-50%,-50%) scale(.4); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; } }
@keyframes mode-flash { 0% { opacity: .5; } 100% { opacity: 0; } }
@keyframes shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,4px); } 50% { transform: translate(5px,-3px); } 75% { transform: translate(-3px,-4px); } }
/* centred by negative margins set with its size: a percentage translate inside a composited keyframe
   is resolved once, against the empty box the ring had when the animation started, and drew it off-centre */
@keyframes hole-ring { 0% { transform: scale(.96); opacity: .82; } 72%,100% { transform: scale(1.52); opacity: 0; } }
@keyframes ready-rock { 0%,18% { transform: rotate(var(--ready-angle)); } 68%,100% { transform: rotate(0deg); } }
@keyframes bonus-slam { from { transform: scale(1.55) rotate(2deg); opacity: 0; } to { transform: scale(1) rotate(-1deg); opacity: 1; } }
@keyframes logo-sweep { 0%,18% { transform: skewX(-17deg) translateX(0); opacity: 0; } 34%,66% { opacity: .72; } 82%,100% { transform: skewX(-17deg) translateX(720%); opacity: 0; } }
@keyframes settings-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settings-rise { from { transform: translateY(100%); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
@keyframes entrance-word { 0% { transform: translateX(-50%) scale(.65); opacity: 0; } 22%,68% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(1.08); opacity: 0; } }
@keyframes entrance-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-4px,2px); } 50% { transform: translate(4px,-2px); } 75% { transform: translate(-2px,-2px); } }
@keyframes golden-toast { 0% { transform: translateX(-50%) translateY(14px) scale(.92); opacity: 0; } 14%,76% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-8px) scale(.98); opacity: 0; } }
@keyframes journey-rise { from { transform: translateY(54px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes opener-logo-return { from { transform: translateY(-45vh) rotate(3deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes opener-play-return { from { transform: translate(-50%,35vh) scale(.92); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes opener-play-breathe { 0%,100% { transform: scale(.985); opacity: .75; } 50% { transform: scale(1.015); opacity: 1; } }
@keyframes opener-play-sweep { 0%,68% { transform: skewX(-18deg) translateX(-240%); opacity: 0; } 76% { opacity: .9; } 92%,100% { transform: skewX(-18deg) translateX(720%); opacity: 0; } }
@keyframes opener-splat-shake { 0%,100% { transform: translate(0,0); } 32% { transform: translate(-12px,7px); } 66% { transform: translate(10px,-5px); } }
.title-screen.opener-splat-shake { animation: opener-splat-shake 90ms linear 1; }
.shaking { animation: shake .38s linear 1; }

@media (orientation: landscape) {
  .level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .level-card { min-height: 58px; }
  .result-overlay { align-content: center; justify-content: end; background: none; padding: max(12px,var(--safe-top)) max(16px,env(safe-area-inset-right)) max(12px,var(--safe-bottom)) max(16px,env(safe-area-inset-left)); }
  .result-panel { width: min(48vw,600px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); margin-right: 1vw; padding: clamp(9px,1.8vh,14px) clamp(12px,1.8vw,18px); }
  .mode-slam { left: 23%; top: max(var(--safe-top),7%); width: 42%; font-size: clamp(32px,6.5vw,72px); }
  .result-title { font-size: clamp(28px,5.3vw,64px); }
  .lose-overlay .result-title { font-size: clamp(34px,7vw,78px); }
  .result-copy { margin-block: clamp(6px,1.4vh,12px); font-size: clamp(11px,1.8vh,14px); }
  .result-actions button { min-height: clamp(44px,7.4vh,56px); }
  .intro-lockup { width: min(70vw, 760px); font-size: min(10vw, 104px); }
  .ready-cue { top: 54%; min-height: 238px; padding: 14px 18px; }
  .ready-phone-stage { width: 92px; height: 92px; transform: scale(.82); }
}
@media (min-width: 600px) {
  .journey-levels .level-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .journey-hero { aspect-ratio: 1.8; }
}
@media (min-width: 600px) and (orientation: portrait) { .level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .journey-levels .level-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }