@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800&family=Inter:wght@500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --ink: #171916;
  --paper: #f4efdf;
  --cream: #fff8e8;
  --yellow: #f4b83f;
  --orange: #ef6e3b;
  --green: #526d49;
  --acid: #c7df78;
  --road: #30332f;
}

* { box-sizing: border-box; }

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

body {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.09) 0 1px, transparent 1.5px) 0 0 / 12px 12px,
    #171916;
  color: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overscroll-behavior: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.shell {
  width: min(1180px, calc(100% - 28px), calc((100vh - 150px) * 4 / 3));
  margin: 0 auto;
  padding: 18px 0 14px;
}

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 13px;
}

.brand {
  width: max-content;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand-mark {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 50% 46% 44% 52%;
  font: italic 900 30px/1 "Barlow Condensed", sans-serif;
  transform: rotate(-6deg);
  box-shadow: inset -4px -3px 0 rgba(0,0,0,.12);
}

.brand strong {
  display: block;
  font: italic 900 27px/.82 "Barlow Condensed", sans-serif;
  letter-spacing: .05em;
}

.brand small {
  color: #9da194;
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: .16em;
}

.route {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b9bbae;
  font: 800 9px/1 Inter, sans-serif;
  letter-spacing: .12em;
}

.route i {
  display: block;
  width: clamp(46px, 8vw, 110px);
  height: 1px;
  background: #61645b;
  position: relative;
}

.route i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  border-left: 5px solid #61645b;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
}

.route-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(244,184,63,.15);
}
.route-dot.finish { background: var(--acid); box-shadow: 0 0 0 3px rgba(199,223,120,.12); }

.header-actions { justify-self: end; display: flex; gap: 7px; }

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid #45483f;
  border-radius: 4px;
  background: #22241f;
  color: #d6d4c9;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .15s ease;
}

.icon-button:hover { border-color: var(--yellow); color: var(--yellow); }
.icon-button:active { transform: translateY(1px); }
.icon-button svg { width: 19px; height: 19px; fill: currentColor; }
.icon-button.muted::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--orange); transform: rotate(-45deg); }
.icon-button.muted { position: relative; }

.game-card {
  overflow: hidden;
  border: 1px solid #44473e;
  background: #242621;
  border-radius: 7px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.hud {
  height: 56px;
  background: #eeeadc;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr .7fr 2.3fr 1fr;
  border-bottom: 4px solid var(--ink);
}

.hud-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 23px;
  border-right: 1px solid #c9c4b5;
}

.hud-item:last-child { border-right: 0; }
.hud-item span { color: #686a62; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.hud-item strong { font: 800 23px/.9 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.level-item strong { color: var(--orange); }

.time-item { gap: 6px; }
.time-track { width: 100%; height: 8px; background: #d3cfc0; overflow: hidden; border-radius: 1px; }
.time-track i { display: block; width: 100%; height: 100%; background: var(--green); transform-origin: left; transition: background .2s; }
.time-track i.danger { background: var(--orange); }

.lives { display: flex; gap: 5px; margin-top: 3px; }
.lives i { width: 17px; height: 17px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50% 47% 44% 52%; box-shadow: inset -2px -2px 0 rgba(0,0,0,.13); }
.lives i.lost { opacity: .18; }

.game-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #6e8057;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(18,20,17,.58);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.overlay.visible { opacity: 1; pointer-events: auto; }

.overlay-card {
  width: min(470px, calc(100% - 40px));
  padding: 34px 38px 32px;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 18px, rgba(38,42,31,.08) 19px, transparent 20px) 0 0/30px 100%,
    var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--yellow), 0 20px 55px rgba(0,0,0,.35);
  text-align: center;
  transform: rotate(-.4deg);
}

.eyebrow {
  display: inline-block;
  padding: 5px 8px 4px;
  color: var(--cream);
  background: var(--orange);
  font: 800 9px/1 Inter, sans-serif;
  letter-spacing: .17em;
  transform: rotate(-2deg);
}

