/* =====================================================================
   ACABADO DE VIDEOJUEGO
   Luz de estación, medallones, carta repartida, sello de lacre y caída.
   Se carga después de styles.css y lo sobrescribe donde hace falta.
   ===================================================================== */

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0); }

html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, .card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* El reino cambia de luz con la estación. */
#app {
  --glow: rgba(0, 0, 0, 0);
  background: radial-gradient(130% 55% at 50% -8%, var(--glow), transparent 62%), var(--bg);
  transition: --glow 1.6s ease;
}
#app[data-season="Primavera"] { --glow: rgba(120, 190, 130, .17); }
#app[data-season="Verano"]    { --glow: rgba(228, 188, 96, .17); }
#app[data-season="Otoño"]     { --glow: rgba(226, 124, 62, .18); }
#app[data-season="Invierno"]  { --glow: rgba(130, 176, 228, .17); }

#embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#screen { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Algo está en peligro: los bordes laten en rojo. */
#app[data-danger="1"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 70px rgba(150, 40, 34, .5);
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat { 0%, 100% { opacity: .35; } 14% { opacity: 1; } 28% { opacity: .5; } 42% { opacity: .9; } 60% { opacity: .35; } }
#app.shake { animation: shake .65s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

/* Cabecera */
.top { padding-top: calc(14px + env(safe-area-inset-top)); }
.eyebrow { text-transform: none; letter-spacing: .02em; font-size: 12px; }
.crest {
  width: 38px; height: 38px; border: 2.5px solid transparent; border-radius: 50%;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              conic-gradient(var(--gold) calc(var(--p, 25) * 1%), rgba(201, 163, 90, .22) 0) border-box;
  display: grid; place-items: center; color: var(--gold);
}
.snd { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.snd:hover { color: var(--gold); }
.snd.float { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 3; }

/* Cambio de pantalla: un parpadeo breve, solo al cambiar de pestaña. */
main.swap { animation: swap .24s ease-out; }
@keyframes swap { from { opacity: 0; transform: translateY(7px); } }

/* ---------- Medallones de los medidores ---------- */
.meters { gap: 6px; margin: 8px 0 8px; }
.meter { display: flex; flex-direction: column; align-items: center; position: relative; }
.ring {
  --p: 0; --arc: var(--gold);
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  border: 3.5px solid transparent;
  background: radial-gradient(circle at 50% 30%, #1d3347, #0d1823 72%) padding-box,
              conic-gradient(var(--arc) calc(var(--p) * 1%), rgba(201, 163, 90, .16) 0) border-box;
  display: grid; place-items: center;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: --p .75s cubic-bezier(.2, .8, .2, 1), transform .2s;
}
.meter .ico { color: var(--gold); }
.meter.danger .ring { --arc: var(--red); animation: ring-alert 1.1s ease-in-out infinite; }
.meter.danger .ico { color: #ecaaa5; }
@keyframes ring-alert { 50% { box-shadow: 0 0 0 4px rgba(208, 103, 95, .25), 0 5px 16px rgba(0, 0, 0, .45); } }
.meter .val { font-size: 16px; font-weight: 600; color: #f1ead6; margin-top: 5px; line-height: 1; font-variant-numeric: tabular-nums; }
.meter .lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.meter.up .ring { animation: ring-up .8s cubic-bezier(.3, 1.5, .5, 1); }
.meter.down .ring { animation: ring-down .6s ease; }
@keyframes ring-up { 35% { transform: scale(1.14); box-shadow: 0 0 22px rgba(154, 217, 165, .5), 0 5px 16px rgba(0, 0, 0, .45); } }
@keyframes ring-down { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
/* El punto avisa, al deslizar, de qué medidores toca la decisión. */
.ring .pv {
  position: absolute; top: -10px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 12px var(--gold);
  transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.7, .5, 1);
}
.meter.pv .pv { transform: scale(1); }
.meter.pv .ring { transform: translateY(-2px) scale(1.06); }

/* ---------- La carta: se reparte, se tiñe al deslizar y tiene marco dorado ---------- */
.card-wrap { perspective: 1100px; }
.card { position: relative; transform-origin: 50% 100%; }
.card.enter { animation: deal .6s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes deal {
  from { opacity: 0; transform: translateY(46px) rotateX(-18deg) rotateZ(-3deg) scale(.92); }
  55% { opacity: 1; }
  to { transform: none; }
}
.card::before {
  content: ''; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(214, 178, 100, .6); border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(10, 16, 22, .35);
}
.card .tint { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(var(--k, 0) * .6); }
.card[data-side="left"] .tint  { background: linear-gradient(90deg, rgba(168, 78, 40, .95), rgba(168, 78, 40, 0) 75%); }
.card[data-side="right"] .tint { background: linear-gradient(270deg, rgba(36, 104, 114, .95), rgba(36, 104, 114, 0) 75%); }
.card .swipelabel {
  position: absolute; top: 16px; left: 14px; right: 14px; z-index: 4; pointer-events: none; text-align: center;
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.05; color: #fff4d6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9); opacity: calc(var(--k, 0) * 1.4);
}
/* Pergamino con grano y luz suave. */
.card .body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%),
    var(--parch);
  background-blend-mode: multiply, normal, normal;
}
.card .art .tag { z-index: 2; }
.opt.active { box-shadow: 0 0 24px rgba(201, 163, 90, .28); transform: translateY(-2px); }
.opt, .btn, .mini, nav button { transition: transform .12s, border-color .15s, background .15s, box-shadow .2s, opacity .15s; }
.btn:active:not(:disabled), .mini:active { transform: scale(.97); }
.btn.gold { box-shadow: 0 6px 20px rgba(201, 163, 90, .22), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ---------- Navegación ---------- */
nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
nav button { position: relative; }
nav button:active { transform: scale(.92); }
nav button[aria-current="page"]::before {
  content: ''; position: absolute; top: -9px; left: 28%; right: 28%; height: 2px; border-radius: 2px;
  background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: nav-in .3s ease-out;
}
nav button[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(201, 163, 90, .65)); }
@keyframes nav-in { from { left: 50%; right: 50%; } }

/* ---------- Pantalla de inicio ---------- */
.title { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; overflow: hidden; }
.title-art {
  position: absolute; inset: -5%; background-size: cover; background-position: center;
  filter: brightness(.3) saturate(.9); animation: kenburns 30s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -2%); } }
.title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 25%, rgba(12, 22, 32, .92) 88%); }
.title-in { position: relative; z-index: 2; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; padding-top: 4vh; }
.seal { width: 132px; height: 132px; margin-bottom: 20px; cursor: pointer; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65));
  animation: seal-in 1s cubic-bezier(.2, 1.4, .4, 1) both, seal-glow 3.6s ease-in-out 1s infinite; }
