: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;
  /* the sky behind the loading screen and its skyline, and the see-through menu card: a city's
     page can set all of these its own way (style in its page.json) */
  --sky: #cfe8f5;
  --skyline: #86bfe0;
  --glass: rgba(255, 250, 240, 0.5);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky);
}

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: var(--sky);
  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: var(--skyline); 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; }
/* The rider's legs, pedalling: the thigh turns at the hip, the shin at the knee and the foot stays level.
   Turning parts (not a path that changes shape) keep moving while the game is busy building the city. */
.loader-thigh { transform-origin: 31px 9px; animation: thigh 1.8s linear infinite; }
.loader-shin { transform-origin: 36.3px 24.1px; animation: shin 1.8s linear infinite; }
.loader-foot { transform-origin: 38px 41px; animation: foot 1.8s linear infinite; }
.loader-thigh.near, .loader-thigh.near * { animation-delay: -0.9s; }
.loader-crank { animation: spin 1.8s linear infinite; }
@keyframes thigh { 0% { transform: rotate(0.0deg); } 4.17% { transform: rotate(-3.1deg); } 8.33% { transform: rotate(-6.3deg); } 12.5% { transform: rotate(-9.8deg); } 16.67% { transform: rotate(-13.7deg); } 20.83% { transform: rotate(-18.0deg); } 25% { transform: rotate(-23.1deg); } 29.17% { transform: rotate(-28.2deg); } 33.33% { transform: rotate(-34.6deg); } 37.5% { transform: rotate(-41.0deg); } 41.67% { transform: rotate(-47.9deg); } 45.83% { transform: rotate(-53.9deg); } 50% { transform: rotate(-58.4deg); } 54.17% { transform: rotate(-61.0deg); } 58.33% { transform: rotate(-60.6deg); } 62.5% { transform: rotate(-58.0deg); } 66.67% { transform: rotate(-53.9deg); } 70.83% { transform: rotate(-47.8deg); } 75% { transform: rotate(-40.7deg); } 79.17% { transform: rotate(-32.5deg); } 83.33% { transform: rotate(-24.1deg); } 87.5% { transform: rotate(-14.9deg); } 91.67% { transform: rotate(-6.1deg); } 95.83% { transform: rotate(1.1deg); } 100% { transform: rotate(0.0deg); } }
@keyframes shin { 0% { transform: rotate(0.0deg); } 4.17% { transform: rotate(11.8deg); } 8.33% { transform: rotate(23.5deg); } 12.5% { transform: rotate(35.2deg); } 16.67% { transform: rotate(46.7deg); } 20.83% { transform: rotate(57.7deg); } 25% { transform: rotate(68.2deg); } 29.17% { transform: rotate(77.0deg); } 33.33% { transform: rotate(85.1deg); } 37.5% { transform: rotate(90.8deg); } 41.67% { transform: rotate(95.3deg); } 45.83% { transform: rotate(96.3deg); } 50% { transform: rotate(94.6deg); } 54.17% { transform: rotate(91.0deg); } 58.33% { transform: rotate(84.6deg); } 62.5% { transform: rotate(76.3deg); } 66.67% { transform: rotate(67.1deg); } 70.83% { transform: rotate(56.6deg); } 75% { transform: rotate(46.1deg); } 79.17% { transform: rotate(34.2deg); } 83.33% { transform: rotate(22.8deg); } 87.5% { transform: rotate(10.8deg); } 91.67% { transform: rotate(-0.4deg); } 95.83% { transform: rotate(-8.3deg); } 100% { transform: rotate(0.0deg); } }
@keyframes foot { 0% { transform: rotate(-0.0deg); } 4.17% { transform: rotate(-8.8deg); } 8.33% { transform: rotate(-17.3deg); } 12.5% { transform: rotate(-25.5deg); } 16.67% { transform: rotate(-33.1deg); } 20.83% { transform: rotate(-39.7deg); } 25% { transform: rotate(-45.0deg); } 29.17% { transform: rotate(-48.8deg); } 33.33% { transform: rotate(-50.5deg); } 37.5% { transform: rotate(-49.8deg); } 41.67% { transform: rotate(-47.4deg); } 45.83% { transform: rotate(-42.3deg); } 50% { transform: rotate(-36.2deg); } 54.17% { transform: rotate(-30.0deg); } 58.33% { transform: rotate(-24.0deg); } 62.5% { transform: rotate(-18.3deg); } 66.67% { transform: rotate(-13.2deg); } 70.83% { transform: rotate(-8.8deg); } 75% { transform: rotate(-5.4deg); } 79.17% { transform: rotate(-1.7deg); } 83.33% { transform: rotate(1.3deg); } 87.5% { transform: rotate(4.1deg); } 91.67% { transform: rotate(6.5deg); } 95.83% { transform: rotate(7.1deg); } 100% { transform: rotate(-0.0deg); } }
.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,
  .loader-thigh, .loader-shin, .loader-foot, .loader-crank { 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: var(--glass);
  -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); }
