@import"https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600&family=Sora:wght@300;400;600&display=swap";:root{--bg: #0d1110;--panel: #141a18;--panel-light: #1b2320;--accent: #b39b6b;--accent-soft: #e3d2a2;--text: #e9efe8;--muted: #9aa5a0;--board: #caa772;--line: #5a4631;--black: #111312;--white: #f0e9dc;--danger: #b65b53}*{box-sizing:border-box}body{margin:0;font-family:Sora,system-ui,sans-serif;background:radial-gradient(circle at top,#1b231f,#0d1110 55%,#0a0d0c);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:#0a0c0bb3;border-bottom:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand{display:flex;flex-direction:column}.brand-mark{font-family:Fraunces,serif;font-size:24px;letter-spacing:1px}.brand-sub{font-size:12px;color:var(--muted)}.top-actions button{background:transparent}main{flex:1;padding:24px 32px 32px}.home{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}.room{display:grid;grid-template-columns:280px minmax(520px,1fr) 280px;gap:20px}.panel{background:var(--panel);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px #00000059}.panel h2,.panel h3{margin-top:0;font-family:Fraunces,serif;letter-spacing:.5px}label{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:13px;color:var(--muted)}input,select{background:var(--panel-light);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:var(--text);padding:10px 12px;font-size:14px}button{background:var(--accent);color:#2c2418;border:none;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-1px);box-shadow:0 6px 14px #00000040}button.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}button:disabled{opacity:.5;cursor:not-allowed}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.join-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.muted{color:var(--muted);font-size:13px}.side{display:flex;flex-direction:column;gap:16px}.room-code{font-family:Fraunces,serif;font-size:22px;color:var(--accent-soft);margin-bottom:12px}.players{display:flex;flex-direction:column;gap:8px}.player{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#ffffff0a;border-radius:10px}.player.black{border-left:3px solid var(--black)}.player.white{border-left:3px solid var(--white)}.timer-row{display:flex;justify-content:space-between;margin-bottom:8px}.board{display:flex;flex-direction:column;gap:16px}.board-wrap{background:linear-gradient(140deg,#d7b37b,#b8905c);padding:18px;border-radius:20px;box-shadow:inset 0 0 0 1px #0003,0 20px 45px #00000059}.board-grid{position:relative;display:grid;gap:0;background:var(--board);border-radius:12px}.board-cell{position:relative;background:transparent;border:none;aspect-ratio:1 / 1;padding:0}.board-cell .line-h,.board-cell .line-v{position:absolute;background:var(--line);opacity:.7}.board-cell .line-h{height:1px;width:100%;top:50%;left:0}.board-cell .line-v{width:1px;height:100%;left:50%;top:0}.board-cell .star{position:absolute;width:6px;height:6px;background:var(--line);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.stone{position:absolute;top:10%;right:10%;bottom:10%;left:10%;border-radius:50%;box-shadow:0 6px 12px #00000059}.stone.black{background:radial-gradient(circle at 30% 30%,#444,#0f1110)}.stone.white{background:radial-gradient(circle at 30% 30%,#fff,#dcd3c5)}.board-cell.dead .stone{opacity:.4}.dead-mark{position:absolute;font-size:20px;color:var(--danger);top:50%;left:50%;transform:translate(-50%,-50%)}.board-cell.last-move .stone:after{content:"";position:absolute;top:35%;right:35%;bottom:35%;left:35%;border:2px solid rgba(255,255,255,.6);border-radius:50%}.status-bar{display:flex;justify-content:space-between;background:#ffffff0a;padding:10px 16px;border-radius:12px}.chat-box{height:220px;overflow:auto;background:#0003;border-radius:12px;padding:10px;margin-bottom:12px}.chat-item{font-size:13px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}.chat-input{display:grid;grid-template-columns:1fr auto;gap:8px}.score-line{display:flex;justify-content:space-between;font-size:16px;margin-top:12px}@media (max-width: 1200px){.room{grid-template-columns:1fr}}