:root{
  --ink:#141416; --paper:#fff6e3; --paper2:#ffe9bd; --sun:#f4c91f; --hot:#f0871e; --deep:#b4530c; --dim:#6d6253; --ok:#2f9e5b; --bad:#d6413b;
  --shadow:5px 5px 0 var(--ink); --r:14px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0;overflow:hidden}
body{background:#1b1410;color:var(--ink);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
body.looking{cursor:none}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.02em;margin:0;text-transform:uppercase}
kbd{display:inline-block;background:var(--ink);color:var(--sun);border-radius:5px;padding:1px 8px;margin-right:8px;font:700 .85em "JetBrains Mono",monospace}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
body.dragging #c{cursor:grabbing}
.hud{position:fixed;z-index:5;pointer-events:none}

/* ---- shared window chrome: cream paper, ink border, hard shadow ---- */
.win,.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tb{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--sun);border-bottom:3px solid var(--ink);padding:6px 12px;font:400 .95rem Anton,Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.tb b{cursor:pointer;font:700 1.1rem "JetBrains Mono",monospace;line-height:1;padding:0 4px}
.pad{padding:16px 18px 18px}
.center{text-align:center}
.btn{font:700 1rem "Space Grotesk",sans-serif;border:3px solid var(--ink);border-radius:10px;padding:9px 16px;cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .06s,box-shadow .06s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--hot);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.off{background:#d8cdb8;color:var(--dim)}
.btn.warn{background:var(--bad);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---- HUD ---- */
#where{top:calc(54px + env(safe-area-inset-top,0px));left:16px}
#where .t{font:400 clamp(1.3rem,3vw,2rem) Anton,Impact,sans-serif;color:var(--sun);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);letter-spacing:.03em;text-transform:uppercase}
#where .s{font:700 .85rem "JetBrains Mono",monospace;color:#fff;background:var(--ink);display:inline-block;padding:2px 8px;border-radius:6px;margin-top:4px}
#topright{top:calc(52px + env(safe-area-inset-top,0px));right:12px;display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;max-width:min(560px,64vw)}
.pill{background:var(--paper);border:3px solid var(--ink);color:var(--ink);font:700 .9rem "Space Grotesk",sans-serif;padding:5px 10px;border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pill.off{background:#d8cdb8;filter:grayscale(1)}
.pill.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.35) rotate(-6deg);background:var(--sun)}}
#mission{top:calc(104px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(460px,calc(100% - 24px));display:none}
#mission .k{display:flex;justify-content:space-between;background:var(--ink);color:var(--sun);padding:4px 12px;font:700 .78rem "JetBrains Mono",monospace;text-transform:uppercase}
#mission .v{font-weight:700;font-size:1.08rem;padding:8px 12px 0;text-align:center}
#mission .w{font-size:.85rem;color:var(--dim);padding:2px 12px 8px;text-align:center}
#mission .bar{height:8px;background:var(--paper2);border-top:3px solid var(--ink)}
#mission .bar i{display:block;height:100%;width:0;background:var(--hot);transition:width .5s}
#mission.flash{animation:flash .6s}
@keyframes flash{30%{transform:translateX(-50%) scale(1.04)}}
#prompt{left:50%;bottom:calc(168px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);padding:8px 16px;border-radius:12px;display:none;white-space:nowrap;font-weight:700;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:pointer}
#lookhint{left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:none;background:rgba(20,20,22,.78);color:#fff;padding:6px 12px;border-radius:10px;font-size:.85rem}
#lookhint kbd{margin:0 6px}
#lookhint.on{left:50%;transform:translateX(-50%);background:var(--sun);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--shadow);font-weight:700;font-size:1rem;padding:8px 16px;white-space:nowrap}
#toast{position:fixed;z-index:20;top:calc(110px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--sun);font-weight:700;padding:10px 18px;border-radius:10px;display:none;max-width:calc(100% - 24px)}

/* contract bar */
#cabar{position:fixed;z-index:8;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#fff;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;font:700 .82rem "JetBrains Mono",monospace;border-bottom:3px solid var(--sun)}
#cabar .cal{background:var(--sun);color:var(--ink);padding:2px 8px;border-radius:6px}
#cabar .caa{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text}
#cabar button{font:700 .78rem "JetBrains Mono",monospace;background:var(--hot);color:#fff;border:2px solid #fff;border-radius:7px;padding:3px 10px;cursor:pointer}
#cabar button:disabled{opacity:.45;cursor:default}
#cabar .links{display:flex;gap:6px;margin-left:4px;padding-left:10px;border-left:2px solid rgba(255,255,255,.25)}
#cabar .links a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:7px;background:#fff;color:var(--ink);transition:transform .08s,background .08s}
#cabar .links a[href]:hover{transform:translateY(-1px);background:var(--sun)}
#cabar .links a.off{opacity:.4;cursor:default}
#cabar .links svg{width:16px;height:16px;display:block}

/* music popover */
#musPop{position:fixed;z-index:9;top:calc(96px + env(safe-area-inset-top,0px));right:12px;width:250px;display:none}
#musPop.open{display:block}
.mbody{padding:12px 14px}
.mrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}
#musVol{width:100%;accent-color:var(--hot)}
.mnote{font-size:.74rem;color:var(--dim);margin-top:8px;line-height:1.35}

