/*
 * Layout: board on the left, a side column (players, preview, controls, rules) on the right;
 * stacks to one column on narrow screens.
 * Look: a kaya-wood board, slate and shell stones, and a vermilion seal on every settled stone.
 */
:root {
  --bg: #e4e7ec;          /* pale blue-grey paper */
  --fg: #1b2230;
  --muted: #5a6475;
  --panel: #f4f6f9;
  --line: #c6ccd6;
  --wood: #d8b273;
  --wood-dark: #b98f4c;
  --wood-line: #6b4a1e;
  --black-stone: #17191d;
  --white-stone: #f5f2ea;
  --seal: #c8361d;        /* vermilion: settled stones */
  --flip: #1f7fd1;        /* preview of stones that would turn */
  --gift: #6b5bd6;        /* preview of stones that would settle for the opponent */
  --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161f; --fg: #e6e9ef; --muted: #98a2b3; --panel: #1b2130; --line: #2c3446;
    --wood: #c9a160; --wood-dark: #a77f40; --wood-line: #4f3511;
    --seal: #e0492c; --flip: #4aa3ef; --gift: #9a8cf0; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161f; --fg: #e6e9ef; --muted: #98a2b3; --panel: #1b2130; --line: #2c3446;
  --wood: #c9a160; --wood-dark: #a77f40; --wood-line: #4f3511;
  --seal: #e0492c; --flip: #4aa3ef; --gift: #9a8cf0; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
main {
  max-width: 1040px; margin: 0 auto; padding-block: 20px 40px;
  display: grid; gap: 14px 28px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "players" "message" "tutorial" "puzzle" "board" "preview" "review" "controls" "setup" "rules";
}
@media (min-width: 900px) {
  main {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "board players"
      "board message"
      "board preview"
      "board controls"
      "board tutorial"
      "board puzzle"
      "board review"
      "board setup"
      "board rules";
    grid-template-rows: repeat(9, auto) 1fr;
    align-items: start;
  }
}
header { grid-area: head; }
h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 800; margin: 0; letter-spacing: 0.08em; line-height: 1.2; }
.lede { margin: 2px 0 0; color: var(--muted); }
h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 6px; letter-spacing: 0.06em; }

/* phones: tighter header and cards so the board and the task fit on the first screen */
@media (max-width: 600px) {
  main { padding-block: 12px 32px; gap: 10px; }
  h1 { font-size: 1.5rem; }
  .lede { font-size: 0.85rem; }
  .lede { display: none; }
  .player { padding: 8px 10px; gap: 2px 8px; grid-template-columns: auto 1fr; align-items: baseline; }
  .player .bar, .player .sub { grid-column: 1 / -1; }
  .player .count { justify-self: end; }
  .player.winner::after { top: -8px; right: 6px; font-size: 0.8rem; }
  .count .big { font-size: 1.6rem; }
  .sub { font-size: 0.75rem; }
  .chart { height: 40px; }
  .puzzle, .review, .rules { padding: 10px 12px; }
}

