:root{color-scheme:dark;font-family:Inter,SF Pro Display,PingFang SC,Microsoft YaHei,system-ui,sans-serif;--bg: #11100d;--bg-2: #1a1712;--panel: rgba(30, 27, 22, .88);--panel-solid: #201d18;--panel-soft: rgba(255, 255, 255, .045);--text: #f7efe2;--muted: #b6a99a;--muted-2: #83776a;--brass: #d9aa59;--jade: #6fb6a4;--amber: #f0b562;--danger: #e77d63;--line: rgba(247, 239, 226, .13);--wood-line: rgba(54, 28, 12, .72);--shadow: 0 24px 70px rgba(0, 0, 0, .34)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(145deg,rgba(217,170,89,.12),transparent 32%),radial-gradient(circle at 15% 20%,rgba(111,182,164,.1),transparent 28%),linear-gradient(135deg,#0d0c0a 0%,var(--bg) 48%,#1a1410 100%);color:var(--text)}button{border-radius:6px;font:inherit}button:hover:not(:disabled){filter:brightness(1.08)}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible{outline:3px solid rgba(217,170,89,.42);outline-offset:3px}.app-shell{width:min(1520px,100%);min-height:100vh;margin:0 auto;padding:22px}.topbar,.lobby-header,.match-header,.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar{min-height:72px;padding-bottom:18px}.brand-button{display:grid;gap:4px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer}.brand-button span,.eyeline{margin:0;color:var(--brass);font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.brand-button strong{font-size:clamp(1.35rem,2vw,2.2rem);letter-spacing:0}.top-actions,.match-actions,.panel-tools,.undo-banner>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.auth-box{display:grid;grid-template-columns:minmax(128px,160px) minmax(118px,150px) auto;align-items:center;gap:8px;max-width:min(100%,500px)}.auth-box.is-signed-in{display:flex;max-width:360px;min-height:40px;padding:0 8px 0 12px;border:1px solid rgba(111,182,164,.34);background:#6fb6a41a}.auth-box span,.auth-box small{color:var(--muted);font-size:.74rem}.auth-box strong{overflow:hidden;max-width:150px;text-overflow:ellipsis;white-space:nowrap}.auth-box input{min-width:0;height:40px;border:1px solid var(--line);border-radius:6px;background:#fff1;color:var(--text);padding:0 10px}.auth-box input::placeholder{color:var(--muted-2)}.auth-box small{grid-column:1 / -1;color:var(--danger)}.compact-button{min-height:34px;padding-inline:10px;white-space:nowrap}.connection-pill,.match-phase{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--line);background:#1f1d19b8;color:var(--muted);font-size:.84rem}.connection-pill:before,.phase-dot{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:999px;background:#6e6258}.connection-pill.is-online:before,.phase-playing{background:#6fd899;box-shadow:0 0 0 4px #6fd8991a}.primary-button,.secondary-button,.ghost-button,.size-button{min-height:40px;padding:0 14px;cursor:pointer}.primary-button{border:1px solid rgba(217,170,89,.52);background:linear-gradient(135deg,#d9aa59f0,#b46f2eeb);color:#19120a;font-weight:800}.secondary-button,.size-button{border:1px solid rgba(217,170,89,.36);background:#d9aa5921;color:var(--text)}.ghost-button{border:1px solid var(--line);background:#ffffff0b;color:var(--text)}.notice{margin-bottom:14px;padding:12px 14px;border:1px solid rgba(111,182,164,.35);background:#6fb6a41f;color:var(--text)}.notice-error{border-color:#e77d636b;background:#e77d6321}.home-grid{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);gap:20px}.hero-panel,.lobby-shell,.match-shell,.game-surface{border:1px solid var(--line);background:radial-gradient(circle at 28% 12%,rgba(217,170,89,.12),transparent 24%),linear-gradient(180deg,#2b261ff0,#0f0e0cfa);box-shadow:var(--shadow)}.hero-panel{position:relative;overflow:hidden;min-height:650px;padding:clamp(24px,4vw,48px)}.hero-panel h1,.lobby-header h1,.match-header h1{margin:8px 0 0;font-size:clamp(2.1rem,4.8vw,5.4rem);line-height:.96;letter-spacing:0}.hero-board{position:absolute;inset:auto 40px 40px;aspect-ratio:1.25;border:18px solid #3e2515;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(135deg,#d0a06a,#7a4523);background-size:12.5% 12.5%;box-shadow:0 34px 64px #00000070,inset 0 0 44px #fff1cc24;transform:perspective(900px) rotateX(54deg) rotate(-8deg)}.hero-piece{position:absolute;display:grid;place-items:center;width:18%;aspect-ratio:1;border-radius:999px;background:#14110dd1;color:var(--text);font-size:clamp(1.8rem,4vw,4.6rem);box-shadow:0 18px 30px #0000005c}.hero-piece-a{left:18%;top:18%}.hero-piece-b{right:14%;top:24%}.hero-piece-c{left:34%;bottom:16%;background:#080706}.hero-piece-d{right:30%;bottom:24%;background:#f5eddf;color:#19120a}.game-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-card{display:grid;align-content:end;min-height:318px;padding:22px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(217,170,89,.15),transparent 34%),#201d18eb;color:var(--text);text-align:left;cursor:pointer;box-shadow:0 16px 42px #00000038}.game-card:nth-child(2){background:linear-gradient(135deg,rgba(111,182,164,.18),transparent 34%),#201d18eb}.game-card strong{margin-top:18px;font-size:clamp(1.45rem,2.4vw,2.25rem)}.game-card small,.game-card em{display:block;margin-top:8px;color:var(--muted);font-size:.94rem;font-style:normal;line-height:1.45}.game-card em{color:var(--brass)}.game-mark{display:grid;place-items:center;width:64px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.36),transparent 36%),#14110d;color:var(--brass);font-size:2.2rem}.lobby-shell,.match-shell{padding:clamp(18px,3vw,32px)}.lobby-header,.match-header{margin-bottom:18px}.lobby-header h1,.match-header h1{font-size:clamp(1.8rem,3vw,3.6rem)}.room-list{display:grid;gap:12px}.room-list-card,.empty-room,.seat-board,.waiting-panel,.undo-banner{border:1px solid var(--line);background:#12110fa3}.room-list-card{display:grid;grid-template-columns:minmax(160px,1fr) minmax(260px,1fr) auto;gap:16px;align-items:center;min-height:86px;padding:16px}.room-list-card strong{display:block;font-size:1.25rem}.room-list-card small,.empty-room span,.seat-card small,.undo-banner span{color:var(--muted);font-size:.86rem}.room-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;color:var(--muted);font-size:.86rem}.room-stats span{min-height:34px;padding:9px 10px;background:#ffffff0a}.empty-room{display:grid;gap:8px;padding:30px}.empty-room strong{font-size:1.35rem}.seat-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;padding:12px}.seat-card{min-height:92px;padding:14px;background:#ffffff09}.seat-card.is-mine{border:1px solid rgba(217,170,89,.62);background:#d9aa591f}.seat-card span,.turn-card span,.history-card span,.note-card span{display:block;margin-bottom:8px;color:var(--brass);font-size:.78rem;font-weight:800}.seat-card strong{display:block;overflow:hidden;font-size:1.15rem;text-overflow:ellipsis;white-space:nowrap}.waiting-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:180px;padding:clamp(20px,4vw,40px)}.waiting-panel h2,.panel-header h2{margin:0;font-size:clamp(1.4rem,2.4vw,2.8rem);line-height:1.03;letter-spacing:0}.undo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:14px;border-color:#d9aa596b;background:#d9aa591c}.game-surface{padding:clamp(14px,2vw,24px)}.panel-header{min-height:64px;margin-bottom:16px}.board-row{display:grid;grid-template-columns:minmax(320px,1fr) 300px;gap:20px;align-items:stretch}.board-stage{display:grid;place-items:center;min-height:min(68vw,720px);padding:clamp(12px,2vw,28px);border:1px solid rgba(217,170,89,.16);background:linear-gradient(135deg,rgba(217,170,89,.12),transparent 34%),radial-gradient(circle at 50% 45%,rgba(255,235,190,.05),transparent 34%),#15120e;box-shadow:inset 0 0 0 1px #ffffff09,inset 0 -28px 60px #0000003d}.gomoku-board,.chess-board,.go-board{position:relative;width:min(100%,660px);aspect-ratio:1;box-shadow:0 26px 48px #00000057,inset 0 0 30px #ffffff14}.intersection-board{isolation:isolate;overflow:visible;border:14px solid #4b2d18;border-radius:6px;background:radial-gradient(circle at 34% 26%,rgba(255,231,181,.34),transparent 8%),linear-gradient(90deg,rgba(255,255,255,.05),transparent 13%,rgba(0,0,0,.06) 58%,transparent),linear-gradient(135deg,#d09a5a,#b9783c 38%,#9b5a2d 70%,#d1a163)}.intersection-board:before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:8px;background:linear-gradient(90deg,rgba(255,230,180,.2),transparent 18%,rgba(0,0,0,.28) 92%),#4a2915;box-shadow:0 28px 48px #0000006b,0 8px #2a180e}.board-lines{position:absolute;inset:6%;z-index:0;background:linear-gradient(90deg,var(--wood-line) 1.6px,transparent 1.6px),linear-gradient(0deg,var(--wood-line) 1.6px,transparent 1.6px);background-position:0 0;background-size:var(--line-step) var(--line-step);pointer-events:none}.star-point{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#2e170b;box-shadow:0 1px #fff0cd2e}.star-a{left:24.86%;top:24.86%}.star-b{left:75.14%;top:24.86%}.star-c{left:50%;top:50%}.star-d{left:24.86%;top:75.14%}.star-e{left:75.14%;top:75.14%}.gomoku-point,.go-point,.chess-square,.checkers-point{border:0;color:inherit;cursor:pointer}.gomoku-point,.go-point{position:absolute;z-index:2;display:grid;place-items:center;width:calc((88% / var(--board-size)) * 1.05);aspect-ratio:1;transform:translate(-50%,-50%);background:transparent}.go-point{width:calc((88% / var(--board-size)) * 1.02)}.gomoku-point span,.go-point span{position:relative;z-index:2;width:94%;aspect-ratio:1;border-radius:50%;box-shadow:inset -9px -10px 16px #00000061,inset 7px 7px 13px #ffffff52,0 10px 18px #0000006b}.stone-black span{border:1px solid rgba(232,204,154,.22);background:radial-gradient(circle at 34% 27%,#9d9280,#3f3a32 24%,#11100e 58%,#030303)}.stone-white span{border:1px solid rgba(84,66,45,.26);background:radial-gradient(circle at 35% 28%,#fff,#e4ded0 54%,#b9ae9d)}.gomoku-point.is-last:after,.go-point.is-last:after,.go-point:hover:after,.checkers-point.is-selected:after{content:"";position:absolute;inset:-2%;z-index:3;border:2px solid var(--brass);border-radius:50%;pointer-events:none}.chess-square.is-selected,.chess-square.is-last-from{box-shadow:inset 0 0 0 4px #d9aa598f}.chess-square.is-last-to:after{content:"";position:absolute;inset:9%;z-index:2;border:3px solid rgba(217,170,89,.92);border-radius:6px;box-shadow:0 0 0 4px #d9aa592e;pointer-events:none}.gomoku-point.is-win:before{content:"";position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:#d9aa5961}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);overflow:hidden;border:12px solid #4c2d18;border-radius:8px;background:#5f371c}.chess-square{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:0;font-size:clamp(1.75rem,5vw,4.7rem);line-height:1;text-shadow:0 7px 14px rgba(0,0,0,.28)}.chess-square.is-light{background:linear-gradient(135deg,rgba(255,255,255,.12),transparent),#d0a36a}.chess-square.is-dark{background:linear-gradient(135deg,rgba(255,255,255,.05),transparent),#5d351c}.chess-square.is-own-turn{cursor:pointer}.chess-square .piece-white,.chess-square .piece-black{position:relative;z-index:1;transform:translateY(-2%)}.chess-square .piece-white{color:#fff6e7;text-shadow:0 2px 0 rgba(87,51,24,.45),0 9px 15px rgba(0,0,0,.32)}.chess-square .piece-black{color:#15100c;text-shadow:0 1px 0 rgba(255,229,183,.18),0 9px 15px rgba(0,0,0,.28)}.chess-square.is-legal:before{content:"";width:24%;aspect-ratio:1;border-radius:50%;background:#6fb6a4b8;box-shadow:0 0 0 7px #6fb6a42e}.chess-square:not(:empty).is-legal:before{position:absolute;inset:12%;width:auto;border:3px solid rgba(111,182,164,.82);background:transparent}.square-label{position:absolute;left:5px;top:4px;color:#2b190d7a;font-size:clamp(.48rem,1.1vw,.68rem);font-weight:800;text-shadow:none}.chess-square.is-dark .square-label{color:#ffeecd6b}.checkers-board{position:relative;width:min(100%,660px);aspect-ratio:1;border:14px solid #3c2415;border-radius:10px;background:radial-gradient(circle at 50% 50%,rgba(217,170,89,.14),transparent 54%),linear-gradient(135deg,#9a6130,#5b3219);box-shadow:0 26px 48px #00000057,inset 0 0 48px #ffe9b61f}.checkers-point{position:absolute;width:4.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#18141052;box-shadow:inset 0 2px 8px #0000006b,0 1px #ffffff14}.checkers-point.home-amber{background:#f0b5623b}.checkers-point.home-jade{background:#6fb6a43b}.checkers-point span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset -7px -8px 14px #0000003b,inset 5px 4px 12px #ffffff80,0 9px 16px #00000052}.marble-amber span{background:radial-gradient(circle at 34% 28%,#fff3cf,#f0b562 48%,#9b5a23)}.marble-jade span{background:radial-gradient(circle at 34% 28%,#e2fff8,#6fb6a4 48%,#2e6e64)}.checkers-point.is-legal{box-shadow:0 0 0 4px #6fb6a447,inset 0 2px 8px #0000006b}.checkers-point.is-last-from{box-shadow:0 0 0 4px #d9aa5947,inset 0 2px 8px #0000006b}.checkers-point.is-last-to:after{content:"";position:absolute;inset:-34%;z-index:3;border:2px solid rgba(217,170,89,.92);border-radius:50%;box-shadow:0 0 0 4px #d9aa5921;pointer-events:none}.status-rail{display:grid;align-content:start;gap:12px}.turn-card,.history-card,.note-card,.capture-grid{border:1px solid var(--line);background:#12110fad;padding:15px}.turn-card strong{display:block;font-size:1.5rem}.turn-card p,.note-card p{margin:8px 0 0;color:var(--muted);font-size:.92rem;line-height:1.55}.history-card ol{min-height:188px;max-height:252px;margin:0;padding-left:20px;overflow:auto;color:var(--muted);font-size:.88rem;line-height:1.75}.note-card code{display:block;color:var(--muted);font-size:.72rem;line-height:1.5;word-break:break-all}.capture-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.capture-grid span{padding:10px;background:#ffffff0a;text-align:center}.check-alert{display:grid;gap:6px;border:1px solid rgba(231,125,99,.46);background:#e77d6321;padding:15px}.check-alert.is-mate{border-color:#d9aa59b8;background:linear-gradient(135deg,#d9aa5930,#e77d6329),#12110fb8}.check-alert strong{color:#ffd0c4;font-size:1.35rem}.check-alert.is-mate strong{color:#ffe1a8}.check-alert span{color:var(--muted);font-size:.9rem}.icon-button{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid rgba(217,170,89,.28);background:#d9aa591a;color:var(--text);cursor:pointer}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9}.size-button.is-active{border-color:#6fb6a48a;background:#6fb6a43d}@media(max-width:1140px){.home-grid,.board-row{grid-template-columns:1fr}.hero-panel{min-height:430px}.hero-board{left:auto;width:min(420px,62vw)}.status-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.app-shell{padding:14px}.topbar,.lobby-header,.match-header,.panel-header,.waiting-panel,.undo-banner{align-items:stretch;flex-direction:column}.top-actions,.match-actions,.panel-tools{width:100%}.auth-box{grid-template-columns:1fr;width:100%;max-width:none}.auth-box.is-signed-in{width:100%;max-width:none;justify-content:space-between}.primary-button,.secondary-button,.ghost-button{flex:1}.home-grid{gap:14px}.game-gallery{grid-template-columns:1fr}.game-card{min-height:190px}.hero-panel{min-height:360px}.hero-panel h1{font-size:clamp(2rem,12vw,3.4rem)}.hero-board{inset:auto 20px 24px;width:auto}.room-list-card,.room-stats,.seat-board,.status-rail{grid-template-columns:1fr}.board-stage{min-height:auto;padding:10px}.chess-board{border-width:8px}.intersection-board,.checkers-board{border-width:10px}.history-card ol{min-height:108px;max-height:150px}.checkers-point{width:5.7%}}@media(prefers-reduced-motion:no-preference){.gomoku-point span,.go-point span,.checkers-point span,.game-card,.icon-button,.size-button,.primary-button,.secondary-button,.ghost-button{transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease}.gomoku-point:active span,.go-point:active span,.checkers-point:active span{transform:scale(.92)}}