/* どのじゅん？: テーマ上書き（若草グリーン）＋ゲーム画面スタイル */

:root {
  --party-accent: #7cb342;
  --party-accent-dark: #558b2f;
  --party-bg: #f4fbe8;
  --party-card: #ffffff;
  --dj-ink: #33481a;
  --dj-gold: #f5b301;
}

#dj-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.dj-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
}

.dj-screen h2 {
  font-size: 1.3rem;
  margin: 0;
}

.dj-progress {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

.dj-theme {
  font-size: 1.3rem;
  margin: 0;
  color: var(--dj-ink);
}

.dj-msg {
  font-size: 1.1rem;
  margin: 0;
}

.dj-msg-sub {
  font-size: 0.95rem;
  opacity: 0.75;
  margin: 0;
}

.dj-target {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
}

.dj-target-icon {
  font-size: 1.4rem;
}

.dj-target-name {
  font-weight: bold;
  color: var(--dj-ink);
}

.dj-btn {
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  border: none;
  background: #fff;
  color: var(--party-accent-dark);
  font-size: 1.05rem;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

.dj-btn-primary {
  background: var(--party-accent);
  color: #fff;
  box-shadow: 0 3px 0 var(--party-accent-dark);
}

.dj-btn-primary:disabled {
  opacity: 0.55;
  box-shadow: none;
}

.dj-btn-ghost {
  background: transparent;
  box-shadow: none;
  min-height: 44px;
  font-size: 0.95rem;
  opacity: 0.75;
}

.dj-skipbtn--armed {
  color: #c62828;
  opacity: 1;
}

/* ===== タップ順選択 ===== */

.dj-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 90vw);
}

.dj-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 16px;
  border: none;
  background: #fff;
  color: var(--dj-ink);
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  text-align: left;
}

.dj-item-btn--picked {
  background: #eaf6d8;
  outline: 2px solid var(--party-accent);
}

.dj-item-btn:disabled {
  opacity: 0.85;
}

.dj-item-badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: #fff;
}

.dj-item-badge--on {
  background: var(--party-accent);
}

.dj-item-label {
  flex: 1;
}

/* 決めた並びの表示 */
.dj-orderlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, 88vw);
}

.dj-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 14px;
}

.dj-order-rank {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--party-accent);
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.dj-order-label {
  font-weight: bold;
  color: var(--dj-ink);
}

/* ===== リビール（横並び比較） ===== */

.dj-gain-pop {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--party-accent-dark);
  margin: 0;
}

.dj-board {
  display: flex;
  gap: 8px;
  max-width: 96vw;
  overflow-x: auto;
  padding: 4px 8px 10px;
  -webkit-overflow-scrolling: touch;
}

.dj-col {
  flex: none;
  width: 138px; /* 項目7文字がひと目で読める幅（省略記号にしない。border-box込みで実測済み） */
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border-radius: 14px;
  padding: 8px 6px;
}

.dj-col--answer {
  background: #fff6d8;
  outline: 2px solid var(--dj-gold);
}

.dj-col--perfect {
  outline: 2px solid var(--dj-gold);
}

.dj-col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.dj-col-icon {
  font-size: 1.3rem;
}

.dj-col-name {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--dj-ink);
  max-width: 114px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dj-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 6px 6px;
  min-height: 34px;
}

.dj-cell--answer {
  background: #fff;
}

.dj-cell--hit {
  background: #d9f2b8;
  outline: 2px solid var(--party-accent);
}

.dj-cell--none {
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0.6;
  min-height: 130px;
}

.dj-cell-rank {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dj-cell--hit .dj-cell-rank {
  background: var(--party-accent);
}

.dj-cell-label {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--dj-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 位置が合った項目がぴょんと跳ねる（2個以上一致の列だけ。1個は控えめ） */
@keyframes dj-bounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-9px) scale(1.06); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.dj-cell--bounce {
  animation: dj-bounce 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .dj-cell--bounce {
    animation: none;
  }
}

.dj-col-pt {
  text-align: center;
  font-weight: bold;
  color: var(--party-accent-dark);
  font-size: 0.9rem;
}

.dj-col--perfect .dj-col-pt {
  color: #c98e00;
}

/* ===== スキップ ===== */

.dj-skip-icon {
  font-size: 2.4rem;
}

/* ===== 最終結果（showFinal の描画先オーバーレイ） ===== */

.dj-final {
  position: fixed;
  inset: 0;
  background: var(--party-bg);
  overflow-y: auto;
  z-index: 60;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 2人モードの「わかってる度」メーター */

.dj-meter {
  width: min(340px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dj-meter-head {
  margin: 0;
  font-weight: bold;
  color: var(--dj-ink);
  text-align: center;
}

.dj-meter-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dj-meter-label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dj-ink);
  text-align: left;
}

.dj-meter-bar {
  height: 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.dj-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--party-accent), var(--dj-gold));
  border-radius: 8px;
  transition: width 0.8s ease;
}

.dj-meter-pct {
  margin: 0;
  font-weight: bold;
  color: var(--party-accent-dark);
  text-align: right;
  font-size: 0.95rem;
}