/* Text direction changes the interface, never the 3D world or movement axes. */
.language-switch {
  flex:0 0 auto;
  min-width:65px;
  min-height:35px;
  padding:6px 10px;
  border:1px solid #00793442;
  border-radius:5px;
  background:#fffffff0;
  color:#006b32;
  font-family:"Noto Sans Arabic","DM Sans",Tahoma,Arial,sans-serif;
  font-size:11px;
  line-height:1.6;
  font-weight:600;
  white-space:nowrap;
}
.language-switch:hover { background:#e7f3e8; }
.dialog-top { position:sticky; top:0; z-index:12; gap:14px; }
.dialog-top>.language-switch { margin-inline-start:auto; }
.tour-dialog .close-dialog { margin-left:0; }
.dialog-tools {
  position:sticky;
  top:0;
  z-index:12;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:8px;
  margin:-22px -22px 18px;
  background:#fbfdf8;
}
.dialog-tools .close-dialog { flex:0 0 auto; }
.minimap svg,#largeMap svg,.mobile-controls,.key-group,kbd,.world-label b,.intro-meta>span:first-child {
  direction:ltr;
  unicode-bidi:isolate;
}
.tour-launcher>.tour-launcher-label { margin:0; color:inherit; }
.quality-label { gap:14px; }
.quality-label select { max-width:60%; }
.search-field input { min-width:0; }
html[dir="rtl"] {
  font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .product-card h3,html[dir="rtl"] .tour-choice h3 {
  font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  letter-spacing:0;
  line-height:1.45;
}
html[dir="rtl"] :is(.eyebrow,.brand-title,.brand-title b,.live-status,.micro-label,.intro-meta,.world-label,.dock-title,.interaction small,.scene-footer,.results-top,.product-tag,.minimap-top,.minimap-bottom,.tour-choice-number,#loading) {
  letter-spacing:0;
}
html[dir="rtl"] .brand-title { min-width:65px; font-size:10px; line-height:1.7; }
html[dir="rtl"] .live-status { margin-right:0; margin-left:14px; }
html[dir="rtl"] .nav-button span { padding-left:0; padding-right:10px; }
html[dir="rtl"] .nav-button.active:after { left:auto; right:0; }
html[dir="rtl"] .intro-panel { left:auto; right:48px; text-align:right; }
html[dir="rtl"] .intro-panel.dismissed { transform:translateX(30px); }
html[dir="rtl"] .intro-copy { line-height:2; }
html[dir="rtl"] .intro-panel h1 { font-size:clamp(36px,3.7vw,57px); }
html[dir="rtl"] .tour-intro-button span { margin-left:0; margin-right:15px; }
html[dir="rtl"] .world-label b { left:auto; right:32px; }
html[dir="rtl"] .journey-status { left:40px; right:auto; }
html[dir="rtl"] .journey-status button { padding-left:0; padding-right:14px; }
html[dir="rtl"] .tour-launcher,html[dir="rtl"] .tour-hud { left:auto; right:40px; }
html[dir="rtl"] .tour-launcher>span:first-child { margin-right:0; margin-left:8px; }
html[dir="rtl"] .tour-hud { border-left-width:1px; border-right-width:3px; }
html[dir="rtl"] .tour-hud-top button { margin:-9px 0 -5px -9px; }
html[dir="rtl"] .tour-hud h2 { font-size:19px; }
html[dir="rtl"] .tour-hud>p { line-height:1.9; }
html[dir="rtl"] .controls-hint { left:auto; right:40px; }
html[dir="rtl"] .interaction,html[dir="rtl"] .dock-toggle,
html[dir="rtl"] .brand-feature,html[dir="rtl"] .tour-choice { text-align:right; }
html[dir="rtl"] .interaction>b { margin-left:0; margin-right:auto; }
html[dir="rtl"] .minimap { right:auto; left:39px; }
html[dir="rtl"] .minimap-bottom b { margin-left:0; margin-right:auto; }
html[dir="rtl"] .district-button .visited-dot { right:auto; left:5px; }
html[dir="rtl"] .scene-footer b { margin-left:0; margin-right:12px; }
html[dir="rtl"] .catalog-heading h2 { font-size:35px; }
html[dir="rtl"] .catalog-heading p:not(.eyebrow),
html[dir="rtl"] .product-card p,html[dir="rtl"] .brand-overview p { line-height:1.95; }
html[dir="rtl"] .tour-complete button { margin-left:0; margin-right:auto; }
html[dir="rtl"] .help-controls { grid-template-columns:1fr 1.35fr; line-height:1.9; }
html[dir="rtl"] .help-controls b { font-weight:500; }
html[dir="rtl"] .small-dialog h2 { font-size:35px; }
html[dir="rtl"] .vignette {
  background:linear-gradient(270deg,rgba(250,253,243,.68),rgba(250,253,243,.22) 30%,transparent 52%),
    linear-gradient(0deg,rgba(238,246,234,.75),transparent 23%,transparent 82%,rgba(252,254,249,.55));
}
html[dir="rtl"] .city-started .vignette { background:linear-gradient(0deg,#edf5e97d,transparent 20%,transparent 85%,#fcfff666); }
@media(min-width:1600px) {
  html[dir="rtl"] .intro-panel { right:70px; }
}
@media(max-width:1150px) {
  .topbar { gap:17px; }
  .main-nav { gap:20px; }
  html[dir="rtl"] .intro-panel { right:35px; }
  html[dir="rtl"] .journey-status,html[dir="rtl"] .tour-launcher,html[dir="rtl"] .tour-hud,html[dir="rtl"] .controls-hint { right:25px; }
  html[dir="rtl"] .journey-status { right:auto; left:25px; }
  html[dir="rtl"] .district-dock { left:auto; right:25px; }
  html[dir="rtl"] .minimap { left:25px; }
}
@media(max-width:850px) {
  html[dir="rtl"] .main-nav { margin-left:0; margin-right:auto; }
  html[dir="rtl"] .intro-panel { right:28px; }
}
@media(max-width:700px) {
  .topbar { padding:14px 16px; gap:9px; flex-wrap:wrap; }
  .brand { flex:0 1 auto; }
  .brand-logo { width:145px; }
  .header-actions { gap:7px; margin-inline-start:auto; }
  .main-nav { order:3; width:100%; justify-content:flex-end; margin:0; height:20px; }
  .main-nav .nav-button { padding:0; font-size:10px; }
  .language-switch { min-height:31px; min-width:61px; padding:4px 8px; font-size:10px; }
  .journey-status { top:109px; }
  .tour-launcher { top:111px; }
  .tour-hud { top:108px; }
  .intro-panel { top:28%; }
  .dialog-top { gap:9px; }
  .dialog-top>.micro-label { display:none; }
  .dialog-brand img { width:145px; }
  .dialog-tools { margin:-12px -5px 17px; }
  .results-top { flex-wrap:wrap; align-items:center; }
  .product-type-label { margin-inline-start:auto; }
  .product-type-label select { max-width:180px; }
  html[dir="rtl"] .intro-panel { left:20px; right:23px; }
  html[dir="rtl"] .intro-panel h1 { font-size:35px; max-width:370px; }
  html[dir="rtl"] .intro-panel .eyebrow { font-size:9px; }
  html[dir="rtl"] .intro-copy { max-width:300px; font-size:12px; }
  html[dir="rtl"] .journey-status { left:18px; right:auto; }
  html[dir="rtl"] .journey-status button { padding-right:2px; }
  html[dir="rtl"] .journey-status .micro-label { font-size:8px; }
  html[dir="rtl"] .journey-status strong { font-size:9px; }
  html[dir="rtl"] .tour-launcher { left:auto; right:18px; }
  html[dir="rtl"] .tour-hud { left:17px; right:17px; }
  html[dir="rtl"] .tour-hud h2 { font-size:17px; }
  html[dir="rtl"] .district-dock { left:16px; right:16px; }
  html[dir="rtl"] .dock-toggle b { font-size:12px; }
  html[dir="rtl"] .dock-toggle small { font-size:10px; }
  html[dir="rtl"] .district-button { font-size:10px; }
  html[dir="rtl"] .minimap { right:auto; left:18px; }
  html[dir="rtl"] .minimap-top { font-size:6px; }
  html[dir="rtl"] .minimap-bottom { font-size:7px; }
  html[dir="rtl"] .interaction { right:18px; left:auto; }
  html[dir="rtl"] .interaction small { font-size:8px; }
  html[dir="rtl"] .scene-footer { font-size:6px; }
  html[dir="rtl"] .catalog-heading h2 { font-size:29px; }
  html[dir="rtl"] .catalog-heading p:not(.eyebrow) { font-size:11px; }
  html[dir="rtl"] .brand-feature span { font-size:10px; }
  html[dir="rtl"] .filter-button { font-size:10px; }
  html[dir="rtl"] .tour-heading h2 { font-size:27px; }
  html[dir="rtl"] .tour-complete button { text-align:right; margin-left:0; margin-right:42px; }
  html[dir="rtl"] .small-dialog h2 { font-size:29px; }
  html[dir="rtl"] .help-controls { font-size:10px; gap:12px; }
}
@media(max-width:370px) {
  .brand-logo { width:133px; }
  .topbar { padding:13px 12px; }
  html[dir="rtl"] .intro-panel h1 { font-size:31px; }
  html[dir="rtl"] .tour-launcher { right:12px; font-size:9px; }
  html[dir="rtl"] .journey-status { left:12px; }
  .dialog-brand img { width:127px; }
  .dialog-top { padding-inline:14px; }
}
@media(max-height:700px) and (max-width:700px) {
  .intro-panel { top:27%; }
  .intro-panel h1 { font-size:32px; }
  html[dir="rtl"] .intro-panel h1 { font-size:29px; line-height:1.35; }
  .intro-copy { margin:13px 0; }
  .intro-actions { gap:8px; }
  .intro-actions button { padding:10px 14px; }
}
