/* 「どれが多い？」固有の盤面。共通UIは ../css/game-common.css。 */

.game-area { width: 100%; }

.wm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.wm-prompt {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
}

/* エリアは固定位置。Lv1/Lv2は縦に並べ、Lv3は2×2。 */
.wm-board {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.wm-board[data-arrange="stack"] { grid-template-columns: minmax(0, 1fr); }
.wm-board[data-arrange="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wm-area {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fffef8;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
  box-shadow: 0 2px 0 rgba(52, 75, 64, 0.12);
}
.wm-area:disabled { cursor: default; }
/* 図形の座標は論理サイズ(W×H)に対する%。stage はエリアの内側いっぱい（枠線ぶんを除く）。 */
.wm-stage { position: absolute; inset: 0; display: block; }
.wm-shape { position: absolute; display: block; height: auto; aspect-ratio: 1 / 1; pointer-events: none; -webkit-user-drag: none; }
@media (hover: hover) {
  .wm-area:not(:disabled):hover { border-color: rgba(50, 102, 77, 0.55); background: #f4f8ec; }
}
.wm-area:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
html.is-keyboard-nav .wm-area:focus-visible { outline: 3px solid #d88635; outline-offset: 2px; }

.wm-badge {
  position: absolute;
  right: 6px;
  top: -12px;
  display: none;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
}
.wm-area[data-count] .wm-badge { display: block; }
.wm-area[data-count] .wm-badge::before { content: attr(data-count); }
.wm-area.is-correct { border-color: var(--green); background: #e3f0e3; box-shadow: 0 0 0 1px var(--green); }
.wm-area.is-correct .wm-badge { background: var(--green); }
.wm-area.is-correct .wm-badge::before { content: "○ " attr(data-count); }
.wm-area.is-wrong { border: 2px dashed #b42318; background: #fbe9e6; }
.wm-area.is-wrong .wm-badge { background: #b42318; }
.wm-area.is-wrong .wm-badge::before { content: "× " attr(data-count); }
.wm-area.is-dim { opacity: 0.6; }
.wm-area.is-dim .wm-badge { background: #6f7d68; }

@media (max-width: 430px) {
  .wm-prompt { font-size: 16px; }
  .wm-board { gap: 6px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .wm-wrap { gap: 4px; }
  .wm-prompt { font-size: 14px; }
  .wm-board { max-width: 300px; gap: 4px; }
}