:root {
  color-scheme: dark;
  font: 16px system-ui, sans-serif;
  color: #f7f3e7;
  background: #111c17;
  --gold: #f7ca77;
  --panel: #14241dea;
}
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
[hidden] { display: none !important; }
canvas { position: fixed; inset: 0; display: block; }
main { position: fixed; inset: 0; isolation: isolate; }
.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, #10201848, #0a1512ee);
}
h1, h2, p { margin: 0; }
h1 {
  font: 900 clamp(4rem, 16vw, 8rem)/.78 system-ui, sans-serif;
  letter-spacing: -.085em;
  text-transform: uppercase;
  text-shadow: 0 4px 26px #07110d;
  margin-bottom: 24px;
}
h1 em { color: var(--gold); font-style: normal; }
h2 { font-size: clamp(1.7rem, 7vw, 2.5rem); letter-spacing: -.035em; }
p { max-width: 33ch; line-height: 1.45; }
button {
  min-height: 46px;
  padding: 10px 21px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--gold);
  color: #201a10;
  font: 800 1rem system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
button:disabled { cursor: default; }
#play, #choose, #start { min-width: 150px; }
#levels { display: grid; grid-template-columns: repeat(3, minmax(56px, 80px)); gap: 9px; }
#levels button {
  display: grid;
  place-content: center;
  min-height: 52px;
  padding: 5px;
  background: var(--panel);
  color: inherit;
  border-color: #9fb6a25c;
}
#levels button span { font-size: .7rem; font-weight: 500; }
#levels button:disabled { color: #b7c3ba; }
#levels button[aria-pressed="true"] { background: var(--gold); color: #201a10; }
#hud, footer {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
#hud { z-index: 1; top: max(12px, env(safe-area-inset-top)); pointer-events: none; }
#hud span, footer button { background: var(--panel); color: inherit; border-radius: 8px; }
#hud span { padding: 8px 10px; font-size: .85rem; font-variant-numeric: tabular-nums; }
footer { bottom: max(12px, env(safe-area-inset-bottom)); }
#msg {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 45px);
  width: 100%;
  max-width: none;
  padding: 0 14px;
  text-align: center;
  text-shadow: 0 1px 6px black, 0 1px 3px black;
  pointer-events: none;
}
#count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: clamp(4rem, 22vw, 9rem);
  font-weight: 900;
  text-shadow: 0 2px 18px #07110d;
  pointer-events: none;
}
#error { background: #111c17; z-index: 2; }

