/* ============================================================
   Player: fuicchiyuzo 系ライトテーマ（白地＋VS魂グラデーション暖色）
   styles.css の暗色トークンを .player-page スコープで上書きするので、
   OBS（styles.css のみ読み込み）には一切影響しない。
   ============================================================ */
.player-page {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-accent: #f97316;
  --color-accent-fill: #f97316;
  --color-accent-2: #ec4899;
  --color-ok: #16a34a;
  --color-danger: #dc2626;
  --color-border: #e5e7eb;
  --radius: 12px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgb(15 23 42 / 5%);
  --primary-dark: #c2410c;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ─── ヘッダー / フッター ─────────────────────────────── */
.player-page .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  background: var(--header-gradient);
  color: #fff;
  box-shadow: none;
}

.player-page .site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.player-page .site-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-page .site-logo {
  flex: 0 0 64px;
  width: 64px;
  height: 36px;
}

.player-page .header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.player-page .header-avatar {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  overflow: hidden;
  width: 32px;
  height: 32px;
  border: 2px solid rgb(255 255 255 / 60%);
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  font-size: 13px;
  font-weight: 800;
}

.player-page .header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-page .header-nickname {
  overflow: hidden;
  max-width: 96px;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-page .header-icon-button {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 8px;
  background: rgb(255 255 255 / 18%);
  color: #fff;
  font-size: 15px;
}

.player-page .header-icon-button:hover {
  background: rgb(255 255 255 / 32%);
}

.player-page .site-footer {
  margin-top: auto;
  padding: 10px 0;
  background: transparent;
  color: var(--color-muted);
  text-align: center;
}

.player-page .site-footer p {
  margin: 0;
  font-size: 12px;
  opacity: .85;
}

.player-page main {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

.player-page .player-guide {
  margin-bottom: 14px;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-lg);
  background: #fff7ed;
  color: #7c2d12;
}

.player-page .player-guide summary {
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 800;
}

.player-page .player-guide-body {
  padding: 0 16px 14px;
  color: #4b5563;
  font-size: 14px;
}

.player-page .player-guide-body ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.player-page .player-guide-body p {
  margin: 10px 0 0;
}

/* ─── ボタン ─────────────────────────────────────────── */
.player-page button {
  transition: background .15s, box-shadow .18s, transform .1s;
}

.player-page button:not(:disabled):active {
  transform: scale(.96);
}

.player-page button:disabled {
  opacity: .4;
}

.player-page .btn-primary {
  background: var(--color-accent);
  color: #fff;
  font-weight: 800;
}

.player-page .btn-primary:not(:disabled):hover {
  background: var(--primary-dark);
}

.player-page .text-button {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border);
  color: #374151;
  font-weight: 700;
  text-decoration: none;
}

.player-page .text-button:hover {
  background: #fff7ed;
  border-color: #fdba74;
}

.player-page .discord-button {
  width: 100%;
}

.player-page input,
.player-page select {
  border: 2px solid var(--color-border);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.player-page input:focus,
.player-page select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgb(249 115 22 / 15%);
}

.player-page label {
  margin: 0;
  color: #374151;
  font-weight: 700;
}

/* ─── 参加カード ─────────────────────────────────────── */
.player-page .join-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgb(123 132 148 / 22%);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--color-surface);
  box-shadow: none;
}

.player-page .waiting-card {
  align-items: center;
  text-align: center;
  padding: 40px 24px;
}

.player-page .waiting-icon {
  margin: 0;
  font-size: 56px;
  animation: icon-pulse 1.8s ease-in-out infinite;
}

@keyframes icon-pulse {
  50% {
    transform: scale(1.12);
  }
}

.player-page .section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}

.player-page .app-subtitle {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.player-page .section-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgb(100 116 139 / 22%);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
}

.player-page #join-panel > .section-box {
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 16px;
}

.player-page .profile-appearance {
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
}

.player-page .profile-appearance summary {
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
}

.player-page .profile-appearance-body {
  display: grid;
  gap: 16px;
  padding-bottom: 12px;
}

.player-page .profile-appearance input[type="file"] {
  min-width: 0;
  width: 100%;
}

.player-page .player-guide {
  margin: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
}

.player-page .player-guide summary {
  padding: 8px 0;
  font-size: 13px;
  font-weight: 400;
}

.player-page .field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-page .char-count {
  align-self: flex-end;
  color: var(--color-muted);
  font-size: 14px;
  font-family: monospace;
}

.player-page .icon-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-page .icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgb(100 116 139 / 22%);
  flex-shrink: 0;
}

