@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  --gold: #ffc83d;
  --gold2: #ff9f1c;
  --ink: #10233b;
  --omni: #3b82f6;
  --omni2: #1d4ed8;
  --good: #22c55e;
  --warn: #f5a623;
  --bad: #ef4444;
  --slate: #121e2f;
  --border: #1f324b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  height: 100%;
  background: #050a12;
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PHONE FRAME */
#phone {
  position: relative;
  width: min(440px, 100vw);
  height: min(920px, 100dvh);
  background: #080f18;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75);
  border: 4px solid #1c2a3f;
  border-radius: 40px;
}

@media (max-width: 460px) {
  #phone {
    width: 100vw;
    height: 100dvh;
    border: none;
    border-radius: 0;
  }
}

/* CONTROLS */
#ctrls {
  position: absolute;
  top: 92px; /* Deslocado abaixo do HUD flutuante */
  right: 12px;
  z-index: 50;
  display: flex;
  gap: 8px;
}

.cbtn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(13, 22, 37, 0.7);
  color: #cfe0f3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: transform 0.1s, background 0.2s;
}

.cbtn:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.2);
}

/* ================= NEW HUD SIMPLIFIED (LIKE IMAGE) ================= */
#hud-simple {
  position: absolute;
  top: 24px;
  left: 10px;
  right: 10px;
  z-index: 30;
  padding: 0;
  background: none;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  pointer-events: none;
}

.hud-box {
  flex: 1;
  background: var(--slate);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.3);
  min-width: 0;
  pointer-events: auto;
}

.hud-box-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.hud-box-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hud-value {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hud-cash-box .hud-value {
  color: #4ade80; /* Dinheiro verde */
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.2);
}

.hud-label {
  font-size: 8px;
  font-weight: 700;
  color: #728aa8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* Nível com barra de progresso interna */
#hud-level-box {
  flex: 1.1;
  padding: 6px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#hud-level-box .hud-value {
  font-size: 13px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.5px;
}

.hud-progress-container {
  width: 100%;
  height: 6px;
  background: #080d14;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid #1b2636;
}

.hud-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* SCENE & DEPTH OF FIELD EFFECT */
#scene {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #05090f;
}

/* Fundo Borrado (DoF) */
#scene-bg {
  position: absolute;
  inset: 0;
  background-image: url('images/stage_bg1.png');
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.5);
  transform: scale(1.1); /* Evita bordas brancas com o blur */
  transition: background-image 0.8s ease, filter 0.8s;
  z-index: 1;
}

/* PRÉDIO DO MERCADO - NITIDO E EM DESTAQUE */
#store {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  width: 86%;
  max-width: 370px;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.1s;
  filter: drop-shadow(0 15px 22px rgba(0,0,0,0.6));
}

#store img {
  width: 100%;
  display: block;
  pointer-events: none;
  /* Sprites novos já têm fundo transparente (alpha real),
     então renderizam com cores reais — sem blend "screen" que lavava a imagem. */
}

#store.tap {
  transform: translateX(-50%) scale(0.92);
}

#store.danger {
  animation: shakeStore 0.2s infinite;
}

#store.danger img {
  filter: saturate(1.4) hue-rotate(-12deg) brightness(0.85);
}

@keyframes shakeStore {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translateX(-52%) translateY(-1px); }
  75% { transform: translateX(-48%) translateY(1px); }
}

/* OBJETIVO ATUAL (sempre visível abaixo do HUD) */
.objective-chip {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 90%;
  background: linear-gradient(180deg, rgba(13, 27, 48, 0.92), rgba(8, 16, 30, 0.92));
  border: 2px solid rgba(255, 211, 77, 0.55);
  border-radius: 14px;
  padding: 7px 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  animation: objPulse 2.4s ease-in-out infinite;
}

@keyframes objPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 0 rgba(255,211,77,0); }
  50% { box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 14px rgba(255,211,77,0.45); }
}

.objective-chip .obj-icon {
  font-size: 22px;
  line-height: 1;
}

.objective-chip .obj-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.objective-chip .obj-label {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  color: #7e93ad;
  text-transform: uppercase;
}

.objective-chip .obj-text {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
}

.objective-chip .obj-cost {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #ffd34d;
  background: rgba(255, 211, 77, 0.12);
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* TAP HINT */
.taphint {
  position: absolute;
  left: 50%;
  bottom: 54%;
  transform: translateX(-50%);
  z-index: 11;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  animation: bobHint 1.2s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes bobHint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* INCIDENTS */
#incident {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%) scale(0);
  z-index: 25;
  background: linear-gradient(180deg, #ff5757, #cc1f1f);
  color: #fff;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 2px solid #fff;
  text-align: center;
  box-shadow: 0 0 20px rgba(255, 50, 50, 0.8);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 1.2;
}

#incident.show {
  transform: translateX(-50%) scale(1);
  animation: flashAlert 0.6s infinite;
}

#incident small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 1px;
}

@keyframes flashAlert {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}

