/* Páginas de juego · rediseño «Colores del logo» (octubre 2026).
   Va la última en las seis páginas de juego y funciona junto a partida.js, que crea
   la barra de juego (.barra-juego) y pone en <body> las clases .con-barra y
   .juego-<id>. Sin partida.js no se aplica nada de esto: todo cuelga de .con-barra.

   Tamaños: móvil ≤620px · tablet 621–1023px · ordenador ≥1024px.
   Paleta: azul #3262aa, verde #6baa8b (con texto oscuro siempre), tinta #1d2433. */

body.con-barra{--verde:#6baa8b;--tinta:#1d2433;--gicon:#3262aa;--gicon-texto:#fff}
body.juego-emoji,body.juego-crono{--gicon:#6baa8b;--gicon-texto:#1d2433}
body.juego-quote,body.juego-contrareloj{--gicon:#1d2433;--gicon-texto:#fff}
html[data-theme=dark] body.juego-quote,html[data-theme=dark] body.juego-contrareloj{--gicon:#f1efe9;--gicon-texto:#14181f}

/* --- Barra de juego --- */
.barra-juego{width:100%;max-width:1160px;margin:0 auto;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.barra-volver{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px 0 4px;border-radius:12px;font-weight:700;font-size:15px;color:color-mix(in srgb,var(--ink) 80%,var(--card));text-decoration:none}
.barra-volver:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.barra-titulo{display:flex;align-items:center;gap:10px;min-width:0}
.barra-icono{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--gicon);color:var(--gicon-texto);flex-shrink:0}
.barra-icono svg{width:18px;height:18px}
.barra-icono-texto{font:800 12px Manrope,sans-serif}
.barra-titulo strong{font:800 22px Fraunces,Georgia,serif;letter-spacing:-.01em;white-space:nowrap}
.barra-tag{font:500 11px 'DM Mono',monospace;letter-spacing:.08em;color:color-mix(in srgb,var(--ink) 72%,var(--card));border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.barra-acciones{display:flex;align-items:center}
.barra-btn{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.barra-btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.barra-btn:focus-visible,.barra-volver:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.barra-menu{display:none}

/* La portada grande de cada juego se oculta a la vista pero sigue en el HTML (su
   <h1> describe la página para buscadores y lectores de pantalla). */
body.con-barra .hero{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
/* Lo que ya está en la barra no se repite en la cabecera (los botones siguen en el
   DOM: la barra los pulsa). */
body.con-barra .header-nav [data-panel="archivePanel"],body.con-barra .header-nav [data-panel="archive"],body.con-barra #helpButton,body.con-barra .site-header .edition{display:none}

/* --- Tarjeta de juego --- */
body.con-barra .ad-top{display:none}
body.con-barra .game-card{margin-top:24px;border:1px solid var(--line);border-radius:20px;box-shadow:none}
body.con-barra .game-card::before{display:none}

/* Cuadro de respuesta: campo grande y botones de 50px. Saltar a la izquierda,
   Adivinar (azul) ocupando el resto, como en el boceto. */
body.con-barra .guess-row{flex-wrap:wrap;gap:10px;border:0;background:transparent;box-shadow:none;border-radius:0}
body.con-barra .guess-row:focus-within{box-shadow:none}
body.con-barra .guess-row .book-search{flex:1 1 100%}
body.con-barra .guess-row input{min-height:52px;font-size:16px;border:2px solid var(--ink);border-radius:12px;background:var(--card);padding:0 16px}
body.con-barra .guess-row input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 30%,transparent)}
body.con-barra .guess-row button,body.con-barra .guess-row button:last-child{min-height:50px;border-radius:12px;font-size:16px}
body.con-barra .guess-row #skipButton{order:1;flex:1 1 0;background:transparent;border:1px solid color-mix(in srgb,var(--ink) 25%,var(--line));color:var(--ink)}
body.con-barra .guess-row #guessButton{order:2;flex:2 1 0}
body.con-barra #bookList{border-radius:0 0 12px 12px}

/* --- Ordenador: dos columnas --- */
@media(min-width:1024px){
  body.con-barra main{max-width:1160px}
  body.con-barra .vs-main,body.con-barra .crono-main{max-width:1040px}
  body.con-barra .contrareloj-main{max-width:1100px}
  body.con-barra .game-card.dos-columnas{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;padding:32px}
  .col-escena,.col-panel{min-width:0}
  .col-panel{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
  .col-panel .guess-area{margin:0;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
  .col-panel .hints-section,.col-panel .guesses-section{margin:0;padding:12px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
}

/* --- Tablet --- */
@media(min-width:621px) and (max-width:1023px){
  body.con-barra .game-card{max-width:720px}
  .barra-juego{padding:0 12px}
}

/* --- Móvil --- */
@media(max-width:620px){
  /* La cabecera del sitio se esconde: la barra de juego hace de cabecera y el
     menú (≡) la despliega como hoja. */
  body.con-barra .site-header{display:none}
  body.con-barra.menu-juego .site-header{display:flex;position:fixed;top:56px;left:8px;right:8px;z-index:60;flex-direction:column;align-items:stretch;height:auto;gap:8px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px #1d243330}
  body.con-barra.menu-juego .header-nav{flex-direction:column;align-items:stretch;overflow:visible}
  body.con-barra.menu-juego .header-nav>*{min-height:44px;justify-content:flex-start;text-align:left}
  .barra-juego{position:sticky;top:0;z-index:50;min-height:56px;padding:0 2px;background:var(--paper)}
  .barra-volver{padding:0;width:44px;justify-content:center}
  .barra-volver-texto{display:none}
  .barra-titulo{gap:8px}
  .barra-icono{width:28px;height:28px;border-radius:8px}
  .barra-icono svg{width:16px;height:16px}
  .barra-titulo strong{font-size:20px}
  .barra-tag{border:0;padding:0}
  .barra-ranking{display:none}
  .barra-menu{display:grid}

  body.con-barra .game-card{margin-top:12px}
  /* El cuadro de respuesta queda fijo abajo mientras se juega. */
  body.con-barra .guess-area{position:sticky;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);margin:16px -21px 0;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  body.con-barra #bookList{top:auto;bottom:100%;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;max-height:42vh}
}
@media(prefers-reduced-motion:reduce){.barra-btn,.barra-volver{transition:none}}
.barra-tag-fecha::before{content:' · '}
@media(max-width:620px){
  .barra-tag:has(.barra-tag-fecha) .barra-tag-tipo{display:none}
  .barra-tag-fecha::before{content:none}
}

/* --- Color de cada juego: el mismo que su lomo en el inicio ---
   Portadas y VS azul · Emojis y Años verde · Citas y Crono tinta.
   --acento es el color de relleno (franja de la barra, borde de la tarjeta, botón
   principal) y --sobre-acento el texto encima. --coral, que los CSS de cada juego
   también usan como color de texto, va en una versión legible sobre papel: el verde
   del logo no llega a 3:1 como texto, así que ahí se usa un verde más oscuro. */
body.con-barra{--acento:#3262aa;--sobre-acento:#fff}
body.con-barra.juego-vs,body.con-barra.juego-cover{--coral:#3262aa;--coral-ink:#3262aa;--sobre-coral:#fff}
body.con-barra.juego-emoji,body.con-barra.juego-crono{--acento:#6baa8b;--sobre-acento:#1d2433;--coral:#3d7a5c;--coral-ink:#3d7a5c;--sobre-coral:#fff}
body.con-barra.juego-quote,body.con-barra.juego-contrareloj{--acento:#1d2433;--sobre-acento:#f5f1e8;--coral:#1d2433;--coral-ink:#1d2433;--sobre-coral:#f5f1e8}
html[data-theme=dark] body.con-barra{--acento:#8fb0e6;--sobre-acento:#14181f}
html[data-theme=dark] body.con-barra.juego-vs,html[data-theme=dark] body.con-barra.juego-cover{--coral:#8fb0e6;--coral-ink:#a9c4ee;--sobre-coral:#14181f}
html[data-theme=dark] body.con-barra.juego-emoji,html[data-theme=dark] body.con-barra.juego-crono{--acento:#7fbf9f;--sobre-acento:#14181f;--coral:#7fbf9f;--coral-ink:#9fd4b8;--sobre-coral:#14181f}
html[data-theme=dark] body.con-barra.juego-quote,html[data-theme=dark] body.con-barra.juego-contrareloj{--acento:#f1efe9;--sobre-acento:#14181f;--coral:#f1efe9;--coral-ink:#f1efe9;--sobre-coral:#14181f}
html[data-theme=sepia] body.con-barra.juego-vs,html[data-theme=sepia] body.con-barra.juego-cover{--coral:#2f5a9c;--coral-ink:#2f5a9c;--sobre-coral:#fff}
html[data-theme=sepia] body.con-barra.juego-emoji,html[data-theme=sepia] body.con-barra.juego-crono{--coral:#3d7a5c;--coral-ink:#3d7a5c}

/* Dónde se ve el color: franja bajo la barra, borde superior de la tarjeta y botón
   principal de cada juego. */
body.con-barra .barra-juego{box-shadow:inset 0 -4px 0 var(--acento)}
body.con-barra .game-card{border-top:6px solid var(--acento)}
body.con-barra .guess-row #guessButton,body.con-barra .mode-btn,body.con-barra .crono-actions .action,body.con-barra .vs-game .action,body.con-barra .vs-game .action:hover{background:var(--acento);color:var(--sobre-acento)}
body.con-barra .vs-mark{background:var(--acento);color:var(--sobre-acento)}

/* --- Años: botones de mover con tamaño táctil en todas las pantallas --- */
body.con-barra .crono-move button{width:40px;height:40px;border-radius:10px;font-size:13px}
body.con-barra .crono-actions .action,body.con-barra .crono-actions .ghost-action{min-height:50px;border-radius:12px}

/* --- Años en móvil: lista compacta (antes, cada libro ocupaba toda la pantalla) --- */
@media(max-width:620px){
  body.con-barra .crono-row{flex-direction:column;flex-wrap:nowrap;gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  body.con-barra .crono-item{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;grid-template-areas:"slot img h3 mv" "slot img p mv" "slot img year mv" "slot img dif mv";column-gap:10px;align-items:center;max-width:none;flex:none;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 12px}
  body.con-barra .crono-item:last-child{border-bottom:0}
  body.con-barra .crono-item.ok,body.con-barra .crono-item.over{box-shadow:inset 4px 0 0 var(--coral)}
  body.con-barra .crono-item.bad{box-shadow:inset 4px 0 0 var(--danger)}
  body.con-barra .crono-slot{grid-area:slot;position:static;width:22px;height:22px}
  body.con-barra .crono-item img{grid-area:img;width:44px;height:66px;aspect-ratio:auto;border-radius:3px}
  body.con-barra .crono-item h3{grid-area:h3;margin:0;font:800 15px/1.2 Fraunces,Georgia,serif;align-self:end}
  body.con-barra .crono-item p{grid-area:p;font-size:12px}
  body.con-barra .crono-year{grid-area:year;margin:2px 0 0}
  body.con-barra .crono-item .desfase{grid-area:dif;margin:0}
  body.con-barra .crono-move{grid-area:mv;margin:0;gap:6px}
  body.con-barra .crono-move button{width:44px;height:44px}
  /* En la lista vertical «antes/después» es arriba/abajo: las flechas se giran. */
  body.con-barra .crono-move button{font-size:0}
  body.con-barra .crono-move button::before{font-size:14px;content:'▲'}
  body.con-barra .crono-move button+button::before{content:'▼'}
}

/* Marcadores de VS, Años y Crono: en móvil pasan a varias líneas en vez de salirse. */
@media(max-width:620px){
  body.con-barra .scorebar{flex-wrap:wrap;row-gap:8px;column-gap:14px;justify-content:space-between}
}

/* Crono antes de empezar: el cuadro de respuesta está oculto, así que la tarjeta no
   se parte en dos columnas (quedaba todo a la izquierda y la derecha vacía). */
@media(min-width:1024px){
  body.con-barra .game-card.dos-columnas:has(> .col-panel > .guess-area[hidden]){grid-template-columns:minmax(0,1fr);max-width:720px;justify-items:center;text-align:center}
  body.con-barra .game-card.dos-columnas:has(> .col-panel > .guess-area[hidden]) > .col-panel{display:none}
}

/* --- Citas: su color es la tinta. quotes.css usaba sus propias variables de botón
   (--quote-button / --quote-hover) en azul para el marcapáginas de la frase, el
   botón principal, la etiqueta de fase y los estados al pasar el ratón. --- */
body.con-barra.juego-quote{--quote-button:#1d2433;--quote-hover:#33405a}
html[data-theme=dark] body.con-barra.juego-quote{--quote-button:#f1efe9;--quote-hover:#d9d6cc}
html[data-theme=sepia] body.con-barra.juego-quote{--quote-button:#1d2433;--quote-hover:#33405a}
body.con-barra.juego-quote .character-stage-step,body.con-barra.juego-quote .share-button,body.con-barra.juego-quote .primary-action:not(:disabled),body.con-barra.juego-quote .character-back:hover,body.con-barra.juego-quote .bonus-button:hover,body.con-barra.juego-quote .step-forward-button:hover{color:var(--sobre-acento)}
body.con-barra.juego-quote .share-button,body.con-barra.juego-quote .primary-action:not(:disabled){background:var(--quote-button)}
body.con-barra.juego-quote .quote-mark{color:var(--verde)}

/* Citas en modo oscuro: su color pasa a ser tinta clara (#f1efe9) y quotes.css
   escribía el texto de estos botones en blanco fijo, así que no se leían
   («← Volver», «Continuar», «Ronda bonus», «Comprar el libro»…). El texto sobre
   el color del juego usa siempre su pareja legible. */
body.con-barra.juego-quote :is(.character-back,.step-forward-button,.bonus-button,#resultBuy,.result-dialog .share-button,.character-stage-step){color:var(--sobre-acento)!important}
body.con-barra.juego-quote :is(.character-back,.step-forward-button,.bonus-button,#resultBuy):hover{color:var(--sobre-acento)!important}
/* El botón de imagen para historias no tiene fondo: texto normal. */
body.con-barra.juego-quote .share-row .action.ghost-action,body.con-barra.juego-quote #storyButton{color:var(--ink)!important}