@font-face{font-family:Inter;src:url('/assets/fonts/inter-wght.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-wght.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
:root{--bg:#080b14;--panel:rgba(17,21,36,.76);--panel-solid:#111524;--panel-lift:#191e31;--line:rgba(157,170,216,.13);--line-strong:rgba(157,139,251,.3);--text:#f5f5ff;--muted:#8b91a8;--muted-bright:#a8afc7;--accent:#9b7bff;--accent-bright:#b899ff;--accent-deep:#7750f3;--cyan:#54dcfc;--green:#5de4b0;--gold:#f8ce7b;--danger:#ff8a9f;--font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--display:'Space Grotesk',Inter,sans-serif;--radius:18px;font-family:var(--font);color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body::before{position:fixed;inset:0;z-index:-3;content:'';background:radial-gradient(ellipse at 14% 15%,rgba(71,39,140,.13),transparent 38%),radial-gradient(ellipse at 93% 65%,rgba(15,83,114,.09),transparent 36%),linear-gradient(rgba(131,124,182,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(131,124,182,.025) 1px,transparent 1px);background-size:auto,auto,64px 64px,64px 64px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:4px}button{border:0;background:none}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}input{color:var(--text)}[hidden]{display:none!important}svg{vertical-align:middle}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-2}.orb{position:absolute;border-radius:100%;filter:blur(100px);opacity:.12}.orb-one{width:600px;height:600px;background:#7745f1;right:5%;top:120px}.orb-two{width:500px;height:450px;background:#19377c;left:-10%;top:90px}
.site-header{height:84px;border-bottom:1px solid var(--line);background:rgba(8,11,20,.73);backdrop-filter:blur(20px);position:relative;z-index:20}.header-inner{max-width:1280px;margin:auto;height:100%;padding:0 34px;display:flex;align-items:center;gap:58px}.brand{display:flex;align-items:center;gap:11px;padding:0;flex-shrink:0}.brand-name{font-family:var(--display);font-size:20px;letter-spacing:-.7px;font-weight:700;line-height:1}.brand-name>span{display:block;font-size:11px;font-weight:500;letter-spacing:5.45px;line-height:1.6;color:var(--accent-bright)}.brand-mark{display:grid;grid-template-columns:repeat(2,14px);grid-template-rows:repeat(2,14px);transform:rotate(-10deg);filter:drop-shadow(0 0 9px rgba(155,123,255,.3));position:relative;margin-right:4px}.brand-mark i{background:linear-gradient(145deg,#c8b0ff,#8158fc);border-radius:3px;border:1px solid rgba(233,222,255,.7);box-shadow:inset 0 0 5px #e9dfff20}.brand-mark i:nth-child(1){grid-column:2}.brand-mark i:nth-child(2){grid-row:2;grid-column:1}.brand-mark i:nth-child(3){grid-row:2;grid-column:2}.brand-mark i:nth-child(4){grid-row:3;grid-column:2}.main-nav{display:flex;height:100%;gap:8px}.nav-link{display:flex;align-items:center;gap:9px;padding:0 18px;font-size:13px;font-weight:500;position:relative;color:var(--muted);transition:color .2s}.nav-link svg{width:17px;height:17px}.nav-link.active{color:#f0eaff}.nav-link.active:after{position:absolute;bottom:-1px;height:2px;left:18px;right:18px;content:'';background:var(--accent);box-shadow:0 -2px 12px #a384ff88}.nav-link:hover{color:var(--text)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.online-status{font-size:9px;font-weight:600;letter-spacing:1.25px;color:#9cbfb4;display:flex;align-items:center;gap:7px;padding-right:15px;white-space:nowrap}.online-status i,.live-game i{width:5px;height:5px;border-radius:100%;background:#60e1b6;box-shadow:0 0 9px #60e1b688;display:inline-block}.icon-button{width:38px;height:38px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#171b2a66;color:#959bb2;transition:background .2s,color .2s,border-color .2s}.icon-button svg{width:17px;height:17px}.icon-button:hover{color:var(--text);background:#25213e;border-color:var(--line-strong)}.icon-button.small{width:30px;height:30px;border-radius:7px}.icon-button.small svg{width:14px;height:14px}
.app-shell{max-width:1200px;margin:auto;padding:0 30px;position:relative}.screen{animation:screen-in .38s ease both}.lobby-screen{padding-top:56px}.hero{display:grid;grid-template-columns:1.04fr 1fr;gap:35px;align-items:center;min-height:475px}.hero-copy{padding:4px 0 30px;z-index:1}.eyebrow{font-size:9px;letter-spacing:2.1px;font-weight:600;color:#a896dc;display:flex;align-items:center;gap:10px}.eyebrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}.tiny-diamond{width:6px;height:6px;background:var(--accent);transform:rotate(45deg);box-shadow:0 0 11px var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-family:var(--display);font-size:62px;letter-spacing:-3px;line-height:1.085;margin:20px 0 18px;font-weight:700}.hero-copy h1>span{background:linear-gradient(100deg,#b293ff,#8264f4 76%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-description{color:var(--muted-bright);font-size:14px;line-height:1.85;margin-bottom:28px}.play-form{max-width:495px}.field-heading{display:flex;justify-content:space-between;margin:0 0 9px;font-size:9px;font-weight:600;letter-spacing:1.6px;color:#b4b7ca}.field-heading>span{font-weight:400;letter-spacing:.5px;color:#696f86}.play-input-row{display:flex;gap:10px}.input-wrap{height:53px;position:relative;flex:1;min-width:0}.input-wrap>svg{position:absolute;width:17px;height:17px;left:18px;top:18px;stroke:#7b7694;fill:none;stroke-width:1.6;pointer-events:none}.input-wrap input{width:100%;height:100%;background:rgba(18,21,35,.9);border:1px solid #343044;border-radius:10px;padding:0 14px 0 46px;font-size:13px;transition:border-color .2s,box-shadow .2s}.input-wrap input::placeholder{color:#75798e}.input-wrap input:focus{outline:none;border-color:#8c6ede;box-shadow:0 0 0 3px #9b7bff13,0 0 26px #8559f313}.input-wrap input.invalid{border-color:#da6485}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:9px;padding:0 18px;font-size:11px;font-weight:600;letter-spacing:.6px;transition:transform .17s,filter .2s,background .2s;border:1px solid transparent;white-space:nowrap}.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}.button:active{transform:scale(.975)}.primary-button{color:#fff;background:linear-gradient(110deg,#a282ff,#7b52e9);border-color:#b99ff852;box-shadow:0 6px 22px #8359ed26,inset 0 1px 0 #e4d6ff35}.primary-button:hover{filter:brightness(1.12);box-shadow:0 6px 27px #8359ed40,inset 0 1px 0 #e4d6ff45}.play-input-row>.primary-button{height:53px;padding:0 18px;min-width:172px}.button-arrow{margin-left:auto;width:17px!important}.form-message{font-size:11px;min-height:17px;margin:7px 0 -1px;color:var(--danger)}.form-message:empty{min-height:10px;margin:0}.no-signup{display:flex;align-items:center;gap:7px;font-size:10px;color:#81839a;margin-top:15px}.no-signup svg{width:12px;height:12px;fill:none;stroke:var(--accent-bright);stroke-width:1.8}.mode-info{display:flex;align-items:center;gap:13px;max-width:495px;border-top:1px solid var(--line);margin-top:29px;padding-top:21px}.mode-icon{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border:1px solid #a082ee28;border-radius:9px;background:#8363ec12}.mode-icon svg{width:18px;height:18px;fill:none;stroke:#a88ce9;stroke-width:1.5}.mode-info>div:nth-child(2){display:flex;flex-direction:column;gap:5px}.overline{font-size:8px;font-weight:600;letter-spacing:1.6px;color:#8f93a8;display:block}.mode-info strong{font-size:11px;font-weight:500;color:#c6c7d5}.mode-tag{margin-left:auto;padding:5px 7px;border-radius:4px;border:1px solid #aa8bea28;color:#aa94dc;font-size:7px;font-weight:600;letter-spacing:1px}.trust-row{display:flex;gap:17px;margin-top:22px;font-size:9px;color:#787e93}.trust-row>span{display:flex;align-items:center;gap:5px}.trust-row svg{width:10px;height:10px;fill:none;stroke:#6da398;stroke-width:2}
.hero-visual{position:relative;height:510px;display:flex;align-items:center;justify-content:center;margin-left:15px}.hero-visual:before{content:'';position:absolute;inset:20px 0;background:radial-gradient(ellipse,rgba(105,66,181,.18),transparent 65%);filter:blur(12px)}.demo-frame{width:298px;height:460px;padding:12px;border-radius:20px;background:linear-gradient(145deg,#35314875,#14172770);border:1px solid #baa0ff2b;box-shadow:-8px 30px 70px #0006,0 0 60px #825bd217,inset 0 0 32px #bcb4ef05;transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) rotateZ(3deg);position:relative}.demo-frame:after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;background:linear-gradient(130deg,#fff08,transparent 27%)}.demo-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 11px;font-size:6px;letter-spacing:1.3px;color:#aaa6c0}.demo-head>span:first-child{display:flex;gap:5px;align-items:center}.demo-head i{height:4px;width:4px;background:#65d5ad;display:inline-block;border-radius:100%}.demo-level{font-size:6px;letter-spacing:.7px;color:#9080c1}.demo-frame canvas{display:block;width:274px;height:408px;border-radius:10px;background:#0b0e1c;border:1px solid #8263b625}.deco-label{font-size:7px;letter-spacing:3px;color:#766999;position:absolute;top:34px;left:35px;transform:rotate(-6deg)}.floating-tile{position:absolute;filter:drop-shadow(10px 15px 12px #0006);transform:rotate(-13deg);z-index:2}.floating-tile i{position:absolute;width:29px;height:29px;border-radius:5px;background:linear-gradient(135deg,#d4b5ff,#7650cd);border:1px solid #e4d1ff99;box-shadow:inset 3px 3px 5px #fff3,inset -3px -4px 6px #442b8544,0 0 16px #af7bff55}.tile-purple{right:20px;top:140px;transform:rotate(15deg)}.tile-purple i:nth-child(2){left:30px}.tile-purple i:nth-child(3){top:30px}.tile-purple i:nth-child(4){top:30px;left:30px}.tile-cyan{bottom:60px;left:20px;transform:rotate(-14deg)}.tile-cyan i{width:26px;height:26px;border-color:#c3f5ff99;background:linear-gradient(135deg,#a9e7fa,#338cb4);box-shadow:inset 3px 3px 5px #fff3,inset -3px -4px 6px #16445544,0 0 16px #40d0fc35}.tile-cyan i:nth-child(1){top:26px}.tile-cyan i:nth-child(2){left:27px;top:26px}.tile-cyan i:nth-child(3){left:54px;top:26px}.tile-cyan i:nth-child(4){left:54px}.demo-combo{position:absolute;left:-48px;top:184px;width:121px;padding:13px 15px;border:1px solid #a890e434;border-radius:11px;background:linear-gradient(140deg,#292139ed,#131829ee);box-shadow:0 13px 35px #0006,0 0 30px #956bf511;backdrop-filter:blur(8px);display:flex;flex-direction:column;transform:rotate(-4deg)}.demo-combo small{font-size:6px;letter-spacing:1.6px;color:#b2a1d8}.demo-combo strong{font-family:var(--display);font-size:36px;line-height:1.35;color:#be9eff;text-shadow:0 0 17px #b278ff55}.demo-combo>span{font-size:8px;color:#aaa8bf}.visual-caption{position:absolute;bottom:17px;left:70px;right:30px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:6px;line-height:1.8;letter-spacing:1.9px;color:#737990}.visual-caption strong{font-size:6px;color:#9790b0;font-weight:400}.signal-bars{height:20px;display:flex;align-items:flex-end;gap:3px}.signal-bars i{width:3px;height:7px;background:#ac85fd;opacity:.6}.signal-bars i:nth-child(2){height:13px;opacity:.8}.signal-bars i:nth-child(3){height:20px}
.lobby-bottom{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:21px}.glass-panel{background:linear-gradient(135deg,rgba(24,28,46,.67),rgba(14,17,30,.77));border:1px solid var(--line);box-shadow:0 12px 30px #00000012,inset 0 1px 0 #ffffff02;border-radius:var(--radius);backdrop-filter:blur(15px)}.quick-guide,.leaderboard-card{padding:23px 26px;min-height:237px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:15px}.section-heading h2{font-family:var(--display);font-size:18px;letter-spacing:-.45px;font-weight:600;margin:6px 0 0}.text-button{font-size:10px;display:inline-flex;align-items:center;gap:8px;color:#a993e6;padding:4px 0;transition:color .2s}.text-button:hover{color:#d2beff}.text-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}.guide-items{display:grid;grid-template-columns:1.2fr 1.1fr 1.65fr .8fr;gap:15px}.guide-item{display:flex;flex-direction:column;gap:11px;padding:4px 0}.key-group{height:30px;display:flex;gap:5px;align-items:center}kbd{font-family:var(--font);font-size:9px;color:#c3c4d5;background:linear-gradient(180deg,#272b40,#1e2235);border:1px solid #45435780;border-radius:5px;box-shadow:0 2px 0 #03040a66;min-width:25px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1;padding:0 6px}kbd.wide-key{font-size:8px;letter-spacing:1px;gap:5px}kbd svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7}.guide-item>span{font-size:10px;color:#9299b0}.mobile-guide{display:none}.big-guide-icon{width:26px;height:26px;fill:none;stroke:#b1a3d0;stroke-width:1.4}.leaderboard-card .section-heading{margin-bottom:14px}.score-list{list-style:none;padding:0;margin:0}.score-list.compact>li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;min-height:40px}.rank-badge{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:10px;color:#8e91a7;background:#ffffff04;border:1px solid #ffffff09}.rank-1 .rank-badge{color:#f6cf7d;background:#b6903420;border-color:#bc94363b}.rank-2 .rank-badge{color:#c5cbe2;background:#a7b1c515;border-color:#a7b1c52e}.rank-3 .rank-badge{color:#d5a077;background:#bd754317;border-color:#bd75432e}.score-player{display:flex;flex-direction:column;gap:3px;min-width:0}.score-player strong{font-size:10px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left}.score-player small{font-size:8px;color:#72778b}.score-value{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:600;color:#ded8f4;font-variant-numeric:tabular-nums}.view-all{border-top:1px solid var(--line);width:100%;margin-top:6px;padding-top:13px;justify-content:center;font-size:9px}.leaderboard-loading{font-size:10px;color:var(--muted);padding:20px 0;text-align:center}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#82869e;gap:7px;font-size:11px;text-align:center;margin:16px 0;padding:12px}.empty-state>svg{height:26px;width:26px;fill:none;stroke:#9576e5;stroke-width:1.3;opacity:.65;margin-bottom:4px}.empty-state>strong{font-weight:500;color:#b6b5cc;font-size:12px}.empty-state>span{font-size:10px}
.site-footer{max-width:1200px;padding:27px 30px 26px;margin:35px auto 0;border-top:1px solid #a49bd011;display:flex;justify-content:space-between;align-items:center;color:#626a83;font-size:8px;letter-spacing:.1px}.site-footer strong{font-weight:500;color:#7f8196;letter-spacing:.65px}.footer-center{font-size:7px;letter-spacing:1px;color:#697b7b;display:flex;align-items:center;gap:7px}.footer-center i{height:4px;width:4px;background:#598b7b;border-radius:100%}.site-footer button{display:flex;align-items:center;gap:7px;font-size:9px;color:#85899f;padding:0}.site-footer button:hover{color:var(--accent-bright)}.site-footer button svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5}
/* Game */
.game-screen{padding:29px 0 0}.game-topline{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:0 auto 22px}.game-player{display:flex;align-items:center;gap:11px}.avatar{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(140deg,#a286fa,#6845c5);font-family:var(--display);font-size:15px;border:1px solid #b69cfb77;box-shadow:0 4px 15px #6442c42b}.game-player strong{display:block;font-size:12px;font-weight:600;margin-top:4px;max-width:170px;overflow:hidden;text-overflow:ellipsis}.game-player .overline{font-size:7px}.game-mode{font-size:7px;letter-spacing:1.3px;color:#9b88ce;background:#9b72e611;border:1px solid #9774da28;border-radius:5px;padding:5px 7px;margin-left:5px}.game-actions{display:flex;align-items:center;gap:8px}.live-game{font-size:8px;letter-spacing:1px;color:#8cb9a8;margin-right:10px;display:flex;align-items:center;gap:6px}.game-layout{display:grid;grid-template-columns:155px 320px 155px;gap:20px;justify-content:center;align-items:start}.game-sidebar{display:flex;flex-direction:column;gap:12px}.hud-card{padding:14px;background:linear-gradient(140deg,rgba(26,29,48,.85),rgba(15,18,31,.87));border:1px solid var(--line);border-radius:12px}.score-card{padding:17px 16px}.score-number{font-family:var(--display);font-weight:600;font-size:29px;letter-spacing:-.9px;font-variant-numeric:tabular-nums;display:block;margin:8px 0 14px;color:#f4edff}.level-progress{height:3px;background:#ffffff08;border-radius:5px;overflow:hidden}.level-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7360f4,#bd92ff);box-shadow:0 0 6px #9470ff;border-radius:5px;transition:width .3s}.progress-label{font-size:6px;letter-spacing:.75px;color:#7a7d95;display:block;margin-top:8px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-stat{padding:12px}.mini-stat>span{display:flex;align-items:center;gap:4px;font-size:6px;letter-spacing:1px;color:#8f92a8}.mini-stat svg{width:9px;height:9px;fill:none;stroke:#9978e8;stroke-width:1.5}.mini-stat>strong{display:block;margin-top:7px;font-family:var(--display);font-size:23px;letter-spacing:1px;font-weight:500;font-variant-numeric:tabular-nums}.hud-title{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.25px;color:#9ca0b5;font-weight:500}.hud-title kbd{min-width:17px;height:17px;font-size:7px;padding:0 3px;border-radius:3px}.hold-card{padding:13px 13px 10px}.hold-card canvas{display:block;width:100%;height:auto;aspect-ratio:152/92;margin-top:7px}.hold-hint{font-size:7px;color:#656b85;display:block;text-align:center;margin-top:-5px}.hold-card.has-hold .hold-hint{visibility:hidden}.time-card{display:grid;grid-template-columns:13px 1fr auto;gap:7px;align-items:center;padding:12px}.time-card>svg{width:12px;height:12px;stroke:#7e719e;fill:none;stroke-width:1.5}.time-card>span{font-size:6px;letter-spacing:1px;color:#82889e}.time-card>strong{font-family:var(--display);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.8px;color:#bab6d1}.board-column{position:relative}.board-shell{padding:8px;position:relative;background:linear-gradient(145deg,#3e345361,#171326);border:1px solid #ad8cea44;border-radius:15px;box-shadow:0 0 45px #a977ff10,0 14px 35px #0005}.board-rail{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:6px;letter-spacing:1.3px;color:#726887;margin-bottom:10px}.board-rail i{width:22px;height:1px;background:#7663a846}.board-shell canvas#board{display:block;width:302px;height:604px;border-radius:7px;border:1px solid #151629;touch-action:none;background:#090c18;box-shadow:inset 0 0 25px #0003}.board-shell.shake{animation:screen-shake .35s ease-out}.board-bottom-hint{display:flex;gap:17px;justify-content:center;margin:19px -20px 0;color:#71758e;font-size:7px}.board-bottom-hint>span{display:flex;align-items:center;gap:4px;white-space:nowrap}.board-bottom-hint kbd{font-size:6px;min-width:18px;height:17px;border-radius:3px;padding:0 4px;color:#9897b0}.next-card{padding:14px 13px}.queue-tag{font-size:6px;color:#655982;letter-spacing:.8px}.next-card canvas{display:block;width:100%;height:auto;margin-top:14px}.combo-card{display:flex;justify-content:space-between;padding:15px}.combo-card>div{display:flex;flex-direction:column;gap:8px}.combo-card strong{font-family:var(--display);font-size:18px;color:#bda1ef;font-weight:600}.personal-best{display:flex;gap:9px;align-items:center;padding:9px 3px}.personal-best>svg{width:20px;height:20px;fill:none;stroke:#8872bc;stroke-width:1.3}.personal-best>div{display:flex;flex-direction:column;gap:5px}.personal-best span{font-size:6px;letter-spacing:.7px;color:#77768e}.personal-best strong{font-family:var(--display);font-size:13px;font-weight:500;color:#beb3da}.board-overlay{position:absolute;inset:8px;z-index:5;backdrop-filter:blur(9px);background:rgba(9,10,22,.92);border-radius:7px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 26px;overflow-y:auto;justify-content:center}.overlay-symbol{width:54px;height:54px;border-radius:16px;border:1px solid #ab84fe44;background:#a57cf31a;display:flex;justify-content:center;align-items:center;margin-bottom:22px;box-shadow:0 0 30px #865add1a}.overlay-symbol svg{width:23px;height:23px;fill:none;stroke:#b592fa;stroke-width:1.5}.overlay-symbol.trophy svg{stroke:#edcb7d}.board-overlay .overline{font-size:8px;color:#a290c8}.board-overlay h2{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.7px;margin:9px 0 7px}.board-overlay>p{font-size:11px;line-height:1.6;color:#8c8ba6;margin-bottom:25px}.board-overlay>.button{width:100%;max-width:215px;margin-top:9px;font-size:10px;min-height:43px}.secondary-button{background:#25213666;border-color:#9b80d738;color:#c8b7e9}.secondary-button:hover{background:#3e2e6855}.ghost-button{background:none;color:#8c879e;font-weight:400;text-transform:none}.ghost-button:hover{color:#c2b3df;background:#8a70bb11}.overlay-key{font-size:7px;letter-spacing:.2px;color:#6b647e;display:flex;align-items:center;gap:5px;margin-top:24px}.overlay-key kbd{font-size:7px;min-width:23px;height:19px}.game-over-overlay{padding:28px 24px;justify-content:center}.game-over-overlay .overlay-symbol{margin-bottom:17px}.game-over-overlay h2{font-size:26px}.game-over-overlay>p{margin-bottom:16px;font-size:10px}.final-score{padding:11px 28px;display:flex;flex-direction:column;gap:5px;margin-bottom:15px}.final-score>span{font-size:6px;color:#8d76b5;letter-spacing:1.4px}.final-score>strong{font-family:var(--display);font-size:40px;line-height:1.2;color:#d4b4ff;letter-spacing:-1px}.final-stats{display:flex;width:100%;justify-content:center;gap:24px;border-top:1px solid #ffffff08;border-bottom:1px solid #ffffff08;padding:13px 0;margin-bottom:12px}.final-stats>div{display:flex;flex-direction:column;gap:5px;min-width:51px}.final-stats strong{font-family:var(--display);font-size:18px;font-weight:600}.final-stats span{font-size:6px;letter-spacing:.8px;color:#8c839f}.game-announcement{position:absolute;top:37%;left:0;right:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:scale(.9)}.game-announcement.show{animation:announce 1.4s ease both}.game-announcement strong{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:2px;text-shadow:0 0 20px #b88cff80;color:#e3ccff}.game-announcement span{font-size:10px;color:#ab94d3;margin-top:6px;letter-spacing:.7px}.touch-controls,.swipe-hint,.mobile-hud{display:none}
/* Scores */
.scores-screen{padding:51px 10px 0;min-height:650px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:38px}.page-heading h1{font-size:43px;margin:14px 0 8px;letter-spacing:-1.8px}.page-heading p{color:var(--muted);font-size:12px;margin:0}.page-heading>.button{height:47px;padding:0 23px;font-size:10px}.podium{display:flex;justify-content:center;align-items:flex-end;gap:17px;max-width:740px;margin:-7px auto 35px}.podium-player{width:30%;min-height:146px;padding:20px 12px 15px;text-align:center;border:1px solid var(--line);border-radius:14px;background:linear-gradient(140deg,#28203888,#131725aa);position:relative}.podium-player.place-1{order:2;min-height:172px;border-color:#e5c27255;background:linear-gradient(140deg,#3d302788,#181827aa);padding-top:16px}.podium-player.place-2{order:1}.podium-player.place-3{order:3}.podium-medal{height:29px;width:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin:0 auto 9px;font-family:var(--display);font-size:13px;background:#ab85ed15;color:#b8a0e9;border:1px solid #a57de735}.place-1 .podium-medal{color:#f4cb7b;background:#c7a64216;border-color:#c7a64240;font-size:18px}.place-3 .podium-medal{color:#d5a077}.podium-player>strong{font-size:13px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.podium-score{font-family:var(--display);color:#d7c1ff;font-size:25px;display:block;margin:8px 0}.podium-player small{font-size:8px;color:#8f8ba3}.full-leaderboard{padding:25px 27px}.score-table-header{display:grid;grid-template-columns:60px minmax(140px,1.5fr) 80px 80px 130px 110px;gap:12px;align-items:center;padding:14px 12px;font-size:8px;letter-spacing:1.2px;color:#777e94;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.score-table-header>span:last-child{text-align:right}.score-list.full>li{display:grid;grid-template-columns:60px minmax(140px,1.5fr) 80px 80px 130px 110px;gap:12px;align-items:center;padding:14px 12px;border-bottom:1px solid #ffffff06;min-height:65px;transition:background .2s;border-radius:6px}.score-list.full>li:hover{background:#a087d405}.full-score-name{display:flex;align-items:center;gap:11px;min-width:0}.player-dot{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#a381f11a;border:1px solid #a381f126;border-radius:8px;color:#ba9eef;font-family:var(--display);font-size:11px;font-weight:500}.full-score-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500}.table-meta{font-size:10px;color:#9a9bb0;font-variant-numeric:tabular-nums}.table-score{text-align:right;font-size:16px;color:#cbafef}.full-leaderboard .empty-state{padding:35px 0 20px;gap:10px}.updated-label{font-size:9px;color:#727990}.scores-error{color:var(--danger);padding-top:20px;text-align:center}
/* Settings & feedback */
dialog{color:var(--text);border:1px solid #9c82df35;border-radius:22px;background:#111522;padding:0;box-shadow:0 25px 90px #000b,0 0 70px #673bcc22;width:min(520px,calc(100vw - 30px));max-height:calc(100dvh - 35px)}dialog::backdrop{background:#02030bd1;backdrop-filter:blur(7px)}dialog[open]{animation:modal-in .23s ease-out}.modal-inner{padding:28px;display:block}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.modal-heading h2{font-family:var(--display);font-size:28px;letter-spacing:-1px;margin:7px 0 0}.settings-group{margin-bottom:25px}.settings-group h3{font-size:8px;letter-spacing:1.6px;color:#9797b0;font-weight:500;margin-bottom:15px}.setting-row{display:flex;align-items:center;gap:12px;position:relative;cursor:pointer;border:1px solid #aa8ade15;border-radius:12px;padding:14px;background:#ffffff02;margin-bottom:9px}.setting-icon{display:flex;align-items:center;justify-content:center;width:33px;height:33px;background:#9672e911;border:1px solid #9979eb20;border-radius:9px;color:#b298ed}.setting-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}.setting-row>span:nth-child(3){display:flex;flex-direction:column;gap:5px}.setting-row strong{font-size:12px;font-weight:500}.setting-row small{font-size:9px;color:#878aa2}.switch-input{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:35px;height:21px;opacity:0;cursor:pointer}.switch{width:35px;height:21px;border-radius:12px;background:#373548;margin-left:auto;position:relative;pointer-events:none;transition:background .2s;flex-shrink:0}.switch:after{width:15px;height:15px;position:absolute;top:3px;left:3px;background:#bdb7d0;border-radius:100%;content:'';transition:transform .2s}.switch-input:checked+.switch{background:#8160d9}.switch-input:checked+.switch:after{background:white;transform:translateX(14px)}.switch-input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:4px}.controls-help dl{margin:0}.controls-help dl>div{display:flex;justify-content:space-between;align-items:center;min-height:37px;border-bottom:1px solid #a6a0bb0b;gap:12px}.controls-help dt{color:#afb0c3;font-size:10px}.controls-help dd{display:flex;gap:5px;margin:0}.controls-help kbd{height:23px;min-width:23px;font-size:8px}.mobile-help{display:flex;gap:12px;padding:16px;background:#987bfa09;border:1px solid #9178d219;border-radius:11px;margin:20px 0}.mobile-help>svg{fill:none;stroke:#a38bcd;stroke-width:1.4;width:21px;height:21px;flex-shrink:0;margin-top:2px}.mobile-help strong{font-size:11px;font-weight:500;color:#c6badf}.mobile-help p{font-size:10px;line-height:1.7;color:#8f8ca6;margin:6px 0 0}.save-settings{width:100%;height:47px;font-size:10px}.toast-container{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:100;pointer-events:none}.toast{background:#171929f2;backdrop-filter:blur(15px);padding:15px 18px;border:1px solid #a58ce53d;border-radius:12px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 35px #0006;animation:toast-in .3s ease both;max-width:340px;font-size:12px;color:#d2c7e9}.toast svg{height:19px;width:19px;stroke:#b99af7;fill:none;stroke-width:1.7}.toast.leaving{animation:toast-out .3s ease forwards}.toast small{display:block;font-size:10px;color:#8a849d;margin-top:5px}.toast.success svg{stroke:#7ce4b8}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}@keyframes announce{0%{opacity:0;transform:scale(.88);top:40%}16%,65%{opacity:1;transform:scale(1);top:37%}100%{opacity:0;transform:scale(1.04);top:34%}}@keyframes screen-shake{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(2px,1px)}}
@media(min-width:1350px){.app-shell{max-width:1280px}.hero{min-height:515px}.hero-copy h1{font-size:70px}.hero-visual{height:550px}.demo-frame{width:323px;height:486px}.demo-frame canvas{width:297px;height:433px}.hero-copy{padding-top:0}}
@media(max-width:1050px){.header-inner{gap:35px}.app-shell{max-width:1000px}.hero{gap:10px;grid-template-columns:1fr .92fr}.hero-copy h1{font-size:54px}.hero-visual{transform:scale(.93);transform-origin:center}.lobby-bottom{grid-template-columns:1.4fr 1fr}.guide-items{gap:9px}.quick-guide,.leaderboard-card{padding:22px}.mode-info{gap:10px}.mode-tag{display:none}.trust-row{gap:11px}.game-layout{gap:15px;grid-template-columns:145px 320px 145px}.site-footer{padding-left:35px;padding-right:35px}}
@media(max-width:780px){.site-header{height:72px}.header-inner{padding:0 22px;gap:24px}.main-nav{gap:0}.nav-link{font-size:11px;padding:0 12px}.nav-link svg{display:none}.online-status{display:none}.brand-name{font-size:17px}.brand-name>span{font-size:9px;letter-spacing:4.7px}.brand-mark{transform:scale(.85) rotate(-10deg);margin-right:-1px}.app-shell{padding:0 22px}.lobby-screen{padding-top:39px}.hero{grid-template-columns:1fr 1fr;min-height:490px;gap:12px}.hero-copy h1{font-size:45px;letter-spacing:-2px}.eyebrow{font-size:7px;letter-spacing:1.2px}.hero-description{font-size:12px}.play-input-row{flex-direction:column;gap:10px}.play-input-row>.primary-button{width:100%}.button-arrow{margin-left:0}.hero-visual{height:490px;transform:scale(.85);margin:0 -35px}.mode-info{margin-top:20px}.mode-info strong{font-size:10px;line-height:1.4}.trust-row{flex-wrap:wrap;font-size:8px;gap:8px 12px}.lobby-bottom{grid-template-columns:1fr 1fr;gap:14px}.quick-guide,.leaderboard-card{padding:19px;min-height:245px}.section-heading h2{font-size:16px}.guide-items{grid-template-columns:repeat(2,1fr);gap:16px}.quick-guide .text-button{display:none}.game-layout{grid-template-columns:110px minmax(250px,300px) 110px;gap:12px}.hud-card{padding:11px}.game-sidebar{gap:9px}.score-card{padding:13px 11px}.score-number{font-size:25px}.mini-stat{padding:10px}.mini-stat>strong{font-size:20px}.mini-stat>span{font-size:5px}.stats-grid{gap:6px}.hud-title{font-size:7px}.next-card{padding:12px 9px}.progress-label{font-size:5px;letter-spacing:.4px}.time-card{grid-template-columns:11px 1fr;gap:6px}.time-card strong{grid-column:1/-1;text-align:right;font-size:15px;padding-top:4px}.time-card>span{font-size:5px}.game-player strong{max-width:120px}.game-mode{display:none}.live-game{display:none}.site-footer{font-size:7px;padding:24px 22px}.footer-center{display:none}.score-table-header,.score-list.full>li{grid-template-columns:40px minmax(100px,1fr) 50px 55px 95px 80px;gap:8px}.podium{gap:12px}.full-leaderboard{padding:20px 18px}}
@media(max-width:620px){body::before{background-size:auto,auto,44px 44px,44px 44px}.site-header{height:68px;position:relative}.header-inner{padding:0 18px;gap:10px}.brand{gap:8px}.brand-name{font-size:16px}.brand-name>span{font-size:8px;letter-spacing:4.15px}.brand-mark{transform:scale(.73) rotate(-10deg);margin-right:-3px}.main-nav{margin-left:auto;margin-right:6px}.nav-link{padding:0 10px;font-size:10px}.nav-link.active:after{left:10px;right:10px}.header-actions{margin-left:0;gap:6px}.header-actions .sound-toggle{display:none}.icon-button{height:33px;width:33px;border-radius:8px}.icon-button svg{height:15px;width:15px}.app-shell{padding:0 18px}.lobby-screen{padding-top:36px}.hero{display:flex;flex-direction:column;gap:0}.hero-copy{width:100%;padding-bottom:0;text-align:center}.eyebrow{justify-content:center;font-size:7px;letter-spacing:1.65px}.hero-copy h1{font-size:49px;line-height:1.06;margin:18px 0 16px;letter-spacing:-2.3px}.hero-description{font-size:12px;line-height:1.8;margin-bottom:28px}.play-form{margin:0 auto;text-align:left;max-width:390px}.field-heading{font-size:8px}.input-wrap{height:51px}.input-wrap input{font-size:12px}.play-input-row{gap:9px}.play-input-row>.primary-button{height:48px}.no-signup{justify-content:center;font-size:9px;margin-top:13px}.mode-info{margin-top:25px;padding-top:19px;text-align:left;gap:11px;margin-left:auto;margin-right:auto;max-width:390px}.mode-info strong{font-size:10px}.mode-info .overline{font-size:7px}.trust-row{justify-content:center;margin-top:21px;gap:9px 15px;font-size:7px}.hero-visual{height:475px;width:100%;margin:-4px 0 -31px;transform:scale(.95);justify-content:center}.demo-frame{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) rotateZ(3deg)}.demo-combo{left:-37px}.tile-purple{right:calc(50% - 173px)}.tile-cyan{left:calc(50% - 180px)}.deco-label{left:calc(50% - 151px)}.visual-caption{left:15%;right:15%}.lobby-bottom{grid-template-columns:1fr;margin:20px 0 0;gap:14px}.quick-guide,.leaderboard-card{min-height:auto;padding:21px}.guide-items{grid-template-columns:repeat(4,1fr);gap:7px}.guide-item{align-items:center;gap:10px}.guide-item>span{font-size:9px}.mobile-guide{display:none}.quick-guide .section-heading h2{font-size:17px}.leaderboard-card .section-heading{margin-bottom:9px}.leaderboard-card .score-list>li{min-height:41px;grid-template-columns:30px 1fr auto}.score-player strong{font-size:11px}.score-value{font-size:14px}.view-all{margin-top:8px;padding-top:14px}.site-footer{margin-top:27px;padding:23px 18px;align-items:center;gap:12px;font-size:7px}.site-footer button{font-size:7px}.site-footer button svg{width:8px}.game-screen{padding-top:25px}.game-topline{margin-bottom:20px}.game-player{gap:8px}.avatar{width:31px;height:31px;border-radius:8px;font-size:13px}.game-player strong{font-size:11px}.game-player .overline{font-size:6px}.game-actions{gap:7px}.game-layout{display:flex;justify-content:center}.game-sidebar{display:none}.board-column{width:100%;max-width:335px}.board-shell{width:100%;padding:7px;border-radius:13px;display:flex;justify-content:center}.board-shell canvas#board{width:calc(100vw - 56px);max-width:302px;height:auto;max-height:calc(100dvh - 320px);aspect-ratio:1/2;object-fit:contain}.board-bottom-hint{display:none}.board-rail{font-size:6px}.mobile-hud{display:flex;justify-content:space-between;align-items:center;max-width:335px;margin:16px auto 0;gap:15px;background:#17192c88;border:1px solid var(--line);border-radius:10px;padding:11px 13px}.mobile-hud>div{display:flex;flex-direction:column;gap:5px}.mobile-hud>div:first-child>strong{color:#c9a5ff}.mobile-hud span{font-size:6px;letter-spacing:1.1px;color:#8b89a5}.mobile-hud strong{font-family:var(--display);font-size:15px;font-weight:500}.touch-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px auto 0;max-width:380px}.touch-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:53px;background:linear-gradient(145deg,#25233baa,#17192dbb);border:1px solid #9585ba2b;border-radius:10px;touch-action:none;user-select:none;padding:7px;color:#b8b0d0}.touch-controls button:active,.touch-controls button.pressed{background:#6b4fb35e;border-color:#b091ed77;color:#f3eaff;transform:scale(.96)}.touch-controls svg{width:22px;height:22px;stroke-width:1.5}.touch-controls span{font-size:6px;letter-spacing:.6px}.touch-controls button[data-act="rot-ccw"]{grid-column:1}.touch-controls button[data-act="rot-cw"]{grid-column:4;grid-row:1}.touch-controls .hard-drop{grid-column:2/4;grid-row:2;background:linear-gradient(110deg,#7853be88,#473377aa);border-color:#a17cea55;flex-direction:row;gap:9px}.touch-controls .hard-drop span{font-size:9px;letter-spacing:1.3px}.touch-controls button[data-act="hold"]{grid-column:1;grid-row:2}.touch-controls button[data-act="left"]{grid-column:2;grid-row:1}.touch-controls button[data-act="down"]{grid-column:3;grid-row:1}.touch-controls button[data-act="right"]{grid-column:4;grid-row:2}.swipe-hint{display:flex;align-items:center;justify-content:center;gap:6px;color:#6e6b85;font-size:6px;line-height:1.5;max-width:335px;margin:14px auto 10px;text-align:center}.swipe-hint svg{width:13px;height:13px;fill:none;stroke:#8876b5;stroke-width:1.3;flex-shrink:0}.board-overlay{position:absolute;inset:7px;padding:28px 23px}.board-overlay h2{font-size:24px}.overlay-symbol{width:48px;height:48px}.game-over-overlay{padding-top:25px;padding-bottom:20px}.final-score{padding-top:4px;padding-bottom:4px;margin-bottom:12px}.final-stats{padding:10px 0;margin-bottom:8px}.score-number{overflow-wrap:anywhere}.scores-screen{padding:35px 0 0;min-height:650px}.page-heading{align-items:flex-start;gap:15px;flex-direction:column;margin-bottom:28px}.page-heading h1{font-size:39px}.page-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.page-heading p{font-size:10px;line-height:1.6}.page-heading>.button{height:44px;font-size:9px;width:100%}.podium{gap:8px;margin-bottom:25px}.podium-player{padding:17px 8px 13px;min-height:140px}.podium-player.place-1{min-height:163px;padding-top:16px}.podium-player>strong{font-size:11px}.podium-score{font-size:21px}.podium-player small{font-size:7px}.full-leaderboard{padding:20px 15px;border-radius:14px}.score-table-header{display:none}.full-leaderboard .section-heading h2{font-size:17px}.updated-label{font-size:7px}.score-list.full>li{display:grid;grid-template-columns:28px minmax(100px,1fr) auto;column-gap:10px;row-gap:7px;padding:15px 0;min-height:73px;border-radius:0}.score-list.full .rank-badge{width:27px;height:27px}.full-score-name{grid-column:2}.full-score-name strong{font-size:11px}.full-score-name .player-dot{display:none}.table-level{grid-column:2;font-size:8px;color:#6f758e}.table-level:before{content:'SEVİYE ';font-size:7px}.table-lines{display:none}.table-date{grid-row:2;grid-column:3;text-align:right;font-size:8px;color:#6f758e}.table-score{grid-row:1/3;grid-column:3;align-self:start;font-size:17px;margin-top:5px}.table-meta.table-score{color:#cfb4f6}.table-rank{grid-row:1/3;align-self:center}.full-score-name{grid-row:1}.full-score-name strong{max-width:200px}.score-list.full>li .table-score{grid-row:1;grid-column:3;margin:0}.score-list.full>li .table-date{grid-row:2;grid-column:2;padding-left:0}.score-list.full>li .table-level{grid-row:2;grid-column:3;text-align:right;font-size:8px}.toast-container{bottom:17px;right:17px;left:17px}.toast{max-width:100%;width:100%;font-size:11px}.modal-inner{padding:23px}.modal-heading{margin-bottom:24px}.modal-heading h2{font-size:26px}.setting-row{padding:12px;gap:10px}.setting-row small{font-size:8px}.setting-row strong{font-size:11px}.mobile-help p{font-size:9px}}
@media(max-width:360px){.header-inner{padding:0 13px}.main-nav{margin-right:0}.nav-link{padding:0 8px;font-size:9px}.brand-name{font-size:14px}.brand-name>span{font-size:7px;letter-spacing:3.7px}.header-actions .icon-button{width:29px;height:29px}.hero-copy h1{font-size:44px}.trust-row{gap:7px 10px}.guide-items{gap:4px}.score-player strong{max-width:195px}.game-topline{gap:7px}.game-actions{gap:5px}.touch-controls{gap:6px}.touch-controls button{min-height:50px}}
@media(pointer:fine) and (min-width:621px){.touch-controls,.swipe-hint{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.orb{display:none}}