/* Desert Dash. Tokens and buttons come from the shared SkullSeed stylesheet. */

html, body { height: 100%; background: var(--cream); }
body { padding: 12px; }

.game {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

#stage {
  flex: 1;
  min-height: 140px;
  width: 100%;
  display: block;
  border: var(--border);
  border-radius: var(--radius-icon);
  background: var(--cream);
  touch-action: manipulation;
  cursor: var(--cursor);
  -webkit-tap-highlight-color: transparent;
}
#stage:focus-visible { outline-offset: 3px; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.controls .btn { padding: 6px 14px; font-size: 14px; }
.btn:disabled { border-style: dashed; cursor: var(--cursor); }
.btn-ghost:disabled:hover { background-color: transparent; color: var(--ink); }
#relaxed[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

.status { flex: 1; min-width: 12em; margin: 0; font-weight: var(--weight-bold); font-size: 15px; }
.how-to { margin: 0; font-size: 14px; }