.home-page .page-scroll { padding-top: clamp(22px, 4vw, 44px); }

.game-rules-dialog { --rule-accent: var(--primary); }
.game-rules-trigger { color: var(--primary); }

.presence-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(150deg, #1b3556, #12203a);
  box-shadow: var(--shadow);
  transition: border-color 0.22s ease, transform 0.22s var(--bounce), box-shadow 0.22s ease;
}

.presence-item:hover { transform: translateY(-3px); }

.presence-item svg,
.presence-item strong { color: var(--primary); }

.opt-btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #12203a;
  color: var(--text-sec);
  transition: transform 0.18s var(--bounce), border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.opt-btn:hover { border-color: var(--primary); color: var(--primary); }
.opt-btn.active { border-color: var(--primary); background: var(--primary); color: #1a0e00; box-shadow: 0 8px 20px rgba(255, 138, 30, 0.25); }
.spectator-option input { accent-color: var(--primary); }

.room-code-display {
  border: 1px solid rgba(255, 138, 30, 0.4);
  border-radius: 14px;
  background: #0b1726;
  color: var(--primary);
}

.room-code-toggle {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #12203a;
  color: var(--text-sec);
}

.score-bar {
  border: 1px solid rgba(255, 138, 30, 0.25);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 138, 30, 0.06), transparent 30%, transparent 70%, rgba(255, 138, 30, 0.06)),
    #14263c;
  overflow: hidden;
}

.score-bar .score { color: var(--primary); font-family: Bahnschrift, Consolas, monospace; }
.countdown { color: var(--primary); }
.countdown.urgent {
  color: var(--danger);
  animation: urgent-pulse 0.9s ease-in-out infinite;
}
.spinner { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--primary); }