/* おでこクイズ: テーマ上書き（コーラル系）＋ゲーム画面（docs/party-odeko-spec.md §5）
 *
 * 設計のねらい:
 *   - PLAY画面は「額に当てたスマホを、少しはなれた友だちが見る」画面。だから
 *     背景は白・文字は黒でコントラスト最大、単語は画面幅いっぱい・高さ40%を使う
 *   - 「パス」は上端・「せいかい」は下端に高さ96px以上で固定。額に当てたまま
 *     友だちが指1本で押せるように、途中に押せるものを置かない
 */

:root {
  --party-accent: #ef5350;
  --party-accent-dark: #c62828;
  --party-bg: #fff3f0;
  --party-accent-soft: #ffe3de;
  --od-ok: #2e7d32;
  --od-pass: #b0bec5;
  --od-ink: #3a1d1a;
}

/* ===== モード選択（ゲームの顔） ===== */

.od-modes {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.od-hero {
  text-align: center;
  margin: 10px 0 6px;
}

.od-hero__emoji {
  font-size: 68px;
  line-height: 1;
  display: block;
}

.od-hero__title {
  font-size: 30px;
  font-weight: 800;
  margin: 6px 0 4px;
  color: var(--party-accent-dark);
}

.od-hero__lead {
  margin: 0;
  font-size: 15px;
  color: var(--party-muted);
}

.od-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 88px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--party-radius);
  background: var(--party-card);
  box-shadow: var(--party-shadow);
  text-align: left;
  color: var(--od-ink);
  font-family: inherit;
}

.od-mode__emoji {
  font-size: 34px;
  line-height: 1;
}

.od-mode__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.od-mode__body b {
  font-size: 19px;
  color: var(--party-accent-dark);
}

.od-mode__body small {
  font-size: 13px;
  color: var(--party-muted);
}

.od-note {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--party-muted);
}

/* ===== ふつうの画面（デッキえらび・じゅんび・けっか） ===== */


.od-screen {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.od-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: var(--party-accent-dark);
}

.od-lead {
  margin: 0;
  font-size: 15px;
  color: var(--party-muted);
}

.od-big {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: var(--od-ink);
}

.od-btn {
  min-height: 60px;
  width: min(320px, 100%);
  padding: 0 20px;
  border: none;
  border-radius: var(--party-radius);
  background: var(--party-card);
  color: var(--party-accent-dark);
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: var(--party-shadow);
}

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

.od-btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--party-muted);
  font-size: 16px;
  min-height: 48px;
}

.od-btn[disabled] {
  opacity: 0.5;
}

/* デッキえらび */

.od-decks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.od-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 96px;
  min-height: 76px;
  padding: 10px 12px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: var(--party-card);
  color: var(--od-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: var(--party-shadow);
}

.od-deck__emoji {
  font-size: 26px;
  line-height: 1;
}

.od-deck[aria-pressed='true'] {
  border-color: var(--party-accent);
  background: var(--party-accent-soft);
}

/* ロビーに差し込むホスト設定（デッキ選択） */

.od-hostdecks {
  margin-top: 6px;
}

/* ===== PLAY（額に当てる画面） ===== */

