/* =============================================
   PROFI FIFO Challenge - Main Stylesheet
   Theme: Industrial Modern (Dark Blue, Orange, White)
   ============================================= */

/* === CSS Variables & Theme === */
:root {
  /* Primary palette */
  --color-primary: #1A237E;
  --color-primary-light: #283593;
  --color-primary-dark: #0D1442;
  --color-accent: #FF6F00;
  --color-accent-light: #FF8F00;
  --color-accent-dark: #E65100;
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  
  /* Feedback */
  --color-success: #22C55E;
  --color-success-bg: #DCFCE7;
  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;
  
  /* Stars */
  --color-star: #FFD700;
  --color-star-empty: #CBD5E1;
  
  /* Dimensions */
  --header-height: 64px;
  --footer-height: 48px;
  --sidebar-width: 300px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 20px rgba(255,111,0,0.3);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Fonts */
  --font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-primary);
  background: var(--color-gray-900);
  color: var(--color-gray-100);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* === Scrollbar === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-600); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-500); }

/* === Typography === */
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

/* === App Container === */
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* === Screens === */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--transition-normal);
  /* Safety net: an inactive screen must NEVER intercept clicks meant for
     whatever screen is actually showing, even if some other rule
     accidentally forces it visible (see .screen-teacher bug below). */
  pointer-events: none;
}

.screen.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* =============================================
   MENU SCREEN
   ============================================= */
.screen-menu {
  background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-primary-dark) 50%, var(--color-gray-900) 100%);
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.screen-menu::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(255,111,0,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(26,35,126,0.15) 0%, transparent 50%);
  animation: menuBgFloat 20s ease-in-out infinite;
}

@keyframes menuBgFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(2%, 1%) rotate(1deg); }
  66% { transform: translate(-1%, -1%) rotate(-1deg); }
}

.menu-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 500px;
  padding: 40px 20px;
}

.menu-logo {
  font-size: 4rem;
  margin-bottom: 8px;
  display: block;
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.menu-title {
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 8px;
}

.menu-subtitle {
  font-size: 0.9rem;
  color: var(--color-gray-400);
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  padding: 16px 48px;
  font-size: 1.1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
  min-width: 220px;
}

.btn-primary:hover {
  box-shadow: 0 0 30px rgba(255,111,0,0.5);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.96);
}

.btn-secondary {
  padding: 12px 32px;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.08);
  color: var(--color-gray-200);
  border: 1px solid rgba(255,255,255,0.12);
  min-width: 220px;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--color-accent);
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  min-width: 0;
  flex: 1 1 auto;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  color: var(--color-gray-300);
  font-size: 1.2rem;
}

.btn-icon:hover {
  background: rgba(255,255,255,0.15);
}

.btn-ghost {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-gray-400);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--color-gray-200);
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-danger {
  background: var(--color-error);
  color: white;
}

/* =============================================
   PHASE SELECT SCREEN
   ============================================= */
.screen-phases {
  background: var(--color-gray-900);
}

.phases-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(26,35,126,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.phases-header h2 {
  flex: 1;
  font-size: 1.2rem;
}

.phases-header .player-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--color-gray-400);
}

.phases-header .player-level {
  padding: 4px 12px;
  background: rgba(255,111,0,0.15);
  color: var(--color-accent-light);
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.75rem;
}

.phases-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 24px;
  align-content: start;
}

.phase-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.phase-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.phase-card:active {
  transform: translateY(0);
}

.phase-card.completed {
  border-color: rgba(34,197,94,0.3);
}

.phase-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.phase-card.locked:hover {
  transform: none;
  border-color: rgba(255,255,255,0.08);
}

.phase-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.phase-card-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.phase-card-info {
  flex: 1;
  min-width: 0;
}

