/* magic-collection.css — "Magic Collection Edition": capa visual coleccionable/celeste.
   Adaptada a las clases reales de la app (.sidemenu, .sub-header, .frame) y sin pisar body.app-shell.
   Para quitarla: borra su <link> en index.html. */

/* ================================================================
   POXTAL — MAGIC COLLECTION EDITION
   Visual layer only: collectible / celestial / luminous
   ================================================================ */
:root {
  --px-magic-violet: #7653e8;
  --px-magic-violet-2: #a18cff;
  --px-magic-lilac: #eee9ff;
  --px-magic-gold: #ffd86b;
  --px-magic-gold-2: #fff1ad;
  --px-magic-paper: #fffdfb;
  --px-magic-ink: #352b52;
  --px-magic-line: rgba(118,83,232,.16);
  --px-magic-glow: rgba(118,83,232,.23);
}

html, body { background: #faf8ff; }
body {
  background:
    #faf8ff;
}

/* A subtle celestial field, kept extremely light so text remains crisp. */
.frame {
  background-image:
    none;
}

.topbar, .sub-header {
  border-bottom: 1px solid var(--px-magic-line);
  box-shadow: 0 8px 28px rgba(69,49,120,.06);
}

/* Collection cards: soft paper + precious-object depth. */
.choice-card,
.card3,
.sheet-card,
.modal-card,
.passport-sheet,
.flip-card,
.circle-approval-card {
  border: 1px solid rgba(118,83,232,.14);
  box-shadow:
    0 2px 0 rgba(255,255,255,.95) inset,
    0 16px 42px rgba(72,51,132,.08),
    0 2px 7px rgba(72,51,132,.05);
  background:
    rgba(255,255,255,.98);
}

.choice-card,
.flip-card,
.stamp-rect-wrap,
.stamp-grid,
.passport-tile-icon {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}

/* v38: .flip-card:hover competía en especificidad con .flip-card.flipped (que gira la tarjeta
   para mostrar el reverso) y ganaba por cargarse después — en el teléfono, un toque deja el estado
   :hover "pegado", así que la tarjeta nunca terminaba de mostrar el reverso ni STICK quedaba
   tocable de verdad, aunque display:flex ya estuviera puesto. Se excluye .flipped explícitamente. */
.choice-card:hover,
.flip-card:hover:not(.flipped),
.stamp-rect-wrap:hover,
.passport-tile-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(118,83,232,.28);
  box-shadow:
    0 0 0 1px rgba(255,216,107,.22),
    0 16px 36px rgba(72,51,132,.11),
    0 0 26px rgba(161,140,255,.16);
}

/* Las estrellas ✦ (::after) se posicionan respecto a cada sello */
.stamp-rect-wrap, .stamp-grid { position: relative; }

/* Make stamps feel like things worth obtaining. */
.stamp-ring,
.stamp-rect,
.stamp-rect-wrap,
.stamp-onphoto {
  filter: drop-shadow(0 5px 8px rgba(76,52,130,.12));
}

.stamp-ring {
  box-shadow:
    0 0 0 1px rgba(118,83,232,.16),
    0 0 0 5px rgba(255,255,255,.78),
    0 8px 22px rgba(118,83,232,.12),
    0 0 24px rgba(255,216,107,.13);
}

.stamp-grid {
  position: relative;
  overflow: hidden;
  background: #fffefa;
}

.stamp-grid::after,
.stamp-rect-wrap::after {
  content: "✦";
  position: absolute;
  right: 9px;
  top: 7px;
  font-size: 10px;
  color: rgba(255,193,44,.78);
  text-shadow: 0 0 8px rgba(255,216,107,.75);
  pointer-events: none;
}

/* Passport becomes an album/object rather than a plain data sheet. */
.passport-sheet {
  position: relative;
  overflow: hidden;
  background:
    #fffefa;
}

.passport-sheet::before {
  content: "✦  ✧  ✦";
  position: absolute;
  top: 9px;
  right: 14px;
  color: rgba(118,83,232,.22);
  letter-spacing: 7px;
  font-size: 9px;
  pointer-events: none;
}

.passport-tile-icon {
  background: #fff;
  border: 1px solid rgba(118,83,232,.14);
  box-shadow: 0 8px 22px rgba(72,51,132,.08);
}

/* Hero: invitación coleccionable. CORRECCIÓN: la versión original lo dejaba casi blanco con texto blanco
   (ilegible) y quitaba el degradado violeta del bandeau; aquí se conserva el violeta y solo se suman brillos. */
.hero-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background:
    var(--violet-deep);
  box-shadow: 0 18px 40px rgba(30,27,46,.30), inset 0 1px 0 rgba(255,255,255,.14);
}

.hero-banner::after {
  content: "✦  ·  ✧  ·  ✦";
  position: absolute;
  right: 18px;
  bottom: 13px;
  color: rgba(255,241,173,.6);
  letter-spacing: 5px;
  font-size: 9px;
  pointer-events: none;
}

.hero-banner-cta,
button.primary,
.btn-primary {
  box-shadow:
    0 7px 18px rgba(255,194,49,.20),
    0 0 0 1px rgba(255,255,255,.62) inset;
}

/* Active controls read as magical energy, not simply selected states. */
.navbtn,
.icon-btn,
.thumb-menu-btn,
.thumb-share-badge,
button {
  -webkit-tap-highlight-color: transparent;
}

.navbtn.active,
.navbtn:active,
.icon-btn:active,
.thumb-menu-btn:active,
.thumb-share-badge:active {
  filter: drop-shadow(0 0 9px rgba(118,83,232,.42));
}

.navbtn.active svg,
.navbtn-center svg,
.icon-btn:active svg,
.navbtn:active svg {
  filter: drop-shadow(0 0 7px rgba(118,83,232,.48));
}

/* CORRECCIÓN: el halo iba sobre el <button> (rectangular) y dibujaba un cuadro blanco detrás del "+";
   ahora va sobre el círculo interior. */
.navbtn-center { box-shadow: none; }
.navbtn-center span {
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 7px 22px rgba(118,83,232,.20),
    0 0 26px rgba(255,216,107,.28);
}
.navbtn-center:active { transform: scale(.95); box-shadow: none; }
.navbtn-center:active span {
  box-shadow:
    0 0 0 4px rgba(255,255,255,.96),
    0 5px 18px rgba(118,83,232,.26),
    0 0 34px rgba(255,216,107,.50);
}

/* Side menu: luminous archive / cabinet feeling. */
.sidemenu {
  background:
    #7856df;
  box-shadow: 12px 0 44px rgba(49,34,99,.17);
}

.sidemenu svg {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.28));
}

/* Small labels become collectible metadata. */
.stamps-strip-head,.hero-banner-tag,.badge,.chip,.tab{
  letter-spacing: .055em;
}

/* Gentle shimmer for elements already carrying a glow. */
@keyframes poxtal-magic-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,216,107,.15)); }
  50% { filter: drop-shadow(0 0 9px rgba(255,216,107,.34)); }
}

[data-new="true"] .stamp-ring,[data-new="true"] .stamp-rect{
  animation: poxtal-magic-pulse 2.8s ease-in-out infinite;
}

/* Keep motion elegant and accessible. */
@media (prefers-reduced-motion: reduce) {
  .choice-card,
  .flip-card,
  .stamp-rect-wrap,
  .stamp-grid,
  .passport-tile-icon,
  .navbtn-center { transition: none; }
  [data-new="true"] .stamp-ring,[data-new="true"] .stamp-rect{ animation: none; }
}