:root{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;color:#16352f;background:#f4f5f0;font-size:16px;--green:#14352f;--muted:#64746c;--gold:#ba8640;--line:#dce2d8}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b5823f;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button{touch-action:manipulation}header,main,footer{max-width:1200px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font-family:"Yu Mincho",serif;font-weight:700;letter-spacing:.12em;font-size:25px;display:flex;gap:13px;align-items:center}.brandmark{background:var(--green);color:#d4b47b;width:40px;height:40px;border-radius:10px;position:relative;text-align:center;font-size:23px;line-height:27px}.brandmark small{position:absolute;right:4px;bottom:2px;color:white;font-size:20px;line-height:20px}.header-note,.quiet{color:var(--muted);font-size:14px}main{padding:48px 38px 24px}.home{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:590px}.eyebrow{letter-spacing:.22em;font-size:12px;font-weight:700;color:var(--gold)}h1{font-family:"Yu Mincho",serif;font-size:54px;line-height:1.5;letter-spacing:.08em;margin:20px 0}p{line-height:1.85}h2{font-size:22px;line-height:1.6;margin:24px 0}.intro p{color:var(--muted)}.mini-board{width:220px;display:flex;gap:8px;margin:38px 0 24px;border-top:1px solid #bda77f;border-bottom:1px solid #bda77f;padding:12px}.mini-board i{display:block;width:30px;height:30px;background:radial-gradient(circle at 35% 25%,#46504b,#101817);border-radius:50%;box-shadow:0 3px 3px #0003}.mini-board .white{background:radial-gradient(circle at 35% 25%,#fff,#d8d8d2)}.setup{background:white;border:1px solid var(--line);padding:30px;border-radius:16px;box-shadow:0 12px 50px #17372b08}.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:20px}.tabs button{background:none;color:var(--muted);padding:12px 4px;flex:1;font-size:14px;border-bottom:3px solid transparent;white-space:nowrap}.tabs button[aria-selected=true]{border-color:var(--green);color:var(--green);font-weight:700}label{display:block;font-size:14px;font-weight:700;margin:20px 0 10px}.choices{display:flex;gap:8px}.choices button{flex:1;border:1px solid var(--line);color:var(--muted);border-radius:8px;background:#f9faf7;padding:12px 5px;font-size:14px}.choices .selected{background:#edf3ed;color:var(--green);border-color:var(--green);font-weight:700}.primary,.secondary{padding:13px 20px;border-radius:8px;font-weight:700;font-size:15px}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#245449}.secondary{background:#f5f7f2;border:1px solid var(--line);color:var(--green)}.full{width:100%;margin-top:24px}.how{margin-top:25px;border-top:1px solid var(--line);padding-top:22px;font-size:14px}.how p{margin:8px 0;color:var(--muted)}.how small{color:var(--muted);font-size:12px}input{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fafbf8}.online-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.online-actions button{flex:1}.text-button{background:none;color:var(--muted);padding:8px 0;font-size:14px;text-decoration:underline;text-underline-offset:4px}.match-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:24px}.arena{display:grid;grid-template-columns:minmax(0,680px) minmax(245px,1fr);gap:40px;align-items:start}.board-wrap{background:#dfbd82;padding:20px;border-radius:12px;box-shadow:0 15px 35px #17372b15}.board-caption{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.15em;color:#5b4828;padding:0 4px 14px}.board{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));aspect-ratio:1;position:relative;background:#e8ca91;isolation:isolate}.cell{background:none;border:0;padding:0;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.cell::before,.cell::after{content:"";position:absolute;background:#8b6c3f;z-index:-1}.cell::before{height:1px;left:0;right:0;top:50%}.cell::after{width:1px;top:0;bottom:0;left:50%}.cell:nth-child(15n+1)::before{left:50%}.cell:nth-child(15n)::before{right:50%}.cell:nth-child(-n+15)::after{top:50%}.cell:nth-child(n+211)::after{bottom:50%}.cell.star{background:radial-gradient(circle,#775d33 0 3px,transparent 3.5px)}.stone{width:85%;height:85%;border-radius:50%;position:relative;box-shadow:1px 3px 4px #0005;pointer-events:none}.stone.black,.stone-icon.black{background:radial-gradient(circle at 30% 25%,#46504b 0%,#18201e 50%,#060b09 100%)}.stone.white,.stone-icon.white{background:radial-gradient(circle at 30% 25%,#fff 0%,#f7f7ed 55%,#cccbbd 100%)}.stone.preview{opacity:.43;box-shadow:none;outline:2px dashed #14352f}.stone.last::after{content:"";width:21%;height:21%;border:2px solid #d09c49;border-radius:50%;position:absolute;left:calc(39.5% - 2px);top:calc(39.5% - 2px)}.stone.win{outline:3px solid #2d785d;outline-offset:1px}.board-help{text-align:center;font-size:12px;color:#5d4928;margin:16px 0 0}.player{display:flex;gap:12px;align-items:center;padding:16px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff}.player.active{border-color:#6f977e;background:#eef3ec}.stone-icon{width:32px;height:32px;flex-shrink:0;border-radius:50%;box-shadow:0 2px 3px #0002}.player small{display:block;font-size:12px;color:var(--muted)}.player strong{display:block;font-size:16px;margin-top:3px;overflow-wrap:anywhere}.turn-badge{display:none;margin-left:auto;font-size:12px;white-space:nowrap;background:var(--green);color:white;padding:5px 8px;border-radius:5px}.active .turn-badge{display:block}.status-card{padding:24px 0}.status-card h2{margin:8px 0;font-size:23px}.status-card p{margin:0;color:var(--muted);font-size:14px}.game-actions{display:flex;gap:10px}.game-actions button{flex:1}details{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;font-size:14px}summary{cursor:pointer;font-weight:700}details p{color:var(--muted);font-size:14px}.room-code{display:flex;flex-direction:column;align-items:start;gap:4px}.room-code strong{font-size:19px;letter-spacing:.1em;overflow-wrap:anywhere}.connection{font-size:12px;display:block;color:var(--muted)}footer{border-top:1px solid var(--line);padding:25px 38px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:30px}.message{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:12px 20px;border-radius:8px;z-index:20;max-width:90vw;box-shadow:0 4px 20px #0003;font-size:14px}dialog{border:1px solid var(--line);border-radius:14px;padding:25px;max-width:90vw;width:390px}dialog::backdrop{background:#0b242b70}dialog h2{margin:0 0 12px}dialog div{display:flex;justify-content:flex-end;gap:10px}[hidden]{display:none!important}
@media(max-width:850px){header{height:76px;padding:0 22px}main{padding:28px 22px}.home{gap:30px;min-height:0}.intro h1{font-size:40px}.arena{gap:22px;grid-template-columns:minmax(0,1fr) 240px}.board-wrap{padding:12px}.status-card h2{font-size:20px}}
@media(max-width:650px){header{height:68px;padding:0 18px}.brand{font-size:22px}.header-note{font-size:12px}main{padding:22px 14px}.home{display:block}.intro{padding:0 12px 20px}.intro h1{font-size:35px;line-height:1.45;margin:10px 0 14px}.intro h1 br{display:none}.intro p{font-size:14px;margin:8px 0}.mini-board{display:none}.setup{padding:22px 18px}.arena{display:flex;flex-direction:column;gap:20px}.board-wrap{width:100%;padding:10px}.match-panel{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.player{padding:12px 8px;margin:0;gap:8px}.player strong{font-size:14px}.stone-icon{width:25px;height:25px}.turn-badge{padding:4px;font-size:11px}.status-card{grid-column:1/-1;padding:10px 0}.status-card h2{font-size:22px}.game-actions,#result-actions,#room-info,details{grid-column:1/-1}.game-actions{margin-top:0}details{margin-top:12px}.board-help{font-size:12px;margin-top:12px}.match-top{margin-bottom:16px}.stone.win{outline-width:2px}.stone.last::after{border-width:1px}footer{padding:20px 18px}.full{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}