:root {
  color-scheme: dark;
  --ink: #f2efe9;
  --muted: #b3aca1;
  --panel: #201c18;
  --panel-deep: #100e0b;
  --orange: #f5872b;
  --orange-hot: #f5a623;
  --green: #6aa882;
  --line: #554d44;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #16130f;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  /* The shell runs a few pixels past the viewport on short landscape phones.
     That is cosmetic, but without this a drag near the edge rubber-bands the
     page and toggles the URL bar mid-run, which resizes the game. */
  overscroll-behavior: none;
  color: var(--ink);
  font-family: var(--sans);
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 15% 15%, rgba(106, 168, 130, 0.1), transparent 28rem),
    radial-gradient(circle at 85% 85%, rgba(245, 135, 43, 0.09), transparent 30rem),
    #16130f;
  background-size: 100% 5px, auto, auto, auto;
}

button {
  color: inherit;
  font: inherit;
}

.prototype-shell {
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 24px 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}

.prototype-header,
.prototype-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup > span:last-child {
  display: grid;
  gap: 1px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #161b17;
  border-radius: 50%;
  color: #151711;
  font: 900 17px/1 var(--display);
  letter-spacing: -0.03em;
  background: linear-gradient(145deg, #ffe061 0%, var(--orange) 58%, #d74609 100%);
  box-shadow: 0 0 0 3px #f4f0df, 0 0 0 5px #171a17;
}

.brand-lockup strong {
  font-size: 14px;
  letter-spacing: 0.02em;
}

.brand-lockup small,
.prototype-footer {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.utility-actions {
  display: flex;
  gap: 8px;
}

.icon-button {
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 3px;
  color: #d4cec5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* The /play landscape takeover covers the site header, so this is the only
   way back out of the game short of the browser's back button. target="_top"
   breaks the iframe; same-origin, so it is allowed. */
.exit-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.icon-button:hover {
  border-color: rgba(255, 157, 24, 0.65);
  color: #fff;
  transform: translateY(-1px);
}

.game-frame {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 134px);
  aspect-ratio: 16 / 9;
  align-self: center;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: #122c22;
  box-shadow:
    5px 5px 0 #100e0b,
    8px 8px 0 #554d44,
    0 34px 90px rgba(0, 0, 0, 0.38);
}

.game-frame,
.game-frame * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Except the score form: people have to be able to select and correct what
   they typed, which the rule above would otherwise take away from them. */
.game-frame input {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.game-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(16, 14, 11, 0.34);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
  background: #8dd9ed;
}

.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  /* safe center keeps the card centred until it is taller than the frame, at
     which point it aligns to the top instead of hiding its own first line
     above the edge. The scroll is a backstop for the same case. */
  place-items: safe center;
  overflow-y: auto;
  padding: 34px;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(90deg, rgba(16, 14, 11, 0.96) 0%, rgba(22, 19, 15, 0.8) 52%, rgba(16, 14, 11, 0.22) 100%);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.game-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.overlay-card {
  position: relative;
  z-index: 2;
  width: min(560px, 88%);
  margin-right: auto;
  padding-left: clamp(8px, 3vw, 44px);
}

.loss-guy {
  position: absolute;
  right: clamp(8px, 3vw, 48px);
  bottom: -4%;
  z-index: 1;
  width: min(37vw, 475px);
  max-height: 96%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(-14px 10px 0 rgba(10, 8, 6, 0.34)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.38));
  transform: translateX(34px) scale(0.97);
  transform-origin: right bottom;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.75,.2,1), visibility 240ms ease;
}

.game-overlay.is-visible.is-loss .loss-guy {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
}

.overlay-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--green);
  font-size: clamp(9px, 1.05vw, 13px);
  font-weight: 950;
  letter-spacing: 0.2em;
}

.overlay-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--orange);
}

.overlay-card h1 {
  margin: 0;
  color: #fbf7e9;
  font: 900 clamp(54px, 8.6vw, 124px)/0.75 var(--display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.16);
}

.overlay-card h1 em {
  color: var(--orange-hot);
  font-style: normal;
  -webkit-text-stroke: 1px rgba(80, 32, 0, 0.3);
}

.overlay-copy {
  max-width: 510px;
  margin: 24px 0 20px;
  color: #d2ddd5;
  font-size: clamp(12px, 1.25vw, 16px);
  line-height: 1.55;
}

