/* ホームと教程に共通する Claude 稿の背景・ヘッダー。 */
body:is([data-home-phase],[data-lesson]) {
  position: relative;
  overflow-x: clip;
  background: var(--home-background);
  color: var(--home-ink);
  font-family: var(--home-sans);
  letter-spacing: normal;
}
body:is([data-home-phase],[data-lesson])::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  mix-blend-mode: multiply;
  background-image: var(--home-noise);
}
/* 寸法・配置は既存 board.css に任せ、トークンの接続だけを切り替える。 */
[data-home-phase] .play-stage {
  --ink: var(--home-ink);
  --body: var(--home-sub);
  --muted: var(--home-sub);
  --surface: var(--home-card);
  --line: var(--home-line);
  --line-btn: var(--home-line);
  --accent: var(--home-accent);
  --accent-hover: var(--home-ink);
  --accent-deep: var(--home-ink);
  --btn-gray-ink: var(--home-ink);
  --btn-green-hover: color-mix(in srgb,var(--home-gold) 10%,transparent);
  --btn-gray-hover: color-mix(in srgb,var(--home-ink) 6%,var(--home-bg));
  --scrim-card: var(--home-bg);
  --r-btn: 12px;
  --r-card: 8px;
  --r-overlay: 14px;
  --board-wood-a: var(--home-wood-a);
  --board-wood-b: var(--home-wood-b);
  --board-grain: var(--home-wood-grain);
  --stone-black: var(--home-black);
  --stone-white: var(--home-white);
  --stone-last: var(--home-accent);
  --stone-win: var(--home-gold);
  --shadow-board: var(--home-board-shadow);
  --shadow-overlay: var(--home-card-shadow);
}
[data-home-phase] .play-stage .btn { font-weight: 500; border-width: 1px; }
/* グラデーションと単色は補間できない。hover は背景を固定し、明度だけを変える。 */
[data-home-phase] .play-stage .btn--primary,
[data-home-phase] .play-stage .btn--primary:not(:disabled):hover {
  background: var(--home-accent) var(--home-cta);
  font-weight: 700;
  transition: filter .15s;
}
[data-home-phase] .play-stage .btn--primary:not(:disabled):hover { filter: brightness(.96); }
[data-home-phase] .play-stage .btn--outline { border-color: var(--home-line); }
[data-home-phase] .side-panel,
[data-home-phase] .status,
[data-home-phase] .kifu,
[data-home-phase] .overlay__card { box-shadow: var(--home-card-shadow); }
[data-home-phase] .side-panel__badge { border-color: var(--home-line); color: var(--home-gold); background: transparent; }
[data-home-phase] .status,
[data-home-phase] .kifu__title { font-family: var(--font-serif); font-weight: 800; }
[data-home-phase] .kifu__title { color: var(--home-gold); }
[data-home-phase] .side-panel__stat dd { font-family: var(--font-serif); font-weight: 800; }
[data-home-phase] .play-stage .safe-tap__track { background: color-mix(in srgb,var(--home-ink) 24%,var(--home-bg)); }
[data-home-phase] .play-stage .safe-tap input:checked + .safe-tap__track { background: var(--home-accent); }

[data-home-phase] .board {
  background-image: var(--board-grid-svg),
    repeating-linear-gradient(90deg,var(--home-wood-grain) 0 1px,transparent 1px 5px),
    linear-gradient(135deg,var(--home-wood-a),var(--home-wood-b));
}