/* =====================================================================================================================
   v016: Big Screen lobby, rebuilt. Landscape-only and sized entirely in vmin, so the same layout reads from an iPad
   (1024x768, 1180x820) through laptops (1366x768, 1440x900) to TVs (1920x1080 and 4K). Layout, top to bottom:
   header (title + game switch) · join card + player roster · the live stage (puffs drawn on the canvas) · status + Start.
   ===================================================================================================================== */
#biglobby { display: block; }
#biglobby::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 8, 48, .55) 0%, rgba(14, 8, 48, .2) 45%, rgba(14, 8, 48, .35) 100%); }
.lb { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.6vmin;
  padding: max(3.2vmin, calc(var(--sat) + 12px)) max(4.2vmin, calc(var(--sar) + 16px)) max(3vmin, calc(var(--sab) + 12px)) max(4.2vmin, calc(var(--sal) + 16px)); }
.lb-glass { background: rgba(22, 14, 62, .66); }

/* header */
.lb-head { display: flex; align-items: center; gap: 2.4vmin; }
.lb-back { flex: none; width: max(44px, 6.2vmin); height: max(44px, 6.2vmin); border-radius: 50%; display: grid; place-items: center; color: var(--cream); background: rgba(22, 14, 62, .6); border: 1px solid rgba(255, 243, 224, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb-back svg { width: 45%; height: 45%; }
.lb-title { flex: 1; min-width: 0; }
.lb-title small { display: flex; align-items: center; gap: 1vmin; font: 850 max(11px, 1.7vmin)/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: #8ff0e6; }
.lb-live { width: max(8px, 1.2vmin); height: max(8px, 1.2vmin); border-radius: 50%; background: #ff6b6b; }
.lb-live[data-on="1"] { background: #5ee6a0; animation: liveDot 2s ease-out infinite; }
.lb-title h1 { margin: 1vmin 0 .6vmin; font: 900 max(30px, 6.2vmin)/1 var(--head); letter-spacing: -.01em; color: var(--cream); text-shadow: 0 .4vmin 2.4vmin rgba(10, 4, 40, .5); }
.lb-title p { margin: 0; font: 700 max(13px, 2vmin)/1.3 var(--body); color: rgba(255, 243, 224, .72); }
.lb-modes { flex: none; display: flex; gap: .7vmin; padding: .7vmin; border-radius: 2.8vmin; background: rgba(10, 4, 40, .5); border: 1px solid rgba(255, 243, 224, .12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lb-modes button { display: flex; flex-direction: column; align-items: center; gap: .5vmin; min-width: 15vmin; padding: 1.3vmin 2.2vmin; border-radius: 2.1vmin; color: rgba(255, 243, 224, .72); transition: background .2s, color .2s; }
.lb-modes b { font: 850 max(14px, 2.3vmin)/1 var(--head); }
.lb-modes small { font: 750 max(10px, 1.4vmin)/1 var(--body); opacity: .75; }
.lb-modes button.sel { color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 .4vmin 0 #b8421f, 0 1vmin 2.4vmin rgba(255, 122, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* join card + roster */
.lb-main { flex: none; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 2.6vmin; align-items: stretch; }
.lb-join, .lb-roster { border-radius: 3.4vmin; background: rgba(22, 14, 62, .66); border: 1px solid rgba(255, 243, 224, .14); box-shadow: 0 .5vmin 0 rgba(8, 4, 34, .45), 0 2vmin 5vmin rgba(6, 2, 28, .3), inset 0 1px 0 rgba(255, 243, 224, .08); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.lb-join { display: flex; align-items: center; gap: 3vmin; padding: 2.6vmin; min-width: 0; }
.lb-qr { flex: none; width: 24vmin; aspect-ratio: 1; border-radius: 2vmin; overflow: hidden; background: #fff; box-shadow: 0 0 0 .8vmin rgba(255, 255, 255, .1); }
.lb-qr svg { width: 100%; height: 100%; display: block; }
.lb-join.idle .lb-qr { animation: qrPulse 2.4s ease-in-out infinite; }
.lb-how { min-width: 0; display: flex; flex-direction: column; gap: 1.2vmin; }
.lb-how > small { font: 850 max(11px, 1.6vmin)/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #8ff0e6; }
.lb-how p { margin: 0; font: 700 max(13px, 2.1vmin)/1.35 var(--body); color: rgba(255, 243, 224, .78); }
.lb-how em { font-style: normal; font-weight: 850; color: var(--gold); overflow-wrap: anywhere; }
.lb-code { margin-top: .8vmin; }
.lb-code small { display: block; font: 850 max(10px, 1.4vmin)/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 243, 224, .55); }
.lb-code b { display: block; margin-top: .6vmin; font: 900 max(40px, 9.6vmin)/1 var(--head); letter-spacing: .12em; color: var(--gold); text-shadow: 0 .5vmin 0 #b8421f, 0 0 4vmin rgba(255, 200, 87, .35); font-variant-numeric: tabular-nums; }
.lb-roster { display: flex; flex-direction: column; gap: 1.6vmin; padding: 2.2vmin; min-width: 0; }
.lb-rhead { display: flex; align-items: baseline; justify-content: space-between; padding: 0 .4vmin; }
.lb-rhead b { font: 850 max(14px, 2.2vmin)/1 var(--head); color: var(--cream); }
.lb-rhead span { font: 750 max(12px, 1.7vmin)/1 var(--body); color: rgba(255, 243, 224, .55); font-variant-numeric: tabular-nums; }
.lb-slots { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vmin; align-content: center; }
.lb-slots[data-n="1"] { grid-template-columns: 1fr; }
.lb-slot { position: relative; display: flex; align-items: center; gap: 1.4vmin; min-width: 0; min-height: 9.4vmin; padding: 1.2vmin 1.6vmin 1.2vmin 1.2vmin; border-radius: 2.2vmin; background: rgba(10, 4, 40, .32); border: 2px dashed rgba(255, 243, 224, .16); transition: border-color .3s, background .3s, box-shadow .3s, opacity .3s; }
.lb-slot .pp-av { width: 6.4vmin; height: 6.4vmin; min-width: 34px; min-height: 34px; box-shadow: 0 0 0 .3vmin rgba(255, 255, 255, .85), 0 .5vmin 1.2vmin rgba(6, 2, 28, .35); }
.lb-num { flex: none; width: 6.4vmin; height: 6.4vmin; min-width: 34px; min-height: 34px; border-radius: 50%; display: grid; place-items: center; font: 850 max(14px, 2.4vmin)/1 var(--head); color: rgba(255, 243, 224, .35); border: 2px dashed rgba(255, 243, 224, .22); }
.lb-who { min-width: 0; display: flex; flex-direction: column; gap: .6vmin; }
.lb-who b { font: 850 max(14px, 2.4vmin)/1.05 var(--head); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who small { font: 700 max(11px, 1.55vmin)/1.2 var(--body); color: rgba(255, 243, 224, .58); white-space: nowrap; }
.lb-slot:not(.on) .lb-who b { color: rgba(255, 243, 224, .45); }
.lb-check { margin-left: auto; flex: none; width: 4vmin; height: 4vmin; min-width: 24px; min-height: 24px; border-radius: 50%; display: none; place-items: center; color: #0e3a52; background: #8ff0e6; box-shadow: 0 .3vmin 0 #127a80; }
.lb-check svg { width: 64%; height: 64%; }
.lb-slot.on { border-style: solid; border-color: color-mix(in srgb, var(--pc) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, rgba(10, 4, 40, .5)), rgba(10, 4, 40, .4)); }
.lb-slot.ready { border-color: #8ff0e6; box-shadow: 0 0 0 .4vmin rgba(143, 240, 230, .18); }
.lb-slot.ready .lb-check { display: grid; animation: slotIn .4s cubic-bezier(.3, 1.6, .5, 1); }
.lb-slot.ready small { color: #8ff0e6; }
.lb-slot.away { opacity: .55; }
.lb-slot.late small { color: var(--gold); }
.lb-slot.join { animation: slotIn .5s cubic-bezier(.3, 1.6, .5, 1); }
.lb-slot.ping { animation: slotPing .35s ease-out; }

/* the live stage (puffs are drawn on the canvas into this box) */
.lb-stage { position: relative; flex: 1; min-height: 16vmin; pointer-events: none; }
.lb-empty { position: absolute; left: 0; right: 0; bottom: 30%; margin: 0; text-align: center; font: 750 max(13px, 2vmin)/1 var(--body); color: rgba(255, 243, 224, .5); }
.lb-empty[hidden] { display: none; }

/* footer */
.lb-foot { flex: none; display: flex; align-items: center; gap: 2.4vmin; }
.lb-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.6vmin; }
.lb-meter { display: flex; gap: .8vmin; flex: none; }
.lb-meter:empty { display: none; }
.lb-meter i { width: max(18px, 3.2vmin); height: max(8px, 1.1vmin); border-radius: 99px; background: rgba(255, 243, 224, .16); transition: background .3s, box-shadow .3s; }
.lb-meter i.on { background: var(--pc); box-shadow: 0 0 1.2vmin color-mix(in srgb, var(--pc) 60%, transparent); }
#blStatus { margin: 0; font: 800 max(14px, 2.4vmin)/1.2 var(--head); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#blStatus.go { color: var(--gold); }
.lb-start { width: auto !important; flex: none; height: max(52px, 7.6vmin) !important; padding: 0 4.6vmin !important; border-radius: 2.6vmin !important; font: 850 max(18px, 2.9vmin)/1 var(--head) !important; gap: 1.2vmin !important; }
.lb-start svg { width: 2.8vmin; height: 2.8vmin; min-width: 18px; min-height: 18px; }
.lb-start:disabled { opacity: .4; filter: grayscale(.4); }

/* narrower landscape (4:3 iPad, 16:10 laptops): tighter join card so nothing crowds */
@media (max-aspect-ratio: 16/10) {
  .lb-qr { width: 20vmin; }
  .lb-code b { font-size: max(36px, 8.2vmin); }
  .lb-modes button { min-width: 0; padding: 1.2vmin 1.8vmin; }
  .lb-title p { display: none; }
}
@media (max-aspect-ratio: 4/3) { .lb-main { grid-template-columns: 1fr 1fr; } .lb-how p { display: none; } }
html.reduce-motion .lb-live, html.reduce-motion .lb-join.idle .lb-qr { animation: none; }

/* ---------- landscape only: Big Screen host and phone controllers ---------- */
.turn-screen { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(11, 7, 38, .97); }
.turn-screen > div { max-width: 420px; }
.turn-screen h2 { margin: 26px 0 8px; font: 900 26px/1.15 var(--head); color: var(--cream); }
.turn-screen p { margin: 0; font: 700 15px/1.45 var(--body); color: rgba(255, 243, 224, .7); }
.ts-device { width: 74px; height: 100px; margin: 0 auto; border-radius: 12px; border: 5px solid var(--cream); position: relative; animation: rotLand 2.4s ease-in-out infinite; }
.ts-device i { position: absolute; left: 50%; bottom: 6px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--cream); }
@media (orientation: portrait) {
  html.big-mode .turn-screen { display: flex; }
  html.pad-mode #pdRotate { display: flex !important; }
}
#pdRotateOk { display: none !important; }

/* Versus → Phones: room code with a scan-to-join QR for friends in the same room */
.vx-codebox { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; }
.vx-codebox .vx-code { text-align: left; padding-left: 0; font-size: 44px; }
.vx-qr { flex: none; width: 104px; height: 104px; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .1); }
.vx-qr svg { width: 100%; height: 100%; display: block; }
.vx-qr:empty { display: none; }
.vx-scan { margin: 4px 0 0; font: 700 12px/1.3 var(--body); color: rgba(255, 243, 224, .55); }

/* Big Screen race HUD on narrower landscape (4:3 iPad, 3:2): title row on top, player cards centred underneath,
   so four cards never cover the course name. 16:9 TVs and laptops keep the single slim bar. */
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  #party[data-kind="big"] .pt-hud { flex-direction: column !important; align-items: stretch !important; gap: 1.4vmin !important; }
  #party[data-kind="big"] .pt-top { display: grid !important; grid-template-columns: 7vmin 1fr 7vmin; align-items: center; }
  #party[data-kind="big"] .pt-title { justify-self: center !important; align-items: center !important; margin: 0 !important; }
  #party[data-kind="big"] .pt-cards { justify-content: center !important; }
  #party[data-kind="big"] .pt-par { justify-self: end; }
}

/* lobby: thin auto-start bar under the status while the settle countdown runs */
.lb-status { position: relative; }
.lb-auto { position: absolute; left: 0; right: 0; bottom: -1.4vmin; height: max(3px, .45vmin); border-radius: 99px; background: rgba(255, 243, 224, .08); overflow: hidden; opacity: 0; transition: opacity .2s; }
.lb-auto::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #8ff0e6, #ffd27a); }
.lb-auto.run { opacity: 1; } .lb-auto.run::after { animation: autoFill linear forwards; animation-duration: inherit; }
@keyframes autoFill { to { transform: scaleX(1); } }
#blCount { background: rgba(14, 8, 48, .55) !important; }

/* ---------- controller on iPhone (landscape): popups fit the phone, respect the notch and home indicator ---------- */
html.pad-mode .toast { top: max(10px, calc(var(--sat) + 6px)); bottom: auto; transform: translate(-50%, -12px); max-width: min(56vw, 420px); padding: 9px 16px; font-size: 13px; line-height: 1.3; border-radius: 14px; z-index: 70; }
html.pad-mode .toast.show { transform: translate(-50%, 0); }
.pd-confirm { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: max(12px, var(--sat)) max(16px, calc(var(--sar) + 8px)) max(12px, var(--sab)) max(16px, calc(var(--sal) + 8px)); background: rgba(8, 5, 28, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn .18s ease-out; }
.pd-confirm[hidden] { display: none; }
.pd-confirm-card { width: min(100%, 360px); display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 22px; text-align: center; background: rgba(30, 20, 82, .96); border: 1px solid rgba(255, 243, 224, .16); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: modalIn .3s cubic-bezier(.2, 1.4, .4, 1); }
.pd-confirm-card b { font: 900 20px/1.15 var(--head); color: var(--cream); }
.pd-confirm-card small { font: 700 13px/1.35 var(--body); color: rgba(255, 243, 224, .65); }
.pd-confirm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.pd-confirm-row .btn { height: 46px !important; font: 850 16px/1 var(--head) !important; border-radius: 16px !important; }
@media (max-height: 340px) { .pd-confirm-card { padding: 14px; gap: 6px; } .pd-confirm-card b { font-size: 18px; } .pd-confirm-row .btn { height: 42px !important; } }
/* status text in the side columns: never more than two lines, never touching the button */
.pd-head { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; max-width: 100%; }
.pd-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.pd-flank { padding: 0 max(12px, 3vw) !important; }
/* controller: a toast takes the name pill's place for a moment (never stacked on top of it) */
.pd-who { transition: opacity .2s; }
html.pad-mode.toasting .pd-who { opacity: 0; }
html.pad-mode .toast { top: max(10px, var(--sat)) !important; min-height: 36px; display: flex; align-items: center; justify-content: center; }
/* status text scales with the phone's width, so short phrases stay on one line on an SE */
.pd-head { font-size: clamp(19px, min(7vh, 3.7vw), 34px) !important; }
/* Safari's toolbars in landscape (about 330 px tall): a slightly smaller button keeps clear of the top bar */
@media (orientation: landscape) and (max-height: 360px) { #pad { --bs: min(64vh, 44vw, 420px) !important; } }

/* ---------- v018 ---------- */
/* Menus: toasts drop in at the top, over the screen title, never over the Start / Create / Join buttons at the bottom.
   In play (single player and the party screen) they stay at the bottom, clear of the HUD. */
html:not(.pad-mode):not(.big-mode):not([data-screen="game"]):not([data-screen="party"]) .toast {
  top: calc(var(--sat) + 12px); bottom: auto; transform: translate(-50%, -14px); max-width: min(calc(100% - 140px), 360px);
  min-height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 80; }
html:not(.pad-mode):not(.big-mode):not([data-screen="game"]):not([data-screen="party"]) .toast.show { transform: translate(-50%, 0); }
/* party HUD cards always get their full width, so one name is never cut to "A…" because a neighbour's is wider */
#party:not([data-kind="big"]) .pt-cards { align-self: stretch; }
/* Courses on tablets: a fixed-size world card, centred by the rail's padding. A percentage of the zoomed rail made the card
   smaller on an upright iPad than on a phone, so a two-line world name pushed its tagline onto the progress bar. */
@media (min-width: 700px) {
  .cs-world { width: 300px; max-width: none; }
  .cs-rail { padding-left: calc(50% - 150px); padding-right: calc(50% - 150px); scroll-padding: 0 calc(50% - 150px); }
}
/* Home: no streak badge until there is a streak to show (a grey "0" on day one was just noise) */
#home #hmStreak.hm-badge.zero { display: none; }

/* ---------- v019: up to 8 players on the Big Screen ---------- */
/* race / dive HUD with 5-8 players: course title on its own row, compact cards centred underneath (any screen shape) */
#party[data-kind="big"][data-many="1"] .pt-hud { flex-direction: column !important; align-items: stretch !important; gap: 1.2vmin !important; }
#party[data-kind="big"][data-many="1"] .pt-top { display: grid !important; grid-template-columns: 7vmin 1fr 7vmin; align-items: center; }
#party[data-kind="big"][data-many="1"] .pt-title { justify-self: center !important; align-items: center !important; margin: 0 !important; }
#party[data-kind="big"][data-many="1"] .pt-par { justify-self: end; }
#party[data-kind="big"][data-many="1"] .pt-cards { justify-content: center !important; gap: 1vmin; flex-wrap: nowrap; }
#party[data-kind="big"][data-many="1"] .pt-card { flex: 0 1 15vmin !important; min-width: 0; padding: .7vmin 1.3vmin .7vmin .7vmin; column-gap: .9vmin; border-radius: 2.4vmin; border-width: 2px; }
#party[data-kind="big"][data-many="1"] .pt-card .pp-av { width: 4.8vmin; height: 4.8vmin; }
#party[data-kind="big"][data-many="1"] .pt-nm { font-size: max(11px, 1.6vmin); }
#party[data-kind="big"][data-many="1"] .pt-val { font-size: max(16px, 3.4vmin); }
#party[data-kind="big"][data-many="1"] .pt-val svg { width: 2.2vmin; height: 2.2vmin; }
#party[data-kind="big"][data-many="1"] .pt-sub { display: none !important; }
#party[data-kind="big"][data-many="1"] .pt-flag { width: 2.8vmin; height: 2.8vmin; }

/* scoreboard with 5-8 rows: slimmer rows so eight fit with the buttons on a 4:3 screen */
#ptboard[data-kind="big"][data-many="1"] .pb-modal { padding: 3vmin 4vmin; gap: 1.3vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-title { font-size: max(28px, 5vmin) !important; }
#ptboard[data-kind="big"][data-many="1"] .pb-rows { gap: .5vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-row { padding: .55vmin 2vmin .55vmin .8vmin; border-radius: 2.2vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-head { padding-top: 0; padding-bottom: .2vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-rank { width: 3.6vmin; height: 3.6vmin; font-size: 2vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-who .pp-av { width: 4.2vmin; height: 4.2vmin; }
#ptboard[data-kind="big"][data-many="1"] .pb-who b { font-size: max(15px, 2.6vmin); }
#ptboard[data-kind="big"][data-many="1"] .pb-c { font-size: max(13px, 2.2vmin); }
#ptboard[data-kind="big"][data-many="1"] .pb-tot { font-size: max(18px, 3.4vmin); }
/* short centred blurbs wrap into even lines instead of leaving one word dangling */
.vx-panel p, .ep-text small, .bs-sub, .lb-sub, .pb-note, .dy-note, #dyNote { text-wrap: balance; }
/* ---------- v020: final balance pass ---------- */
.vx-line { display: block; }
.vx-rules, #gmTip, .ep-text small, .cs-wtext em { text-wrap: balance; }
/* narrow phones: "Host on this screen" stays on one line inside the Big Screen sheets */
@media (max-width: 380px) { .bs-modal .vx-ctext b, #bsHost .vx-ctext b { font-size: 17px; white-space: nowrap; } .bs-modal .vx-choice { padding: 14px; gap: 12px; } }