.overlay-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.overlay-stats span {
  padding: 7px 10px;
  border: 2px solid var(--line);
  border-radius: 3px;
  color: #b3aca1;
  font-size: clamp(8px, 0.78vw, 10px);
  font-weight: 850;
  letter-spacing: 0.08em;
  background: #201c18;
}

.overlay-stats strong {
  color: var(--orange-hot);
  font-size: 1.15em;
}

.primary-button {
  width: min(330px, 100%);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  border: 2px solid #17140f;
  border-radius: 3px;
  color: #18150c;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  background: linear-gradient(135deg, #ffc638 0%, var(--orange) 72%);
  box-shadow: 4px 4px 0 #17140f;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.primary-button b {
  font-size: 24px;
}

.primary-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #17140f;
}

.primary-button:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.key-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 23px;
  color: #819589;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.key-guide span {
  display: flex;
  align-items: center;
  gap: 4px;
}

kbd {
  min-width: 22px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 3px;
  border-radius: 4px;
  color: #dfe8e1;
  font: 800 8px/1 var(--sans);
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
}

.touch-controls {
  position: absolute;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px;
  z-index: 6;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.touch-controls button {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  border: 2px solid var(--line);
  border-radius: 3px;
  color: white;
  background: rgba(32, 28, 24, 0.88);
  box-shadow: 2px 2px 0 rgba(16, 14, 11, 0.7);
  backdrop-filter: blur(7px);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.touch-controls button:active,
.touch-controls button.is-pressed {
  border-color: var(--orange-hot);
  background: rgba(205, 73, 8, 0.84);
  transform: translateY(2px);
}

.touch-controls span {
  font-size: 20px;
  line-height: 1;
}

.touch-controls small {
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.touch-controls .boost-control {
  color: #171408;
  background: rgba(255, 166, 24, 0.88);
}

.orientation-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  place-content: center;
  gap: 9px;
  padding: 28px;
  color: #fbf7e9;
  text-align: center;
  background: rgba(9, 24, 18, 0.96);
}

.orientation-gate span {
  color: var(--orange-hot);
  font-size: 44px;
  line-height: 1;
}

.orientation-gate strong {
  font: 900 clamp(22px, 8vw, 34px)/1 var(--display);
  letter-spacing: 0.025em;
}

.orientation-gate small {
  color: #c5d1c9;
  font-size: 11px;
  font-weight: 750;
}

.prototype-footer p {
  margin: 0;
}

.live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(182, 227, 52, 0.68);
}

@media (pointer: coarse), (max-width: 820px) {
  body {
    min-height: 100svh;
  }

  .prototype-shell {
    min-height: 100svh;
    padding: 10px;
    gap: 9px;
  }

  .game-frame {
    max-height: none;
    border-radius: 3px;
  }

  .touch-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 64px));
    justify-content: space-between;
    gap: 6px;
  }

  .touch-controls button {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    color: rgba(255, 255, 255, 0.94);
    background: rgba(16, 14, 11, 0.34);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(3px);
  }

  .touch-controls button:active,
  .touch-controls button.is-pressed {
    border-color: var(--orange-hot);
    background: rgba(205, 73, 8, 0.62);
  }

  .touch-controls .boost-control {
    border-color: rgba(255, 198, 56, 0.68);
    color: rgba(255, 255, 255, 0.96);
    background: rgba(245, 135, 43, 0.34);
  }

  .touch-controls span {
    font-size: 18px;
  }

  .touch-controls small {
    font-size: 7px;
  }

  .game-frame:has(.game-overlay.is-visible) .touch-controls {
    opacity: 0;
    pointer-events: none;
  }

  .prototype-footer p:last-child,
  .key-guide {
    display: none;
  }

  .overlay-card {
    width: min(510px, 94%);
  }

  .loss-guy {
    right: -3%;
    width: min(43vw, 400px);
  }

  .overlay-copy {
    margin: 14px 0;
  }

  .overlay-stats {
    margin-bottom: 14px;
  }

  .primary-button {
    min-height: 48px;
  }
}

