*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color: #1a1a2e;--card-bg: #16213e;--text-color: #eee;--text-muted: #888;--accent-color: #4a90d9;--success-color: #4caf50;--board-color: #dcb35c;--board-line: #8b7355;--stone-black: #111;--stone-white: #f5f5f5}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);color:var(--text-color);min-height:100vh;min-height:100dvh}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--card-bg);border-bottom:1px solid rgba(255,255,255,.1)}.header h1{font-size:1.5rem;font-weight:600}.connection-status{font-size:.85rem;padding:.25rem .75rem;border-radius:1rem;background:#ffffff1a}.connection-status.connected{color:var(--success-color)}.connection-status.connecting{color:orange}.connection-status.disconnected{color:#f44336}.main-content{flex:1;display:flex;flex-direction:column;padding:1rem;max-width:600px;margin:0 auto;width:100%}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:1rem}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{padding:.5rem 1rem;border:none;border-radius:.5rem;font-size:1rem;cursor:pointer;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-color);color:#fff}.btn-primary:hover:not(:disabled){background:#3a7bc8}.btn-secondary{background:#ffffff1a;color:var(--text-color)}.btn-secondary:hover:not(:disabled){background:#fff3}.btn-small{padding:.25rem .75rem;font-size:1.25rem;font-weight:700}.btn-large{padding:.75rem 2rem;font-size:1.1rem}.setup-menu{display:flex;flex-direction:column;gap:1.5rem}.setup-menu h2{font-size:1.1rem;margin-bottom:.75rem;color:var(--text-muted)}.player-slots .slots{display:flex;gap:1rem}.slot{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--card-bg);border-radius:.75rem;border:2px solid transparent;cursor:pointer;transition:all .2s}.slot:hover{border-color:#fff3}.slot.is-me{border-color:var(--accent-color)}.slot.ready{background:#4caf5033}.slot-label{font-weight:600}.slot-status{font-size:.85rem;color:var(--text-muted)}.ready-badge{color:var(--success-color);margin-left:.25rem}.stone{width:40px;height:40px;border-radius:50%;box-shadow:2px 2px 4px #0000004d}.stone.black{background:radial-gradient(circle at 30% 30%,#444,var(--stone-black))}.stone.white{background:radial-gradient(circle at 30% 30%,#fff,#ddd);border:1px solid #ccc}.stone.mini{width:20px;height:20px;display:inline-block;vertical-align:middle}.config-section{background:var(--card-bg);padding:1rem;border-radius:.75rem}.config-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.config-row:last-child{margin-bottom:0}.config-row label{font-weight:500}.size-buttons{display:flex;gap:.5rem}.size-btn{padding:.5rem .75rem;background:#ffffff1a;border:none;border-radius:.5rem;color:var(--text-color);cursor:pointer;transition:all .2s}.size-btn:hover:not(:disabled){background:#fff3}.size-btn.active{background:var(--accent-color)}.size-btn:disabled{opacity:.5;cursor:not-allowed}.win-condition{display:flex;align-items:center;gap:.75rem}.win-value{font-size:1.25rem;font-weight:600;min-width:2rem;text-align:center}.actions{display:flex;flex-direction:column;align-items:center;gap:.75rem}.waiting-message{color:var(--text-muted);font-style:italic}.ready-info{color:var(--text-muted);font-size:.9rem}.spectator-notice{text-align:center;padding:1rem;background:var(--card-bg);border-radius:.75rem;color:var(--text-muted)}.game-info{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.turn-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.25rem;font-weight:600;padding:.75rem;background:var(--card-bg);border-radius:.75rem}.turn-indicator.my-turn{background:#4a90d94d;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.winner-text{display:flex;align-items:center;gap:.5rem}.captures{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:var(--card-bg);border-radius:.75rem}.capture-count{display:flex;align-items:center;gap:.5rem}.capture-count.leading .count{color:var(--success-color)}.count{font-size:1.5rem;font-weight:700}.win-target{font-size:.85rem;color:var(--text-muted)}.my-color{text-align:center;font-size:.9rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:.5rem}.game-board-container{display:flex;justify-content:center;align-items:center;flex:1;padding:1rem}.game-board{--cell-size: 40px;position:relative;display:grid;grid-template-rows:repeat(var(--board-size),var(--cell-size));background:var(--board-color);border-radius:4px;box-shadow:0 4px 20px #0000004d;padding:calc(var(--cell-size) / 2)}.board-row{display:flex}.intersection{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.intersection:before{content:"";position:absolute;width:1px;height:100%;background:var(--board-line);left:50%;transform:translate(-50%)}.intersection:after{content:"";position:absolute;width:100%;height:1px;background:var(--board-line);top:50%;transform:translateY(-50%)}.intersection.edge-top:before{top:50%;height:50%}.intersection.edge-bottom:before{bottom:50%;height:50%}.intersection.edge-left:after{left:50%;width:50%}.intersection.edge-right:after{right:50%;width:50%}.intersection .stone{width:calc(var(--cell-size) * .85);height:calc(var(--cell-size) * .85);z-index:2;position:relative}.intersection.can-play:hover .stone-preview{opacity:.5}.stone-preview{width:calc(var(--cell-size) * .85);height:calc(var(--cell-size) * .85);border-radius:50%;opacity:0;transition:opacity .15s;z-index:2;position:relative}.stone-preview.black{background:radial-gradient(circle at 30% 30%,#444,var(--stone-black))}.stone-preview.white{background:radial-gradient(circle at 30% 30%,#fff,#ddd)}.last-move-marker{position:absolute;width:calc(var(--cell-size) * .25);height:calc(var(--cell-size) * .25);background:#e53935;border-radius:50%;z-index:3;pointer-events:none}.game-over-actions{display:flex;justify-content:center;margin-top:1rem}.error-toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:#f44336;color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;cursor:pointer;animation:slideUp .3s ease;z-index:1000}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 480px){.header h1{font-size:1.25rem}.size-buttons{flex-wrap:wrap}.size-btn{padding:.4rem .6rem;font-size:.9rem}}@media (pointer: coarse){.intersection{min-width:44px;min-height:44px}.btn{min-height:44px}}