:root{
  --bg:#0b1220; --panel:#0f1b31; --ink:#eaf1ff; --muted:#a8b0c6; --brand:#5aa2ff;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --glass:rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:
  radial-gradient(800px 400px at 15% -10%, #143059 0%, transparent 60%),
  radial-gradient(900px 480px at 110% 0%, #193565 0%, transparent 60%),
  var(--bg);color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 84px}
header{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:14px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(180deg,#7bb2ff,#3b82f6);display:grid;place-items:center;box-shadow:0 8px 18px rgba(59,130,246,.35)}
.brand .logo svg{width:22px;height:22px;fill:#fff}
.sound-btn{background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 10px;color:var(--ink);cursor:pointer}
.sound-btn:focus-visible{outline:3px solid color-mix(in oklab, var(--brand) 70%, white);outline-offset:2px}
.hero{
  position:relative;
  padding:16px 16px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 260px at 10% -20%, rgba(90,162,255,.18), transparent 60%),
    radial-gradient(560px 240px at 110% 0%, rgba(34,197,94,.15), transparent 60%);
  filter:saturate(120%) blur(0.3px); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, #5aa2ff, #22c55e, #f59e0b, #5aa2ff);
  background-size: 200% 100%;
  animation: heroBar 6s linear infinite;
  opacity:.8;
}
@keyframes heroBar{ to { background-position: 200% 0; } }
.hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{ width:42px; height:42px; border-radius:12px;
  background: linear-gradient(180deg,#7bb2ff,#3b82f6);
  display:grid; place-items:center; box-shadow:0 10px 22px rgba(59,130,246,.35);
}
.brand .logo svg{ width:24px; height:24px; fill:#fff; }
.brand-text strong{ font-size:clamp(18px,2.8vw,22px); letter-spacing:.3px; }
.brand-text .dot{ color:var(--brand); }
.brand-text .tagline{
  display:block; font-size:12px; color:var(--muted); margin-top:2px;
}
.hero-actions{ display:flex; align-items:center; gap:8px; }
.hero-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap; }
.stats{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: var(--ink);
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600;
  backdrop-filter: blur(6px);
}
.brand:focus-within .logo{ box-shadow:0 16px 40px rgba(0,0,0,.45); }
@media (max-width:640px){
  .hero{ padding:14px 12px; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .grid{grid-template-columns:1fr;} }
.game{position:relative;overflow:hidden;border-radius:18px;background:
  linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.1));
  border:1px solid rgba(255,255,255,.1);min-height:180px;display:flex;align-items:flex-end;padding:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;cursor:pointer; text-decoration:none; color:inherit}
.game:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
.meta{position:relative;z-index:2}
.title{font-size:clamp(16px,2.4vw,20px);font-weight:800}
.desc{color:var(--muted);font-size:12px;margin-top:4px}
.badge{display:inline-block;background:rgba(90,162,255,.15);border:1px solid rgba(90,162,255,.45);color:#cfe4ff;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;margin-top:8px}
.shine{position:absolute;inset:-40%;background:conic-gradient(from 90deg at 50% 50%, transparent 0 25%, rgba(255,255,255,.07) 25% 30%, transparent 30% 100%);transform:rotate(12deg);animation:shine 4.5s linear infinite}
@keyframes shine{ to{ transform: rotate(12deg) translateX(25%);} }
.logo-typing{position:absolute;right:10px;top:10px;z-index:1}
.keyboard{display:grid;grid-template-columns:repeat(6,10px);gap:3px;transform:scale(1.2)}
.key{width:10px;height:10px;border-radius:2px;background:#1b2a4b;border:1px solid rgba(255,255,255,.12)}
.caret{grid-column:1/-1;height:3px;background:var(--warn);animation:blink .9s steps(1) infinite;margin-top:3px;border-radius:2px}
@keyframes blink{50%{opacity:.2}}
.logo-blocks{position:absolute;right:14px;top:10px}
.block{width:18px;height:18px;border-radius:4px;background:#22385f;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:#cfe4ff;font-size:10px;font-weight:800;box-shadow:0 8px 10px rgba(0,0,0,.25)}
.fall{position:absolute;animation:drop 2.4s linear infinite}
.fall.two{left:24px;animation-delay:.6s}
.fall.three{left:48px;animation-delay:1.2s}
@keyframes drop{0%{transform:translateY(-24px)}100%{transform:translateY(120px)}}
.logo-bird{position:absolute;right:16px;top:14px}
.bird{width:38px;height:38px;border-radius:999px;background:#ffd166;border:2px solid #d09c2a;position:relative;animation:float 2s ease-in-out infinite}
.bird:before{content:'';position:absolute;right:-8px;top:16px;border-left:10px solid #ff8c42;border-top:6px solid transparent;border-bottom:6px solid transparent}
.wing{position:absolute;left:6px;top:18px;width:16px;height:10px;background:#ffc34d;border-radius:8px;animation:flap .6s ease-in-out infinite}
@keyframes flap{50%{transform:translateY(-4px)}}
@keyframes float{50%{transform:translateY(-6px)}}
.logo-maze{position:absolute;right:14px;top:10px;width:84px;height:64px;z-index:1}
.maze{width:64px;height:48px;background:linear-gradient(180deg,#0b1330,#11203d);border-radius:8px;padding:6px;position:relative;box-shadow:inset 0 4px 12px rgba(0,0,0,.35)}
.maze .wall{position:absolute;background:#20334f;border-radius:3px}
.maze .wall.h{left:4px;top:8px;width:48px;height:6px}
.maze .wall.v{left:26px;top:2px;width:6px;height:40px}
.maze .wall.h2{left:18px;bottom:8px;width:38px;height:6px}
.maze .player{width:8px;height:8px;background:var(--ok);border-radius:3px;position:absolute;left:6px;top:6px;animation:runMaze 3s linear infinite}
@keyframes runMaze{0%{left:6px;top:6px}33%{left:38px;top:6px}66%{left:38px;top:28px}100%{left:6px;top:28px}}
.logo-draw{position:absolute;right:14px;top:10px;width:54px;height:54px;display:grid;place-items:center;z-index:1}
.pencil{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:18px solid #ffb86b;transform:rotate(-20deg)}
.pencil:after{content:"";position:absolute;width:6px;height:6px;background:#fff;bottom:-20px;left:50%;transform:translateX(-50%)}
.logo-music{position:absolute;right:12px;top:12px;width:56px;height:56px;z-index:1;display:grid;place-items:center}
.logo-music:before{content:"";width:6px;height:18px;background:var(--brand);display:block;position:relative;border-radius:2px;transform:translateY(-6px)}
.logo-music:after{content:"";width:10px;height:10px;background:var(--ok);border-radius:50%;position:relative;left:10px;top:-6px;animation:bounce 1.4s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.logo-math{position:absolute;right:14px;top:14px;width:48px;height:48px;border-radius:10px;background:linear-gradient(180deg,#12263f,#0b1a2b);display:grid;place-items:center;color:var(--brand);font-weight:800;z-index:1}
.logo-math::after{content:"?";font-size:18px}
.logo-memory{position:absolute;right:14px;top:14px;width:64px;height:48px;z-index:1}
.logo-memory .card{position:absolute;width:22px;height:30px;border-radius:6px;background:#132038;box-shadow:0 6px 12px rgba(0,0,0,.5)}
.logo-memory .card.back{left:24px;background:linear-gradient(180deg,#183350,#0f2640);transform:rotate(8deg);}
.logo-puzzle{position:absolute;right:14px;top:14px;width:56px;height:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:6px;z-index:1}
.logo-puzzle .p1,.logo-puzzle .p2,.logo-puzzle .p3,.logo-puzzle .p4{background:#153049;border-radius:6px}
.logo-puzzle .empty{background:linear-gradient(180deg,#0b1220,#0f1b31)}
.logo-ttt{position:absolute;right:14px;top:14px;width:56px;height:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;z-index:1}
.logo-ttt div{background:transparent;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--brand);font-weight:900}
.logo-ttt div:nth-child(1)::after{content:"X"} .logo-ttt div:nth-child(5)::after{content:"O"} .logo-ttt div:nth-child(9)::after{content:"X"}
.logo-mole{position:absolute;right:10px;top:10px;width:64px;height:64px;z-index:1}
.logo-mole .hole{width:64px;height:18px;background:linear-gradient(180deg,#071226,#122337);border-radius:50%;position:relative;top:36px;box-shadow:0 6px 12px rgba(0,0,0,.6)}
.logo-mole .mole{width:28px;height:28px;background:linear-gradient(180deg,#f59e0b,#f97316);border-radius:50%;position:absolute;left:18px;bottom:-28px;animation:peek 2s infinite}
@keyframes peek{0%,80%,100%{bottom:-28px}40%,60%{bottom:0}}
.logo-chess{position:absolute;right:14px;top:14px;width:56px;height:56px;z-index:1;display:grid;place-items:center}
.logo-chess::before{content:"";width:24px;height:34px;background:linear-gradient(180deg,#e5e7eb,#9ca3af);border-radius:4px 4px 0 0;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.logo-chess::after{content:"";position:absolute;width:14px;height:10px;background:#374151;bottom:6px;border-radius:2px}
.logo-running{position:absolute;right:14px;top:14px;width:56px;height:56px;z-index:1;overflow:hidden}
.logo-running .block{width:20px;height:20px;background:#4ade80;border-radius:4px;position:absolute;bottom:8px;left:8px;animation:jump 1.2s ease-in-out infinite}
.logo-running .ground{position:absolute;bottom:0;left:0;right:0;height:6px;background:#1e293b;border-radius:2px}
@keyframes jump{0%,100%{bottom:8px}50%{bottom:26px}}
.logo-quiz{position:absolute;right:14px;top:14px;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#1d4ed8,#3b82f6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:20px;z-index:1}
.logo-quiz::after{content:"?"}
.logo-target{position:absolute;right:14px;top:14px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at center,#ef4444 0 8px,#fff 8px 16px,#000 16px 50%);display:grid;place-items:center;z-index:1}
.logo-target::after{content:"";width:2px;height:100%;background:#fff;position:absolute;left:50%;top:0;transform:translateX(-50%)}
.logo-target::before{content:"";width:100%;height:2px;background:#fff;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.bottom-nav{display:none}
@media(max-width:768px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;background:rgba(10,17,32,.85);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12);z-index:50}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d9e6ff;text-decoration:none;font-size:11px}
  .bottom-nav svg{width:20px;height:20px;margin-bottom:2px;fill:#d9e6ff;opacity:.9}
  .wrap{padding-bottom:84px}
}
.game:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand) 70%, white);
  outline-offset: 3px;
  box-shadow: 0 16px 44px rgba(0,0,0,.45);
  transform: translateY(-3px);
}
.skip-link {
  position: absolute; left: 12px; top: -40px;
  background: var(--panel); color: var(--ink);
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  transition: top .2s ease; z-index: 60;
}
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .shine, .fall, .bird, .wing, .maze .player, .logo-target::before, .logo-target::after { animation: none !important; }
  .game { transition: none !important; }
}
.game:hover .badge, .game:focus-visible .badge {
  background: rgba(90,162,255,.25);
  border-color: rgba(90,162,255,.6);
}
.game { will-change: transform; }
.pop-badge {
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .55);
}
.logo-tapnada{
  position:absolute; right:14px; top:14px; width:64px; height:64px; z-index:1;
  display:grid; place-items:center;
}
.logo-tapnada .ring{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.08), transparent),
    conic-gradient(#22c55e 0 90deg, #ef4444 90deg 180deg, #3b82f6 180deg 270deg, #f59e0b 270deg 360deg);
  mask: radial-gradient(circle at center, transparent 34%, white 36%);
  animation: tn-spin 6s linear infinite;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.logo-tapnada .pads{ position:relative; width:44px; height:44px; }
.logo-tapnada .p{
  position:absolute; width:18px; height:18px; border-radius:8px;
  background:#0f1b31; border:1px solid rgba(255,255,255,.15); box-shadow:0 4px 8px rgba(0,0,0,.35);
}
.logo-tapnada .p1{ left:0; top:0; }
.logo-tapnada .p2{ right:0; top:0; }
.logo-tapnada .p3{ left:0; bottom:0; }
.logo-tapnada .p4{ right:0; bottom:0; }
.logo-tapnada .p1{ animation: tn-pulse 1.6s ease-in-out infinite .0s; background:#133a2a }
.logo-tapnada .p2{ animation: tn-pulse 1.6s ease-in-out infinite .2s; background:#3a1c1c }
.logo-tapnada .p3{ animation: tn-pulse 1.6s ease-in-out infinite .4s; background:#142d4f }
.logo-tapnada .p4{ animation: tn-pulse 1.6s ease-in-out infinite .6s; background:#3a2b13 }
@keyframes tn-pulse{
  0%,100%{ box-shadow:0 4px 8px rgba(0,0,0,.35); filter:brightness(1) }
  50%{ box-shadow:0 0 18px rgba(110,193,255,.5), 0 0 44px rgba(110,193,255,.25); filter:brightness(1.15) }
}
@keyframes tn-spin{ to{ transform: rotate(360deg); } }
.logo-tapnada2{
  position:absolute; right:12px; top:12px; width:92px; height:92px; border-radius:10px;
  background:linear-gradient(180deg,#081120,#0c1830); box-shadow:inset 0 8px 18px rgba(0,0,0,.45);
  overflow:hidden;
}
.logo-tapnada2 .lane{ position:absolute; top:6px; bottom:6px; width:18px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-radius:6px }
.logo-tapnada2 .l0{ left:8px } .logo-tapnada2 .l1{ left:28px } .logo-tapnada2 .l2{ left:48px } .logo-tapnada2 .l3{ left:68px }
.logo-tapnada2 .tn2-note{
  position:absolute; left:2px; right:2px; height:10px; border-radius:6px;
  background:linear-gradient(180deg,#9ad1ff,#5aa2ff); box-shadow:0 6px 12px rgba(90,162,255,.35);
  animation: tn2-drop 1.8s linear infinite;
}
.logo-tapnada2 .n1{ top:-16px; animation-delay:.0s }
.logo-tapnada2 .n2{ top:-46px; animation-delay:.6s }
.logo-tapnada2 .n3{ top:-20px; animation-delay:.3s }
.logo-tapnada2 .n4{ top:-28px; animation-delay:.15s }
.logo-tapnada2 .n5{ top:-58px; animation-delay:.9s }
.logo-tapnada2 .n6{ top:-36px; animation-delay:.45s }
@keyframes tn2-drop{ 100%{ transform: translateY(120px) } }
.logo-tapnada2 .hitline{
  position:absolute; left:6px; right:6px; bottom:16px; height:3px; border-radius:2px; background:rgba(255,255,255,.65);
  box-shadow:0 0 8px rgba(110,193,255,.45);
}
.sponsor-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(10,20,40,.7);
  border:1px solid rgba(255,255,255,.2);
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#d9e6ff; z-index:2;
}
.sponsor-badge.on-tile{ top:8px; left:8px }
.sponsor-media{
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  background:
    radial-gradient(600px 260px at -10% -10%, rgba(90,162,255,.15), transparent 60%),
    radial-gradient(600px 260px at 110% -10%, rgba(34,197,94,.12), transparent 60%),
    rgba(255,255,255,.04);
  display:grid; place-items:center;
  color:#cfe4ff; font-weight:800; text-align:center;
  min-height:120px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.sponsor-media span{ opacity:.9 }
.s-close{
  position:absolute; top:10px; right:10px; z-index:3;
  width:28px; height:28px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35); color:#eaf1ff;
  cursor:pointer; font-weight:800; line-height:1;
  display:grid; place-items:center;
}
.s-close:hover{ filter:brightness(1.1) }
.s-close.on-tile{ top:8px; right:8px }
.sponsor.sponsor-1{ margin:12px 0 }
.sponsor.sponsor-1 .sponsor-card{ position:relative }
.sponsor.sponsor-1 .sponsor-media{ min-height:220px }
@media (max-width:640px){
  .sponsor.sponsor-1 .sponsor-media{ min-height:140px }
}
.s2-pop{
  position:fixed; right:16px;
  bottom:calc(76px + env(safe-area-inset-bottom, 0px));
  width:min(320px, 90vw); z-index:80;
  backdrop-filter: blur(6px);
  border-radius:16px; padding:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,16,32,.85);
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.s2-pop[hidden]{ display:none !important; }
.s2-pop .sponsor-media{ min-height:100px }
.sponsor-tile{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08));
}
.sponsor-tile .sponsor-media{
  position:absolute; inset:8px 8px 52px 8px;
}
.sponsor-tile:hover .sponsor-media,
.sponsor:hover .sponsor-media{
  border-color:rgba(90,162,255,.45);
  box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(90,162,255,.18) inset;
}

#s1-media {
  aspect-ratio: 16 / 6;
  min-height:auto;
  overflow:hidden;
}
#s1-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

#s2 .sponsor-media{
  aspect-ratio:16/9;
  min-height:auto;
  overflow:hidden;
}
#s2 .sponsor-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}

.sponsor-tile .sponsor-media{ 
  overflow:hidden; 
}
.sponsor-tile .sponsor-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* ===== Logo: Lari & Tembak ===== */
.logo-run{
  position:absolute; right:14px; top:14px; width:64px; height:64px; z-index:1;
  border-radius:12px;
  background:linear-gradient(180deg,#0b1330,#0f203a);
  box-shadow:inset 0 8px 18px rgba(0,0,0,.45);
  overflow:hidden;
}

/* Ground & track */
.logo-run .ground{
  position:absolute; left:6px; right:6px; bottom:8px; height:6px; border-radius:3px;
  background:#1e293b;
}
.logo-run .track{
  position:absolute; left:6px; right:6px; bottom:20px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.12) 0 20%, transparent 20% 40%, rgba(255,255,255,.12) 40% 60%, transparent 60% 80%, rgba(255,255,255,.12) 80% 100%);
  opacity:.5;
}

/* Player (runner + pistol) */
.logo-run .runner{
  position:absolute; left:10px; bottom:26px; width:20px; height:22px;
  background:#5aa2ff; border-radius:4px;
  box-shadow:0 6px 12px rgba(90,162,255,.35);
  animation:rr-bob .9s ease-in-out infinite;
}
.logo-run .head{
  position:absolute; left:3px; top:-8px; width:12px; height:10px;
  background:#e5e7eb; border-radius:3px;
}
.logo-run .leg1, .logo-run .leg2{
  position:absolute; bottom:-3px; width:6px; height:6px; background:#1f2937; border-radius:2px;
}
.logo-run .leg1{ left:3px;  animation:rr-legs .6s ease-in-out infinite; }
.logo-run .leg2{ right:3px; animation:rr-legs .6s ease-in-out infinite reverse; }

.logo-run .gun{
  position:absolute; right:-10px; top:8px; width:12px; height:4px;
  background:#0f172a; border-radius:2px;
}

/* Muzzle flash & sparkle */
.logo-run .flash{
  position:absolute; right:-18px; top:7px; width:12px; height:6px; border-radius:3px;
  background:radial-gradient(circle at 30% 50%, #ffd166 0 40%, rgba(255,209,102,.0) 60%);
  filter:brightness(1.2);
  animation:rr-flash 1s steps(1) infinite;
}
.logo-run .spark{
  position:absolute; right:-10px; top:4px; width:4px; height:4px; border-radius:50%;
  background:#ffe9a9; box-shadow:0 0 10px #ffd166;
  animation:rr-spark .8s linear infinite;
}

/* Bullet */
.logo-run .bullet{
  position:absolute; left:26px; top:12px; width:10px; height:4px; border-radius:2px;
  background:#ffd166;
  box-shadow:0 0 10px rgba(255,209,102,.6);
  animation:rr-bullet 1s linear infinite;
}

/* Stars / sparks on track */
.logo-run .star{
  position:absolute; width:6px; height:6px; background:#9ad1ff;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity:.85;
}
.logo-run .s1{ right:10px; bottom:36px; animation:rr-twinkle 1.6s ease-in-out infinite .0s; }
.logo-run .s2{ right:26px; bottom:44px; animation:rr-twinkle 1.6s ease-in-out infinite .4s; }
.logo-run .s3{ right:42px; bottom:34px; animation:rr-twinkle 1.6s ease-in-out infinite .8s; }

/* Electric blue rim glow (subtle) */
.logo-run::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(90,162,255,.18), 0 0 22px rgba(90,162,255,.18);
  pointer-events:none;
}

/* Keyframes */
@keyframes rr-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes rr-legs{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(2px) } }
@keyframes rr-bullet{
  0%{ transform:translateX(0); opacity:1 }
  80%{ opacity:1 }
  100%{ transform:translateX(28px); opacity:0 }
}
@keyframes rr-flash{
  0%, 60%, 100%{ opacity:0; transform:scale(.6) }
  10%{ opacity:1; transform:scale(1) }
}
@keyframes rr-spark{
  0%{ opacity:0; transform:translate(0,0) scale(.6) }
  10%{ opacity:1 }
  100%{ opacity:0; transform:translate(8px,-6px) scale(1) }
}
@keyframes rr-twinkle{
  0%,100%{ transform:scale(1); filter:brightness(1) }
  50%{ transform:scale(1.12); filter:brightness(1.2) }
}