/* TOASTS */
#toast {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -20px);
  z-index: 45;
  opacity: 0;
  background: linear-gradient(180deg, #fff, #ffeebf);
  color: #6e4300;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 12px 20px;
  border-radius: 15px;
  border: 2px solid var(--gold);
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: transform 0.3s, opacity 0.3s;
  max-width: 85%;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#toast small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8c5d14;
  margin-top: 2px;
}

/* FX */
#fx {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.coinfx {
  position: absolute;
  width: 26px;
  height: 26px;
  will-change: transform, opacity;
}

.float {
  position: absolute;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 0 #b38015, 0 2px 5px rgba(0,0,0,0.6);
  will-change: transform, opacity;
  white-space: nowrap;
}

.combo {
  color: var(--gold);
  font-size: 24px;
}

.flash-error {
  position: absolute;
  inset: 0;
  background: rgba(239, 68, 68, 0.2);
  z-index: 24;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.flash-error.active {
  opacity: 1;
  animation: flashRed 0.4s infinite;
}

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

/* TRAFFIC FOREGROUND (SHARP) */
#lane-traffic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

/* Carros Nítidos */
.car {
  position: absolute;
  font-size: 26px;
  width: 36px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}

/* Pedestres Nítidos */
.walker {
  position: absolute;
  font-size: 18px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* Animações CSS para o tráfego */
@keyframes driveDiagonalLeftDown {
  0% { transform: translate(-50px, -50px) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(450px, 350px) scale(1.1); opacity: 0; }
}

@keyframes driveDiagonalRightDown {
  0% { transform: translate(480px, -30px) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(-80px, 320px) scale(1.1); opacity: 0; }
}

@keyframes driveHoriz {
  0% { transform: translateX(-50px); }
  100% { transform: translateX(450px); }
}

@keyframes walkCycle {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px) rotate(2deg); }
  100% { transform: translateY(0); }
}

/* BOTTOM BAR */
#bottom-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  background: linear-gradient(180deg, #0c1726, #070f1a);
  border-top: 2px solid #1c2a3f;
}

.info-bar {
  font-family: 'Baloo 2', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #ffd34d;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ================= OVERLAYS ================= */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.75);
  backdrop-filter: blur(5px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease forwards;
  touch-action: none;
}

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

/* DIALOG SYSTEM & BRAINROT SCREEN OVERLAY */
.brainrot-dialog-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 101;
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

@keyframes popScale {
  from { transform: scale(0.85); }
  to { transform: scale(1); }
}

.omnibot-container {
  width: 130px;
  height: 130px;
  margin-bottom: 4px;
}

.omnibot {
  width: 100%;
  height: 100%;
}

.thruster-fire {
  animation: pulseFire 0.15s infinite alternate;
  transform-origin: 100px 130px;
}

@keyframes pulseFire {
  0% { transform: scaleY(0.8) scaleX(0.9); opacity: 0.8; }
  100% { transform: scaleY(1.2) scaleX(1.1); opacity: 1; }
}

.omnibot-container svg {
  animation: floatBot 3s ease-in-out infinite;
}

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

/* Letras bem chamativas, estilo brainrot, texto branco, borda preta */
.brainrot-text-bubble {
  font-family: 'Fredoka', 'Baloo 2', Impact, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  width: 100%;
}

.brainrot-text-bubble h2 {
  font-size: 38px;
  color: #ff3a3a;
  margin-bottom: 12px;
  line-height: 1.1;
  text-shadow: 
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, 0px 3px 0 #000,
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    4px 4px 10px rgba(0,0,0,0.9);
}

.brainrot-text-bubble p {
  font-size: 26px;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 14px;
  text-shadow: 
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, 0px 3px 0 #000,
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    4px 4px 10px rgba(0,0,0,0.9);
}

/* Descrição do problema em caixa baixa e um pouco menor = muito mais fácil de ler para leigos */
.brainrot-text-bubble #omnibot-text {
  text-transform: none;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
}

.brainrot-text-bubble #omnibot-question {
  color: #ffd34d;
  font-size: 28px;
  margin-bottom: 0;
  text-shadow: 
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, 0px 3px 0 #000,
    -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
    4px 4px 10px rgba(0,0,0,0.9);
}

.brainrot-buttons-row {
  display: flex;
  gap: 16px;
  width: 90%;
  justify-content: center;
}

button:focus, button:active, .choice-btn-brainrot:focus, .choice-btn-brainrot:active {
  outline: none !important;
}

.choice-btn-brainrot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 20px;
  font-family: 'Fredoka', 'Baloo 2', Impact, sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 5.5vw, 24px);
  line-height: 1.15;
  border: 4px solid #000 !important;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.choice-btn-brainrot:active:not(:disabled) {
  transform: translateY(4px);
}

