/* ==========================================================================
   CAMINOS 3.0 — 500-Level Expedition · 6 Stylized Game Modes · Living Oasis & Fauna
   Modern Glassmorphism · Jewel Vector Craft · 60fps Tactile Physics · WCAG >= 4.5:1
   ========================================================================== */

:root {
  --bg-primary: #ECFDF8;
  --bg-gradient: linear-gradient(160deg, #DDFBF3 0%, #FFF3E4 50%, #E3F0FF 100%);
  --bg-surface: rgba(255, 255, 255, 0.90);
  --bg-surface-solid: #FFFFFF;
  --bg-elevated: #D9F5EE;
  --text-primary: #0D252A;
  --text-secondary: #345C66;
  --border-color: rgba(13, 148, 136, 0.19);
  --focus-ring: #0D9488;

  --action-primary-bg: #0F766E;
  --action-primary-grad: linear-gradient(135deg, #14B8A6 0%, #0D9488 55%, #0F766E 100%);
  --action-primary-text: #FFFFFF;

  --board-frame: rgba(255, 255, 255, 0.88);
  --board-bg: #CFECE5;
  --board-cell: #FFFFFF;
  --board-wall: #475569;

  /* 4 Accessible Double-Coded Categories (WCAG >= 4.8:1 with white symbols) */
  --cat-circle-bg: #0F766E;
  --cat-circle-grad: linear-gradient(145deg, #14B8A6 0%, #0D7A71 100%);
  --cat-circle-shadow: rgba(13, 148, 136, 0.36);

  --cat-triangle-bg: #1D4ED8;
  --cat-triangle-grad: linear-gradient(145deg, #3B82F6 0%, #1D4ED8 100%);
  --cat-triangle-shadow: rgba(37, 99, 235, 0.36);

  --cat-square-bg: #C2410C;
  --cat-square-grad: linear-gradient(145deg, #F97316 0%, #C2410C 100%);
  --cat-square-shadow: rgba(234, 88, 12, 0.38);

  --cat-star-bg: #6D28D9;
  --cat-star-grad: linear-gradient(145deg, #8B5CF6 0%, #6D28D9 100%);
  --cat-star-shadow: rgba(124, 58, 237, 0.36);

  --cat-diamond-bg: #BE123C;
  --cat-diamond-grad: linear-gradient(145deg, #F43F5E 0%, #BE123C 100%);
  --cat-diamond-shadow: rgba(190, 18, 60, 0.36);

  --cat-hex-bg: #15803D;
  --cat-hex-grad: linear-gradient(145deg, #22C55E 0%, #15803D 100%);
  --cat-hex-shadow: rgba(21, 128, 61, 0.36);

  --cat-heart-bg: #A21CAF;
  --cat-heart-grad: linear-gradient(145deg, #E879F9 0%, #A21CAF 100%);
  --cat-heart-shadow: rgba(162, 28, 175, 0.36);

  --cat-bolt-bg: #0369A1;
  --cat-bolt-grad: linear-gradient(145deg, #38BDF8 0%, #0369A1 100%);
  --cat-bolt-shadow: rgba(3, 105, 161, 0.36);

  --cat-neutral-bg: #334155;
  --cat-neutral-grad: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10) 0px,
      rgba(255, 255, 255, 0.10) 6px,
      transparent 6px,
      transparent 12px
    ),
    linear-gradient(145deg, #64748B 0%, #334155 60%, #1E293B 100%);
  --cat-neutral-shadow: rgba(15, 23, 42, 0.42);

  /* 6 Game Mode Jewel Signatures */
  --fam-arrows-grad: linear-gradient(155deg, #2DD4BF 0%, #0D9488 52%, #0F766E 100%);
  --fam-liquids-grad: linear-gradient(155deg, #F43F5E 0%, #DB2777 52%, #9D174D 100%);
  --fam-paths-grad: linear-gradient(155deg, #60A5FA 0%, #2563EB 54%, #1E40AF 100%);
  --fam-pipes-grad: linear-gradient(155deg, #22D3EE 0%, #0891B2 54%, #155E75 100%);
  --fam-blocks-grad: linear-gradient(155deg, #FB923C 0%, #EA580C 54%, #9A3412 100%);
  --fam-crystals-grad: linear-gradient(155deg, #C084FC 0%, #9333EA 54%, #6B21A8 100%);

  --font-scale: 1;
  --base-font-size: calc(18px * var(--font-scale));
  --border-width: 1.5px;
  --motion-fast: 165ms;
  --motion-med: 260ms;
  --motion-bounce: cubic-bezier(0.32, 1.45, 0.62, 1);
  --motion-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

body.reduce-motion {
  --motion-fast: 0ms;
  --motion-med: 0ms;
}

body.high-contrast {
  --border-width: 3px;
  --border-color: #000000;
  --cat-circle-grad: var(--cat-circle-bg);
  --cat-triangle-grad: var(--cat-triangle-bg);
  --cat-square-grad: var(--cat-square-bg);
  --cat-star-grad: var(--cat-star-bg);
  --cat-diamond-grad: var(--cat-diamond-bg);
  --cat-hex-grad: var(--cat-hex-bg);
  --cat-heart-grad: var(--cat-heart-bg);
  --cat-bolt-grad: var(--cat-bolt-bg);
  --cat-neutral-grad: #1E293B;
  --action-primary-grad: var(--action-primary-bg);
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: var(--base-font-size);
  color: var(--text-primary);
  background: linear-gradient(135deg, #74EBD5 0%, #9FACE6 50%, #FBD786 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

body.theme-dark-backdrop {
  background: radial-gradient(circle at 25% 15%, #1E3A5F 0%, #090E1A 78%);
}

/* ======================== DEVICE VIEWPORT ======================== */

.workspace-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 14px 10px;
}

.device-viewport {
  width: 100%;
  max-width: 454px;
  height: min(930px, calc(100vh - 28px));
  min-height: 740px;
  background: var(--bg-gradient);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 44px;
  border: 7px solid #13202C;
  box-shadow:
    0 32px 80px rgba(9, 22, 34, 0.34),
    0 0 0 1.5px rgba(255, 255, 255, 0.55) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

@media (max-width: 540px) {
  .workspace-shell {
    padding: 0;
  }
  .device-viewport {
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ======================== MODERN GLASS HEADER ======================== */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--border-width) solid var(--border-color);
  z-index: 12;
}

.header-profile-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.header-profile-pill:active {
  transform: scale(0.95);
}

.header-wordmark {
  font-size: 1.04rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #0D9488 0%, #2563EB 50%, #9333EA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.theme-dark-backdrop .header-wordmark,
body.high-contrast .header-wordmark {
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-chip {
  height: 41px;
  min-width: 41px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--bg-surface-solid);
  border: var(--border-width) solid var(--border-color);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.icon-chip:active {
  transform: scale(0.92);
}

.coin-chip {
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
  color: #3B1D00;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 14px rgba(255, 167, 81, 0.4);
}

/* ======================== MAIN SCROLL STAGE ======================== */

.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.screen-enter {
  animation: popStage var(--motion-med) var(--motion-smooth);
}

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

.surface-card {
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-width) solid var(--border-color);
  border-radius: 26px;
  padding: 15px;
  box-shadow:
    0 12px 28px rgba(13, 37, 42, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.65);
}

/* ======================== EVOLVING EXPEDITION ROAD & ATLAS MAP ======================== */

.crossroads-card {
  position: relative;
  flex: 1;
  min-height: 270px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 38px rgba(13, 148, 136, 0.18);
  background: #38BDF8;
  display: flex;
  flex-direction: column;
}

.crossroads-svg-wrap {
  width: 100%;
  flex: 1;
  display: flex;
  position: relative;
}

.crossroads-svg-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  z-index: 5;
  gap: 8px;
}

.region-atlas-btn {
  flex: 1;
  min-width: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform var(--motion-fast) var(--motion-bounce);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region-atlas-btn:active {
  transform: scale(0.95);
}

.stage-arrow-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.92);
  color: #0F292E;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.stage-arrow-btn:disabled {
  opacity: 0.32;
  cursor: default;
}

.stage-arrow-btn:active:not(:disabled) {
  transform: scale(0.9);
}

/* Number-Only Stylized Jewel Route Choice Cards (2 or 3 at a fork) */
.fork-choices-row {
  display: grid;
  gap: 11px;
  width: 100%;
}

.fork-choices-row.count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.fork-choices-row.count-3 {
  grid-template-columns: repeat(3, 1fr);
}

.fork-route-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 146px;
  padding: 14px 8px 12px;
  border-radius: 28px;
  border: 2.5px solid rgba(255, 255, 255, 0.86);
  color: #FFFFFF;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    box-shadow var(--motion-fast) ease;
  overflow: hidden;
}

.fork-route-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.32) 0%, transparent 60%);
  pointer-events: none;
}

.fork-route-btn.route-arrows {
  background: var(--fam-arrows-grad);
  box-shadow: 0 14px 28px rgba(13, 148, 136, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn.route-paths {
  background: var(--fam-paths-grad);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn.route-pipes {
  background: var(--fam-pipes-grad);
  box-shadow: 0 14px 28px rgba(8, 145, 178, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn.route-blocks {
  background: var(--fam-blocks-grad);
  box-shadow: 0 14px 28px rgba(234, 88, 12, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn.route-crystals {
  background: var(--fam-crystals-grad);
  box-shadow: 0 14px 28px rgba(147, 51, 234, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn.route-liquids {
  background: var(--fam-liquids-grad);
  box-shadow: 0 14px 28px rgba(219, 39, 119, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.fork-route-btn:hover {
  transform: translateY(-4px) scale(1.02);
}

.fork-route-btn:active {
  transform: scale(0.94);
}

.fork-icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35);
}

.fork-level-number {
  font-weight: 900;
  font-size: 1.95rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.fork-family-pill {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  margin-top: 5px;
}

.fork-done-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE259, #FFA751);
  color: #3B1D00;
  font-size: 0.88rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
  border: 1.5px solid #FFFFFF;
}

/* Expedition Progress Bar */
.region-progress-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 20px;
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 0 6px 16px rgba(13, 37, 42, 0.05);
}

.progress-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(13, 148, 136, 0.15);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #14B8A6 0%, #3B82F6 50%, #F59E0B 100%);
  transition: width 360ms var(--motion-smooth);
}

/* Atlas Region Cards (Max 4 per page) */
.atlas-region-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 13px;
  border-radius: 22px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform var(--motion-fast) var(--motion-bounce), border-color var(--motion-fast) ease;
  box-shadow: 0 8px 20px rgba(13, 37, 42, 0.06);
}

.atlas-region-card.is-current {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25), 0 10px 24px rgba(13, 37, 42, 0.1);
}

.atlas-region-card:disabled {
  opacity: 0.48;
  cursor: default;
}

.atlas-region-card:active:not(:disabled) {
  transform: scale(0.96);
}

@keyframes dashFlow {
  to { stroke-dashoffset: -28; }
}

.anim-dash-flow {
  animation: dashFlow 1.3s linear infinite;
}

@keyframes wingFlutter {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -7px) scale(1.08); }
}

.anim-butterfly {
  animation: wingFlutter 3.2s ease-in-out infinite;
}

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

.anim-float-slow {
  animation: floatSlow 3.8s ease-in-out infinite;
}

@keyframes birdGlide {
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  50% { transform: translate(11px, -5px) rotate(-3deg); }
}

.anim-bird-glide {
  animation: birdGlide 4.4s ease-in-out infinite;
}

@keyframes dolphinLeap {
  0%, 100% { transform: translate(0px, 2px) rotate(-8deg); }
  50% { transform: translate(8px, -10px) rotate(10deg); }
}

.anim-dolphin-leap {
  animation: dolphinLeap 3.4s ease-in-out infinite;
}

@keyframes gentleBob {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}

.anim-gentle-bob {
  animation: gentleBob 2.9s ease-in-out infinite;
}

/* ======================== QUAD GRID & LIVING OASIS ======================== */

.quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.quad-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: 24px;
  padding: 13px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15, 41, 46, 0.06);
  transition: transform var(--motion-fast) var(--motion-bounce), border-color var(--motion-fast) ease;
}

.quad-card.active-choice {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.24), 0 10px 22px rgba(15, 41, 46, 0.1);
}

.quad-art {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.garden-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 34px rgba(13, 148, 136, 0.16);
}

.garden-hero svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes oasisPopIn {
  0% { transform: scale(0.35); opacity: 0; }
  65% { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.oasis-just-placed {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: oasisPopIn 580ms var(--motion-bounce);
  filter: drop-shadow(0 0 10px rgba(255, 226, 89, 0.95));
}

.oasis-spotlight-banner {
  padding: 7px 14px;
  background: linear-gradient(90deg, #0F172A 0%, #134E4A 100%);
  color: #FFE259;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  border-top: 1.5px solid rgba(255, 255, 255, 0.25);
  animation: popStage 220ms var(--motion-bounce);
}

/* ======================== BUTTONS ======================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 11px 18px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform var(--motion-fast) var(--motion-bounce), box-shadow var(--motion-fast) ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.95);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn-primary {
  background: var(--action-primary-grad);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.3);
}

.btn-coral {
  background: linear-gradient(135deg, #FF7E5F 0%, #E04F26 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(224, 79, 38, 0.3);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1.5px solid var(--border-color);
}

.btn-pill {
  min-height: 44px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
}

.swatch-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.swatch-dot {
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  padding: 0;
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.swatch-dot:active {
  transform: scale(0.9);
}

/* ======================== 5-FAMILY PUZZLE BOARDS & VFX ======================== */

.game-stage-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.game-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.level-num-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--bg-surface-solid);
  border: 1.5px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  font-weight: 900;
  font-size: 1.16rem;
}

.progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  max-width: 220px;
}

.p-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.22);
  transition: all var(--motion-med) var(--motion-bounce);
}

.p-dot.cleared {
  background: linear-gradient(135deg, #14B8A6, #F59E0B);
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.6);
}

.floating-toast-slot {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.micro-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--bg-surface-solid);
  border: 2px solid var(--focus-ring);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  animation: popStage 180ms var(--motion-bounce);
}

.tactile-board-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 32px;
  background: var(--board-frame);
  backdrop-filter: blur(14px);
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 20px 44px rgba(13, 37, 42, 0.14),
    inset 0 2px 3px rgba(255, 255, 255, 0.7);
  position: relative;
  touch-action: none;
  transition: transform var(--motion-med) var(--motion-smooth);
}

.tactile-board-outer.zoomed {
  transform: scale(1.09);
  z-index: 6;
}

.board-arena {
  position: relative;
  background: var(--board-bg);
  border-radius: 22px;
  padding: 8px;
  box-shadow: inset 0 3px 10px rgba(15, 41, 46, 0.1);
}

.board-arena.crystals-arena {
  background: linear-gradient(145deg, #1E1B4B 0%, #0F172A 100%);
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(192, 132, 252, 0.35);
}

.cell-well {
  position: absolute;
  background: var(--board-cell);
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(15, 41, 46, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.82);
}

.crystals-arena .cell-well {
  background: rgba(30, 41, 59, 0.72);
  border: 1.5px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
}

.wall-tile {
  position: absolute;
  border-radius: 15px;
  background: linear-gradient(145deg, #64748B 0%, #334155 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1 & 4. ARROWS & PORTAL BLOCKS */
.puzzle-piece {
  position: absolute;
  border-radius: 17px;
  color: #FFFFFF;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  transition:
    transform var(--motion-med) var(--motion-smooth),
    opacity 220ms ease,
    box-shadow var(--motion-fast) ease;
  touch-action: none;
}

.puzzle-piece::after {
  content: "";
  position: absolute;
  inset: 2px 4px auto 4px;
  height: 36%;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, transparent 100%);
  pointer-events: none;
}

.puzzle-piece.cat-circle {
  background: var(--cat-circle-grad);
  box-shadow: 0 8px 18px var(--cat-circle-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-triangle {
  background: var(--cat-triangle-grad);
  box-shadow: 0 8px 18px var(--cat-triangle-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-square {
  background: var(--cat-square-grad);
  box-shadow: 0 8px 18px var(--cat-square-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-star {
  background: var(--cat-star-grad);
  box-shadow: 0 8px 18px var(--cat-star-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-diamond {
  background: var(--cat-diamond-grad);
  box-shadow: 0 8px 18px var(--cat-diamond-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-hex {
  background: var(--cat-hex-grad);
  box-shadow: 0 8px 18px var(--cat-hex-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-heart {
  background: var(--cat-heart-grad);
  box-shadow: 0 8px 18px var(--cat-heart-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-bolt {
  background: var(--cat-bolt-grad);
  box-shadow: 0 8px 18px var(--cat-bolt-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.45);
}
.puzzle-piece.cat-neutral {
  background: var(--cat-neutral-grad);
  border-color: rgba(226, 232, 240, 0.85);
  box-shadow: 0 8px 18px var(--cat-neutral-shadow), inset 0 2px 4px rgba(255, 255, 255, 0.32);
}

.puzzle-piece.is-selected {
  z-index: 6;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 4px #FFE259, 0 12px 26px rgba(0, 0, 0, 0.28);
}

.puzzle-piece.is-hinted,
.pipe-tile-btn.is-hinted,
.crystal-tile-btn.is-hinted {
  z-index: 7;
  box-shadow: 0 0 0 5px #FFE259, 0 0 26px rgba(255, 210, 0, 0.9) !important;
}

.puzzle-piece.is-legal-glow {
  box-shadow: 0 0 0 4px #4ADE80, 0 8px 20px rgba(0, 0, 0, 0.22);
}

.puzzle-piece.is-blocker-pulse {
  z-index: 7;
  box-shadow: 0 0 0 5px #FF5722, 0 0 24px rgba(255, 87, 34, 0.75);
}

.border-gate {
  position: absolute;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  z-index: 4;
}

.border-gate.cat-circle   { background: var(--cat-circle-grad); }
.border-gate.cat-triangle { background: var(--cat-triangle-grad); }
.border-gate.cat-square   { background: var(--cat-square-grad); }
.border-gate.cat-star     { background: var(--cat-star-grad); }
.border-gate.cat-diamond  { background: var(--cat-diamond-grad); }
.border-gate.cat-hex      { background: var(--cat-hex-grad); }
.border-gate.cat-heart    { background: var(--cat-heart-grad); }
.border-gate.cat-bolt     { background: var(--cat-bolt-grad); }

/* 2. PATHS (ENLACES) */
.paths-svg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.path-terminal {
  position: absolute;
  border-radius: 999px;
  color: #FFFFFF;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.path-terminal.cat-circle   { background: var(--cat-circle-grad); }
.path-terminal.cat-triangle { background: var(--cat-triangle-grad); }
.path-terminal.cat-square   { background: var(--cat-square-grad); }
.path-terminal.cat-star     { background: var(--cat-star-grad); }
.path-terminal.cat-diamond  { background: var(--cat-diamond-grad); }
.path-terminal.cat-hex      { background: var(--cat-hex-grad); }
.path-terminal.cat-heart    { background: var(--cat-heart-grad); }
.path-terminal.cat-bolt     { background: var(--cat-bolt-grad); }

.path-terminal.active-pair {
  transform: scale(1.14);
  box-shadow: 0 0 0 4px #FFE259, 0 8px 18px rgba(0, 0, 0, 0.28);
}

.path-hit-cell {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;
}

/* 3. PIPES (TUBERÍAS): copper pipes on flagstones in a garden bed, mossy rocks for walls */
.board-arena.pipes-arena {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
    linear-gradient(160deg, #CFE8C6 0%, #A9D39C 100%);
  box-shadow: inset 0 3px 12px rgba(30, 70, 30, 0.22), 0 0 0 2px rgba(101, 163, 13, 0.25);
}

.pipes-arena .cell-well {
  background: radial-gradient(circle at 35% 30%, #D9C29C 0%, #BC9C6E 100%);
  border: none;
  box-shadow: inset 0 2px 5px rgba(80, 50, 20, 0.28);
}

.pipes-arena .wall-tile {
  background: radial-gradient(circle at 32% 28%, #B4BCC4 0%, #7A838E 62%, #5B636E 100%);
  border-radius: 42% 46% 40% 44%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 -3px 4px rgba(0, 0, 0, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.4);
}

.pipes-arena .wall-tile svg {
  display: none;
}

.pipes-arena .wall-tile::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 8%;
  width: 46%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #8BD08E 0%, #4E9A51 100%);
  opacity: 0.9;
}

body.theme-dark-backdrop .board-arena.pipes-arena {
  background: linear-gradient(160deg, #23422C 0%, #18301F 100%);
}

body.theme-dark-backdrop .pipes-arena .cell-well {
  background: radial-gradient(circle at 35% 30%, #6B5236 0%, #4E3A24 100%);
}

.pipe-tile-btn {
  position: absolute;
  background: linear-gradient(150deg, #FFFCF5 0%, #EFE4D1 100%);
  border: 1px solid rgba(138, 75, 31, 0.18);
  box-shadow: 0 2px 0 rgba(138, 75, 31, 0.18), 0 4px 9px rgba(60, 40, 20, 0.1);
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.pipe-tile-btn.is-wet {
  background: linear-gradient(150deg, #F2FDFF 0%, #CDEFF8 100%);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 2px 0 rgba(14, 116, 144, 0.22), 0 0 14px rgba(56, 189, 248, 0.38);
}

.pipe-tile-btn:active {
  transform: scale(0.94);
}

.pipe-rotator-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms var(--motion-bounce);
}

.pipe-rotator-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.pipe-center-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

/* 5. CRYSTALS (CRISTALES DE LUZ) */
.crystal-tile-btn {
  position: absolute;
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.14);
  transition:
    transform 190ms var(--motion-bounce),
    background 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.crystal-tile-btn.is-lit {
  border-color: #FEF08A;
  background: linear-gradient(145deg, #FDE047 0%, #14B8A6 55%, #0284C7 100%);
  box-shadow:
    0 0 20px rgba(45, 212, 191, 0.65),
    0 6px 16px rgba(0, 0, 0, 0.3),
    inset 0 2px 5px rgba(255, 255, 255, 0.75);
}

.crystal-tile-btn:active {
  transform: scale(0.9);
}

@keyframes crystalWaveRing {
  0% { transform: translate(-50%, -50%) scale(0.35); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

.crystal-shockwave {
  position: fixed;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  border: 3.5px solid #FFE259;
  box-shadow: 0 0 18px #2DD4BF;
  pointer-events: none;
  z-index: 998;
  animation: crystalWaveRing 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sparkle-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 999;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 520ms ease;
}

/* 6. LIQUIDS (ELIXIRES DE LABORATORIO — GLASS FLASKS & ALCHEMY RACKS) */
.liquids-lab-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 14px 14px;
  min-width: 312px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 58, 95, 0.92) 55%, rgba(19, 78, 74, 0.92) 100%);
  box-shadow:
    inset 0 4px 18px rgba(0, 0, 0, 0.48),
    0 0 0 2px rgba(244, 63, 94, 0.28);
}

body.high-contrast .liquids-lab-arena {
  background: #F1F5F9;
  box-shadow: 0 0 0 3px #000000;
}

.lab-shelf-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 13px;
  padding: 12px 12px 10px;
  border-bottom: 6px solid rgba(251, 191, 36, 0.48);
  border-radius: 0 0 14px 14px;
}

body.high-contrast .lab-shelf-row {
  border-bottom-color: #0F172A;
}

.lab-flask-btn {
  position: relative;
  width: 64px;
  height: 152px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: transform 220ms var(--motion-bounce), filter 200ms ease;
  touch-action: manipulation;
}

.lab-shelf-row.cols-4 .lab-flask-btn {
  width: 58px;
  height: 146px;
}

.lab-shelf-row.cols-5 {
  gap: 8px;
  padding: 10px 8px 8px;
}

.lab-shelf-row.cols-5 .lab-flask-btn {
  width: 48px;
  height: 132px;
}

.lab-flask-btn:hover:not(.is-complete) {
  transform: translateY(-4px);
}

.lab-flask-btn.is-selected {
  transform: translateY(-18px) rotate(-9deg) scale(1.05);
  z-index: 8;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42));
}

.lab-flask-btn.is-pouring-right {
  transform: translateY(-24px) translateX(10px) rotate(36deg) !important;
  z-index: 10;
}

.lab-flask-btn.is-pouring-left {
  transform: translateY(-24px) translateX(-10px) rotate(-36deg) !important;
  z-index: 10;
}

@keyframes flaskShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.lab-flask-btn.is-shaking {
  animation: flaskShake 210ms ease-in-out;
}

.flask-rim {
  width: 82%;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(186, 230, 253, 0.72), rgba(255, 255, 255, 0.95));
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 4;
  margin-bottom: -2px;
}

body.high-contrast .flask-rim {
  background: #FFFFFF;
  border: 2.5px solid #000000;
}

.flask-body {
  position: relative;
  width: 72%;
  height: 132px;
  border-radius: 7px 7px 26px 26px;
  border: 2.5px solid rgba(255, 255, 255, 0.78);
  border-top: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.20) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(255, 255, 255, 0.16),
    0 10px 18px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3px;
}

.lab-shelf-row.cols-4 .flask-body {
  height: 126px;
}

.lab-shelf-row.cols-5 .flask-body {
  height: 112px;
}

body.high-contrast .flask-body {
  background: #FFFFFF;
  border: 3px solid #000000;
  border-top: none;
}

.lab-flask-btn.is-selected .flask-body,
.lab-flask-btn.is-hinted .flask-body {
  border-color: #FFE259;
  box-shadow:
    0 0 0 3px rgba(255, 226, 89, 0.85),
    0 0 22px rgba(255, 210, 0, 0.85);
}

.lab-flask-btn.can-receive .flask-body,
.lab-flask-btn.is-hinted-target .flask-body {
  border-color: #4ADE80;
  box-shadow:
    0 0 0 3px rgba(74, 222, 128, 0.8),
    0 0 18px rgba(45, 212, 191, 0.75);
}

.lab-flask-btn.is-complete .flask-body {
  border-color: #FDE047;
  box-shadow:
    0 0 0 2.5px rgba(253, 224, 71, 0.72),
    0 8px 20px rgba(250, 204, 21, 0.38);
}

.flask-liquid-column {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 4px 4px 21px 21px;
  overflow: hidden;
}

.flask-layer {
  position: relative;
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  transition: transform 220ms var(--motion-bounce), filter 180ms ease;
}

.flask-layer.same-below {
  border-bottom: none;
}

.flask-layer.same-above {
  border-top-color: rgba(255, 255, 255, 0.10);
}

.flask-layer.is-top-surface::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

@keyframes liquidRiseIn {
  0% { transform: scaleY(0.35); opacity: 0.6; }
  70% { transform: scaleY(1.08); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

.flask-layer.layer-just-poured {
  transform-origin: center bottom;
  animation: liquidRiseIn 260ms var(--motion-bounce);
}

.flask-layer.cat-circle   { background: var(--cat-circle-grad); }
.flask-layer.cat-triangle { background: var(--cat-triangle-grad); }
.flask-layer.cat-square   { background: var(--cat-square-grad); }
.flask-layer.cat-star     { background: var(--cat-star-grad); }
.flask-layer.cat-diamond  { background: var(--cat-diamond-grad); }
.flask-layer.cat-hex      { background: var(--cat-hex-grad); }
.flask-layer.cat-heart    { background: var(--cat-heart-grad); }
.flask-layer.cat-bolt     { background: var(--cat-bolt-grad); }

.flask-glass-shine {
  position: absolute;
  top: 5px;
  bottom: 14px;
  left: 5px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
  z-index: 5;
}

.flask-ticks {
  position: absolute;
  top: 12%;
  bottom: 14%;
  right: 4px;
  width: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}

.flask-ticks span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
}

@keyframes receiveBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.flask-receive-arrow {
  position: absolute;
  top: -15px;
  font-size: 0.95rem;
  font-weight: 900;
  color: #4ADE80;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  animation: receiveBounce 1s ease-in-out infinite;
  pointer-events: none;
  z-index: 7;
}

.flask-cork {
  position: absolute;
  top: 0px;
  width: 56%;
  height: 14px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(135deg, #FDE047 0%, #D97706 100%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #3B1D00;
  font-weight: 900;
  z-index: 6;
  animation: oasisPopIn 360ms var(--motion-bounce);
}

.liquid-stream-drop {
  position: fixed;
  width: 11px;
  height: 11px;
  border-radius: 50% 50% 50% 0;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 340ms ease;
}

/* ======================== MAX-4 AIDS DOCK & BOTTOM NAV ======================== */

.aids-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 7px;
  border-radius: 24px;
  background: var(--bg-surface);
  backdrop-filter: blur(18px);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 0 10px 24px rgba(15, 41, 46, 0.08);
}

.dock-btn {
  min-height: 56px;
  border-radius: 18px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-bounce), background-color var(--motion-fast) ease;
}

.dock-btn:active:not(:disabled) {
  transform: scale(0.91);
}

.dock-btn:disabled {
  opacity: 0.32;
}

.dock-btn.highlight-on {
  background: var(--action-primary-grad);
  color: #FFFFFF;
}

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px 12px 12px;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  border-top: var(--border-width) solid var(--border-color);
  z-index: 12;
}

.nav-tab {
  min-height: 54px;
  border-radius: 18px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--motion-bounce),
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.nav-tab.active {
  background: var(--action-primary-grad);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
}

.nav-tab:active {
  transform: scale(0.92);
}

/* ======================== DIFFICULTY TIERS & CHALLENGE SELECTOR ======================== */

.fork-diff-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.fork-diff-stars {
  color: #FDE047;
  letter-spacing: -0.04em;
}

.hud-diff-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-color);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-primary);
}

.hud-diff-stars {
  color: #D97706;
  letter-spacing: -0.04em;
}

body.theme-dark-backdrop .hud-diff-stars {
  color: #FDE047;
}

.challenge-trigger-btn {
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
  transition: transform var(--motion-fast) var(--motion-bounce);
  flex-shrink: 0;
}

.challenge-trigger-btn:active {
  transform: scale(0.93);
}

.challenge-tier-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.tier-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-bounce), border-color var(--motion-fast) ease;
}

.tier-pill-btn.active {
  background: linear-gradient(145deg, #7C3AED 0%, #4F46E5 100%);
  color: #FFFFFF;
  border-color: #C4B5FD;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.32);
}

.tier-pill-stars {
  font-size: 0.72rem;
  color: #D97706;
  letter-spacing: -0.06em;
  line-height: 1;
}

.tier-pill-btn.active .tier-pill-stars {
  color: #FDE047;
}

.tier-pill-name {
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.family-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.family-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 18px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-bounce), box-shadow var(--motion-fast) ease;
}

.family-pick-btn.active {
  border-color: var(--focus-ring);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 2.5px rgba(20, 184, 166, 0.28);
}

.family-pick-btn:active,
.tier-pill-btn:active {
  transform: scale(0.94);
}

/* ======================== 4 WORLD SPACES SWITCHER ======================== */

.world-space-tabs,
.studio-subtabs,
.trophy-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.space-tab-btn,
.studio-tab-btn,
.trophy-tab-btn {
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 16px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform var(--motion-fast) var(--motion-bounce), background var(--motion-fast) ease;
}

.space-tab-btn.active,
.studio-tab-btn.active,
.trophy-tab-btn.active {
  background: var(--action-primary-grad);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.28);
}

.space-tab-btn:active,
.studio-tab-btn:active,
.trophy-tab-btn:active {
  transform: scale(0.94);
}

/* ======================== TROPHIES, MEDALS & ACHIEVEMENT TOASTS ======================== */

.trophy-chip {
  background: linear-gradient(135deg, #FEF08A 0%, #F59E0B 100%);
  color: #3B1D00;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.34);
  padding: 0 9px;
}

.trophy-chip.is-active {
  box-shadow: 0 0 0 3px #14B8A6, 0 4px 14px rgba(245, 158, 11, 0.45);
}

@keyframes achievementSlideIn {
  0%   { opacity: 0; transform: translate(-50%, -26px) scale(0.9); }
  70%  { opacity: 1; transform: translate(-50%, 3px) scale(1.03); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.achievement-toast-banner {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 26px);
  max-width: 410px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 55%, #134E4A 100%);
  color: #FFFFFF;
  border: 2px solid #FDE047;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(250, 204, 21, 0.45);
  cursor: pointer;
  animation: achievementSlideIn 380ms var(--motion-bounce);
}

.ach-toast-medal {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 25%, #FEF08A 0%, #F59E0B 65%, #B45309 100%);
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
}

.ach-toast-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FDE047;
}

.ach-toast-title {
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.15;
}

.ach-toast-desc {
  font-size: 0.76rem;
  color: #CBD5E1;
  font-weight: 700;
  line-height: 1.2;
}

.ach-toast-reward {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
  color: #3B1D00;
  font-size: 0.76rem;
  font-weight: 900;
  flex-shrink: 0;
}

.trophy-card {
  position: relative;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: 22px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15, 41, 46, 0.06);
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.trophy-card.is-unlocked {
  border-color: #F59E0B;
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.16), inset 0 1.5px 0 rgba(255, 255, 255, 0.8);
}

.trophy-card.is-locked {
  opacity: 0.66;
}

.medal-emblem {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.medal-emblem.tier-bronze {
  background: radial-gradient(circle at 30% 25%, #FED7AA 0%, #EA580C 68%, #7C2D12 100%);
}
.medal-emblem.tier-silver {
  background: radial-gradient(circle at 30% 25%, #F8FAFC 0%, #94A3B8 68%, #334155 100%);
}
.medal-emblem.tier-gold {
  background: radial-gradient(circle at 30% 25%, #FEF08A 0%, #F59E0B 66%, #92400E 100%);
}
.medal-emblem.tier-diamond {
  background: radial-gradient(circle at 30% 25%, #E0F2FE 0%, #38BDF8 48%, #7C3AED 100%);
}
.trophy-card.is-locked .medal-emblem {
  filter: grayscale(0.85);
}

.trophy-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.14);
  overflow: hidden;
}

.trophy-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #14B8A6 0%, #F59E0B 100%);
}

.victory-medals-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(254, 240, 138, 0.32), rgba(245, 158, 11, 0.18));
  border: 1.5px solid rgba(245, 158, 11, 0.55);
}

.archetype-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.archetype-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 18px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-bounce);
}

.archetype-btn.active {
  border-color: var(--focus-ring);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 2.5px rgba(20, 184, 166, 0.28);
}

.archetype-btn:active {
  transform: scale(0.93);
}


/* ==========================================================================
   CAMINOS 5.0 — Achievements, 7 difficulty tiers, 8 world spaces, avatar
   studio and cinematic per-game animations
   ========================================================================== */

/* ---------- Floating VFX layers (fixed to the screen, never block taps) ---------- */
.flask-flying {
  pointer-events: none;
  z-index: 120;
  transition: none !important;
  filter: drop-shadow(0 14px 18px rgba(15, 23, 42, 0.35));
}

.pour-stream {
  position: fixed;
  width: 8px;
  border-radius: 4px;
  transform-origin: 50% 0;
  z-index: 119;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.liquid-splash-drop {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 121;
  pointer-events: none;
}

.lab-flask-btn.is-receiving {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.95));
}

.flask-layer.layer-filling {
  transition: none;
}

@keyframes corkDrop {
  0%   { transform: translateY(-26px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(3px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes sealGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(255, 226, 89, 0)); }
  40%  { filter: drop-shadow(0 0 18px rgba(255, 226, 89, 0.95)); }
  100% { filter: drop-shadow(0 0 4px rgba(255, 226, 89, 0.4)); }
}

.lab-flask-btn.just-sealed {
  animation: sealGlow 900ms ease-out;
}

.lab-flask-btn.just-sealed .flask-cork {
  animation: corkDrop 560ms var(--motion-bounce);
}

.arrow-streak {
  position: fixed;
  z-index: 60;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(1.2px);
}

.portal-burst-ring {
  position: fixed;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid;
  z-index: 80;
  pointer-events: none;
}

.block-ghost {
  pointer-events: none;
  z-index: 2 !important;
}

.confetti-piece {
  position: fixed;
  z-index: 200;
  pointer-events: none;
}

/* ---------- Board intro: every piece pops in, one after another ---------- */
@keyframes pieceIntroPop {
  0%   { opacity: 0; scale: 0.35; }
  70%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

.board-intro .puzzle-piece,
.board-intro .pipe-tile-btn,
.board-intro .crystal-tile-btn,
.board-intro .path-terminal,
.board-intro .lab-flask-btn,
.board-intro .portal-gate {
  animation: pieceIntroPop 460ms var(--motion-bounce) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}

/* ---------- PORTALES: living dimensional chamber ---------- */
.board-arena.portal-chamber {
  background:
    radial-gradient(circle at 20% 15%, rgba(251, 146, 60, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    linear-gradient(145deg, #1E1B4B 0%, #0F172A 60%, #172554 100%);
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(251, 146, 60, 0.35), 0 0 26px rgba(139, 92, 246, 0.25);
  overflow: visible;
}

.portal-chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 64% 38%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 38% 76%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 86% 64%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 24% 54%, rgba(255, 255, 255, 0.6) 50%, transparent 51%);
  animation: chamberTwinkle 4.5s ease-in-out infinite;
  pointer-events: none;
}

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

.portal-chamber .cell-well {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.portal-chamber .wall-tile {
  background: linear-gradient(145deg, #475569 0%, #1E293B 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.portal-gate {
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.portal-vortex {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  aspect-ratio: 1;
  min-width: 70px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.85) 40deg,
    rgba(255, 255, 255, 0) 95deg,
    rgba(255, 255, 255, 0.55) 170deg,
    rgba(255, 255, 255, 0) 230deg,
    rgba(255, 255, 255, 0.7) 300deg,
    rgba(255, 255, 255, 0) 360deg);
  mix-blend-mode: soft-light;
  animation: vortexSpin 1.8s linear infinite;
  pointer-events: none;
}

.portal-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0) 7px);
  background-size: 28px 100%;
  animation: gateEnergyFlow 0.9s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}

.portal-gate.edge-W::after,
.portal-gate.edge-E::after {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.35) 3px, rgba(255, 255, 255, 0) 7px);
  background-size: 100% 28px;
  animation-name: gateEnergyFlowV;
}

@keyframes vortexSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes gateEnergyFlow {
  to { background-position: 28px 0; }
}

@keyframes gateEnergyFlowV {
  to { background-position: 0 28px; }
}

.portal-emblem {
  position: relative;
  z-index: 1;
  display: flex;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

@keyframes gateCallPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 0.6); scale: 1; }
  50% { box-shadow: 0 0 26px rgba(255, 255, 255, 0.95), 0 0 0 6px rgba(255, 255, 255, 0); scale: 1.08; }
}

.portal-gate.is-target-gate {
  animation: gateCallPulse 1.1s ease-in-out infinite;
  z-index: 6;
}

.portal-gate.is-target-gate .portal-vortex {
  animation-duration: 0.7s;
  mix-blend-mode: overlay;
}

.portal-gate.is-sealed {
  filter: saturate(0.4) brightness(0.85);
  border-color: #FDE047;
}

.portal-gate.is-sealed .portal-vortex,
.portal-gate.is-sealed::after {
  animation-play-state: paused;
  opacity: 0.25;
}

@keyframes gateAbsorbFlash {
  0% { filter: brightness(1); scale: 1; }
  45% { filter: brightness(2.2); scale: 1.3; }
  100% { filter: brightness(1); scale: 1; }
}

.portal-gate.is-absorbing {
  animation: gateAbsorbFlash 560ms ease-out;
  z-index: 7;
}

.portal-block.is-goal-block {
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(255, 255, 255, 0.2);
}

.block-core-glow {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.45) 60deg, transparent 130deg, transparent 360deg);
  animation: vortexSpinCore 3.4s linear infinite;
  pointer-events: none;
}

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

@keyframes blockSelectedAura {
  0%, 100% { box-shadow: 0 0 0 3px #FFFFFF, 0 0 16px 4px rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 0 0 3px #FDE047, 0 0 26px 8px rgba(253, 224, 71, 0.6); }
}

.portal-block.is-selected {
  animation: blockSelectedAura 1.2s ease-in-out infinite;
  z-index: 8;
}

.portal-block.is-warping {
  z-index: 30;
}

.portal-block.is-barrier {
  background: var(--cat-neutral-grad);
  border-color: rgba(203, 213, 225, 0.7);
}

.rail-glyph {
  font-size: 1.1rem;
  font-weight: 900;
  color: #E2E8F0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.rivet {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F8FAFC 0%, #94A3B8 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.rivet.r1 { top: 5px; left: 5px; }
.rivet.r2 { top: 5px; right: 5px; }
.rivet.r3 { bottom: 5px; left: 5px; }
.rivet.r4 { bottom: 5px; right: 5px; }

.rail-groove {
  position: absolute;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.55) 0px, rgba(148, 163, 184, 0.55) 6px, rgba(148, 163, 184, 0.15) 6px, rgba(148, 163, 184, 0.15) 10px);
  z-index: 1;
  pointer-events: none;
}

.rail-groove.rail-v {
  background: repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.55) 0px, rgba(148, 163, 184, 0.55) 6px, rgba(148, 163, 184, 0.15) 6px, rgba(148, 163, 184, 0.15) 10px);
}

/* ---------- Difficulty badges ---------- */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.tier-badge.tier-6,
.tier-badge.tier-7 {
  background-size: 200% 100% !important;
  animation: tierShine 2.4s linear infinite;
}

@keyframes tierShine {
  to { background-position: -200% 0; }
}

.fork-tier-stars {
  font-size: 0.66rem;
  font-weight: 900;
  color: #FDE047;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ---------- Header + achievement banner ---------- */
#achievement-toast-slot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  pointer-events: none;
}

#achievement-toast-slot > * {
  pointer-events: auto;
}

.achievement-toast-banner.tier-legend,
.achievement-toast-banner.tier-diamond {
  border-color: #7DD3FC;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42), 0 0 30px rgba(125, 211, 252, 0.6);
}

.ach-toast-medal {
  animation: medalSpinIn 700ms var(--motion-bounce);
}

@keyframes medalSpinIn {
  0% { transform: rotateY(180deg) scale(0.3); }
  100% { transform: rotateY(0deg) scale(1); }
}

.medal-emblem.tier-legend {
  background: linear-gradient(135deg, #F472B6 0%, #FDE047 25%, #34D399 50%, #60A5FA 75%, #A78BFA 100%);
  background-size: 300% 300%;
  animation: legendAurora 4s ease-in-out infinite;
}

@keyframes legendAurora {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.trophy-card.is-unlocked .medal-emblem {
  animation: medalIdleShine 3.2s ease-in-out infinite;
}

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

.trophy-card .trophy-tier-label {
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.trophy-filter-tabs {
  grid-template-columns: repeat(3, 1fr);
}

.trophy-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.trophy-summary-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 900;
}

.trophy-summary-cell .medal-emblem {
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
}

/* ---------- Retos (challenge picker) ---------- */
.challenge-tier-list {
  grid-template-columns: repeat(4, 1fr);
}

.tier-pill-btn {
  min-height: 58px;
}

.tier-pill-btn.active {
  background: var(--tier-color, #7C3AED);
  border-color: rgba(255, 255, 255, 0.85);
}

.tier-pill-btn .tier-pill-count {
  font-size: 0.62rem;
  font-weight: 800;
  opacity: 0.8;
}

.challenge-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 24px;
  color: #FFFFFF;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
}

.challenge-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 800;
  font-size: 0.86rem;
}

/* ---------- Avatar studio ---------- */
.studio-subtabs .studio-tab-btn {
  font-size: 0.72rem;
}

.archetype-btn {
  position: relative;
  min-height: 70px;
}

.archetype-btn .arch-icon {
  font-size: 1.45rem;
  line-height: 1;
}

.archetype-btn.is-locked .arch-icon {
  filter: grayscale(0.35);
  opacity: 0.85;
}

.price-tag {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
  color: #3B1D00;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.price-tag.cant-afford {
  background: #E2E8F0;
  color: #475569;
}

.swatch-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- World spaces (8 tabs in two rows) ---------- */
.world-space-tabs .space-tab-btn {
  min-height: 52px;
}

.space-tab-btn .space-tab-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.space-tab-btn .space-tab-count {
  font-size: 0.6rem;
  opacity: 0.85;
}

.scene-item {
  transform-box: fill-box;
  transform-origin: center bottom;
}

@keyframes sceneSway   { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sceneBob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sceneWalk   { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px) scaleX(-1); } }
@keyframes sceneKite   { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(8px, -8px) rotate(10deg); } }
@keyframes sceneGlide  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -6px); } }
@keyframes sceneSurf   { 0%, 100% { transform: translate(-6px, 0) rotate(-6deg); } 50% { transform: translate(8px, -5px) rotate(6deg); } }
@keyframes sceneSail   { 0%, 100% { transform: translateX(-14px) rotate(-2deg); } 50% { transform: translateX(10px) rotate(3deg); } }
@keyframes sceneLeap   { 0%, 70%, 100% { transform: translate(0, 6px) rotate(-10deg); opacity: 0.2; } 80% { transform: translate(8px, -16px) rotate(15deg); opacity: 1; } 90% { transform: translate(16px, -4px) rotate(40deg); opacity: 1; } }
@keyframes sceneFlicker { 0%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.08, 0.94); opacity: 0.85; } 60% { transform: scale(0.95, 1.06); opacity: 1; } }
@keyframes sceneGlow   { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)); } }
@keyframes sceneFlutter { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 25% { transform: translate(6px, -6px) rotate(4deg); } 75% { transform: translate(-6px, -3px) rotate(-2deg); } }
@keyframes sceneSteam  { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 -4px 3px rgba(255, 255, 255, 0.4)); } 50% { transform: translateY(-2px); filter: drop-shadow(0 -10px 6px rgba(255, 255, 255, 0.7)); } }
@keyframes sceneSnow   { 0% { transform: translate(0, -12px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-14px, 40px) rotate(180deg); opacity: 0; } }
@keyframes sceneOrbit  { 0% { transform: translate(-18px, 0); } 50% { transform: translate(18px, -6px); } 100% { transform: translate(-18px, 0); } }
@keyframes sceneComet  { 0% { transform: translate(30px, -16px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-60px, 26px); opacity: 0; } }
@keyframes sceneHover  { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(10px, -8px) rotate(3deg); } }
@keyframes sceneBubble { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.05); } }

