/* 「指示じゃんけん」固有の盤面。共通UIは ../css/game-common.css。 */

.game-area { width: 100%; }

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

.ij-prompt {
  margin: 0;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 相手の手: 枠と「相手の手」の見出しで、下の回答ボタンと区別する */
.ij-opp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(100%, 220px);
  padding: 6px 10px 6px;
  border: 2px solid #b79058;
  border-radius: 16px;
  background: #fdf8ec;
  box-sizing: border-box;
}
.ij-opp-label { margin: 0; font-size: 14px; font-weight: 800; color: #6f5a3a; }
.ij-opp-hand { display: block; width: 120px; height: 120px; pointer-events: none; -webkit-user-drag: none; }
.ij-opp-name { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 800; color: var(--ink); }

.ij-mine-label { margin: 4px 0 -2px; font-size: 13px; font-weight: 800; color: var(--muted); }

/* 自分の手: 左グー・中央チョキ・右パー。位置は変えない。 */
.ij-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 380px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.ij-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 104px;
  margin: 0;
  padding: 6px 2px 6px;
  border: 2px solid var(--line);
  border-radius: 16px;
  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);
}
.ij-btn:disabled { cursor: default; }
.ij-btn img { display: block; width: 64px; height: 64px; pointer-events: none; -webkit-user-drag: none; }
.ij-label { font-size: 17px; font-weight: 800; line-height: 1.1; }
@media (hover: hover) {
  .ij-btn:not(:disabled):hover { border-color: rgba(50, 102, 77, 0.55); background: #f4f8ec; }
}
.ij-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
html.is-keyboard-nav .ij-btn:focus-visible { outline: 3px solid #d88635; outline-offset: 2px; }

.ij-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(52, 75, 64, 0.3);
}
.ij-btn.is-correct { border-color: var(--green); background: #e3f0e3; box-shadow: 0 0 0 1px var(--green); }
.ij-btn.is-correct .ij-badge { display: flex; background: var(--green); }
.ij-btn.is-correct .ij-badge::before { content: "○"; }
.ij-btn.is-wrong { border: 2px dashed #b42318; background: #fbe9e6; }
.ij-btn.is-wrong .ij-badge { display: flex; background: #b42318; }
.ij-btn.is-wrong .ij-badge::before { content: "×"; }
.ij-btn.is-dim { opacity: 0.55; }

@media (max-width: 430px) {
  .ij-prompt { font-size: 22px; }
  .ij-opp-hand { width: 104px; height: 104px; }
  .ij-btn { min-height: 96px; }
  .ij-btn img { width: 56px; height: 56px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ij-wrap { gap: 3px; }
  .ij-prompt { min-height: 1.5em; font-size: 18px; }
  .ij-opp { flex-direction: row; width: auto; gap: 10px; padding: 2px 12px; }
  .ij-opp-hand { width: 56px; height: 56px; }
  .ij-mine-label { display: none; }
  .ij-btn { min-height: 64px; flex-direction: row; gap: 6px; }
  .ij-btn img { width: 40px; height: 40px; }
}