@media (max-width: 760px), (max-height: 560px) { .site-link { display: none; } }
#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; }
.dropdown { position: relative; }
.dropdown .dd-list { position: absolute; top: calc(100% + 4px); right: 0; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.dropdown .dd-list .chip { white-space: nowrap; }
.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; }
/* the pause menu's sound, weather and map controls on one line, all as tall */
.pausetools { align-items: stretch; }
.pausetools .chip { line-height: 1.2; }
.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; }

.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; }
#menu .start.focus { outline: 4px solid var(--ink); outline-offset: 3px; }
.touch #menu .start.focus { outline: none; }
.credit { margin: 8px 0 0; font-weight: 700; font-size: 11px; color: #8a7a68; }
.credit a { color: inherit; }
#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; }
}

/* 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;
}

/* Wide screens, one player: the minimap in the top left corner with the menu button beside it, which
   leaves the middle to the street sign. Two players keep the shared minimap between their halves. */
@media (min-width: 761px) and (min-height: 561px) {
  .solo #minimap { left: calc(22px + env(safe-area-inset-left)); transform: none; }
  .solo #menuBtn { right: auto; left: calc(22px + 220px + 10px + env(safe-area-inset-left)); }
  .solo #streetbar { top: calc(16px + env(safe-area-inset-top)); }
  .solo #hud0 .hud-top { left: calc(22px + 220px + 10px + 100px + env(safe-area-inset-left)); }
}

/* ---------- 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; }
#steerZone.used .steer-hint { display: none !important; }
#steerZone.used .stick.rest { bottom: calc(26px + env(safe-area-inset-bottom)); }
.roam-hint, .roaming:not(.questing) .race-hint { display: none; }
.roaming:not(.questing) .roam-hint { display: block; }
.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);
}
/* At rest the stick waits above the hint, so it's clear what to drag; a touch moves it under the thumb. */
.stick.on, .stick.rest { display: block; }
.stick.rest {
  left: calc(94px + env(safe-area-inset-left));
  top: auto;
  bottom: calc(80px + env(safe-area-inset-bottom));
  margin: 0 0 0 -70px;
  opacity: 0.75;
}
.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;
  grid-template-areas: "item" "jump";
  justify-items: center;
  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; }
#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; }

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

/* 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"] { 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%; }

/* ---------- 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; }
  #menuBtn { top: calc(10px + env(safe-area-inset-top)); right: calc(50% + 88px); font-size: 14px; padding: 6px 14px; }
  #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; }
  .laps { font-size: 20px; }
  .arrow { width: 34px; height: 34px; line-height: 24px; }
  .quad { gap: 2px 4px; }
  .quad .opts { gap: 4px; }
  .quad .chip { font-size: 12px; padding: 3px 8px; }
  .quad .laps b { font-size: 15px; }
  .start { font-size: 22px; padding: 8px 20px; }
  /* phones: no picture or colours, just a narrow ‹ Paard › to change what you ride (each mission still brings its own) */
  #menu .row.animals { margin-bottom: 8px; }
  #menu .pcol { padding: 2px; border-width: 2px; box-shadow: 0 3px 0 var(--c, #b9b0a4); }
  #menu .phead, #menu .ppick, #menu .pcolor { display: none; }
  #menu .pmount { display: flex; }
  .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 { 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; }
}

