/* Mushroomapalooza: underground at dusk. One committed look: soil, cream,
   mushroom caps, glowing mycelium. */
@font-face { font-family: Fredoka; font-weight: 400; font-display: swap; src: url(fonts/fredoka-400.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 500; font-display: swap; src: url(fonts/fredoka-500.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fonts/fredoka-600.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(fonts/fredoka-700.woff2) format('woff2'); }

:root {
  --rtg-bg: #2b1b12;
  --rtg-panel: #fff1d2;
  --rtg-ink: #1d120c;
  --rtg-muted: #7a6450;
  --rtg-line: #e3cfa6;
  --rtg-accent: #d8392f;
  --rtg-accent-dk: #96231b;
  --rtg-edge: #1d120c;
  --rtg-title: #ffd98a;
  --rtg-font: Fredoka, ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --rtg-display: var(--rtg-font);
  --cream: #fff1d2;
  --glow: #ffd98a;
  color-scheme: dark;
}
body {
  background-color: var(--rtg-bg);
  background-image: var(--soil-tex, none);
  min-height: 100dvh;
}
.rtg-hero h1 { letter-spacing: .01em; font-weight: 700; }
.rtg-how { color: var(--cream); }
.rtg-how h2 { color: var(--rtg-title); font-size: 1.1rem; }
.rtg-how ul { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; }
.tips { max-width: 460px; margin: 0 auto 40px; box-sizing: border-box; width: calc(100% - 40px); display: grid; gap: .5em; font-size: .92rem; }
.tips p { margin: 0; }
.rtg-lobby { padding-bottom: 20px; }

/* ---------- the board (phone) ---------- */
body.playing { overflow: hidden; overscroll-behavior: none; }
body.playing #rtg-build { bottom: 6px; right: 8px; opacity: .6; }
.stage { position: fixed; inset: 0; }
.pz {
  position: relative; height: 100%; max-width: 480px; margin: 0 auto; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pz canvas { position: absolute; display: block; }
.pz-fx { left: 0; top: 0; width: 100%; height: 100%; }
.pz-count {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
  font: 700 clamp(64px, 24vw, 120px)/1 var(--rtg-font); color: var(--cream);
  text-shadow: 0 4px 0 #1d120c, 0 0 30px rgb(255 217 138 / .6);
}
.pz-count.go { color: #bfe8a0; font-size: clamp(54px, 18vw, 96px); }
.pz-menu {
  position: absolute; left: 8px; bottom: 6px; z-index: 5; min-width: 44px; min-height: 34px;
  font: 700 14px/1 var(--rtg-font); letter-spacing: .1em; color: var(--cream);
  background: rgb(0 0 0 / .35); border: 1px solid rgb(255 241 210 / .25); border-radius: 99px; cursor: pointer;
}
.pz-card, .pz-sheet {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgb(18 11 7 / .62); z-index: 6;
}
.pz-card[hidden], .pz-sheet[hidden] { display: none; }
.pz-card-in, .pz-sheet-in {
  max-width: 320px; text-align: center; display: grid; gap: 10px;
  background: #24160e; border: 1px solid rgb(255 241 210 / .25); border-radius: 20px; padding: 22px 20px; color: var(--cream);
}
.pz-card-in h2 { margin: 0; font: 700 28px/1.1 var(--rtg-font); color: var(--rtg-title); }
.pz-card-in p { margin: 0; opacity: .88; text-wrap: balance; }
.pz-card-in .pz-place { font: 600 20px/1.2 var(--rtg-font); opacity: 1; }
.pz-card { pointer-events: none; background: rgb(18 11 7 / .35); align-items: end; padding-bottom: 30%; }
.pz-sheet-in { text-align: left; }
.pz-sheet-in .rtg-field span { color: var(--cream); opacity: .75; }
.pz-gm { margin: 0; }
.pz-sheet .rtg-btn.ghost { color: var(--cream); border-color: rgb(255 241 210 / .4); }

/* ---------- the big screen ---------- */
body.big { overflow: hidden; }
.sp {
  height: 100dvh; box-sizing: border-box; padding: 18px 24px 14px; display: grid;
  grid-template-rows: auto 1fr auto; gap: 14px; color: var(--cream);
}
.sp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.sp-brand { display: flex; align-items: center; gap: 10px; font: 700 clamp(18px, 2.2vw, 28px)/1 var(--rtg-font); color: var(--rtg-title); }
.sp-clock {
  font: 700 clamp(36px, 5vw, 64px)/1 var(--rtg-font); font-variant-numeric: tabular-nums;
  background: rgb(0 0 0 / .35); border: 2px solid rgb(255 241 210 / .25); border-radius: 18px; padding: .12em .5em;
}
.sp-clock.late { color: #ff9b7a; }
.sp-join { justify-self: end; text-align: right; font-size: 15px; opacity: .85; }
.sp-join b { font-size: 26px; letter-spacing: .15em; color: var(--rtg-title); }
.sp-join span { display: block; font-size: 12px; opacity: .7; }
.sp-teams { display: flex; gap: 18px; min-height: 0; }
.sp-team {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 8px;
  background: rgb(0 0 0 / .28); border: 2px solid rgb(255 241 210 / .12); border-radius: 22px; padding: 10px 12px 12px;
  transition: border-color .4s, box-shadow .4s;
}
.sp-team.ahead { border-color: var(--cap); box-shadow: 0 0 28px color-mix(in srgb, var(--cap) 45%, transparent); }
.sp-team h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 clamp(16px, 1.8vw, 24px)/1 var(--rtg-font); }
.sp-team h2 .cap { width: 42px; flex: none; }
.sp-team h2 span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-total { font-size: 1.5em; color: var(--rtg-title); font-variant-numeric: tabular-nums; }
.sp-racers { display: flex; gap: 8px; min-height: 0; }
.sp-racer { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: 1fr auto auto auto; text-align: center; --f: 0; }
.sp-track {
  position: relative; border-radius: 14px 14px 20px 20px; overflow: hidden; min-height: 120px;
  background: linear-gradient(#1d120c, #3a2416); border: 1px solid rgb(255 241 210 / .12);
}
.sp-sky { position: absolute; left: 0; right: 0; top: 0; height: 16%; background: linear-gradient(#a8d2e6, #f7e4b0); border-bottom: 3px solid #4b7c2e; }
.sp-grow {
  position: absolute; left: 50%; bottom: 0; width: min(80%, 70px); transform: translateX(-50%);
  height: calc(12% + var(--f) * 72%); transition: height .7s cubic-bezier(.3, 1.3, .5, 1);
}
.sp-cap { position: absolute; left: 0; right: 0; top: 0; z-index: 1; }
.sp-cap .cap { width: 100%; display: block; }
.sp-grow::after { /* the stem carries on down to the mycelium */
  content: ""; position: absolute; left: 40%; right: 40%; top: 14px; bottom: 0; background: #fff1d8; border-left: 2px solid #1d120c; border-right: 2px solid #1d120c;
}
.sp-racer.out .sp-grow { height: 100%; }
.sp-racer.out .sp-track { box-shadow: inset 0 0 22px rgb(255 217 138 / .55); }
.sp-racer.away { opacity: .45; }
.sp-name { margin-top: 6px; font: 600 clamp(11px, 1.1vw, 15px)/1.15 var(--rtg-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-name i, .rs-name i { font-style: normal; font-size: .72em; opacity: .6; }
.sp-score { font: 500 clamp(11px, 1vw, 14px)/1.2 var(--rtg-font); opacity: .8; font-variant-numeric: tabular-nums; }
.sp-place { font: 700 clamp(12px, 1.2vw, 16px)/1.2 var(--rtg-font); color: var(--rtg-title); }
.sp-racer.lead .sp-place { color: #bfe8a0; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; padding-right: 96px; min-height: 36px; }
.sp-events { display: flex; gap: 18px; flex-wrap: wrap; }
.sp-events span { animation: pop .5s ease-out; }
.sp-gmline { display: flex; align-items: center; gap: 10px; }
.sp-gmline select { font: 500 14px var(--rtg-font); border-radius: 10px; padding: .35em .5em; }
.sp-count {
  position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 700 22vh/1 var(--rtg-font); color: var(--cream); text-shadow: 0 8px 0 #1d120c, 0 0 60px rgb(255 217 138 / .6);
}
.sp-count:empty { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- results ---------- */
.rs { max-width: 560px; margin: 0 auto; padding: 28px 16px 70px; display: grid; gap: 16px; color: var(--cream); box-sizing: border-box; }
.rs-kicker { margin: 0; text-align: center; opacity: .75; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.rs h1 { margin: 0; text-align: center; font-size: clamp(2rem, 8vw, 2.8rem); color: var(--rtg-title); }
.rs-teams { display: grid; gap: 10px; }
.rs-team {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;
  background: rgb(0 0 0 / .3); border: 2px solid rgb(255 241 210 / .15); border-radius: 18px; padding: 10px 16px;
}
.rs-team.won { border-color: var(--cap); background: color-mix(in srgb, var(--cap) 22%, rgb(0 0 0 / .35)); }
.rs-team.mine h2::after { content: " · you"; font-size: .7em; opacity: .7; }
.rs-team .cap { width: 56px; }
.rs-team h2 { margin: 0; font-size: 1.25rem; }
.rs-fill { margin: 2px 0 0; font-size: .8rem; opacity: .7; }
.rs-total { font: 700 2.2rem/1 var(--rtg-font); color: var(--rtg-title); font-variant-numeric: tabular-nums; }
.rs-table { padding: .6rem .8rem; color: var(--rtg-ink); }
.rs-table ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rs-table li { display: grid; grid-template-columns: 2.6em 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 10px; }
.rs-table li.me { background: #ffe7ad; }
.rs-place { font-weight: 700; }
.rs-table .cap.mini { width: 26px; }
.rs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rs-name em { font-style: normal; font-size: .72rem; color: var(--rtg-muted); border: 1.5px solid var(--rtg-line); border-radius: 99px; padding: 0 .5em; }
.rs-score { color: var(--rtg-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.rs-pts { text-align: right; color: var(--rtg-accent-dk); }
.rs-actions { display: grid; justify-items: center; gap: 12px; text-align: center; }
.rs-actions p { margin: 0; opacity: .85; }
.rs-gm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: .92rem; }
.rs-gm select { font: 500 14px var(--rtg-font); border-radius: 10px; padding: .35em .5em; }
.rs-actions .rtg-leave { color: var(--cream); border-color: rgb(255 241 210 / .4); }

/* ---------- race modes: titles, ladders, cross-country sums ---------- */
.sp-brand span { display: grid; gap: 2px; }
.sp-brand small { font: 500 clamp(11px, 1.1vw, 14px)/1.1 var(--rtg-font); color: var(--cream); opacity: .75; }
.sp-note { font-size: 13px; opacity: .65; }
.rs-note { margin: -6px 0 0; text-align: center; font-size: .9rem; opacity: .75; text-wrap: balance; }
.rs-sub { margin: 10px 0 -4px; text-align: center; font-size: 1.1rem; color: var(--rtg-title); }
.rs-sum { margin: 2px 0 0; font-size: .85rem; opacity: .85; display: flex; gap: .45em; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rs-sum span { background: rgb(255 241 210 / .14); border-radius: 6px; padding: 0 .35em; }
.rs-sum s { opacity: .45; text-decoration: none; }
.rs-ladders { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rs-table h2 { margin: .2em .2em .5em; font-size: 1rem; }
.rs-ladders .rs-table li { grid-template-columns: 2.6em 22px minmax(0, 1fr) auto; }
.rs-score b { color: var(--rtg-accent-dk); margin-left: .4em; }
.rs-next { text-align: center; font-size: 1.05rem; }
.rs-next b { font-size: 1.3em; color: var(--rtg-title); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .rs { max-width: 820px; } }