.scene-anim-sway    { animation: sceneSway 4s ease-in-out infinite; }
.scene-anim-bob     { animation: sceneBob 3s ease-in-out infinite; }
.scene-anim-walk    { animation: sceneWalk 5s ease-in-out infinite; }
.scene-anim-kite    { animation: sceneKite 4.2s ease-in-out infinite; }
.scene-anim-glide   { animation: sceneGlide 6s ease-in-out infinite; }
.scene-anim-surf    { animation: sceneSurf 3.4s ease-in-out infinite; }
.scene-anim-sail    { animation: sceneSail 9s ease-in-out infinite; }
.scene-anim-leap    { animation: sceneLeap 4.6s ease-in-out infinite; }
.scene-anim-flicker { animation: sceneFlicker 0.9s ease-in-out infinite; }
.scene-anim-glow    { animation: sceneGlow 2.6s ease-in-out infinite; }
.scene-anim-flutter { animation: sceneFlutter 3.2s ease-in-out infinite; }
.scene-anim-steam   { animation: sceneSteam 2.4s ease-in-out infinite; }
.scene-anim-snow    { animation: sceneSnow 4.5s linear infinite; }
.scene-anim-orbit   { animation: sceneOrbit 8s ease-in-out infinite; }
.scene-anim-comet   { animation: sceneComet 5s ease-in infinite; }
.scene-anim-hover   { animation: sceneHover 4s ease-in-out infinite; }
.scene-anim-bubble  { animation: sceneBubble 2s ease-in-out infinite; }

