/* ==========================================================
   themes.css — temas por destino
   (los colores llegan como variables desde js/themes.js)
   ========================================================== */

/* papel de fondo con el motivo del destino */
#app[data-theme]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--th-pattern);
  background-color: color-mix(in srgb, var(--pink-l) 55%, transparent);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.25) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.25) 100%);
}

/* ---------- escena pixel (cabecera) ---------- */
.theme-banner {
  position: relative; overflow: hidden; height: 168px; margin: 0 0 -26px; padding: 0 18px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.7) 0 6%, transparent 22%),
    linear-gradient(180deg, var(--sky1), var(--sky2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px var(--line);
  image-rendering: pixelated;
}
.tb-scene {
  position: absolute; left: 0; right: 0; bottom: 44px; display: flex; align-items: flex-end; justify-content: space-evenly; gap: 10px;
  padding: 0 4%;
}
.tb-item { display: block; flex: none; animation: tb-pop .5s steps(4) backwards; animation-delay: calc(var(--d) * 90ms); }
.tb-item .px { width: 100%; height: auto; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .18)); }
.tb-item.floaty { animation: tb-pop .5s steps(4) backwards, tb-drift 6s steps(6) infinite alternate; animation-delay: calc(var(--d) * 90ms), 0s; }
@keyframes tb-pop { from { transform: translateY(14px); opacity: 0; } }
@keyframes tb-drift { to { transform: translateX(18px); } }
.tb-ground {
  position: absolute; left: 0; right: 0; bottom: 30px; height: 16px;
  background: repeating-linear-gradient(90deg, var(--ground) 0 8px, color-mix(in srgb, var(--ground) 80%, #000) 8px 16px);
  box-shadow: 0 -3px 0 color-mix(in srgb, var(--ground) 70%, #fff);
}
.tb-tag {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; margin: 0; display: flex; gap: 40px; align-items: center; overflow: hidden; white-space: nowrap;
  background: var(--tc-d); color: #fff; font-family: "Silkscreen", monospace; font-size: 11px; letter-spacing: .16em;
}
.tb-tag span { flex: none; animation: marquee 18s linear infinite; padding-left: 20px; }
.theme-banner + .pass-hero { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.theme-banner + .pass-hero::before { display: none; }

/* ---------- tarjeta de embarque temática ---------- */
.pass.themed .pass-top { background: linear-gradient(90deg, var(--tc), color-mix(in srgb, var(--tc) 70%, var(--tc-d))); color: #fff; }
.pass.themed .pass-air, .pass.themed .pass-kind { color: #fff; }
.pass.themed .pass-kind { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.pass.themed .pass-menu { background: rgba(255,255,255,.2); color: #fff; }
.pass.themed .pass-menu:hover { background: rgba(255,255,255,.4); }
.pass.themed .pass-code b { color: var(--tc); text-shadow: 3px 3px 0 color-mix(in srgb, var(--tc-d) 22%, transparent); }
.pass.themed .pass-stub { background-color: var(--tc-l); background-image: var(--th-pattern); }
.pass.themed .pass-main { background: linear-gradient(165deg, var(--card) 60%, var(--tc-l)); }

/* acentos que heredan el tema dentro del viaje */
#app[data-theme] .status-msg { color: var(--tc-d); }
#app[data-theme] .h-sub i, #app[data-theme] .kicker i { color: var(--pink); }
#app[data-theme] .tab.on { color: var(--tc-d); }
.packmode[data-theme] { background-image: var(--th-pattern), radial-gradient(70vw 60vh at 0% 0%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 70%), radial-gradient(60vw 60vh at 100% 30%, color-mix(in srgb, var(--sky) 30%, transparent), transparent 70%); background-color: var(--pink-l); }
.packmode[data-theme] .pm-kicker { color: var(--tc-d); }

@media (max-width: 640px) {
  .theme-banner { height: 132px; margin-bottom: -22px; padding: 0 8px; }
  .tb-scene { bottom: 40px; gap: 4px; }
  .tb-ground { bottom: 28px; height: 12px; }
  .tb-tag { height: 28px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tb-item, .tb-tag span { animation: none !important; } }
.theme-banner { margin-bottom: 0 !important; }
.theme-banner + .pass-hero { border-top-left-radius: 0; border-top-right-radius: 0; }

/* cada dibujo se escala por su tamaño real en píxeles (todos con el mismo "píxel") */
.theme-banner { --k: 1; }
.tb-item { width: calc(var(--w) * var(--u) * var(--k)); }
.px-l { --u: 5px; }
.px-m { --u: 4px; }
.px-s { --u: 3px; align-self: center; margin-bottom: 36px; }
.px-w { --u: 4px; align-self: flex-start; margin-bottom: 78px; }
@media (max-width: 640px) {
  .theme-banner { --k: .7; }
  .px-w { margin-bottom: 58px; }
  .px-s { margin-bottom: 26px; }
}
@media (min-width: 1021px) { .theme-banner { --k: 1.25; height: 190px; } .px-w { margin-bottom: 96px; } }