/* dialog */
#dialog{position:fixed;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(820px,calc(100% - 24px));display:none}
#dialog.open{display:block}
.drow{display:flex;gap:14px;padding:12px 16px 26px}
#portrait{width:92px;height:92px;flex:none;border:3px solid var(--ink);border-radius:12px;background:var(--hot) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:52px}
.dbody{flex:1;min-width:0}
#dname{font:400 1rem Anton,Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--deep);margin-bottom:2px}
#dtext{font-size:clamp(1rem,2.1vw,1.14rem);line-height:1.45;min-height:3em}
#choices{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#choices button{font:700 .98rem "Space Grotesk",sans-serif;border:3px solid var(--ink);border-radius:10px;padding:8px 14px;cursor:pointer;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
#choices button:first-child{background:var(--hot);color:#fff}
#choices .kk{display:inline-block;background:var(--ink);color:var(--sun);border-radius:5px;padding:0 7px;margin-right:8px;font:700 .8rem "JetBrains Mono",monospace}
#more{position:absolute;right:14px;bottom:6px;color:var(--dim);font-size:.78rem}

/* inspect */
#inspect{position:fixed;z-index:6;right:16px;top:50%;transform:translateY(-50%);width:min(420px,calc(100% - 32px));max-height:calc(100% - 90px);display:none;overflow:auto}
#inspect.open{display:block}
.ibody{padding:14px 16px 16px}
#inspect h2{font-size:1.7rem;line-height:1.05}
#inspect .d{color:var(--deep);font-weight:700;margin:2px 0 10px}
#itake{display:none;background:var(--ink);color:#fff;font-weight:700;line-height:1.35;padding:8px 10px;border-radius:8px;border-left:6px solid var(--hot);margin-bottom:10px}
#iimg{display:none;width:100%;border:3px solid var(--ink);border-radius:10px;margin-bottom:10px}
#inspect p{line-height:1.5;margin:0 0 12px;user-select:text;-webkit-user-select:text}
#istats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
#istats div{background:var(--paper2);border:2px solid var(--ink);border-radius:8px;padding:6px 8px}
#istats small{display:block;font:700 .66rem "JetBrains Mono",monospace;text-transform:uppercase;color:var(--dim)}
#istats b{font:400 1.15rem Anton,Impact,sans-serif;letter-spacing:.02em}
#itrades{font:500 .78rem "JetBrains Mono",monospace;margin-bottom:10px}
#itrades .tr{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(0,0,0,.25);padding:2px 0}
#itrades h4{margin:0 0 4px;font:700 .72rem "JetBrains Mono",monospace;text-transform:uppercase;color:var(--dim)}
#ikind{font-size:.85rem;margin-bottom:8px}
#isrc{font-size:.85rem;margin-bottom:14px}
#isrc a,.tli a{display:block;color:var(--deep);font-weight:700;margin-top:3px;text-decoration:underline}

