/* Lobby TV display. Sized in viewport units so a 1080p or 4K screen reads the same from across a room. */
.lobby{
  --lb-bg:#061a33; --lb-panel:#0b2747; --lb-panel-2:#0f3157; --lb-line:rgba(255,255,255,.12);
  --lb-text:#ffffff; --lb-dim:#c3d4e6; --lb-accent:#5fd6cc; --lb-land:#1d4672;
  margin:0; height:100vh; height:100dvh; overflow:hidden; color:var(--lb-text);
  background:radial-gradient(120vw 70vh at 50% -20%, #12406f 0%, var(--lb-bg) 60%) var(--lb-bg);
  font-family:'Atkinson Hyperlegible Next',Arial,sans-serif; cursor:default;
}
.lobby h1,.lobby h2,.lobby h3{color:var(--lb-text)}
.lobby.cursor-hidden,.lobby.cursor-hidden *{cursor:none!important}
html:has(body.lobby){background:#061a33;overflow:hidden}
.lobby-shell{height:100vh;height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:2.2vh;padding:2.8vh 2.6vw 2.4vh}

/* Header */
.lobby-top{display:flex;align-items:center;gap:1.6vw}
.lobby-mark{height:7.4vh;width:auto;filter:brightness(0) invert(1);opacity:.92}
.lobby-titles{flex:1;min-width:0}
.lobby-eyebrow{margin:0;color:var(--lb-accent);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:1.7vh}
.lobby-titles h1{margin:.3vh 0 0;font-size:5.4vh;line-height:1.05;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-clock{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
#clockTime{font-size:5vh;font-weight:700;line-height:1}
#clockDate{font-size:1.9vh;color:var(--lb-dim);margin-top:.6vh}

/* Main panels */
.lobby-main{display:grid;grid-template-columns:1.55fr 1fr;gap:2vw;min-height:0}
.lobby-map,.lobby-roll{background:var(--lb-panel);border:1px solid var(--lb-line);border-radius:2.2vh;min-height:0;display:flex;flex-direction:column}
.lobby-map{padding:2.2vh 1.8vw 2vh}
.lobby-map h2,.lobby-roll h2{font-family:'Atkinson Hyperlegible Next',Arial,sans-serif;font-size:2.3vh;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lb-accent);margin:0 0 1.4vh}
#lobbyMap{flex:1;min-height:0;width:100%;display:block}
.lobby-land{fill:var(--lb-land);stroke:#2c5c8c;stroke-width:.6}
.lobby-borders{opacity:.55}
.lpin{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.lpin .ring{fill:none;stroke:var(--lb-accent);stroke-width:2;opacity:0}
.lpin.is-new .ring{animation:lpin-ring 2.6s ease-out infinite}
@keyframes lpin-ring{0%{r:8;opacity:.9}100%{r:34;opacity:0}}
.lobby-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw;margin-top:1.6vh}
.lobby-stats>div{background:var(--lb-panel-2);border-radius:1.6vh;padding:1.4vh 1vw;text-align:center}
.lobby-stats strong{display:block;font-size:5.6vh;line-height:1.05;font-variant-numeric:tabular-nums}
.lobby-stats span{display:block;font-size:1.8vh;color:var(--lb-dim);margin-top:.4vh}

/* Rolling visitor names */
.lobby-roll{padding:2.4vh 1.4vw 1.2vh}
.roll-window{position:relative;flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%)}
.roll-track{will-change:transform}
.roll-track.is-paging{transition:transform .9s ease, opacity .5s ease}
.roll-list{list-style:none;margin:0;padding:0 0 1.3vh;display:flex;flex-direction:column;gap:1.3vh}
.roll-row{display:flex;gap:1.1vw;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:1.5vh;padding:1.5vh 1vw}
.roll-flag{flex:none;width:6.4vh;height:4.3vh;border-radius:.5vh;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin-top:.3vh}
.roll-flag img{width:100%;height:100%;object-fit:cover;display:block}
.roll-flag .flag-missing{font-size:1.3vh;font-weight:700;color:var(--lb-bg)}
.roll-text{min-width:0;display:flex;flex-direction:column}
.roll-name{font-size:3.1vh;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.roll-loc{font-size:1.9vh;color:var(--lb-dim);margin-top:.3vh}
.roll-note{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:2.3vh;line-height:1.35;color:#e9f2fb;margin-top:.7vh;overflow-wrap:anywhere}
.roll-invite{background:transparent;border:2px dashed rgba(95,214,204,.55)}
.roll-invite .roll-name{color:var(--lb-accent)}
.roll-empty{font-size:2.6vh;color:var(--lb-dim);text-align:center;margin:8vh 1vw;line-height:1.4}

/* Footer band with the QR invitation */
.lobby-foot{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:2vw;background:#ffffff;color:#082342;border-radius:2.2vh;padding:1.6vh 1.8vw}
.lobby-foot h2{color:#082342;font-size:3.6vh;margin:0 0 .6vh}
.lobby-cta p{margin:0;font-size:2vh;color:#334155}
.lobby-cta .lobby-url{margin-top:.6vh;font-weight:700;color:#00565a;font-size:2.2vh;overflow-wrap:anywhere}
.lobby-qr{line-height:0;background:#fff;padding:.6vh;border-radius:1vh;border:2px solid #082342}
.lobby-qr img,.lobby-qr canvas{display:block}
.lobby-origins-label{margin:0 0 .9vh;font-size:1.6vh;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00565a}
.lobby-chips{display:flex;flex-wrap:wrap;gap:.8vh .7vw;max-height:11vh;overflow:hidden}
.lchip{display:inline-flex;align-items:center;gap:.6vw;background:#e8f4fa;border:1px solid #c6d9e5;border-radius:5vh;padding:.7vh 1vw;font-size:1.9vh;font-weight:700;color:#082342;white-space:nowrap}
.lchip img{width:3.4vh;height:2.3vh;object-fit:cover;border-radius:.3vh;box-shadow:0 0 0 1px #c6d9e5}
.lchip .cnt{color:#526477;font-weight:600}
.lchip-empty{font-size:1.9vh;color:#526477}

/* New visitor spotlight */
.lobby-welcome{position:fixed;left:0;right:0;top:14vh;display:flex;justify-content:center;pointer-events:none;z-index:20}
.welcome-card{display:flex;align-items:center;gap:1.6vw;background:#ffffff;color:#082342;border-radius:2.4vh;padding:2.4vh 2.4vw;box-shadow:0 2vh 6vh rgba(0,0,0,.45);border:.4vh solid var(--lb-accent);
  transform:translateY(-3vh) scale(.96);opacity:0;transition:transform .6s ease,opacity .6s ease;max-width:70vw}
.lobby-welcome.on .welcome-card{transform:none;opacity:1}
.welcome-flag{flex:none;width:12vh;height:8vh;border-radius:.8vh;overflow:hidden;box-shadow:0 0 0 1px #c6d9e5}
.welcome-flag img{width:100%;height:100%;object-fit:cover;display:block}
.welcome-eyebrow{margin:0;font-size:1.8vh;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#00565a}
.welcome-name{margin:.4vh 0 0;font-family:'Playfair Display',Georgia,serif;font-size:5.4vh;font-weight:700;line-height:1.08;overflow-wrap:anywhere}
.welcome-loc{margin:.6vh 0 0;font-size:2.4vh;color:#334155}

/* Status and preview chrome */
/* ---------- Kiosk layer (mirrors the Event Bucket lobby) ---------- */
.lobby.kiosk-mode{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lobby.kiosk-mode img{-webkit-user-drag:none}
/* Connection banner slides down from the top while offline. */
.kiosk-offline{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(180deg,#b3261e,#8c1d18);color:#fff;text-align:center;padding:1vh 2vw;font-size:2vh;font-weight:700;transform:translateY(-100%);transition:transform .35s ease;pointer-events:none}
.kiosk-offline.show{transform:translateY(0)}
/* Small confirmation that kiosk protections are running. */
.kiosk-badge{position:fixed;bottom:1.4vh;left:1.2vw;z-index:9998;background:rgba(6,26,51,.85);color:var(--lb-accent);border:1px solid rgba(95,214,204,.45);border-radius:999px;padding:.6vh 1vw;font-size:1.4vh;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .4s ease;pointer-events:none}
.kiosk-badge.show{opacity:1}
/* Exit button: only while full screen, only after the pointer moves. */
.exit-fs{position:fixed;top:1.4vh;right:1.2vw;z-index:9999;background:rgba(6,26,51,.88);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:1vh;padding:1vh 1.2vw;min-height:44px;font-size:1.6vh;font-weight:700;opacity:0;transition:opacity .3s ease;cursor:pointer}
.lobby.poked .exit-fs{opacity:1}
/* Whole-screen tap target. Big and obvious from across a room. */
.fs-overlay{position:fixed;inset:0;z-index:10000;border:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;color:#fff;font:inherit;
  background:radial-gradient(circle at 50% 45%,rgba(11,39,71,.94),rgba(3,12,24,.97));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2vh}
.fs-overlay:focus-visible{outline:.6vh solid var(--lb-accent);outline-offset:-1.2vh}
.fs-ring{width:16vh;height:16vh;border-radius:50%;border:.5vh solid var(--lb-accent);color:var(--lb-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 7vh rgba(95,214,204,.4);animation:fsRing 2.2s ease-in-out infinite}
.fs-title{font-size:5vh;font-weight:800;text-align:center;letter-spacing:.01em;line-height:1.15;padding:0 4vw}
.fs-sub{font-size:2.2vh;font-weight:700;color:var(--lb-accent);text-align:center;letter-spacing:.08em;text-transform:uppercase;padding:0 4vw}
.fs-mini-text{display:none}
@keyframes fsRing{0%,100%{transform:scale(1);box-shadow:0 0 7vh rgba(95,214,204,.35)}50%{transform:scale(1.08);box-shadow:0 0 10vh rgba(95,214,204,.65)}}
/* After 20 seconds with nobody there, the prompt steps aside to a corner reminder so the lobby still shows. */
.fs-overlay.is-mini{inset:auto 1.2vw 1.4vh auto;width:auto;height:auto;flex-direction:row;gap:1vw;padding:1vh 1.4vw 1vh 1vh;border-radius:999px;background:rgba(6,26,51,.92);border:1px solid var(--lb-accent);box-shadow:0 1vh 3vh rgba(0,0,0,.4)}
.fs-overlay.is-mini .fs-ring{width:4.4vh;height:4.4vh;border-width:.3vh;animation:none;box-shadow:none}
.fs-overlay.is-mini .fs-title,.fs-overlay.is-mini .fs-sub{display:none}
.fs-overlay.is-mini .fs-mini-text{display:inline;font-size:1.8vh;font-weight:700;color:#fff}
.lobby-preview-bar{position:fixed;bottom:1vh;right:1vw;display:flex;align-items:center;gap:.8vw;background:#082342;border:1px solid var(--lb-accent);border-radius:5vh;padding:.6vh .6vh .6vh 1.2vw;font-size:1.6vh;z-index:30}
.lobby-preview-bar button{background:var(--lb-accent);color:#061a33;border:0;border-radius:5vh;padding:.8vh 1.1vw;font-weight:700;font-size:1.6vh;min-height:44px}

/* Phones and portrait screens: stack instead of squeezing. */
@media (max-aspect-ratio:1/1){
  .lobby{height:auto;overflow:auto}
  .lobby-shell{height:auto;grid-template-rows:auto auto auto;padding:20px 16px}
  .lobby-main{grid-template-columns:1fr;gap:16px}
  .lobby-map{min-height:0}
  #lobbyMap{flex:none;height:auto;aspect-ratio:1000/396}
  .roll-window{height:60vh;flex:none}
  .lobby-foot{grid-template-columns:auto 1fr;gap:16px}
  .lobby-origins{grid-column:1/-1}
  .lobby-titles h1{white-space:normal;font-size:28px}
  .lobby-eyebrow,#clockDate,.lobby-stats span,.roll-loc,.lobby-cta p{font-size:14px}
  #clockTime{font-size:26px}
  .lobby-mark{height:44px}
  .lobby-stats strong{font-size:30px}
  .roll-name{font-size:20px}
  .roll-note{font-size:16px}
  .roll-flag{width:44px;height:30px}
  .lobby-foot h2{font-size:22px}
  .lobby-map h2,.lobby-roll h2{font-size:14px}
  .lobby-chips{max-height:none}
  .lobby-preview-bar{position:static;margin:12px 16px 0;justify-content:space-between;font-size:13px}
  .lobby-preview-bar button{font-size:13px}
}

/* Impeccable polish pass */
::selection{background:rgba(95,214,204,.35);color:#fff}
/* The welcome sits under the title as a line of copy, not as a tracked label above it. */
.lobby-welcome-line{margin:.7vh 0 0;font-size:2.2vh;line-height:1.3;color:var(--lb-dim)}
/* Panel headings read as headings: sentence case in the display face. */
.lobby-map h2,.lobby-roll h2{font-family:'Playfair Display',Georgia,serif;font-size:3.1vh;font-weight:700;letter-spacing:-.01em;text-transform:none;color:#fff;margin:0 0 1.6vh}
.lobby-foot .lobby-origins-label{font-family:'Playfair Display',Georgia,serif;font-size:2.4vh;font-weight:700;letter-spacing:0;text-transform:none;color:#082342;margin:0 0 1vh}
.welcome-eyebrow{letter-spacing:.04em;text-transform:none;font-size:2vh}
.lobby-stats strong,#clockTime{font-variant-numeric:lining-nums tabular-nums}
/* Depth from offset shadows; the start prompt pulses by scale, not by a glow halo. */
.fs-ring{box-shadow:0 1.2vh 4vh rgba(2,10,24,.55)}
@keyframes fsRing{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.lobby-preview-bar{box-shadow:0 .6vh 2.4vh rgba(2,10,24,.45)}
@media (max-aspect-ratio:1/1){.lobby-welcome-line{font-size:14px}.lobby-map h2,.lobby-roll h2{font-size:20px}.lobby-foot .lobby-origins-label{font-size:17px}}
/* Large numerals use the display face; the body face's slashed zero is for small text. */
#clockTime,.lobby-stats strong{font-family:'Playfair Display',Georgia,serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
/* Shown only when the TV address does not match a board: a clear message for staff, never another venue's data. */
.lobby-unlinked{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh;padding:6vh 10vw;text-align:center;background:#061a33;color:#fff}
.lobby-unlinked[hidden]{display:none}
.lobby-unlinked img{height:10vh;filter:brightness(0) invert(1);opacity:.9}
.lobby-unlinked h1{margin:0;font-size:4.4vh;line-height:1.15;max-width:24ch}
.lobby-unlinked p{margin:0;font-size:2.6vh;line-height:1.5;color:var(--lb-dim);max-width:52ch}
.lobby-unlinked b{color:#fff}
/* Secondary text that guests read from across the room. */
@media (min-aspect-ratio:1/1){.roll-loc,.lobby-stats span,.lobby-cta p{font-size:2.2vh}}

/* Globe mode (?globe=1): the canvas globe takes the flat map's place; captions sit over its corners. */
body.globe-mode #lobbyMap{display:none}
.globe-wrap{position:relative;flex:1;min-height:0}
.globe-wrap[hidden]{display:none}
.globe-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe-caption,.globe-far{position:absolute;background:rgba(6,26,51,.82);border:1px solid var(--lb-line);border-radius:1.6vh;box-shadow:0 1vh 3vh -1vh rgba(0,0,0,.5)}
.globe-caption[hidden],.globe-far[hidden]{display:none}
.globe-caption{left:0;bottom:0;display:flex;align-items:center;gap:1vw;padding:1.3vh 1.3vw;max-width:44%}
.globe-caption p{margin:0}
.gc-flag img{display:block;height:4.4vh;width:auto;border-radius:.4vh;box-shadow:0 0 0 2px #fff}
.gc-eyebrow{font-size:1.6vh;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lb-accent)}
.gc-name{font-family:'Playfair Display',Georgia,serif;font-size:3.4vh;font-weight:700;line-height:1.15}
.gc-miles{font-size:2vh;color:var(--lb-dim);margin-top:.3vh!important}
.globe-far{left:0;top:0;text-align:left;padding:1vh 1.1vw;display:flex;flex-direction:column;gap:.2vh}
.globe-far span{font-size:1.6vh;color:var(--lb-dim)}
.globe-far span:first-child{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lb-accent)}
.globe-far b{font-family:'Playfair Display',Georgia,serif;font-size:2.6vh}
@media (max-aspect-ratio:1/1){
  .globe-wrap{flex:none;aspect-ratio:1/1}
  .globe-caption{max-width:80%;padding:10px 12px}
  .gc-flag img{height:28px}.gc-eyebrow,.globe-far span{font-size:12px}.gc-name{font-size:20px}.gc-miles{font-size:14px}.globe-far b{font-size:16px}
}

/* ---------- Globe Stage layout (?layout=stage) ----------
   The globe fills the screen and rises from the lower right. The left column holds one big count, the newest arrival
   and the QR code. lobby.js moves the standard header, globe, caption and QR code in here. */
body.stage-mode .lobby-shell{display:none}
.stage{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:3.2vh;padding:5vh 5vw 4.6vh;overflow:hidden;
  background:radial-gradient(140vh 90vh at 78% 105%,#12406f 0%,#082646 45%,#061a33 75%) #061a33}
/* A soft shade behind the left column keeps its text readable where the globe's edge passes underneath. */
.stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,26,51,.88) 0%,rgba(6,26,51,.6) 30%,rgba(6,26,51,0) 46%)}
.stage>.globe-wrap{position:absolute;inset:0;z-index:0}
.stage>.lobby-top,.stage-col{position:relative;z-index:2}
.stage-col{width:42vw;min-height:0;display:flex;flex-direction:column;gap:2.4vh}
.stage-hero p{margin:0}
.stage-num{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:16.5vh;line-height:.9;letter-spacing:-.02em;color:var(--lb-accent);font-variant-numeric:lining-nums tabular-nums}
.stage-num-label{font-size:3.2vh;font-weight:700;line-height:1.2;margin-top:1vh!important}
.stage-sub{display:flex;flex-wrap:wrap;gap:1vh 3vw;margin-top:1.4vh}
.stage-sub p{font-size:2.3vh;color:var(--lb-dim)}
.stage-sub b{font-family:'Playfair Display',Georgia,serif;font-size:4.2vh;color:#fff;margin-right:.5vw;font-variant-numeric:lining-nums tabular-nums}
.stage-now{display:flex;flex-direction:column;gap:1.4vh}
.stage .globe-caption{position:static;max-width:none;gap:1.4vw;padding:1.7vh 1.6vw;background:rgba(6,26,51,.86);border:1px solid rgba(95,214,204,.55);border-radius:2vh;box-shadow:0 2.2vh 5.5vh -2.2vh rgba(0,0,0,.6)}
.stage .gc-flag img{height:6.4vh;border-radius:.7vh;box-shadow:0 0 0 .3vh #fff;background:#fff}
.stage .gc-eyebrow{font-size:1.7vh}
.stage .gc-name{font-size:3.7vh;overflow-wrap:anywhere}
.stage .gc-miles{font-size:2.1vh}
.stage .globe-far{position:static;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.4vh 1vw;padding:0;background:none;border:0;box-shadow:none}
.stage .globe-far span{font-size:2vh}
.stage .globe-far b{font-size:2.6vh}
.stage-cta{margin-top:auto;display:flex;align-items:center;gap:1.6vw}
.stage .lobby-qr{flex:none;padding:1.3vh;border:0;border-radius:1.8vh}
.stage .lobby-cta h2{font-family:'Playfair Display',Georgia,serif;font-size:3.9vh;line-height:1.1;margin:0 0 .9vh;color:#fff}
.stage .lobby-cta p{font-size:2.1vh;color:var(--lb-dim);margin:0}
.stage .lobby-cta .lobby-url{margin-top:.9vh;color:var(--lb-accent);font-size:2.1vh}
/* The welcome card for a new visitor sits over the globe, not over the count. */
body.stage-mode .lobby-welcome{justify-content:flex-end;padding-right:5vw;top:17vh}

/* Portrait screens and phones: header, globe, then the column, scrolling like the standard layout. */
@media (max-aspect-ratio:1/1){
  .stage{position:static;display:flex;flex-direction:column;gap:16px;padding:20px 16px;min-height:100vh}
  .stage::before{display:none}
  .stage>.globe-wrap{position:relative;inset:auto;order:2;width:100%;aspect-ratio:1/1}
  .stage>.lobby-top{order:1}
  .stage-col{order:3;width:auto;gap:16px}
  .stage-num{font-size:96px}
  .stage-num-label{font-size:20px}
  .stage-sub p{font-size:15px}
  .stage-sub b{font-size:26px}
  .stage .gc-flag img{height:36px}
  .stage .gc-eyebrow,.stage .globe-far span{font-size:12px}
  .stage .gc-name{font-size:22px}
  .stage .gc-miles,.stage .lobby-cta p,.stage .lobby-cta .lobby-url{font-size:15px}
  .stage .globe-far b{font-size:16px}
  .stage-cta{margin-top:0;gap:16px}
  .stage .lobby-cta h2{font-size:22px}
  body.stage-mode .lobby-welcome{justify-content:center;padding-right:0}
}