/* ============================================================
   MAESTRÍAS+  (archivo: css/pages/masteries-plus.css)
   ------------------------------------------------------------
   Va la última en la cascada. Solo AÑADE reglas: todo lo que ya
   existía sigue igual salvo pequeños retoques de acabado.

   Regla del sistema:
     · Papel blanco de cómic  → instrucciones, ayuda y consejos
     · Pizarra oscura + tinta → tus datos y tu progreso
     · Luckiest Guy (fuente de Roblox) solo para "golpes" de cómic
   ============================================================ */
:root {
  --mp-paper:   #ffffff;
  --mp-paper-2: #f1f3f8;
  --mp-ink:     var(--ink, #08090c);
  --mp-yellow:  var(--yellow-bright, #FFD700);
  --mp-green:   var(--green-done, #39ff14);
  --mp-purple:  #9b5cff;
  --mp-comic:   'Luckiest Guy', 'Fredoka One', cursive;

  /* misma escala que las barras de valoración */
  --mp-l1: #39ff14;
  --mp-l2: #a8e63d;
  --mp-l3: #FFD700;
  --mp-l4: #ff8c00;
  --mp-l5: #ff3333;
  --mp-l6: #c9a8ff;
}

/* Deja hueco a los botones flotantes (buzón a la izquierda, FABs a la derecha) */
@media (min-width: 1000px) {
  #grid-view { padding-left: 78px; padding-right: 78px; }
}

/* ════════════════════════════════════════════════════════════
   TABLÓN: progreso global + recomendaciones + guía
   ════════════════════════════════════════════════════════════ */
#mp-board {
  max-width: 1600px;
  margin: 4px auto 18px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px 18px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1.4px, transparent 1.6px) 0 0 / 12px 12px,
    linear-gradient(180deg, #1e2430 0%, #12161f 100%);
  border: 5px solid var(--mp-ink);
  border-radius: 20px;
  box-shadow: 0 9px 0 var(--mp-ink);
}

/* Barra global: el guante 👋 avanza con tus maestrías */
#mp-track { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#mp-track-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#mp-track-count {
  font-family: var(--mp-comic);
  font-size: 2rem;
  line-height: 1;
  color: var(--mp-yellow);
  -webkit-text-stroke: 2px var(--mp-ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--mp-ink);
  letter-spacing: 1px;
}
#mp-track-sub {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: #aab2c5;
}
#mp-track-bar {
  position: relative;
  height: 26px;
  margin-right: 18px;
  background: #0a0d12;
  border: 4px solid var(--mp-ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--mp-ink), inset 0 3px 5px rgba(0,0,0,.8);
}
#mp-track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 7px 0 0 7px;
  background:
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #ffe45c 0%, #e0a800 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45);
  transition: width .6s cubic-bezier(.34,1.3,.64,1);
}
#mp-track-hand {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%) rotate(-12deg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--mp-paper);
  border: 4px solid var(--mp-ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--mp-ink);
  transition: left .6s cubic-bezier(.34,1.3,.64,1);
}

