:root {
  color-scheme: dark;
  font-family: "Courier New", "Lucida Console", monospace;
  --ink: #11152d;
  --panel: #171b3b;
  --cream: #f3f1d0;
  --cyan: #30d6d0;
  --logo-blue: #6fe5ff;
  --logo-blue-dark: #237ca8;
  --orange: #ff6b35;
  --orange-dark: #b72f4a;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; min-height: 100dvh; margin: 0; }

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: #08091b;
  touch-action: none;
  user-select: none;
}

button { font: inherit; }

.rotate-device { display: none; }

.game-shell {
  position: relative;
  width: min(100vw, 177.78vh);
  width: min(100vw, 177.78dvh);
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: #171b3b;
  box-shadow: 0 0 0 4px #08091b, 0 0 60px rgb(31 13 66 / 70%);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.loading-screen {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  background: #08091b;
  color: var(--logo-blue);
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: .16em;
  text-shadow: 4px 4px 0 #237ca8;
}

.loading-screen span { animation: loading-pulse .8s steps(2, end) infinite; }
.loading-screen[hidden] { display: none; }

@keyframes loading-pulse {
  50% { opacity: .38; }
}

.top-actions {
  position: absolute;
  z-index: 5;
  top: clamp(8px, 1.8vw, 18px);
  right: clamp(8px, 1.8vw, 18px);
  display: flex;
  gap: 8px;
}

.icon-button {
  width: clamp(36px, 5vw, 50px);
  aspect-ratio: 1;
  border: 2px solid var(--cyan);
  border-radius: 0;
  color: var(--cyan);
  background: rgb(17 21 45 / 88%);
  box-shadow: 4px 4px 0 #08091b;
  cursor: pointer;
  font-weight: 900;
}

.icon-button:active, .primary-button:active, .secondary-button:active, .touch-controls button:active { transform: translateY(3px); box-shadow: none; }

.overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6%;
  background: transparent;
  transition: opacity 180ms ease;
}

.overlay[hidden] { display: none; }

.overlay.finale {
  place-items: center start;
  background: transparent;
}

.overlay.finale .overlay-card {
  width: min(430px, 46%);
  margin-left: 4%;
}

.overlay.gameover {
  place-items: end center;
  padding-bottom: 3%;
}

.overlay.gameover .overlay-card {
  width: min(620px, 86%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.overlay-card {
  width: min(520px, 88%);
  padding: clamp(20px, 4vw, 42px);
  border: 4px solid var(--cyan);
  border-radius: 0;
  background: rgb(17 21 45 / 95%);
  box-shadow: 10px 10px 0 #08091b, -6px -6px 0 var(--orange-dark);
  text-align: center;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.overlay.title-screen {
  padding: 0 0 7%;
  place-items: end center;
}

.overlay.title-screen .overlay-card {
  width: min(620px, 92%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.overlay.title-screen .kicker,
.overlay.title-screen #overlay-copy,
.overlay.title-screen .hint {
  display: none;
}

.overlay.title-screen h1 {
  display: none;
}

.overlay.title-screen .primary-button {
  min-width: clamp(250px, 34vw, 360px);
  padding: clamp(17px, 2.3vw, 23px) clamp(34px, 4vw, 48px);
  border-color: var(--cream);
  background: var(--logo-blue);
  box-shadow: 7px 7px 0 var(--logo-blue-dark);
  font-size: clamp(20px, 3vw, 30px);
}

.kicker {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: clamp(11px, 1.6vw, 16px);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kicker:empty, .hint:empty { display: none; }

h1 {
  margin: 0;
  color: var(--cream);
  font-size: clamp(32px, 6.3vw, 70px);
  line-height: .92;
  letter-spacing: -.08em;
  text-shadow: 4px 4px 0 #08091b;
}

h1 span { color: var(--orange); text-shadow: 4px 4px 0 var(--orange-dark); }

#overlay-copy {
  max-width: 400px;
  margin: clamp(14px, 2.5vw, 24px) auto;
  color: #bcc2d9;
  font-size: clamp(13px, 1.8vw, 18px);
  line-height: 1.4;
}

.overlay-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primary-button, .secondary-button {
  min-width: 190px;
  padding: 13px 24px;
  border: 3px solid var(--cream);
  border-radius: 0;
  color: var(--ink);
  background: var(--orange);
  box-shadow: 6px 6px 0 var(--orange-dark);
  cursor: pointer;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
}

.secondary-button {
  border-color: var(--cyan);
  color: var(--cream);
  background: var(--panel);
  box-shadow: 6px 6px 0 #08091b;
}

.secondary-button[hidden] { display: none; }

.hint { margin: 18px 0 0; color: #7d8bad; font-size: clamp(10px, 1.4vw, 14px); }

.touch-controls {
  position: absolute;
  z-index: 3;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: none;
}

.touch-controls.active { display: flex; }
.climb-controls {
  --climb-control-inset: max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  right: var(--climb-control-inset);
  left: var(--climb-control-inset);
  justify-content: space-between;
}

.touch-controls button {
  min-width: clamp(70px, 13vw, 112px);
  min-height: clamp(58px, 10vw, 86px);
  border: 3px solid var(--cyan);
  border-radius: 0;
  color: var(--cream);
  background: rgb(17 21 45 / 82%);
  box-shadow: 6px 6px 0 rgb(8 9 27 / 72%);
  font-size: clamp(20px, 4vw, 38px);
  font-weight: 900;
  touch-action: none;
}

.street-controls button span { display: block; font-size: .8em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse) {
  .top-actions { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); gap: 5px; }
  .icon-button { width: 30px; border-width: 2px; box-shadow: 3px 3px 0 #08091b; }
  .touch-controls.active { display: flex; }
  .hint { display: none; }
  .overlay.finale { place-items: end center; }
  .overlay.finale .overlay-card { width: 90%; margin: 0 0 3%; padding: 14px 20px; }
}


@media (max-height: 420px) {
  .overlay-card { padding: 14px 24px; }
  #overlay-copy { margin: 10px auto; }
  .hint { margin-top: 12px; }
}