/* La web de Fable Tic Tac Toe: con el aspecto del juego (el reino de fondo, la letra Lilita One, el dorado y el azul). */
@font-face { font-family: 'Lilita One'; src: url('LilitaOne-Regular.ttf') format('truetype'); font-display: swap; }
:root { --oro: #f2b52a; --oro-oscuro: #7a4300; --azul: #0b2a6b; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; color: #fff; text-align: center;
  font: 18px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--azul) url('reino.webp') center / cover no-repeat fixed; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(11, 42, 107, .1), rgba(11, 42, 107, .6)); }
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 32px 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.logo { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
h1, .jugar, .juegos strong { font-family: 'Lilita One', system-ui, sans-serif; font-weight: normal; }
h1, .lema, .juegos li { text-shadow: 2px 2px 0 var(--azul), -2px 2px 0 var(--azul), 2px -2px 0 var(--azul), -2px -2px 0 var(--azul), 0 3px 0 var(--azul); }
h1 { margin: 0; font-size: 34px; line-height: 1.15; color: #ffe27a; }
.lema { margin: 0; font-weight: 700; font-size: 19px; }
.lema a { color: #fff; }
.jugar { display: block; width: 100%; max-width: 380px; margin: 8px 0; padding: 18px 24px; border-radius: 26px; color: #fff; text-decoration: none; font-size: 46px; letter-spacing: 1px;
  background: linear-gradient(#a6ec62, #4cc21f 55%, #2f9a12); box-shadow: 0 0 0 5px var(--oro), 0 0 0 9px var(--oro-oscuro), 0 10px 22px rgba(0, 0, 0, .45);
  text-shadow: 3px 3px 0 #0b4d10, -3px 3px 0 #0b4d10, 3px -3px 0 #0b4d10, -3px -3px 0 #0b4d10, 0 4px 0 #0b4d10; transition: transform .1s; }
.jugar:hover { transform: scale(1.03); }
.jugar:active { transform: scale(.97); }
.juegos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-weight: 700; }
.juegos strong { color: #ffe27a; font-size: 22px; margin-right: 6px; }
footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px 16px; background: rgba(5, 18, 52, .75); font-size: 15px; }
footer a { color: #fff; }
/* Fable Tic Tac Toe: la imagen de Google Play y el botón de «muy pronto», que aún no lleva a ningún sitio */
.portada { width: 100%; max-width: 640px; height: auto; border-radius: 22px; box-shadow: 0 0 0 5px var(--oro), 0 12px 26px rgba(0, 0, 0, .45); margin: 6px 0 10px; }
.jugar.pronto { font-size: 26px; max-width: 520px; cursor: default; }
.jugar.pronto:hover, .jugar.pronto:active { transform: none; }