/* Recomendaciones */
#mp-recs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  min-width: 0;
}
.mp-rec {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 12px 9px 9px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: linear-gradient(180deg, #2b3241, #171c26);
  border: 4px solid var(--mp-ink);
  border-radius: 15px;
  box-shadow: 0 6px 0 var(--mp-ink);
  transition: transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .13s, background .18s;
}
.mp-rec:hover  { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 9px 0 var(--mp-ink); }
.mp-rec:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--mp-ink); }
.mp-rec-cont  { background: linear-gradient(180deg, #17402a, #0b2416); }
.mp-rec-start { background: linear-gradient(180deg, #3d3100, #1f1900); }
.mp-rec-thumb {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  aspect-ratio: 640 / 411;
  border: 3px solid var(--mp-ink);
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg,#1e1600 0 10px,#130f00 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.mp-rec-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.mp-rec-emoji { font-size: 1.5rem; }
.mp-rec-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mp-rec-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  color: #9fd8b1;
}
.mp-rec-start .mp-rec-title { color: #e9cf6a; }
.mp-rec-name {
  font-family: 'Fredoka One', cursive;
  font-size: 1.15rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 2px 0 var(--mp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-rec-sub {
  font-size: .78rem;
  color: #aab2c5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-rec-go {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 3px solid var(--mp-ink);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--mp-ink);
}
.mp-rec-cont .mp-rec-go { background: var(--mp-green); }
.mp-recs-empty { color: #aab2c5; font-size: .95rem; }

/* Botón "Cómo funciona" */
#mp-guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  font-family: 'Fredoka One', cursive;
  font-size: .95rem;
  color: #d5dae6;
  cursor: pointer;
  background: linear-gradient(180deg, #2b3241, #171c26);
  border: 4px solid var(--mp-ink);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--mp-ink);
  white-space: nowrap;
  transition: transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .13s;
}
#mp-guide-toggle:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--mp-ink); }
#mp-guide-toggle:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--mp-ink); }
.mp-guide-toggle-icon {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mp-comic);
  font-size: 1.15rem;
  padding-top: 3px;
  color: var(--mp-ink);
  background: var(--mp-paper);
  border: 3px solid var(--mp-ink);
  border-radius: 50%;
}
#mp-guide-toggle.active { background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark)); color: #1a1200; }

/* ════════════════════════════════════════════════════════════
   GUÍA: tira de cómic (papel blanco = instrucciones)
   ════════════════════════════════════════════════════════════ */
#mp-guide {
  max-width: 1600px;
  margin: 0 auto 22px;
  padding: 20px 20px 18px;
  background: #0b0e14;
  border: 5px solid var(--mp-ink);
  border-radius: 20px;
  box-shadow: 0 9px 0 var(--mp-ink);
  animation: mpGuideIn .28s cubic-bezier(.34,1.4,.64,1) both;
}
#mp-guide[hidden] { display: none; }
@keyframes mpGuideIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }

#mp-guide-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 16px;
  color: var(--mp-ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(8,9,12,.09) 1.2px, transparent 1.5px) 0 0 / 9px 9px,
    var(--mp-paper);
  border: 4px solid var(--mp-ink);
  border-radius: 6px 14px 8px 12px;
  box-shadow: 6px 6px 0 var(--mp-ink);
}
.mp-panel:nth-child(odd)  { transform: rotate(-.8deg); }
.mp-panel:nth-child(even) { transform: rotate(.7deg); }
.mp-panel-num {
  position: absolute;
  top: -16px; left: -12px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding-top: 4px;
  font-family: var(--mp-comic);
  font-size: 1.45rem;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 4px solid var(--mp-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--mp-ink);
  transform: rotate(-10deg);
}
.mp-panel-art {
  align-self: flex-end;
  font-size: 2.1rem;
  line-height: 1;
  margin: -6px -2px -4px 0;
  filter: drop-shadow(2px 2px 0 rgba(8,9,12,.25));
}
.mp-panel strong {
  font-family: 'Fredoka One', cursive;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.15;
}
.mp-panel p {
  font-family: 'Fredoka', sans-serif;
  font-size: .9rem;
  line-height: 1.45;
  color: #2c3140;
}
.mp-panel b { font-weight: 600; color: var(--mp-ink); }

#mp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 3px dashed #232a37;
  font-size: .86rem;
  color: #aab2c5;
}
.mp-legend-title { font-family: 'Fredoka One', cursive; color: #d5dae6; }
.mp-legend-item { display: inline-flex; align-items: center; gap: 8px; }
#mp-legend .mp-stamp { position: static; transform: rotate(-4deg); }

#mp-guide-ok {
  display: block;
  margin: 18px 0 0 auto;
  padding: 9px 20px;
  font-family: 'Fredoka One', cursive;
  font-size: .95rem;
  color: #1a1200;
  cursor: pointer;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border: 4px solid var(--mp-ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--mp-ink);
  transition: transform .1s, box-shadow .1s;
}
#mp-guide-ok:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mp-ink); }

/* ════════════════════════════════════════════════════════════
   BARRA DE FILTROS Y ORDEN
   ════════════════════════════════════════════════════════════ */
#mp-toolbar {
  max-width: 1600px;
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
#mp-status { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 13px;
  font-family: 'Fredoka One', cursive;
  font-size: .88rem;
  color: #aab2c5;
  cursor: pointer;
  background: linear-gradient(180deg, #232a37, #141922);
  border: 3px solid var(--mp-ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--mp-ink);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, color .15s;
}
.mp-status-btn:hover  { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 0 var(--mp-ink); }
.mp-status-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mp-ink); }
.mp-status-btn.active {
  color: #1a1200;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
}
.mp-count {
  min-width: 26px;
  padding: 1px 7px;
  font-size: .78rem;
  text-align: center;
  color: #d5dae6;
  background: #0a0d12;
  border: 2px solid var(--mp-ink);
  border-radius: 999px;
}
.mp-status-btn.active .mp-count { color: var(--mp-yellow); }

#mp-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Fredoka One', cursive;
  font-size: .88rem;
  color: #aab2c5;
}
#mp-sort {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 40px 8px 14px;
  font-family: 'Fredoka One', cursive;
  font-size: .9rem;
  color: #fff;
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, var(--mp-ink) 50%) calc(100% - 18px) 55% / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--mp-ink) 50%) calc(100% - 12px) 55% / 7px 7px no-repeat,
    linear-gradient(90deg, #232a37 0 calc(100% - 32px), var(--mp-yellow) calc(100% - 32px)) ;
  border: 3px solid var(--mp-ink);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--mp-ink);
}
#mp-sort option { background: #141922; color: #fff; }

/* ════════════════════════════════════════════════════════════
   TARJETAS: pegatinas, sellos, estallido, barra por misiones
   ════════════════════════════════════════════════════════════ */
.mastery-card:hover { transform: translateY(-6px) scale(1.02) rotate(-.6deg); }
.mastery-card:nth-child(even):hover { transform: translateY(-6px) scale(1.02) rotate(.6deg); }

