/* ======================================================================
   Photo-matched tint. app.js sets --tint to the wallpaper's main colour
   (mountains → blue, volcano → red, night road → amber). Registering it
   with @property lets the browser animate it, so switching photos fades
   the header, panels and menus to the new colour instead of snapping.
   Every glass surface is derived from this one colour, so they always match.
   ====================================================================== */
@property --tint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(40, 62, 120);
}
/* (the fade itself is driven from app.js, so it works even where custom-property transitions don't) */

html.has-wallpaper {
  --tint-line: color-mix(in srgb, var(--tint) 55%, white);
}

/* home boxes: the original "Race your friends" look, in the photo's colour */
html.has-wallpaper .wr-box,
html.has-wallpaper .wr-box.wr-setup,
html.has-wallpaper .wr-box.wr-party-box {
  background: color-mix(in srgb, var(--tint) 30%, transparent);
  border-color: color-mix(in srgb, var(--tint-line) 38%, transparent);
}
html.has-wallpaper .wr-box-title,
html.has-wallpaper .wr-box-sub { border-bottom-color: color-mix(in srgb, var(--tint-line) 30%, transparent); }

/* header + racers bar: same hue, darker and more solid so scrolling text never shows through */
html.has-wallpaper .wr-header {
  background: color-mix(in srgb, color-mix(in srgb, var(--tint) 72%, black) 74%, transparent);
  border-bottom-color: color-mix(in srgb, var(--tint-line) 38%, transparent);
}
html.has-wallpaper .wr-racers {
  background: color-mix(in srgb, color-mix(in srgb, var(--tint) 72%, black) 66%, transparent);
  border-bottom-color: color-mix(in srgb, var(--tint-line) 30%, transparent);
}

/* menus, suggestion lists and dialogs */
html.has-wallpaper .wr-drop,
html.has-wallpaper .wr-suggest,
html.has-wallpaper .wr-modal {
  background: color-mix(in srgb, color-mix(in srgb, var(--tint) 52%, black) 93%, transparent);
  border-color: color-mix(in srgb, var(--tint-line) 38%, transparent);
}

/* article pages: darkest, for long reading */
html.has-wallpaper #view-article {
  background: color-mix(in srgb, color-mix(in srgb, var(--tint) 40%, black) 87%, transparent);
  border-color: color-mix(in srgb, var(--tint-line) 30%, transparent);
}

/* the previous photo, fading out over the new one when the wallpaper changes */
.wr-wall-prev {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: var(--wall-opacity, .45);
  filter: saturate(1.35) contrast(1.06);
  transition: opacity .7s ease;
}
.wr-wall-prev::after { /* keep it as dark as the live layer while it fades */
  content: ''; position: absolute; inset: 0; background: rgba(4, 6, 9, var(--wall-dim, .4));
}
.wr-wall-prev.out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wr-wall-prev { transition-duration: .01s; }
}

/* ======================================================================
   Frosted glass everywhere: a dark see-through overlay with the wallpaper
   showing through, blurred. Only a whisper of the photo's colour (--tint),
   so it reads as subtle glass, not a solid coloured slab.
   ====================================================================== */