/* ---------- Result screen extras ---------- */
.result-tier-up {
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.35);
  animation: oasisPopIn 600ms var(--motion-bounce);
}

.result-goal-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: left;
}

.result-goal-line .trophy-progress-track {
  flex: 1;
}

body.reduce-motion .portal-vortex,
body.reduce-motion .portal-gate::after,
body.reduce-motion .block-core-glow,
body.reduce-motion .portal-chamber::before,
body.reduce-motion [class*="scene-anim-"],
body.reduce-motion .portal-gate.is-target-gate,
body.reduce-motion .portal-block.is-selected,
body.reduce-motion .medal-emblem {
  animation: none !important;
}

.static-screen .screen-enter {
  animation: none;
}

/* ======================== AMIGOS REALES & MESA EN VIVO ======================== */
.mesa-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mesa-hint {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.3;
}

.mesa-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mesa-input-row {
  display: flex;
  gap: 8px;
}

.mesa-input-row > .btn {
  flex: 1;
}

.mesa-input {
  flex: 1.4;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  user-select: text;
  -webkit-user-select: text;
}

.mesa-input:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.mesa-hero {
  background: linear-gradient(135deg, #F97316 0%, #DB2777 55%, #7C3AED 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 30px rgba(219, 39, 119, 0.3);
}

.mesa-hero .mesa-input {
  border-color: rgba(255, 255, 255, 0.7);
}

.mesa-hero-btn {
  background: #FFFFFF !important;
  color: #9D174D !important;
}

.mesa-return-card {
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border: 2px solid var(--focus-ring);
  animation: gateCallPulse 1.8s ease-in-out infinite;
}

.friend-code-pill,
.mesa-code-pill {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.friend-code-pill b,
.mesa-code-pill b {
  letter-spacing: 0.12em;
  font-size: 0.92rem;
}

.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--border-color);
}

