/* temoto party 共通スタイル（docs/party-platform-spec.md §4.3）。
 *
 * 前提: スマホ縦持ち・子どもの指・屋外や車内での短時間プレイ。だから
 *   - ボタンは高さ56px以上（押し間違えない）
 *   - 文字は大きめ・コントラスト高め
 *   - 角丸を大きくポップに
 * テーマ色は下のCSS変数をゲーム側のCSSが :root で上書きして切り替える
 * （wordwolf=紫系 / reflex=オレンジ系 / daifugo=緑系）。
 * ダークテーマ対応はv1では行わない（明るい配色に固定）。
 *
 * 各ゲームのindex.htmlには次のviewportが必要（無い場合は lobby.js が補う）:
 *   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 */

:root {
  --party-bg: #f6f2ff;
  --party-bg2: #ffffff;
  --party-card: #ffffff;
  --party-accent: #7c4dff;
  --party-accent-dark: #5a2fd6;
  --party-accent-soft: #ede4ff;
  --party-text: #2b2440;
  --party-muted: #7d7595;
  --party-line: #e5e0f2;
  --party-danger: #e5484d;
  --party-radius: 20px;
  --party-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--party-bg);
  color: var(--party-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic',
    sans-serif;
  font-size: 17px;
  line-height: 1.6;
  /* ダブルタップズームによる誤操作を防ぐ（連打するゲームがあるため） */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}

/* iPhoneのホームバー・ノッチにUIが潜り込まないようにする */
.party-app {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 16px);
}

[hidden] {
  display: none !important;
}

/* ===== 見出し ===== */

.party-head {
  /* 🔊/🔇トグル（.party-sndbtn）の位置基準になる */
  position: relative;
  text-align: center;
  margin: 8px 0 20px;
}

/* 効果音の🔊/🔇トグル（lobby.js。docs/party-sfx-spec.md §6）。
 * ヘッダ右上に控えめに。OFF（aria-pressed=false）はグレーに沈める */
.party-sndbtn {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.party-sndbtn[aria-pressed='false'] {
  opacity: 0.4;
  filter: grayscale(1);
}

.party-head__emoji {
  font-size: 56px;
  line-height: 1;
  display: block;
}

.party-head__title {
  font-size: 26px;
  font-weight: 800;
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

.party-lead {
  text-align: center;
  color: var(--party-muted);
  margin: 0 0 16px;
}

/* ===== カード ===== */

.party-card {
  background: var(--party-card);
  border-radius: var(--party-radius);
  padding: 18px 16px;
  margin: 0 0 16px;
  box-shadow: var(--party-shadow);
}

.party-card__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--party-muted);
  margin: 0 0 8px;
}

/* ===== ボタン ===== */

.party-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  margin: 0 0 12px;
  border: none;
  border-radius: 16px;
  background: var(--party-accent);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--party-accent-dark);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.party-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--party-accent-dark);
}

.party-btn:disabled {
  background: #cfc9e0;
  box-shadow: 0 4px 0 #b8b1cd;
  color: #fff;
  cursor: default;
}

.party-btn--sub {
  background: var(--party-accent-soft);
  color: var(--party-accent-dark);
  /* 影も各ゲームのテーマ色に追従させる（固定色だと緑・水色テーマの下に紫の線が出る） */
  box-shadow: 0 4px 0 color-mix(in srgb, var(--party-accent-dark) 30%, #fff);
}

.party-btn--sub:active:not(:disabled) {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--party-accent-dark) 30%, #fff);
}

.party-btn--ghost {
  background: transparent;
  color: var(--party-muted);
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  min-height: 44px;
  text-decoration: underline;
}

.party-btn--ghost:active:not(:disabled) {
  transform: none;
  box-shadow: none;
}

/* こわい方の選択肢（部屋を閉じる等）。確認モーダルのOKボタンに使う */
.party-btn--danger {
  background: var(--party-danger);
  box-shadow: 0 4px 0 #b23439;
}

.party-btn--danger:active:not(:disabled) {
  box-shadow: 0 1px 0 #b23439;
}

/* ===== 入力 ===== */

.party-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 3px solid var(--party-line);
  border-radius: 16px;
  background: #fff;
  color: var(--party-text);
  font-size: 22px;
  font-family: inherit;
  text-align: center;
}

.party-input:focus {
  outline: none;
  border-color: var(--party-accent);
}

/* アイコンえらび（固定16種） */
.party-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 10px 0 0;
}

.party-icon {
  aspect-ratio: 1 / 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  border-radius: 14px;
  background: var(--party-accent-soft);
  font-size: 24px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.party-icon[aria-pressed='true'] {
  border-color: var(--party-accent);
  background: #fff;
}

/* ===== 部屋画面 ===== */

.party-code {
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.06em;
  color: var(--party-accent-dark);
  margin: 0;
  word-break: break-all;
}

.party-qr {
  display: block;
  margin: 12px auto 0;
  width: 200px;
  height: 200px;
  /* QRは拡大縮小しても四角がにじまないように */
  image-rendering: pixelated;
  background: #fff;
  border-radius: 8px;
}

/* あいことばカードの中の「🔗 リンクを送る」。カードの下端と揃うよう下余白は持たない */
.party-sharebtn {
  margin: 12px 0 0;
}

/* 共有もコピーもできない環境の最終手段: URLをそのまま見せて長押しコピーしてもらう */
.party-sharefallback {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--party-accent-soft);
  font-size: 14px;
  text-align: center;
  word-break: break-all;
  -webkit-user-select: text;
  user-select: text;
}

