/* Wobble. One look, on every device: the canvas reads these same colors (see js/art.js). */

/* Fonts are vendored (latin subset, SIL Open Font License) so the game runs offline. */
@font-face { font-family: "Bagel Fat One"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bagel-fat-one-latin.woff2) format("woff2"); }
@font-face { font-family: Nunito; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/nunito-latin.woff2) format("woff2"); }

:root {
  /* world. A campsite may change sky, hill, ground, edge and leaf: see js/sites.js */
  --sky: #C4ECF8;
  --hill: #9DD5EA;
  --wall: #BFE8D6;      /* the RV, and indoors: the menus */
  --ground: #17384A;
  --ice: #F1FAFF;
  --cream: #FFF6E0;     /* crates, platforms, dust */
  /* accents */
  --jam: #FF4F7B;
  --jam-deep: #B72A52;
  --lemon: #FFD23F;
  --mint: #19C3A6;
  --leaf: #19C3A6;      /* trees and bushes */
  --blue: #2F8FFF;
  --bronze: #D98A52;    /* medals; gold is lemon */
  --silver: #A7B7C2;
  --coin-rim: #FF8A1F;
  /* interface */
  --ink: #10303D;
  --soft: rgba(16, 48, 61, .64);
  --edge: #2E7186;      /* button undersides, ropes, outlines */
  --panel: #FFFDF6;
  --on-ground: #EAF6F8; /* text that sits on the dark ground */

  --pad-h: min(24cqw, 104px);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; justify-content: center; overflow: hidden;
  background: var(--ground); color: var(--ink);
  font-family: Nunito, ui-rounded, "Segoe UI", system-ui, sans-serif; font-weight: 600;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.display { font-family: "Bagel Fat One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif; font-weight: 400; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; }

/* The stage. A race plays in a fixed phone-shaped frame so every device sees the same distance ahead;
   the camp and the menus fill the whole screen. */
#stage { position: relative; height: 100%; aspect-ratio: 3 / 5; max-width: 100%; overflow: hidden; container-type: size; background: var(--sky); }
body.camp #stage { aspect-ratio: auto; width: 100%; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A phone held sideways: ask for portrait (a web page cannot lock rotation). */
#rotate { display: none; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 1.4rem; background: var(--ground); color: var(--on-ground); }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) { #rotate { display: flex; } }

/* ---------- buttons ---------- */
.pill { padding: 10px 18px; border-radius: 999px; font-weight: 800; background: var(--panel); color: var(--ink); box-shadow: 0 3px 0 var(--edge); }
.pill.accent, .go { background: var(--jam); color: #fff; box-shadow: 0 3px 0 var(--jam-deep); }
.go { padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 0 var(--jam-deep); }
.pill:active, .go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.pill.accent:active, .go:active { box-shadow: 0 1px 0 var(--jam-deep); }

/* ---------- coins and medals, wherever they appear ---------- */
.coin { display: inline-block; width: 1em; height: 1em; margin-right: .3em; vertical-align: -.14em; border-radius: 50%; background: var(--lemon); box-shadow: inset 0 0 0 .17em var(--coin-rim); }
.purse { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* a count, not a button */
#purse { padding: 6px 2px; text-shadow: 0 0 2px var(--sky), 0 0 8px var(--sky); }
body.wild #purse { padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--panel); text-shadow: none; } /* out exploring it may be over the dark of a tunnel */
.medal { display: inline-block; width: .85em; height: .85em; margin-right: .3em; vertical-align: -.06em; border-radius: 50%; background: var(--edge); }
.medal.m1 { background: var(--bronze); }
.medal.m2 { background: var(--silver); }
.medal.m3 { background: var(--lemon); }

/* ---------- HUD: the clock in a race or a playground game, the coins in camp, and the buttons ---------- */
.hud { position: absolute; inset: 0 0 auto 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px; pointer-events: none; }
body.camp:not(.playing) .clock, body:not(.camp) #purse, body.playing #purse { display: none; }
body.camp:not(.playing):not(.wild) #campBtn, body.camp:not(.playing) #restartBtn, body.in-menu .hud { display: none; } /* out exploring, Camp is the quick way home */
#time, #bestLine, #runKind { text-shadow: 0 0 2px var(--sky), 0 0 8px var(--sky); } /* stays readable where a wall passes behind it */
#time { font-size: clamp(2.4rem, 9cqw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.clock { min-width: 0; }
#bestLine, #runKind { white-space: nowrap; } /* they sit below the buttons, and may run on underneath them */
#bestLine { margin-top: 4px; font-size: .95rem; color: var(--soft); }
#target, #picked { margin-left: .5em; }
#picked .coin { margin-right: .25em; }
#runKind { margin-top: 2px; font-size: .85rem; color: var(--soft); }

/* testing only: the bar for going to another day (index.html?dev). In camp, out of the way of the news */
.dev { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; width: max-content; max-width: 94cqw; padding: 6px 8px; border-radius: 14px; font-size: .8rem; font-weight: 800; background: var(--panel); box-shadow: 0 3px 0 var(--edge); opacity: .92; }
.dev button { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 1.1rem; line-height: 1; }
.dev button.wide { width: auto; padding: 0 9px; font-size: .8rem; }
.dev input { height: 30px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 8px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; } /* 16px, as for a card's fields */
.dev span { flex-basis: 100%; text-align: center; color: var(--soft); }
body:not(.camp) .dev, body.in-menu .dev, body.playing .dev, body.wild .dev { display: none; }
body.wild .hint { display: none; } /* out exploring the view goes up and down, so there is no knowing what the hint would be over */

/* news that pops up for a moment: an outfit earned */
.toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: max-content; max-width: 88cqw; padding: 10px 18px; border-radius: 999px; text-align: center; font-weight: 800; font-size: .95rem; background: var(--lemon); color: var(--ink); box-shadow: 0 3px 0 var(--coin-rim); pointer-events: none; animation: drop .25s ease-out; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -14px); } }
.tools { display: flex; gap: 8px; pointer-events: auto; }
.tools .pill { padding: 9px 14px; font-size: .92rem; }
.tools .icon { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon .cone { fill: currentColor; }
.icon[aria-pressed="true"] .off, .icon[aria-pressed="false"] .on { display: none; }

/* ---------- the two pads, and the one-line hint above them ---------- */
.pads { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 0 16px 18px; pointer-events: none; }
.pad { pointer-events: auto; width: min(34cqw, 150px); height: var(--pad-h); border-radius: 28px; display: grid; place-items: center; background: var(--panel); color: var(--ink); box-shadow: 0 6px 0 var(--edge); touch-action: none; }
.pad svg { width: 38%; max-width: 44px; fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pad.on { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); background: var(--lemon); }
.hint { position: absolute; inset: auto 0 calc(var(--pad-h) + 34px) 0; padding: 0 16px; text-align: center; font-size: .85rem; color: var(--on-ground); opacity: .8; pointer-events: none; }

/* ---------- menus: outfits and courses ---------- */
.menu { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: min(92cqw, 420px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.menu-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tabs { display: contents; }
.menu-bar .pill { padding: 8px 12px; font-size: .88rem; }
.tabs .pill[aria-pressed="true"] { background: var(--lemon); }
.menu-title { margin-top: 6px; font-size: 2rem; line-height: 1.1; }
.menu-sub { font-size: .92rem; color: var(--soft); }
#menuGo { margin-top: 6px; }

.shelf { position: absolute; inset: auto 0 calc(var(--pad-h) + 64px) 0; }
/* The shop's till: your coins on the left, and Buy in the middle when there is something to buy. The row is
   always there, so nothing jumps. While both pads are held, Buy fills from the left. */
.till { position: relative; display: flex; align-items: center; justify-content: center; height: 48px; }
.till .purse { position: absolute; left: 18px; color: var(--on-ground); }
#buy { padding: 8px 20px; font-size: .95rem; background: linear-gradient(90deg, var(--jam-deep) var(--held, 0%), var(--jam) var(--held, 0%)); }
#buy.unseen { visibility: hidden; }
#buy.cant { background: var(--panel); color: var(--soft); box-shadow: 0 4px 0 var(--edge); }
.strip { display: flex; gap: 10px; padding: 6px 16px 10px; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip::before, .strip::after { content: ""; margin: auto; } /* centers the row when it fits, scrolls when it does not */
.chip { position: relative; flex: 0 0 auto; width: 68px; height: 74px; padding: 4px; border-radius: 18px; background: var(--panel); box-shadow: 0 3px 0 var(--edge); touch-action: pan-x; }
.chip.locked canvas { opacity: .5; }
.chip .price { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; align-items: center; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; background: var(--ink); color: #fff; pointer-events: none; }
.chip .price .coin { margin-right: .25em; }
.chip .price svg { width: 11px; height: 11px; margin: 2px 0 2px 2px; }
.chip canvas { display: block; width: 60px; height: 66px; pointer-events: none; }
.chip[aria-pressed="true"] { outline: 4px solid var(--lemon); outline-offset: -1px; }
.chip.day { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chip.day.monday:not(:first-child) { margin-left: 14px; } /* a gap between one week and the next */
.chip.day .tag { font-size: .7rem; font-weight: 800; color: var(--soft); }
.chip.day .num { font-size: 2rem; line-height: 1; }
.chip.day.endless .num { color: var(--jam); } /* a week's endless course */
.chip.day.long { width: 104px; } /* a week's finale: a longer chip for the longer course */
.chip.day.won::after { content: ""; width: 22px; height: 5px; margin-top: 3px; border-radius: 3px; background: var(--edge); } /* finished, and in its medal's color */
.chip.day.m1::after { background: var(--bronze); }
.chip.day.m2::after { background: var(--silver); }
.chip.day.m3::after { background: var(--lemon); }

/* ---------- league board ---------- */
.league { position: absolute; left: 50%; top: 14px; bottom: calc(var(--pad-h) + 66px); transform: translateX(-50%); width: min(92cqw, 420px); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.list { position: relative; flex: 1; min-height: 0; width: 100%; padding: 6px 0; overflow-y: auto; touch-action: pan-y; border-radius: 20px; background: var(--panel); box-shadow: 0 4px 0 var(--edge); }
.lrow { display: flex; gap: 10px; padding: 7px 14px; text-align: left; font-size: .95rem; font-variant-numeric: tabular-nums; border-left: 6px solid transparent; }
.lrow.up { border-left-color: var(--mint); }
.lrow.down { border-left-color: var(--jam); }
.lrow.me { background: var(--lemon); font-weight: 800; }
.lrow > span:first-child { width: 2em; color: var(--soft); }
.lrow.me > span:first-child { color: inherit; }
.lrow > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lrow > span:last-child { white-space: nowrap; }
.lrow .house { display: block; margin-top: 1px; font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--soft); }

/* ---------- result card ---------- */
.card { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(88cqw, 360px); padding: 26px 24px 24px; border-radius: 30px; text-align: center; background: var(--panel); box-shadow: 0 8px 0 var(--edge); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.card { animation: pop .2s ease-out; }
.card h2 { margin: 0 0 6px; font-size: 3.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.card p { margin: 0 0 18px; line-height: 1.45; color: var(--soft); }
.medals { display: flex; justify-content: center; gap: 10px; margin: 10px 0 4px; }
.medals .medal { width: 30px; height: 30px; margin: 0; background: none; box-shadow: inset 0 0 0 3px rgba(16, 48, 61, .16); } /* not won yet: an empty ring */
.medals .medal.on { box-shadow: inset 0 -4px 0 rgba(16, 48, 61, .2); }
.medals .m1.on { background: var(--bronze); }
.medals .m2.on { background: var(--silver); }
.medals .m3.on { background: var(--lemon); }
.medals .medal.new { animation: medal .5s .35s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes medal { from { opacity: 0; transform: scale(.3); } }
.card .next { min-height: 1.3em; margin-bottom: 10px; font-size: .85rem; color: var(--soft); }
.card .gain { margin: -8px 0 16px; font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.card .kind { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(16, 48, 61, .1); color: var(--soft); }
.card .note { margin: -8px 0 18px; font-size: .9rem; font-weight: 800; color: var(--ink); }
.card .found { display: flex; justify-content: center; gap: 7px; margin: 0 0 12px; font-size: .95rem; } /* the course's coins: those found, and rings for the rest */
.card .found .coin { margin: 0; }
.card .found .coin:not(.on) { background: none; box-shadow: inset 0 0 0 .17em rgba(16, 48, 61, .16); }
.row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#menuBackup { position: absolute; right: 18px; padding: 8px 12px; font-size: .88rem; } /* the way to the save's backup: at the far end of the RV's till */
#backup { top: calc((100cqh - var(--pad-h) - 52px) / 2); } /* the save's backup: a card of its own, in the middle of what is above the hint, so that on a small phone it stays clear of it */
#backup h2 { font-size: 2.2rem; margin-bottom: 10px; }
#backup:has(#backupOut:not([hidden])) > p:first-of-type { display: none; } /* with the code laid out to copy by hand, the card is a field taller: the line that says what a code is makes room */
#backup .note { margin: 14px 0 0; }
#backup .row { margin-top: 18px; }
.card input { display: block; width: 100%; margin-top: 14px; padding: 10px; border-radius: 12px; border: 2px solid var(--edge); background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: center; -webkit-user-select: text; user-select: text; } /* 16px: a phone zooms in on a field with smaller text when it is tapped */

/* A waiting tab never runs the game or writes over the tab that owns the save. */
#saveBusy { z-index: 100; position: fixed; }