#view-gomoku-local .local-shell{padding:clamp(16px,2vw,28px)}.local-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.local-head h2{margin:0;font:500 clamp(2rem,4vw,3.3rem)/1 var(--font-display)}.local-head p{margin:8px 0 0;color:var(--text-dim)}.local-score{display:flex;gap:12px;flex-wrap:wrap;font:.8rem var(--font-mono)}.local-score span{padding:9px 12px;border:1px solid var(--line);border-radius:10px}.local-score b{margin-left:12px;font-size:1.15rem}.local-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:clamp(20px,3vw,40px);padding-top:20px;align-items:start}.local-board-area{min-width:0;width:min(100%,780px);margin:auto}.local-clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.local-clock{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font:.76rem var(--font-mono)}.local-clock strong{font:600 clamp(1.05rem,2vw,1.6rem) var(--font-mono)}.local-clock.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}.local-clock.is-low strong{color:var(--accent)}.local-board{display:grid;grid-template-columns:repeat(15,1fr);width:100%;aspect-ratio:1;overflow:hidden;padding:clamp(6px,1vw,12px);border:1px solid #a8865d;border-radius:14px;background:var(--local-board-color,#d4a96f);box-shadow:0 12px 30px #251b111f}.local-colors{display:flex;flex-wrap:wrap;gap:8px}.local-colors .local-color{width:26px;height:26px;min-height:26px;padding:0;border-radius:50%}.local-colors .local-color[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.local-cell{position:relative;min-width:0;min-height:0;padding:0;border:0;background:transparent;cursor:pointer}.local-cell:before{content:"";position:absolute;inset:0;background:linear-gradient(#795d3c,#795d3c) center/1px 100% no-repeat,linear-gradient(#795d3c,#795d3c) center/100% 1px no-repeat;opacity:.8}.local-cell.is-star:not(.is-black):not(.is-white):after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#5e452c;transform:translate(-50%,-50%)}.local-cell.is-black,.local-cell.is-white{z-index:1}.local-cell.is-black:after,.local-cell.is-white:after{content:"";position:absolute;z-index:2;inset:9%;border-radius:50%;box-shadow:0 2px 4px #0005}.local-cell.is-black:after{background:radial-gradient(circle at 30% 25%,#515151,#111 65%)}.local-cell.is-white:after{background:radial-gradient(circle at 30% 25%,#fff,#e9e4da 65%);border:1px solid #7776}.local-cell.is-last:after{box-shadow:0 0 0 2px var(--accent),0 2px 4px #0005}.local-cell.is-cursor{z-index:3;outline:3px solid var(--accent);outline-offset:-3px;border-radius:6px;background:color-mix(in srgb,var(--accent) 12%,transparent)}.local-cell.is-cursor:not(.is-black):not(.is-white):after{content:"";position:absolute;z-index:2;inset:12%;border-radius:50%;border:2px dashed var(--accent);background:#fff5}.local-cell:focus-visible{z-index:4;outline:3px solid var(--accent)}.local-help{font-size:.78rem;color:var(--text-dim);text-align:center}.local-side{display:grid;gap:18px}.local-turn{font:500 2rem var(--font-display)}.local-position{font:.83rem var(--font-mono);color:var(--text-dim)}.local-section{border-top:1px solid var(--line);padding-top:16px}.local-section h3{margin:0 0 12px;font-size:.85rem}.local-section p{color:var(--text-dim);font-size:.8rem;line-height:1.5}.local-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}.local-side button{min-height:39px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);padding:8px 12px;font:600 .78rem var(--font-body);cursor:pointer}.local-side button:hover,.local-side button:focus-visible{border-color:var(--accent);outline:none}.local-time button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.local-new,.local-connect,.local-disconnect,.local-directions,.local-assign-black,.local-assign-white,.local-right-only{width:100%;margin-top:8px}.local-pair-status{margin-top:10px;font:.75rem var(--font-mono);line-height:1.5;color:var(--text-dim)}.local-side button[hidden]{display:none}@media (max-width:900px){.local-layout{grid-template-columns:1fr}.local-side{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.local-head{display:block}.local-score{margin-top:14px}.local-side{grid-template-columns:1fr}.local-clocks{gap:6px}.local-clock{padding:8px}}.controller-toggle{font-size:1.05rem;line-height:1}.controller-toggle.is-connected{color:var(--accent)}.controller-panel{position:absolute;z-index:50;top:calc(100% - 2px);right:clamp(12px,2vw,30px);width:min(330px,calc(100vw - 24px));padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 16px 35px #0002}.controller-panel.is-hidden{display:none}.controller-panel h2{margin:0 0 8px;font:500 1.5rem var(--font-display)}.controller-panel p,.controller-panel small{display:block;color:var(--text-dim);font-size:.78rem;line-height:1.45}.controller-panel button{margin:5px 5px 4px 0;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}.controller-panel button:hover,.controller-panel button:focus-visible{border-color:var(--accent);outline:none}.controller-panel button[hidden]{display:none}.controller-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.controller-slot{min-width:0;padding:10px;border:1px solid var(--line);border-radius:9px}.controller-slot strong{display:block;font-size:.78rem}.controller-slot small{min-height:2.6em;margin-top:5px;font:.68rem/1.35 var(--font-mono)}.controller-slot button{width:100%;margin:8px 0 0;padding:6px;font-size:.72rem}.topbar{position:relative;z-index:200;overflow:visible}