:root{--ink:#1d1b18;--muted:#736d65;--paper:#f3eee5;--card:#fffdf8;--line:#d9d1c5;--red:#a8342c;--red-dark:#74231f;--green:#315b48;--gold:#c9963d;--shadow:0 18px 45px rgba(47,39,30,.12);font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 4%,rgba(197,147,73,.13),transparent 30%),radial-gradient(circle at 90% 5%,rgba(168,52,44,.08),transparent 27%),var(--paper)}button,input{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")}.app-shell{position:relative;width:min(1180px,calc(100% - 40px));min-height:100vh;margin:auto;display:flex;flex-direction:column}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(78,68,58,.17)}.brand-button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;color:inherit;cursor:pointer;text-align:left}.brand-logo,.profile-chip>span:first-child{display:grid;place-items:center;width:44px;height:44px;color:#fff;background:var(--red);border:1px solid #c86156;box-shadow:inset 0 0 0 3px var(--red),inset 0 0 0 4px rgba(255,255,255,.55);transform:rotate(-3deg);font-size:22px}.brand-button strong,.brand-button small,.profile-chip strong,.profile-chip small{display:block}.brand-button strong{font-size:19px;letter-spacing:.08em}.brand-button small,.profile-chip small{font:11px/1.5 "Microsoft YaHei",sans-serif;color:var(--muted);letter-spacing:.14em}.topbar-actions{display:flex;align-items:center;gap:14px}.connection-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;background:rgba(255,253,248,.7);padding:8px 13px;font:12px "Microsoft YaHei",sans-serif;color:var(--muted)}.connection-pill i{width:7px;height:7px;background:#c69b42;border-radius:50%;box-shadow:0 0 0 4px rgba(198,155,66,.12)}.connection-pill.connected i{background:#447657}.connection-pill.disconnected i,.connection-pill.error i{background:var(--red)}.profile-chip{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:16px}.profile-chip>span:first-child{width:34px;height:34px;border-radius:50%;box-shadow:none;transform:none;font-size:14px;background:#2d2b28}.profile-chip strong{font-size:13px}.view{padding:58px 0 70px;flex:1}.eyebrow{display:block;margin-bottom:12px;color:var(--red);font:700 11px/1.2 "Arial",sans-serif;letter-spacing:.2em}.home-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;min-height:360px}.home-hero h1{margin:0;font-size:clamp(52px,7vw,86px);line-height:1.04;letter-spacing:-.04em;font-weight:600}.home-hero h1 em{color:var(--red);font-style:normal}.home-hero p{max-width:510px;margin:25px 0 0;font:16px/1.8 "Microsoft YaHei",sans-serif;color:var(--muted)}.hero-orbit{position:relative;width:300px;height:300px;margin:auto;border:1px solid rgba(168,52,44,.2);border-radius:50%;animation:float 6s ease-in-out infinite}.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;inset:42px;border:1px dashed rgba(48,85,67,.25);border-radius:50%}.hero-orbit:after{inset:88px;background:rgba(255,253,248,.65);border-style:solid}.orbit-core,.orbit-piece{position:absolute;display:grid;place-items:center;border-radius:50%;z-index:2}.orbit-core{inset:50%;width:94px;height:94px;margin:-47px;background:var(--ink);color:#fff;font-size:38px;box-shadow:0 16px 35px rgba(0,0,0,.2)}.orbit-piece{width:54px;height:54px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font-size:20px}.orbit-one{top:18px;left:122px}.orbit-two{right:12px;top:135px;color:#111}.orbit-three{bottom:10px;left:64px;color:var(--red)}@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:30px 0 22px}.section-heading h2{margin:0;font-size:32px}.section-heading p{max-width:470px;margin:0;color:var(--muted);font:13px/1.7 "Microsoft YaHei",sans-serif;text-align:right}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.game-card{position:relative;min-height:210px;border:1px solid rgba(80,70,60,.16);border-radius:4px;background:var(--card);padding:28px;display:grid;grid-template-columns:90px 1fr 35px;gap:24px;align-items:end;text-align:left;color:inherit;cursor:pointer;overflow:hidden;box-shadow:0 7px 0 rgba(54,47,40,.09),0 18px 36px rgba(54,47,40,.08);transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-5px);box-shadow:0 12px 0 rgba(54,47,40,.07),0 28px 48px rgba(54,47,40,.15)}.game-card:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(54,47,40,.12)}.game-card:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,transparent 55%,rgba(168,52,44,.07));pointer-events:none}.card-number{position:absolute;top:18px;left:22px;color:#aaa39a;font:11px Arial;letter-spacing:.2em}.card-icon{display:grid;place-items:center;width:84px;height:84px;border:2px solid var(--red);border-radius:50%;color:var(--red);font-size:37px;background:#fffaf2;box-shadow:inset 0 0 0 7px #fffaf2,inset 0 0 0 8px rgba(168,52,44,.28)}.card-copy strong,.card-copy small{display:block}.card-copy strong{font-size:25px;margin-bottom:9px}.card-copy small{font:13px "Microsoft YaHei",sans-serif;color:var(--muted)}.card-arrow{align-self:center;justify-self:end;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-family:Arial}.gomoku-card .card-icon{border:0;border-radius:0;background-image:linear-gradient(#c9a56c 1px,transparent 1px),linear-gradient(90deg,#c9a56c 1px,transparent 1px);background-size:18px 18px;box-shadow:none;position:relative}.stones i,.stones b{position:absolute;width:25px;height:25px;border-radius:50%}.stones i{background:#1b1a18;left:20px;top:20px}.stones b{background:#fff;right:8px;bottom:9px;box-shadow:0 2px 7px rgba(0,0,0,.35)}.snake-card{background:#202b25;color:#fff}.snake-card:before{background:radial-gradient(circle at 85% 15%,rgba(110,210,146,.18),transparent 33%)}.snake-card .card-copy small{color:#aebbb4}.snake-card .card-icon{border-color:#73c990;color:#73c990;background:transparent;box-shadow:inset 0 0 0 7px #202b25,inset 0 0 0 8px rgba(115,201,144,.25)}.live-tag{position:absolute;top:18px;left:22px;color:#85dfa5;font:700 10px Arial;letter-spacing:.2em}.ludo-card .card-icon{border-color:#315b48;color:#315b48}.quick-join{margin-top:22px;display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border:1px solid var(--line);background:rgba(255,253,248,.55)}.quick-join strong{font-size:19px}.code-form{display:flex;height:54px}.code-form input{width:210px;border:1px solid var(--line);border-right:0;background:#fffdf9;padding:0 20px;outline:none;font:700 20px/1 Arial;letter-spacing:.28em;text-align:center}.code-form input:focus{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}.code-form button,.primary-button{border:1px solid #bf4c42;background:linear-gradient(#b93f35,#922b25);color:#fff;padding:0 27px;font-weight:700;cursor:pointer;box-shadow:0 5px 0 var(--red-dark),0 12px 22px rgba(116,35,31,.18);text-shadow:0 1px 1px rgba(0,0,0,.3);transition:transform .12s,box-shadow .12s}.code-form button:active,.primary-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-dark)}.back-button{border:0;background:none;color:var(--muted);padding:10px 0;cursor:pointer;font:13px "Microsoft YaHei",sans-serif}.entry-layout{display:grid;grid-template-columns:1fr 1fr;min-height:570px;margin-top:24px}.entry-poster{position:relative;display:flex;flex-direction:column;justify-content:end;background:#282522;color:#fff;padding:56px;overflow:hidden}.entry-poster:before{content:"";position:absolute;width:390px;height:390px;right:-100px;top:-90px;border:1px solid rgba(255,255,255,.15);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02)}.poster-index{position:absolute;top:40px;left:50px;color:#aaa;font:12px Arial;letter-spacing:.25em}.poster-icon{position:absolute;right:70px;top:110px;font-size:130px;color:#d96a5f;opacity:.86}.entry-poster h1{font-size:52px;margin:0 0 12px}.entry-poster p{color:#bcb6af;margin:0;font:15px "Microsoft YaHei",sans-serif}.panel-card{background:var(--card);border:1px solid rgba(70,62,54,.13);box-shadow:var(--shadow)}.entry-actions{padding:76px 68px;display:flex;flex-direction:column;justify-content:center}.entry-actions h2,.invite-panel h2,.players-panel h2,.match-sidebar h2,.snake-sidebar h2{font-size:31px;margin:0 0 16px}.entry-actions>p,.invite-panel>p{font:14px/1.8 "Microsoft YaHei",sans-serif;color:var(--muted);margin:0 0 32px}.primary-button{min-height:58px;display:flex;align-items:center;justify-content:center;gap:12px}.primary-button small{font:11px "Microsoft YaHei",sans-serif;opacity:.75}.primary-button.compact{min-height:48px}.split-label{display:flex;align-items:center;gap:12px;color:#aaa;font:12px "Microsoft YaHei",sans-serif;margin:32px 0 20px}.split-label:before,.split-label:after{content:"";height:1px;background:var(--line);flex:1}.entry-code-form input{flex:1;width:auto}.room-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:32px}.room-heading>div{text-align:center}.room-heading h1{margin:0;font-size:35px}.room-heading .status-badge{justify-self:end}.status-badge{padding:8px 15px;border:1px solid var(--line);border-radius:30px;background:var(--card);font:12px "Microsoft YaHei",sans-serif;color:var(--muted)}.status-badge.live{color:#3c8760}.status-badge.live i{display:inline-block;width:7px;height:7px;background:#45b978;border-radius:50%;margin-right:5px}.waiting-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.invite-panel,.players-panel{min-height:460px;padding:50px}.invite-code{width:100%;min-height:155px;border:1px dashed #b9aa97;background:#f8f2e9;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink)}.invite-code strong{font:700 clamp(56px,8vw,82px)/1 Arial;letter-spacing:.22em;margin-left:.22em}.invite-code small{margin-top:15px;color:var(--muted);font:12px "Microsoft YaHei",sans-serif}.expiry-text{text-align:center;margin-top:16px;color:#a1988e;font:12px "Microsoft YaHei",sans-serif}.player-list{display:grid;gap:10px;margin:26px 0}.player-row{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);background:#fbf8f1}.player-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#2c2925;color:#fff}.player-row strong,.player-row small{display:block}.player-row small{font:11px "Microsoft YaHei",sans-serif;color:var(--muted);margin-top:3px}.player-row .connection-state{margin-left:auto;font:11px "Microsoft YaHei",sans-serif;color:#47735c}.player-row.offline{opacity:.55}.waiting-tip{margin-top:22px;color:var(--muted);font:13px "Microsoft YaHei",sans-serif}.waiting-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c89a45;animation:pulse 1.3s infinite}@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}.playing-layout{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:20px;justify-content:center}.board-card{background:#2a2723;padding:20px;color:#fff;box-shadow:var(--shadow)}.board-topline{display:flex;justify-content:space-between;padding:0 5px 15px;color:#d8d0c4;font:13px "Microsoft YaHei",sans-serif}#gameCanvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#d8b47a;touch-action:none}.match-sidebar{padding:30px;height:max-content}.game-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:25px}.game-controls button,.dialog button{min-height:42px;border:1px solid var(--line);background:#f5f0e8;cursor:pointer}.game-controls .danger,.dialog .danger{color:#fff;background:var(--red);border-color:var(--red)}.text-button{border:0;background:none;text-decoration:underline;color:var(--muted);display:block;margin:25px auto 0;cursor:pointer}.offline-banner{margin-top:12px;background:#6f5525;color:#fff1ce;padding:11px;text-align:center;font:12px "Microsoft YaHei",sans-serif}.ludo-controls{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0 0}.ludo-controls .primary-button{min-width:150px}.snake-view{position:fixed;z-index:5;inset:0;background:#111914;color:#eef7f0;padding:28px max(20px,calc((100vw - 1280px)/2));overflow:auto}.snake-heading{margin-bottom:20px}.snake-heading h1{margin:0}.back-button.light{color:#b2c1b7}.snake-layout{display:grid;grid-template-columns:minmax(0,980px) 260px;gap:20px}.snake-stage{position:relative;background:#07100b;border:1px solid #2e4436;padding:10px}#snakeCanvas{display:block;width:100%;aspect-ratio:4/3;background:#0b1510;touch-action:none}.snake-message{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:rgba(8,15,10,.82);padding:12px 18px;border:1px solid #3f5b49;font:13px "Microsoft YaHei",sans-serif}.snake-sidebar{border:1px solid #2e4436;padding:26px;background:#18231c}.snake-sidebar .eyebrow{color:#78d199}.leaderboard{list-style:none;padding:0;margin:24px 0;counter-reset:rank}.leaderboard li{counter-increment:rank;display:grid;grid-template-columns:24px 13px 1fr auto;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid #2d3b32;font:12px "Microsoft YaHei",sans-serif}.leaderboard li:before{content:counter(rank);color:#708078}.leaderboard i{width:9px;height:9px;border-radius:3px}.snake-help{margin-top:35px;padding-top:20px;border-top:1px solid #2d3b32}.snake-help p{font:12px/1.8 "Microsoft YaHei",sans-serif;color:#91a197}.overlay{position:fixed;z-index:20;inset:0;background:rgba(20,18,16,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.overlay[hidden],.view[hidden],[hidden]{display:none!important}.dialog{width:min(420px,100%);background:var(--card);padding:40px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}.dialog-mark{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 20px;border:2px solid var(--red);color:var(--red);font-size:23px;transform:rotate(-4deg)}.dialog h2{font-size:25px;margin:10px 0}.dialog p{color:var(--muted);font:14px/1.7 "Microsoft YaHei",sans-serif}.dialog>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.result-dialog>strong{display:block;font-size:64px;color:var(--red);margin:10px}.result-dialog .primary-button{width:100%;margin-top:25px}.toast{position:fixed;z-index:40;left:50%;bottom:35px;transform:translateX(-50%);background:#282522;color:#fff;padding:13px 20px;box-shadow:0 10px 30px rgba(0,0,0,.25);font:13px "Microsoft YaHei",sans-serif}.toast.error{background:#8d2923}footer{margin-top:auto;min-height:70px;border-top:1px solid rgba(78,68,58,.17);display:flex;align-items:center;justify-content:space-between;color:#8e867d;font:11px "Microsoft YaHei",sans-serif;letter-spacing:.08em}footer a{color:inherit}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){.app-shell{width:min(100% - 28px,680px)}.topbar{height:78px}.connection-pill span{display:none}.profile-chip small{display:none}.home-hero{grid-template-columns:1fr;min-height:auto;padding:55px 0 45px}.home-hero h1{font-size:54px}.hero-orbit{display:none}.section-heading{display:block}.section-heading p{text-align:left;margin-top:10px}.game-grid{grid-template-columns:1fr}.game-card{min-height:175px}.quick-join{display:block}.quick-join .code-form{margin-top:18px}.code-form input{min-width:0;flex:1;width:auto}.entry-layout,.waiting-layout,.playing-layout,.snake-layout{grid-template-columns:1fr}.entry-poster{min-height:320px;padding:35px}.entry-poster h1{font-size:40px}.poster-icon{font-size:90px;right:35px;top:70px}.entry-actions{padding:42px 30px}.room-heading{grid-template-columns:1fr auto}.room-heading>div{grid-row:2;grid-column:1/-1;margin-top:20px}.waiting-layout{gap:12px}.invite-panel,.players-panel{min-height:auto;padding:30px}.invite-code{min-height:125px}.playing-layout{display:flex;flex-direction:column}.board-card{padding:10px}.match-sidebar{padding:22px}.snake-view{padding:18px 12px}.snake-sidebar{order:-1;padding:15px}.snake-sidebar h2,.snake-sidebar .snake-help{display:none}.leaderboard{display:flex;overflow:auto;margin:10px 0;gap:18px}.leaderboard li{min-width:125px;border:0}.home-view{padding-top:20px}.view{padding-bottom:40px}}
@media(max-width:480px){.topbar-actions{gap:7px}.profile-chip{padding-left:8px}.profile-chip>span:first-child{display:none}.brand-logo{width:38px;height:38px}.brand-button strong{font-size:16px}.home-hero h1{font-size:47px}.game-card{grid-template-columns:70px 1fr 25px;padding:22px;gap:16px}.card-icon{width:66px;height:66px;font-size:29px}.card-copy strong{font-size:21px}.quick-join{padding:20px 16px}.code-form button{padding:0 17px}.invite-code strong{font-size:54px}.room-heading h1{font-size:27px}.entry-code-form{height:58px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.footer-connection{display:inline-flex;align-items:center;gap:6px;color:#9a7a38;cursor:default;pointer-events:none;user-select:none;text-decoration:none}
.footer-connection i{width:7px;height:7px;border-radius:50%;background:#c69b42;box-shadow:0 0 0 3px rgba(198,155,66,.12)}
.footer-connection.connected{color:#3f7655}
.footer-connection.connected i{background:#45a66b;box-shadow:0 0 0 3px rgba(69,166,107,.14)}
.footer-connection.disconnected,.footer-connection.error{color:#a8342c}
.footer-connection.disconnected i,.footer-connection.error i{background:#b7463d;box-shadow:0 0 0 3px rgba(183,70,61,.13)}