.od-play {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.od-hit {
  flex: 0 0 auto;
  width: 100%;
  border: none;
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.od-hit--pass {
  min-height: calc(96px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--od-pass);
  color: #37474f;
}

.od-hit--ok {
  min-height: calc(96px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--od-ok);
  color: #ffffff;
}

.od-stage {
  flex: 1;
  min-height: 40vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.od-wordbox {
  width: 100%;
  height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.od-word {
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
  line-height: 1.05;
  color: #111111;
  font-size: 18vh;
}

/* パスした単語は灰色でスライドアウトする（次の語とぶつからないよう複製を飛ばす） */
.od-ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: 800;
  color: #9aa4ab;
  pointer-events: none;
  animation: od-slide-out 0.35s ease-in forwards;
}

@keyframes od-slide-out {
  to {
    transform: translate(-160%, -50%);
    opacity: 0;
  }
}

.od-meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-weight: 800;
  color: var(--party-muted);
}

.od-time {
  font-size: 30px;
  color: var(--od-ink);
}

.od-time--warn {
  color: var(--party-accent-dark);
}

.od-time--blink {
  animation: od-blink 0.5s steps(1, end) infinite;
}

@keyframes od-blink {
  50% {
    opacity: 0.15;
  }
}

.od-count {
  font-size: 22px;
  color: var(--od-ok);
}

.od-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  font-weight: 800;
  color: #ffffff;
  pointer-events: none;
}

.od-flash--ok {
  background: rgba(46, 125, 50, 0.94);
  animation: od-fade 0.45s ease-out forwards;
}

.od-flash--pass {
  background: rgba(120, 132, 140, 0.9);
  animation: od-fade 0.3s ease-out forwards;
}

@keyframes od-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* カウントダウン */

.od-countdown {
  font-size: 30vh;
  font-weight: 800;
  line-height: 1;
  color: var(--party-accent);
}

/* ===== けっか ===== */

.od-score {
  font-size: 42px;
  font-weight: 800;
  color: var(--od-ok);
  margin: 0;
}

.od-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.od-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--party-card);
  text-align: left;
}

.od-row--ok .od-row__mark {
  color: var(--od-ok);
}

.od-row--ng {
  opacity: 0.6;
}

.od-row--ng .od-row__mark {
  color: #90a4ae;
}

.od-row__mark {
  font-size: 22px;
  font-weight: 800;
  min-width: 1.4em;
}

.od-row__word {
  font-size: 18px;
  font-weight: 700;
  color: var(--od-ink);
}

.od-final {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.od-final__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--party-card);
}

.od-final__medal {
  font-size: 22px;
  min-width: 2em;
}

.od-final__icon {
  font-size: 22px;
}

.od-final__name {
  flex: 1;
  text-align: left;
  font-weight: 700;
  color: var(--od-ink);
}

.od-final__pt {
  font-weight: 800;
  color: var(--party-accent-dark);
}

/* ===== 自前モーダル（1台モードは lobby.js を読み込まないので共通のを使えない） ===== */

.od-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(40, 16, 14, 0.5);
}

.od-modal__box {
  background: var(--party-card);
  border-radius: var(--party-radius);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  max-height: 80dvh;
  overflow-y: auto;
  text-align: left;
}

.od-modal__box h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--party-accent-dark);
  text-align: center;
}

.od-modal__box ul,
.od-modal__box ol {
  padding-left: 1.2em;
  margin: 8px 0;
}

.od-modal__box li {
  margin-bottom: 6px;
}

/* ===== じぶんたちのお題（docs/party-customodai-spec.md） ===== */

.od-deck--custom {
  min-width: 118px;
  border-color: #ffcc80;
  background: #fff8e1;
}

.od-deck__count {
  font-size: 13px;
  color: var(--party-muted, #8a6a66);
}

.od-custom {
  margin-top: 10px;
  text-align: left;
}

/* 既定は畳んだ1行トグル（390×844で「はじめる」がファーストビューに収まるよう高さを圧縮） */
.od-custom__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--od-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.od-custom__toggle-caret {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.7;
}

.od-custom__body {
  margin-top: 4px;
}

.od-custom__lead {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--od-ink);
}

.od-custom__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.od-custom__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  font-size: 18px;
  text-align: left;
}

.od-custom__add {
  flex: 0 0 auto;
  width: auto;
  min-height: 52px;
  padding: 0 18px;
  background: var(--party-accent);
  color: #fff;
  box-shadow: 0 4px 0 var(--party-accent-dark);
}

.od-custom__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.od-custom__chips:empty {
  display: none;
}

.od-custom__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid #ffcc80;
  border-radius: 20px;
  background: #fff8e1;
  color: #7a5300;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.od-custom__x {
  font-size: 12px;
  color: #a1701a;
}

.od-custom__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--party-muted, #8a6a66);
}

/* ターン開始時に「カスタムが混ざる・不足は通常デッキで補う」と明示する帯 */
.od-customnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 4px;
}

.od-customnote__tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff8e1;
  color: #7a5300;
  font-size: 14px;
  font-weight: 700;
}

.od-customnote__fill {
  font-size: 13px;
  color: var(--party-muted, #8a6a66);
}