:root{color-scheme:dark;--ink: #f3efe6;--muted: #c8c0b4;--paper: rgba(16, 18, 22, .72);--line: rgba(243, 239, 230, .32);--warm: #f0c27a;--btn: 60px;--gap: 16px;--font: "Segoe UI", sans-serif;--book: "PT Serif", Georgia, serif;--serif: "Cormorant Garamond", "PT Serif", Georgia, "Times New Roman", serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:#12161c;color:var(--ink);font-family:var(--font)}#app{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#street{display:block;width:100%;height:100%;touch-action:none}.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(var(--gap),env(safe-area-inset-top)) var(--gap) 0}.when{margin:0;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.6)}.tools{display:flex;gap:10px}#mute .off,#mute.muted .on{display:none}#mute.muted .off{display:block}.deal .howl,.deal.howl .gate{display:none}.deal.howl .howl{display:block}.anxiety{--p: 0;position:absolute;top:calc(max(var(--gap),env(safe-area-inset-top)) + 40px);left:50%;transform:translate(-50%);width:min(720px,calc(100% - 2 * var(--gap)));height:72px;pointer-events:none;z-index:3}.anxiety[hidden]{display:none}.anxiety-track{position:relative;height:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(243,239,230,calc(.22 + var(--p) * .4));background:linear-gradient(180deg,#0e121ab8,#0e121ae0),repeating-linear-gradient(-18deg,rgba(220,228,240,.1) 0 4px,transparent 4px 12px);box-shadow:0 0 calc(10px + var(--p) * 28px) rgba(180,40,30,calc(var(--p) * .55)),inset 0 0 50px rgba(140,160,190,calc(.1 + var(--p) * .25))}.anxiety-fill{position:absolute;inset:0;transform-origin:right center;transform:scaleX(var(--p));background:linear-gradient(90deg,#becde140,#ebf0f8d9 50%,#fffffffa),radial-gradient(circle at 85% 40%,rgba(255,255,255,.7),transparent 42%);opacity:calc(.55 + var(--p) * .45)}.anxiety-veil{position:absolute;inset:0;background:radial-gradient(ellipse 50% 130% at 50% 50%,transparent 0 22%,rgba(175,190,210,calc(var(--p) * .65)) 65%,rgba(110,125,150,calc(var(--p) * .9)) 100%)}.anxiety-man{position:absolute;left:calc(10% + (1 - var(--p)) * 64%);bottom:8px;width:28px;height:50px;opacity:calc(1 - var(--p) * .95);filter:blur(calc(var(--p) * 4px));background:radial-gradient(ellipse 55% 22% at 50% 12%,#f0ebe0 0 70%,transparent 72%),radial-gradient(ellipse 70% 55% at 50% 48%,#d4cdc0 0 68%,transparent 70%),linear-gradient(180deg,transparent 58%,#9a9488 58% 100%);clip-path:polygon(35% 8%,65% 8%,72% 22%,68% 38%,85% 55%,78% 58%,62% 42%,62% 70%,75% 100%,55% 100%,50% 78%,45% 100%,25% 100%,38% 70%,38% 42%,22% 58%,15% 55%,32% 38%,28% 22%);transition:left .08s linear,opacity .08s linear;z-index:1}.anxiety.hot .anxiety-track{animation:anxiety-pulse .65s ease-in-out infinite}@keyframes anxiety-pulse{0%,to{box-shadow:0 0 12px #b4281e66,inset 0 0 40px #8ca0be40}50%{box-shadow:0 0 34px #d23728cc,inset 0 0 55px #aab9d266}}.btn{display:grid;place-items:center;width:var(--btn);height:var(--btn);padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);backdrop-filter:blur(6px);touch-action:none;cursor:pointer}.btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.btn.small{--btn: 48px}.btn.small svg{width:24px;height:24px}.btn[hidden]{display:none}.btn.down,.btn:active{background:var(--ink);color:#1a1612}.btn.deal{display:flex;align-items:center;gap:8px;width:auto;padding:0 14px 0 12px;border-radius:calc(var(--btn) / 2);border-color:var(--warm);color:var(--warm);white-space:nowrap}.btn.deal[hidden]{display:none}.deal-label{font-size:16px;font-weight:600}.deal-key{font:12px var(--font);padding:1px 5px;border:1px solid currentColor;border-radius:4px;opacity:.7}@media(pointer:coarse){.deal-key{display:none}}.place{position:absolute;top:calc(max(var(--gap),env(safe-area-inset-top)) + 38px);left:var(--gap);margin:0;font:italic 20px Georgia,serif;color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:0;transform:translateY(-4px);transition:opacity .5s,transform .5s;pointer-events:none;z-index:2}.place.on{opacity:1;transform:none}.hint{position:absolute;left:50%;bottom:max(calc(var(--gap) + 6px),env(safe-area-inset-bottom));transform:translate(-50%);width:min(560px,calc(100% - 2 * var(--gap) - 340px));min-width:220px;margin:0;padding:9px 14px;background:var(--paper);border:1px solid var(--warm);border-radius:12px;color:var(--ink);font-size:15px;line-height:1.35;text-align:center;pointer-events:none;z-index:3}.hint[hidden]{display:none}.btn.cue{border-color:var(--warm);color:var(--warm);animation:cue 1s ease-in-out infinite}@keyframes cue{0%,to{box-shadow:0 0 #f0c27a8c}50%{box-shadow:0 0 0 10px #f0c27a00}}.slip,.book{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(6px)}.slip{position:absolute;top:calc(max(var(--gap),env(safe-area-inset-top)) + 60px);left:50%;transform:translate(-50%);width:min(520px,calc(100% - 2 * var(--gap)));padding:10px 14px;line-height:1.4;text-align:center;pointer-events:none;z-index:2}#app:has(.anxiety:not([hidden])) .slip{top:calc(max(var(--gap),env(safe-area-inset-top)) + 128px)}.slip b{display:block;color:var(--warm);font-weight:600}.slip.speech{font-style:italic}.slip.speech b{font-style:normal}.book{position:absolute;top:calc(max(var(--gap),env(safe-area-inset-top)) + 60px);right:var(--gap);width:min(300px,calc(100% - 2 * var(--gap)));max-height:60%;overflow:auto;padding:12px 14px;z-index:2}.book-title{margin:0 0 8px;color:var(--muted);font-size:13px}#notes{margin:0;padding-left:18px}#notes li{margin:0 0 8px;line-height:1.4}.pad{position:absolute;bottom:max(var(--gap),env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:12px}.pad.right{--stick: 128px;right:max(calc(var(--gap) + 18px),env(safe-area-inset-right));bottom:max(calc(var(--gap) + 18px),env(safe-area-inset-bottom))}.pad.right .deal{position:absolute;right:0;bottom:calc(var(--stick) + 12px)}.stick{position:relative;width:var(--stick);height:var(--stick);border-radius:50%;touch-action:none;cursor:pointer;z-index:4}.stick-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(243,239,230,.06),transparent 55%),var(--paper);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px #00000026}.stick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:1px solid var(--line);background:#f3efe638;box-shadow:0 2px 8px #00000059;will-change:transform}.stick.down .stick-knob{background:#f3efe661}.stick.cue .stick-ring{border-color:var(--warm);animation:cue 1s ease-in-out infinite}@media(max-height:420px){.pad.right{--stick: 108px}.stick-knob{width:42px;height:42px;margin:-21px 0 0 -21px}}.slip[hidden],.book[hidden],.anxiety[hidden]{display:none}#app:not([data-mode=game]) .hud,#app:not([data-overlay=""]) .hud{display:none!important}#street{transition:filter .6s ease}#app[data-overlay=lost] #street,#app[data-overlay=pause] #street{filter:grayscale(.55) brightness(.55) blur(2px)}.screen{position:absolute;inset:0;z-index:10;display:flex;overflow:hidden;animation:screen-in .6s ease both}.screen[hidden]{display:none}@keyframes screen-in{0%{opacity:0}to{opacity:1}}.screen.leaving{animation:screen-out .45s ease both;pointer-events:none}@keyframes screen-out{to{opacity:0}}.art{position:absolute;inset:-3%;background:var(--art) center / cover no-repeat #1a1b1f;animation:drift 38s ease-in-out infinite alternate}.art.soft{filter:blur(6px) brightness(.45) saturate(.8);inset:-6%}.art.sketch{filter:sepia(.35) brightness(.92)}@keyframes drift{0%{transform:scale(1) translate(0)}to{transform:scale(1.07) translate(-1.5%,-1%)}}@media(prefers-reduced-motion:reduce){.art,.snow:before,.snow:after{animation:none!important}}.kicker{margin:0 0 6px;font:600 13px var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--warm)}.rule{position:relative;width:180px;height:1px;margin:14px 0 18px;background:linear-gradient(90deg,var(--warm),rgba(240,194,122,0))}.rule span{position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--warm);transform:rotate(45deg)}.menu-item{display:block;width:100%;min-height:46px;padding:10px 20px;border:1px solid rgba(243,239,230,.28);border-radius:4px;background:#0e0e106b;color:var(--ink);font:600 19px var(--serif);letter-spacing:.02em;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s}.menu-item:hover,.menu-item:focus-visible{border-color:var(--warm);background:#f0c27a1f;transform:translate(4px);outline:none}.menu-item.primary{border-color:var(--warm);background:linear-gradient(90deg,#f0c27aeb,#d6a058eb);color:#22180c}.menu-item.primary:hover,.menu-item.primary:focus-visible{background:linear-gradient(90deg,#f6cf90,#e2ae68);color:#1a1209}.menu-item.ghost{background:transparent;border-color:transparent;color:var(--muted)}.menu-item.ghost:hover,.menu-item.ghost:focus-visible{color:var(--ink);border-color:var(--line)}.menu-item small{display:block;font:13px var(--font);opacity:.75;letter-spacing:0}.title-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0ee0,#0a0a0e8c 38%,#0a0a0e00 70%),linear-gradient(0deg,#0a0a0eb3,#0a0a0e00 30%);pointer-events:none}.snow{position:absolute;inset:0;pointer-events:none;z-index:1}.snow:before,.snow:after{content:"";position:absolute;inset:-100% 0 0;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 140px 80px,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 90px 160px,#fff,transparent),radial-gradient(2.5px 2.5px at 210px 220px,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 260px 40px,#fff,transparent);background-size:300px 260px;opacity:.55;animation:snowfall 18s linear infinite}.snow:after{background-size:190px 170px;opacity:.35;filter:blur(1px);animation-duration:11s}@keyframes snowfall{to{transform:translate(-60px,50%)}}.title-panel{position:relative;z-index:2;align-self:center;width:min(440px,100%);margin-left:max(6vw,var(--gap),env(safe-area-inset-left));padding:var(--gap) 0}.title-panel>*{animation:rise .8s ease both}.title-panel>:nth-child(2){animation-delay:.12s}.title-panel>:nth-child(3){animation-delay:.24s}.title-panel>:nth-child(4){animation-delay:.36s}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.game-title{margin:0;font:700 clamp(46px,8.5vw,92px) / .92 var(--serif);color:#f7f1e4;text-shadow:0 3px 24px rgba(0,0,0,.55)}.game-title span{display:block;margin-top:6px;padding-left:.6em;font-size:.56em;font-style:italic;font-weight:500;color:var(--warm)}.title-menu{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}.title-menu .menu-item[hidden]{display:none}.title-foot{position:absolute;z-index:2;right:max(var(--gap),env(safe-area-inset-right));bottom:max(var(--gap),env(safe-area-inset-bottom));margin:0;max-width:420px;font:italic 14px var(--book);color:#f3efe6bf;text-align:right;text-shadow:0 1px 4px rgba(0,0,0,.8)}.chapters-screen{flex-direction:column}.screen-head{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:max(var(--gap),env(safe-area-inset-top)) max(4vw,var(--gap)) 10px}.screen-head h2{margin:0;font:700 36px / 1 var(--serif)}.screen-sub{margin:4px 0 0;color:var(--muted);font-size:14px}.back{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:50%;background:#0e0e1080;color:var(--ink);cursor:pointer}.back:hover,.back:focus-visible{border-color:var(--warm);color:var(--warm);outline:none}.back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chapter-scroll{position:relative;z-index:1;flex:1;overflow-y:auto;padding:0 max(4vw,var(--gap)) max(28px,env(safe-area-inset-bottom))}.chapter-scroll .section-head{margin-top:10px}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-content:start;gap:12px;margin:0 0 18px;padding:0;list-style:none}.chapter-grid.ready{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:18px}.chapter-grid.ready .card-title{font-size:30px}.chapter-grid.ready .card-when{font-size:15px}.chapter-grid.ready .card-num{font-size:36px}.chapter-grid.ready .card-body{margin-top:-40px;padding:0 18px 18px}.chapter-grid.soon .card-art{aspect-ratio:2 / 1;background-size:260%}.chapter-grid.soon .card-title{font-size:18px}.chapter-grid.soon .card-num{font-size:20px}.chapter-grid li{animation:rise .5s ease both}.chapter-card{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:0;overflow:hidden;border:1px solid rgba(243,239,230,.18);border-radius:6px;background:#141418d1;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}.chapter-card:hover,.chapter-card:focus-visible{transform:translateY(-4px);border-color:var(--warm);box-shadow:0 12px 30px #00000073;outline:none}.card-art{position:relative;aspect-ratio:16 / 9;background:var(--art) center / cover no-repeat #2a2722;transition:transform .6s ease}.chapter-card:hover .card-art{transform:scale(1.05)}.card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#141418f2,#14141800 55%)}.card-num{position:absolute;left:12px;top:10px;z-index:1;font:700 26px var(--serif);color:#f7f1e4;text-shadow:0 2px 8px rgba(0,0,0,.7)}.card-badge{position:absolute;right:10px;top:10px;z-index:1;padding:3px 9px;border-radius:999px;background:#0e0e10b3;border:1px solid var(--line);font-size:12px;letter-spacing:.04em}.card-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding:0 14px 14px;margin-top:-26px}.card-title{font:700 21px / 1.1 var(--serif)}.card-when{font-size:13px;color:var(--muted)}.chapter-card.cleared .card-badge{border-color:var(--warm);color:var(--warm)}.chapter-card.open .card-badge{background:var(--warm);border-color:var(--warm);color:#22180c}.chapter-card.soon .card-art{filter:sepia(.6) grayscale(.3) brightness(.55)}.chapter-card.soon .card-badge{opacity:.7}.chapter-card.soon{background:#14141899}.chapter-card.soon .card-title{color:#d8d0c2}.chapter-card.locked{cursor:default}.chapter-card.locked .card-art{filter:grayscale(.9) brightness(.45)}.chapter-card.locked:hover{transform:none;border-color:#f3efe62e;box-shadow:none}.chapter-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0eed,#0a0a0ecc 34%,#0a0a0e26 66%,#0a0a0e00);pointer-events:none}.chapter-panel{position:relative;z-index:2;align-self:center;width:min(520px,100%);max-height:100%;margin-left:max(5vw,env(safe-area-inset-left));padding:max(var(--gap),env(safe-area-inset-top)) var(--gap) max(var(--gap),env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:thin}.chapter-panel>*{animation:rise .7s ease both}.chapter-panel>:nth-child(2){animation-delay:.1s}.chapter-panel>:nth-child(3){animation-delay:.18s}.chapter-panel>:nth-child(n+4){animation-delay:.28s}.chapter-panel h2,.modal-card h2{margin:0;font:700 clamp(32px,5vw,50px) / 1 var(--serif);color:#f7f1e4}.chapter-when{margin:8px 0 0;font:italic 17px var(--serif);color:var(--muted)}.chapter-text p,p.chapter-text{margin:0 0 12px;font:15px / 1.6 var(--book);color:#e9e2d4}.chapter-quote{margin:0 0 18px;padding-left:16px;border-left:2px solid var(--warm);font:italic 16px / 1.55 var(--book);color:#efe7d8}.section-head{margin:18px 0 8px;font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.intro-controls{display:grid;gap:8px;margin:0 0 4px;padding:0;list-style:none}.intro-controls li{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:1.4;color:#ddd5c7}.intro-controls .keys{display:flex;gap:4px;flex:none;min-width:92px}kbd.key{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border:1px solid rgba(243,239,230,.4);border-bottom-width:2px;border-radius:4px;font:600 12px var(--font);color:var(--ink);background:#f3efe60f}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.chips li{padding:4px 10px;border:1px solid rgba(240,194,122,.45);border-radius:999px;font:italic 13px var(--book);color:#f1e4c8;background:#f0c27a14;animation:rise .4s ease both}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.actions .menu-item{width:auto;min-width:150px;text-align:center}.actions .menu-item:hover,.actions .menu-item:focus-visible{transform:translateY(-2px)}.modal{align-items:center;justify-content:center;background:#08080a59}.modal-card{width:min(460px,calc(100% - 2 * var(--gap)));max-height:calc(100% - 2 * var(--gap));overflow-y:auto;padding:26px 28px;border:1px solid rgba(240,194,122,.35);border-radius:6px;background:linear-gradient(180deg,#1e1b17f5,#121110f5);box-shadow:0 24px 60px #0000008c;animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}.modal-card h2{font-size:clamp(28px,4.5vw,38px)}#lost .kicker{color:#e58a6f}#lost .rule{background:linear-gradient(90deg,#e58a6f,#e58a6f00)}#lost .rule span{background:#e58a6f}@keyframes pop{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}.curtain{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0b0b0d;opacity:0;pointer-events:none;transition:opacity .42s ease}.curtain.on{opacity:1;pointer-events:auto}.curtain p{margin:0;opacity:0;transform:translateY(8px);transition:opacity .5s .2s,transform .5s .2s;text-align:center}.curtain.on.label p{opacity:1;transform:none}.curtain-num{font:600 13px var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--warm)}.curtain-title{font:700 clamp(30px,5vw,48px) var(--serif);color:#f7f1e4;padding:0 var(--gap)}@media(max-width:720px){.chapter-screen:after,.title-screen:after{background:linear-gradient(0deg,#0a0a0ef2,#0a0a0ebf 55%,#0a0a0e59)}.title-panel,.chapter-panel{margin:0 auto;padding-left:var(--gap);padding-right:var(--gap)}.title-foot{display:none}}@media(max-height:520px){.chapter-screen:after{background:linear-gradient(90deg,#0a0a0ef2,#0a0a0ee0 55%,#0a0a0e4d 85%,#0a0a0e1a)}.chapter-panel{width:min(600px,100%);padding-bottom:0}.chapter-panel .actions{position:sticky;bottom:0;z-index:1;margin:12px 0 0;padding:10px 0 max(var(--gap),env(safe-area-inset-bottom));background:linear-gradient(180deg,#0a0a0e00,#0a0a0ef5 30%)}.chapter-panel h2,.modal-card h2{font-size:30px}.rule{margin:8px 0 10px}.chapter-text p,p.chapter-text{font-size:14px;margin-bottom:8px}.section-head{margin:10px 0 6px}.intro-controls li{font-size:13px}.intro-controls .keys{min-width:80px}.game-title{font-size:48px}.title-menu{gap:6px}.menu-item{min-height:38px;padding:6px 16px;font-size:17px}.screen-head h2{font-size:26px}.chapter-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}}@media(max-height:420px){:root{--btn: 54px;--gap: 12px}.anxiety{top:calc(max(var(--gap),env(safe-area-inset-top)) + 36px);height:56px}.slip,.book{top:calc(max(var(--gap),env(safe-area-inset-top)) + 52px)}#app:has(.anxiety:not([hidden])) .slip{top:calc(max(var(--gap),env(safe-area-inset-top)) + 100px)}}