.gift-card {
  background: linear-gradient(135deg, #FFF7ED, #FFE4E6);
  color: #3B1D00;
}

.mesa-qr {
  width: 170px;
  height: 170px;
  padding: 8px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
}

.mesa-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mesa-code-big {
  display: flex;
  gap: 8px;
}

.mesa-code-big span {
  width: 52px;
  height: 64px;
  border-radius: 16px;
  background: var(--action-primary-grad);
  color: #FFFFFF;
  font-size: 2.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.3);
}

.mesa-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.mesa-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  animation: pieceIntroPop 460ms var(--motion-bounce) both;
}

.mesa-seat-avatar {
  position: relative;
}

.mesa-seat.is-me .mesa-seat-avatar svg {
  filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.8));
}

.mesa-crown {
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 1.1rem;
}

.mesa-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mesa-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 18px;
  border: 2px solid var(--border-color);
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mesa-mode-btn span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.mesa-mode-btn.active {
  border-color: var(--focus-ring);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 2.5px rgba(20, 184, 166, 0.28);
}

.mesa-mode-btn:disabled,
.family-pick-btn:disabled,
.tier-pill-btn:disabled {
  cursor: default;
  opacity: 0.85;
}

.mesa-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mesa-strip-floating {
  padding: 8px 10px;
  border-radius: 18px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(15, 41, 46, 0.1);
}

