@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{--bg:#0d0e10;--surface:#151619;--surface2:#1c1d21;--tilebg:#292a2e;--line:#2b2c31;--text:#f5f5f5;--muted:#96979f;--soft:#c7c8ce;--accent:#f5f5f5;--accentText:#111;--shadow:0 20px 60px #0004;font-family:'DM Sans','Vazirmatn',sans-serif;color-scheme:dark} :root[data-theme=light]{--bg:#f4f4f2;--surface:#fff;--surface2:#efefed;--tilebg:#e5e5e2;--line:#deded9;--text:#171719;--muted:#77787d;--soft:#4c4d51;--accent:#171719;--accentText:#fff;--shadow:0 20px 60px #0000000b;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);transition:.2s}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.shell{max-width:1220px;margin:auto;padding:0 32px}.top{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand>span{display:flex;flex-direction:column}.brand strong,.brand span>b{font-size:16px;letter-spacing:2px}.brand small{font-size:9px;color:var(--muted);letter-spacing:2px}.mark{font-size:28px;line-height:1}.top-actions{display:flex;align-items:center;gap:8px}.mini{height:38px;min-width:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:12px;font-weight:800}.btn{min-height:40px;padding:0 15px;border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800}.solid{background:var(--accent);color:var(--accentText)}.quiet,.outline{background:var(--surface);color:var(--text);border-color:var(--line)}.userpill{font-size:11px;border:1px solid var(--line);padding:10px;border-radius:10px}.hero{position:relative;min-height:290px;display:flex;align-items:center;justify-content:space-between;padding:40px 5%;border-bottom:1px solid var(--line);overflow:hidden}.hero-copy{max-width:560px;z-index:1}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:1.8px;color:var(--soft);text-transform:uppercase}.eyebrow i{width:7px;height:7px;background:#b9e8c8;border-radius:50%;box-shadow:0 0 0 4px #b9e8c81a}.muted{color:var(--muted)}h1{font-size:clamp(38px,5vw,60px);line-height:1.08;letter-spacing:-2.5px;margin:18px 0 12px}h1 em{font-style:normal;color:var(--muted)}.hero p{max-width:420px;color:var(--muted);font-size:13px;line-height:1.8}.meta{display:flex;gap:22px;margin-top:22px;color:var(--soft);font-size:11px}.meta b{font-weight:600;margin-inline-start:6px}.hero-art{width:290px;height:220px;position:relative;display:grid;place-items:center;margin-right:4%}.orbit{position:absolute;width:260px;height:180px;border:1px solid var(--line);border-radius:50%;transform:rotate(-25deg)}.artcore{width:110px;height:110px;border:1px solid var(--line);border-radius:25px;background:var(--surface2);display:grid;place-content:center;text-align:center;font-size:28px;font-weight:800;line-height:1.02;transform:rotate(-7deg);box-shadow:var(--shadow);z-index:1}.artcore span{color:var(--muted)}.float{position:absolute;width:50px;height:50px;border:1px solid var(--line);background:var(--surface);border-radius:13px;display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow)}.f1{right:25px;top:14px;transform:rotate(10deg)}.f2{left:18px;bottom:16px;background:var(--accent);color:var(--accentText);transform:rotate(-12deg)}.f3{right:3px;bottom:43px;width:43px;height:43px;font-size:15px}.dashboard{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);gap:26px;padding:30px 0 40px}.heading,.panelhead{display:flex;align-items:center;justify-content:space-between;gap:10px}.heading h2,.panel h2{font-size:19px;margin:7px 0 0;letter-spacing:-.4px}.scores{display:flex;gap:10px;align-items:center;margin:18px 0 13px}.scorebox{flex:0 0 115px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 14px;display:flex;flex-direction:column;gap:5px}.scorebox small{font-size:9px;font-weight:800;letter-spacing:1.4px;color:var(--muted)}.scorebox strong{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}.status{margin-inline-start:auto;color:var(--muted);font-size:10px}.boardwrap{position:relative;max-width:510px;margin:auto}.board{width:100%;aspect-ratio:1;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:9px;background:var(--surface2);border:1px solid var(--line);border-radius:18px;touch-action:pan-y;user-select:none}.tile{display:grid;place-items:center;min-width:0;border-radius:11px;background:var(--tilebg);font-size:clamp(18px,3vw,30px);font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}.emptytile{background:color-mix(in srgb,var(--tilebg) 48%,transparent)}.v2{background:#e7e7e4;color:#252525}.v4{background:#d1d1cc;color:#252525}.v8{background:#aaa9a3;color:#191919}.v16{background:#898984;color:white}.v32{background:#70716d;color:white}.v64{background:#51524f;color:white}.v128,.v256,.v512{background:var(--text);color:var(--bg);font-size:clamp(15px,2.5vw,24px)}.v1024,.v2048{background:var(--accent);color:var(--accentText);outline:2px solid var(--muted);outline-offset:-5px;font-size:clamp(13px,2vw,20px)}.overlay{position:absolute;inset:0;display:grid;place-items:center;border-radius:18px;background:#111c;backdrop-filter:blur(5px);text-align:center}.overlay.hidden{display:none}.overlay>div{padding:20px}.overlayicon{font-size:32px}.overlay h3{font-size:25px;margin:8px 0}.overlay p{color:#c4c4c4;font-size:12px}.hint{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:10px;margin:15px 0}.keys{display:flex;gap:3px}kbd{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--soft)}.hint i{height:12px;width:1px;background:var(--line)}.mobilekeys{display:none}.callout{max-width:510px;margin:18px auto 0;padding:13px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.info{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--muted);font-weight:800;flex-shrink:0}.callout p{font-size:10px;line-height:1.6;color:var(--muted);margin:0;flex:1}.callout a{font-size:10px;font-weight:800;white-space:nowrap}.sidebar{display:flex;flex-direction:column;gap:15px}.panel{border:1px solid var(--line);background:var(--surface);border-radius:17px;padding:19px}.panel h2{font-size:17px}.live{font-size:8px;letter-spacing:1px;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:6px}.live:first-letter{color:#75c897}.leaders{margin-top:17px;min-height:130px}.leader{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}.leader:last-child{border:0}.rank{width:18px;color:var(--muted);font-size:10px;font-weight:800}.leaderav,.avatar{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--surface2);font-size:11px;font-weight:800}.leader:first-child .leaderav{background:var(--accent);color:var(--accentText)}.leadername{flex:1;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.points{font-size:12px;font-variant-numeric:tabular-nums}.empty{min-height:100px;display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center}.panelfoot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;color:var(--muted);font-size:10px}.profile h3{font-size:14px;margin:20px 0 5px}.profile p{font-size:11px;line-height:1.8}.avatar{width:35px;height:35px;font-size:15px;border:1px solid var(--line)}.profilebest{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.profilebest strong{font-size:16px;color:var(--text)}.full{width:100%}.tip{display:flex;gap:12px;padding:15px;border:1px dashed var(--line);border-radius:13px}.tip>b{font-size:20px}.tip strong{font-size:9px;letter-spacing:1.4px}.tip p{color:var(--muted);font-size:11px;line-height:1.7;margin:5px 0 0}footer{height:62px;border-top:1px solid var(--line);display:flex;align-items:center;gap:18px;color:var(--muted);font-size:10px}footer>b{color:var(--text);letter-spacing:1px}footer span{flex:1}footer i{width:5px;height:5px;background:var(--muted);border-radius:50%}.auth{max-width:430px;margin:38px auto 55px}.back{display:block;color:var(--muted);font-size:12px;margin-bottom:18px}.authpanel{padding:30px}.authpanel>.eyebrow{text-align:center;display:block}.authpanel h1{text-align:center;font-size:28px;letter-spacing:-1px}.authpanel>p{text-align:center;font-size:12px;line-height:1.8}.authpanel form{display:flex;flex-direction:column;gap:15px;margin-top:22px}.authpanel label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:700}.authpanel input{height:45px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);outline:none}.authpanel input:focus{border-color:var(--muted)}.authpanel form .btn{height:45px;margin-top:5px}.switch{text-align:center;margin-top:20px;color:var(--muted);font-size:11px}.switch a{color:var(--text);font-weight:800;margin-inline-start:5px}.tiny{text-align:center;font-size:10px}.error{padding:11px;border:1px solid #bd686855;border-radius:9px;background:#9c35351a;color:#e28c8c;font-size:11px;line-height:1.7}
:root[dir=rtl] body{font-family:'Vazirmatn','DM Sans',sans-serif}:root[dir=rtl] h1{letter-spacing:0}:root[dir=rtl] .hero-art{margin-right:0;margin-left:4%}
@media(max-width:850px){.shell{padding:0 20px}.hero-art{transform:scale(.8);margin:0 -20px}.dashboard{grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr);gap:17px}.panel{padding:15px}.board{gap:6px;padding:7px}.tile{border-radius:8px}}
@media(max-width:650px){.shell{padding:0 15px}.top{height:70px}.top-actions{gap:5px}.top-actions .btn{padding:0 9px;font-size:10px;min-height:35px}.userpill{display:none}.mini{min-width:34px;height:35px}.hero{padding:32px 2% 27px;min-height:0}.hero h1{font-size:41px;letter-spacing:-2px}.hero p{font-size:12px}.hero-art{position:absolute;right:-75px;bottom:-45px;opacity:.2;pointer-events:none}.dashboard{grid-template-columns:1fr;padding-top:24px;gap:24px}.heading h2{font-size:18px}.scorebox{flex:1;padding:10px}.scorebox strong{font-size:20px}.status{display:none}.board{gap:7px;padding:7px}.tile{font-size:clamp(20px,7vw,31px)}.v128,.v256,.v512{font-size:clamp(15px,5vw,24px)}.v1024,.v2048{font-size:clamp(12px,4vw,19px)}.hint{flex-wrap:wrap;gap:7px;font-size:9px}.mobilekeys{display:flex;flex-direction:column;align-items:center;gap:5px;margin:12px}.mobilekeys>div{display:flex;gap:5px}.mobilekeys button{width:42px;height:36px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;font-size:18px}.callout{align-items:flex-start;flex-wrap:wrap}.callout p{min-width:calc(100% - 42px)}.callout a{margin-inline-start:32px}.auth{margin:25px auto 40px}.authpanel{padding:23px 19px}footer{gap:9px;font-size:9px}}


