/* ══════════════════════════════════════════════════════════════════════════
   Taal — 1a de menurij, 1b het taalscherm, 1c de lade bij de eerste login
   (design "Taalkeuzescherm met inhaalmanoeuvrescherm", 11 nov 2026).
   Het taalscherm leeft in de schil van het persoonlijke menu (pm_*).
   ══════════════════════════════════════════════════════════════════════════ */

/* de vlag: dezelfde sprite als .fflag, met de glans van het ontwerp erover */
.tl_vlag
{
	position: relative; flex: none; width: 24px; height: 18px; overflow: hidden;
	background-image: url(/public/img/cubelegend/flagSprite42.png); background-repeat: no-repeat; background-size: 100% 49494%;
	box-shadow: 0 0 0 1px rgb(197 197 197);
}
.tl_vlag i { position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: #fff; opacity: .3; }
.tl_chip
{
	flex: none; font-family: headers, sans-serif; font-size: 8.5px; letter-spacing: 1px; padding: 2px 5px; border-radius: 4px;
	color: #7ad4ff; border: 1px solid #7ad4ff66;
}

/* ── 1b · het taalscherm ── */
.pm_taal_toestel
{
	display: flex; align-items: center; gap: 12px; padding: 14px;
	border: 2px solid #7ad4ff45; border-radius: 12px; background: linear-gradient(160deg, #1d3d5c, #12233a);
}
.pm_taal_toestel > span
{
	flex: none; width: 38px; height: 38px; border-radius: 11px; background: #00000059; border: 1px solid #7ad4ff45;
	display: flex; align-items: center; justify-content: center;
}
.pm_taal_toestel b { display: block; font-family: headers, sans-serif; font-weight: normal; font-size: 13.5px; letter-spacing: .5px; }
.pm_taal_toestel small { display: block; font-size: 10px; color: #ffffff9c; margin-top: 2px; }
.pm_taal_zoek
{
	display: flex; align-items: center; gap: 10px; height: 46px; box-sizing: border-box; padding: 0 12px;
	border: 2px solid #ffffff21; border-radius: 12px; background: #00000059;
}
.pm_taal_zoek input
{
	flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff;
	font-family: p, sans-serif; font-size: 14px;
}
.pm_taal_zoek input::placeholder { color: #ffffff70; }
.pm_taal_wis
{
	flex: none; width: 26px; height: 26px; border-radius: 8px; background: #ffffff14;
	display: flex; align-items: center; justify-content: center;
}
.pm_taal_wis[hidden] { display: none; }
.pm_taal_kop { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.pm_taal_kop span:first-child { font-family: headers, sans-serif; font-size: 9.5px; letter-spacing: 2.5px; color: #FFC46B; }
.pm_taal_kop i { flex: 1; height: 1px; background: #ffffff1c; }
.pm_taal_kop span:last-child { font-size: 9.5px; color: #ffffff70; }
.pm_taal_rij
{
	display: flex; align-items: center; gap: 11px; padding: 10px 14px; min-height: 44px; box-sizing: border-box;
	border-bottom: 1px solid #00000073;
}
.pm_taal_rij:last-child { border-bottom: 0; }
.pm_taal_rij[hidden] { display: none; }
.pm_taal_rij.is-gekozen { background: #ffc10714; }
.pm_taal_rij.is-gekozen .tl_vlag { box-shadow: 0 0 0 1px rgb(197 197 197), 0 0 0 3px #FFC10780; }
.pm_taal_rij__naam { flex: 1; min-width: 0; }
.pm_taal_rij__naam b { display: block; font-family: headers, sans-serif; font-weight: normal; font-size: 13px; letter-spacing: .5px; color: #ffffffd6; }
.pm_taal_rij__naam small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 1px; }
.tl_radio
{
	flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2px solid #ffffff40;
	display: flex; align-items: center; justify-content: center;
}
.tl_radio svg { display: none; }
.is-gekozen .tl_radio { border-color: #FFC107; background: #FFC107; }
.is-gekozen .tl_radio svg { display: block; }
.pm_taal_geen { text-align: center; padding: 6px 0; font-size: 11px; color: #ffffff8a; }
.pm_taal_geen[hidden] { display: none; }
.pm_taal_noot { text-align: center; font-size: 9.5px; color: #ffffff70; }
/* de vastgezette knop onder de lijst; gedimd tot de keuze afwijkt van wat bewaard is */
.pm_dok { position: relative; flex: none; padding: 14px 14px 20px; border-top: 1px solid #ffffff14; }
.pm_dok .cl-btn-frame { display: block; }
.pm_dok .cl-btn { width: 100%; }
.pm_dok.is-bewaard .cl-btn-frame { opacity: .55; filter: grayscale(.7); }

/* ── 1c · de lade bij de eerste login ── */
.tl_lade_wrap { position: fixed; inset: 0; z-index: 100000; }
.tl_lade_onder { position: absolute; inset: 0; background: #0b0318b8; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.tl_lade
{
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 96%;
	border-top: 4px solid #000; border-radius: 28px 28px 0 0;
	background: linear-gradient(180deg, #2a0650, #14062a 48%);
	box-shadow: 0 -20px 50px #000000aa, inset 0 3px 0 #b04dff55;
	display: flex; flex-direction: column; color: #fff; font-family: p, sans-serif;
	/* de game zet tekst standaard gecentreerd en in kapitalen; de lade volgt het ontwerp: links, zoals geschreven */
	text-align: left; text-transform: none;
	transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tl_lade_wrap.is-open .tl_lade_onder { opacity: 1; }
.tl_lade_wrap.is-open .tl_lade { transform: none; }
.tl_lade__greep { flex: none; padding: 10px 0 0; text-align: center; }
.tl_lade__greep i { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: #ffffff40; }
.tl_lade__kop { flex: none; display: flex; align-items: center; gap: 13px; padding: 12px 18px 14px; }
.tl_lade__avatar { position: relative; flex: none; width: 58px; height: 58px; }
.tl_lade__avatar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #FFC107; box-shadow: 0 0 18px #ffc10755; }
.tl_lade__avatar img { position: absolute; inset: 3px; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #150829; }
.tl_lade__avatar span
{
	position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #5ce08a; border: 3px solid #000;
	display: flex; align-items: center; justify-content: center; box-sizing: content-box;
}
.tl_lade__stap { font-family: headers, sans-serif; font-size: 9.5px; letter-spacing: 2.5px; color: #5ce08a; }
.tl_lade__titel { font-family: headers, sans-serif; font-size: 19px; letter-spacing: 1px; text-shadow: 0 2px black; margin-top: 3px; }
.tl_lade__sub { font-size: 10.5px; color: #ffffff8a; margin-top: 2px; }
.tl_lade__midden { flex: 1; min-height: 0; padding: 0 14px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; }
.tl_lade__midden::-webkit-scrollbar { display: none; }
.tl_held { flex: none; border: 4px solid #000; border-radius: 18px; box-shadow: 0 0 24px #ffc10733; }
.tl_held > div
{
	position: relative; overflow: hidden; border: 3px solid #FFC107; border-radius: 14px;
	background: radial-gradient(ellipse at 18% 50%, #ffc10733, transparent 60%), linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px;
}
.tl_held__rij { display: flex; align-items: center; gap: 14px; }
.tl_held .tl_vlag { width: 56px; height: 42px; border-radius: 5px; box-shadow: 0 0 0 1px rgb(197 197 197), 0 0 0 4px #000, 0 6px 14px #000000aa; }
.tl_held__naam { font-family: headers, sans-serif; font-size: 24px; letter-spacing: 1px; line-height: 1.05; text-shadow: 0 3px #000; }
.tl_held__sub { font-size: 11px; color: #ffffff8a; margin-top: 3px; }
.tl_held__sub.is-toestel { color: #7ad4ff; }
.tl_held__vink
{
	flex: none; width: 26px; height: 26px; border-radius: 50%; background: #FFC107; border: 3px solid #000;
	display: flex; align-items: center; justify-content: center; box-sizing: content-box;
}
.tl_held__proef { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: #00000059; border: 1px solid #ffffff1a; }
.tl_held__proef span:first-child { flex: none; font-family: headers, sans-serif; font-size: 8.5px; letter-spacing: 1.5px; color: #ffffff70; }
.tl_held__proef span:last-child { font-family: headers, sans-serif; font-size: 15px; letter-spacing: .5px; color: #FFC46B; }
.tl_of { flex: none; display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.tl_of span { font-family: headers, sans-serif; font-size: 9.5px; letter-spacing: 2.5px; color: #FFC46B; }
.tl_of i { flex: 1; height: 1px; background: #ffffff1c; }
.tl_rooster { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tl_tegel
{
	display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 0 12px;
	border-radius: 12px; border: 2px solid #ffffff1c; background: #00000047;
}
.tl_tegel b { flex: 1; min-width: 0; font-family: headers, sans-serif; font-weight: normal; font-size: 12.5px; letter-spacing: .5px; color: #ffffffd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl_tegel .tl_chip { font-size: 8px; padding: 2px 4px; }
.tl_meer
{
	display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 0 12px;
	border-radius: 12px; border: 2px dashed #ffffff2b; font-family: headers, sans-serif; font-size: 12.5px; letter-spacing: .5px; color: #FFC46B;
}
.tl_meer.is-minder { color: #ffffff8a; }
.tl_lade__voet { flex: none; padding: 16px 14px 22px; display: flex; flex-direction: column; gap: 10px; }
.tl_lade__voet .cl-btn-frame { display: block; }
.tl_lade__voet .cl-btn { width: 100%; font-family: headers, sans-serif; font-size: 17px; letter-spacing: 1.5px; text-transform: none; }
.tl_lade .tl_lade__stap, .tl_lade .tl_lade__titel, .tl_lade .tl_held__naam, .tl_lade .tl_tegel b, .tl_lade .tl_meer, .tl_lade .tl_of span, .tl_lade .tl_chip, .tl_lade .tl_held__proef span:first-child { text-transform: none; }
.tl_lade__noot { text-transform: none; }
.tl_lade__noot { text-align: center; font-size: 9.5px; color: #ffffff70; }

/* Schriften die de koppenletter van de game niet draagt (Cyrillisch, Grieks, Devanagari, Hangul, Chinees):
   de systeemletter neemt het over; iets ruimer gezet omdat die smaller valt dan Super Sedan. */
html[lang="hi"] *, html[lang="ko"] *, html[lang="zh"] * { letter-spacing: 0 !important; }

/* ── Cyrillisch en Grieks: een schreefloze terugval per letterfamilie ────────────────
   De letters van de game (SSD, Acme, Rheiborn …) dragen geen Cyrillisch of Grieks. Zonder
   terugval tekent de browser die tekens in zijn standaard-schreefletter (Times, Noto Serif):
   Russisch, Oekraïens, Bulgaars en Grieks stonden daardoor in een krantenletter tussen de
   koppen van de game. Hier krijgt elke familie voor alléén die tekens (unicode-range) een
   schreefloze systeemletter — vet voor de koppen, gewoon voor de leestekst. Latijn, cijfers
   en leestekens blijven in de eigen letter. Dit bestand laadt ná CubeRunnerz.css: binnen een
   familie wint de laatst gedeclareerde face voor de tekens in haar bereik. Kent het toestel
   geen van de local()-letters, dan verandert er niets. Devanagari, Hangul en Chinees hebben
   dit niet nodig: daar kiest het toestel zelf al een schreefloze letter voor het schrift. */
@font-face
{
	font-family: headers;
	src: local('Roboto Black'), local('Roboto-Black'), local('HelveticaNeue-CondensedBlack'), local('Arial Black'), local('Arial-Black'),
	     local('Roboto Bold'), local('Roboto-Bold'), local('HelveticaNeue-Bold'), local('Helvetica Neue Bold'), local('Arial Bold'), local('Arial-BoldMT'),
	     local('Noto Sans Bold'), local('NotoSans-Bold'), local('DejaVu Sans Bold'), local('DejaVuSans-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
	unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F;
}
@font-face
{
	font-family: headers2;
	src: local('Roboto Black'), local('Roboto-Black'), local('Arial Black'), local('Arial-Black'), local('Roboto Bold'), local('Roboto-Bold'), local('HelveticaNeue-Bold'),
	     local('Helvetica Neue Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('Noto Sans Bold'), local('NotoSans-Bold'), local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
	unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F;
}
@font-face
{
	font-family: font3;
	src: local('Roboto Bold'), local('Roboto-Bold'), local('HelveticaNeue-Bold'), local('Helvetica Neue Bold'), local('Arial Bold'), local('Arial-BoldMT'),
	     local('Noto Sans Bold'), local('NotoSans-Bold'), local('DejaVu Sans Bold'), local('DejaVuSans-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
	unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F;
}
@font-face
{
	font-family: p;
	src: local('Roboto Medium'), local('Roboto-Medium'), local('HelveticaNeue-Medium'), local('Helvetica Neue Medium'), local('Roboto'), local('Roboto-Regular'),
	     local('HelveticaNeue'), local('Helvetica Neue'), local('Arial'), local('ArialMT'), local('Noto Sans'), local('NotoSans-Regular'), local('DejaVu Sans'), local('DejaVuSans'),
	     local('Liberation Sans'), local('LiberationSans');
	unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F;
}
@font-face
{
	font-family: font2;
	src: local('Roboto Medium'), local('Roboto-Medium'), local('HelveticaNeue-Medium'), local('Roboto'), local('Roboto-Regular'), local('HelveticaNeue'), local('Helvetica Neue'),
	     local('Arial'), local('ArialMT'), local('Noto Sans'), local('NotoSans-Regular'), local('DejaVu Sans'), local('DejaVuSans');
	unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F;
}