/* cubelegend-animals.css — dierenbadges, campaign-kaart v2 en de missieschermen
   (design/design_handoff_animals_loadingscreens, schermen 07/11/13/16/17).
   Laadt NA CubeRunnerz.css. Eigen root-klassen (geen .newHighscore: die zet
   span/img-regels met 0,2,x specificiteit, zie de rollover-valkuil), 'headers'
   voor koppen/cijfers/knoppen, p voor lopende tekst.

   Disciplinekleuren = de tokens hieronder, nergens anders voor gebruikt
   (Disciplines - harde regels §2); goud #FFC107 = beloning/CTA/record. */

:root {
	--focus: #f5c542;     --focus-dark: #a35f00;     --focus-light: #ffe694;     --focus-tint: #3a2400;
	--speed: #4bb4ff;     --speed-dark: #0b3f80;     --speed-light: #b9e4ff;     --speed-tint: #0d2a50;
	--awareness: #c56cff; --awareness-dark: #4a0f8f; --awareness-light: #e7c4ff; --awareness-tint: #2a0a4e;
	--an-gold: #FFC107; --an-gold-ink: #3a1c00; --an-link: #FFC46B; --an-night: #0b0318; --an-night2: #14062a;
}
.is-focus     { --dk: var(--focus);     --dk-dark: var(--focus-dark);     --dk-tint: var(--focus-tint);     --dk-light: var(--focus-light); }
.is-speed     { --dk: var(--speed);     --dk-dark: var(--speed-dark);     --dk-tint: var(--speed-tint);     --dk-light: var(--speed-light); }
.is-awareness { --dk: var(--awareness); --dk-dark: var(--awareness-dark); --dk-tint: var(--awareness-tint); --dk-light: var(--awareness-light); }

