/* =====================================================
   home.css - the full-screen HOME SCREEN for laptops and desktops (see home.js).
   Only drawn on wide screens (the same rule as the desktop side panels); phones never see it.
   Sizes use "em" from one base size that follows the window, so it looks right from a small laptop to a big monitor.
   ===================================================== */
.home { display: none; }
@media all {
  body.home-on #game, body.home-on .side { visibility: hidden; }        /* the narrow phone column and the side panels are replaced by the home screen */
  .home {
    display: block;
    position: fixed; inset: 0; z-index: 8; overflow: hidden;
    font-size: clamp(12px, min(1.05vw, 2vh), 21px);
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    color: #fff; background: transparent;
  }
  /* the play column (and the side panels) sit above the scene */
  #game { position: relative; z-index: 2; border-radius: calc(var(--u) * 3); box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(255, 213, 74, 0.4), 0 1.5em 4em rgba(0, 0, 0, 0.65); }
  .side { z-index: 3; }
  .home.hidden { display: none; }

  /* ---- the scene ---- */
  .scene-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0d0a24; }
  .home-scene { position: absolute; inset: 0; }
  .home-scene svg { width: 100%; height: 100%; display: block; }
  .home-vignette { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 40%, rgba(5, 2, 15, 0.55) 100%), linear-gradient(rgba(5, 2, 15, 0.55), rgba(5, 2, 15, 0) 22%, rgba(5, 2, 15, 0) 70%, rgba(5, 2, 15, 0.6)); }
  .home-star { animation: home-twinkle 3.5s ease-in-out infinite; }
  .home-bulb { animation: home-glow 2.4s ease-in-out infinite; }
  .home-blink { animation: home-twinkle 1.6s steps(2) infinite; }
  @keyframes home-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
  @keyframes home-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .home-drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .home-food { position: absolute; bottom: -4em; font-size: 2.6em; opacity: 0; animation: home-float 16s linear infinite; }
  @keyframes home-float { 0% { transform: translateY(0) rotate(-8deg); opacity: 0; } 12% { opacity: 0.32; } 80% { opacity: 0.2; } 100% { transform: translateY(-110vh) rotate(14deg); opacity: 0; } }

  /* ---- shared look: dark glass pills and cards ---- */
  :where(.home button) { font: inherit; color: inherit; cursor: pointer; }      /* (:where has no weight, so the rules below still win) */
  .home-pill, .home-round, .home-card, .home-selector, .home-music-name { background: rgba(14, 9, 34, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); }

  /* ---- top bar ---- */
  .home-top { position: absolute; top: 1.3em; left: 1.6em; right: 1.6em; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
  .home-top > * { pointer-events: auto; }
  .home-top-left { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
  .home-pill { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.45em 1em 0.45em 0.5em; border-radius: 999px; font-size: 1.15em; }
  .home-credits, .home-best { padding-left: 0.8em; }
  .home-pill b { font-size: 1.1em; }
  .home-pill small { opacity: 0.7; font-size: 0.7em; }
  .home-avatar { width: 2.1em; height: 2.1em; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(#ffd54a, #ff9f1c); font-size: 1.1em; }
  .home-coin { width: 1.5em; height: 1.5em; border-radius: 50%; margin-left: 0.2em; background: radial-gradient(circle at 35% 30%, #fff1a8, #ffc928 55%, #c98a00); box-shadow: inset 0 0 0 0.12em #a56b00; flex: none; }
  .home-who { display: flex; flex-direction: column; line-height: 1.15; }
  .home-who-links { display: flex; gap: 0.8em; font-size: 0.62em; }
  .home-link { background: none; border: 0; padding: 0; color: #ffd54a; text-decoration: underline; font-size: inherit; }
  .home-top-right { display: flex; align-items: center; gap: 0.6em; }
  .home-round { width: 2.9em; height: 2.9em; border-radius: 50%; font-size: 1.15em; display: grid; place-items: center; padding: 0; }
  .home-round:hover, .home-card:hover { background: rgba(40, 26, 80, 0.8); }
  .home-music-name { padding: 0.35em 0.9em; border-radius: 999px; font-size: 0.9em; }

  /* ---- side cards ---- */
  .home-left { position: absolute; left: 1.6em; top: 9em; display: flex; flex-direction: column; gap: 0.8em; width: 17em; }
  .home-right { position: absolute; right: 1.6em; top: 6.6em; display: flex; flex-direction: column; gap: 0.8em; width: 17em; align-items: stretch; }
  .home-card { position: relative; display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1em 0.7em 0.7em; border-radius: 1em; text-align: left; }
  .home-card.hidden { display: none; }
  .home-card-icon { width: 2.6em; height: 2.6em; display: grid; place-items: center; font-size: 1.5em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.1); }
  .home-card.teal .home-card-icon { background: linear-gradient(#2dd4bf, #0d9488); }
  .home-card.pink .home-card-icon { background: linear-gradient(#f472b6, #be185d); }
  .home-card.gold .home-card-icon { background: linear-gradient(#ffd54a, #f59e0b); }
  .home-card-text { display: flex; flex-direction: column; line-height: 1.15; }
  .home-card-text small { opacity: 0.75; font-size: 0.8em; }
  .home-card-text b { font-size: 1.35em; }
  .home-champ { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0.9em 1.1em; border-radius: 1.1em; text-align: left;
    background: linear-gradient(135deg, #ffe066, #ffb703); color: #3b2300; border: 2px solid #fff3b0; box-shadow: 0 0.3em 0 #c97c00; }
  .home-champ-text { display: flex; flex-direction: column; line-height: 1.15; }
  .home-champ-text small { font-size: 0.85em; opacity: 0.85; }
  .home-champ-text b { font-size: 1.7em; overflow-wrap: anywhere; }
  .home-champ-text span { font-size: 0.95em; }
  .home-champ-icon { font-size: 3.2em; line-height: 1; }
  .home-stats { background: rgba(14, 9, 34, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1em; padding: 0.5em; }
  .home-stats .aud-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
  .home-stats .aud-cell { padding: 0.4em 0.2em; }
  .home-stats .aud-num { font-size: 1.3em; }
  .home-stats .aud-label { font-size: 0.65em; text-align: center; }

  /* ---- the middle: difficulty selector and "Tap to play" ---- */
  .home-centre { position: absolute; left: 50%; bottom: 10.5em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.8em; width: 28em; }
  .home-selector { display: flex; align-items: stretch; width: 100%; border-radius: 1.1em; overflow: hidden; border: 2px solid #fff3b0; background: rgba(20, 90, 50, 0.85); }
  .home-arrow { width: 3.2em; border: 0; background: rgba(0, 0, 0, 0.22); font-size: 2.2em; line-height: 1; }
  .home-arrow:hover { background: rgba(0, 0, 0, 0.4); }
  .home-sel-mid { flex: 1; text-align: center; padding: 0.45em 0; line-height: 1.15; }
  .home-sel-mid small { display: block; font-size: 0.8em; color: #ffe066; }
  .home-sel-mid b { display: block; font-size: 1.8em; }
  .home-sel-mid span { font-size: 0.85em; color: #c8f5d6; }
  .home-lengths { display: flex; gap: 0.7em; }
  .home-length { padding: 0.4em 1.4em; border-radius: 999px; font-size: 1.1em; background: rgba(14, 9, 34, 0.66); border: 2px solid rgba(255, 255, 255, 0.25); }
  .home-length.on { background: #ffd54a; color: #3b2300; border-color: #fff3b0; font-weight: bold; }
  .home-play { margin-top: 0.2em; padding: 0.15em 1.2em 0.25em; border: 0; background: none; font-size: 3.6em; font-weight: 900; letter-spacing: 0.01em; color: #fff;
    text-shadow: 0 0.06em 0 #1c1233, 0 0 0.5em rgba(255, 213, 74, 0.6); transform: rotate(-2deg); animation: home-pulse 1.6s ease-in-out infinite; }
  .home-play:hover { color: #ffe066; }
  @keyframes home-pulse { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.06); } }
  .home-msg { min-height: 1.2em; margin: 0; color: #ffb4b4; font-size: 1em; text-align: center; text-shadow: 0 1px 4px #000; }
  .home-note { margin: 0; }
  .home-ban { position: absolute; top: 5.4em; left: 50%; transform: translateX(-50%); margin: 0; padding: 0.5em 1.2em; border-radius: 0.8em; background: rgba(120, 20, 20, 0.85); max-width: 40em; text-align: center; }

  /* ---- bottom row ---- */
  .home-nav { position: absolute; bottom: 1.3em; left: 50%; transform: translateX(-50%); display: flex; gap: 0.9em; }
  .home-nav-card { position: relative; width: 8.6em; padding: 0.7em 0.4em 0.65em; border: 0; border-radius: 1em; background: linear-gradient(#fff8e4, #f3e6c4); color: #2a1d10;
    display: flex; flex-direction: column; align-items: center; gap: 0.15em; box-shadow: 0 0.3em 0 #b99a5b, 0 0.6em 1em rgba(0, 0, 0, 0.4); }
  .home-nav-card:hover { transform: translateY(-0.2em); }
  .home-nav-card.off { opacity: 0.5; }
  .home-nav-card.hidden { display: none; }
  .home-nav-icon { font-size: 2.3em; line-height: 1.1; }
  .home-nav-card b { font-size: 1.1em; }
  .home-nav-card small { font-size: 0.75em; color: #6b5a3e; min-height: 1.1em; }
  .home-badge { position: absolute; top: -0.5em; right: -0.4em; min-width: 1.7em; height: 1.7em; padding: 0 0.3em; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.85em; font-weight: bold; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
  .home-badge.hidden { display: none; }
  .home-foot { position: absolute; right: 1.6em; bottom: 1.2em; color: rgba(255, 255, 255, 0.6); font-size: 0.85em; text-decoration: underline; }
  .home-foot.hidden { display: none; }
  .home .hidden { display: none !important; }
}

/* =====================================================
   WHILE A ROUND IS PLAYED (laptops): the scene stays behind the play column, with corner pills like the home screen.
   Phones and narrow windows are untouched.
   ===================================================== */
.scene-bg, .play-hud { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .scene-bg { display: block; }
  body { background: #0d0a24; }
  .scene-bg .home-drift { transition: opacity 0.4s; }
  body.playing .scene-bg .home-drift { opacity: 0; }                 /* nothing drifting around while you tap */
  body.playing .side { visibility: hidden; }                        /* the side panels step aside during a round */
  .play-hud { display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none; font-size: clamp(12px, min(1.05vw, 2vh), 21px);
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fff; }
  .play-hud.hidden { display: none; }
  .play-hud-left { position: absolute; top: 1.3em; left: 1.6em; display: flex; flex-direction: column; gap: 0.7em; }
  .play-hud-right { position: absolute; top: 1.3em; right: 1.6em; display: flex; gap: 0.6em; pointer-events: auto; }
  .play-pill { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 1.3em 0.55em 0.8em; border-radius: 999px; font-size: 1.3em; min-width: 9em;
    background: rgba(14, 9, 34, 0.7); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(4px); }
  .play-pill.hidden { display: none; }
  .play-pill-icon { font-size: 1.2em; }
  .play-pill-text { opacity: 0.75; font-size: 0.8em; flex: 1; }
  .play-pill b { font-size: 1.5em; min-width: 1.6em; text-align: right; }
  .play-hud .home-round { background: rgba(14, 9, 34, 0.7); border: 1px solid rgba(255, 255, 255, 0.16); width: 3em; height: 3em; border-radius: 50%; font-size: 1.2em; cursor: pointer; color: #fff; }
  .play-hud .home-round:hover { background: rgba(40, 26, 80, 0.85); }
}

/* =====================================================
   PHONES AND NARROW WINDOWS: the same home screen, laid out as one tall column (same pieces, stacked).
   --w is the game width (full screen width on a phone), so everything scales with it.
   ===================================================== */
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .scene-bg { display: block; }
  /* during a round the scene shows through behind the falling food (the top bar and menus keep their own backgrounds) */
  #game { background: transparent; box-shadow: none; }
  .home {
    left: calc((100vw - var(--w)) / 2); right: auto; width: var(--w);
    font-size: calc(var(--w) / 24);
    display: flex; flex-direction: column; gap: 0.7em;
    padding: calc(0.9em + env(safe-area-inset-top)) 0.9em calc(0.9em + env(safe-area-inset-bottom));
    overflow-y: auto; touch-action: pan-y;
  }
  .home.hidden { display: none; }
  .home > * { position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; flex: none; }
  .home-top { order: 1; flex-wrap: wrap; gap: 0.5em; }
  .home-top-left { gap: 0.4em; }
  .home-top-right { gap: 0.4em; }
  .home-pill { font-size: 0.95em; }
  .home-best, .home-music-name { display: none; }
  .home-round { width: 2.6em; height: 2.6em; font-size: 1em; }
  .home-ban { order: 2; }
  .home-right { order: 3; flex-direction: row; flex-wrap: wrap; gap: 0.5em; }
  .home-right .home-champ { flex: 1 1 100%; padding: 0.6em 0.9em; }
  .home-champ-text b { font-size: 1.4em; }
  .home-champ-icon { font-size: 2.4em; }
  .home-right .home-card { flex: 1 1 100%; }
  .home-stats { flex: 1 1 100%; }
  .home-left { order: 4; flex-direction: row; gap: 0.5em; }
  .home-left .home-card { flex: 1; flex-direction: column; text-align: center; padding: 0.6em 0.3em; gap: 0.3em; }
  .home-left .home-card-text small { display: none; }
  .home-left .home-card-text b { font-size: 0.95em; }
  .home-left .home-card-icon { width: 2.2em; height: 2.2em; }
  .home-centre { order: 5; margin-top: auto; gap: 0.7em; }
  .home-selector { width: 100%; }
  .home-arrow { width: 2.6em; }
  .home-sel-mid b { font-size: 1.6em; }
  .home-play { font-size: 3em; }
  .home-nav { order: 6; display: grid; grid-template-columns: repeat(auto-fit, minmax(3.6em, 1fr)); gap: 0.4em; }
  .home-nav-card { width: auto; padding: 0.55em 0.1em 0.5em; }
  .home-nav-icon { font-size: 1.7em; }
  .home-nav-card b { font-size: 0.78em; line-height: 1.1; }
  .home-nav-card small { font-size: 0.6em; min-height: 0; }
  .home-foot { order: 7; text-align: center; }
}

/* phone tidy-up: fewer pieces on the small screen so the scene can be seen (Leaders and My account are also in the bottom row) */
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .home-top { flex-wrap: nowrap; }
  .home-top-right .home-round:not(:nth-of-type(2)):not(.home-share) { display: none; }      /* keep only the music on/off and share buttons */
  .home-right .home-card { display: none; }
  .home-play { font-size: 2.6em; white-space: nowrap; margin-top: 0; }
  .home-sel-mid { padding: 0.3em 0; }
  .home-sel-mid b { font-size: 1.4em; }
  .home-length { padding: 0.3em 1.2em; }
}

/* while tapping on a phone: no drifting foods, and the scene is dimmed so the stall's food is not mistaken for something to tap */
body.round-on .scene-bg .home-drift { opacity: 0; }
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .scene-bg .home-scene { transition: filter 0.4s; }
  body.round-on .scene-bg .home-scene { filter: brightness(0.5) saturate(0.8); }
}

/* =====================================================
   THE OTHER SCREENS (shop, friends, top players, broadcast, my account, profile card, sign in, results, pause...)
   Same night-Lagos look as the home screen: dark purple "glass" over the street scene, rounded cards, warm gold buttons.
   Only colours, edges and shadows change here: no layout and no game logic.
   ===================================================== */
@media all {
  #game { background: linear-gradient(#1a1040, #0d0a24); }                /* the play column on a laptop: night purple, not green */
  .overlay:not(.clear) {
    background: linear-gradient(rgba(14, 9, 34, 0.55), rgba(18, 10, 38, 0.86));
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  }
  #start-screen { background: #0d0a24; }                                    /* (the real menu is hidden behind the home screen anyway) */
  .overlay h1 { text-shadow: 0 0.06em 0.25em rgba(0, 0, 0, 0.6); }
  .overlay h2 { color: #ffd54a; }
  .big-btn { background: linear-gradient(#ffe27a, #ffc21f); box-shadow: 0 calc(var(--u) * 1) 0 #b87f00, 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.45); }
  .big-btn:active { box-shadow: 0 0 0 #b87f00; transform: translateY(calc(var(--u) * 0.8)); }
  .overlay input, .overlay select, .overlay textarea { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 213, 74, 0.55); border-radius: calc(var(--u) * 3); }
  .card-stats, .overlay .panel, .overlay .box { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); }
}
/* the in-round bar belongs to the round: do not let it show through the menus that are opened outside a round */
body:not(.round-on) #top-bar, body:not(.round-on) #streak-box { visibility: hidden; }
/* screens that had their own plain green backgrounds: same night glass as the rest */
#shop-screen, #name-screen, #auth-screen, #account-screen, #username-screen, #lobby-screen, #room-screen, #social-screen, #chat-screen, #match-screen {
  background: linear-gradient(rgba(14, 9, 34, 0.55), rgba(18, 10, 38, 0.86));
}
/* these sit on top of another screen, so they stay solid (just night-coloured) */
#card-screen, #forgot-screen, #reset-screen { background: #100a28; }

/* phones: the scene itself is the background of the play column (this must stay after the rules above) */
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #game { background: transparent; }
}

/* more cards on the left now (Places, Vote): on phones they wrap into a second row, and the cards are smaller */
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .home-left { flex-wrap: wrap; }
  .home-left .home-card { flex: 1 1 22%; min-width: 0; }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .home-left { top: 8em; gap: 0.6em; }
  .home-left .home-card { padding: 0.5em 0.9em 0.5em 0.6em; }
}

/* drop-down lists (the open list is drawn by the browser): dark with light text, like the rest of the game */
.overlay select, .overlay select option, .overlay select optgroup { color-scheme: dark; background-color: #1a1040; color: #fff; }
.overlay select option:checked { background-color: #3b2a7a; color: #ffd54a; }

/* =====================================================
   ADS in the new look. The sponsored banner on the home screen, and the ad boxes everywhere else, now match the night theme.
   (The home screen is outside the game column, so its sizes use "em" instead of the game's "u".)
   ===================================================== */
.home-ad { width: auto; max-width: none; margin: 0; }
.home-ad .ad-body { gap: 0.6em; padding: 0.5em 0.8em; border: 1px solid rgba(255, 213, 74, 0.45); border-radius: 1em; font-size: 0.95em;
  background: rgba(14, 9, 34, 0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; }
.home-ad .ad-tag { font-size: 0.6em; padding: 0.1em 0.6em; border-radius: 999px; }
.home-ad .ad-asset { font-size: 1.8em; }
.home-ad .ad-image { width: 2.2em; height: 2.2em; border-radius: 0.3em; }
.home-ad .ad-sub { font-size: 0.7em; }
.home-ad .ad-report-wrap { gap: 0.4em; margin-top: 0.1em; }
.home-ad .ad-report { font-size: 0.7em; min-height: 0; padding: 0; margin: 0; }
.home-ad .ad-report-select { font-size: 0.75em; padding: 0.2em; }
.home-ad .ad-report-msg { font-size: 0.7em; }
/* the ad boxes inside the other screens: the same glass look */
@media all {
  .overlay .ad-body { border: 1px solid rgba(255, 213, 74, 0.4); border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, 0.07); }
  .overlay .ad-tag { border-radius: 999px; padding: 0 calc(var(--u) * 2); }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .home-ad { position: absolute; left: 1.2em; bottom: 1.3em; width: 15em; text-align: center; }
}
@media not all and (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .home-ad { order: 6; }
  .home-nav { order: 7; }
  .home-foot { order: 8; }
}

/* No visible scrollbars in the game screens (they still scroll with the finger, wheel or keys). The bars looked out of place on the new design. */
.overlay, .home, .bc-list, #game, body { scrollbar-width: none; -ms-overflow-style: none; }
.overlay::-webkit-scrollbar, .home::-webkit-scrollbar, .bc-list::-webkit-scrollbar, #game::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* The two grey "Sponsor signboard" placeholder boxes on the right side panel sat on top of the food stall and looked messy.
   Real sponsors now appear in the banner, the sponsored sprite and the sponsored places; "Advertise with us" stays on the home screen. */
.side-sign { display: none !important; }

/* ONE look for every drop-down in the game (home screen, ad report box, all screens): dark, rounded, gold edge, light text.
   The open list is drawn by the browser, so its colours are set here too. */
select, select option, select optgroup { color-scheme: dark; background-color: #1a1040; color: #fff; }
select { border: 1px solid rgba(255, 213, 74, 0.55); border-radius: 0.7em; font-family: inherit; }
select option:checked, select option:hover { background-color: #3b2a7a; color: #ffd54a; }
select:focus { outline: 2px solid #ffd54a; outline-offset: 1px; }

.home-card.off { opacity: 0.5; }

/* =====================================================
   NO FLASH OF THE OLD MENU ON RELOAD
   The home screen replaces the old start menu everywhere (it presses the old menu's buttons for you), so the old menu is never drawn.
   Before this, it showed for a moment while the page was still loading. The page background is also the night purple from the very
   first frame (it used to be green until the scene appeared).
   ===================================================== */
html, body { background: #0d0a24; }
#start-screen { visibility: hidden; }

/* the loading cover (see index.html and home.js): covers everything until the first real screen is ready */
#boot-cover { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at 50% 35%, #2d1650, #0d0a24 70%); color: rgba(255, 255, 255, 0.7); font: 600 15px system-ui, sans-serif;
  transition: opacity 0.45s ease; animation: boot-safety 0.01s 4s forwards; }
#boot-cover img { border-radius: 22px; animation: boot-pulse 1.4s ease-in-out infinite; }
#boot-cover.gone { opacity: 0; pointer-events: none; }
@keyframes boot-pulse { 50% { transform: scale(1.08); } }
@keyframes boot-safety { to { opacity: 0; visibility: hidden; } }    /* if scripts fail to load, the cover still goes away by itself */

/* =====================================================
   THE SIDE PANELS (laptops: Top players on the left, the crowd numbers on the right), restyled to belong to the new design.
   They used to float in the middle of each side and sat on top of the palm trees and the food stall. Now they are small night-glass
   cards tucked into the top corners (like the home screen's cards), the same size and look, and nothing in the lower part of the scene
   is covered. (They are hidden on the home screen and during a round, as before.)
   ===================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .side { justify-content: flex-start; padding: 5.6em 1.6em 1.6em; font-size: clamp(12px, min(1.05vw, 2vh), 21px); pointer-events: none; }
  .side > * { pointer-events: auto; }
  #side-left .side-card { margin: 0 auto 0 0; }
  #side-right .side-card { margin: 0 0 0 auto; }
  .side-card { max-width: 17.5em; padding: 0.9em 1em; background: rgba(14, 9, 34, 0.66); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .side-card h2 { margin: 0 0 0.6em; font-size: 1.15em; }
  .side-tabs { gap: 0.4em; margin-bottom: 0.6em; }
  .side-tab { padding: 0.35em 0.2em; font-size: 0.85em; border-radius: 999px; border-color: rgba(255, 255, 255, 0.25); }
  .side-tab.selected { background: #ffd54a; color: #3b2300; }
  #side-top-list li { padding: 0.35em 0.5em; font-size: 0.95em; border-radius: 0.6em; }
  #side-top-list li.champion { font-size: 1.05em; }
  #side-top-list li.current { color: #3b2300; }
  #side-top-list .side-score small { font-size: 0.75em; }
  #side-stats .aud-num { font-size: 1.4em; }
}

/* while the sign-in screen is up (including the "Checking your sign-in..." moment on a reload) the side panels stay out of sight */
body:has(#auth-screen:not(.hidden)) .side { visibility: hidden; }