:root{
  --ink:#eef1e4; --muted:rgba(238,241,228,.7); --glass:rgba(20,28,22,.5); --glass-strong:rgba(20,28,22,.72);
  --line:rgba(238,241,228,.18); --honey:#f0c469; --bg:#9fbfd6;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#1a2530; } }
:root[data-theme="dark"]{ --bg:#1a2530; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
#c.locked{cursor:none}
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--line)}

/* intro */
#intro{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(16px,4vw,48px);padding-bottom:calc(clamp(16px,4vw,48px) + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(10,16,12,0) 35%,rgba(10,16,12,.55));transition:opacity .5s ease;z-index:5}
#intro.hide{opacity:0;pointer-events:none}
.card{max-width:34rem;border-radius:22px;padding:28px 30px 26px;background:var(--glass-strong)}
.card h1{font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.6rem,6vw,4.2rem);line-height:.95;letter-spacing:-.02em;margin:0 0 14px}
.card p{margin:0 0 20px;color:var(--muted);line-height:1.55;font-size:1rem;max-width:30rem}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center;margin:0 0 24px;font-size:.93rem}
.keys dd{margin:0;color:var(--muted)}
.keys dt{display:flex;gap:4px;flex-wrap:wrap}
kbd{font-family:inherit;font-size:.78rem;font-weight:600;min-width:26px;height:26px;padding:0 7px;display:inline-grid;place-items:center;border-radius:7px;background:rgba(238,241,228,.12);border:1px solid var(--line);border-bottom-width:2px}
.touch-only{display:none}
body.touch .touch-only{display:grid}
body.touch .desk-only{display:none}
#start{font:inherit;font-weight:600;font-size:1rem;color:#1d2415;background:var(--honey);border:0;border-radius:999px;padding:13px 26px;cursor:pointer;box-shadow:0 6px 24px rgba(240,196,105,.28)}
#start:hover{filter:brightness(1.05)}
#start:disabled{cursor:progress;filter:saturate(.6);opacity:.85}
#start:focus-visible,.panel input:focus-visible,.tbtn:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

