/*
 * cubelegend-notify.css — de meldingen-shelf in de header (design/In game
 * notifications and toasters, turn 4a/4b) en het notificatiecentrum (4c).
 *
 * Laadt NA cubelegend-auth.css (knoppen) en cubelegend-personal.css (.pm_*):
 * de shelf-kaart hergebruikt het cut-out-recept van .cl-btn-frame en het
 * centrum leeft in een .pm_pop-vel. De accenttint per tier stuurt vier
 * variabelen (--nfb rand, --nfw putje, --nfbg achtergrond, --nft titel,
 * --nfa accent/balk); al het overige — frame, gloss, geometrie, gouden knop,
 * sluitvakje — is constant. Zie de tinttabel in notify-shelf.js.
 */

/* ---- 1. De shelf zelf ---------------------------------------------------
   De HEADER groeit: hij is border-box, dus hoogte + padding-bottom met
   dezelfde variabele laat de HUD exact op zijn plek staan terwijl de eigen
   gradient, outline en schaduw de hele hogere balk omvatten — één element,
   géén naad of dubbele rand tussen HUD en melding. De shelf is enkel het
   overflow-venster in die padding-zone waar de kaart in valt. */
header.nf-open, gameheader.nf-open
{
	height: calc(env(safe-area-inset-top) + 5rem + var(--nf-hoogte, 0px));
	padding-bottom: var(--nf-hoogte, 0px);
	/* open 340ms (notif-motion.jsx), dicht 550ms via .nf-dicht */
	transition: height .34s cubic-bezier(.645, .045, .355, 1), padding-bottom .34s cubic-bezier(.645, .045, .355, 1);
	/* één trede omhoog: de vellen (.top_overlayed, óók z-index 3) winnen
	   anders op DOM-volgorde en een melding boven een open menu bleef
	   onzichtbaar — precies het gedrag dat de oude topCenter-toast had */
	z-index: 4;
}
gameheader.nf-open { height: calc(env(safe-area-inset-top) + 4rem + var(--nf-hoogte, 0px)); }
header.nf-dicht, gameheader.nf-dicht { transition-duration: .55s, .55s; }
/* Adventure mode zet de header op background:none (CubeRunnerz .campaignmode
   header): zodra er een melding staat moet de paarse balk terug ondoorzichtig
   zijn — de kaart zweeft anders op de missiekaart. */
.campaignmode header.nf-open,
header.nf-open, gameheader.nf-open
{
	background: linear-gradient(1deg, rgba(88,0,147,1) 0%, rgba(154,0,255,1) 100%);
	border-bottom: 1px solid #c05fff;
	outline: #460274 5px solid;
	box-shadow: 0 5px 5px #000;
}

/* Top-verankerd op de HUD-hoogte en bottom:0: het venster is dan altijd
   exact de (animerende) padding-zone en kan tijdens het openen nooit over
   de HUD uitsteken. */
.nf_shelf
{
	position: absolute;
	left: 0;
	right: 0;
	top: calc(env(safe-area-inset-top) + 5rem);
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}
gameheader .nf_shelf { top: calc(env(safe-area-inset-top) + 4rem); }
.nf_shelf.is-open
{
	pointer-events: auto;
	visibility: visible;
}

/* ---- 2. De kaart -------------------------------------------------------- */

.nf_kaart
{
	position: absolute;
	top: 9px;
	left: 8px;
	right: 8px;
	border: 4px solid #000;
	border-radius: 15px;
	transform: translateY(-89px);
}
/* Een uitglijdende kaart leeft nog 440ms in de DOM en zou anders de tikken
   voor zijn opvolger opvangen (de nieuwe komt er DOM-eerder achterlangs in). */
.nf_kaart[class*="is-weg"] { pointer-events: none; }
/* entry: 420ms met een ease-out-back-overshoot — hij duikt op van achter de
   onderrand van de header */