.card-mission-count { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-done-count {
  padding: 0 8px;
  font-family: 'Fredoka One', cursive;
  font-size: .72rem;
  color: #6c7488;
  background: #0a0d12;
  border: 2px solid var(--mp-ink);
  border-radius: 999px;
}
.mp-done-count.has-done { color: var(--mp-green); }

.mp-card-chips { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 1px 0 2px; }
.card-progress-wrap { margin-top: auto; padding-top: 2px; }
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 7px;
  font-family: 'Fredoka One', cursive;
  font-size: .74rem;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--mp-ink);
  background: #d5dae6;
  border: 2.5px solid var(--mp-ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--mp-ink);
}
.mp-card-chips .mp-chip:nth-child(1) { transform: rotate(-1.5deg); }
.mp-card-chips .mp-chip:nth-child(2) { transform: rotate(1deg); }
.mp-lvl-1 { background: var(--mp-l1); }
.mp-lvl-2 { background: var(--mp-l2); }
.mp-lvl-3 { background: var(--mp-l3); }
.mp-lvl-4 { background: var(--mp-l4); }
.mp-lvl-5 { background: var(--mp-l5); color: #fff; text-shadow: 1px 1px 0 var(--mp-ink); }
.mp-lvl-6 { background: #2a1440; color: var(--mp-l6); }
.mp-chip.mp-chip-stars {
  padding: 1px 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: .8rem;
  letter-spacing: 1px;
  color: var(--mp-yellow);
  background: #0a0d12;
  text-shadow: 1px 1px 0 var(--mp-ink);
}
.mp-chip.mp-chip-stars.mp-lvl-6 { color: var(--mp-l6); background: #1a0b2a; }

/* Sellos de goma */
.mp-stamp {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 5px 10px 2px;
  font-family: var(--mp-comic);
  font-size: .9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.1;
  border: 3px solid var(--mp-ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--mp-ink);
  transform: rotate(-7deg);
  pointer-events: none;
}
.mp-stamp-deal   { color: var(--mp-ink); background: var(--mp-green); }
/* Etiqueta discreta de la maestría sugerida / la que llevas más avanzada */
.mp-pick {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 3px 10px;
  font-family: 'Fredoka One', cursive;
  font-size: .74rem;
  line-height: 1.3;
  color: #1a1200;
  background: var(--mp-yellow);
  border: 2.5px solid var(--mp-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--mp-ink);
  pointer-events: none;
}
.mp-pick::before { content: '▸ '; }
.mp-pick-cont { background: var(--mp-green); color: var(--mp-ink); }

/* Barra dividida por misiones + progreso de contadores detrás */
.mp-seg { position: relative; }
.mp-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0,
    transparent calc(100% / var(--mp-segs, 1) - 3px),
    var(--mp-ink) calc(100% / var(--mp-segs, 1) - 3px),
    var(--mp-ink) calc(100% / var(--mp-segs, 1)));
}
.mp-bar-ghost {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  z-index: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,215,0,.34) 0 5px, rgba(255,215,0,.16) 5px 10px);
  transition: width .4s ease;
}
.mp-seg .progress-bar-fill,
.mp-seg #missions-overall-bar-fill { position: relative; z-index: 1; }
.mastery-card.completed .mp-bar-ghost { display: none; }

/* Estado vacío con dirección */
#empty-state small {
  display: block;
  margin-top: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: .95rem;
  color: #6c7488;
}
.mp-empty-all {
  display: block;
  margin: 16px auto 0;
  padding: 8px 18px;
  font-family: 'Fredoka One', cursive;
  font-size: .95rem;
  color: #1a1200;
  cursor: pointer;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border: 4px solid var(--mp-ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--mp-ink);
}

/* ════════════════════════════════════════════════════════════
   DETALLE DE MAESTRÍA
   ════════════════════════════════════════════════════════════ */
#detail-header { position: relative; }
#detail-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 8px;
  z-index: 2;
  background: repeating-linear-gradient(45deg, var(--yellow-stripe1, #F0B800) 0 12px, #111 12px 24px);
  border-bottom: 3px solid var(--mp-ink);
  pointer-events: none;
}
#detail-body { padding-top: 8px; grid-template-columns: 400px minmax(0, 1fr); }
#detail-left, #detail-right { min-width: 0; }
@media (max-width: 860px) {
  #detail-body { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  #detail-right { padding-right: 70px; }   /* hueco para los botones flotantes */
}

/* Estado de la maestría */
.mp-status-pill {
  align-self: flex-start;
  margin-top: 6px;
  padding: 2px 11px;
  font-family: 'Fredoka One', cursive;
  font-size: .8rem;
  border: 3px solid var(--mp-ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--mp-ink);
}
.mp-status-pill:empty { display: none; }
.mp-st-fresh    { background: #2b3241; color: #d5dae6; }
.mp-st-progress { background: #ff8c00; color: var(--mp-ink); }
.mp-st-done     { background: var(--mp-green); color: var(--mp-ink); }
.mp-st-hidden   { background: #4fa3ff; color: #06101a; }
.mp-st-locked   { background: #3a3f4c; color: #aab2c5; }

/* Valoración: más gruesa y con ayuda */
#detail-ratings-wrap { position: relative; }
#mp-ratings-help-btn {
  margin-left: 8px;
  padding: 2px 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  color: #d5dae6;
  cursor: pointer;
  background: transparent;
  border: 2px dashed #3a4356;
  border-radius: 999px;
  vertical-align: middle;
  transition: color .15s, border-color .15s;
}
#mp-ratings-help-btn:hover,
#mp-ratings-help-btn[aria-expanded="true"] { color: var(--mp-yellow); border-color: var(--mp-yellow); }
#mp-ratings-help {
  position: relative;
  margin: 12px 0 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #2c3140;
  font-size: .84rem;
  line-height: 1.45;
  background: var(--mp-paper);
  border: 3px solid var(--mp-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--mp-ink);
}
#mp-ratings-help[hidden] { display: none; }
#mp-ratings-help::before {
  content: '';
  position: absolute;
  top: -11px; left: 150px;
  width: 16px; height: 16px;
  background: var(--mp-paper);
  border-left: 3px solid var(--mp-ink);
  border-top: 3px solid var(--mp-ink);
  transform: rotate(45deg);
}
#mp-ratings-help b { color: var(--mp-ink); }
#detail-ratings {
  border: 4px solid var(--mp-ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--mp-ink);
  background: #0f131b;
}
.rating-row { border-bottom-color: #1b212c; }

/* Veredicto: palabra de cómic + bocadillo */
#mp-verdict {
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 26px 14px 12px;
  background: var(--mp-paper);
  border: 4px solid var(--mp-ink);
  border-radius: 14px 14px 14px 4px;
  box-shadow: 5px 5px 0 var(--mp-ink);
}
#mp-verdict[hidden] { display: none; }
#mp-verdict-word {
  position: absolute;
  top: -14px; left: 12px;
  padding: 5px 12px 2px;
  font-family: var(--mp-comic);
  font-size: 1.05rem;
  letter-spacing: .5px;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 3px solid var(--mp-ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--mp-ink);
  transform: rotate(-3deg);
}
#mp-verdict-text { color: #2c3140; font-size: .9rem; line-height: 1.45; }
.mp-verdict-deal   #mp-verdict-word { background: var(--mp-green); }
.mp-verdict-grind  #mp-verdict-word { background: #ff8c00; }

