/* Lo común a la web y al panel (19-10-2026): las letras (auto-alojadas, LICENCIAS.txt: Lilita One en los títulos y Nunito
   en el texto), la letra del juego con contorno, las bolas del juego, los botones de compartir y los móviles con captura.
   Sale de la maqueta elegida, A «Cielo del reino» (docs/maquetas/web-2026-10-18/comun.css). Sin estilos en línea: la CSP
   de la web los prohíbe, así que los tamaños de bola (.d28…) y el encuadre de las fotos (.foco-0…100) son clases. */
@font-face { font-family: 'Lilita One'; font-display: swap; src: url('../fuentes/lilita-one-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lilita One'; font-display: swap; src: url('../fuentes/lilita-one-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fuentes/nunito-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fuentes/nunito-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fuentes/nunito-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fuentes/nunito-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --f-disp: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif; --f-texto: 'Nunito', system-ui, sans-serif;
  --noche: #071c4a; --cobalto: #0b2a6b; --azul-real: #1f52c0; --azul-vivo: #3e8ef9;
  --oro: #ffd04a; --aro: #ffcf3a; --canto: #c98a0c; --ambar: #a35f00;
  --marfil: #fff8e8; --tinta: #1b2a4e; --tinta-suave: #4a5675; --blanco: #eef3ff;
  --panel: linear-gradient(#56a2ff, #3380ee 45%, #2766d8);
  --oro-boton: linear-gradient(#ffe48a, #ffbf1a 50%, #f39400);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 700 17px/1.55 var(--f-texto); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }

/* La letra del juego: Lilita One blanca con contorno grueso (el color y el grosor los pone cada sitio) */
.lil { font-family: var(--f-disp); font-weight: 400; color: #fff; word-spacing: .12em; paint-order: stroke fill;
  -webkit-text-stroke: var(--contorno, 6px) var(--tinta-contorno, var(--cobalto)); }

/* Las bolas, con los tres tonos de cada una en el juego (unity/…/Vista/PintorBolas.cs: claro, medio y sombra) */
.bola { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--d, 58px); height: var(--d, 58px);
  border-radius: 50%; font: 400 calc(var(--d, 58px) * .44)/1 var(--f-disp); color: #fff; paint-order: stroke fill;
  -webkit-text-stroke: calc(var(--d, 58px) * .09) color-mix(in srgb, var(--o) 55%, #1a0830);
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .95) 0, var(--l) 16%, var(--c) 50%, var(--o) 100%);
  box-shadow: inset 0 calc(var(--d, 58px) * -.06) 0 rgba(0, 0, 0, .12), 0 calc(var(--d, 58px) * .07) calc(var(--d, 58px) * .14) rgba(3, 12, 36, .35); }
.bola.n3 { font-size: calc(var(--d, 58px) * .35); }
.bola.n4 { font-size: calc(var(--d, 58px) * .28); }
.d28 { --d: 28px; } .d30 { --d: 30px; } .d32 { --d: 32px; } .d34 { --d: 34px; } .d40 { --d: 40px; } .d46 { --d: 46px; }
.d52 { --d: 52px; } .d58 { --d: 58px; } .d64 { --d: 64px; } .d74 { --d: 74px; } .d92 { --d: 92px; }
.b1 { --l: #fff48a; --c: #ffe12e; --o: #d29a00; } .b2 { --l: #ffc46a; --c: #ff8f1a; --o: #c95700; }
.b4 { --l: #ff9c8a; --c: #ff5546; --o: #bf2020; } .b8 { --l: #ff9ad8; --c: #ff3fae; --o: #b0106e; }
.b16 { --l: #c9a2ff; --c: #9455ff; --o: #5520c4; } .b32 { --l: #9ae6ff; --c: #25bdf5; --o: #0a6fc4; }
.b64 { --l: #8ff0a6; --c: #22cf62; --o: #0b8636; } .b128 { --l: #fff0a8; --c: #ffbe1f; --o: #b86e00; }
.b256 { --l: #9fb8ff; --c: #3c66ff; --o: #1a32b4; } .b512 { --l: #ff9ab6; --c: #e8335e; --o: #980e34; }
.b1024 { --l: #8ff2e2; --c: #18cdb4; --o: #087a6a; } .b2048 { --l: #ecaaff; --c: #cf55ff; --o: #7f18b4; }
.b4096 { --l: #dcff8f; --c: #9ee034; --o: #57920a; }

/* El encuadre de las fotos de las noticias (Noticias: foco, de 0 arriba a 100 abajo; el filtro |foco de Twig) */
.foco-0 { object-position: 50% 0; } .foco-5 { object-position: 50% 5%; } .foco-10 { object-position: 50% 10%; } .foco-15 { object-position: 50% 15%; }
.foco-20 { object-position: 50% 20%; } .foco-25 { object-position: 50% 25%; } .foco-30 { object-position: 50% 30%; } .foco-35 { object-position: 50% 35%; }
.foco-40 { object-position: 50% 40%; } .foco-45 { object-position: 50% 45%; } .foco-50 { object-position: 50% 50%; } .foco-55 { object-position: 50% 55%; }
.foco-60 { object-position: 50% 60%; } .foco-65 { object-position: 50% 65%; } .foco-70 { object-position: 50% 70%; } .foco-75 { object-position: 50% 75%; }
.foco-80 { object-position: 50% 80%; } .foco-85 { object-position: 50% 85%; } .foco-90 { object-position: 50% 90%; } .foco-95 { object-position: 50% 95%; }
.foco-100 { object-position: 50% 100%; }

/* Botones de compartir: los de Fable Runner (B «La fila de botones», 16-10-2026); «Copiar el enlace», en oro */
.compartir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compartir .red { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none; transition: transform .1s ease; }
.compartir .red:hover { transform: translateY(-2px); }
.compartir .red svg { width: 25px; height: 25px; fill: #fff; }
.compartir .red .trazo { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.compartir .fb { background: linear-gradient(#4f8ef5, #1877f2 60%, #1160c8); box-shadow: 0 4px 0 #0d4fa6; }
.compartir .wa { background: linear-gradient(#5be38a, #25d366 60%, #1aa851); box-shadow: 0 4px 0 #148a42; }
.compartir .x { background: linear-gradient(#4a4a4a, #161616 60%, #000); box-shadow: 0 4px 0 #000; }
.compartir .copiar { background: var(--oro-boton); box-shadow: 0 4px 0 #b25e00; }
.compartir .copiar .trazo { stroke: #6a3500; }
.compartir .copiar.copiado::after { content: '¡Copiado!'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 10px;
  border-radius: 9px; white-space: nowrap; font: 800 13px/1 var(--f-texto); color: #fff; background: var(--cobalto); }

/* Un móvil con una captura dentro */
.movil { position: relative; flex: none; width: var(--w, 240px); aspect-ratio: 9 / 16; border-radius: calc(var(--w, 240px) * .11);
  padding: calc(var(--w, 240px) * .035); background: #11182b; box-shadow: inset 0 0 0 2px #2a3550, 0 18px 40px rgba(3, 12, 36, .45); }
.movil img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w, 240px) * .08); }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }