/* ===============================
   PIXEL THEME - Rooster
   Accent-only retro layer
   Press Start 2P for scores, levels, badges, trophies
   =============================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* --- Pixel Font Utility Classes --- */

.pixel-font {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.pixel-font-lg {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  line-height: 1.6;
}

/* --- Pixel Font on Score Values --- */

.score-value,
.level-badge,
.xp-value,
.rank-number,
.scoreboard-points {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}

/* --- Challenge Points (score element) --- */

.challenge-points {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
}

/* --- Trophy Text (accent elements) --- */

.trophy-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 3px 3px 0 #000;
}

.trophy-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.8;
}

.trophy-points {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
}

/* --- Level-Up Animation --- */

@keyframes levelUpPop {
  0%   { transform: translateX(-50%) scale(0) rotate(-10deg); opacity: 0; }
  50%  { transform: translateX(-50%) scale(1.2) rotate(3deg);  opacity: 1; }
  80%  { transform: translateX(-50%) scale(0.95) rotate(0);    opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(0);       opacity: 1; }
}

@keyframes levelUpFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.level-up-toast {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  text-align: center;
  pointer-events: none;
  background: var(--color-bg-elevated, #242424);
  border: 2px solid var(--color-accent-gold, #ffe500);
  border-radius: var(--radius-md, 12px);
  padding: 20px 32px;
  box-shadow: 5px 5px 0px 0px #ffe500;
}

.level-up-toast.pop-in {
  animation: levelUpPop 0.5s ease forwards;
}

.level-up-toast.fade-out {
  animation: levelUpFadeOut 0.4s ease forwards;
}

.level-up-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--color-accent-gold, #f4c430);
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 8px;
}

.level-up-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: var(--color-text-primary, #e8edf2);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

/* --- Wheel Pointer (accent element) --- */

.wheel-pointer {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: var(--color-accent-gold, #f4c430);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  z-index: 10;
}

/* --- Wheel Result Text (accent) --- */

.wheel-result-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  line-height: 1.6;
}

.wheel-result-type {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
}

.wheel-result-points {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
}

/* --- Popup Header (accent) --- */

.popup-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.6;
}

/* --- Touch Target Enforcement --- */

.btn { min-height: 44px; }
.btn-xs { min-height: 44px; padding: 8px 12px; }
.nav-btn { min-height: 56px; }

/* --- Admin Header Icon --- */

.admin-header-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Sound Upload Admin Styles --- */

.sound-upload-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.sound-upload-row label { min-width: 110px; font-weight: bold; }
.sound-status { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--color-text-muted, #556677); color: #fff; }
.sound-status.sound-custom { background: var(--color-accent-gold, #f4c430); color: #000; }
.sound-file-input { max-width: 200px; }

/* --- Touch Target Audit Fixes --- */

.challenge-action-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
}

.modal-close {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-result-close {
  min-height: 44px;
}

.challenge-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.popup-overlay button {
  min-height: 44px;
}