/* Letras: las carga el <link> de index.html y mecenas.html (antes iba aquí con @import y llegaban tarde).
   «Cifras»: solo los dígitos 0–9, de Alegreya (el mismo archivo que ya baja Google, variable 400–900). IM Fell solo trae cifras antiguas
   y el 0 se leía «o» y el 7 «˥»; con esta cara delante de IM Fell, y lining-nums en el escenario, los números salen de caja alta en todo el juego. */
@font-face { font-family: "Cifras"; font-style: normal; font-weight: 400 900; font-display: swap; unicode-range: U+0030-0039;
  src: url(https://fonts.gstatic.com/s/alegreya/v41/4UaBrEBBsBhlBjvfkSLhx6jj4JN0.woff2) format("woff2"); }
:root {
  --night: #0a111d;
  --stone: #16213a;
  --line: #2c3c5e;
  --ink: #efe6d2;
  --muted: #a8b0c4;
  --candle: #ffcf7a;
  --house: #ffcf7a;
  --house2: #7a5a1e;
  --display: "Cifras", "IM Fell English SC", "Iowan Old Style", Georgia, serif;
  --body: "Alegreya", "Iowan Old Style", Georgia, serif; /* libro, no app (notas/arte.md) */
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  /* Fuera del escenario (ordenador): el cuadro cuelga de un muro de piedra del castillo, con la luz cálida de las velas detrás.
     El muro es pintura (html::before; body::before/::after son los apliques): ui-muro.webp cuando exista y, debajo, la bajada de piedra de la misión (mis-bajada),
     un poco desenfocada y oscura, como un fondo con poca profundidad de campo. Nada de sillares de CSS. */
  background: #120e0a;
  color: var(--ink); font-family: var(--body); font-size: 16px;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 12px 20px;
}
html::before { content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 58% at 50% 46%, rgba(255, 170, 80, .22), rgba(255, 140, 50, .06) 55%, transparent 78%),
    radial-gradient(115% 100% at 50% 44%, transparent 30%, rgba(4, 3, 2, .9) 100%),
    url(../assets/ui-muro.webp) center / cover no-repeat,
    url(../assets/mis-bajada.webp) center 62% / cover no-repeat, #120e0a;
  filter: blur(1.5px) brightness(.5) saturate(.55) sepia(.4); }
.app { max-width: 572px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bar button { padding: 5px 10px; font-size: 13px; }
.steps { display: flex; gap: 5px; }
.steps i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background .4s; }
.steps i.on { background: var(--candle); }
.stage {
  position: relative; width: min(calc(100% - 80px), calc((100dvh - 162px) * 832 / 1216)); min-width: 280px; max-width: calc(100% - 52px); aspect-ratio: 832 / 1216;
  margin: 0 auto; overflow: hidden;
  /* En el ordenador, un cuadro colgado: marco tallado pintado (ui-marco.webp) de 26px, sin esquinas redondeadas.
     content-box: el juego conserva su 832:1216 por dentro del marco. Sin la pieza, madera oscura. */
  box-sizing: content-box; border: 26px solid #2a1a0e; border-image: url(../assets/ui-marco.webp) 13% / 26px / 0 stretch round;
  box-shadow: inset 0 0 0 2px #0c0704, inset 0 0 2.4cqw rgba(0, 0, 0, .6), 0 18px 34px rgba(0, 0, 0, .7), 0 40px 90px rgba(0, 0, 0, .55);
  user-select: none; -webkit-user-select: none; container-type: inline-size; background: var(--night);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; /* un niño tiene que leer sus contadores: 0 no es «o» */
}
.stage.shake { animation: stageshake .5s; }
@keyframes stageshake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1.5%, .5%); } 40% { transform: translate(1.5%, -.5%); } 60% { transform: translate(-1%, .3%); } 80% { transform: translate(1%, 0); } }
.scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.scene.on { opacity: 1; pointer-events: auto; }
.scene > * { position: absolute; }
.bg { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.shade { inset: 0; pointer-events: none; transition: opacity 1.2s, background 1.2s; }
.panel { /* tapa de libro en cuero cosido (antes: cristal oscuro con borde fino) */
  left: 5%; right: 5%; bottom: 4%; padding: 4.4cqw 5cqw; display: flex; flex-direction: column; gap: 2.6cqw; transition: opacity .4s; border-radius: .8cqw; color: #f1e3c4;
  background: linear-gradient(90deg, var(--hilo) 50%, transparent 0) left 1.2cqw top 1.2cqw / 1.8cqw 1px repeat-x, linear-gradient(90deg, var(--hilo) 50%, transparent 0) left 1.2cqw bottom 1.2cqw / 1.8cqw 1px repeat-x,
    linear-gradient(180deg, var(--hilo) 50%, transparent 0) left 1.2cqw top 1.2cqw / 1px 1.8cqw repeat-y, linear-gradient(180deg, var(--hilo) 50%, transparent 0) right 1.2cqw top 1.2cqw / 1px 1.8cqw repeat-y,
    radial-gradient(120% 90% at 30% 10%, rgba(255, 200, 140, .1), transparent 60%), url(../assets/ui-cuero.webp) center / 170% auto, var(--k-grano), linear-gradient(180deg, rgba(67, 42, 25, .96), rgba(36, 22, 12, .97));
  border: 1px solid #120a05; box-shadow: inset 0 0 3cqw rgba(0, 0, 0, .55), 0 1.2cqw 2.4cqw rgba(0, 0, 0, .55);
}
.panel.up { top: 4%; bottom: auto; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.05; text-wrap: balance; }
h1 { font-size: 10cqw; text-align: center; }
h2 { font-size: 6.4cqw; }
p { margin: 0; line-height: 1.4; font-size: 4cqw; }
.say { font-family: var(--display); font-size: 5.2cqw; line-height: 1.25; min-height: 2.5em; }
.small { font-size: 3.4cqw; color: var(--muted); }
.opts { display: grid; gap: 2cqw; }
.opts button { opacity: 0; transform: translateY(8px); animation: optin .35s forwards; }
@keyframes optin { to { opacity: 1; transform: none; } }
.row { display: flex; gap: 2cqw; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; text-align: center; }
.lab { font-size: 3.2cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cut { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); }
.cut img, img.cut { display: block; max-width: none; }

.glowup { inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(45% 30% at 50% 50%, rgba(255, 207, 122, .75), transparent 70%); transition: opacity .8s; mix-blend-mode: screen; }
.glowup.on { opacity: 1; }
.spark { position: absolute; width: 1.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c, var(--house)); box-shadow: 0 0 2.2cqw var(--c, var(--house)); pointer-events: none; animation: spark var(--t, 1.6s) ease-out forwards; }
.spark.smoke { width: 9cqw; background: radial-gradient(circle, rgba(170, 170, 180, .55), transparent 70%); box-shadow: none; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(var(--s, .2)); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .965); } }
.flash { inset: 0; background: radial-gradient(40% 30% at 50% 70%, rgba(255, 230, 170, .9), transparent 70%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.flash.go { animation: flash 1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* 5 · Sombrero */
.fcandle { position: absolute; width: 4.2cqw; animation: bob 4s infinite ease-in-out; }
.fcandle img { width: 100%; display: block; max-width: none; filter: brightness(.55); transition: filter .4s; }
.fcandle::after { content: ""; position: absolute; left: 50%; top: -2%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0 6%, var(--fc, #ffc35c) 12%, color-mix(in srgb, var(--fc, #ffb14a) 40%, transparent) 30%, transparent 62%); mix-blend-mode: screen; transition: transform .3s ease-out; }
.fcandle.lit img { filter: brightness(1); }
.fcandle.lit::after { transform: translate(-50%, -50%) scale(1); animation: fl 1.6s infinite ease-in-out; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes fl { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(.78); } 70% { filter: brightness(1.12); } }
.mote { position: absolute; width: 1cqw; aspect-ratio: 1; border-radius: 50%; background: #fff3cf; box-shadow: 0 0 1.6cqw #ffd98a; pointer-events: none; animation: orbit var(--t) linear infinite; }
@keyframes orbit { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ========== KIT DE ARTE (notas/arte.md) ==========
   La interfaz son objetos del castillo: pergamino, tinta ferrogálica, latón grabado, lacre, cintas, cuero cosido, madera.
   Cada pieza pintada (assets/ui-*.webp) llega sola desde la cola de arte: core.js pone .k-hay-<pieza> en el escenario
   cuando existe y aquí se cambia el respaldo CSS por la pieza. Sin pieza, el respaldo ya parece hecho a mano. */
:root {
  --papel: #e6d5ad; --papel2: #cfb684; --papel3: #a8895a;
  --tinta: #2a1c10; --tinta2: #4d3721; --sepia: #4a321c; /* tinta2 7,6:1 y sepia 8,2:1 sobre --papel; 5,6 y 6:1 sobre --papel2. Nada de texto sobre --papel3 (el borde tostado) */
  --lacre: #7a1915; /* 7,3:1 sobre --papel, 5,4:1 sobre --papel2 */ --lacre2: #5a0f0c; --lacre-luz: #c4473b;
  --laton: #a8843f; --laton2: #6e5222; --laton-luz: #e9cf8c;
  --cuero: #3a2516; --cuero2: #24160c; --hilo: rgba(226, 196, 146, .55);
  --madera: #4a2f1c; --verdin: #4e7a68; /* verdín: solo latón viejo, nunca texto (2,5:1) */
  --mano: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --titulo: "Cifras", "IM Fell English", "Iowan Old Style", Georgia, serif;
  /* Grano de papel (ruido SVG): fibras + motas. */
  --k-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --k-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .9 -.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Pergamino: manchas de té, borde tostado, grano. ui-papel.webp (opaca) tapa el respaldo en cuanto existe. */
  --k-papel-fondo:
    radial-gradient(140% 120% at 50% 45%, transparent 66%, rgba(120, 72, 26, .2) 86%, rgba(70, 38, 12, .5) 100%), /* el tostado se queda en el canto, fuera del texto */
    linear-gradient(rgba(196, 156, 96, .24), rgba(170, 120, 60, .3)), /* tiñe la pieza pintada (sale muy blanca) */
    url(../assets/ui-papel.webp) center / cover,
    radial-gradient(18% 14% at 78% 24%, rgba(150, 100, 40, .16), transparent 70%),
    radial-gradient(12% 10% at 16% 78%, rgba(140, 90, 40, .14), transparent 70%),
    radial-gradient(30% 22% at 60% 85%, rgba(160, 110, 50, .1), transparent 70%),
    var(--k-fibra), var(--k-grano),
    linear-gradient(172deg, #ecdcb6, #dcc79a 60%, #d2b987);
  /* Bordes rasgados (máscara): fuerte para hojas y notas, suave para botones y tiras. */
  --k-rasgado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0.0 4.2 L5.8 7.5 L11.1 4.6 L17.1 2.3 L22.6 5.4 L29.6 1.7 L34.1 1.6 L41.2 5.9 L44.4 7.9 L52.2 5.6 L58.3 2.1 L61.3 4.7 L64.6 2.3 L68.8 1.2 L74.2 4.1 L81.4 4.6 L87.6 4.5 L93.9 4.2 L98.3 8.0 L106.3 6.9 L112.8 3.2 L116.9 3.0 L120.3 6.4 L125.3 6.9 L130.2 7.7 L137.5 1.0 L141.5 7.4 L146.9 7.9 L151.9 1.5 L158.0 6.4 L162.4 1.6 L167.0 7.7 L173.8 1.8 L178.0 1.7 L181.3 6.6 L185.2 4.9 L190.5 2.3 L197.1 1.9 L203.3 1.8 L208.4 2.5 L212.8 7.8 L219.8 3.1 L227.2 2.5 L232.2 7.0 L238.4 1.7 L240.0 4.2 L240.0 16.0 L0.0 16.0Z'/%3E%3C/svg%3E") top left / 31cqw 2.3cqw repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0.0 11.7 L6.3 10.3 L10.0 14.9 L14.9 13.1 L21.9 10.2 L27.9 11.1 L34.2 14.0 L39.4 13.9 L47.0 14.6 L54.1 14.5 L60.5 12.6 L65.5 9.1 L68.6 14.6 L76.2 11.4 L79.6 8.1 L87.4 14.2 L92.5 14.1 L97.1 10.6 L100.9 10.1 L104.1 13.8 L111.2 12.2 L116.3 10.8 L121.7 12.3 L124.8 9.9 L132.7 8.2 L139.0 12.5 L143.8 10.2 L150.2 14.2 L154.4 12.5 L159.9 9.3 L165.4 14.8 L172.5 12.0 L178.1 13.4 L183.3 12.3 L190.1 14.3 L195.9 13.8 L202.3 14.7 L206.7 12.6 L212.9 14.6 L218.2 13.5 L222.6 11.7 L230.4 11.6 L238.2 13.8 L240.0 11.7 L240.0 0.0 L0.0 0.0Z'/%3E%3C/svg%3E") bottom left / 37cqw 2.3cqw repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M2.8 0.0 L5.8 6.4 L2.3 13.7 L2.0 17.8 L6.1 22.0 L4.7 25.6 L3.1 29.7 L6.9 34.8 L1.1 40.9 L2.0 45.3 L6.7 52.6 L6.8 59.6 L7.6 66.4 L2.8 73.3 L4.4 80.6 L4.9 87.4 L3.5 92.5 L3.2 97.7 L6.7 101.2 L7.9 108.2 L4.9 114.7 L1.9 121.4 L4.1 127.8 L2.4 131.7 L2.8 137.3 L5.2 142.6 L1.9 147.6 L2.6 153.0 L2.4 157.2 L1.5 162.0 L7.7 168.3 L6.0 173.3 L1.3 180.9 L6.6 184.6 L5.5 191.8 L3.9 195.6 L7.2 203.0 L2.4 210.0 L3.6 217.2 L2.0 223.8 L5.2 231.7 L2.5 238.3 L2.8 240.0 L16.0 240.0 L16.0 0.0Z'/%3E%3C/svg%3E") left top / 1.8cqw 29cqw repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M14.3 0.0 L10.4 6.5 L13.1 14.2 L9.9 18.5 L12.9 24.8 L12.2 31.2 L14.2 38.1 L8.7 42.2 L13.2 47.0 L10.6 54.0 L11.1 57.8 L13.8 64.1 L14.1 70.3 L14.4 75.0 L8.2 79.1 L8.1 84.1 L10.7 89.3 L10.2 96.6 L10.9 100.2 L13.7 106.4 L8.9 109.8 L13.6 115.4 L13.5 120.7 L11.5 127.7 L9.3 131.2 L13.0 134.6 L9.8 137.8 L11.3 141.3 L11.6 144.8 L11.3 151.2 L11.6 156.5 L10.8 161.7 L11.7 165.2 L8.9 169.3 L14.5 177.0 L10.1 180.7 L14.9 186.6 L8.4 193.1 L12.6 198.2 L8.4 204.1 L12.9 208.4 L10.6 212.3 L13.2 217.7 L14.8 222.6 L8.1 227.2 L13.0 233.1 L14.3 240.0 L0.0 240.0 L0.0 0.0Z'/%3E%3C/svg%3E") right top / 1.8cqw 35cqw repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 3.4cqw) calc(100% - 4.4cqw) no-repeat;
  --k-suave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0.0 4.8 L4.1 7.2 L7.5 5.1 L11.9 8.0 L15.4 6.5 L18.1 4.0 L21.2 6.9 L23.5 8.0 L26.1 5.2 L28.3 9.0 L32.5 8.4 L36.3 4.2 L39.3 6.5 L41.7 8.8 L44.8 4.8 L49.2 4.6 L54.0 6.3 L57.7 5.7 L61.1 4.9 L63.2 8.3 L65.9 7.9 L68.6 8.8 L73.2 7.8 L77.5 6.9 L81.7 4.6 L85.2 8.1 L87.8 8.6 L92.4 6.0 L95.5 6.3 L98.7 9.0 L101.8 4.1 L104.1 7.6 L109.1 6.5 L112.6 6.8 L116.8 5.1 L120.6 6.8 L124.5 4.9 L127.0 5.7 L131.8 5.7 L135.6 5.5 L137.9 4.3 L142.3 7.9 L145.5 7.4 L149.5 8.5 L154.4 6.0 L159.3 8.8 L163.1 8.4 L166.6 5.9 L169.3 8.4 L171.8 4.3 L176.2 7.9 L179.7 8.2 L181.8 5.3 L184.7 6.1 L187.2 4.3 L190.2 8.5 L195.2 7.7 L198.6 5.3 L203.5 6.6 L207.7 4.1 L210.3 8.2 L214.7 8.4 L218.5 6.1 L222.2 8.2 L225.2 6.7 L228.0 7.8 L230.0 7.4 L234.9 4.1 L238.7 7.2 L240.0 4.8 L240.0 16.0 L0.0 16.0Z'/%3E%3C/svg%3E") top left / 23cqw .9cqw repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0.0 7.2 L2.4 11.9 L7.4 11.1 L9.8 8.7 L12.8 7.6 L15.5 7.2 L18.5 9.0 L23.3 8.6 L28.0 8.5 L30.2 7.6 L34.0 10.4 L36.5 7.8 L40.3 7.3 L44.6 7.2 L48.3 8.5 L52.1 10.7 L57.0 10.4 L61.3 7.2 L65.3 11.3 L69.8 8.7 L72.3 11.8 L75.9 11.8 L80.7 9.5 L84.2 10.0 L88.2 7.4 L91.2 10.1 L94.9 10.5 L98.7 9.3 L102.0 8.6 L105.6 11.6 L110.6 10.2 L113.9 10.0 L118.6 7.2 L122.2 10.0 L124.5 7.5 L127.0 9.3 L130.0 10.4 L133.1 11.0 L135.2 9.3 L139.6 8.8 L142.2 8.5 L144.4 9.9 L148.8 7.4 L152.2 7.8 L155.7 9.4 L159.5 7.0 L163.7 9.6 L167.9 8.8 L171.0 8.1 L175.4 9.0 L180.2 11.9 L183.7 8.8 L186.8 11.1 L190.8 9.8 L193.6 11.8 L198.5 10.2 L200.9 10.9 L203.7 7.7 L206.2 10.6 L208.5 9.7 L211.1 10.3 L215.3 7.4 L219.8 11.8 L223.0 7.8 L225.1 11.0 L228.5 10.1 L232.8 8.4 L236.2 10.8 L238.9 10.7 L240.0 7.2 L240.0 0.0 L0.0 0.0Z'/%3E%3C/svg%3E") bottom left / 27cqw .9cqw repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M8.6 0.0 L8.5 4.8 L7.0 7.1 L6.7 10.4 L5.0 12.8 L5.1 16.1 L4.1 19.5 L7.6 21.7 L6.6 25.0 L5.8 29.2 L7.9 31.4 L7.3 35.1 L8.9 39.0 L7.8 42.1 L6.9 45.2 L5.6 49.2 L6.4 51.4 L7.0 55.6 L7.2 58.9 L4.9 61.5 L8.1 64.4 L4.6 67.0 L4.2 69.3 L6.9 72.1 L5.7 76.6 L5.4 79.7 L7.9 82.6 L5.3 86.3 L7.9 88.6 L8.1 92.7 L6.7 95.4 L7.0 100.2 L4.8 105.0 L4.3 109.9 L4.1 113.2 L7.4 117.6 L8.0 122.5 L6.7 127.4 L7.7 132.4 L8.9 135.4 L5.0 138.5 L6.3 140.8 L8.7 143.3 L5.1 148.2 L6.6 150.5 L6.7 153.0 L5.3 157.5 L8.5 160.7 L5.7 164.1 L8.1 168.7 L7.4 173.4 L7.5 176.7 L7.2 181.1 L5.5 183.9 L7.9 187.1 L6.7 190.8 L4.5 195.2 L5.7 199.1 L8.2 202.8 L8.8 205.6 L6.8 207.8 L5.2 211.4 L6.4 215.1 L7.6 218.4 L5.9 220.5 L4.7 224.8 L5.0 229.4 L4.9 233.5 L6.1 236.8 L7.5 239.1 L8.6 240.0 L16.0 240.0 L16.0 0.0Z'/%3E%3C/svg%3E") left top / .8cqw 21cqw repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 240' preserveAspectRatio='none'%3E%3Cpath d='M8.4 0.0 L11.1 4.5 L11.0 9.5 L11.5 13.5 L11.2 17.8 L8.4 21.9 L9.8 26.2 L7.1 30.8 L9.4 33.2 L8.3 38.0 L10.5 41.4 L11.6 46.2 L7.8 50.5 L10.4 53.0 L9.3 55.9 L7.5 59.0 L10.4 63.8 L11.7 68.5 L8.7 70.7 L7.9 75.1 L7.7 80.1 L8.3 82.9 L11.5 87.7 L11.2 91.2 L9.6 93.6 L7.1 97.6 L9.5 100.0 L8.2 105.0 L10.8 108.6 L10.7 112.5 L8.8 116.4 L8.0 119.6 L9.7 122.8 L10.7 127.3 L9.1 129.9 L7.6 133.2 L10.1 135.9 L9.7 138.1 L9.8 141.0 L11.8 145.3 L8.4 150.3 L9.3 154.7 L10.0 158.4 L10.9 161.6 L10.5 164.5 L7.5 167.6 L8.8 171.9 L10.7 174.0 L8.5 177.6 L8.8 180.9 L10.7 185.6 L8.2 188.7 L8.4 191.7 L11.9 194.9 L11.7 198.3 L7.8 202.6 L7.5 206.2 L9.8 208.9 L11.8 211.4 L11.7 215.9 L9.2 220.7 L11.8 224.8 L8.0 229.5 L11.1 231.8 L9.5 234.2 L8.0 236.5 L8.5 240.0 L8.4 240.0 L0.0 240.0 L0.0 0.0Z'/%3E%3C/svg%3E") right top / .8cqw 25cqw repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 1.5cqw) calc(100% - 1.7cqw) no-repeat;
  --k-sombra: drop-shadow(0 .9cqw 1.1cqw rgba(0, 0, 0, .55)) drop-shadow(0 .2cqw .2cqw rgba(0, 0, 0, .4));
}

/* ---- Pergamino ---- */
.k-papel { position: relative; isolation: isolate; color: var(--tinta); filter: var(--k-sombra); padding: 4.4cqw 5cqw; }
.k-papel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--k-papel-fondo);
  -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado); box-shadow: inset 0 0 2.4cqw rgba(90, 50, 14, .45); }
.k-papel.k-suave::before { -webkit-mask: var(--k-suave); mask: var(--k-suave); }
.k-papel.k-viejo::before { filter: sepia(.25) brightness(.9) contrast(1.05); }
.k-hay-hoja-ancha .k-papel.k-ancha::before { background: url(../assets/ui-hoja-ancha.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -1.4cqw -1.6cqw; }
.k-hay-hoja-alta .k-papel.k-alta::before { background: url(../assets/ui-hoja-alta.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -1.6cqw -1.4cqw; }
.k-hay-tira .k-papel.k-tira::before { background: url(../assets/ui-tira.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -.8cqw -1.6cqw; }
.k-papel h1, .k-papel h2, .k-papel h3 { color: var(--tinta); font-family: var(--display); }
.k-papel p, .k-papel li { color: var(--tinta); }
.k-papel small, .k-papel .k-sub { color: var(--sepia); }
.k-papel b, .k-papel strong { color: #1d1209; }

/* ---- Nota clavada (papelito rasgado con tachuela de latón) ---- */
.k-nota { position: relative; isolation: isolate; color: var(--tinta); padding: 4.6cqw 4cqw 3.4cqw; rotate: var(--rot, -1.6deg); filter: var(--k-sombra); line-height: 1.3; }
.k-nota::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado); box-shadow: inset 0 0 1.6cqw rgba(90, 50, 14, .4); }
.k-hay-nota .k-nota::before { background: url(../assets/ui-nota.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -.8cqw; }
.k-nota.k-clavo::after { content: ""; position: absolute; left: 50%; top: .6cqw; width: 3.6cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff0c0 0 8%, #d8b062 22%, #8a6424 58%, #3e2a0c 92%); box-shadow: 0 .5cqw .6cqw rgba(0, 0, 0, .55), inset 0 0 0 .15cqw rgba(40, 26, 6, .6); }
.k-hay-tachuela .k-nota.k-clavo::after { background: url(../assets/ui-tachuela.webp) center / contain no-repeat; box-shadow: none; width: 4.4cqw; }
.k-mano { font-family: var(--mano); font-weight: 400; letter-spacing: 0; }

/* ---- Placa de latón grabado (nombres, contadores, rótulos) ---- */
.k-placa { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqw; padding: 1.4cqw 5.4cqw;
  font-family: var(--display); font-size: max(4cqw, 14px); color: #2e1f08; letter-spacing: .03em; text-shadow: 0 .15cqw 0 rgba(255, 238, 190, .55), 0 -.1cqw 0 rgba(40, 24, 4, .5);
  background: radial-gradient(14% 40% at 22% 70%, rgba(78, 122, 104, .35), transparent 70%), radial-gradient(10% 30% at 84% 30%, rgba(78, 122, 104, .25), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 240, 200, .06) 0 1px, transparent 1px 3px), var(--k-grano),
    linear-gradient(180deg, #c8a458, #a8843f 40%, #8c6a2c 62%, #b08c48);
  border-radius: .5cqw; box-shadow: inset 0 .2cqw 0 rgba(255, 236, 180, .55), inset 0 -.25cqw 0 rgba(50, 32, 8, .6), inset 0 0 0 .5cqw rgba(60, 40, 10, .25),
    0 .6cqw 1cqw rgba(0, 0, 0, .55), 0 0 0 .2cqw #3a2808; }
.k-placa::before, .k-placa::after { content: ""; position: absolute; top: 50%; width: 1.7cqw; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background: linear-gradient(135deg, transparent 44%, rgba(40, 26, 6, .8) 45% 55%, transparent 56%), radial-gradient(circle at 35% 30%, #f2dc9c, #9a7634 60%, #4a3410);
  box-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .6); }
.k-placa::before { left: 1.6cqw; } .k-placa::after { right: 1.6cqw; }
.k-hay-placa .k-placa { background: none; box-shadow: none; border: 0 solid transparent; border-width: 1cqw 5cqw; padding: .6cqw 1.4cqw;
  border-image: url(../assets/ui-placa.webp) 30% 18% fill / 1cqw 5cqw stretch; }
.k-hay-placa .k-placa::before, .k-hay-placa .k-placa::after { display: none; }

/* ---- Cinta (título de pancarta con colas en V). --k-cinta = color (por defecto, lacre; tu casa: style="--k-cinta: var(--house)") ---- */
.k-cinta { position: relative; display: inline-block; padding: 1.4cqw 7cqw 1.6cqw; font-family: var(--display); font-size: max(4.8cqw, 16px); line-height: 1.05; color: #f8ead0;
  letter-spacing: .03em; text-shadow: 0 .2cqw .3cqw rgba(0, 0, 0, .6); text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 30%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .32)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 .3cqw, transparent .3cqw .9cqw), var(--k-cinta, var(--lacre));
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.2cqw) 50%, 100% 100%, 0 100%, 3.2cqw 50%); filter: none; }
.k-cinta-sombra { filter: drop-shadow(0 .7cqw .7cqw rgba(0, 0, 0, .55)); display: inline-block; }
.k-hay-cinta2 .k-cinta { background: none; clip-path: none; border: 0 solid transparent; border-width: 1cqw 6cqw; padding: .4cqw 1cqw .6cqw;
  border-image: url(../assets/ui-cinta2.webp) 25% 22% fill / 1cqw 6cqw stretch; }

/* ---- Raya de tinta (separador con rombo de imprenta) ---- */
.k-tinta { position: relative; height: 2.4cqw; margin: 1cqw 0; flex: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--tinta) 0 38%, transparent 72%) center / 100% .32cqw no-repeat; }
.k-tinta::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.3cqw; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; background: var(--tinta);
  box-shadow: 2.2cqw -2.2cqw 0 -.35cqw var(--tinta), -2.2cqw 2.2cqw 0 -.35cqw var(--tinta); }
.k-hay-floron .k-tinta { height: 5cqw; background: url(../assets/ui-floron.webp) center / auto 260% no-repeat; mix-blend-mode: multiply; }
.k-hay-floron .k-tinta::after { display: none; }
.k-tinta.k-claro { --tinta: #e8d6ae; background: radial-gradient(50% 50% at 50% 50%, var(--tinta) 0 38%, transparent 72%) center / 100% .3cqw no-repeat; mix-blend-mode: normal; }
.k-tinta.k-claro::after { display: block; }

/* ---- Etiqueta de cordel (precios, objetos) ---- */
.k-etiqueta { position: relative; display: inline-block; padding: 1.2cqw 2.6cqw 1.2cqw 5.4cqw; color: var(--tinta); font-family: var(--mano); font-size: max(3.8cqw, 13px); line-height: 1.15;
  rotate: var(--rot, 3deg); filter: drop-shadow(0 .5cqw .5cqw rgba(0, 0, 0, .5));
  background: var(--k-grano), linear-gradient(180deg, #c8a274, #b18a5a);
  clip-path: polygon(2.6cqw 0, 100% 0, 100% 100%, 2.6cqw 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 2.6cqw 50%, transparent .55cqw, #000 .6cqw); mask: radial-gradient(circle at 2.6cqw 50%, transparent .55cqw, #000 .6cqw); }
.k-etiqueta::before { content: ""; position: absolute; left: 1.6cqw; top: 50%; width: 2.1cqw; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; box-shadow: inset 0 0 0 .35cqw #8a6a3a; }
/* ui-etiqueta salió vertical: se queda el respaldo CSS (se ve mejor con el texto en horizontal). */

/* ---- Billete (premios, entradas, «número» del turno) ---- */
.k-ticket { position: relative; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 3.4cqw 1.4cqw 4.4cqw; color: var(--tinta);
  background: var(--k-grano), linear-gradient(180deg, #f1e4c2, #e0cc9c);
  box-shadow: inset 0 0 0 .5cqw #f1e4c2, inset 0 0 0 .7cqw rgba(142, 31, 27, .7), inset 0 0 0 .9cqw #f1e4c2, inset 0 0 0 1.05cqw rgba(142, 31, 27, .45);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .7cqw, #000 .75cqw) left / 100% 2.2cqw repeat-y; mask: radial-gradient(circle at 0 50%, transparent .7cqw, #000 .75cqw) left / 100% 2.2cqw repeat-y; }
.k-ticket-sombra { filter: drop-shadow(0 .6cqw .6cqw rgba(0, 0, 0, .5)); }
/* ui-ticket salió con letras inventadas pintadas: se queda el billete CSS. */
.k-num { font-family: var(--display); font-variant-numeric: lining-nums; color: var(--lacre); }

/* ---- Tampón de goma (NUEVO, HECHO, AGOTADO…). Tinta gastada con máscara de grano. ---- */
.k-tampon { display: inline-block; padding: .4cqw 1.6cqw .3cqw; font-family: var(--display); font-size: max(3.6cqw, 13px); letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-tampon, var(--lacre)); border: .45cqw solid currentColor; border-radius: .6cqw; rotate: var(--rot, -7deg); opacity: .88; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 .25cqw transparent, 0 0 0 .2cqw transparent; text-shadow: 0 0 .1cqw currentColor; }

/* ---- Sello de lacre (botón de confirmar importante) ---- */
.k-sello, button.k-sello { position: relative; display: inline-grid; place-items: center; width: var(--k-tam, 17cqw); aspect-ratio: 1; padding: 2.4cqw; text-align: center;
  font-family: var(--display); font-size: max(3.6cqw, 13px); line-height: 1; color: #f3c6b6;
  text-shadow: -.15cqw -.15cqw 0 rgba(40, 0, 0, .75), .12cqw .12cqw 0 rgba(255, 150, 130, .35);
  border: 0; border-radius: 47% 53% 50% 46% / 52% 45% 55% 48%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 170, 150, .55), transparent 22%), radial-gradient(circle at 50% 50%, var(--k-sello, var(--lacre)) 0 52%, color-mix(in srgb, var(--k-sello, var(--lacre)) 70%, #000) 60%, var(--k-sello, var(--lacre)) 68%, color-mix(in srgb, var(--k-sello, var(--lacre)) 55%, #000) 100%);
  box-shadow: inset .5cqw .5cqw 1cqw rgba(255, 170, 150, .3), inset -.7cqw -.7cqw 1.2cqw rgba(0, 0, 0, .5), 0 .8cqw 1.2cqw rgba(0, 0, 0, .55); }
.k-hay-sello .k-sello { background: url(../assets/ui-sello.webp) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 .8cqw .8cqw rgba(0, 0, 0, .5)) hue-rotate(var(--k-sello-giro, 0deg)); }
button.k-sello:hover { border-color: transparent; filter: brightness(1.1); }
button.k-sello:active { transform: scale(.94) rotate(-3deg); }

/* ---- Madera, cuero y libro de cuentas (fondos de paneles) ---- */
.k-madera { background: url(../assets/ui-madera.webp) center / cover, linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 4%, transparent 96%, rgba(0, 0, 0, .35)),
  repeating-linear-gradient(180deg, transparent 0 11.5cqw, rgba(0, 0, 0, .55) 11.5cqw 11.8cqw, rgba(255, 220, 170, .08) 11.8cqw 12cqw), var(--k-fibra),
  linear-gradient(180deg, #5a3a22, #3e2614); color: #f1e3c4; box-shadow: inset 0 0 4cqw rgba(0, 0, 0, .6); }
.k-cuero { color: #f1e3c4;
  background: linear-gradient(90deg, var(--hilo) 50%, transparent 0) left 1.2cqw top 1.2cqw / 1.8cqw 1px repeat-x, linear-gradient(90deg, var(--hilo) 50%, transparent 0) left 1.2cqw bottom 1.2cqw / 1.8cqw 1px repeat-x,
    linear-gradient(180deg, var(--hilo) 50%, transparent 0) left 1.2cqw top 1.2cqw / 1px 1.8cqw repeat-y, linear-gradient(180deg, var(--hilo) 50%, transparent 0) right 1.2cqw top 1.2cqw / 1px 1.8cqw repeat-y,
    radial-gradient(120% 90% at 30% 10%, rgba(255, 200, 140, .1), transparent 60%), url(../assets/ui-cuero.webp) center / 170% auto, var(--k-grano), linear-gradient(180deg, #432a19, #2a190e);
  border: 1px solid #120a05; box-shadow: inset 0 0 3cqw rgba(0, 0, 0, .55), 0 1.2cqw 2.4cqw rgba(0, 0, 0, .55); }
.k-libro { --renglon: 6.4cqw; position: relative; color: var(--tinta); line-height: var(--renglon);
  background: linear-gradient(90deg, transparent 8cqw, rgba(160, 40, 32, .55) 8cqw 8.25cqw, transparent 8.25cqw 8.8cqw, rgba(160, 40, 32, .35) 8.8cqw 9cqw, transparent 9cqw),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--renglon) - 1px), rgba(64, 92, 130, .32) calc(var(--renglon) - 1px) var(--renglon)) 0 3.6cqw / 100% 100% no-repeat,
    var(--k-papel-fondo); }
.k-hay-libro .k-libro { background: url(../assets/ui-libro.webp) center / cover; }

/* ---- Marco dorado tallado (retratos, cuadros) ---- */
.k-marco { position: relative; border: 1.3cqw solid #6b4a1e; background-origin: border-box;
  box-shadow: inset 0 0 0 .25cqw #c9a45a, inset 0 0 0 .5cqw #3a240c, inset 0 0 2cqw rgba(0, 0, 0, .7), 0 0 0 .22cqw #2a1a08, 0 0 0 .45cqw #9a7434, 0 0 0 .6cqw #2a1a08, 0 1cqw 1.6cqw rgba(0, 0, 0, .6); }
.k-hay-marco .k-marco { border-width: 2.4cqw; border-image: url(../assets/ui-marco.webp) 13% / 2.4cqw stretch; box-shadow: inset 0 0 2cqw rgba(0, 0, 0, .7), 0 1cqw 1.6cqw rgba(0, 0, 0, .6); }

/* ---- Botones ----
   Secundario (todo <button>): tapa de cuero cosida. Principal (.main): etiqueta de pergamino con su gota de lacre.
   Los módulos que ponen su propio background los sustituyen enteros (el cosido va en el background). */
button {
  font: inherit; font-size: 4cqw; color: #f1e3c4; text-align: left; cursor: pointer; padding: 2.6cqw 3.2cqw;
  background: linear-gradient(90deg, var(--hilo) 55%, transparent 0) left .9cqw top .8cqw / 1.6cqw 1px repeat-x, linear-gradient(90deg, var(--hilo) 55%, transparent 0) left .9cqw bottom .8cqw / 1.6cqw 1px repeat-x,
    radial-gradient(120% 140% at 30% 0%, rgba(255, 210, 150, .12), transparent 55%), url(../assets/ui-cuero.webp) center / 60cqw auto, var(--k-grano), linear-gradient(180deg, #46301d, #2b1b0f);
  border: 1px solid #120a05; border-radius: .7cqw;
  box-shadow: inset 0 1px 0 rgba(255, 222, 170, .16), inset 0 -.3cqw .6cqw rgba(0, 0, 0, .35), 0 .5cqw 1cqw rgba(0, 0, 0, .45);
  transition: border-color .2s, transform .1s, filter .2s, box-shadow .2s; }
button:hover { border-color: var(--laton); filter: brightness(1.08); }
button:active { transform: translateY(.25cqw); box-shadow: inset 0 .3cqw .8cqw rgba(0, 0, 0, .5), 0 .2cqw .4cqw rgba(0, 0, 0, .4); }
button:focus-visible { outline: .5cqw solid var(--laton-luz); outline-offset: .4cqw; }
button:disabled { filter: saturate(.4) brightness(.75); cursor: not-allowed; }
button.main { position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; color: var(--tinta); text-align: center;
  font-family: var(--display); font-weight: 400; letter-spacing: .02em; padding-inline: 5cqw; box-shadow: none; filter: var(--k-sombra); }
button.main::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-suave); mask: var(--k-suave);
  box-shadow: inset 0 0 1.6cqw rgba(110, 62, 18, .45); transition: filter .2s; }
/* Gota de lacre en la esquina: «este es el que toca». */
button.main::after { content: ""; position: absolute; right: -1.2cqw; top: -1.4cqw; width: 5cqw; aspect-ratio: 1; border-radius: 47% 53% 50% 46% / 52% 45% 55% 48%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 170, 150, .6), transparent 26%), radial-gradient(circle, var(--lacre) 0 50%, var(--lacre2) 64%, var(--lacre) 74%, var(--lacre2));
  box-shadow: 0 .3cqw .5cqw rgba(0, 0, 0, .5); }
.k-hay-sello button.main::after { background: url(../assets/ui-sello.webp) center / contain no-repeat; box-shadow: none; }
button.main:hover { filter: var(--k-sombra) brightness(1.06); }
button.main:active { transform: translateY(.3cqw) rotate(-.4deg); box-shadow: none; }
button.main:disabled::after { filter: grayscale(1); opacity: .5; }
button.ghost { background: radial-gradient(120% 140% at 30% 0%, rgba(255, 210, 150, .08), transparent 55%), var(--k-grano), rgba(30, 19, 10, .72); box-shadow: inset 0 1px 0 rgba(255, 222, 170, .1); }
.bar button { font-size: 13px; }

/* ---------- Núcleo: capa de interfaz ---------- */
.uilayer { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.uilayer > * { pointer-events: auto; }
.fxlayer { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }

/* Marcador: una tira de pergamino clavada arriba (almanaque del día). */
.hud { position: absolute; left: 3%; right: calc(3% + max(13.5cqw, 64px)); top: calc(2% + env(safe-area-inset-top, 0px)); display: flex; gap: 1cqw; align-items: center; justify-content: space-between;
  font-size: max(3.3cqw, 12px); padding: 1.5cqw 2.4cqw; isolation: isolate; color: var(--tinta); filter: var(--k-sombra); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter .3s, transform .15s; }
.hud::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-suave); mask: var(--k-suave); box-shadow: inset 0 0 1.4cqw rgba(110, 62, 18, .5); }
.k-hay-tira .hud::before { background: url(../assets/ui-tira.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -.6cqw -1.2cqw; }
.hud span { display: inline-flex; align-items: center; gap: 1cqw; white-space: nowrap; font-weight: 700; }
.hud .h-when { font-family: var(--display); font-weight: 400; font-size: max(4cqw, 13px); color: var(--tinta); }
/* Luces: una llama de tinta y oro; se llena por abajo con las luces de hoy (--k = hoy / tope). */
.hud .h-luz::before { content: ""; width: max(2.6cqw, 10px); aspect-ratio: 1; flex: none; margin: 0 .3cqw 0 .5cqw; border-radius: 50% 0 50% 50%; rotate: -45deg;
  background: linear-gradient(45deg, #f0a23a 0 calc(var(--k, 0) * 100%), rgba(214, 150, 60, .38) 0); box-shadow: inset 0 0 0 .25cqw #7a3a0c; }
.hud .h-luz.llena::before { background: radial-gradient(circle at 35% 65%, #fff 0 16%, #ffd36e 38%, #e07a1e 85%); box-shadow: inset 0 0 0 .3cqw #7a3a0c, 0 0 2cqw #ffb444; animation: fl 2.2s infinite ease-in-out; }
.hud .h-gal::before { content: ""; width: max(3.4cqw, 13px); aspect-ratio: 1; flex: none; background: url(../assets/galeon.webp) center / contain no-repeat; filter: drop-shadow(0 .2cqw .2cqw rgba(0, 0, 0, .45)); }
.hud .h-xp { color: var(--tinta2); font-weight: 500; padding-bottom: .5cqw;
  background: radial-gradient(50% 50% at 50% 50%, var(--lacre) 30%, transparent 80%) left bottom / calc(var(--p, 0) * 100%) max(.5cqw, 2px) no-repeat,
    linear-gradient(rgba(90, 60, 30, .25), rgba(90, 60, 30, .25)) left bottom / 100% 1px no-repeat; transition: background-size .9s ease-out; }
/* Franjas: sol, atardecer y luna (G.ui.franja); la de ahora, grande y encendida; las pasadas, gastadas; las que vienen, apagadas. */
.hud span.h-pips { display: inline-flex; gap: .3cqw; align-items: center; }
.hud .h-pips i { --fr: 4.8cqw; opacity: .85; filter: saturate(.8); transition: all .4s; }
.hud .h-pips i.ya { opacity: .4; filter: saturate(.3) sepia(.4); }
/* Pasada sin hacer: se ve entera y lleva una gotita de lacre (aún puedes hacerla hoy). */
.hud .h-pips i.debe { opacity: 1; filter: none; background: radial-gradient(circle max(.8cqw, 3.2px) at 84% 86%, var(--lacre-luz) 0 22%, var(--lacre) 58%, var(--lacre2) 90%, transparent 100%); }
.hud .h-pips i.ahora { --fr: 6.2cqw; opacity: 1; filter: drop-shadow(0 0 .9cqw rgba(255, 190, 90, .8)); margin: -1.2cqw 0; }
.hud .h-pips i.f2.ahora { filter: drop-shadow(0 0 .8cqw rgba(170, 200, 255, .9)) drop-shadow(0 0 .15cqw #1d1430); }
.hud .h-pips i.ya.ahora { opacity: .8; filter: sepia(.35) saturate(.7); }
.hud span.bump { animation: hudbump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hudbump { 0% { transform: scale(1); } 40% { transform: scale(1.35); filter: brightness(1.3); } 100% { transform: scale(1); } }
.hud:hover, .hud:focus-visible { outline: none; filter: var(--k-sombra) brightness(1.05); }
.hud:active { transform: translateY(.3cqw); }
/* Sonido: un papelito (ui-nota) con la bocina de latón (ui-altavoz o su respaldo) y dos ondas a pluma. Silenciado: las ondas se van
   y una cruz fina de tinta roja tacha solo ese hueco; la bocina se sigue viendo. Sin letras. */
/* Margen a la derecha (max(1.6cqw, 6px)) para que el papelito, girado, se vea entero también en un teléfono de 360 px. */
.nucleo-snd { position: absolute; right: calc(3% + max(1.6cqw, 6px)); top: calc(2% + env(safe-area-inset-top, 0px)); height: calc(max(3.3cqw, 12px) * 1.25 + 3cqw); width: max(11cqw, 56px); z-index: 2;
  isolation: isolate; display: flex; align-items: center; justify-content: flex-start; padding: 0 0 0 max(1.6cqw, 7px); border: 0; border-radius: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 .4cqw .5cqw rgba(0, 0, 0, .6)); rotate: 2deg; -webkit-tap-highlight-color: transparent; }
.nucleo-snd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-suave); mask: var(--k-suave);
  box-shadow: inset 0 0 1.2cqw rgba(110, 62, 18, .5); }
.k-hay-nota .nucleo-snd::before { background: url(../assets/ui-nota.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -.5cqw -.7cqw; }
.nucleo-snd:hover { filter: drop-shadow(0 .4cqw .5cqw rgba(0, 0, 0, .6)) brightness(1.06); }
.nucleo-snd:active { transform: translateY(.3cqw) scale(.95); box-shadow: none; }
.nucleo-snd i { position: relative; width: max(5.4cqw, 26px); height: max(5cqw, 24px); flex: none; filter: drop-shadow(0 0 .12cqw #3a2408) drop-shadow(0 .15cqw .1cqw rgba(60, 34, 8, .55)); }
/* Respaldo: cuerpo y bocina de latón (::before) con el borde de la boca (::after, redondo porque la boca lo es). */
.nucleo-snd i::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 31%, 30% 31%, 94% 1%, 100% 0, 100% 100%, 94% 99%, 30% 69%, 0 69%);
  background: radial-gradient(60% 40% at 55% 30%, rgba(255, 246, 210, .75), transparent 70%), var(--k-grano), linear-gradient(180deg, #f6dc8a, #d09a38 30%, #9a6a1e 66%, #4e320c); }
.nucleo-snd i::after { content: ""; position: absolute; right: -.4cqw; top: -2%; bottom: -2%; width: 1.3cqw; border-radius: 50%;
  background: linear-gradient(90deg, #3b2a0c, #8a6526 40%, #f0d898 75%, #a07a32); box-shadow: inset 0 0 .2cqw rgba(40, 24, 4, .8); }
/* Ondas: dos trazos de pluma (gruesos en medio, finos en las puntas), en tinta. */
.nucleo-snd s { position: absolute; left: calc(max(1.6cqw, 7px) + max(5.4cqw, 26px) - .6cqw); top: -6%; bottom: -6%; width: max(4.4cqw, 21px); pointer-events: none; transition: opacity .3s;
  background: var(--tinta);
  --m1: radial-gradient(circle farthest-side at 0 50%, transparent 0 36%, #000 38% 50%, transparent 52% 70%, #000 72% 84%, transparent 86%);
  --m2: linear-gradient(transparent 10%, #000 38% 62%, transparent 90%);
  -webkit-mask: var(--m1), var(--m2); -webkit-mask-composite: source-in; mask: var(--m1), var(--m2); mask-composite: intersect; }
.nucleo-snd.off s { opacity: .18; }
/* Silenciado: el latón se apaga un poco y una cruz fina de tinta roja tacha las ondas (no la bocina). */
.nucleo-snd.off i { filter: saturate(.85) brightness(.92) drop-shadow(0 .15cqw .1cqw rgba(60, 34, 8, .55)); }
.nucleo-snd b.tacha { position: absolute; top: 25%; bottom: 25%; right: 14%; width: 34%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(to top right, transparent calc(50% - max(.28cqw, 1.1px)), #a3241c 0 calc(50% + max(.28cqw, 1.1px)), transparent 0),
    linear-gradient(to bottom right, transparent calc(50% - max(.24cqw, 1px)), #8e1f1b 0 calc(50% + max(.24cqw, 1px)), transparent 0); }
.nucleo-snd.off b.tacha { opacity: 1; animation: nucleo-tacha .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes nucleo-tacha { from { transform: scale(1.5); opacity: 0; } }
.k-hay-altavoz .nucleo-snd i { width: max(6.4cqw, 30px); background: url(../assets/ui-altavoz.webp) center / contain no-repeat; }
.k-hay-altavoz .nucleo-snd i::before, .k-hay-altavoz .nucleo-snd i::after { display: none; }
.k-hay-altavoz .nucleo-snd s { left: calc(max(1.6cqw, 7px) + max(6.4cqw, 30px) - .6cqw); }
/* El papel lleva tinta: lo que un módulo pinte con --muted dentro de un papel sale en tinta clara, no en gris de noche (1,5:1). */
.k-papel, .k-nota, .k-libro, .k-etiqueta, .k-ticket, .dlgbox, .nucleo-panel, .toast { --muted: var(--tinta2); }
.nucleo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Diálogo: hoja de pergamino rasgada; el retrato, en su marco tallado, asoma por encima del papel. */
.dlg { position: absolute; left: 4%; right: 4%; bottom: 3%; }
.dlgbox { position: relative; isolation: isolate; display: flex; gap: 3.4cqw; align-items: flex-start; padding: 4.6cqw 5cqw 3.6cqw; cursor: pointer; color: var(--tinta);
  filter: var(--k-sombra); animation: dlgin .45s cubic-bezier(.3, 1.3, .5, 1); }
.dlgbox::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--k-papel-fondo); -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado);
  box-shadow: inset 0 0 2.6cqw rgba(90, 50, 14, .5); }
.k-hay-hoja-ancha .dlgbox:not(.choose)::before { background: url(../assets/ui-hoja-ancha.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -1.4cqw -1.6cqw; }
/* Las opciones crecen hacia arriba: la hoja ancha pintada se estiraría; va el papel con la máscara (o la hoja alta si hay 4 o más). */
.k-hay-hoja-alta .dlgbox.choose.k-larga::before { background: url(../assets/ui-hoja-alta.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -1.6cqw -1.4cqw; }
.dlgbox::after { content: none; }
@keyframes dlgin { from { opacity: 0; transform: translateY(4cqw) rotate(.8deg); } 60% { transform: translateY(-.4cqw) rotate(-.2deg); } }
.dlgface { position: relative; width: 21cqw; aspect-ratio: 4 / 5; flex: none; margin: -9.5cqw 0 0 -1.4cqw; rotate: -2.5deg; overflow: hidden; background: #1a140c;
  border: 1.3cqw solid #6b4a1e; box-shadow: inset 0 0 0 .25cqw #c9a45a, inset 0 0 0 .5cqw #3a240c, 0 0 0 .22cqw #2a1a08, 0 0 0 .45cqw #9a7434, 0 0 0 .6cqw #2a1a08, 0 1.2cqw 1.6cqw rgba(0, 0, 0, .6); }
.k-hay-marco .dlgface { border-width: 2.2cqw; border-image: url(../assets/ui-marco.webp) 13% / 2.2cqw stretch; box-shadow: 0 1.2cqw 1.6cqw rgba(0, 0, 0, .6); }
/* El marco recorta un poco por abajo y por los lados: así no se ve la firma inventada que traen algunos retratos. */
.dlgface img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; transform: scale(1.18); transform-origin: 50% 30%; }
.dlgface::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 2.4cqw rgba(0, 0, 0, .7); background: radial-gradient(80% 60% at 30% 15%, rgba(255, 210, 140, .14), transparent 60%); }
.dlgcol { flex: 1; display: flex; flex-direction: column; gap: 1.2cqw; min-width: 0; }
.dlgwho { font-family: var(--display); font-size: max(4.6cqw, 16px); color: var(--lacre); letter-spacing: .02em; line-height: 1.05; padding-bottom: 1.2cqw;
  background: radial-gradient(50% 50% at 0% 50%, var(--tinta2) 0 30%, transparent 75%) left bottom / 70% .3cqw no-repeat; }
.dlgtext { font-size: max(4.4cqw, 15px); line-height: 1.38; min-height: 2.8em; color: var(--tinta); }
.dlgmore { font-family: var(--titulo); font-style: italic; font-size: max(3.4cqw, 12px); color: var(--sepia); text-align: right; opacity: 0; transition: opacity .3s;
  display: flex; justify-content: flex-end; align-items: center; gap: 1.6cqw; }
/* Plumilla: una flecha de tinta que empuja hacia la derecha. */
.dlgmore::after { content: ""; width: 1.8cqw; aspect-ratio: 1; border: solid var(--lacre); border-width: .4cqw .4cqw 0 0; rotate: 45deg; animation: dlgpulso 1.2s ease-in-out infinite; }
@keyframes dlgpulso { 0%, 100% { translate: 0 0; opacity: .6; } 50% { translate: .8cqw 0; opacity: 1; } }

/* Opciones: una lista escrita en el pergamino, con una cinta de título. */
.dlgbox.choose { flex-direction: column; gap: 0; cursor: default; padding: 5cqw 5cqw 3.4cqw; }
.dlgbox.choose > .dlgwho { align-self: center; margin: -8cqw 0 1.8cqw; padding: 1.4cqw 7cqw 1.6cqw; color: #f8ead0; text-shadow: 0 .2cqw .3cqw rgba(0, 0, 0, .6); text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 30%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .32)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 .3cqw, transparent .3cqw .9cqw), var(--lacre);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.2cqw) 50%, 100% 100%, 0 100%, 3.2cqw 50%); }
.k-hay-cinta2 .dlgbox.choose > .dlgwho { background: none; clip-path: none; border: 0 solid transparent; border-width: 1cqw 6cqw; padding: .4cqw 1cqw .6cqw; border-image: url(../assets/ui-cinta2.webp) 25% 22% fill / 1cqw 6cqw stretch; }
.dlgbox .opt { position: relative; display: flex; flex-direction: column; gap: .5cqw; width: 100%; min-height: 11cqw; justify-content: center; padding: 2.2cqw 2cqw 2.2cqw 7cqw;
  color: var(--tinta); background: radial-gradient(50% 50% at 50% 50%, rgba(90, 60, 30, .5) 0 30%, transparent 80%) center bottom / 100% 1px no-repeat;
  border: 0; border-radius: 0; box-shadow: none; filter: none; opacity: 0; animation: optin .35s forwards; }
.dlgbox .opt:last-child { background: none; }
.dlgbox .opt b { font-size: max(4.3cqw, 15px); font-weight: 700; color: var(--tinta); }
.dlgbox .opt small { color: var(--sepia); font-style: italic; font-size: max(3.4cqw, 12px); }
/* Rombo de tinta delante de cada línea; al tocar se rellena de lacre. */
.dlgbox .opt::before { content: ""; position: absolute; left: 2.2cqw; top: 50%; width: 1.8cqw; aspect-ratio: 1; translate: 0 -50%; rotate: 45deg; border: .35cqw solid var(--tinta2); transition: background .2s, border-color .2s; }
.dlgbox .opt:not(:disabled):hover { border-color: transparent; filter: none; background-color: rgba(120, 80, 30, .1); }
.dlgbox .opt:not(:disabled):hover::before, .dlgbox .opt:not(:disabled):active::before { background: var(--lacre); border-color: var(--lacre2); }
.dlgbox .opt:not(:disabled):active { transform: translateX(.6cqw); box-shadow: none; }
.dlgbox .opt:disabled { opacity: .7 !important; cursor: not-allowed; filter: none; }
.dlgbox .opt:disabled small { color: var(--tinta); } /* el motivo («Te faltan 6 galeones») se lee entero: solo el título va tachado */
.dlgbox .opt:disabled b { text-decoration: line-through; text-decoration-color: rgba(90, 60, 30, .5); }

/* Avisos: un papelito rasgado que cae columpiándose. */
.toasts { position: absolute; left: 0; right: 0; top: 11%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; pointer-events: none !important; }
.toasts .toast { pointer-events: auto; cursor: pointer; } /* tocar el papelito lo quita */
#stage[data-escena="criatura"] .toasts { top: 21%; } /* en la sala de la criatura, debajo de la cartela con su nombre */
#stage[data-escena="mapa"] .toasts { top: 24%; } /* en el mapa, debajo del horario de papel (sol, atardecer y luna) */
.toast { position: relative; isolation: isolate; font-size: max(3.8cqw, 13px); line-height: 1.3; padding: 2.4cqw 4.4cqw; color: var(--tinta); max-width: 82%; text-align: center;
  filter: var(--k-sombra); rotate: -1.2deg; animation: toastin .55s cubic-bezier(.3, 1.4, .5, 1); transition: opacity .5s, transform .5s; }
.toast:nth-child(even) { rotate: 1.4deg; }
.toast::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado); box-shadow: inset 0 0 1.4cqw rgba(110, 62, 18, .45); }
.k-hay-nota .toast::before { background: url(../assets/ui-nota.webp) center / 100% 100%; -webkit-mask: none; mask: none; box-shadow: none; inset: -.6cqw -1cqw; }
.toast.out { opacity: 0; transform: translateY(-3cqw) rotate(2deg); }
@keyframes toastin { from { opacity: 0; transform: translateY(-6cqw) rotate(-6deg); } 60% { opacity: 1; transform: translateY(.6cqw) rotate(2deg); } }

/* Premios: billetes estampados que se sellan en el aire y suben. */
.reward { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; animation: rewardup 2.6s ease-out forwards; filter: drop-shadow(0 .8cqw .8cqw rgba(0, 0, 0, .55)); }
.reward .rw { font-family: var(--display); font-size: max(5.6cqw, 19px); white-space: nowrap; color: var(--tinta); padding: 1.2cqw 4cqw 1.2cqw 5cqw; rotate: -2deg;
  background: var(--k-grano), linear-gradient(180deg, #f1e4c2, #e0cc9c);
  box-shadow: inset 0 0 0 .5cqw #f1e4c2, inset 0 0 0 .7cqw rgba(142, 31, 27, .7), inset 0 0 0 .9cqw #f1e4c2, inset 0 0 0 1.05cqw rgba(142, 31, 27, .45);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .7cqw, #000 .75cqw) left / 100% 2.2cqw repeat-y; mask: radial-gradient(circle at 0 50%, transparent .7cqw, #000 .75cqw) left / 100% 2.2cqw repeat-y;
  animation: rwsella .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.reward .rw:nth-child(2) { rotate: 2.5deg; animation-delay: .12s; } .reward .rw:nth-child(3) { rotate: -1deg; animation-delay: .24s; } .reward .rw:nth-child(4) { rotate: 1.8deg; animation-delay: .36s; }
.rw.luz { color: #7a3a08; } .rw.gal { color: #6a4a0a; } .rw.xp { color: #1f3a66; } .rw.ing { color: #2f5a22; font-size: max(4.4cqw, 15px); }
@keyframes rwsella { from { opacity: 0; transform: scale(1.6); } 70% { opacity: 1; transform: scale(.94); } }
@keyframes rewardup { 0% { opacity: 0; transform: translate(-50%, 20px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.flashfx { position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 50%, var(--c), transparent 72%); mix-blend-mode: screen; animation: flash 1s ease-out forwards; }
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; width: .9cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 1.8cqw var(--c); opacity: 0; animation: moteup linear infinite; }
@keyframes moteup { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .6; } 100% { opacity: 0; transform: translate(4cqw, -40cqw); } }

/* ---------- Núcleo: premios que vuelan, velo entre escenas, móvil a pantalla completa ---------- */
.nucleo-vuela { position: absolute; left: 0; top: 0; width: 3.4cqw; aspect-ratio: 1; margin: -1.7cqw 0 0 -1.7cqw; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0; }
.nucleo-vuela.luz { background: radial-gradient(circle, #fff 0 15%, #fff3cf 30%, var(--house) 60%, transparent 72%); box-shadow: 0 0 3cqw var(--house), 0 0 1cqw #fff3cf; }
.nucleo-vuela.gal { width: 3.6cqw; border-radius: 0; background: url(../assets/galeon.webp) center / contain no-repeat; filter: drop-shadow(0 0 1cqw rgba(255, 200, 80, .7)); }
.nucleo-vuela.xp { width: 2.4cqw; background: radial-gradient(circle, #fff 0 20%, #b9d2ff 50%, transparent 72%); box-shadow: 0 0 2cqw #8fb4ff; }
/* Al cambiar de escena, la luz baja un instante, como una vela que parpadea. */
.nucleo-velo { position: absolute; inset: 0; pointer-events: none !important; opacity: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(5, 8, 14, .35), rgba(5, 8, 14, .85)); }
.nucleo-velo.on { animation: nucleo-velo .9s ease-out; }
@keyframes nucleo-velo { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
img.nucleo-reserva { opacity: .92; }
.small { font-size: max(3.4cqw, 12px); }
.lab { font-size: max(3.2cqw, 12px); }
@media (max-aspect-ratio: 832/1216) {
  body { padding: 0; margin: 0; overflow: hidden; }
  .app { max-width: none; gap: 0; }
  .bar { display: none; }
  html::before { display: none; }
  .stage { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; min-width: 0; max-width: none; box-sizing: border-box; border: 0; border-image: none; box-shadow: none; }
  .dlg { bottom: calc(3% + env(safe-area-inset-bottom, 0px)); }
}
/* Título fuera del escenario: placa de latón grabada (ui-placa.webp) atornillada al muro, encima del cuadro.
   Fuera del escenario no hay contenedor: cqw sería de la ventana, por eso va en px. */
.bar { justify-content: center; }
.bar .lab { font-size: 17px; font-family: var(--display); letter-spacing: .12em; text-transform: none; color: #2e1f08; padding: 9px 46px 10px; rotate: -.6deg;
  text-shadow: 0 1px 0 rgba(255, 238, 190, .55), 0 -1px 0 rgba(40, 24, 4, .35);
  background: url(../assets/ui-placa.webp) center / 100% 100% no-repeat, linear-gradient(180deg, #c8a458, #a8843f 40%, #8c6a2c 62%, #b08c48);
  border-radius: 3px; box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
/* Dos apliques con vela a los lados del cuadro (ui-aplique.webp); sin pieza pintada, solo su halo de luz, que tiembla. */
@media (min-aspect-ratio: 832/1216) {
  body { --cuadro: min(calc(100vw - 52px), calc((100dvh - 162px) * 832 / 1216 + 52px), 544px); } /* ancho del cuadro con su marco */
  body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; top: calc(46vh - 120px); width: 120px; height: 240px;
    left: calc(50% - var(--cuadro) / 2 - 150px); background: url(../assets/ui-aplique.webp) center bottom / contain no-repeat, radial-gradient(closest-side at 50% 30%, rgba(255, 176, 80, .28), transparent);
    filter: drop-shadow(0 0 30px rgba(255, 170, 70, .45)) drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); animation: fl 3.4s infinite ease-in-out; }
  body::after { left: calc(50% + var(--cuadro) / 2 + 30px); animation-delay: -1.3s; }
}
@media (min-aspect-ratio: 832/1216) and (max-width: 900px) { body::before, body::after { display: none; } }

/* ---------- Núcleo: ¡curso nuevo! (G.fx.curso) ---------- */
.nucleo-curso { position: absolute; left: 0; right: 0; top: 14%; height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 4;
  animation: nucleo-curso-in .6s cubic-bezier(.3, 1.4, .5, 1) both; transition: opacity .6s, transform .6s; }
.nucleo-curso.fuera { opacity: 0; transform: translateY(-4cqw) scale(.96); }
.nucleo-curso .rayos { position: absolute; left: 50%; top: 34%; width: 120cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .45;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 164, .22) 0 6deg, transparent 6deg 18deg);
  mask: radial-gradient(circle closest-side, #000 10%, transparent 72%); -webkit-mask: radial-gradient(circle closest-side, #000 10%, transparent 72%); animation: nucleo-gira 14s linear infinite; }
.nucleo-curso .halo { position: absolute; left: 50%; top: 34%; width: 62cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 246, 216, .75), color-mix(in srgb, var(--hc) 55%, #ffcf7a) 35%, transparent 72%); mix-blend-mode: screen; animation: fl 1.8s infinite ease-in-out; }
.nucleo-curso .esc { position: relative; width: 30cqw; aspect-ratio: 1; filter: drop-shadow(0 1.6cqw 2cqw rgba(0, 0, 0, .7)) drop-shadow(0 0 3cqw rgba(255, 210, 130, .6)); animation: nucleo-cae .9s cubic-bezier(.25, 1.5, .5, 1) both; }
.nucleo-curso .esc img { width: 100%; height: 100%; object-fit: contain; display: block; max-width: none; }
/* Curso que regala una carta: la carta cae girada en lugar del escudo. */
.nucleo-curso.con-carta .esc { width: auto; aspect-ratio: auto; rotate: -4deg; }
.nucleo-curso.con-carta .esc .duelo-carta { pointer-events: none; }
.nucleo-curso .tx { position: relative; isolation: isolate; margin-top: 1cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; padding: 3.4cqw 7cqw 3.6cqw; max-width: 84%; text-align: center;
  color: var(--tinta); filter: var(--k-sombra); rotate: -1deg; }
.nucleo-curso .tx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--k-papel-fondo); -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado); box-shadow: inset 0 0 2cqw rgba(90, 50, 14, .5); }
.nucleo-curso small { font-family: var(--titulo); font-style: italic; font-size: max(4cqw, 14px); color: var(--sepia); }
.nucleo-curso b { font-family: var(--display); font-weight: 400; font-size: max(10cqw, 34px); line-height: 1; color: var(--lacre); text-shadow: 0 .2cqw 0 rgba(255, 240, 210, .5);
  animation: nucleo-num .9s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.nucleo-curso em { font-style: normal; font-weight: 700; font-size: max(4.4cqw, 15px); color: var(--tinta); margin-top: .6cqw; }
.nucleo-curso span { font-size: max(3.6cqw, 13px); color: var(--tinta2); line-height: 1.3; }
.nucleo-curso .rg { margin-top: .4cqw; font-weight: 700; color: #6a4a0a; }
.nucleo-curso.quieto, .nucleo-curso.quieto * { animation: none !important; }
@keyframes nucleo-curso-in { from { opacity: 0; transform: scale(.85); } }
@keyframes nucleo-cae { 0% { opacity: 0; transform: translateY(-14cqw) scale(.6) rotate(-8deg); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes nucleo-num { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes nucleo-gira { to { rotate: 360deg; } }

/* ---------- Núcleo: el marcador se toca → «Tu semana» (G.marcador): una página del libro de cuentas ---------- */
/* Sol, atardecer y luna (G.ui.franja): pintados cuando existen ui-sol / ui-atardecer / ui-luna; mientras, sol y ocaso hechos de luz y la luna pintada. */
.nucleo-franja { --fr: 5cqw; position: relative; display: inline-block; flex: none; width: var(--fr); height: var(--fr); vertical-align: middle; font-style: normal; }
.nucleo-franja::before, .nucleo-franja::after { content: ""; position: absolute; inset: 0; }
.nucleo-franja.f0::before { --m: radial-gradient(circle, transparent 0 calc(var(--fr) * .33), #000 calc(var(--fr) * .34) calc(var(--fr) * .42), rgba(0, 0, 0, .3) calc(var(--fr) * .49), transparent calc(var(--fr) * .5));
  background: repeating-conic-gradient(from 4deg, #d9821c 0 10deg, transparent 10deg 30deg); -webkit-mask: var(--m); mask: var(--m); }
.nucleo-franja.f0::after { inset: 18%; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #fffbe6 0 10%, #ffe07a 30%, #f5a832 62%, #c8641a 92%);
  box-shadow: 0 0 calc(var(--fr) * .2) rgba(255, 176, 60, .75), inset 0 0 calc(var(--fr) * .05) rgba(150, 60, 10, .6); }
/* Ocaso: el mismo sol (mismo tamaño y rayos) medio hundido tras una loma de tinta, con el cielo encendido y su reflejo abajo. */
.nucleo-franja.f1::before { --m: radial-gradient(circle at 50% 66%, transparent 0 calc(var(--fr) * .43), #000 calc(var(--fr) * .44) calc(var(--fr) * .53), rgba(0, 0, 0, .3) calc(var(--fr) * .58), transparent calc(var(--fr) * .6)), linear-gradient(#000 0 0) top / 100% 64% no-repeat;
  background: repeating-conic-gradient(from -86deg at 50% 66%, #d0581e 0 10deg, transparent 10deg 28deg);
  -webkit-mask: var(--m); -webkit-mask-composite: source-in; mask: var(--m); mask-composite: intersect; }
.nucleo-franja.f1::after {
  background: radial-gradient(circle at 50% 100%, #fff4cc 0 calc(var(--fr) * .07), #ffc25a calc(var(--fr) * .17), #f07a24 calc(var(--fr) * .29), #c0461a calc(var(--fr) * .38), #8a2c12 calc(var(--fr) * .395), transparent calc(var(--fr) * .405)) 50% 0 / 100% 66% no-repeat,
    linear-gradient(90deg, transparent, #4a220c 7% 93%, transparent) 50% 66% / 100% calc(var(--fr) * .075) no-repeat,
    linear-gradient(90deg, transparent, #f08a2c 22% 78%, transparent) 50% 78% / 76% calc(var(--fr) * .06) no-repeat,
    linear-gradient(90deg, transparent, #e0662a 25% 75%, transparent) 50% 88% / 50% calc(var(--fr) * .055) no-repeat,
    linear-gradient(90deg, transparent, #c0461a 30% 70%, transparent) 50% 97% / 26% calc(var(--fr) * .05) no-repeat,
    radial-gradient(60% 44% at 50% 64%, rgba(255, 120, 60, .55), transparent 75%);
  box-shadow: none; filter: drop-shadow(0 0 calc(var(--fr) * .08) rgba(255, 120, 50, .7)); }
.nucleo-franja.f2::after { inset: 8%; background: url(../assets/luna.webp) center / contain no-repeat; filter: drop-shadow(0 0 calc(var(--fr) * .04) #1b1530) drop-shadow(0 0 calc(var(--fr) * .12) rgba(170, 195, 255, .65)); }
.k-hay-sol .nucleo-franja.f0::before, .k-hay-atardecer .nucleo-franja.f1::before { display: none; }
.k-hay-sol .nucleo-franja.f0::after { inset: 0; border-radius: 0; box-shadow: none; background: url(../assets/ui-sol.webp) center / contain no-repeat; }
/* ui-atardecer salió apaisado (256×64): ocupa todo el ancho y algo más, apoyado abajo, para que no se quede en una rayita. */
.k-hay-atardecer .nucleo-franja.f1::after { inset: 0 -22% 30%; background: url(../assets/ui-atardecer.webp) center bottom / 100% auto no-repeat; filter: none; }
.k-hay-luna .nucleo-franja.f2::after { inset: 0; background-image: url(../assets/ui-luna.webp); }
.nucleo-panel { position: absolute; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding-top: calc(11% + env(safe-area-inset-top, 0px));
  background: radial-gradient(90% 60% at 50% 30%, rgba(8, 10, 18, .5), rgba(4, 6, 12, .85)); animation: nucleo-panel-in .3s ease-out both; transition: opacity .25s; cursor: pointer; }
.nucleo-panel.fuera { opacity: 0; }
.nucleo-panel .caja { position: relative; isolation: isolate; width: 88%; max-height: 84%; overflow: auto; display: flex; flex-direction: column; gap: 2cqw; padding: 5cqw 5.4cqw 4.4cqw 11cqw;
  color: var(--tinta); filter: var(--k-sombra); rotate: -.6deg; animation: nucleo-panel-baja .5s cubic-bezier(.3, 1.3, .5, 1) both; transform-origin: 50% 0; scrollbar-width: thin; }
.nucleo-panel .caja::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-mask: var(--k-rasgado); mask: var(--k-rasgado); box-shadow: inset 0 0 2.6cqw rgba(90, 50, 14, .5);
  background: linear-gradient(90deg, transparent 8cqw, rgba(160, 40, 32, .5) 8cqw 8.25cqw, transparent 8.25cqw 8.8cqw, rgba(160, 40, 32, .32) 8.8cqw 9cqw, transparent 9cqw), var(--k-papel-fondo); }
.k-hay-libro .nucleo-panel .caja::before { background: url(../assets/ui-libro.webp) center / cover; }
.nucleo-panel section { display: flex; flex-direction: column; gap: 1.2cqw; padding-bottom: 2.4cqw; animation: nucleo-panel-sec .5s both;
  background: radial-gradient(50% 50% at 50% 50%, var(--tinta2) 0 30%, transparent 78%) center bottom / 100% .3cqw no-repeat; }
.nucleo-panel section:nth-of-type(2) { animation-delay: .07s; } .nucleo-panel section:nth-of-type(3) { animation-delay: .14s; } .nucleo-panel section:last-of-type { background: none; padding-bottom: 0; }
.nucleo-panel .tit { font-family: var(--display); font-size: max(5.2cqw, 18px); color: var(--lacre); line-height: 1.05; }
.nucleo-panel .tit small { font-family: var(--body); font-size: max(3.4cqw, 12px); color: var(--sepia); margin-left: 1.4cqw; font-style: italic; }
.nucleo-panel p { margin: 0; font-size: max(3.6cqw, 13px); line-height: 1.3; color: var(--tinta); }
.nucleo-panel p b { color: #1d1209; }
.nucleo-panel p.peq { font-size: max(3.3cqw, 12px); color: var(--sepia); font-style: italic; }
/* Camino al Torneo: cinco días unidos por un trazo de pluma (andado = tinta, por andar = puntos). Pasados, tachados con una cruz;
   hoy, rodeado de rojo; el viernes, la copa. Debajo, la cuenta en grande. */
.nucleo-panel .tit .nucleo-franja { --fr: 7cqw; margin: -1.5cqw 0 -1.5cqw .8cqw; }
.nucleo-panel .dias { display: flex; align-items: flex-end; padding: 0; margin-top: -9cqw; }
.nucleo-panel .dias > s { flex: 1; min-width: 1.4cqw; height: 0; margin: 0 .6cqw 4.6cqw; border-top: .5cqw dotted var(--tinta2); opacity: .7; }
.nucleo-panel .dias > s.ya { border-top: .45cqw solid var(--tinta2); opacity: .55; }
.nucleo-panel .dias i { position: relative; flex: none; width: 9cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 1.6cqw; }
.nucleo-panel .dias i b { font-family: var(--display); font-weight: 400; font-size: max(5.4cqw, 18px); line-height: 1; color: var(--tinta); }
.nucleo-panel .dias i.ya b { color: var(--sepia); opacity: .55; }
.nucleo-panel .dias i.ya::before { content: ""; position: absolute; left: 4%; right: 4%; top: -1.6cqw; bottom: .2cqw;
  background: linear-gradient(to top right, transparent 45%, var(--tinta) 46% 52%, transparent 53%), linear-gradient(to bottom right, transparent 46%, var(--tinta2) 47% 52%, transparent 53%); opacity: .85; }
.nucleo-panel .dias i.hoy::before { content: ""; position: absolute; left: -1.6cqw; right: -1.6cqw; top: -1.8cqw; bottom: .2cqw; border: .5cqw solid var(--lacre); border-radius: 52% 46% 55% 44% / 48% 56% 42% 52%; rotate: -8deg;
  border-top-color: color-mix(in srgb, var(--lacre) 60%, transparent); }
.nucleo-panel .dias i.hoy b { color: var(--lacre); }
.nucleo-panel .dias i.torneo { width: 19cqw; }
.nucleo-panel .dias i.torneo img { width: 13cqw; height: 15cqw; object-fit: contain; margin-bottom: .4cqw; filter: drop-shadow(0 .5cqw .5cqw rgba(60, 30, 8, .5)); }
.nucleo-panel .dias i.torneo b { position: relative; color: #f8ead0; font-size: max(4cqw, 14px); padding: .4cqw 2.6cqw .6cqw; background: var(--hc, var(--lacre));
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.4cqw) 50%, 100% 100%, 0 100%, 1.4cqw 50%); text-shadow: 0 .15cqw .2cqw rgba(0, 0, 0, .6); }
.nucleo-panel .dias i.torneo.hoy::before { display: none; }
.nucleo-panel .dias i.torneo.hoy img { filter: drop-shadow(0 0 2cqw #ffcf6a); animation: fl 2.4s infinite ease-in-out; }
.nucleo-panel .cuenta { text-align: center; font-family: var(--display); font-size: max(5.6cqw, 19px); color: var(--tinta); padding-top: .6cqw; }
.nucleo-panel .cuenta b { color: var(--lacre); font-weight: 400; }
.nucleo-panel .cuenta b.k-num { font-size: 1.7em; line-height: .8; vertical-align: -.08em; margin: 0 .1em; }
/* Luces de hoy: ocho velas pintadas sobre su repisa; encendidas las que ya tienes. Al lado, «3 de 8». */
.nucleo-panel .luz .aro { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; padding-top: 2cqw; }
.nucleo-panel .aro .velas { position: relative; flex: 1; display: flex; justify-content: space-around; align-items: flex-end; height: 13cqw; padding: 0 1cqw .9cqw; }
.nucleo-panel .aro .velas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.2cqw; border-radius: .3cqw;
  background: var(--k-grano), linear-gradient(180deg, #7a5232, #4a2f1c 60%, #2e1c0f); box-shadow: 0 .4cqw .5cqw rgba(50, 28, 10, .4); }
.nucleo-panel .aro .velas i { position: relative; width: 3cqw; height: 9.4cqw; background: url(../assets/vela.webp) center bottom / 100% 100% no-repeat; filter: brightness(.8) sepia(.55); }
.nucleo-panel .aro .velas i:not(.on)::before { content: ""; position: absolute; left: 50%; top: -1cqw; width: .45cqw; height: 1.4cqw; translate: -50% 0; border-radius: 40%; background: #2a1c10; rotate: 8deg; }
.nucleo-panel .aro .velas i.on { filter: none; }
.nucleo-panel .aro .velas i.on::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2.6cqw; height: 4cqw; translate: -50% 25%; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff 0 18%, #ffd36e 40%, #e07a1e 80%, transparent 82%); box-shadow: 0 0 2.4cqw #ffb347; animation: fl 1.8s infinite ease-in-out; }
.nucleo-panel .aro .velas i:nth-child(odd).on::after { animation-delay: -.7s; }
.nucleo-panel .aro .cifra { flex: none; font-family: var(--display); font-size: max(5cqw, 17px); color: var(--sepia); white-space: nowrap; padding-bottom: .4cqw; }
.nucleo-panel .aro .cifra b { font-weight: 400; font-size: 2em; line-height: .8; color: var(--lacre); }
/* Curso: el que tienes y una sola línea de tinta hasta el siguiente (su número, en lacre). */
.nucleo-panel .linea { display: flex; align-items: center; gap: 2cqw; }
.nucleo-panel .barra { flex: 1; height: max(2.2cqw, 8px); border: .35cqw solid var(--tinta2); border-radius: .3cqw; overflow: hidden; background: rgba(120, 80, 30, .08); }
.nucleo-panel .barra i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--lacre) 0 .6cqw, color-mix(in srgb, var(--lacre) 75%, #000) .6cqw 1.2cqw);
  animation: nucleo-barra 1s .2s cubic-bezier(.3, 1, .4, 1) both; transform-origin: 0 50%; }
.nucleo-panel .meta { flex: none; display: grid; place-items: center; width: 11cqw; aspect-ratio: 1; font-family: var(--display); font-size: max(4.4cqw, 15px); color: #fff4dc; padding: 0 .4cqw .8cqw 0;
  border-radius: 47% 53% 50% 46% / 52% 45% 55% 48%; background: radial-gradient(circle at 35% 30%, var(--lacre-luz), var(--lacre) 55%, var(--lacre2)); text-shadow: 0 .15cqw .2cqw rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 .5cqw rgba(90, 15, 12, .5), 0 .3cqw .4cqw rgba(40, 10, 4, .4); rotate: -8deg; }
.k-hay-sello .nucleo-panel .meta { background: url(../assets/ui-sello.webp) center / contain no-repeat; box-shadow: none; border-radius: 0; text-shadow: 0 0 .5cqw #3a0806, 0 .2cqw .2cqw #3a0806; }
.nucleo-panel p.falta { text-align: right; font-style: italic; color: var(--sepia); font-size: max(3.6cqw, 13px); }
.nucleo-panel .seguir { align-self: center; margin-top: 1cqw; min-width: 44%; font-size: max(4cqw, 14px); text-align: center; }
.nucleo-panel.quieto, .nucleo-panel.quieto * { animation: none !important; }
@keyframes nucleo-panel-in { from { opacity: 0; } }
@keyframes nucleo-panel-baja { from { opacity: 0; transform: translateY(-5cqw) rotate(1.5deg); } }
@keyframes nucleo-panel-sec { from { opacity: 0; transform: translateY(1.6cqw); } }
@keyframes nucleo-barra { from { transform: scaleX(0); } }

/* Movimiento reducido: los premios se quedan quietos y se ven (antes acababan transparentes al instante). */
@media (prefers-reduced-motion: reduce) {
  .reward, .reward .rw { animation: none !important; }
}