.mp-hint { margin: 6px 0 4px; font-size: .8rem; color: #7d8598; }

/* Cabecera de misiones */
#mp-missions-head-right { display: flex; align-items: center; gap: 10px; }
#mp-missions-pct {
  padding: 2px 10px;
  font-family: 'Fredoka One', cursive;
  font-size: .95rem;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 3px solid var(--mp-ink);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--mp-ink);
}
#mp-missions-pct.is-full { background: var(--mp-green); }
#mp-howto-btn {
  width: 34px; height: 34px;
  padding-top: 3px;
  font-family: var(--mp-comic);
  font-size: 1.1rem;
  color: var(--mp-ink);
  cursor: pointer;
  background: var(--mp-paper);
  border: 3px solid var(--mp-ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--mp-ink);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
#mp-howto-btn:hover { transform: translateY(-2px) rotate(-8deg); }
#mp-howto-btn.active { background: var(--mp-yellow); }
#missions-overall-bar-bg { height: 16px; border-width: 3px; }

/* Cómo apuntar el progreso */
#mp-howto {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: #2c3140;
  background:
    radial-gradient(circle at 1px 1px, rgba(8,9,12,.08) 1.2px, transparent 1.5px) 0 0 / 9px 9px,
    var(--mp-paper);
  border: 4px solid var(--mp-ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--mp-ink);
  flex-shrink: 0;
}
#mp-howto[hidden] { display: none; }
.mp-howto-steps {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mp-howto-steps p { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.4; }
.mp-howto-steps b { color: var(--mp-ink); }
.mp-howto-key {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding-top: 3px;
  font-family: var(--mp-comic);
  font-size: .95rem;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 3px solid var(--mp-ink);
  border-radius: 50%;
}
#mp-howto-ok {
  flex-shrink: 0;
  padding: 7px 16px;
  font-family: 'Fredoka One', cursive;
  font-size: .9rem;
  color: #1a1200;
  cursor: pointer;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border: 3px solid var(--mp-ink);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--mp-ink);
}
#mp-howto-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mp-ink); }

/* Filas de misión: tipo, lo que falta, botones rápidos */
.mission-row { position: relative; }
.mission-bg { padding: 13px 16px; gap: 14px; }
.mission-check { width: 36px; height: 36px; font-size: 1.3rem; }
.mission-text { font-size: 1.02rem; }

