:root {
  --ink: #1d1a17;
  --paper: #fffaf0;
  --gold: #ffd23f;
  /* Ghent's own light blue, for buttons and whatever is picked or focused in the menus */
  --accent: #009de0;
  --accent-soft: #dff2fb;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #cfe8f5;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { touch-action: manipulation; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- first load: a bike and a walker going through Ghent until the menu is filled in ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #cfe8f5;
  color: var(--ink);
  transition: opacity 0.4s ease;
}
body:not(.booting) #loader { opacity: 0; pointer-events: none; }
body.booting #menu { visibility: hidden; }
/* The city slides by behind the bike, the road under it faster. One copy of the skyline is 320px
   wide and the SVG holds three, so sliding it by one copy loops without a seam. */
.loader-scene {
  position: relative; width: 400px; max-width: 90vw; height: 132px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.loader-skyline { position: absolute; left: 0; bottom: 14px; width: 960px; height: 110px; color: #86bfe0; animation: slide 9s linear infinite; }
.loader-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #b8a37c 0 13px, #9c8862 13px 16px) 0 0 / 32px 100%,
              #b8a37c;
  border-top: 3px solid #8c7752;
  animation: road 0.45s linear infinite;
}
.loader-bike { position: absolute; left: 50%; bottom: 10px; width: 72px; height: 72px; margin-left: -70px; animation: bob 0.3s ease-in-out infinite alternate; }
/* a wheel is about 71px round on screen, and the road goes by at about 71px a second */
.loader-wheel { animation: spin 1s linear infinite; }
.loader-walker { position: absolute; left: 50%; bottom: 11px; width: 48px; height: 54px; margin-left: 14px; animation: bob 0.25s ease-in-out infinite alternate; }
.loader-leg { transform-origin: 16px 32px; animation: stride 0.5s ease-in-out infinite alternate; }
.loader-leg.back { animation-delay: -0.5s; }
.loader-title { font-family: 'Lilita One', system-ui, sans-serif; font-size: 34px; color: var(--ink); }
.loader-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 280px; font-weight: 800; font-size: 16px; }
.loader-steps li { display: flex; align-items: center; gap: 10px; opacity: 0.35; transition: opacity 0.2s; }
.loader-steps li.now, .loader-steps li.done { opacity: 1; }
.loader-steps small { margin-left: auto; padding-left: 12px; font-size: 13px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.loader-steps .mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid currentColor; }
.loader-steps li.now .mark { border-right-color: transparent; animation: spin 0.8s linear infinite; }
.loader-steps li.done .mark { border: none; background: var(--ink); position: relative; }
.loader-steps li.done .mark::after { content: '✓'; position: absolute; inset: 0; color: var(--paper); font-size: 11px; line-height: 16px; text-align: center; }
@keyframes bob { to { transform: translateY(-1.5px); } }
@keyframes stride { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes slide { to { transform: translateX(-320px); } }
@keyframes road { to { background-position: -32px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .loader-skyline, .loader-road, .loader-bike, .loader-wheel, .loader-walker, .loader-leg { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

kbd {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  display: inline-block;
  min-width: 30px;
  padding: 3px 7px;
  margin: 2px;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-bottom-width: 4px;
  border-radius: 7px;
  text-align: center;
  line-height: 1.1;
}

.stroke {
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
}

/* ---------- split screen chrome ---------- */

#divider {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  background: var(--ink);
  z-index: 4;
}

#minimap {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(29, 26, 23, 0.55);
  border: 3px solid var(--ink);
  border-radius: 14px;
  z-index: 5;
}

#mute {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- per-player HUD ---------- */

.hud {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
#hud0 { left: 0; }
#hud1 { left: 50%; }
.solo #hud0 { width: 100%; }
.solo #hud0 .hud-top { right: calc(22px + env(safe-area-inset-right)); }
.solo #hud1, .solo #divider { display: none !important; }


#toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 18px;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  background: var(--ink);
  border: 2px solid #fff;
  border-radius: 999px;
}

.hud-top {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(22px + env(safe-area-inset-left));
  right: 138px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hud.right .hud-top { left: 138px; right: 22px; flex-direction: row-reverse; }
.hud.right .placebox { text-align: right; }

.place {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 84px;
  line-height: 0.9;
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
}
.place .suf { font-size: 36px; margin-left: 2px; vertical-align: top; }
.place[data-p="1"] { color: var(--gold); }

.who:empty { display: none; }
.who {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--c);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* The street you are in, as a white street name sign under the minimap, and the next one coming up.
   With two players each has a sign, edged in their colour. */
#streetbar {
  position: fixed;
  top: calc(142px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 14px;
  pointer-events: none;
}
.street { max-width: 280px; text-align: center; }
#streetbar.duo .street .now { border-color: var(--c); }
.street .now {
  display: inline-block;
  padding: 3px 12px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 22px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.street .next {
  margin-top: 4px;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.street .next.soon { color: var(--gold); }

.stats {
  text-align: right;
  font-family: 'Lilita One', system-ui, sans-serif;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}
.hud.right .stats { text-align: left; }
.lap { font-size: 34px; }
.lap i { font-style: normal; opacity: 0.85; }
.time { font-size: 24px; color: #fff3c4; }

.hud-bottom { position: absolute; bottom: 18px; left: 22px; }
.hud.right .hud-bottom { left: auto; right: 22px; text-align: right; }

.items { display: flex; gap: 8px; }

.slot {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  font-size: 36px;
  background: rgba(29, 26, 23, 0.45);
  border: 3px solid var(--ink);
  border-radius: 16px;
  transition: background 0.15s;
}
.slot .ico { display: inline-block; }
.slot.full { background: var(--c); }
.slot.next { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.hud.right .items { flex-direction: row-reverse; }

.items.bump .slot.full .ico { animation: bump 0.35s ease-out; }
@keyframes bump { 40% { transform: scale(1.45) rotate(-12deg); } }

.hint {
  margin-top: 8px;
  font-weight: 800;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.hint kbd { font-size: 11px; min-width: 0; padding: 1px 5px; border-bottom-width: 3px; }

.cd {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 170px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 12px var(--ink);
  paint-order: stroke fill;
  opacity: 0;
}
.cd.pop { animation: pop 0.95s ease-out forwards; }
.cd.go { color: #7dd956; }
@keyframes pop {
  0% { transform: scale(1.8); opacity: 0; }
  15% { transform: scale(1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

.msg {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: clamp(28px, 3.6vw, 54px);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  opacity: 0;
  padding: 0 12px;
}
.msg.show { animation: msg 1.6s ease-out forwards; }
.msg.bad { color: #ff6b6b; }
.msg.good { color: #7dd956; }
.msg.gold { color: var(--gold); }
@keyframes msg {
  0% { transform: translateY(20px) scale(0.6); opacity: 0; }
  12% { transform: none; opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

.alert {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  padding: 6px 18px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 30px;
}
.alert.show { display: block; animation: blink 0.5s steps(2) infinite; }
.wrong { top: 44%; background: var(--gold); color: var(--ink); }
.incoming { bottom: 120px; background: #ff5c8a; }
@keyframes blink { 50% { opacity: 0.4; } }

.finished {
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
  display: none;
  text-align: center;
  font-family: 'Lilita One', system-ui, sans-serif;
  line-height: 1;
  -webkit-text-stroke: 10px var(--ink);
  paint-order: stroke fill;
}
.finished.show { display: block; animation: popin 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.finished .f1 { font-size: 92px; color: var(--gold); }
.finished .f2 { font-size: 64px; margin-top: 6px; }
.finished .f2 sup { font-size: 30px; }
@keyframes popin { from { transform: scale(0.3); opacity: 0; } }

.flash {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 140px 40px rgba(255, 40, 90, 0.75);
  opacity: 0;
}
.flash.on { animation: flash 0.8s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- overlays ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at center, rgba(20, 16, 12, 0.25), rgba(20, 16, 12, 0.7));
}

.card {
  width: 100%;
  max-width: 920px;
  margin: auto;
  padding: 26px 34px 22px;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 10px 0 var(--ink);
}
.card.small { max-width: 560px; }
#menu .card {
  position: relative;
  /* See-through, so the flight over the city behind it stays visible. */
  background: rgba(255, 250, 240, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* Back to the landing page: floats at the very top left of the page, above the card. */
.site-link {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 1;
  font: 800 15px 'Nunito', system-ui, sans-serif; text-decoration: none;
  color: rgba(255, 255, 255, 0.85); opacity: 0.9;
  -webkit-text-stroke: 3px rgba(29, 26, 23, 0.85); paint-order: stroke fill;
}
.site-link.dev-link { left: auto; right: max(14px, env(safe-area-inset-right)); }
.site-link:hover { color: #fff; opacity: 1; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.9); }
#menu.overlay { background: radial-gradient(ellipse at center, rgba(20, 16, 12, 0), rgba(20, 16, 12, 0.35)); }

/* Music, sound and language: small, unlabelled, in the top right corner. */
.corner { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 1; }
.corner .row { display: block; padding: 0; border-width: 2px; border-radius: 12px; }
.corner .opts { justify-content: flex-end; gap: 4px; }
.corner .chip { font-size: 11px; padding: 2px 8px; border-width: 2px; }
.corner.left { right: auto; left: 14px; align-items: flex-start; }
.corner.left .opts { justify-content: flex-start; }
.corner.left .chip { font-size: 14px; padding: 4px 12px; }

/* Riders, laps, level and weapons: one unlabelled line across the whole menu. */
.quad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; }
.quad .row { display: block; padding: 3px 8px; }
.quad .opts { justify-content: center; flex-wrap: nowrap; gap: 6px; }
.quad .laps b { min-width: 0; padding: 0 6px; font-size: 20px; white-space: nowrap; }
.quad .arrow { width: 34px; height: 34px; line-height: 24px; }
@media (max-width: 1099px) {
  .corner { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
  .quad { gap: 2px 2px; }
  .quad .row { padding: 2px 3px; }
  .quad .chip { font-size: 14px; padding: 4px 8px; }
  .quad .opts { gap: 4px; }
  .quad .laps b { font-size: 17px; padding: 0 4px; }
  .quad .arrow { width: 30px; height: 30px; line-height: 20px; }
}

.title {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  font-size: 92px;
  line-height: 1;
  color: var(--accent);
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--ink);
}
.title.mid { font-size: 64px; -webkit-text-stroke-width: 7px; }

.tag { margin: 12px 0 20px; font-weight: 800; font-size: 18px; color: #6b5a48; }


.settings { display: grid; gap: 8px; margin-bottom: 18px; text-align: left; }
.row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border: 3px solid transparent;
  border-radius: 16px;
}
.row.focus { border-color: var(--ink); background: var(--accent-soft); }
.label { font-family: 'Lilita One', system-ui, sans-serif; font-size: 22px; }
.opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  font: 800 16px 'Nunito', system-ui, sans-serif;
  cursor: pointer;
  padding: 6px 14px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
}
a.chip { text-decoration: none; }
.chip.on { background: var(--accent); color: #fff; }
.tracks { display: flex; gap: 10px; flex-wrap: wrap; }
.tcard {
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  padding: 6px 8px 8px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
}
.tcard canvas { width: 120px; height: 60px; }
.tcard b { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 17px; }
.tcard small { font-weight: 800; font-size: 12px; color: #8a7a68; }
.tcard.on { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.tcard.on small { color: var(--accent-soft); }
.tcard { position: relative; }
.blurb { flex-basis: 100%; font-weight: 700; font-size: 14px; color: #6b5a48; }

.howto { margin: 18px auto 10px; max-width: 760px; font-weight: 700; font-size: 15px; line-height: 1.45; color: #4a3f35; }
.howto span { display: inline-block; margin: 0 10px; }

.laps { font-family: 'Lilita One', system-ui, sans-serif; font-size: 26px; }
.laps b { display: inline-block; min-width: 46px; font-weight: 400; }
.arrow {
  font: inherit;
  width: 40px;
  height: 40px;
  line-height: 30px;
  cursor: pointer;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
}

.start {
  display: inline-block;
  cursor: pointer;
  padding: 10px 26px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 28px;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  animation: pulse 1.3s ease-in-out infinite;
}
.start.still { animation: none; }
#pause .psel { outline: 4px solid var(--ink); outline-offset: 3px; }
@keyframes pulse { 50% { transform: scale(1.05); } }

.btnrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }

.foot { margin-top: 14px; font-weight: 800; font-size: 13px; color: #8a7a68; }

.winner { margin: 14px 0 12px; font-weight: 900; font-size: 22px; }
.duel { margin: 12px 0 16px; font-weight: 800; color: #6b5a48; }

#resultTable { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-weight: 800; font-size: 20px; }
#resultTable td { padding: 8px 12px; background: #fff; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
#resultTable td:first-child { border-left: 3px solid var(--ink); border-radius: 12px 0 0 12px; width: 60px; font-size: 26px; }
#resultTable td:last-child { border-right: 3px solid var(--ink); border-radius: 0 12px 12px 0; text-align: right; font-variant-numeric: tabular-nums; }
#resultTable tr.human td { background: var(--accent-soft); }
#resultTable td.name { text-align: left; }
.dot { display: inline-block; width: 16px; height: 16px; margin-right: 10px; border: 2px solid var(--ink); border-radius: 50%; vertical-align: -1px; }

@media (max-height: 900px) {
  #menu .title { font-size: 64px; -webkit-text-stroke-width: 7px; text-shadow: 0 5px 0 var(--ink); }
  #menu .tag { margin: 6px 0 12px; }
  .card { padding: 18px 26px 16px; }
  .settings { gap: 4px; margin-bottom: 12px; }
  .howto { margin-top: 12px; font-size: 14px; }
}

/* left of the minimap */
#menuBtn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(50% + 124px);
  z-index: 8;
  cursor: pointer;
  font: 900 13px 'Nunito', system-ui, sans-serif;
  color: #fff;
  background: rgba(29, 26, 23, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- touch controls ---------- */

#touch { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#steerZone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 72%;
  pointer-events: auto;
  touch-action: none;
}
.steer-hint {
  position: absolute;
  left: calc(24px + env(safe-area-inset-left));
  bottom: calc(26px + env(safe-area-inset-bottom));
  padding: 8px 16px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 18px;
  color: #fff;
  background: rgba(29, 26, 23, 0.45);
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
#steerZone.active .steer-hint { opacity: 0; }
.stick {
  position: absolute;
  display: none;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(29, 26, 23, 0.25);
}
.stick.on { display: block; }
.knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
}
.tbtns {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "item ." "brake jump";
  align-items: end;
  gap: 12px 14px;
  pointer-events: auto;
}
.tbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.9);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 5px 0 var(--ink);
  touch-action: none;
  -webkit-user-select: none;
}
.tbtn small { font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }
.tbtn.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.tbtn.big { width: 104px; height: 104px; font-size: 40px; background: var(--accent); color: #fff; }
#tJump { grid-area: jump; }
#tBrake { grid-area: brake; }
#tItem { grid-area: item; background: #e53935; color: #fff; font-size: 34px; }
#tItem.empty { background: rgba(29, 26, 23, 0.45); }
#tItem.empty .ico { opacity: 0.4; }
#tItem .queue { position: absolute; top: -8px; right: -10px; font-size: 18px; letter-spacing: -2px; }
.tbtn.small {
  position: absolute;
  top: calc(96px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  font-size: 14px;
  pointer-events: auto;
}

/* ---------- touch mode: hide keyboard-only bits ---------- */

.rotate { display: none; }
/* On a phone: no player count (split screen needs a keyboard), no instructions, quests in a 2 × 2 square. */
.touch .foot, .touch .hud-bottom, .touch .pkeys, .touch #menu [data-row="mode"], .touch .howto { display: none !important; }
.touch .quests { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; }
.touch .qcard { width: auto; }
.touch .row.focus { border-color: transparent; background: none; }
.touch .incoming { bottom: auto; top: 60%; }
@media (orientation: portrait) {
  .touch .rotate { display: block; margin: 6px 0 4px; font-weight: 900; font-size: 14px; color: var(--accent); }
}

/* ---------- small screens (phones) ---------- */

@media (max-width: 760px), (max-height: 560px) {
  .place { font-size: 54px; -webkit-text-stroke-width: 6px; }
  .place .suf { font-size: 24px; }
  .who { font-size: 10px; padding: 1px 8px; letter-spacing: 1px; margin-top: 4px; }
  .street .now { font-size: 15px; padding: 1px 8px; border-width: 2px; }
  .street .next { font-size: 12px; -webkit-text-stroke-width: 3px; }
  .stats { -webkit-text-stroke-width: 5px; }
  .lap { font-size: 24px; }
  .time { font-size: 16px; }
  .hud-top { top: calc(8px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
  .solo #hud0 .hud-top { right: calc(12px + env(safe-area-inset-right)); }
  #minimap { top: calc(8px + env(safe-area-inset-top)); border-width: 2px; border-radius: 10px; }
  .cd { font-size: 110px; -webkit-text-stroke-width: 9px; }
  .msg { font-size: 30px; -webkit-text-stroke-width: 6px; }
  .alert { font-size: 18px; padding: 4px 12px; }
  .finished .f1 { font-size: 58px; }
  .finished .f2 { font-size: 42px; }
  .tbtn.small { top: calc(74px + env(safe-area-inset-top)); }
  #menuBtn { top: calc(10px + env(safe-area-inset-top)); right: calc(50% + 88px); font-size: 11px; padding: 3px 10px; }
  #streetbar { top: calc(96px + env(safe-area-inset-top)); }
  .card { padding: 14px 16px 14px; border-radius: 20px; box-shadow: 0 6px 0 var(--ink); }
  #menu .title, .title { font-size: 44px; -webkit-text-stroke-width: 5px; text-shadow: 0 4px 0 var(--ink); }
  .title.mid { font-size: 40px; }
  #menu .tag { font-size: 13px; margin: 6px 0 10px; }
  .settings { gap: 2px; margin-bottom: 10px; }
  .row { grid-template-columns: 64px 1fr; gap: 8px; padding: 3px 6px; }
  .label { font-size: 16px; }
  .chip { font-size: 13px; padding: 5px 10px; }
  .tracks { gap: 6px; }
  .tcard { width: 98px; padding: 4px 4px 6px; border-radius: 12px; }
  .tcard canvas { width: 84px; height: 42px; }
  .tcard b { font-size: 12px; }
  .tcard small { font-size: 9px; }
  .blurb { font-size: 12px; }
  .laps { font-size: 20px; }
  .arrow { width: 34px; height: 34px; line-height: 24px; }
  .howto { font-size: 12px; margin: 8px auto 8px; }
  .quad { gap: 2px 4px; }
  .quad .opts { gap: 4px; }
  .quad .chip { font-size: 12px; padding: 3px 8px; }
  .quad .laps b { font-size: 15px; }
  .howto span { margin: 0 4px; }
  .start { font-size: 22px; padding: 8px 20px; }
  .winner { font-size: 17px; margin: 8px 0; }
  #resultTable { font-size: 15px; }
  #resultTable td { padding: 5px 8px; }
  #resultTable td:first-child { font-size: 20px; width: 44px; }
}

@media (max-width: 480px) {
  /* Narrow portrait phone: stack the buttons in one column on the right edge. */
  .tbtns { grid-template-columns: auto; grid-template-areas: "brake" "item" "jump"; justify-items: center; gap: 10px; }
  .steer-hint { font-size: 14px; padding: 6px 12px; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .tcard { width: 88px; }
  .tcard canvas { width: 76px; height: 38px; }
  .howto span { display: block; margin: 2px 0; }
}

/* Phone held sideways: settings on the left, help and the start button on the right. */
@media (max-height: 560px) and (orientation: landscape) {
  .cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: center; }
  #menu .title { font-size: 32px; -webkit-text-stroke-width: 4px; text-shadow: 0 3px 0 var(--ink); }
  .tcard { width: 92px; padding: 3px; }
  .tcard canvas { width: 64px; height: 32px; }
  .tcard b { font-size: 11px; white-space: nowrap; }
  .tcard small { display: none; }
  .row { padding-top: 1px; padding-bottom: 1px; }
  #menu .card { max-width: 860px; }
  #menu .tag, .blurb { display: none; }
  .settings { margin-bottom: 0; }
  .side .howto { display: none; }
  .tbtn { width: 66px; height: 66px; font-size: 22px; }
  .tbtn.big { width: 88px; height: 88px; font-size: 34px; }
  #tItem { font-size: 28px; }
}

/* Wide screens: settings on the left, controls and the start button on the right. */
@media (min-width: 1100px) and (min-height: 680px) {
  #menu .card { max-width: 1200px; }
  .cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: center; }
  .side .howto span { display: block; margin: 3px 0; }
  .settings { gap: 0; }
  #menu .tag { margin: 4px 0 8px; }
  .row { padding: 3px 10px; }
  .tcard canvas { width: 100px; height: 50px; }
  .tcard { width: 136px; padding: 4px 6px 6px; }
}

/* Pure race: no items anywhere */
.noweapons .hud-bottom .items, .noweapons #tItem, .noweapons .howto { display: none; }
.duel { white-space: pre-line; }

/* ---------- player columns ---------- */

.row.animals { grid-template-columns: 1fr; margin-bottom: 14px; }
/* side by side and centred, so one player alone sits in the middle */
.pcols { display: flex; justify-content: center; gap: 10px; }
.pcols > .pcol { flex: 1 1 0; max-width: 300px; }
.pcol {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 8px 8px;
  background: #fff;
  border: 3px solid var(--c, var(--ink));
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--c, #b9b0a4);
  overflow: hidden;
}
.phead {
  align-self: stretch;
  margin: 0 -8px 2px;
  padding: 3px 0 4px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background: var(--c, #8a7a68);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
/* With two players the header is where each one types their name. */
.phead input {
  width: 9ch;
  margin-left: 4px;
  font: inherit;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  -webkit-text-stroke: inherit;
  paint-order: stroke fill;
  -webkit-user-select: text;
  user-select: text;
}
.phead input:focus { outline: none; background: rgba(255, 255, 255, 0.3); border-style: solid; }
/* the character big, with arrows to change it; below it arrows for the colours */
.ppick, .pcolor { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; padding: 2px; border-radius: 12px; }
.ppick img { flex: 1; min-width: 0; max-width: 170px; aspect-ratio: 4 / 3; object-fit: contain; cursor: pointer; }
.ppick .arrow { width: 34px; height: 34px; line-height: 24px; }
.pcolor b { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 14px; white-space: nowrap; }
.pcolor i { font-style: normal; }
.pcolor .dot { margin: 0; }
.pcolor .arrow { width: 28px; height: 28px; line-height: 18px; }
.ppick.focus, .pcolor.focus { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--ink); }
.pcol .pkeys { font-weight: 800; font-size: 12px; color: #4a3f35; text-align: center; line-height: 1.5; }
.pkeys kbd { font-size: 11px; min-width: 0; padding: 0 5px; border-bottom-width: 3px; margin: 1px; }
.pkeys .pad { white-space: nowrap; }

@media (max-width: 760px), (max-height: 560px) {
  .pcols { gap: 6px; }
  .phead { font-size: 16px; }
  .ppick img { max-width: 120px; }
  .pkeys { font-size: 10px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .ppick img { max-width: 90px; }
  .pcol { padding-bottom: 4px; gap: 2px; }
}

/* compact player cards */
.pcol { gap: 2px; }
.phead { font-size: 18px; padding: 2px 0 3px; }
.pkeys { font-size: 11px; line-height: 1.4; }
@media (min-width: 1100px) and (min-height: 680px) {
  .side .howto { margin: 8px 0 6px; }
  .side .howto span { display: inline-block; margin: 0 6px; }
  #menu .card { padding-top: 14px; }
}
@media (min-width: 1100px) and (min-height: 680px) {
  .start { white-space: nowrap; font-size: 24px; }
}

/* Free roam: no race, so no position or laps on the HUD */
.roaming .place, .roaming .lap { display: none; }
/* and no route to pick, so the menu is just the players */
.roaming #menu .cols { display: block; }
.roaming #menu .settings { display: none; }
.roaming #menu .side { max-width: 560px; margin: 0 auto; }

/* The big map, opened from the minimap: click a spot to teleport there. */
#minimap { cursor: zoom-in; }
#bigmap { flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 12; }
#bigCanvas {
  background: rgba(29, 26, 23, 0.75);
  border: 3px solid var(--ink);
  border-radius: 14px;
  cursor: crosshair;
  touch-action: none;
}
#bigmap .bighint { margin: 0; color: #fff; font-weight: 900; text-shadow: 0 2px 0 var(--ink); text-align: center; }
#bigClose { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
#bigAsk {
  position: absolute;
  transform: translateX(-50%);
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  background: #fffaf0;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
}
#bigAsk .btnrow { margin: 6px 0 0; gap: 6px; justify-content: center; }

/* BETA sticker next to the game's name: still in development */
.title .beta {
  display: inline-block;
  vertical-align: super;
  margin-left: 0.15em;
  padding: 0.12em 0.4em;
  font-size: 0.3em;
  line-height: 1;
  color: var(--ink);
  background: var(--gold);
  border: 0.08em solid var(--ink);
  border-radius: 0.3em;
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing: 0.05em;
  transform: rotate(-8deg);
}

/* Missions: pick one on the menu (exploring freely, or a quest), read what it is about, then the
   HUD shows the time left and an arrow to where you have to go. */
.questrow { display: block; text-align: center; margin: 6px 0 2px; }
.quests { display: grid; grid-template-columns: repeat(3, 150px); gap: 10px; justify-content: center; }
.qcard {
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
  padding: 6px 8px 8px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
}
.qcard .qemoji { font-size: 34px; line-height: 1.2; }
.qcard b { font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.15; }
.qcard small { font-weight: 800; font-size: 12px; color: #8a7a68; }
.qcard.on { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--ink); }
.qcard.on small { color: var(--accent-soft); }
.questrow .blurb { margin: 8px auto 0; max-width: 640px; }
#brief { z-index: 11; }
.brief-emoji { font-size: 64px; line-height: 1; }
.brief-story { margin: 12px auto; max-width: 480px; font-weight: 800; font-size: 17px; line-height: 1.45; color: #4a3f35; }
.brief-time { font-family: 'Lilita One', system-ui, sans-serif; font-size: 24px; color: var(--accent); }
.qnav { position: absolute; top: calc(64px + env(safe-area-inset-top)); right: calc(22px + env(safe-area-inset-right)); text-align: center; }
.hud.right .qnav { right: auto; left: calc(22px + env(safe-area-inset-left)); }
.qarrow {
  font-size: 54px;
  line-height: 1;
  color: var(--gold);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.qinfo {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 22px;
  color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
}
.time.low { color: #ff6b6b; animation: blink 0.5s steps(2) infinite; }
body:not(.questing) .qnav { display: none; }
.questing #minimap { cursor: default; }

/* Sights: ride up to one while exploring and a card tells you what it is, in the corner the items
   leave free (the outer one with two players; bottom left on touch, away from the buttons). */
.sight {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom));
  right: calc(22px + env(safe-area-inset-right));
  width: min(360px, calc(100% - 44px));
  padding: 12px 14px 13px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s, transform 0.35s;
}
.sight.show { opacity: 1; transform: none; }
.hud.right .sight { right: auto; left: calc(22px + env(safe-area-inset-left)); }
.touch .sight { right: auto; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); }
.sight-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sight-emoji { font-size: 36px; line-height: 1; }
.sight small { display: block; font-weight: 900; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.sight b { display: block; font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 22px; line-height: 1.1; }
.sight p { font-weight: 700; font-size: 14px; line-height: 1.4; color: #4a3f35; }
@media (max-width: 760px), (max-height: 560px) {
  .sight { width: min(300px, calc(100% - 24px)); padding: 8px 10px 9px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
  .sight-emoji { font-size: 26px; }
  .sight b { font-size: 17px; }
  .sight p { font-size: 12px; line-height: 1.35; }
}

/* Pointers to the sights nearby that are out of view, in the bottom corners: above the items on
   their side, above the sight card on the other (and above the buttons on touch). */
.lm { position: absolute; display: flex; flex-direction: column; gap: 6px; transition: bottom 0.35s; }
.lm.l { left: calc(22px + env(safe-area-inset-left)); align-items: flex-start; }
.lm.r { right: calc(22px + env(safe-area-inset-right)); align-items: flex-end; }
.hud .lm.l, .hud.right .lm.r { bottom: calc(118px + env(safe-area-inset-bottom)); }
.noweapons .hud .lm.l, .noweapons .hud.right .lm.r { bottom: calc(54px + env(safe-area-inset-bottom)); }
.hud .lm.r, .hud.right .lm.l { bottom: calc(28px + var(--sight-h, 0px) + env(safe-area-inset-bottom)); }
.touch .hud .lm.l { left: calc(12px + env(safe-area-inset-left)); bottom: calc(22px + var(--sight-h, 0px) + env(safe-area-inset-bottom)); }
.touch .hud .lm.r { right: calc(12px + env(safe-area-inset-right)); bottom: calc(232px + env(safe-area-inset-bottom)); }
.lmp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 6px;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  background: rgba(29, 26, 23, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  white-space: nowrap;
}
.lm.r .lmp { flex-direction: row-reverse; padding: 3px 6px 3px 12px; }
.lma { display: inline-block; font-size: 16px; color: var(--gold); }
.lme { font-size: 18px; line-height: 1; }
.lmp b { font-weight: 900; }
.lmp small { font-weight: 800; font-size: 12px; opacity: 0.8; }
@media (max-width: 760px), (max-height: 560px) {
  .lmp { font-size: 12px; gap: 4px; }
  .lme { font-size: 15px; }
  .lmp small { font-size: 11px; }
}