/* =========================================================================
   RTL-Typografie  (Arabisch, Hebraeisch, Persisch, Urdu)
   =========================================================================

   Diese Datei ist bewusst KLEIN. Das Layout selbst spiegelt ueber logische
   CSS-Eigenschaften (margin-inline-start statt margin-left usw.) in den
   normalen Stylesheets - es gibt keinen zweiten Stylesheet-Baum, der
   auseinanderlaufen kann. Hier steht nur, was sich mit logischen
   Eigenschaften NICHT ausdruecken laesst: Schriften und Schriftmasse.

   Vorgaenger war "Arabic Transparent" in damoriaRight.css - eine
   Windows-XP-Schrift, die heute auf kaum einem Geraet noch liegt. Wer sie
   nicht hat, bekam irgendeine Ersatzschrift.
   ========================================================================= */

/* --- Tajawal: Flaechenschrift fuer die Oberflaeche ------------------------
   Ruhig, gut lesbar in kleinen Graden, klare Ziffern. OFL-lizenziert,
   selbst gehostet wie MedievalSharp (kein fremder Server im Spiel). */
@font-face {
    font-family: 'Tajawal';
    src: url('/css/fonts/tajawal-arabic-400.woff2?v=1') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    src: url('/css/fonts/tajawal-arabic-700.woff2?v=1') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF;
}

/* --- Amiri: klassisches Naskh fuer Ueberschriften ------------------------
   Das arabische Gegenstueck zu MedievalSharp - traegt denselben
   handgesetzten, altertuemlichen Ton, ohne ihn nachzuaeffen. */
@font-face {
    font-family: 'Amiri';
    src: url('/css/fonts/amiri-arabic-400.woff2?v=1') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Amiri';
    src: url('/css/fonts/amiri-arabic-700.woff2?v=1') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF;
}

/* =========================================================================
   Ersatz fuer das HTML-Attribut align="left|right"
   =========================================================================
   ACHTUNG: dieser Block gilt fuer ALLE Sprachen, nicht nur fuer RTL - er
   steht bewusst NICHT unter [dir="rtl"].

   Das alte Attribut align="left" meint immer physisch links. In den
   Vorlagen stand es 218-mal, meist an Tabellenzellen. Ersetzt durch
   data-ta="start|end", weil "start" die Seite meint, an der die Zeile
   beginnt - links im Deutschen, rechts im Arabischen.

   Warum ein Attribut und keine inline-Angabe: das alte align-Attribut hatte
   die geringste Durchsetzungskraft, jede CSS-Regel stach es. Ein
   style="text-align:..." haette dagegen ALLE bestehenden Regeln
   uebersteuert und damit anderswo das Layout veraendert. Der
   Attributselektor bleibt bei der urspruenglichen Rangfolge. */
[data-ta="start"] { text-align: start; }
[data-ta="end"]   { text-align: end; }

/* --- Schriftfamilie -------------------------------------------------------
   Die Aufzaehlung deckt die Elemente ab, die im Spiel eine EIGENE
   font-family setzen (46 Regeln mit "Verdana, Arial, ..."). Blosses Erben
   ueber body reicht dort nicht, deshalb die Liste.

   Nach den arabischen Schriften stehen Systemschriften: fuer Hebraeisch
   (Arial Hebrew, Narkisim), fuer Urdu (Nastaliq, wo vorhanden) und als
   letzte Rettung die normale Systemschrift. Die unicode-range oben sorgt
   dafuer, dass lateinische Zeichen NICHT aus Tajawal kommen - Ziffern und
   Spielernamen bleiben in der gewohnten Schrift. */
[dir="rtl"] body,
[dir="rtl"] table, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] tr,
[dir="rtl"] div, [dir="rtl"] span, [dir="rtl"] p, [dir="rtl"] a,
[dir="rtl"] ul, [dir="rtl"] ol, [dir="rtl"] li, [dir="rtl"] label,
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] button, [dir="rtl"] legend, [dir="rtl"] fieldset {
    font-family: 'Tajawal', 'Noto Sans Arabic', 'Noto Naskh Arabic',
                 'Arial Hebrew', 'Noto Sans Hebrew',
                 'Noto Nastaliq Urdu', 'Segoe UI', Tahoma,
                 Arial, Helvetica, sans-serif;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: 'Amiri', 'Noto Naskh Arabic', 'Tajawal',
                 Georgia, 'Times New Roman', serif;
}