.mp-mission-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: -1px;
}
.mp-left { font-size: .8rem; font-weight: 600; color: #c7b98a; }
.mp-left.is-done { color: var(--mp-green); }

.mission-input-wrap { flex-wrap: wrap; gap: 6px 8px; margin-top: 3px; }
.mission-counter-input { width: 104px; font-size: .95rem; padding: 5px 8px; }
.mp-bumps { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.mp-bump {
  min-width: 44px;
  padding: 4px 9px;
  font-family: 'Fredoka One', cursive;
  font-size: .82rem;
  color: #1a1200;
  cursor: pointer;
  background: linear-gradient(180deg, var(--yellow-bright), var(--yellow-dark));
  border: 3px solid var(--mp-ink);
  border-radius: 9px;
  box-shadow: 0 3px 0 var(--mp-ink);
  transition: transform .08s, box-shadow .08s;
}
.mp-bump:hover  { filter: brightness(1.08); }
.mp-bump:active { transform: translateY(3px); box-shadow: 0 0 0 var(--mp-ink); }
.mp-bump-minus  { color: #d5dae6; background: linear-gradient(180deg, #2b3241, #171c26); }
.mission-row.done .mp-bump:not(.mp-bump-minus) { opacity: .45; }

/* La misión más cerca de terminarse */
.mission-row.mp-next {
  box-shadow: 0 5px 0 var(--mp-ink), 0 0 0 3px var(--mp-yellow), 0 0 22px rgba(255,215,0,.3);
}
.mission-row.mp-next::after {
  content: 'La más cerca';
  position: absolute;
  top: 8px; right: 10px;
  padding: 2px 9px 0;
  font-family: var(--mp-comic);
  font-size: .78rem;
  color: var(--mp-ink);
  background: var(--mp-yellow);
  border: 2.5px solid var(--mp-ink);
  border-radius: 7px;
  box-shadow: 2px 2px 0 var(--mp-ink);
  transform: rotate(3deg);
  pointer-events: none;
}
.mission-row.mp-next .mission-text { padding-right: 112px; }

.mission-counter-label.mp-pop { animation: mpPop .28s cubic-bezier(.34,1.8,.64,1); }
@keyframes mpPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Mejoras del guante un poco más contundentes */
.upgrade-item {
  border: 3px solid var(--mp-ink);
  border-radius: 11px;
  box-shadow: 0 3px 0 var(--mp-ink);
  background: linear-gradient(180deg, #13301a, #0b1d10);
}

/* ════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ════════════════════════════════════════════════════════════ */
.mp-status-btn:focus-visible, #mp-sort:focus-visible, .mp-rec:focus-visible,
#mp-guide-toggle:focus-visible, #mp-guide-ok:focus-visible, .mp-bump:focus-visible,
.mission-check:focus-visible, #mp-howto-btn:focus-visible, #mp-howto-ok:focus-visible,
#mp-ratings-help-btn:focus-visible, .mp-empty-all:focus-visible,
.mastery-card .btn:focus-visible {
  outline: 3px solid var(--mp-yellow);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  #mp-guide { animation: none; }
  #mp-track-fill, #mp-track-hand { transition: none; }
  .mission-counter-label.mp-pop { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  #mp-board { grid-template-columns: 1fr auto; }
  #mp-recs  { grid-column: 1 / -1; grid-row: 2; }
  #mp-guide-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 860px) {
  .mp-howto-steps { grid-template-columns: 1fr; gap: 6px; }
  #mp-howto { flex-direction: column; align-items: stretch; }
  #mp-howto-ok { align-self: flex-end; }
}
@media (max-width: 640px) {
  #mp-board { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  #mp-guide-toggle { justify-self: start; grid-row: 3; }
  #mp-track-count { font-size: 1.6rem; }
  #mp-guide { padding: 20px 14px 14px; }
  #mp-guide-strip { grid-template-columns: 1fr; }
  #mp-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  #mp-status { min-width: 0; }
  #mp-status { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; }
  .mp-status-btn { flex-shrink: 0; }
  #mp-sort-wrap { justify-content: space-between; }
  #mp-sort { flex: 1; }
  .mission-row.mp-next::after { top: auto; bottom: 8px; }
  .mission-row.mp-next .mission-text { padding-right: 0; }
  #mp-missions-head-right { gap: 6px; }
  #detail-header { gap: 12px; }
  #detail-title { font-size: 1.3rem; line-height: 1.15; }
  #btn-close-detail { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════
   ANIMACIONES DE COMPLETADO
   ════════════════════════════════════════════════════════════ */

/* ── Misión completada: golpe en la fila + "¡HECHA!" ── */
.mission-row.mp-hit { animation: mpRowSlam .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes mpRowSlam {
  0%   { transform: translateX(0) scale(1); }
  18%  { transform: translateX(-7px) scale(.975, 1.04); }
  38%  { transform: translateX(6px) scale(1.02, .97); }
  60%  { transform: translateX(-3px) scale(1); }
  100% { transform: none; }
}
.mission-row.mp-hit .mission-check { animation: mpCheckStamp .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes mpCheckStamp {
  0%   { transform: scale(1.9) rotate(-18deg); }
  100% { transform: scale(1) rotate(0); }
}
.mp-hit-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 34px 50%, rgba(255,255,255,.85), rgba(57,255,20,.35) 30%, transparent 65%);
  animation: mpFlash .55s ease-out forwards;
}
@keyframes mpFlash { from { opacity: 1; } to { opacity: 0; } }
.mp-hit-burst {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 var(--mp-ink));
  animation: mpHitBurst .95s cubic-bezier(.2,1.5,.4,1) forwards;
}
.mp-hit-burst::before,
.mp-hit-burst::after {
  content: '';
  position: absolute;
  clip-path: polygon(50% 0%, 59% 22%, 79% 7%, 75% 31%, 100% 30%, 82% 48%, 98% 66%, 74% 67%, 80% 92%, 59% 78%, 50% 100%, 41% 78%, 20% 92%, 26% 67%, 2% 66%, 18% 48%, 0% 30%, 25% 31%, 21% 7%, 41% 22%);
}
.mp-hit-burst::before { inset: 0; background: var(--mp-ink); }
.mp-hit-burst::after  { inset: 6px; background: var(--mp-green); }
.mp-hit-burst span {
  position: relative;
  z-index: 1;
  padding-top: 4px;
  font-family: var(--mp-comic);
  font-size: .82rem;
  line-height: 1;
  text-align: center;
  color: var(--mp-ink);
  transform: rotate(-12deg);
}
@keyframes mpHitBurst {
  0%   { opacity: 0; transform: scale(.2) rotate(-40deg); }
  22%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  38%  { transform: scale(1) rotate(-4deg); }
  75%  { opacity: 1; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(.85) translateY(-14px) rotate(-8deg); }
}

/* ── Cinemática: capas añadidas sobre mastery-complete ── */
#mastery-complete-overlay.mpc-on #mastery-complete-stage {
  outline: 5px solid var(--mp-ink);
}
#mpc-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190vmax;
  height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  pointer-events: none;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,215,0,.17) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 48%);
          mask-image: radial-gradient(circle, #000 8%, transparent 48%);
  transition: opacity .5s ease;
}
#mpc-rays.on { opacity: 1; animation: mpcSpin 14s linear infinite; }
@keyframes mpcSpin { to { transform: rotate(360deg); } }

#mpc-word {
  position: absolute;
  left: 4%;
  top: 5%;
  z-index: 12;
  display: flex;
  transform-origin: 20% 30%;
  pointer-events: none;
  opacity: 0;
}
#mpc-word span {
  font-family: var(--mp-comic);
  font-size: clamp(1.7rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--mp-yellow);
  -webkit-text-stroke: 7px var(--mp-ink);
  paint-order: stroke fill;
  text-shadow: 0 7px 0 var(--mp-ink);
  transform: rotate(-8deg);
}
#mpc-word.on { animation: mpcStamp .5s cubic-bezier(.2,1.7,.35,1) forwards; }
@keyframes mpcStamp {
  0%   { opacity: 0; transform: scale(3.2) rotate(-14deg); }
  45%  { opacity: 1; transform: scale(.92) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

#mastery-complete-stage.mpc-shake { animation: mpcShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes mpcShake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(5px, -3px) rotate(.4deg); }
  30%, 50%, 70% { transform: translate(-9px, 4px) rotate(-.6deg); }
  40%, 60% { transform: translate(9px, -4px) rotate(.6deg); }
}

#mpc-bits { position: absolute; inset: 0; pointer-events: none; }
.mpc-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(14px * var(--s, 1));
  height: calc(14px * var(--s, 1));
  background: var(--c);
  border: 3px solid var(--mp-ink);
  border-radius: 3px;
  opacity: 0;
  animation: mpcFly 1.25s cubic-bezier(.15,.7,.3,1) forwards;
}
.mpc-bit.star {
  width: calc(24px * var(--s, 1));
  height: calc(24px * var(--s, 1));
  border: none;
  background: var(--mp-ink);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mpc-bit.star::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--c);
  clip-path: inherit;
}
@keyframes mpcFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

