:root {
  --bg: #1b1a17;
  --panel: #26241f;
  --text: #f2ede3;
  --muted: #a39d90;
  --board: #dcb46a;
  --board-dark: #c99c4f;
  --line: #5a3f17;
  --black: #111;
  --white: #f7f5f0;
  --accent: #4fc38a;
  --wait: #e0a43a;
  --win: #ff5a5a;
  --N: 11;
  --bottom-ui: 0px; /* 画面の下にかぶさる、ほかのアプリの帯の高さ */
  --title-bottom-ui: 0px; /* タイトル画面だけの分（帯を開いた状態でも隠れないように）*/
}
/* X アプリの中で開いたときは、下に投稿の帯（約110px）が重なるので、その分あける */
html.in-x-app { --bottom-ui: 120px; --title-bottom-ui: 250px; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  overflow-x: clip; /* 飛び散る破片で横スクロールを出さない */
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px calc(max(16px, env(safe-area-inset-bottom)) + var(--bottom-ui));
  gap: 14px;
}

header {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; }
#stoneCount { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.head-right { display: flex; align-items: baseline; gap: 10px; }

/* スクリーンリーダー向けに状況だけ読み上げる（画面には出さない） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes rainbow { to { background-position: -200% 0; } }