/* Languages (kernel/i18n.php, game_languages.php): what the site and the admin need beyond the words. Loaded last in
   both shells, so these rules sit over the skins'. */

/* Thai, Devanagari, Bengali and the Arabic scripts stack or join their letters: tracking pulls them apart. */
:is(:lang(th), :lang(hi), :lang(bn), :lang(ar), :lang(fa), :lang(ur)) { letter-spacing: 0 !important; }

/* Right to left (ar, fa, ur): the layout mirrors through flex and grid; these are the parts that do not. */
/* the skins' effect canvases bleed past the screen's edges; an rtl page would scroll to the bleed on a phone */
[dir='rtl'] body { overflow-x: clip; }

/* what people write (posts, news, banners) keeps its own direction: an English post reads left to right, its full
   stop at its end */
[dir='rtl'] :is(.md :is(p, li, h1, h2, h3, h4, blockquote), .tw-title, .tw-trend b, .news-title, .gacha-banner-text :is(h2, p)) { unicode-bidi: plaintext; text-align: start; }

/* signed figures read as figures: +25%, -30%, +40 (CLDR shows them left to right in Arabic too) */
[dir='rtl'] :is(.vip-tile b, .vip-sale em, .coin-list :is(.is-in, .is-out), .pl-delta, i:is(.is-up, .is-down)) { direction: ltr; unicode-bidi: isolate; }

/* art drawn for the left: the text stays on its dark side and the numeral on its ring, read right to left */
[dir='rtl'] .gacha-banner { direction: ltr; }
[dir='rtl'] .gacha-banner > * { direction: rtl; }
[dir='rtl'] .gacha-banner-text { max-width: 520px; }
[dir='rtl'][data-skin='arcane'] .hero-style-rail .hero-rail-item { direction: ltr; }
[dir='rtl'][data-skin='arcane'] .hero-style-rail .hero-rail-item span { direction: rtl; text-align: left; }

/* the admin: chevrons point the reading way; a tile's sparkline lies under the side its text leaves free */
[dir='rtl'] .icon-chevron { scale: -1 1; }
/* samurai's "more" chevron points the reading way too, and nudges that way on hover */
[dir='rtl'][data-skin='samurai'] .card-more::after { scale: -1 1; }
[dir='rtl'][data-skin='samurai'] .card-more:hover::after { translate: -3px 0; }
[dir='rtl'] .spark { right: auto; left: 0; }

/* the language picker: a right-to-left language keeps its flag where the others have theirs; in the admin its panel
   hangs from the opener's other side on an rtl page */
html[dir='ltr'] .lang-item[dir='rtl'] { direction: ltr; }
[dir='rtl'] .top-tools .lang-panel { right: auto; left: 0; }

/* Long words (de, hu, el, ru ...): */
/* a narrow block's title: the plate's ends give room, and it takes two lines before it gives in to "..." */
.home-block { container-type: inline-size; }
@container (max-width: 520px) {
  .card-head h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; white-space: normal; }
  :is([data-skin='arcane'], [data-skin='vine_live']) .card-head { --plate: 80px; letter-spacing: 0.1em; }
  [data-skin='parchment'] .card-head { --plate: 70px; font-size: 13px; letter-spacing: 0.06em; }
  [data-skin='parchment'] .card-head h2 { line-height: 1.05; }
  [data-skin='parchment'] .card-head .card-more { letter-spacing: 0.06em; }
}
/* an event card stays square but grows when its countdown wraps (clip, unlike hidden, lets the content set a minimum) */
.event-list:is(.is-cards, .is-strip) .event-row[style] { overflow: clip; }
/* the VIP buy button takes two lines for a long "Get Diamond VIP" */
.vip-btn-text { white-space: normal; text-wrap: balance; }
/* parchment's ribbon holds one line, tracked wide for English: other languages run longer, so it tracks tighter */
[data-skin='parchment']:not(:lang(en)) :is(.card-head, .h-title) { letter-spacing: 0.04em; }
/* arcane's and vine's plates are tall enough for two lines anywhere (a gacha page's "Raten für Dragon Hoard") */
:is([data-skin='arcane'], [data-skin='vine_live']) .card-head h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; white-space: normal; }