/* Selector de idioma dentro de los juegos. Reutiliza el aspecto de los
   controles auxiliares que ya tiene cada pantalla: en el ajedrez, el mismo
   botón claro que «Pintar»; en la portada de los casos,
   el mismo trazo dorado que la navegación «Caso 2 de 6». */
.game-language{position:absolute;z-index:9;font:14px Inter,Arial,sans-serif}
.game-language-trigger{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;margin:0;padding:0 10px;border:1px solid #c3a17b;border-radius:7px;background:#fff8ec;color:#281b13;font:700 13px/1 Inter,Arial,sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 3px 12px #0004}
.game-language-trigger:hover,.game-language.is-open .game-language-trigger{border-color:#931d30;color:#931d30}
.game-language-trigger:focus-visible,.game-language-option:focus-visible{outline:3px solid #2677be;outline-offset:3px}
.game-language-chevron{position:relative;display:block;width:10px;height:10px}
.game-language-chevron::before{position:absolute;top:1px;left:2px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;content:"";transform:rotate(45deg);transition:transform .2s ease}
.game-language.is-open .game-language-chevron::before{top:4px;transform:rotate(225deg)}

.game-language-menu{position:absolute;top:calc(100% + 8px);right:0;display:grid;min-width:176px;margin:0;padding:6px;border:1px solid rgba(118,95,72,.32);border-radius:6px;background:rgba(243,239,229,.99);box-shadow:0 12px 30px rgba(50,38,25,.22);list-style:none;text-align:left}
.game-language-menu[hidden]{display:none}
.game-language-option{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;min-height:42px;padding:8px 9px;border-radius:3px;color:#1e1e1b;font:14px/1.2 Inter,Arial,sans-serif;text-decoration:none}
.game-language-option .game-language-code{color:#765f48;font:700 12px/1 Inter,Arial,sans-serif;letter-spacing:.04em}
a.game-language-option:hover{background:rgba(231,223,207,.7);color:#931d30}
.game-language-option.is-current{background:rgba(231,223,207,.7);font-weight:600}
.game-language-option[aria-disabled="true"]{color:#765f48;cursor:default}
.game-language-option small{color:#765f48;font:11px Inter,Arial,sans-serif}

/* Portada de los casos: esquina superior derecha, sin tocar la columna del
   título. */
.game-language--cover{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.game-language--cover .game-language-trigger{height:40px;border-color:#d4ad76;border-radius:4px;background:rgba(22,13,9,.42);color:#d4ad76;box-shadow:none;font-size:12px}
.game-language--cover .game-language-trigger:hover,.game-language--cover.is-open .game-language-trigger{border-color:#fff7e9;color:#fff7e9}

/* Ajedrez: misma fila y altura que el botón «Pintar», a su izquierda. */
.game-language--chess{top:var(--game-language-top,12px);right:var(--game-language-right,64px);pointer-events:auto}
.game-language--chess .game-language-trigger{height:var(--game-language-size,44px);min-width:var(--game-language-size,44px)}

/* Sin sombra, como los botones de esa cabecera. Queda por debajo del panel
   de «Pintar» (capa 5) cuando este se abre encima en móvil. */
.game-language--chess{z-index:4}
.game-language--chess .game-language-trigger{box-shadow:none}

/* Móvil (mismo corte que el menú principal): mismo diseño, algo más
   compacto. */
@media (max-width:720px){
  .game-language-trigger{gap:5px;height:42px;padding:0 8px}
  .game-language--cover{top:var(--game-language-row,48px);right:var(--game-language-edge,20px);transform:translateY(-50%)}
  /* En los móviles más estrechos el logotipo cede lo justo para que el
     selector quepa a su derecha con 12 px de separación. */
  .case-v2-cover:has(> .game-language--cover) .case-v2-brand-logo{max-width:calc(100% - var(--game-language-width,51px) - 12px)}
}

/* Portada en móviles muy estrechos (<360 px): solo el código, sin flecha,
   para que el logotipo apenas tenga que encoger. */
@media (max-width:359px){
  .game-language--cover .game-language-trigger{width:42px;min-width:42px;padding:0}
  .game-language--cover .game-language-chevron{display:none}
}

/* Ajedrez en móviles estrechos: el título y el cronómetro se centran en el
   hueco que queda entre «volver» y el selector (su ancho + separación y
   margen hasta el borde de la columna). Si un título largo no cabe, el
   script lo reduce lo justo; la cabecera mantiene su altura y el tablero no
   se mueve. */
@media (max-width:400px){
  .game-header:has(.game-language--chess) .game-heading{grid-template-columns:minmax(0,1fr);padding-right:calc(var(--game-language-width,51px) + 14px);padding-left:6px}
  .game-header:has(.game-language--chess) .game-heading h1{max-width:100%;white-space:nowrap}
}

/* Menú de la portada, a la derecha del selector de idioma y con su mismo trazo. */
.cover-menu{position:absolute;z-index:10;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));font:14px Inter,Arial,sans-serif}
.case-v2-cover:has(> .cover-menu) > .game-language--cover{right:calc(max(16px,env(safe-area-inset-right)) + 48px)}
.cover-menu-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:1px solid #d4ad76;border-radius:4px;background:rgba(22,13,9,.42);color:#d4ad76;cursor:pointer}
.cover-menu-trigger:hover,.cover-menu-trigger[aria-expanded="true"]{border-color:#fff7e9;color:#fff7e9}
.cover-menu-trigger:focus-visible,.cover-menu-panel a:focus-visible{outline:3px solid #2677be;outline-offset:3px}
.cover-menu-panel{position:absolute;top:calc(100% + 8px);right:0;display:grid;width:min(260px,calc(100vw - 32px));max-height:calc(100dvh - 90px);overflow-y:auto;padding:8px 16px 14px;border:1px solid rgba(118,95,72,.32);border-radius:10px;background:#f8f4ec;box-shadow:0 12px 30px rgba(50,38,25,.3);text-align:left}
.cover-menu-panel[hidden]{display:none}
.cover-menu-panel>a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid rgba(30,30,27,.1);color:#1e1e1b;font:16px Georgia,serif;text-decoration:none}
.cover-menu-panel>a:last-child{border-bottom:0}
.cover-menu-panel a:hover{color:#931d30}
@media (max-width:720px){
  .cover-menu{top:var(--game-language-row,48px);right:var(--game-language-edge,20px);transform:translateY(-50%)}
  .cover-menu-trigger{width:42px;height:42px}
  .case-v2-cover:has(> .cover-menu) > .game-language--cover{right:calc(var(--game-language-edge,20px) + 48px)}
  .case-v2-cover:has(> .cover-menu) .case-v2-brand-logo{max-width:calc(100% - var(--game-language-width,51px) - 60px)}
}