@keyframes an_bob     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes an_glow    { 0%,100% { opacity:.55; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
@keyframes an_twinkle { 0%,100% { opacity:.35; transform:scale(.7) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(20deg); } }
@keyframes an_spin    { to { transform:rotate(360deg); } }
@keyframes an_pulse   { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.08); opacity:.7; } }
@keyframes an_fade    { from { opacity:0; } to { opacity:1; } }
@keyframes an_sheet   { from { transform:translateY(40px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes an_fall    { 0% { transform:translateY(0) rotate(0); opacity:1; } 100% { transform:translateY(110vh) rotate(540deg); opacity:.6; } }
@keyframes an_pop     { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); } }
@keyframes an_slide_in  { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes an_slide_out { from { transform:translateX(0); } to { transform:translateX(100%); } }

/* ---- gedeelde bouwstenen ---------------------------------------------- */
.an_scherm
{
	position:fixed; inset:0; z-index:3; color:#fff; overflow:hidden; text-align:left;
	font-family:p, sans-serif; background:var(--an-night);
	-webkit-user-select:none; user-select:none;
}
.an_scherm.an-in { animation:an_fade .3s ease both; }
/* de collectie is het ZIJPANEEL van de app (top_overlayed + addSwipeClose,
   direction x): schuift van rechts in, naar rechts slepen sluit. De wrapper
   ligt vóór een open lade (missie-drawer, z-index 4) — die mag blijven staan. */
.an_paneel { position:fixed; inset:0; z-index:5; pointer-events:none; }
.an_paneel > * { pointer-events:auto; }
.an_paneel .top_overlayed.an_collectie_vel { background:var(--an-night); color:#fff; text-align:left; font-family:p, sans-serif; display:block; padding-bottom:0; }
.an_paneel .top_overlayed.an_collectie_vel::before, .an_paneel .top_overlayed.an_collectie_vel::after { display:none; }
.an_paneel .top_overlayed_underlay { background:#0b0318b8; }
.an_paneel.active .top_overlayed_underlay { opacity:1; }
.an_paneel .an_kolom { height:100%; }
.an_bg
{
	position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse at 50% 26%, var(--an-halo, #9a00ff70), transparent 55%),
		linear-gradient(#0b0318aa, #0b0318f7 62%), url(/public/img/cbg0.jpeg) center/cover, var(--an-night);
}
.an_kolom
{
	position:relative; height:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:12px;
	padding:calc(env(safe-area-inset-top) + 48px) 20px calc(env(safe-area-inset-bottom) + 22px);
}
/* overflow-y:auto maakt overflow-x óók scrollbaar: de 640px-stralen en de
   boog staken dan rechts uit en het hele scherm kon opzij geveegd worden */
.an_kolom.an_scroll { overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.an_kolom.an_scroll::-webkit-scrollbar { display:none; }
.an_top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; }
.an_chip
{
	height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border-radius:16px;
	background:#00000080; border:1px solid #ffffff26; font-size:13px; letter-spacing:1.5px; color:#ffffffcc; white-space:nowrap;
}
.an_chip img { width:26px; height:26px; margin-left:-6px; }
.an_sluit, .an_terug
{
	width:40px; height:40px; flex:none; border-radius:12px; background:#00000080; border:1.5px solid #ffffff30;
	display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.an_terug { width:44px; height:44px; border-radius:13px; }
.an_sluit svg, .an_terug svg { width:16px; height:16px; }
.an_pil
{
	height:24px; display:inline-flex; align-items:center; padding:0 10px; border:2px solid #000; border-radius:12px;
	font-family:headers; font-size:12px; letter-spacing:1.5px; white-space:nowrap; color:#fff; text-shadow:0 1px #000;
	background:var(--dk, var(--an-gold));
}
.an_pil.an_pil_goud { background:var(--an-gold); color:var(--an-gold-ink); text-shadow:none; }
.an_stralen
{
	position:absolute; left:50%; border-radius:50%; pointer-events:none;
	background:repeating-conic-gradient(var(--an-straal, #ffc1071f) 0 9deg, transparent 9deg 18deg);
	animation:an_spin 50s linear infinite;
	-webkit-mask:radial-gradient(circle, #000 14%, transparent 64%); mask:radial-gradient(circle, #000 14%, transparent 64%);
}
.an_ster
{
	position:absolute; pointer-events:none; z-index:4;
	filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #FFC107);
	animation:an_twinkle 2.6s ease-in-out infinite;
}
.an_ster path { fill:#fff; }
.an_scheiding { display:flex; align-items:center; gap:12px; flex:none; }
.an_scheiding i { flex:1; height:1px; background:#ffffff26; }
.an_scheiding span { font-family:headers; font-size:13px; letter-spacing:2px; color:#ffffffb3; white-space:nowrap; }
/* CTA uit het ontwerp: goudgradient, 3px #ffe07a in 4px #000, glansstrook */
.an_cta_rand { border:4px solid #000; border-radius:17px; box-shadow:0 0 30px #ffc10755; flex:none; }
.an_cta
{
	position:relative; width:100%; height:54px; border:3px solid #ffe07a; border-radius:13px; box-sizing:border-box;
	background:linear-gradient(0deg, #e09b00, #FFC107); cursor:pointer; overflow:hidden;
	font-family:headers; font-size:20px; letter-spacing:2px; color:var(--an-gold-ink); display:flex; align-items:center; justify-content:center;
}
.an_cta::before { content:''; position:absolute; top:3px; left:3px; right:3px; height:44%; background:#fff; opacity:.32; border-radius:8px; }
.an_cta span { position:relative; }
/* een CTA die een paneel sluit draagt [swipe-close]; de app-brede [swipe-close]-
   regel (CubeRunnerz.css) hangt daar een zwarte tekstomlijning + drop-shadow aan
   — bedoeld voor de oude kruisjes, niet voor deze knop (eigenaar, 3 nov 2026) */
.an_cta[swipe-close], .an_cta[swipe-close] span { text-shadow:none; filter:none; }
.an_cta.an_cta_hoog { height:58px; font-size:21px; }
.an_knop_rand { border:4px solid #000; border-radius:16px; flex:none; }
.an_knop
{
	width:100%; height:50px; border:2px solid #ffffff2b; border-radius:12px; background:var(--an-night); cursor:pointer; box-sizing:border-box;
	display:flex; align-items:center; justify-content:center; gap:8px; font-family:headers; font-size:15px; letter-spacing:1px; color:#ffffffd0;
}
.an_knop svg { width:16px; height:16px; }
.an_knop.an_schild { width:58px; height:54px; }
.an_knop.an_schild svg { width:22px; height:22px; }
.an_link
{
	align-self:center; height:44px; display:inline-flex; align-items:center; gap:6px; padding:0 6px; cursor:pointer;
	font-family:headers; font-size:14px; letter-spacing:1px; color:var(--an-link); white-space:nowrap;
}
.an_link.an_link_p { font-family:p; font-size:15px; color:#ffffffb3; letter-spacing:0; }
.an_link.an_link_p b { color:var(--an-link); font-weight:normal; }
.an_balk { height:8px; border-radius:4px; background:#ffffff1a; overflow:hidden; }
.an_balk i { display:block; height:100%; border-radius:4px; background:var(--dk, var(--an-gold)); transition:width .6s cubic-bezier(.2,.9,.3,1); }
.an_kaart { flex:none; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:14px; border-radius:16px; background:#00000066; border:1px solid #ffffff1f; text-align:left; }
.an_kaart h4 { margin:0; font-family:headers; font-size:13px; letter-spacing:1.5px; color:var(--an-link); font-weight:normal; }
.an_kaart p { margin:0; font-size:16px; line-height:22px; color:#fff; text-wrap:pretty; }
.an_kaart small { font-size:13px; line-height:18px; color:#ffffff99; text-wrap:pretty; }
.an_confetti { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.an_confetti i { position:absolute; top:-24px; border-radius:2px; border:1.5px solid #000; animation:an_fall 1.8s cubic-bezier(.3,.6,.6,1) both; }

/* elke knop in Super Sedan ('headers'): de globale *:not(input){font-family:font3}
   raakt de tekst-span in de knop rechtstreeks, vandaar expliciet */
.an_cta, .an_cta span, .an_knop, .an_knop span, .an_ms_slot, .an_link, .an_pil, .an_rij_tag, .an_munt_speel, .an_poort_kaart .an_cta span { font-family:headers; }

/* ---- 11 · classic resultaat ------------------------------------------- */
.an_held { position:relative; height:262px; flex:none; display:flex; flex-direction:column; align-items:center; }
.an_held .an_stralen { top:96px; width:460px; height:460px; margin-left:-230px; margin-top:-230px; }
.an_held_badge { position:relative; width:150px; height:200px; margin-top:6px; }
.an_held_badge > img { width:150px; height:200px; object-fit:contain; filter:drop-shadow(0 10px 20px #000000aa) drop-shadow(0 0 22px #ffc10766); animation:an_bob 2.4s ease-in-out infinite; }
.an_held_naam { position:relative; display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.an_held_naam b { font-family:headers; font-size:26px; letter-spacing:1px; text-shadow:0 3px #000; font-weight:normal; white-space:nowrap; }
.an_held_naam span { font-size:15px; color:var(--an-link); }
.an_waaier { position:relative; width:340px; max-width:100%; height:190px; margin-top:8px; }
.an_waaier > div { position:absolute; top:22px; width:112px; display:flex; justify-content:center; }
.an_waaier > div img { width:112px; height:150px; object-fit:contain; filter:drop-shadow(0 8px 16px #000000aa); }
.an_waaier > div.an_links { left:14px; transform:rotate(-9deg); }
.an_waaier > div.an_rechts { left:214px; transform:rotate(9deg); }
.an_waaier > div.an_midden { left:104px; top:0; width:132px; z-index:2; }
.an_waaier > div.an_midden img { width:132px; height:176px; filter:drop-shadow(0 10px 20px #000000aa) drop-shadow(0 0 22px #ffc10766); animation:an_bob 2.4s ease-in-out infinite; }
.an_waaier_namen { position:relative; font-family:headers; font-size:20px; letter-spacing:1px; text-shadow:0 3px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.an_geen { justify-content:center; gap:6px; text-align:center; }
.an_geen img { width:150px; height:140px; object-fit:contain; filter:drop-shadow(0 10px 20px #000000aa); }
.an_geen b { font-family:headers; font-size:26px; letter-spacing:1px; text-shadow:0 3px #000; font-weight:normal; }
.an_geen p { margin:0; font-size:15px; line-height:21px; color:#ffffffcc; max-width:300px; text-wrap:pretty; }
.an_geen p span { color:var(--an-link); }
.an_rijen { display:flex; flex-direction:column; gap:10px; flex:none; }
.an_rij
{
	position:relative; display:flex; align-items:center; gap:12px; padding:6px 12px 6px 6px; border-radius:16px; background:#00000080;
	border:2px solid #ffffff1f; color:#fff; cursor:pointer;
}
.an_rij.an_nieuw { border-color:var(--an-gold); box-shadow:0 0 24px #ffc10755; }
.an_rij > img { flex:none; width:70px; height:95px; object-fit:contain; margin:-8px 0 -6px; }
.an_rij > img.an_grijs { filter:grayscale(1) brightness(.45); }
.an_rij_mid { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:5px; text-align:left; }
.an_rij_kop { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an_rij_label { display:flex; align-items:center; gap:6px; font-family:headers; font-size:12px; letter-spacing:1.5px; color:var(--dk); }
.an_rij_label img { flex:none; width:22px; height:22px; }
.an_rij_label svg { flex:none; opacity:.7; width:10px; height:10px; }
.an_rij_waarde { font-family:headers; font-size:16px; color:#fff; white-space:nowrap; }
.an_rij_naam { display:flex; align-items:baseline; gap:6px; min-width:0; }
.an_rij_naam b { font-family:headers; font-size:17px; letter-spacing:.5px; white-space:nowrap; font-weight:normal; }
.an_rij_naam span { font-size:13px; color:#ffffffb3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_rij_voortgang { display:flex; align-items:center; gap:8px; }
.an_rij_voortgang .an_balk { flex:1; }
.an_rij_voortgang small { font-size:12px; color:#ffffff99; white-space:nowrap; }
.an_rij_tag
{
	position:absolute; top:-9px; right:10px; height:20px; display:flex; align-items:center; padding:0 8px; border:2px solid #000; border-radius:10px;
	background:var(--an-gold); font-family:headers; font-size:11px; letter-spacing:1px; color:var(--an-gold-ink);
}
.an_voet { display:flex; gap:9px; flex:none; margin-top:auto; }
.an_voet .an_cta_rand { flex:1; }
/* intrede (4 nov 2026): de held plopt, de rijen schuiven gestaggerd in, elk
   dier plopt ná zijn rij en de XP-pil erachteraan; de balken lopen van 0 naar
   hun stand (animals-screens balkenVullen zet de breedte na de pop-in) */
@keyframes an_rij_in { from { transform:translateY(22px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.an_classic .an_held_badge > img, .an_classic .an_waaier > div.an_midden img { animation:an_pop .6s cubic-bezier(.2,1.4,.4,1) .05s both, an_bob 2.4s ease-in-out .65s infinite; }
.an_classic .an_waaier > div.an_links img, .an_classic .an_waaier > div.an_rechts img { animation:an_pop .55s cubic-bezier(.2,1.4,.4,1) .2s both; }
.an_classic .an_geen img { animation:an_pop .6s cubic-bezier(.2,1.4,.4,1) .05s both; }
.an_classic .an_geen b, .an_classic .an_geen p, .an_classic .an_held_naam, .an_classic .an_waaier_namen, .an_classic .an_held .an_pil { animation:an_rij_in .45s cubic-bezier(.2,.9,.3,1) .3s both; }
.an_classic .an_rij { animation:an_rij_in .5s cubic-bezier(.2,.9,.3,1) both; }
.an_classic .an_rij:nth-child(1) { animation-delay:.25s; }
.an_classic .an_rij:nth-child(2) { animation-delay:.4s; }
.an_classic .an_rij:nth-child(3) { animation-delay:.55s; }
.an_classic .an_rij > img { animation:an_pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.an_classic .an_rij:nth-child(1) > img { animation-delay:.4s; }
.an_classic .an_rij:nth-child(2) > img { animation-delay:.55s; }
.an_classic .an_rij:nth-child(3) > img { animation-delay:.7s; }
.an_classic .an_rij_xp { animation:an_pop .4s cubic-bezier(.2,1.4,.4,1) both; }
.an_classic .an_rij:nth-child(1) .an_rij_xp { animation-delay:.6s; }
.an_classic .an_rij:nth-child(2) .an_rij_xp { animation-delay:.75s; }
.an_classic .an_rij:nth-child(3) .an_rij_xp { animation-delay:.9s; }
.an_classic .an_rij .an_balk i { transition:width 1s cubic-bezier(.2,.9,.3,1); }

/* ---- 13 · dierencollectie --------------------------------------------- */
.an_col_bg { background:radial-gradient(ellipse at 50% 0%, #9a00ff60, transparent 50%), linear-gradient(#0b0318cc, #0b0318f5 40%), url(/public/img/cbg0.jpeg) center/cover; }
.an_col_kop { flex:none; display:flex; align-items:center; gap:12px; padding:0 6px 12px; }
.an_col_kop > div { flex:1; display:flex; flex-direction:column; align-items:flex-start; min-width:0; text-align:left; }
.an_col_kop b { font-family:headers; font-size:24px; letter-spacing:1px; text-shadow:0 3px #000; white-space:nowrap; font-weight:normal; color:var(--dk, #fff); }
.an_col_kop small { font-size:14px; color:#ffffffb3; white-space:nowrap; }
.an_col_lijst { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:12px; padding:0 0 24px; }
.an_col_lijst::-webkit-scrollbar { display:none; }
.an_col_kaart
{
	flex:none; border-radius:20px; padding:12px 10px 8px; display:flex; flex-direction:column; gap:6px;
	background:linear-gradient(180deg, var(--dk-tint), #0b0318cc); border:1px solid color-mix(in srgb, var(--dk) 34%, transparent);
}
.an_col_kaart_kop { display:flex; align-items:center; gap:10px; padding:0 4px; }
.an_col_kaart_kop > img { flex:none; width:44px; height:44px; filter:drop-shadow(0 3px 0 #000); }
.an_col_kaart_kop > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.an_col_kaart_kop b { font-family:headers; font-size:18px; letter-spacing:1px; color:var(--dk); text-shadow:0 2px #000; font-weight:normal; }
.an_col_kaart_kop small { font-size:13px; color:#ffffffa6; }
.an_col_kaart_kop > span { font-family:headers; font-size:16px; color:#fff; }
.an_col_kaart_kop > span i { font-style:normal; color:#ffffff73; }
.an_col_grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
.an_col_dier { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; border-radius:14px; border:2px solid transparent; cursor:pointer; }
.an_col_dier img { width:74px; height:100px; object-fit:contain; filter:drop-shadow(0 6px 10px #000000aa); }
.an_col_dier.an_locked img { filter:grayscale(1) brightness(.5) drop-shadow(0 6px 10px #000000aa); opacity:.6; }
.an_col_dier span { font-size:13px; color:#fff; white-space:nowrap; }
.an_col_dier.an_locked span { color:#ffffff8a; }
.an_col_dier.an_nieuw::after
{
	content:'NEW'; position:absolute; top:2px; right:4px; height:18px; display:flex; align-items:center; padding:0 6px; border:2px solid #000; border-radius:9px;
	background:var(--an-gold); font-family:headers; font-size:10px; letter-spacing:1px; color:var(--an-gold-ink);
}
.an_col_tiers { flex:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; padding:10px; border-radius:16px; background:#00000080; border:1px solid #ffffff1f; text-align:center; }
.an_col_tiers > div { display:flex; flex-direction:column; gap:2px; }
.an_col_tiers b { font-family:headers; font-size:14px; font-weight:normal; }
.an_col_tiers small { font-size:13px; color:#ffffffa6; }

/* de lades (dier, missie) = het bottom_drawer-skelet van de gamemode-kiezer
   (CubeRunnerz.css .bottom_drawer/.bottom_drawer__content, beweging en
   sleepgebaar van addSwipeClose) met het vel uit het ontwerp erop */
.bottom_drawer.an_lade { z-index:4; }
/* De dier-lade hangt ín het collectiepaneel (#animalsCollection.an_paneel.active):
   de generieke regel `.active .bottom_drawer__content { transform:0 }` matcht dan
   via die VOORouder, waardoor het vel bij het sluiten terugsprong naar open en
   300 ms later verdween, en bij het openen niet inschoof (3 nov 2026). Eigen
   gesloten stand, onafhankelijk van voorouders. */
.bottom_drawer.an_lade:not(.active) .bottom_drawer__content { transform:translate3d(0, 150%, 0); }
.bottom_drawer.an_lade .bottom_drawer__underlay { background:#0b0318b8; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.bottom_drawer.an_lade.active .bottom_drawer__underlay { opacity:1; }
.bottom_drawer__content.an_lade_vel
{
	align-items:stretch; max-height:88vh; color:#fff; text-align:left; box-sizing:border-box; padding:0; overflow:hidden;
	border-top:4px solid #000; border-radius:28px 28px 0 0; background:linear-gradient(180deg, var(--dk-tint, #2a0650), var(--an-night2) 48%);
	box-shadow:0 -20px 50px #000000aa, inset 0 3px 0 color-mix(in srgb, var(--dk, #fff) 33%, transparent);
}
.bottom_drawer__content.an_lade_vel::before, .bottom_drawer__content.an_lade_vel::after { display:none; }
.an_lade_vel .pm_greep { flex:none; padding:10px 0 0; text-align:center; }
.an_lade_vel .pm_greep i { display:inline-block; width:44px; height:5px; border-radius:3px; background:#ffffff40; }
.an_lade_kop .an_sluit { align-self:flex-start; }
.an_lade_body { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:12px; padding:0 16px calc(22px + env(safe-area-inset-bottom)); }
.an_lade_body::-webkit-scrollbar { display:none; }
.an_lade_kop { flex:none; display:flex; align-items:center; gap:12px; padding-top:4px; }
.an_lade_kop > img { flex:none; width:104px; height:140px; object-fit:contain; filter:drop-shadow(0 8px 14px #000000aa) drop-shadow(0 0 16px color-mix(in srgb, var(--dk) 53%, transparent)); }
.an_lade_kop > img.an_grijs { filter:grayscale(1) brightness(.45) drop-shadow(0 8px 14px #000000aa); }
.an_lade_kop > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.an_lade_kop .an_pil { color:#000; text-shadow:none; }
/* lange namen (PEREGRINE FALCON) mogen afbreken i.p.v. de lade te verbreden */
.an_lade_naam { font-family:headers; font-size:28px; letter-spacing:1px; line-height:1.02; text-shadow:0 3px #000; white-space:normal; overflow-wrap:anywhere; font-weight:normal; max-width:100%; }
.an_lade_body { overflow-x:hidden; }
.an_lade_titel { font-size:15px; color:#ffffffc0; white-space:nowrap; }
.an_status
{
	height:26px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border-radius:13px; font-family:headers; font-size:12px; letter-spacing:1px; white-space:nowrap;
	background:#ffffff10; border:1px solid #ffffffb3; color:#ffffffb3;
}
.an_status.an_behaald { background:#ffc1071f; border-color:var(--an-gold); color:var(--an-gold); }
.an_lade_hoe { display:flex; flex-direction:column; gap:1px; font-size:13px; }
.an_lade_hoe span:first-child { color:#ffffffd9; }
.an_lade_hoe span:last-child { color:#ffffff99; }
.an_lade_jij { display:flex; align-items:center; gap:10px; margin-top:2px; }
/* de eigen avatar (feedback 2 nov: geen ster) */
.an_lade_jij > img
{
	flex:none; width:40px; height:40px; box-sizing:border-box; border-radius:20px; border:2.5px solid #000; background:#fff; object-fit:cover; box-shadow:0 2px 0 #000;
}
.an_lade_jij > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.an_lade_jij > div > div { display:flex; justify-content:space-between; gap:8px; }
.an_lade_jij b { font-family:headers; font-size:14px; font-weight:normal; }
.an_lade_jij small { font-size:13px; color:#ffffffc0; white-space:nowrap; }
.an_lade_camp_kop { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.an_lade_camp_kop small { font-size:13px; color:#ffffff99; white-space:nowrap; }
.an_lade_camp_rij { display:flex; align-items:center; gap:10px; }
.an_lade_camp_rij > img { flex:none; width:40px; height:40px; filter:drop-shadow(0 2px 0 #000); }
.an_lade_camp_rij .an_balk { flex:1; }
.an_lade_camp_rij small { font-size:13px; color:#ffffffc0; white-space:nowrap; }
.an_lade_waarom h4 { color:var(--dk); }
.an_lade_waarom p { line-height:23px; }
.an_lade_waarom small { font-size:14px; line-height:20px; color:#ffffffb3; }
.an_vrienden_kop { flex:none; display:flex; align-items:center; justify-content:space-between; padding:2px 2px 0; }
.an_vrienden_kop span:first-child { font-family:headers; font-size:13px; letter-spacing:1.5px; color:#ffffffc0; }
.an_vrienden_kop span:last-child { font-size:13px; color:#ffffffa6; }
.an_vriend { display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:14px; background:#00000066; border:1px solid #ffffff1a; }
.an_vriend.an_ok { border-color:color-mix(in srgb, var(--dk) 40%, transparent); }
.an_vriend > img { flex:none; width:36px; height:36px; border-radius:18px; border:2px solid #000; object-fit:cover; background:#fff; }
.an_vriend > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.an_vriend > div > div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.an_vriend > div > div > div { display:flex; align-items:center; gap:6px; min-width:0; }
.an_vriend b { font-family:headers; font-size:15px; white-space:nowrap; font-weight:normal; overflow:hidden; text-overflow:ellipsis; }
.an_vriend .an_via
{
	height:20px; display:inline-flex; align-items:center; padding:0 7px; border-radius:10px; font-family:headers; font-size:11px; letter-spacing:.8px; white-space:nowrap;
	background:#ffffff14; border:1px solid #ffffff33; color:#ffffffd9;
}
.an_vriend .an_via.an_via_camp { background:#ffc1071f; border-color:#FFC10766; color:var(--an-link); }
.an_vriend small { font-size:13px; color:#ffffffc0; white-space:nowrap; }
.an_vriend .an_balk { height:7px; }
.an_vriend .an_balk i { background:#ffffff66; }
.an_vriend.an_ok .an_balk i { background:var(--dk); }
.an_vriend > span { flex:none; width:26px; height:26px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:#ffffff14; font-size:14px; color:var(--an-night); }
.an_vriend.an_ok > span { background:var(--dk); }
.an_leeg_vrienden { font-size:13px; color:#ffffff8a; text-align:center; padding:6px 0; }

/* ---- 16 · campaign-kaart: munten, boog, wolkenpoort ------------------- */
.biome__mission.an_munt
{
	width:60px; height:60px; box-sizing:border-box; border:3px solid #000; border-radius:50%;
	background:var(--dk, #8f8a99); color:#fff; text-shadow:0 2px 0 #000; font-size:22px;
	box-shadow:0 4px 0 #000, inset 0 -6px 0 var(--dk-dark, #5e5869), inset 0 4px 0 #ffffff55;
}
.biome__mission.an_munt.mission_locked { --dk:#8f8a99; --dk-dark:#5e5869; color:#e4e1e8; text-shadow:none; }
.an_munt_ring
{
	position:absolute; inset:-8px; border-radius:50%; border:4px solid var(--an-gold); box-shadow:0 0 18px #ffc107aa;
	animation:an_pulse 1.4s ease-in-out infinite; pointer-events:none; z-index:1;
}
/* iets te claimen op deze missie (3 nov 2026): gouden CLAIM-label onder de munt
   + gloed, zoals PLAY op de huidige. Beide labels zijn tikbaar (remote-fetch
   Campaign/mission/n) — geen pointer-events:none meer */
.an_munt_claim
{
	position:absolute; left:50%; bottom:-36px; translate:-50% 0; z-index:3; height:26px; display:flex; align-items:center; gap:5px; padding:0 10px;
	border:3px solid #000; border-radius:13px; background:var(--an-gold); font-family:headers; font-size:12px; letter-spacing:1px; color:var(--an-gold-ink);
	white-space:nowrap; box-shadow:0 0 14px #ffc107aa; cursor:pointer;
}
/* dezelfde glans als de CTA's (.an_cta::before): witte band over de bovenste helft;
   z-index −1 legt hem onder de tekst maar boven de eigen achtergrond */
.an_munt_claim::before, .an_munt_speel::before { content:''; position:absolute; top:2px; left:3px; right:3px; height:44%; background:#fff; opacity:.32; border-radius:8px; pointer-events:none; z-index:-1; }
.an_munt_houder:has(.an_munt_claim) .an_munt { box-shadow:0 0 0 3px #000, 0 0 18px 4px #ffc107aa; }
/* met een commandant-pil (avatar onder de munt, ±48px lager) zakt het label tot onder die pil */
.mission_holder:has(.mission_commander) .an_munt_claim { bottom:-82px; }
.an_munt_speel
{
	/* centreren met `translate`, niet met transform: de an_bob-animatie
	   overschrijft `transform` en liet het label een halve breedte naar rechts
	   hangen (3 nov 2026) */
	position:absolute; left:50%; bottom:-36px; translate:-50% 0; z-index:3; height:26px; display:flex; align-items:center; padding:0 11px;
	border:3px solid #000; border-radius:13px; background:var(--an-gold); font-family:headers; font-size:13px; letter-spacing:1px; color:var(--an-gold-ink);
	white-space:nowrap; animation:an_bob 1.6s ease-in-out infinite; cursor:pointer;
}
/* de drie objectives als bollen in een boog boven de munt (middelste hoger):
   in de kleur van de munt wanneer behaald, zwart zolang niet (eigenaarsfeedback
   2 nov — de badge-plaatjes vielen weg tegen het kaartwerk) */
.mission_holder .an_boog { position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; pointer-events:none; z-index:2; }
.an_boog i
{
	position:absolute; width:16px; height:16px; box-sizing:border-box; border-radius:50%; border:2px solid #000; background:#000;
	box-shadow:0 2px 0 #000, inset 0 2px 0 #ffffff33;
}
.an_boog i:nth-child(1) { left:-6px; top:-16px; }
.an_boog i:nth-child(2) { left:22px; top:-24px; }
.an_boog i:nth-child(3) { right:-6px; top:-16px; }
.an_boog i.an_aan { background:var(--dk); box-shadow:0 2px 0 #000, inset 0 2px 0 #ffffff66, 0 0 8px color-mix(in srgb, var(--dk) 60%, transparent); }
.mission_holder .an_boog_houder { position:absolute; width:60px; height:60px; }

/* ---- kaart-reis (eigenaar, 9 nov 2026): terug op de kaart na een missie ----
   het gestippelde pad (kaartPadSvg) ligt onder de munten; de nieuwe stipjes
   ploppen in zodra de scroller .an_reis krijgt, het nieuwe stuk pad tekent
   zichzelf en de ontgrendelde munt springt open bij .an_reis_klaar ---------- */
.campaignmap .mission_holder { z-index:2; }
.campaignmap .an_pad { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
/* witte stippels op een donkere stippelrand: dezelfde dasharray en hetzelfde pad, dus
   de rand valt precies om elk streepje (ronde uiteinden steken een halve breedte uit:
   streep 2,4 + rand 2,3 = 4,7 van de 6,0 → 1,3 lucht tussen de randen; met 2,1/2,6
   raakten ze elkaar en werd het "één lange worst", eigenaar 9 nov 2026) */
.an_pad_rand { fill:none; stroke:#1d1206; stroke-opacity:.55; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2.4 3.6; }
.an_pad_seg { fill:none; stroke:#fff; stroke-opacity:.96; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2.4 3.6; }
/* het masker is de weg zonder gaten (kaartPadSvg): de pen loopt in één tempo door, ook
   achter een boom, en het stuk erachter tekent pas als hij daar aankomt (eigenaar 10 nov
   2026). Over een sectiegrens zet kaartPadSvg --pad-duur/--pad-start/--pad-ease: staart
   en kop na elkaar, lineair, samen 1,5 s — de munt (1,3 s) blijft daarop afgestemd. */
.an_pad_masker { fill:none; stroke:#fff; stroke-width:5; stroke-dasharray:100; stroke-dashoffset:100; }
.an_reis_klaar .an_pad_masker { animation:an_pad_teken var(--pad-duur, 1.5s) var(--pad-ease, cubic-bezier(.45,0,.25,1)) var(--pad-start, 0s) forwards; }
@keyframes an_pad_teken { to { stroke-dashoffset:0; } }
/* nieuwe stipjes: onzichtbaar tot de reis start, dan ploppen ze één voor één in */
.campaignmap_scroller .an_boog i.an_nieuw { opacity:0; transform:scale(.2); }
.campaignmap_scroller.an_reis .an_boog i.an_nieuw { animation:an_stip_pop .5s cubic-bezier(.2,1.7,.4,1) both; }
.campaignmap_scroller.an_reis .an_boog i.an_nieuw:nth-child(2) { animation-delay:.14s; }
.campaignmap_scroller.an_reis .an_boog i.an_nieuw:nth-child(3) { animation-delay:.28s; }
@keyframes an_stip_pop { 0% { opacity:0; transform:scale(.2); } 60% { opacity:1; transform:scale(1.35); } 100% { opacity:1; transform:scale(1); } }
/* de ontgrendelde munt: grijs en zonder ring/PLAY tot de kaart er is, dan springt hij open */
.campaignmap_scroller:not(.an_reis_klaar) .an_munt_ontgrendel .an_munt { filter:grayscale(1) brightness(.8); }
.campaignmap_scroller:not(.an_reis_klaar) .an_munt_ontgrendel .an_munt_ring,
.campaignmap_scroller:not(.an_reis_klaar) .an_munt_ontgrendel .an_munt_speel { opacity:0; }
/* de munt springt pas open als het pad (1,5 s) bij hem aankomt; fill-mode both houdt hem tot dan grijs */
.an_reis_klaar .an_munt_ontgrendel .an_munt { animation:an_munt_open .75s cubic-bezier(.2,1.6,.4,1) 1.3s both; }
.an_reis_klaar .an_munt_ontgrendel .an_munt_ring { animation:an_ring_open .8s ease-out 1.3s both, an_pulse 1.4s ease-in-out 2.1s infinite; }
.an_reis_klaar .an_munt_ontgrendel .an_munt_speel { animation:an_speel_in .45s cubic-bezier(.2,1.6,.4,1) 1.6s both, an_bob 1.6s ease-in-out 2.05s infinite; }
@keyframes an_munt_open { 0% { transform:scale(.9); filter:grayscale(1) brightness(.8); } 45% { transform:scale(1.22); filter:grayscale(0) brightness(1.6); } 100% { transform:scale(1); filter:none; } }
@keyframes an_ring_open { 0% { opacity:0; transform:scale(.4); } 40% { opacity:1; transform:scale(1.35); } 100% { opacity:1; transform:scale(1); } }
@keyframes an_speel_in { 0% { opacity:0; transform:translateY(10px) scale(.6); } 100% { opacity:1; transform:translateY(0) scale(1); } }

/* ---- CLAIM <dier>: de badge vliegt de collectie in (eigenaar, 9 nov 2026) ----
   een vaste kopie van de badge (an_vlucht, boven het paneel) glijdt naar het
   midden, dan naar zijn tegel; die blijft grijs (an_wacht) tot de landing en
   licht dan op (an_land), het NEW-lintje popt erbij ------------------------ */
.an_vlucht
{
	position:fixed; z-index:7; object-fit:contain; pointer-events:none; margin:0;
	transition:left .55s cubic-bezier(.3,.9,.3,1), top .55s cubic-bezier(.3,.9,.3,1), width .55s cubic-bezier(.3,.9,.3,1), height .55s cubic-bezier(.3,.9,.3,1);
	filter:drop-shadow(0 10px 20px #000000aa) drop-shadow(0 0 22px color-mix(in srgb, var(--dk, #c56cff) 60%, transparent));
}
.an_vlucht.an_vlucht_land { transition-duration:.46s; transition-timing-function:cubic-bezier(.55,0,.55,1); }
.an_col_dier.an_wacht img { filter:grayscale(1) brightness(.5) drop-shadow(0 6px 10px #000000aa); opacity:.6; }
.an_col_dier.an_wacht::after { display:none; }
.an_col_dier.an_land img { animation:an_land .6s cubic-bezier(.2,1.6,.4,1) both; }
.an_col_dier.an_nieuw.an_land::after { animation:an_pop .45s cubic-bezier(.2,1.6,.4,1) .2s both; }
@keyframes an_land { 0% { transform:scale(1.4); filter:brightness(2.2) drop-shadow(0 6px 10px #000000aa); } 100% { transform:scale(1); filter:drop-shadow(0 6px 10px #000000aa); } }
/* wolkenpoort: dier + voortgangskaart boven de wolken */
.an_poort { position:absolute; left:0; right:0; z-index:100000; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.an_poort_dier { position:relative; width:92px; height:118px; }
.an_poort_dier > img { width:92px; height:118px; object-fit:contain; filter:drop-shadow(0 8px 14px #3a1c6688); }
.an_poort_dier > span
{
	position:absolute; right:-6px; top:18px; width:36px; height:36px; border:3px solid #000; border-radius:12px; background:var(--an-night);
	display:flex; align-items:center; justify-content:center;
}
.an_poort_dier > span svg { width:16px; height:16px; }
.an_poort_kaart
{
	border:3px solid #000; border-radius:18px; background:#0b0318ee; padding:8px 12px; display:flex; flex-direction:column; gap:6px; width:250px; box-sizing:border-box;
	box-shadow:0 8px 20px #3a1c6666; pointer-events:auto;
}
/* kop: naam · level links, "N more" rechts — past het niet naast elkaar (SALAMANDER ·
   LEVEL 2 + 17 MORE, eigenaar 5 nov), dan zakt "N more" naar een eigen regel
   rechts i.p.v. buiten de kaart te lopen; een extreem lange naam krijgt een ellipsis */
.an_poort_kaart > div:first-child { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 8px; }
.an_poort_kaart b { font-family:headers; font-size:15px; letter-spacing:1px; white-space:nowrap; font-weight:normal; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.an_poort_kaart > div:first-child small { font-size:13px; color:var(--dk); white-space:nowrap; margin-left:auto; }
.an_poort_rij { display:flex; align-items:center; gap:8px; }
.an_poort_rij > img { flex:none; width:26px; height:26px; }
.an_poort_rij .an_balk { flex:1; height:10px; border-radius:5px; border:1.5px solid #000; box-sizing:border-box; }
.an_poort_rij > span { font-family:headers; font-size:14px; white-space:nowrap; }
.an_poort_kaart .an_cta_rand { margin-top:4px; }
.an_poort_kaart .an_cta { height:44px; font-size:15px; }
.campaignmap .clouds { z-index:99999; }

/* missie-drawer (bottom sheet) */
/* het vel zelf scrolt NIET: greep + kop bovenaan en de CTA (.an_ms_voet) onderaan
   staan vast, alleen .an_ms_body scrolt — op een klein scherm bleef de startknop
   anders onder de vouw (eigenaar, 8 nov 2026); zelfde recept als .an_lade_body
   en de kop/voet van scherm 07 */
.bottom_drawer__content.an_lade_vel.an_ms_vel { background:linear-gradient(180deg, var(--dk-tint, #2a0650), var(--an-night2) 42%); padding:0 16px calc(16px + env(safe-area-inset-bottom)); gap:12px; max-height:92vh; overflow:hidden; }
.an_ms_vel .pm_greep { padding-top:10px; }
.an_ms_vel .an_ms_kop { flex:none; }
.bottom_drawer .an_lade_vel .an_ms_body
{
	flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px;
	overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:0 -16px; padding:2px 16px 6px;
	overscroll-behavior:contain;
}
.an_ms_body::-webkit-scrollbar { display:none; }
.an_ms_vel .an_ms_voet { flex:none; }
.an_ms_telt small.an_ms_telt_noot { color:var(--mg-licht); margin-top:-2px; }
.an_ms_kop { display:flex; align-items:center; gap:12px; }
.an_ms_kop > img { flex:none; width:58px; height:58px; filter:drop-shadow(0 3px 0 #000); }
.an_ms_kop > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.an_ms_kop > div > span:first-child { font-size:13px; letter-spacing:1.5px; color:var(--dk); white-space:nowrap; }
.an_ms_kop b { font-family:headers; font-size:22px; letter-spacing:.5px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:normal; }
.an_ms_kop > div > span:last-child { font-size:14px; color:#ffffffb3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_ms_kop .an_sluit { align-self:flex-start; }
.an_ms_winnen { display:flex; align-items:center; justify-content:space-between; }
.an_ms_winnen span:first-child { font-family:headers; font-size:13px; letter-spacing:1.5px; color:var(--an-link); }
.an_ms_winnen span:last-child { font-size:13px; color:#ffffffa6; white-space:nowrap; }
.an_ms_obj
{
	position:relative; display:flex; align-items:center; gap:10px; height:54px; padding:0 10px 0 6px; border-radius:14px; background:#00000066; border:2px solid #ffffff1a; overflow:hidden;
}
.an_ms_obj.an_ok { background:linear-gradient(90deg, color-mix(in srgb, var(--dk) 25%, transparent), color-mix(in srgb, var(--dk) 8%, transparent) 60%, #00000040); border-color:var(--dk); box-shadow:inset 0 2px 0 #ffffff26, 0 0 14px color-mix(in srgb, var(--dk) 20%, transparent); }
.an_ms_obj > img { flex:none; width:42px; height:42px; filter:grayscale(1) brightness(.45); }
.an_ms_obj.an_ok > img { filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 8px color-mix(in srgb, var(--dk) 60%, transparent)); }
.an_ms_obj > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.an_ms_obj b { font-family:headers; font-size:16px; white-space:nowrap; font-weight:normal; }
.an_ms_obj small { font-size:13px; color:#ffffff99; white-space:nowrap; }
.an_ms_obj.an_ok small { color:var(--dk); }
/* goud en XP rechts uitgelijnd, naast elkaar, vóór de +1-tag (feedback 2 nov) */
/* een drawer-regel in CubeRunnerz.css zet flex-direction:column op alles in
   .bottom_drawer__content — hier expliciet een rij, met gewicht */
.bottom_drawer .an_lade_vel .an_ms_rew { flex:none; display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:6px; margin-left:auto; flex-wrap:nowrap; text-align:right; width:auto; }
/* alleen al GECLAIMDE beloningen grijs; behaald-maar-nog-te-claimen blijft in kleur (eigenaar, 3 nov 2026) */
.an_ms_obj.an_geclaimd .an_ms_rew { opacity:.5; filter:grayscale(1); }
.an_ms_rew span { display:inline-flex; align-items:center; justify-content:flex-end; gap:2px; min-width:46px; font-family:headers; font-size:13px; white-space:nowrap; }
.an_ms_rew span img { width:18px; height:18px; object-fit:contain; }
.an_ms_rew .an_goud { color:var(--an-link); }
.an_ms_rew .an_xp { color:#c9b6ff; }
.an_ms_tag
{
	flex:none; height:26px; min-width:26px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:0 7px; border-radius:13px;
	border:2px solid #ffffff33; background:#ffffff14; font-family:headers; font-size:13px; color:#fff; white-space:nowrap;
}
.an_ms_obj.an_ok .an_ms_tag { background:var(--dk); border-color:#000; color:#000; }
.an_ms_telt { display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:16px; background:#00000080; border:1px solid color-mix(in srgb, var(--dk) 33%, transparent); }
/* het dier minstens 1,5× zo groot als in het ontwerp (46×60 → 72×94, eigenaarsfeedback 2 nov) */
.an_ms_telt > img { flex:none; width:72px; height:94px; margin:-6px 0; object-fit:contain; filter:grayscale(.2) drop-shadow(0 4px 6px #000000aa); }
.an_ms_telt > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:5px; }
.an_ms_telt > div > div:first-child { display:flex; justify-content:space-between; gap:8px; }
.an_ms_telt small { font-size:13px; color:#ffffffc0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_ms_telt b { font-family:headers; font-size:14px; white-space:nowrap; font-weight:normal; }
.an_ms_telt .an_balk { position:relative; height:10px; border-radius:5px; border:1.5px solid #000; box-sizing:border-box; }
.an_ms_telt .an_balk i { position:absolute; left:0; top:0; bottom:0; }
.an_ms_telt .an_balk i.an_winst { background:color-mix(in srgb, var(--dk) 33%, transparent); }
.an_ms_telt small.an_genoeg { color:var(--dk); }
/* tikbaar: opent de lade van het dier (8 nov 2026) */
.an_ms_telt[an-dier] { cursor:pointer; transition:transform .12s ease-out; -webkit-tap-highlight-color:transparent; }
.an_ms_telt[an-dier]:active { transform:scale(.98); }
.an_ms_slot
{
	cursor:pointer; height:56px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; background:#00000080; border:2px dashed #ffffff33;
	font-family:headers; font-size:16px; letter-spacing:1px; color:#ffffffa6;
}
.an_ms_slot svg { width:16px; height:16px; }
.an_ms_claim .an_cta { background:linear-gradient(0deg, #e09b00, #FFC107); }

/* ---- 07 · missie voltooid --------------------------------------------- */
/* 07: kop en voet vast, het middenstuk scrolt (knoppen altijd in beeld, de
   kolom-padding draagt de safe area onderaan) */
.an_mc_kolom { gap:0; padding-top:calc(env(safe-area-inset-top) + 14px); }
.an_mc_kolom > .an_top { flex:none; margin-bottom:0; position:relative; z-index:3; }
/* de bovenrand van het scrollende middenstuk lag precies op de bovenkant van de
   middelste badge: de witte gloed van de badges (drop-shadow 16px) werd daar
   recht afgeknipt en leek een getekende lijn (eigenaar, 8 nov 2026). De body
   begint nu 32px hoger (negatieve marge + evenveel padding: de inhoud staat op
   dezelfde plek) en een masker laat die strook van transparant naar dekkend
   lopen, zodat de gloed vervaagt i.p.v. afbreekt en gescrolde inhoud zacht onder
   de koprij (z-index 3) wegschuift */
.an_mc_body
{
	flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px;
	overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:-32px -22px 0; padding:32px 22px 0;
	-webkit-mask-image:linear-gradient(#0000, #000 32px); mask-image:linear-gradient(#0000, #000 32px);
}
.an_mc_body::-webkit-scrollbar { display:none; }
.an_mc_body > :last-child { margin-bottom:auto; }
.an_mc_voet { flex:none; padding-top:12px; }
/* 3 nov 2026: de kolom begint vlak onder de safe area (was +48px: verloren
   ruimte bovenaan) en het medailleblok is hoger, zodat de mascotte (met trofee)
   niet meer tegen de middelste badge aan zit */
.an_mc_medailles { position:relative; height:262px; margin-top:0; flex:none; }
/* de badges doen geanimeerd hun intrede (middelste eerst), de mascotte springt erbij */
@keyframes an_mc_in { from { transform:translateY(26px) scale(.9); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
.an_mc_boog img { animation:an_pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.an_mc_boog img:nth-child(1) { animation-delay:.32s; }
.an_mc_boog img:nth-child(2) { animation-delay:.12s; }
.an_mc_boog img:nth-child(3) { animation-delay:.5s; }
.an_mc_boog .an_ster { opacity:0; animation:an_twinkle 2.6s ease-in-out .9s infinite; }
.an_mc_mark img { animation:an_pop .5s cubic-bezier(.2,1.4,.4,1) .7s both; }
.an_mc_mark:nth-child(3) img { animation-delay:.8s; }
.an_mc_mark:nth-child(4) img { animation-delay:.9s; }
/* de stralen liggen op de achtergrondlaag van het scherm (naast .an_bg, vóór de
   kolom), niet meer in het scrollende middenstuk: overflow-y:auto knipte ze af
   op de bovenrand van .an_mc_body (eigenaar, 4 nov 2026). Middelpunt = het
   oude middelpunt in het medailleblok (210px) + wat erboven staat: kolom-padding
   14px + de koprij van 40px (het sluitkruis) + de safe area; zo lopen ze door
   tot boven de schermrand. Scrolt het middenstuk op een laag scherm, dan
   schuiven de badges een paar px t.o.v. de stralen — een zachte gloed, geen
   lijn, dus onzichtbaar. */
/* het masker loopt door tot ±335 px van het middelpunt = de bovenrand van het
   scherm op een toestel met notch (safe-area + 264 px): de stralen vervagen aan
   de schermrand zelf en niet al 25 px eronder, waar ze op een donker scherm
   "afgeknipt" leken (eigenaar, 8 nov 2026) */
.an_mc_stralen { top:calc(env(safe-area-inset-top) + 264px); width:640px; height:640px; margin-left:-320px; margin-top:-320px; -webkit-mask:radial-gradient(circle, #000 12%, transparent 74%); mask:radial-gradient(circle, #000 12%, transparent 74%); }
/* top 14px: de middelste badge steekt 14px boven de boog uit en werd anders door
   de scrollende body (overflow) afgesneden nu de kop geen marge meer heeft */
.an_mc_boog { position:absolute; left:50%; top:14px; transform:translateX(-50%); width:320px; height:110px; z-index:2; }
.an_mc_boog img { position:absolute; width:92px; height:92px; filter:drop-shadow(0 5px 0 #000) drop-shadow(0 0 16px #ffffff55); }
.an_mc_boog img.an_uit { filter:grayscale(1) brightness(.35) drop-shadow(0 5px 0 #000); }
.an_mc_boog img:nth-child(1) { left:22px; top:30px; }
.an_mc_boog img:nth-child(2) { left:100px; top:-14px; width:120px; height:120px; }
.an_mc_boog img:nth-child(3) { left:206px; top:30px; }
.an_mc_mascotte { position:absolute; left:50%; bottom:-6px; width:170px; height:150px; margin-left:-85px; object-fit:contain; filter:drop-shadow(0 8px 18px #000000aa); animation:an_mc_in .5s ease-out .2s both, an_bob 2.2s ease-in-out .7s infinite; }
.an_mc_kop { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:2px; flex:none; }
.an_mc_titel { font-family:headers; font-size:34px; letter-spacing:2px; text-shadow:0 4px 0 #000, 0 0 26px #ffc10766; text-align:center; }
.an_mc_score { display:flex; align-items:baseline; gap:8px; }
.an_mc_score b { font-family:headers; font-size:44px; line-height:1; color:var(--an-gold); text-shadow:0 4px 0 #000; font-weight:normal; }
.an_mc_score span { font-size:15px; color:#ffffffb3; }
.an_mc_record { margin-top:4px; height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:13px; background:#ffc10726; border:1px solid #ffc10780; font-family:headers; font-size:12px; letter-spacing:1.5px; color:var(--an-gold); }
.an_mc_hint { margin-top:4px; font-size:14px; color:#ffffffcc; }
.an_mc_hint span { color:var(--an-link); }
.an_mc_balk { position:relative; margin:20px 6px 0; height:56px; flex:none; }
.an_mc_balk > div:first-child { position:absolute; left:0; right:0; top:12px; border:3px solid #000; border-radius:10px; }
.an_mc_balk > div:first-child > div { height:12px; border-radius:7px; background:#00000099; overflow:hidden; }
.an_mc_balk > div:first-child i { display:block; height:100%; background:linear-gradient(0deg, #e09b00, #FFC107); box-shadow:inset 0 0 0 2px #ffe07a; border-radius:7px; transition:width .9s cubic-bezier(.2,.9,.3,1); }
.an_mc_mark { position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.an_mc_mark img { width:36px; height:36px; filter:drop-shadow(0 2px 0 #000); }
.an_mc_mark img.an_uit { filter:grayscale(1) brightness(.35) drop-shadow(0 2px 0 #000); }
.an_mc_mark span { font-size:13px; color:#ffffff8c; white-space:nowrap; }
.an_mc_mark.an_ok span { color:var(--an-link); }
.an_mc_tegels { display:flex; gap:10px; margin-bottom:14px; flex:none; }
.an_mc_tegel_rand { flex:1; border:4px solid #000; border-radius:18px; box-shadow:0 0 22px #ffc10733; }
.an_mc_tegel
{
	position:relative; height:86px; border:3px solid #ffca4d; border-radius:14px; background:linear-gradient(0deg, #3a1c00, #6b3a00);
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; overflow:hidden;
}
.an_mc_tegel.an_xp { border-color:#c9b6ff; background:linear-gradient(0deg, #1d0a3f, #3b1a78); }
.an_mc_tegel::before { content:''; position:absolute; top:2px; left:2px; right:2px; height:40%; background:#fff; opacity:.08; border-radius:10px; }
.an_mc_tegel img { width:44px; height:44px; object-fit:contain; filter:drop-shadow(0 3px 0 #000); }
.an_mc_tegel b { font-family:headers; font-size:22px; letter-spacing:.5px; text-shadow:0 2px #000; font-weight:normal; }
.an_mc_acties { display:flex; gap:9px; margin-top:10px; flex:none; }
.an_mc_acties .an_knop_rand { flex:1; }
.an_mc_geen { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#00000080; border:1px solid #ffffff1f; margin-bottom:14px; flex:none; }
.an_mc_geen > img { flex:none; width:52px; height:52px; filter:grayscale(1) brightness(.5) drop-shadow(0 3px 0 #000); }
.an_mc_geen > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.an_mc_geen b { font-family:headers; font-size:16px; letter-spacing:.5px; font-weight:normal; }
.an_mc_geen small { font-size:14px; line-height:19px; color:#ffffffc0; text-wrap:pretty; }

/* ---- 07B · voortgang dier (na CLAIM op 07) ------------------------------
   Zelfde skelet als 07 (kop en voet vast, middenstuk scrolt, kolom vlak onder
   de safe area: de 48px van het ontwerp is de statusbalk van het toestelkader)
   zodat de CTA op dezelfde plek blijft als op 07. Alles op één regel. */
.an_vd_bg { --an-halo:color-mix(in srgb, var(--dk) 33%, transparent); }
.an_vd_kolom { gap:0; padding-top:calc(env(safe-area-inset-top) + 14px); padding-left:22px; padding-right:22px; }
.an_vd_kolom > .an_top { flex:none; }
.an_vd_body
{
	flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
	overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:0 -22px; padding:0 22px 8px;
}
.an_vd_body::-webkit-scrollbar { display:none; }
.an_vd_voet { flex:none; padding-top:12px; }
.an_vd_kop { margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; flex:none; min-width:0; }
.an_vd_kop > div { display:flex; align-items:center; justify-content:center; gap:10px; max-width:100%; min-width:0; }
.an_vd_kop img { flex:none; width:34px; height:34px; filter:drop-shadow(0 3px 0 #000); }
.an_vd_kop b { min-width:0; font-family:headers; font-size:30px; line-height:1.15; letter-spacing:1px; font-weight:normal; text-shadow:0 4px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_kop b span { font-family:headers; color:var(--dk); }
/* "+2 AWARENESS BADGES" is op 30px breder dan de kolom (378 > 305px) */
.an_voortgang.is-awareness .an_vd_kop b { font-size:24px; letter-spacing:.5px; }
.an_vd_kop small { max-width:100%; font-size:15px; color:#ffffffc0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_kaarten { margin-top:22px; display:flex; flex-direction:column; align-items:stretch; flex:none; }
@keyframes an_vd_in { from { transform:translateY(22px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes an_vd_puls { 0%,100% { opacity:.55; } 50% { opacity:.9; } }
.an_vd_rand { border:4px solid #000; border-radius:22px; box-shadow:0 5px 0 #000; cursor:pointer; animation:an_vd_in .45s cubic-bezier(.2,.9,.3,1) .15s both; }
/* het wolkendier schuift 150 ms na de eerste kaart in, de schakel ertussen mee */
.an_vd_schakel { animation:an_fade .3s ease .3s both; }
.an_vd_schakel + .an_vd_rand { animation-delay:.3s; }
.an_vd_kaart
{
	position:relative; display:flex; align-items:center; gap:12px; min-height:118px; padding:8px 12px 8px 8px; box-sizing:border-box;
	border-radius:18px; border:2px solid color-mix(in srgb, var(--dk) 40%, transparent);
	background:linear-gradient(160deg, var(--dk-tint), #14062a 75%);
}
.an_vd_dier { position:relative; flex:none; width:92px; height:118px; display:flex; align-items:center; justify-content:center; }
.an_vd_dier::before { content:''; position:absolute; left:-8px; right:-8px; top:6px; bottom:6px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--dk) 45%, transparent), transparent 68%); }
/* nog niet behaald (07B toont altijd een dier dat de speler nog niet heeft) */
.an_vd_dier > img:first-child { position:relative; width:92px; height:118px; object-fit:contain; filter:grayscale(.85) brightness(.75) drop-shadow(0 4px 6px #000000aa); }
.an_vd_dier > .an_vd_disc { position:absolute; right:-4px; bottom:2px; width:34px; height:34px; filter:drop-shadow(0 2px 0 #000); }
.an_vd_info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* kicker in de smalle tekstletter van 07/17 (font3): in headers paste
   "CLOUD ANIMAL · AWARENESS LV 2" niet in de ~180px van de infokolom */
.an_vd_kicker { font-family:font3; font-size:13px; letter-spacing:.5px; color:var(--dk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_naam { font-family:headers; font-size:22px; line-height:1.1; letter-spacing:.5px; font-weight:normal; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_balk { position:relative; height:14px; margin-top:2px; border:2px solid #000; border-radius:8px; background:#00000099; box-sizing:border-box; overflow:hidden; flex:none; }
.an_vd_balk i { position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
.an_vd_balk i.an_vd_voor { background:var(--dk); }
/* het nieuwe deel: licht, vult in 0,8 s vanaf de stand vóór de missie en blijft zacht pulseren */
.an_vd_balk i.an_vd_na { background:var(--dk-light); transition:width .8s cubic-bezier(.15,.85,.35,1); animation:an_vd_puls 1.6s ease-in-out infinite; }
.an_vd_stand { display:flex; align-items:baseline; gap:8px; min-width:0; }
.an_vd_stand b { flex:none; font-family:headers; font-size:16px; font-weight:normal; color:#fff; white-space:nowrap; }
.an_vd_stand span { min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_winst { color:var(--dk); }
.an_vd_geen { color:#ffffff73; }
.an_vd_noot { font-size:13px; color:#ffffffb3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_vd_pijl { flex:none; width:18px; height:18px; color:#ffffff80; }
.an_vd_schakel { display:flex; flex-direction:column; align-items:center; flex:none; }
.an_vd_schakel i { width:3px; height:14px; background:#ffffff33; }
.an_vd_schakel span
{
	height:30px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border-radius:15px; background:#000000b3; border:1px solid #ffffff33;
	font-family:headers; font-size:13px; letter-spacing:1px; color:#fff; white-space:nowrap;
}
.an_vd_schakel svg { flex:none; width:14px; height:14px; }

/* ---- 17 · dier vrijgespeeld ------------------------------------------- */
.an_ac_bg { background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--dk) 40%, transparent), transparent 58%), linear-gradient(#0b0318aa, #0b0318f5 64%), url(/public/img/cbg0.jpeg) center/cover; }
.an_ac_stralen { position:absolute; left:50%; top:270px; width:680px; height:680px; margin-left:-340px; margin-top:-340px; opacity:0; transition:opacity .6s; --an-straal:color-mix(in srgb, var(--dk) 14%, transparent); -webkit-mask:radial-gradient(circle, #000 12%, transparent 64%); mask:radial-gradient(circle, #000 12%, transparent 64%); }
.an_ac_kolom { align-items:center; }
.an_ac_pil { margin-top:18px; height:26px; border:3px solid #000; border-radius:13px; background:var(--dk); font-family:headers; font-size:13px; letter-spacing:1.5px; color:var(--an-night); display:inline-flex; align-items:center; padding:0 12px; opacity:0; transition:opacity .4s; }
.an_ac_podium { flex:none; position:relative; width:300px; height:260px; margin-top:6px; }
.an_ac_badge { position:absolute; left:50%; top:10px; width:180px; height:240px; margin-left:-90px; transform:scale(.4); opacity:0; transition:transform .7s cubic-bezier(.2,1.5,.4,1), opacity .4s; }
.an_ac_badge img { width:180px; height:240px; object-fit:contain; filter:drop-shadow(0 12px 22px #000000aa) drop-shadow(0 0 26px color-mix(in srgb, var(--dk) 60%, transparent)); animation:an_bob 2.4s ease-in-out infinite; }
.an_ac_sterren { opacity:0; transition:opacity .4s .3s; }
.an_wolk { position:absolute; top:20px; width:300px; height:280px; z-index:5; transition:transform 1s cubic-bezier(.6,0,.3,1), opacity 1s; }
.an_wolk.an_wolk_l { left:-60px; }
.an_wolk.an_wolk_r { left:80px; top:10px; }
.an_wolk i { position:absolute; border-radius:50%; background:radial-gradient(circle at 40% 35%, #ffffff, #e6dcff 55%, #b9a6e8); box-shadow:inset -8px -10px 0 #9d86d6aa; }
.an_ac_naam { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0; transform:scale(.7); transition:opacity .4s .2s, transform .5s .2s cubic-bezier(.2,1.5,.4,1); }
.an_ac_naam b { font-family:headers; font-size:38px; letter-spacing:2px; line-height:1; text-shadow:0 4px 0 #000, 0 0 26px color-mix(in srgb, var(--dk) 53%, transparent); font-weight:normal; }
.an_ac_naam span { font-size:16px; color:var(--dk); }
.an_ac_rest { flex:none; align-self:stretch; margin-top:16px; display:flex; flex-direction:column; gap:12px; opacity:0; transition:opacity .4s .4s; }
.an_ac_badges { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#00000080; border:1px solid color-mix(in srgb, var(--dk) 40%, transparent); }
.an_ac_badges > img { flex:none; width:46px; height:46px; filter:drop-shadow(0 3px 0 #000); }
.an_ac_badges > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.an_ac_badges > div > div { display:flex; justify-content:space-between; gap:8px; }
.an_ac_badges b { font-family:headers; font-size:15px; white-space:nowrap; font-weight:normal; }
.an_ac_badges small { font-size:13px; color:var(--dk); white-space:nowrap; }
.an_ac_voet { align-self:stretch; opacity:0; transition:opacity .4s .5s; flex:none; }
.an_ac_link { margin-top:8px; opacity:0; transition:opacity .4s .6s; }
.an_scherm.an-fase1 .an_ac_badge { transform:scale(1); opacity:1; }
.an_scherm.an-fase1 .an_wolk_l { transform:translateX(-130%); opacity:0; }
.an_scherm.an-fase1 .an_wolk_r { transform:translateX(130%); opacity:0; }
.an_scherm.an-fase2 .an_ac_pil, .an_scherm.an-fase2 .an_ac_stralen, .an_scherm.an-fase2 .an_ac_sterren,
.an_scherm.an-fase2 .an_ac_rest, .an_scherm.an-fase2 .an_ac_voet, .an_scherm.an-fase2 .an_ac_link { opacity:1; }
.an_scherm.an-fase2 .an_ac_naam { opacity:1; transform:scale(1); }

/* ---- showcase: het dier als soort ------------------------------------ */
.showcase_slot.is-animal { border-color:#8ce99a; box-shadow:0 0 18px #8ce99a33; }
.showcase_slot.is-animal .showcase_slot__rang { background:#8ce99a; color:#0b2a12; }
.collectie_cel.is-animal { border-color:#8ce99a66; }
.showcase_pick.is-animal { border-color:#8ce99a66; }
.pvp_showcase__cel.is-animal { border-color:#8ce99a; box-shadow:0 0 12px #8ce99a3d; }
.collectie_cel.is-animal img, .showcase_pick.is-animal img, .showcase_slot.is-animal img, .pvp_showcase__cel.is-animal img { object-fit:contain; }
.trofee_detail__kop.is-animal img { object-fit:contain; }
/* ANIMAL COLLECTION-kaart op de TROPHIES-tab: 4 kolommen zoals de collectie */
.an_profiel_kaart .collectie_grid { grid-template-columns:repeat(4, 1fr); gap:6px; }
.an_profiel_kaart .collectie_cel img { width:48px; height:64px; }
.an_profiel_kaart .collectie_cel small { font-size:9px; }
.an_profiel_kaart .an_profiel_voet { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; }
.an_profiel_kaart .an_profiel_voet small { font-family:p; font-size:10px; color:#ffffff9c; }
.an_profiel_kaart .an_profiel_voet a { font-family:headers; font-size:12px; letter-spacing:1px; color:var(--an-link); cursor:pointer; white-space:nowrap; }

/* ---- 16 · overrides op de oude kaart-CSS (CubeRunnerz.css) ------------ */
/* .campaignmap .biome img{width:100%} blies de boog- en poort-plaatjes op;
   .objective_holder hing links onder de munt (bottom:70px, margin-left:-100px) */
.campaignmap .mission_holder .objective_holder.an_boog_houder
{
	position:absolute; left:50%; top:50%; bottom:auto; width:60px; height:60px; margin:-30px 0 0 -30px; z-index:3; pointer-events:none;
}
/* de boog zelf is het doel van de coach-spotlight (THREE OBJECTIVES): zijn
   doos omspant de drie bollen (80×40, van 30px boven de munt tot 10px erin).
   Vroeger was hij static met de generieke margin -30px nog actief → de doos
   hing 30px links-boven de munt terwijl de bollen (absoluut t.o.v. de houder)
   wél goed stonden, en de spotlight omcirkelde een leeg stuk kaart (3 nov 2026) */
.campaignmap .mission_holder .objective_holder.an_boog_houder > .an_boog { position:absolute; display:block; left:-10px; top:-30px; margin:0; gap:0; width:80px; height:40px; }
.campaignmap .mission_holder .an_boog i:nth-child(1) { left:4px; top:14px; }
.campaignmap .mission_holder .an_boog i:nth-child(2) { left:32px; top:6px; }
.campaignmap .mission_holder .an_boog i:nth-child(3) { left:60px; right:auto; top:14px; }
/* de munt vóór de commandant-pil (z-index 1): .biome__mission zelf is static,
   dus zijn z-index telt niet — de houder is gepositioneerd en krijgt het gewicht */
.campaignmap .mission_holder .an_munt_houder { position:relative; width:60px; height:60px; z-index:2; }
/* de commandant-avatar houdt zijn oude pil (CubeRunnerz.css .mission_commander);
   de munt is 60px i.p.v. 40, dus de pil even breed */
.campaignmap .mission_holder .mission_commander { width:60px; padding-top:69px; }
.campaignmap .biome .mission_commander img { width:100%; padding:0; }
.campaignmap .mission_holder { display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:-30px 0 0 -30px; }
/* de poort: geen oude paarse kaart, de wolken staan er zelf achter */
.campaignmap .tierUnlockRequirements.an_poort_houder
{
	background:none; border:0; padding:0; box-shadow:none; width:auto; left:0; right:0; margin:0; border-radius:0; backdrop-filter:none;
	display:flex; justify-content:center; pointer-events:none;
}
.campaignmap .tierUnlockRequirements.an_poort_houder .an_poort { position:relative; }
/* de oude regel zet élke img in de poort op 50px !important */
.campaignmap .biome .an_poort img { width:auto !important; padding:0; }
.campaignmap .biome .an_poort_dier > img { width:92px !important; height:118px; }
.campaignmap .biome .an_poort_rij > img { width:26px !important; height:26px; }

/* ═══ 15 · NEW RECORD (all-time vs. week) ═══════════════════════════════════
   Kleur volgt de discipline (.is-<disc> zet --dk). All-time: gevuld lint,
   gouden ring met glans rond de avatar, stralen + confetti. Week: donker lint
   met gekleurde rand, weeksticker, weekkalender (beste per dag), geen confetti.
   De teller loopt van het oude naar het nieuwe record (speed telt af). */
.an_record .an_rc_kolom { align-items:center; text-align:center; gap:0; }
.an_record .an_rc_kolom > * { flex:none; }
.an_rc_stralen { top:320px; width:700px; height:700px; margin-left:-350px; margin-top:-350px; animation-duration:40s; }
.an_rc_scope
{
	height:32px; display:inline-flex; align-items:center; padding:0 12px; border-radius:16px; border:2px solid #000;
	font-family:headers; font-size:13px; letter-spacing:1px; white-space:nowrap; background:var(--dk-dark, #1660a8); color:#fff;
}
.an_rc_all .an_rc_scope { background:var(--an-gold); color:#3a1c00; }
.an_rc_held { position:relative; width:180px; height:196px; margin-top:20px; }
.an_rc_halo { position:absolute; left:3px; top:24px; width:174px; height:174px; z-index:0; opacity:0; transform:scale(.7); transition:opacity .3s, transform .6s cubic-bezier(.2,1.5,.4,1); }
.an_rc_halo_ring
{
	position:absolute; inset:0; border-radius:50%; border:4px solid #000; box-shadow:0 0 34px #ffc10788;
	background:conic-gradient(from 210deg, #7a4a00, #FFC107, #fff3b0, #FFC107, #b36b00, #ffe07a, #7a4a00);
}
.an_rc_halo_baan
{
	position:absolute; inset:0; border-radius:50%; animation:an_spin 3.2s linear infinite;
	background:conic-gradient(from 0deg, transparent 0 80%, #ffffffcc 88%, transparent 96%);
	-webkit-mask:radial-gradient(circle, transparent 76px, #000 77px); mask:radial-gradient(circle, transparent 76px, #000 77px);
}
.an_rc_sterren { position:absolute; inset:0; opacity:0; transition:opacity .4s .2s; pointer-events:none; }
.an_rc_avatar { position:absolute; left:15px; top:36px; width:150px; height:150px; z-index:1; }
.an_rc_puls { position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, var(--dk, #45adff) 0, transparent 70%); opacity:.35; animation:an_glow 2s ease-in-out infinite; }
.an_rc_ring
{
	position:absolute; inset:0; border-radius:50%; padding:7px; box-sizing:border-box; border:4px solid #000; box-shadow:0 12px 30px #000000aa;
	background:linear-gradient(160deg, var(--dk-light, #b5dcff), var(--dk, #45adff) 45%, var(--dk-dark, #1660a8));
}
.an_rc_foto { width:100%; height:100%; border-radius:50%; border:3px solid #000; box-sizing:border-box; background:#65C9FF; overflow:hidden; }
.an_rc_foto img { width:100%; height:100%; object-fit:cover; display:block; }
.an_rc_icoon { position:absolute; right:-10px; bottom:-4px; width:62px; height:62px; filter:drop-shadow(0 4px 0 #000); }
.an_rc_sticker
{
	position:absolute; left:-6px; top:24px; z-index:3; width:56px; border:3px solid #000; border-radius:12px; overflow:hidden; background:#fff;
	box-shadow:0 4px 0 #000; transform:rotate(-8deg); opacity:0; transition:opacity .3s;
}
.an_rc_sticker span { display:flex; height:18px; align-items:center; justify-content:center; background:var(--dk, #45adff); font-family:headers; font-size:11px; letter-spacing:1px; color:#0b0318; }
.an_rc_sticker b { display:flex; height:30px; align-items:center; justify-content:center; font-family:headers; font-size:24px; font-weight:normal; color:#1a0b2a; }
.an_rc_lint_houder { height:84px; display:flex; align-items:center; justify-content:center; margin-top:6px; }
.an_rc_lint { opacity:0; transform:scale(2.2) rotate(-8deg); transition:opacity .2s, transform .45s cubic-bezier(.2,1.7,.4,1); border:4px solid #000; border-radius:16px; box-shadow:0 7px 0 #00000080, 0 0 40px color-mix(in srgb, var(--dk, #45adff) 47%, transparent); }
.an_rc_lint_in
{
	position:relative; display:flex; flex-direction:column; align-items:center; padding:5px 22px 7px; border-radius:12px; overflow:hidden;
	border:3px solid var(--dk, #45adff); background:#120624;
}
.an_rc_all .an_rc_lint_in { border-color:#ffe07a; background:linear-gradient(0deg, var(--dk-dark, #1660a8), var(--dk, #45adff)); }
.an_rc_glans { position:absolute; top:3px; left:3px; right:3px; height:42%; background:#fff; opacity:.28; border-radius:8px; }
.an_rc_lint_in b { position:relative; font-family:headers; font-weight:normal; font-size:32px; letter-spacing:2px; line-height:1.05; white-space:nowrap; color:var(--dk, #45adff); }
.an_rc_lint_in small { position:relative; font-size:14px; color:#ffffffc0; white-space:nowrap; }
.an_rc_all .an_rc_lint_in b { color:#0b0318; }
.an_rc_all .an_rc_lint_in small { color:#0b0318cc; }
.an_rc_waarde { display:flex; align-items:baseline; justify-content:center; gap:6px; margin-top:8px; }
.an_rc_waarde b { font-family:headers; font-weight:normal; font-size:68px; line-height:1; letter-spacing:1px; text-shadow:0 5px 0 #000, 0 0 30px var(--dk, #45adff); font-variant-numeric:tabular-nums; }
.an_rc_waarde span { font-family:headers; font-size:24px; color:#ffffffcc; }
.an_rc_oud
{
	margin-top:12px; display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:14px; background:#00000080; border:1px solid #ffffff1f; max-width:100%;
}
.an_rc_oud > span { font-size:14px; color:#ffffffa6; white-space:nowrap; }
.an_rc_oud s { font-family:headers; font-size:17px; color:#ffffff8c; white-space:nowrap; }
.an_rc_delta
{
	height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:13px; font-style:normal;
	background:#5ce08a26; border:1px solid #5ce08a80; font-family:headers; font-size:13px; letter-spacing:.5px; color:#5ce08a; white-space:nowrap;
	opacity:0; transform:scale(.4); transition:opacity .3s .15s, transform .45s .15s cubic-bezier(.2,1.7,.4,1);
}
.an_rc_stats
{
	align-self:stretch; margin-top:14px; padding:12px 14px; border-radius:16px; background:#00000080; border:1px solid var(--dk, #45adff);
	display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; text-align:center; opacity:0; transition:opacity .4s .2s;
}
.an_rc_stats > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.an_rc_stats > div + div { border-left:1px solid #ffffff1f; }
.an_rc_stats b { font-family:headers; font-weight:normal; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_rc_stats b.an_rc_kleur { color:var(--dk, #45adff); }
.an_rc_stats span { font-size:12px; color:#ffffffa6; }
.an_rc_kalender { align-self:stretch; margin-top:14px; padding:12px 14px 10px; border-radius:16px; background:#00000080; border:1px solid var(--dk, #45adff); display:flex; flex-direction:column; gap:8px; }
.an_rc_kalender_kop { display:flex; justify-content:space-between; align-items:baseline; }
.an_rc_kalender_kop span { font-family:headers; font-size:12px; letter-spacing:1.5px; color:var(--dk, #45adff); }
.an_rc_kalender_kop small { font-size:12px; color:#ffffff99; }
.an_rc_balken { height:64px; display:flex; align-items:flex-end; gap:8px; }
.an_rc_dag { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.an_rc_dag i { display:block; width:100%; border-radius:6px 6px 3px 3px; box-sizing:border-box; background:color-mix(in srgb, var(--dk, #45adff) 33%, transparent); transition:height .6s cubic-bezier(.2,1.4,.4,1); }
.an_rc_dag span { font-size:12px; color:#ffffffa6; }
.an_rc_dag.an_rc_vandaag i { background:linear-gradient(0deg, var(--dk-dark, #1660a8), var(--dk, #45adff)); border:2px solid #000; }
.an_rc_dag.an_rc_vandaag span { color:#fff; }
.an_rc_dag.an_rc_toekomst i { background:transparent; border:1.5px dashed #ffffff33; }
.an_rc_dag.an_rc_toekomst span { color:#ffffff59; }
.an_rc_dag.an_rc_leeg i { background:#ffffff1a; }
.an_rc_dag.an_rc_leeg span { color:#ffffff73; }
.an_rc_rek { flex:1 1 auto !important; }
.an_rc_voet { align-self:stretch; opacity:0; transition:opacity .4s; }
.an_rc_voet .an_cta_rand { width:100%; box-sizing:border-box; }
.an_rc_confetti { opacity:0; }
.an_rc_confetti i { animation-play-state:paused; }
/* fases: 1 = de teller loopt, 2 = het lint slaat in, delta/stats/voet/confetti */
.an_record.an-fase2 .an_rc_lint { opacity:1; transform:scale(1) rotate(-3deg); }
.an_record.an-fase2 .an_rc_halo { opacity:1; transform:scale(1); }
.an_record.an-fase2 .an_rc_sterren, .an_record.an-fase2 .an_rc_sticker, .an_record.an-fase2 .an_rc_stats, .an_record.an-fase2 .an_rc_voet { opacity:1; }
.an_record.an-fase2 .an_rc_delta { opacity:1; transform:scale(1); }
.an_record.an-fase2 .an_rc_confetti { opacity:1; }
.an_record.an-fase2 .an_rc_confetti i { animation-play-state:running; }
.an_record .an_rc_scope, .an_record .an_rc_lint_in b, .an_record .an_rc_waarde b, .an_record .an_rc_waarde span, .an_record .an_rc_stats b, .an_record .an_rc_sticker span, .an_record .an_rc_sticker b, .an_record .an_rc_oud s, .an_record .an_rc_delta, .an_record .an_rc_week_kop span { font-family:headers; }


/* 16 · RESULTS in de missie-drawer: commandant (beste op deze missie), jij en je vrienden */
.an_ms_res { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:16px; background:#00000080; border:1px solid color-mix(in srgb, var(--dk) 33%, transparent); }
.an_ms_res .an_ms_winnen span:first-child { color:var(--dk); }
.bottom_drawer .an_lade_vel .an_ms_res_rij { display:flex; flex-direction:row; align-items:center; gap:10px; min-height:40px; padding:3px 8px; border-radius:12px; border:1px solid transparent; }
.an_ms_res_rij.an_jij { background:color-mix(in srgb, var(--dk) 12%, transparent); border-color:color-mix(in srgb, var(--dk) 55%, transparent); }
.an_ms_res_nr { flex:none; width:22px; display:flex; align-items:center; justify-content:center; font-family:headers; font-size:13px; color:#ffffff99; }
.an_ms_res_nr svg { width:17px; height:17px; fill:var(--an-gold); filter:drop-shadow(0 1px 0 #000); }
.an_ms_res_rij > img { flex:none; width:34px; height:34px; border-radius:50%; border:2px solid #000; background:#65C9FF; object-fit:cover; }
.an_ms_res_rij > div { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.an_ms_res_rij b { font-family:headers; font-size:14px; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.an_ms_res_rij small { font-size:12px; color:#ffffffa6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.an_ms_res_cmd small { color:var(--an-gold); }
.an_ms_res_score { flex:none; font-family:headers; font-size:15px; color:var(--dk); white-space:nowrap; font-weight:normal; }
.an_ms_res_leeg small { color:#ffffffc0; }
.an_ms_res_meer { font-size:12px; color:#ffffff80; text-align:center; }


/* 11 · XP per discipline (vervangt het aparte EXPERIENCE GAINED-scherm) */
.an_rij_xp { flex:none; margin-left:auto; margin-right:8px; height:20px; display:inline-flex; align-items:center; padding:0 7px; border-radius:10px; background:#3b1a78; border:1px solid #c9b6ff; font-family:headers; font-size:11px; letter-spacing:.5px; color:#e6dcff; white-space:nowrap; }
.an_rij_kop .an_rij_waarde { margin-left:0; }
/* CTA met cadeau/kosten (CLAUDE.md §6, 3 nov 2026): de app-brede .price_tag-pil
   rechts ín de knop, precies zoals PLAY NOW zijn levenspil "-1" draagt; de
   knoptekst centreert in de ruimte die overblijft */
.an_cta .price_tag { margin:0 0 0 auto; flex:none; }
.an_cta:has(.price_tag) { padding:0 6px 0 0; }
.an_cta:has(.price_tag) > span:first-child { flex:1; text-align:center; }


/* 16 · tabs in de missie-drawer (MISSION | RESULTS) op het app-tabmechanisme */
.an_ms_tabwrap { display:flex; flex-direction:column; gap:12px; }
.an_ms_tabwrap > [view-content] > .an_ms_tabinhoud { display:flex; flex-direction:column; gap:12px; }
.bottom_drawer .an_lade_vel .an_ms_tabs { display:flex; flex-direction:row; gap:6px; padding:4px; border-radius:14px; background:#00000080; border:1px solid #ffffff1f; }
.an_ms_tab
{
	flex:1; height:38px; border:0; border-radius:10px; background:transparent; color:#ffffff99; cursor:pointer;
	font-family:headers; font-size:14px; letter-spacing:1.5px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.an_ms_tab i { font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#ffffff1f; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
/* de generieke app-tabregel ([view-wrapper="n"] [view-change="n"]) legt een gouden
   gradient als background-image over de actieve tab — hier wint de disciplinekleur */
.bottom_drawer .an_lade_vel [view-wrapper="1"] > .an_ms_tabs .an_ms_tab[view-change="1"], .bottom_drawer .an_lade_vel [view-wrapper="2"] > .an_ms_tabs .an_ms_tab[view-change="2"]
{ background-image:none !important; background-color:var(--dk, #45adff) !important; color:#0b0318 !important; box-shadow:none !important; }
[view-wrapper="1"] > .an_ms_tabs .an_ms_tab[view-change="1"] i, [view-wrapper="2"] > .an_ms_tabs .an_ms_tab[view-change="2"] i { background:#0b031833; }
/* commandant-blok */
.bottom_drawer .an_lade_vel .an_ms_cmd
{
	display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 14px 14px; border-radius:18px; text-align:center;
	background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--dk, #45adff) 28%, transparent), transparent 70%), #00000080;
	border:1px solid color-mix(in srgb, var(--dk, #45adff) 45%, transparent);
}
.an_ms_cmd.an_jij { border-color:var(--dk, #45adff); }
.an_ms_cmd_avatar { position:relative; width:96px; height:96px; margin-bottom:4px; }
.an_ms_cmd_avatar > img
{
	width:96px; height:96px; border-radius:50%; border:4px solid #000; box-sizing:border-box; background:#65C9FF; object-fit:cover;
	box-shadow:0 0 0 3px var(--dk, #45adff), 0 10px 24px #000000aa;
}
.an_ms_cmd_avatar > span
{
	position:absolute; right:-6px; bottom:-2px; width:34px; height:34px; border-radius:50%; background:var(--an-gold); border:3px solid #000;
	display:flex; align-items:center; justify-content:center;
}
.an_ms_cmd_avatar > span svg { width:18px; height:18px; fill:#3a1c00; }
.an_ms_cmd_vraag { border-radius:50%; border:4px dashed #ffffff40; display:flex; align-items:center; justify-content:center; }
.an_ms_cmd_vraag > span { position:static; width:auto; height:auto; background:none; border:0; font-family:headers; font-size:40px; color:#ffffff59; }
.an_ms_cmd_naam { font-family:headers; font-size:22px; font-weight:normal; letter-spacing:.5px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_ms_cmd_sub { font-size:12px; letter-spacing:1.5px; color:var(--an-gold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.an_ms_cmd_leeg .an_ms_cmd_sub { color:#ffffffa6; letter-spacing:0; font-size:13px; white-space:normal; }
.bottom_drawer .an_lade_vel .an_ms_cmd_score { display:flex; flex-direction:column; align-items:center; gap:2px; margin:6px 0 10px; }
.an_ms_cmd_score b { font-family:headers; font-size:34px; line-height:1; font-weight:normal; color:var(--dk, #45adff); text-shadow:0 3px 0 #000; }
.an_ms_cmd_score span { font-size:13px; color:#ffffffb3; }
.an_ms_cmd .an_knop_rand { align-self:stretch; }
.an_ms_cmd .an_knop { color:var(--dk, #45adff); border-color:color-mix(in srgb, var(--dk, #45adff) 45%, transparent); }
.an_ms_cmd .an_knop svg { fill:currentColor; width:14px; height:14px; }
.an_ms_cmd_geen { font-size:12px; color:#ffffff73; }
.an_ms_res_play { flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--dk, #45adff) 60%, transparent); background:#00000066; color:var(--dk, #45adff); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.an_ms_res_play svg { width:14px; height:14px; fill:currentColor; }

/* ═══ SLUITKRUIS — harde regel (CLAUDE.md §4, 2 nov 2026) ═══════════════════
   Elk kruis rechtsboven dat een drawer of zijpaneel sluit ziet eruit als de
   .an_sluit van de missie-drawer: 40×40, hoeken 12px, #00000080, rand 1.5px
   #ffffff30, wit kruis van 16px. De bestaande varianten (gamepop-drawers met
   <a swipe-close><svg> — ook zonder class "close", zoals de avatarkiezer (3 nov) —, .pm_sluit, summary/ranked-summary,
   pvp-spelerlade, .close.right_top) worden hier op dat uiterlijk gezet; de
   eigen glyph gaat uit en het kruis wordt met twee balkjes getekend, zodat
   alle kruizen identiek zijn. Positie/marges van elk kruis blijven zoals ze
   waren (absoluut in .gamepop_header, flex-einde in de koppen). */
.gamepop_header a[swipe-close]:has(> svg), .pm_sluit, .summary_header__close, .rksum_header__close, .pe_sp_sluit, .close.right_top,
.profiel_rond[swipe-close], .bottom_drawer__content > a.close[swipe-close], .top_overlayed > a.close[swipe-close], .pe_home[pvp-entry-close]
{
	width:40px !important; height:40px !important; box-sizing:border-box; border-radius:12px !important;
	background:#00000080 !important; border:1.5px solid #ffffff30 !important; box-shadow:none !important;
	display:flex !important; align-items:center; justify-content:center; padding:0 !important;
	color:#fff; font-size:0 !important; line-height:0; cursor:pointer; overflow:visible;
}
.pm_sluit, .summary_header__close, .rksum_header__close, .pe_sp_sluit, .profiel_rond[swipe-close], .pe_home[pvp-entry-close] { position:relative; }
/* PvP-entry (PICK YOUR DUEL, lobby's): het sluiten (was een huisje links) wordt het
   kruis RECHTS, de "?" gaat naar links in hetzelfde 40px-kader */
.pe_drawer_kop .pe_home[pvp-entry-close] { order:3; background-image:none !important; }
.pe_drawer_kop .pe_help { order:1; width:40px; height:40px; border-radius:12px; background:#00000080; border:1.5px solid #ffffff30; font-size:16px; color:#fff; font-family:headers; }
.pe_drawer_kop .pe_titel { order:2; }
.close.right_top { content:normal !important; border-radius:12px !important; }
.gamepop_header a[swipe-close]:has(> svg) > svg.close, .pm_sluit > svg, .summary_header__close > svg, .rksum_header__close > svg, .pe_sp_sluit > *,
.profiel_rond[swipe-close] > svg, .bottom_drawer__content > a.close[swipe-close] > svg, .top_overlayed > a.close[swipe-close] > svg { display:none !important; }
.gamepop_header a[swipe-close]:has(> svg)::before, .gamepop_header a[swipe-close]:has(> svg)::after,
.pm_sluit::before, .pm_sluit::after, .summary_header__close::before, .summary_header__close::after,
.rksum_header__close::before, .rksum_header__close::after, .pe_sp_sluit::before, .pe_sp_sluit::after,
.close.right_top::before, .close.right_top::after,
.profiel_rond[swipe-close]::before, .profiel_rond[swipe-close]::after, .bottom_drawer__content > a.close[swipe-close]::before, .bottom_drawer__content > a.close[swipe-close]::after,
.top_overlayed > a.close[swipe-close]::before, .top_overlayed > a.close[swipe-close]::after, .pe_home[pvp-entry-close]::before, .pe_home[pvp-entry-close]::after
{
	content:''; position:absolute; left:50%; top:50%; width:13px; height:2.2px; margin:-1.1px 0 0 -6.5px; border-radius:2px; background:#fff;
}
.gamepop_header a[swipe-close]:has(> svg)::before, .pm_sluit::before, .summary_header__close::before, .rksum_header__close::before, .pe_sp_sluit::before, .close.right_top::before,
.profiel_rond[swipe-close]::before, .bottom_drawer__content > a.close[swipe-close]::before, .top_overlayed > a.close[swipe-close]::before, .pe_home[pvp-entry-close]::before { transform:rotate(45deg); }
.gamepop_header a[swipe-close]:has(> svg)::after, .pm_sluit::after, .summary_header__close::after, .rksum_header__close::after, .pe_sp_sluit::after, .close.right_top::after,
.profiel_rond[swipe-close]::after, .bottom_drawer__content > a.close[swipe-close]::after, .top_overlayed > a.close[swipe-close]::after, .pe_home[pvp-entry-close]::after { transform:rotate(-45deg); }


/* ═══ DRAWER-GREEP (.env DRAWER_HANDLE = in | out | off) ═══════════════════
   De generieke bottom_drawer__content:before (CubeRunnerz.css) tekent de
   sleepgreep BOVEN het vel (100px, -20px). Standaard ('in') staat hij nu ín het
   vel bovenaan, precies als de greep van de missie-drawer; 'out' laat het oude
   uiterlijk staan; 'off' verbergt elke greep. De gamepop-drawers krijgen bij
   'in' ruimte bovenaan zodat kop en greep elkaar niet raken, en de kop blijft
   altijd vrij van het sluitkruis (40px rechtsboven). */
body:not([data-drawer-handle="out"]) .bottom_drawer__content:before
{
	position:absolute; top:10px; left:50%; width:44px; min-height:5px; height:5px; margin:0 0 0 -22px;
	border-radius:3px; background:#ffffff40; opacity:1; z-index:3;
}
body[data-drawer-handle="off"] .bottom_drawer__content:before, body[data-drawer-handle="off"] .pm_greep, body[data-drawer-handle="off"] .an_lade_greep { display:none !important; }
/* de kop zit tegen de bovenrand van het vel (de 16px-marge uit CubeRunnerz werd
   vroeger opgeheven door de zwevende greep met z'n negatieve marge): de stralen-
   achtergrond begint zo weer bovenaan en de greep zweeft erover; de titel krijgt
   via de padding ruimte onder de greep */
body:not([data-drawer-handle="out"]) .bottom_drawer .gamepop_header { margin-top:0; padding-top:34px; }
.bottom_drawer .gamepop_header h1, .bottom_drawer .gamepop_header h2 { box-sizing:border-box; padding-left:52px; padding-right:52px; }
/* de pas-drawers (factory/vip): CTA-tekst wit; de VIP-knop draagt hetzelfde
   goudverloop als het VIP-ticket in de kop (.ticket in CubeRunnerz.css) */
#factoryPass .btn-orange.btn-gold, #vipPass .btn-orange.btn-gold { color:#fff !important; text-shadow:0 2px 0 #000000aa; }
#vipPass .btn-orange.btn-gold
{
	background:radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
		radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%) !important;
	border-color:#FEDB37 !important; text-shadow:0 2px 0 #000, 0 0 10px #00000080;
}

/* PREPARE YOURSELF (en de andere gamepop-drawers): de "?"-hulpknop staat linksboven in hetzelfde
   40×40-kader als het sluitkruis rechts (de PICK YOUR DUEL-consensus):
   `.bottom_drawer h2` is display:block, dus ín de titelregel wikkelde hij op
   elke telefoonbreedte naar een eigen regel (3 nov 2026). .gamepop_header is
   position:relative; het kruis staat op top/right 10px. */
.bottom_drawer .gamepop_header > .tutorial_help { position:absolute; left:10px; top:10px; width:40px; height:40px; min-width:40px; margin:0; border-radius:12px; background:#00000080; border:1.5px solid #ffffff30; font-size:16px; color:#fff; z-index:3; }

/* 11: CTA-tekst blijft op één regel naast de XP-pil (viel op 393px in twee regels) */
.an_cta span { white-space:nowrap; }
.an_cta:has(.price_tag) { font-size:18px; letter-spacing:1.5px; }

/* CLASSIC-tour (3 nov 2026): de dieren van één discipline op de coach-kaart
   (brons 1 · goud 4 · legend 8), namen in de disciplinekleur via .is-<disc> */
/* op HOOGTE schalen, niet op breedte: de legend-badge (level 8) heeft kroon
   en lauwerkrans in een bredere canvas (208×244 vs 174×244), dus op gelijke
   breedte kromp juist zijn schild — op gelijke hoogte staat hij minstens even
   groot en met de krans erbij groter (eigenaar, 3 nov 2026) */
.coach_art.coach_art_dieren { gap:10px; }
.coach_art.coach_art_dieren img { width:auto; height:104px; }
.coach_art.coach_art_dieren span { color:var(--dk); font-family:headers; font-size:11px; letter-spacing:1px; }

/* Classic-weekbord (3 nov 2026): de dierenbadge van de weekscore in de score-pil
   i.p.v. de trofee, en de rijen blijven rechts vrij van de zwevende knoppenrail
   (.sideBoxes, 50px aan de rechterrand) */
.dashboard_section__rank.rank_classic { padding-right:62px; }
.dashboard_section__principal img.an_rank_dier { width:auto !important; height:50px !important; right:-4px; top:50%; transform:translateY(-50%); filter:drop-shadow(0 2px 3px #000000cc); }
.dashboard_section__principal img.an_rank_dier.is-geen { height:30px !important; right:4px; opacity:.6; }

/* missie-drawer: speelfeiten (raster · kleuren · moeilijkheid) als chips boven TO WIN (3 nov 2026) */
.an_ms_feiten { display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 2px; }
.an_ms_feiten span { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:12px; background:#00000059; border:1px solid #ffffff24; font-family:headers; font-size:11px; letter-spacing:1px; color:#ffffffd9; }
.an_ms_feiten span svg { width:15px; height:15px; flex:none; color:#ffffffb8; }
.an_ms_feiten span.is-moeilijkheid { color:var(--dk); border-color:color-mix(in srgb, var(--dk) 45%, transparent); }

/* ── COLLECTIE IN TWEE SETS (4 nov 2026) ─────────────────────────────────
   De 24 classic-dieren (alleen via Classic) en de 36 campaign-dieren (alleen
   via de missies, level 1-8 + special 1-4) staan achter een set-schakelaar
   boven de disciplinekaarten — hetzelfde recept als de tabs van de
   missie-drawer, maar neutraal wit: de set is geen discipline. */
.an_col_sets { flex:none; display:flex; flex-direction:row; gap:6px; padding:4px; margin:0 0 12px; border-radius:14px; background:#00000080; border:1px solid #ffffff1f; }
.an_col_set { flex:1; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; height:38px; border:0; border-radius:11px; background:transparent; color:#ffffffa6; font-family:headers; font-size:14px; letter-spacing:1px; cursor:pointer; }
.an_col_set i { font-style:normal; font-family:font3; letter-spacing:0; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:#ffffff1f; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.an_col_set.an_actief { background:#fff; color:#0b0318; }
.an_col_set.an_actief i { background:#0b031833; }
.an_col_uitleg { display:block; font-size:13px; line-height:18px; color:#ffffff99; text-align:center; padding:0 10px 2px; }
/* legenda: 4 tiers (classic) of 5 (campaign, + SPECIAL) */
.an_col_tiers_campaign { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; padding:10px 6px; }
.an_col_tiers_campaign b { font-size:12px; }
.an_col_tiers_campaign small { font-size:12px; }
/* special-badges (gem-kronen) dragen hun naam in de special-kleur van de legenda */
.an_col_dier.an_special span { color:#5ee6ff; }
.an_col_dier.an_locked.an_special span { color:#5ee6ff80; }
/* één lang woord als naam (PRONGHORN, CATERPILLAR, HAMMERHEAD…): kleiner i.p.v. midden in het woord breken */
.an_lade_naam_lang { font-size:22px; }

/* ══ 1d · COMMANDER TAKEOVER (design/Taalkeuzescherm met inhaalmanoeuvrescherm, nov 2026) ══
   Het scherm achter 07 als de run het commando overnam van een vriend. De troon
   en de trofee blijven staan, de twee spelers wisselen (.an-gewisseld). Gebouwd
   uit de delen van 07 (chip, stralen, CTA, AGAIN / MAP) en het commandantblok
   van de RESULTS-tab. De cijfers en de ring staan in de kleur van de
   discipline (--dk); goud is van de commandant (trofee, pil) en van de CTA. */
.an_ov_kolom { gap:0; padding:calc(env(safe-area-inset-top) + 14px) 22px calc(env(safe-area-inset-bottom) + 22px); overflow:hidden; }
.an_ov_kolom > .an_top { flex:none; position:relative; z-index:3; }
.an_ov_stralen { top:calc(env(safe-area-inset-top) + 250px); width:640px; height:640px; margin-left:-320px; margin-top:-320px; -webkit-mask:radial-gradient(circle, #000 12%, transparent 74%); mask:radial-gradient(circle, #000 12%, transparent 74%); }
.an_ov_body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:0 -22px; padding:0 22px; }
.an_ov_body::-webkit-scrollbar { display:none; }
.an_ov_toneel { position:relative; flex:none; height:252px; margin-top:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; outline:0; }
.an_ov_toneel:focus-visible { outline:2px solid #ffffff80; outline-offset:2px; border-radius:16px; }
/* de schijf is van de houder (rand, avatar-blauw, ring): ontbreekt het plaatje, dan
   staat er nog steeds een speler en geen gat */
.an_ov_av
{
	position:absolute; left:50%; top:26px; width:132px; height:132px; margin-left:-66px; display:block;
	border-radius:50%; border:5px solid #000; box-sizing:border-box; background:#65C9FF; overflow:hidden;
	box-shadow:0 0 0 4px var(--dk, #f5c542), 0 10px 24px #000000aa;
}
.an_ov_av img { display:block; width:100%; height:100%; object-fit:cover; }
/* vóór de wissel: de vriend op de troon, jij klein rechts-onder */
.an_ov_vriend { z-index:1; transform:translate(0, 0) scale(1); filter:none; transition:transform .7s cubic-bezier(.5, 0, .2, 1), filter .7s ease, box-shadow .7s ease; }
.an_ov_jij { z-index:2; transform:translate(118px, 84px) scale(.5); transition:transform .7s cubic-bezier(.3, 1.5, .4, 1); }
.an_ov_trofee
{
	position:absolute; left:50%; top:118px; margin-left:26px; width:46px; height:46px; border-radius:50%; background:var(--an-gold); border:4px solid #000; box-sizing:border-box;
	display:flex; align-items:center; justify-content:center; z-index:3; transform:scale(.8); transition:transform .45s cubic-bezier(.2, 1.6, .4, 1) .55s;
}
.an_ov_trofee svg { width:24px; height:24px; fill:var(--an-gold-ink); }
.an_ov_tweede { position:absolute; left:3px; top:224px; width:108px; text-align:center; opacity:0; transition:opacity .4s ease .5s; display:block; }
.an_ov_tweede b { display:block; font-family:headers; font-weight:normal; font-size:13px; letter-spacing:.5px; color:#ffffffa6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_ov_tweede small { display:block; font-size:12px; color:#ffffff80; }
.an_ov_pil { position:absolute; left:0; right:0; top:176px; display:flex; justify-content:center; opacity:0; transition:opacity .4s ease .7s; z-index:3; }
.an_ov_pil i
{
	height:24px; display:inline-flex; align-items:center; padding:0 10px; border:2px solid #000; border-radius:12px; font-style:normal;
	font-family:headers; font-size:12px; letter-spacing:1.5px; white-space:nowrap; background:var(--an-gold); color:var(--an-gold-ink);
}
.an_ov_tik { position:absolute; right:0; top:6px; font-size:12px; color:#ffffff73; }
/* ná de wissel */
.an_overname.an-gewisseld .an_ov_vriend { transform:translate(-118px, 84px) scale(.5); filter:grayscale(1) brightness(.6); box-shadow:0 0 0 4px #ffffff40, 0 10px 24px #000000aa; }
.an_overname.an-gewisseld .an_ov_jij { transform:translate(0, 0) scale(1); }
.an_overname.an-gewisseld .an_ov_trofee { transform:scale(1); }
.an_overname.an-gewisseld .an_ov_tweede, .an_overname.an-gewisseld .an_ov_pil { opacity:1; }
.an_ov_kop { flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:6px; position:relative; }
.an_ov_titel { font-family:headers; font-size:29px; letter-spacing:1px; text-shadow:0 4px 0 #000, 0 0 26px #ffc10766; text-align:center; text-wrap:balance; }
.an_ov_zin { font-size:14px; line-height:19px; color:#ffffffcc; text-align:center; text-wrap:pretty; }
.an_ov_scores
{
	flex:none; margin-top:16px; display:flex; align-items:stretch; gap:8px; padding:12px; border-radius:18px; background:#00000080;
	border:1px solid color-mix(in srgb, var(--dk, #f5c542) 45%, transparent);
}
.an_ov_score { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.an_ov_score > span { font-size:12px; letter-spacing:1.5px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_ov_score b { font-family:headers; font-weight:normal; font-size:30px; line-height:1; text-shadow:0 3px 0 #000; white-space:nowrap; }
.an_ov_score small { font-size:13px; white-space:nowrap; }
.an_ov_score.is-jij > span { color:var(--dk, #f5c542); }
.an_ov_score.is-jij b { color:var(--dk, #f5c542); }
.an_ov_score.is-jij small { color:#ffffffb3; }
.an_ov_score.is-vriend > span { color:#ffffff99; }
.an_ov_score.is-vriend b { color:#ffffff73; }
.an_ov_score.is-vriend small { color:#ffffff80; }
/* speed (412,50 ms) en awareness (98,4%) zijn breder dan een focus-score */
.an_overname.is-speed .an_ov_score b, .an_overname.is-awareness .an_ov_score b { font-size:24px; }
.an_ov_midden { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.an_ov_midden img { width:34px; height:34px; filter:drop-shadow(0 2px 0 #000); }
.an_ov_midden span
{
	height:20px; display:inline-flex; align-items:center; padding:0 7px; border-radius:10px; white-space:nowrap;
	background:color-mix(in srgb, var(--dk, #f5c542) 15%, transparent); border:1px solid color-mix(in srgb, var(--dk, #f5c542) 50%, transparent);
	font-family:headers; font-size:11px; letter-spacing:.5px; color:var(--dk, #f5c542);
}
.an_ov_voet { flex:none; display:flex; flex-direction:column; gap:10px; padding-top:12px; }
.an_ov_voet .an_deel_slot { width:auto; margin-top:0; }
.an_ov_voet .an_mc_acties { margin-top:0; }
@media (prefers-reduced-motion: reduce)
{
	.an_ov_vriend, .an_ov_jij, .an_ov_trofee, .an_ov_tweede, .an_ov_pil { transition:none; }
}
/* 1e: SEND TO <vriend> IN CHAT in de deellade (geen beloning, dus geen pil) */
.an_deel_chat .an_knop svg { width:16px; height:16px; }
.an_deel_chat .an_knop[disabled] { cursor:default; }
.an_deel_chat.is-verstuurd .an_knop { color:#ffffff99; }

/* ══ SHARE & EARN (design/Social-share button met dierenbadges, 8 nov 2026) ══
   Een nieuw dier delen vanaf scherm 11 (classic) en 17 (campaign): de knop
   onder de naam, de deellade met de kant-en-klare afbeelding (post 4:5 /
   story 9:16) en de beloning: de eerste keer per badge diamanten (server:
   Animals/shareReward). Meerdere dieren = goud, zoals de waaier op scherm 11. */
.is-goud { --dk: var(--an-gold); --dk-dark: #a35f00; --dk-tint: #3a2400; --dk-light: #ffe694; }
.an_sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* de knop: paars (.btn-purple-familie) met de beloning in de app-brede
   .price_tag-pil (CLAUDE.md §6); bezig = OPENING…; verdiend = SHARE AGAIN */
.an_deel_rand { display:flex; border:4px solid #000; border-radius:17px; box-shadow:0 0 24px #b04dff66; }
.an_deel_rand.is-bezig { box-shadow:none; }
.an_deel_rand.is-verdiend { border-radius:16px; box-shadow:none; }
.an_deel
{
	position:relative; flex:1; min-width:0; height:52px; padding:0 14px; border:3px solid #d2a6ff; border-radius:13px; box-sizing:border-box;
	background:linear-gradient(0deg, #673AB7, #9C27B0); box-shadow:inset 0 -4px #3f1e7a; overflow:hidden; cursor:pointer;
	display:flex; align-items:center; justify-content:center; gap:12px;
	color:#fff; font-family:headers; font-size:19px; letter-spacing:1.5px; text-shadow:0 2px #000; -webkit-tap-highlight-color:transparent;
}
.an_deel:active { transform:translateY(2px); }
.an_deel:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.an_deel_glans { position:absolute; top:3px; left:3px; right:3px; height:40%; background:#fff; opacity:.2; border-radius:8px; pointer-events:none; }
.an_deel svg { position:relative; flex:none; width:20px; height:20px; filter:drop-shadow(0 2px 0 #000); }
.an_deel_tekst { position:relative; flex:none; white-space:nowrap; font-family:headers; }
.an_deel .price_tag { position:relative; flex:none; margin:0; height:32px; box-sizing:border-box; padding:0 9px 0 31px; font-size:21px !important; letter-spacing:0; text-shadow:none; }
.an_deel.is-bezig { opacity:.75; cursor:default; }
.an_deel.is-bezig:active { transform:none; }
.an_deel.is-verdiend
{
	height:50px; padding:0 12px; gap:10px; border:2px solid #ffffff2b; border-radius:12px; background:var(--an-night); box-shadow:none;
	font-size:16px; letter-spacing:1px; color:#ffffffd0; text-shadow:none;
}
.an_deel.is-verdiend svg { width:17px; height:17px; filter:none; }
.an_deel_verdiend
{
	flex:none; height:24px; display:inline-flex; align-items:center; gap:5px; padding:0 8px 0 5px; border-radius:12px; box-sizing:border-box;
	background:#ffc1071f; border:1px solid var(--an-gold); font-family:headers; font-size:11px; letter-spacing:1px; color:var(--an-gold); white-space:nowrap;
}
.an_deel_verdiend img { width:16px; height:14px; object-fit:contain; }

/* plaats op scherm 11: direct onder de naam (304 breed); de held krijgt een
   automatische hoogte zodra de knop er staat — GOOD JOB! houdt zijn 262 px */
.an_held.an_held_deel { height:auto; padding-bottom:4px; }
.an_deel_slot { position:relative; z-index:2; width:304px; max-width:100%; margin-top:14px; display:flex; flex-direction:column; flex:none; }
.an_classic .an_deel_slot { animation:an_rij_in .45s cubic-bezier(.2,.9,.3,1) .38s both; }
/* scherm 17: tussen de naam en de rest, fadet mee in fase 2 (en tikt pas dan) */
.an_ac_deel { margin-top:4px; opacity:0; pointer-events:none; transition:opacity .4s .3s; animation:none; }
.an_scherm.an-fase2 .an_ac_deel { opacity:1; pointer-events:auto; }
.an_ac_deel + .an_ac_rest { margin-top:8px; }
/* 11 en 17: kop en voet staan vast, alleen het middenstuk scrolt (eigenaar,
   8 nov 2026: met een sticky voet schoof de inhoud erachter door en kwam
   eronder weer tevoorschijn). Zelfde recept als scherm 07 en de missie-drawer. */
.an_cl_kolom, .an_ac_kolom { overflow:hidden; }
/* 11: de stralen van de held op de achtergrondlaag, gecentreerd op de badge
   (kolom-padding + kop + 96 px in de held); ze lopen tot de schermrand en
   vervagen daar in hun eigen masker i.p.v. recht afgeknipt door het middenstuk */
.an_cl_stralen { top:calc(env(safe-area-inset-top) + 196px); width:460px; height:460px; margin-left:-230px; margin-top:-230px; }
.an_cl_stralen_waaier { top:calc(env(safe-area-inset-top) + 210px); width:480px; height:480px; margin-left:-240px; margin-top:-240px; }
/* zelfde recept als .an_mc_body (07): de body begint 28px hoger met een masker
   van transparant naar dekkend, zodat de gloed van de held (17: drop-shadow 26px
   in de disciplinekleur op .an_ac_badge) niet recht op de bovenrand afbreekt */
.an_cl_body, .an_ac_body
{
	flex:1 1 auto; min-height:0; align-self:stretch; display:flex; flex-direction:column; gap:12px;
	overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:-28px -20px 0; padding:28px 20px 8px; overscroll-behavior:contain;
	-webkit-mask-image:linear-gradient(#0000, #000 28px); mask-image:linear-gradient(#0000, #000 28px);
}
.an_cl_body::-webkit-scrollbar, .an_ac_body::-webkit-scrollbar { display:none; }
.an_cl_kolom > .an_top, .an_ac_kolom > .an_top { position:relative; z-index:3; }
.an_ac_body { align-items:center; }
.an_classic .an_kolom > .an_voet { margin-top:0; padding-top:10px; }
/* 17: CLAIM met daaronder de collectielink, samen in de vaste voet */
.an_unlocked .an_ac_voet { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:10px; }
.an_unlocked .an_ac_voet .an_cta_rand { align-self:stretch; }
.an_unlocked .an_ac_link { margin-top:0; }
.an_rij_kop .an_rij_waarde, .an_rij_xp { flex:none; white-space:nowrap; }

/* de deellade (Share Sheet.dc.html) op het .an_lade-vel */
.an_deel_body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; display:flex; flex-direction:column; gap:12px; padding:6px 16px calc(env(safe-area-inset-bottom) + 22px); }
.an_deel_body::-webkit-scrollbar { display:none; }
.an_deel_kop { flex:none; display:flex; align-items:flex-start; gap:12px; }
.an_deel_kop > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left; }
.an_deel_kop b { font-family:headers; font-weight:normal; font-size:24px; letter-spacing:1px; line-height:1.1; text-shadow:0 3px #000; color:#fff; overflow-wrap:anywhere; }
.an_deel_kop span { font-family:p; font-size:14px; color:#ffffffb3; }
.an_formaat { flex:none; display:flex; padding:4px; border-radius:24px; background:#1d0f30; border:1px solid #ffffff14; }
.an_formaat button { flex:1; height:38px; border:0; border-radius:20px; background:none; cursor:pointer; font-family:headers; font-size:13px; letter-spacing:.5px; color:#d9c9f5; -webkit-tap-highlight-color:transparent; }
.an_formaat button.is-aan { background:var(--dk); color:var(--an-night); box-shadow:inset 0 -3px #00000059, inset 0 2px #ffffff59; }
.an_formaat button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.an_deel_voorbeeld { flex:none; height:292px; display:flex; align-items:center; justify-content:center; }
.an_deel_doek { position:relative; height:286px; overflow:hidden; border:3px solid #000; border-radius:14px; box-shadow:0 12px 30px #000000aa; background:var(--an-night); }
.an_deel_doek.is-post { width:229px; }
.an_deel_doek.is-story { width:161px; }
.an_deel_doek img { display:block; width:100%; height:100%; object-fit:cover; }
.an_deel_doek.is-laden { display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, var(--dk-tint, #2a0650), var(--an-night)); }
.an_deel_laden { display:flex; gap:6px; }
.an_deel_laden i { width:8px; height:8px; border-radius:50%; background:#ffffffb5; animation:an_pulse 1.1s ease-in-out infinite; }
.an_deel_laden i:nth-child(2) { animation-delay:.18s; }
.an_deel_laden i:nth-child(3) { animation-delay:.36s; }
.an_deel_beloning { flex:none; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:16px; background:#00000066; border:1px solid #ffc10766; text-align:left; }
.an_deel_beloning.is-verdiend { border-color:#ffffff1f; }
.an_deel_beloning > img { flex:none; width:34px; height:auto; filter:drop-shadow(0 3px 0 #000); }
.an_deel_beloning > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.an_deel_beloning b { font-family:headers; font-weight:normal; font-size:15px; letter-spacing:.5px; color:#fff; }
.an_deel_beloning small { font-family:p; font-size:13px; line-height:17px; color:#ffffffb3; text-wrap:pretty; }
.an_deel_body > .an_deel_rand { flex:none; }
.an_deel_bewaar .an_knop { height:48px; }
.an_deel_bewaar .an_knop span { font-family:headers; }
/* na de eerste keer delen: de diamant op gouden stralen, AWESOME sluit */
.an_deel_klaar { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 20px calc(env(safe-area-inset-bottom) + 26px); text-align:center; }
.an_deel_klaar_beeld { position:relative; width:180px; height:150px; display:flex; align-items:center; justify-content:center; }
.an_deel_klaar_stralen
{
	position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; pointer-events:none;
	background:repeating-conic-gradient(#ffc10726 0 9deg, transparent 9deg 18deg); animation:an_spin 50s linear infinite;
	-webkit-mask:radial-gradient(circle, #000 14%, transparent 64%); mask:radial-gradient(circle, #000 14%, transparent 64%);
}
.an_deel_klaar_beeld img { position:relative; width:118px; height:auto; filter:drop-shadow(0 8px 0 #000) drop-shadow(0 0 26px #b04dffaa); animation:an_pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.an_deel_klaar > b { font-family:headers; font-weight:normal; font-size:34px; letter-spacing:2px; line-height:1; color:var(--an-gold); text-shadow:0 3px #000; }
.an_deel_klaar > span { font-family:p; font-size:16px; line-height:22px; color:#ffffffcc; max-width:280px; text-wrap:pretty; }
.an_deel_klaar .an_cta_rand { align-self:stretch; margin-top:8px; }
.an_deel_klaar .an_cta:focus-visible { outline:3px solid #fff; outline-offset:5px; }
/* bestaande overloop op scherm 11 (gezien bij SHARE & EARN): CLAIM & CONTINUE
   met de XP-pil was 303 px breed in 283 px naast het schild en stak 8 px buiten
   het scherm. De CTA mag krimpen en zijn tekst wordt een tikje kleiner. */
.an_voet .an_cta_rand { min-width:0; }
.an_voet .an_cta:has(.price_tag) { font-size:16px; letter-spacing:1px; }

/* ═══ MAGIC OBJECTIVE (design/Magic Objective chain reactions, nov 2026) ═══
   Magie-paars #9a00ff (primair) · #c05fff (rand/gloed, = de paarse rand van de
   HUD) · #5d009c · #7a00d6 · lichte tekst #e7c4ff · nacht #2a0a4e/#14062a.
   Disciplinekleuren alleen via --dk; goud alleen voor beloning en CTA. De
   moeilijkheidschip is géén discipline en draagt daarom oranje, niet het
   focus-goud uit het ontwerp (CLAUDE.md §2). */
:root { --mg: #9a00ff; --mg-rand: #c05fff; --mg-donker: #5d009c; --mg-diep: #7a00d6; --mg-licht: #e7c4ff; --mg-nacht: #2a0a4e; --mg-nacht2: #14062a; --mg-moeilijk: #ff9f43; }
@keyframes an_up    { from { transform:translateY(18px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes an_popin { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes an_fill  { from { transform:scaleX(0); opacity:.4; } to { transform:scaleX(1); opacity:1; } }
.an_up { animation:an_up .52s cubic-bezier(.2,.9,.3,1) both; }
.an_popin { animation:an_popin .52s cubic-bezier(.2,1.4,.4,1) both; }

/* 16 · chips boven de tabs: raster · kleuren · magic · moeilijkheid — één rij, nooit wrappen, past in 358px.
   Geen negatieve bovenmarge: de rij staat bovenaan het scrollende middenstuk en
   de overflow knipte dan de bovenrand van de chips af (eigenaar, 8 nov 2026) */
.bottom_drawer .an_lade_vel .an_ms_chips { display:flex; flex-direction:row; flex-wrap:nowrap; gap:4px; margin-top:0; min-width:0; }
.an_ms_chip { flex:none; display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 7px 0 5px; border-radius:13px; background:#00000059; border:1px solid #ffffff24; font-family:headers; font-size:11px; letter-spacing:.6px; color:#ffffffd9; white-space:nowrap; box-sizing:border-box; }
.an_ms_chip svg { width:13px; height:13px; flex:none; color:#ffffffb8; }
.an_ms_chip.is-kleuren svg { width:15px; height:15px; }
.an_ms_chip i { font-style:normal; color:#ffffff80; }
.an_ms_chip.is-magie { color:var(--mg-licht); border-color:#9a00ff8c; }
.an_ms_chip.is-magie img { width:16px; height:16px; margin:-2px -1px; }
/* de moeilijkheid kleurt van groen naar rood (eigenaar, 8 nov 2026): EASY groen,
   NORMAL limoen, HARD oranje, EXPERT oranjerood, INSANE rood — geen goud/geel
   (beloning resp. focus) */
.an_ms_chip.is-moeilijk { color:var(--mg-moeilijk); border-color:color-mix(in srgb, var(--mg-moeilijk) 55%, transparent); }
.an_ms_chip.is-moeilijk[data-graad="easy"]   { --mg-moeilijk:#5ce08a; }
.an_ms_chip.is-moeilijk[data-graad="normal"] { --mg-moeilijk:#b8e05c; }
.an_ms_chip.is-moeilijk[data-graad="hard"]   { --mg-moeilijk:#ff9f43; }
.an_ms_chip.is-moeilijk[data-graad="expert"] { --mg-moeilijk:#ff6b3d; }
.an_ms_chip.is-moeilijk[data-graad="insane"] { --mg-moeilijk:#ff3b3b; }
.an_ms_balkjes { display:flex; align-items:flex-end; gap:1.5px; height:12px; }
.an_ms_balkjes i { width:3px; border-radius:1px; background:#ffffff33; }
.an_ms_balkjes i.an_aan { background:var(--mg-moeilijk); }
/* "?" van de rondleiding, links van het kruis in de drawerkop */
.an_ms_kop .an_ms_help { flex:none; align-self:flex-start; margin-top:8px; }
.an_ms_kop .an_ms_help .tutorial_help { margin:0; }

/* 16 · stap 1: het magic objective (de basisvereiste) */
.an_ms_magic_blok { display:flex; flex-direction:column; gap:12px; }
.an_ms_stap > span:first-child { display:inline-flex; align-items:center; gap:8px; }
.an_ms_stapnr { width:20px; height:20px; border-radius:10px; background:#ffffff1f; border:2px solid #000; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; color:#fff; box-sizing:border-box; font-family:headers; }
.an_ms_stapnr_magie { background:var(--mg); }
.an_ms_magic_kop span:first-child { color:var(--mg-licht); }
.an_ms_vereist { height:22px; display:inline-flex; align-items:center; padding:0 8px; border-radius:11px; background:var(--mg); border:2px solid #000; font-family:headers; font-size:11px; letter-spacing:1px; color:#fff; box-sizing:border-box; white-space:nowrap; }
.an_ms_magic
{
	display:flex; flex-direction:column; gap:9px; padding:9px 10px 10px 8px; border-radius:14px; border:2px solid var(--mg);
	background:linear-gradient(90deg, #9a00ff3d, #5d009c24 60%, #00000040); box-shadow:inset 0 2px 0 #ffffff1f, 0 0 14px #9a00ff33;
}
.an_ms_magic.an_ok { border-color:var(--mg-rand); box-shadow:inset 0 2px 0 #ffffff1f, 0 0 18px #c05fff66; }
.bottom_drawer .an_lade_vel .an_ms_magic_rij { display:flex; flex-direction:row; align-items:center; gap:8px; }
.an_ms_magic_keten { flex:none; display:flex; align-items:center; gap:2px; }
.an_ms_magic_keten img { filter:drop-shadow(0 2px 0 #000); }
.an_ms_magic_tekst { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.an_ms_magic_tekst b { font-family:headers; font-size:16px; font-weight:normal; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.an_ms_magic_tag { height:16px; display:inline-flex; align-items:center; padding:0 5px; border-radius:8px; background:#ffffff1f; border:1.5px solid #000; font-size:9px; letter-spacing:.4px; color:var(--mg-licht); }
.an_ms_magic_tekst small { font-size:13px; color:var(--mg-licht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bottom_drawer .an_lade_vel .an_ms_magic_rew { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.an_ms_magic_rew span { display:inline-flex; align-items:center; gap:2px; font-family:headers; font-size:13px; white-space:nowrap; }
.an_ms_magic_rew span img { width:18px; height:18px; object-fit:contain; }
.an_ms_magic_rew .an_goud { color:var(--an-link); }
.an_ms_magic_rew .an_xp { color:#c9b6ff; }
.an_ms_pips { flex:1; display:flex; gap:4px; }
.an_ms_pips i { flex:1; height:8px; border-radius:4px; background:#ffffff1a; border:1.5px solid #000; box-sizing:border-box; }
.an_ms_pips i.an_aan { background:var(--mg-rand); box-shadow:0 0 8px #c05fff; }
.an_ms_magic_pips small { font-size:12px; color:#ffffff99; white-space:nowrap; }
.an_ms_magic_link { display:flex; align-items:center; gap:8px; margin:-4px 0 -2px 18px; font-size:12px; color:var(--mg-licht); }
.an_ms_magic_link > i { width:2px; height:18px; background:linear-gradient(var(--mg), #9a00ff00); }
.an_ms_magic_link svg { width:13px; height:13px; }
.an_ms_magic_vink { color:var(--mg-rand); font-family:headers; }
/* badges op slot zolang de vereiste nog nooit gehaald is */
.an_ms_obj.an_slot { border:2px dashed #ffffff26; background:#00000066; }
.an_ms_obj.an_slot .an_ms_rew { opacity:.6; }
.an_ms_obj.an_slot .an_ms_tag { padding:0; width:26px; color:#ffffffb3; }
.an_ms_obj.an_slot .an_ms_tag svg { width:13px; height:13px; }

/* 07M · het magic objective van deze run (F4/F6, F9 bij meerdere) */
.an_mg_kolom { gap:14px; padding:calc(env(safe-area-inset-top) + 14px) 22px calc(env(safe-area-inset-bottom) + 22px); }
.an_mg_kolom > .an_top { flex:none; }
.an_mg_body { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:14px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; margin:0 -22px; padding:0 22px; }
.an_mg_body::-webkit-scrollbar { display:none; }
.an_mg_stralen { top:calc(env(safe-area-inset-top) + 290px); width:640px; height:640px; margin-left:-320px; margin-top:-320px; --an-straal:#c05fff26; animation-duration:45s; -webkit-mask:radial-gradient(circle, #000 15%, transparent 66%); mask:radial-gradient(circle, #000 15%, transparent 66%); }
.an_mg_pil { height:24px; display:inline-flex; align-items:center; padding:0 10px; border:2px solid #000; border-radius:12px; font-family:headers; font-size:12px; letter-spacing:1.5px; background:var(--mg); color:#fff; text-shadow:0 1px #000; margin-top:6px; white-space:nowrap; }
.an_mg_keten { display:flex; align-items:center; gap:6px; margin-top:8px; }
.an_mg_keten img { filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 22px #c05fff66); }
.an_mg_keten img.an_uit { filter:grayscale(1) brightness(.45) drop-shadow(0 6px 0 #000); }
.an_mg_titel { font-family:headers; font-size:34px; letter-spacing:2px; text-shadow:0 4px 0 #000, 0 0 26px #c05fff88; text-align:center; }
.an_mg_score { display:flex; align-items:baseline; gap:8px; }
.an_mg_score b { font-family:headers; font-size:44px; line-height:1; text-shadow:0 4px 0 #000; font-weight:normal; }
.an_mg_score span { font-size:15px; color:#ffffffb3; }
.an_mg_pips { align-self:stretch; display:flex; gap:6px; padding:0 10px; }
.an_mg_pips i { flex:1; height:14px; border-radius:7px; border:3px solid #000; background:#00000099; box-sizing:border-box; transform-origin:left center; animation:an_fill .42s cubic-bezier(.3,1.3,.5,1) both; }
.an_mg_pips i.an_aan { background:linear-gradient(0deg, #7a00d6, #c05fff); box-shadow:inset 0 2px 0 #ffffff66, 0 0 12px #c05fff88; }
.an_mg_kaart { align-self:stretch; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:#00000080; border:1px solid #ffffff1f; }
.an_mg_kaart.an_ok { border-color:color-mix(in srgb, var(--dk) 45%, transparent); }
.an_mg_kaart_iconen { flex:none; position:relative; width:64px; height:52px; }
.an_mg_kaart_iconen img { position:absolute; filter:drop-shadow(0 2px 0 #000); }
.an_mg_kaart_iconen img:first-child { left:0; top:8px; width:40px; height:40px; }
.an_mg_kaart_iconen img:nth-child(2) { left:22px; top:0; width:44px; height:44px; }
.an_mg_kaart.an_slot .an_mg_kaart_iconen img { filter:grayscale(.85) brightness(.6) drop-shadow(0 2px 0 #000); }
.an_mg_kaart_slot { position:absolute; right:-6px; bottom:-2px; width:24px; height:24px; border-radius:12px; background:var(--dk); border:2px solid #000; display:flex; align-items:center; justify-content:center; color:#0b0318; box-sizing:border-box; }
.an_mg_kaart.an_slot .an_mg_kaart_slot { background:#2a2433; color:#ffffffb3; }
.an_mg_kaart_slot svg { width:12px; height:12px; }
/* alleen de tekstkolom rekt; de generieke `> div` raakte ook de iconenkolom (64 px) en trok het hangslot naast de tekst */
.an_mg_kaart > .an_mg_kaart_tekst { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.an_mg_kaart b { font-family:headers; font-size:16px; letter-spacing:.5px; font-weight:normal; color:#fff; }
.an_mg_kaart.an_ok b { color:var(--dk); }
.an_mg_kaart small { font-size:14px; line-height:19px; color:#ffffffc0; text-wrap:pretty; }
.an_mg_voet { flex:none; }
/* meerdere objectives: rijen (F9) */
.an_mg_rijen { align-self:stretch; display:flex; flex-direction:column; gap:10px; }
.an_mg_rij { display:flex; align-items:center; gap:10px; min-height:72px; padding:8px 10px 8px 8px; box-sizing:border-box; border-radius:16px; border:2px solid #ffffff1a; background:#00000066; }
.an_mg_rij.an_ok { border-color:var(--mg); background:linear-gradient(90deg, #9a00ff40, #5d009c24 60%, #00000040); }
.an_mg_rij_keten { flex:none; width:84px; display:flex; align-items:center; justify-content:center; }
.an_mg_rij_keten img { margin:0 -4px; filter:drop-shadow(0 2px 0 #000); }
.an_mg_rij_keten img.an_uit { filter:grayscale(1) brightness(.5) drop-shadow(0 2px 0 #000); }
.an_mg_rij_mid { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.an_mg_rij_kop { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.an_mg_rij_kop > span:first-child { display:inline-flex; align-items:center; gap:6px; }
.an_mg_rij_kop b { font-family:headers; font-size:16px; font-weight:normal; white-space:nowrap; }
.an_mg_vereist { height:18px; display:inline-flex; align-items:center; padding:0 6px; border-radius:9px; background:var(--mg); border:1.5px solid #000; font-family:headers; font-size:9px; letter-spacing:.4px; white-space:nowrap; color:#fff; }
.an_mg_rij_rew { display:flex; gap:5px; font-family:headers; font-size:12px; white-space:nowrap; }
.an_mg_rij_rew.an_uit { opacity:.35; }
.an_mg_rij_rew span { display:inline-flex; align-items:center; gap:2px; }
.an_mg_rij_rew img { width:16px; height:16px; object-fit:contain; }
.an_mg_rij_rew .an_goud { color:var(--an-link); }
.an_mg_rij_rew .an_xp { color:#c9b6ff; }
.an_mg_rij_pips { display:flex; gap:4px; }
.an_mg_rij_pips i { flex:1; height:8px; border-radius:4px; border:1.5px solid #000; background:#ffffff1a; box-sizing:border-box; transform-origin:left center; animation:an_fill .42s cubic-bezier(.3,1.3,.5,1) both; }
.an_mg_rij_pips i.an_aan { background:var(--mg-rand); box-shadow:0 0 8px #c05fff; }
.an_mg_rij_mid small { font-size:12px; color:var(--mg-licht); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an_mg_rij_tag { flex:none; width:30px; height:30px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; border-radius:15px; border:2px solid #ffffff33; background:#ffffff14; color:#ffffff80; font-family:headers; font-size:15px; }
.an_mg_rij.an_ok .an_mg_rij_tag { border-color:#000; background:var(--mg-rand); color:#0b0318; }

/* 07 · de magic-pil onder de score, en de variant op slot (F5/F7) */
.an_mc_magie
{
	margin-top:4px; height:28px; display:inline-flex; align-items:center; gap:6px; padding:0 10px 0 4px; border-radius:14px;
	background:#9a00ff33; border:1px solid var(--mg-rand); font-family:headers; font-size:12px; letter-spacing:1.5px; color:var(--mg-licht); white-space:nowrap;
	animation:an_popin .5s cubic-bezier(.2,1.4,.4,1) 1.1s both;
}
.an_mc_magie img { margin-right:-6px; filter:drop-shadow(0 2px 0 #000); }
.an_mc_magie img:last-of-type { margin-right:2px; }
.an_mc_magie img.an_uit { filter:grayscale(1) brightness(.5) drop-shadow(0 2px 0 #000); }
.an_mc_magie.an_uit { background:#00000066; border-color:#ffffff33; color:#ffffffb3; }
.an_mc_boog img.an_slotje { filter:grayscale(.85) brightness(.6) drop-shadow(0 5px 0 #000); }
.an_mc_slotje
{
	position:absolute; width:34px; height:34px; border-radius:17px; background:#2a2433; border:3px solid #000; box-sizing:border-box; z-index:3;
	display:flex; align-items:center; justify-content:center; color:#ffffffb3; animation:an_popin .5s cubic-bezier(.2,1.4,.4,1) .7s both;
}
.an_mc_slotje svg { width:14px; height:14px; }
.an_mc_slotje[data-i="0"] { left:84px; top:92px; }
.an_mc_slotje[data-i="1"] { left:190px; top:76px; }
.an_mc_slotje[data-i="2"] { left:268px; top:92px; }
/* de kettingiconen op de 07-kaart op slot: naast elkaar — de generieke .an_mc_geen > div (kolom, flex 1) stapelde ze */
.an_mc_geen > .an_mc_geen_keten { flex:none; flex-direction:row; display:flex; align-items:center; gap:2px; width:auto; }
.an_mc_geen_keten img { filter:drop-shadow(0 2px 0 #000); }
.an_mc_geen_keten img.an_uit { filter:grayscale(1) brightness(.5) drop-shadow(0 2px 0 #000); }
.an_mc_geen.an_mc_geen_magie b { color:var(--mg-licht); }
.an_mc_magie_noot { display:block; text-align:center; font-size:13px; color:var(--mg-licht); margin:-8px 0 10px; }

/* in-game · de magic-strip tussen de gameheader en YOUR OBJECTIVES (F3, F8) */
.mg_strip_houder { display:none; }
body.campaignmode .mg_strip_houder.is-aan { display:block; margin:0 12px 26px; position:relative; z-index:2222; }
.mg_strip { position:relative; background:#000; border-radius:8px; padding:2px; }
.mg_strip__in
{
	position:relative; display:flex; align-items:center; gap:8px; height:46px; padding:0 10px; box-sizing:border-box; border-radius:6px;
	border:1px solid var(--mg-rand); background:linear-gradient(to bottom, var(--mg-nacht) 0%, var(--mg-nacht2) 100%); overflow:hidden; transition:box-shadow .3s;
}
.mg_strip.is-pop .mg_strip__in { box-shadow:0 0 12px #c05fff99; }
.mg_strip.is-klaar .mg_strip__in { box-shadow:0 0 18px #c05fff, inset 0 0 12px #c05fff55; }
.mg_strip__glans { position:absolute; left:3px; right:3px; top:3px; height:30%; background:#ffffff1a; border-radius:4px; pointer-events:none; }
.mg_strip__label { position:relative; font-family:headers; font-size:11px; letter-spacing:1.5px; color:var(--mg-licht); line-height:1.05; text-align:left; }
.mg_strip.is-klaar .mg_strip__label { color:#fff; }
.mg_strip__keten { position:relative; display:flex; align-items:center; gap:1px; }
.mg_strip__keten img { filter:drop-shadow(0 2px 0 #000); }
.mg_strip__rek { flex:1; }
.mg_strip__pips { position:relative; display:flex; gap:4px; }
.mg_strip__pips i { width:12px; height:12px; border-radius:4px; border:1.5px solid #000; box-sizing:border-box; background:#ffffff14; box-shadow:inset 0 2px 0 #000; transition:transform .3s cubic-bezier(.2,1.4,.4,1), background .2s; }
.mg_strip__pips i.is-aan { background:var(--mg-rand); box-shadow:0 0 8px #c05fff, inset 0 2px 0 #ffffff66; }
.mg_strip__pips i.is-pop { transform:scale(1.8); }
.mg_strip__teller { position:relative; display:inline-block; font-family:headers; font-size:18px; min-width:38px; text-align:right; text-shadow:0 2px #000; color:#fff; transition:transform .3s cubic-bezier(.2,1.4,.4,1); }
.mg_strip__teller.is-pop { transform:scale(1.35); }
.mg_strip__pop
{
	position:absolute; right:10px; top:-13px; height:22px; display:inline-flex; align-items:center; padding:0 9px; border-radius:11px; border:2px solid #000;
	background:#fff; color:var(--mg-donker); font-family:headers; font-size:12px; letter-spacing:1.5px; box-shadow:0 0 14px #c05fff; z-index:3; white-space:nowrap; pointer-events:none;
	opacity:0; transform:translateY(8px) rotate(4deg); transition:opacity .25s, transform .35s cubic-bezier(.2,1.4,.4,1);
}
.mg_strip__pop.is-aan { opacity:1; transform:translateY(0) rotate(4deg); }
.mg_strip--multi .mg_strip__pop { right:auto; left:50%; top:-14px; transform:translate(-50%, 8px); }
.mg_strip--multi .mg_strip__pop.is-aan { transform:translate(-50%, 0); }
.mg_strip__segs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; border-radius:6px; overflow:hidden; background:#000; }
.mg_strip[data-doelen="2"] .mg_strip__segs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.mg_strip__seg
{
	position:relative; height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-sizing:border-box;
	border:1px solid var(--mg-rand); border-radius:5px; background:linear-gradient(180deg, var(--mg-nacht), var(--mg-nacht2)); transition:background .3s, box-shadow .3s;
}
.mg_strip__seg.is-klaar { background:linear-gradient(180deg, var(--mg), var(--mg-donker)); }
.mg_strip__seg.is-pop { box-shadow:inset 0 0 14px #c05fff, 0 0 12px #c05fff; }
.mg_strip__seg_keten { display:flex; align-items:center; transition:transform .3s cubic-bezier(.2,1.4,.4,1); }
.mg_strip__seg.is-pop .mg_strip__seg_keten { transform:scale(1.12); }
.mg_strip__seg_keten img { margin:0 -2px; filter:drop-shadow(0 2px 0 #000); }
.mg_strip__seg .mg_strip__teller { font-size:14px; min-width:0; text-align:center; color:var(--mg-licht); line-height:1; }
.mg_strip__seg.is-klaar .mg_strip__teller { color:#fff; }
/* de animatielaag boven de HUD: boog, vonken, ring en de vliegende cubes */
.mg_laag { position:fixed; inset:0; z-index:3000; pointer-events:none; overflow:hidden; }
.mg_laag img, .mg_laag i, .mg_laag svg { position:absolute; left:0; top:0; pointer-events:none; display:block; }

/* twee soorten magic objective (eigenaar, 9 nov 2026): combo = één tik, volgorde vrij
   (plusteken, gevulde tag SAME TAP) · ketting = volgorde telt (chevron, omlijnde tag IN ORDER) —
   alles in de magie-paarse familie, nooit een disciplinekleur */
.an_mg_plus { flex:none; filter:drop-shadow(0 1px 0 #000); }
.an_mg_tag
{
	height:18px; display:inline-flex; align-items:center; gap:3px; padding:0 7px; border-radius:9px; border:1.5px solid #000; box-sizing:border-box;
	font-family:headers; font-size:10px; letter-spacing:.8px; white-space:nowrap; text-transform:none; vertical-align:middle;
}
.an_mg_tag svg { width:10px; height:10px; flex:none; }
.an_mg_tag_combo { background:var(--mg-licht); color:#3a0b5e; }
.an_mg_tag_chain { background:#00000066; border-color:var(--mg-rand); color:var(--mg-licht); }
.an_mg_tag_klein { height:16px; font-size:9px; padding:0 5px; letter-spacing:.5px; }
.an_ms_magic_pips > .an_mg_tag { flex:none; margin-right:2px; }
.an_mg_soort { margin-top:-2px; }
.an_mg_rij_kop > span:first-child .an_mg_tag { margin-left:2px; }
.mg_strip__in .an_mg_tag { position:relative; flex:none; }
@media (max-width:380px) { .mg_strip__in .an_mg_tag { display:none; } }

/* coach-art van de mission_magic- en mission_chain-rondleidingen */
.coach_art.coach_art_keten { gap:6px; align-items:center; flex-wrap:wrap; }
.coach_art_keten img { width:44px; }
.coach_art_pijl { display:inline-flex; color:var(--mg-licht); }
.coach_art_pijl svg { width:14px; height:14px; }
.coach_art_plus svg { width:16px; height:16px; }
.coach_art_is, .coach_art_slot { font-family:headers; font-size:12px; letter-spacing:1px; color:var(--mg-licht); text-transform:none; }
.coach_art.coach_art_ontstekers { gap:18px; align-items:flex-start; justify-content:center; }
.coach_art_ontstekers > div { display:flex; flex-direction:column; align-items:center; gap:4px; }
.coach_art_ontstekers img { width:44px; }
.coach_art_ontstekers span { font-family:headers; font-size:11px; letter-spacing:1px; color:var(--mg-licht); }
/* TWO KINDS, TWO TAGS (eigenaar, 9 nov 2026): de twee soorten naast elkaar, elk een
   kolom [cubes op een rij · tag · woord] met een dunne scheiding — de oude opzet
   stapelde alles onder elkaar (CubeRunnerz .coach_art > div zet flex-direction:column)
   en .coach_art span kleurde de SAME TAP-tag wit op lila */
.coach_art.coach_art_soorten { flex-direction:row; align-items:stretch; justify-content:center; gap:8px; padding:10px 4px 9px; }
.coach_art.coach_art_soorten > .coach_art_soort { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.coach_art_soort_rij { display:flex; align-items:center; justify-content:center; gap:3px; }
.coach_art_soorten .coach_art_soort_rij img { width:40px; }
.coach_art_soorten .coach_art_soort_rij .coach_art_pijl svg { width:14px; height:14px; }
.coach_art_soorten .coach_art_soort_rij .coach_art_plus svg { width:16px; height:16px; }
.coach_art_scheiding { flex:none; width:1px; align-self:stretch; margin:2px 0; background:#ffffff2e; }
.coach_art_soorten .an_mg_tag { height:22px; padding:0 9px; font-size:11px; letter-spacing:1px; }
.coach_art_soorten .an_mg_tag svg { width:11px; height:11px; }
.coach_art_soorten .an_mg_tag_combo { background:var(--mg-licht); color:#3a0b5e; }
.coach_art_soorten .an_mg_tag_chain { background:#00000066; color:var(--mg-licht); }
.coach_art_soorten .coach_art_woord { font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#ffffffa8; }
.coach_art_slot { display:inline-flex; align-items:center; gap:5px; line-height:1.1; text-align:left; }
.coach_art_slot svg { width:16px; height:16px; flex:none; }
.coach_art_disc img { width:46px; }
.coach_art_disc span { font-family:headers; font-size:10px; letter-spacing:1px; }
.coach_art.coach_art_dier { align-items:center; gap:10px; }
.coach_art_dier img { width:auto; height:64px; }
.coach_art_dier > div { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.coach_art_dier .coach_art_is { color:var(--dk, #FFC46B); }
.coach_art_balk { width:130px; height:10px; border-radius:5px; border:1.5px solid #000; background:#ffffff1a; overflow:hidden; box-sizing:border-box; }
.coach_art_balk i { display:block; height:100%; background:var(--dk, #FFC46B); }