.mesa-strip-seat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 900;
}

.mesa-strip-seat > span {
  min-width: 34px;
  text-align: right;
}

.mesa-strip-bar {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.15);
  overflow: hidden;
}

.mesa-strip-bar > div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #14B8A6 0%, #3B82F6 100%);
  transition: width 380ms var(--motion-smooth);
}

.mesa-strip-seat.is-me .mesa-strip-bar > div {
  background: linear-gradient(90deg, #F97316 0%, #DB2777 100%);
}

.mesa-strip-seat.is-done .mesa-strip-bar > div {
  background: linear-gradient(90deg, #FDE047 0%, #F59E0B 100%);
}

.mesa-countdown {
  flex: 1;
  min-height: 420px;
  border-radius: 28px;
  background: linear-gradient(160deg, #7C3AED 0%, #DB2777 55%, #F97316 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mesa-countdown-num {
  font-size: 9rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: countdownPop 900ms var(--motion-bounce);
}

@keyframes countdownPop {
  0% { transform: scale(2.2); opacity: 0; }
  40% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.mesa-standings {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mesa-standing-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 16px;
  background: var(--bg-elevated);
  text-align: left;
}

.mesa-standing-row.is-me {
  outline: 2.5px solid var(--focus-ring);
}

.mesa-place {
  font-size: 1.4rem;
  min-width: 30px;
  text-align: center;
}

.mesa-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 5px solid rgba(20, 184, 166, 0.2);
  border-top-color: #14B8A6;
  animation: vortexSpinCore 0.9s linear infinite;
}

.dock-btn.is-off {
  opacity: 0.45;
}

/* ======================== LIVING WORLDS: AVATARS, AMBIENCE & FULL-SCREEN VIEWER ======================== */
.garden-hero.world-scene {
  box-shadow: 0 18px 38px rgba(13, 148, 136, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.garden-hero.world-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}

.world-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.45);
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.world-fullscreen-btn:active {
  transform: scale(0.92);
}

/* Avatar stroll: move, turn around, legs swing */
@keyframes worldWalk {
  0%   { transform: translateX(calc(var(--walk-range, 30px) * -1)); }
  45%  { transform: translateX(var(--walk-range, 30px)); }
  50%  { transform: translateX(var(--walk-range, 30px)); }
  95%  { transform: translateX(calc(var(--walk-range, 30px) * -1)); }
  100% { transform: translateX(calc(var(--walk-range, 30px) * -1)); }
}

@keyframes worldFlip {
  0%, 47.9% { transform: scaleX(1); }
  48%, 97.9% { transform: scaleX(-1); }
  98%, 100% { transform: scaleX(1); }
}

@keyframes worldLegSwing {
  0%, 100% { transform: rotate(13deg); }
  50% { transform: rotate(-13deg); }
}

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

.world-walker {
  animation: worldWalk 14s ease-in-out infinite;
}

.world-flipper {
  animation: worldFlip 14s linear infinite;
}

.world-walker .world-leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: worldLegSwing 0.62s ease-in-out infinite;
}

.world-walker .leg-r {
  animation-delay: -0.31s;
}

.world-walker .world-body-bob {
  animation: worldBob 0.62s ease-in-out infinite;
}

/* Ambient particles */
@keyframes ambFloat  { 0%, 100% { transform: translate(0, 0); opacity: 0.4; } 50% { transform: translate(8px, -12px); opacity: 1; } }
@keyframes ambTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes ambShooting { 0%, 82% { transform: translate(0, 0); opacity: 0; } 86% { opacity: 1; } 100% { transform: translate(-140px, 60px); opacity: 0; } }
@keyframes ambRise   { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-210px); opacity: 0; } }
@keyframes ambCaustics { 0%, 100% { transform: translateX(-10px); opacity: 0.12; } 50% { transform: translateX(14px); opacity: 0.26; } }
@keyframes ambRays   { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.45; } }
@keyframes ambWander { 0%, 100% { transform: translate(0, 0); opacity: 0.3; } 25% { transform: translate(10px, -8px); opacity: 1; } 50% { transform: translate(-6px, -14px); opacity: 0.6; } 75% { transform: translate(-12px, 4px); opacity: 1; } }
@keyframes ambFall   { 0% { transform: translate(0, 0); } 100% { transform: translate(-24px, 232px); } }
@keyframes ambDrift  { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateX(-90px); opacity: 0; } }
@keyframes ambBeam   { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.6; } }

