: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; }

.overlay { position: absolute; inset: 0; pointer-events: none; }
.overlay > * { pointer-events: auto; }
.hidden { display: none !important; }
button:focus-visible { outline: 3px solid #f4d79f; outline-offset: 3px; }

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

/* Title */
#title { display: grid; place-items: center; background:
  radial-gradient(ellipse at 50% 30%, rgba(40,34,26,0.9), transparent 55%),
  linear-gradient(180deg, #0c0b09 0%, #16120e 100%); }
.title-card { max-width: 28rem; padding: 2rem; text-align: center; }
.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted); }
.title-card h1 { margin-top: 0.75rem; font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: clamp(2.6rem, 8vw, 3.8rem); line-height: 1.05; letter-spacing: -0.02em; }
.blurb { margin: 1.25rem auto 0; max-width: 22rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
#btn-start, #btn-restart, #btn-win-restart, #btn-close-help {
  margin-top: 1.75rem; border: 0; border-radius: 0.85rem; padding: 0.85rem 1.4rem;
  background: var(--accent); color: #1a1510; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
#btn-start:hover, #btn-restart:hover { filter: brightness(1.06); }
.hint { margin-top: 1.25rem; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: var(--subtle); }

/* HUD */
#hud { display: flex; flex-direction: column; justify-content: space-between; }
.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; }
.hud-actions { display: flex; gap: 0.4rem; }
.hud-actions button { border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  border-radius: 0.55rem; padding: 0.35rem 0.7rem; font-size: 0.75rem; cursor: pointer; }

.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); }

/* Touch pad */
.pad { display: none; position: absolute; right: 0.75rem; bottom: 7.5rem; width: 9.5rem;
  grid-template-columns: repeat(3, 1fr); gap: 0.3rem; pointer-events: auto; }
.pad button { height: 2.5rem; border: 0; border-radius: 0.55rem; background: rgba(31,28,23,0.9);
  color: var(--fg); font-size: 0.95rem; cursor: pointer; border: 1px solid var(--border); }
.pad button:active { background: var(--border); }
@media (max-width: 800px) {
  .pad { display: grid; }
  .log { max-height: 2.8rem; }
}

/* Modals */
.modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,11,9,0.72);
  pointer-events: auto; padding: 1rem; }
.modal-card { width: min(26rem, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: 1.5rem; }
.modal-card h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.8rem; font-weight: 500; }
.modal-card p, .modal-card li { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-top: 0.6rem; }
.modal-card ul { margin: 0.75rem 0 0 1rem; }
.tomb { text-align: center; }

#btn-ambient.active, #btn-ambient-start {
  border-color: var(--accent);
  color: var(--accent);
}
#btn-ambient-start.ghost, button.ghost {
  margin-top: 0.65rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 0.85rem;
  padding: 0.65rem 1.2rem;
  font-size: 0.85rem;
  cursor: pointer;
}
button.ghost:hover { color: var(--fg); border-color: var(--muted); }
.ambient-badge {
  position: absolute;
  top: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(12,11,9,0.72);
  border: 1px solid rgba(196,165,116,0.35);
  border-radius: 99px;
  padding: 0.35rem 0.9rem;
  z-index: 5;
}
.hud-actions button.active {
  background: rgba(196,165,116,0.15);
  border-color: var(--accent);
  color: var(--accent);
}

@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;
  }
}