/* Languages: the picker, and the layout mirrored for right-to-left Arabic (html[dir=rtl], set by js/i18n.js).
   Kept apart from style.css so the mirroring sits in one place; flex rows and text already follow dir by themselves. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-pick{position:relative;display:inline-block}
.lang-pick summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;font-size:14px;padding:4px 12px 4px 6px;
 border-radius:999px;background:#fff;color:var(--ink,#26301a);box-shadow:0 2px 0 rgba(0,0,0,.15);white-space:nowrap}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary::after{content:'';width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-inline-start:4px;opacity:.6}
.lang-pick .flag{width:28px;height:28px;object-fit:contain;flex:none}
.lang-grid{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:70;display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:4px;
 padding:8px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3);max-height:min(70vh,520px);overflow:auto}
.lang-grid button{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:12px;font-weight:600;font-size:14px;color:var(--ink,#26301a);text-align:start}
.lang-grid button:hover,.lang-grid button[aria-selected=true]{background:#eef2e4}
.lang-grid button[aria-selected=true]{outline:2px solid var(--green,#5aa83a)}
.lang-grid.inline{position:static;box-shadow:none;max-height:none;padding:0;background:none;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lang-grid.inline button{background:var(--panel-2,#f3f1e6);padding:8px 12px 8px 8px}
@media (max-width:420px){.lang-grid{grid-template-columns:1fr 1fr;min-width:0;width:calc(100vw - 32px)}.lang-grid.inline{width:auto}.lang-grid button{font-size:13px}}
.landing-lang{margin-inline-start:auto;margin-inline-end:8px}

/* Arabic and the other scripts Rubik lacks fall back to the system's fonts; give them a little more line height. */
:lang(ar),:lang(hi),:lang(ja),:lang(zh){line-height:1.45}

[dir=rtl] .lang-pick summary{padding:4px 6px 4px 12px}
[dir=rtl] .me{padding:4px 4px 4px 16px}
[dir=rtl] .chip{padding:0 6px 0 14px}
[dir=rtl] .chip .fill{left:14px;right:38px}
[dir=rtl] .side{left:auto;right:12px;align-items:flex-end}
[dir=rtl] .side .orders.open{left:auto;right:72px}
[dir=rtl] .order,[dir=rtl] .card{text-align:right}
[dir=rtl] .order.week{border-left:0;border-right:5px solid var(--blue)}
[dir=rtl] .card .badge{right:auto;left:10px}
[dir=rtl] .bloot{left:auto;right:12px}
[dir=rtl] .endbtn{right:auto;left:12px}
[dir=rtl] .troop .n{right:auto;left:6px}
[dir=rtl] .viewbtns{right:auto;left:12px}
[dir=rtl] .big .badge{right:auto;left:8px}
[dir=rtl] .big .badge.dot{left:14px}
[dir=rtl] .big .badge.alert{left:4px}
[dir=rtl] .sb-badge{right:auto;left:-4px}
[dir=rtl] .sb-count{right:auto;left:-6px}
[dir=rtl] .tabdot{right:auto;left:6px}
[dir=rtl] .coach{padding:10px 10px 10px 16px}
[dir=rtl] .logrow{border-left:0;border-right:5px solid var(--green)}
[dir=rtl] .toggle i{left:auto;right:3px;transition:right .15s}
[dir=rtl] .toggle.on i{left:auto;right:25px}
[dir=rtl] .pw input{padding-right:14px;padding-left:70px}
[dir=rtl] .pw button{right:auto;left:8px}
[dir=rtl] .dotb,[dir=rtl] .mission b .ui-ico{margin-left:0;margin-right:2px}
[dir=rtl] .pips i{margin-right:0;margin-left:2px}
/* The battle's destruction bar and its 50% mark keep filling from the left. */
[dir=rtl] .destroy{direction:ltr}
@media (max-width:640px){[dir=rtl] .chip .fill{left:10px;right:30px}[dir=rtl] .me{padding-left:12px}}
@media (max-width:520px){[dir=rtl] .me{padding:3px}}