.party-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.party-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--party-accent-soft);
  font-weight: 700;
}

.party-member__icon {
  font-size: 26px;
  line-height: 1;
}

.party-member__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-member__crown {
  font-size: 20px;
}

.party-member--me {
  outline: 3px solid var(--party-accent);
}

.party-wait {
  text-align: center;
  font-weight: 700;
  color: var(--party-muted);
  margin: 12px 0 0;
}

/* ゲーム側がローカルルールのトグル等を差し込むスロット（大富豪が使用）。
 * 中身が空の間は余白も出さない */
.party-hostoptions:empty {
  display: none;
}

/* ホスト以外は同じ画面を「読み取り専用」で見る（何が選ばれているかは分かる） */
.party-hostoptions--readonly {
  pointer-events: none;
  opacity: 0.75;
}

/* ===== モーダル（あそびかた・エラー） ===== */

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

.party-modal__box {
  background: var(--party-card);
  border-radius: var(--party-radius);
  padding: 20px 18px;
  width: 100%;
  max-width: 420px;
  max-height: 80dvh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.party-modal__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

.party-modal__body {
  margin: 0 0 16px;
}

.party-modal__body ul {
  padding-left: 1.2em;
  margin: 8px 0;
}

/* ===== ゲームえらびモーダル（🔁 ゲームを変える／🙋 次はこれやりたい） =====
 * ハシゴv2（docs/party-platform3-spec.md §7）: カタログの cat ごとに見出しを立てた
 * 2列グリッド。人数の合わないゲームはグレーアウトして理由バッジ（「4人まで」
 * 「あと1人」）を出す＝押しても始められない行き止まりを事前に見せる。 */

.party-gamecat {
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--party-muted);
}

.party-gamecat:first-child {
  margin-top: 0;
}

.party-gamegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 1マス1ゲーム（縦積み: 絵文字→名前→人数or理由）。⭐票バッジは右上に重ねる */
.party-gamepick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 92px;
  padding: 10px 6px 8px;
  border: none;
  border-radius: 14px;
  background: var(--party-accent-soft);
  color: var(--party-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.party-gamepick:active:not(:disabled) {
  transform: translateY(2px);
}

/* 人数が合わない行き止まり。全体は沈めるが、理由バッジは色を保って読めるようにする */
.party-gamepick:disabled {
  cursor: default;
  background: #efedf5;
  color: #a89fc0;
}

.party-gamepick:disabled .party-gamepick__emoji {
  filter: grayscale(1);
  opacity: 0.55;
}

.party-gamepick__emoji {
  font-size: 30px;
  line-height: 1.2;
}

.party-gamepick__name {
  line-height: 1.3;
}

.party-gamepick__players {
  font-size: 12px;
  font-weight: 700;
  color: var(--party-muted);
}

/* 始められない理由（「4人まで」「あと1人」）。グレーの中でもここだけは読める色 */
.party-gamepick__gate {
  font-size: 12px;
  font-weight: 800;
  color: var(--party-danger);
  background: #fff;
  border-radius: 999px;
  padding: 1px 8px;
}

/* ゲストの「やりたい」票数。ホストのモーダルの右上に小さく */
.party-gamepick__stars {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--party-accent-dark);
  background: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* 票を入れた人の名前（textContentで入る）。無いときは場所を取らない */
.party-gamepick__voters {
  font-size: 11px;
  font-weight: 700;
  color: var(--party-accent-dark);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.party-gamepick__voters:empty {
  display: none;
}

/* ===== かんたん参加（?c=＋名前保存済みの2回目以降。docs/party-platform3-spec.md §6.1） ===== */

.party-quick {
  text-align: center;
}

.party-quick__icon {
  margin: 4px 0 0;
  font-size: 72px;
  line-height: 1;
}

.party-quick__lead {
  margin: 10px 0 0;
  font-weight: 700;
  color: var(--party-muted);
}

/* ===== ゲストの「これやりたい」表示（ホストの部屋画面に控えめに） ===== */

.party-picks {
  margin: -4px 0 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--party-muted);
}

.party-picks p {
  margin: 2px 0;
}

/* ゲスト待機画面の「部屋はそのまま、ゲームを変えられるよ🔁」の説明1行 */
.party-switchnote {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  color: var(--party-muted);
}

/* ===== トースト（「コピーしたよ」等の小さなお知らせ。lobby.js の showToast） ===== */

.party-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 28px);
  transform: translateX(-50%);
  z-index: 120; /* モーダル（100）より上。モーダル操作の直後にも見えるように */
  max-width: min(90vw, 480px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(43, 36, 64, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.party-toast--show {
  opacity: 1;
}

/* ===== みんなのスタンプ（common/reactions.js。docs/party-reactions-spec.md） =====
 * バー: 定型スタンプ8種のボタン列。ロビーやゲーム画面の好きな場所に差し込む。
 * 飛び出し: 画面下端からぽんと出て2秒で消える。個人のアバターには紐づけず
 * 画面全体に飛ばす（😱等が特定の人への嘲りに見えないように）。 */

.party-rxbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}

.party-rxbtn {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 6px;
  border: none;
  border-radius: 14px;
  background: var(--party-accent-soft);
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.06s ease;
}

.party-rxbtn:active {
  transform: scale(1.2);
}

/* 飛び出しレイヤー。触れない（pointer-events:none）ので操作を邪魔しない。
 * z-index 110 = ほとんどのゲーム内オーバーレイ（〜100）より上・共通トースト（120）より下 */
.party-rxlayer {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}

.party-rx {
  position: absolute;
  bottom: -64px;
  font-size: 46px;
  line-height: 1;
  animation: party-rx-pop 2s ease-out forwards;
  will-change: transform, opacity;
}

.party-rx__stamp {
  display: inline-block;
  transform: rotate(var(--rx-rot, 0deg));
}

.party-rx__from {
  position: absolute;
  right: -12px;
  bottom: -4px;
  font-size: 20px;
}

/* ぽんと弾んで浮き上がり、ふわっと消える（合計2秒。SHOW_MSと同じ） */
@keyframes party-rx-pop {
  0% {
    transform: translateY(0) scale(0.3);
    opacity: 0;
  }
  12% {
    transform: translateY(-18vh) scale(1.25);
    opacity: 1;
  }
  28% {
    transform: translateY(-26vh) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-70vh) scale(0.95);
    opacity: 0;
  }
}