@media (max-width: 600px) {
  .prototype-shell {
    grid-template-rows: auto auto auto;
    align-content: center;
  }

  .brand-lockup small {
    display: none;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }

  .brand-lockup strong {
    font-size: 12px;
  }

  .icon-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 8px;
  }

  .game-frame {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .touch-controls {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    grid-template-columns: repeat(4, minmax(0, 56px));
    justify-content: space-between;
    gap: 4px;
  }

  .touch-controls button {
    min-height: 50px;
  }

  canvas {
    object-fit: cover;
    object-position: 35% center;
  }

  .game-overlay {
    padding: 14px 12px;
    background: rgba(5, 18, 13, 0.82);
  }

  .overlay-card {
    margin: auto;
    padding: 0;
  }

  .loss-guy {
    right: -9%;
    bottom: -5%;
    width: 56%;
    max-height: 88%;
  }

  .game-overlay.is-visible.is-loss .loss-guy {
    opacity: 0.46;
  }

  .overlay-card h1 {
    font-size: clamp(48px, 18vw, 78px);
  }

  .overlay-copy {
    max-width: 430px;
    font-size: 11px;
  }

  .overlay-stats span {
    padding: 5px 7px;
  }

  .prototype-footer {
    justify-content: center;
    text-align: center;
  }
}

/* Phones only; see the matching matchMedia in game.js. Tablets in portrait
   have room to play and must not hit this gate. */
@media (orientation: portrait) and (max-width: 600px) {
  .orientation-gate {
    display: grid;
  }

  .touch-controls {
    display: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .prototype-shell {
    padding: 7px 12px;
    gap: 6px;
  }

  .prototype-header,
  .prototype-footer {
    min-height: 27px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .brand-lockup small,
  .prototype-footer {
    display: none;
  }

  .game-frame {
    max-height: calc(100svh - 56px);
  }

  .overlay-card h1 {
    font-size: clamp(48px, 13vh, 82px);
  }

  .overlay-copy {
    margin: 10px 0;
  }

  .overlay-stats,
  .key-guide {
    display: none;
  }

  .primary-button {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Weekly leaderboard and score entry
   ============================================================ */

.leaderboard {
  margin-top: 18px;
  max-width: 430px;
}

.leaderboard-title {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.2em;
}

.leaderboard-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.leaderboard-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  counter-increment: rank;
  font-size: 13px;
}

.leaderboard-list li::before {
  content: counter(rank);
  min-width: 16px;
  color: var(--orange-hot);
  font-weight: 900;
  font-size: 11px;
}

.leaderboard-name {
  overflow: hidden;
  color: #f2efe9;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-list b {
  margin-left: auto;
  color: #fff8e8;
  font: 900 15px/1 var(--display);
}

.leaderboard-empty {
  margin: 0;
  color: #c5d1c9;
  font-size: 12px;
}

.score-form {
  margin: 16px 0 4px;
  padding: 12px 14px 13px;
  max-width: 430px;
  border: 2px solid var(--orange-hot);
  border-radius: 3px;
  background: rgba(20, 17, 13, 0.72);
}

.score-form-title {
  margin: 0 0 9px;
  color: var(--orange-hot);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.score-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.score-form input {
  flex: 1 1 130px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid var(--line);
  border-radius: 2px;
  color: #f6f3ec;
  font: 700 13px/1 var(--sans);
  background: rgba(9, 12, 10, 0.68);
}

.score-form input::placeholder {
  color: #8b9a90;
}

.score-form input:focus-visible {
  border-color: var(--orange-hot);
  outline: none;
}

.score-form button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 18px;
  border: 2px solid #17140f;
  border-radius: 2px;
  color: #17140f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  background: var(--orange-hot);
  cursor: pointer;
}

.score-form button:disabled {
  opacity: 0.55;
  cursor: default;
}

.score-form-note {
  margin: 9px 0 0;
  color: #a8b7ad;
  font-size: 10.5px;
  line-height: 1.45;
}

.score-form-message {
  margin: 8px 0 0;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

/* Five names is enough to want to be on the list without pushing the button
   people came for off the bottom of the frame. The portal shows the full ten. */
.leaderboard-list li:nth-child(n + 6) {
  display: none;
}

/* Short landscape phones: the card is already tight, so the board keeps its
   top three and the explanatory note goes. The form stays, because posting a
   score matters more here than reading the board. */
@media (max-height: 620px) and (orientation: landscape) {
  .leaderboard {
    margin-top: 10px;
  }

  .leaderboard-list li:nth-child(n + 4) {
    display: none;
  }

  .score-form {
    margin: 10px 0 2px;
    padding: 9px 10px 10px;
  }

  .score-form-note {
    display: none;
  }

  /* There is not room for both here. A run good enough to post is asked for a
     name first; the board is what they see once they have posted it. */
  .game-overlay:has(.score-form:not([hidden])) .leaderboard {
    display: none;
  }
}