* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #060409; }
body { font-family: Georgia, "Times New Roman", serif; color: #e8ddc8; }
#stage, #stage canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 14px; flex-wrap: wrap; text-shadow: 0 2px 4px #000; }
.hud-item { background: rgba(10,7,16,0.55); border: 1px solid #3a2f46; border-radius: 8px; padding: 6px 12px; font-size: 15px; letter-spacing: 1px; }
#hud-hearts { color: #ff5a4a; font-size: 18px; }
#hud-fuel { position: absolute; left: 12px; bottom: 96px; width: 170px; height: 20px; border: 1px solid #3a2f46; border-radius: 10px; background: rgba(10,7,16,0.55); overflow: hidden; }
#hud-fuel span { position: absolute; width: 100%; text-align: center; top: 1px; font-size: 12px; letter-spacing: 3px; color: #f4e9d0; text-shadow: 0 1px 3px #000; }
#hud-fuel-fill { height: 100%; width: 100%; background: #e8a53c; transition: width .3s; }
#hud-compass { position: absolute; top: 64px; left: 50%; font-size: 26px; color: #ffd76a; text-shadow: 0 0 10px #b87a20; transition: opacity .3s; }
#hud-msg { position: absolute; top: 20%; width: 100%; text-align: center; font-size: 21px; color: #f2e3b8; text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity .5s; padding: 0 16px; }
#hud-prompt { position: absolute; bottom: 128px; width: 100%; text-align: center; font-size: 16px; color: #cfe6ff; text-shadow: 0 1px 6px #000; }
#crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,0.35); font-size: 18px; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(20,0,30,0.85) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: rgba(160,10,10,0.55); transition: opacity .25s; }
.screen { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20,12,30,0.86), rgba(4,2,8,0.97)); }
.screen[hidden] { display: none; }
.panel { max-width: 560px; width: calc(100% - 32px); max-height: 100%; overflow: auto; background: rgba(12,8,18,0.92);
  border: 1px solid #4a3a5e; border-radius: 14px; padding: 28px 26px; text-align: center; }
.panel h1 { font-size: clamp(28px, 6vw, 44px); letter-spacing: 6px; color: #ffd76a; text-shadow: 0 0 24px rgba(255,180,60,0.4); }
.panel .tag { margin: 12px 0 16px; color: #bdb0c8; font-style: italic; line-height: 1.45; }
.panel ul { text-align: left; margin: 0 auto 20px; max-width: 470px; list-style: none; }
.panel li { margin: 7px 0; font-size: 14.5px; line-height: 1.45; color: #d8cfd8; }
.panel li b { color: #ffd76a; }
.cta { display: inline-block; border: 1px solid #c9903a; border-radius: 10px; padding: 13px 34px; font: inherit;
  font-size: 18px; letter-spacing: 2px; color: #1a0f06; background: linear-gradient(#ffce6a, #e09a30); cursor: pointer; }
.cta:hover { filter: brightness(1.15); }
.linkhome { display: block; margin-top: 16px; color: #9a86b8; }
#touch-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#look-pad { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#stick-pad { position: absolute; left: 18px; bottom: 18px; width: 128px; height: 128px; border-radius: 50%;
  border: 2px solid rgba(255,215,106,0.35); background: rgba(10,7,16,0.4); pointer-events: auto; touch-action: none; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(255,215,106,0.4); border: 1px solid rgba(255,215,106,0.7); }
.tbtn { position: absolute; width: 74px; height: 74px; border-radius: 50%; pointer-events: auto; touch-action: none;
  border: 2px solid rgba(255,215,106,0.45); background: rgba(20,12,26,0.55); color: #ffd76a;
  display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: 1px; }
#btn-sprint { right: 20px; bottom: 116px; }
#btn-interact { right: 104px; bottom: 24px; }
@media (pointer: fine) { #touch-ui { display: none; } }
@media (pointer: coarse) { #hud-fuel { bottom: 160px; } #hud-prompt { bottom: 190px; } }