/* MemoMilo — langues (FR / EN / AR) et mise en page droite-à-gauche. v256 */

/* ---------- Drapeaux ---------- */
.mm-flag-frame { position: relative; display: inline-block; flex: 0 0 auto; width: 42px; height: 28px; border-radius: 7px; overflow: hidden; background: #e8eef2;
	box-shadow: 0 0 0 1px rgba(15, 40, 60, .14), 0 3px 8px rgba(15, 40, 60, .16); }
.mm-flag-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: linear-gradient(160deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .08)); }
.mm-flag { display: block; width: 100%; height: 100%; }

/* ---------- Langue du jeu (Réglages) ---------- */
.mq-settings-row.mq-lang-row, .mq-shell[data-skin] .mq-settings-row.mq-lang-row { display: block !important; padding: 14px 14px 14px !important; height: auto !important; }
.mq-lang-head .mq-settings-copy { flex: 1 1 auto; min-width: 0; }
.mq-lang-head { display: flex; align-items: center; gap: 12px; }
.mq-lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mq-lang-option {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 92px; padding: 14px 6px 12px;
	border: 0; border-radius: 18px; cursor: pointer; font: inherit; color: var(--encre-2, #234);
	background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--turq, #0e9aa7) 5%, #fff));
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--turq, #0e9aa7) 14%, transparent), 0 4px 12px rgba(21, 60, 90, .07);
	transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), box-shadow .22s, background .22s; -webkit-tap-highlight-color: transparent;
}
.mq-lang-option .mm-flag-frame { width: 48px; height: 32px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.mq-lang-name { font-size: .84rem; font-weight: 850; line-height: 1.1; }
.mq-lang-option[lang="ar"] .mq-lang-name { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-size: .95rem; }
.mq-lang-check {
	position: absolute; top: 7px; inset-inline-end: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff;
	background: var(--turq, #12a4b0); transform: scale(0); transition: transform .25s cubic-bezier(.2, .9, .3, 1.5);
}
.mq-lang-check svg { width: 13px; height: 13px; stroke-width: 3; }
.mq-lang-option:active { transform: scale(.96); }
.mq-lang-option.is-active {
	color: var(--turq-2, #0b7f8a);
	background: linear-gradient(180deg, color-mix(in srgb, var(--turq, #12a4b0) 10%, #fff), color-mix(in srgb, var(--turq, #12a4b0) 18%, #fff));
	box-shadow: inset 0 0 0 2px var(--turq, #12a4b0), 0 8px 20px color-mix(in srgb, var(--turq, #12a4b0) 24%, transparent);
}
.mq-lang-option.is-active .mq-lang-check { transform: scale(1); }
.mq-lang-option.is-active .mm-flag-frame { transform: translateY(-1px) scale(1.06); }
.mq-lang-option.is-loading { animation: mm-lang-pulse .5s ease-in-out infinite alternate; }
@keyframes mm-lang-pulse { to { box-shadow: inset 0 0 0 2px var(--turq, #12a4b0), 0 0 0 6px color-mix(in srgb, var(--turq, #12a4b0) 18%, transparent); } }
.mq-lang-option:focus-visible { outline: 3px solid var(--turq, #0e9aa7); outline-offset: 2px; }

/* ---------- Premier lancement : fenêtre de langue ---------- */
html.mm-gate-open, html.mm-gate-open body { overflow: hidden; }
.mm-lang-gate, .mm-lang-gate *, .mm-lang-gate *::before, .mm-lang-gate *::after { box-sizing: border-box; }
.mm-lang-gate { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mm-lang-gate {
	position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
	background: rgba(8, 40, 56, .34); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
	opacity: 0; transition: opacity .38s ease; font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", Roboto, system-ui, sans-serif;
}
.mm-lang-gate.is-in { opacity: 1; }
.mm-lang-gate.is-leaving { opacity: 0; transition-duration: .3s; }
.mm-gate-glow { position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(60% 40% at 50% 30%, rgba(120, 225, 255, .35), transparent 70%), radial-gradient(50% 35% at 50% 85%, rgba(255, 214, 120, .22), transparent 70%); }
.mm-gate-card {
	position: relative; width: 100%; max-width: 380px; min-width: 0; padding: 26px 20px 20px; border-radius: 30px; text-align: center; color: #123c4f;
	background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72));
	-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 30px 70px rgba(6, 40, 60, .32), 0 2px 0 rgba(255, 255, 255, .9) inset;
	transform: translateY(26px) scale(.94); transition: transform .55s cubic-bezier(.2, .9, .25, 1.15);
}
.mm-lang-gate.is-in .mm-gate-card { transform: none; }
.mm-lang-gate.is-leaving .mm-gate-card { transform: translateY(-14px) scale(.97); transition-duration: .3s; }
.mm-gate-mark { display: flex; justify-content: center; gap: 6px; height: 46px; margin-bottom: 6px; }
.mm-gate-mark span { width: 30px; height: 42px; border-radius: 8px; background: linear-gradient(160deg, #33e2d6, #1b8ce6); box-shadow: 0 6px 14px rgba(27, 140, 230, .35), inset 0 0 0 2px rgba(255, 255, 255, .6); }
.mm-gate-mark span:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
.mm-gate-mark span:nth-child(3) { transform: rotate(12deg) translateY(4px); }
.mm-gate-mark span:nth-child(2) { animation: mm-gate-bob 2.6s ease-in-out infinite; }
@keyframes mm-gate-bob { 50% { transform: translateY(-4px); } }
.mm-gate-brand { margin: 0; font-size: .78rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #0a8f9b; }
.mm-gate-title { margin: 6px 0 4px; font-size: 1.5rem; line-height: 1.2; font-weight: 950; }
.mm-gate-sub { margin: 0 0 18px; font-size: .88rem; line-height: 1.35; color: #4a6c78; }
.mm-gate-card[lang="ar"] .mm-gate-title, .mm-gate-card[lang="ar"] .mm-gate-sub, .mm-gate-card[lang="ar"] .mm-gate-go { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif; letter-spacing: 0; }
.mm-gate-list { display: grid; gap: 10px; }
.mm-gate-lang {
	position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 16px; border: 0; border-radius: 18px; cursor: pointer;
	font: inherit; font-size: 1.05rem; font-weight: 850; color: #143f4c; text-align: start;
	background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1.5px rgba(18, 120, 140, .14), 0 4px 12px rgba(10, 50, 70, .06);
	transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), box-shadow .22s, background .22s; -webkit-tap-highlight-color: transparent;
}
.mm-gate-lang[lang="ar"] { font-family: "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", Tahoma, sans-serif; font-size: 1.15rem; }
.mm-gate-lang:active { transform: scale(.97); }
.mm-gate-lang .mm-flag-frame { width: 48px; height: 32px; }
.mm-gate-name { flex: 1 1 auto; }
.mm-gate-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #0a8f9b; transform: scale(0); transition: transform .28s cubic-bezier(.2, .9, .3, 1.6); }
.mm-gate-check svg { width: 16px; height: 16px; }
.mm-gate-lang.is-on { background: linear-gradient(180deg, #ffffff, #e9fbfb); box-shadow: inset 0 0 0 2.5px #0a9fac, 0 10px 24px rgba(10, 143, 155, .22); }
.mm-gate-lang.is-on .mm-gate-check { transform: scale(1); }
.mm-gate-lang:focus-visible, .mm-gate-go:focus-visible { outline: 3px solid #0a8f9b; outline-offset: 2px; }
.mm-gate-go {
	width: 100%; min-height: 56px; margin-top: 18px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 1.08rem; font-weight: 900; color: #fff;
	background: linear-gradient(135deg, #0a8f9b 0%, #176db5 100%); box-shadow: 0 5px 0 #075d6b, 0 14px 26px rgba(23, 109, 181, .3);
	transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent;
}
.mm-gate-go:active { transform: translateY(3px); box-shadow: 0 2px 0 #075d6b, 0 8px 16px rgba(23, 109, 181, .25); }
@media (prefers-reduced-motion: reduce) { .mm-gate-card, .mm-lang-gate { transition: none; } .mm-gate-mark span:nth-child(2) { animation: none; } }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .mm-lang-gate { background: rgba(8, 40, 56, .72); } .mm-gate-card { background: #fff; } }

/* ---------- Arabe : police et écriture cursive ---------- */
html.mm-lang-ar body {
	font-family: ui-rounded, "SF Pro Rounded", "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
}
/* L’espacement des lettres casse la liaison des lettres arabes. */
html.mm-lang-ar body *, html.mm-lang-ar body *::before, html.mm-lang-ar body *::after { letter-spacing: 0 !important; }
html.mm-lang-ar .mm-gate-brand { letter-spacing: .18em !important; }
html.mm-lang-ar .mq-nav button small { font-size: .66rem; line-height: 1.25; }

/* ---------- Droite-à-gauche ---------- */
html[dir="rtl"] svg[data-ico="retour"],
html[dir="rtl"] svg[data-ico="suite"],
html[dir="rtl"] svg[data-ico="quitter"] { transform: scaleX(-1); }
/* Carrousels 3D : en arabe la suivante arrive par la gauche ; « suivant » passe à gauche, « précédent » à droite. */
html[dir="rtl"] .mq-univers-arrow.is-prev { left: auto; right: 6px; }
html[dir="rtl"] .mq-univers-arrow.is-next { right: auto; left: 6px; }
/* Nombres, scores, chronos et codes restent lisibles de gauche à droite. */
html[dir="rtl"] input[inputmode="numeric"], html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: center; }
html[dir="rtl"] .mq-nav .mq-badge { right: auto; left: calc(50% - 22px); }

/* ---------- Textes portés par le CSS ---------- */
html.mm-lang-en .mq-online-challenge-timer.is-expired > span b::after { content: " · time's up"; }
html.mm-lang-ar .mq-online-challenge-timer.is-expired > span b::after { content: " · انتهى الوقت"; }
html.mm-lang-en .mq-speed-duel[data-phase="waiting-ready"] .mq-speed-title em:after { content: " · SYNCING"; }
html.mm-lang-ar .mq-speed-duel[data-phase="waiting-ready"] .mq-speed-title em:after { content: " · مزامنة"; }
html.mm-lang-en .mq-speed-rival-window::before { content: "RIVAL BOARD"; }
html.mm-lang-ar .mq-speed-rival-window::before { content: "لوحة المنافس"; }
html.mm-lang-ar .mq-speed-rival-window::after { content: "● مباشر"; }
html.mm-lang-en .mq-shell .mq-tp .mp-size-grid button:after { content: "players"; }
html.mm-lang-ar .mq-shell .mq-tp .mp-size-grid button:after { content: "لاعبين"; }
html.mm-lang-en .tn241-scout-head::after { content: "CONFIDENTIAL"; }
html.mm-lang-ar .tn241-scout-head::after { content: "سري"; }
html.mm-lang-ar .mq-arena-act.is-tournament .mq-arena-copy strong::after { margin-left: 0; margin-right: 6px; }

/* ---------- Mode Histoire ---------- */
html[dir="rtl"] #exit svg, html[dir="rtl"] .ctaArrow, html[dir="rtl"] svg:has(> use[href="#i-next"]) { transform: scaleX(-1); }