/* Symbolschriften duerfen NICHT ersetzt werden - sonst werden aus den
   Symbolen Buchstaben. Die Attributselektoren oben sind spezifischer als
   die urspruenglichen Klassenregeln, deshalb hier ausdruecklich zurueck. */
[dir="rtl"] .glyphicons,
[dir="rtl"] .glyphicons:before,
[dir="rtl"] [class^="glyphicons-"],
[dir="rtl"] [class*=" glyphicons-"] {
    font-family: 'Glyphicons Regular' !important;
}

/* --- Schriftmasse --------------------------------------------------------
   Das Spiel setzt body auf 10px. Fuer die arabische Schrift ist das zu
   klein: die Unterscheidungspunkte unter und ueber den Buchstaben
   (ب ت ث ن ي) verschwinden, und ohne sie sind mehrere Buchstaben nicht
   mehr auseinanderzuhalten. Arabisch traegt bei gleicher Punktzahl
   ausserdem optisch kleiner auf als Verdana.

   Der Zeilenabstand muss deutlich groesser sein, weil arabische Schrift
   sowohl nach oben als auch nach unten weit ueber die Grundlinie
   hinausgeht. */
[dir="rtl"] body {
    font-size: 12px;
    line-height: 1.7;
}

/* --- Buchstabenabstand ---------------------------------------------------
   Der wichtigste Einzelpunkt dieser Datei. Arabisch ist eine VERBUNDENE
   Schrift; letter-spacing zieht die Verbindungen auseinander, und das Wort
   zerfaellt optisch in Einzelteile. Es ist das klassische Erkennungszeichen
   einer schlecht gemachten arabischen Fassung.

   Im Spiel steht letter-spacing an vier Stellen (Startseite, 3D-Karte).
   Statt sie einzeln zu jagen, wird es hier fuer RTL pauschal abgeschaltet -
   fuer Latein bleibt es unveraendert, weil diese Regel nur unter
   [dir="rtl"] greift. */
[dir="rtl"] * {
    letter-spacing: normal !important;
}

/* --- Gespiegelte Symbole -------------------------------------------------
   Pfeile, Zurueck/Weiter und aehnliche RICHTUNGSSYMBOLE zeigen in RTL auf
   die andere Seite. Frueher lagen dafuer zwei Bilddateien nebeneinander
   (px/right.gif und px/left.gif) und mussten getrennt gepflegt werden;
   jetzt genuegt eine Datei plus diese Regel.

   Ausdruecklich NICHT hier: Wappen, Gebaeude, Truppen, Uhren, Logos. Die
   zeigen keine Richtung an und duerfen nicht gespiegelt werden. */
[dir="rtl"] .dirFlip {
    transform: scaleX(-1);
}

/* --- Fortschrittsbalken --------------------------------------------------
   Ein Balken fuellt sich in Leserichtung: im Arabischen also von rechts.
   Die Breite setzt das Spiel je Balken einzeln (inline), deshalb wird hier
   nur die Seite gedreht, an der er verankert ist. */
[dir="rtl"] .progress,
[dir="rtl"] .progressBar,
[dir="rtl"] .prBg,
[dir="rtl"] [class^="prBg"] {
    transform-origin: right center;
}

/* --- Zahlen, Zeiten, Bezeichner ------------------------------------------
   Alles, was von links nach rechts gelesen wird, bekommt eine eigene
   Richtungsinsel. Ohne sie wandern Punkt und Komma an die falsche Seite:
   aus "13 Mio." wird ".Mio 13", aus "6. Aug. 2014" wird "Aug. 2014 .6".

   isolate schneidet den Inhalt fuer den Bidi-Algorithmus sauber heraus,
   ohne den Textfluss ringsum zu stoeren. */
[dir="rtl"] .ltr,
[dir="rtl"] .num,
[dir="rtl"] time,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Eingabefelder fuer Zahlen und technische Werte bleiben LTR - man tippt
   eine Menge oder Koordinate von links nach rechts, auch auf Arabisch. */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: start;
}