:root {
  --wh-bg: #0a0a0f;
  --wh-bg-card: #14141f;
  --wh-bg-elevated: #1c1c2e;
  --wh-gold: #c9a84c;
  --wh-gold-dim: #8a7434;
  --wh-red: #8b1a1a;
  --wh-red-bright: #cc3333;
  --wh-blue: #3a5a8c;
  --wh-purple: #6a5acd;
  --wh-text: #e8e0d0;
  --wh-text-secondary: #8a8078;
  --wh-text-system: #c9a84c;
  --wh-border: #2a2a3a;
  --wh-font-heading: 'Playfair Display', Georgia, serif;
  --wh-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--wh-bg);
  color: var(--wh-text);
  font-family: var(--wh-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#whodunit-root {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Scrollable areas within the game */
.wh-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--wh-gold-dim) transparent;
}

.wh-scroll::-webkit-scrollbar { width: 4px; }
.wh-scroll::-webkit-scrollbar-track { background: transparent; }
.wh-scroll::-webkit-scrollbar-thumb { background: var(--wh-gold-dim); border-radius: 2px; }

/* Safe area padding for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .wh-safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .wh-safe-top { padding-top: env(safe-area-inset-top); }
}

/* Typography */
.wh-heading {
  font-family: var(--wh-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wh-gold);
}

.wh-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-text-secondary);
}

/* Buttons */
.wh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-family: var(--wh-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.wh-btn:active { transform: scale(0.97); }
.wh-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.wh-btn-primary {
  background: var(--wh-gold);
  color: #0a0a0f;
}
.wh-btn-primary:hover:not(:disabled) { background: #d4b355; }

.wh-btn-danger {
  background: var(--wh-red);
  color: var(--wh-text);
}
.wh-btn-danger:hover:not(:disabled) { background: var(--wh-red-bright); }

.wh-btn-ghost {
  background: transparent;
  color: var(--wh-text);
  border: 1px solid var(--wh-border);
}
.wh-btn-ghost:hover:not(:disabled) { border-color: var(--wh-gold-dim); color: var(--wh-gold); }

.wh-btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* Cards */
.wh-card {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 10px;
  padding: 16px;
}

.wh-card-elevated {
  background: var(--wh-bg-elevated);
  border: 1px solid var(--wh-border);
  border-radius: 10px;
  padding: 16px;
}

/* Input fields */
.wh-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 8px;
  color: var(--wh-text);
  font-family: var(--wh-font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 200ms ease;
}
.wh-input:focus { border-color: var(--wh-gold-dim); }
.wh-input::placeholder { color: var(--wh-text-secondary); }

/* Room code input */
.wh-code-input {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.wh-code-char {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--wh-font-heading);
  text-transform: uppercase;
  background: var(--wh-bg-card);
  border: 2px solid var(--wh-border);
  border-radius: 8px;
  color: var(--wh-gold);
  outline: none;
  transition: border-color 200ms ease;
}
.wh-code-char:focus { border-color: var(--wh-gold); }

/* Timer bar */
.wh-timer-bar {
  height: 4px;
  background: var(--wh-border);
  position: relative;
  overflow: hidden;
}

.wh-timer-fill {
  height: 100%;
  background: var(--wh-gold);
  transition: width 1s linear, background-color 500ms ease;
}
.wh-timer-fill.warning { background: var(--wh-red-bright); }

/* Evidence card styling */
.wh-evidence {
  background: var(--wh-bg-elevated);
  border-left: 3px solid var(--wh-gold-dim);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  animation: evidenceSlideIn 400ms ease-out;
}

.wh-evidence.private {
  border-left-color: var(--wh-purple);
  background: rgba(106, 90, 205, 0.08);
}

.wh-evidence.framed {
  border-left-color: var(--wh-red);
}

.wh-evidence-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wh-gold-dim);
  margin-bottom: 4px;
}

/* Chat messages */
.wh-chat-msg {
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeIn 200ms ease;
}
.wh-chat-msg .sender { font-weight: 600; color: var(--wh-gold); }
.wh-chat-msg.system { color: var(--wh-text-system); font-style: italic; }
.wh-chat-msg.whisper { color: var(--wh-purple); }
.wh-chat-msg.rumor { color: var(--wh-text-secondary); font-style: italic; }

/* Character bar */
.wh-char-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
}

