@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color:#e3e8df;font-synthesis:none;background:#101514;font-family:IBM Plex Mono,monospace}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline-offset:5px;outline:2px solid #c8d99c}button:hover{color:#fff;border-color:#d6e9b1}#game,#light,.grain{position:fixed;inset:0}#game canvas{display:block}#light,.grain{pointer-events:none}.grain{opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}header{pointer-events:none;justify-content:space-between;align-items:flex-start;display:flex;position:fixed;top:30px;left:38px;right:38px}.brand{letter-spacing:3px;color:#f0f3e9;font-family:Barlow Condensed,sans-serif;font-size:22px;font-weight:600;text-decoration:none}.brand span{letter-spacing:1.6px;color:#a1aaa4;margin-top:6px;font:11px IBM Plex Mono,monospace;display:block}.tools{pointer-events:auto;gap:12px;display:flex}button{letter-spacing:1px;background:#111a17a8;border:1px solid #75807555;padding:12px 16px;font-size:12px;transition:all .2s}header:before{content:"";z-index:-1;background:linear-gradient(#080f10c9,#0000);height:150px;position:fixed;inset:0 0 auto}.location{text-align:right;pointer-events:none;position:fixed;top:120px;right:40px}.eyebrow{letter-spacing:2px;color:#b7c49c;font-size:12px}.location h1{letter-spacing:5px;margin:6px 0;font-family:Barlow Condensed,sans-serif;font-size:38px;font-weight:400}.location h1 b{font-size:60px;font-weight:500}.location>span:last-child{color:#9ba7a2;letter-spacing:1px;font-size:12px}#menu{width:400px;max-width:90vw;position:fixed;top:30vh;left:5vw}#menu:before{content:"";z-index:-1;background:radial-gradient(#081011ef,#0000 72%);position:absolute;inset:-80px -80px -80px -10vw}.rule{background:#c3d49d;width:44px;height:3px;margin-bottom:22px}h2{letter-spacing:.3px;margin:16px 0 22px;font:500 53px/1.03 Barlow Condensed,sans-serif}.intro{color:#a7b1aa;margin-bottom:28px;font-size:13px;line-height:1.9}label{letter-spacing:1.5px;color:#abb5a7;margin-bottom:10px;font-size:11px;display:block}input{color:#e0e6dd;background:#0a1413c9;border:1px solid #68786d77;border-radius:0;width:100%;padding:14px 15px;font-size:14px;display:block}.primary{color:#16221c;background:#b9cb91;border:1px solid #c4d6a0;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:17px 19px;font-size:13px;font-weight:500;display:flex}.primary span{font-size:22px}.note{letter-spacing:1.8px;color:#7e8d81;margin-top:19px;font-size:10px}.coordinates{text-align:right;letter-spacing:1px;color:#8d9e94;pointer-events:none;flex-direction:column;gap:6px;font-size:10px;display:flex;position:fixed;bottom:25px;right:35px}.coordinates span:first-child{color:#b7c2b6}#hud{pointer-events:none;position:fixed;bottom:28px;left:36px}.walk{letter-spacing:1.6px;gap:22px;margin-bottom:20px;font-size:11px;display:flex}.walk span:last-child{color:#b9cb91}.keyline{color:#9ba99f;gap:20px;font-size:11px;display:flex}kbd{color:#d5ddcd;border-bottom:1px solid #b1bf9f77;margin-right:5px;padding-bottom:4px;font-family:inherit;font-size:11px}#dialog{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#030a0bc9;place-items:center;display:grid;position:fixed;inset:0}#dialog[hidden],#hud[hidden],#menu[hidden],#mapPanel[hidden]{display:none}.panel{width:420px;max-width:90vw;padding:24px}.panel h2{font-size:44px}.controlRows{margin:30px 0}.controlRows p{color:#abb6ac;border-bottom:1px solid #ffffff13;justify-content:space-between;gap:20px;padding-bottom:13px;font-size:12px;display:flex}.controlRows b{color:#d7e2cb;font-weight:400}.secondary{background:0 0;width:100%;margin-top:12px}#mapPanel{background:#0c1514f2;border:1px solid #71806b66;width:min(500px,90vw);padding:20px;position:fixed;top:220px;right:35px;box-shadow:0 20px 80px #0008}#mapPanel>div{letter-spacing:1px;justify-content:space-between;align-items:center;font-size:12px;display:flex}#mapPanel button{background:0 0;border:0;padding:4px}#map{width:100%;height:auto}#mapPanel p{text-align:right;color:#a4b394;font-size:10px}#mapPanel b{color:#e2eabe}#touch{display:none}body.playing .location{opacity:.8}body.playing #touch{display:none}@media (width<=700px){header{top:20px;left:20px;right:20px}.brand{letter-spacing:2px;font-size:17px}.brand span{font-size:9px}.tools{gap:5px}.tools button{padding:10px;font-size:10px}.location{top:95px;right:20px}.location h1{font-size:25px}.location h1 b{font-size:40px}#menu{width:330px;top:25vh;left:24px}h2{font-size:45px}.intro{font-size:12px}.coordinates{font-size:9px;bottom:18px;right:20px}.keyline{display:none}#hud{bottom:34px;left:20px}.walk{gap:12px;font-size:10px}#mapPanel{top:170px;right:5vw}}@media (pointer:coarse){body.playing #touch{touch-action:none;justify-content:space-between;align-items:end;gap:12px;display:flex;position:fixed;bottom:90px;left:20px;right:20px}.dpad{grid-template-columns:repeat(3,48px);gap:4px;display:grid}.dpad button{width:48px;height:48px;padding:0;font-size:22px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-area:2/1}.dpad button:nth-child(3){grid-area:2/2}.dpad button:nth-child(4){grid-area:2/3}.coordinates span:last-child{display:none}}#caught{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080c0bee;place-items:center;display:grid;position:fixed;inset:0}#caught[hidden]{display:none}#caught .eyebrow{color:#c29e85}#caught h2{font-size:64px}#encounterHint{color:#bec9af;letter-spacing:.5px;text-align:center;pointer-events:none;background:#0b1514c9;border:1px solid #73806855;max-width:90vw;padding:13px 20px;font-size:12px;position:fixed;bottom:100px;left:50%;transform:translate(-50%)}body.captured #touch{display:none!important}#appearancePanel{z-index:30;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#030a0be8;place-items:center;padding:20px;display:grid;position:fixed;inset:0;overflow:auto}#appearancePanel[hidden]{display:none}.appearance-card{background:#15201d;border:1px solid #687762;width:440px;max-width:100%;max-height:calc(100dvh - 40px);padding:24px;overflow:auto}.appearance-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.appearance-heading h2{margin:0;font-size:34px}.appearance-heading button{font-size:18px}#avatarPreview{background:radial-gradient(#405046,#0000 70%);place-items:center;height:150px;margin:10px 0 20px;display:grid}#avatarPreview canvas{object-fit:contain;max-width:100%}.appearance-fields{grid-template-columns:1fr 1fr;gap:16px;display:grid}.appearance-fields label{letter-spacing:.2px;margin:0;font-size:14px}.appearance-fields select,.appearance-fields input{color:#e0e6dd;background:#0c1512;border:1px solid #68786d;width:100%;height:42px;margin-top:8px;padding:8px;font:14px inherit}.appearance-fields input[type=color]{cursor:pointer;padding:4px}.appearance-note{color:#a0afa3;text-align:center;margin-bottom:0;font-size:12px}select:focus-visible{outline-offset:3px;outline:2px solid #c8d99c}@media (width<=700px){header{flex-wrap:wrap;gap:12px}.tools{flex-wrap:wrap}.appearance-card{padding:18px}#menu{max-height:65dvh;overflow:auto}}@media (height<=650px){#menu{max-height:73vh;top:20vh;overflow:auto}.appearance-card{padding:16px}#avatarPreview{height:100px;margin:5px}#avatarPreview canvas{width:200px;height:100px}}.objective{color:#d9e5cb}.objective b{color:#f3e7a7;margin-left:7px;font-weight:500}#won{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#080f0ce8;place-items:center;display:grid;position:fixed;inset:0}#won[hidden]{display:none}#won h2{font-size:55px}#won .eyebrow{color:#dce7b6}#blackoutHint{z-index:5;pointer-events:none;color:#f2d5a7;letter-spacing:2px;text-align:center;background:#060a0bea;border:1px solid #d5b58a;padding:10px 20px;font-size:13px;position:fixed;top:87px;left:50%;transform:translate(-50%);box-shadow:0 0 30px #0008}#blackoutHint[hidden]{display:none}.lore-credit{color:#9dab9d;margin-top:22px;font-size:12px;line-height:1.6}.lore-credit a{color:#c4d7b0;text-underline-offset:3px}:root{color:#f4efd5;background:#514521}button{background:#241f12c9;border-color:#c4b57866}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:#f8e7a2}.brand{color:#fff5c7}.brand span,.location>span:last-child,.coordinates{color:#d5c995}.eyebrow,.walk span:last-child,.objective b{color:#f3d98a}#menu:before{background:radial-gradient(#211b0feb,#0000 73%)}.rule{background:#efd57c}.intro,label,.note,.controlRows p,.appearance-note{color:#d7cda9}.primary{color:#302510;background:#ebd47e;border-color:#f8e4a2}.primary:hover{color:#241b09;background:#ffe799}input,.appearance-fields select,.appearance-fields input{color:#fff2c3;background:#211d12e8;border-color:#ac985977}#mapPanel,.appearance-card{background:#292414f2;border-color:#b49f5d88}#avatarPreview{background:radial-gradient(#776634,#0000 70%)}#encounterHint,#blackoutHint{color:#ffefa8;background:#29210ce8;border-color:#c3aa6077}.lore-credit{color:#d1c395}.lore-credit a{color:#f5dc87}#dialog,#caught,#won,#appearancePanel{background:#130f08d9}#deathSequence{z-index:18;pointer-events:none;position:fixed;inset:0}#deathSequence[hidden]{display:none}.light-description{color:#cbbf96;grid-column:1/-1;margin:0;font-size:13px;line-height:1.6}.walk{flex-wrap:wrap;max-width:80vw}#lightStatus{color:#e7cf83;font-size:11px}body.captured header,body.captured .location,body.captured #hud{opacity:.22}.grain{mix-blend-mode:overlay;opacity:.075}

