/* Additive localization rules. The approved base design remains in styles.css. */
.header-tools { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.language-selector { position: relative; flex-shrink: 0; z-index: 5; }
.language-selector summary { min-width: 58px; min-height: 44px; padding: 0.65rem 0.5rem; display: flex; justify-content: center; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; border: 1px solid var(--color-border); color: var(--color-text); font: 0.6875rem var(--font-mono); }
.language-selector summary::-webkit-details-marker { display: none; }
.language-selector summary::after { content: "⌄"; color: var(--color-accent); font: 0.875rem var(--font-body); }
.language-selector[open] summary { border-color: var(--color-accent); }
.language-options { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.5rem); width: 190px; max-width: calc(100vw - 2.5rem); padding: 0.5rem; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: 0 12px 32px #0006; }
.language-options a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; direction: ltr; min-height: 44px; padding: 0.5rem 0.75rem; text-decoration: none; font-size: 0.875rem; }
.language-options a[aria-current="true"] { color: var(--color-accent); background: var(--color-raised); }
.language-options a:hover { background: var(--color-raised); }
.language-options a:focus-visible { outline-offset: -2px; }
.language-current { font: 0.75rem var(--font-mono); }
.language-code { direction: ltr; unicode-bidi: isolate; }
.brand, .studio-signature, .game-title, #pixel-slash-title { direction: ltr; unicode-bidi: isolate; }
a[href^="mailto:"], code { direction: ltr; unicode-bidi: isolate; }
.router-main { min-height: 72vh; display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 4rem; padding-block: 5rem; }
.router-copy .eyebrow { color: var(--color-muted); margin-bottom: 1.5rem; }
.router-copy h1 { font-size: clamp(2.5rem, 5.5vw, 5.25rem); font-weight: 500; letter-spacing: -0.055em; max-width: 620px; }
.router-languages { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 2.5rem; max-width: 470px; }
.router-languages a { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1rem; border-bottom: 1px solid var(--color-border); text-decoration: none; font-size: 1.125rem; }
.router-languages .language-code { font-size: 0.6875rem; font-family: var(--font-mono); color: var(--color-accent); }
.router-art { width: 100%; }
.router-footer { padding-block: 1.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: 0.75rem; }
html:not([lang="en"]) .hero h1 { font-size: clamp(3.1rem, 6.8vw, 6.4rem); }
html:not([lang="en"]) .hero h1 .hero-statement { line-height: 1.3; }
.document-heading h1 { overflow-wrap: anywhere; }
.document-body code { font-size: 0.85em; overflow-wrap: anywhere; }

/* The Arabic layout flows RTL; artwork and brand marks retain their orientation. */
html[dir="rtl"] body { text-align: start; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .status, html[dir="rtl"] .art-label,
html[dir="rtl"] .game-panorama figcaption { letter-spacing: normal; font-family: var(--font-body); }
html[dir="rtl"] .eyebrow { font-size: 0.8125rem; }
html[dir="rtl"] .status { font-size: 0.8125rem; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .game-tagline { letter-spacing: normal; }
html[dir="rtl"] .hero h1 { line-height: 1.4; }
html[dir="rtl"] .hero h1 .hero-statement { line-height: 1.65; }
html[dir="rtl"] .hero-art { margin: -3.5rem -4rem -2rem -1rem; }
html[dir="rtl"] .game-card-art { border-right: 0; border-inline-end: 1px solid var(--color-border); }
html[dir="rtl"] .art-label { left: auto; inset-inline-start: 1.5rem; }
html[dir="rtl"] .document-note { border-left: 0; border-inline-start: 2px solid var(--color-accent); }
html[dir="rtl"] .document-body ul, html[dir="rtl"] .issue-checklist ul { padding-left: 0; padding-inline-start: 1.4rem; }
html[dir="rtl"] .document-body li, html[dir="rtl"] .issue-checklist li { padding-left: 0; padding-inline-start: 0.25rem; }
html[dir="rtl"] .document-body { line-height: 1.9; }
html[dir="rtl"] .document-body h2 { line-height: 1.5; }
html[dir="rtl"] .faq-list summary { padding: 1.25rem 0 1.25rem 2.5rem; }
html[dir="rtl"] .faq-list summary::after { right: auto; inset-inline-end: 0.25rem; }
html[dir="rtl"] .faq-list details p { padding: 0 0 1.5rem 2rem; }
html[dir="rtl"] .breadcrumb .arrow { transform: scaleX(-1); }
html[dir="rtl"] .footer-bottom > p:first-child { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .game-title, html[dir="rtl"] #pixel-slash-title { text-align: right; letter-spacing: -0.065em; }

@media (max-width: 900px) {
  .header-tools { gap: 1rem; }
  .main-nav { gap: 1.2rem; }
  .router-main { gap: 1rem; }
}
@media (max-width: 700px) {
  html:not([lang="en"]) .hero h1 { font-size: clamp(2.5rem, 10.8vw, 4.5rem); }
  .router-main { grid-template-columns: 1fr; padding-block: 3rem; }
  .router-art { display: none; }
  .router-languages { max-width: none; }
  html[dir="rtl"] .hero-art { margin: -2rem 17% -2.5rem -0.5rem; justify-self: start; }
  html[dir="rtl"] .game-card-art { border-inline-end: 0; }
  html[dir="rtl"] .hero-baseline .eyebrow { font-size: 0.75rem; }
  html[dir="rtl"] .section-heading > .eyebrow { font-size: 0.6875rem; }
}
@media (max-width: 540px) {
  .header-inner:has(.header-tools) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0; padding-block: 0.7rem 0.35rem; }
  .header-tools { display: contents; }
  .header-tools .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
  .language-selector { grid-column: 2; grid-row: 1; }
  .language-selector summary { min-width: 54px; }
  html[dir="rtl"] .header-inner > .brand { justify-self: right; }
  .router-footer { flex-wrap: wrap; }
  html[dir="rtl"] .game-hero-top { align-items: start; }
}
@media print {
  .language-selector, .router-art { display: none; }
}