.phase-card-info h3 {
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.phase-card-info .difficulty {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
}

.difficulty-iniciante { background: rgba(34,197,94,0.15); color: #4ADE80; }
.difficulty-fácil { background: rgba(59,130,246,0.15); color: #60A5FA; }
.difficulty-intermediário { background: rgba(245,158,11,0.15); color: #FBBF24; }
.difficulty-avançado { background: rgba(239,68,68,0.15); color: #F87171; }
.difficulty-especialista { background: rgba(168,85,247,0.15); color: #C084FC; }
.difficulty-desafio-final { background: linear-gradient(135deg, rgba(255,111,0,0.2), rgba(239,68,68,0.2)); color: #FF8F00; }

.phase-card p {
  font-size: 0.85rem;
  color: var(--color-gray-400);
  line-height: 1.5;
  margin-top: 8px;
}

.phase-card-stars {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.phase-card-stars .star {
  font-size: 1.5rem;
  transition: all var(--transition-fast);
}

.phase-card-stars .star.empty {
  filter: grayscale(1);
  opacity: 0.3;
}

.phase-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.phase-card-footer .best-score {
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

.mode-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 24px 24px;
}

.mode-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
}

.mode-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-accent);
}

.mode-card .mode-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.mode-card h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.mode-card p {
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* =============================================
   GAME SCREEN
   ============================================= */
.screen-game {
  background: var(--color-gray-900);
}

/* Game HUD */
.game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(13,20,66,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  z-index: 10;
}

.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hud-phase-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-gray-200);
}

.hud-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-accent-light);
  min-width: 60px;
}

.hud-timer.warning {
  color: var(--color-error);
  animation: timerPulse 0.5s ease-in-out infinite;
}

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

.hud-score {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-300);
}

.hud-combo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(255,111,0,0.2), rgba(255,111,0,0.1));
  border: 1px solid rgba(255,111,0,0.3);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-light);
  transition: all var(--transition-bounce);
}

.hud-combo.active {
  animation: comboPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes comboPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.hud-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-gray-400);
}

.hud-progress-bar {
  width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.hud-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  border-radius: 2px;
  transition: width var(--transition-normal);
}

/* Game Area */
.game-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Warehouse View */
.warehouse-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
  position: relative;
}

/* Rack / Shelf */
.rack-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  min-width: 100px;
}

.rack-label {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  text-align: center;
  padding: 2px 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.rack-row {
  display: flex;
  gap: 4px;
}

.rack-slot {
  width: 90px;
  height: 90px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Prevents double-tap-to-zoom and the ~300ms tap delay on touch
     devices (tablets/celulares), which made taps feel unresponsive. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rack-slot:hover {
  border-color: rgba(255,111,0,0.3);
  background: rgba(255,111,0,0.05);
}

.rack-slot:active {
  transform: scale(0.95);
}

.rack-slot.has-product {
  border-style: solid;
  border-color: rgba(255,255,255,0.12);
  cursor: pointer;
}

.rack-slot.has-product:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 15px rgba(255,111,0,0.3), inset 0 0 20px rgba(255,111,0,0.05);
  background: rgba(255,111,0,0.08);
}

.rack-slot .corridor-marker {
  position: absolute;
  bottom: 2px;
  font-size: 0.6rem;
  color: var(--color-gray-600);
}

/* Pulse indicator on the first clickable product */
.rack-slot.has-product.click-indicator {
  animation: clickPulse 2s ease-in-out infinite;
}

@keyframes clickPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,111,0,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,111,0,0); }
}

.rack-slot.has-product.click-indicator::after {
  content: '👆 Clique aqui';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-accent-light);
  white-space: nowrap;
  pointer-events: none;
  animation: clickPulseText 2s ease-in-out infinite;
}

