/**
 * Shared Zuwarah game UI layer.
 *
 * Keep gameplay layouts in their own CSS files. This file owns the common
 * brand chrome used across lobbies, setup flows, host screens, and players.
 */

:root {
  --game-surface: rgba(30, 41, 59, 0.9);
  --game-surface-strong: rgba(15, 23, 42, 0.96);
  --game-surface-soft: rgba(51, 65, 85, 0.58);
  --game-border: rgba(250, 204, 21, 0.28);
  --game-border-strong: rgba(250, 204, 21, 0.55);
  --game-glow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 0 26px rgba(250, 204, 21, 0.12);
  --game-focus-ring: 0 0 0 3px rgba(250, 204, 21, 0.34);
  --game-danger: var(--accent-red, #ef4444);
  --game-success: var(--accent-green, #22c55e);
  --game-warning: var(--accent-orange, #f59e0b);
}

.zwarah-game-page,
body.lobby-unified-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(250, 204, 21, 0.08), transparent 32rem),
    radial-gradient(circle at 92% 18%, rgba(59, 130, 246, 0.1), transparent 30rem),
    var(--bg-primary);
}

.zwarah-game-page {
  min-height: 100vh;
  color: var(--text-primary);
}

.zwarah-game-page a {
  -webkit-tap-highlight-color: transparent;
}

.zwarah-game-page :where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--game-focus-ring);
}

.zwarah-game-title,
.game-page-title,
.waselha-page-title,
.host-spy-title,
.spy-player-title,
.t10-host-title,
.t10p-title,
.hrf-title {
  color: var(--accent-gold);
  letter-spacing: -0.01em;
  text-shadow: 0 8px 26px rgba(250, 204, 21, 0.18);
}

.game-panel,
.game-card,
.game-status-panel,
.host-spy-phase,
.spy-player-role,
.spy-timer-box,
.spy-vote-box,
.spy-reveal-box,
.spy-score-box,
.spy-game-ended-box,
.spy-guess-box,
.t10-prompt,
.t10-scores,
.t10-ended,
.t10p-prompt,
.t10p-scores,
.t10p-guess,
.t10p-ended,
.waselha-question-panel,
#waselha-profile {
  background: linear-gradient(165deg, var(--game-surface), var(--game-surface-strong));
  border: 1px solid var(--game-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--game-glow);
}

.game-muted,
.spy-player-waiting,
.t10-wait,
.t10p-wait,
.waselha-meta {
  color: var(--text-secondary);
}

.btn-modern,
.btn-gold,
.btn-blue,
.btn-outline,
.btn-ghost,
.zwarah-host-btn,
.spy-request-vote-btn,
.host-control-btn,
.control-btn,
.t10p-guess button,
.t10p-podium-btn,
.waselha-powers button {
  min-height: 44px;
  border-radius: var(--radius-md);
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition:
    transform var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-base, 0.3s ease),
    border-color var(--transition-base, 0.3s ease),
    background var(--transition-base, 0.3s ease),
    color var(--transition-base, 0.3s ease);
}

.btn-modern,
.btn-gold,
.t10p-guess button,
.t10p-podium-btn,
.waselha-powers button {
  text-decoration: none;
}

.btn-modern:is(:disabled, [disabled]),
.btn-gold:is(:disabled, [disabled]),
.btn-blue:is(:disabled, [disabled]),
.btn-outline:is(:disabled, [disabled]),
.btn-ghost:is(:disabled, [disabled]),
.zwarah-host-btn:is(:disabled, [disabled]),
.spy-request-vote-btn:is(:disabled, [disabled]),
.control-btn:is(:disabled, [disabled]),
.host-control-btn:is(:disabled, [disabled]),
.waselha-powers button:is(:disabled, [disabled]) {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.btn-gold,
.btn-modern.btn-gold,
.spy-request-vote-btn.is-primary,
.t10p-guess button,
.t10p-podium-btn {
  background: var(--gradient-gold);
  color: var(--bg-primary);
  border: 0;
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover,
.btn-modern.btn-gold:hover,
.spy-request-vote-btn.is-primary:hover,
.t10p-guess button:hover,
.t10p-podium-btn:hover {
  color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(250, 204, 21, 0.38);
}

.btn-blue,
.btn-modern.btn-blue,
.spy-request-vote-btn,
.control-btn {
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.24);
}

.btn-outline,
.btn-modern.btn-outline,
.spy-request-vote-btn.is-secondary {
  background: rgba(15, 23, 42, 0.35);
  color: var(--accent-gold);
  border: 2px solid var(--game-border-strong);
}

.btn-ghost,
.btn-modern.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.control-btn.warning,
.host-control-btn.warning,
.spy-request-vote-btn.is-warning {
  background: linear-gradient(135deg, var(--game-warning), #d97706);
  color: #111827;
}

.control-btn.success,
.host-control-btn.success,
.spy-request-vote-btn.is-success {
  background: linear-gradient(135deg, var(--game-success), #16a34a);
  color: #052e16;
}

.control-btn.danger,
.host-control-btn.danger,
.zwarah-host-btn.danger,
.spy-request-vote-btn.is-danger {
  background: rgba(127, 29, 29, 0.72);
  color: #fecaca;
  border: 2px solid rgba(248, 113, 113, 0.58);
  box-shadow: none;
}

.zwarah-host-controls,
.zwarah-player-bar,
.game-action-row,
.game-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.zwarah-host-controls {
  margin: 0 auto var(--spacing-lg);
}

.zwarah-player-bar {
  margin: 0 auto var(--spacing-md);
}

.zwarah-host-controls .zwarah-host-btn,
.zwarah-player-bar .zwarah-host-btn,
a.zwarah-host-btn,
button.zwarah-host-btn {
  appearance: none;
  -webkit-appearance: none;
  background: var(--gradient-gold);
  color: var(--bg-primary);
  border: 0;
  box-shadow: var(--shadow-gold);
  padding: 0.6rem 1rem;
  text-decoration: none;
  cursor: pointer;
}

.zwarah-host-controls .zwarah-host-btn:hover,
.zwarah-player-bar .zwarah-host-btn:hover,
a.zwarah-host-btn:hover,
button.zwarah-host-btn:hover {
  color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(250, 204, 21, 0.34);
}

.game-status-pill,
.phase-indicator-modern,
.question-counter-modern,
#waselha-turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--game-border);
  background: rgba(15, 23, 42, 0.68);
  color: var(--accent-gold);
  font-weight: 900;
}

.game-table,
.t10-scores table,
.t10p-scores table,
.spy-score-box table,
.spy-game-ended-box table {
  width: 100%;
  border-collapse: collapse;
}

.game-table th,
.game-table td,
.t10-scores th,
.t10-scores td,
.t10p-scores th,
.t10p-scores td,
.spy-score-box th,
.spy-score-box td,
.spy-game-ended-box th,
.spy-game-ended-box td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.game-input,
.zwarah-game-page input[type="text"],
.zwarah-game-page select {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(250, 204, 21, 0.24);
  background: rgba(15, 23, 42, 0.78);
  color: var(--text-primary);
  font-family: 'Tajawal', sans-serif;
}

@media (max-width: 640px) {
  .btn-modern,
  .btn-gold,
  .btn-blue,
  .btn-outline,
  .btn-ghost,
  .zwarah-host-btn,
  .spy-request-vote-btn,
  .host-control-btn,
  .control-btn,
  .waselha-powers button {
    width: 100%;
  }

  .zwarah-host-controls,
  .zwarah-player-bar,
  .game-action-row,
  .game-toolbar {
    align-items: stretch;
  }
}