.choice-btn-brainrot:disabled {
  opacity: 0.55;
  filter: grayscale(0.7);
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Botões SIM / NÃO */
.choice-btn-brainrot.btn-green {
  background: #22c55e !important;
  box-shadow: 0 8px 0 #000, 0 8px 20px rgba(34, 197, 94, 0.5);
}

.choice-btn-brainrot.btn-green:active:not(:disabled) {
  box-shadow: 0 4px 0 #000;
}

.choice-btn-brainrot.btn-red {
  background: #ef4444 !important;
  box-shadow: 0 8px 0 #000, 0 8px 20px rgba(239, 68, 68, 0.5);
}

.choice-btn-brainrot.btn-red:active:not(:disabled) {
  box-shadow: 0 4px 0 #000;
}

/* ================= BONEQUINHOS (CLIENTES EM FOCO) ================= */
#lane {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 110px;
  z-index: 15;
  pointer-events: none;
  background: rgba(13, 27, 48, 0.4);
  border-top: 3px solid #1c2b42;
  border-bottom: 3px solid #1c2b42;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

.cust {
  position: absolute;
  bottom: 0;
  height: 96px;
  will-change: left;
  pointer-events: auto;
  cursor: pointer;
}

.cust img {
  height: 96px;
  display: block;
  filter: drop-shadow(0 6px 5px rgba(0,0,0,0.35));
}

.cust img.walk {
  animation: bobCustomer 0.42s ease-in-out infinite;
}

@keyframes bobCustomer {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

.anger {
  position: absolute;
  top: -6px;
  right: 6px;
  font-size: 22px;
  animation: angerThrob 0.4s infinite;
}

@keyframes angerThrob {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* ================= CÂMERA LENTA (SLOW MOTION EFFECT) ================= */
.slow-mo .car {
  animation-duration: 25s !important;
}

.slow-mo .walker {
  animation-duration: 5s !important;
  transition-duration: 25s !important;
}

.slow-mo .cloud {
  animation-duration: 180s !important;
}

.slow-mo .cust {
  transition-duration: 25s !important;
}

.slow-mo .cust img.walk {
  animation-duration: 3s !important;
}

/* Danger Alert Badge & Vignette Border */
.danger-badge {
  background: #ef4444;
  color: #fff;
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  display: inline-block;
  border: 3px solid #000;
  box-shadow: 0 4px 0 #000;
  animation: pulseDangerBadge 0.6s infinite alternate;
  text-shadow: none !important;
}

@keyframes pulseDangerBadge {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.overlay-danger-border {
  box-shadow: inset 0 0 80px rgba(239, 68, 68, 0.7);
  animation: pulseDangerBorder 1s infinite alternate;
}

@keyframes pulseDangerBorder {
  from { box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.55); }
  to { box-shadow: inset 0 0 110px rgba(239, 68, 68, 0.9); }
}

/* ================= MINI-TASKS ================= */
.minitask-box {
  width: 100%;
  max-width: 360px;
  background: rgba(13, 27, 48, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popScale 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.minitask-header {
  background: rgba(18, 26, 40, 0.85);
  padding: 12px;
  border-bottom: 2px solid #1b263a;
  text-align: center;
}

.minitask-title-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #8fa6c4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.minitask-instruction {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  color: #fff;
  margin-top: 4px;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

#minitask-container {
  padding: 20px;
  min-height: 240px;
  background: rgba(10, 20, 38, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ============ TELA DE TUTORIAL "ZOOM" DOS MINIGAMES ============ */
.task-tutorial-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  animation: tutorialZoomIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.tutorial-focus-zoom {
  background: rgba(0, 0, 0, 0.95) !important;
  z-index: 9999;
}

.tutorial-focus-zoom h3 {
  animation: pulseHint 0.5s infinite alternate !important;
  color: #facc15;
  font-size: 32px !important;
}

@keyframes tutorialZoomIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ============ PALCO DA DEMONSTRAÇÃO PRÁTICA ============ */
.tutorial-demo-stage {
  width: 100%;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 6px;
}

.ghost-hand {
  position: absolute;
  font-size: 28px;
  z-index: 30;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
  transform: translate(-50%, -50%);
}

/* Demo: FIOS */
.demo-wires-row {
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin: 10px auto;
}

/* Demo: SLIDER */
.demo-slider-track {
  position: relative;
  width: 220px;
  height: 10px;
  background: #1e293b;
  border-radius: 6px;
  margin: 36px auto 14px;
  border: 1px solid #334155;
}
.demo-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 6px;
}
.demo-slider-target {
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 8%;
  left: 60%;
  background: rgba(34, 197, 94, 0.3);
  border-left: 2px dashed #22c55e;
  border-right: 2px dashed #22c55e;
  border-radius: 4px;
}
.demo-slider-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 3px solid #1d4ed8;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Demo: RESFRIAMENTO */
.demo-cool-btn {
  padding: 12px 22px;
  border-radius: 12px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border: none;
  box-shadow: 0 4px 0 #153aa1;
}
.demo-cool-btn.pressed {
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 2px 0 #153aa1;
}

/* Demo: SEQUÊNCIA DE FILIAIS */
.demo-nodes-row {
  display: flex;
  gap: 22px;
  margin: 18px auto;
}
.demo-node-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f2937;
  border: 2px solid #374151;
  color: #9ca3af;
  font-family: monospace;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.demo-node-circle.tapped {
  background: var(--good);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  transform: scale(1.12);
}

/* Demo: SCRATCH (revelar dashboard) */
.demo-scratch-panel {
  width: 220px;
  height: 90px;
  border-radius: 12px;
  border: 2px solid #374151;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #052e16, #022012);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #4ade80;
  font-family: 'Baloo 2', sans-serif;
}
.demo-scratch-cover {
  position: absolute;
  inset: 0;
  background: #334155;
  border-radius: 12px;
}

/* Demo: FIREWALL DO HACKER */
.demo-firewall-gauge {
  width: 220px;
  height: 28px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  margin: 14px auto;
}
.demo-firewall-zone {
  position: absolute;
  top: 0; bottom: 0;
  left: 45%;
  width: 10%;
  background: rgba(34, 197, 94, 0.35);
  border-left: 2px dashed #22c55e;
  border-right: 2px dashed #22c55e;
}
.demo-firewall-indicator {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 5px;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}
.demo-firewall-zone.flash {
  background: rgba(255, 211, 77, 0.6);
  border-color: #ffd34d;
}

.tutorial-headline {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: #ffd34d;
  margin: 0 0 4px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.tutorial-detail-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: #c5d7ed;
  line-height: 1.45;
  max-width: 280px;
  margin-bottom: 14px;
}

.task-tutorial-confirm-btn {
  width: 100%;
  max-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: #07210f;
  background: #ffd34d;
  border: 3px solid #000;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 #000, 0 6px 18px rgba(255, 211, 77, 0.5);
  text-transform: uppercase;
}

.task-tutorial-confirm-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #000;
}

.task-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* TASK 1: WIRES */
#task-wires {
  position: relative;
  width: 100%;
  height: 200px;
}

.wire-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.wires-columns {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 12;
}

.wire-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.wire-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1e293b;
  border: 3px solid #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: none;
}

.wire-node::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.color-red { border-color: #ef4444 !important; }
.color-red::after { background-color: #ef4444; }

.color-blue { border-color: #3b82f6 !important; }
.color-blue::after { background-color: #3b82f6; }

.color-yellow { border-color: #eab308 !important; }
.color-yellow::after { background-color: #eab308; }

.wire-node.connected {
  cursor: default;
  box-shadow: 0 0 8px currentColor;
}

/* TASK 2: CARD SWIPE */
.swipe-machine {
  width: 280px;
  height: 140px;
  background: #1e293b;
  border: 3px solid #334155;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.swipe-sensor-light {
  position: absolute;
  top: 12px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #94a3b8;
  border: 1px solid #1e293b;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.swipe-reader-groove {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  height: 50px;
  background: #0f172a;
  border-top: 2px solid #334155;
  border-bottom: 2px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-swipe {
  color: #334155;
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: 700;
  animation: pulseArrows 1s infinite;
}

.swipe-card-drag {
  position: absolute;
  top: 48px;
  left: 10px;
  width: 76px;
  height: 44px;
  background: linear-gradient(135deg, #a855f7, #6b21a8);
  border: 1px solid #f3e8ff;
  border-radius: 6px;
  cursor: grab;
  z-index: 15;
  padding: 4px 6px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  touch-action: none;
}

.swipe-card-drag:active {
  cursor: grabbing;
}

.swipe-card-drag .chip {
  width: 12px;
  height: 9px;
  background: #fbbf24;
  border-radius: 2px;
}

.swipe-card-drag .card-logo {
  font-size: 8px;
  font-weight: 700;
  text-align: right;
}

.swipe-status-screen {
  margin-top: 14px;
  width: 280px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.5px;
  font-family: monospace;
}

/* TASK 3: SIGNAL TUNING */
.scope-screen {
  width: 280px;
  height: 130px;
  background: #090d16;
  border: 2px solid #1e293b;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.scope-grid {
  position: absolute;
  inset: 0;
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.scope-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.control-area {
  width: 280px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.freq-lbl {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

#signal-pct {
  color: #22c55e;
}

.slider-control {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #1e293b;
  outline: none;
}

.slider-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--omni);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* TASK 4: COOLING */
.cooling-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 16px;
  padding: 16px;
  gap: 16px;
}

.gauge-container {
  flex: 1;
  background: #030712;
  height: 110px;
  border-radius: 10px;
  border: 1px solid #374151;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  text-align: center;
}

.gauge-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, #ef4444, #f87171);
  height: 85%;
  z-index: 1;
  transition: height 0.15s ease;
}

.gauge-value {
  position: relative;
  z-index: 2;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.gauge-lbl {
  position: relative;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  color: #9ca3af;
  margin-top: 2px;
}

.fan-container {
  width: 90px;
  height: 90px;
  background: #1f2937;
  border: 2px dashed #4b5563;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fan-blade {
  font-size: 42px;
  animation: spinFan 2s linear infinite;
  animation-play-state: paused;
}

@keyframes spinFan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cool-btn {
  margin-top: 14px;
  width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  border: none;
  box-shadow: 0 4px 0 #153aa1;
  cursor: pointer;
}

.cool-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #153aa1;
}

/* TASK 5: ROUTING MAP */
.map-grid {
  width: 280px;
  height: 150px;
  background: radial-gradient(circle, #152033 0%, #0a0f18 100%);
  border: 1px solid #1f2937;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.nodes-svg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.node-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1f2937;
  border: 2px solid #374151;
  color: #9ca3af;
  font-family: monospace;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transform: translate(-50%, -50%);
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}


.node-btn.next-target {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 200, 61, 0.8);
  transform: translate(-50%, -50%) scale(1.18);
  background: #273549;
  animation: nodeNextPulse 0.9s ease-in-out infinite;
}

@keyframes nodeNextPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 200, 61, 0.6); }
  50% { box-shadow: 0 0 22px rgba(255, 200, 61, 1); }
}

.node-btn.clicked {
  background: var(--good);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* TASK 6: SCRATCH CANVAS */
.scratch-canvas-container {
  width: 280px;
  height: 200px;
  border: 2px solid #374151;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: #05080e;
}

.scratch-underlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#scratch-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: crosshair;
  touch-action: none;
}

.dash-preview-mock {
  width: 240px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
}

.mock-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--omni);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
}

.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mock-card {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
}

.mock-card div {
  font-size: 7.5px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.mock-card strong {
  font-size: 14px;
  color: var(--good);
  font-weight: 800;
}

.scratch-help-txt {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  margin-top: 10px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ================= EXPLANATION CARD ================= */
.explanation-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(135deg, #0f1a2b 0%, #060a12 100%);
  border: 2px solid #22c55e;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(34, 197, 94, 0.2);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.exp-icon {
  font-size: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.explanation-card h2 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.exp-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.exp-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 10px 12px;
}

.section-hdr {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.hdr-bad { color: #f87171; }
.hdr-omni { color: #60a5fa; }
.hdr-good { color: #4ade80; }

.exp-section p {
  font-size: 12.5px;
  color: #a3b8cc;
  line-height: 1.35;
  font-weight: 500;
}

.exp-btn-continue {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #fff;
  box-shadow: 0 4px 0 #166534, 0 4px 12px rgba(34, 197, 94, 0.3);
  transition: transform 0.1s;
}

.exp-btn-continue:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #166534;
}

/* ================= FAIL SCREEN ================= */
.fail-box {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #1f1212, #0c0606);
  border: 2px solid #ef4444;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.4);
  padding: 28px 20px;
  text-align: center;
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.fail-icon {
  font-size: 48px;
  animation: throbSkull 0.6s infinite alternate;
}

@keyframes throbSkull {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

.fail-box h1 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #ef4444;
  margin: 6px 0 10px;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.fail-box p {
  font-size: 13.5px;
  color: #e5b3b3;
  line-height: 1.4;
  margin-bottom: 18px;
}

.fail-tip {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  padding: 12px;
  font-size: 11.5px;
  color: #f7a0a0;
  line-height: 1.35;
  text-align: left;
  margin-bottom: 22px;
}

.fail-btn-retry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #f87171, #ef4444);
  color: #fff;
  box-shadow: 0 4px 0 #991b1b, 0 4px 15px rgba(239, 68, 68, 0.45);
  transition: transform 0.1s;
}

.fail-btn-retry:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #991b1b;
}

/* ================= NEW: RECOVERY MISSION INTERFACE ================= */
.recovery-box {
  width: 100%;
  max-width: 370px;
  background: linear-gradient(135deg, #0d1624 0%, #05080e 100%);
  border: 3px solid var(--gold2);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 159, 28, 0.3);
  padding: 24px 20px;
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25) forwards;
}

.recovery-hdr {
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #1c2b42;
  padding-bottom: 10px;
}

.recovery-hdr h2 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--gold);
}

.recovery-hdr p {
  font-size: 11.5px;
  color: #7d96b5;
  margin-top: 3px;
}

.recovery-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rec-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #19273c;
  border-radius: 16px;
  padding: 12px;
  transition: background 0.3s, border-color 0.3s;
}

.rec-step.active {
  background: rgba(255, 159, 28, 0.04);
  border-color: var(--gold2);
}

.rec-step.done {
  background: rgba(34, 197, 94, 0.05);
  border-color: var(--good);
}

.rec-step-status {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f1826;
  border: 2px solid #23354f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #536c8c;
}

.rec-step.active .rec-step-status {
  border-color: var(--gold2);
  color: var(--gold2);
  animation: pulseGoldBorder 1s infinite alternate;
}

@keyframes pulseGoldBorder {
  from { box-shadow: 0 0 4px rgba(255,159,28,0.2); }
  to { box-shadow: 0 0 10px rgba(255,159,28,0.6); }
}

.rec-step.done .rec-step-status {
  border-color: var(--good);
  color: var(--good);
  background: rgba(34, 197, 94, 0.1);
}

.rec-step-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rec-step-detail h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #9ab4d6;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.rec-step.active h4 {
  color: #fff;
}

/* Energia Switch */
.power-switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.switch-lbl {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  color: #536c8c;
}

.rec-step.active .switch-lbl {
  color: #9ab4d6;
}

.power-switch-groove {
  width: 80px;
  height: 28px;
  background: #080d15;
  border: 2px solid #1f2f45;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.rec-step.active .power-switch-groove {
  border-color: #3b506c;
}

.power-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #475569;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  touch-action: none;
}

.rec-step.active .power-switch-knob {
  background: var(--gold2);
  box-shadow: 0 0 8px rgba(255,159,28,0.6);
}

.rec-step.done .power-switch-knob {
  left: 54px !important;
  background: var(--good);
}

/* Frequência Calibrar */
.freq-calib-container {
  width: 100%;
  margin-top: 4px;
}

.freq-target-zone {
  width: 100%;
  background: #080d15;
  border: 1px solid #1f2f45;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #536c8c;
  margin-top: 8px;
  font-family: monospace;
}

.rec-step.active .freq-target-zone {
  color: var(--warn);
  border-color: rgba(255,159,28,0.2);
}

.rec-step.done .freq-target-zone {
  color: var(--good);
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.05);
}

/* Reboot Hold */
.reboot-hold-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.reboot-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 12px;
  border: none;
  background: #1e293b;
  color: #475569;
  cursor: pointer;
}

.rec-step.active .reboot-btn {
  background: linear-gradient(180deg, var(--omni), var(--omni2));
  color: #fff;
  box-shadow: 0 3px 0 #153aa1;
}

.reboot-progress {
  width: 100%;
  height: 6px;
  background: #080d15;
  border-radius: 3px;
  overflow: hidden;
}

.reboot-progress-fill {
  height: 100%;
  background: var(--good);
  width: 0%;
  transition: width 0.1s linear;
}

/* ================= VICTORY SCREEN ================= */
#victory {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, #17325c, #070d18 75%);
  overflow: hidden;
}

#victory.show {
  display: flex;
}

#victory .trophy {
  font-size: 76px;
  animation: victoryPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.3) forwards;
}

@keyframes victoryPop {
  0% { transform: scale(0) rotate(-45deg); }
  100% { transform: scale(1) rotate(0); }
}

#victory h1 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--gold);
  margin: 6px 0 2px;
  text-shadow: 0 3px 0 #8c5d0e, 0 0 20px rgba(255, 200, 61, 0.5);
  line-height: 1.05;
  text-transform: uppercase;
}

#victory h2 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #a3c2ec;
  margin-bottom: 14px;
}

.vcard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 16px 18px;
  max-width: 350px;
  width: 100%;
}

.vcard .line {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12.5px;
  color: #dbe9fb;
  font-weight: 600;
  margin: 6px 0;
  text-align: left;
}

.vmsg {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  margin: 16px 0 4px;
  line-height: 1.3;
  max-width: 320px;
}

.vsub {
  font-size: 13px;
  color: #8fa6c2;
  margin-bottom: 22px;
  max-width: 320px;
  line-height: 1.4;
}

#cta {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 15px !important;
  color: #fff;
  text-transform: uppercase;
  padding: 14px 18px !important;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--omni), var(--omni2));
  box-shadow: 0 5px 0 #153aa1, 0 0 25px rgba(59, 130, 246, 0.6);
  animation: ctaPulse 1.2s ease-in-out infinite;
  max-width: 92% !important;
  line-height: 1.3 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

