:root{
  --night:#03040a; --navy:#000d3b; --orange:#f88401; --cyan:#01bdfb; --blue:#0192f8; --lime:#8cf129; --gold:#ffd23f; --rim:#2b3266;
  --ink:#eef2ff; --ink-dim:rgba(238,242,255,.62); --ink-faint:rgba(238,242,255,.34);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --display:'Fredoka',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --pixel:'Press Start 2P',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--night);color:var(--ink);font-family:var(--body);overflow:hidden;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#stage{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--night)}
/* wider (or taller) than a phone: the field keeps its phone shape between quiet bars (app.js resize) */
body.framed{background:#010207}
body.framed #stage{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 60px rgba(0,0,0,.8)}
#cam{position:absolute;inset:0;will-change:transform}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen}
#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(0,0,0,.55) 100%)}
button{font-family:inherit;color:inherit}

/* ---------- HUD */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(var(--sat) + 10px) calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;opacity:0;transition:opacity .4s}
#hud.on{opacity:1}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:6px}
.hud-right{align-items:flex-end}
.lvl{font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.lvl b{color:var(--ink);font-weight:600}
.lvlname{font:600 15px/1.1 var(--display);color:var(--ink);letter-spacing:.01em}
.score{font:700 26px/1 var(--display);color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;transition:color .3s}
.score.gold{color:var(--gold)}
.score.pulse{animation:pulse .45s ease-out}
@keyframes pulse{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
.shells{display:flex;gap:5px;align-items:center}
.shell{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px rgba(248,132,1,.75);transition:all .3s}
.shell.spent{background:transparent;box-shadow:none;border:1.5px solid rgba(238,242,255,.22)}
.lives{display:none;gap:4px;align-items:center;margin-top:2px}
.lives.on{display:flex}
.life{width:11px;height:11px;background:var(--orange);clip-path:polygon(50% 100%,0 38%,0 22%,14% 6%,32% 2%,50% 16%,68% 2%,86% 6%,100% 22%,100% 38%);transition:all .3s;box-shadow:0 0 8px rgba(248,132,1,.6)}
.life.lost{background:rgba(238,242,255,.18);box-shadow:none}
.life.gain{animation:gain .7s ease-out}
@keyframes gain{0%{transform:scale(1)}40%{transform:scale(1.8)}100%{transform:scale(1)}}
.streak{font:600 11px/1 var(--body);letter-spacing:.12em;color:var(--lime);opacity:0;transition:opacity .3s;text-transform:uppercase}
.streak.on{opacity:1}
.shots{font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);display:none;align-items:center;gap:8px}
.shots.on{display:flex}
.shots b{font:700 18px/1 var(--display);color:var(--ink);letter-spacing:0}
.shots .par{color:var(--ink-faint)}
#mute{position:absolute;right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 14px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(238,242,255,.14);background:rgba(3,4,10,.45);color:var(--ink-dim);display:grid;place-items:center;backdrop-filter:blur(6px);cursor:pointer;z-index:5}
#mute svg{width:18px;height:18px}
#mute .off{display:none}#mute.muted .on{display:none}#mute.muted .off{display:block}
#stage.menu #mute{bottom:auto;top:calc(var(--sat) + 12px)}
#hint{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 26px);text-align:center;font:500 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);pointer-events:none;opacity:0;transition:opacity .6s;padding:0 60px}
#hint.on{opacity:1}
#wind{position:absolute;left:50%;top:calc(var(--sat) + 64px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:500 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);opacity:0;transition:opacity .4s;pointer-events:none}
#wind.on{opacity:1}
#wind svg{width:22px;height:12px;color:var(--cyan)}
#wind .bars{display:flex;gap:3px}
#wind .bars i{width:4px;height:10px;border-radius:2px;background:rgba(238,242,255,.16);transition:background .3s}
#wind .bars i.on{background:var(--cyan);box-shadow:0 0 6px rgba(1,189,251,.6)}
#brand{position:absolute;left:calc(var(--sal) + 16px);bottom:calc(var(--sab) + 18px);width:54px;opacity:0;pointer-events:none;transition:opacity .4s}
#brand.on{opacity:.65}

/* ---------- floating words */
#words{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font:700 22px/1 var(--display);color:var(--ink);text-shadow:0 2px 14px rgba(0,0,0,.6);animation:pop 1s cubic-bezier(.2,.7,.2,1) forwards;white-space:nowrap}
.pop small{display:block;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-top:5px;text-align:center}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}70%{opacity:1;transform:translate(-50%,-70%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.pop.gold{color:var(--gold)} .pop.cyan{color:var(--cyan)} .pop.lime{color:var(--lime)} .pop.dim{color:var(--ink-dim);font-size:16px} .pop.red{color:#ff6a5a}
.big{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:700 54px/1 var(--display);letter-spacing:.04em;color:var(--gold);text-shadow:0 0 30px rgba(255,210,63,.7),0 4px 24px rgba(0,0,0,.6);animation:big 1.5s cubic-bezier(.2,.9,.25,1.1) forwards;white-space:nowrap}
.big.cyan{color:var(--cyan);text-shadow:0 0 30px rgba(1,189,251,.6),0 4px 24px rgba(0,0,0,.6)} .big.lime{color:var(--lime);text-shadow:0 0 30px rgba(140,241,41,.6),0 4px 24px rgba(0,0,0,.6)} .big.sm{font-size:40px} .big.red{color:#ff6a5a;text-shadow:0 0 30px rgba(255,106,90,.55),0 4px 24px rgba(0,0,0,.6)}
.big small{display:block;text-align:center;font:600 12px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-top:10px;text-shadow:none;opacity:.9}
@keyframes big{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(.96)}24%{transform:translate(-50%,-50%) scale(1.02)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.04)}}
.toast{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);text-align:center;animation:toast 2.2s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
.toast .k{font:500 11px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.toast .n{font:700 34px/1.1 var(--display);color:var(--ink);margin-top:8px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.toast.hold{animation:toastHold .35s cubic-bezier(.2,.8,.2,1) forwards;background:rgba(6,10,26,.72);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.toast.hold.out{animation:toastOut .25s ease-in forwards}
.toast .tap{font:600 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-top:14px;animation:tapPulse 1.6s ease-in-out infinite}
@keyframes toastHold{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-54%)}}
@keyframes tapPulse{50%{opacity:.45}}
.toast .s{font:500 12px/1.3 var(--body);color:var(--ink-dim);margin-top:8px;letter-spacing:.02em;white-space:normal;max-width:300px;margin-left:auto;margin-right:auto}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-40%)}12%{opacity:1;transform:translate(-50%,-50%)}80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-56%)}}

