/* ==========================================================================
   GENIUS DO HARDWARE (ARGB & BEEPS) — ESTILOS CYBERPUNK (v5.5)
   Simulador de Gabinete Aberto / Placa-Mãe ATX e Console Circular Tradicional
   PHM Tech & PHM Games · Prof. Paulo Henrique Maciel
   ========================================================================== */

:root {
  --genios-bg: #050811;
  --genios-surface: #0a1120;
  --genios-surface-soft: #131f37;
  --genios-line: rgba(255, 255, 255, 0.14);
  --genios-text: #f8fafc;
  --genios-text-muted: #94a3b8;

  /* Cores dos 4 Quadrantes ARGB */
  --led-green: #10b981;
  --led-green-glow: rgba(16, 185, 129, 0.9);
  --led-red: #ef4444;
  --led-red-glow: rgba(239, 68, 68, 0.9);
  --led-yellow: #f59e0b;
  --led-yellow-glow: rgba(245, 158, 11, 0.9);
  --led-blue: #3b82f6;
  --led-blue-glow: rgba(59, 130, 246, 0.9);
}

body.genios-app-body {
  background-color: var(--genios-bg);
  background-image: 
    radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.10) 0%, transparent 40%),
    linear-gradient(to bottom, #04060c, #090e1a);
  color: var(--genios-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ==========================================================================
   O DISCO GENIUS ARGB (TAMANHO AMPLIADO 520px)
   ========================================================================== */
.genius-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 2rem 0;
}

.genius-wheel-outer {
  width: 530px;
  height: 530px;
  max-width: min(530px, 92vw);
  max-height: min(530px, 92vw);
  border-radius: 50%;
  background: #090e1a;
  border: 12px solid #1e293b;
  box-shadow: 
    0 20px 55px rgba(0, 0, 0, 0.9),
    inset 0 0 30px rgba(0, 0, 0, 0.9);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  padding: 14px;
  box-sizing: border-box;
  margin: 0 auto;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema Gabinete Aberto / Placa-Mãe ATX */
.genius-wheel-outer.theme-pc {
  border-radius: 28px;
  border: 12px solid #1e293b;
  background: #040711;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.05) 0%, transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 20px 20px, 20px 20px;
  box-shadow: 
    0 25px 65px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(56, 189, 248, 0.15),
    inset 0 0 35px rgba(0, 0, 0, 0.95);
}

.genius-pad {
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
  outline: none;
  border: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.genius-pad:active,
.genius-pad.active-flash {
  filter: brightness(1.6) drop-shadow(0 0 30px currentColor);
  transform: scale(0.98);
}

.pad-label {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  pointer-events: none;
}

/* 🟢 Verde - Top Left (RAM) */
.pad-green {
  border-top-left-radius: 100%;
  background: radial-gradient(circle at 70% 70%, #064e3b, #059669);
  color: #10b981;
}
.genius-wheel-outer.theme-pc .pad-green {
  border-radius: 16px;
  background: #06111f;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
}
.pad-green.active-flash {
  background: radial-gradient(circle at 70% 70%, #10b981, #34d399) !important;
  box-shadow: 0 0 45px var(--led-green-glow), inset 0 0 25px #ffffff !important;
}

/* 🔴 Vermelho - Top Right (CPU) */
.pad-red {
  border-top-right-radius: 100%;
  background: radial-gradient(circle at 30% 70%, #7f1d1d, #dc2626);
  color: #ef4444;
}
.genius-wheel-outer.theme-pc .pad-red {
  border-radius: 16px;
  background: #06111f;
  border: 1.5px solid rgba(239, 68, 68, 0.4);
}
.pad-red.active-flash {
  background: radial-gradient(circle at 30% 70%, #ef4444, #f87171) !important;
  box-shadow: 0 0 45px var(--led-red-glow), inset 0 0 25px #ffffff !important;
}

/* 🟡 Amarelo - Bottom Left (BIOS) */
.pad-yellow {
  border-bottom-left-radius: 100%;
  background: radial-gradient(circle at 70% 30%, #78350f, #d97706);
  color: #f59e0b;
}
.genius-wheel-outer.theme-pc .pad-yellow {
  border-radius: 16px;
  background: #06111f;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
}
.pad-yellow.active-flash {
  background: radial-gradient(circle at 70% 30%, #f59e0b, #fde047) !important;
  box-shadow: 0 0 45px var(--led-yellow-glow), inset 0 0 25px #ffffff !important;
}

/* 🔵 Azul - Bottom Right (GPU) */
.pad-blue {
  border-bottom-right-radius: 100%;
  background: radial-gradient(circle at 30% 30%, #1e3a8a, #2563eb);
  color: #3b82f6;
}
.genius-wheel-outer.theme-pc .pad-blue {
  border-radius: 16px;
  background: #06111f;
  border: 1.5px solid rgba(59, 130, 246, 0.4);
}
.pad-blue.active-flash {
  background: radial-gradient(circle at 30% 30%, #3b82f6, #60a5fa) !important;
  box-shadow: 0 0 45px var(--led-blue-glow), inset 0 0 25px #ffffff !important;
}

/* Núcleo Central Decorativo (Emblema no Tradicional / Removido no PC Hardware) */
.wheel-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #1e293b, #070c17);
  border: 8px solid #0f172a;
  box-shadow: 
    0 0 35px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(56, 189, 248, 0.25),
    inset 0 0 20px rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

.genius-wheel-outer.theme-pc .wheel-center-hub {
  display: none !important;
}

.genius-central-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.genius-emblem-logo {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.85), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.genius-emblem-sub {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #facc15;
  text-transform: uppercase;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

/* Animações de Hardware */
.gpu-fan-spin {
  transform-origin: center;
}
.pad-blue.active-flash .gpu-fan-spin {
  animation: fanSpin 0.3s linear infinite;
}
@keyframes fanSpin {
  100% { transform: rotate(360deg); }
}

.hw-quadrant-svg {
  width: 96%;
  height: 96%;
  display: block;
}