@keyframes clickPulseText {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* =============================================
   PRODUCT ON SHELF
   ============================================= */
.product-box {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  position: relative;
  transition: all var(--transition-normal);
  overflow: hidden;
}

.product-box .product-icon {
  font-size: 1.5rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.product-box .product-name {
  font-size: 0.55rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.product-box .product-date {
  font-size: 0.45rem;
  opacity: 0.7;
  font-family: var(--font-mono);
  position: relative;
  z-index: 1;
}

.product-box.selected {
  animation: productSelected 0.3s ease;
  box-shadow: 0 0 20px rgba(34,197,94,0.5);
}

@keyframes productSelected {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.product-box.wrong {
  animation: productWrong 0.5s ease;
}

@keyframes productWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.product-box .expiry-warning {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.6rem;
  animation: pulse 1s ease-in-out infinite;
}

/* =============================================
   FORKLIFT / PALLET RACK VIEW (paletes espalhados,
   visão de dentro da empilhadeira - protótipo Fase 2)
   ============================================= */
.forklift-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 12px;
  overflow: hidden;
}

.forklift-cabin-frame {
  position: relative;
  flex: 1;
  border-radius: 18px;
  background: linear-gradient(180deg, #1a2332 0%, #10151f 60%, #0b0e14 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.04);
  overflow: auto;
  display: flex;
  /* flex-start (not center) so a grid that's taller than the frame never
     gets pushed up behind the opaque .cabin-top-bar - the JS sizes the
     grid to fit available space (see fitPalletRackToFrame in main.js),
     but flex-start is kept as a defensive second layer. */
  align-items: flex-start;
  justify-content: center;
  padding: 56px 64px 72px;
}

/* Cabin pillars - dark shapes converging like looking through a windshield */
.forklift-cabin-frame::before,
.forklift-cabin-frame::after {
  content: '';
  position: absolute;
  top: 0;
  width: 90px;
  height: 130px;
  background: #05070a;
  z-index: 5;
  pointer-events: none;
}
.forklift-cabin-frame::before {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 30% 100%, 0 100%);
}
.forklift-cabin-frame::after {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%);
}

.cabin-top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-gray-400);
  letter-spacing: 0.05em;
  z-index: 6;
  border-bottom: 2px solid rgba(255,111,0,0.25);
}

.cabin-mirror {
  position: absolute;
  top: 46px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0d1117;
  border: 3px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 7;
}
.cabin-mirror-left { left: 10px; }
.cabin-mirror-right { right: 10px; }

/* Faint hazard-stripe floor marking behind the forks - a small industrial
   touch so the aisle reads as a real warehouse floor, not empty void. */
.warehouse-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: repeating-linear-gradient(135deg, rgba(245,158,11,0.4) 0 16px, rgba(10,10,10,0.4) 16px 32px);
  z-index: 1;
  pointer-events: none;
}

/* Forklift forks reaching into view at the bottom */
.forklift-forks {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 46px;
  z-index: 5;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
}
.forklift-forks::before,
.forklift-forks::after {
  content: '';
  width: 18%;
  height: 100%;
  background: linear-gradient(180deg, #4a4a4a, #232323);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
  border-radius: 4px 4px 0 0;
}

/* Wraps the rack-frame (beams/uprights) and the grid together. Sized
   purely by the grid (the frame is absolutely positioned/out of flow),
   so the two always match exactly regardless of phase grid size. */
.pallet-rack-wrap {
  position: relative;
}

/* Pallet rack grid (grid-template-columns/rows set inline per phase config) */
.pallet-rack-grid {
  display: grid;
  gap: 14px;
  align-content: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Real "porta-paletes" structure (blue uprights + orange beams) drawn
   behind the bays. IMPORTANT: this is a SIBLING of .pallet-rack-grid, not
   a grid child - if it were placed inside the grid (even spanning
   1/-1), CSS Grid's auto-placement would treat that whole area as
   "occupied" and push every auto-placed .pallet-bay into brand new
   implicit rows below, with squashed auto-sized heights (this exact bug
   happened once already). Positioned absolute + inset:0 instead, so it
   just overlays the grid's box without taking part in its layout. */
.rack-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.rack-upright {
  position: absolute;
  width: 8px;
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 45%, #1e40af 55%, #1e3a8a 100%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), inset 0 0 3px rgba(255,255,255,0.25);
}

.rack-upright::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.45) 1.4px, transparent 1.4px);
  background-size: 8px 16px;
  background-position: center top;
  opacity: 0.7;
}

.rack-beam {
  position: absolute;
  height: 10px;
  background: linear-gradient(180deg, #fb923c 0%, #f97316 45%, #ea580c 60%, #c2410c 100%);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}

.rack-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 28px);
}

