@keyframes popBounce {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Animaciones de feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.shake { animation: shake 0.2s ease-in-out 0s 2; }

:root{--ink:#20231d;--muted:#73766d;--paper:#f8f4ea;--card:#fffdf8;--coral:#ec7459;--sobre-coral:#201511;--orange:#e89543;--line:#e5dfd1;--success:#5c8a5e;--danger:#c0563f;--info:#3b5a70;--glow:#f5ecdc;--glow-2:#ede2c8;--dot:rgba(32,35,29,.035);--radius:16px}
/* Ojo: el reset global estaba escrito "*,{box-sizing:border-box}", que el navegador
   descarta entero (lista de selectores vacía). Se aplica solo a los controles de
   formulario: los campos con width:100% y padding se salían de su contenedor. */
input,select,textarea,button{box-sizing:border-box}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(900px 460px at 50% -6%,var(--glow),transparent 78%),radial-gradient(680px 420px at 106% 102%,var(--glow-2),transparent 80%),radial-gradient(var(--dot) 1px,transparent 1px);background-size:auto,auto,5px 5px;background-repeat:no-repeat,no-repeat,repeat;color:var(--ink);font-family:Manrope,Arial,sans-serif;transition:background-color .5s ease,color .5s ease}button,input{font:inherit}.site-header{height:76px;max-width:1160px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e2d6}.brand{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--ink);font:700 25px Fraunces,serif;letter-spacing:-1.5px}.brand-mark{display:grid;place-items:center;width:29px;height:34px;background:var(--coral);color:var(--sobre-coral,#fff);font:800 20px Fraunces,serif;clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)}
/* Rótulos dibujados: el envase es el de cada página (silueta de libro en Portadas,
   cuadrado girado en Emojis…) y el glifo de dentro ya no es una letra sino un dibujo en
   `currentColor`, así que cambia de tema sin reglas extra. */
.brand-mark svg{display:block;width:18px;height:18px}
/* La palabra del juego junto al rótulo. La llevan las cinco páginas de juego y cada una
   la tiñe en su hoja (emojis.css, quotes.css, vs.css, crono.css); esta es la de Portada,
   que no lleva data-game. Ojo: el coral solo (#ec7459) da 2,7 sobre el papel, así que se
   mezcla con la tinta; en sepia el papel es más oscuro y hace falta más tinta (38 %). */
.brand small{font:600 10px 'DM Mono',monospace;letter-spacing:2px;color:color-mix(in srgb,var(--coral) 58%,var(--ink))}
html[data-theme=sepia] .brand small{color:color-mix(in srgb,var(--coral) 38%,var(--ink))}
.edition,.mini-label,.eyebrow{color:#7f8574;font:500 10px 'DM Mono',monospace;letter-spacing:1.5px;margin:0 0 11px}.edition{margin:0}.edition span{display:inline-block;border-left:1px solid #c5c2b8;height:11px;margin:0 9px -2px}.icon-button,.close-dialog{border:0;background:transparent;color:var(--ink);cursor:pointer}.icon-button{border:1px solid #b8b8ae;width:29px;height:29px;border-radius:50%;font-family:Fraunces,serif;font-size:17px}.hero{text-align:center;padding:61px 20px 31px}.hero h1,.how-it-works h2,.game-topline h2,dialog h2{font:700 clamp(37px,5vw,58px)/.98 Fraunces,serif;letter-spacing:-2.8px;margin:0}.intro{color:var(--muted);font-size:14px;margin:15px 0 0}.section-heading{font:500 9px 'DM Mono',monospace;letter-spacing:1.3px}.game-card{max-width:624px;background:var(--card);margin:35px auto 0;border:1px solid var(--line);box-shadow:0 12px 28px #544c3b0b;padding:29px 36px 34px}.game-topline{display:flex;justify-content:space-between;align-items:flex-start}.game-topline h2{font-size:29px;letter-spacing:-1.3px}.attempts{text-align:right;color:#74776e;font:500 10px 'DM Mono',monospace}.attempt-dots{display:flex;justify-content:flex-end;gap:4px;margin-top:9px}.attempt-dots i{width:8px;height:8px;border-radius:50%;background:#d9d7cf}.attempt-dots i.active{background:var(--coral)}.book-stage{height:245px;display:grid;place-items:center;position:relative;margin:25px 0 23px}.book-shadow{position:absolute;width:133px;height:20px;background:#5b3d2d25;filter:blur(7px);border-radius:50%;transform:translateY(112px)}.book-float-wrapper{animation:float 3s ease-in-out infinite;display:grid;place-items:center}@keyframes cover-glint {
  0% { left: -150%; }
  100% { left: 150%; }
}
.book-cover {
  height: 214px;
  width: 145px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 7px 8px 0 #b85a4340, 15px 19px 26px #54402d40;
  transition: filter .55s ease, transform .55s ease;
}
.book-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 2;
}
.book-cover.cover-shine::after {
  animation: cover-glint 0.8s ease-out;
}.book-cover.locked{filter:blur(18px);transform:scale(1.09)}.cover-art{position:absolute;inset:0;background:#c65b42}.art-a i{position:absolute;border-radius:50%;background:#e9a34b}.art-a i:nth-child(1){height:210px;width:210px;top:-90px;left:-65px}.art-a i:nth-child(2){height:120px;width:120px;bottom:-45px;right:-35px;background:#782f32}.art-a i:nth-child(3){height:90px;width:90px;top:54px;right:-55px;background:#f1d37c}.cover-copy{position:absolute;inset:0;padding:22px 14px;display:flex;flex-direction:column;z-index:1}.cover-copy span,.cover-copy small{font:500 7px 'DM Mono',monospace;letter-spacing:1px}.cover-copy strong{font:800 28px/.82 Fraunces,serif;letter-spacing:-1.5px;margin-top:auto;text-transform:uppercase}.cover-copy small{margin-top:10px}.cover-grain{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:4px 4px}.guess-area label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.guess-row{--radio-fila:10px;--radio-interno:9px;display:flex;gap:0;align-items:stretch;background:var(--card);border:1px solid #d8d6cd;border-radius:var(--radio-fila);transition:box-shadow .2s,border-color .2s;box-shadow:0 2px 8px #00000008}.guess-row:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px #efb3a540}/* El input hereda el radio de .book-search para que sus esquinas queden dentro
   del redondeo de la fila (10px fuera = 9px dentro, por el borde de 1px). */
.guess-row .book-search{border-radius:var(--radio-interno) 0 0 var(--radio-interno)}
.guess-row input{border:0;border-radius:inherit;flex:1;min-width:0;padding:14px 16px;font-size:14px;background:transparent;box-sizing:border-box;outline:none}.guess-row button{border:0;border-radius:0;background:var(--coral);color:var(--sobre-coral,#fff);font-weight:800;font-size:13px;padding:0 22px;cursor:pointer;transition:background .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center}.guess-row .skip-button{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:600;transition:all .2s}.guess-row .skip-button:hover{background:var(--line);color:var(--ink)}.guess-row button:last-child{border-radius:0 var(--radio-interno) var(--radio-interno) 0}.share-button{border:0;border-radius:3px;background:var(--coral);color:#fff;font-weight:800;font-size:12px;padding:0 17px;cursor:pointer;transition:transform .15s,background .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center}#bookList{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;box-shadow:0 4px 12px #00000015;z-index:10;padding:0;margin:0;list-style:none;max-height:250px;overflow-y:auto}#bookList li{padding:12px 16px;font-size:13px;color:var(--ink);cursor:pointer;transition:background .1s;border-bottom:1px solid #f0eee8}#bookList li:last-child{border-bottom:0}#bookList li:hover{background:#f8f4ea}#bookList li[aria-selected='true']{background:var(--coral);color:#fff}.guess-row button:hover,.share-button:hover{background:#db664d;transform:translateY(-1px)}

/* Micro-interacciones de botones */
button, .primary-action, .share-button {
  transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.1s ease;
}
button:active, .primary-action:active, .share-button:active {
  transform: scale(0.96) translateY(1px) !important;
}

/* Efecto de brillo (shine) para botones principales */
.guess-row button:not(.skip-button), .share-button, .primary-action {
  position: relative;
  overflow: hidden;
}
.guess-row button:not(.skip-button)::after, .share-button::after, .primary-action::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-25deg);
  transition: 0.6s ease-in-out;
  pointer-events: none;
}
.guess-row button:not(.skip-button):hover::after, .share-button:hover::after, .primary-action:hover::after {
  left: 150%;
}

.guess-row button span,.share-button span{font-size:17px;margin-left:7px}.feedback{min-height:17px;margin:9px 0 0;color:#6f726a;font-size:11px}.feedback.error{color:#ba5945}.feedback.good{color:#58805b}.hints-section,.guesses-section{border-top:1px solid var(--line);margin-top:24px;padding-top:17px}.section-heading{display:flex;justify-content:space-between;color:#8a8c83}.hints,.guess-list{padding:0;margin:11px 0 0;list-style:none}.hints li{font-size:12px;padding:10px 0;border-bottom:1px solid #efebe2;color:#34372f;display:flex;gap:10px}.hints li:before{content:'✦';color:var(--orange)}.hints li.locked{color:#9d9e98}.hints li.locked:before{content:'○';color:#c9c8c0}.guess-list{display:flex;flex-wrap:wrap;gap:6px}.guess-list li{font-size:11px;padding:6px 9px;border-radius:2px;background:#f1eee5;color:#656860}.guess-list li.wrong{border-left:3px solid #d8a44e}.ad-bottom{margin-top:39px}.how-it-works{max-width:900px;margin:86px auto 0;text-align:center;padding:0 28px 79px}.how-it-works h2{font-size:38px;letter-spacing:-1.8px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:39px;text-align:left}.steps article{border-top:1px solid #cbc7b9;padding-top:13px}.steps b{font:500 10px 'DM Mono',monospace;color:var(--coral)}.steps h3{font:700 18px Fraunces,serif;margin:11px 0 7px}.steps p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}footer{border-top:1px solid #e0dacd;min-height:93px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px;max-width:1160px;margin:auto;color:#888a81;font-size:10px}.result-dialog {
  animation: popBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.result-dialog, .help-dialog {
  width: min(420px, calc(100% - 32px));
  border: 0;
  border-radius: 5px;
  padding: 40px 35px 28px;
  text-align: center;
  background: var(--card);
  box-shadow: 0 30px 70px #28251d55;
}.result-dialog::backdrop,.help-dialog::backdrop{background:#25231c70}.close-dialog{position:absolute;right:12px;top:7px;font-size:26px;color:#777}.result-dialog h2,.help-dialog h2{font-size:34px;letter-spacing:-1.5px}.result-dialog>p:not(.eyebrow),.help-dialog>p:not(.eyebrow){font-size:13px;line-height:1.6;color:var(--muted)}.result-book{font:700 17px Fraunces,serif;margin:20px 0;background:#f2e4ca;padding:14px}.share-button{height:43px;width:100%}.tomorrow{font-size:10px!important;margin-bottom:0}@media(max-width:620px){.site-header{padding:0 18px;height:62px}.edition{display:none}.hero{padding-top:42px}.game-card{border-left:0;border-right:0;padding:25px 21px 28px}.book-stage{height:218px}.steps{grid-template-columns:1fr;gap:24px}.how-it-works{margin-top:66px}footer{flex-direction:column;align-items:flex-start;padding:22px 20px;gap:10px}.guess-row button{padding:0 16px}.guess-row button span{display:none}}
.book-search{flex:1;position:relative}.guess-row button{flex-shrink:0}

/* Comunidad y Ranking */
.community-tabs{display:flex;gap:10px;margin:20px 0;border-bottom:1px solid var(--line);padding-bottom:10px}
/* --muted sobre el fondo del panel suspende en sepia (3,95) y en VS claro (4,15):
   se deriva de --ink, igual que en el menú de juegos. */
.tab-btn{border:0;background:transparent;color:color-mix(in srgb, var(--ink) 82%, var(--card));font:600 13px Manrope,sans-serif;cursor:pointer;padding:8px 16px;border-radius:20px;transition:all .2s}
.tab-btn.active{background:var(--coral);color:var(--sobre-coral,#fff)}
.tab-content{display:none}
.tab-content.active{display:block}

/* Sala de la Fama (Ranking) */
.leaderboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:20px 0}
.rank-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;transition:transform .2s,box-shadow .2s}
.rank-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000a}
.rank-medal{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--line);color:var(--muted);flex-shrink:0}
.rank-info{flex:1;min-width:0}
.rank-info strong{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-stats{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-top:4px}
.rank-stats span b{color:var(--ink)}

/* Top 3: antes oro/plata/bronce fijos (#ffd700…) que no seguían ni el juego ni el tema.
   Ahora el podio se tiñe con el acento de la página (--coral) mezclado con la tarjeta, y
   la medalla va rellena del acento con el texto que toque (--sobre-coral): en claro es
   oscuro y en oscuro claro, así se lee en los tres temas y en las cuatro páginas. */
.rank-card.top-1{border-color:color-mix(in srgb,var(--coral) 45%,var(--line));background:color-mix(in srgb,var(--coral) 14%,var(--card))}
.rank-card.top-2{border-color:color-mix(in srgb,var(--coral) 30%,var(--line));background:color-mix(in srgb,var(--coral) 8%,var(--card))}
.rank-card.top-3{border-color:color-mix(in srgb,var(--coral) 20%,var(--line));background:color-mix(in srgb,var(--coral) 4%,var(--card))}
/* La medalla lleva el puesto en número y un aro del acento; el podio se distingue por
   tamaño (1.º más grande) además de por el tinte de la tarjeta. */
.rank-card.top-1 .rank-medal,.rank-card.top-2 .rank-medal,.rank-card.top-3 .rank-medal{background:var(--coral);color:var(--sobre-coral,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 22%,transparent)}
.rank-card.top-1 .rank-medal{width:44px;height:44px;font-size:18px}
.rank-card.top-2 .rank-medal{width:38px;height:38px;font-size:16px}
.rank-card.top-3 .rank-medal{width:34px;height:34px;font-size:15px}

/* Insignias del ranking: la racha va rellena del acento, los logros en contorno. */
.rank-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.rank-badge{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 9px;border-radius:11px;background:var(--coral);color:var(--sobre-coral,#fff)}
.rank-badge.outline{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--coral) 45%,var(--line))}
/* Franja de los últimos 7 días: se rellenan desde hoy hacia atrás los que marca la racha,
   igual que el mapa de calor de VS. */
.rank-heat{display:flex;align-items:center;gap:4px;margin-top:10px}
.rank-heat i{width:15px;height:15px;border-radius:4px;background:color-mix(in srgb,var(--coral) 12%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent)}
.rank-heat i.on{background:var(--coral);box-shadow:none}
.rank-heat small{font-size:10px;color:var(--muted);margin-left:4px}
/* Barra hacia el siguiente logro: con la racha a 0 el panel seguía pareciendo vacío. */
.rank-next{display:grid;gap:5px;margin-top:10px}
.rank-next span{font-size:10.5px;color:var(--muted)}
.rank-next i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--coral) 16%,var(--card));overflow:hidden}
.rank-next i>b{display:block;height:100%;border-radius:4px;background:var(--coral)}