.nf_kaart.is-in
{
	transform: translateY(0);
	transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
}
/* queue advance: 380ms easeInCubic omhoog en weg */
.nf_kaart.is-weg-op
{
	transform: translateY(-89px);
	transition: transform .38s cubic-bezier(.55, .055, .675, .19);
}
/* dismiss: opzij en krimpen; opacity is klaar vóór de beweging (spec) */
.nf_kaart.is-weg-dismiss
{
	transform: translateX(46px) scale(.84);
	opacity: 0;
	transition: transform .34s cubic-bezier(.55, .055, .675, .19), opacity .3s cubic-bezier(.55, .055, .675, .19);
}
/* preempt: trager terug de wachtrij in — "gaat terug", niet "vertrekt" */
.nf_kaart.is-weg-terug
{
	transform: translateY(-89px) scale(.94);
	transition: transform .5s cubic-bezier(.645, .045, .355, 1);
}
/* swipe-commit: de vinger gaf hem al een voorsprong; JS zet de starttransform */
.nf_kaart.is-weg-swipe
{
	transform: translateY(-107px);
	opacity: 0;
	transition: transform .4s cubic-bezier(.55, .055, .675, .19), opacity .18s linear .22s;
}

.nf_kaart__binnen
{
	position: relative;
	overflow: hidden;
	border: 2px solid var(--nfb);
	border-radius: 11px;
	background: var(--nfbg);
	padding: 9px 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	/* content-box 38 + 18 padding + 4 + 8 randen = de 68px-kaart waar de
	   shelfhoogtes, de dots-offset en de -89px-transforms op rekenen */
	height: 38px;
}
.nf_kaart__gloss
{
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	height: 42%;
	border-radius: 8px;
	background: #fff;
	opacity: .1;
	pointer-events: none;
}
.nf_kaart--celebration .nf_kaart__gloss { opacity: .12; }

