:root {
  --ink: #2a1b3d;
  --cream: #fff8ea;
  --pink: #ff4fa3;
  --green: #3fb24a;
  --blue: #3a6fe0;
  --yellow: #ffd23f;
  --shadow: 0 4px 0 var(--ink);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: Fredoka, ui-rounded, system-ui, sans-serif;
  color: var(--ink); background: #fbf0d9;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}

#map { position: fixed; inset: 0; }
#fx { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.hidden { display: none !important; }

button {
  font: inherit; color: var(--ink); cursor: pointer;
  border: 3px solid var(--ink); background: #fff; border-radius: 16px;
  box-shadow: var(--shadow); touch-action: manipulation;
  transition: transform .08s, box-shadow .08s;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
button:disabled { opacity: .45; filter: grayscale(.6); }

.big { display: block; width: 100%; padding: 14px 18px; font-size: 1.25rem; font-weight: 700; margin-top: 12px; }
.mid { padding: 10px 12px; font-size: 1rem; font-weight: 600; flex: 1; }
.pink { background: linear-gradient(#ff7cbc, var(--pink)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.green { background: linear-gradient(#6fd36f, var(--green)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.blue { background: linear-gradient(#73a0ff, var(--blue)); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.round { width: 50px; height: 50px; border-radius: 50%; font-size: 1.35rem; padding: 0; display: grid; place-items: center; }
.round.small { width: 40px; height: 40px; font-size: 1.05rem; }
.row { display: flex; gap: 10px; margin-top: 10px; }

/* ---- HUD ---- */
#hud { position: fixed; left: 10px; right: 10px; top: calc(10px + var(--safe-t)); z-index: 5; pointer-events: none; }
.quest-card {
  background: var(--cream); border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow);
  padding: 8px 12px 9px; max-width: 520px; margin: 0 auto; pointer-events: auto;
}
/* first row leaves room for the sound button, which sits inside the card's corner */
.q-title { font-weight: 700; font-size: 1.05rem; line-height: 36px; height: 36px; padding-right: 48px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.questing #topright { top: calc(17px + var(--safe-t)); right: max(20px, calc((100vw - 520px) / 2 + 10px)); }
body.questing #btn-sound { width: 36px; height: 36px; font-size: .95rem; box-shadow: 0 2px 0 var(--ink); }
body.questing #topright .badge { box-shadow: 0 2px 0 var(--ink); }
.q-stats { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chip { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; font-size: .9rem; display: inline-flex; align-items: center; gap: 4px; }
#q-time.late { color: #e5473f; }

#topright { position: fixed; top: calc(10px + var(--safe-t)); right: 10px; z-index: 6; display: flex; gap: 6px; align-items: center; }
.badge {
  font-weight: 700; font-size: .8rem; padding: 6px 10px; border-radius: 999px; letter-spacing: .04em;
  box-shadow: 0 3px 0 var(--ink);
}
.badge.live { background: #b9f5b0; }
.badge.live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1fa12c; margin-right: 6px; animation: blink 1.2s infinite; }
.badge.demo { background: #ffe08a; }
.badge.replay { background: #d9ccff; font-variant-numeric: tabular-nums; }
@keyframes blink { 50% { opacity: .2; } }

#side { position: fixed; right: 10px; bottom: calc(120px + var(--safe-b)); z-index: 5; display: flex; flex-direction: column; gap: 10px; }

#bottom { position: fixed; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; padding: 0 76px 0 14px; }
#bottom > * { pointer-events: auto; }
#btn-action { max-width: 380px; font-size: 1.3rem; animation: pop .25s; }
#hint {
  background: rgba(255,248,234,.92); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px;
  font-size: .9rem; font-weight: 500; margin-bottom: 4px; max-width: 100%; text-align: center;
}
#hint:empty { display: none; }
@keyframes pop { from { transform: scale(.6); } 70% { transform: scale(1.06); } }

#toast {
  position: fixed; left: 50%; top: calc(124px + var(--safe-t)); transform: translate(-50%, -20px); z-index: 20;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 16px; font-weight: 600; max-width: min(90vw, 420px);
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- sheets & screens ---- */
.sheet {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 12; max-width: 460px; margin: 0 auto;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 14px;
  animation: slideup .25s ease-out;
}
@keyframes slideup { from { transform: translateY(40px); opacity: 0; } }
.close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; padding: 0; box-shadow: 0 2px 0 var(--ink); }
.card-head { display: flex; gap: 12px; align-items: center; }
#card-portrait { width: 80px; height: 80px; background: radial-gradient(#fff, #ffe9c2); border: 3px solid var(--ink); border-radius: 18px; flex: none; }
.card-species { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .7; }
.card-name { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.card-line { font-size: .95rem; margin-top: 2px; }
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.card-stats div { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; text-align: center; }
.card-stats span { display: block; font-size: .72rem; text-transform: uppercase; opacity: .65; letter-spacing: .05em; }
.card-stats b { font-size: 1rem; }
.card-note { font-size: .85rem; margin-top: 8px; min-height: 1em; opacity: .8; }
.card-actions { display: flex; gap: 10px; }
.card-actions .big { margin-top: 8px; font-size: 1.1rem; padding: 11px; }

#pickbar { text-align: center; font-size: 1.1rem; }

.screen {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: calc(16px + var(--safe-t)) 14px calc(16px + var(--safe-b));
  background: radial-gradient(circle at 50% 30%, rgba(255,240,210,.75), rgba(42,27,61,.55));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.panel {
  width: min(100%, 440px); max-height: 100%; background: var(--cream); border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 var(--ink); padding: 16px 18px 18px; text-align: center; animation: pop .3s;
}
.panel.scroll { overflow-y: auto; text-align: left; }
.panel.scroll h2, .panel.scroll h3 { text-align: center; }
#parade { width: 100%; height: 120px; display: block; margin: -6px 0 -4px; }
h1 { font-size: 2.6rem; margin: 0; line-height: 1; color: var(--pink); text-shadow: 3px 3px 0 var(--ink); -webkit-text-stroke: 1.5px var(--ink); letter-spacing: .01em; }
h1 small { display: block; font-size: 1rem; color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; letter-spacing: .4em; text-transform: uppercase; margin-top: 4px; }
h2 { margin: 4px 0 8px; font-size: 1.7rem; }
h3 { margin: 14px 0 6px; }
.tag { margin: 10px 0 12px; font-size: .98rem; line-height: 1.35; }
.small { font-size: .85rem; opacity: .8; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 8px 4px; font-weight: 600; font-size: .95rem; box-shadow: 0 3px 0 var(--ink); }
.seg button small { display: block; font-size: .72rem; opacity: .7; font-weight: 500; }
.seg button.on { background: var(--yellow); }
.record { margin-top: 12px; font-size: .85rem; opacity: .75; }
.how { padding-left: 1.3em; line-height: 1.4; margin: 0; }
.how li { margin-bottom: 6px; }

.species-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.species { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 8px; text-align: center; }
.species canvas { width: 100%; height: 86px; display: block; }
.species b { display: block; font-size: 1.05rem; }
.species i { display: block; font-style: normal; font-size: .75rem; opacity: .7; }
.species p { margin: 4px 0 0; font-size: .78rem; line-height: 1.25; }
.species.locked canvas { filter: brightness(0) opacity(.25); }

.stars { font-size: 2.6rem; letter-spacing: .1em; min-height: 1em; }
.stars span { display: inline-block; animation: pop .4s backwards; }
.stars span.off { filter: grayscale(1) opacity(.3); }
.score { font-size: 2rem; font-weight: 700; color: var(--pink); text-shadow: 2px 2px 0 var(--ink); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.end-stats div { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 5px; font-size: .75rem; }
.end-stats b { display: block; font-size: 1.05rem; }
.end-rides { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: .85rem; }
.end-rides span { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; }

.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: var(--safe-b); }

@media (min-width: 700px) {
  #bottom { padding-right: 14px; }
}

#btn-home { display: block; width: 100%; margin-top: 10px; }
.species p b { display: inline; font-size: inherit; }

/* ---- replay player ---- */
#player {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 6; max-width: 520px; margin: 0 auto;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); padding: 8px 12px 6px;
  animation: slideup .25s ease-out;
}
.pl-row { display: flex; align-items: center; gap: 8px; }
.pl-clock { flex: 1; min-width: 0; line-height: 1.05; }
.pl-clock b { display: block; font-size: 1.55rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pl-clock span { display: block; font-size: .8rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-speed { flex: none; text-align: center; }
.pl-speed small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-bottom: 1px; }
.pl-speed > div { display: flex; align-items: center; gap: 4px; }
.pl-speed b { min-width: 3em; text-align: center; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pl-speed .round.small, #pl-play { flex: none; width: 40px; height: 40px; font-size: 1.15rem; font-weight: 700; box-shadow: 0 3px 0 var(--ink); }
.pl-scrub { position: relative; height: 46px; margin-top: 6px; touch-action: none; cursor: ew-resize; }
#pl-activity { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px; pointer-events: none; }
.pl-track { position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; border-radius: 4px; background: rgba(42,27,61,.15); overflow: hidden; pointer-events: none; }
#pl-done { height: 100%; width: 0; background: var(--pink); }
#pl-knob {
  position: absolute; bottom: -2px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: var(--pink); border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); pointer-events: none;
}
.pl-scrub.dragging #pl-knob { transform: scale(1.25); }
.pl-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; margin-top: 2px; gap: 6px; }
#pl-hint { opacity: .75; }
#pl-count { opacity: .6; white-space: nowrap; }
#pl-day { font: inherit; border: 2px solid var(--ink); border-radius: 8px; background: #fff; padding: 0 4px; }
#player.buffering #pl-time::after { content: ' ⏳'; font-size: 1rem; }
#player.quest .pl-scrub, #player.quest .pl-foot { display: none; }
body.watching #bottom { bottom: calc(150px + var(--safe-b)); padding-right: 76px; }
body.watching #side { bottom: calc(150px + var(--safe-b)); }
body.watching.questing #bottom, body.watching.questing #side { bottom: calc(80px + var(--safe-b)); }
#badge.replay { cursor: pointer; }
#badge.replay::after { content: ' ▾'; font-size: .7em; opacity: .7; }

/* ---- quest intro ticket ---- */
#quest-intro { position: fixed; inset: 0; z-index: 25; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px calc(14px + var(--safe-b)); background: linear-gradient(transparent 35%, rgba(42,27,61,.35)); }
.ticket {
  width: min(100%, 420px); background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 7px 0 var(--ink);
  padding: 14px 18px 16px; position: relative; overflow: hidden;
}
.ticket::before, .ticket::after { /* punched ticket holes */
  content: ''; position: absolute; top: 46px; width: 22px; height: 22px; border-radius: 50%; background: rgba(42,27,61,.35); border: 3px solid var(--ink);
}
.ticket::before { left: -14px; } .ticket::after { right: -14px; }
.qi-head { text-align: center; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--pink);
  padding-bottom: 10px; border-bottom: 3px dashed rgba(42,27,61,.25); margin: 0 6px 12px; }
.qi-stop { display: flex; align-items: center; gap: 10px; }
.qi-badges { display: flex; gap: 3px; min-width: 34px; justify-content: center; }
.qi-name { flex: 1; min-width: 0; line-height: 1.1; }
.qi-name small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.qi-name b { display: block; font-size: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-flag { font-size: 1.6rem; }
.qi-route { display: flex; align-items: center; gap: 10px; height: 78px; }
.qi-track { width: 34px; height: 100%; position: relative; flex: none; }
.qi-track::before { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px; margin-left: -2px;
  border-left: 4px dotted var(--pink); transform-origin: top; }
#qi-pip { position: absolute; inset: 0; width: 100%; height: 100%; }
.qi-dist b { display: block; font-size: 1.9rem; color: var(--pink); text-shadow: 2px 2px 0 var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.qi-dist small { font-size: .78rem; opacity: .7; }
.qi-text { margin: 12px 0 0; text-align: center; font-size: .95rem; }
#qi-go { margin-top: 12px; }
.sl-badge { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ink);
  color: #fff; font-weight: 700; font-size: .95rem; text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: 0 2px 0 var(--ink); }
.sl-badge.metro { background: #2b78e4; } .sl-badge.rail { background: #d6439b; }
.sl-badge.tram { background: #f08a24; } .sl-badge.ferry { background: #17a8a2; }

/* choreography */
#quest-intro.go .ticket { animation: qi-rise .5s cubic-bezier(.2,1.4,.4,1) both; }
#quest-intro.go .qi-head { animation: qi-fade .4s .25s both; }
#quest-intro.go .qi-from { animation: qi-in-left .45s .45s cubic-bezier(.2,1.5,.4,1) both; }
#quest-intro.go .qi-track::before { animation: qi-grow .8s .8s ease-out both; }
#quest-intro.go .qi-dist { animation: qi-fade .4s .85s both; }
#quest-intro.go .qi-to { animation: qi-in-right .5s 1.55s cubic-bezier(.2,1.6,.4,1) both; }
#quest-intro.go .qi-to .qi-flag { animation: qi-wave 1s 2.05s ease-in-out 2; transform-origin: bottom left; display: inline-block; }
#quest-intro.go .qi-badges .sl-badge { animation: qi-pop .35s cubic-bezier(.2,1.8,.4,1) both; }
#quest-intro.go .qi-from .sl-badge { animation-delay: .7s; }
#quest-intro.go .qi-to .sl-badge { animation-delay: 1.85s; }
#quest-intro.go .qi-text { animation: qi-fade .5s 2.05s both; }
#quest-intro.go #qi-go { animation: qi-pop .45s 2.35s cubic-bezier(.2,1.8,.4,1) both, qi-pulse 1.6s 3s ease-in-out infinite; }
@keyframes qi-rise { from { transform: translateY(110%); } }
@keyframes qi-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes qi-in-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes qi-in-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes qi-grow { from { transform: scaleY(0); } }
@keyframes qi-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes qi-wave { 25% { transform: rotate(-14deg); } 75% { transform: rotate(10deg); } }
@keyframes qi-pulse { 50% { transform: scale(1.04); } }

/* ---- daily challenge ---- */
.gold { background: linear-gradient(#ffe27a, #ffbe2e); color: var(--ink); }
#btn-daily { margin: 6px 0 4px; }
#btn-daily small { display: block; font-size: .8rem; font-weight: 500; margin-top: 2px; }
.linkish { border: 0; box-shadow: none; background: none; text-decoration: underline; font-size: .85rem; padding: 2px 6px; margin-bottom: 8px; opacity: .8; }
.linkish:active { transform: none; box-shadow: none; }
.end-daily { margin-top: 10px; text-align: left; }
.daily-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; text-align: center; }
.daily-form .row { margin-top: 0; }
.daily-form input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; }
.daily-form .mid { flex: none; }
.daily-msg { text-align: center; font-size: .9rem; margin: 8px 0 4px; min-height: 1em; }
.board-list { list-style: none; padding: 0; margin: 6px 0 0; max-height: 34vh; overflow-y: auto; }
.board-list li { display: flex; gap: 10px; align-items: center; padding: 5px 10px; border-radius: 10px; font-size: .95rem; }
.board-list li:nth-child(odd) { background: rgba(42,27,61,.05); }
.board-list li.me { background: #ffe27a; font-weight: 700; }
.board-list .rk { width: 2.2em; text-align: right; opacity: .7; font-variant-numeric: tabular-nums; }
.board-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .tm { font-variant-numeric: tabular-nums; font-weight: 600; }
.board-list .gap { justify-content: center; opacity: .5; background: none !important; }
#screen-start .panel { overflow-y: auto; }

#btn-signs.off { opacity: .55; }
#btn-signs.off::after { content: ''; position: absolute; width: 34px; height: 3px; background: var(--ink); border-radius: 2px; transform: rotate(-45deg); }
#btn-signs { position: relative; }

/* compact time bar during quests: clock + speed only */
#player.quest { padding: 6px 10px; }
#player.quest .pl-clock b { font-size: 1.25rem; }
#player.quest .pl-speed small { display: none; }

/* ---- give up modal ---- */
.quit-panel { width: min(100%, 360px); }
#quit-pip { width: 120px; height: 100px; display: block; margin: -4px auto 0; }
.quit-panel h2 { margin-top: 0; }
.quit-leave { display: block; width: 100%; margin-top: 10px; background: #fff; }