.player-page .color-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.player-page .color-field legend {
  padding: 0;
  color: #374151;
  font-weight: 700;
}

.player-page .field-help {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.player-page .color-presets {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
}

.player-page .color-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.player-page .color-preset-group-title {
  flex: 0 0 100%;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
}

.player-page .color-swatch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 0 0 1px #9ca3af;
  cursor: pointer;
}

.player-page .color-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--color-text);
}

.player-page .color-swatch[aria-pressed="true"]::after {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-text);
  color: #fff;
  content: '✓';
  font-size: 12px;
  font-weight: 800;
}

.player-page .color-swatch:focus-visible,
.player-page .custom-color:focus-within {
  outline: 3px solid var(--color-text);
  outline-offset: 3px;
}

.player-page .custom-color {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.player-page .custom-color input {
  width: 30px;
  height: 30px;
  padding: 2px;
  border-width: 1px;
  cursor: pointer;
}

.player-page .color-value {
  font-size: 13px;
  color: var(--color-muted);
}

.player-page .join-note {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}

.player-page .section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-muted);
  font-size: 13px;
}

.player-page .section-divider::before,
.player-page .section-divider::after {
  flex: 1;
  height: 1px;
  background: #d1d5db;
  content: '';
}

.player-page .discord-profile {
  gap: 10px;
  border-color: #fdba74;
  border-radius: var(--radius);
  background: #fff7ed;
  font-size: 14px;
}

.player-page .fixed-team {
  margin: 0;
  border-radius: var(--radius);
  background: #fff7ed;
  color: #c2410c;
  padding: 10px 12px;
  font-size: 14px;
}

/* ─── 出題パネル ─────────────────────────────────────── */
.player-page .question-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgb(209 213 219 / 95%);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(15 23 42 / 8%);
}

.player-page .question-panel.your-turn {
  border-color: #fb923c;
  box-shadow: 0 8px 28px rgb(249 115 22 / 18%);
  animation: player-turn-enter .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes player-turn-enter {
  from { transform: scale(.985); }
  to { transform: scale(1); }
}

.player-page .question-text {
  margin: 0;
  padding: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

/* ─── グラデーション軸（上=高い / 下=低い） ─────────── */
.player-page .team-board-frame {
  --axis-color-high: #c2410c;
  --axis-color-low: #6366f1;
  position: relative;
  padding-left: 18px;
}

.player-page .team-board-frame::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 4px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--axis-color-high), var(--axis-color-low));
  content: '';
}

.player-page .team-board-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-page .team-board-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 44px;
}

.player-page .team-board-slot.empty {
  border-style: dashed;
  color: var(--color-muted);
}

.player-page .team-board-slot.selectable {
  cursor: pointer;
  border-color: var(--color-accent-2);
  background: #fdf2f8;
}

.player-page .team-board-slot-action {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.player-page .team-board-slot-action:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}

.player-page .team-board-slot img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
}

.player-page .team-board-slot.selected-for-change {
  outline: 2px solid var(--color-accent-2);
}

.player-page .team-board-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.player-page .team-board-choices.active {
  border-color: #fdba74;
  background: #fff7ed;
}