.pallet-bay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.pallet-bay-empty {
  width: 100%;
  height: 55%;
  border: 2px dashed rgba(255,255,255,0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--color-gray-600);
}

.pallet-unit {
  position: relative;
  width: 100%;
  height: 85%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.pallet-unit:hover {
  transform: translateY(-3px);
  filter: brightness(1.15);
}

.pallet-unit:active {
  transform: scale(0.95);
}

.pallet-unit.selected {
  animation: productSelected 0.3s ease;
}

.pallet-unit.wrong {
  animation: productWrong 0.5s ease;
}

.pallet-box {
  width: 88%;
  flex: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  position: relative;
}

.pallet-box .pallet-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.pallet-box .pallet-name {
  font-size: 0.52rem;
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
  line-height: 1.15;
}

/* Wood pallet base under the boxes */
.pallet-wood {
  width: 100%;
  height: 12px;
  background: repeating-linear-gradient(90deg, #8a5a2b 0px, #8a5a2b 8px, #6e4620 8px, #6e4620 10px);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Big, prominent date tag - finding this is the whole point of the game */
.pallet-date-tag {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #FFD166;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 3;
  /* Safety net: even after the JS shrinks the font/text (see main.js -
     buildBayInnerHtml), cap the width to the bay itself so a date tag can
     never physically overlap its neighbors - if it still doesn't fit,
     truncate with an ellipsis instead of spilling sideways. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Used on narrower columns (phase 4+) where the full "📅 DD/MM/AAAA"
   label no longer fits without overlapping the tag next to it. */
.pallet-date-tag.compact {
  font-size: 0.6rem;
  padding: 2px 5px;
}

.pallet-date-tag.compact.tiny {
  font-size: 0.56rem;
  padding: 2px 4px;
}

.pallet-date-tag.expired { color: #EF4444; }
.pallet-date-tag.critical { color: #F59E0B; }

/* Remaining-quantity badge */
.pallet-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-accent);
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 4;
}

/* "Acionar Fornecedor" button - only shown when the needed product is
   nowhere to be found on the rack */
/* Always-visible helper box (not a warning anymore - it used to only
   appear once stock ran out, which was itself a hint, so it's now shown
   at all times with a neutral/informational tone instead of the old
   red "something's wrong" styling). */
.supplier-callout {
  margin-top: 10px;
  padding: 10px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 10px;
  text-align: center;
}

.supplier-callout p {
  font-size: 0.75rem;
  color: var(--color-gray-300, #CBD5E1);
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .forklift-cabin-frame {
    padding: 44px 24px 56px;
  }
  .forklift-cabin-frame::before,
  .forklift-cabin-frame::after {
    width: 40px;
    height: 90px;
  }
  .pallet-box .pallet-icon { font-size: 1.3rem; }
  .pallet-date-tag { font-size: 0.6rem; }
}

/* =============================================
   ORDER PANEL
   ============================================= */
.order-panel {
  width: 320px;
  background: rgba(13,20,66,0.6);
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px;
  gap: 16px;
}

.order-panel-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.current-order {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  animation: orderSlideIn 0.4s ease;
}

@keyframes orderSlideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.current-order .order-product-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.current-order .order-product-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.current-order .order-quantity {
  font-size: 0.9rem;
  color: var(--color-gray-400);
}

.current-order .order-urgent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(239,68,68,0.15);
  color: #F87171;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 8px;
  animation: urgentPulse 1s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.order-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.order-list-item:hover {
  background: rgba(255,255,255,0.04);
}

.order-list-item.completed {
  opacity: 0.4;
  text-decoration: line-through;
}

.order-list-item .oli-icon {
  font-size: 1.5rem;
}

.order-list-item .oli-info {
  flex: 1;
  min-width: 0;
}

.order-list-item .oli-name {
  font-size: 0.85rem;
  font-weight: 500;
}

.order-list-item .oli-qty {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.order-list-item .oli-status {
  font-size: 1.2rem;
}

/* =============================================
   TUTORIAL OVERLAY
   ============================================= */
.tutorial-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.tutorial-card {
  background: var(--color-gray-800);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  animation: tutorialIn 0.4s ease;
}

@keyframes tutorialIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.tutorial-card .tut-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.tutorial-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.tutorial-card p {
  font-size: 0.95rem;
  color: var(--color-gray-300);
  line-height: 1.6;
  margin-bottom: 24px;
}

.tutorial-card .btn {
  min-width: 180px;
}

/* =============================================
   FEEDBACK / ERROR OVERLAY
   ============================================= */
.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.feedback-card {
  max-width: 480px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  animation: feedbackIn 0.3s ease;
}

@keyframes feedbackIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.feedback-card.correct {
  background: linear-gradient(135deg, #065F46, #047857);
  border: 1px solid rgba(34,197,94,0.3);
}

.feedback-card.wrong {
  background: linear-gradient(135deg, #7F1D1D, #991B1B);
  border: 1px solid rgba(239,68,68,0.3);
}

.feedback-card .fb-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.feedback-card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.feedback-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 8px;
  opacity: 0.9;
}

.feedback-card .fb-consequence {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-sm);
  margin: 12px 0 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* =============================================
   PHASE COMPLETE MODAL
   ============================================= */
.phase-complete {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.phase-complete-card {
  background: var(--color-gray-800);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 40px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  animation: completeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes completeIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.phase-complete-card .pc-icon {
  font-size: 4rem;
  margin-bottom: 12px;
}

.phase-complete-card h2 {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.phase-complete-card .pc-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
}

.phase-complete-card .pc-stars .star {
  font-size: 2.5rem;
  animation: starPop 0.4s ease backwards;
}

.phase-complete-card .pc-stars .star:nth-child(1) { animation-delay: 0.1s; }
.phase-complete-card .pc-stars .star:nth-child(2) { animation-delay: 0.3s; }
.phase-complete-card .pc-stars .star:nth-child(3) { animation-delay: 0.5s; }

@keyframes starPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.phase-complete-card .pc-stars .star.empty {
  filter: grayscale(1);
  opacity: 0.2;
}

.phase-complete-card .pc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.phase-complete-card .pc-stat {
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}

.phase-complete-card .pc-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

.phase-complete-card .pc-stat-label {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.phase-complete-card .pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.phase-complete-card .pc-xp {
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(255,111,0,0.2), rgba(255,111,0,0.1));
  border: 1px solid rgba(255,111,0,0.3);
  border-radius: 20px;
  color: var(--color-accent-light);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* =============================================
   SETTINGS SCREEN
   ============================================= */
.screen-settings {
  background: var(--color-gray-900);
  padding: 24px;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.settings-group {
  margin-bottom: 24px;
}

.settings-group h3 {
  font-size: 0.9rem;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.settings-row .setting-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Toggle Switch */
.toggle {
  width: 48px;
  height: 26px;
  background: var(--color-gray-600);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toggle.on {
  background: var(--color-accent);
}

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.toggle.on::after {
  left: 25px;
}

/* =============================================
   FREE MODE - Product Selection
   ============================================= */
.free-mode-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 16px;
  max-height: 200px;
  overflow-y: auto;
}

.free-mode-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.7rem;
}

.free-mode-product:hover {
  background: rgba(255,255,255,0.06);
}

.free-mode-product.selected {
  border-color: var(--color-accent);
  background: rgba(255,111,0,0.1);
}

.free-mode-product .fmp-icon {
  font-size: 1.5rem;
}

/* =============================================
   PROFESSOR PANEL
   ============================================= */
.screen-teacher {
  background: var(--color-gray-900);
  /* NOTE: do NOT set "display: flex" here. .screen already sets
     display:none by default and .screen.active sets display:flex when
     this screen should show. Forcing "display: flex" unconditionally on
     .screen-teacher overrode that (same CSS specificity, but this rule
     comes later in the file) - so the Professor panel stayed laid out
     and clickable (just invisible via opacity:0) UNDERNEATH every other
     screen at all times, once it had ever been rendered with content.
     Since it's the last screen in the HTML, it silently swallowed clicks
     meant for the phase-select cards and the in-game product tiles
     anywhere its (full-screen) box overlapped them - looking exactly
     like "I click and nothing happens". */
  flex-direction: column;
}

.teacher-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #1A237E, #283593);
  border-bottom: 2px solid var(--color-accent);
  flex-shrink: 0;
}

.teacher-header h2 {
  flex: 1;
  font-size: 1.1rem;
}

.teacher-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.teacher-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: 20px;
}

.teacher-section h3 {
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: var(--color-accent-light);
}

.teacher-section.full-width {
  grid-column: 1 / -1;
}

.teacher-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.teacher-stat-card {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}

.teacher-stat-card .tsc-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-accent-light);
}

.teacher-stat-card .tsc-label {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* =============================================
   PARTICLES
   ============================================= */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: particleFade 1s ease-out forwards;
}

@keyframes particleFade {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confettiFall 2s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.toast {
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  text-align: center;
}

.toast.success { background: #065F46; color: #D1FAE5; }
.toast.error { background: #7F1D1D; color: #FEE2E2; }
.toast.info { background: #1E3A5F; color: #DBEAFE; }

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

@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-10px); }
}

/* =============================================
   FORKLIFT ANIMATION
   ============================================= */
.forklift-anim {
  position: absolute;
  font-size: 2rem;
  z-index: 20;
  pointer-events: none;
  transition: all 1s ease-in-out;
}

.forklift-anim.moving {
  animation: forkliftDrive 2s ease-in-out;
}

@keyframes forkliftDrive {
  0% { transform: translateX(0) scaleX(1); }
  25% { transform: translateX(50px) scaleX(1); }
  50% { transform: translateX(50px) scaleX(-1); }
  75% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}

/* =============================================
   TRUCK ENTRY ANIMATION
   ============================================= */
.truck-anim {
  position: absolute;
  bottom: 20px;
  font-size: 2.5rem;
  z-index: 15;
  animation: truckEntry 3s ease-in-out;
}

@keyframes truckEntry {
  from { transform: translateX(-200px); }
  to { transform: translateX(0); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .order-panel {
    width: 260px;
  }
  
  .rack-slot {
    width: 70px;
    height: 70px;
  }
  
  .product-box .product-icon {
    font-size: 1.2rem;
  }
  
  .phases-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 16px;
  }
  
  .teacher-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 52px;
  }

  .menu-title {
    font-size: 1.8rem;
  }

  .menu-logo {
    font-size: 3rem;
  }

  .btn-primary {
    padding: 14px 36px;
    font-size: 1rem;
    min-width: 180px;
  }

  .game-hud {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .game-area {
    flex-direction: column;
  }

  .order-panel {
    width: 100%;
    height: 200px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
  }

  .order-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .order-list-item {
    flex-shrink: 0;
    min-width: 140px;
  }

  .rack-slot {
    width: 60px;
    height: 60px;
  }

  .product-box .product-icon {
    font-size: 1rem;
  }

  .product-box .product-name {
    font-size: 0.45rem;
  }

  .phases-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .phase-card {
    padding: 16px;
  }

  .hud-progress-bar {
    width: 60px;
  }

  .hud-phase-name {
    font-size: 0.75rem;
  }

  .teacher-body {
    padding: 12px;
    gap: 12px;
  }

  .phase-complete-card {
    padding: 24px;
  }

  .phase-complete-card .pc-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .rack-slot {
    width: 50px;
    height: 50px;
  }

  .product-box .product-icon {
    font-size: 0.85rem;
  }

  .feedback-card {
    padding: 20px;
  }

  .tutorial-card {
    padding: 20px;
  }

  .phase-complete-card {
    padding: 16px;
  }

  .phase-complete-card .pc-actions {
    flex-direction: column;
  }

  .warehouse-view {
    padding: 10px;
  }
}

/* =============================================
   PRINT (Teacher Reports)
   ============================================= */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .screen {
    position: static;
    display: block !important;
    opacity: 1 !important;
  }
  
  .btn, .game-hud {
    display: none !important;
  }
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.fade-in {
  animation: fadeIn 0.3s ease;
}

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

.slide-up {
  animation: slideUp 0.3s ease;
}

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

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

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

.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%,