/* Shared finish for the title, selection and race controls. */
:root {
  font-family: "Barlow", "Segoe UI", system-ui, sans-serif;
  --gold: #f6c26b;
  --metal-edge: #ce9b59;
  --control: linear-gradient(#462f21, #241810);
}
#splash, #select {
  background:
    linear-gradient(180deg, #08130caf 0%, transparent 40%, transparent 61%, #080e0cd9 100%),
    #172d22 url("cover.jpg") center 58% / cover no-repeat;
}
#splash {
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  padding-block: max(32px, calc(env(safe-area-inset-top) + 22px)) max(45px, 8svh, env(safe-area-inset-bottom));
}
.brand {
  position: relative;
  margin: 0;
  padding: .3em .29em .34em;
  border: 2px solid #e9b774;
  border-radius: .46em .22em;
  background: radial-gradient(ellipse at 45% 5%, #236281, #0a2437 68%, #091820);
  box-shadow: 0 0 0 3px #442311, 0 0 0 5px #a66936, inset 0 0 15px #070d16, 0 12px 25px #030807ac;
  color: #fff2dd;
  font: italic 900 clamp(2.7rem, 11vw, 5.6rem)/.86 "Barlow", "Segoe UI", sans-serif;
  letter-spacing: -.068em;
  text-transform: none;
  text-shadow: 0 2px #b8a38b, 0 4px #503728, 0 6px #1d130f, 0 7px 12px #000;
  transform: rotate(-5deg);
}
.brand::before, .brand::after {
  content: "";
  position: absolute;
  top: -.27em;
  width: .46em;
  height: .28em;
  background: repeating-conic-gradient(#f7eddc 0 25%, #18212a 0 50%) 0 0 / .20em .19em;
  border: 1px solid #d6b47a;
  box-shadow: 0 2px 4px #0008;
}
.brand::before { left: 36%; transform: rotate(-22deg); }
.brand::after { right: 36%; transform: rotate(21deg); }
#play { grid-row: 3; }
#play, #choose, #start {
  min-width: min(240px, 76vw);
  min-height: 55px;
  border: 2px solid #efc276;
  border-radius: 100px;
  background: linear-gradient(180deg, #53a92f, #216e24 49%, #12481a 52%, #166824);
  box-shadow: 0 0 0 2px #4a301b, inset 0 1px 5px #c7fa83a0, 0 7px 16px #0009;
  color: #fffdf0;
  font-size: 1.12rem;
  letter-spacing: .055em;
  text-shadow: 0 2px 3px #071805;
}
#play::before, #choose::before, #start::before {
  content: "";
  display: inline-block;
  margin-right: 11px;
  border-block: 6px solid transparent;
  border-left: 9px solid currentColor;
}
#select {
  gap: clamp(12px, 2.5svh, 22px);
  background-image: linear-gradient(#07141072, #071410cb), url("cover.jpg");
}
#select .brand { font-size: clamp(2rem, 8vw, 3.25rem); margin: 3px 0 6px; }
.level-panel {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 2px solid var(--metal-edge);
  border-radius: 17px;
  background:
    linear-gradient(135deg, #86503144, #24150ede),
    repeating-linear-gradient(2deg, #754629 0px, #6d4024 2px, #70442b 6px, #79462c 10px);
  box-shadow: inset 0 0 16px #231207, 0 0 0 2px #422819, 0 12px 30px #0008;
}
#select h2 { font-size: 1.35rem; text-shadow: 0 2px 3px #24150e; }
#levels { grid-template-columns: repeat(3, clamp(62px, 19vw, 85px)); }
#levels button {
  min-height: clamp(54px, 10svh, 77px);
  border-radius: 11px;
  border-color: #d7a66b;
  background: linear-gradient(155deg, #315f35, #172c1c);
  font-size: 1.5rem;
  box-shadow: inset 0 1px 2px #ffeed648, 0 2px 5px #180b0690;
}
#levels button:disabled { background: linear-gradient(145deg, #403b34, #232320); color: #d8d2c8; }
#levels button[aria-pressed="true"] {
  background: linear-gradient(155deg, #155674, #082433);
  border-color: #b2f2ff;
  color: #fff;
  box-shadow: inset 0 0 8px #48dfff, 0 0 7px #36c8ff;
}
#levels button span { font-size: .62rem; }
#hud span, footer button {
  background: var(--control);
  border: 1px solid #e6ad68;
  border-radius: 50px;
  box-shadow: inset 0 1px 1px #ffcd8b63, 0 3px 8px #0007;
  color: #fff5df;
}
#hud span { font-weight: 700; }
#ready, #result { background: radial-gradient(ellipse, #10201a2e, #091812a8); text-shadow: 0 2px 8px #000; }
#count { font-style: italic; -webkit-text-stroke: 1px #ffdfad; text-shadow: 0 4px #874916, 0 6px 18px #211208; }
@media (orientation: landscape) {
  #splash, #select { background-position: center 58%; }
  #splash { padding-block: 27px; }
  #select { overflow: auto; }
}


#forest-vista {
  position: fixed;
  inset: -24px;
  pointer-events: none;
  background-color: #254034;
  background-image: linear-gradient(180deg, transparent 32%, #254034 64%), url("forest-vista.jpg");
  background-position: center, 25% -6svh;
  background-size: 100% 100%, max(100%, 83svh) auto;
  background-repeat: no-repeat;
  will-change: transform;
}
body > canvas { z-index: 1; }
main { z-index: 2; }
#world-locked {
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 12px;
  width: clamp(205px, 61vw, 273px);
  min-height: clamp(160px, 31svh, 246px);
}
#world-status {
  max-width: 27ch;
  padding: 8px 12px;
  border-radius: 9px;
  background: #121b20d9;
  color: #fff1d8;
  font-size: .92rem;
}
.world-padlock {
  position: relative;
  width: 35px;
  height: 27px;
  border-radius: 6px;
  background: linear-gradient(#ffe1a4, #b17a3c);
  box-shadow: 0 3px 10px #0009;
}
.world-padlock::before {
  content: "";
  position: absolute;
  inset: -15px 7px auto;
  height: 16px;
  border: 4px solid #e9bc78;
  border-radius: 12px 12px 0 0;
}
.world-padlock::after {
  content: "";
  position: absolute;
  inset: 8px auto auto 15px;
  width: 5px;
  height: 11px;
  border-radius: 4px;
  background: #50351f;
}
#select[data-world="desert"] {
  background-image: linear-gradient(#2b1d1452, #27190bcb), url("desert-vista.jpg");
}
#forest-vista.desert {
  background-color: #b88b5c;
  background-image: linear-gradient(180deg, transparent 32%, #b88b5c 64%), url("desert-vista.jpg");
  background-position: center, 50% -5svh;
}
@media (max-height: 680px) {
  #select { gap: 11px; padding-block: 13px; }
  .level-panel { gap: 8px; padding: 11px; }
}
#hud { flex-wrap: wrap; gap: 5px; }
#hud span { padding-inline: 8px; }
#race-score, #result-score { color: #ffdf99; }
#result-score { font-size: 1.65rem; }
#time-target, #result-points { font-size: .9rem; }
#result {
  z-index: 2;
  background: #0b100dc4;
  padding: 20px;
  overflow: auto;
}
.result-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(360px, 87vw);
  padding: clamp(18px, 5vw, 30px);
  border: 2px solid #e1ae68;
  border-radius: 22px;
  background: radial-gradient(ellipse at top, #664628, #2e2017 65%);
  box-shadow: inset 0 0 0 4px #281b15, 0 12px 42px #000b;
}
#result-score { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; }
#result-record { color: #e8d2b7; font-size: .9rem; }
#result-record.new-record { color: #ffe5a3; font-weight: 800; }
#result-next { font-size: .85rem; }
#result-ok {
  min-width: 118px;
  margin-top: 6px;
  border: 1px solid #ffdc99;
  border-radius: 28px;
  background: linear-gradient(#ffe3a7, #d9a64f);
  box-shadow: 0 3px 10px #0007;
}
#level-intro { z-index: 2; animation: level-reveal 1.6s both; }
#intro-title {
  color: #ffe2a4;
  font-size: clamp(3.2rem, 14vw, 6.5rem);
  font-weight: 900;
  font-style: italic;
  text-shadow: 0 4px #734320, 0 8px 22px #000;
}
@keyframes level-reveal {
  0% { opacity: 0; }
  14%, 66% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #level-intro { animation: none; }
}
#splash {
  padding-top: calc(max(32px, env(safe-area-inset-top)) + 34px);
  padding-bottom: max(8svh, calc(max(12px, env(safe-area-inset-bottom)) + 60px));
}
#select { touch-action: pan-y; }
#select .brand { margin-bottom: clamp(15px, 3.4svh, 29px); }
#select .level-panel {
  position: relative;
  padding: 19px clamp(11px, 4vw, 22px) 20px;
  background: linear-gradient(#10281bab, #081811db), url("forest-vista.jpg") 36% center / cover;
  border-color: #d9ac6b;
}
#select[data-world="desert"] .level-panel {
  background: linear-gradient(#54361764, #412711e6), url("desert-vista.jpg") center / cover;
}
#select h2 { letter-spacing: .03em; font-size: 1.65rem; margin-bottom: 5px; }
.world-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #efc276;
  background: #322117;
  color: #fff0d0;
  box-shadow: 0 3px 9px #0009;
}
.world-arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-block-start: 3px solid;
  border-inline-end: 3px solid;
  transform: translateX(-2px) rotate(45deg);
}
.world-arrow.previous::before { transform: translateX(2px) rotate(-135deg); }
.world-arrow.previous { left: -22px; }
.world-arrow.next { right: -22px; }
#select[data-world="desert"] #levels button:not(:disabled):not([aria-pressed="true"]) {
  background: linear-gradient(155deg, #835726e3, #41280ee8);
}
@media (max-height: 600px) {
  #select .level-panel { padding-block: 10px; }
  #select .brand { margin-bottom: 8px; }
}
#select[data-world="ice"] {
  background-image: linear-gradient(#12314645, #102535c9), url("ice-vista.jpg");
}
#select[data-world="ice"] .level-panel {
  background: linear-gradient(#274b647d, #112b42e8), url("ice-vista.jpg") center / cover;
  border-color: #a9d5ef;
}
#select[data-world="ice"] #levels button:not(:disabled):not([aria-pressed="true"]) {
  background: linear-gradient(155deg, #406983e8, #183346ec);
}
#forest-vista.ice {
  background-color: #bad5e8;
  background-image: linear-gradient(180deg, transparent 36%, #bad5e8 66%), url("ice-vista.jpg");
  background-position: center, 50% -3svh;
}
#select:has(#world-locked:not([hidden])) .level-panel {
  background-image: linear-gradient(#30201625, #151b2380), url("desert-vista.jpg");
}
#select[data-world="ice"]:has(#world-locked:not([hidden])) .level-panel {
  background-image: linear-gradient(#14283724, #101d2b80), url("ice-vista.jpg");
}
#sound-toggle {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid #ce9b59;
  border-radius: 50%;
  background: #281d15ec;
  color: #fff1d8;
}
#sound-toggle svg { width: 21px; height: 21px; }
#sound-toggle .sound-slash { display: none; }
#sound-toggle[data-muted="true"] .sound-slash { display: inline; }
#sound-toggle[data-muted="true"] .sound-waves { display: none; }
#sound-options {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px);
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid #ce9b59;
  border-radius: 14px;
  background: #281d15f7;
  color: #fff1d8;
  box-shadow: 0 6px 20px #0008;
}
#sound-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; }
#sound-options input { width: 18px; height: 18px; accent-color: #edbe73; }
main:has(#result:not([hidden])) #sound-toggle { visibility: hidden; }
@media (max-width: 340px) {
  main:has(#race:not([hidden])) #sound-toggle { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 53px); }
  main:has(#race:not([hidden])) #sound-options { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 107px); }
}
@media (max-height: 420px) {
  #splash { padding-top: 24px; gap: 10px; }
  #splash .brand { font-size: clamp(2rem, 12svh, 3rem); }
}
main:has(#splash:not([hidden]) #install-app:not([hidden])) #sound-toggle { left: calc(50% - 28px); }
#install-app {
  position: absolute;
  z-index: 2;
  left: calc(50% + 28px);
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid #ce9b59;
  border-radius: 50%;
  background: #281d15ec;
  color: #fff1d8;
}
#install-app svg { width: 22px; height: 22px; }
#install-help {
  max-width: min(340px, 88vw);
  padding: 20px;
  border: 1px solid #ce9b59;
  border-radius: 16px;
  background: #281d15;
  color: #fff1d8;
}
#install-help p { margin: 10px auto 16px; }
#install-help::backdrop { background: #0b100dc4; }
#select[data-world="china"] {
  background-image: linear-gradient(#152c2348, #102019cf), url("china-vista.jpg");
}
#select[data-world="china"] .level-panel {
  background: linear-gradient(#233a2952, #192721db), url("china-vista.jpg") center / cover;
  border-color: #d2b583;
}
#select[data-world="china"]:has(#world-locked:not([hidden])) .level-panel {
  background-image: linear-gradient(#22342920, #15221b81), url("china-vista.jpg");
}
#select[data-world="china"] #levels button:not(:disabled):not([aria-pressed="true"]) {
  background: linear-gradient(155deg, #49604be8, #20312bec);
}
#forest-vista.china {
  background-color: #596e55;
  background-image: linear-gradient(180deg, transparent 34%, #596e55 69%), url("china-vista.jpg");
  background-position: center, 50% -4svh;
}
#select[data-world="space"] {
  background-image: linear-gradient(#10192240, #152940ee), url("space-vista.jpg");
}
#select[data-world="space"] .level-panel,
#select[data-world="space"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #152940c8), url("space-vista.jpg") center / cover;
}
#forest-vista[data-pack="space"] {
  background-color: #152940;
  background-image: linear-gradient(transparent 48%, #152940 89%), url("space-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}
#select[data-world="ocean"] {
  background-image: linear-gradient(#10192240, #185574ee), url("ocean-vista.jpg");
}
#select[data-world="ocean"] .level-panel,
#select[data-world="ocean"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #185574c8), url("ocean-vista.jpg") center / cover;
}
#forest-vista[data-pack="ocean"] {
  background-color: #185574;
  background-image: linear-gradient(transparent 48%, #185574 89%), url("ocean-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}
#select[data-world="circuit"] {
  background-image: linear-gradient(#10192240, #334656ee), url("circuit-vista.jpg");
}
#select[data-world="circuit"] .level-panel,
#select[data-world="circuit"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #334656c8), url("circuit-vista.jpg") center / cover;
}
#forest-vista[data-pack="circuit"] {
  background-color: #334656;
  background-image: linear-gradient(transparent 48%, #334656 89%), url("circuit-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}
#select[data-world="coaster"] {
  background-image: linear-gradient(#10192240, #493348ee), url("coaster-vista.jpg");
}
#select[data-world="coaster"] .level-panel,
#select[data-world="coaster"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #493348c8), url("coaster-vista.jpg") center / cover;
}
#forest-vista[data-pack="coaster"] {
  background-color: #493348;
  background-image: linear-gradient(transparent 48%, #493348 89%), url("coaster-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}
#select[data-world="workshop"] {
  background-image: linear-gradient(#10192240, #503826ee), url("workshop-vista.jpg");
}
#select[data-world="workshop"] .level-panel,
#select[data-world="workshop"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #503826c8), url("workshop-vista.jpg") center / cover;
}
#forest-vista[data-pack="workshop"] {
  background-color: #503826;
  background-image: linear-gradient(transparent 48%, #503826 89%), url("workshop-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}
#select[data-world="volcano"] {
  background-image: linear-gradient(#10192240, #42272bee), url("volcano-vista.jpg");
}
#select[data-world="volcano"] .level-panel,
#select[data-world="volcano"]:has(#world-locked:not([hidden])) .level-panel {
  background: linear-gradient(#18242d28, #42272bc8), url("volcano-vista.jpg") center / cover;
}
#forest-vista[data-pack="volcano"] {
  background-color: #42272b;
  background-image: linear-gradient(transparent 48%, #42272b 89%), url("volcano-vista.jpg");
  background-position: center, center top;
  background-size: 100% 100%, max(100%, 75svh) auto;
}

#pack-tip { font-size: .87rem; color: #ffe2ab; }
#world-title { max-width: 100%; overflow-wrap: anywhere; }
#ready { background: #0b100db8; padding: 20px; overflow: auto; }
#ready #start { min-width: min(210px, 100%); margin-top: 6px; }
#ready #time-target { color: #ffe2ab; }
#select[data-world="workshop"] #world-title { font-size: clamp(1.05rem, 5.3vw, 1.45rem); }