/* 「部屋にいるのは何人？」固有の盤面。共通UIは ../css/game-common.css。 */

.game-area { width: 100%; }

.rc-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 論理舞台 360 × 300。位置は % で置く。 */
.rc-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 360 / 300;
  border: 3px solid #b9c7ad;
  border-radius: 16px;
  background: #e4f1d8;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.rc-people { position: absolute; inset: 0; z-index: 1; }
.rc-person { position: absolute; display: block; pointer-events: none; }
/* display:block は hidden 属性（UA の display:none）より強いので、hidden を明示する。
   これが無いと、出発前・部屋の陰にいる人物が位置未設定（左上）や舞台の端に残って見えていた。 */
.rc-person[hidden] { display: none; }
/* 中央の四角が部屋（イラストは使わない）。人物より手前に置き、入室した人は部屋の陰に入って見えなくなる。 */
.rc-house {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 4px solid #8a6f4e;
  border-radius: 6px;
  background: #fbf3e2;
  box-shadow: 0 2px 0 rgba(52, 75, 64, 0.18);
}
.rc-house.is-open { background: #fffaf0; }
.rc-inside {
  position: absolute;
  inset: 6%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 4% 4%;
}
.rc-inside[hidden] { display: none; }
.rc-inside .rc-person { position: static; width: 21%; height: auto; }
.rc-house.is-empty-room .rc-inside::after {
  content: "だれもいません";
  font-size: 14px;
  font-weight: 800;
  color: #5b6b60;
}
.rc-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.rc-label span { background: #fff; }
.rc-turn {
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 3;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 700;
  color: #3c4a40;
}

.rc-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.rc-question[hidden] { display: none; }
.rc-question-text { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.rc-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 420px;
  touch-action: manipulation;
}
.rc-choice {
  position: relative;
  min-height: 56px;
  margin: 0;
  border: 3px solid #b9c7ad;
  border-radius: 14px;
  background: #fff;
  color: #2b3a30;
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(52, 75, 64, 0.18);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-choice:disabled { cursor: default; }
.rc-choice.is-correct { border-color: var(--green); background: #e6f4ea; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green); }
.rc-choice.is-wrong { border-style: dashed; border-color: #b42318; background: #fdecea; }
.rc-choice.is-dim { opacity: 0.55; }
html.is-keyboard-nav .rc-choice:focus-visible { outline: 3px solid #d88635; outline-offset: 2px; }

@media (max-width: 430px) {
  .rc-stage { border-width: 2px; border-radius: 12px; }
  .rc-label { font-size: 17px; }
  .rc-house { border-width: 3px; }
  .rc-house.is-empty-room .rc-inside::after { font-size: 12px; }
  .rc-question-text { font-size: 18px; }
  .rc-choice { min-height: 52px; font-size: 22px; }
}