#mpc-card {
  position: absolute;
  left: 50%;
  width: min(520px, 90vw);
  padding: 14px 18px 12px;
  color: #2c3140;
  text-align: left;
  pointer-events: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(8,9,12,.08) 1.2px, transparent 1.5px) 0 0 / 9px 9px,
    var(--mp-paper);
  border: 4px solid var(--mp-ink);
  border-radius: 8px 16px 10px 14px;
  box-shadow: 6px 6px 0 var(--mp-ink);
  opacity: 0;
  transform: translate(-50%, 30px) rotate(-1deg);
}
#mpc-card.on { animation: mpcCardIn .45s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes mpcCardIn {
  to { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
}
.mpc-card-head {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: var(--mp-ink);
  margin-bottom: 6px;
}
#mpc-card ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
#mpc-card li {
  position: relative;
  padding-left: 22px;
  font-size: .9rem;
  line-height: 1.4;
}
#mpc-card li::before {
  content: '+';
  position: absolute;
  left: 2px; top: -2px;
  font-family: var(--mp-comic);
  font-size: 1.15rem;
  color: #16a34a;
}
.mpc-card-more { margin-top: 5px; font-size: .8rem; color: #6c7488; }
.mpc-card-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 3px dashed #d5dae6;
  font-family: 'Fredoka One', cursive;
  font-size: .85rem;
  color: #6c7488;
}

/* ── Aterrizaje de la estrella en la barra global ── */
#mp-track.mp-land #mp-track-hand { animation: mpHandCatch .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes mpHandCatch {
  0%   { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  30%  { transform: translate(-50%, -50%) rotate(-35deg) scale(1.45); }
  100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}