#cta:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #153aa1;
}

@keyframes ctaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.vreplay {
  margin-top: 16px;
  background: none;
  border: none;
  color: #798da3;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.confetti {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 1;
  animation: fallConfetti linear forwards;
}

@keyframes fallConfetti {
  to {
    transform: translateY(920px) rotate(540deg);
    opacity: 0.3;
  }
}

/* ================= EXPLANATION GREEN BRAINROT OVERLAY ================= */
.overlay-success-border {
  animation: pulseSuccessBorder 1.5s infinite alternate;
}

@keyframes pulseSuccessBorder {
  from { box-shadow: inset 0 0 60px rgba(34, 197, 94, 0.55); }
  to { box-shadow: inset 0 0 110px rgba(34, 197, 94, 0.9); }
}

.brainrot-dialog-container.explanation-theme {
  border: none !important;
  box-shadow: none !important;
}

.explanation-bubble {
  text-align: center;
}

.victory-badge {
  font-family: 'Fredoka', 'Baloo 2', Impact, sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #22c55e;
  text-shadow: 
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0px 0px 8px rgba(34, 197, 94, 0.6);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.explanation-bubble h2 {
  font-size: 32px !important;
  color: #4ade80 !important;
  margin-bottom: 16px;
  text-shadow: 
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    -3px 0px 0 #000, 3px 0px 0 #000, 0px -3px 0 #000, 0px 3px 0 #000,
    4px 4px 10px rgba(0,0,0,0.9) !important;
}

.explanation-bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 10px;
}