.nf_kaart__put
{
	position: relative;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #00000059;
	border: 1px solid var(--nfw);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nf_kaart__put img { width: 22px; height: 22px; object-fit: contain; }
.nf_kaart__avatar
{
	position: relative;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: #12042a;
}

.nf_kaart__tekst { position: relative; flex: 1; min-width: 0; text-align: left; }
.nf_kaart__titelrij { display: flex; align-items: center; gap: 6px; }
.nf_kaart__titel
{
	font-family: headers, sans-serif;
	font-size: 19px;
	letter-spacing: .5px;
	color: var(--nft);
	text-shadow: 0 1px black, 0 -1px black, 1px 0 black, -1px 0 black;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nf_kaart__chip
{
	flex: none;
	font-family: p, sans-serif;
	font-size: 8.5px;
	letter-spacing: 1px;
	padding: 2px 5px;
	border-radius: 4px;
	color: #1c0038;
	background: var(--nfa);
}
.nf_kaart__bericht
{
	font-family: p, sans-serif;
	font-size: 12.5px;
	line-height: 1.3;
	color: #ffffffcf;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* uitzondering (ACCOUNT LOCKED): twee regels, zodat het gemaskeerde
   resetadres leesbaar blijft vóór de geforceerde herlaad — de kaart groeit
   mee en zetHoogte() geeft de shelf er 18px bij */
.nf_kaart__bericht.is-lang
{
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.nf_kaart__binnen:has(.nf_kaart__bericht.is-lang) { height: auto; min-height: 38px; }
/* beloningsvariant: resource-chips in plaats van een zin over het bedrag */
.nf_kaart__chips { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.nf_kaart__chips span { display: inline-flex; align-items: center; gap: 4px; font-family: p, sans-serif; font-size: 12.5px; color: #ffffffdb; }
.nf_kaart__chips img { width: 15px; height: 15px; object-fit: contain; }

/* De actie is ALTIJD goud: goud betekent in dit spel "dit is de knop". */
.nf_kaart__actie
{
	position: relative;
	flex: none;
	border: 3px solid #ffe07a;
	border-radius: 10px;
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	padding: 8px 12px;
	overflow: hidden;
	cursor: pointer;
	font-family: headers, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	color: #3a1c00;
}
.nf_kaart__actie::before
{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 44%;
	border-radius: 5px;
	background: #fff;
	opacity: .32;
	pointer-events: none;
}
/* De tekst zit in een <span>, en die erfde font3 (Rheiborn) van een generieke
   span-regel elders — de font-family op de knop zelf raakte het element met de
   letters dus niet. Expliciet 'headers', hetzelfde als de DUEL-knop. */
.nf_kaart__actie span
{
	position: relative;
	font-family: headers, sans-serif;
}
.nf_kaart__sluit
{
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: #00000073;
	border: 1px solid #ffffff26;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* De timer in de onderrand: zelfde witte gloss als #timeBar/#bonusBar.
   JS zet transform:scaleX en zijn eigen lineaire transition. */
.nf_kaart__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #00000073; }
.nf_kaart__timer i
{
	display: block;
	position: relative;
	height: 4px;
	width: 100%;
	background: var(--nfa);
	overflow: hidden;
	transform-origin: left center;
}
.nf_kaart__timer i::after
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 50%;
	background: #fff;
	opacity: .3;
}

/* ---- 3. Wachtrij-dots ---------------------------------------------------- */

.nf_dots
{
	position: absolute;
	left: 0;
	right: 0;
	top: 84px;			/* 9 goot + 68 kaart + 7 */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	opacity: 0;
	transition: opacity .3s;
}
.nf_shelf.heeft-dots .nf_dots { opacity: 1; }
.nf_dots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff40; border: 1px solid #00000073; }
.nf_dots i.is-vol { background: #fff; border-color: #000; }
.nf_dots i.is-flits { animation: nfDotFlits .9s ease-out forwards; }
.nf_dots b { font-family: p, sans-serif; font-size: 9px; color: #ffffff8a; margin-left: 2px; }
@keyframes nfDotFlits { 0% { box-shadow: 0 0 16px #ff2d3b; } 100% { box-shadow: 0 0 6px #ff2d3b00; } }

/* ---- 4. Whisper-pil (gains) ----------------------------------------------
   Nooit een kaart: vliegt als pil onder de teller waar hij bij hoort. Op
   document.body (de header is een stacking-context, ontsnappen kan niet
   van binnenuit) — zelfde route als .extender_pop. */
.nf_pil
{
	position: fixed;
	z-index: 50;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 14px;
	border-radius: 20px;
	background: #000000b8;
	border: 1px solid #ffffff26;
	pointer-events: none;
	animation: nfPil 1.2s ease-out forwards;
}
.nf_pil img { width: 17px; height: 17px; object-fit: contain; }
.nf_pil span { font-family: headers, sans-serif; font-size: 16px; text-shadow: 0 1px black; }
@keyframes nfPil
{
	0%   { opacity: 0; margin-top: 2px; }
	12%  { opacity: 1; }
	78%  { opacity: 1; }
	100% { opacity: 0; margin-top: 16px; }
}

/* ---- 5. Notificatiecentrum (4c) — leeft in .pm_pop ----------------------
   .pm_pop zet lopende tekst op 'p' met (0,1,1)-specificiteit; alles hier is
   daarom .pm_pop .nc_* zodat de headers-gezichten winnen zonder !important. */

.pm_pop .nc_kop_chip
{
	flex: none;
	font-family: p, sans-serif;
	font-size: 8.5px;
	letter-spacing: 1px;
	padding: 2px 5px;
	border-radius: 4px;
	color: #fff;
	background: #ff2d55;
	white-space: nowrap;
}
.pm_pop .nc_sub { font-family: p, sans-serif; font-size: 10.5px; color: #ffffff8a; margin-top: 4px; }

/* De samenstellingsbalk: deze week op schaal, gegroepeerd per soort.
   Ongelezen blokken gloeien; gelezen zakken naar 20%. Tikken filtert. */
.pm_pop .nc_balk
{
	margin-top: 7px;
	display: flex;
	height: 9px;
	border-radius: 4px;
	background: #00000073;
	border: 1px solid #ffffff1a;
	overflow: hidden;
	cursor: pointer;
}
.pm_pop .nc_balk i { display: block; border-left: 1px solid #00000073; }
.pm_pop .nc_balk i:first-child { border-left: 0; }
.pm_pop .nc_legenda
{
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 6px;
	font-family: p, sans-serif;
	font-size: 9px;
	color: #ffffff8a;
}
.pm_pop .nc_legenda span { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.pm_pop .nc_legenda span.is-actief { color: #fff; text-decoration: underline; }
.pm_pop .nc_legenda i { width: 6px; height: 6px; border-radius: 2px; }

/* Sectieregel: NEW / EARLIER + haarlijn + MARK ALL READ rechts. */
.pm_pop .nc_sectie { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.pm_pop .nc_sectie b { font-family: headers, sans-serif; font-weight: normal; font-size: 9.5px; letter-spacing: 2.5px; color: #FFC46B; }
.pm_pop .nc_sectie.is-eerder b { color: #ffffff70; }
.pm_pop .nc_sectie i { flex: 1; height: 1px; background: #ffffff1c; }
.pm_pop .nc_sectie span[data-pm-actie] { font-family: p, sans-serif; font-size: 9.5px; color: #FFC46B; text-decoration: underline; cursor: pointer; }

/* Rij in het verzonken paneel — 78px, gedeeld door #00000073-scheidingen. */
.pm_pop .nc_rij
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 12px;
	border-bottom: 1px solid #00000073;
}
.pm_pop .nc_rij:last-child { border-bottom: 0; }
.pm_pop .nc_rij.is-nieuw { background: linear-gradient(90deg, #ff2d5518, transparent 60%); }
.pm_pop .nc_rij.is-nieuw::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: #ff2d55;
}
.pm_pop .nc_rij__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #12042a; flex: none; }
.pm_pop .nc_rij.is-gelezen .nc_rij__avatar { opacity: .72; }
.pm_pop .nc_rij__tegel
{
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #00000059;
	border: 1px solid #FFC10745;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm_pop .nc_rij.is-gelezen .nc_rij__tegel { border-color: #ffffff26; }
.pm_pop .nc_rij__tegel img { width: 24px; height: 24px; object-fit: contain; }
.pm_pop .nc_rij__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pm_pop .nc_zin { font-family: p, sans-serif; font-size: 11.5px; line-height: 1.35; color: #ffffffd6; }
.pm_pop .nc_rij.is-gelezen .nc_zin { color: #ffffffa8; }
.pm_pop .nc_zin b { font-family: headers, sans-serif; font-weight: normal; font-size: 12.5px; }
.pm_pop .nc_zin b.is-systeem { color: #FFC46B; }
.pm_pop .nc_soort.is-ranked { color: #c05fff; }
.pm_pop .nc_soort.is-adventure { color: #FFC46B; }
.pm_pop .nc_soort.is-classic { color: #ffffffb5; }
.pm_pop .nc_tellers { display: flex; align-items: center; gap: 12px; font-family: p, sans-serif; font-size: 10px; color: #ffffff8a; }
.pm_pop .nc_tellers span { display: flex; align-items: center; gap: 4px; }
.pm_pop .nc_tellers .is-hart { color: #ff5c8a; }
.pm_pop .nc_tellers .is-comment { color: #45adff; }
.pm_pop .nc_rij__rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pm_pop .nc_tijd { font-family: p, sans-serif; font-size: 9px; color: #ffffff70; }

/* Actieknoppen: ongelezen = klein goud in zwart kader, gelezen = ghost. */
.pm_pop .nc_knop_frame { border: 3px solid #000; border-radius: 10px; }
.pm_pop .nc_knop
{
	position: relative;
	display: block;
	padding: 6px 10px;
	border: 2px solid #ffe07a;
	border-radius: 8px;
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	overflow: hidden;
	cursor: pointer;
	font-family: headers, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: #3a1c00;
}
.pm_pop .nc_knop::before
{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 44%;
	border-radius: 4px;
	background: #fff;
	opacity: .32;
	pointer-events: none;
}
/* De letters zitten in een naamloze <span> binnen de knop, en die valt onder
   `.pm_pop :not(input):not(textarea)` — een brede afstammelingsregel die 'p'
   oplegt. Die weegt (0,1,2) en verslaat dus niets van wat een klasse draagt,
   maar de span dráágt geen klasse: `.pm_pop .nc_knop` (0,2,0) raakt alleen de
   knop zelf, en overerving verliest het altijd van een regel die wél matcht.
   Vandaar dit adres op de span: (0,2,1) wint, zonder !important. Zelfde
   ingreep als `.nf_kaart__actie span` hierboven en `.pm_pop .cl-btn > span` in
   cubelegend-personal.css — hetzelfde patroon, derde vindplaats. */
.pm_pop .nc_knop span { position: relative; font-family: headers, sans-serif; }
.pm_pop .nc_knop_ghost
{
	display: block;
	padding: 7px 11px;
	border: 2px solid #ffffff2b;
	border-radius: 10px;
	background: #00000073;
	cursor: pointer;
	font-family: headers, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: #ffffffab;
}