/* Separate, stable gameplay screen */
.launch-card{min-height:310px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:28px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;overflow:hidden}
.launch-card h3{font-size:23px;margin:10px 0 0}.launch-card p{max-width:440px;line-height:1.8;font-size:13px;margin:0}.launch-preview{display:flex;gap:8px;align-items:center;margin-bottom:6px}.launch-preview span{width:48px;height:48px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:16px}.launch-preview span:nth-child(2){background:#d1d1cc;color:#222}.launch-preview span:nth-child(3){background:#bdbdb7;color:#222}.launch-preview span:nth-child(4){width:64px;background:var(--accent);color:var(--accentText);font-size:12px}.launch-btn{min-height:48px;padding:0 22px;font-size:13px;margin-top:5px}.launch-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:11px;margin-top:7px}
.playbody{height:100dvh;min-height:0;overflow:hidden}.play-shell{height:100dvh;max-width:1000px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;overflow:hidden}.playtop{flex:0 0 68px;height:68px}.play-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 0 16px;overflow:hidden}.play-title{width:min(100%,520px);display:flex;align-items:center;justify-content:space-between;gap:12px}.play-title h1{font-size:clamp(23px,4vw,32px);letter-spacing:-1px;margin:6px 0 0}.play-title .eyebrow{font-size:9px}.play-scores{width:min(100%,520px);display:flex;align-items:center;gap:9px;margin:0}.play-scores .scorebox{flex:0 0 104px;padding:8px 12px}.play-scores .scorebox strong{font-size:21px}.play-scores .status{font-size:10px}.play-boardwrap{width:min( min(72vw, 440px), calc(100dvh - 250px));max-width:440px;flex:none}.play-boardwrap .board{width:100%;height:auto;aspect-ratio:1;gap:clamp(5px,1.5vw,9px);padding:clamp(6px,1.8vw,10px);touch-action:none;overscroll-behavior:contain}.play-boardwrap .tile{font-size:clamp(17px,4.5vw,30px);border-radius:clamp(6px,1.5vw,11px)}.play-hint{width:min(100%,520px);margin:0;font-size:10px;gap:10px}.play-hint i{flex:1}.play-hint .keys{display:flex;gap:3px}.play-hint kbd{padding:3px 6px}.playbody .mobilekeys{display:none}.tile-pop{animation:tilePop .16s ease-out both}.tile.v4,.tile.v8,.tile.v16,.tile.v32,.tile.v64,.tile.v128,.tile.v256,.tile.v512,.tile.v1024,.tile.v2048{transition:background-color .14s,transform .14s}.overlay{backdrop-filter:blur(5px)}.overlay>div{animation:overlayIn .2s ease-out both}.overlay .btn,.overlay a{margin:5px 3px}.return-note{font-size:11px!important;color:var(--muted)}@keyframes tilePop{0%{transform:scale(.82);opacity:.65}75%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}@keyframes overlayIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:600px){.shell{padding:0 17px}.hero{padding:30px 0;min-height:250px}.hero-art{display:none}.dashboard{grid-template-columns:1fr}.play-shell{padding:0 12px}.playtop{flex-basis:58px;height:58px;gap:8px}.playtop .brand strong{font-size:13px}.playtop .brand small{font-size:8px}.playtop .top-actions{gap:5px}.playtop .mini{height:34px;min-width:34px;font-size:10px}.playtop .sound-toggle{max-width:90px;padding:0 6px}.playtop .btn{min-height:34px;padding:0 8px;font-size:10px}.play-main{gap:10px;padding:8px 0 10px}.play-boardwrap{width:min(calc(100vw - 24px), calc(100dvh - 230px), 440px)}.play-scores .scorebox{flex-basis:83px;padding:7px 9px}.play-scores .scorebox strong{font-size:19px}.play-scores .status{font-size:9px}.play-hint{font-size:9px}.play-hint>span:nth-of-type(2){max-width:155px}.playbody .mobilekeys{display:none}.launch-card{padding:22px;min-height:280px}}
@media(max-height:620px){.play-main{gap:7px;padding:5px 0}.play-boardwrap{width:min( min(60vw, 360px), calc(100dvh - 190px))}.play-title h1{font-size:23px}.play-scores .scorebox{padding:5px 9px}.playtop{flex-basis:54px;height:54px}}