/* Blocos didáticos: DESAFIO (vermelho) -> seta -> BENEFÍCIO (verde) */
.exp-block {
  border-radius: 16px;
  padding: 12px 16px;
  border: 3px solid #000;
}

.exp-block.problem {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.6), rgba(60, 12, 12, 0.6));
  border-color: #ef4444;
}

.exp-block.benefit {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.65), rgba(8, 50, 30, 0.65));
  border-color: #22c55e;
}

.exp-block-label {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 5px;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.exp-block.problem .exp-block-label { color: #fca5a5; }
.exp-block.benefit .exp-block-label { color: #86efac; }

.exp-block-text {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #ffffff;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}

.exp-arrow {
  text-align: center;
  font-size: 22px;
  line-height: 1;
  margin: -2px 0;
}

.bullet-item {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  line-height: 1.35;
  text-shadow: 
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0px 0 #000, 2px 0px 0 #000, 0px -2px 0 #000, 0px 2px 0 #000,
    2px 2px 6px rgba(0,0,0,0.9);
}

.bullet-item b {
  font-weight: 900;
}

/* ================= DRAMATIC CRISIS BANNER ================= */
.crisis-banner {
  position: absolute;
  top: 140px;
  left: 10px;
  right: 10px;
  z-index: 35;
  background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
  border: 3px solid #f87171;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  animation: bannerPulse 1.2s infinite ease-in-out;
  touch-action: none;
}

.crisis-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}

.crisis-banner-text strong {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  letter-spacing: 0.5px;
}

.crisis-banner-text small {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #fca5a5;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  margin-top: 2px;
}

.danger-flash-emoji {
  font-size: 26px;
  animation: emojiWiggle 0.6s infinite alternate;
}

@keyframes bannerPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.2); }
}

