:root {
  color-scheme: dark;
  --ink: #0b100f; --lacquer: #151d1b; --ivory: #f3ead6; --muted: #aaa294;
  --gold: #c7a45d; --gold-bright: #e2c47d; --vermilion: #a73530;
  --wood-dark: #75451d; --wood-mid: #c58a43; --wood-light: #ecc77a;
  --line: #39220e; --focus: #88bde7; --radius-lg: 18px; --radius-md: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; padding: 18px 14px 44px; overflow-x: hidden; color: var(--ivory);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 7%, rgba(68,91,78,.35), transparent 36%),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.015) 49% 51%, transparent 52%) 0 0/34px 34px,
    linear-gradient(145deg, #111a18, #080d0c 72%);
  display: flex; justify-content: center;
}
button, input { font: inherit; }
.app { width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.app-header {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  column-gap: 12px;
  text-align: center;
}
.app-header .eyebrow {
  display: inline-block; margin: 0; color: var(--gold-bright);
  font-family: "Kouzan Brush Font Sousho", "HanziPen SC", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.05rem,3.2vw,1.5rem); font-weight: 800; font-style: italic; letter-spacing: .07em;
  transform: skewX(-5deg); text-shadow: 1px 2px 0 #3e2c12, 0 7px 20px rgba(0,0,0,.7);
}
h1 {
  margin: 2px 0 8px; color: var(--ivory); text-align: center;
  font: 600 clamp(1.55rem,4.5vw,2.2rem)/1.3 "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .13em; text-shadow: 0 3px 18px rgba(0,0,0,.55);
}
.app-header p { grid-column:1 / -1; margin:0 0 4px; color:rgba(243,234,214,.58); font:.78rem "Yu Mincho",serif; letter-spacing:.16em; }

/* 設定 */
.panel {
  position: relative; isolation: isolate; width: min(100%,520px); padding: 25px 27px 27px; overflow: hidden;
  border: 1px solid rgba(199,164,93,.55); border-radius: var(--radius-lg);
  background: linear-gradient(130deg,rgba(255,255,255,.035),transparent 38%), rgba(19,27,25,.95);
  box-shadow: 0 28px 80px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel::after { content:""; position:absolute; inset:7px; z-index:-1; pointer-events:none; border:1px solid rgba(199,164,93,.1); border-radius:12px; }
.panel-heading span { color: var(--gold-bright); font-size:.7rem; font-weight:700; letter-spacing:.2em; }
.panel-heading h2 { margin:5px 0 20px; color:var(--ivory); font:600 1.35rem "Yu Mincho",serif; letter-spacing:.07em; }
.field { margin:0 0 19px; padding:0; border:0; }
.field legend { margin-bottom:9px; padding:0; color:var(--muted); font-size:.85rem; font-weight:600; letter-spacing:.04em; }
.choice-row { display:flex; gap:8px; flex-wrap:wrap; }
.choice-row label { flex:1 1 auto; min-width:84px; }
.choice-row input[type="radio"] { position:absolute; width:1px; height:1px; opacity:0; }
.choice-btn {
  display:block; min-height:48px; padding:11px 9px 9px; cursor:pointer; user-select:none; text-align:center;
  color:var(--ivory); border:1px solid rgba(199,164,93,.32); border-radius:var(--radius-md);
  background:rgba(255,255,255,.035); font-size:.88rem;
  transition:transform .14s,border-color .14s,background .14s,color .14s;
}
.choice-btn strong,.choice-btn small { display:block; }
.choice-btn small { margin-top:3px; color:#968e80; font-size:.66rem; font-weight:500; }
.choice-row label:hover .choice-btn { transform:translateY(-1px); border-color:rgba(226,196,125,.72); background:rgba(255,255,255,.065); }
.choice-row input:checked + .choice-btn {
  color:#16150f; border-color:var(--gold-bright); background:linear-gradient(145deg,#e1c67f,#b99145);
  box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.42); font-weight:700;
}
.choice-row input:checked + .choice-btn small { color:rgba(22,21,15,.7); }
.choice-row input:focus-visible + .choice-btn { outline:3px solid var(--focus); outline-offset:2px; }
.checkbox-row { display:flex; align-items:flex-start; gap:9px; color:#a9a193; font-size:.78rem; line-height:1.55; }
.checkbox-row input { margin-top:3px; accent-color:var(--gold); }
.primary-btn {
  width:100%; padding:13px 18px; cursor:pointer; color:#17140d; border:1px solid #e3ca87; border-radius:var(--radius-md);
  background:linear-gradient(145deg,#e1c67f,#b58a40); box-shadow:0 12px 26px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.48);
  font-size:.98rem; font-weight:800; letter-spacing:.08em; transition:transform .14s,filter .14s;
}
.primary-btn:hover { transform:translateY(-1px); filter:brightness(1.08); }
.secondary-btn,.result-close-btn {
  padding:10px 17px; cursor:pointer; color:var(--ivory); border:1px solid rgba(199,164,93,.62); border-radius:var(--radius-md);
  background:rgba(18,27,24,.95); box-shadow:0 7px 18px rgba(0,0,0,.28); font-size:.88rem; font-weight:600;
  transition:transform .14s,border-color .14s,background .14s;
}
.secondary-btn:hover,.result-close-btn:hover { transform:translateY(-1px); border-color:var(--gold-bright); background:#202a27; }
.primary-btn:focus-visible,.secondary-btn:focus-visible,.result-close-btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

/* 対局 */
.game-screen { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.game-screen[hidden],.panel[hidden],.result-overlay[hidden] { display:none; }
.status-bar {
  width:min(100%,700px); padding:9px 15px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  color:#d9d1c0; border:1px solid rgba(199,164,93,.35); border-radius:var(--radius-md); background:rgba(14,22,20,.82);
  box-shadow:0 10px 26px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.035); font-size:.86rem;
}
.turn-indicator { color:var(--gold-bright); font-weight:700; }
.stone-dot { display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.35); border-radius:50%; }
.stone-dot.black { background:radial-gradient(circle at 35% 30%,#666,#111 70%); }
.stone-dot.white { background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf 70%); border-color:#999; }
.result-banner { min-height:1.2em; color:var(--gold-bright); font-weight:700; }
.table-area { width:100%; max-width:1000px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.goke {
  --size:clamp(68px,8vw,96px); position:relative; flex:0 0 auto; width:var(--size); height:calc(var(--size)*.72);
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(69,37,16,.86); border-radius:50%/44%;
  background:repeating-radial-gradient(ellipse at 50% 25%,transparent 0 7px,rgba(75,41,16,.1) 8px 9px),radial-gradient(ellipse at 50% 30%,#c98b4c,#92572b 58%,#5f351d);
  box-shadow:inset 0 7px 12px rgba(0,0,0,.43),inset 0 -3px 4px rgba(255,220,166,.16),0 9px 16px rgba(0,0,0,.36);
}
.goke::before { content:""; position:absolute; inset:14% 10% 26%; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.12),rgba(0,0,0,.35) 70%); }
.goke-stones { position:relative; width:70%; height:55%; }
.goke-stones span { position:absolute; width:26%; height:46%; border-radius:50%; }
.black-goke .goke-stones span { background:radial-gradient(circle at 35% 30%,#6a6a6a,#0a0a0a 75%); }
.white-goke .goke-stones span { background:radial-gradient(circle at 35% 30%,#fff,#cbcbcb 75%); box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.goke-label { position:absolute; bottom:-1.55em; left:-45px; right:-45px; color:#ded5c2; text-align:center; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-shadow:0 2px 7px rgba(0,0,0,.9); }
#player-goke { margin-bottom:22px; }
.board-shell { position:relative; flex:0 1 auto; }
.board-surface {
  position:relative; width:min(72vw,590px); aspect-ratio:1; padding:calc(100%/30); border:1px solid rgba(91,51,18,.8); border-radius:6px;
  background:repeating-linear-gradient(92deg,rgba(97,55,16,.08) 0 1px,transparent 1px 15px,rgba(255,255,255,.08) 16px 17px,transparent 18px 32px),linear-gradient(145deg,#f0cf83,var(--wood-light) 38%,var(--wood-mid));
  box-shadow:0 13px 0 var(--wood-dark),0 21px 36px rgba(0,0,0,.45),inset 0 0 0 6px rgba(105,62,24,.42),inset 0 1px 0 rgba(255,255,255,.35);
}
.board-inner { position:relative; width:100%; height:100%; }
.grid-lines { position:absolute; inset:0; pointer-events:none; }
.stones-layer { position:absolute; inset:0; display:grid; }
.cell { position:relative; display:flex; align-items:center; justify-content:center; padding:0; margin:0; cursor:pointer; border:0; background:none; }
.cell:focus-visible { outline:none; }
.cell:focus-visible .cell-focus-ring { opacity:1; }
.cell-focus-ring { position:absolute; inset:8%; opacity:0; border:2px solid var(--focus); border-radius:50%; }
.star-point::after { content:""; position:absolute; width:14%; height:14%; opacity:.55; border-radius:50%; background:var(--line); }
.stone { position:absolute; width:86%; height:86%; pointer-events:none; border-radius:50%; }
.stone.black { background:radial-gradient(circle at 32% 28%,#6e6e6e,#262626 45%,#050505); box-shadow:0 2px 3px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.08) inset; }
.stone.white { background:radial-gradient(circle at 32% 28%,#fff,#eee 45%,#c9c9c9); box-shadow:0 2px 3px rgba(0,0,0,.35),0 -1px 0 rgba(0,0,0,.08) inset; }
.stone.last-move::after { content:""; position:absolute; inset:34%; opacity:.85; border-radius:50%; background:var(--vermilion); }
.stone.win-cell { box-shadow:0 0 0 3px var(--vermilion),0 2px 4px rgba(0,0,0,.4); }
.controls-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.help-text { max-width:560px; margin:0; color:rgba(243,234,214,.49); text-align:center; font-size:.76rem; line-height:1.65; }

/* 勝負あり */
.result-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(4,8,7,.74); backdrop-filter:blur(5px); animation:veil-in .24s ease-out; }
.result-card {
  position:relative; width:min(92vw,390px); padding:35px 30px 28px; overflow:hidden; color:var(--ivory); text-align:center;
  border:1px solid rgba(226,196,125,.75); border-radius:16px; background:linear-gradient(145deg,#202b28,#101715);
  box-shadow:0 32px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06); animation:card-in .34s cubic-bezier(.2,.8,.2,1);
}
.result-seal { position:absolute; top:17px; right:19px; width:40px; height:40px; display:grid; place-items:center; color:#f4dfc4; border:1px solid #d98978; background:var(--vermilion); font:1.25rem "Yu Mincho",serif; transform:rotate(5deg); }
.result-call { margin:0 0 8px; color:var(--gold-bright); font:700 clamp(2rem,8vw,3rem) "Yu Mincho",serif; letter-spacing:.08em; text-shadow:0 4px 18px rgba(0,0,0,.5); }
.result-card h2 { margin:0 0 24px; font-size:1.08rem; font-weight:600; letter-spacing:.06em; }
.result-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:9px; }
.result-close-btn { width:100%; }
@keyframes drop { from { transform:scale(.4); opacity:.2; } }
@keyframes veil-in { from { opacity:0; } }
@keyframes card-in { from { transform:translateY(14px) scale(.96); opacity:0; } }
@media (prefers-reduced-motion:no-preference) { .stone { animation:drop .16s ease-out; } }
.reduce-motion .stone,.reduce-motion .cell-focus-ring,.reduce-motion .result-overlay,.reduce-motion .result-card { transition:none!important; animation:none!important; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:800px) { .goke { --size:clamp(58px,15vw,76px); } .board-surface { width:min(91vw,52vh,500px); } }
@media (max-width:480px) {
  body { padding:12px 8px 36px; } .app { min-width:0; } .app-header { column-gap:9px; } .app-header .eyebrow { font-size:1rem; }
  h1 { font-size:1.45rem; letter-spacing:.09em; } .app-header p { font-size:.68rem; letter-spacing:.11em; }
  .panel { width:100%; min-width:0; padding:22px 18px 21px; } .game-screen { min-width:0; gap:14px; }
  .choice-row { flex-wrap:nowrap; } .choice-row label { min-width:0; } .choice-btn { padding-inline:4px; font-size:.8rem; }
  .status-bar { padding:9px 11px; } .board-surface { width:min(91vw,52vh,420px); }
  .goke-label { bottom:-1.45em; } .result-card { padding-inline:22px; }
}