:root{color-scheme:dark;--gold:#d8a94a;--teal:#65c8c0;--bone:#f0e6d2;--void:#08080a}
*{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:#08080a}
#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;transition:opacity 1.4s}
.hud.faded{opacity:0}
.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(--bone) 0%,#333 0);display:block}
.meters button{pointer-events:auto;background:#100d09cc;border:1px solid #66646a;color:var(--bone);width:42px;height:42px;font-weight:bold}
.meters input[type=range]{pointer-events:auto;width:78px;accent-color:var(--bone);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%,#0c0c10c4,#050506f2 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.7rem,5.2vw,4rem);max-width:960px;margin:.2em}
.panel p{max-width:700px;line-height:1.6}
.panel button{margin:22px 0 12px;padding:15px 26px;border:1px solid var(--gold);background:#161620;color:var(--bone);letter-spacing:.16em;font-weight:700;cursor:pointer}
.panel small{opacity:.75}

.choicebar{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);display:flex;gap:16px;z-index:3}
.choicebar[hidden]{display:none}
.choicebar button{pointer-events:auto;padding:13px 22px;border:1px solid #7a7660;background:#0c0c12e0;color:var(--bone);letter-spacing:.1em;font-size:.82rem;font-weight:600;cursor:pointer;font-family:Georgia,serif}
.choicebar button b{color:var(--teal);font-weight:700}
.choicebar #enter{border-color:var(--teal)}
.choicebar #flee{border-color:#8a6a6a}

#caption{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);max-width:min(900px,90vw);padding:11px 20px;background:#050506dc;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:5;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 #9a9680;background:#0b0b0fc9;color:var(--bone);font-size:.62rem;font-weight:800;touch-action:none}
@media(pointer:coarse),(max-width:800px){.touch{display:flex}#caption{bottom:150px}.choicebar{bottom:150px;flex-direction:column;gap:8px}.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}}