/* Rumbo - Design System */
/* Google Fonts se cargan desde HTML con <link> + preconnect para evitar render-block del @import */

:root {
  /* Palette - Default "Lima" */
  --lime: #C8FF3D;
  --lime-deep: #9FD821;
  --violet: #5B2DE8;
  --violet-deep: #3A1AB3;
  --cream: #FBF7ED;
  --coral: #FF6B5B;
  --ink: #0F0D1E;
  --ink-soft: #2A2640;
  --muted: #7B7796;
  --line: rgba(15, 13, 30, 0.08);
  --card: #ffffff;
  --bg: #FBF7ED;
}

[data-theme="sunset"] {
  --lime: #FFB627;
  --lime-deep: #E89415;
  --violet: #E84B7A;
  --violet-deep: #B02758;
  --cream: #FFF3E0;
  --coral: #6B3FA0;
  --ink: #2D1B2E;
  --ink-soft: #4A2E4C;
  --bg: #FFF3E0;
}

[data-theme="ocean"] {
  --lime: #5EF0C7;
  --lime-deep: #2DC99D;
  --violet: #1A3A6B;
  --violet-deep: #0D2447;
  --cream: #EFF8FF;
  --coral: #FF7B9A;
  --ink: #0A1F3C;
  --ink-soft: #1D3558;
  --bg: #EFF8FF;
}

[data-theme="mono"] {
  --lime: #E6FF00;
  --lime-deep: #BFD600;
  --violet: #111111;
  --violet-deep: #000000;
  --cream: #F5F5F0;
  --coral: #FF4D1A;
  --ink: #0A0A0A;
  --ink-soft: #222222;
  --bg: #F5F5F0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background: #E5E1D6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; border-radius: 16px; border: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease;
  letter-spacing: -0.01em;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink); color: var(--lime);
  box-shadow: 0 4px 0 var(--violet-deep), 0 6px 20px rgba(91, 45, 232, 0.35);
}
.btn-primary:active { box-shadow: 0 2px 0 var(--violet-deep), 0 3px 10px rgba(91, 45, 232, 0.25); }

.btn-lime {
  background: var(--lime); color: var(--ink);
  box-shadow: 0 4px 0 var(--lime-deep), 0 6px 16px rgba(159, 216, 33, 0.35);
}
.btn-lime:active { box-shadow: 0 2px 0 var(--lime-deep); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--line);
}

/* Cards */
.card {
  background: var(--card); border-radius: 20px;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  font-family: 'Space Grotesk', sans-serif;
}

/* XP bar */
.xp-track {
  height: 10px; background: rgba(15,13,30,0.08);
  border-radius: 999px; overflow: hidden; position: relative;
}
.xp-fill {
  height: 100%; background: linear-gradient(90deg, var(--lime), var(--lime-deep));
  border-radius: 999px; transition: width 0.4s cubic-bezier(.2,.9,.3,1);
  position: relative;
}
.xp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shine 2s infinite;
}
@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Scrollbars — hide inside iOS frame */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }

/* Animations */
/* ── Path map animations ───────────────────────────── */

/* Pulsing glow on the "next" circle */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,45,232,0.45); }
  50%       { box-shadow: 0 0 0 16px rgba(91,45,232,0); }
}
.path-node-pulse { animation: pulse 1.8s ease-in-out infinite; }

/* Bounce entry for each node card */
@keyframes pathNodeBounce {
  0%   { opacity: 0; transform: translateY(28px) scale(0.82); }
  55%  { opacity: 1; transform: translateY(-5px) scale(1.04); }
  75%  { transform: translateY(2px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.path-node-in { animation: pathNodeBounce 0.5s cubic-bezier(.2,.9,.3,1) both; }

/* Connector line drawing downward */
@keyframes connectorDraw {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 60px; opacity: 1; }
}
.connector-draw { animation: connectorDraw 0.35s ease both; overflow: hidden; }

/* Stamp/bounce for the done ✓ icon */
@keyframes doneStamp {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.2) rotate(6deg);  opacity: 1; }
  75%  { transform: scale(0.93) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.path-done-stamp { animation: doneStamp 0.5s cubic-bezier(.2,.9,.3,1) both; }

/* Gentle float on the active/next card */
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}
.path-card-float { animation: floatCard 2.6s ease-in-out infinite; }

/* Shimmer sweep on completed cards */
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}
.path-done-shimmer {
  background-image: linear-gradient(
    105deg,
    rgba(200,255,61,0.12) 0%,
    rgba(200,255,61,0.12) 40%,
    rgba(255,255,255,0.55) 50%,
    rgba(200,255,61,0.12) 60%,
    rgba(200,255,61,0.12) 100%
  ) !important;
  background-size: 300% 100%;
  animation: shimmer 3s linear infinite;
}

@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.pop-in { animation: popIn 0.4s cubic-bezier(.2,.9,.3,1) both; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slideUp 0.4s ease both; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float { animation: float 3s ease-in-out infinite; }

@keyframes referralPulse {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); box-shadow: 4px 4px 0 var(--ink); }
  50% { transform: translateY(-4px) rotate(0.4deg); box-shadow: 7px 7px 0 var(--ink), 0 0 0 4px rgba(200,255,61,0.35); }
}
.referral-mini-card {
  padding: 13px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--lime) 0%, #fff 58%, #FDE68A 100%);
  animation: referralPulse 2.4s ease-in-out infinite;
}
.referral-mini-gift {
  animation: wiggle 1.2s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
.wiggle { animation: wiggle 0.5s ease; }

@keyframes aptitudeHintPulse {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink); }
  50% { box-shadow: 6px 6px 0 var(--ink), 0 0 0 4px rgba(200,255,61,0.55); }
}
.aptitude-slider-hint-card {
  animation: aptitudeHintPulse 1.25s ease-in-out infinite;
}

@keyframes aptitudeHintNudge {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(14px); }
}
.aptitude-slider-hint-input {
  animation: aptitudeHintNudge 1.1s ease-in-out infinite;
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Tweaks panel */
.tweaks-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: 18px; width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  font-family: 'Inter', sans-serif;
}
.tweaks-panel h3 {
  margin: 0 0 12px; font-family: 'Space Grotesk'; font-size: 14px;
  letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5;
  font-weight: 600;
}
.tweaks-panel label {
  display: block; font-size: 12px; opacity: 0.6;
  margin: 14px 0 6px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.tweak-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-chip {
  padding: 7px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'Space Grotesk'; transition: all 0.15s;
}
.tweak-chip.active { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.tweak-chip:hover:not(.active) { background: rgba(255,255,255,0.15); }

.tweak-swatch {
  width: 32px; height: 32px; border-radius: 10px;
  cursor: pointer; border: 2px solid rgba(255,255,255,0.1);
  transition: transform 0.15s;
}
.tweak-swatch.active { border-color: #fff; transform: scale(1.1); }

/* No-select for prototype */
button, .clickable { user-select: none; -webkit-tap-highlight-color: transparent; }