:root{color-scheme:dark;--gold:#d8a94a;--teal:#65c8c0;--bone:#f0e6d2;--void:#0c0708}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--void);font-family:Inter,Segoe UI,sans-serif;color:var(--bone);overflow:hidden}
#game-shell{position:relative;width:100vw;height:100dvh;display:grid;place-items:center;background:#0c0708}
#game{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}

.hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;text-shadow:0 2px 8px #000}
.hud strong{display:block;color:var(--gold);font-family:Georgia,serif;letter-spacing:.1em}
.hud #objective{display:block;font-size:.72rem;letter-spacing:.13em;margin-top:5px;max-width:340px;line-height:1.5;opacity:.9}
.meters{display:flex;gap:10px;align-items:center;font-size:.67rem;letter-spacing:.12em}
.meters i{width:110px;height:5px;background:linear-gradient(90deg,var(--teal) 0%,#403a34 0);display:block}
.meters button{pointer-events:auto;background:#100d09cc;border:1px solid #6f6a54;color:var(--bone);width:42px;height:42px;font-weight:bold}
.meters input[type=range]{pointer-events:auto;width:78px;accent-color:var(--teal);background:transparent}

.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;background:radial-gradient(circle at 50% 45%,#12100dc4,#070505f2 70%);z-index:4}
.panel[hidden]{display:none}
.eyebrow{color:var(--teal);letter-spacing:.28em;font-size:.72rem}
.panel h1,.panel h2{font-family:Georgia,serif;color:var(--gold);font-size:clamp(1.8rem,5.4vw,4.2rem);max-width:940px;margin:.2em}
.panel p{max-width:680px;line-height:1.6}
.panel b{color:var(--teal);font-weight:600}
.panel button{margin:22px 0 12px;padding:15px 26px;border:1px solid var(--gold);background:#1a140c;color:var(--bone);letter-spacing:.16em;font-weight:700;cursor:pointer}
.panel small{opacity:.75}

#caption{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);max-width:min(900px,90vw);padding:11px 20px;background:#070505dc;border-left:3px solid var(--gold);font-family:Georgia,serif;font-size:clamp(1rem,2vw,1.32rem);line-height:1.5;text-align:center;opacity:0;transition:opacity .35s;z-index:3}
#caption.show{opacity:1}

.touch{display:none;position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:8px;right:8px;justify-content:space-between;z-index:3;pointer-events:none}
.touch div{display:flex;gap:6px;pointer-events:auto}
.touch button{min-width:54px;min-height:50px;padding:8px 10px;border:1px solid #b79a53;background:#0b0907c9;color:var(--bone);font-size:.62rem;font-weight:800;touch-action:none}
@media(pointer:coarse),(max-width:800px){.touch{display:flex}#caption{bottom:80px}.hud{top:10px;left:12px;right:12px}.hud #objective{max-width:190px}.meters span{display:none}.meters i{width:62px}.meters input[type=range]{width:54px}.panel small{display:none}}