/* Moving Mountains — game.css
 * The whole screen is the world. A dark frame surrounds the scene; the HUD floats on top.
 * Fira Code is the only font.
 */
:root {
  --frame: #0a0c10;
  --glass: rgba(18, 21, 27, 0.82);
  --line: rgba(120, 132, 150, 0.22);
  --text: #d8dee9;
  --muted: #7d8696;
  --view: #8cc8ff;
  --player: #ffd166;
  font-family: 'Fira Code', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--frame); color: var(--text); overflow: hidden;
  font-family: 'Fira Code', monospace; font-size: 13px; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'calt' 0;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; font-variant-ligatures: none; }
.hidden { display: none !important; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* HUD */
#hud { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  pointer-events: none; z-index: 2; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap; min-width: 0; }
#titlePill { flex: 0 1 auto; overflow: hidden; padding-right: 12px; }
#titlePill .mark { color: var(--player); font-size: 11px; }
#sceneTitle { font-weight: 700; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
#infoPill { flex: 0 0 auto; }
#pos { color: var(--text); min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.build { color: var(--muted); font-size: 10px; opacity: 0.7; }
#loadBtn { background: rgba(140, 200, 255, 0.08); border: 1px solid rgba(140, 200, 255, 0.35); color: var(--view);
  border-radius: 7px; padding: 3px 9px; font-size: 12px; cursor: pointer; touch-action: manipulation; }
#loadBtn:hover { background: rgba(140, 200, 255, 0.16); }
#loadBtn:focus-visible { outline: 2px solid var(--view); outline-offset: 1px; }

/* D-pad: a 3 × 3 cross, bottom right, big enough for a thumb. */
#dpad { position: fixed; z-index: 2; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, var(--k)); grid-template-rows: repeat(3, var(--k)); gap: 4px;
  --k: 58px; touch-action: none; }
#dpad button { width: var(--k); height: var(--k); border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
  color: #b9c2d0; font-size: 18px; display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#dpad button.on { background: rgba(255, 209, 102, 0.22); border-color: rgba(255, 209, 102, 0.6); color: var(--player); }
#dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
#dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
#dpad .hub { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; color: rgba(255, 209, 102, 0.35); font-weight: 700; }
#dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }
#dpad [data-dir="down"] { grid-column: 2; grid-row: 3; }
@media (min-width: 700px) { #dpad { --k: 64px; } }

/* Drag-drop overlay and messages */
#drop { position: fixed; inset: 10px; z-index: 3; border: 2px dashed rgba(140, 200, 255, 0.6); border-radius: 16px;
  background: rgba(10, 12, 16, 0.72); display: flex; align-items: center; justify-content: center; color: var(--view);
  font-size: 15px; pointer-events: none; }
#toast { position: fixed; z-index: 3; left: 50%; top: calc(54px + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 8px 14px; background: var(--glass); border: 1px solid var(--line); border-radius: 10px;
  text-align: center; pointer-events: none; }
#toast.error { border-color: rgba(255, 123, 84, 0.6); color: #ffc2ad; }