:root {
  --bg: #0c0b09;
  --surface: #161410;
  --raised: #1f1c17;
  --border: #2e2b26;
  --fg: #e8e2d6;
  --muted: #9a9488;
  --subtle: #5c574e;
  --accent: #c4a574;
  --ok: #6b8f71;
  --danger: #b54a3a;
  --warn: #c4a574;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: "IBM Plex Sans", system-ui, sans-serif; }
#app { position: relative; width: 100%; height: 100%; }
#game { display: block; width: 100%; height: 100%; touch-action: none; }

.hidden { display: none !important; }

.watch-chromeless .hud-top,
.watch-chromeless .hud-bottom { display: none !important; }

/* HUD */
#hud { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hud-top, .hud-bottom { pointer-events: auto; background: linear-gradient(180deg, rgba(12,11,9,0.92), rgba(12,11,9,0.55));
  padding: 0.75rem 1rem; }
.hud-bottom { background: linear-gradient(0deg, rgba(12,11,9,0.95), rgba(12,11,9,0.7)); }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 1px solid rgba(46,43,38,0.6); }
.name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; }
.meta { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--subtle); margin-top: 0.15rem; }

.bars { display: grid; gap: 0.4rem; max-width: 22rem; }
.bar { display: grid; grid-template-columns: 2.4rem 1fr 3.5rem; align-items: center; gap: 0.5rem;
  font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--muted); }
.track { height: 0.45rem; border-radius: 99px; background: var(--raised); overflow: hidden; }
.track i { display: block; height: 100%; width: 100%; background: var(--ok); border-radius: 99px;
  transition: width 0.2s ease; }
.track.light i { background: var(--warn); }
.stats { margin-top: 0.45rem; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--subtle); }
.log { list-style: none; margin-top: 0.55rem; max-height: 4.2rem; overflow: hidden;
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; line-height: 1.35; color: var(--muted); }
.log li.bad { color: var(--danger); }
.log li.good { color: var(--ok); }
.log li.lore { color: var(--fg); }

@media (max-width: 800px) {
  .log { max-height: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}