:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #293e34;
  background: #d6dfc3;
  font-synthesis: none;
  --ink: #293e34;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
button, input, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #df763e; outline-offset: 4px; }
button:disabled { opacity: .6; cursor: wait; }
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; outline: none; touch-action: none; cursor: crosshair; }
.world-form, .stage-tools {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  border: 1px solid #ffffff90;
  border-radius: 5px;
  box-shadow: 0 3px 18px #293e340a;
}
.world-form {
  left: max(20px, env(safe-area-inset-left));
  max-width: calc(100% - 192px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #f6f5eeeb;
  backdrop-filter: blur(8px);
}
.seed-field { min-width: 0; padding: 0 8px; }
.seed-field label { display: block; color: #6e7d62; font: 8px monospace; letter-spacing: 1px; margin-bottom: 4px; }
.seed-field input { display: block; width: 170px; max-width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 12px monospace; }
.random-seed { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 4px; color: #516346; background: transparent; font: 12px monospace; letter-spacing: .5px; white-space: nowrap; }
.random-seed .dice { font-size: 25px; line-height: 1; }
.random-seed:hover { background: #dbe2cc; }
.stage-tools {
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  display: flex;
  background: #f6f5eeeb;
  backdrop-filter: blur(8px);
}
.stage-tools button { width: 44px; height: 44px; border: 0; border-radius: 4px; background: none; color: #516346; font-size: 23px; }
.stage-tools button:hover, .stage-tools button[aria-pressed=true] { background: #dbe2cc; }
.stage-tools #music { position: relative; font-size: 21px; }
.stage-tools #music.off { color: #8a9680; }
.stage-tools #music.off::after { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 1px; }
.controls {
  flex-shrink: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 6px max(20px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid #dcded3;
  background: #f6f5ee;
  font-size: 11px;
  color: #6e7d62;
}
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: 6px; color: #20438f; font: bold 15px Georgia, serif; letter-spacing: .2px; white-space: nowrap; }
.brand img { display: block; width: 34px; height: auto; }
.controls button, .key-help { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.controls button { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
kbd { display: inline-grid; place-items: center; height: 23px; min-width: 23px; border: 1px solid #d2d7c9; border-bottom-width: 2px; border-radius: 3px; font: 10px monospace; }
.trip-distance { margin-left: auto; white-space: nowrap; font: 14px monospace; font-variant-numeric: tabular-nums; color: var(--ink); }
.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 0%, #f8d2a055, transparent 60%), #d6dfc3;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
/* The first loading screen comes up out of the dark: a deep green-black veil over
   the whole screen lifts, so the blue logo darkens with the ground instead of
   standing out against it, and the card itself only rises once the ground is light. */
.loader::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0b120d; pointer-events: none; animation: loader-dawn 3.2s cubic-bezier(.45, 0, .25, 1) forwards; }
.loader.over::before { display: none; }
.loader-card { position: relative; }
.loader:not(.over) .loader-card { animation: loader-card-in 1.4s ease-out 1.1s both; }
@keyframes loader-dawn { from { opacity: 1; } to { opacity: 0; } }
@keyframes loader-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.loader.over { background: #d6dfc3b8; backdrop-filter: blur(6px); }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader:not(.done) { transition: opacity .25s ease; }
.loader-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.loader-card img { display: block; width: 88px; height: auto; filter: drop-shadow(0 6px 14px #293e341f); }
.loader-title { margin: 0; color: #20438f; font: bold 26px Georgia, serif; letter-spacing: .3px; }
.loader-text { min-height: 1.3em; margin: 0; color: #516346; font: 12px monospace; letter-spacing: .5px; }
.loader.failed .loader-text { color: #a2472a; max-width: 280px; white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .loader::before { animation: none; opacity: 0; }
  .loader:not(.over) .loader-card { animation: none; }
  .loader, .loader:not(.done) { transition: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.fullscreen .world-form, body.fullscreen .controls { display: none; }
body.fullscreen #game { cursor: default; }
body.fullscreen .stage-tools { top: max(20px, env(safe-area-inset-top)); }
.session-distance {
  display: none;
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 8px 14px;
  background: #f6f5ec70;
  backdrop-filter: blur(3px);
  border-radius: 4px;
  font: 13px monospace;
  color: #293e34c9;
  pointer-events: none;
}
body.fullscreen .session-distance { display: block; }
/* Touch screens have no keyboard: no key row; the session distance shows as in full screen. */
@media (pointer: coarse) {
  .controls { display: none; }
  .session-distance { display: block; }
}
#session-km { font: 26px Georgia, serif; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .controls { gap: 12px; padding-left: 12px; padding-right: 12px; font-size: 10px; }
  .controls button, .key-help { gap: 4px; }
  .brand { margin-right: 0; }
  .brand-name { display: none; }
  .trip-distance { font-size: 12px; }
  .stage-tools { right: 12px; }
}

@media (max-width: 640px) {
  .world-form { left: 12px; right: 160px; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .seed-field input { width: 100%; }
  .stage-tools { right: 12px; }
}