.staminaHud{display:inline-flex;align-items:center;gap:7px;color:#d8cfaa}.staminaHud>b{min-width:22px;color:#f3e7a7;font-weight:500}.staminaHud i{width:72px;height:5px;background:#201b10;border:1px solid #9b895155;display:inline-block;overflow:hidden}.staminaHud em{height:100%;width:100%;display:block;background:#e6cf77;transition:width .12s linear}.staminaHud em[style*="width: 0"],.staminaHud em[style*="width: 1"]{background:#ad6d55}#mapPanel{width:min(610px,94vw)}@media (width<=700px){.staminaHud i{width:48px}.staminaHud{gap:4px}}
#mp{position:fixed;inset:0;pointer-events:none}
#dread{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:5;background:radial-gradient(ellipse at center,#0000 25%,#300 70%,#000 105%)}
#net{position:fixed;left:38px;top:84px;font-size:11px;letter-spacing:1.5px;color:#9ba7a2;pointer-events:none;z-index:6}
body.captured #dread{opacity:1!important;background:#400;animation:flashout 1.4s forwards}
@keyframes flashout{0%{background:#fff}12%{background:#a00}100%{background:#100}}
#peerTip{position:fixed;z-index:7;pointer-events:none;display:none;transform:translate(-50%,-100%);white-space:nowrap;font:500 11px IBM Plex Mono,monospace;letter-spacing:1.5px;color:#e3e8df;background:#0a1413d9;border:1px solid #75807577;padding:5px 9px}
#adminPanel{position:fixed;z-index:9;left:38px;top:120px;width:340px;max-height:calc(100vh - 230px);overflow:auto;background:#0a1413f2;border:1px solid #75807577;padding:14px 16px;font:11px IBM Plex Mono,monospace;letter-spacing:1px;color:#cfd8cb;scrollbar-width:thin}
#adminPanel[hidden],#adminMsg[hidden],#kicked[hidden]{display:none}
#adminPanel label{margin:0 0 6px}
#adminPanel input{padding:8px 10px;font-size:12px;width:100%}
.adm-head{display:flex;align-items:center;gap:6px;margin-bottom:12px;color:#b9cb91}.adm-head b{font:600 15px Barlow Condensed,sans-serif;letter-spacing:3px}.adm-head span{color:#8d9e94;flex:1}
.adm-row{display:flex;gap:6px;align-items:center}.adm-row.wrap{flex-wrap:wrap}
.adm-sec{margin:14px 0 7px;color:#b7c49c;font-size:10px;letter-spacing:2px}
.adm-note{color:#c9877b;margin:8px 0 0;min-height:14px}
.adm-player{padding:8px 0;border-top:1px solid #75807533}.adm-player i{color:#8d9e94;font-style:normal;font-size:10px}
button.adm{padding:5px 8px;font-size:10px;letter-spacing:1px;white-space:nowrap}
button.adm.on{background:#b9cb91;color:#16221c;border-color:#c4d6a0}
button.adm[data-c=kick]{border-color:#8c343a;color:#e2a6a0}
#adminMsg{position:fixed;z-index:8;top:150px;left:50%;transform:translateX(-50%);max-width:min(560px,86vw);padding:13px 20px;text-align:center;font:500 13px IBM Plex Mono,monospace;letter-spacing:1.5px;color:#f0f3e9;background:#111a17e6;border:1px solid #b9cb9199}
#kicked{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;text-align:center;background:#000;color:#e3e8df}

/* ---- v10: settings dropdown + HUD customization ---- */
#customize,#help{display:none}
#settingsBtn.on{background:#241f12f2;border-color:#e6cf7799}
#settings{position:fixed;z-index:9;width:min(360px,calc(100vw - 16px));overflow:auto;background:#0a1413f5;border:1px solid #75807588;box-shadow:0 14px 40px #000a;padding:0 0 14px;font:11px IBM Plex Mono,monospace;letter-spacing:1px;color:#cfd8cb;scrollbar-width:thin;pointer-events:auto}
#settings[hidden],#settings [hidden]{display:none}
#settings .st-tabs{display:flex;border-bottom:1px solid #75807555;position:sticky;top:0;background:#0a1413;z-index:1}
#settings .st-tabs button{flex:1;background:0 0;border:0;border-bottom:2px solid transparent;padding:12px 4px;font-size:10px;color:#9ba99f}
#settings .st-tabs button.on{color:#f3e7a7;border-bottom-color:#e6cf77}
#settings section{padding:12px 16px 0}
#settings h3{margin:16px 0 8px;font:600 11px Barlow Condensed,sans-serif;letter-spacing:3px;color:#e6cf77;border-bottom:1px solid #75807533;padding-bottom:5px}
#settings h3:first-child{margin-top:4px}
#settings .st-rows p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:7px 0;border-bottom:1px solid #7580751f}
#settings .st-rows span{color:#9ba99f}#settings .st-rows b{font-weight:500;color:#e8e2c4;text-align:right}
#settings .st-note{color:#8d9e94;font-size:10px;letter-spacing:.5px;line-height:1.5;margin:8px 0}
#settings .st-btn{display:block;width:100%;margin:8px 0 0;padding:10px;font-size:10px;letter-spacing:2px}
#settings .st-btn.dim{opacity:.75}
#settings .st-label{color:#9ba99f;font-size:10px;margin:10px 0 6px}
#settings .st-sw{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
#settings .st-sw button{width:26px;height:26px;padding:0;border-radius:50%;background:var(--sw);border:2px solid #0a1413;box-shadow:0 0 0 1px #75807599}
#settings .st-sw button.on,#settings .st-pick.on{box-shadow:0 0 0 2px #f3e7a7}
#settings .st-pick{position:relative;width:26px;height:26px;border-radius:50%;overflow:hidden;background:conic-gradient(#f55,#fd5,#5f5,#5df,#55f,#f5f,#f55);box-shadow:0 0 0 1px #75807599;cursor:pointer;margin:0}
#settings .st-pick input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer;padding:0;border:0}
#settings .st-slide{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin:12px 0 0;color:#9ba99f;font-size:10px}
#settings .st-slide input{grid-column:1/3;width:100%;accent-color:#e6cf77;margin:0}
#settings .st-slide output{color:#f3e7a7}
#settings .st-chk{display:flex;align-items:center;gap:9px;margin:10px 0 0;color:#cfd8cb;font-size:11px;cursor:pointer}
#settings .st-chk input{accent-color:#e6cf77;width:15px;height:15px;margin:0}
#settings .st-prev{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:#050b0acc;border:1px solid #7580753a;padding:12px;font-size:calc(11px * var(--ps,1));letter-spacing:1.4px;color:var(--hc,#d8cfaa);opacity:var(--ho,1)}
#settings .st-prev b{font-weight:500;color:var(--hc,#f3e7a7);margin-left:6px}
#settings .st-prev .stam{display:inline-flex;align-items:center;gap:6px}
#settings .st-prev i{display:inline-block;width:48px;height:5px;border:1px solid #9b895155;background:#201b10;overflow:hidden}
#settings .st-prev em{display:block;width:82%;height:100%;background:var(--hc,#e6cf77)}
/* ---- v11 HUD: unified, smooth, customizable (variables set by hud.js) ---- */
:root{--hv:#f3e7a7;--hd:#c8c2a2;--ht:#efe9cc;--hs:1;--ho:1}
body.hudc{--hv:var(--hc);--hd:color-mix(in srgb,var(--hc) 64%,#0000);--ht:var(--hc)}
#hud,.coordinates,.location,header{transition:opacity .6s ease}
#hud{transform:scale(var(--hs));transform-origin:left bottom;opacity:var(--ho);isolation:isolate}
.coordinates{transform:scale(var(--hs));transform-origin:right bottom;opacity:var(--ho);isolation:isolate;font-variant-numeric:tabular-nums}
.location{transform:scale(var(--hs));transform-origin:right top;opacity:calc(.92 * var(--ho));isolation:isolate}
body.playing .location{opacity:calc(.92 * var(--ho))}
body.loc-quiet .location{opacity:calc(.4 * var(--ho))}
body.captured header,body.captured .location,body.captured #hud,body.captured .coordinates{opacity:.2}
/* soft scrims so the text melts into the scene instead of floating on it */
#hud::before,.coordinates::before,.location::before{content:"";position:absolute;z-index:-1;pointer-events:none}
#hud::before{inset:-46px -90px -34px -46px;background:radial-gradient(ellipse 75% 85% at 18% 88%,#040704c4,#0400 72%)}
.coordinates::before{inset:-30px -34px -22px -90px;background:radial-gradient(ellipse 80% 90% at 90% 90%,#040704a8,#0400 72%)}
.location::before{inset:-26px -30px -26px -90px;background:radial-gradient(ellipse 80% 90% at 92% 30%,#0407049a,#0400 72%)}
#hud .walk{display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;margin:0 0 15px;font-size:11px;letter-spacing:1.6px;max-width:calc(80vw / var(--hs));text-shadow:0 1px 6px #000c}
#hud .walk>span{display:inline-flex;align-items:center;white-space:nowrap;color:var(--hd)!important}
#hud .walk>span+span{margin-left:15px;padding-left:15px;position:relative}
#hud .walk>span+span::before{content:"";position:absolute;left:0;top:50%;height:11px;margin-top:-5px;width:1px;background:var(--hd);opacity:.32}
#hud b,#hud .objective b,#hud .staminaHud>b{color:var(--hv)!important;font-weight:500;margin-left:7px}
#hud .walk #nameplate{color:var(--ht)!important;letter-spacing:2px}
#hud .keyline{display:flex;gap:18px;font-size:11px;color:var(--hd)!important;text-shadow:0 1px 6px #000c;transition:opacity 1.4s ease}
#hud .keyline span{color:var(--hd)!important}
#hud .keyline kbd{color:var(--hv)!important;border-bottom-color:var(--hd)}
body.hint-dim #hud .keyline{opacity:.26}
.coordinates{gap:5px;text-shadow:0 1px 6px #000c}
.coordinates span,.coordinates span:first-child{color:var(--hd)!important}
.coordinates span:first-child{color:var(--hv)!important}
.location{text-shadow:0 2px 12px #000b}
.location .eyebrow,.location>span:last-child{color:var(--hd)!important}
.location h1,.location h1 b{color:var(--ht)!important}
/* stamina: smooth, state-coloured */
.staminaHud i{width:58px!important;height:4px!important;border:0!important;border-radius:3px;background:#ffffff1f!important;overflow:hidden;margin-left:2px}
.staminaHud em{border-radius:3px;background:var(--hv)!important;transition:width .32s cubic-bezier(.2,.8,.2,1),background-color .4s ease,box-shadow .4s ease!important;box-shadow:0 0 8px color-mix(in srgb,var(--hv) 55%,#0000)}
.staminaHud em[data-lv=mid]{background:#e3a94e!important;box-shadow:0 0 8px #e3a94e80}
.staminaHud em[data-lv=low]{background:#c9503f!important;box-shadow:0 0 8px #c9503f99;animation:stamLow .9s ease-in-out infinite}
@keyframes stamLow{50%{opacity:.55}}
/* evidence pips */
.pips{display:inline-flex;gap:5px;margin-left:11px;align-items:center}
.pips i{display:block;width:6px;height:6px;border:1px solid var(--hd);transform:rotate(45deg) scale(1);transition:background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.pips i.on{background:var(--hv);border-color:var(--hv);box-shadow:0 0 7px color-mix(in srgb,var(--hv) 70%,#0000)}
.pips i.pop{animation:pipPop .8s cubic-bezier(.2,.8,.2,1)}
@keyframes pipPop{0%{transform:rotate(45deg) scale(2.3)}100%{transform:rotate(45deg) scale(1)}}
/* value changes crossfade in; HUD eases in when the run starts */
.swap{animation:hudSwap .45s ease both}
@keyframes hudSwap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
#hud:not([hidden]) .walk{animation:hudIn .9s cubic-bezier(.2,.7,.2,1) both}
#hud:not([hidden]) .keyline{animation:hudIn .9s .18s cubic-bezier(.2,.7,.2,1) both}
@keyframes hudIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.hud-nokeys #hud .keyline,body.hud-nocoords .coordinates,body.hud-notitle .location{display:none!important}
/* header controls: quiet glass */
.tools button{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background-color .25s,border-color .25s,color .25s,transform .15s}
.tools button:hover{border-color:#e6cf7799;transform:translateY(-1px)}
/* settings panel eases in/out */
#settings{opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
#settings.open{opacity:1;transform:none;pointer-events:auto}
#settings section:not([hidden]){animation:hudSwap .25s ease both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

#glitchFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#glitchTear{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,#00fff020 0 2px,#0000 2px 5px),linear-gradient(90deg,#ff2a6d18,#0000 30%,#05d9e818 70%,#0000);animation:glTear .18s steps(2) infinite}
@keyframes glTear{0%{transform:translate(0,0)}50%{transform:translate(-6px,2px) skewX(1.5deg)}100%{transform:translate(5px,-3px)}}
body.gl-out #game canvas,body.gl-out #mp{animation:glOut 1.4s ease-in forwards}
@keyframes glOut{0%{filter:none;transform:none}30%{filter:hue-rotate(90deg) saturate(3) contrast(1.5);transform:translateX(-8px) skewX(2deg)}60%{filter:hue-rotate(200deg) invert(.5) contrast(2);transform:translateX(12px) scaleY(1.03)}100%{filter:brightness(3) contrast(3);transform:scale(1.08)}}
#won .stats{color:#d7cda9;letter-spacing:1px;font-size:12px;margin:0 0 18px}
#won .soon{letter-spacing:6px;color:#8ff;font-size:13px;margin:0 0 12px}
#won{overflow:auto}#won h2{font-size:clamp(34px,9vh,55px)}

/* ---- v13: inventory, light parts, cartograph ---- */
#inventory{position:fixed;left:36px;top:122px;z-index:9;width:340px;max-width:calc(100vw - 56px);max-height:calc(100dvh - 250px);overflow:auto;padding:18px 18px 20px;background:linear-gradient(#1d1809f2,#141006f5);border:1px solid #c4b57855;box-shadow:0 18px 60px #000a;color:#f4efd5;font-size:12px;animation:invIn .18s ease-out}
#inventory[hidden]{display:none}
@keyframes invIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.inv-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.inv-head b{font:500 26px/1 Barlow Condensed,sans-serif;letter-spacing:4px}
.inv-head span{color:#b9ac7c;font-size:10px;letter-spacing:1px}
.inv-label{letter-spacing:2px;color:#d9c47a;font-size:10px;margin:14px 0 8px}
.inv-equip{display:flex;gap:12px;align-items:center;background:#0d0a03aa;border:1px solid #c4b57833;padding:8px}
#invLight{width:112px;height:112px;flex:none;background:radial-gradient(#3a3216,#0000 72%)}
.inv-equip-info h3{margin:0 0 6px;font:500 20px/1 Barlow Condensed,sans-serif;letter-spacing:3px}
.inv-equip-info p{margin:0 0 8px;color:#cdbf92;font-size:11px;line-height:1.55}
.inv-sw{display:flex;gap:5px}.inv-sw i{width:13px;height:13px;border:1px solid #fff5;border-radius:2px}.inv-sw i.beam{border-radius:50%;box-shadow:0 0 8px currentColor}
.inv-kinds{display:flex;gap:6px;margin-top:8px}.inv-kinds button{flex:1;padding:8px 4px;font-size:10px;letter-spacing:1px}
.inv-kinds button.on{background:#ebd47e;color:#302510;border-color:#f8e4a2}
.inv-row{display:flex;gap:6px;margin-top:6px}.inv-row button{flex:1;padding:9px 6px;font-size:10px;letter-spacing:1px}.inv-row button.off{color:#a9a07c}
#inventory kbd{border:1px solid #c4b57866;border-bottom-width:2px;padding:1px 5px;margin-left:4px;font-size:9px;color:#efe3ad}
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.inv-slot{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;background:#0d0a03aa;border:1px solid #c4b57826;color:#8f8560;font-size:9px;letter-spacing:1px}
.inv-slot.full{color:#f4efd5;border-color:#c4b57866}.inv-slot.sel{border-color:#f3d98a;box-shadow:0 0 0 1px #f3d98a88 inset}
.inv-ic{width:44px;height:44px}
.inv-detail{margin-top:10px;padding:10px;background:#0d0a03aa;border:1px solid #c4b57826;min-height:54px}
.inv-detail h4{margin:2px 0 6px;font:500 20px/1 Barlow Condensed,sans-serif;letter-spacing:3px}.inv-detail p{margin:0 0 10px;color:#cdbf92;font-size:11px;line-height:1.6}
.inv-tag{font-size:9px;letter-spacing:2px;color:#8fe0d0}.inv-empty{color:#a9a07c!important;margin:0!important}
.inv-detail button{padding:9px 12px;font-size:10px;letter-spacing:1px}
#invToast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:12;text-align:center;pointer-events:none;background:#1d1809ee;border:1px solid #f3d98a88;padding:12px 22px;letter-spacing:2px;color:#ffefa8;box-shadow:0 0 40px #f3d98a22}
#invToast[hidden]{display:none}#invToast b{display:block;font:500 18px Barlow Condensed,sans-serif;letter-spacing:4px}#invToast span{display:block;margin-top:5px;font-size:10px;color:#cdbf92;letter-spacing:1px}
#invToast.in{animation:toastIn .35s ease-out}@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.light-parts{grid-column:1/-1;margin-top:2px;padding-top:10px;border-top:1px solid #ac985944}
#lightZoom{display:block;width:100%;height:170px;margin-bottom:10px;background:radial-gradient(#4a3f1c,#0000 75%)}
.lp-head{display:flex;justify-content:space-between;align-items:center;letter-spacing:2px;font-size:11px;color:#f3d98a;margin-bottom:10px}.lp-head button{padding:6px 10px;font-size:10px}
.lp-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lp-fields label{margin:0;font-size:13px;letter-spacing:.2px}.lp-fields input[type=color]{height:38px;margin-top:6px;padding:4px;cursor:pointer}
/* the cartograph: a crude device, not a map */
#mapPanel{background:linear-gradient(#26241a,#171610)!important;border:2px solid #4b4837!important;border-radius:14px!important;padding:16px 16px 12px!important;box-shadow:0 20px 80px #000c,inset 0 0 0 4px #0b0b08!important}
#mapPanel>div:first-child{letter-spacing:3px;color:#b8b48a;font-size:10px;margin-bottom:8px}
#map{border:6px solid #0b0b08;border-radius:6px;box-shadow:inset 0 0 30px #000;filter:contrast(1.08) saturate(.85)}
#mapPanel p{color:#8f9a6a!important;letter-spacing:2px;margin:8px 0 0!important}#mapPanel b{color:#fff1a7!important}
@media (width<=700px){#inventory{left:12px;top:96px;width:calc(100vw - 24px);max-height:calc(100dvh - 200px)}}
#mapPanel{top:196px!important;width:min(430px,92vw)!important;max-height:calc(100dvh - 210px);overflow:auto}
.inv-slot{aspect-ratio:1.3}
#inventory{max-height:calc(100dvh - 215px)}