/* Overlay for the native globe/map. Same language as the shell: glass panels,
   brand-magenta→blue hairline, tabular numerals, no emoji in chrome. */
.viz{position:absolute;inset:0;overflow:hidden;background:#03050a}
.viz .layer{position:absolute;inset:0}
.viz .layer.off{visibility:hidden;pointer-events:none}
.viz canvas{display:block}
.viz .ui{position:absolute;inset:0;pointer-events:none;z-index:5}
.viz .ui > *{pointer-events:auto}

.glass{background:linear-gradient(180deg,rgba(16,22,36,.78),rgba(8,12,20,.74));border:1px solid rgba(120,145,190,.18);
  border-radius:16px;backdrop-filter:blur(12px) saturate(140%);box-shadow:0 18px 44px rgba(0,0,0,.42);position:relative}
.glass::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#d41a74,#4aa3ff,transparent);opacity:.7}

/* hero (bottom-left) */
.hero{position:absolute;left:26px;bottom:24px;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.hero .big{font:800 clamp(64px,8.5vw,128px)/.9 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;letter-spacing:-.04em;
  color:#fff;text-shadow:0 0 40px rgba(74,163,255,.25);font-variant-numeric:tabular-nums}
.hero .cap{color:#aebbd4;font-size:15px;font-weight:600;letter-spacing:.02em;margin-top:-4px}
.hero .cap b{color:#fff}
.chips{display:flex;gap:9px;flex-wrap:wrap;pointer-events:auto}
.chip2{padding:9px 14px;border-radius:12px;min-width:92px}
.chip2 .v{font:800 22px/1.1 "Segoe UI",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#eef3fb}
.chip2 .k{font-size:11px;color:#8b9bb8;margin-top:2px;font-weight:600;letter-spacing:.03em}
.chip2.engine .v{color:#c4f28a}.chip2.ip .v{color:#ff7ab5}.chip2.gps .v{color:#8ceaf7}.chip2.block .v{color:#9bf0c6}.chip2.ctry .v{color:#ffd978}

/* roster (right) */
.roster{position:absolute;right:22px;top:20px;width:340px;max-height:calc(100% - 210px);display:flex;flex-direction:column;overflow:hidden}
.rhead{display:flex;align-items:center;gap:8px;padding:14px 16px 8px}
.rhead h3{margin:0;font-size:13px;letter-spacing:.14em;font-weight:800;color:#e8eef8}
.rhead .livep{font-size:10px;font-weight:800;letter-spacing:.1em;color:#ff7ab5;border:1px solid rgba(240,25,126,.5);border-radius:8px;padding:1px 7px}
.rhead .cnt{margin-left:auto;color:#8ceaf7;font-weight:800;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:10px;padding:0 16px 10px;font-size:11.5px;color:#aebbd4}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.legend i.dia{border-radius:1px;transform:rotate(45deg);width:7px;height:7px}
.tabs{display:flex;gap:6px;padding:0 16px 10px}
.tabs button{flex:1;border:1px solid rgba(120,145,190,.2);background:rgba(8,12,20,.6);color:#9fb0cc;border-radius:9px;padding:6px 0;
  font-size:11px;font-weight:800;letter-spacing:.12em;cursor:pointer}
.tabs button.on{background:linear-gradient(180deg,#e0287f,#b8155f);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(212,26,116,.35)}
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:8px;padding:6px 14px 12px;align-items:end}
.pd{border:1px solid rgba(120,145,190,.18);border-radius:13px;padding:10px 6px 9px;text-align:center;background:rgba(10,14,24,.6);min-width:0}
.pd.g1{border-color:rgba(255,203,61,.45);background:linear-gradient(180deg,rgba(255,203,61,.14),rgba(10,14,24,.6));padding-top:14px}
.pd .rk{font-size:10.5px;font-weight:800;color:#8b9bb8}
.pd.g1 .rk{color:#ffd978}
.pd .av{width:34px;height:34px;border-radius:50%;margin:6px auto;display:grid;place-items:center;font-weight:800;color:#101522;
  background:#e8eef8;overflow:hidden}
.pd.g1 .av{width:42px;height:42px;background:#ffcb3d;box-shadow:0 0 18px rgba(255,203,61,.55)}
.pd .av img{width:100%;height:100%;object-fit:cover}
.pd .nm{font-size:12px;font-weight:700;color:#e8eef8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd .pt{font:800 15px/1.3 "Segoe UI",system-ui;color:#8ceaf7;font-variant-numeric:tabular-nums}
.pd.g1 .pt{color:#ffd978}
.rlist{overflow:auto;padding:0 8px 10px}
.rrow{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;cursor:pointer}
.rrow:hover{background:rgba(74,163,255,.08)}
.rrow .n{color:#6f7f9c;font-weight:800;font-size:12px;text-align:right}
.rrow .who{min-width:0}
.rrow .who b{display:block;font-size:13px;color:#eef3fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .who span{font-size:11px;color:#8b9bb8;display:flex;align-items:center;gap:5px}
.rrow .val{text-align:right;font:800 14px/1.2 "Segoe UI",system-ui;color:#8ceaf7;font-variant-numeric:tabular-nums}
.rrow .val i{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:#6f7f9c}
.rrow .bar{grid-column:2/4;height:2px;border-radius:2px;background:rgba(120,145,190,.12);margin-top:3px;overflow:hidden}
.rrow .bar b{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#d41a74)}
.flag{width:15px;height:11px;border-radius:2px;object-fit:cover;flex:none}
.swap-in{animation:vzIn .36s cubic-bezier(.2,.8,.25,1) both}
@keyframes vzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* QR (bottom-right) */
.qr{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px}
.qr img{width:92px;height:92px;border-radius:10px;background:#fff;padding:6px}
.qr b{display:block;font-size:17px;color:#fff}
.qr b em{font-style:normal;background:linear-gradient(90deg,#ff4fa3,#b084f6);-webkit-background-clip:text;color:transparent}
.qr span{font-size:12.5px;color:#aebbd4;line-height:1.45}

/* tooltip + spotlight + search */
.vtip{position:fixed;z-index:50;pointer-events:none;padding:9px 12px;border-radius:11px;font-size:12px;color:#dfe7f3;max-width:280px;
  transform:translate(14px,14px);display:none}
.vtip b{display:block;font-size:13.5px;color:#fff;margin-bottom:3px}
.vtip .r{display:flex;gap:6px;align-items:center;color:#9fb0cc}
.vtip .k{color:#6f7f9c}
.spot{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);padding:14px 26px;text-align:center;opacity:0;
  transition:opacity .5s ease, transform .5s ease;pointer-events:none}
.spot.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
.spot .t{font-size:11px;letter-spacing:.2em;font-weight:800;color:#ffd978}
.spot .c{font:800 26px/1.25 "Segoe UI",system-ui;color:#fff;display:flex;gap:10px;align-items:center;justify-content:center;margin:4px 0}
.spot .c .flag{width:30px;height:22px;border-radius:3px}
.spot .s{color:#aebbd4;font-size:13.5px}
.vsearch{position:absolute;left:22px;top:20px;width:320px;padding:8px 12px;display:flex;gap:8px;align-items:center}
.vsearch input{flex:1;border:0;background:transparent;color:#eef3fb;font-size:13px;outline:0}
.vsearch svg{width:15px;height:15px;color:#8b9bb8}
.vres{position:absolute;left:22px;top:64px;width:320px;max-height:320px;overflow:auto;padding:6px;display:none}
.vres.show{display:block}
.vres div{padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:#dfe7f3;display:flex;gap:8px;align-items:center}
.vres div:hover{background:rgba(74,163,255,.1)}
.vres div span{color:#8b9bb8;font-size:11px;margin-left:auto}
.fpsbadge{position:absolute;left:26px;top:20px;font:600 10.5px ui-monospace,monospace;color:#6f7f9c;pointer-events:none}

.viz.showcase .vsearch,.viz.showcase .vres{display:none}
.viz.demo .qr{display:none}
.viz.demo .hero .big{font-size:clamp(48px,6vw,86px)}
.maplibregl-ctrl-attrib{background:rgba(8,12,20,.6)!important;color:#6f7f9c!important}
.maplibregl-ctrl-attrib a{color:#8b9bb8!important}
@media (max-width:1250px){.roster{width:290px}.qr{display:none}}

/* ── v1.3 design layer ─────────────────────────────────────────────── */
/* cinematic vignette: pulls the eye to the planet and seats the glass panels */
.vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 72% 78% at 44% 50%, transparent 55%, rgba(2,3,8,.55) 100%)}
.viz.on-map .vignette{background:radial-gradient(ellipse 80% 85% at 45% 50%, transparent 65%, rgba(2,3,8,.45) 100%)}

/* title + live block counter (showcase) */
.title{position:absolute;left:26px;top:22px;display:flex;align-items:center;gap:12px;pointer-events:none}
.title img{width:38px;height:38px;border-radius:50%;filter:drop-shadow(0 4px 14px rgba(212,26,116,.45))}
.title > div:first-of-type b{display:block;font:800 17px/1.1 "Segoe UI Variable Display","Segoe UI",system-ui;letter-spacing:.2em;color:#fff}
.title > div:first-of-type span{font-size:12px;color:#9fb0cc;letter-spacing:.06em}
.blk{margin-left:14px;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:11px;
  background:rgba(8,12,20,.55);border:1px solid rgba(120,145,190,.18);backdrop-filter:blur(8px)}
.blk span{font-size:10px;letter-spacing:.18em;color:#6f7f9c;font-weight:800}
.blk b{font:800 16px/1 "Segoe UI",system-ui;color:#9bf0c6;font-variant-numeric:tabular-nums}
.blk .beat{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.blk .beat.go{animation:beatgo 1.1s ease-out}
@keyframes beatgo{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(52,211,153,.7)}40%{transform:scale(1.6)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(52,211,153,0)}}
.viz.demo .title{left:auto;right:384px}
.viz.demo .title > img,.viz.demo .title > div:first-of-type{display:none}

/* live activity feed (left, under the title) */
.afeed{position:absolute;left:26px;top:86px;width:380px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.aline{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:10px;font-size:12.5px;color:#c9d4e6;
  background:linear-gradient(90deg,rgba(10,14,24,.72),rgba(10,14,24,.25));border-left:2px solid #22d3ee;
  animation:alIn .5s cubic-bezier(.2,.8,.25,1) both}
.aline:nth-child(2){opacity:.72}.aline:nth-child(3){opacity:.46}.aline:nth-child(4){opacity:.22}
.aline b{color:#fff;font-weight:700}
.aline .flag{margin-right:2px}
.aline i{width:6px;height:6px;border-radius:50%;background:#22d3ee;flex:none;box-shadow:0 0 8px currentColor}
.aline.join{border-left-color:#34d399}.aline.join i{background:#34d399}
.aline.lead{border-left-color:#ffcb3d}.aline.lead i{background:#ffcb3d}
.aline.rank{border-left-color:#d41a74}.aline.rank i{background:#f0197e}
.aline.block{border-left-color:#4aa3ff}.aline.block i{background:#4aa3ff}
@keyframes alIn{from{opacity:0;transform:translateX(-14px)}to{transform:none}}
.viz.demo .afeed{top:120px}

/* city labels on the light columns */
.clabels{position:absolute;inset:0;pointer-events:none;z-index:4}
.clabels .cl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 9px 5px;
  border-radius:9px;background:rgba(6,10,18,.62);border:1px solid rgba(140,234,247,.28);backdrop-filter:blur(6px);
  transition:opacity .3s;white-space:nowrap;margin-top:-6px}
.clabels .cl b{font:800 14px/1.1 "Segoe UI",system-ui;color:#fff;font-variant-numeric:tabular-nums}
.clabels .cl span{font-size:10.5px;color:#9fb0cc;display:flex;align-items:center;gap:4px}
.clabels .cl .flag{width:13px;height:9px}

/* hero refinements */
.hero .big{background:linear-gradient(180deg,#fff 30%,#b9c8e6);-webkit-background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(74,163,255,.22))}
.hero .cap .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;
  margin:0 6px 1px 2px;animation:dotp 2s infinite}
@keyframes dotp{50%{opacity:.35}}

/* roster refinements */
.rhead .livep{display:flex;align-items:center;gap:5px}
.rhead .livep i{width:5px;height:5px;border-radius:50%;background:#ff4fa3;animation:dotp 1.6s infinite}
.pd{position:relative}
.pd .av span{display:grid;place-items:center;width:100%;height:100%;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pd.g1{box-shadow:0 0 0 1px rgba(255,203,61,.25),0 10px 30px rgba(255,203,61,.12)}
.pd .crown{position:absolute;top:-11px;left:50%;width:22px;height:22px;transform:translateX(-50%);color:#ffcb3d;
  filter:drop-shadow(0 0 8px rgba(255,203,61,.7));animation:crown 3s ease-in-out infinite}
@keyframes crown{50%{transform:translateX(-50%) translateY(-2px)}}
.pd.g2 .av{box-shadow:0 0 0 2px rgba(210,220,235,.55)}
.pd.g3 .av{box-shadow:0 0 0 2px rgba(214,150,90,.55)}
.rrow .who b{display:flex;align-items:center;gap:6px}
.rrow .who .ld{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;flex:none}

/* spotlight card with stat pills */
.spot{min-width:360px}
.spot .pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.spot .pills span{padding:4px 11px;border-radius:20px;background:rgba(120,145,190,.12);border:1px solid rgba(120,145,190,.2);
  color:#c9d4e6;font-size:12.5px}
.spot .pills b{color:#fff}
.spot.show{animation:spotIn .6s cubic-bezier(.2,.8,.25,1)}
@keyframes spotIn{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97)}}
@media (max-width:1250px){.afeed{width:300px}}
.fpsbadge{left:auto!important;right:384px;top:26px!important}

/* ── v1.4: live block + timelapse ─────────────────────────────── */
.blk.live span::after{content:" · LIVE";color:#34d399}
.tlbtn{position:relative;margin-left:8px;pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;cursor:pointer;
  color:#dfe7f3;font:700 12px "Segoe UI",system-ui;letter-spacing:.04em;border-radius:12px}
.tlbtn svg{width:15px;height:15px;color:#ff4fa3}
.tlbtn{background:rgba(8,12,20,.55);border:1px solid rgba(120,145,190,.18);backdrop-filter:blur(8px)}
.tlbtn:hover{border-color:rgba(212,26,116,.55);background:rgba(212,26,116,.12)}
.viz.on-map .tlbtn{display:none}
.tl{position:absolute;left:50%;top:26px;transform:translate(-50%,-8px);width:min(560px,56%);padding:14px 20px 16px;opacity:0;
  pointer-events:none;transition:opacity .45s ease,transform .45s ease}
.tl.show{opacity:1;transform:translate(-50%,0)}
.tl-top{display:flex;justify-content:space-between;align-items:baseline}
.tl-k{font-size:10.5px;letter-spacing:.2em;font-weight:800;color:#ff7ab5}
.tl-date{font:700 15px "Segoe UI",system-ui;color:#fff;font-variant-numeric:tabular-nums}
.tl-mid{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
.tl-mid b{font:800 44px/1 "Segoe UI Variable Display","Segoe UI",system-ui;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tl-mid span{color:#9fb0cc;font-size:13px}
.tl-bar{height:4px;border-radius:3px;background:rgba(120,145,190,.16);overflow:hidden}
.tl-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#d41a74);box-shadow:0 0 12px rgba(212,26,116,.6)}
.tl.loading .tl-bar b{background:linear-gradient(90deg,#4aa3ff,#8ceaf7)}

/* ── phones / narrow windows (web) ───────────────────────────────── */
@media (max-width:760px){
  .roster,.qr,.afeed,.clabels,.vsearch,.vres,.fpsbadge{display:none!important}
  .title{left:14px;top:14px;gap:8px}
  .title img{width:30px;height:30px}
  .title > div:first-of-type b{font-size:13px;letter-spacing:.14em}
  .title > div:first-of-type span{font-size:10.5px}
  .blk{margin-left:4px;padding:5px 9px}.blk b{font-size:13px}.blk span{display:none}
  .tlbtn span{display:none}.tlbtn{padding:7px 9px}
  .hero{left:14px;right:14px;bottom:14px;gap:8px}
  .hero .big{font-size:58px}
  .hero .cap{font-size:13px}
  .chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip2{min-width:auto;padding:7px 10px;flex:none}.chip2 .v{font-size:17px}.chip2 .k{font-size:10px}
  .spot{bottom:auto;top:70px;min-width:0;width:calc(100% - 28px);padding:10px 14px}
  .spot .c{font-size:19px}
  .tl{top:64px;width:calc(100% - 28px)}.tl-mid b{font-size:32px}
  .viz.demo .title{left:14px;right:auto}
}

/* ── v1.5 showroom (unattended TV / LED wall) ─────────────────────────────
   Type is sized from the viewport so it reads from across a room at 1080p and 4K.
   The director toggles .sc-<scene> on the root to choose what is on screen. */
.cine,.lock,.cqr,.srfade{display:none}
.viz.sr .cine,.viz.sr .lock,.viz.sr .cqr,.viz.sr .srfade{display:block}
.viz.sr .vsearch,.viz.sr .vres,.viz.sr .tlbtn,.viz.sr .spot,.viz.sr .hero{display:none!important}
.viz.sr .roster{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);opacity:0;transform:translateX(40px);pointer-events:none}
.viz.sr.sc-board .roster{opacity:1;transform:none;pointer-events:auto}
.viz.sr .title{transform:scale(1.12);transform-origin:left top;transition:opacity .8s}
.viz.sr .afeed{top:96px;transition:opacity .8s}
.viz.sr.sc-intro .title,.viz.sr.sc-intro .afeed,.viz.sr.sc-intro .qr,.viz.sr.sc-intro .clabels,
.viz.sr.sc-outro .qr,.viz.sr.sc-board .afeed,.viz.sr.sc-board .qr{opacity:0}
.viz.sr .qr{transition:opacity .8s}
.viz.sr .ui{animation:srdrift 1800s linear infinite}          /* slow pixel drift against burn-in */
@keyframes srdrift{0%,100%{translate:0 0}25%{translate:6px -4px}50%{translate:-5px 5px}75%{translate:4px 6px}}

.cine{position:absolute;left:4.4vw;bottom:8vh;max-width:min(62vw,1500px);pointer-events:none;
  opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1),filter .9s}
.cine.show{opacity:1;transform:none;filter:none}
.cine .k{display:flex;align-items:center;gap:.8em;font:800 clamp(12px,.95vw,22px)/1 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;letter-spacing:.34em;color:#5fe3f5;margin-bottom:1.1vh}
.cine .k::before{content:"";width:3.2em;height:2px;border-radius:2px;background:linear-gradient(90deg,#22d3ee,#D41A74)}
.cine .h{font:800 clamp(32px,3.7vw,96px)/1.08 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;color:#f4f7ff;letter-spacing:-.015em;
  text-shadow:0 4px 40px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.cine .h em{font-style:normal;background:linear-gradient(90deg,#ff8cc6,#ff4fa3 55%,#f0197e);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine .h .flag{height:.78em;width:auto;border-radius:.12em;margin-right:.32em;vertical-align:-.06em;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.cine .s{margin-top:1.4vh;font:600 clamp(15px,1.35vw,34px)/1.35 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;color:#c3cee4;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.cine .s:empty{display:none}
.viz.sr .vignette{background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 55%,rgba(1,2,6,.55) 100%),
  linear-gradient(0deg,rgba(1,2,6,.62) 0%,transparent 34%),linear-gradient(180deg,rgba(1,2,6,.5) 0%,transparent 18%)}

.lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);text-align:center;pointer-events:none;
  opacity:0;filter:blur(10px);transition:opacity 1.6s ease,filter 1.6s ease,transform 2.2s cubic-bezier(.2,.8,.2,1)}
.lock.show{opacity:1;filter:none;transform:translate(-50%,-50%)}
.lock img{display:block;width:clamp(72px,7vw,170px);height:auto;margin:0 auto 2.4vh;filter:drop-shadow(0 0 36px rgba(212,26,116,.55))}
.lock b{display:block;font:800 clamp(38px,5.2vw,140px)/1 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;letter-spacing:.2em;color:#fff;margin-right:-.2em;
  text-shadow:0 0 60px rgba(120,170,255,.35),0 4px 30px rgba(0,0,0,.6)}
.lock span{display:block;margin-top:2.2vh;font:600 clamp(15px,1.5vw,38px)/1.2 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;color:#c9d4ea;letter-spacing:.06em}

.cqr{position:absolute;left:50%;bottom:9vh;transform:translate(-50%,30px);display:flex!important;align-items:center;gap:2.2vw;
  padding:clamp(16px,1.6vw,40px) clamp(22px,2.4vw,60px) clamp(16px,1.6vw,40px) clamp(16px,1.6vw,40px);opacity:0;pointer-events:none;
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.viz:not(.sr) .cqr{display:none!important}
.viz.sr.sc-outro .cqr{opacity:1;transform:translate(-50%,0)}
.cqr img{width:clamp(150px,12.5vw,330px);height:auto;border-radius:clamp(10px,.8vw,20px);background:#fff;padding:clamp(8px,.6vw,16px)}
.cqr > div > b{display:block;font:800 clamp(26px,2.6vw,68px)/1.12 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;color:#fff;max-width:34vw}
.cqr > div > b em{font-style:normal;color:#ff4fa3}
.cqr > div > span{display:block;margin-top:1.4vh;font:600 clamp(14px,1.15vw,30px)/1.4 "Segoe UI Variable Display","Segoe UI","Malgun Gothic",system-ui,sans-serif;color:#b8c4dc;max-width:34vw}

.srfade{position:absolute;inset:0;background:#000;z-index:30;opacity:0;pointer-events:none;transition-property:opacity;transition-timing-function:ease}
.srfade.on{opacity:1}

/* ── v1.6 leaderboard ─────────────────────────────────────────────────────
   Metal podium (gold centre, silver/bronze sides) on stepped pedestals with a light
   sweep, medal-coloured rotating avatar rings, rows with round flag/letter avatars,
   glowing share bars and rank-movement chips. */
.roster{width:360px;border-radius:20px;background:linear-gradient(180deg,rgba(14,20,34,.86),rgba(7,10,18,.82));
  box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.rhead{padding:16px 18px 10px;gap:10px}
.rhead .trophy{width:22px;height:22px;color:#ffcb3d;filter:drop-shadow(0 0 8px rgba(255,203,61,.45));flex:none}
.rhead .rtt{display:flex;flex-direction:column;gap:1px}
.rhead h3{font-size:13.5px;letter-spacing:.16em}
.rhead small{font-size:10.5px;color:#7f90ad;font-weight:600;letter-spacing:.04em}
.rhead .cnt{font-size:15px}
.legend{padding:0 18px 12px;gap:12px;font-size:11px}
.tabs{padding:0 18px 14px}
.tabs button{border-radius:11px;padding:7px 0}

.podium{grid-template-columns:1fr 1.14fr 1fr;gap:8px;padding:14px 14px 4px;align-items:end}
.pd{position:relative;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;box-shadow:none!important;cursor:pointer;min-width:0}
.pd .crown{top:-16px;width:24px;height:24px}
.pd .av{position:relative;width:52px;height:52px;margin:0 0 7px;background:none!important;box-shadow:none!important;overflow:visible;border-radius:50%}
.pd.g1 .av{width:64px;height:64px}
.pd .av .ring{position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(from 0deg,var(--m1),var(--m2),var(--m1),var(--m3),var(--m1));
  animation:ringspin 6s linear infinite;filter:drop-shadow(0 0 10px var(--glow))}
.pd .av .face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0b1120;box-shadow:0 0 0 2px #0b1120}
.pd .av .face img:not(.cc){width:100%;height:100%;object-fit:cover}
.pd .av .face span{display:grid;place-items:center;width:100%;height:100%;font:800 20px/1 "Segoe UI",system-ui;color:#fff}
.pd.g1 .av .face span{font-size:24px}
.pd .av .cc,.ra .cc{position:absolute;right:-3px;bottom:-2px;width:18px;height:13px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 2px #0b1120}
.pd .av .face .cc{display:none}
.pd .nm{max-width:100%;font-size:12.5px;font-weight:800;color:#f1f5fc}
.pd .sub{max-width:100%;font-size:10.5px;color:#8b9bb8;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pd .pt{margin:4px 0 7px;font:800 16px/1.1 "Segoe UI",system-ui;color:var(--m1);font-variant-numeric:tabular-nums;text-shadow:0 0 14px var(--glow)}
.pd.g1 .pt{font-size:19px}
.pd .pt small{font-size:9.5px;margin-left:3px;color:#8b9bb8;font-weight:700;text-shadow:none}
.pd .ped{position:relative;width:100%;border-radius:10px 10px 4px 4px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;
  background:linear-gradient(180deg,var(--m1) 0%,var(--m2) 45%,var(--m3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 22px var(--glow)}
.pd.g1 .ped{height:74px}.pd.g2 .ped{height:52px}.pd.g3 .ped{height:38px}
.pd .ped b{font:900 22px/1 "Segoe UI Variable Display","Segoe UI",system-ui;color:rgba(20,14,4,.62);text-shadow:0 1px 0 rgba(255,255,255,.45)}
.pd.g1 .ped b{font-size:30px}
.pd .ped span{font-size:10px;font-weight:800;color:rgba(20,14,4,.55);margin-top:2px}
.pd.g3 .ped span{display:none}
.pd .ped .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:shine 5.5s ease-in-out infinite}
.pd.g2 .ped .shine{animation-delay:1.2s}.pd.g3 .ped .shine{animation-delay:2.4s}
.pd.g1{--m1:#ffe39a;--m2:#f4b73a;--m3:#a86d0c;--glow:rgba(255,196,61,.38)}
.pd.g2{--m1:#f2f5fa;--m2:#b9c3d2;--m3:#6f7b8e;--glow:rgba(200,215,235,.26)}
.pd.g3{--m1:#f4c69a;--m2:#c98849;--m3:#7a4a1f;--glow:rgba(214,140,70,.3)}
.pd:hover .ped{filter:brightness(1.08)}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

.rlist{padding:6px 10px 12px;border-top:1px solid rgba(120,145,190,.1);margin-top:10px}
.rrow{grid-template-columns:20px 30px 1fr auto;gap:10px;padding:8px 8px;border-radius:12px;transition:background .2s}
.rrow:hover{background:rgba(74,163,255,.07)}
.rrow .n{font:800 12px/1 "Segoe UI",system-ui;color:#7f90ad;text-align:center}
.rrow .ra{position:relative;width:30px;height:30px;border-radius:50%}
.rrow .ra > img:not(.cc){width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(160,180,215,.25)}
.rrow .ra > span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:800 13px/1 "Segoe UI",system-ui;color:#fff}
.rrow .ra .cc{width:14px;height:10px;right:-3px;bottom:-1px}
.rrow .who b{font-size:13px}
.rrow .who span{font-size:10.5px}
.rrow .val{font-size:14.5px;color:#e8f6ff}
.rrow .val i{color:#7f90ad}
.rrow .bar{grid-column:3/5;height:3px;border-radius:3px;background:rgba(120,145,190,.1);margin-top:2px}
.rrow .bar b{background:linear-gradient(90deg,#22d3ee,#8b5cf6 55%,#f0197e);box-shadow:0 0 10px rgba(34,211,238,.35);border-radius:3px}
.mv{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:6px;margin-left:6px;letter-spacing:.02em}
.mv.up{color:#34d399;background:rgba(52,211,153,.12)}.mv.dn{color:#fb7185;background:rgba(251,113,133,.12)}.mv.new{color:#fbbf24;background:rgba(251,191,36,.12)}

/* showroom leaderboard scene: the board is the subject, so it grows */
.viz.sr.sc-board .roster{top:6vh;right:4vw;max-height:84vh}
@media (min-width:1700px){.viz.sr.sc-board .roster{zoom:1.25}}
@media (min-width:2300px){.viz.sr.sc-board .roster{zoom:1.6}}
@media (min-width:3200px){.viz.sr.sc-board .roster{zoom:2.1}}

/* v1.5.3 compact leaderboard (user: "리더보드 너무 큼") */
.roster{width:316px;border-radius:16px}
.rhead{padding:12px 14px 7px;gap:8px}
.rhead .trophy{width:18px;height:18px}
.rhead h3{font-size:12px}
.rhead small{font-size:9.5px}
.rhead .cnt{font-size:13px}
.legend{padding:0 14px 8px;gap:9px;font-size:10.5px}
.tabs{padding:0 14px 10px}
.tabs button{padding:5px 0;font-size:10px;border-radius:9px}
.podium{padding:12px 12px 2px;gap:6px}
.pd .crown{top:-13px;width:19px;height:19px}
.pd .av{width:40px;height:40px;margin-bottom:5px}
.pd.g1 .av{width:48px;height:48px}
.pd .av .ring{inset:-3px}
.pd .av .face span{font-size:16px}.pd.g1 .av .face span{font-size:19px}
.pd .nm{font-size:11.5px}
.pd .sub{font-size:9.5px}
.pd .pt{margin:3px 0 5px;font-size:13.5px}.pd.g1 .pt{font-size:15.5px}
.pd .pt small{font-size:8.5px}
.pd.g1 .ped{height:46px}.pd.g2 .ped{height:34px}.pd.g3 .ped{height:24px}
.pd .ped{padding-top:4px;border-radius:8px 8px 3px 3px}
.pd .ped b{font-size:16px}.pd.g1 .ped b{font-size:21px}
.pd .ped span{font-size:9px;margin-top:1px}
.pd.g2 .ped span{display:none}
.rlist{padding:4px 8px 10px;margin-top:8px}
.rrow{grid-template-columns:16px 24px 1fr auto;gap:8px;padding:5px 6px;border-radius:10px}
.rrow .n{font-size:11px}
.rrow .ra,.rrow .ra > img:not(.cc),.rrow .ra > span{width:24px;height:24px}
.rrow .ra > span{font-size:11px}
.rrow .ra .cc{width:12px;height:9px}
.rrow .who b{font-size:12px}
.rrow .who span{font-size:9.5px}
.rrow .val{font-size:12.5px}
.rrow .val i{font-size:9.5px}
.rrow .bar{height:2px}
@media (min-width:1700px){.viz.sr.sc-board .roster{zoom:1.1}}
@media (min-width:2300px){.viz.sr.sc-board .roster{zoom:1.35}}
@media (min-width:3200px){.viz.sr.sc-board .roster{zoom:1.7}}

/* ── node orb avatar (mirrors the omni app's node skin) ───────── */
.orb{display:block;width:100%;height:100%;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 31% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 72% 84%,rgba(0,0,0,.42),rgba(0,0,0,0) 58%),
    linear-gradient(135deg,var(--c1),var(--c2));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 14px -2px var(--c1),0 0 22px -6px var(--c2),
    inset 0 -3px 8px rgba(0,0,0,.42),inset 0 -6px 7px -5px var(--c2),
    inset 0 2px 5px -2px rgba(255,255,255,.55)}
.orb::after{content:"";position:absolute;left:19%;top:12%;width:30%;height:22%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.95),rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 100%);
  filter:blur(.4px);transform:rotate(-18deg)}
.orb.fx-pulse{animation:orbPulse 2.2s ease-in-out infinite}
@keyframes orbPulse{0%,100%{box-shadow:0 0 14px -2px var(--c1),0 0 22px -6px var(--c2),inset 0 -3px 8px rgba(0,0,0,.42),inset 0 -6px 7px -5px var(--c2),inset 0 2px 5px -2px rgba(255,255,255,.55)}
  50%{box-shadow:0 0 24px 1px var(--c1),0 0 36px -2px var(--c2),inset 0 -3px 8px rgba(0,0,0,.42),inset 0 -6px 7px -5px var(--c2),inset 0 2px 5px -2px rgba(255,255,255,.55)}}
.orb.fx-shimmer{overflow:hidden}
.orb.fx-shimmer::before{content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  animation:orbShine 2.6s linear infinite}
@keyframes orbShine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.orb.fx-rainbow{background:conic-gradient(#00E5FF,#8B5CF6,#F0197E,#FFD54A,#34D399,#00E5FF);
  animation:orbSpin 4.5s linear infinite}
/* the sweep spins, the shading must not — keep the bead lit from one side */
.orb.fx-rainbow::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 31% 26%,rgba(255,255,255,.5),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 72% 84%,rgba(0,0,0,.4),rgba(0,0,0,0) 58%);
  animation:orbSpin 4.5s linear infinite reverse}
@keyframes orbSpin{to{transform:rotate(360deg)}}

/* ── v1.5.5 identicon avatars + dense board ───────────────────────────────
   The avatar is the omni app's own block identicon (sha256 of the address), so a
   visitor finds themselves on the wall by the same picture their phone shows. Rows
   keep the app's rounded square; an equipped profile frame makes it a ringed circle.
   Rows are tighter and the panel taller, so the board shows ~20 ranks instead of 12. */
.ra .idt,.pd .av .face .idt{display:block;width:100%;height:100%;object-fit:cover}
.rrow .ra{overflow:visible}
.rrow .ra .idt{border-radius:30%;box-shadow:0 0 0 1px rgba(160,180,215,.2)}
.rrow .ra.fr .idt,.pd .av .face .idt{border-radius:50%}
.rrow .ra .idt{position:relative}
.rrow .ra .fring{position:absolute;inset:-2.5px;border-radius:50%}
.idt.ph{display:grid!important;place-items:center;background:#1a2336;font:800 11px/1 "Segoe UI",system-ui;color:#cbd6e8}
.pd .av .face .idt.ph{font-size:18px}

.roster{max-height:calc(100% - 172px)}
.podium{padding:10px 12px 2px}
.pd .av{width:38px;height:38px;margin-bottom:4px}
.pd.g1 .av{width:46px;height:46px}
.pd .nm{font-size:11px}
.pd .sub{font-size:9px}
.pd .pt{margin:2px 0 4px;font-size:12.5px}.pd.g1 .pt{font-size:14.5px}
.pd.g1 .ped{height:38px}.pd.g2 .ped{height:28px}.pd.g3 .ped{height:20px}
.pd .ped b{font-size:14px}.pd.g1 .ped b{font-size:18px}
.pd .crown{top:-12px;width:17px;height:17px}

.rlist{padding:2px 7px 6px;margin-top:6px;overflow:hidden}
.rrow{grid-template-columns:15px 22px 1fr auto;gap:7px;padding:3px 6px;border-radius:9px}
.rrow .n{font-size:10.5px}
.rrow .ra,.rrow .ra > img:not(.cc),.rrow .ra > span:not(.cc){width:22px;height:22px}
.rrow .ra .cc{width:11px;height:8px;right:-2px;bottom:-1px}
.rrow .who b{font-size:11.5px;line-height:1.2}
.rrow .who span{font-size:9px;line-height:1.2}
.rrow .val{font-size:11.5px;line-height:1.2}
.rrow .val i{font-size:8.5px}
.rrow .bar{height:2px;margin-top:2px}
.mv{font-size:8.5px;padding:0 4px;margin-left:5px}
/* the grid gap applied between the row's two lines too — that alone cost 7 px a row */
.rrow{gap:2px 7px}
.rhead{padding:10px 14px 6px}
.legend{padding:0 14px 6px}
.tabs{padding:0 14px 8px}
.podium{padding:8px 12px 0}
/* podium and rows trimmed again so the board reaches ~20 ranks on a 1080p screen */
.podium{padding:6px 12px 0;gap:5px}
.pd .av{width:34px;height:34px;margin-bottom:3px}
.pd.g1 .av{width:42px;height:42px}
.pd .crown{top:-11px;width:16px;height:16px}
.pd .nm{font-size:10.5px}
.pd .sub{font-size:8.5px}
.pd .pt{margin:2px 0 3px;font-size:11.5px}.pd.g1 .pt{font-size:13px}
.pd .pt small{font-size:8px}
.pd.g1 .ped{height:30px}.pd.g2 .ped{height:22px}.pd.g3 .ped{height:16px}
.pd .ped{padding-top:3px}
.pd .ped b{font-size:12px}.pd.g1 .ped b{font-size:15px}
.pd .ped span{font-size:8px;margin-top:0}
.rrow{padding:2px 6px}
.rrow .ra,.rrow .ra > img:not(.cc),.rrow .ra > span:not(.cc){width:20px;height:20px}
.rrow .who b{font-size:11px;line-height:1.15}
.rrow .who span{font-size:8.5px;line-height:1.1}
.rrow .val{font-size:11px}
.rrow .val i{font-size:8px}
/* the app draws a row identicon as a rounded square (only a framed one is round) —
   beat the generic `.rrow .ra > img` circle rule from the v1.6 board */
.rrow .ra > img.idt{border-radius:30%}
.rrow .ra.fr > img.idt{border-radius:50%}
/* OMNIPET flair beside the nickname, as in the app's ranking rows */
.rrow .who b .pet{width:13px;height:13px;flex:none;image-rendering:pixelated;opacity:.95}