/* Phone held sideways: missions or routes on the left, players 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 { display: none; }
  .settings { margin-bottom: 0; }
  .tbtn { width: 66px; height: 66px; font-size: 22px; }
  .tbtn.big { width: 88px; height: 88px; font-size: 34px; }
  #tItem { font-size: 28px; }
}

/* Wide screens: missions or routes on the left, players 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; }
  .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 { 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); }
.pmount { display: none; align-items: center; justify-content: space-between; gap: 4px; width: 100%; }
.pmount b { flex: 1; text-align: center; font-weight: 900; font-size: 15px; white-space: nowrap; }
.pmount .arrow { width: 30px; height: 30px; line-height: 20px; }
.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) {
  #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; }

/* 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; }

/* The big map's second tab, the places index: look a place or a street up and teleport there. */
#bigTabs { margin: 0; gap: 8px; }
#bigBody { display: flex; align-items: center; gap: 12px; }
#bigIndex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(520px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 150px));
  box-sizing: border-box;
  padding: 12px;
  color: var(--ink);
  background: #fffaf0;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
}
#bigSearch {
  font: 800 16px 'Nunito', system-ui, sans-serif;
  padding: 8px 12px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  outline: none;
}
#bigList { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
#bigList h3 { margin: 10px 4px 4px; font: 400 18px 'Lilita One', system-ui, sans-serif; }
#bigList h3:first-child { margin-top: 2px; }
#bigList button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font: 800 15px 'Nunito', system-ui, sans-serif;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
#bigList button:hover, #bigList button.focus { background: var(--accent-soft); }
#bigList .none { margin: 12px 4px; font-weight: 800; color: #8a7a68; }
/* on a wide screen the index stands beside the map, as tall as it: no tabs */
#bigmap.side #bigTabs { display: none; }
#bigmap.side #bigIndex { width: 300px; } /* and as tall as the map (layoutBigMap) */

/* 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); }
#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; pointer-events: auto; }
.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; }
/* The tour: the camera flies over the old town. The street below in the middle at the top, how far
   along as a thin bar along the top edge, and at each stop a card with what is there (with a bar for
   how long it stays on its own, on autoplay). */
#tour { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
body.touring #menu .row.animals { display: none; } /* nobody rides on the tour */
body.touring #menuBtn { right: auto; left: calc(16px + env(safe-area-inset-left)); }
/* the bar: one piece per phase of the tour, a gap between them; click one to go back to its start */
#tourBar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 4px; pointer-events: auto; }
#tourBar button { flex: 1 1 0; height: 14px; padding: 0 0 9px; border: 0; background: none; cursor: pointer; }
#tourBar button i { display: block; height: 5px; background: rgba(29, 26, 23, 0.35); transition: height 0.15s; }
#tourBar button b { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
#tourBar button:hover i { height: 9px; }
#tourBar button { position: relative; }
#tourBar button:first-child::after { left: 8px; transform: none; }
#tourBar button:last-child::after { left: auto; right: 8px; transform: none; }
#tourBar button::after {
  content: attr(data-name);
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 800 13px 'Nunito', system-ui, sans-serif;
  color: #fff;
  background: rgba(29, 26, 23, 0.85);
  border-radius: 999px;
  padding: 4px 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
#tourBar button:hover::after { opacity: 1; }
#tourBar button[data-name='']::after { display: none; }
/* how fast it plays: a round button beside the menu's (main.js puts it there) */
#tourSpeed {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(96px + env(safe-area-inset-left));
  width: 34px; height: 34px;
  pointer-events: auto;
  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: 50%;
  padding: 0;
}
/* the music on or off: a round button beside the speed's (main.js puts it there too) */
#tourMusic {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(138px + env(safe-area-inset-left));
  width: 34px; height: 34px;
  pointer-events: auto;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  background: rgba(29, 26, 23, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  padding: 0;
}
#tourMusic.off { opacity: 0.65; }
#tourName {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  transform: translate(-50%, -8px);
  padding: 4px 16px;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 22px;
  color: #fff;
  background: rgba(29, 26, 23, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}