/* overlays */
.overlay{position:fixed;inset:0;z-index:9;background:rgba(20,14,8,.78);display:none;overflow:auto;padding:calc(54px + env(safe-area-inset-top,0px)) 14px calc(20px + env(safe-area-inset-bottom,0px))}
.overlay.open{display:block}
.box{max-width:720px;margin:0 auto}
.box.small{max-width:380px;margin-top:8vh}
.box h2{font-size:1.9rem;margin-bottom:8px}
.olead{line-height:1.5;margin:0 0 12px}
.omap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.omap .rm{border:3px solid var(--ink);border-radius:10px;padding:6px 10px;font-weight:700;background:#fff;text-align:center;min-width:76px}
.omap .rm small{display:block;font-weight:500;font-size:.72rem;color:var(--dim)}
.omap .rm.done{background:#c9f0d6}.omap .rm.cur{background:var(--sun)}.omap .rm.lock{background:#e4dccb;color:var(--dim)}
.osteps{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.osteps li{display:flex;gap:10px;line-height:1.4}.oi{font-size:1.3rem}
.oprog{font-weight:700;margin-bottom:12px}
.cr{display:flex;gap:12px;align-items:baseline;padding:4px 0;border-bottom:1px dashed rgba(0,0,0,.2)}
.cr kbd{min-width:118px;text-align:center}
.crowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pin{width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:26px;box-shadow:3px 3px 0 var(--ink)}
.pin.big{width:110px;height:110px;font-size:56px;margin:6px auto 12px;animation:pinpop .6s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pinpop{from{transform:scale(.1) rotate(-40deg)}}

/* leaderboard */
.tlhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tlnote{font-size:.85rem;color:var(--dim);line-height:1.45}
#tlbody h3{font-size:1.2rem;margin:16px 0 6px;color:var(--deep)}
.lbrow{display:grid;grid-template-columns:34px 44px 1fr auto;gap:10px;align-items:center;border:3px solid var(--ink);border-radius:10px;background:#fff;padding:6px 10px;margin-bottom:6px}
.lbrow img{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}
.lbrow .rk{font:400 1.3rem Anton,Impact,sans-serif}
.lbrow .nm{font-weight:700}.lbrow .nm small{display:block;font-weight:500;color:var(--dim);font-size:.75rem}
.lbrow .pay{text-align:right;font:700 .95rem "JetBrains Mono",monospace}.lbrow .pay small{display:block;color:var(--deep)}
.lbrow.got{background:#fff3c4}
.tli{border-left:4px solid var(--hot);padding:2px 0 2px 10px;margin-bottom:10px}
.tli .dt{font:700 .75rem "JetBrains Mono",monospace;color:var(--dim)}.tli .tt{font-weight:700}

/* collector's book */
.bookwrap{max-width:1000px;margin:0 auto}
.bookhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.bookhead h2{color:var(--sun);font-size:1.8rem;-webkit-text-stroke:1px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.btabs{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.btabs button{font:700 .85rem "Space Grotesk",sans-serif;border:3px solid var(--ink);border-radius:9px 9px 0 0;padding:6px 12px;background:#d8cdb8;cursor:pointer}
.btabs button[aria-current=true]{background:var(--sun)}
.book{display:grid;grid-template-columns:1fr 14px 1fr;background:#7a4a22;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:10px;min-height:56vh}
.spine{background:linear-gradient(90deg,#3a2110,#7a4a22,#3a2110)}
.page{background:var(--paper) repeating-linear-gradient(transparent 0 27px,rgba(0,0,0,.06) 27px 28px);padding:14px;display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start;justify-content:center}
.pagehead{width:100%;font:400 1.15rem Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em;border-bottom:3px solid var(--ink);padding-bottom:4px}
.ph{background:#fff;border:2px solid var(--ink);padding:8px 8px 10px;width:min(210px,44%);box-shadow:3px 4px 0 rgba(0,0,0,.35);transform:rotate(var(--r,0deg));cursor:pointer;font:inherit;text-align:center;position:relative}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid #ccc}
.ph .t{font-weight:700;font-size:.85rem;margin-top:6px;line-height:1.15}.ph .y{font-size:.7rem;color:var(--dim)}
.ph .cn{position:absolute;top:-9px;left:50%;width:54px;height:18px;margin-left:-27px;background:rgba(244,201,31,.75);border:1px solid rgba(0,0,0,.2);transform:rotate(-3deg)}
.ph.miss{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#efe5cf;border-style:dashed;color:var(--dim);cursor:default;font-size:.8rem}
.ph.miss .q{font:400 2.2rem Anton,Impact,sans-serif}
.pinit{width:104px;text-align:center;font-size:.78rem;font-weight:700}.pinit.lock{opacity:.4;filter:grayscale(1)}
.bstats{width:100%;line-height:1.5}.bstats b{font:400 1.3rem Anton,Impact,sans-serif}.bnote{color:var(--dim);font-size:.85rem}
.bnav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#fff;font-weight:700}
#lightbox{position:fixed;inset:0;z-index:11;background:rgba(10,8,6,.8);display:none;align-items:center;justify-content:center;padding:16px}
#lightbox.open{display:flex}
.lbx{max-width:520px;max-height:100%;overflow:auto}.lbx img{width:100%;border:3px solid var(--ink);border-radius:10px}
.lbx h3{font-size:1.5rem;margin-top:10px}#lbd{color:var(--deep);font-weight:700;margin-bottom:6px}.lbx p{line-height:1.5}

/* collect animation */
#collect{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(244,201,31,.35),rgba(20,14,8,.8));cursor:pointer}
#collect.open{display:flex}
.cwrap{text-align:center}
.cbanner{font:400 clamp(2rem,6vw,3.4rem) Anton,Impact,sans-serif;color:var(--sun);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);text-transform:uppercase;margin-bottom:14px;transition:opacity .3s}
.chint{color:#fff;font-weight:700;margin-top:14px;transition:opacity .3s}
.fade{opacity:0}
.polaroid{display:inline-block;background:#fff;border:3px solid var(--ink);padding:12px 12px 14px;box-shadow:8px 10px 0 rgba(0,0,0,.45);width:min(360px,76vw)}
.polaroid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid #bbb}
.polaroid .cap{font:400 1.3rem Anton,Impact,sans-serif;text-transform:uppercase;margin-top:8px}
.polaroid .cdate{font:700 .72rem "JetBrains Mono",monospace;color:var(--dim)}

/* character select */
#select{position:fixed;z-index:9;right:4vw;top:50%;transform:translateY(-50%);width:min(360px,calc(100% - 24px));display:none;max-height:calc(100% - 70px);overflow:auto;border-radius:var(--r)}
#select.open{display:block}
#select h2{font-size:1.7rem}.sub{margin:2px 0 8px;color:var(--dim)}
.lab{font:700 .7rem "JetBrains Mono",monospace;text-transform:uppercase;color:var(--dim);margin:10px 0 4px}
.bodyrow{display:flex;gap:8px}
.bodyrow button{flex:1;font:700 .95rem "Space Grotesk",sans-serif;border:3px solid var(--ink);border-radius:10px;padding:7px;background:#fff;cursor:pointer}
.bodyrow button[aria-pressed=true]{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw button{width:30px;height:30px;border-radius:8px;border:3px solid var(--ink);cursor:pointer;padding:0}
.sw button[aria-pressed=true]{outline:3px solid var(--hot);outline-offset:2px;transform:scale(1.08)}
.selrow{display:flex;gap:8px;margin-top:16px}.selrow .primary{flex:1}
/* phones: a compact sheet, one line per colour row, so the character stays in view */
@media (max-width:760px),(max-height:560px){
  #select .pad{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;align-items:center;padding:8px 10px 10px}
  #select h2,#select .sub{display:none}
  #select .lab{margin:0}
  #select .sw{flex-wrap:nowrap;overflow-x:auto;padding:3px 2px;scrollbar-width:none}
  #select .sw::-webkit-scrollbar{display:none}
  #select .sw button{width:26px;height:26px;flex:none;border-width:2px}
  #select .bodyrow button{padding:4px;font-size:.88rem;border-width:2px}
  #select .selrow{grid-column:1/-1;margin-top:4px}
  #select .selrow .btn{padding:7px 10px;font-size:.92rem}
}
@media (max-width:760px){#select{right:50%;top:auto;bottom:8px;transform:translateX(50%);width:calc(100% - 16px);max-height:44vh}}
@media (max-height:560px) and (min-width:761px){#select{width:310px;right:2vw;max-height:calc(100% - 56px)}}

/* mini-game */
.mwin{max-width:700px;margin:0 auto}
.mwin h2{font-size:1.7rem}#mhow{margin:4px 0 10px;line-height:1.4;min-height:2.8em}
#mcv{width:100%;height:auto;display:block;border:3px solid var(--ink);border-radius:10px;background:#111;touch-action:none}
#mbtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* loading */
#title{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;padding:20px 20px max(5vh,calc(20px + env(safe-area-inset-bottom,0px)))}
/* behind the title: a still of the lobby while things load, then the live museum; a soft vignette keeps the text readable */
#title::before{content:"";position:absolute;inset:0;background:#c9600c url(../assets/img/lobby.jpg) center/cover;transition:opacity .9s}
#title.live::before{opacity:0}
#title::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,20,16,.45),rgba(27,20,16,0) 22%,rgba(27,20,16,0) 48%,rgba(27,20,16,.84))}
.loader{position:relative;z-index:1;text-align:center;max-width:620px}
body.titled #where,body.titled #topright,body.titled #lookhint,body.titled #prompt,body.titled #mission{display:none!important}
body.titled #cabar{z-index:31}
.logo{font:400 clamp(3.2rem,11vw,6rem) Anton,Impact,sans-serif;line-height:.95;color:var(--sun);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:7px 7px 0 var(--ink);letter-spacing:.02em}
.tag{font-weight:700;color:#fff;background:var(--ink);display:inline-block;padding:4px 14px;border-radius:8px;margin:14px 0}
.lbar{height:18px;border:3px solid var(--ink);border-radius:10px;background:var(--paper);overflow:hidden;box-shadow:3px 3px 0 var(--ink);max-width:360px;margin:0 auto}
.lbar i{display:block;height:100%;width:8%;background:var(--ink);transition:width .3s}
#resume{display:none;margin:4px auto 0;font-size:1.25rem;padding:12px 28px}
#restart{display:none;margin:10px auto 0;font-size:.85rem;padding:5px 14px}
.pill.warn{background:var(--bad);color:#fff}
body.select #topright{display:none}
#loading{font:700 .9rem "JetBrains Mono",monospace;margin:10px 0;color:#fff;text-shadow:0 2px 0 var(--ink)}
.disc{font-size:.8rem;color:rgba(255,255,255,.85);max-width:44ch;margin:0 auto;text-shadow:0 1px 0 var(--ink)}

/* intro */
#intro{position:fixed;inset:0;z-index:7;display:none;pointer-events:none}
#intro.open{display:block}
.lb-top,.lb-bot{position:absolute;left:0;right:0;height:9vh;background:var(--ink)}
.lb-top{top:0}.lb-bot{bottom:0}
#iskip{position:absolute;top:calc(11vh + 44px);right:14px;pointer-events:auto}
#snd1{position:absolute;top:calc(11vh + 46px);left:14px;background:var(--ink);color:var(--sun);font-weight:700;padding:6px 12px;border-radius:8px;display:none}
.icap{position:absolute;left:0;right:0;top:calc(11vh + 96px);text-align:center;padding:0 16px}
.icap.anim{animation:capin .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes capin{from{opacity:0;transform:translateY(20px) scale(.92)}}
.ibig{font:400 clamp(2rem,6.4vw,4.2rem) Anton,Impact,sans-serif;text-transform:uppercase;color:var(--sun);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);line-height:1}
.ismall{display:inline-block;margin-top:12px;color:#fff;background:var(--ink);padding:4px 14px;border-radius:8px;font-weight:700;font-size:clamp(.9rem,2.2vw,1.15rem)}
.ipins{position:absolute;left:0;right:0;top:54%;display:flex;gap:18px;justify-content:center}
.ipins .pin{width:84px;height:84px;font-size:42px;animation:pinpop .6s both cubic-bezier(.2,.9,.3,1.4)}
#iplay{position:absolute;left:50%;bottom:calc(9vh + 44px);transform:translateX(-50%);font-size:1.4rem;padding:12px 30px;display:none;pointer-events:auto}
.idots{position:absolute;left:0;right:0;bottom:3.4vh;display:flex;gap:8px;justify-content:center}
.idots i{width:10px;height:10px;border-radius:50%;background:#55483a}.idots i.d{background:#a08e72}.idots i.c{background:var(--sun)}
body.intro #topright,body.intro #where,body.intro #mission{display:none!important}

/* touch controls */
#stick{position:fixed;z-index:6;left:22px;bottom:calc(26px + env(safe-area-inset-bottom,0px));width:120px;height:120px;border-radius:50%;background:rgba(255,246,227,.35);border:3px solid var(--ink);display:none;touch-action:none}
#knob{position:absolute;left:36px;top:36px;width:44px;height:44px;border-radius:50%;background:var(--sun);border:3px solid var(--ink)}
#talk{position:fixed;z-index:6;right:22px;bottom:calc(46px + env(safe-area-inset-bottom,0px));width:92px;height:92px;border-radius:50%;background:var(--hot);color:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);font:400 1.2rem Anton,Impact,sans-serif;text-transform:uppercase;display:none}
@media (pointer:coarse){body.started #stick,body.started #talk{display:block}body.inspecting #stick{display:none}#inspect .ibody{padding-bottom:130px}#lookhint{display:none!important}#dialog{bottom:calc(160px + env(safe-area-inset-bottom,0px))}}
@media (max-width:640px){#where{top:92px}#mission{top:140px}.book{grid-template-columns:1fr}.spine{display:none}.drow{padding:10px 12px 24px}#portrait{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}