@keyframes emojiWiggle {
  0% { transform: rotate(-12deg); }
  100% { transform: rotate(12deg); }
}

/* INACTIVITY WARNING */
.inactivity-warning {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 12px 20px;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  z-index: 80;
  display: none;
  pointer-events: none;
  animation: warningPulse 0.8s infinite alternate;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 15px rgba(255, 200, 61, 0.4);
}

@keyframes warningPulse {
  from { transform: translate(-50%, -50%) scale(1); border-color: var(--gold); }
  to { transform: translate(-50%, -50%) scale(1.05); border-color: var(--bad); }
}

/* HACKER CUSTOMER SPRITE */
.cust.hacker img {
  filter: brightness(0.2) contrast(1.5) drop-shadow(0 0 8px #ef4444) !important;
}

/* Hacker pulsa para chamar a atenção do jogador (precisa ser clicado) */
.cust.hacker {
  animation: hackerNag 0.5s infinite alternate;
}

@keyframes hackerNag {
  from { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.5)); }
  to { filter: drop-shadow(0 0 16px rgba(239, 68, 68, 1)); }
}

.hacker-alert-badge {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  border: 2px solid #000;
  white-space: nowrap;
  animation: bounce 0.4s infinite alternate;
}

/* Hacker Jail / Prison UI Box */
#hacker-prison {
  position: absolute;
  top: 138px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid #64748b;
  border-radius: 12px;
  padding: 6px 10px;
  display: none;
  align-items: center;
  gap: 6px;
  z-index: 40;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}

#hacker-prison.jailed {
  display: flex;
  border-color: #ef4444;
  animation: jailPulse 2s infinite ease-in-out;
}

@keyframes jailPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.8); }
}

.prison-text {
  font-size: 9px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.prison-text strong {
  color: #ef4444;
  display: block;
  font-size: 10px;
}

/* Hacker special mission zoom overlay focus */
.hacker-zoom-focus {
  animation: pulseZoomFocus 0.6s infinite alternate !important;
  z-index: 150 !important;
  outline: 4px solid #ef4444;
  outline-offset: 4px;
  border-radius: 10px;
}

@keyframes pulseZoomFocus {
  from { transform: scale(1.0); }
  to { transform: scale(1.15); }
}

/* Hacker Minigame firewall dashboard styles */
.firewall-gauge {
  width: 100%;
  height: 36px;
  background: #0f172a;
  border: 2px solid #334155;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  margin: 16px 0;
}

.firewall-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  width: 16%;
  background: rgba(34, 197, 94, 0.35);
  border-left: 2px dashed #22c55e;
  border-right: 2px dashed #22c55e;
  z-index: 1;
}

.firewall-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  width: 6px;
  background: #ef4444;
  z-index: 2;
  box-shadow: 0 0 8px #ef4444;
}

.firewall-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
}

.firewall-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #1e293b;
}

.firewall-dot.hit {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

/* ================= NOVO ESTILO NEURO-OTIMIZADO CORZ ================= */
.welcome-institutional-text {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500;
  font-size: 14.5px !important;
  color: #c5d7ed !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.welcome-consent-label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500;
  font-size: 13.5px !important;
  color: #a3b8cc !important;
  transition: color 0.2s;
}

/* Indicador de progresso do onboarding (passo 1/2/3) */
.welcome-progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.welcome-progress-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3d5c;
  transition: background 0.2s, transform 0.2s;
}

.welcome-progress-dots .dot.active {
  background: #ffd34d;
  transform: scale(1.25);
}

.welcome-progress-dots .dot.done {
  background: #22c55e;
}

/* Botão "voltar" entre passos do onboarding */
.welcome-back-btn {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: none;
  color: #6b829e;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
}

