:root{
  --ink:#f6f4ff;--ink2:#c9c3ea;--muted:#8f88bb;--accent:#b8a6ff;--hot:#fff;
  --glass:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));--glass-edge:rgba(255,255,255,.18);--glass-hi:rgba(255,255,255,.28);
  --bar:rgba(7,5,18,.62);--bar-edge:rgba(184,166,255,.16);--label-shadow:0 2px 12px rgba(5,4,11,.95),0 0 3px rgba(5,4,11,.9);
  --lx:36%;--ly:15%;
  --pill:linear-gradient(180deg,#fff,#dcd6ff);--pill-ink:#120d2a;--pill-glow:rgba(160,130,255,.45);
}
:root.sun{
  --ink:#2a1004;--ink2:#5a260a;--muted:#86451a;--accent:#ff8a1f;
  --glass:linear-gradient(180deg,rgba(255,252,240,.72),rgba(255,236,205,.5));--glass-edge:rgba(255,255,255,.8);--glass-hi:rgba(255,255,255,.9);
  --bar:rgba(255,244,222,.66);--bar-edge:rgba(120,40,0,.18);--label-shadow:0 1px 10px rgba(255,236,190,.95),0 0 2px rgba(255,240,210,.9);
  --pill:linear-gradient(180deg,#3a1605,#1d0901);--pill-ink:#ffe7c2;--pill-glow:rgba(120,40,0,.35);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#020107}
body{font-family:-apple-system,"SF Pro Display","Helvetica Neue",sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;overscroll-behavior:none}
:root.sun body{background:#c95a08}
body.drag{cursor:grabbing}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
:root.no-gl #gl{display:none}
:root.no-gl body{background:radial-gradient(110% 85% at 50% 48%,#1b1344 0%,#0e0a26 42%,#020107 100%)}
:root.no-gl.sun body{background:radial-gradient(110% 85% at 50% 48%,#ffd36a 0%,#ff8a1f 45%,#8a2a02 100%)}
canvas#sky,canvas#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.6) 100%);transition:background .8s}
:root.sun .vignette{background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(90,20,0,.45) 100%)}
#stage{position:fixed;left:0;top:0;width:0;height:0;transform-origin:0 0}

/* glass bubbles: sharp picture, light on top that follows your cursor */
.b{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;will-change:transform,opacity;cursor:pointer}
.b .img{position:absolute;inset:0;border-radius:50%;background:var(--img,none) center/cover no-repeat,var(--fb);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 calc(var(--s) * .4) var(--glow),0 calc(var(--s) * .12) calc(var(--s) * .26) rgba(0,0,0,.5)}
.b .edge{position:absolute;inset:0;border-radius:50%;background:var(--img,none) center/114% no-repeat,var(--fb);filter:saturate(1.3) brightness(1.14);
  -webkit-mask:radial-gradient(circle closest-side,transparent 90.5%,#000 92.5%);mask:radial-gradient(circle closest-side,transparent 90.5%,#000 92.5%)}
.b .shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(44% 24% at var(--lx) var(--ly),rgba(255,255,255,.66),rgba(255,255,255,.2) 45%,transparent 72%),
    radial-gradient(circle at calc(var(--lx) + 34%) calc(var(--ly) + 7%),rgba(255,255,255,.75) 0 1.6%,transparent 2.6%),
    radial-gradient(62% 20% at calc(100% - var(--lx) + 14%) 97%,rgba(255,255,255,.3),transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 1.5px 1px rgba(255,255,255,.8),inset 0 calc(var(--s) * -.07) calc(var(--s) * .1) rgba(0,0,0,.32)}
.b .disp{position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:.75;mix-blend-mode:screen;
  background:conic-gradient(from 200deg,transparent,rgba(255,120,200,.75),rgba(120,225,255,.75),transparent 32%,transparent 62%,rgba(150,255,180,.5),transparent 80%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 95%,#000 98%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 95%,#000 98%,transparent 100%)}
.b .ini{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-weight:800;font-size:calc(var(--s) * .34);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.b.noimg .ini{display:flex}
.b .rank{position:absolute;right:-2%;top:-2%;min-width:calc(var(--s) * .3);height:calc(var(--s) * .3);padding:0 6%;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:calc(var(--s) * .16);color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.b.me{cursor:default}
.b.me .img{box-shadow:0 0 0 1px rgba(0,0,0,.55),0 20px 50px rgba(0,0,0,.55)}
.halo{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(160,130,255,.42) 0%,rgba(120,90,255,.15) 32%,transparent 62%)}
:root.sun .halo{background:radial-gradient(circle,rgba(255,250,210,.7) 0%,rgba(255,200,90,.28) 32%,transparent 62%)}
.horizon{position:absolute;left:0;top:0;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(190,165,255,.95),rgba(120,225,255,.85),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 50%,rgba(255,120,200,.8),rgba(255,210,120,.6),rgba(255,255,255,0) 82%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 83%,#000 88%,#000 90%,transparent 100%);mask:radial-gradient(circle closest-side,transparent 83%,#000 88%,#000 90%,transparent 100%);
  animation:spin 9s linear infinite;filter:drop-shadow(0 0 10px rgba(170,140,255,.8))}
:root.sun .horizon{background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,255,220,.95),rgba(255,190,80,.9),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 50%,rgba(255,120,40,.85),rgba(255,240,180,.7),rgba(255,255,255,0) 82%);filter:drop-shadow(0 0 12px rgba(255,200,90,.9))}
.horizon.b2{width:290px;height:290px;margin:-145px 0 0 -145px;opacity:.45;animation:spin 17s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
.me-label{position:absolute;left:0;top:0;text-align:center;pointer-events:none;white-space:nowrap;text-shadow:var(--label-shadow)}
.me-label .h{font-weight:800;font-size:22px}

/* the arcade planet and its game moons */
.planet{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;cursor:pointer;will-change:transform}
.planet .ball{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0,#ffd6f2 6%,#ff6fb5 22%,#8f4dff 52%,#2a1170 78%,#0d0530 100%);
  box-shadow:0 0 60px rgba(255,111,181,.55),0 0 140px rgba(143,77,255,.45),inset -18px -22px 40px rgba(10,0,40,.65),inset 8px 10px 22px rgba(255,255,255,.35)}
.planet .ball::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(170deg,transparent 0 9px,rgba(255,255,255,.5) 9px 12px,transparent 12px 22px)}
.planet .ring{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:50%;pointer-events:none;
  border:6px solid rgba(255,220,255,.55);box-shadow:0 0 18px rgba(255,160,230,.7),inset 0 0 14px rgba(160,120,255,.6);transform:rotateX(74deg) rotateZ(-18deg)}
.planet .ring.back{z-index:0}.planet .ring.front{z-index:3;clip-path:inset(50% 0 0 0)}
.planet .ball{z-index:2}
.planet .tag{position:absolute;left:50%;top:calc(100% + 26px);transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;text-shadow:var(--label-shadow)}
.planet .tag b{display:block;font-size:24px;font-weight:900;letter-spacing:4px}
.planet .tag span{display:block;font-size:15px;font-weight:700;color:var(--ink2);margin-top:4px}
.moon{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:center/cover no-repeat;cursor:pointer;will-change:transform;
  box-shadow:0 0 0 2px rgba(255,255,255,.75),0 0 20px rgba(255,140,220,.6),0 8px 18px rgba(0,0,0,.5)}
.moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(44% 26% at 36% 16%,rgba(255,255,255,.6),transparent 70%);mix-blend-mode:screen}

/* top live bar */
.live-stats{position:fixed;inset:0 0 auto;height:36px;z-index:9100;background:var(--bar);border-bottom:1px solid var(--bar-edge);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  font:700 10px/1 -apple-system,"SF Pro Text",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.live-stats-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px}
.stats-edition{font-size:10px;letter-spacing:.2em;color:var(--ink)}.stats-edition span{color:var(--muted);margin-left:8px}
.stats-metrics{display:flex;align-items:center;gap:22px}
.stat-metric{display:flex;align-items:center;gap:9px;white-space:nowrap}
.stat-metric+.stat-metric{border-left:1px solid var(--bar-edge);padding-left:22px}
.stat-metric strong{font:800 13px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent);min-width:1ch}
.stats-dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.live-stats[data-state=live] .stats-dot{background:#6BE36B;box-shadow:0 0 10px #6BE36Baa;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.theme-toggle{all:unset;cursor:pointer;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(127,127,127,.14);border:1px solid var(--bar-edge)}
.theme-toggle span{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:9.5px;letter-spacing:.12em}
.theme-toggle span svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
:root:not(.sun) .theme-toggle .t-space,:root.sun .theme-toggle .t-sun{background:var(--pill);color:var(--pill-ink);box-shadow:0 2px 10px var(--pill-glow)}

.ui{position:fixed;z-index:9000;transition:opacity .6s ease,transform .6s ease}
body.showing .ui:not(.show-ui){opacity:0;pointer-events:none;transform:translateY(-6px)}
.brand{left:26px;top:58px}
.brand .t{font-size:13px;font-weight:800;letter-spacing:4px;text-transform:uppercase;text-shadow:var(--label-shadow)}
.brand .s{font-size:13px;color:var(--ink2);margin-top:6px;text-shadow:var(--label-shadow)}
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 30px rgba(0,0,0,.28);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)}
.controls{right:22px;top:52px;display:flex;gap:10px;align-items:center}
.seg{display:flex;padding:4px;border-radius:999px;position:relative}
.seg button{all:unset;cursor:pointer;position:relative;z-index:1;font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;color:var(--ink2);transition:color .25s}
.seg button.on{color:var(--pill-ink)}
.seg .pill{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--pill);box-shadow:0 4px 14px var(--pill-glow);transition:left .45s cubic-bezier(.2,.9,.2,1.15),width .45s cubic-bezier(.2,.9,.2,1.15)}
.tog{all:unset;cursor:pointer;height:42px;padding:0 15px;border-radius:999px;font-size:13px;font-weight:800;color:var(--ink2)}
.tog.on{color:var(--pill-ink);background:var(--pill);box-shadow:0 4px 14px var(--pill-glow)}
.search{display:flex;align-items:center;gap:8px;border-radius:999px;padding:0 14px;height:42px}
.search svg{stroke:var(--muted)}
.search input{all:unset;width:140px;font-size:14px;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.show-btn{left:50%;top:54px;transform:translateX(-50%);all:unset;position:fixed;z-index:9000;left:50%;top:54px;translate:-50% 0;cursor:pointer;display:flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 8px;border-radius:999px;
  font-size:14px;font-weight:800;letter-spacing:.3px;color:var(--ink);overflow:hidden;transition:transform .25s,box-shadow .25s,opacity .6s}
.show-btn:hover{transform:scale(1.05)}
.show-btn .pl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pill);box-shadow:0 0 18px var(--pill-glow)}
.show-btn .pl svg{width:12px;height:12px;fill:var(--pill-ink);margin-left:2px}
.show-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);transform:translateX(-120%);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{60%,100%{transform:translateX(120%)}}
body.showing .show-btn{opacity:0;pointer-events:none}
.hint{left:50%;bottom:20px;transform:translateX(-50%);font-size:12px;color:var(--muted);letter-spacing:.3px;padding:9px 16px;border-radius:999px;white-space:nowrap}
.arcade-cta{left:22px;bottom:20px;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:800;font-size:14px;
  box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(255,111,181,.35),0 0 30px rgba(255,111,181,.35),0 12px 30px rgba(0,0,0,.3);animation:beckon 3s ease-in-out infinite}
.arcade-cta:hover{transform:translateY(-2px) scale(1.03)}
.arcade-cta .covers{display:flex}
.arcade-cta .covers i{width:30px;height:30px;border-radius:50%;background:center/cover;box-shadow:0 0 0 2px rgba(255,255,255,.85);margin-left:-9px}
.arcade-cta .covers i:first-child{margin-left:0}
.arcade-cta small{display:block;font-size:11.5px;font-weight:600;color:var(--ink2)}
@keyframes beckon{50%{box-shadow:inset 0 1px 0 var(--glass-hi),0 0 0 1px rgba(255,111,181,.55),0 0 46px rgba(255,111,181,.6),0 12px 30px rgba(0,0,0,.3)}}

/* hover card (dark in both themes for contrast) */
#card{position:fixed;left:0;top:0;z-index:9500;width:304px;padding:18px;border-radius:24px;pointer-events:none;opacity:0;transform:translate3d(-9999px,0,0);transition:opacity .2s ease;color:#f6f4ff;
  background:linear-gradient(180deg,rgba(26,20,58,.95),rgba(12,9,30,.95));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 40px var(--glow,transparent);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5)}
#card.on{opacity:1}
.pc-top{display:flex;gap:14px;align-items:center}
.pc-av{width:58px;height:58px;border-radius:50%;background:center/cover no-repeat;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 24px var(--glow,transparent)}
.pc-h{font-size:19px;font-weight:800;letter-spacing:-.2px;color:#fff}
.pc-n{font-size:13.5px;color:#c9c3ea;margin-top:2px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-rk{margin-left:auto;align-self:flex-start;font-size:13px;font-weight:800;color:#120d2a;background:#fff;border-radius:999px;padding:4px 10px}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.pc-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}
.pc-stat b{display:block;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.3px}
.pc-stat span{font-size:11px;font-weight:600;color:#8f88bb;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.pc-spark{display:flex;align-items:flex-end;gap:6px;height:54px;margin-top:14px}
.pc-spark div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.pc-spark i{display:block;width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#fff,var(--glow2,#b7a6ff));min-height:3px}
.pc-spark em{font-style:normal;font-size:10px;color:#8f88bb;font-weight:600}
#card .pc-actions{display:none}

/* pinned profile (click a bubble) */
#pin-wrap{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;background:rgba(3,2,10,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
#pin-wrap.on{opacity:1;pointer-events:auto}
#pin{width:min(380px,calc(100vw - 32px));padding:22px;border-radius:28px;color:#f6f4ff;transform:scale(.92) translateY(10px);transition:transform .45s cubic-bezier(.2,.9,.2,1.2);
  background:linear-gradient(180deg,rgba(30,23,66,.96),rgba(12,9,30,.97));border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px rgba(0,0,0,.7),0 0 60px var(--glow,transparent)}
#pin-wrap.on #pin{transform:none}
#pin .pc-av{width:78px;height:78px}
#pin .pc-h{font-size:23px}
.pc-actions{display:grid;gap:10px;margin-top:18px}
.pc-actions a,.pc-actions button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;font-weight:800;font-size:15px}
.pc-actions .primary{background:linear-gradient(90deg,#ff6fb5,#8f4dff);color:#fff;box-shadow:0 10px 30px rgba(255,111,181,.35)}
.pc-actions .primary small{font-weight:600;opacity:.85}
.pc-actions .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc-actions .secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff}
.pin-close{all:unset;cursor:pointer;position:absolute;right:16px;top:14px;font-size:22px;color:#8f88bb}
#pin{position:relative}

/* intro, show captions, countdown spotlight, finale */
#intro{position:fixed;inset:0;z-index:9800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.8,.2,1),filter .9s ease}
#intro.out{opacity:0;transform:scale(1.18);filter:blur(6px)}
#intro .k{font-size:14px;font-weight:800;letter-spacing:10px;text-transform:uppercase;color:var(--ink2);text-indent:10px}
#intro .n,.big{font-size:128px;font-weight:900;letter-spacing:-5px;line-height:.9;background:linear-gradient(180deg,#fff 20%,#bfb0ff 70%,#7c64ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px rgba(140,110,255,.45))}
:root.sun #intro .n,:root.sun .big{background:linear-gradient(180deg,#fff 10%,#ffe08a 55%,#ff7a00);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 8px 30px rgba(120,30,0,.5))}
#intro .l{font-size:16px;color:var(--ink2)}
#caption{position:fixed;left:0;right:0;bottom:12vh;z-index:9700;text-align:center;pointer-events:none;font-size:clamp(28px,4.4vw,62px);font-weight:900;letter-spacing:-1.5px;line-height:1;
  color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
#caption.on{opacity:1;transform:none}
#caption small{display:block;font-size:.34em;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#d7cfff;margin-bottom:.6em}
:root.sun #caption{color:#fffaf0;text-shadow:0 3px 30px rgba(90,20,0,.75)}
#spot{position:fixed;right:6vw;top:50%;z-index:9700;width:min(420px,40vw);transform:translate(40px,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.2,1.1);color:#fff}
#spot.on{opacity:1;transform:translate(0,-50%)}
#spot .r{font-size:150px;font-weight:900;letter-spacing:-8px;line-height:.8;background:linear-gradient(180deg,#fff,var(--glow2,#b8a6ff));-webkit-background-clip:text;background-clip:text;color:transparent}
#spot .h{font-size:40px;font-weight:900;letter-spacing:-1px;margin-top:10px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
#spot .n{font-size:18px;color:#d7cfff;margin-top:4px;text-shadow:0 2px 16px rgba(0,0,0,.6)}
#spot .m{display:flex;gap:26px;margin-top:22px}
#spot .m b{display:block;font-size:34px;font-weight:900}
#spot .m span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#d7cfff}
.show-ui{z-index:9750}
.show-bar{left:50%;bottom:26px;transform:translateX(-50%);display:none;align-items:center;gap:14px;padding:8px 10px 8px 18px;border-radius:999px}
body.showing .show-bar{display:flex}
.show-bar .track{width:220px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.show-bar .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff6fb5,#8f4dff)}
.show-bar button{all:unset;cursor:pointer;font-size:13px;font-weight:800;padding:8px 14px;border-radius:999px;background:var(--pill);color:var(--pill-ink)}
.show-bar .lbl{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.3px;min-width:110px}
#finale{position:fixed;inset:0;z-index:9760;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .8s}
#finale.on{opacity:1;pointer-events:auto}
#finale .box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
#finale .k{font-size:14px;font-weight:800;letter-spacing:.4em;text-transform:uppercase;color:#f0e9ff;text-shadow:0 2px 20px rgba(0,0,0,.6)}
#finale .big{font-size:clamp(56px,8vw,112px)}
#finale .games{display:flex;gap:12px;margin:6px 0}
#finale .games a{width:92px;height:62px;border-radius:14px;background:center/cover;box-shadow:0 0 0 2px rgba(255,255,255,.8),0 10px 30px rgba(0,0,0,.5);transition:transform .25s}
#finale .games a:hover{transform:translateY(-4px) scale(1.06)}
#finale .go{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:62px;padding:0 34px;border-radius:999px;font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(90deg,#ff6fb5,#8f4dff);box-shadow:0 18px 50px rgba(255,111,181,.45),inset 0 1px 0 rgba(255,255,255,.4);animation:beckon 2.4s ease-in-out infinite}
#finale .alt{display:flex;gap:10px}
#finale .alt button{all:unset;cursor:pointer;font-size:14px;font-weight:800;padding:10px 18px;border-radius:999px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
#flash{position:fixed;inset:0;z-index:9690;pointer-events:none;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.6) 30%,transparent 70%);opacity:0}

@media (max-width:820px){
  .hint,.brand{display:none}
  .controls{top:auto;bottom:18px;right:12px;left:12px;justify-content:center;flex-wrap:wrap}
  .search input{width:90px}
  .arcade-cta{bottom:auto;top:108px;left:12px;padding:6px 14px 6px 6px}
  .arcade-cta small{display:none}
  .stats-edition{display:none}
  .live-stats-inner{padding:0 12px;gap:10px}
  .stats-metrics{gap:10px}.stat-metric+.stat-metric{padding-left:10px}
  .stat-metric>span:not(.stats-dot){font-size:8px}
  #spot{left:6vw;right:6vw;width:auto;top:auto;bottom:16vh;transform:translateY(20px)}
  #spot.on{transform:none}
  #spot .r{font-size:90px}
}
@media (prefers-reduced-motion:reduce){.horizon,.arcade-cta,.show-btn::after{animation:none}}

/* intro: only the words and the live bar while the pictures spell hello fren */
body.intro .ui,body.intro .show-btn{opacity:0;pointer-events:none}
.show-bar .sound{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.show-bar .sound.off{opacity:.6}

/* combo counter near the cursor */
#combo{position:fixed;z-index:9550;pointer-events:none;transform:translate(14px,-34px) scale(.6);opacity:0;font:900 22px/1 -apple-system,sans-serif;color:#fff;
  text-shadow:0 0 12px rgba(184,166,255,.9),0 2px 8px rgba(0,0,0,.6)}
#combo.on{animation:comboPop .7s cubic-bezier(.2,1.4,.3,1) forwards}
#combo.big{font-size:34px;color:#ffd27a;text-shadow:0 0 18px rgba(255,210,122,.95),0 2px 10px rgba(0,0,0,.6)}
@keyframes comboPop{0%{opacity:0;transform:translate(14px,-24px) scale(.5)}25%{opacity:1;transform:translate(14px,-40px) scale(1.15)}100%{opacity:0;transform:translate(14px,-70px) scale(1)}}
#sound-btn.off{opacity:.65}

/* the Tanukade mascot, summoned at the end of the show */
#mascot{position:fixed;left:26px;top:52px;z-index:9790;display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;opacity:0;pointer-events:none}
#mascot img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,210,122,.7)) drop-shadow(0 12px 24px rgba(0,0,0,.6))}
#mascot span{display:flex;flex-direction:column;gap:6px;opacity:0}
#mascot b{font-size:26px;font-weight:900;letter-spacing:6px;background:linear-gradient(90deg,#fff,#ffd27a,#ff6fb5);-webkit-background-clip:text;background-clip:text;color:transparent}
#mascot small{font-size:13px;font-weight:700;color:#e8e0ff;letter-spacing:.5px}
#mascot::before{content:"";position:absolute;left:56px;top:56px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid rgba(255,220,150,.9);opacity:0}
#mascot::after{content:"";position:absolute;left:0;top:0;width:112px;height:112px;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);mix-blend-mode:overlay;opacity:0}
#mascot.on{opacity:1;pointer-events:auto}
#mascot.on img{animation:materialize 1.6s cubic-bezier(.2,.9,.2,1) both,floaty 4s ease-in-out 1.6s infinite}
#mascot.on span{animation:wordIn .9s ease-out 1s both}
#mascot.on::before{animation:ringOut 1.3s ease-out .35s both}
#mascot.on::after{animation:sweep 1.1s ease-in-out 1.2s both}
#mascot:hover img{filter:drop-shadow(0 0 30px rgba(255,210,122,1)) drop-shadow(0 12px 24px rgba(0,0,0,.6))}
@keyframes materialize{0%{opacity:0;transform:scale(.35) rotate(-28deg);filter:blur(16px) brightness(3) saturate(0)}
  40%{opacity:1;filter:blur(5px) brightness(2) saturate(.6) drop-shadow(0 0 40px #ffd27a)}
  70%{transform:scale(1.1) rotate(4deg);filter:blur(0) brightness(1.25) drop-shadow(0 0 30px #ffd27a)}
  100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 22px rgba(255,210,122,.7)) drop-shadow(0 12px 24px rgba(0,0,0,.6))}}
@keyframes floaty{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes ringOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(26);border-width:1px}}
@keyframes sweep{0%{opacity:0;transform:translateX(-60px)}40%{opacity:1}100%{opacity:0;transform:translateX(60px)}}
@keyframes wordIn{0%{opacity:0;transform:translateX(-14px);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
body.showing #mascot{z-index:9790}

/* tap to enter (switches sound on) */
#enter{all:unset;position:fixed;left:50%;top:50%;z-index:9800;transform:translate(-50%,calc(-50% + 12px));opacity:0;pointer-events:none;cursor:pointer;
  padding:14px 26px;border-radius:999px;font:800 17px/1 -apple-system,"SF Pro Display",sans-serif;letter-spacing:.4px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 40px rgba(140,110,255,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.2,1.2)}
#enter span{margin-left:6px}
#enter.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;animation:enterPulse 1.8s ease-in-out .5s infinite}
@keyframes enterPulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 60px rgba(255,111,181,.6),0 0 0 6px rgba(255,255,255,.06)}}