:root{color-scheme:dark;--ink:#0c1716;--paper:#172421;--gold:#ddc58e;--cream:#f3eddb;--muted:#a3afa5;--line:#ddc58e30;--green:#90bbaa;font-family:Arial,Helvetica,sans-serif;font-size:15px}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#ffffff04;padding:13px 18px;transition:background .2s,border-color .2s}
button:hover{background:#ddc58e18;border-color:var(--gold)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
button:disabled{opacity:.4;cursor:wait}
[hidden]{display:none!important}
canvas#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 20px #0008;background:linear-gradient(0deg,#0612108c,transparent 23%,transparent 80%,#0612104a)}
#damage,#flash{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0}
#damage{background:radial-gradient(ellipse,transparent 30%,#a22622a0)}
#flash{background:#ddfff0;mix-blend-mode:screen}
.screen{position:fixed;inset:0;z-index:9}
#title{background:linear-gradient(90deg,#081412f5 0%,#091512e6 33%,#08151240 72%,#09151320);display:flex;align-items:center}
.title-content{width:540px;max-width:55%;margin:0 0 38px 7vw}
.eyebrow{font-size:.68rem;letter-spacing:.18em;font-weight:600;color:var(--gold);line-height:1.5}
.sigil{font-size:25px;vertical-align:middle;margin-right:12px}
h1{font:400 clamp(60px,7.4vw,114px)/.95 Georgia,'Times New Roman',serif;letter-spacing:.08em;margin:27px 0 30px}
h1 span{display:block;font-size:clamp(20px,2.2vw,34px);font-style:italic;letter-spacing:.055em;margin-top:17px;color:var(--gold)}
.gold-line{height:1px;width:64px;background:var(--gold);margin:24px 0}
.lead{font:400 23px/1.5 Georgia,serif}
.synopsis{font-size:.9rem;line-height:1.8;max-width:400px;color:#b4bfb5;margin:0 0 27px}
.primary{background:var(--gold);border-color:var(--gold);color:#18221b;display:flex;justify-content:space-between;align-items:center;width:320px;max-width:100%;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:17px 22px}
.primary:hover{background:#f1dbac;color:#101b18}
.primary span{font-size:24px;line-height:16px}
.primary+ .primary{margin-top:10px;background:transparent;color:var(--gold)}
.mode-label{display:block;font-size:.68rem;color:var(--muted);margin-top:20px}
select{color:var(--cream);background:#172421;border:1px solid var(--line);padding:7px 10px;margin-left:7px;max-width:95%}
.micro{font-size:.65rem;color:var(--muted);line-height:1.7;margin-top:14px}
.title-location{position:absolute;right:5vw;bottom:130px;text-align:right;text-shadow:0 2px 10px #000}
.title-location span{color:var(--gold);font-size:.65rem;letter-spacing:.18em}
.title-location strong{display:block;font:italic 24px/1.45 Georgia,serif;margin:15px 0}
.title-location small{font-size:.65rem;color:#c1c8bb}
.title-footer{position:absolute;bottom:28px;left:7vw;right:5vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px;font-size:.58rem;letter-spacing:.2em;color:var(--muted)}
.title-footer b{color:var(--gold);margin:0 13px}
.text-button{border:0;font-size:.72rem;padding:6px;letter-spacing:.04em}
.load-track{height:2px;background:#fff2;margin-top:14px;width:320px}
.load-track i{display:block;height:100%;width:5%;background:var(--gold);transition:width .4s}
#loading{font-size:.75rem;color:var(--gold)}
#fatal{color:#f7af99;line-height:1.6;font-size:.85rem;max-width:430px}
#hud{position:fixed;inset:0;pointer-events:none}
.hud-top{position:absolute;top:32px;left:36px;right:36px;display:flex;justify-content:space-between;text-shadow:0 2px 12px #000}
.hud-top>div:first-child{max-width:60%}
.hud-top p{font-size:.83rem;color:#e0e2d5;margin:7px 0;line-height:1.5}
.location{text-align:right}
.location strong{display:block;font:22px Georgia,serif;margin:7px 0}
#safe{font-size:.6rem;letter-spacing:.12em;color:var(--green)}
.hud-bottom{position:absolute;bottom:29px;left:36px;right:36px;display:flex;align-items:end;justify-content:space-between;gap:24px;text-shadow:0 1px 5px #000}
.vitals,.light-charge{width:200px}
.eyebrow b{float:right;font-size:.75rem;font-weight:400}
.meter{height:4px;background:#fff2;width:100%;margin:8px 0}
.meter i{height:100%;display:block;background:var(--gold);width:100%;transition:width .12s}
.meter.health i{background:var(--green)}
.meter.stamina{height:2px;opacity:.7}
.vitals small,.light-charge small{font-size:.6rem;color:#c1c8bb;line-height:1.5}
.shortcuts{display:flex;pointer-events:auto;gap:3px}
.shortcuts button{background:#101c1cb8;font-size:.65rem;border:0;padding:10px 9px;white-space:nowrap}
.shortcuts button:hover{background:#293c30}
kbd{font:500 .65rem Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:3px 5px;border:1px solid #eadfc94d;background:#0b151699;color:var(--gold);border-radius:3px;margin-right:5px}
#note-count{color:var(--gold);font-size:.6rem}
#crosshair{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#eadcbbc0;transform:translate(-50%,-50%);box-shadow:0 0 6px #000}
#crosshair.active{width:18px;height:18px;background:transparent;border:1px solid var(--gold)}
#prompt{position:absolute;top:57%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:var(--cream);background:#0b171bdc;border:1px solid var(--line);padding:11px 20px;font-size:.82rem;white-space:nowrap}
#prompt kbd{font-size:.85rem}
#toast{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);font:italic 20px/1.5 Georgia,serif;text-align:center;width:min(600px,80%);text-shadow:0 2px 8px #000;opacity:0;transition:opacity .3s;padding:15px;background:linear-gradient(90deg,transparent,#10201bc9,transparent)}
#threat{position:absolute;top:120px;left:50%;transform:translateX(-50%);font-size:.68rem;letter-spacing:.12em;color:#e8ad98;text-shadow:0 1px 5px #000}
#ritual{position:absolute;top:160px;left:50%;transform:translateX(-50%);width:280px;text-align:center;font-size:.7rem;letter-spacing:.12em}
#ritual small{font-size:.65rem;letter-spacing:0}
#capture{pointer-events:auto;position:absolute;top:80px;left:50%;transform:translateX(-50%);background:#122521e8;font-size:.72rem}
.modal{position:fixed;inset:0;z-index:12;background:#06100ed4;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:24px}
.paper{width:620px;max-width:100%;max-height:90vh;overflow:auto;background:linear-gradient(130deg,#202f29,#121f1c);border:1px solid #b99e6455;padding:30px 40px 38px;box-shadow:0 20px 100px #0008;position:relative}
.paper:before{content:'';position:absolute;top:0;left:40px;width:48px;height:2px;background:var(--gold)}
.paper>header{display:flex;align-items:center;justify-content:space-between}
.close{border:0;padding:0 4px;font:28px Arial;color:var(--muted)}
h2{font:400 34px/1.2 Georgia,serif;margin:18px 0 24px}
#modal-body p{line-height:1.85;font-size:.9rem;color:#d1d7c9}
#modal-body .letter{font:20px/1.85 Georgia,serif;color:#e9e3ce}
#modal-body .fine{font-size:.73rem;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.actions button{flex:1}
.note-list{display:grid;gap:7px}
.note-list button{display:flex;justify-content:space-between;text-align:left;font-size:.85rem}
.note-list span{color:var(--gold)}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.item-card{padding:22px 14px;border:1px solid var(--line);background:#ffffff03;text-align:center}
.item-card b{display:block;font-size:30px;color:var(--gold);margin-bottom:12px}
.item-card span{font-size:.78rem}
.puzzle-controls{display:flex;gap:12px;justify-content:center;margin:26px 0}
.switch{min-width:90px;text-align:center;padding:16px 10px}
.switch b{display:block;margin:13px auto;width:17px;height:38px;background:#08120f;border:1px solid var(--line);border-radius:12px;position:relative}
.switch b:after{content:'';position:absolute;bottom:3px;left:3px;width:9px;height:13px;border-radius:5px;background:#768175}
.switch.on b:after{top:3px;bottom:auto;background:var(--gold);box-shadow:0 0 14px #d5bd7880}
.switch span{font-size:.66rem}
.switch small{font-size:.58rem;color:var(--muted)}
.code-input{letter-spacing:.45em;text-align:center;font:36px Georgia,serif;background:#091410;border:1px solid var(--line);padding:15px;width:220px;color:var(--gold)}
.puzzle-error{min-height:30px;color:#efb6a0!important;font-size:.8rem!important}
.sequence{height:30px;text-align:center;color:var(--gold);letter-spacing:.1em}
.bell,.valve{width:100px;padding:16px 6px}
.bell b,.valve b{font:26px Georgia,serif;display:block;margin-bottom:10px}
.bell span,.valve span{font-size:.65rem}
.bell.played,.valve.played{background:#d4bb8130;border-color:var(--gold)}
.settings label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.8rem;margin:20px 0}
.settings input{accent-color:var(--gold);width:180px}
.controls-grid{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:.83rem;align-items:center;margin:25px 0}
.controls-grid span{color:var(--muted)}
#map-canvas{width:100%;height:auto;background:#0a1512;border:1px solid var(--line)}
.map-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:.66rem;color:var(--muted);margin-top:15px}
.map-legend b{color:var(--gold)}
.ending-number{font:64px Georgia;color:var(--gold)}
#touch{position:fixed;inset:0;pointer-events:none;z-index:5}
#joystick{position:absolute;bottom:95px;left:30px;border:1px solid #e8d8b144;background:#0a18174d;width:110px;height:110px;border-radius:50%;pointer-events:auto;touch-action:none}
#joystick i{position:absolute;left:35px;top:35px;width:40px;height:40px;background:#ddc58e55;border:1px solid #eadcb088;border-radius:50%}
#touch-look{position:absolute;left:42%;right:0;top:12%;bottom:190px;pointer-events:auto;touch-action:none}
.touch-actions{position:absolute;bottom:75px;right:24px;display:grid;grid-template-columns:repeat(3,70px);gap:7px;pointer-events:auto}
.touch-actions button{background:#10201bd9;padding:12px 4px;font-size:.7rem;touch-action:none}
.touch-mode .shortcuts{display:none}
.touch-mode #capture{display:none!important}
.touch-mode #prompt{top:63%}
.touch-mode .hud-bottom{bottom:18px}
.touch-mode .vitals,.touch-mode .light-charge{width:140px}
@media(max-width:850px){.title-content{margin-left:6vw;max-width:80%;width:500px}
.title-location{display:none}
.title-footer{left:6vw}
.shortcuts button{font-size:0}
.shortcuts kbd{font-size:.62rem;margin:0}
.shortcuts #note-count{display:none}
.hud-bottom,.hud-top{left:20px;right:20px}
.hud-bottom{gap:10px}
.vitals,.light-charge{width:155px}
.paper{padding:20px 25px 28px}
.hud-top p{max-width:350px}
.synopsis{font-size:.85rem}
}
@media(max-height:720px){h1{font-size:65px;margin:15px 0}
h1 span{font-size:24px}
.title-content{margin-bottom:30px}
.lead{font-size:19px;margin:12px 0}
.gold-line{margin:15px 0}
.synopsis{margin-bottom:16px}
.title-footer{bottom:16px}
.mode-label{margin-top:12px}
.micro{margin-top:9px}
.title-content .eyebrow{font-size:.6rem}
}
@media(max-width:520px){.title-content{max-width:88%;margin-bottom:55px}
h1{font-size:64px}
.title-footer span{font-size:.5rem}
.title-footer b{margin:0 5px}
.mode-label{font-size:.62rem}
select{font-size:.69rem}
.paper{padding:18px 20px 25px}
.puzzle-controls{gap:6px}
.switch{min-width:65px}
.location strong{font-size:16px}
.hud-top .eyebrow{font-size:.57rem}
.hud-top p{font-size:.7rem}
.hud-top{top:20px}
.light-charge small{font-size:.52rem}
.title-footer .text-button{font-size:.62rem}
h2{font-size:28px}
}


#continue[hidden]+#start{background:var(--gold);color:#18221b}

#continue[hidden]+#start:hover{background:#f1dbac}

@media(max-height:480px){#title{overflow-y:auto;align-items:flex-start}
.title-content{margin-top:30px;margin-bottom:100px}
.title-footer{position:fixed;background:#0b1713;bottom:0;padding:12px 0;}
.title-content h1{font-size:55px}
.title-content .synopsis{display:none}
}


.modal:has(#map-canvas) .paper{width:960px}
#map-canvas{max-height:calc(90vh - 245px);width:auto;max-width:100%;display:block;margin:auto;object-fit:contain}
.touch-mode .light-charge small{display:none}