/* panel */
.panel{position:fixed;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(270px,calc(100vw - 28px));border-radius:16px;padding:14px 16px 12px;z-index:3;font-size:.86rem}
.panel .row{margin-bottom:10px}
.panel .row:last-of-type{margin-bottom:4px}
.panel label{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--muted)}
.panel label b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:rgba(238,241,228,.2);outline:none}
.panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--honey);border:2px solid #20281a;cursor:pointer}
.panel input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--honey);border:2px solid #20281a;cursor:pointer}
.panel .foot{display:flex;justify-content:space-between;color:var(--muted);font-size:.76rem;padding-top:6px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
#toggle{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer;padding:4px}
.panel.min .row,.panel.min .foot{display:none}
.panel.min{width:auto;padding:10px 60px 10px 14px}
.panel .ttl{font-family:"Newsreader",Georgia,serif;font-size:1.15rem;margin:0 0 10px}
.panel.min .ttl{margin:0}

.panel .sw{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.panel .sw button{font:inherit;font-weight:600;font-size:.8rem;color:#1d2415;background:var(--honey);border:0;border-radius:999px;padding:4px 14px;cursor:pointer}
.panel .sw button[aria-pressed="false"]{background:rgba(238,241,228,.2);color:var(--ink)}
#act{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);border-radius:999px;padding:7px 14px;font-size:.84rem;z-index:3;transition:opacity .3s;white-space:nowrap}
#act.hide{opacity:0;pointer-events:none}
#hint{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);border-radius:999px;padding:8px 16px;font-size:.84rem;color:var(--ink);z-index:3;transition:opacity .4s;white-space:nowrap}
#hint.hide{opacity:0}
#cross{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.25);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
#cross.on{opacity:1}

/* debug overlay */
#statsBtn{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:4;min-width:56px;min-height:40px;border-radius:999px;color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;touch-action:manipulation}
#statsBtn[aria-pressed="true"]{background:rgba(240,196,105,.55)}
#stats{position:fixed;top:calc(60px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:4;margin:0;border-radius:12px;padding:10px 12px;font:600 .76rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);pointer-events:none;white-space:pre}
#stats[hidden]{display:none}

/* touch */
#joy{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(20,28,22,.25);z-index:4;pointer-events:none;display:none}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(240,196,105,.85)}
#vbtns{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column;gap:12px;z-index:4}
body.touch.playing #vbtns{display:flex}
body.playing:not(.touch) #vbtns{display:flex}body:not(.touch) #vbtns>:not(#btnSeat):not(#btnBoat):not(#btnPlane):not(#btnBed1):not(#btnBed2):not(#btnBed3):not(#btnUse):not(#btnFish):not(#btnCurtain):not(#btnLapse){display:none!important}   /* desktop: only the seat, boat, bed, use and fire buttons */
#quickbar{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4;transition:opacity .3s}
#quickbar.hide{opacity:0;pointer-events:none}body:not(.playing) #quickbar{display:none}
.qslot{position:relative;width:54px;height:54px;border-radius:12px;display:grid;place-items:center;color:var(--ink);cursor:pointer;touch-action:none;padding:0}
.qslot.empty{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.qslot.sel{box-shadow:inset 0 0 0 2px rgba(240,196,105,.95),0 0 12px rgba(240,196,105,.35)}
.qslot .n{position:absolute;right:5px;bottom:3px;font-size:.72rem;font-weight:700}
.qslot.pop{animation:qpop .35s ease-out}@keyframes qpop{40%{transform:scale(1.15)}}
#aimHint{position:fixed;left:50%;top:calc(50% + 38px);transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);z-index:3;pointer-events:none;transition:opacity .2s}
#aimHint.hide{opacity:0}#aimHint.shake{animation:ashake .4s}@keyframes ashake{20%,60%{transform:translateX(calc(-50% - 6px))}40%,80%{transform:translateX(calc(-50% + 6px))}}
#sleepFade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:6}
#album{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(560px,86vw);touch-action:none;transition:opacity .4s}
#album.hide{opacity:0;pointer-events:none}
#album .book{position:relative;width:100%;aspect-ratio:1.5;perspective:1600px;display:flex;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
#album .book::before{content:'';position:absolute;inset:-10px;border-radius:10px;background:#6a3b22;box-shadow:inset 0 0 0 3px #4e2a17}
#album .page,#album .face{position:relative;width:50%;height:100%;background:linear-gradient(90deg,#efe6d2,#f7f0e1);display:grid;place-items:center;overflow:hidden}
#album .left{border-radius:6px 0 0 6px;box-shadow:inset -14px 0 18px -12px rgba(0,0,0,.35)}#album .right{border-radius:0 6px 6px 0;background:linear-gradient(90deg,#f7f0e1,#efe6d2);box-shadow:inset 14px 0 18px -12px rgba(0,0,0,.35)}
#album .sym{font-size:clamp(48px,11vw,96px);color:#6b4a2e;opacity:.85}#album .num{position:absolute;bottom:8px;font-size:.75rem;color:#8a7358}
#album .leaf{display:none;position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transition:transform .6s ease-in-out}
#album .leaf.fwd{left:50%;transform-origin:left center}#album .leaf.rev{left:0;transform-origin:right center}
#album .face{position:absolute;inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}#album .back{transform:rotateY(180deg)}
#album .turn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;font-size:1.6rem;color:var(--ink);cursor:pointer}
#album .prev{left:-58px}#album .next{right:-58px}#album .turn:disabled{opacity:.3}
@media (max-width:700px){#album .prev{left:-6px}#album .next{right:-6px}}
#btnSeat.busy{opacity:.45;pointer-events:none}
.tbtn{width:62px;height:62px;border-radius:50%;color:var(--ink);font:inherit;font-size:.78rem;font-weight:600;display:grid;place-items:center;touch-action:none;cursor:pointer}
.tbtn.on{background:rgba(240,196,105,.55)}
#touchHelp{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:.8rem;color:var(--muted);z-index:2;pointer-events:none;display:none;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5)}
body.touch.playing #touchHelp{display:block}
@media (max-width:640px){
  .card{padding:22px 20px 20px;border-radius:18px}
  body.touch.playing .panel{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
  #touchHelp{display:none!important}
}
@media (prefers-reduced-motion: reduce){ #intro,#hint,#cross{transition:none} }

.panel .saveBtns{display:flex;gap:6px}.panel .saveBtns button{font:inherit;font-weight:600;font-size:.74rem;color:#1d2415;background:var(--honey);border:0;border-radius:999px;padding:4px 10px;cursor:pointer}.panel .saveBtns #saveReset{background:#d9824a}
#btnLapse.on{color:#ffd79a;transform:scale(1.08)}
/* the loading screen (app/paintIntro.js): the painted island behind the card, the progress bar */
#introArt{position:absolute;inset:0;width:100%;height:100%;z-index:-1;transition:opacity 1.6s ease}#introArt.done{opacity:0}#intro{isolation:isolate}
#loadbar{height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;margin:14px 0 12px}#loadbar span{display:block;height:100%;width:0;background:var(--honey);transition:width .3s}#loadbar.done{visibility:hidden}
#flash{position:fixed;inset:0;background:#eef3ff;opacity:0;pointer-events:none;z-index:3}   /* lightning (world/skyWeather.js) */
/* seasons (world/seasons.js): the panel picker, the name on waking */
.panel .sw select{font:inherit;font-weight:600;font-size:.8rem;color:#1d2415;background:var(--honey);border:0;border-radius:999px;padding:4px 10px;cursor:pointer}
#seasonName{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);font-family:"Newsreader",Georgia,serif;font-size:3.2rem;color:#fff8e8;text-shadow:0 2px 18px rgba(0,0,0,.55);opacity:0;pointer-events:none;z-index:6}
#seasonName.show{animation:seasonName 4.2s ease-in-out forwards}@keyframes seasonName{0%{opacity:0}25%{opacity:1}70%{opacity:1}100%{opacity:0}}
/* fires (app/fires.js): the cost on the light button, the note when you lack it */
#fireIcon,#lanternIcon,.actIcon{position:fixed;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff3dc;border:0;z-index:4;cursor:pointer;touch-action:none;padding:0}
#fireIcon .cost{position:absolute;right:4px;bottom:2px;font-size:.8rem;font-weight:700;color:#ffd79a}
#bookView{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,8,5,.55);touch-action:none;cursor:pointer}#bookView.hide{display:none}
#bookView .page{width:min(86vw,560px);min-height:min(60vh,420px);padding:34px 40px 26px;background:#efe3c4;color:#3a2a1c;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(120,80,40,.25);font-family:Georgia,serif;display:flex;flex-direction:column}
#bookView h2{font-style:italic;font-size:1.6rem;margin:0 0 16px}#bookView p{font-size:1.08rem;line-height:1.55;margin:0;flex:1}#bookView .foot{font-size:.8rem;opacity:.6;text-align:center;margin-top:18px}
#journalBtn{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));z-index:4;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff3dc;border:0;padding:0;cursor:pointer;touch-action:none}body:not(.playing) #journalBtn{display:none}
#letterView{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,8,5,.55);touch-action:none;cursor:pointer}#letterView.hide{display:none}
#letterView .page{width:min(88vw,560px);max-height:84vh;overflow:auto;padding:30px 36px 22px;background:#efe3c4;color:#3a2a1c;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(120,80,40,.25);font-family:Georgia,serif;position:relative}
#letterView h2{font-style:italic;font-size:1.5rem;margin:0 0 12px}#letterView h3{font-style:italic;margin:6px 0 10px}#letterView p{font-size:1.05rem;line-height:1.5;margin:0 0 10px}#letterView .foot,#letterView .sub{font-size:.8rem;opacity:.65;margin:6px 0 12px}#letterView .foot{text-align:center;margin-top:14px}
#letterView .days{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}#letterView .day{width:34px;height:30px;border-radius:6px;border:1px solid rgba(90,60,35,.35);background:#f6ecd4;color:#3a2a1c;font:600 .85rem Georgia,serif;cursor:pointer}#letterView .day.none{opacity:.3;cursor:default}#letterView .day.on{background:#7a4a24;color:#fff3dc}#letterView .day.chest{color:#9a6a1a}#letterView .day.page{width:auto;padding:0 10px;color:#5a3a7a}#letterView .keeps{margin:0;padding-left:1.2em}#letterView .keeps li{margin:.35em 0;color:#6a5a48}#letterView .keeps li.got{color:#3a2a1c;font-weight:600}#letterView .keeps li.got::marker{content:'✓  '}
#letterView .close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.6rem;color:#3a2a1c;cursor:pointer}#letterView .photo{display:block;width:min(100%,320px);margin:0 auto 12px;box-shadow:0 4px 14px rgba(0,0,0,.35)}#letterView .empty{opacity:.7}
#mapView{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,8,5,.55);touch-action:none;cursor:pointer}#mapView.hide{display:none}
#mapView canvas{width:min(88vw,82vh);height:min(88vw,82vh);border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.55)}
#mapView .mapCap{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);color:#f2e6c8;font-size:.9rem;opacity:.8;pointer-events:none}
#fireNote{position:fixed;left:50%;top:62%;transform:translateX(-50%);padding:9px 16px;border-radius:12px;font-size:.95rem;z-index:4;pointer-events:none;white-space:nowrap}#fireNote.hide{display:none}
/* body (app/body.js): the hunger bar under the quick slots, frost round the screen's edges */
#hungerBar{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:rgba(20,24,18,.45);overflow:hidden;z-index:4;pointer-events:none}
#hungerBar .fill{display:block;height:100%;background:#e9c46a;transition:width .6s}#hungerBar.low .fill{background:#d9824a}body:not(.playing) #hungerBar{display:none}
#sleepBar{position:fixed;top:calc(92px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:rgba(20,24,18,.45);overflow:hidden;z-index:4;pointer-events:none}
#sleepBar .fill{display:block;height:100%;background:#9fb4e6;transition:width .6s}#sleepBar.low .fill{background:#8a78c8;animation:sleepLow 1.4s ease-in-out infinite alternate}@keyframes sleepLow{to{opacity:.45}}body:not(.playing) #sleepBar{display:none}
/* sleepy: the eyelids (dark from the top and the bottom) closing now and then */
#eyelids{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;background:linear-gradient(#050608 0%,rgba(5,6,8,.85) 18%,rgba(5,6,8,0) 42%,rgba(5,6,8,0) 58%,rgba(5,6,8,.85) 82%,#050608 100%)}
#frost{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;background-size:100% 100%;-webkit-mask-image:radial-gradient(ellipse at center,transparent 45%,#000 85%);mask-image:radial-gradient(ellipse at center,transparent 45%,#000 85%)}
/* fishing (app/fishing.js): the strike button pulses */
#btnFish.pulse{animation:fishPulse .45s ease-in-out infinite alternate;color:#ffd79a}@keyframes fishPulse{to{transform:scale(1.12)}}
/* cooking (app/cooking.js): the ring round the food, the Cook button */
#cookRing{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:3}#cookRing.hide{display:none}
#cookRing svg{transform:rotate(-90deg)}#cookRing circle{fill:none;stroke-width:5}#cookRing .track{stroke:rgba(255,255,255,.22)}#cookRing .fill{stroke:#ffc86a;stroke-linecap:round}
#btnUse.cook{color:#ffd79a}
/* chests (app/chestUI.js): everything on solid brown */
#chestIcon{position:fixed;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#f6e7cb;background:#6e4526;box-shadow:inset 0 0 0 2px #4e2f17,0 4px 10px rgba(0,0,0,.4);border:0;z-index:4;cursor:pointer;touch-action:none;animation:cbob 1.6s ease-in-out infinite}
#chestIcon.hide{display:none}@keyframes cbob{50%{margin-top:-5px}}
#chestUI{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;z-index:5}   /* sized by its tiles (left:50% would cap it at half the screen) */#chestUI.hide{display:none}
#chestUI .panel{position:relative;left:auto;top:auto!important;bottom:auto;width:auto;font-size:1rem;padding:48px 24px 24px;border-radius:18px;background:linear-gradient(180deg,#8a5a34,#6e4526);box-shadow:inset 0 0 0 3px #4e2f17,0 14px 34px rgba(0,0,0,.55);touch-action:none}
#chestUI .tiles{display:grid;grid-template-columns:repeat(5,76px);gap:12px;justify-content:center}#chestUI .quick{grid-template-columns:repeat(4,76px)}
#chestUI .rule{height:3px;margin:18px 6px;background:#4e2f17;box-shadow:0 1px 0 rgba(255,220,170,.18)}
#chestUI .tile{position:relative;width:76px;height:76px;border-radius:14px;border:0;background:#5a3820;box-shadow:inset 0 0 0 2px #3e2412,inset 0 2px 0 rgba(255,220,170,.12);color:#f6e7cb;display:grid;place-items:center;cursor:pointer;touch-action:none;padding:0}
#chestUI .tile.empty{background:#65412a}#chestUI .tile .n{position:absolute;right:7px;bottom:5px;font-size:.95rem;font-weight:700}
#chestUI .x{position:absolute;right:10px;top:9px;width:38px;height:38px;border:0;border-radius:50%;background:#5a3820;box-shadow:inset 0 0 0 2px #3e2412;color:#f6e7cb;font-size:1.25rem;cursor:pointer}
#chestUI .hand{position:absolute;left:18px;top:9px;height:38px;padding:0 12px;border-radius:19px;background:#5a3820;box-shadow:inset 0 0 0 2px #3e2412;display:flex;align-items:center;gap:6px;color:#ffe2a8;font-weight:700;font-size:1rem;opacity:0;transition:opacity .2s}#chestUI .hand.on{opacity:1}
#chestUI .count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 22px;border-radius:14px;background:#4e2f17;box-shadow:0 10px 24px rgba(0,0,0,.55);color:#f6e7cb;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:200px;font-size:1.05rem}
#chestUI .count.hide{display:none}#chestUI .count .row{display:flex;align-items:center;gap:18px}#chestUI .count .num{font-size:1.5rem;min-width:32px;text-align:center}
#chestUI .count button{border:0;border-radius:10px;background:#8a5a34;box-shadow:inset 0 0 0 2px #6e4526;color:#fff;font:inherit;font-size:1.1rem;padding:8px 16px;min-width:44px;cursor:pointer}
@media (max-width:560px){#chestUI .tiles{grid-template-columns:repeat(5,56px);gap:8px}#chestUI .quick{grid-template-columns:repeat(4,56px)}#chestUI .tile{width:56px;height:56px}#chestUI .panel{padding:44px 14px 16px}}
@media (max-width:360px){#chestUI .tiles{grid-template-columns:repeat(5,50px);gap:6px}#chestUI .quick{grid-template-columns:repeat(4,50px)}#chestUI .tile{width:50px;height:50px}#chestUI .panel{padding:44px 10px 14px}}
#album .close{position:absolute;right:-14px;top:-18px;width:40px;height:40px;border-radius:50%;font-size:1.1rem;color:var(--ink);cursor:pointer;z-index:2}
#album .standUp{position:absolute;left:50%;bottom:-66px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer}
#letterView .today{margin:0 0 12px}#letterView .calrow{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}#letterView .calrow .season{width:56px;flex:none;font:italic .85rem Georgia,serif;text-transform:capitalize;color:#7a5a3a;padding-top:6px}#letterView .cells{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;flex:1}#letterView .cd{position:relative;min-height:52px;border:1px solid rgba(90,60,35,.3);border-radius:5px;padding:3px 5px;background:#f6ecd4;font-size:.72rem;line-height:1.15;color:#5a4632}#letterView .cd b{display:block;font:600 .8rem Georgia,serif;color:#3a2a1c}#letterView .cd em{display:block;font-style:normal;color:#7a4a24;margin-top:2px}#letterView .cd.now{border-color:#7a4a24;box-shadow:0 0 0 1px #7a4a24 inset}#letterView .cd .miss{position:absolute;right:6px;top:3px;color:#a08a70}#letterView .cd .tick{position:absolute;right:2px;top:0;width:30px;height:30px;fill:none;stroke:#23408e;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}#letterView .cd.fresh .tick path{stroke-dasharray:30;animation:tickDraw .9s ease-out}@keyframes tickDraw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}#letterView .sum{font-size:.85rem;color:#6a5a48}

/* the observatory's telescope (app/telescope.js): the brass dial panel, the eyepiece */
#scopeView{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:rgba(5,8,16,.45)}#scopeView.hide,#scopeEye.hide{display:none}
#scopeView .plate{position:relative;width:min(86vw,380px);padding:22px 26px 18px;border-radius:14px;background:linear-gradient(160deg,#d8b870,#a37c34 55%,#7a5a22);color:#2a1c0c;box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,200,.6),inset 0 -2px 6px rgba(60,40,10,.5);font-family:Georgia,serif;text-align:center}
#scopeView h2{margin:0;font-size:1.3rem;letter-spacing:.06em}#scopeView .sub{font-style:italic;font-size:.85rem;margin:4px 0 14px;color:#3a2a14}
#scopeView .dials{display:flex;justify-content:center;align-items:center;gap:12px}#scopeView .dot{font-size:2rem;color:#3a2a14}
#scopeView .dial{display:flex;flex-direction:column;align-items:center;gap:6px}#scopeView .dial b{display:block;width:64px;height:72px;line-height:72px;border-radius:10px;background:linear-gradient(#f4ecd8,#d9ccb0);font:700 2.6rem Georgia,serif;color:#2a1c0c;box-shadow:inset 0 3px 8px rgba(0,0,0,.35)}
#scopeView .dial button{width:64px;height:40px;border-radius:8px;border:0;background:#3a2a14;color:#f4e2b4;font-size:1.1rem;cursor:pointer}
#scopeView .go{margin-top:16px;width:100%;padding:12px;border:0;border-radius:9px;background:#2a1c0c;color:#f4e2b4;font:600 1rem Georgia,serif;cursor:pointer}
#scopeView .note{margin-top:10px;font-size:.82rem;color:#2a1c0c}#scopeView .close{position:absolute;right:8px;top:6px;border:0;background:none;font-size:1.6rem;color:#3a2a14;cursor:pointer}
#scopeEye{position:fixed;inset:0;z-index:40;pointer-events:auto;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 41vmin,rgba(0,0,0,.92) 42.5vmin,#000 47vmin)}
#scopeEye .ring{position:absolute;left:50%;top:50%;width:85vmin;height:85vmin;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 2px rgba(190,160,90,.5),inset 0 0 40px rgba(0,0,0,.8)}
#scopeEye .label{position:absolute;left:0;right:0;bottom:4vh;text-align:center;color:#e8e2cc;font-family:Georgia,serif;text-shadow:0 1px 4px #000}#scopeEye .label b{display:block;font-size:1.5rem;letter-spacing:.04em}#scopeEye .label span{display:block;font-style:italic;opacity:.85;margin-top:2px}#scopeEye .label em{display:block;font-style:normal;font-size:.8rem;opacity:.7;margin-top:6px}
#scopeEye .close{position:absolute;right:16px;top:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(20,20,30,.6);color:#fff;font-size:1.4rem;cursor:pointer}
#letterView .stars{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 12px}#letterView .st{display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto auto;column-gap:8px;padding:5px;border:1px solid rgba(90,60,35,.3);border-radius:6px;background:#f6ecd4;font-size:.72rem;line-height:1.2}#letterView .st .sk{grid-row:1/4;width:46px;height:46px;background:#1d2338;border-radius:4px}#letterView .st .sk line{stroke:#8fb0ea;stroke-width:.8}#letterView .st .sk circle{fill:#fff}#letterView .st b{font:600 .82rem Georgia,serif;color:#3a2a1c}#letterView .st span{color:#6a5a48;font-style:italic}#letterView .st em{font-style:normal;color:#7a4a24}#letterView h4{margin:12px 0 4px;font:600 .9rem Georgia,serif;color:#5a3a1c}#letterView .ufo{font-style:italic;color:#2a5a3a}

/* the observatory bed's alarm clock (app/sleeping.js): when to wake */
#alarmView{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:rgba(5,8,16,.45)}#alarmView.hide{display:none}
#alarmView .plate{width:min(86vw,340px);padding:20px 24px 16px;border-radius:14px;background:linear-gradient(160deg,#c8413a,#8e231e);color:#fff4e8;box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,200,.5);font-family:Georgia,serif;text-align:center}
#alarmView h2{margin:0 0 12px;font-size:1.25rem;letter-spacing:.05em}#alarmView .dials{display:flex;justify-content:center;align-items:center;gap:10px}#alarmView .dot{font-size:2.2rem}
#alarmView .dial{display:flex;flex-direction:column;align-items:center;gap:6px}#alarmView .dial b{display:block;width:70px;height:70px;line-height:70px;border-radius:50%;background:#f4eee0;color:#1a1a1a;font:700 2.1rem Georgia,serif;box-shadow:inset 0 3px 8px rgba(0,0,0,.35),0 0 0 4px #d8d8d0}
#alarmView .dial button{width:60px;height:36px;border-radius:8px;border:0;background:rgba(0,0,0,.35);color:#fff4e8;font-size:1rem;cursor:pointer}
#alarmView .note{margin:12px 0 4px;font-size:.85rem;opacity:.9}#alarmView .btns{display:flex;gap:10px;margin-top:10px}#alarmView .btns button{flex:1;padding:11px;border:0;border-radius:9px;font:600 1rem Georgia,serif;cursor:pointer}#alarmView .cancel{background:rgba(0,0,0,.3);color:#fff4e8}#alarmView .go{background:#f4eee0;color:#6a1a14}

/* the seaplane's fuel meter, height and speed (app/flying.js) */
#fuelMeter{position:fixed;top:calc(104px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);padding:6px 12px;border-radius:12px;z-index:4;pointer-events:none;font:600 12px/1.3 system-ui,sans-serif;color:#f4efe2;min-width:180px}
#fuelMeter .row{display:flex;align-items:center;gap:8px}#fuelMeter .info{justify-content:center;font-weight:500;opacity:.85;margin-top:3px}
#fuelMeter .bar{flex:1;height:7px;border-radius:4px;background:rgba(20,24,18,.5);overflow:hidden}#fuelMeter .fill{display:block;height:100%;background:#e9a23a;transition:width .3s}
#fuelMeter.low .fill{background:#d9534a;animation:sleepLow 1s ease-in-out infinite alternate}#fuelMeter .pct{min-width:34px;text-align:right}
body:not(.playing) #fuelMeter{display:none}#fuelMeter.hide{display:none}
/* the story mode (app/story.js, app/letters.js, app/fuelQuest.js) */
#storyBtn{font:inherit;font-weight:600;font-size:1rem;color:#f4efe2;background:rgba(122,74,36,.85);border:0;border-radius:999px;padding:13px 26px;cursor:pointer;margin-left:8px;margin-top:8px}#storyBtn:disabled{opacity:.6;cursor:progress}
#storyView,#storyPage{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,8,5,.6);touch-action:none;cursor:pointer}#storyView.hide,#storyPage.hide{display:none}
#storyView .page,#storyPage .page{width:min(88vw,560px);max-height:84vh;overflow:auto;padding:30px 36px 22px;background:#efe3c4;color:#3a2a1c;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.55),inset 0 0 60px rgba(120,80,40,.25);font-family:Georgia,serif}
#storyView h2,#storyPage h2{font-style:italic;font-size:1.5rem;margin:0 0 12px}#storyView p,#storyPage p{font-size:1.05rem;line-height:1.5;margin:0 0 10px}#storyView .sig{text-align:right;font-style:italic;opacity:.8}
#storyView .foot,#storyPage .foot{font-size:.8rem;opacity:.65;text-align:center;margin-top:14px}#storyView .code,#letterView .code{font-size:1.3rem;letter-spacing:.12em;color:#7a2a1c}
#storyPage .opening{background:#0d0b09;color:#d9cdb8;box-shadow:none;text-align:center}#storyPage .opening p{font-style:italic;font-size:1.15rem;margin:0 0 14px}
#storyPage .end{text-align:center}#storyPage .end h2{font-size:2.2rem}#storyPage .sub{font-size:.85rem;opacity:.7}
#storyPage .flash{width:min(92vw,680px);text-align:center;color:#f4ead6;font-family:Georgia,serif}#storyPage .flash img{width:100%;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.6);filter:sepia(.25)}
#storyPage .flash h2{font-style:italic;font-size:1.6rem;margin:14px 0 6px}#storyPage .flash p{font-size:1.05rem;line-height:1.5;margin:0 0 8px}#storyPage .flash .ph{font-size:.8rem;opacity:.6}#storyPage .flash .foot{opacity:.6;font-size:.8rem}
#storyHud{position:fixed;top:calc(68px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));z-index:4;max-width:min(300px,62vw);padding:8px 12px;border-radius:12px;color:#f4efe2;font:500 12.5px/1.35 system-ui,sans-serif;cursor:pointer;touch-action:none}
#storyHud.hide,body:not(.playing) #storyHud{display:none}#storyHud .hd{font-weight:700;font-size:13px}#storyHud ul{margin:5px 0 0;padding-left:16px}#storyHud li{margin:2px 0}#storyHud li.done{opacity:.55;text-decoration:line-through}#storyHud i{opacity:.75;font-style:normal}
#letterView .lettercopy{border-top:1px solid rgba(90,60,35,.25);padding-top:10px;margin-top:10px}#letterView .lettercopy h2{font-size:1.15rem}#letterView .lettercopy .sig{text-align:right;font-style:italic;opacity:.7}#letterView .lettercopy .where{font-size:.8rem;opacity:.6}
#codeUI{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:rgba(10,8,5,.55);touch-action:none}#codeUI.hide{display:none}
#codeUI .panel{position:relative;width:min(92vw,460px);max-height:90vh;overflow:auto;padding:22px 24px 18px;background:#5a3c24;color:#f4e6c8;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.35);font-family:Georgia,serif}
#codeUI h2{margin:0;font-style:italic}#codeUI .sub{margin:2px 0 12px;opacity:.7;font-size:.85rem}#codeUI .x{position:absolute;top:8px;right:12px;border:0;background:none;color:#f4e6c8;font-size:1.4rem;cursor:pointer}
#codeUI .row{display:flex;align-items:center;gap:8px;margin:6px 0}#codeUI .sym{width:30px;color:#e9c46a}#codeUI .nm{width:86px;font-size:.9rem}
#codeUI .dial{display:flex;flex-direction:column;align-items:center;background:#2c1e12;border-radius:6px;padding:2px 4px}#codeUI .dial b{font:700 1.25rem/1.2 ui-monospace,monospace;color:#f0c674;width:1.4em;text-align:center}
#codeUI .dial button{border:0;background:none;color:#c9a96a;font-size:.8rem;padding:3px 10px;cursor:pointer;touch-action:manipulation}
#codeUI .try{margin-top:12px;width:100%;padding:11px;border:0;border-radius:999px;background:#e9c46a;color:#2a1c10;font:600 1rem Georgia,serif;cursor:pointer}#codeUI .msg{min-height:1.2em;margin:8px 0 0;text-align:center;font-size:.9rem;opacity:.85}
#codeUI .panel.shake{animation:codeShake .4s}@keyframes codeShake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}