.amb-float    { animation: ambFloat 6s ease-in-out infinite; }
.amb-twinkle  { animation: ambTwinkle 2.6s ease-in-out infinite; }
.amb-shooting { animation: ambShooting 7s ease-in infinite; }
.amb-rise     { animation: ambRise 7s ease-in infinite; }
.amb-caustics { animation: ambCaustics 6s ease-in-out infinite; }
.amb-rays     { animation: ambRays 5s ease-in-out infinite; }
.amb-wander   { animation: ambWander 7s ease-in-out infinite; }
.amb-fall     { animation: ambFall 8s linear infinite; }
.amb-drift    { animation: ambDrift 7s linear infinite; }
.amb-beam     { animation: ambBeam 6s ease-in-out infinite; }

/* Full-screen viewer: covers the whole screen and always shows the world landscape.
   --scene-h is the largest scene height that fits; the scene keeps the 420x218 artwork ratio. */
.world-viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  container-type: size;
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.96) 0%, rgba(2, 6, 23, 0.98) 80%);
  animation: popStage var(--motion-med) var(--motion-smooth);
}

.world-viewer-frame {
  --pad-x: max(14px, env(safe-area-inset-left), env(safe-area-inset-right));
  --scene-h: min(
    calc(100cqh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),
    calc((100cqw - 2 * var(--pad-x)) * 218 / 420)
  );
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) var(--pad-x) max(10px, env(safe-area-inset-bottom));
}

/* Phone held upright (the installed app is locked to portrait): draw the frame turned a quarter
   to the right, so turning the phone to the left shows the world upright across the long side */
