:root { color-scheme: dark; background: #101727; color: #c2cde5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 24px; }
.experience { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 5vh, 48px); width: 100%; }
#mascot {
  display: block;
  width: min(72vw, 45vh, 360px);
  width: min(72vw, 45svh, 360px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#mascot:focus-visible { outline: 1px dashed #879dff; outline-offset: 4px; }
#ghost { display: block; width: 100%; height: auto; pointer-events: none; }
#ghost text { white-space: pre; font-variant-ligatures: none; }
.dino-game { width: min(100%, 600px); }
.dino-stage { position: relative; width: 100%; height: 150px; }
.runner-container { position: relative; width: 100%; height: 150px; overflow: hidden; }
.runner-canvas { display: block; width: 100%; height: 150px; image-rendering: pixelated; filter: invert(1); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.runner-canvas:focus-visible { outline: 1px dashed #879dff; outline-offset: -1px; }
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; min-height: 44px; }
.game-button { min-height: 44px; padding: 0 16px; border: 1px solid #34425c; border-radius: 6px; background: transparent; color: #c2cde5; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: border-color 150ms, background 150ms; }
.game-button:hover { border-color: #879dff; background: #879dff0d; }
.game-button:active, .game-button[aria-pressed="true"] { background: #879dff22; }
.game-button:focus-visible { outline: 2px solid #879dff; outline-offset: 3px; }
.game-button:disabled { opacity: .5; cursor: wait; }
.touch-control { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 560px) { main { padding: 24px 20px; } .game-controls { flex-wrap: wrap; justify-content: center; } }
@media (pointer: coarse) { .touch-control { display: inline; } }
@media (any-pointer: coarse) {
  html, body { touch-action: pinch-zoom; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
}
@media (prefers-reduced-motion: reduce) { .game-button { transition: none; } }