:root{color:#18201a;background:#f7f8f3;font-family:Inter,Microsoft YaHei,PingFang SC,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.home,.game-page{min-height:100vh;padding:28px}.home{display:grid;place-items:center}.home-hero{width:min(980px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;padding:54px;border:1px solid #dce3d4;border-radius:8px;background:linear-gradient(135deg,rgba(232,178,88,.18),transparent 34%),#fff;box-shadow:0 24px 70px #232e1c1f}.brand-line,.topbar-kicker,.status-label{margin:0;color:#60705a;font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1{margin:8px 0 0;font-size:clamp(2rem,5vw,4rem);line-height:1.05}.home-copy{max-width:520px;color:#4d5848;font-size:1.05rem;line-height:1.8}.mode-actions{display:grid;gap:16px}.mode-button,.lobby-create,.primary-action,.secondary-action,.danger-action,.join-form button,.icon-button{border:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;font-weight:700;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.mode-button:hover,.lobby-create:hover,.primary-action:hover,.secondary-action:hover,.danger-action:hover,.join-form button:hover,.icon-button:hover{transform:translateY(-1px)}.mode-button{min-height:82px;justify-content:flex-start;padding:0 24px;color:#1b2719;background:#edf4e9;box-shadow:inset 0 0 0 1px #d2dfca;font-size:1.05rem}.mode-button--primary,.primary-action,.lobby-create,.join-form button{color:#fff;background:#2f6b42;box-shadow:0 12px 28px #2f6b4238}.topbar{width:min(1180px,100%);margin:0 auto 22px;display:flex;align-items:center;gap:16px}.topbar h1{font-size:clamp(1.6rem,3vw,2.5rem)}.icon-button{width:46px;color:#24301f;background:#fff;box-shadow:inset 0 0 0 1px #dce3d4}.game-layout{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(320px,760px) minmax(260px,340px);align-items:start;gap:24px}.board-shell{width:100%;aspect-ratio:1 / 1;border-radius:8px;padding:clamp(12px,2.2vw,22px);background:#c9914b;box-shadow:inset 0 0 0 2px #6e431840,0 26px 64px #3e2c1838}.board-shell--disabled .board-cell:not(:disabled){cursor:default}.gomoku-board{--board-edge: 6%;--board-play-size: 88%;--intersection-size: calc(var(--board-play-size) / 14);position:relative;width:100%;height:100%;overflow:hidden;background-color:#d8a158;background-image:linear-gradient(135deg,#ffe8b53d,#7a491414);border:2px solid rgba(83,51,19,.72)}.gomoku-board:before{content:"";position:absolute;inset:var(--board-edge);background-image:linear-gradient(rgba(63,41,17,.62) 1px,transparent 1px),linear-gradient(90deg,rgba(63,41,17,.62) 1px,transparent 1px);background-size:calc(100% / 14) calc(100% / 14);background-position:0 0;border-right:1px solid rgba(63,41,17,.62);border-bottom:1px solid rgba(63,41,17,.62);pointer-events:none}.star-point{position:absolute;z-index:1;width:clamp(4px,1.1%,8px);height:clamp(4px,1.1%,8px);border-radius:999px;background:#3f2911b8;transform:translate(-50%,-50%);pointer-events:none}.board-cell{position:absolute;z-index:2;width:var(--intersection-size);height:var(--intersection-size);border:0;background:transparent;display:grid;place-items:center;padding:0;transform:translate(-50%,-50%)}.board-cell:not(:disabled):hover:after{content:"";width:42%;height:42%;border-radius:999px;background:#1e271b2e}.stone{width:86%;height:86%;border-radius:999px;display:grid;place-items:center;position:relative}.stone--black{background:radial-gradient(circle at 32% 28%,#4a4a4a,#0d0d0d 58%,#000);box-shadow:0 5px 9px #0000004d}.stone--white{background:radial-gradient(circle at 34% 26%,#fff,#f1efe8 60%,#c9c4b9);box-shadow:0 4px 9px #503d2347}.last-move-dot{width:24%;height:24%;border-radius:999px;background:#e2a029;box-shadow:0 0 0 2px #fff6}.side-panel,.lobby{border:1px solid #dce3d4;border-radius:8px;background:#fff;box-shadow:0 16px 45px #2832201a}.side-panel{display:grid;gap:16px;padding:22px}.status-block{display:grid;gap:6px}.status-block strong{font-size:1.25rem}.status-block p{margin:0;color:#4d5848;line-height:1.6}.legend,.status-row{display:flex;align-items:center;gap:14px;color:#4d5848}.legend span,.status-row span{display:inline-flex;align-items:center;gap:7px}.legend-stone{width:16px;height:16px;border-radius:50%;display:inline-block}.legend-stone--black{background:#111}.legend-stone--white{background:#f2f0e8;border:1px solid #bcb6aa}.primary-action,.danger-action{width:100%}.secondary-action{width:100%;color:#23321f;background:#edf4e9}.danger-action{color:#7a2117;background:#f9e7e4}.room-tools{display:grid;gap:10px}.chat-box{display:grid;gap:12px;padding-top:14px;border-top:1px solid #e3eadd}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-header strong{color:#1b2719;font-size:1rem}.chat-header span{color:#60705a;font-size:.85rem;font-weight:700}.chat-messages{min-height:150px;max-height:220px;overflow-y:auto;display:grid;align-content:start;gap:8px;padding:10px;border-radius:8px;background:#f7f8f3;box-shadow:inset 0 0 0 1px #e2e8dc}.chat-empty{margin:0;color:#7a8672;font-size:.92rem}.chat-message{justify-self:start;max-width:88%;display:grid;gap:4px}.chat-message--mine{justify-self:end}.chat-message span{color:#60705a;font-size:.72rem;font-weight:800}.chat-message--mine span{text-align:right}.chat-message p{margin:0;padding:8px 10px;border-radius:8px;color:#25301f;background:#fff;box-shadow:inset 0 0 0 1px #dce3d4;line-height:1.45;overflow-wrap:anywhere}.chat-message--mine p{color:#fff;background:#2f6b42;box-shadow:none}.chat-form{display:grid;grid-template-columns:1fr 76px;gap:8px}.chat-form input{width:100%;min-height:42px;border:1px solid #cfd8c6;border-radius:8px;padding:0 12px;outline:none}.chat-form input:focus{border-color:#2f6b42;box-shadow:0 0 0 3px #2f6b4224}.chat-form button{border:0;border-radius:8px;color:#fff;background:#2f6b42;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:.9rem;font-weight:800}.chat-form button:disabled{color:#7c8976;background:#edf4e9}.chat-error{margin:0;color:#9a3412;font-size:.88rem;line-height:1.5}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#1219106b;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.result-modal{position:relative;width:min(390px,100%);display:grid;justify-items:center;gap:14px;padding:30px;border-radius:8px;background:#fff;box-shadow:0 24px 70px #0c120a42;text-align:center}.modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:8px;display:grid;place-items:center;color:#4d5848;background:#edf4e9}.result-badge{width:66px;height:66px;border-radius:999px;display:grid;place-items:center;font-size:1.6rem;font-weight:900}.result-badge--black{color:#fff;background:radial-gradient(circle at 32% 28%,#4a4a4a,#0d0d0d 58%,#000)}.result-badge--white{color:#172016;background:radial-gradient(circle at 34% 26%,#fff,#f1efe8 60%,#c9c4b9);box-shadow:inset 0 0 0 1px #c8c2b7}.result-badge--draw,.result-badge--none{color:#6c4515;background:#f7dfb5}.result-modal h2{margin:0;font-size:2rem;line-height:1.1}.result-modal p{margin:0;color:#4d5848;line-height:1.6}.lobby{width:min(720px,100%);margin:0 auto;padding:28px;display:grid;gap:22px}.lobby-create{min-height:58px;font-size:1.05rem}.join-form{display:grid;gap:10px}.join-form label{font-weight:800}.join-form div{display:grid;grid-template-columns:1fr auto;gap:10px}.join-form input{min-height:46px;width:100%;border:1px solid #cfd8c6;border-radius:8px;padding:0 14px;color:#1b2719;outline:none}.join-form input:focus{border-color:#2f6b42;box-shadow:0 0 0 3px #2f6b4224}.join-form button{padding:0 18px}.muted-text{margin:0;color:#60705a;line-height:1.7}.alert{margin:0;color:#9a3412;line-height:1.6}@media(max-width:900px){.home,.game-page{padding:18px}.home-hero,.game-layout{grid-template-columns:1fr}.home-hero{padding:30px}.side-panel{order:-1}}@media(max-width:560px){.home,.game-page{padding:12px}.home-hero,.lobby,.side-panel{padding:18px}.mode-button{min-height:64px}.join-form div{grid-template-columns:1fr}.board-shell{padding:10px}}