#mp-track.mp-land #mp-track-count { animation: mpCountBump .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes mpCountBump { 30% { transform: scale(1.3) rotate(-4deg); } }
#mp-track-count { display: inline-block; }
.mp-plus-one {
  position: absolute;
  top: -8px;
  z-index: 3;
  font-family: var(--mp-comic);
  font-size: 1.4rem;
  color: var(--mp-green);
  -webkit-text-stroke: 4px var(--mp-ink);
  paint-order: stroke fill;
  pointer-events: none;
  animation: mpPlusOne 1.05s ease-out forwards;
}
@keyframes mpPlusOne {
  0%   { opacity: 0; transform: translate(26px, 0) scale(.4); }
  25%  { opacity: 1; transform: translate(26px, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(34px, -30px) scale(1); }
}

/* Tarjeta recién completada en el grid */
.mastery-card.mp-fresh-done { animation: mpCardSlam .7s cubic-bezier(.2,1.6,.4,1) !important; }
.mastery-card.mp-fresh-done .mastered-ribbon { animation: mpRibbonIn .5s cubic-bezier(.2,1.6,.4,1); }
.mastery-card.mp-fresh-done .completed-badge { animation: mpCheckStamp .5s cubic-bezier(.2,1.8,.4,1) .15s both; }
@keyframes mpCardSlam {
  0%   { transform: scale(1); box-shadow: 0 9px 0 var(--mp-ink), 0 0 0 rgba(57,255,20,0); }
  25%  { transform: scale(1.05) rotate(-1.2deg); box-shadow: 0 9px 0 var(--mp-ink), 0 0 50px rgba(57,255,20,.7); }
  100% { transform: scale(1); }
}
@keyframes mpRibbonIn {
  0%   { transform: rotate(-45deg) scale(2.2); opacity: 0; }
  100% { transform: rotate(-45deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-row.mp-hit, .mission-row.mp-hit .mission-check,
  #mpc-rays.on, #mpc-word.on, .mpc-bit, #mastery-complete-stage.mpc-shake,
  #mp-track.mp-land #mp-track-hand, .mp-plus-one, .mastery-card.mp-fresh-done { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════
   DETALLE MÁS VIVO
   ════════════════════════════════════════════════════════════ */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

/* Fondo ambiental con el banner de cada maestría */
#detail-view { overflow: hidden; }
#mp-ambient {
  position: absolute;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  background: center / cover no-repeat;
  filter: blur(60px) saturate(1.4);
  opacity: .2;
  transition: background-image .3s;
}
#detail-header, #detail-body { position: relative; z-index: 1; }
#detail-left  { background: rgba(18, 22, 31, .84); }
#detail-right { background: rgba(12, 15, 22, .72); }

/* Cambio de maestría con las flechas */
#detail-body.mp-swap-next { animation: mpSwapNext .34s cubic-bezier(.2,1,.4,1); }
#detail-body.mp-swap-prev { animation: mpSwapPrev .34s cubic-bezier(.2,1,.4,1); }
@keyframes mpSwapNext { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes mpSwapPrev { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }

/* Flechas de la cabecera */
#detail-header { gap: 14px; }
#detail-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mp-dnav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mp-dnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
  padding: 6px 12px;
  font-family: 'Fredoka One', cursive;
  font-size: .85rem;
  color: #d5dae6;
  cursor: pointer;
  background: linear-gradient(180deg, #2b3241, #171c26);
  border: 3px solid var(--mp-ink);
  border-radius: 11px;
  box-shadow: 0 4px 0 var(--mp-ink);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s, color .15s;
}
.mp-dnav-btn:hover { color: var(--mp-yellow); transform: translateY(-2px); box-shadow: 0 6px 0 var(--mp-ink); }
.mp-dnav-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mp-ink); }
.mp-dnav-btn:disabled { opacity: .35; pointer-events: none; }
.mp-dnav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-dnav-arrow { font-size: .75rem; color: var(--mp-yellow); }
#mp-dnav-pos {
  min-width: 58px;
  text-align: center;
  font-family: 'Fredoka One', cursive;
  font-size: .8rem;
  color: #7d8598;
}

/* Banner con efecto 3D */
#detail-left { perspective: 900px; }
#detail-banner-wrap {
  transform: rotateX(var(--mp-rx, 0deg)) rotateY(var(--mp-ry, 0deg));
  transition: transform .45s cubic-bezier(.2,1,.3,1);
  transform-style: preserve-3d;
}
#detail-banner-wrap.mp-tilting { transition: transform .08s linear; }
#mp-banner-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mp-sx, 50%) var(--mp-sy, 50%), rgba(255,255,255,.35), transparent 55%);
  mix-blend-mode: soft-light;
  transition: opacity .3s;
}
#detail-banner-wrap.mp-tilting #mp-banner-shine { opacity: 1; }

/* Último avance */
#mp-activity {
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: #7d8598;
}
#mp-activity::before { content: '📅 '; }

