:root{--ink:#25221c;--red:#af3028;--line:#5d3820;--green:#476750}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Noto Serif SC","Songti SC",serif;background:#ded8ca;background-image:linear-gradient(90deg,rgba(80,55,31,.035) 1px,transparent 1px),linear-gradient(rgba(80,55,31,.03) 1px,transparent 1px);background-size:18px 18px}main{max-width:1120px;margin:auto;padding:25px}header{height:58px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #bcb3a1}.brand strong{font-size:29px;color:var(--red)}.brand span{margin-left:12px;font:13px system-ui;color:#71695d}#connection,small{font-family:system-ui}#connection{font-size:12px;color:var(--green)}button,input{font:14px inherit}.login{text-align:center;padding:11vh 0}.seal,.room-mark{display:grid;place-items:center;background:var(--red);color:#f7ead5;box-shadow:5px 5px #aaa08e}.seal{width:66px;height:66px;margin:auto;font-size:40px}.login h1{font-size:38px;margin:22px 0 30px}.login form{display:flex;gap:8px;max-width:440px;margin:auto}.login input{flex:1;min-width:0;border:1px solid #9b8e78;background:#f9f4e9;padding:0 14px}.login button,#createRoom{border:0;background:var(--ink);color:white;padding:0 20px;cursor:pointer}.lobby-head{margin:48px 0 20px;display:flex;justify-content:space-between;align-items:end}.lobby-head h1{font-size:30px;margin:4px 0}.lobby-head small{color:#82796c;letter-spacing:1px}.lobby-head button{height:42px}.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room{display:flex;align-items:center;gap:15px;padding:15px;background:rgba(248,244,233,.76);border:1px solid #c6bca9}.room-mark{width:42px;height:42px;font-size:22px}.room div:nth-child(2){display:grid;gap:3px;flex:1}.room small,.room span{font-size:11px;color:#81786a}.room b{font-size:15px}.room i{font:11px system-ui;color:#a3998d;padding:0 4px}.room button{height:34px;border:1px solid var(--ink);background:transparent;padding:0 12px;cursor:pointer}#emptyRooms{color:#81786a}.topline{display:flex;justify-content:space-between;align-items:center;margin:25px 0 15px}.topline>div{text-align:center;font-size:18px}.topline small{display:block;font-size:10px;color:#7b7367}.topline button{border:0;background:none;cursor:pointer;color:#665d50}.iconbtn{font-size:25px}.layout{display:grid;grid-template-columns:minmax(320px,640px) 240px;gap:38px;align-items:center}.board-wrap{padding:14px;background:#9b623b;box-shadow:8px 9px #b4aa98}.turn{text-align:center;height:26px;color:#fff4d8;font-size:13px}.board{position:relative;display:grid;grid-template:repeat(10,1fr)/repeat(9,1fr);aspect-ratio:8/9;color:var(--line);background:#d9b276;overflow:hidden}.board-art{position:absolute;inset:0;width:100%;height:100%;z-index:0}.cell{position:relative;z-index:1;display:grid;place-items:center;border:0;background:transparent;padding:0;cursor:pointer}.cell.selected::after{content:"";position:absolute;width:68%;aspect-ratio:1;border-radius:50%;border:2px solid #447154}.piece{width:80%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#fff3cd,#e5c58c 72%);border:2px solid currentColor;box-shadow:1px 2px 2px #805537;font-size:clamp(18px,3.2vw,29px);font-weight:bold;z-index:2}.piece.red{color:var(--red)}.piece.black{color:#2a2a26}.player{display:flex;gap:12px;align-items:center;padding:12px 0}.stone{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f3dda8;border:2px solid #282b28;font-size:20px}.red .stone{color:var(--red);border-color:var(--red)}.player b{font-size:15px}.player small{display:block;font-size:10px;color:#7c7467}.versus{text-align:center;color:#9b9281;font:11px system-ui;letter-spacing:4px}#spectators{border-top:1px solid #c7bfaf;padding-top:14px;margin-top:12px;font-size:13px;color:#68665f}.actions{display:grid;gap:7px;margin-top:22px}.actions button{height:42px;border:1px solid #a89c88;background:#f8f3e8;text-align:left;padding:0 13px;cursor:pointer}.actions .danger{color:var(--red)}.notice{margin-top:16px;font-size:13px;line-height:1.6;color:var(--red);min-height:22px}@media(max-width:720px){main{padding:16px}.login{padding:10vh 0}.login h1{font-size:29px}.rooms{grid-template-columns:1fr}.layout{grid-template-columns:1fr;gap:17px}aside{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.versus{display:none}.actions,#spectators,.admin,.notice{grid-column:1/-1}.piece{font-size:clamp(16px,5.5vw,28px)}}