/* players */
.players { grid-area: players; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  display: grid; gap: 4px; position: relative;
}
.player.active { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.player.winner::after {
  content: "勝ち"; position: absolute; top: 8px; right: 10px; font-family: var(--font-display); font-weight: 800;
  color: var(--seal); border: 2px solid var(--seal); border-radius: 4px; padding: 0 6px; transform: rotate(-6deg);
}
.who { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.tag { font-size: 0.72rem; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; }
.dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.dot.b { background: var(--black-stone); box-shadow: 0 0 0 1px var(--muted); }
.dot.w { background: var(--white-stone); box-shadow: inset 0 0 0 1px #9a958a; }
.count { font-variant-numeric: tabular-nums; line-height: 1; }
.count .big { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; }
.count .of { color: var(--muted); margin-left: 2px; }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; display: flex; }
.bar b { display: block; height: 100%; width: 0; transition: width 0.3s;
  background: repeating-linear-gradient(135deg, var(--seal) 0 3px, transparent 3px 6px); opacity: 0.55; }
.bar i { display: block; height: 100%; width: 0; background: var(--seal); transition: width 0.3s; }
body[data-mode="classic"] .bar i { background: var(--fg); }
.chart { grid-column: 1 / -1; width: 100%; height: 56px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.chart .goal { stroke: var(--seal); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart .line-b { stroke: var(--fg); }
.chart .line-w { stroke: var(--muted); stroke-dasharray: 5 3; }
.sub { font-size: 0.8rem; color: var(--muted); min-height: 1.2em; }

.message { grid-area: message; font-weight: 700; min-height: 1.6em; }
.preview-text { grid-area: preview; color: var(--muted); min-height: 1.6em; font-size: 0.92rem; }

/* board */
.board {
  grid-area: board;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  max-width: min(100%, 78vh);
  justify-self: center;
  background:
    repeating-linear-gradient(97deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, var(--wood), var(--wood-dark));
  border: 1px solid var(--wood-line);
  border-radius: 4px;
  padding: 3%;
  box-shadow: 0 10px 24px rgba(20, 15, 5, 0.22);
}
.cell {
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 0.5px var(--wood-line);
  padding: 0;
  position: relative;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.cell.legal { cursor: pointer; }
.cell.legal::after {
  content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--wood-line); opacity: 0.45;
}
.cell.hole::before {
  content: ""; position: absolute; inset: 7%; border-radius: 3px;
  background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
}
.cell.changed { background: rgba(255, 245, 220, 0.28); }
.cell.last::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 0; height: 0;
  border-left: 9px solid var(--seal); border-bottom: 9px solid transparent; z-index: 1;
}
.stone { position: absolute; inset: 8%; border-radius: 50%; }
.stone.b { background: radial-gradient(circle at 34% 28%, #5b616b, var(--black-stone) 58%); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); }
.stone.w { background: radial-gradient(circle at 34% 28%, #ffffff, var(--white-stone) 55%, #d4cdbd); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); }
/* settled: matte face with a vermilion seal */
.stone.settled.b { background: radial-gradient(circle at 40% 35%, #33373e, var(--black-stone) 70%); }
.stone.settled.w { background: radial-gradient(circle at 40% 35%, #fbf9f4, #e6e0d2 80%); }
.stone.settled::after {
  content: ""; position: absolute; inset: 34%; border-radius: 2px; background: var(--seal);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

/* preview */
.board[data-ghost="b"] .cell.preview .stone { background: var(--black-stone); opacity: 0.55; }
.board[data-ghost="w"] .cell.preview .stone { background: var(--white-stone); opacity: 0.75; }
.cell.preview::after { display: none; }
.cell.will-flip .stone { box-shadow: 0 0 0 3px var(--flip); }
.cell.will-settle-me::after, .cell.will-settle-them::after {
  content: "+"; position: absolute; inset: auto; right: 2px; top: 2px; width: 34%; height: 34%; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: clamp(9px, 2.2vw, 14px); line-height: 1;
  color: #fff; background: var(--seal); opacity: 1; z-index: 2;
}
.cell.will-settle-them::after { content: "!"; background: var(--gift); }
.cell.preview.will-settle-me::after, .cell.preview.will-settle-them::after { display: grid; }

/* hint layer */
.mark {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-weight: 800; font-size: clamp(10px, 2.6vw, 16px); font-variant-numeric: tabular-nums; z-index: 1;
}
.cell.opp-mine::after, .cell.losing::after { display: none; }
.cell.losing .mark { color: var(--gift); font-size: clamp(14px, 3.4vw, 22px); }
.cell.opp-mine .mark { color: var(--seal); }
.cell.opp-theirs { box-shadow: inset 0 0 0 0.5px var(--wood-line), inset 0 0 0 3px var(--gift); }
.cell.opp-theirs:not(.opp-mine) .mark { color: var(--gift); }
.cell.opp-theirs:not(.blockable) { box-shadow: inset 0 0 0 0.5px var(--wood-line), inset 0 0 0 4px var(--gift); background: color-mix(in srgb, var(--gift) 14%, transparent); }
.cell.opp-mine.opp-theirs .mark { color: var(--seal); }
.cell.preview .mark { display: none; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; padding: 0 4px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--seal); }
.key { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 4px; font-weight: 800; background: var(--wood); }
.key.mine { color: var(--seal); }
.key.theirs { color: var(--gift); box-shadow: inset 0 0 0 2px var(--gift); }
.legend { line-height: 2; }

.cell.reply-threat::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; z-index: 2;
  border: 3px dashed var(--gift); animation: pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cell.reply-threat::before { animation: none; } }

/* puzzles */
.puzzle { grid-area: puzzle; background: var(--panel); border: 2px solid var(--seal); border-radius: 10px; padding: 12px 16px; display: grid; gap: 8px; }
.puzzle h2 { margin: 0; }
.puzzle p { margin: 0; }
.puzzle .nav { display: flex; gap: 8px; flex-wrap: wrap; }
#pz-count { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); font-weight: 400; margin-left: 6px; }
.puzzle.solved { border-color: var(--fg); }
.puzzle.tutorial { grid-area: tutorial; }
.pz-help { background: var(--bg); border-radius: 6px; padding: 6px 10px; font-size: 0.92rem; }
.cell.pz-answer::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 2; border: 3px dashed var(--seal); pointer-events: none; }

/* post-game review */
.review { grid-area: review; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: grid; gap: 8px; }
.review h2 { margin: 0; }
.review ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.review li button { display: block; font: inherit; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--fg); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.review li button:hover { text-decoration-color: var(--fg); }
.review .nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.review .where { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; }
.review .compare { display: grid; gap: 4px; font-size: 0.9rem; }
.review .compare:empty { display: none; }
.review .compare div { padding: 6px 8px; border-radius: 6px; background: var(--bg); }
.review .note { color: var(--muted); font-size: 0.88rem; margin: 0; }
.cell.rv-played::before, .cell.rv-best::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 2; pointer-events: none;
}
.cell.rv-played::before { border: 3px solid var(--gift); }
.cell.rv-best::before { border: 3px dashed var(--seal); }
.board.reviewing { outline: 3px solid var(--gift); outline-offset: 3px; }
.chart .cursor { stroke: var(--gift); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.pop {
  position: absolute; right: 14px; top: 34px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: var(--seal); pointer-events: none; animation: pop 1.1s ease-out forwards;
}
@keyframes pop { 0% { transform: translateY(8px) scale(0.6); opacity: 0; } 20% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translateY(-22px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }

/* motion */
.stone.flip { animation: flip 0.32s ease-in-out; }
.stone.drop { animation: drop 0.18s ease-out; }
.stone.seal::after { animation: seal 0.45s cubic-bezier(.2, 1.6, .4, 1) 0.2s both; }
@keyframes flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.05); } 100% { transform: scaleX(1); } }
@keyframes drop { 0% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes seal { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stone.flip, .stone.drop, .stone.seal::after { animation: none; } }

/* controls */
.controls { grid-area: controls; display: flex; gap: 8px; flex-wrap: wrap; }
select, button.btn {
  font: inherit; font-size: 0.9rem; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); min-width: 0; max-width: 100%;
}
button.btn { cursor: pointer; font-weight: 700; }
button.btn:hover:not(:disabled) { border-color: var(--fg); }
button.btn.attention { border-color: var(--seal); box-shadow: 0 0 0 2px var(--seal); }
button.btn:disabled, select:disabled { opacity: 0.45; cursor: default; }
button.btn:focus-visible, select:focus-visible, .cell:focus-visible { outline: 3px solid var(--flip); outline-offset: 1px; }

/* game setup */
.setup { grid-area: setup; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: grid; gap: 10px; }
.setup h2 { margin: 0; }
.setup .fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.setup label { font-size: 0.88rem; color: var(--muted); }
.setup select { width: 100%; }
.record { margin: 0; font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.record b { color: var(--fg); }
button.btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); justify-self: start; }
button.btn.primary.attention { box-shadow: 0 0 0 3px var(--seal); }

/* rules */
.rules { grid-area: rules; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; max-width: 65ch; }
.rules ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.rules p { margin: 8px 0 0; }
.rules .hint { color: var(--muted); font-size: 0.88rem; }