@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;background:#080915;color:#fafbff;font-synthesis:none;--accent:#bd91ff;--lime:#b9fe58;--muted:#8f91ab}*{box-sizing:border-box}html{min-width:320px;overflow-x:clip}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 60% 35% at 50% -15%,#33255d88,transparent),#080915;overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #c4ff76;outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}.noise{pointer-events:none;position:fixed;inset:0;opacity:.04;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.ambient{position:fixed;z-index:0;pointer-events:none;filter:blur(110px);border-radius:50%;opacity:.16}.ambient-a{height:460px;width:460px;background:#6d2bdf;top:270px;left:-300px}.ambient-b{height:350px;width:350px;background:#116ba5;top:640px;right:-260px}.shell{max-width:1470px;padding:0 44px;margin:0 auto;position:relative}.topbar{height:107px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242338;gap:24px}.brand{text-decoration:none;color:#fff;display:flex;align-items:center;gap:13px}.brand-mark{width:38px;height:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;transform:rotate(-16deg)}.brand-mark span{border-radius:3px;background:#b19aff;box-shadow:0 0 18px #ae82ff55}.brand-mark span:nth-child(2){background:#cdf95f}.brand-mark span:nth-child(3){background:#4ce5d7}.brand-mark span:nth-child(4){background:#8f5afe}.brand-name{font:900 30px/.7 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.6px}.brand-name>span{color:var(--lime)}.brand-name small{font:700 8px/1.3 'DM Sans',sans-serif;letter-spacing:3px;color:#9894b8;display:block;margin-top:10px}.top-right{display:flex;align-items:center;gap:20px}.online-chip{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#b2b0ca;white-space:nowrap}.live-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#b9fe58;box-shadow:0 0 12px #9be358;margin-right:6px}.player-card{display:flex;align-items:center;gap:10px;border:1px solid #3c3857;border-radius:100px;padding:5px 6px;background:#181728;min-height:51px}.portrait{border-radius:50%;background:linear-gradient(120deg,#6c51bd,#6b3290);width:38px;height:38px;display:grid;place-items:center;overflow:hidden}.portrait img{width:100%;height:100%;object-fit:cover}.portrait img[hidden]{display:none}.portrait>span{font-size:22px;color:#dce4ff}.player-meta{display:flex;flex-direction:column;min-width:84px;max-width:140px}.player-meta strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-meta small{font-size:10px;color:#9997b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.signin-btn{border:0;border-radius:25px;background:#c4ff69;color:#13161f;padding:10px 13px;font-size:10px;font-weight:900;margin-left:3px;white-space:nowrap}.signin-btn[hidden]{display:none}.intro{text-align:center;padding:49px 0 42px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;font-size:10px;letter-spacing:3px;color:#bab5e3;font-weight:800}.eyebrow-line{width:30px;height:1px;background:#77709b}.intro h1{margin:16px 0 15px;font:900 clamp(44px,5.9vw,83px)/.94 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.9px;text-transform:uppercase}.intro h1 em{font-style:normal;color:#b895ff;text-shadow:0 0 36px #8559db8a}.intro h1 span{color:#b8fa64}.intro p{margin:0 auto;color:#9ea0b7;max-width:530px;line-height:1.7;font-size:13px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.score-row{display:grid;grid-template-columns:1.2fr .8fr 1.1fr 1.25fr;gap:1px;padding:1px;background:#29283d;border:1px solid #28273d;border-radius:14px;overflow:hidden;margin-bottom:13px}.stat{background:#131321;padding:16px 22px;min-height:80px;display:flex;flex-direction:column;justify-content:center;gap:7px}.stat-label{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#8887a9}.stat-glyph{color:#b9fa68}.stat strong{font:800 27px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px}.stat .stat-sub{font:500 14px 'Barlow Condensed',sans-serif;color:#77758c}.stat .lives{font:700 18px/1 sans-serif;color:#f875ae;letter-spacing:4px;white-space:nowrap}.lives .lost{color:#5c3a53}.stat-best strong{color:#c1fb73}.board-frame{border-radius:16px;border:1px solid #34304b;background:#11111f;box-shadow:0 18px 85px #0006;overflow:hidden}.board-top{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#171625;border-bottom:1px solid #2d2a40;font-size:10px;letter-spacing:1.5px;font-weight:800;color:#ebe6ff}.tiny-orbit{color:#bc95fc;font-size:15px;padding-right:4px}.board-dim{color:#676980}.signal{color:#aaaac1;font-size:9px}.signal-dot{width:7px;height:7px;background:#a4a5b5;border-radius:50%;display:inline-block;margin-right:7px}.signal-dot.listening{background:#b9fe58;box-shadow:0 0 10px #b9fe58}.signal-dot.playing{background:#b48bff;box-shadow:0 0 10px #b48bff}.play-area{min-height:500px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at center,#302054a6 0%,#171325 42%,#10101e 74%),linear-gradient(90deg,transparent 0%,#4b3c7740 50%,transparent 100%);isolation:isolate;overflow:hidden}.play-area:before{content:'';position:absolute;inset:0;opacity:.19;background-image:linear-gradient(#61508833 1px,transparent 1px),linear-gradient(90deg,#61508833 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle,#000,transparent 68%)}.board-orbit{position:absolute;border:1px solid #7d6ba628;border-radius:50%;width:485px;height:485px}.board-orbit-b{width:540px;height:540px;opacity:.45}.pads{position:relative;z-index:2;width:min(408px,84%);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;transform:rotate(-1deg)}.pad{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid hsla(var(--h),83%,72%,.32);background:linear-gradient(145deg,hsla(var(--h),83%,70%,.14),hsla(var(--h),80%,50%,.08) 40%,#131126);border-radius:15px;color:hsla(var(--h),90%,85%,.72);font:800 15px 'Barlow Condensed',sans-serif;box-shadow:inset 0 0 0 1px #fff1,inset 0 -15px 24px #0002,0 6px 24px #0003;transition:background .12s,box-shadow .12s,transform .12s;touch-action:manipulation}.pad:before{content:'';position:absolute;inset:10px;border-radius:9px;border:1px solid hsla(var(--h),80%,72%,.13)}.pad span{position:absolute;top:14px;left:16px;z-index:2;letter-spacing:1px}.pad i{height:26px;width:26px;border-radius:50%;border:2px solid hsla(var(--h),80%,77%,.4);box-shadow:0 0 30px hsla(var(--h),80%,60%,.2);transform:rotate(45deg)}.pad.active,.pad:active:not(:disabled){border-color:hsla(var(--h),100%,85%,.95);background:linear-gradient(145deg,hsla(var(--h),100%,65%,.92),hsla(var(--h),100%,53%,.65));box-shadow:0 0 40px hsla(var(--h),100%,60%,.53),inset 0 0 28px #fff5;transform:scale(1.025);color:#fff}.pad.active i{border-color:white;box-shadow:0 0 25px white}.pad:disabled{cursor:default;opacity:1}.pads.is-watching .pad{cursor:default}.board-overlay{position:absolute;z-index:5;inset:0;background:#0c0b1eda;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}.board-overlay[hidden]{display:none}.overlay-kicker{color:#d5beff;font-size:11px;font-weight:800;letter-spacing:3px}.overlay-title{margin:16px 0;font:900 clamp(51px,5vw,72px)/.89 'Barlow Condensed',Impact,sans-serif}.overlay-copy{font-size:13px;color:#b1b0cc;max-width:300px;line-height:1.6;margin-bottom:24px}.btn{border-radius:9px;padding:14px 18px;font-size:11px;font-weight:900;letter-spacing:1px;border:1px solid #353047;color:#eaeaf5;background:#1c1b2d;min-height:45px;transition:filter .15s,transform .15s}.btn:hover:not(:disabled){filter:brightness(1.17);transform:translateY(-1px)}.btn.primary{background:#c7fb70;border-color:#c7fb70;color:#101513;box-shadow:0 7px 27px #bbfa4c26}.btn.primary span{margin-left:25px;font-size:16px;vertical-align:middle}.btn.subtle small{color:#a8a2c8;margin-left:2px}.board-bottom{background:#151420;border-top:1px solid #2b293b;padding:18px 22px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}.progress-caption{display:flex;justify-content:space-between;margin-bottom:9px;font-size:9px;letter-spacing:1.4px;font-weight:700;color:#8586a3}.progress-caption b{color:#bab9d3}.progress-track{height:4px;border-radius:20px;background:#343047;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,#8c78fe,#bbfe75);border-radius:20px;transition:width .2s}.board-status{font-size:11px;color:#b1afca;min-width:140px;text-align:right}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px}.controls .btn.primary{padding:14px 22px}.controls .btn.primary span{margin-left:35px}.keyboard-note{font-size:9px;color:#8d8ca7;letter-spacing:1px;font-weight:700;margin-left:auto;white-space:nowrap}.keyboard-note b{color:#d2c0ff}.sidebar{display:flex;flex-direction:column;gap:15px}.panel{border:1px solid #302f45;background:#161524;border-radius:14px;padding:23px 22px}.panel-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid #323047}.panel-heading{font-size:11px;letter-spacing:2px;font-weight:900}.panel-icon{color:#bb9dff;font-size:20px}.steps{list-style:none;padding:0;margin:21px 0 13px;display:grid;gap:20px}.steps li{display:flex;gap:12px}.step-num{font:700 25px/1 'Barlow Condensed',sans-serif;color:#aa8de7}.steps strong{font-size:10px;letter-spacing:1.1px}.steps p{font-size:11px;line-height:1.6;color:#9c9cb1;margin:6px 0 0}.tip{background:#222237;border:1px solid #3b3954;color:#d9ecb8;padding:13px;border-radius:9px;display:flex;gap:11px;font-size:18px;margin-top:13px}.tip span{font-size:10px;line-height:1.5;color:#aaa9be}.tip strong{color:#d6edb6;letter-spacing:1px;font-size:10px}.leaderboard{min-height:248px}.board-labels{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:800;color:#77778d;padding:17px 0 9px}.leaders{list-style:none;padding:0;margin:0;min-height:90px;display:grid;align-content:start}.leaders li{padding:10px 0;border-top:1px solid #272638;display:flex;gap:7px;align-items:center;font-size:11px}.leaders li.player-own{color:#ccfa9d}.leaders .board-empty{color:#8b89a1;font-size:11px;line-height:1.55;border:0}.rank-number{color:#a693f4;min-width:28px}.rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-points{font-weight:800;font-variant-numeric:tabular-nums}.refresh{margin-top:7px;color:#bca0f6;background:transparent;border:none;font-size:10px;font-weight:800;letter-spacing:1.2px;padding:8px 0}.refresh:hover{color:#e4d8ff}.sidebar-foot{display:flex;justify-content:space-between;padding:5px 6px;color:#85859b;font-size:9px;letter-spacing:1px}.sidebar-foot span{color:#64647b}footer{display:flex;justify-content:space-between;gap:18px;border-top:1px solid #252437;margin-top:55px;padding:24px 0 31px;color:#6d6d87;font-size:9px;letter-spacing:1.4px;font-weight:700}.foot-divider{color:#a18aea;margin:0 5px}
@media(max-width:1160px){.game-layout{grid-template-columns:minmax(0,1fr) 285px}.panel{padding:18px 15px}.shell{padding:0 24px}.online-chip{display:none}.keyboard-note{display:none}.play-area{min-height:460px}}
@media(max-width:900px){.game-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.sidebar-foot{grid-column:1/-1}.intro{padding-top:40px}.play-area{min-height:510px}.keyboard-note{display:block}}@media(max-width:600px){.shell{padding:0 14px}.topbar{height:78px}.brand-mark{height:30px;width:30px;gap:3px}.brand-name{font-size:24px}.brand-name small{font-size:6px;letter-spacing:2px}.player-card{padding:4px 5px;gap:6px;min-height:42px}.portrait{width:30px;height:30px}.player-meta{min-width:0;max-width:91px}.player-meta strong{font-size:10px}.player-meta small{font-size:9px}.signin-btn{font-size:9px;padding:8px 9px}.intro{padding:41px 0 29px}.intro h1{font-size:clamp(42px,11vw,64px)}.intro p{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1.6px;gap:8px}.eyebrow-line{width:17px}.score-row{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:11px 9px;min-height:70px;gap:8px}.stat-label{font-size:8px;letter-spacing:.5px}.stat strong{font-size:24px}.stat .lives{font-size:12px;letter-spacing:0}.board-top{padding:0 12px;letter-spacing:.6px}.board-dim{display:none}.signal{font-size:8px}.play-area{min-height:374px}.pads{width:min(345px,90%);gap:7px}.pad{border-radius:11px}.pad:before{inset:6px}.pad span{top:8px;left:9px;font-size:11px}.pad i{height:20px;width:20px}.board-bottom{grid-template-columns:1fr;padding:14px;gap:11px}.board-status{text-align:left}.controls .btn{flex:1 1 auto;font-size:9px;padding:12px}.controls .btn.primary span{margin-left:9px}.keyboard-note{width:100%;text-align:center;margin:7px 0 0}.sidebar{grid-template-columns:1fr}.sidebar-foot{grid-column:auto}.panel{padding:18px 20px}footer{flex-wrap:wrap;margin-top:28px;line-height:1.4}}
@media(max-width:400px){
  .topbar{height:auto;min-height:78px;flex-wrap:wrap;gap:14px;padding:16px 0}
  .top-right,.player-card{width:100%}
  .player-meta{flex:1;max-width:none}
  .signin-btn{min-height:36px;padding:9px 13px}
  .score-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:12px 14px}
}
.share-panel{margin-top:18px;padding:18px;border:1px solid #49415c;border-radius:14px;background:#171625;min-width:0}
.personal-progress{min-width:0}
.personal-progress h2{margin:0}
.personal-progress label{display:block;margin:18px 0 8px;font-size:11px;color:#c8c3da}
.personal-progress select{display:block;width:100%;min-height:44px;padding:10px;border:1px solid #8876a5;border-radius:8px;background:#222033;color:#fafbff;font:12px 'DM Sans',Arial,sans-serif}
.personal-progress select:focus-visible,.achievements summary:focus-visible{outline:3px solid #c4ff76;outline-offset:3px}
.personal-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;margin:20px 0}
.personal-stats dt{font-size:9px;line-height:1.5;color:#b1b0cc;letter-spacing:.6px}
.personal-stats dd{margin:4px 0 0;font:800 26px 'Barlow Condensed',Impact,sans-serif;color:#fafbff;overflow-wrap:anywhere}
.personal-progress p{font-size:11px;line-height:1.6;color:#b1b0cc}
.achievements{border-top:1px solid #49415c;margin-top:18px;padding-top:16px}
.achievements summary{cursor:pointer;font-size:10px;letter-spacing:.6px;font-weight:800;min-height:36px;line-height:2}
.achievements summary span{margin-left:6px;color:#c7fb70}
.achievements ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.achievements li{padding:12px;border:1px solid #49415c;border-radius:8px;background:#10101e}
.achievements li strong,.achievements li span,.achievements li small{display:block}
.achievements li strong{font-size:12px;color:#d9d4e6}
.achievements li span{font-size:11px;line-height:1.5;color:#b1b0cc;margin:5px 0}
.achievements li small{font-size:10px;color:#b1b0cc}
.achievements li.unlocked{border-color:#6b8543;background:#1d271c}
.achievements li.unlocked small{color:#c7fb70}
.achievement-notice{border:1px solid #6b8543;border-radius:10px;background:#1d271c;color:#d8f6ad;padding:14px;font-size:12px;line-height:1.6;margin:16px 0 0}
.achievement-notice[hidden]{display:none}
.play-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border:1px solid #49415c;border-radius:12px;background:#171625}
.speed-option{display:flex;align-items:center;flex-wrap:wrap;gap:10px;flex:1}
.speed-option label{font-size:10px;font-weight:800;letter-spacing:1px;color:#d8cfec}
.speed-option select{min-height:44px;padding:8px 12px;border:1px solid #8876a5;border-radius:8px;background:#222033;color:#fafbff;font:inherit;font-size:13px;max-width:100%}
.speed-option select:disabled{opacity:.65}
.speed-option select:focus-visible{outline:3px solid #c4ff76;outline-offset:3px}
.play-options p{flex-basis:100%;margin:0;color:#b1b0cc;font-size:11px;line-height:1.6}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{transition:none!important;animation:none!important}
.reduce-motion .pad.active,.reduce-motion .pad:active:not(:disabled),.reduce-motion .btn:hover:not(:disabled){transform:none}
.share-panel[hidden]{display:none}
.share-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.share-heading h2{font-size:11px;letter-spacing:1.5px;margin:0;color:#d8f6ad}
.share-panel label{display:block;font-size:11px;color:#b1b0cc;margin-bottom:7px}
.share-panel textarea{display:block;width:100%;min-height:130px;padding:12px;border:1px solid #49415c;border-radius:8px;background:#10101e;color:#eaeaf5;font:12px/1.7 'DM Sans',Arial,sans-serif;resize:vertical;overflow-wrap:anywhere}
.share-panel textarea:focus-visible{outline:3px solid #c4ff76;outline-offset:3px}
.share-panel p{font-size:11px;line-height:1.6;color:#b1b0cc;margin:10px 0 0}
.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.mode-button{border:1px solid #49415c;border-radius:10px;background:#171625;color:#b1b0cc;padding:14px 16px;text-align:left;font-size:11px;font-weight:800;letter-spacing:1px;min-height:64px}
.mode-button span{display:block;margin-top:6px;font-size:10px;font-weight:500;letter-spacing:0;line-height:1.4}
.mode-button[aria-pressed="true"]{border-color:var(--accent);background:#292039;color:#f1e8ff;box-shadow:inset 0 2px var(--accent)}
.daily-panel{border:1px solid #48405c;background:#1b182b;border-radius:12px;padding:16px 18px;margin-bottom:14px}
.daily-panel[hidden]{display:none}
.daily-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:1px;color:#dbc4ff}
.daily-heading>span{font-size:9px;color:#b1b0cc}
.daily-panel p{font-size:12px;line-height:1.6;margin:10px 0 0;color:#b1b0cc}
.daily-panel .daily-state{color:#d8f6ad;font-weight:600}
.daily-panel .daily-note{font-size:11px;color:#aaa5bc}
.run-mode,.leaderboard-mode{font-size:9px;letter-spacing:1.2px;color:#b1b0cc;line-height:1.5;margin:12px 0}
.board-overlay{overflow-y:auto;justify-content:safe center}
@media(max-width:600px){.mode-button{padding:12px 10px;font-size:10px}.mode-button span{font-size:9px}.daily-panel{padding:14px}}
.pad.wrong{border:3px solid #ff8eb8;background:#542039;box-shadow:0 0 24px #ff689744}
.pad.expected{border:3px dashed #c7fb70;background:#263820;box-shadow:0 0 24px #c7fb7044}
.pad.wrong i,.pad.expected i{visibility:hidden}
.pad.wrong::after,.pad.expected::after{font:800 32px/1 'DM Sans',sans-serif;color:#fff}
.pad.wrong::after{content:'×'}
.pad.expected::after{content:'✓';color:#c7fb70}
.board-bottom{grid-template-columns:minmax(110px,1fr) minmax(0,1fr)}
.board-status{min-width:0;line-height:1.5;overflow-wrap:anywhere}
.run-results{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 16px;width:min(100%,300px);padding:13px 0;border-block:1px solid #49415c}
.run-results[hidden]{display:none}
.run-results dt{font-size:9px;font-weight:800;letter-spacing:1px;color:#b1b0cc}
.run-results dd{font:800 30px/1.2 'Barlow Condensed',Impact,sans-serif;margin:4px 0 0;color:#fafbff}
.has-results .overlay-title{font-size:clamp(40px,5vw,60px);margin:12px 0}
.has-results .overlay-copy{margin-bottom:16px;font-size:12px}
.is-record .overlay-kicker,.is-record .overlay-title{color:var(--lime)}
.is-record .overlay-title{text-shadow:0 0 30px #b9fe5833}
@media(max-width:600px){.board-bottom{grid-template-columns:1fr}.has-results{padding:16px}.has-results .overlay-kicker{font-size:9px;letter-spacing:2px}.run-results{gap:16px;padding:10px 0;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.pad.active,.pad:active:not(:disabled),.btn:hover:not(:disabled){transform:none}}
@media(forced-colors:active){
  .mode-button[aria-pressed="true"]{border-style:double;border-width:3px}
  .pad.active{forced-color-adjust:none;background:Highlight;color:HighlightText;border:3px solid HighlightText;outline:3px solid Highlight;outline-offset:-7px}
  .pad.active i{visibility:hidden}
  .pad.active::after{content:'●';font:800 32px/1 Arial,sans-serif;color:HighlightText}
}