/* Los 12 idiomas del juego: selector en dos columnas, tipografía por escritura y árabe de derecha a izquierda. */

/* ---- Selector de idioma: dos columnas, como el del juego y el launcher ---------------------------------------- */
.language-menu:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; width: min(372px, calc(100vw - 24px)); }
.language-menu [role=option] { grid-template-columns: 30px minmax(0, 1fr) 16px; min-height: 42px; padding: 0 8px; }
.language-menu [role=option] > span[lang] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En el móvil el menú ocupa el ancho bajo la cabecera: anclado al botón se salía por un lado (o por los dos en árabe). */
@media (max-width: 600px) { .language-menu:not([hidden]) { position: fixed; top: 78px; left: 12px; right: 12px; width: auto; } }

/* ---- Escrituras sin latín: Impact y Segoe UI no traen sus glifos -------------------------------------------- */
html[lang^=zh] { --display: Impact, Haettenschweiler, 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', sans-serif; --body: 'Segoe UI', 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', system-ui, sans-serif; }
html[lang=ja] { --display: Impact, Haettenschweiler, 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif; --body: 'Segoe UI', 'Yu Gothic UI', 'Hiragino Sans', Meiryo, 'Noto Sans JP', system-ui, sans-serif; }
html[lang=ko] { --display: Impact, Haettenschweiler, 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; --body: 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; }
html[lang=th] { --display: Impact, Haettenschweiler, 'Leelawadee UI', Thonburi, 'Noto Sans Thai', Tahoma, sans-serif; --body: 'Segoe UI', 'Leelawadee UI', Thonburi, 'Noto Sans Thai', Tahoma, system-ui, sans-serif; }
html[lang=ar] { --display: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', sans-serif; --body: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', system-ui, sans-serif; }
/* Los titulares usan una fuente condensada de peso 400: en estas escrituras la de reserva necesita negrita. */
html:is([lang^=zh], [lang=ja], [lang=ko], [lang=th], [lang=ar]) :is(h1, h2, h3, .hero-title, .platform-name, .dl-step-number) { font-weight: 800; }
/* Thai necesita más altura de línea para sus marcas superiores e inferiores. */
html[lang=th] :is(h1, h2, h3) { line-height: 1.25; }
html:is([lang^=zh], [lang=ja], [lang=ko]) :is(h1, h2) { line-height: 1.15; }
/* El espaciado entre letras rompe las ligaduras del árabe y separa de más el CJK y el tailandés. */
html:is([lang=ar], [lang=th]) * { letter-spacing: 0 !important; }
html:is([lang^=zh], [lang=ja], [lang=ko]) :is(h1, h2, h3, .eyebrow, .dl-eyebrow) { letter-spacing: 0; }

/* ---- Árabe: de derecha a izquierda --------------------------------------------------------------------------- */
[dir=rtl] body { text-align: right; }
@media (min-width: 601px) { [dir=rtl] .language-menu { right: auto; left: 0; } }
[dir=rtl] .cd-icon.fa-arrow-right, [dir=rtl] .cd-icon.fa-chevron-right, [dir=rtl] .cd-icon.fa-arrow-left { transform: scaleX(-1); }
/* La misma flecha girada hace de abajo, arriba y anterior: esas no se reflejan (en árabe "anterior" apunta a la derecha). */
[dir=rtl] .scroll-hint .cd-icon { transform: rotate(90deg); }
[dir=rtl] .back-top .cd-icon { transform: rotate(-90deg); }
[dir=rtl] .arrow-left .cd-icon { transform: none; }
/* Números, códigos y nombres de producto en latín conservan su orden. */
[dir=rtl] :is(input[type=email], input[type=password], input[name=username], code, kbd, .platform-meta) { direction: ltr; unicode-bidi: isolate; }
/* Portada: el logo de temporada, Discord y el crédito del arte pasan al lado contrario del titular. */
[dir=rtl] .hero-community { right: auto; left: 0; }
[dir=rtl] .art-credit { right: auto; left: 32px; }
/* La cinta de la portada: en RTL la pista arranca pegada a la derecha, así que corre hacia la derecha (si no, se vaciaba). */
[dir=rtl] .cd-marquee-track { animation-name: cd-marquee-rtl; }
@keyframes cd-marquee-rtl { to { transform: translateX(50%); } }