.wh-char-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--wh-font-heading);
  background: var(--wh-bg-elevated);
  border: 2px solid var(--wh-border);
  cursor: pointer;
  transition: all 200ms ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.wh-char-avatar:hover { border-color: var(--wh-gold-dim); }
.wh-char-avatar.detective { border-color: var(--wh-blue); }
.wh-char-avatar.self { border-color: var(--wh-gold); }
.wh-char-avatar.disconnected { opacity: 0.3; }

/* Role badges */
.wh-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wh-role-badge.murderer { background: var(--wh-red); color: var(--wh-text); }
.wh-role-badge.detective { background: var(--wh-blue); color: var(--wh-text); }
.wh-role-badge.innocent { background: var(--wh-bg-elevated); color: var(--wh-text-secondary); border: 1px solid var(--wh-border); }

/* Voting */
.wh-vote-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--wh-bg-card);
  border: 2px solid var(--wh-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wh-vote-option:hover { border-color: var(--wh-gold-dim); }
.wh-vote-option.selected { border-color: var(--wh-gold); background: rgba(201, 168, 76, 0.08); }

.wh-vote-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--wh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 200ms ease;
}
.wh-vote-option.selected .wh-vote-radio {
  border-color: var(--wh-gold);
}
.wh-vote-option.selected .wh-vote-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wh-gold);
}

/* Select dropdown */
.wh-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 8px;
  color: var(--wh-text);
  font-family: var(--wh-font-body);
  font-size: 14px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8078' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.wh-select:focus { border-color: var(--wh-gold-dim); }

/* Animations */
@keyframes evidenceSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes revealTypewriter {
  from { max-height: 0; opacity: 0; }
  to { max-height: 500px; opacity: 1; }
}

.wh-fade-in { animation: fadeIn 300ms ease; }
.wh-fade-in-up { animation: fadeInUp 400ms ease-out; }
.wh-pulse { animation: pulse 2s ease-in-out infinite; }

/* Ability panel */
.wh-ability-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: var(--wh-bg-elevated);
  border: 1px solid var(--wh-border);
  border-radius: 8px;
  color: var(--wh-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  flex: 1;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.wh-ability-btn:hover:not(:disabled) { border-color: var(--wh-gold-dim); }
.wh-ability-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.wh-ability-btn .uses { font-size: 11px; color: var(--wh-text-secondary); }

/* Genre pills */
.wh-genre-pill {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  color: var(--wh-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wh-genre-pill:hover { border-color: var(--wh-gold-dim); }
.wh-genre-pill.selected {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--wh-gold);
  color: var(--wh-gold);
}

/* Mode toggle */
.wh-mode-toggle {
  display: flex;
  border: 1px solid var(--wh-border);
  border-radius: 8px;
  overflow: hidden;
}
.wh-mode-option {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--wh-text-secondary);
  cursor: pointer;
  transition: all 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.wh-mode-option.selected {
  background: var(--wh-gold);
  color: #0a0a0f;
}

/* Player list in lobby */
.wh-player-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wh-border);
}
.wh-player-slot:last-child { border-bottom: none; }
.wh-player-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wh-player-dot.connected { background: #4ade80; }
.wh-player-dot.waiting { background: var(--wh-border); }

/* Modal/overlay */
.wh-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: fadeIn 200ms ease;
}

.wh-modal {
  background: var(--wh-bg-card);
  border: 1px solid var(--wh-border);
  border-radius: 12px;
  padding: 24px;
  max-width: 360px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

/* Reveal sequence */
.wh-reveal-step {
  text-align: center;
  animation: fadeInUp 600ms ease-out;
}

.wh-reveal-vote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: var(--wh-bg-elevated);
  border-radius: 6px;
  font-size: 14px;
  animation: fadeInUp 400ms ease-out;
}

.wh-reveal-truth {
  font-family: var(--wh-font-heading);
  font-size: 22px;
  color: var(--wh-gold);
  text-align: center;
  padding: 24px 0;
}

/* Notification toast */
.wh-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wh-bg-elevated);
  border: 1px solid var(--wh-gold-dim);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--wh-gold);
  z-index: 200;
  animation: fadeInUp 300ms ease-out;
  pointer-events: none;
}

/* Responsive */
@media (min-width: 640px) {
  .wh-desktop-center {
    max-width: 420px;
    margin: 0 auto;
  }
}