:root{--wood:#d9a441;--line:#7a5b1e;--bg:#14161a;--fg:#e8e6e1}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);justify-content:center;margin:0;padding:16px;font:15px/1.5 system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;display:flex}#app{width:100%;max-width:560px}h1{font-size:22px}input,button{font:inherit;color:var(--fg);background:#1e2228;border:1px solid #3a3f46;border-radius:10px;padding:10px 14px}button{cursor:pointer;background:#2b6cb0;border-color:#2b6cb0}button:disabled{opacity:.5;cursor:default}#lobby:not([hidden]){flex-direction:column;gap:12px;display:flex}.row{gap:8px;display:flex}.row input{text-transform:uppercase;flex:1}header,footer{flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;display:flex}#room-label{letter-spacing:.12em;font-weight:700}.board{grid-template-columns:repeat(var(--size), 1fr);aspect-ratio:1;background:var(--wood);border-radius:8px;width:100%;padding:4px;display:grid}.cell{all:unset;aspect-ratio:1;cursor:pointer;position:relative}.cell:disabled{opacity:1;cursor:default}.cell:before{content:"";border-right:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.55;position:absolute;inset:0}.cell.star:after{content:"";background:var(--line);border-radius:50%;width:6px;height:6px;position:absolute;bottom:-3px;right:-3px}.cell.black:after,.cell.white:after{content:"";border-radius:50%;width:84%;height:84%;position:absolute;inset:8% auto auto 8%;box-shadow:0 1px 2px #00000073}.cell.black:after{background:radial-gradient(circle at 32% 30%,#555,#000)}.cell.white:after{background:radial-gradient(circle at 32% 30%,#fff,#c8c8c8)}.cell.last{outline-offset:-2px;z-index:1;outline:2px solid #e53e3e}.cell.win:after{box-shadow:0 0 0 3px #38a169}#toast{z-index:10;background:#e53e3e;border-radius:10px;padding:10px 16px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}body.offline #board{pointer-events:none}body.offline #lobby button{opacity:.5;cursor:not-allowed}body.offline #status:after{content:" · 连接中断,正在重连…";color:#e53e3e}