.welcome-step-headline {
  font-family: 'Fredoka', sans-serif;
  font-weight: 900;
  font-size: 23px;
  color: #ffd34d;
  margin: 4px 0 6px;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.welcome-consent-label:hover {
  color: #ffffff !important;
}

.welcome-consent-label input[type="checkbox"] {
  accent-color: #22c55e;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Tutorial Footer style for Minigames */
.minitask-tutorial-footer {
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
  animation: footerSlideUp 0.3s ease-out;
}

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

.minitask-tutorial-footer .tutorial-text {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500;
  font-size: 13.5px !important;
}

/* Pulsing Notification Badge on Victory CTA */
@keyframes ctaBadgePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Victory Contact Form Premium Overlay */
.victory-contact-box {
  border-color: #3b82f6 !important;
  box-shadow: 0 25px 60px rgba(59, 130, 246, 0.25) !important;
  font-family: 'Outfit', sans-serif !important;
}

.victory-contact-box .welcome-input {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500;
  text-align: left !important;
  background: #060b13 !important;
  border: 2px solid #233550 !important;
  border-radius: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.victory-contact-box .welcome-input:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4) !important;
}

.victory-contact-box .welcome-btn {
  background: #3b82f6 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 6px 0 #11349a, 0 6px 15px rgba(59, 130, 246, 0.3) !important;
  color: #fff !important;
}

.victory-contact-box .welcome-btn:active {
  box-shadow: 0 2px 0 #11349a !important;
}

/* Green WhatsApp Button Released after submit */
.victory-contact-box .whatsapp-btn {
  background: #22c55e !important;
  border-color: #15803d !important;
  box-shadow: 0 6px 0 #0f5127, 0 6px 20px rgba(34, 197, 94, 0.4) !important;
  color: #06230f !important;
  animation: ctaPulse 1.2s ease-in-out infinite;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.victory-contact-box .whatsapp-btn:active {
  box-shadow: 0 2px 0 #0f5127 !important;
  transform: translateY(4px);
}

/* ================= BOAS-VINDAS / CAPTURA DE NOME ================= */
.welcome-box {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #122036, #0a1322);
  border: 3px solid #2a3d5c;
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.welcome-emoji { font-size: 52px; line-height: 1; }

.welcome-title {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: #ffd34d;
  line-height: 1.05;
  margin: 8px 0 6px;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.welcome-sub {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #b9cbe3;
  margin-bottom: 18px;
  line-height: 1.3;
}

.welcome-label {
  display: block;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #8fa6c4;
  margin-bottom: 8px;
}

.welcome-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-align: center;
  color: #fff;
  background: #0a121f;
  border: 2px solid #34507a;
  border-radius: 14px;
  outline: none;
  margin-bottom: 16px;
}

.welcome-input:focus { border-color: #ffd34d; }

.welcome-input.input-shake {
  animation: inputShake 0.4s ease-in-out;
  border-color: #ef4444 !important;
}

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

.welcome-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 16px;
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 5vw, 22px);
  line-height: 1.2;
  color: #07210f;
  background: #22c55e;
  border: 3px solid #000;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 #000, 0 6px 18px rgba(34, 197, 94, 0.5);
  transition: transform 0.1s, box-shadow 0.1s;
  text-transform: uppercase;
  text-align: center;
}

.welcome-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.welcome-btn:disabled { opacity: 0.5; filter: grayscale(0.6); cursor: not-allowed; box-shadow: none; }

/* ================= TELEFONE ANTIGO (CAPTURA DE WHATSAPP / LEAD) ================= */
.retro-phone {
  width: 100%;
  max-width: 320px;
  background: linear-gradient(180deg, #2b3340, #161b24);
  border: 3px solid #3a4453;
  border-radius: 28px;
  padding: 16px 16px 20px;
  box-shadow: 0 22px 55px rgba(0,0,0,0.7);
  animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

.retro-phone-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.retro-phone-speaker {
  width: 46px;
  height: 6px;
  border-radius: 4px;
  background: #0c0f14;
}

.retro-phone-brand {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  color: #7fd1ff;
}

.retro-phone-screen {
  background: #b9d8a8;
  border: 3px solid #0c0f14;
  border-radius: 10px;
  padding: 12px 10px;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

.retro-phone-hint {
  font-family: 'Baloo 2', monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: #2f4a23;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 6px;
}

.retro-phone-number {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #16240f;
  text-align: center;
  min-height: 28px;
  word-break: break-all;
}

.retro-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.retro-keypad .key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #eef4ff;
  background: linear-gradient(180deg, #3c4656, #2a313d);
  border: 2px solid #1a1f28;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 #12161d;
  transition: transform 0.06s, box-shadow 0.06s;
}

.retro-keypad .key small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #93a3bb;
  margin-top: -1px;
}

.retro-keypad .key:active { transform: translateY(3px); box-shadow: 0 0 0 #12161d; }
.retro-keypad .key-call {
  background: linear-gradient(180deg, #2fcf6a, #1ea551);
  box-shadow: 0 3px 0 #0c5b2b;
  color: #06230f;
}
.retro-keypad .key-fn { background: linear-gradient(180deg, #5a3c3c, #3d2a2a); }

.retro-phone-foot {
  font-family: 'Baloo 2', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #9fb1c9;
  text-align: center;
  margin-top: 14px;
  line-height: 1.4;
}

/* WAPP CHAT STYLES */
.wapp-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.3;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  animation: popScale 0.2s ease-out forwards;
}

.wapp-msg.sent {
  background: #dcf8c6;
  align-self: flex-end;
  border-top-right-radius: 0;
}

.wapp-msg.received {
  background: #ffffff;
  align-self: flex-start;
  border-top-left-radius: 0;
}

.wapp-msg-time {
  font-size: 10px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}