/* ============================================================
   Juego I · Camino al palacio
   Todo va con prefijo .j1- para no chocar con el resto de la app.
   ============================================================ */

/* ---------- Tarjeta dentro de la etapa ---------- */
.j1-card {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--paper, #FFFDF8);
  border: 1px solid var(--line, rgba(176,141,87,.42));
  overflow: hidden;
}
.j1-preview { display: block; width: 100%; aspect-ratio: 16 / 11; background: #F7DCCB; }
.j1-card-body { display: grid; gap: 14px; padding: 18px 18px 20px; }
.j1-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.j1-tips li { display: flex; align-items: center; gap: 11px; font-size: 12px; line-height: 1.35; color: var(--muted, #877B6E); text-align: left; }
.j1-tips svg { width: 20px; height: 20px; flex: none; color: var(--acc, #B08D57); }
.j1-done { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--acc, #B08D57); }
.j1-done svg { width: 16px; height: 16px; }

/* ---------- Botones propios ---------- */
.j1-btn {
  position: relative; display: block; width: 100%;
  padding: 16px 18px;
  border: 1px solid #B08D57; background: transparent; color: #2B2622;
  font: 400 10.5px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase;
  cursor: pointer;
}
.j1-btn::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(176,141,87,.42); pointer-events: none; }
.j1-btn.solid { background: #B08D57; color: #FFFDF8; }
.j1-btn.solid::after { border-color: rgba(255,255,255,.35); }
.j1-btn:active { transform: scale(.985); }
.j1-link {
  display: block; margin: 12px auto 0; padding: 4px 8px;
  background: none; border: 0; cursor: pointer;
  font: italic 400 16px/1.2 'Cormorant Garamond', Georgia, serif; color: #877B6E;
  text-decoration: underline; text-decoration-color: rgba(176,141,87,.5); text-underline-offset: 4px;
}
.j1-btn:focus-visible, .j1-link:focus-visible, .j1-ib:focus-visible { outline: 1.5px solid #B08D57; outline-offset: 3px; }

/* ---------- Capa de juego a pantalla completa ---------- */
.j1-overlay {
  position: absolute; inset: 0; z-index: 60;
  overflow: hidden;
  background: #F7DCCB;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  animation: j1-in .7s cubic-bezier(.2,.7,.2,1) both;
}
.j1-overlay.is-closing { animation: j1-out .45s ease forwards; pointer-events: none; }
@keyframes j1-in { from { clip-path: circle(0% at 50% 70%); } to { clip-path: circle(150% at 50% 70%); } }
@keyframes j1-out { to { opacity: 0; transform: scale(1.02); } }
.j1-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* HUD */
.j1-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 12px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0;
  pointer-events: none;
}
.j1-ib {
  pointer-events: auto;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(176,141,87,.55);
  background: rgba(255,253,248,.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #8C6B3C; cursor: pointer;
}
.j1-ib svg { width: 18px; height: 18px; }
.j1-mid { display: grid; gap: 6px; min-width: 0; }
.j1-bar { position: relative; height: 12px; border-radius: 7px; background: rgba(255,253,248,.85); box-shadow: inset 0 0 0 1px rgba(176,141,87,.5), 0 4px 14px -6px rgba(90,60,30,.35); }
.j1-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 0; border-radius: 5px; background: linear-gradient(90deg, #F2B8C4, #E08FA0 45%, #D4AF6A); }
.j1-mark { position: absolute; top: 50%; left: 2px; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: #D8344F; filter: drop-shadow(0 1px 2px rgba(80,30,30,.35)); }
.j1-castle { position: absolute; right: -8px; top: 50%; width: 28px; height: 28px; margin-top: -19px; color: #B08D57; filter: drop-shadow(0 1px 0 #FFFDF8); }
.j1-row { display: flex; justify-content: space-between; align-items: center; }
.j1-lives { display: flex; gap: 3px; min-width: 0; overflow: hidden; }
.j1-lives svg { width: 15px; height: 15px; color: #D8344F; transition: opacity .3s, transform .3s; }
.j1-lives svg.off { opacity: .22; transform: scale(.8); }
.j1-pct { font: 500 10px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .2em; color: #6E5A45; font-variant-numeric: tabular-nums; background: rgba(255,253,248,.75); padding: 4px 7px; border-radius: 10px; }

/* Paneles */
.j1-panel {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(46,32,24,.32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: j1-fade .4s ease both;
}
.j1-sheet {
  position: relative;
  width: 100%; max-width: 330px; max-height: 100%; overflow-y: auto;
  padding: 30px 24px 22px;
  background: #FFFDF8; color: #2B2622;
  border: 1px solid #B08D57;
  text-align: center;
  box-shadow: 0 30px 60px -28px rgba(40,25,10,.65);
  animation: j1-pop .7s cubic-bezier(.2,.7,.2,1) both;
}
.j1-sheet::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(176,141,87,.4); pointer-events: none; }
.j1-eyebrow { margin: 0; font: 400 10px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #B08D57; }
.j1-h { margin: 10px 0 0; font: italic 300 36px/1.05 'Cormorant Garamond', Georgia, serif; text-wrap: balance; }
.j1-p { margin: 10px auto 18px; max-width: 28ch; font: 300 12.5px/1.6 'Montserrat', system-ui, sans-serif; color: #877B6E; text-wrap: balance; }
.j1-sheet .j1-tips { margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid rgba(176,141,87,.3); }
.j1-sheet .j1-btn + .j1-btn { margin-top: 10px; }
@keyframes j1-fade { from { opacity: 0; } }
@keyframes j1-pop { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* Introducción (antes de la cuenta atrás) */
.j1-story {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 30px;
  text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,253,248,.94), rgba(247,232,216,.9));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  animation: j1-fade .7s ease both;
}
.j1-story.is-out { animation: j1-out .5s ease forwards; pointer-events: none; }
.j1-story .j1-orn { width: 120px; height: 14px; color: #B08D57; }
.j1-story .j1-orn:first-child { margin-bottom: 28px; animation: j1-fade 1s ease both; }
.j1-story p { margin: 0; max-width: 17ch; font: italic 300 30px/1.25 'Cormorant Garamond', Georgia, serif; color: #2B2622; text-wrap: balance; }
.j1-story p + p { margin-top: 18px; font-size: 33px; }
.j1-story em { font: 400 1.3em/1 'Pinyon Script', 'Cormorant Garamond', cursive; color: #B08D57; padding: 0 .04em; }
.j1-story span { display: inline-block; animation: j1-word 1.3s cubic-bezier(.2,.7,.2,1) both; }
.j1-story .j1-cta { width: 100%; max-width: 250px; margin-top: 36px; animation: j1-pop .8s cubic-bezier(.2,.7,.2,1) both; }
.j1-story .j1-hint { max-width: none; margin: 14px 0 0; font: 400 9.5px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #9A8670; animation: j1-fade .8s ease both; }
.j1-story.j1-all span, .j1-story.j1-all .j1-cta, .j1-story.j1-all .j1-hint, .j1-story.j1-all .j1-orn { animation: none; }

/* Final */
.j1-final {
  position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 12%); z-index: 3;
  padding: 0 20px;
  text-align: center;
  pointer-events: none;
}
.j1-final p { margin: 0; font: 400 clamp(38px, 11vw, 60px)/1.05 'Pinyon Script', 'Cormorant Garamond', cursive; color: #8C5A3C; text-shadow: 0 2px 18px rgba(255,248,236,.95), 0 0 2px rgba(255,248,236,.9); }
.j1-final p + p { margin-top: 4px; }
.j1-final span { display: inline-block; animation: j1-word 1.4s cubic-bezier(.2,.7,.2,1) both; }
.j1-final .j1-orn { width: 120px; height: 14px; margin: 14px auto 0; color: #B08D57; animation: j1-fade 1.2s ease 2.6s both; }
@keyframes j1-word { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
.j1-endbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 28px calc(env(safe-area-inset-bottom, 0px) + 26px);
  animation: j1-pop .8s cubic-bezier(.2,.7,.2,1) 3.2s both;
}
.j1-endbar .j1-link { color: #FFFDF8; text-decoration-color: rgba(255,253,248,.6); }

@media (prefers-reduced-motion: reduce) {
  .j1-overlay, .j1-sheet, .j1-panel, .j1-final span, .j1-story, .j1-story *, .j1-endbar, .j1-final .j1-orn { animation-duration: .01ms !important; animation-delay: 0s !important; }
}