@media (orientation: portrait) and (pointer: coarse) {
  .world-viewer-frame {
    --pad-x: max(14px, env(safe-area-inset-top), env(safe-area-inset-bottom));
    --scene-h: min(
      calc(100cqw - 74px),
      calc((100cqh - 2 * var(--pad-x)) * 218 / 420)
    );
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    padding: 10px var(--pad-x);
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.world-viewer-bar {
  width: calc(var(--scene-h) * 420 / 218);
  max-width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  text-align: center;
  font-size: 0.98rem;
}

.world-viewer-stage {
  display: flex;
  justify-content: center;
}

.world-viewer-stage .garden-hero {
  width: auto;
  flex: none;
  border-radius: 22px;
}

.world-viewer-stage .garden-hero > svg {
  display: block;
  height: var(--scene-h);
  width: calc(var(--scene-h) * 420 / 218);
  max-width: none;
  max-height: none;
}

body.reduce-motion [class^="amb-"],
body.reduce-motion .world-walker,
body.reduce-motion .world-flipper {
  animation: none !important;
}

/* ======================== WELCOME INTRO ======================== */
.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 160;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, rgba(13, 148, 136, 0.92) 0%, rgba(49, 46, 129, 0.94) 100%);
  animation: popStage var(--motion-med) var(--motion-smooth);
}

.intro-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 18px 16px;
  border-radius: 30px;
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  animation: popStage 320ms var(--motion-smooth);
}

.intro-body h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
}

.intro-body p {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-secondary);
}

.intro-logo {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  box-shadow: 0 12px 26px rgba(13, 148, 136, 0.35);
  animation: medalSpinIn 800ms var(--motion-bounce);
}

.intro-games {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.intro-games > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.intro-games span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-games small {
  font-size: 0.74rem;
  font-weight: 800;
}

.intro-avatar {
  animation: medalSpinIn 700ms var(--motion-bounce);
}

.intro-name {
  width: 100%;
  text-align: center;
  flex: none;
}

.intro-chars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.intro-small {
  font-size: 0.82rem !important;
}

.intro-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.intro-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--bg-elevated);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.intro-list li span {
  font-size: 1.5rem;
}

.intro-scene {
  width: 100%;
}

.intro-mesa {
  font-size: 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.intro-mesa span {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
}

.intro-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.intro-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-color);
  transition: width var(--motion-fast) ease;
}

.intro-dots span.on {
  width: 26px;
  border-radius: 999px;
  background: var(--focus-ring);
}

.intro-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}

.intro-skip {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
}

/* Mesa room & podium */
@keyframes mesaSeatedBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes mesaWave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(5deg); }
}

.mesa-seated {
  animation: mesaSeatedBob 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.mesa-seated.is-me {
  animation: mesaWave 2.2s ease-in-out infinite;
}

.mesa-room svg,
.mesa-podium svg {
  display: block;
  width: 100%;
  height: auto;
}

.mesa-podium {
  width: 100%;
}


/* ==========================================================================
   CAMINOS 6 — Visual refresh: living background, glass header, floating
   navigation and the redesigned Mundo (hero, postcards, shop showcase)
   ========================================================================== */

/* ---------- Living background ---------- */
.device-viewport::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 18% 20%, rgba(45, 212, 191, 0.28), transparent),
    radial-gradient(closest-side at 85% 30%, rgba(167, 139, 250, 0.22), transparent),
    radial-gradient(closest-side at 50% 90%, rgba(251, 146, 60, 0.18), transparent);
  animation: bgDrift 26s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-4%, 3%) rotate(6deg); }
}

.device-viewport > * {
  position: relative;
  z-index: 1;
}

.device-viewport > #achievement-toast-slot,
.device-viewport > .intro-overlay {
  position: absolute;
}

body.theme-dark-backdrop .device-viewport::before {
  opacity: 0.6;
}

/* ---------- Glass header ---------- */
.app-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 100%);
  border-bottom: none;
  box-shadow: 0 6px 22px rgba(15, 41, 46, 0.08);
  padding: 10px 14px 9px;
}

body.theme-dark-backdrop .app-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.65) 100%);
}

.header-profile-pill {
  background: var(--bg-surface-solid);
  box-shadow: 0 4px 14px rgba(15, 41, 46, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.icon-chip {
  transition: transform var(--motion-fast) var(--motion-bounce), box-shadow var(--motion-fast) ease;
}

.icon-chip:active {
  transform: scale(0.92);
}

/* ---------- Floating bottom navigation ---------- */
.bottom-nav {
  margin: 0 10px 10px;
  padding: 6px;
  border-radius: 28px;
  border-top: none;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 100%);
  box-shadow: 0 14px 34px rgba(15, 41, 46, 0.18);
}

body.theme-dark-backdrop .bottom-nav {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(148, 163, 184, 0.25);
}

.nav-tab {
  border-radius: 22px;
  min-height: 56px;
}

.nav-tab > span:first-child {
  transition: transform 260ms var(--motion-bounce);
}

.nav-tab.active > span:first-child {
  transform: translateY(-2px) scale(1.18);
}

.nav-tab.active {
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- Cards & buttons ---------- */
.surface-card {
  border-radius: 24px;
  box-shadow:
    0 14px 32px rgba(13, 37, 42, 0.09),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7);
}

.btn-primary,
.btn-coral {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%),
    var(--action-primary-grad);
}

.btn-coral {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #FF7E5F 0%, #E04F26 100%);
}

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

/* ---------- Mundo: hero ---------- */
.mundo-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mundo-hero {
  position: relative;
  margin: 0 -4px;
}

.mundo-hero .garden-hero {
  border-radius: 30px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 22px 44px color-mix(in srgb, var(--world-b) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--world-a) 40%, transparent);
}

.mundo-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  pointer-events: none;
}

.mundo-hud span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.5);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------- Mundo: postcard carousel ---------- */
.world-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 8px;
  margin: 0 -15px;
  padding-left: 15px;
  padding-right: 15px;
  scrollbar-width: none;
}

.world-carousel::-webkit-scrollbar {
  display: none;
}

.world-postcard {
  flex: none;
  scroll-snap-align: center;
  width: 92px;
  height: 104px;
  padding: 10px 8px 9px;
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(150deg, var(--pc-a) 0%, var(--pc-b) 100%);
  color: #FFFFFF;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pc-b) 35%, transparent);
  opacity: 0.86;
  transition: transform 220ms var(--motion-bounce), opacity 200ms ease, box-shadow 200ms ease;
}

.world-postcard.active {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
  border-color: #FFFFFF;
  box-shadow: 0 0 0 3px var(--focus-ring), 0 12px 24px color-mix(in srgb, var(--pc-b) 45%, transparent);
}

.world-postcard:active {
  transform: scale(0.95);
}

.world-postcard-icon {
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
}

.world-postcard-name {
  font-size: 0.8rem;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.world-postcard-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.world-postcard-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #FFFFFF;
}

/* ---------- Mundo: collection & filter ---------- */
.mundo-collection {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--world-a) 16%, var(--bg-surface-solid)) 0%, var(--bg-surface-solid) 70%);
  border: 1.5px solid color-mix(in srgb, var(--world-a) 35%, transparent);
  box-shadow: 0 10px 24px rgba(13, 37, 42, 0.07);
}

.mundo-collection-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
}

.mundo-collection-row span {
  font-weight: 900;
  font-size: 1.05rem;
}

.mundo-progress {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--world-a) 18%, transparent);
  overflow: hidden;
}

.mundo-progress > div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--world-a), var(--world-b));
  transition: width 500ms var(--motion-smooth);
}

.mundo-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-color);
}

.mundo-filter button {
  min-height: 42px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.84rem;
  cursor: pointer;
}

.mundo-filter button small {
  font-size: 0.72rem;
  opacity: 0.75;
}

.mundo-filter button.active {
  background: var(--bg-surface-solid);
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(15, 41, 46, 0.12);
}

/* ---------- Mundo: shop showcase ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.shop-card {
  --rarity: #14B8A6;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 9px 9px 11px;
  border-radius: 24px;
  background: var(--bg-surface-solid);
  border: 2px solid color-mix(in srgb, var(--rarity) 30%, transparent);
  box-shadow: 0 10px 22px rgba(13, 37, 42, 0.08);
  text-align: center;
  transition: transform 200ms var(--motion-bounce);
}

.shop-card.rarity-raro { --rarity: #3B82F6; }
.shop-card.rarity-epico { --rarity: #A855F7; }
.shop-card.rarity-legendario { --rarity: #F59E0B; }

.shop-card.rarity-legendario {
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.22);
}

.shop-art {
  position: relative;
  height: 96px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--world-a) 45%, #FFFFFF) 0%, color-mix(in srgb, var(--world-b) 40%, #FFFFFF) 100%);
}

.shop-card.rarity-legendario .shop-art::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.55) 40deg, transparent 90deg, transparent 360deg);
  animation: vortexSpinCore 5s linear infinite;
}

.shop-emoji {
  position: relative;
  z-index: 1;
  font-size: 2.9rem;
  line-height: 1;
  filter: drop-shadow(0 8px 6px rgba(15, 23, 42, 0.22));
  transition: transform 260ms var(--motion-bounce);
}

.shop-card.is-placed .shop-emoji {
  animation: floatSlow 3.6s ease-in-out infinite;
}

.shop-card:not(.is-owned) .shop-emoji {
  filter: drop-shadow(0 8px 6px rgba(15, 23, 42, 0.22)) saturate(0.85);
}

.shop-rarity {
  position: absolute;
  z-index: 2;
  bottom: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rarity);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.shop-new {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F43F5E, #F97316);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(244, 63, 94, 0.4);
  animation: nudgeBreath 1.6s ease-in-out infinite;
}

.shop-name {
  font-size: 0.86rem;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-buy {
  min-height: 44px;
  border: none;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #FFB347 0%, #F97316 100%);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.32);
  transition: transform 160ms var(--motion-bounce);
}

.shop-buy:active {
  transform: scale(0.94);
}

.shop-buy:disabled {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  box-shadow: none;
  cursor: default;
}

.shop-short {
  margin-top: -4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.shop-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.shop-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #CBD5E1;
  transition: background 200ms ease;
  flex: none;
}

.shop-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 220ms var(--motion-bounce);
}

.shop-toggle.on {
  background: color-mix(in srgb, var(--focus-ring) 14%, var(--bg-surface-solid));
  border-color: var(--focus-ring);
}

.shop-toggle.on .shop-switch {
  background: var(--focus-ring);
}

.shop-toggle.on .shop-switch::after {
  transform: translateX(14px);
}

@keyframes justBoughtGlow {
  0% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.9); transform: scale(0.96); }
  60% { box-shadow: 0 0 0 10px rgba(253, 224, 71, 0); transform: scale(1.03); }
  100% { box-shadow: 0 10px 22px rgba(13, 37, 42, 0.08); transform: scale(1); }
}

.shop-card.just-bought {
  animation: justBoughtGlow 900ms var(--motion-bounce);
}

body.reduce-motion .device-viewport::before,
body.reduce-motion .shop-card.is-placed .shop-emoji,
body.reduce-motion .shop-new,
body.reduce-motion .shop-card.rarity-legendario .shop-art::after {
  animation: none !important;
}

body.high-contrast .shop-art,
body.high-contrast .world-postcard {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Elixir: pours never block; flying flasks are hidden in place, poured layers rise when the stream lands */
.lab-flask-btn.is-in-flight {
  visibility: hidden;
}