#tourName.show { opacity: 1; transform: translate(-50%, 0); }
/* the welcome as the tour sets off: big in the middle, then gone */
#tourWelcome {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.9s, transform 1.4s ease-out;
}
#tourWelcome.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#tourWelcome b {
  display: block;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 9vw, 96px);
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
}
#tourWelcome small {
  display: block;
  width: min(680px, 86vw);
  margin: 12px auto 0;
  padding: 8px 18px 10px;
  font-weight: 800;
  font-size: clamp(14px, 2vw, 19px);
  line-height: 1.4;
  white-space: normal;
  color: #fff;
  background: rgba(29, 26, 23, 0.7);
  border-radius: 18px;
}
#tourCard {
  position: absolute;
  left: calc(22px + env(safe-area-inset-left));
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 44px));
  padding: 14px 16px 12px;
  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(24px);
  transition: opacity 0.45s, transform 0.45s;
  overflow: hidden;
}
#tourCard.show { opacity: 1; transform: none; pointer-events: auto; }
#tourCard.paused { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--gold); } /* waiting while it is read */
.tour-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#tourEmoji { font-size: 38px; line-height: 1; }
#tourLabel { display: block; font-weight: 900; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
#tourTitle { display: block; font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 24px; line-height: 1.1; }
#tourText { font-weight: 700; font-size: 15px; line-height: 1.45; color: #4a3f35; }
#tourText ul { margin: 0; padding-left: 1.15em; }
#tourText li { margin: 2px 0; }
#tourText li::marker { color: var(--accent); }
.tour-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 12px; }
.tour-btns .chip { font-size: 14px; padding: 5px 12px; }
.tour-btns .start { font-size: 20px; padding: 6px 18px; box-shadow: 0 4px 0 var(--ink); animation: none; }
.tour-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.tour-timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
#tour:not(.auto) .tour-timer { display: none; }
@media (max-width: 760px), (max-height: 560px) {
  #tourName { font-size: 16px; top: calc(10px + env(safe-area-inset-top)); }
  #tourCard { left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); width: min(340px, calc(100% - 24px)); padding: 10px 12px 10px; }
  #tourEmoji { font-size: 28px; }
  #tourTitle { font-size: 19px; }
  #tourText { font-size: 11.5px; line-height: 1.3; }
  #tourTitle { font-size: 17px; }
  .tour-btns { margin-top: 8px; }
  .tour-btns .start { font-size: 17px; }
}

.sight-head { padding-right: 26px; }
.sight-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 900 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.sight-x:hover { background: var(--accent); color: #fff; }
.sight-more {
  /* a white pill like the tour card's "Lees meer" (a .chip), across the whole card: a big target */
  display: block;
  margin-top: 9px;
  text-align: center;
}
.sight-more[hidden] { display: none; }
/* The tram: standing at a stop it asks whether you want to wait for one, then says it is coming,
   and on board where it goes and what the next stop is. Click or tap it to answer (or get off). */
.tramcard {
  position: absolute;
  top: calc(96px + env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 16px 10px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 0.3s, transform 0.3s;
  cursor: pointer;
}
.tramcard.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tram-badge {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--line, #ffcc00);
  color: #fff;
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.tram-badge.plain { background: #ffcc00; font-size: 26px; text-shadow: none; }
.tramcard small { display: block; font-weight: 900; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.tramcard b { display: block; font-family: 'Lilita One', system-ui, sans-serif; font-weight: 400; font-size: 21px; line-height: 1.15; }
.tramcard p { margin-top: 2px; font-weight: 700; font-size: 13px; line-height: 1.35; color: #4a3f35; }
.tramcard kbd { padding: 0 5px; border: 2px solid var(--ink); border-radius: 5px; font: inherit; font-size: 11px; background: #fff; }
@media (max-width: 760px), (max-height: 560px) {
  .tramcard { top: calc(70px + env(safe-area-inset-top)); gap: 8px; padding: 6px 10px 6px 6px; border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
  .tram-badge { min-width: 36px; height: 36px; font-size: 22px; }
  .tramcard b { font-size: 17px; }
  .tramcard p { font-size: 12px; }
}
@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; }
  .sight-x { top: 6px; right: 6px; width: 24px; height: 24px; font-size: 11px; }
  .sight-more { margin-top: 6px; padding: 5px 10px; font-size: 13px; border-width: 2px; }
}

/* Pointers to the sights nearby that are out of view, quietly in the bottom corners: above the
   items on their side, above the sight card on the other. Not on phones, where the screen is full. */
.lm { position: absolute; display: flex; flex-direction: column; gap: 4px; 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 .lm { display: none; }
.lmp {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 6px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: rgba(29, 26, 23, 0.28);
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0.85;
}
.lm.r .lmp { flex-direction: row-reverse; padding: 2px 6px 2px 10px; }
.lma { display: inline-block; font-size: 13px; color: var(--gold); }
.lme { font-size: 15px; line-height: 1; }
.lmp b { font-weight: 800; }
.lmp small { font-weight: 700; font-size: 11px; opacity: 0.8; }
@media (max-width: 760px), (max-height: 560px) { .lm { display: none; } }

/* ?watch (js/main.js): the tour on its own, for the site's pages to show behind their words: no
   loading screen, menu, buttons, street names or cards. (?watch=cards is the whole tour, as from the
   menu, starting straight away.) */
html.watch:not(.watch-cards) :is(#loader, #menu, #menuBtn, #touch, #minimap, #tourBar, #tourSpeed, #tourMusic,
  #tourWelcome, #tourName, #tourCard) { display: none !important; }