:root {
  --panel: #171a33;
  --text: #e9ecff;
  --grid: #20264a;

  --board-cols: 9.5;
  --board-rows: 14;
  --board-aspect: calc(var(--board-cols) / var(--board-rows));
  --pixel-ratio-max: 2;
}

/* ===== ベース ===== */
html, body {
  margin: 0;
  touch-action: manipulation;
  background: #0b0e1f;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }

/* ===== 盤面 ===== */
.canvas3d {
  position: relative;
  aspect-ratio: var(--board-aspect);
  background: transparent;
  border: 2px solid #2a3063;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  overflow: hidden;
  touch-action: none;
  z-index: 0;
}

/* Three.js のキャンバス */
.canvas3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* ===== パネル・ボタン共通 ===== */
.panel {
  background: transparent;
  border: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.controls button {
  appearance: none;
  border: none;
  background: transparent;
  color: #dbe6ff;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
}

.controls button:active {
  transform: translateY(1px);
  filter: drop-shadow(0 0px 2px rgba(0,0,0,0.5));
}

/* ===== SVGアイコン共通 ===== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  pointer-events: none;
  vertical-align: middle;
}

/* ===== コントローラー共通 ===== */
#game-ui-controller {
  display: flex;
  gap: 8px;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#game-ui-controller button {
  appearance: none;
  border: none;
  background: transparent;
  color: #dbe6ff;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
}
#game-ui-controller button:active {
  transform: translateY(1px);
  filter: drop-shadow(0 0px 2px rgba(0,0,0,0.5));
}
#game-ui-controller button:focus-visible { outline: 2px solid #35a2ff; outline-offset: 2px; }

/* ===== stats ===== */
.stat strong { margin: 0 6px; }

/* ===== 情報エリア共通（stage + score まとめて） ===== */
#game-ui-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));  /* ← この1行を追加 */
}


/* ================================================
   data-layout ベースのレイアウト制御
   ================================================ */

/* ===== mobile ===== */
body[data-layout="mobile"] .canvas3d {
  height: 100dvh;
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;
  border: none;
}

body[data-layout="mobile"] .stats {
  display: flex;
  flex-direction: column;
  font-size: 1em;
}
body[data-layout="mobile"] .stat {
  display: flex;
  justify-content: flex-end;
  font-size: 1em;
}
body[data-layout="mobile"] .stat strong {
  margin: 0;
  min-width: 2em;
  text-align: right;
}

/* システムボタン → 左縦中央 */
body[data-layout="mobile"] #game-ui-system {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
body[data-layout="mobile"] #game-ui-system .controls {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}
body[data-layout="mobile"] #game-ui-system button {
  font-size: 1.6em;
  margin: 0.16em 0;
  padding: 0;
}

/* コントローラー → 右縦中央 */
body[data-layout="mobile"] #game-ui-controller {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-direction: column;
  gap: 8px;
  width: auto;
}
body[data-layout="mobile"] #game-ui-controller button {
  font-size: 1.6em;
  margin: 0.16em 0;
  padding: 0;
}

/* ===== tablet-portrait ===== */
body[data-layout="tablet-portrait"] .canvas3d {
  height: 85svh;
  margin: 18px auto;
  display: block;
}
body[data-layout="tablet-portrait"] #game-ui-system {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
body[data-layout="tablet-portrait"] #game-ui-system .controls {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}
body[data-layout="tablet-portrait"] #game-ui-system button {
  font-size: 2em;
  margin: 0.2em 0;
  padding: 0;
}
body[data-layout="tablet-portrait"] #game-ui-controller {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-direction: column;
  gap: 8px;
  width: auto;
}
body[data-layout="tablet-portrait"] #game-ui-controller button {
  font-size: 2em;
  margin: 0.2em 0;
  padding: 0;
}

/* ===== desktop ===== */
body[data-layout="desktop"] .canvas3d {
  height: calc(100dvh - 52px);
  margin: 26px auto;
  display: block;
}
body[data-layout="desktop"] #game-ui-system {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
body[data-layout="desktop"] #game-ui-system .controls {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}
body[data-layout="desktop"] #game-ui-system button {
  font-size: 2em;
  margin: 0.2em 0;
  padding: 0;
}
body[data-layout="desktop"] #game-ui-controller {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  flex-direction: column;
  gap: 8px;
  width: auto;
}
body[data-layout="desktop"] #game-ui-controller button {
  font-size: 2em;
  margin: 0.2em 0;
  padding: 0;
}