.loading{text-align:center;color:var(--muted);font-style:italic;padding:20px}

/* Sugerir libro: ficha teñida con el acento de la página y campos numerados en mono
   (01, 02, 03), igual que los pasos de la portada. Todo va colgado de .suggestion-form
   para no tocar el resto de formularios del sitio. */
#suggestTab .panel-note{margin:0;padding-left:11px;border-left:2px solid var(--coral);font-size:12.5px;line-height:1.6;color:var(--muted)}
.suggestion-form{display:grid;gap:16px;margin-top:16px;padding:18px;border:1px solid color-mix(in srgb,var(--coral) 20%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--coral) 5%,var(--card));counter-reset:campo}
.suggestion-form .form-group{display:grid;gap:7px;counter-increment:campo}
.suggestion-form label{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.suggestion-form label::before{content:counter(campo,decimal-leading-zero);flex-shrink:0;font:500 10px 'DM Mono',monospace;letter-spacing:1px;line-height:1;padding:4px 6px;border-radius:6px;color:var(--coral);background:color-mix(in srgb,var(--coral) 14%,var(--card))}
.suggestion-form input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13.5px;outline:none;transition:border-color .2s,box-shadow .2s}
.suggestion-form input::placeholder{color:var(--muted);opacity:.9}
.suggestion-form input:focus{border-color:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent)}
/* Género en chips: se rellenan del acento de la página al elegirlos. El input sigue
   debajo (con su placeholder traducido) para poder escribir un género propio. */
.chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.genre-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 12px Manrope,sans-serif;padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.genre-chip:hover{border-color:color-mix(in srgb,var(--coral) 60%,var(--line))}
.genre-chip:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.genre-chip[aria-pressed=true]{background:var(--coral);color:var(--sobre-coral,#fff);border-color:var(--coral)}
.primary-action{background:var(--coral);color:var(--sobre-coral,#fff);border:0;padding:12px;border-radius:8px;font-weight:800;cursor:pointer;transition:opacity .2s}
.primary-action:hover{opacity:0.9}
.primary-action:disabled{background:var(--muted);cursor:not-allowed}
.suggestion-form .primary-action{margin-top:2px;padding:13px;border-radius:10px;font-size:13.5px;letter-spacing:.02em;box-shadow:0 6px 16px #00000014}
.suggestion-form .primary-action:hover{opacity:1;background:color-mix(in srgb,var(--coral) 88%,var(--sobre-coral,#fff))}
/* El aviso de envío va en una pastilla del acento, no como texto suelto. */
#suggestTab .feedback{margin:14px 0 0;min-height:0;font-size:12.5px}
#suggestTab .feedback:not(:empty){padding:10px 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--coral) 25%,var(--line));background:color-mix(in srgb,var(--coral) 8%,var(--card));color:var(--ink)}
#suggestTab .feedback.good{border-color:color-mix(in srgb,var(--success) 45%,var(--line));background:color-mix(in srgb,var(--success) 10%,var(--card))}
#suggestTab .feedback.error{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 10%,var(--card));color:var(--danger)}

html[data-theme=sepia] {--paper:#f4ecd8;--card:#fdfaf0;--ink:#5b4636;--muted:#8c7a66;--line:#e2d5b8;--coral:#c68642;--sobre-coral:#201511;--success:#6d7f52;--danger:#a8543a;--info:#5b6f7d;--glow:#fffaf0;--glow-2:#ecdfc5;--dot:rgba(91,70,54,.05)}

/* --- 2. Hero editorial --- */
.hero h1{position:relative;display:inline-block}
.hero h1::after{content:'';position:absolute;left:50%;bottom:-19px;width:78px;height:4px;margin-left:-39px;border-radius:3px;background:var(--coral);opacity:.85}
.hero .intro{margin-top:32px;max-width:36ch;margin-left:auto;margin-right:auto}
.hero-stack{display:flex;justify-content:center;align-items:flex-end;gap:7px;margin:26px 0 0}
.hero-stack span{width:30px;border-radius:3px 3px 2px 2px;box-shadow:inset -7px 0 9px -7px #00000066,inset 1px 0 0 #ffffff26,0 3px 7px #54402d26}
.hero-stack span:nth-child(1){height:40px;background:#b8533c}
.hero-stack span:nth-child(2){height:32px;background:var(--coral)}
.hero-stack span:nth-child(3){height:26px;background:var(--orange)}
@media(max-width:620px){.hero-stack span{width:24px}}

/* --- 3. Tarjeta del juego con presencia --- */
.game-card{position:relative;border-radius:var(--radius);box-shadow:0 1px 2px #544c3b0d,0 18px 42px #544c3b12}
.game-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--coral),var(--orange));z-index:1}
.games-dropdown .game-card::before{display:none}
.guess-row{border-radius:var(--radio-fila);box-shadow:0 1px 2px #0000000a,0 6px 16px #544c3b0f}

/* --- 4. Portada con volumen --- */
.book-cover{rotate:-3deg;border-radius:2px 5px 5px 2px;box-shadow:inset 11px 0 16px -11px #00000073,inset -1px 0 0 #ffffff2e,7px 9px 0 #b85a4338,16px 22px 30px #54402d3d}
.book-shadow{width:145px;transform:translateY(116px) rotate(-3deg)}
.has-real-cover{border-radius:2px 5px 5px 2px}

/* --- 5. Paleta con estados --- */
.feedback.error{color:var(--danger)}
.feedback.good{color:var(--success)}
/* Veredicto del día ya cerrado (al volver a una partida terminada). Va en tinta y no en
   verde/rojo: --success sobre --card se queda en 3,93 en claro y 4,18 en sepia, por
   debajo del 4,5, y esta línea se queda fija en pantalla, no es un aviso que pasa. */
.feedback.cierre{color:var(--ink);font-weight:600}
.guess-list li.wrong{border-left:3px solid var(--danger)}
.hints li.locked:before{color:var(--muted)}
.attempt-dots i{background:#d9d7cf;transition:background .25s ease}
.attempt-dots i.active{background:var(--coral)}
.hints li{animation:hintIn .35s ease both}
.hints li:nth-child(2){animation-delay:.06s}
.hints li:nth-child(3){animation-delay:.12s}
.hints li:nth-child(4){animation-delay:.18s}
@keyframes hintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --- 6. Pistas con iconos --- */
.hints li:before{content:'';flex:0 0 14px;width:14px;height:14px;margin-top:2px;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 6.1L20 10l-6.1 1.9L12 18l-1.9-6.1L4 10l6.1-1.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 6.1L20 10l-6.1 1.9L12 18l-1.9-6.1L4 10l6.1-1.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.hints li.locked:before{background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}

/* --- 8. Diálogos con fondo desenfocado --- */
dialog::backdrop{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.nav-panel{animation:panelIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* --- 10. Tipografía más legible --- */
.intro{font-size:15px}
.feedback{font-size:12.5px}
.hints li{font-size:13.5px;line-height:1.6}
.steps p{font-size:13.5px}
.guess-list li{font-size:12px}
footer{font-size:11.5px}

/* --- 11. Cabecera fija con desenfoque --- */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(prefers-reduced-motion:reduce){.hints li,.nav-panel{animation:none}}

/* Aviso de cambio de día (lo crea app.js al llegar la medianoche en España). */
/* El fondo se mezcla con el coral de cada tema (en oscuro el coral es claro, así que el
   rosa fijo #fff5f1 dejaba el texto claro sobre claro, ilegible). */
.new-day-notice{display:flex;gap:14px;align-items:center;justify-content:space-between;margin:0 auto 18px;max-width:624px;padding:13px 16px;border:1px solid var(--coral);border-radius:12px;background:color-mix(in srgb,var(--coral) 10%,var(--card));color:var(--ink);font-size:13px;line-height:1.45}
/* El texto lo fija `--sobre-coral`, definido junto a cada `--coral`: el coral cambia de
   juego y de tema (vino oscuro en Citas, violeta en Emojis, salmón claro en oscuro) y un
   color fijo ilegible en unos u otros. Con el blanco, Portada daba 2,9 y 2,3; ahora todos
   pasan de 5,5. */
.new-day-notice button{flex-shrink:0;border:0;border-radius:8px;background:var(--coral);color:var(--sobre-coral,#fff);font-weight:800;font-size:12px;padding:9px 14px;cursor:pointer;transition:background .2s,transform .15s}
.new-day-notice button:hover{background:color-mix(in srgb,var(--coral) 90%,var(--sobre-coral,#fff));transform:translateY(-1px)}

/* --- 12. Botón flotante de WhatsApp --- */
/* Verde de marca fijo: es un color corporativo, no del tema, y se lee igual en claro y oscuro. */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#25d366;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .18s ease,box-shadow .18s ease}
.wa-float:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.wa-float:focus-visible{outline:3px solid var(--info,#3b5a70);outline-offset:3px}
.wa-float svg{width:30px;height:30px;fill:#fff;display:block}
@media(max-width:520px){.wa-float{right:14px;bottom:14px;width:52px;height:52px}.wa-float svg{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* --- 13. Pulido para pantallas muy estrechas (<=400px) --- */
/* Por debajo de 400px no habia ninguna regla: titulos largos y botones pequenos se
   quedaban justos. Solo toca lo que no puede romper el diseno de escritorio. */
@media(max-width:400px){
  body{overflow-wrap:break-word}
  img,svg{max-width:100%;height:auto}
  /* Objetivos tactiles de al menos 44px (recomendacion de accesibilidad). */
  .consent-accept,.consent-reject{width:100%;min-height:44px}
  .consent-actions{flex-direction:column;align-items:stretch;gap:8px}
  .consent-banner{padding:14px 16px}
  .site-header{gap:10px}
  .brand span{font-size:15px}
  .wa-float{right:12px;bottom:12px;width:48px;height:48px}
  .wa-float svg{width:25px;height:25px}
}