.overlay h1, .overlay h2 {
  margin: 16px 0 10px;
  font: 900 45px/.85 "Barlow Condensed", sans-serif;
  letter-spacing: -.01em;
}
.overlay h1 em { color: var(--orange); font-style: italic; }
.overlay h2 { font-size: 42px; }
.overlay p { max-width: 360px; margin: 0 auto; color: #575a50; font-size: 12px; line-height: 1.55; font-weight: 600; }

.controls-help {
  margin: 22px auto 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #65675f;
  font-size: 9px;
  line-height: 1.5;
  text-align: left;
}
.controls-help b { color: var(--ink); font-size: 10px; letter-spacing: .05em; }
.key-cluster { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.key-cluster div { display: flex; gap: 2px; }
kbd {
  width: 23px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid #77796f;
  border-bottom-width: 3px;
  border-radius: 3px;
  background: #fffdf5;
  font: 800 10px/1 Inter, sans-serif;
}

.primary-button {
  width: 100%;
  min-height: 47px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  background: var(--yellow);
  font: 900 14px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.primary-button:hover { background: #ffc94f; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.primary-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.primary-button span { float: right; margin-right: 14px; font-size: 19px; }

.message-card { max-width: 410px; }
.message-card .primary-button { margin-top: 22px; }
.message-card.winner { box-shadow: 7px 7px 0 var(--acid), 0 20px 55px rgba(0,0,0,.35); }
.message-card.winner .eyebrow { background: var(--green); }

.pause-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(13,15,12,.74), rgba(13,15,12,.74) 2px, rgba(13,15,12,.69) 3px, rgba(13,15,12,.69) 4px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.pause-overlay.visible { opacity: 1; }
.pause-overlay div { text-align: center; }
.pause-overlay span { display: block; font: italic 900 56px/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; }
.pause-overlay small { color: #afb1a7; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }

.touch-hint { display: none; }

footer {
  min-height: 31px;
  padding: 12px 4px 0;
  color: #767a6d;
  display: flex;
  align-items: center;
  gap: 13px;
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: .14em;
}
.footer-rule { height: 1px; flex: 1; background: #33362f; }

@media (max-width: 760px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .shell { width: 100vw; height: 100vh; height: 100dvh; padding: 0; }
  .topbar { display: none; }
  .game-card { height: 100vh; height: 100dvh; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
  .hud { grid-template-columns: 1fr .7fr 1.5fr 1fr; height: 42px; flex: 0 0 42px; }
  .hud-item { padding: 4px 8px; }
  .hud-item strong { font-size: 19px; }
  .game-stage { width: 100%; height: calc(100vh - 42px); height: calc(100dvh - 42px); flex: 1 1 auto; aspect-ratio: auto; }
  footer { display: none; }
  .overlay-card { width: min(350px, calc(100% - 42px)); padding: 14px 18px 15px; box-shadow: 4px 4px 0 var(--yellow), 0 14px 35px rgba(0,0,0,.34); }
  .eyebrow { padding: 3px 6px; font-size: 7px; }
  .overlay h1, .overlay h2 { margin: 8px 0 6px; font-size: 29px; }
  .overlay p { max-width: 290px; font-size: 9px; line-height: 1.35; }
  .controls-help { display: none; }
  .touch-hint { display: block; margin: 10px auto 0 !important; color: #65675f !important; font-size: 8px !important; line-height: 1.35 !important; letter-spacing: .05em; }
  .touch-hint b { color: var(--ink); font-size: 10px; letter-spacing: .12em; }
  .primary-button { min-height: 36px; margin-top: 11px; font-size: 12px; }
  .message-card .primary-button { margin-top: 12px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body { display: grid; place-items: center; }
  .shell {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    padding: 0;
  }
  .topbar, footer { display: none; }
  .game-card {
    height: 100vh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hud { height: 42px; flex: 0 0 42px; }
  .hud-item { padding: 4px 12px; }
  .hud-item strong { font-size: 19px; }
  .game-stage {
    width: 100%;
    height: calc(100vh - 42px);
    flex: 1 1 auto;
    aspect-ratio: auto;
  }
  .overlay-card { width: min(350px, calc(100% - 42px)); padding: 12px 18px 13px; box-shadow: 4px 4px 0 var(--yellow), 0 14px 35px rgba(0,0,0,.34); }
  .eyebrow { padding: 3px 6px; font-size: 7px; }
  .overlay h1, .overlay h2 { margin: 7px 0 5px; font-size: 28px; }
  .overlay p { max-width: 290px; font-size: 9px; line-height: 1.3; }
  .controls-help { display: none; }
  .touch-hint { display: block; margin: 8px auto 0 !important; color: #65675f !important; font-size: 8px !important; line-height: 1.3 !important; letter-spacing: .05em; }
  .touch-hint b { color: var(--ink); font-size: 10px; letter-spacing: .12em; }
  .primary-button { min-height: 34px; margin-top: 9px; font-size: 12px; }
  .message-card .primary-button { margin-top: 10px; }
}

@media (min-height: 601px) and (max-height: 760px) and (min-width: 761px) {
  .shell { width: min(980px, calc(100% - 24px), calc((100vh - 117px) * 4 / 3)); padding-top: 8px; }
  .topbar { min-height: 44px; margin-bottom: 7px; }
  .hud { height: 48px; }
  footer { padding-top: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}