:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f1eee1;
  background: #101b1b;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, .game-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.game-shell { position: relative; }
#scene { display: block; width: 100%; height: 100%; outline: none; }
.hud {
  position: absolute; inset: 0 0 auto 0; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem; padding: clamp(1rem, 3vw, 2rem);
  pointer-events: none; background: linear-gradient(180deg, rgb(8 16 16 / 82%), transparent);
}
.brand, .controls { pointer-events: auto; }
.eyebrow { margin: 0 0 .45rem; color: #d4ae68; font-size: .7rem; letter-spacing: .18em; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.7rem); font-weight: 500; }
.version, .hint { color: #c0c7bd; font-size: .84rem; margin: .45rem 0 0; }
.controls { max-width: 23rem; text-align: right; font-size: .88rem; }
.controls p { margin: 0 0 .5rem; }
kbd { display: inline-block; min-width: 1.45rem; margin-left: .2rem; padding: .1rem .28rem; border: 1px solid #71827c; border-radius: .3rem; color: #f3d99d; font: inherit; text-align: center; }
.buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 .55rem; }
button { border: 1px solid #b68c4f; border-radius: .4rem; padding: .55rem .72rem; color: #f8f2df; background: #253631; font: inherit; cursor: pointer; }
button:hover, button:focus-visible { background: #405449; outline: 2px solid #e0bc74; outline-offset: 2px; }
#status { min-height: 1.2em; color: #e2c586; }
@media (max-width: 650px) { .hud { flex-direction: column; } .controls { max-width: none; text-align: left; } .buttons { justify-content: flex-start; } }