/* ---------- screens */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--sat) + 24px) 20px calc(var(--sab) + 24px);text-align:center;opacity:0;pointer-events:none;transition:opacity .45s ease}
.screen.on{opacity:1;pointer-events:auto}
#title{background:radial-gradient(ellipse at 50% 30%,rgba(0,13,59,0) 0%,rgba(3,4,10,.35) 70%);padding-bottom:calc(var(--sab) + 14vh)}
#title .eyebrow{font:400 9px/1 var(--pixel);color:var(--lime);letter-spacing:.08em;margin-bottom:16px}
#title .logo{width:min(66vw,290px);display:inline-block;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
#title h1{font:700 clamp(54px,17vw,84px)/1 var(--display);letter-spacing:.02em;margin-top:18px;background:linear-gradient(180deg,#fff 0%,#dbe9ff 55%,#8fd3ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 26px rgba(1,189,251,.35))}
#title p{font:500 13px/1.5 var(--body);letter-spacing:.06em;color:var(--ink-dim);margin-top:10px;max-width:300px}
.btn{appearance:none;border:0;cursor:pointer;font:700 18px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:18px 44px;border-radius:999px;color:#1a0a00;background:linear-gradient(180deg,#ffb04a,var(--orange) 60%,#e06f00);box-shadow:0 10px 30px rgba(248,132,1,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s,box-shadow .12s}
.btn:active{transform:scale(.96);box-shadow:0 4px 14px rgba(248,132,1,.3)}
.btn.ghost{background:rgba(238,242,255,.08);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(238,242,255,.16)}
.btn.ghost:active{box-shadow:inset 0 0 0 1px rgba(238,242,255,.3)}
.btn.cyan{background:linear-gradient(180deg,#5fd8ff,var(--cyan) 60%,#0192f8);color:#001a2e;box-shadow:0 10px 30px rgba(1,189,251,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.modes{display:flex;flex-direction:column;gap:12px;margin-top:30px;width:min(100%,300px)}
.modes .btn{width:100%;padding:18px 20px}
.modes .btn small{display:block;font:500 11px/1 var(--body);letter-spacing:.1em;margin-top:6px;opacity:.75;text-transform:none}
.best{margin-top:18px;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.best b{color:var(--orange);font-weight:600}
.credit{position:absolute;bottom:calc(var(--sab) + 16px);left:0;right:0;font:400 11px/1 var(--body);letter-spacing:.08em;color:var(--ink-faint)}

/* practice: world + level select */
#practice{justify-content:flex-start;padding-top:calc(var(--sat) + 64px);background:rgba(3,4,10,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sh{font:500 11px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.sh.gold{color:var(--gold)}
#practice h2{font:700 30px/1.1 var(--display);margin-top:10px}
#practice p.sub{font-size:13px;color:var(--ink-dim);margin-top:8px;max-width:300px}
.worlds{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,360px);margin-top:22px}
.world{appearance:none;border:1px solid rgba(238,242,255,.12);background:rgba(0,13,59,.5);border-radius:16px;padding:14px 12px 12px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,transform .12s}
.world:active{transform:scale(.97)}
.world.sel{border-color:var(--orange)}
.world .wn{font:500 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.world .wt{font:600 16px/1.1 var(--display);margin-top:6px}
.world .wr{font:400 11px/1.4 var(--body);color:var(--ink-dim);margin-top:4px}
.world .ws{display:flex;gap:3px;margin-top:10px}
.world .ws i{font-style:normal;font-size:10px;color:var(--gold);opacity:.28;letter-spacing:-1px}
.world .ws i.on{opacity:1}
.levels{display:flex;gap:8px;margin-top:18px;width:min(100%,360px);justify-content:center}
.lv{appearance:none;flex:1;max-width:66px;border:1px solid rgba(238,242,255,.12);background:rgba(0,13,59,.5);border-radius:14px;padding:12px 4px 10px;cursor:pointer;transition:border-color .2s,transform .12s}
.lv:active{transform:scale(.95)}
.lv.sel{border-color:var(--orange);background:rgba(248,132,1,.14)}
.lv.locked{opacity:.4}
.lv b{display:block;font:700 20px/1 var(--display)}
.lv .st{display:block;font-size:9px;color:var(--gold);margin-top:6px;letter-spacing:-1px}
.lv .st i{font-style:normal;opacity:.28}.lv .st i.on{opacity:1}
#practice .actions{width:min(100%,360px);margin-top:22px}
.actions{display:flex;gap:10px;margin-top:20px}
.actions .btn{flex:1;padding:16px 10px;font-size:16px}

/* result */
#result{justify-content:flex-end;padding-bottom:calc(var(--sab) + 14px)}
.card{width:min(100%,360px);border-radius:26px;padding:18px 20px 14px;background:linear-gradient(180deg,rgba(0,13,59,.82),rgba(3,4,10,.9));box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(40px);transition:transform .6s cubic-bezier(.2,.8,.2,1);text-align:center}
#result.on .card{transform:translateY(0)}
.card .logo{width:110px;display:inline-block;opacity:.95}
.card .k{font:500 11px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--lime);margin-top:14px}
.card .k.gold{color:var(--gold)}
.card .big-score{font:700 60px/1 var(--display);color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.card .big-score.gold{color:var(--gold);text-shadow:0 0 30px rgba(255,210,63,.45)}
.card .sub{font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-top:8px}
.card .sub b{color:var(--gold);letter-spacing:0}
.stats{display:flex;justify-content:center;gap:22px;margin-top:12px}
.stat{font:500 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.stat b{display:block;font:700 20px/1 var(--display);color:var(--ink);margin-bottom:5px;letter-spacing:0}
.board{margin-top:14px;border-radius:14px;border:1px solid rgba(238,242,255,.1);background:rgba(3,4,10,.4);padding:10px 12px 10px;text-align:left;display:none}
.board.on{display:block}
.board .bh{display:flex;justify-content:space-between;align-items:center;gap:8px;font:500 9px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.board .bh span:last-child{font:400 6px/1 var(--pixel);color:var(--lime);letter-spacing:.02em}
.board .row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0 0;font:500 13px/1.2 var(--body);color:var(--ink-dim)}
.board .row b{font:700 16px/1 var(--display);color:var(--ink);letter-spacing:0}
.board .row.you b{color:var(--gold)}
.board .row .pt{font:500 11px/1 var(--body);color:var(--cyan);letter-spacing:.04em}
.board .row.wl{border-top:1px dashed rgba(238,242,255,.14);margin-top:6px;padding-top:8px}
.board .row.wl span:first-child{color:var(--lime)}
#copybox{display:none;margin-top:12px;width:100%;height:84px;border-radius:12px;border:1px solid rgba(238,242,255,.14);background:rgba(3,4,10,.6);color:var(--ink);font:500 12px/1.5 var(--body);padding:10px;resize:none;user-select:text;-webkit-user-select:text}
#copybox.on{display:block}
#copied{position:absolute;left:50%;bottom:calc(var(--sab) + 30px);transform:translate(-50%,10px);font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#1a0a00;background:var(--lime);padding:10px 16px;border-radius:999px;opacity:0;transition:all .3s;pointer-events:none;z-index:6}
#copied.on{opacity:1;transform:translate(-50%,0)}
.logo svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion: reduce){ .pop,.big,.toast{animation-duration:.01s} .card{transition:none} }
@media (max-height:700px){ #title h1{font-size:54px} #title .logo{width:200px} .modes{margin-top:20px} .card .big-score{font-size:50px} .card .logo{width:90px} }

/* ---------- leaderboard (real board: server/skyshot.js) */
.linkbtn{appearance:none;border:0;background:none;cursor:pointer;font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);padding:10px 6px;margin-top:6px}
.board .bh span:last-child.ok{color:var(--lime)} .board .bh span:last-child.warn{color:var(--orange)}
.bnote{font:400 12px/1.45 var(--body);color:var(--ink-dim);margin-top:10px;text-align:left}
.bnote b{color:var(--ink);font-weight:600}
.bact{display:flex;gap:8px;margin-top:10px}
.bact:empty{display:none}
.bact .btn{flex:1;padding:12px 8px;font-size:13px}
#lb{justify-content:flex-start;padding-top:calc(var(--sat) + 56px);background:rgba(3,4,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#lb h2{font:700 30px/1.1 var(--display);margin-top:10px}
#lb p.sub{font-size:13px;color:var(--ink-dim);margin-top:8px;max-width:320px}
.lbme{width:min(100%,360px);margin-top:14px}
.lbme:empty{display:none}
.lbcard{border-radius:14px;border:1px solid rgba(238,242,255,.1);background:rgba(0,13,59,.5);padding:10px 12px;text-align:left;font:500 12px/1.45 var(--body);color:var(--ink-dim)}
.lbcard b{color:var(--ink)}
.lbcard .gold{color:var(--gold)}
.lbname{display:flex;gap:8px;margin-top:8px}
/* Post on X (skyshot/js/xpost.js) */
.xv{font-style:normal;color:var(--lime);margin-left:5px;font-size:.9em}
.xpanel{display:grid;gap:8px;margin-top:10px;text-align:left;font:500 12px/1.45 var(--body);color:var(--ink-dim)}
.xpanel p{margin:0}
.xpanel b{color:var(--ink)}
.xpanel .xok{color:var(--lime,#8cf129)}
.xpanel .xwarn{color:var(--gold)}
.xrow{display:flex}
.xrow .btn{flex:1;padding:12px 8px;font-size:13px}
.xform{display:flex;gap:8px}
.xform input{flex:1;min-width:0;font:500 16px/1.2 var(--body);color:var(--ink);background:rgba(3,4,10,.6);border:1px solid rgba(238,242,255,.18);border-radius:12px;padding:10px 12px;user-select:text;-webkit-user-select:text}
.xform .btn{padding:10px 14px;font-size:13px}
.xmsg.err{color:#ff8a8a}
.lbname input{flex:1;min-width:0}
.lbname .btn{padding:10px 14px;font-size:13px}
.lblist{list-style:none;width:min(100%,360px);margin-top:12px;flex:1;min-height:0;overflow-y:auto;border-radius:14px;border:1px solid rgba(238,242,255,.1);background:rgba(3,4,10,.4);padding:4px 12px;text-align:left;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.lblist li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid rgba(238,242,255,.06);font:500 13px/1.2 var(--body);color:var(--ink-dim)}
.lblist li:last-child{border-bottom:0}
.lblist .rk{width:34px;font:700 14px/1 var(--display);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.lblist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.lblist .sc{font:700 15px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.lblist .wl{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 6px rgba(140,241,41,.6);flex:none;align-self:center}
.lblist .wl.no{background:transparent;box-shadow:none;border:1px solid rgba(238,242,255,.18)}
.lblist li.you .nm,.lblist li.you .sc{color:var(--gold)}
.lblist li.gap{justify-content:center;color:var(--ink-faint)}
.lblist .lbempty{justify-content:center;color:var(--ink-faint)}
#lb .actions{width:min(100%,360px);margin-bottom:4px}
/* sign-in sheet */
#login{background:rgba(3,4,10,.6);overflow-y:auto;justify-content:flex-start;touch-action:pan-y}
.lcard{margin:auto 0;transform:none;text-align:left}
.lcard .k{text-align:center;margin-top:2px}
.lh{font:600 20px/1.2 var(--display);margin-top:8px;text-align:center}
.lsub{font:400 13px/1.45 var(--body);color:var(--ink-dim);margin-top:8px}
.lfine{font:400 11px/1.4 var(--body);color:var(--ink-faint);margin-top:6px;text-align:center}
.lfull{width:100%;margin-top:12px;padding:14px 12px;font-size:15px}
.lform{display:flex;flex-direction:column;margin-top:4px}
.lform label{font:500 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px}
.lcard input,.lbname input{margin-top:8px;font:500 16px/1.2 var(--body);color:var(--ink);background:rgba(3,4,10,.6);border:1px solid rgba(238,242,255,.18);border-radius:12px;padding:12px;user-select:text;-webkit-user-select:text}
.or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font:500 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(238,242,255,.12)}
.lmsg{font:500 12px/1.45 var(--body);color:var(--lime);margin-top:10px}
.lmsg.err{color:#ff8a7a}
#ldev details{margin-top:10px;font:500 12px/1.4 var(--body);color:var(--ink-faint)}
#ldev .btn{width:100%;margin-top:8px;padding:10px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}
[hidden]{display:none!important}

/* leaderboard rules (index.html #rules) */
.links{display:flex;gap:18px;justify-content:center}
#rules{justify-content:flex-start;padding-top:calc(var(--sat) + 56px);background:rgba(3,4,10,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#rules h2{font:700 28px/1.1 var(--display);margin-top:10px;text-wrap:balance}
.rules{width:min(100%,360px);margin-top:14px;flex:1;min-height:0;overflow-y:auto;text-align:left;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:2px 4px 8px;font:400 13px/1.5 var(--body);color:var(--ink-dim);user-select:text;-webkit-user-select:text}
.rules .rlead{font-size:14px;color:var(--ink)}
.rules h3{font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:18px 0 8px}
.rules ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.rules li{position:relative;padding-left:14px}
.rules li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.rules b{color:var(--ink);font-weight:600}
.rules .rfine{margin-top:18px;font-size:12px;color:var(--ink-faint)}
.rules a{color:var(--cyan)}
#lbrules{margin-top:10px}