html.has-wallpaper {
  --glass-base: rgb(8, 10, 14);
  --glass-tinted: color-mix(in srgb, var(--tint) 22%, var(--glass-base));
  --glass-edge: color-mix(in srgb, color-mix(in srgb, var(--tint) 40%, white) 22%, transparent);
}
/* home boxes */
html.has-wallpaper .wr-box,
html.has-wallpaper .wr-box.wr-setup,
html.has-wallpaper .wr-box.wr-party-box {
  background: color-mix(in srgb, var(--glass-tinted) 48%, transparent);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
/* header + racers bar (a little more solid: text scrolls underneath) */
html.has-wallpaper .wr-header,
html.has-wallpaper .wr-racers {
  background: color-mix(in srgb, var(--glass-tinted) 62%, transparent);
  border-bottom-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}
/* dialogs, menus, suggestion lists: glass over the dimmed page */
html.has-wallpaper .wr-modal,
html.has-wallpaper .wr-drop,
html.has-wallpaper .wr-suggest {
  background: color-mix(in srgb, var(--glass-tinted) 58%, transparent);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
html.has-wallpaper .wr-modal-back { background: rgba(0, 0, 0, .38); }
/* article pages: still glass, darker for long reading */
html.has-wallpaper #view-article {
  background: color-mix(in srgb, var(--glass-tinted) 78%, transparent);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* boxes inside panels (lobby join + QR boxes, article cards, racer tiles, inputs): darker glass, no flat grey */
html.has-wallpaper .wr-lobby2 .wr-lobby-join,
html.has-wallpaper .wr-lobby2 .wr-lobby-qr,
html.has-wallpaper .wr-pick-card,
html.has-wallpaper .wr-party-card,
html.has-wallpaper .wr-party-current,
html.has-wallpaper .wr-stat {
  background: rgba(0, 0, 0, .26);
  border-color: rgba(255, 255, 255, .08);
}
html.has-wallpaper .wr-racer-tile {
  background: color-mix(in srgb, var(--c, #888) 16%, rgba(0, 0, 0, .22));
}
html.has-wallpaper .wr-search input { background: rgba(0, 0, 0, .35); }

/* Blur the page behind any open dialog too, so text underneath never competes with the dialog's text
   (also covers browsers that skip a nested backdrop-filter while the overlay fades in). */
html.has-wallpaper .wr-modal-back {
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
html.has-wallpaper .wr-modal { background: color-mix(in srgb, var(--glass-tinted) 64%, transparent); }

/* ===== lobby v5: QR lives inside the join box (left column); racers get the full width ===== */
.wr-party-modal.wr-lobby2 {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-areas:
    "join   rhead"
    "join   racers"
    "rtitle rtitle"
    "picks  picks"
    "acts   acts" !important;
  grid-template-rows: auto 1fr auto auto auto !important;
}
.wr-lobby2 .wr-lobby-join { display: flex; flex-direction: column; justify-content: flex-start !important; }
.wr-lobby2 .wr-lobby-join .wr-lobby-qr,
html.has-wallpaper .wr-lobby2 .wr-lobby-join .wr-lobby-qr {
  grid-area: auto; background: none; border: 0; padding: 0; margin-top: 16px;
  display: flex; flex-direction: column; align-items: center; align-self: stretch;
}
.wr-lobby2 .wr-lobby-join .wr-lobby-qr-img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; }
@media (max-height: 820px) and (min-width: 701px) {
  .wr-lobby2 .wr-lobby-join .wr-lobby-qr { margin-top: 8px; }
  .wr-lobby2 .wr-lobby-join .wr-lobby-qr-img { max-width: 170px; }
}
@media (max-width: 1150px) {
  .wr-party-modal.wr-lobby2 {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "join" "rhead" "racers" "rtitle" "picks" "acts" !important;
    grid-template-rows: auto !important;
  }
  .wr-lobby2 .wr-lobby-join { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
  .wr-lobby2 .wr-lobby-join .wr-lobby-qr { margin-top: 0; align-self: center; }
  .wr-lobby2 .wr-lobby-join .wr-lobby-qr-img { max-width: 190px; }
  .wr-lobby2 .wr-lobby-sec-head { margin-top: 16px; }
}
/* make the join column fit with the QR in it: no big heading or raw link text (Copy link covers it) */
.wr-lobby2 .wr-lobby-join h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wr-lobby2 .wr-lobby-join .wr-party-link { display: none; }
.wr-lobby2 .wr-lobby-join .wr-party-private { margin-top: 10px; }
.wr-lobby2 .wr-lobby-join .wr-lobby-qr-img { max-width: 240px; }
@media (min-height: 821px) and (min-width: 1151px) {
  .wr-lobby2 .wr-pick-card .thumb { width: 150px; }
  .wr-lobby2 .wr-pick-card .x { -webkit-line-clamp: 4; }
}
.wr-lobby2 .wr-lobby-join .wr-lobby-qr-img { max-width: 220px; }

/* whole-class parties (16+ racers): compact name chips so 30–40 people fit on screen */
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 6px !important; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .wr-racer-tile {
  flex-direction: row !important; justify-content: flex-start; text-align: left; padding: 5px 26px 5px 6px !important; gap: 8px !important; border-radius: 8px;
}
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .av { width: 30px !important; height: 30px !important; font-size: 15px !important; box-shadow: none; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .name,
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .wr-party-myname { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .tags { display: none; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(16)) .wr-racer-wait { display: none !important; }

/* racers who left the race stay visible but dimmed; your own "Watching" tag in the racers bar */
.wr-racer.out { opacity: .5; }
.wr-racer.out .at { text-decoration: line-through; }
.wr-watching { margin-right: 10px; color: var(--fg); background: rgba(255, 255, 255, .1); }

/* Join screen (opened from an invite link / QR): big and readable — it's the first thing a student sees */
#join-dialog .wr-join-modal { width: min(680px, calc(100vw - 24px)); padding: 40px 44px 38px; }
#join-dialog h2 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin-bottom: 14px; }
#join-dialog .wr-join-code { font-size: 1.05em; letter-spacing: .12em; }
#join-dialog p { font-size: 18px; line-height: 1.5; margin: 0 0 22px; }
#join-dialog .wr-join-label { display: block; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
#join-dialog .wr-party-row { display: flex; gap: 10px; }
#join-dialog .wr-search { flex: 1; }
#join-dialog input { height: 58px; font-size: 22px; padding: 8px 16px; border-radius: 6px; }
#join-dialog #btn-join-go { min-height: 58px; padding: 0 30px; font-size: 20px; border-radius: 6px; }
#join-dialog .wr-modal-x { font-size: 22px; width: 40px; height: 40px; top: 14px; right: 14px; }
@media (max-width: 520px) {
  #join-dialog .wr-join-modal { padding: 30px 20px 24px; }
  #join-dialog .wr-party-row { flex-direction: column; }
  #join-dialog #btn-join-go { width: 100%; }
}
#join-dialog .wr-join-modal p { font-size: 19px !important; color: var(--fg) !important; opacity: .85; }
#join-dialog .wr-join-modal .wr-join-label { font-size: 19px !important; }

/* racers bar: rank number + "+N more" chip for big classes */
.wr-racer .wr-rank { font-weight: 800; opacity: .75; margin-right: 2px; }
.wr-racer.wr-racer-more { display: flex; align-items: center; justify-content: center; font-weight: 700; padding: 6px 14px; border-left-width: 1px; opacity: .85; white-space: nowrap; }