/* Tanski Dodge: one 640×360 canvas, scaled by view.js to the largest whole
   number of device pixels that fits (letterboxed in the night colour), and
   never smoothed. Toggled state is class-based, never ID-based. */

:root {
  --night: #07050d;
  --gold: #ffb524;
  --gold-light: #ffe29a;
  --violet: #b9a6e6;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--gold-light);
}

body {
  /* The whole window is a touch surface: no scrolling, zooming or callouts. */
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  image-rendering: pixelated;
  outline: none;
}

/* Portrait phones: the game still runs (letterboxed), with a nudge to turn. */
.rotate-hint {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  margin: 0;
  text-align: center;
  font: 700 14px/1.4 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  pointer-events: none;
}

@media (orientation: portrait) {
  .rotate-hint { display: block; }
}

.noscript {
  position: absolute;
  inset: 40% 16px auto;
  text-align: center;
  font: 16px/1.5 system-ui, sans-serif;
}