/* A language written right to left: its own letter, no spacing pulled between letters that
   join, and the layout left as it is. A table is a table from either side: the chairs, the board
   and the hand stay where they are, and only the text turns. */

/* The game's own letters, its very files: Alegreya for the Latin and the Cyrillic, Vazirmatn
   behind it for the Persian and Arabic, in that order, as Look.Serif and Look.Behind stand them.
   One stack everywhere, so a Persian name on an English page is Vazirmatn and a Latin word in a
   Persian sentence is Alegreya. Alegreya is kept off the joiners U+200C to 200F, which belong to
   the Persian word around them. Its files are the game's, made smaller by tools/fonts.mjs: only
   the letters of the site's languages, in the ranges given here and there alike, so a page that
   writes nothing in them does not ask for Alegreya at all.
   The game draws each face at its plain weight only and makes it heavier by thickening the
   strokes (Look.Bold, Look.Title), never by Alegreya's own bold: so each face here is given at
   400 alone, and the browser thickens it the same way for anything set bold. A Persian line set
   in italic stays upright, as the game's mottos do where Alegreya's italic has no letter.
   Written at once in a stand-in and turned into the letter when it comes (swap): held back, the
   words of a slow line stayed unseen for up to three seconds.
   Vazirmatn's ink stands 0.80 of a size over the line and reaches 0.36 under it (ر ج ع), more
   than a line set at 1 or 1.2 holds. So a line of words that must not run past its room is cut
   at its sides only (`overflow: hidden` for an old browser, then `overflow: clip visible`), never
   above and below. */
@font-face {
    font-family: "Alegreya";
    src: url("../art/fonts/Alegreya.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-024F, U+0400-052F, U+1E00-1EFF, U+2000-200B, U+2010-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Alegreya";
    src: url("../art/fonts/Alegreya-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-024F, U+0400-052F, U+1E00-1EFF, U+2000-200B, U+2010-206F, U+20A0-20CF, U+2100-214F, U+2190-22FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../art/fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --face: "Alegreya", "Vazirmatn", Georgia, serif;
    font-synthesis-style: none;
}

[dir="rtl"] * {
    letter-spacing: 0 !important;
}

/* The pieces that are placed by left and right keep their places whatever the text does. */
[dir="rtl"] .table,
[dir="rtl"] .online header,
[dir="rtl"] .halls,
[dir="rtl"] .door header {
    direction: ltr;
}

[dir="rtl"] .table .status,
[dir="rtl"] .table .naming,
[dir="rtl"] .table .banner,
[dir="rtl"] .seat .plaque span {
    direction: rtl;
}

/* A little bigger where the Latin letter was set small: this one reads smaller at the same size. */
[dir="rtl"] .seat .plaque .name { font-size: calc(2.6 * var(--h)); top: 16%; }
[dir="rtl"] .seat .plaque .house { top: 58%; }
[dir="rtl"] .board span { top: 50%; }

/* The choice of language, small in a corner wherever the player is not at a table. */

.tongues {
    position: fixed;
    left: 12px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    direction: ltr;
    z-index: 5;
}

.tongues button {
    padding: 3px 12px;
    border: 1px solid var(--gold);
    border-radius: 20px;
    background: rgba(246, 230, 192, 0.85);
    color: var(--navy);
    font: 14px var(--face);
    cursor: var(--point);
}

.tongues button.chosen {
    background: var(--navy);
    color: var(--cream);
}

/* A phone held upright has the page on its side, and the corner goes with it: the page's bottom
   left is the screen's top left. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .tongues {
        left: 10px;
        top: 12px;
        bottom: auto;
        transform-origin: 0 0;
        transform: rotate(90deg) translateY(-100%);
    }
}

/* ---- the door in the kit's own pieces: the panel, the field and the main button ---- */

.door .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url("../art/kit/panel.png") center / 100% 100% no-repeat;
    padding: clamp(28px, 7vh, 60px) clamp(30px, 6vw, 70px);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}

.door input {
    border: 0;
    border-radius: 0;
    background: var(--field, url("../art/kit/field.png")) center / 100% 100% no-repeat;
    padding: 0.8em 1.4em;
}

.door input:focus { outline: none; filter: brightness(1.04); }

.door button.main {
    justify-self: center;
    height: 3em;
    aspect-ratio: 720 / 222;
    padding: 0 0 0.2em;
    border-radius: 0;
    background: var(--main, url("../art/kit/flat/button-main.png")) center / 100% 100% no-repeat;
    font-size: 1.05em;
    font-weight: 600;
}