/* The alley: home page only. Account and legal pages keep site.css. See site/DESIGN.md. */

/* Colours of the scene are registered so a change of hour cross-fades. */
@property --sky-a { syntax: "<color>"; inherits: true; initial-value: #070b17; }
@property --sky-b { syntax: "<color>"; inherits: true; initial-value: #121b34; }
@property --sky-c { syntax: "<color>"; inherits: true; initial-value: #24305a; }
@property --far { syntax: "<color>"; inherits: true; initial-value: #121b33; }
@property --mid { syntax: "<color>"; inherits: true; initial-value: #0f1830; }
@property --mid2 { syntax: "<color>"; inherits: true; initial-value: #172242; }
@property --wall { syntax: "<color>"; inherits: true; initial-value: #1d2340; }
@property --wall2 { syntax: "<color>"; inherits: true; initial-value: #2a3052; }
@property --street { syntax: "<color>"; inherits: true; initial-value: #0b1020; }
@property --walk { syntax: "<color>"; inherits: true; initial-value: #1a2036; }
@property --glass { syntax: "<color>"; inherits: true; initial-value: #1a2a44; }
@property --leaf { syntax: "<color>"; inherits: true; initial-value: #2a5a3a; }
@property --leaf2 { syntax: "<color>"; inherits: true; initial-value: #1f4a30; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #0b1a14; }
@property --fg2 { syntax: "<color>"; inherits: true; initial-value: #12281d; }
@property --lit-o { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --lamp-o { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --star-o { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rain-o { syntax: "<number>"; inherits: true; initial-value: .55; }
@property --moon-o { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sun-o { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cloud-o { syntax: "<number>"; inherits: true; initial-value: .08; }
@property --bird-o { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --haze { syntax: "<color>"; inherits: true; initial-value: #25336a; }
@property --polec { syntax: "<color>"; inherits: true; initial-value: #241c28; }
@property --sun-dy { syntax: "<length>"; inherits: true; initial-value: 400px; }

:root {
  --ink: #0c1424; --deep: #141c30; --deep2: #1b2540; --window: #ffcf7a; --window2: #ffb15a; --lampc: #ffe4a8;
  --cream: #e8dccd; --coral: #ff8f6b; --text: #f6ecdd; --muted: #b7b2c2; --line: rgba(246, 236, 221, .14);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(16px, 3vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
html.lock { overflow: hidden; }
body { background: var(--ink); color: var(--text); font: 400 17px/1.55 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--window); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--window); color: #1a1208; padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- time of day ---------- */
.stage {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ink);
  transition: --sky-a 1.8s ease, --sky-b 1.8s ease, --sky-c 1.8s ease, --far 1.8s ease, --mid 1.8s ease, --mid2 1.8s ease, --wall 1.8s ease, --wall2 1.8s ease,
    --street 1.8s ease, --walk 1.8s ease, --glass 1.8s ease, --leaf 1.8s ease, --leaf2 1.8s ease, --fg 1.8s ease, --fg2 1.8s ease, --lit-o 1.8s ease, --lamp-o 1.8s ease,
    --star-o 1.8s ease, --rain-o 1.8s ease, --moon-o 1.8s ease, --sun-o 1.8s ease, --cloud-o 1.8s ease, --bird-o 1.8s ease, --sun-dy 1.8s ease, --haze 1.8s ease, --polec 1.8s ease, opacity 1.6s ease;
}
.stage[data-time="night"] { --sky-a: #070b17; --sky-b: #121b34; --sky-c: #24305a; --far: #121b33; --mid: #15223f; --mid2: #1d2c52; --wall: #1d2340; --wall2: #2a3052; --street: #0b1020; --walk: #1a2036; --glass: #1a2a44;
  --leaf: #2a5a3a; --leaf2: #1f4a30; --fg: #0b1a14; --fg2: #12281d; --lit-o: 1; --lamp-o: 1; --star-o: 1; --rain-o: .28; --moon-o: 1; --sun-o: 0; --cloud-o: .07; --bird-o: 0; --sun-dy: 420px; --metal: #2b3350; --wire: #0a0f1c; --bird: #0a0f1c; --door: #26203a; --frame: #0d1222; --bench: #3a2b25; --haze: #25336a; --polec: #241c28; }
.stage[data-time="dusk"] { --sky-a: #3a2c6a; --sky-b: #c0587a; --sky-c: #ffa56a; --far: #5a4478; --mid: #3f3158; --mid2: #52406e; --wall: #7b4a58; --wall2: #96606a; --street: #2a2440; --walk: #4a3a58; --glass: #6b5a82;
  --leaf: #3f7a4a; --leaf2: #2f6540; --fg: #1a1a26; --fg2: #261f30; --lit-o: .85; --lamp-o: .55; --star-o: .15; --rain-o: 0; --moon-o: .2; --sun-o: 1; --cloud-o: .5; --bird-o: .6; --sun-dy: 190px; --metal: #3a3350; --wire: #20182e; --bird: #20182e; --door: #4a3350; --frame: #3a2a40; --bench: #5a3d38; --haze: #c27c8c; --polec: #3a2a3a; }
.stage[data-time="day"] { --sky-a: #6fb0d6; --sky-b: #a9d4e6; --sky-c: #f7dfb8; --far: #8aa6bc; --mid: #6f8aa4; --mid2: #8aa3ba; --wall: #c98e6f; --wall2: #dba583; --street: #5c5a66; --walk: #8c8a94; --glass: #9cc5d8;
  --leaf: #4a9a55; --leaf2: #3a8545; --fg: #1f4a2a; --fg2: #2a6038; --lit-o: .12; --lamp-o: 0; --star-o: 0; --rain-o: 0; --moon-o: 0; --sun-o: 1; --cloud-o: .9; --bird-o: 1; --sun-dy: 0px; --metal: #4a4a58; --wire: #3a3a48; --bird: #2a2a38; --door: #6b4a3a; --frame: #5a4036; --bench: #7a5a44; --haze: #cfe4f2; --polec: #6b5545; }

#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scene .par { will-change: transform; }
.stage.pre { opacity: 0; }
.far { fill: var(--far); } .mid { fill: var(--mid); } .mid2 { fill: var(--mid2); } .wall { fill: var(--wall); } .wall2 { fill: var(--wall2); }
.street { fill: var(--street); } .walk { fill: var(--walk); } .kerb { fill: #000; opacity: .25; } .glass { fill: var(--glass); } .frame { fill: var(--frame); } .door { fill: var(--door); }
.metal, .pole { fill: var(--metal); } .pole { fill: var(--wire); } .step { fill: var(--wall2); } .bench rect { fill: var(--bench); }
.warm { opacity: var(--lit-o); } .inside { opacity: var(--lit-o); } .spill, .reflect .rw { opacity: var(--lit-o); } .reflect .rs { opacity: var(--lit-o); }
.lampglow { opacity: var(--lamp-o); } .reflect .rl { opacity: calc(var(--lamp-o) * .8); }
.bulb { fill: #fff3c8; opacity: var(--lamp-o); } .moths { opacity: var(--lamp-o); }
.awning { fill: var(--coral); } .awning-edge { fill: var(--coral); }
.puddle { fill: var(--sky-c); opacity: .35; } .puddle2 { fill: var(--sky-b); opacity: .3; }
.ripple { fill: none; stroke: #bcd3ff; stroke-width: 1.5; opacity: 0; }
.stars { opacity: var(--star-o); } .stars circle { fill: #fff; }
.orb.moon { opacity: var(--moon-o); } .orb.sun { opacity: var(--sun-o); transform: translateY(var(--sun-dy)); }
.cloud { fill: #fff; opacity: var(--cloud-o); } .birds { opacity: var(--bird-o); } .birds .b { fill: none; stroke: #2a2a38; stroke-width: 2.2; stroke-linecap: round; }
.bird { opacity: var(--bird-o); } .steam { fill: #fff; opacity: 0; }
.neon { font: 700 30px var(--display); fill: #ffd9cc; letter-spacing: 3px; } .glowtext { fill: #ff8f6b; }
.sign { opacity: calc(.45 + var(--lit-o) * .55); }
.rain { opacity: var(--rain-o); } .rain rect { will-change: transform; }
.win-on { fill: #ffcf7a; opacity: calc(var(--lit-o) * .8); } .win-off { fill: #000; opacity: .22; }
.zs .z { font: 700 22px var(--display); fill: #f6ecdd; opacity: 0; }
.cat { cursor: pointer; } .cat .rim { opacity: var(--lamp-o); } .cat:focus-visible { outline: none; } .cat:focus-visible .breathe { filter: drop-shadow(0 0 6px var(--coral)); }
.fg { pointer-events: none; }

/* ---------- scene motion (transform and opacity only) ---------- */
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.stars circle { animation: twinkle 3.6s ease-in-out infinite; }
.stars circle:nth-child(3n) { animation-duration: 5.2s; animation-delay: -1.2s; } .stars circle:nth-child(3n+1) { animation-duration: 4.4s; animation-delay: -2.7s; }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(120px); } }
.cloud { animation: drift 70s ease-in-out infinite alternate; } .cloud.c2 { animation-duration: 95s; animation-delay: -30s; } .cloud.c3 { animation-duration: 120s; animation-delay: -50s; }
@keyframes fly { from { transform: translate(-200px, 0); } to { transform: translate(1900px, -90px); } }
@keyframes flap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.birds .b { animation: fly 38s linear infinite; } .birds .b2 { animation-delay: -4s; animation-duration: 42s; } .birds .b3 { animation-delay: -9s; animation-duration: 40s; }
.birds .b1 { transform: translate(-200px, 140px); } .birds .b2 { transform: translate(-200px, 190px); } .birds .b3 { transform: translate(-200px, 90px); }
@keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: .96; } 50% { opacity: .84; } 53% { opacity: .98; } 78% { opacity: .93; } }
.flick { animation: flick 5.5s linear infinite; }
@keyframes beacon { 0%, 70%, 100% { opacity: .15; } 80% { opacity: 1; } }
.beacon { animation: beacon 2.6s ease-in-out infinite; }
@keyframes rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .22; } 100% { transform: translate(14px, -70px) scale(2.2); opacity: 0; } }
.steam { animation: rise 6s ease-out infinite; } .steam.s2 { animation-delay: -2s; } .steam.s3 { animation-delay: -4s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.045); } }
.breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
@keyframes zz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .85; } 100% { transform: translate(-14px, -34px); opacity: 0; } }
.zs .z { animation: zz 5s ease-out infinite; } .zs .z2 { animation-delay: 1.6s; } .zs .z3 { animation-delay: 3.2s; }
@keyframes sway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.4deg); } }
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; } .sway.s2 { animation-duration: 8.5s; animation-delay: -3s; } .sway.s3 { transform-origin: 100% 0; animation-duration: 9s; }
@keyframes rainfall { from { transform: translate(0, 0); } to { transform: translate(-34px, 160px); } }
.rain .ra { animation: rainfall .8s linear infinite; } .rain .rb { animation: rainfall .6s linear infinite; opacity: .7; }
@keyframes ripple { 0% { transform: scale(.3); opacity: 0; } 20% { opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.ripple { transform-box: fill-box; transform-origin: 50% 50%; } .stage[data-time="night"] .ripple { animation: ripple 2.8s ease-out infinite; } .stage[data-time="night"] .ripple.r2 { animation-delay: -1.4s; }
@keyframes shimmer { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.35); } }
.reflect .rl { transform-box: fill-box; transform-origin: 50% 0; animation: shimmer 3.4s ease-in-out infinite; }
@keyframes neon { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .5; } 96% { opacity: 1; } 98% { opacity: .65; } }
.sign .glowtext { animation: neon 7s linear infinite; }
@keyframes cat-wake { 0% { transform: scale(1); } 30% { transform: scale(1.1, .94); } 100% { transform: scale(1); } }
.cat.pet .breathe { animation: cat-wake .7s ease-out 1; }
.still #scene *, .still .stage * { animation: none !important; }
.still .stars circle { opacity: .8; } .still .steam, .still .zs .z, .still .ripple { opacity: 0; } .still .zs .z1 { opacity: .8; }
.still .birds .b1 { transform: translate(300px, 140px); } .still .birds .b2 { transform: translate(380px, 190px); } .still .birds .b3 { transform: translate(250px, 100px); }
.still .cloud { transform: none; }
@media (prefers-reduced-motion: reduce) { .gate-in > * { animation-duration: .3s; } }

.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 55% 45%, transparent 55%, rgba(4, 7, 16, .55) 100%), linear-gradient(to bottom, rgba(4, 7, 16, .35), transparent 22%, transparent 70%, rgba(4, 7, 16, .5)); }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scrim { position: fixed; inset: 0; z-index: 4; background: rgba(4, 7, 16, .18); opacity: 0; transition: opacity .3s ease; }
.scrim.on { opacity: 1; }

/* ---------- top bar ---------- */
.top { position: fixed; z-index: 6; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: var(--pad); pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font: 700 clamp(24px, 3vw, 34px)/1 var(--display); letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.logo svg { color: var(--cream); }
.tag { margin: 0; color: var(--text); opacity: .8; font-size: 15px; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.tools { margin-left: auto; display: flex; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12, 20, 36, .55); color: var(--text); font: 700 14px var(--body); cursor: pointer; backdrop-filter: blur(10px); transition: transform .2s var(--ease), background .2s, border-color .2s; }
.tool:hover { transform: translateY(-1px); background: rgba(27, 37, 64, .8); border-color: rgba(255, 207, 122, .5); }
.tool[aria-pressed="true"] { border-color: var(--window); color: var(--window); }

/* ---------- menu ---------- */
.menu { position: fixed; z-index: 5; left: var(--pad); bottom: var(--pad); width: min(340px, calc(100vw - 2 * var(--pad))); padding: 16px 10px 12px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 28, 48, .72), rgba(12, 20, 36, .82)); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu.in { opacity: 1; transform: none; pointer-events: auto; }
.menu.in.tucked { opacity: 0; transform: translateY(30px); pointer-events: none; }
.menu ul { list-style: none; margin: 0; padding: 0; position: relative; }
.menu-title { margin: 0 12px 8px; font: 500 15px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--window); }
.menu li { opacity: 0; transform: translateX(-14px); }
.menu.in li { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.menu.in li:nth-child(1) { transition-delay: .12s; } .menu.in li:nth-child(2) { transition-delay: .18s; } .menu.in li:nth-child(3) { transition-delay: .24s; }
.menu.in li:nth-child(4) { transition-delay: .3s; } .menu.in li:nth-child(5) { transition-delay: .36s; } .menu.in li:nth-child(6) { transition-delay: .42s; }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px 0 34px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 500 21px/1 var(--display); text-align: left; cursor: pointer; transition: background .2s, color .2s, transform .25s var(--ease); }
.menu button .k { font: 700 11px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; }
.menu button .lab { flex: 1; }
.menu button .pr { font: 700 15px var(--mono); color: #1a1208; background: var(--window); border-radius: 999px; padding: 4px 10px; }
.menu button.primary .lab { color: var(--window); }
.menu button:hover, .menu button.sel { background: rgba(255, 207, 122, .1); color: var(--lampc); }
.menu button:active { transform: scale(.98); }
.menu button:focus-visible { outline-offset: -2px; }
.cursor { position: absolute; left: 20px; top: 0; z-index: 1; color: var(--coral); pointer-events: none; opacity: 0; transition: transform .3s var(--ease), opacity .2s; }
.menu .hint { margin: 8px 14px 0; font-size: 12.5px; color: var(--muted); }


/* ---------- the cat speaks ---------- */
.bubble { position: fixed; z-index: 6; left: 0; top: 0; max-width: 270px; padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: var(--cream); color: #20170f; font: 700 16px/1.35 var(--body); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 0 100%; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.bubble.on { opacity: 1; transform: none; }
.bubble p { margin: 0; min-height: 1.35em; }

/* ---------- panels ---------- */
.panel { position: fixed; z-index: 7; top: var(--pad); right: var(--pad); bottom: var(--pad); width: min(560px, calc(100vw - 2 * var(--pad))); padding: 30px clamp(20px, 3vw, 38px) 34px; overflow: auto; border-radius: 26px; background: linear-gradient(180deg, rgba(20, 28, 48, .93), rgba(12, 20, 36, .95)); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); backdrop-filter: blur(16px); overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateX(40px); transition: transform .38s var(--ease), opacity .28s ease, visibility 0s linear .38s; }
.panel.wide { width: min(860px, calc(100vw - 2 * var(--pad))); }
.panel.open { visibility: visible; opacity: 1; transform: none; transition: transform .38s var(--ease), opacity .28s ease; }
.panel > * { opacity: 0; transform: translateY(10px); }
.panel.open > * { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.panel.open > :nth-child(2) { transition-delay: .06s; } .panel.open > :nth-child(3) { transition-delay: .1s; } .panel.open > :nth-child(4) { transition-delay: .14s; } .panel.open > :nth-child(5) { transition-delay: .18s; } .panel.open > :nth-child(n+6) { transition-delay: .22s; }
.panel > .x { opacity: 1; transform: none; }
.x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font-size: 16px; cursor: pointer; transition: transform .25s var(--ease), background .2s; }
.x:hover { background: rgba(255, 143, 107, .2); transform: rotate(90deg); }
.eyebrow { margin: 0 0 6px; font: 700 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.panel h2, .sheet h2 { margin: 0 44px 10px 0; font: 700 clamp(28px, 3.4vw, 38px)/1.1 var(--display); color: var(--cream); }
.sub { margin: 0 0 18px; color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); margin: 12px 0 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); font: 700 16px var(--body); cursor: pointer; text-decoration: none; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 207, 122, .55); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: linear-gradient(180deg, #ffd98a, #ffb15a); color: #2a1a08; border-color: transparent; box-shadow: 0 8px 26px rgba(255, 177, 90, .3); }
.btn.primary:hover { box-shadow: 0 12px 34px rgba(255, 177, 90, .5); }
.btn.ghost { background: transparent; } .btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; } .btn.wide { width: 100%; } .btn:disabled { opacity: .6; cursor: wait; }
.link { background: none; border: 0; padding: 0; color: var(--window); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font: 700 12px var(--mono); color: var(--window); }

/* game */
.game-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 700 13px var(--mono); color: var(--muted); }
.code { margin: 0 0 14px; padding: 16px 18px; border-radius: 14px; background: #080e1c; border: 1px solid var(--line); font: 400 15.5px/1.6 var(--mono); color: #d8e6ff; overflow: auto; white-space: pre; }
.ask { margin: 0 0 10px; font-weight: 700; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opts .btn { font-family: var(--mono); min-width: 84px; }
.opts .btn.right { background: rgba(70, 200, 120, .22); border-color: #46c878; animation: pop .4s var(--ease); }
.opts .btn.wrong { background: rgba(255, 143, 107, .15); border-color: var(--coral); animation: nudge .4s var(--ease); }
@keyframes pop { 50% { transform: scale(1.07); } } @keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tutor { margin: 14px 0 0; min-height: 3em; padding: 0 0 0 14px; border-left: 3px solid var(--window); color: var(--lampc); }
.tutor:empty { border-color: transparent; }
.game-end { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 207, 122, .08); }
.game-end p { margin: 0 0 12px; }

/* how */
.cards { display: grid; gap: 12px; }
.card { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.card h3 { margin: 0 0 6px; font: 700 20px var(--display); color: var(--cream); } .card p { margin: 0; color: var(--text); opacity: .9; font-size: 16px; }

/* app */
.shot { margin: 0 0 12px; } .shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); } .shot figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; }

/* price */
.plan { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 207, 122, .3); }
.plan-top { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.plan h3 { margin: 0; font: 700 26px var(--display); color: var(--cream); }
.amount { text-align: right; } .amount b { display: block; font: 700 38px/1 var(--display); color: var(--window); } .amount span { font-size: 14px; color: var(--muted); }
.ticks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 26px; } .ticks li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 10px; height: 6px; border-left: 2.5px solid var(--window); border-bottom: 2.5px solid var(--window); transform: rotate(-45deg); }
.faq { margin-top: 22px; } .faq h3 { margin: 0 0 8px; font: 700 20px var(--display); color: var(--cream); }
details { border-top: 1px solid var(--line); padding: 10px 0; } details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; } details p { margin: 8px 0 0; color: var(--muted); }

/* settings */
.seg { margin: 0 0 16px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; } .seg legend { padding: 0; margin-bottom: 8px; font: 700 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.seg button { min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 700 15px var(--body); cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.seg button:hover { transform: translateY(-1px); } .seg button[aria-pressed="true"] { background: rgba(255, 207, 122, .14); border-color: var(--window); color: var(--lampc); }
.legal { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 8px; } .legal a { font-size: 15px; }

/* gate */
.gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; text-align: center; padding: 24px; background: radial-gradient(70% 70% at 50% 50%, rgba(6, 10, 22, .55), rgba(6, 10, 22, .86)); transition: opacity .9s ease, visibility 0s linear .9s; }
.gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-in > * { opacity: 0; transform: translateY(16px); animation: gate-in .9s var(--ease) forwards; }
.gate-in > :nth-child(1) { animation-delay: .5s; } .gate-in > :nth-child(2) { animation-delay: .75s; } .gate-in > :nth-child(3) { animation-delay: 1.05s; } .gate-in > :nth-child(4) { animation-delay: 1.3s; } .gate-in > :nth-child(5) { animation-delay: 1.5s; }
@keyframes gate-in { to { opacity: 1; transform: none; } }
.gate-kicker { margin: 0 0 8px; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--window); }
.gate h1 { margin: 0; font: 700 clamp(56px, 11vw, 132px)/.95 var(--display); color: var(--cream); letter-spacing: -.01em; text-shadow: 0 6px 50px rgba(255, 177, 90, .35); }
.gate-line { margin: 14px 0 28px; font: 500 clamp(18px, 2.2vw, 26px) var(--display); color: var(--text); opacity: .9; }
.gate-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gate-fine { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.still .gate-in > *, .gate-in.nomo > * { animation-duration: .01s; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .gate-in > * { animation-duration: .01s; animation-delay: 0s; } }

/* join dialog */
dialog { border: 0; padding: 0; background: transparent; color: var(--text); max-width: 100vw; }
dialog::backdrop { background: rgba(4, 7, 16, .7); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg .35s var(--ease); } @keyframes dlg { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.sheet { position: relative; width: min(480px, calc(100vw - 24px)); padding: 28px; border-radius: 24px; background: linear-gradient(180deg, #1b2540, #121a30); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.oauth { display: grid; gap: 10px; } .oauth .g, .oauth .d { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 14px var(--body); background: #fff; color: #333; } .oauth .d { background: #5865f2; color: #fff; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; color: var(--muted); font-size: 14px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.row { display: flex; gap: 8px; } .row[hidden] { display: none; }
input[type=tel], input[type=text], input[type=email] { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b1222; color: var(--text); font: 16px var(--body); }
.msg { min-height: 1.4em; margin: 12px 0 0; color: var(--lampc); } .msg.err { color: #ff9c8a; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: var(--cream); color: #20170f; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .tag { display: none; } .tool span { display: none; } .tool { padding: 0 11px; }
  .menu { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 12px 8px 8px; }
  .menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .menu li:first-child { grid-column: 1 / -1; }
  .menu button { font-size: 17px; min-height: 44px; padding: 0 10px 0 28px; } .menu button .k { display: none; } .menu button .pr { font-size: 13px; padding: 3px 8px; } .menu .hint { display: none; } .cursor { display: none; }
  .menu-title { font-size: 13px; margin-bottom: 4px; }
  .panel, .panel.wide { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 88svh; border-radius: 26px 26px 0 0; transform: translateY(100%); padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
  .panel.open { transform: none; }
  .bubble { max-width: 220px; font-size: 15px; }
  .scrim { background: rgba(4, 7, 16, .65); }
  .plan-top { flex-direction: column; align-items: start; } .amount { text-align: left; }
  .row { flex-wrap: wrap; } .row .btn { width: 100%; }
}
@media (max-height: 560px) and (min-width: 761px) { .menu .hint { display: none; } .menu button { min-height: 38px; font-size: 18px; } }

/* ---------- the WebGL sky, the story, and the extras (second pass) ---------- */
.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage.gl .skyLayer { display: none; }
.stage { position: fixed; }
.ev { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flapb { fill: none; transform-box: fill-box; transform-origin: 50% 100%; animation: flapb .7s ease-in-out infinite; }
@keyframes flapb { 50% { transform: scaleY(.3); } }
@keyframes lampglitch { 0%, 100% { opacity: 1; } 18% { opacity: .35; } 36% { opacity: .9; } 58% { opacity: .25; } 80% { opacity: .85; } }
.lampglow.glitch { animation: lampglitch 1.6s linear 1 !important; }
.still .ev, .still .flapb { animation: none !important; }

.journey { position: relative; z-index: 3; }
.chap { min-height: 100svh; display: flex; align-items: center; padding: 8svh var(--pad); pointer-events: none; }
.chap.hero { align-items: flex-end; justify-content: center; padding-bottom: 6svh; }
.chap.right { justify-content: flex-end; padding-right: clamp(24px, 9vw, 150px); }
.ccard { pointer-events: auto; width: min(500px, 100%); padding: 26px 28px 28px; border-radius: 24px; background: linear-gradient(180deg, rgba(20, 28, 48, .72), rgba(12, 20, 36, .8)); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ccard.in { opacity: 1; transform: none; }
.ccard h2 { margin: 0 0 10px; font: 700 clamp(30px, 3.6vw, 44px)/1.08 var(--display); color: var(--cream); }
.ccard p { margin: 0 0 18px; }
.ccard p.eyebrow { margin-bottom: 8px; } .ccard .fine { margin: 16px 0 0; } .ccard b { color: var(--window); font: 700 1.2em var(--display); }
.chap.last { padding-bottom: 14svh; }
.cue { margin: 0; font: 700 13px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text); opacity: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); transition: opacity .6s ease 1.8s; }
.cue i { display: block; width: 14px; height: 14px; margin: 8px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px) rotate(45deg); } }
.entered .cue { opacity: .8; }
.scrolled .cue { opacity: 0; transition-delay: 0s; }
.still .cue i { animation: none; }
.menu { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.scrolled .menu.in { opacity: 0; transform: translateY(30px); pointer-events: none; }
.vol { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; width: 100%; font-weight: 700; font-size: 15px; }
.vol input { flex: 1; accent-color: var(--window); }
@media (max-width: 760px) {
  .chap.right { justify-content: center; align-items: flex-end; padding: 8svh 14px 10svh; }
  .ccard { padding: 22px; }
  .scrolled .menu.in { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cue i { animation: none !important; } .ccard { transition-duration: .2s; } html { scroll-behavior: auto; } }

.top::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 12, 26, .55), transparent); }

/* ---------- depth and detail: pole, wires, crows, fairy lights, creepers, the cat ---------- */
.pwood { fill: var(--polec); }
.stem { fill: none; stroke: var(--leaf2); stroke-width: 3; stroke-linecap: round; }
.stem.hang { stroke-width: 2.2; }
.vines .lf { fill: var(--leaf); } .vines .lf.b { fill: var(--leaf2); } .vines .fl { fill: #ffd2dc; }
.vsway { transform-box: fill-box; transform-origin: 50% 0; animation: vsway 8s ease-in-out infinite; } .vsway.s2 { animation-duration: 6s; animation-delay: -2s; }
@keyframes vsway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(1deg); } }
.fairy { opacity: calc(.15 + var(--lit-o) * .85); } .fairy .strand { fill: none; stroke: #120d18; stroke-width: 1.6; opacity: .75; }
.fairy .bl { animation: twk 3.4s ease-in-out infinite; } .fairy .bl.t2 { animation-duration: 4.4s; animation-delay: -1.1s; } .fairy .bl.t3 { animation-duration: 2.7s; animation-delay: -2s; }
@keyframes twk { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.crows { color: var(--bird); } .crows use { fill: var(--bird); } .crows .cr { transform-box: fill-box; transform-origin: 50% 100%; animation: crowbob 5s ease-in-out infinite; }
@keyframes crowbob { 0%, 80%, 100% { transform: rotate(0); } 86% { transform: rotate(-5deg) translateY(-1px); } 93% { transform: rotate(3deg); } }
.led { animation: ledb 2.2s ease-in-out infinite; } @keyframes ledb { 50% { opacity: .25; } }
.drip { animation: drip 2.4s ease-in infinite; } @keyframes drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(120px); opacity: 0; } }
.rain .rc { animation: rainfall .42s linear infinite; }
.bokeh-dot { animation: twk 4.5s ease-in-out infinite; }

/* the cat: breathing, a swishing tail, twitching ears, and every so often it wakes, looks around, and dozes off again */
.tail { transform-box: fill-box; transform-origin: 0% 60%; animation: tailwag 3.8s ease-in-out infinite; }
@keyframes tailwag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
.cat .head { transform-box: fill-box; transform-origin: 60% 100%; animation: headcycle 26s ease-in-out infinite; }
@keyframes headcycle { 0%, 55% { transform: none; } 58% { transform: translateY(-8px) rotate(-6deg); } 63% { transform: translateY(-9px) rotate(6deg); } 68% { transform: translateY(-9px) rotate(-10deg); } 73% { transform: translateY(-7px) rotate(2deg); } 78% { transform: translateY(-3px) rotate(-3deg); } 83%, 100% { transform: none; } }
.cat .eyes-open { opacity: 0; animation: eyeo 26s ease-in-out infinite; } .cat .eyes-closed { animation: eyec 26s ease-in-out infinite; }
@keyframes eyeo { 0%, 56% { opacity: 0; } 58%, 79% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes eyec { 0%, 56% { opacity: 1; } 58%, 79% { opacity: 0; } 82%, 100% { opacity: 1; } }
.cat .ear { transform-box: fill-box; transform-origin: 50% 100%; animation: eartw 6s ease-in-out infinite; } .cat .ear:nth-of-type(2) { animation-delay: -2.5s; }
@keyframes eartw { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-14deg); } 95% { transform: rotate(5deg); } }
.cat.stir .head { animation: headfast 5s ease-in-out 1 !important; } .cat.stir .eyes-open { animation: eyeofast 5s ease-in-out 1 !important; } .cat.stir .eyes-closed { animation: eyecfast 5s ease-in-out 1 !important; }
@keyframes headfast { 0% { transform: none; } 12% { transform: translateY(-9px) rotate(-6deg); } 30% { transform: translateY(-9px) rotate(7deg); } 50% { transform: translateY(-8px) rotate(-9deg); } 75% { transform: translateY(-4px) rotate(0); } 100% { transform: none; } }
@keyframes eyeofast { 0%, 8% { opacity: 0; } 12%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes eyecfast { 0%, 8% { opacity: 1; } 12%, 78% { opacity: 0; } 90%, 100% { opacity: 1; } }
.cat.stir .tail { animation: tailfast 5s ease-in-out 1 !important; } @keyframes tailfast { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-22deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-20deg); } 80% { transform: rotate(4deg); } }

.neon.ramen { font-size: 26px; letter-spacing: 6px; fill: #ffd2c4; } .neon.vert { font-size: 17px; letter-spacing: 0; }
.lant { animation: lantg 4.6s ease-in-out infinite; transform-origin: center; } @keyframes lantg { 50% { opacity: .78; } }
.neon.ramen { fill: #ff9a86; } .neon.ramen.glowtext { fill: #ff3b3b; } .neon.vert { fill: #ffb199; }