@keyframes seal-in { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } }
@keyframes seal-glow { 50% { filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .65)) drop-shadow(0 0 16px rgba(190, 70, 56, .55)); } }
.seal.break { animation: seal-break .65s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes seal-break { 25% { transform: scale(1.14) rotate(5deg); filter: brightness(1.5); } 100% { transform: scale(2) rotate(-8deg); opacity: 0; filter: blur(5px); } }
.logo { font-family: var(--serif); font-size: 54px; font-weight: 700; line-height: .95; color: #f6edd2; text-shadow: 0 4px 30px rgba(0, 0, 0, .75); animation: rise .9s cubic-bezier(.2, .8, .2, 1) .35s both; }
.tag2 { font-size: 14px; color: var(--muted); margin: 12px 0 30px; animation: rise .8s ease-out .6s both; }
.title-btns { width: 100%; display: flex; flex-direction: column; gap: 10px; animation: rise .8s ease-out .85s both; }
.title-btns .btn { margin: 0; }
.resume { font-size: 12px; color: var(--muted); margin: -2px 0 4px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- La caída del reino: el momento más dramático ---------- */
.fall .hero { height: 250px; overflow: hidden; position: relative; background: none; }
.fall .himg { position: absolute; inset: 0; background-size: cover; background-position: center; animation: zoomout 16s ease-out both; }
@keyframes zoomout { from { transform: scale(1.22); } to { transform: scale(1); } }
.fall .in > * { animation: rise .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.4s + var(--i, 0) * .14s); }
.fall .in > :nth-child(1) { --i: 0; } .fall .in > :nth-child(2) { --i: 1; } .fall .in > :nth-child(3) { --i: 2; }
.fall .in > :nth-child(4) { --i: 3; } .fall .in > :nth-child(5) { --i: 4; } .fall .in > :nth-child(6) { --i: 5; }
.fall .in > :nth-child(7) { --i: 6; } .fall .in > :nth-child(8) { --i: 7; } .fall .in > :nth-child(9) { --i: 8; }
.fall .in > :nth-child(10) { --i: 9; } .fall .in > :nth-child(11) { --i: 10; } .fall .in > :nth-child(12) { --i: 11; }
.fall .in > h2 { animation: stamp .9s cubic-bezier(.2, 1.25, .3, 1) .55s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.4); letter-spacing: .07em; } }
.fall { scrollbar-width: none; }
.fall::-webkit-scrollbar { width: 0; }
.nums b { font-variant-numeric: tabular-nums; }
.legacy b span { font-variant-numeric: tabular-nums; }

/* ---------- Obras ---------- */
.bld.wip { border-color: var(--gold-soft); }
.bld.wip .bico svg { animation: hammer .75s ease-in-out infinite; transform-origin: 15% 85%; }
@keyframes hammer { 0%, 100% { transform: rotate(-28deg); } 45% { transform: rotate(12deg); } }
.bld.wip .bar i {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px);
  background-size: 17px 17px; animation: stripes .9s linear infinite;
}
@keyframes stripes { to { background-position: 17px 0; } }
.coinfx {
  position: fixed; width: 17px; height: 17px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 40; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e0b44c 55%, #8a6420); box-shadow: 0 0 12px rgba(224, 180, 76, .75);
}

/* Quien prefiere menos movimiento lo tiene: se apaga todo lo que se mueve solo. */
@media (prefers-reduced-motion: reduce) {
  #embers { display: none; }
  .title-art, .fall .himg, .seal { animation: none !important; }
}