/* 参加準備中＝体育館を天井から見下ろした会場。上に帯、中央下に「参加する」、左下に「大会ロビーへ戻る」。 */

#screen-prep { background: #2a1a0e; }

/* ---- 会場（canvas）と、文字を読みやすくする陰 ---- */
.prep-hall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.prep-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 5, 2, 0.72) 0, rgba(10, 5, 2, 0) 22%, rgba(10, 5, 2, 0) 62%, rgba(10, 5, 2, 0.7) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(10, 5, 2, 0.55) 100%); }

/* ロビーの暗転から、明るくなって会場が見える */
.prep-fade { position: absolute; inset: 0; z-index: 5; background: #000; pointer-events: none; opacity: 0; }
#screen-prep.active .prep-fade { animation: prep-fade-out 1s ease forwards; }
@keyframes prep-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---- 上の帯 ---- */
.prep-bar { position: absolute; z-index: 2; left: calc(0.5rem + env(safe-area-inset-left)); right: calc(0.5rem + env(safe-area-inset-right));
  top: calc(0.45rem + env(safe-area-inset-top)); display: flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 0.7rem; border-radius: 0.5rem; background: var(--panel); border: 1px solid var(--gold);
  box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.6), inset 0 0 0 0.15rem rgba(217, 180, 90, 0.12);
  animation: prep-drop 0.5s ease 0.4s backwards; }
@keyframes prep-drop { from { opacity: 0; transform: translateY(-0.6rem); } }
.prep-heading { flex: 0 1 11rem; min-width: 0; }
.prep-label { font-size: 0.5rem; letter-spacing: 0.3em; color: var(--ink-dim); }
.prep-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif);
  font-size: 0.85rem; font-weight: 700; color: var(--gold); }
.prep-stats { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; margin: 0;
  border-left: 1px solid var(--line); }
.prep-stats > div { min-width: 0; padding: 0 0.6rem; border-right: 1px solid rgba(217, 180, 90, 0.18); }
.prep-stats > div:last-child { border-right: none; }
.prep-stats dt { font-size: 0.48rem; color: var(--ink-dim); white-space: nowrap; }
.prep-stats dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 700; }
.prep-stats dd.gold { color: #f6d77e; }
.prep-stats dd.dim { color: var(--ink-dim); font-weight: 400; font-size: 0.66rem; }
.prep-stats dd.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.05em; }

/* ---- 中央下：状態と「参加する」 ---- */
.prep-action { position: absolute; z-index: 2; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: 22rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  animation: prep-rise 0.5s ease 0.6s backwards; }
@keyframes prep-rise { from { opacity: 0; transform: translate(-50%, 0.6rem); } }
.prep-status { min-height: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.25rem 0.8rem; border-radius: 1rem; background: rgba(12, 6, 3, 0.78); border: 1px solid var(--line);
  font-size: 0.6rem; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.prep-status-strong { font-weight: 700; color: var(--gold); }
.prep-status:has(.prep-last) { flex-direction: column; gap: 0.1rem; border-radius: 0.6rem; }
.prep-last { font-weight: 700; color: #f6d77e; }
.prep-spinner { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 0.12rem solid rgba(217, 180, 90, 0.3);
  border-top-color: var(--gold); animation: prep-spin 0.9s linear infinite; }
@keyframes prep-spin { to { transform: rotate(360deg); } }

.prep-join { min-width: 11rem; padding: 0.55rem 1.6rem; border-radius: 0.45rem; border: 1px solid var(--gold);
  font-family: var(--serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.2em; text-indent: 0.2em; color: #24140a;
  background: linear-gradient(180deg, #f6dc94, #c9a046); cursor: pointer;
  box-shadow: 0 0.25rem 0 #6f531f, 0 0.4rem 1.4rem rgba(0, 0, 0, 0.6);
  animation: prep-glow 2.2s ease-in-out infinite; }
.prep-join:active { transform: translateY(0.15rem); box-shadow: 0 0.1rem 0 #6f531f, 0 0.3rem 1rem rgba(0, 0, 0, 0.6); }
.prep-join:disabled { filter: saturate(0.35) brightness(0.75); cursor: default; animation: none; transform: none; }
@keyframes prep-glow {
  0%, 100% { box-shadow: 0 0.25rem 0 #6f531f, 0 0.4rem 1.4rem rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(246, 220, 148, 0); }
  50% { box-shadow: 0 0.25rem 0 #6f531f, 0 0.4rem 1.4rem rgba(0, 0, 0, 0.6), 0 0 1.4rem 0.2rem rgba(246, 220, 148, 0.45); }
}
/* マッチング中＝「待機状態にする」。押すと中断する＝落ち着いた色にする */
.prep-join.waiting { color: var(--ink); background: linear-gradient(180deg, #4a3020, #2a1a10);
  box-shadow: 0 0.25rem 0 #120a05, 0 0.4rem 1.4rem rgba(0, 0, 0, 0.6); animation: none;
  font-size: 0.85rem; letter-spacing: 0.12em; text-indent: 0.12em; }
.prep-error { min-height: 0.9em; margin: 0; color: #ff9a86; font-size: 0.58rem; text-shadow: 0 0 0.3rem #000; }

/* ---- 左下：大会ロビーへ戻る ---- */
.prep-back { position: absolute; z-index: 2; left: calc(0.6rem + env(safe-area-inset-left)); bottom: calc(0.7rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem 0.45rem 0.6rem; border-radius: 0.4rem;
  border: 1px solid var(--gold); background: var(--panel); color: var(--ink); font-size: 0.66rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.6); animation: prep-rise-left 0.5s ease 0.6s backwards; }
@keyframes prep-rise-left { from { opacity: 0; transform: translateY(0.6rem); } }
.prep-back:active { transform: translateY(1px); background: rgba(60, 35, 18, 0.95); }
.prep-back:disabled { opacity: 0.5; cursor: default; transform: none; }
.prep-back-arrow { color: var(--gold); font-size: 0.55rem; }

.prep-mode-badge { left: auto; right: calc(0.4rem + env(safe-area-inset-right)); }

@media (prefers-reduced-motion: reduce) {
  .prep-join, .prep-spinner { animation: none; }
  #screen-prep.active .prep-fade { animation-duration: 0.01s; }
}