:root{color-scheme:dark;--bg:#101723;--panel:#182230;--panel2:#202d3c;--text:#f6f4ed;--muted:#95a5b5;--mint:#66e2bc;--orange:#ffac6d;--line:#ffffff12;font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0}input{min-width:0;background:#101923;border:1px solid #ffffff23;border-radius:10px;color:var(--text);padding:13px 16px;outline:none}input:focus{border-color:var(--mint)}[hidden]{display:none!important}.site-header{max-width:1256px;padding:27px 38px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:16px;letter-spacing:1px}.brand-icon{display:grid;place-items:center;background:var(--mint);color:#123b34;font-size:26px;border-radius:11px;width:42px;height:42px;transform:rotate(-7deg)}.brand small{display:block;font-size:9px;letter-spacing:3.1px;color:var(--muted);margin-top:5px;font-weight:500}.header-right{display:flex;gap:9px;align-items:center;font-size:11px;color:var(--muted)}.live-dot{width:6px;height:6px;background:var(--mint);border-radius:100%}.icon-button{border:1px solid #ffffff1a;background:transparent;border-radius:50%;color:var(--muted);width:34px;height:34px;margin-left:10px;font-size:19px}.icon-button.active{color:var(--mint);border-color:var(--mint)}#lobby{max-width:1180px;margin:auto;padding:0 0 30px}.hero{padding:65px 12px 52px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--mint);margin:0 0 19px}h1{font-size:clamp(42px,5.2vw,68px);font-weight:750;letter-spacing:-2px;line-height:1.2;margin:0}h1 span{color:var(--mint)}.hero-note{line-height:1.9;color:var(--muted);font-size:14px;margin:24px 0}.hero-tags{display:flex;gap:20px;font-size:11px;color:#c0cbd6}.hero-tags span:first-letter{color:var(--mint)}.hero-art{height:300px;position:relative;background:radial-gradient(ellipse at 50% 50%,#1c3940 0%,transparent 70%);overflow:hidden}.orbit{position:absolute;border:1px solid #89c3bb23;border-radius:50%;width:350px;height:220px;left:60px;top:30px;transform:rotate(-28deg)}.orbit-two{transform:rotate(28deg);width:260px;height:280px;left:100px;top:5px}.hero-score{position:absolute;inset:70px 0 0;display:flex;align-items:flex-start;justify-content:center;gap:17px;font-size:92px;font-weight:800;font-style:italic;letter-spacing:-6px;color:#e0ede7}.hero-score span{font-style:normal;font-size:12px;letter-spacing:2px;color:var(--muted);padding-top:54px}.hero-paddle{position:absolute;top:130px;width:18px;height:100px;border-radius:10px;background:var(--mint);transform:rotate(20deg);box-shadow:0 0 25px #66e2bc33}.paddle-one{left:48px}.paddle-two{right:45px;top:65px;background:var(--orange);transform:rotate(20deg);box-shadow:0 0 25px #ffac6d33}.hero-puck{position:absolute;left:71%;top:72%;width:23px;height:23px;border-radius:50%;background:#fff5d8;box-shadow:-24px 10px 0 #fff5d820,-48px 20px 0 #fff5d80a}.hero-sticker{position:absolute;border:1px solid #ffffff20;border-radius:5px;padding:7px 10px;font-size:10px;letter-spacing:2px;transform:rotate(-10deg);color:var(--mint);left:80px;top:12px}.sticker-two{top:243px;left:245px;transform:rotate(7deg);color:var(--orange)}.spark{position:absolute;color:var(--orange);font-size:28px}.spark-one{top:25px;right:100px}.spark-two{bottom:30px;left:80px;color:var(--mint)}.art-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:9px;letter-spacing:3px;color:#758a96}.join-bar{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;background:#192532;border:1px solid #ffffff0b;border-radius:14px;gap:20px}.tiny-label{color:var(--muted);font-size:10px;letter-spacing:1px;display:block;margin-bottom:8px}.join-bar strong{font-size:16px;font-weight:600}.join-bar form{display:flex;gap:10px}.join-bar input{width:165px;letter-spacing:2px;text-transform:uppercase;font-size:12px}.button{background:var(--mint);color:#123b33;border-radius:9px;padding:13px 19px;font-size:13px;font-weight:700;transition:transform .15s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}.button:hover{background:#8af3cf;transform:translateY(-1px)}.button:active{transform:translateY(1px)}.button.small{padding:11px 20px}.text-button{background:transparent;color:var(--muted);font-size:12px;padding:9px 0}.text-button:hover{color:var(--text)}.games-section{padding:45px 0 20px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.section-heading h2{font-size:25px;margin:0;letter-spacing:-.6px}.section-heading h2 span{color:var(--mint);margin-left:7px}.section-heading p{font-size:12px;color:var(--muted)}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-card{background:var(--panel);border:1px solid #ffffff0b;border-radius:16px;overflow:hidden;transition:transform .2s,border .2s}.game-card:hover{transform:translateY(-4px);border-color:#66e2bc55}.card-art{height:210px;position:relative;overflow:hidden;border-bottom:1px solid #ffffff0b}.card-number{position:absolute;top:20px;left:22px;font-size:9px;letter-spacing:1.8px;color:#c9e0dc8a;z-index:2}.art-tag{position:absolute;bottom:17px;left:22px;font-size:10px;color:#c9e0dca1;letter-spacing:1px}.tank-art{background:radial-gradient(ellipse at 50% 90%,#294943 0%,#172c30 75%)}.tank-art:before{content:"";position:absolute;inset:0;background:linear-gradient(#a7dedb09 1px,transparent 1px),linear-gradient(90deg,#a7dedb09 1px,transparent 1px);background-size:28px 28px;transform:perspective(250px) rotateX(18deg) scale(1.1)}.arena-wall{position:absolute;background:#355251;border:1px solid #4e726e;border-bottom:8px solid #263d40;border-radius:3px}.wall-a{width:72px;height:30px;left:35px;top:78px;transform:rotate(-12deg)}.wall-b{width:45px;height:75px;right:53px;top:102px;transform:rotate(-12deg)}.mini-tank{position:absolute;width:49px;height:37px;top:120px;left:92px;background:#62c9a7;border-radius:8px;transform:rotate(-25deg);border-top:6px solid #344b4a;border-bottom:6px solid #344b4a;box-shadow:3px 8px 0 #0003}.mini-tank:before{content:"";position:absolute;inset:3px 11px;border-radius:6px;background:#87e9bf;box-shadow:0 3px 0 #3e937a}.mini-tank i{position:absolute;width:33px;height:8px;background:#92f0d3;left:29px;top:9px;border-radius:3px}.mini-tank.orange{background:#c78a56;top:60px;left:auto;right:70px;transform:rotate(155deg)}.mini-tank.orange:before{background:#ffbd77;box-shadow:0 3px 0 #aa754a}.mini-tank.orange i{background:#ffd3a6}.bullet-trail{position:absolute;left:170px;top:112px;width:45px;height:4px;background:linear-gradient(90deg,transparent,#ffdf91);transform:rotate(-25deg)}.impact{position:absolute;left:215px;top:91px;font-size:27px;color:#fff4c7}.pong-art{background:radial-gradient(ellipse at center,#2e3451,#20253c)}.pong-line{position:absolute;left:50%;top:20px;bottom:20px;border-left:2px dashed #ffffff13}.pong-paddle{position:absolute;left:42px;top:88px;width:10px;height:65px;border-radius:6px;background:#9d9cff;box-shadow:0 0 20px #9d9cff33}.pp-two{left:auto;right:42px;top:55px;background:#f3b5b9}.pong-ball{position:absolute;width:14px;height:14px;background:#fff2e1;left:65%;top:120px;border-radius:50%;box-shadow:-20px -7px 0 #fff2e125,-40px -14px 0 #fff2e10c}.pong-score{display:flex;justify-content:space-evenly;padding-top:70px;font-size:65px;color:#acadd63b;font-weight:800}.gomoku-art{background:radial-gradient(ellipse at center,#454234,#302f29)}.board-preview{position:absolute;left:50%;top:47%;width:190px;height:140px;transform:translate(-50%,-50%) rotate(-10deg);background:linear-gradient(#baaf8840 1px,transparent 1px),linear-gradient(90deg,#baaf8840 1px,transparent 1px);background-size:28px 28px}.board-preview i{position:absolute;width:24px;height:24px;left:73px;top:45px;background:radial-gradient(circle at 30% 25%,#616875,#18202b);border-radius:50%;box-shadow:2px 3px 3px #0005}.board-preview i:nth-child(2){left:101px;top:73px}.board-preview i:nth-child(3){left:45px;top:17px}.board-preview i:nth-child(4){left:101px;top:45px;background:radial-gradient(circle at 30% 25%,#fff9e7,#b5b39f)}.board-preview i:nth-child(5){left:129px;top:73px;background:radial-gradient(circle at 30% 25%,#fff9e7,#b5b39f)}.board-preview i:nth-child(6){left:45px;top:45px;background:radial-gradient(circle at 30% 25%,#fff9e7,#b5b39f)}.board-preview b{position:absolute;left:130px;top:102px;width:23px;height:23px;border:1px dashed #ffdc90;border-radius:50%}.card-body{padding:22px}.card-title{display:flex;align-items:center;justify-content:space-between}.card-title h3{font-size:20px;margin:0;letter-spacing:-.5px}.pill{font-size:10px;color:var(--muted);padding:5px 9px;background:#ffffff07;border-radius:12px}.card-body p{font-size:12px;color:var(--muted);line-height:1.8;min-height:42px;margin:14px 0 19px}.card-actions{display:flex;justify-content:space-between;gap:8px;align-items:center}.card-actions .button{padding:11px 13px;font-size:12px}.card-actions .text-button{font-size:11px}footer{border-top:1px solid var(--line);padding:24px 0 0;margin-top:30px;color:#758496;display:flex;justify-content:space-between;font-size:10px}footer span{letter-spacing:1.3px}
#play{max-width:1280px;padding:28px 32px 40px;margin:auto}.play-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.back-button{color:var(--muted);background:none;padding:0}.room-label{font-size:12px;letter-spacing:1px;color:#c4d2dc}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:22px;align-items:start}.game-panel{background:#15202d;border:1px solid #ffffff0d;border-radius:15px;overflow:hidden}.match-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;gap:12px}.player{display:flex;align-items:center;gap:10px;min-width:100px;flex:1}.player strong{font-size:12px;display:block;max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.avatar{background:#66e2bc12;border:1px solid #66e2bc44;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;color:var(--mint);font-weight:bold;font-size:11px}.p2{justify-content:flex-end;text-align:right}.p2 .avatar{background:#ffac6d10;border-color:#ffac6d44;color:var(--orange)}.scoreboard{display:flex;gap:18px;align-items:center;text-align:center}.scoreboard>span{font-size:30px;font-weight:750;color:var(--mint);font-variant-numeric:tabular-nums}.scoreboard>span:last-child{color:var(--orange)}.scoreboard small{display:block;font-size:9px;font-weight:400;color:var(--muted);white-space:nowrap}.scoreboard strong{display:block;font-size:11px;letter-spacing:2px;margin-top:6px}.canvas-wrap{position:relative;aspect-ratio:8/5;background:#121e28;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.overlay{position:absolute;inset:0;background:#0d172ac4;display:grid;place-items:center;backdrop-filter:blur(7px);padding:20px}.overlay-box{text-align:center;max-width:380px;display:flex;align-items:center;flex-direction:column}.overlay-symbol{font-size:29px;color:var(--mint);margin-bottom:16px;border:1px solid #66e2bc40;width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#66e2bc0a}.overlay .eyebrow{font-size:9px;margin:0 0 12px;letter-spacing:2.4px}.overlay h2{font-size:27px;margin:0 0 11px}.overlay p:not(.eyebrow){color:#b0c0cc;font-size:12px;line-height:1.8;margin:0 0 20px}.overlay .button{min-width:155px}.overlay .text-button{margin-top:8px}.overlay.counting{background:#0d172a66;backdrop-filter:none;pointer-events:none}.overlay.counting .overlay-symbol{font-size:70px;width:auto;height:auto;border:0;background:none;font-weight:bold}.match-footer{padding:13px 18px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;gap:10px}.match-footer>div{display:flex;align-items:center;gap:15px}.match-footer .text-button{padding:0;font-size:10px}.game-sidebar{display:grid;gap:15px}.aside-card{background:#182330;border:1px solid var(--line);border-radius:14px;padding:24px 20px}.aside-card h3{font-size:21px;margin:13px 0}.aside-card p{font-size:12px;line-height:1.9;color:var(--muted)}.control-row{border-top:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b7c3cc;gap:12px}kbd{border:1px solid #ffffff20;border-bottom-width:3px;background:#24313d;border-radius:5px;padding:4px 6px;font-size:10px;font-family:inherit;white-space:nowrap}.guide-tip{font-size:11px;line-height:1.8;background:#66e2bc0b;padding:12px;border-radius:8px;color:#9acdbb;margin-top:14px}.small-card p{font-size:11px}.game-toast{position:absolute;left:50%;top:28px;transform:translateX(-50%) translateY(-8px);background:#121c29dc;color:var(--text);padding:10px 18px;border:1px solid #ffffff1c;border-radius:8px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;white-space:nowrap}.game-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.touch-controls{display:none;padding:14px 22px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);touch-action:none;user-select:none}.touch-zone{width:105px;text-align:center;touch-action:none;user-select:none}.stick-base{width:80px;height:80px;margin:auto;border:1px solid #66e2bc40;border-radius:50%;background:#66e2bc0b;display:grid;place-items:center;position:relative}.stick-base:after{content:"+";position:absolute;color:#66e2bc30;font-size:70px;font-weight:200;line-height:1;pointer-events:none}.stick-knob{display:block;width:34px;height:34px;border-radius:50%;background:#66e2bc55;border:1px solid #66e2bc88;position:relative;z-index:1}.aim-base{border-color:#ffac6d40;background:#ffac6d0b}.aim-base .stick-knob{background:#ffac6d55;border-color:#ffac6d88}.aim-base:after{color:#ffac6d30}.touch-zone>span{display:block;font-size:9px;color:var(--muted);margin-top:8px;white-space:nowrap}.dash-button{border:1px solid #ffffff20;background:#263341;border-radius:50%;width:62px;height:62px;font-size:11px;color:#e3e9ec}.dash-button small{display:block;font-size:8px;color:var(--muted);margin-top:4px}dialog{width:min(390px,calc(100% - 36px));border:1px solid #ffffff20;border-radius:18px;background:#192431;color:var(--text);padding:32px}dialog::backdrop{background:#060c17bb;backdrop-filter:blur(8px)}dialog form{display:flex;flex-direction:column;gap:16px}dialog .eyebrow{margin:5px 0 0}dialog h2{font-size:27px;margin:0}dialog p{color:var(--muted);font-size:12px;margin:0 0 5px}dialog input{width:100%}.dialog-close{position:absolute;right:17px;top:12px;color:var(--muted);background:none;font-size:24px}#toast{position:fixed;bottom:28px;left:50%;max-width:90vw;transform:translate(-50%,12px);background:#e7eee9;color:#183e33;box-shadow:0 10px 30px #0005;border-radius:10px;padding:13px 20px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1250px){#lobby{padding-left:32px;padding-right:32px}.hero{gap:25px}.card-actions{flex-wrap:wrap}.game-grid{gap:16px}.card-body{padding:19px}.hero-art{transform:scale(.92)}}@media(max-width:950px){.play-layout{grid-template-columns:1fr}.game-sidebar{grid-template-columns:1.5fr 1fr}.aside-card{padding:20px}.game-grid{gap:13px}.card-art{height:180px}.mini-tank{left:55px}.mini-tank.orange{right:45px}.card-body p{min-height:65px}.hero-art{transform:scale(.85);margin-left:-25px;margin-right:-25px}.hero{gap:15px}.hero-tags{gap:12px;font-size:10px}.card-actions .button{width:100%}.card-actions .text-button{margin:auto}.game-toast{top:15px;font-size:11px}.play-heading{font-size:12px}}
@media(max-width:700px){.site-header{padding:19px 22px}.brand{font-size:14px}.brand-icon{width:35px;height:35px;font-size:22px}.brand small{font-size:8px}.header-right{font-size:10px}.icon-button{margin-left:4px;width:31px;height:31px}#lobby{padding:0 20px 25px}.hero{grid-template-columns:1fr;padding:36px 4px 30px;gap:10px;position:relative}.hero h1{font-size:51px;letter-spacing:-1px}.eyebrow{font-size:10px}.hero-note{font-size:12px;margin:18px 0}.hero-tags{gap:17px}.hero-art{height:230px;transform:scale(.84);margin:-10px -25px -20px}.hero-score{font-size:85px;inset:50px 0 0}.orbit{width:280px;height:180px;left:50%;margin-left:-140px;top:18px}.orbit-two{height:200px;width:220px;margin-left:-110px}.paddle-one{left:20px;top:110px;height:77px}.paddle-two{right:20px;top:50px;height:77px}.sticker-one{left:70px;top:0}.sticker-two{left:auto;right:70px;top:196px}.hero-puck{top:75%}.art-caption{display:none}.spark-one{right:60px;top:8px}.spark-two{left:55px;bottom:10px}.join-bar{padding:20px;display:block}.join-bar strong{font-size:14px}.join-bar form{margin-top:15px;gap:8px}.join-bar input{flex:1;width:100px;font-size:11px;padding:11px}.join-bar .button{font-size:11px;padding:11px 13px}.games-section{padding-top:31px}.section-heading{margin-bottom:18px}.section-heading h2{font-size:22px}.section-heading p{font-size:10px}.game-grid{grid-template-columns:1fr;gap:20px}.card-art{height:190px}.card-body{padding:22px}.card-body p{min-height:auto;font-size:12px}.card-actions{flex-wrap:nowrap}.card-actions .button{width:auto;padding:12px 20px}.card-actions .text-button{margin:0;font-size:12px}.mini-tank{left:85px}.mini-tank.orange{right:80px}.wall-a{left:42px}.wall-b{right:50px}.bullet-trail{left:169px}.impact{left:210px}footer{font-size:9px;gap:12px}footer span{font-size:8px}#play{padding:17px 12px 30px}.play-heading{flex-wrap:wrap;gap:12px;margin-bottom:15px}.play-heading>.text-button{font-size:10px}.back-button{font-size:11px}.room-label{font-size:10px}.match-header{padding:15px 12px;gap:8px}.player{gap:7px;min-width:70px}.player strong{font-size:10px;max-width:70px}.player small{font-size:8px}.avatar{width:27px;height:30px;border-radius:8px;font-size:9px}.scoreboard{gap:10px}.scoreboard>span{font-size:25px}.scoreboard small{font-size:8px}.scoreboard strong{font-size:10px}.match-footer{font-size:9px;padding:12px;align-items:flex-start}.match-footer>div{gap:10px;white-space:nowrap}.match-footer .text-button{font-size:9px}.game-sidebar{grid-template-columns:1fr}.small-card{display:none}.aside-card h3{font-size:18px}.aside-card p{font-size:11px}.overlay{padding:12px}.overlay-symbol{font-size:20px;width:38px;height:38px;border-radius:12px;margin-bottom:8px}.overlay .eyebrow{font-size:7px;margin-bottom:7px;letter-spacing:1.3px}.overlay h2{font-size:20px;margin-bottom:6px}.overlay p:not(.eyebrow){font-size:10px;line-height:1.5;margin-bottom:10px;max-width:245px}.overlay .button{padding:9px 16px;font-size:11px;min-width:130px}.overlay .text-button{padding:4px 0;font-size:9px;margin-top:5px}.overlay.counting .overlay-symbol{font-size:50px}.game-toast{font-size:10px;padding:7px 12px;top:8px}.game-panel[data-game="gomoku"] .canvas-wrap{aspect-ratio:1}.touch-device .game-panel[data-game="tank"] .touch-controls{display:flex}.desktop-only{display:none}}
@media(pointer:coarse){.game-panel[data-game="tank"] .touch-controls{display:flex}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}