:root{color-scheme:dark;--bg:#080b16;--panel:#111727;--panel2:#171e31;--line:rgba(194,207,255,.12);--text:#f2f5ff;--muted:#98a6c3;--accent:#a6ffcb;--purple:#b7a2ff;--glow:rgba(121,105,255,.25);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #b2ffdb;outline-offset:3px}.container{max-width:1190px;width:calc(100% - 64px);margin-inline:auto}.ambient{position:absolute;pointer-events:none;border-radius:50%;filter:blur(105px);z-index:-1;opacity:.52}.ambient-a{width:450px;height:450px;background:#4e4bb0;top:-220px;right:-90px}.ambient-b{width:480px;height:480px;background:#174c52;top:660px;left:-300px}.site-header{height:78px;position:relative;z-index:3;border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:100%}.brand{display:flex;gap:11px;align-items:center}.brand-symbol{display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:4px;transform:rotate(-12deg)}.brand-symbol i{background:#a8ffc9;border-radius:2px}.brand-symbol i:nth-child(2){background:#a8b9ff}.brand-symbol i:nth-child(3){background:#dfb7ff}.brand-symbol i:nth-child(4){background:#ffbd9c}.brand strong{letter-spacing:3px;font-size:18px;display:block;line-height:1.1}.brand small{font-size:10px;color:var(--muted);letter-spacing:2px}.nav-links{display:flex;gap:32px;color:#b9c4d8;font-size:13px}.nav-links a:hover{color:#fff}.header-status{font-size:12px;color:#aab9d0;display:flex;align-items:center;gap:9px}.online-dot{display:inline-block;width:7px;height:7px;background:#9df4c0;box-shadow:0 0 10px #9df4c0;border-radius:50%;vertical-align:middle}.hero{display:grid;grid-template-columns:1fr .89fr;gap:54px;align-items:center;padding-top:102px;padding-bottom:115px}.eyebrow,.section-kicker{color:#a9ffcd;letter-spacing:2.4px;font-size:11px;font-weight:750}.eyebrow{display:inline-flex;gap:9px;align-items:center;border:1px solid rgba(168,255,205,.19);padding:12px 16px;border-radius:50px;background:rgba(157,255,192,.04)}.eyebrow-star{font-size:17px;line-height:0}.hero h1{font-size:clamp(40px,4.5vw,65px);letter-spacing:-2.8px;line-height:1.18;margin:28px 0 24px;font-weight:800}.hero h1 span{background:linear-gradient(105deg,#b2ffdb 10%,#b3cbff 51%,#d7b3ff 88%);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy>p{color:#a9b5cc;font-size:15px;line-height:2;margin:0}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:1px solid transparent;border-radius:12px;padding:14px 18px;font-weight:700;font-size:13px;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px)}.button-primary{color:#07130f;background:#afffd0;box-shadow:0 7px 30px rgba(122,255,184,.13)}.button-primary:hover{background:#d4ffe5}.button-secondary{color:#e8edf9;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10)}.button-secondary:hover{background:rgba(255,255,255,.09)}.button-outline{background:transparent;border-color:#344157;color:#d6def0}.hero-metrics{margin-top:53px;display:flex;align-items:center;gap:28px}.hero-metrics>div:not(.metric-line){display:flex;flex-direction:column;gap:8px}.hero-metrics strong{font-size:27px;font-weight:760;letter-spacing:-1px}.hero-metrics span{font-size:11px;color:#93a3bd}.metric-line{height:27px;width:1px;background:#354056}.hero-preview{display:flex;flex-direction:column;padding:23px;background:linear-gradient(142deg,#202843,#11172a 60%,#191a35);border:1px solid #3d4565;border-radius:25px;min-height:405px;color:#fff;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 80px rgba(84,79,184,.12);transform:rotate(2.2deg);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.hero-preview:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 40px 85px rgba(0,0,0,.4)}.hero-preview:before{content:"";position:absolute;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);width:300px;transform:rotate(25deg);height:800px;top:-150px;left:15%;pointer-events:none}.preview-topline{display:flex;align-items:center;justify-content:space-between;color:#8998b5;font-size:11px;letter-spacing:1px}.preview-tag{color:#c5d6f3;display:flex;gap:8px;align-items:center}.pong-preview{height:255px;border-radius:12px;border:1px solid rgba(166,183,243,.11);background:radial-gradient(ellipse at center,rgba(40,56,89,.65),rgba(8,13,30,.97));margin-top:22px;position:relative;overflow:hidden}.preview-net{position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed rgba(221,236,255,.18)}.preview-score{position:absolute;top:15px;left:0;right:0;text-align:center;font-size:32px;letter-spacing:15px;font-weight:800;color:#dfebff}.preview-score span{color:#88e7af}.preview-paddle{position:absolute;top:95px;width:9px;height:64px;border-radius:5px;box-shadow:0 0 17px currentColor}.preview-paddle-left{left:32px;background:#b8ffd7;color:#82efa9}.preview-paddle-right{right:32px;top:125px;background:#b4a6ff;color:#8a7fff}.preview-ball{width:13px;height:13px;background:#fff;position:absolute;top:130px;left:56%;border-radius:50%;box-shadow:0 0 20px white;animation:preview-bounce 3.4s ease-in-out infinite alternate}@keyframes preview-bounce{from{transform:translate(-90px,-60px)}to{transform:translate(95px,46px)}}.preview-label{position:absolute;bottom:13px;color:#8490ad;font-size:10px;letter-spacing:2px}.preview-label-left{left:32px}.preview-label-right{right:32px}.preview-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px}.preview-bottom strong,.preview-bottom small{display:block}.preview-bottom strong{font-size:21px}.preview-bottom small{font-size:11px;letter-spacing:1.5px;color:#8794af;margin-top:6px}.play-round{height:43px;width:43px;border-radius:50%;display:grid;place-items:center;background:#b2ffcf;color:#121727;font-size:14px}.games-section{padding-top:20px;padding-bottom:88px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px;gap:15px}.section-heading h2,.how-section h2{font-size:clamp(28px,3vw,39px);margin:13px 0 12px;letter-spacing:-1.3px}.section-heading h2 span,.how-section h2 span{color:#b7afff}.section-heading p,.how-section p{font-size:13px;line-height:1.9;color:#91a0ba;margin:0}.games-total{font-size:10px;letter-spacing:1.5px;color:#7385a6;border:1px solid #2b364a;border-radius:30px;padding:12px 15px;white-space:nowrap}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.game-card{display:flex;flex-direction:column;background:linear-gradient(160deg,#151c2e,#111727);padding:0;border:1px solid #2a3248;border-radius:20px;text-align:left;color:inherit;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}.game-card:hover{transform:translateY(-6px);border-color:#53658a;box-shadow:0 22px 45px rgba(0,0,0,.3)}.card-art{height:151px;position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate}.art-pattern{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:25px 25px;mask-image:linear-gradient(to top,#000,transparent)}.art-emoji{font-size:57px;filter:drop-shadow(0 10px 21px rgba(0,0,0,.3));transition:transform .3s}.game-card:hover .art-emoji{transform:scale(1.15) rotate(-6deg)}.art-number{position:absolute;right:13px;top:11px;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.55)}.art-pong{background:radial-gradient(ellipse at 50% 70%,#3e7c63,#183d42 80%)}.art-snake{background:radial-gradient(ellipse at 50% 70%,#336745,#18352c 80%)}.art-tetris{background:radial-gradient(ellipse at 50% 70%,#6560a9,#242245 80%)}.art-2048{background:radial-gradient(ellipse at 50% 70%,#bd8241,#4b2e2b 80%)}.art-mines{background:radial-gradient(ellipse at 50% 70%,#966579,#39253d 80%)}.art-breakout{background:radial-gradient(ellipse at 50% 70%,#a45d5b,#492b34 80%)}.art-invaders{background:radial-gradient(ellipse at 50% 70%,#505f9d,#222b50 80%)}.art-sokoban{background:radial-gradient(ellipse at 50% 70%,#696d99,#31354b 80%)}.card-content{display:flex;flex-direction:column;padding:18px;flex:1}.card-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-title-row strong{font-size:17px}.card-arrow{color:#a6fac8;font-size:16px}.card-subtitle{font-size:11px;color:#93a1bb;margin-top:5px;min-height:25px}.card-desc{font-size:11px;color:#a4afc4;margin-top:5px;margin-bottom:20px;line-height:1.65;min-height:35px}.card-footer{border-top:1px solid #30384e;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:5px;color:#8392b0;font-size:10px}.card-footer span:last-child{color:#a8f7c9;white-space:nowrap}.how-section{border:1px solid #2f3a50;border-radius:23px;padding:35px;display:flex;align-items:center;gap:25px;margin-bottom:84px;background:linear-gradient(110deg,#1b2536,#101729)}.how-icon{display:grid;place-items:center;width:77px;height:77px;flex-shrink:0;border-radius:19px;background:rgba(168,255,209,.09);color:#a8ffd0;font-size:42px}.how-section>div:nth-child(2){flex:1}.how-section h2{font-size:27px}.how-section .button{white-space:nowrap}.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:31px 0}.footer-inner{display:flex;justify-content:space-between;color:#7c8ca6;font-size:11px;gap:20px}.footer-inner span:first-child{color:#aebdd6;letter-spacing:1.3px}
/* Game window */
.play-shell[hidden],.game-message[hidden]{display:none!important}.play-shell{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}.modal-backdrop{position:absolute;inset:0;background:rgba(3,6,14,.86);backdrop-filter:blur(18px)}.game-window{position:relative;z-index:1;background:#121a2a;border:1px solid #3c4b66;box-shadow:0 30px 110px rgba(0,0,0,.6);border-radius:22px;width:min(1150px,100%);max-height:calc(100vh - 42px);overflow:auto;overscroll-behavior:contain}.window-header{height:75px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2c3a50}.window-title{display:flex;gap:13px;align-items:center}.window-icon{font-size:26px;width:41px;height:41px;display:grid;place-items:center;background:#233349;border-radius:10px}.window-eyebrow{font-size:9px;color:#a4f6c1;letter-spacing:2px}.window-title h2{font-size:21px;margin:2px 0 0}.icon-button{border:1px solid #3c4960;border-radius:10px;background:#242e40;color:#dbe5f4;width:38px;height:38px;font-size:28px;line-height:0}.icon-button:hover{background:#3b4964}.window-body{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:24px;padding:24px}.board-column{min-width:0}.board-frame{position:relative;border:1px solid #33405a;background:#090f1e;border-radius:16px;padding:8px;display:grid;place-items:center;overflow:hidden}.board-frame canvas{display:block;max-width:100%;width:100%;aspect-ratio:720/440;height:auto;background:#0d1525;border-radius:9px;touch-action:none;cursor:crosshair}.game-message{position:absolute;inset:8px;background:rgba(8,13,25,.89);z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:20px;backdrop-filter:blur(7px)}.game-message strong{font-size:clamp(23px,4vw,38px);letter-spacing:-1px}.game-message span{color:#abb9d3;font-size:14px;line-height:1.7}.game-sidebar{display:flex;flex-direction:column;min-width:0}.side-label{color:#8da0bf;letter-spacing:1.6px;font-weight:700;font-size:10px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 29px}.stat-card{padding:16px 13px;background:#1a2538;border:1px solid #2b3a55;border-radius:12px;min-width:0}.stat-card span{display:block;font-size:11px;color:#99a9c2}.stat-card strong{display:block;font-size:27px;color:#d9ffe9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:8px;font-variant-numeric:tabular-nums}.sidebar-section p{line-height:1.8;color:#bbc6d9;font-size:12px}.key-hints{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.key-hints span{background:#233047;border:1px solid #3b4a61;border-radius:7px;padding:8px 10px;font-size:10px;color:#cbd7e9}.sidebar-spacer{flex:1;min-height:26px}.sidebar-actions{display:grid;gap:9px}.sidebar-actions button{width:100%}.side-footnote{font-size:10px;color:#768baa;text-align:center;margin:20px 0 0}.touch-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;min-height:0}.touch-controls:empty{display:none}.touch-control{border:1px solid #3e4f67;border-radius:13px;min-width:65px;min-height:47px;background:#1e3042;color:#f1f4fe;font-size:20px;font-weight:700;touch-action:none;user-select:none}.touch-control:active,.touch-control.pressed{background:#3b5e63;color:#a5ffd0}.touch-control.wide{font-size:12px;padding-inline:12px;min-width:102px}.touch-pad{display:grid;grid-template-columns:repeat(3,53px);grid-template-rows:repeat(2,45px);gap:4px}.touch-pad button{min-width:0;min-height:0;border-radius:9px}.touch-pad .up{grid-column:2;grid-row:1}.touch-pad .left{grid-column:1;grid-row:2}.touch-pad .down{grid-column:2;grid-row:2}.touch-pad .right{grid-column:3;grid-row:2}
@media(max-width:1050px){.hero{gap:30px;padding-top:70px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero h1{font-size:47px}}
@media(max-width:790px){.container{width:calc(100% - 36px)}.hero{grid-template-columns:1fr;gap:42px;padding-top:65px;padding-bottom:75px}.hero h1{font-size:clamp(39px,8vw,57px)}.hero-preview{max-width:540px;width:100%;margin-inline:auto;transform:none}.hero-metrics{margin-top:34px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.window-body{grid-template-columns:1fr}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.game-sidebar>.side-label{grid-column:1/-1}.stats-grid{margin-bottom:15px}.sidebar-section{grid-column:1/2}.sidebar-spacer{display:none}.sidebar-actions{grid-column:2/3;align-self:center}.side-footnote{grid-column:1/-1}.game-window{max-height:calc(100dvh - 20px)}.play-shell{padding:10px}.how-section{gap:16px}.how-section>.button{display:none}}
@media(max-width:480px){.container{width:calc(100% - 30px)}.site-header{height:69px}.nav-links{display:none}.header-status{font-size:10px}.hero{padding-top:47px}.hero h1{letter-spacing:-1.6px;margin:20px 0 16px}.hero-copy>p{font-size:13px}.desktop-only{display:none}.hero-actions{gap:9px}.hero-actions .button{font-size:12px;padding:12px}.hero-preview{min-height:350px;padding:17px}.pong-preview{height:216px}.hero-metrics{gap:18px}.game-grid{gap:12px}.card-art{height:110px}.art-emoji{font-size:42px}.card-content{padding:13px}.card-title-row strong{font-size:15px}.card-subtitle{font-size:10px}.card-desc{font-size:10px;margin-bottom:10px}.card-footer{font-size:9px;flex-wrap:wrap;gap:6px}.games-section{padding-bottom:52px}.section-heading{display:block}.games-total{display:none}.how-section{padding:23px;gap:13px}.how-icon{width:47px;height:47px;font-size:29px;border-radius:12px}.how-section h2{font-size:22px}.footer-inner{display:block;line-height:2}.play-shell{padding:0}.game-window{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:none}.window-header{height:64px;padding-inline:15px}.window-title h2{font-size:18px}.window-body{padding:13px;gap:13px}.board-frame{padding:3px;border-radius:8px}.board-frame canvas{border-radius:5px}.game-sidebar{grid-template-columns:1fr 1fr;gap:0 12px}.stats-grid{margin:9px 0 14px}.stat-card{padding:10px}.stat-card strong{font-size:20px}.sidebar-section p{font-size:11px;margin:8px 0}.side-label{font-size:9px}.key-hints{margin-top:9px}.key-hints span{font-size:9px;padding:5px}.sidebar-actions button{padding:10px;font-size:11px}.touch-control{min-width:60px;min-height:44px}.side-footnote{margin-top:8px}.touch-controls{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep decorative glows from changing the mobile layout viewport. */
html{overflow-x:clip}
@media(max-width:480px){.ambient-a{width:210px;height:210px;right:0;top:-70px}.ambient-b{width:250px;height:250px;left:0}.play-shell{display:block;width:100vw;overflow:hidden}.game-window{position:absolute;inset:0;width:100%;min-width:0;max-width:100vw}.window-body{display:block}.board-frame{min-width:0;width:100%}.board-frame canvas{min-width:0;width:100%;max-width:100%}.game-sidebar{margin-top:14px}}