#game { position: fixed; inset: 0; display: none; background: #07080c; z-index: 1; }
#game.on { display: block; }
#world, #world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; font: 600 12px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .06em; color: #f3e6c8;
  text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: nowrap; padding: 3px 7px; border-radius: 3px; background: rgba(10,10,16,.35); transition: opacity .2s; will-change: transform; }
.tag.me { color: #ffd98a; } .tag.npc { color: #cdd8e8; font-weight: 500; font-size: 11px; }
#hud { position: absolute; top: 14px; right: 18px; text-align: right; font: 12px/1.6 "Segoe UI", system-ui, sans-serif; color: #c9c0aa; letter-spacing: .08em; text-shadow: 0 1px 3px #000; }
#hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0; font: 11px "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; color: #d9cfb8; opacity: .55; text-shadow: 0 1px 3px #000; text-transform: uppercase; }
.nohud #hud, .nohud #hint, .nohud #labels { display: none; }
#place { position: absolute; left: 0; right: 0; top: 26%; text-align: center; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; color: #f5e6c4; text-shadow: 0 2px 18px #000, 0 0 40px rgba(0,0,0,.8); }
#place.show { opacity: 1; }
#place span { display: block; font: 13px "Segoe UI", system-ui, sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #d9b24a; }
#place h2 { margin: 10px 0 12px; font: 400 clamp(44px, 8vw, 96px)/1 Georgia, "Times New Roman", serif; letter-spacing: .22em; text-indent: .22em; }
#place i { display: block; width: min(320px, 50vw); height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, #d9b24a, transparent); }

/* loading screen: shown while the valley is built in stages, then lifts */
#loading { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; text-align: center; color: #f5e6c4;
  background: radial-gradient(ellipse at 50% 60%, #1c1a26 0%, #0b0a10 70%); transition: opacity 1.2s ease; }
#loading.on { display: flex; } #loading.done { opacity: 0; pointer-events: none; }
.ld-inner { width: min(460px, 80vw); }
.ld-eyebrow { margin: 0; font: 12px "Segoe UI", system-ui, sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #d9b24a; text-indent: .5em; }
#loading h2 { margin: 12px 0 28px; font: 400 clamp(40px, 8vw, 76px)/1 Georgia, "Times New Roman", serif; letter-spacing: .22em; text-indent: .22em; text-shadow: 0 2px 22px rgba(217,178,74,.25); }
.ld-track { height: 3px; background: rgba(245,230,196,.12); border-radius: 2px; overflow: hidden; }
#loadbar { height: 100%; width: 0; background: linear-gradient(90deg, #8a6a24, #f0cf7a); box-shadow: 0 0 12px rgba(240,207,122,.6); transition: width .25s ease-out; }
#loadstage { margin: 16px 0 0; font: italic 14px Georgia, serif; letter-spacing: .08em; color: #b9ad92; min-height: 1.4em; }
#fps { white-space: pre; }
/* title card on arrival */
#place.show { opacity: 1; }
#place h2 { background: linear-gradient(180deg, #fff4d8 10%, #e9c978 60%, #b8913f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(0,0,0,.85)); }
/* graphics options panel (key O) */
#options { position: absolute; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; background: rgba(8,8,12,.55); }
#options.on { display: flex; }
.obox { width: min(420px, 90vw); padding: 18px 22px 14px; background: rgba(22,20,28,.94); color: #eadfc4; border: 1px solid rgba(217,178,74,.35); border-radius: 8px; font: 13px/1.4 "Segoe UI", system-ui, sans-serif; }
.obox h3 { margin: 0 0 10px; font: 400 22px Georgia, serif; letter-spacing: .12em; color: #f2d58a; }
.orow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.orow input[type=range] { width: 170px; accent-color: #d9b24a; } .orow output { width: 38px; text-align: right; color: #c9b98a; font-variant-numeric: tabular-nums; }
.orow select { background: #2a2630; color: #eadfc4; border: 1px solid #4a4250; border-radius: 4px; padding: 3px 6px; }
.obtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .obtns button { background: #3a3140; color: #f2e4c0; border: 1px solid #5a4e60; padding: 5px 14px; border-radius: 4px; cursor: pointer; }
.ohint { margin: 8px 0 0; font-size: 11px; opacity: .55; text-align: right; }