.player-page .team-board-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.player-page .step-number {
  display: grid;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.player-page .team-board-choices.active .step-number,
.player-page .team-board-placement.ready .step-number {
  background: var(--color-accent);
  color: #fff;
}

.player-page .team-board-step-help,
.player-page .team-board-progress-label {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.player-page .team-board-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-page .team-board-placement {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.player-page .team-board-placement.ready {
  border-color: #fdba74;
  background: #fff7ed;
}

.player-page .team-context {
  margin: 6px 0 12px;
  color: var(--color-muted);
  font-size: 13px;
}

.player-page .team-board-turn-order {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.player-page .team-board-turn-order li {
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 12px;
}

.player-page .team-board-turn-order li.current {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}

.player-page .team-board-turn-order li.done { text-decoration: line-through; opacity: 0.65; }
.player-page .team-board-turn-order li.you::after { content: '（自分）'; }

.player-page .status-text.team-board-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  text-align: left;
}

.player-page .team-board-status.active {
  border-left-color: var(--color-accent);
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
}

.player-page .team-board-status-description { font-size: 13px; font-weight: 400; }

.player-page .team-board-status.changing {
  border-left-color: #0284c7;
  background: #f0f9ff;
  color: #075985;
}

.player-page .team-board-turn-order li.current.changing {
  border-color: #0284c7;
  color: #075985;
  background: #f0f9ff;
}

.player-page .team-board-turn-order li.milestone.done {
  text-decoration: none;
  opacity: 1;
  border-color: #15803d;
  color: #15803d;
  background: #ecfdf3;
}

.player-page .team-board-status.complete { border-left-color: var(--color-ok); color: var(--color-ok); background: #ecfdf3; }

.player-page .team-board-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.player-page .team-board-choice-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 120px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.player-page .team-board-choice-card img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
}

.player-page .team-board-choice-card.selected {
  border-color: var(--color-accent-2);
  background: #fdf2f8;
  outline: 2px solid var(--color-accent-2);
}

.player-page .team-board-choice-card:disabled {
  cursor: default;
  opacity: 0.48;
  filter: grayscale(0.7);
}

.player-page .team-board-change-panel {
  margin-top: 12px;
}

.player-page .axis-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--axis-color-high);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  white-space: pre-wrap;
}

.player-page .axis-low {
  margin: 6px 0 0;
  color: var(--axis-color-low);
}

.player-page .axis-high::before {
  content: '▲';
  font-size: 10px;
}

.player-page .axis-low::before {
  content: '▼';
  font-size: 10px;
}

/* ─── 状態表示・確定フッター ─────────────────────────── */
.player-page .status-text {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(148 163 184 / 22%);
  color: var(--color-muted);
  padding: 9px 16px;
  font-size: 14px;
  text-align: center;
}

.player-page .status-text[data-kind="error"] {
  background: #fee2e2;
  box-shadow: inset 0 0 0 1px #fecaca;
  color: #991b1b;
}

.player-page .status-text[data-kind="done"] {
  background: #dcfce7;
  box-shadow: inset 0 0 0 1px #bbf7d0;
  color: #166534;
  font-weight: 700;
}

.player-page .status-text[data-kind="active"] {
  background: #fff7ed;
  box-shadow: inset 0 0 0 1px #fdba74;
  color: #c2410c;
  font-weight: 700;
}

.player-page .status-text[data-kind="closed"] {
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1px #cbd5e1;
  color: #475569;
  font-weight: 700;
}

.player-page .action-guide {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: #fff7ed;
  color: #9a3412;
  font-size: 15px;
  font-weight: 800;
}

/* ─── 結果発表 ─────────────────────────────────────── */
.player-page .result-preview {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  background: #fff;
}

.player-page .result-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #eef2ff;
  overflow: hidden;
}

.player-page .result-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
}

/* ─── ランキング ─────────────────────────────────────── */
.player-page .rank-card {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: #fff;
}

.player-page .score-row {
  border-bottom-color: #f1f5f9;
}

.player-page .score-row-own {
  border-radius: var(--radius);
  background: #fff7ed;
  box-shadow: inset 3px 0 0 var(--color-accent);
  padding-left: 8px;
}

.player-page .score-row strong {
  color: var(--color-accent);
}

.player-page .score-row:first-child {
  font-size: 18px;
}

.player-page .error-text {
  margin: 0;
}

.player-page .team-badge {
  font-weight: 700;
}

@media (max-width: 480px) {
  .player-page .site-header {
    gap: 6px;
    padding-inline: 8px;
  }

  .player-page .site-brand span,
  .player-page .header-avatar,
  .player-page .header-nickname {
    display: none;
  }

  .player-page .header-user {
    gap: 6px;
  }

  .player-page .team-badge {
    overflow: hidden;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-page main {
    padding: 14px 12px 24px;
  }

  .player-page .join-card,
  .player-page .question-panel {
    padding: 16px;
  }

  .player-page .color-presets {
    gap: 10px;
  }
}

.player-page .team-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.player-page .team-card-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.player-page .team-card {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-left: 6px solid #cbd5e1;
  border-radius: var(--radius);
  background: #fff;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.player-page .team-card-input:checked+.team-card {
  border-color: var(--color-accent);
  background: #fff7ed;
  box-shadow: 0 0 0 2px rgb(249 115 22 / 30%);
}

.player-page .team-card-input:focus-visible+.team-card {
  outline: 3px solid rgb(249 115 22 / 35%);
}

.player-page .team-card.team-accent-0 {
  border-left-color: var(--team-0);
}

.player-page .team-card.team-accent-1 {
  border-left-color: var(--team-1);
}

.player-page .team-card.team-accent-2 {
  border-left-color: var(--team-2);
}

.player-page .team-card.team-accent-3 {
  border-left-color: var(--team-3);
}

.player-page .team-card.team-accent-4 {
  border-left-color: var(--team-4);
}

.player-page .team-card.team-accent-5 {
  border-left-color: var(--team-5);
}

.player-page .field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .player-page .question-panel.your-turn,
  .player-page .team-board-status.active::before {
    animation: none;
  }
}