/* 動きを減らす設定の人には、飛ばさずその場でふわっと出して消す */
@keyframes party-rx-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .party-rx {
    bottom: 20vh;
    animation: party-rx-fade 2s ease forwards;
  }
}

/* ===== 結果画面の共通部品（common/result.js。docs/party-result-spec.md） =====
 * 表彰台は3位→2位→（ドラムロール）→1位の順にぽんと登場する。登場前は
 * visibility で隠す（場所は確保＝あとから出てもレイアウトが動かない）。 */

.party-final {
  text-align: center;
}

.party-final__title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 14px;
}

.party-final .is-unrevealed {
  visibility: hidden;
}

.party-final .is-pop {
  animation: party-final-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes party-final-pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .party-final .is-pop {
    animation: none;
  }
}

.party-podium {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}

.party-podium__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--party-accent-soft);
  font-weight: 800;
}

.party-podium__item--1 {
  font-size: 22px;
  background: #ffe9a8;
  box-shadow: 0 3px 0 #e6c35c;
}

.party-podium__item--2 {
  font-size: 18px;
  background: #eceff4;
  box-shadow: 0 3px 0 #c3cbd8;
}

.party-podium__item--3 {
  font-size: 17px;
  background: #f6dfc9;
  box-shadow: 0 3px 0 #d8b48e;
}

.party-podium__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-podium__score {
  flex-shrink: 0;
  font-size: 0.85em;
  color: var(--party-muted);
}

.party-final__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-weight: 700;
}

.party-final__list li {
  padding: 3px 0;
}

/* チーム戦の勝敗（1人あたり平均のバー。reflexのteamsum型を共通化） */
.party-teamsum {
  margin: 0 0 14px;
}

.party-teamsum__title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
}

.party-teamsum__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-weight: 700;
}

.party-teamsum__name {
  flex-shrink: 0;
  font-size: 15px;
}

.party-teamsum__barwrap {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  background: var(--party-accent-soft);
  overflow: hidden;
}

.party-teamsum__bar {
  height: 100%;
  border-radius: 999px;
}

.party-teamsum__pt {
  flex-shrink: 0;
  font-size: 14px;
  text-align: right;
}

.party-teamsum__pt small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--party-muted);
}

.party-final__actions {
  margin: 16px 0 0;
}

.party-final__wait {
  color: var(--party-muted);
  font-weight: 700;
  margin: 0 0 10px;
}

.party-final__rx {
  margin: 10px 0 0;
}

/* 紙吹雪キャンバス（result.js）。触れない・スタンプ（110）より下・ゲーム内
 * オーバーレイ（多くは〜100）より上 */
.party-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 105;
  pointer-events: none;
}

/* ===== 共通タイマーバー（result.js makeTimerBar。tsutaeteの型を共通化） ===== */

.party-timer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.party-timer-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--party-accent-soft);
  overflow: hidden;
}

.party-timerfill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--party-accent);
  transition: width 0.2s linear;
}

.party-timerfill.is-hurry {
  background: #e0603c;
}

.party-timer-label {
  font-size: 0.85rem;
  font-weight: bold;
  min-width: 3.2em;
  text-align: right;
}

/* ふりがな（一般漢字＋読み補助。チルダン方針の踏襲） */
ruby rt {
  font-size: 0.5em;
  color: var(--party-muted);
}