/* Puntos de control alineados con los tramos de la barra */
#missions-overall-bar-wrap { position: relative; }
#mp-route {
  display: grid;
  grid-template-columns: repeat(var(--mp-segs, 1), minmax(0, 1fr));
  margin-top: 10px;
}
#mp-route:empty { display: none; }
.mp-node {
  justify-self: center;
  position: relative;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.mp-node::before {           /* palito que une el punto con su tramo */
  content: '';
  position: absolute;
  left: 50%; top: -10px;
  width: 3px; height: 10px;
  margin-left: -1.5px;
  background: var(--mp-ink);
}
.mp-node-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 3px solid var(--mp-ink);
  box-shadow: 0 4px 0 var(--mp-ink);
  background: conic-gradient(var(--mp-yellow) calc(var(--p) * 1%), #0a0d12 0);
  transition: --p .7s cubic-bezier(.3,1,.4,1), transform .15s cubic-bezier(.34,1.56,.64,1);
}
.mp-node.done .mp-node-ring { background: conic-gradient(var(--mp-green) calc(var(--p) * 1%), #0a0d12 0); }
.mp-node-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #141922;
  border: 2.5px solid var(--mp-ink);
  font-family: 'Fredoka One', cursive;
  font-size: .72rem;
  color: #d5dae6;
}
.mp-node.done .mp-node-in { background: var(--mp-green); color: var(--mp-ink); font-size: 1rem; }
.mp-node:hover .mp-node-ring { transform: translateY(-3px) rotate(-6deg); }
.mp-node:focus-visible { outline: 3px solid var(--mp-yellow); outline-offset: 3px; border-radius: 50%; }

.mission-row.mp-focus { animation: mpFocusRow 1.1s ease-out; }
@keyframes mpFocusRow {
  0%, 40% { box-shadow: 0 5px 0 var(--mp-ink), 0 0 0 4px var(--mp-yellow), 0 0 30px rgba(255,215,0,.5); }
  100%    { box-shadow: 0 5px 0 var(--mp-ink); }
}

/* Barras de misión arrastrables */
.mission-bar-bg.mp-draggable {
  position: relative;
  height: 14px;
  overflow: visible;
  cursor: ew-resize;
  touch-action: none;
}
.mission-bar-bg.mp-draggable .mission-bar-fill { position: relative; border-radius: 4px; }
.mission-bar-bg.mp-draggable .mission-bar-fill::after {
  content: '';
  position: absolute;
  right: -10px; top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  background: var(--mp-paper);
  border: 3px solid var(--mp-ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--mp-ink);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.mission-row:hover .mission-bar-bg.mp-draggable .mission-bar-fill::after,
.mission-row.mp-dragging .mission-bar-bg.mp-draggable .mission-bar-fill::after { opacity: 1; transform: scale(1); }
.mission-row.mp-dragging .mission-bar-fill { transition: none; }
.mission-row.mp-dragging { transform: none !important; }

.mp-today {
  font-family: 'Fredoka One', cursive;
  font-size: .72rem;
  color: var(--mp-green);
}
.mp-today:empty { display: none; }

/* Recompensa: guante normal ➜ mastered */
#detail-right > #detail-upgrades-wrap {
  margin-top: 10px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(30,36,48,.9), rgba(18,22,31,.9));
  border: 4px solid var(--mp-ink);
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--mp-ink);
  flex-shrink: 0;
}
#detail-upgrades-list { display: flex; flex-direction: column; gap: 8px; }
#mp-reward { margin: 10px 0 14px; }
#mp-reward-text {
  flex: 1;
  min-width: 190px;
  font-size: .88rem;
  line-height: 1.45;
  color: #aab2c5;
}
#mp-reward-text b { color: var(--mp-yellow); font-family: 'Fredoka One', cursive; font-weight: 400; }
#mp-reward.is-open #mp-reward-text b { color: var(--mp-green); }
.upgrade-item { position: relative; transition: opacity .2s; }
.upgrade-item.mp-up-locked { background: linear-gradient(180deg, #1b212c, #12161f); color: #aab2c5; padding-right: 40px; }
.upgrade-item.mp-up-locked .upgrade-bullet { color: #6c7488; }
.upgrade-item.mp-up-locked::after {
  content: '🔒';
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  opacity: .8;
}

/* Entrada animada al abrir una ficha */
.mp-enter #detail-banner-wrap { animation: mpEnterBanner .5s cubic-bezier(.2,1.3,.4,1) both; }
.mp-enter #detail-glove-img-wrap { animation: mpEnterGlove .55s cubic-bezier(.2,1.8,.4,1) .12s both; }
.mp-enter .rbar.lit .rbar-fill { animation: mpBarUp .35s cubic-bezier(.2,1.5,.4,1) both; transform-origin: bottom; }
.mp-enter .rbar[data-v="1"] .rbar-fill { animation-delay: .25s; }
.mp-enter .rbar[data-v="2"] .rbar-fill { animation-delay: .32s; }
.mp-enter .rbar[data-v="3"] .rbar-fill { animation-delay: .39s; }
.mp-enter .rbar[data-v="4"] .rbar-fill { animation-delay: .46s; }
.mp-enter .rbar[data-v="5"] .rbar-fill { animation-delay: .53s; }
.mp-enter #rbars-worth .rbar.lit { animation: mpStarPop .4s cubic-bezier(.2,1.8,.4,1) both; }
.mp-enter #rbars-worth .rbar[data-v="1"] { animation-delay: .55s; }
.mp-enter #rbars-worth .rbar[data-v="2"] { animation-delay: .62s; }
.mp-enter #rbars-worth .rbar[data-v="3"] { animation-delay: .69s; }
.mp-enter #rbars-worth .rbar[data-v="4"] { animation-delay: .76s; }
.mp-enter #rbars-worth .rbar[data-v="5"] { animation-delay: .83s; }
.mp-enter #mp-verdict-word { animation: mpcStamp .45s cubic-bezier(.2,1.7,.35,1) .8s both; }
.mp-enter .mp-node-ring { animation: mpStarPop .4s cubic-bezier(.2,1.8,.4,1) both; }
.mp-enter .mp-node:nth-child(2) .mp-node-ring { animation-delay: .06s; }
.mp-enter .mp-node:nth-child(3) .mp-node-ring { animation-delay: .12s; }
.mp-enter .mp-node:nth-child(4) .mp-node-ring { animation-delay: .18s; }
.mp-enter .mp-node:nth-child(5) .mp-node-ring { animation-delay: .24s; }
@keyframes mpEnterBanner { from { opacity: 0; transform: translateY(18px) rotate(-2deg) scale(.96); } }
@keyframes mpEnterGlove  { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes mpBarUp       { from { transform: scaleY(0); } }
@keyframes mpStarPop     { from { transform: scale(0) rotate(-30deg); } }

/* Responsive y accesibilidad */
@media (max-width: 1100px) {
  .mp-dnav-name { display: none; }
  .mp-dnav-btn { padding: 6px 10px; }
}
@media (max-width: 640px) {
  #detail-title { white-space: normal; overflow: visible; }
  #mp-dnav-pos { display: none; }
  #mp-dnav { gap: 5px; }
  .mp-node-ring { width: 42px; height: 42px; }
  .mp-node-in { width: 28px; height: 28px; font-size: .62rem; }
  #mp-reward-text { min-width: 100%; }
}
.mp-dnav-btn:focus-visible { outline: 3px solid var(--mp-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #detail-body.mp-swap-next, #detail-body.mp-swap-prev, .mission-row.mp-focus { animation: none; }
  #detail-banner-wrap { transform: none !important; }
  .mp-node-ring { transition: none; }
}