:root {
  --ember: #ff8c3a; --amber: #ffb054; --teal: #35c8b0; --night: #14101a;
  --sand: #c9b8a0; --panel: rgba(22, 16, 24, 0.86);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.gamepage { overflow: hidden; background: #14101a; font-family: "Trebuchet MS", Verdana, sans-serif; color: var(--sand); }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud-top { position: absolute; top: 12px; left: 14px; width: 240px; }
.hud-right { left: auto; right: 14px; text-align: right; width: auto; }
.bar-label { font-size: 11px; letter-spacing: 0.2em; color: var(--amber); }
.bar { height: 14px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,140,58,0.5); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.fill { height: 100%; width: 100%; transition: width 0.15s; }
.fill.hp { background: linear-gradient(90deg, #ff4f2a, #ffb054); }
.fill.boss { background: linear-gradient(90deg, #b04fd0, #ff6a2a); }
.score { font-size: 20px; color: var(--amber); font-weight: bold; letter-spacing: 0.1em; }
.tiny { font-size: 11px; letter-spacing: 0.18em; color: var(--teal); margin-top: 2px; }
.hud-boss { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(420px, 46vw); text-align: center; }
#bossName { font-size: 12px; letter-spacing: 0.3em; color: var(--amber); }
.bossbar { height: 10px; }
.flash { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 26px; letter-spacing: 0.2em; opacity: 0; color: var(--amber); text-shadow: 0 0 18px rgba(255,140,58,0.8); }
.flash.warn { color: #ffd16a; } .flash.good { color: var(--teal); }
@keyframes flashfade { 0% { opacity: 0; transform: translateX(-50%) scale(0.9); } 15% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

#touch-ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
@media (pointer: coarse), (max-width: 820px) { #touch-ui { display: block; } }
#joy { position: absolute; left: 18px; bottom: 18px; width: 120px; height: 120px; border-radius: 50%;
  background: rgba(20, 14, 20, 0.45); border: 2px solid rgba(255, 140, 58, 0.45); pointer-events: auto; touch-action: none; }
#joyknob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(255, 140, 58, 0.55); border: 2px solid rgba(255, 200, 120, 0.7); }
.touchbtns { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 14px; pointer-events: auto; }
.touchbtns button { width: 86px; height: 86px; border-radius: 50%; font-weight: bold; letter-spacing: 0.1em;
  background: rgba(20, 14, 20, 0.55); color: var(--amber); border: 2px solid rgba(255, 140, 58, 0.6); font-size: 14px; touch-action: none; }
#btnDash { color: var(--teal); border-color: rgba(53, 200, 176, 0.6); }

#overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 12, 24, 0.62), rgba(10, 6, 12, 0.9)); }
.panel { max-width: 480px; width: calc(100% - 40px); text-align: center; padding: 28px 26px; border-radius: 14px;
  background: var(--panel); border: 1px solid rgba(255, 140, 58, 0.4); box-shadow: 0 0 60px rgba(255, 110, 40, 0.25); }
.panel h2 { margin: 0 0 12px; letter-spacing: 0.35em; color: var(--amber); font-size: 26px; }
.muted { line-height: 1.65; font-size: 14px; color: var(--sand); }
.muted b { color: var(--teal); }
.btn { display: inline-block; margin-top: 18px; padding: 12px 34px; font-size: 15px; letter-spacing: 0.25em; font-weight: bold;
  background: linear-gradient(135deg, #ff8c3a, #ff5a1e); color: #1a0f08; border: none; border-radius: 8px; cursor: pointer; }
.btn:hover { filter: brightness(1.15); }