@keyframes liquidFillIn {
  0% { transform: scaleY(0); opacity: 0; }
  60% { transform: scaleY(1.06); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

.flask-layer.layer-arriving {
  transform-origin: center bottom;
  animation: liquidFillIn 380ms ease-out both;
}

/* The player's chosen name replaces the wordmark in the header */
.header-wordmark.is-name {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-size: 1.02rem;
}

.mundo-filter button {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0 4px;
}

.shop-toggle {
  white-space: nowrap;
  font-size: 0.76rem;
  gap: 6px;
  padding: 0 6px;
}

/* ======================== EDGE-TO-EDGE ON EVERY PHONE ======================== */
/* The root gets a solid colour (per theme) so Android tints its own bottom bar to match the app */
html {
  background: var(--system-bar-bottom, #E7F1FB);
}

@media (max-width: 540px) {
  html,
  body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body,
  body.theme-dark-backdrop {
    background: var(--system-bar-bottom, #E7F1FB);
  }

  .workspace-shell {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    padding: 0;
  }

  .device-viewport {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  /* Keep content clear of camera cut-outs and the gesture bar when the app draws behind them */
  .app-header {
    padding-top: max(9px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .bottom-nav {
    margin-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .game-stage-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Installed app or real full screen: fill the whole display */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .workspace-shell {
    padding: 0;
  }

  .device-viewport {
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

:fullscreen .device-viewport {
  height: 100vh;
  height: 100dvh;
}

/* The bottom of the app melts into the phone's navigation bar colour */
@media (max-width: 540px) {
  .device-viewport::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--system-bar-bottom, #E7F1FB) 100%);
  }
}

/* Mythical creatures: iridescent rarity frame */
.shop-card.rarity-mitico {
  --rarity: #EC4899;
  border: 2.5px solid transparent;
  background:
    linear-gradient(var(--bg-surface-solid), var(--bg-surface-solid)) padding-box,
    linear-gradient(135deg, #F472B6, #A78BFA, #38BDF8, #34D399, #FDE047, #F472B6) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: mythicBorder 6s linear infinite;
  box-shadow: 0 12px 28px rgba(167, 139, 250, 0.35);
}

@keyframes mythicBorder {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}

.shop-card.rarity-mitico .shop-rarity {
  background: linear-gradient(90deg, #EC4899, #8B5CF6, #0EA5E9);
}

.shop-card.rarity-mitico .shop-art {
  height: 112px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(150deg, #312E81 0%, #7C3AED 50%, #DB2777 100%);
}

.shop-card.rarity-mitico .shop-art::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.45) 40deg, transparent 90deg, transparent 180deg, rgba(255, 255, 255, 0.3) 220deg, transparent 260deg);
  animation: vortexSpinCore 6s linear infinite;
}

.shop-mythic-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-mythic-art svg {
  max-height: 100px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

body.reduce-motion .shop-card.rarity-mitico,
body.reduce-motion .shop-card.rarity-mitico .shop-art::after {
  animation: none !important;
}

/* Overlays must stay above the floating navigation (the refresh gave every viewport child z-index 1) */
.device-viewport > #achievement-toast-slot { z-index: 90; }
.device-viewport > .world-viewer { position: fixed; z-index: 150; }
.device-viewport > .intro-overlay { z-index: 160; }

/* The background blobs reach past the frame; clip (unlike hidden) can't be scrolled by focus or scrollIntoView,
   which would otherwise slide the app up and leave a blank strip at the bottom */
.device-viewport { overflow: clip; }

/* Portales: while a block is dragged it rides above the others and follows the finger with no lag */
.portal-block.is-dragging {
  z-index: 12;
  cursor: grabbing;
  animation: none;
  box-shadow: 0 0 0 3px #FFFFFF, 0 14px 26px rgba(0, 0, 0, 0.45);
}

@keyframes nudgeBreath {
  0%, 100% { scale: 1; }
  50% { scale: 1.1; }
}

/* ======================== RUTA TRAIL: TANDAS OF 10 STEPS ======================== */
.route-trail {
  padding: 8px 12px 10px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 253, 245, 0.88) 100%);
  border: var(--border-width) solid var(--border-color);
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.12);
}

body.theme-dark-backdrop .route-trail {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.trail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
}

.trail-title {
  font-weight: 900;
  font-size: 0.86rem;
  white-space: nowrap;
}

.trail-title small {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-left: 1px;
}

.trail-sub {
  flex: 1;
  color: var(--text-secondary);
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trail-count {
  font-weight: 900;
  color: var(--text-secondary);
}

.trail-front-btn {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 0.74rem;
}

.trail-track {
  position: relative;
  height: 80px;
  margin: 8px 4px 0;
}

.trail-track > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trail-path-base {
  fill: none;
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 12;
  stroke-linecap: round;
}

.trail-path-dash {
  fill: none;
  stroke: rgba(148, 163, 184, 0.75);
  stroke-width: 2.5;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}

.trail-path-walked {
  fill: none;
  stroke: #F59E0B;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 2px rgba(180, 83, 9, 0.35));
}

.trail-node {
  position: absolute;
  width: 24px;
  height: 24px;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2.5px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22);
  z-index: 2;
}

.trail-node.is-done {
  background: var(--node-color, #14B8A6);
}

.trail-node.is-current {
  background: #FFFFFF;
  border-color: #FBBF24;
  animation: trailCurrentPulse 1.8s ease-in-out infinite;
}

.trail-node.is-locked {
  background: rgba(203, 213, 225, 0.7);
  border-color: rgba(255, 255, 255, 0.85);
  cursor: default;
  box-shadow: none;
}

.trail-node.is-treasure {
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, #FFFBEB 0%, #FDE68A 100%);
  border-color: #F59E0B;
}

.trail-node.is-treasure.is-locked {
  background: radial-gradient(circle, #FFFBEB 0%, #FEF3C7 100%);
  border-color: #FCD34D;
  animation: trailChestGlow 2.4s ease-in-out infinite;
}

.trail-node.is-treasure.is-done {
  background: radial-gradient(circle, #FEF9C3 0%, #FDE047 100%);
}

.trail-node.is-viewing:not(.is-current) {
  outline: 3px solid rgba(13, 148, 136, 0.65);
  outline-offset: 2px;
}

.trail-step-num {
  font-size: 0.7rem;
  font-weight: 900;
  color: #B45309;
}

.trail-lock {
  width: 8px;
  height: 7px;
  margin-top: 3px;
  border-radius: 2px;
  background: #94A3B8;
  position: relative;
}

.trail-lock::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 6px;
  height: 6px;
  border: 1.6px solid #94A3B8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
}

.trail-reward {
  position: absolute;
  transform: translate(-50%, 16px);
  font-size: 0.62rem;
  font-weight: 900;
  color: #B45309;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.trail-avatar {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.3));
  transition: left 1s ease-in-out, top 1s ease-in-out;
}

.trail-avatar.is-walking .trail-avatar-body {
  animation: trailHop 0.34s ease-in-out 3;
}

.trail-node.just-unlocked {
  animation: trailUnlock 650ms 950ms var(--motion-bounce) both;
}

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

@keyframes trailUnlock {
  0% { transform: translate(-50%, -50%) scale(0.6); filter: grayscale(1); }
  60% { transform: translate(-50%, -50%) scale(1.3); filter: grayscale(0); box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes trailCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(251, 191, 36, 0); }
}

@keyframes trailChestGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(245, 158, 11, 0.35); }
}

/* The chest that opens at the end of a tanda, on the result card */
.tanda-reward-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #FCD34D;
  color: #78350F;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
  animation: popStage 420ms var(--motion-bounce);
}

.tanda-reward-card.is-region-end {
  background: linear-gradient(135deg, #FEF9C3 0%, #FDE68A 100%);
  border-color: #F59E0B;
}

.tanda-reward-card span {
  font-size: 0.82rem;
  font-weight: 800;
}

.tanda-chest {
  animation: chestBounce 1.6s ease-in-out infinite;
}

@keyframes chestBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-5px) rotate(-4deg); }
  60% { transform: translateY(0) rotate(3deg); }
}

body.reduce-motion .trail-node,
body.reduce-motion .tanda-chest,
body.reduce-motion .trail-avatar {
  animation: none !important;
  transition: none !important;
}