:root{--ink: #f4ead8;--muted: #c9bba3;--panel: rgba(20, 17, 15, .72);--edge: rgba(244, 234, 216, .16);--fox: #d9692f;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#14110f;color:var(--ink);overflow:hidden}#world{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none}#hud button,#hud .panel{pointer-events:auto}.panel{background:var(--panel);border:1px solid var(--edge);border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.clock{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;padding:10px 14px;display:grid;gap:2px;min-width:120px}.clock .time{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}.clock .phase{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--fox)}.clock .meta{font-size:12px;color:var(--muted);text-transform:capitalize}.controls{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;display:flex;flex-wrap:wrap;gap:6px;padding:6px;max-width:calc(100vw - 180px);justify-content:flex-end}button{font:inherit;font-size:13px;color:var(--ink);background:transparent;cursor:pointer;border:1px solid var(--edge);border-radius:8px;padding:8px 12px;min-height:36px}button:hover{border-color:var(--muted)}button:focus-visible{outline:2px solid var(--fox);outline-offset:2px}button[aria-pressed=true]{background:var(--fox);border-color:var(--fox);color:#1b0f08}.sprint{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:76px;height:76px;border-radius:50%;background:var(--panel);font-weight:600;display:none}.help{position:absolute;left:16px;bottom:max(16px,env(safe-area-inset-bottom));margin:0;font-size:12px;color:var(--muted);max-width:calc(100vw - 120px);text-shadow:0 1px 2px #000a}@media (pointer: coarse){.help{display:none}}.perf{position:absolute;left:16px;top:220px;margin:0;padding:8px 10px;font:12px/1.5 ui-monospace,SF Mono,Menlo,monospace;color:var(--ink)}.error{position:absolute;left:50%;bottom:96px;transform:translate(-50%);margin:0;background:#7a2618;color:#fff;padding:10px 14px;border-radius:10px;max-width:min(520px,calc(100vw - 32px))}.loading{position:absolute;inset:0;display:grid;place-content:center;gap:14px;text-align:center;background:radial-gradient(circle at 50% 40%,#2a1d15,#14110f 70%);transition:opacity .6s ease}.loading.done{opacity:0;pointer-events:none}.loading .title{margin:0;font-size:clamp(32px,7vw,56px);font-weight:800;letter-spacing:-.02em}.loading .bar{width:min(320px,70vw);height:4px;border-radius:2px;background:var(--edge);overflow:hidden;margin:0 auto}.loading .bar span{display:block;height:100%;width:0;background:var(--fox);transition:width .3s ease}.loading .hint{margin:0;color:var(--muted);font-size:14px}.menu,.touch-help{display:none}#hud.touch .menu{display:block;position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#hud.touch .controls{display:none;top:calc(max(16px,env(safe-area-inset-top)) + 46px);flex-direction:column;align-items:stretch;max-width:none}#hud.touch.menu-open .controls{display:flex}#hud.touch .controls button{min-height:44px}#hud.touch .sprint{display:block}#hud.touch .touch-help{display:block;position:absolute;left:16px;right:110px;bottom:max(24px,env(safe-area-inset-bottom));margin:0;font-size:13px;color:var(--ink);text-shadow:0 1px 3px #000c;transition:opacity .6s ease}#hud.touch .touch-help.gone{opacity:0}.stick-zone{position:absolute;left:0;bottom:0;width:50%;height:60%;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.stick-base{position:absolute;width:120px;height:120px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgba(244,234,216,.35);background:#14110f59;opacity:0;transition:opacity .15s ease;pointer-events:none}.stick-base.active{opacity:1}.stick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);background:#d9692fd9;box-shadow:0 2px 8px #0008}@media (max-width: 600px){.perf{top:200px}}.night{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 96px);left:16px;padding:8px 12px;display:grid;gap:6px;width:200px}.night-title{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.night-line{font-size:12px;color:var(--muted)}.meter{--level: 0;position:relative;height:8px;border-radius:4px;background:var(--edge);overflow:hidden}.meter span{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--level));background:#8fb0c9;transition:transform .15s linear}.meter.hot span{background:#e2553b}.meter:before{content:"seen";position:absolute;right:4px;top:-16px;font-size:10px;color:var(--muted)}.mouth{position:absolute;left:50%;transform:translate(-50%);bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:6px;pointer-events:none}.slot{width:30px;height:30px;border-radius:8px;border:1px dashed rgba(244,234,216,.4);background:#14110f73;font-size:0;overflow:hidden}.slot.full{border:2px solid var(--c);background:color-mix(in srgb,var(--c) 55%,#14110f)}.slot.big{width:102px}.banner{position:absolute;left:50%;top:calc(max(16px,env(safe-area-inset-top)) + 8px);transform:translate(-50%,-8px);margin:0;padding:8px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--edge);font-size:14px;font-weight:600;opacity:0;transition:opacity .25s ease,transform .25s ease;max-width:min(420px,calc(100vw - 32px));text-align:center;pointer-events:none}.banner.show{opacity:1;transform:translate(-50%)}.banner[data-tone=good]{border-color:#7fae5a}.banner[data-tone=warn]{border-color:#e0a63c;color:#ffd98a}.banner[data-tone=bad]{border-color:#e2553b;color:#ffb4a3}.sniff,.sleep{position:absolute;right:16px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 4px);background:var(--panel);font-weight:600;min-width:76px}.sniff[disabled]{opacity:.5;cursor:default}.sleep{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 52px);border-color:var(--fox)}#hud.touch .sniff{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 88px);right:24px;width:64px;height:64px;border-radius:50%;min-width:0;padding:0}#hud.touch .sleep{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 164px);right:16px}#hud.touch .mouth{bottom:auto;top:calc(max(16px,env(safe-area-inset-top)) + 56px)}.summary{position:absolute;inset:0;display:grid;place-items:center;background:#0806058c;pointer-events:auto;padding:16px}.summary[hidden]{display:none}.summary .card{padding:20px 22px;width:min(380px,100%);display:grid;gap:12px}.summary h2{margin:0;font-size:22px}.summary dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}.summary dt{color:var(--muted)}.summary dd{margin:0;text-align:right}.summary button{background:var(--fox);border-color:var(--fox);color:#1b0f08;font-weight:700;min-height:44px}@media (max-width: 600px){.night{top:calc(max(16px,env(safe-area-inset-top)) + 84px);width:170px}}.home{position:absolute;left:0;top:0;pointer-events:none;z-index:1}.home-arrow{position:absolute;left:0;top:0;width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:22px solid #7fd6c2;filter:drop-shadow(0 1px 3px #000c);opacity:.7}.home-label{position:absolute;left:0;top:18px;transform:translate(-50%);white-space:nowrap;font-size:12px;font-weight:700;color:#bff0e4;text-shadow:0 1px 3px #000;opacity:.8}.home.carrying .home-arrow,.home.carrying .home-label{opacity:1}.home.onscreen .home-arrow{display:none}.home.onscreen .home-label{top:-6px}.den-alert{font-size:12px;font-weight:700;color:#ffb4a3;animation:den-pulse 1s ease-in-out infinite alternate}@keyframes den-pulse{0%{opacity:.55}to{opacity:1}}@media (prefers-reduced-motion: reduce){.den-alert{animation:none}}.home.alert .home-arrow{border-left-color:#e2553b}.home.alert .home-label{color:#ffb4a3}.build-open,.skip-day{position:absolute;right:16px;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 100px);background:var(--panel);font-weight:600;min-width:76px;border-color:#7fd6c2}.skip-day{bottom:max(16px,env(safe-area-inset-bottom))}#hud.touch .build-open{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 212px);right:16px}#hud.building .sniff,#hud.building .sleep,#hud.building .mouth,#hud.building .sprint,#hud.building .stick-zone,#hud.building .touch-help,#hud.building .help,#hud.day .sniff,#hud.day .sleep,#hud.day .mouth,#hud.day .sprint,#hud.day .stick-zone,#hud.day .touch-help{display:none!important}@media (max-width: 600px){#hud.building .night{display:none}}.build{position:absolute;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 140px);overflow-y:auto;padding:12px;display:grid;gap:10px}.build[hidden]{display:none}.build-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}.build-head span{font-size:12px;color:var(--muted)}.build-stock{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--muted)}.build-stock b{color:var(--ink)}.build-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}.build-pieces button{display:grid;gap:2px;text-align:left;padding:6px 8px;min-height:48px;font-size:12px}.build-pieces button span{font-weight:600}.build-pieces button small{font-size:10px;color:var(--muted);line-height:1.25}.build-pieces button[aria-pressed=true] small{color:#3a1d0c}.build-pieces button.poor:not([aria-pressed=true]){opacity:.6}.build-pieces button[disabled]{opacity:.35;cursor:default}.build-actions{display:flex;gap:6px}.build-actions button{flex:1}.build-actions button small{display:block;font-size:10px;color:var(--muted)}.build-actions button[disabled]{opacity:.5}.build-actions .primary{background:var(--fox);border-color:var(--fox);color:#1b0f08;font-weight:700;flex:0 0 88px}.summary-tip{grid-column:1 / -1;margin:4px 0 0;font-size:13px;color:var(--muted)}.summary .card{max-height:calc(100vh - 32px);overflow-y:auto}.summary dd{text-align:right}@media (max-width: 600px){.build{left:8px;right:8px;width:auto;bottom:max(8px,env(safe-area-inset-bottom));max-height:46vh;padding:10px;gap:8px}.build-pieces{grid-template-columns:repeat(3,1fr)}}
