:root{--paper: #f3ead6;--paper-dark: #e3d4b4;--ink: #3b2a1a;--accent: #e8862a;--gold: #ffd84a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#cfe0ea;font-family:Fredoka,system-ui,sans-serif;color:var(--ink)}#app canvas{display:block}.hidden{display:none!important}kbd{display:inline-block;min-width:1.6em;padding:.05em .4em;margin:0 .1em;border-radius:6px;background:#ffffffeb;color:#2b2b2b;font:600 .85em Fredoka,sans-serif;text-align:center;box-shadow:0 2px #00000059}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#stats{position:absolute;top:18px;left:18px;width:210px;padding:12px 14px;background:#f3ead6e0;border-radius:14px;box-shadow:0 4px 18px #281e0a2e;font-size:15px}#stats .row{display:flex;justify-content:space-between;align-items:baseline}#stats .lbl{font-family:Caveat,cursive;font-size:21px;font-weight:700}#stats .bar{height:8px;border-radius:6px;background:#d9c9a5;margin:4px 0 10px;overflow:hidden}#paint-fill{height:100%;width:0;background:linear-gradient(90deg,#7fc8ff,#8fd16a,#ffd84a,#ff9a52);transition:width .6s}#echo-pips{display:flex;gap:6px;margin-top:4px}#echo-pips i{width:16px;height:16px;transform:rotate(45deg);border:2px solid var(--ink);border-radius:3px;opacity:.45}#echo-pips i.on{background:var(--gold);opacity:1;box-shadow:0 0 10px #ffd250e6}#compass{position:absolute;top:18px;left:50%;transform:translate(-50%);width:420px;height:34px;border-radius:17px;overflow:hidden;background:linear-gradient(90deg,transparent,rgba(243,234,214,.85) 20%,rgba(243,234,214,.85) 80%,transparent)}#compass-strip{position:absolute;top:0;right:0;bottom:0;left:0}#compass-strip span{position:absolute;left:50%;top:50%;margin-top:-.65em;line-height:1.3em;font-weight:700}#compass-strip .cardinal{font-size:18px}#compass-strip .inter{font-size:12px;opacity:.7;margin-top:-.6em}#compass-strip .house-mark{color:#b0461f;margin-top:-9px}#compass-tick{position:absolute;left:50%;bottom:0;width:2px;height:7px;background:var(--ink)}#crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffffd9;box-shadow:0 0 3px #0009}#keys{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;gap:5px;font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:.85}#prompt{position:fixed;left:50%;bottom:22%;transform:translate(-50%,10px);padding:9px 18px;border-radius:22px;background:#1e18109e;color:#fff;font-size:18px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}#prompt.show{opacity:1;transform:translate(-50%)}#subtitle{position:fixed;left:50%;top:66%;transform:translate(-50%,-50%);width:90%;text-align:center;pointer-events:none;font:700 clamp(28px,4.6vw,58px) "Fredoka",sans-serif;color:var(--gold);-webkit-text-stroke:2.5px #111;paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.35);opacity:0;transition:opacity .6s}#subtitle.show{opacity:1;animation:pop .5s ease-out}@keyframes pop{0%{transform:translate(-50%,-40%) scale(.92)}to{transform:translate(-50%,-50%) scale(1)}}#toast{position:fixed;left:50%;top:68px;transform:translate(-50%,-8px);padding:8px 18px;border-radius:12px;background:var(--paper);box-shadow:0 4px 16px #0003;font:700 22px Caveat,cursive;opacity:0;transition:all .3s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%)}#flash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:#fff8e8;opacity:0}#flash.go{animation:flash .9s ease-out}@keyframes flash{0%{opacity:.95}to{opacity:0}}#underwater{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,#2878a040,#0a325a8c)}#loading,#title,#pause,#carnet{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}#loading{background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(120,140,180,.18) 31px 32px);z-index:20}#loading .paper{text-align:center}#loading h1,.title-card h1{font:700 96px Caveat,cursive;margin:0;letter-spacing:1px}#loading p{font:600 26px Caveat,cursive;margin:4px 0 18px}.lbar{width:340px;height:10px;border-radius:6px;background:var(--paper-dark);overflow:hidden;margin:0 auto}#load-bar{width:0;height:100%;background:var(--ink);transition:width .2s}#title{background:radial-gradient(ellipse at center,transparent 30%,rgba(30,20,5,.35));z-index:10}.title-card{text-align:center;padding:30px 46px 26px;border-radius:18px;background:#f3ead6ed;box-shadow:0 14px 50px #1e140559;max-width:640px}.title-card h1{line-height:.9}.title-card .tag{font:600 27px Caveat,cursive;margin:8px 0 22px}.title-card.small{padding:20px 40px;cursor:pointer}.title-card h2{font:700 46px Caveat,cursive;margin:0}.title-card .controls{margin-top:20px;font-size:14px;line-height:2;opacity:.85}button{font-family:Fredoka,sans-serif;cursor:pointer}button.big{font-size:22px;font-weight:600;padding:12px 42px;border:none;border-radius:30px;background:var(--ink);color:var(--paper);box-shadow:0 4px #1a120a;transition:transform .1s}button.big:hover{transform:translateY(-2px)}button.link{display:block;margin:10px auto 0;background:none;border:none;color:var(--ink);text-decoration:underline;opacity:.7;font-size:14px}#pause{background:#1e140540;z-index:9;cursor:pointer}#carnet{background:#140e068c;z-index:12}.book{display:flex;width:min(1100px,94vw);height:min(640px,88vh);border-radius:10px;box-shadow:0 20px 60px #00000080;overflow:hidden}.page{flex:1;padding:22px 28px;background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(120,140,180,.16) 27px 28px);overflow:auto}.page.left{border-right:2px solid #c9b48c;box-shadow:inset -18px 0 30px -18px #50320a66;display:flex;flex-direction:column;align-items:center}.page.right{box-shadow:inset 18px 0 30px -18px #50320a66;display:flex;flex-direction:column}.page h2{font:700 38px Caveat,cursive;margin:0 0 10px}#map{width:min(420px,100%);aspect-ratio:1;border-radius:6px;box-shadow:0 2px 10px #3c280a4d;background:var(--paper-dark)}.note{font:600 20px Caveat,cursive;opacity:.75;margin:10px 0 0;text-align:center}#cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1;align-content:start}.card{background:#fffaf0;padding:7px 7px 4px;border-radius:3px;box-shadow:0 3px 8px #3c280a40;transform:rotate(-1.2deg);display:flex;flex-direction:column}.card:nth-child(2n){transform:rotate(1.4deg)}.card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:sepia(.25) contrast(1.05) saturate(1.1);border-radius:2px}.card .ph{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font:700 46px Caveat,cursive;color:#b9a582;background:repeating-linear-gradient(45deg,#efe4cc 0,#efe4cc 6px,#e6d8b8 6px,#e6d8b8 12px)}.card .cap{font:600 17px Caveat,cursive;line-height:1.05;padding:5px 2px 3px;min-height:46px}.card .cap b{font-size:21px}.card .cap span{opacity:.8}.carnet-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}#btn-close{font-size:16px;padding:8px 18px;border:none;border-radius:20px;background:var(--ink);color:var(--paper)}#btn-close kbd{font-size:12px}.carnet-foot .link{margin:0}