/* El Espejo Encantado — lo que rodea al espejo: barra de arriba (Detalles y sonido), el HUECO del espejo (la escena 3D
   lo encuadra ahí), el texto de luz con el que "habla", las 7 gemas del marco (botones invisibles sobre las gemas 3D),
   la tarjeta de cada reflejo (abajo, sin tapar el espejo) y la manita de ayuda. */
.ee .topbar { position: absolute; left: 10px; right: 10px; top: calc(8px + var(--safe-t)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.ee .topbar > * { pointer-events: auto; }
.ee .book-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid rgba(var(--ee-gold-rgb), .7); border-radius: 999px; background: rgba(24, 17, 46, .82); color: var(--ink); font: 700 16px/1 var(--font-head); cursor: pointer; }
.ee .book-btn span:first-child { display: grid; color: var(--ee-gold); }

/* hueco del espejo: de la barra de arriba a la tarjeta (sólo se mide; no recibe toques) */
.ee .mirror-slot { position: absolute; left: 8px; right: 8px; top: calc(54px + var(--safe-t)); bottom: 42%; pointer-events: none !important; }

/* el espejo habla: palabras que aparecen escritas con luz, una tras otra */
.ee .speech { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none !important; }
.ee .speech p { margin: 0; font: italic 700 clamp(16px, 2.2vh, 20px)/1.2 var(--font-head); color: #FFFBF2; text-shadow: 0 0 10px rgba(var(--ee-magic-rgb), .9), 0 0 3px rgba(255, 255, 255, .9), 0 1px 2px rgba(10, 6, 24, .9); }
/* (sin filter: blur — sobre el lienzo WebGL costaba cuadros de 50–70 ms; opacidad y un leve ascenso bastan) */
.ee .speech span { display: inline-block; white-space: pre; opacity: 0; transform: translateY(5px) scale(.94); }
.ee .speech.is-on span { animation: ee-write .7s ease forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes ee-write { 60% { opacity: .85; } to { opacity: 1; transform: none; } }
.ee.rm .speech.is-on span { animation-duration: .01s; animation-delay: 0s; }

/* gemas del marco (encima de las gemas 3D): 44 px; sólo las visitadas se pueden tocar */
.ee .gems { position: absolute; inset: 0; pointer-events: none !important; }
.ee .gem-btn { position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; }
.ee .gem-btn:disabled { pointer-events: none; }
.ee .gem-btn:focus-visible { outline: 2px solid var(--ee-magic); }

/* tarjeta del reflejo: cristal violeta con filete dorado; cuerpo desplazable y pie fijo (acción siempre visible) */
.ee .panel { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); height: calc(42% - 16px - var(--safe-b)); display: flex; flex-direction: column; border-radius: 22px;
  background: linear-gradient(180deg, rgba(34, 24, 64, .9), rgba(20, 14, 40, .95)); box-shadow: 0 0 0 1px rgba(var(--ee-gold-rgb), .55), 0 -2px 30px rgba(var(--ee-primary-rgb), .18), 0 12px 30px rgba(0, 0, 0, .45); overflow: hidden; }
.ee .panel::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ee-gold-rgb), .9), transparent); }
.ee .panel.is-in .cd-inner { animation: ee-card .5s var(--ease-soft); }
@keyframes ee-card { from { opacity: 0; transform: translateY(8px); } }
.ee .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.ee .cd-inner { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 12px; }
.ee .card-foot-slot { flex: none; }
.ee .cd-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px 12px; border-top: 1px solid rgba(var(--ee-gold-rgb), .3); }
.ee .cd-foot:empty { display: none; }
.ee .cd-foot > .gbtn { width: 100%; }
.ee .kicker { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 13px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ee-gold); }
.ee .kicker span:first-child { display: grid; color: var(--ee-magic); }
.ee .cd-inner h2 { margin: 0; font: 700 27px/1.1 var(--font-head); color: #FFFFFF; }
.ee .cd-inner h2.mirror-title { font: 700 24px/1.15 var(--font-mirror); letter-spacing: .02em; color: #FFF4DC; text-shadow: 0 0 14px rgba(var(--ee-primary-rgb), .8); }
.ee .cd-inner h2.farewell { font: italic 700 29px/1.1 var(--font-head); color: #FFF4DC; text-shadow: 0 0 14px rgba(var(--ee-magic-rgb), .6); }
.ee .cd-inner .lead { margin: 0; font: 600 16px/1.45 var(--font-text); color: var(--ink); }
.ee .cd-inner .sub { margin: 0; font: 600 16px/1.35 var(--font-text); color: var(--muted); }
.ee .cd-inner .big { margin: 0; font: 700 22px/1.2 var(--font-head); color: #FFFFFF; }
.ee .cd-inner .hosts, .ee .cd-inner .dead, .ee .cd-inner .done { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 16px/1.3 var(--font-text); color: var(--muted); }
.ee .cd-inner .hosts span:first-child, .ee .cd-inner .dead span:first-child { display: grid; color: var(--ee-primary); }
.ee .cd-inner .done { color: #9BE8C0; }
.ee .cd-inner .done span:first-child { display: grid; }
.ee .cd-inner .link-btn { align-self: flex-start; padding-left: 0; }
.ee .cd-inner .gbtn.is-small { align-self: flex-start; }
.ee .star-hint { margin: 2px 0 0; font: 600 14px/1.2 var(--font-text); color: var(--muted); }

/* pantallas bajas o angostas: tarjeta más compacta para que se lea sin desplazar */
@media (max-height: 760px), (max-width: 370px) {
  .ee .cd-inner { gap: 6px; padding: 12px 16px 14px; }
  .ee .cd-inner h2 { font-size: 24px; }
  .ee .cd-inner h2.mirror-title { font-size: 20px; }
  .ee .cd-inner .lead, .ee .cd-inner .sub { font-size: 15px; }
  .ee .cd-inner .big { font-size: 20px; }
  .ee .cd-foot { padding: 6px 14px 10px; }
}

/* manita de ayuda (a los 3 s, sin interacción) */
.ee .hand { position: absolute; left: 0; top: 0; z-index: 40; opacity: 0; pointer-events: none !important; filter: drop-shadow(0 0 8px rgba(var(--ee-magic-rgb), .7)); transition: opacity .4s; }
.ee .hand.is-on { opacity: 1; }