/* cubelegend-digest.css — de vier digest-schermen (claim tray classic/ranked,
   mission command, comeback pack) uit design/Mails_v2 Digest Screens and
   Security screens/"Digest Screens.dc.html" (4 frames, 393x852).

   Laadt NA cubelegend-personal.css: de lade hergebruikt de .pm_drawer-schil
   (achtergrond, handgreep, font-reset) en het knoppensysteem uit
   cubelegend-auth.css; hier staan alleen de digest-eigen onderdelen — de
   kleurvarianten van het paneelrecept, de tabpillen, de blok-pips, de
   voortgangsbalk en de comeback-pack-kaart. Geen CSS-variabelen, hex-met-alpha,
   'headers' voor koppen en cijfers, 'p' voor lopende tekst. */


/* ---- 1. Schil ------------------------------------------------------------
   Het ontwerp zet elk vel op een vaste hoogte (top 64px; het comeback pack op
   96px). De .pm_drawer-basis levert rand, verloop en handgreep; hier alleen de
   maat. Zelfde specificiteit als de pm_drawer-regel — dit bestand laadt later
   en wint dus. */
.bottom_drawer__content.dg_vel
{
	height: calc(100vh - 64px);
	height: calc(var(--vh100) - 64px);
	max-height: calc(100vh - 64px);
	max-height: calc(var(--vh100) - 64px);
}
.bottom_drawer__content.dg_vel.dg_vel--comeback
{
	height: calc(100vh - 96px);
	height: calc(var(--vh100) - 96px);
	max-height: calc(100vh - 96px);
	max-height: calc(var(--vh100) - 96px);
}

/* De pm_drawer-reset zet ALLES op 'p'; deze lijst zet de digest-koppen en
   -cijfers terug op 'headers' — zelfde !important-afweging als de lijst in
   cubelegend-personal.css (de universele font3-regel is anders niet te winnen). */
.dg_vel .dg_titel,
.dg_vel .dg_tab__in,
.dg_vel .dg_eyebrow,
.dg_vel .dg_tegel__groot,
.dg_vel .dg_tegel__divisie,
.dg_vel .dg_stat__getal,
.dg_vel .dg_strip b,
.dg_vel .dg_claim b,
.dg_vel .dg_claim__goud,
.dg_vel .dg_claim__af,
.dg_vel .dg_board_rij .dg_naam,
.dg_vel .dg_board_rij b,
.dg_vel .dg_nudge__tekst b,
.dg_vel .dg_bank__tekst b,
.dg_vel .dg_bank__bedrag,
.dg_vel .dg_rij_waarde,
.dg_vel .dg_paar b,
.dg_vel .dg_kaart_kop__tekst b,
.dg_vel .dg_held__tekst b,
.dg_vel .dg_held__score,
.dg_vel .dg_reward b,
.dg_vel .dg_cb_titel,
.dg_vel .dg_gone_rij b,
.dg_vel .dg_free,
.dg_vel .dg_leeg,
.dg_vel .dg_btn-rood { font-family: headers, sans-serif !important; }


/* ---- 2. Kop, chip en tabs ------------------------------------------------ */

.dg_kop
{
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px 12px;
	/* Het sleephandvat (::before op de lade) hangt erboven; zelfde 30px-som
	   als de pm_drawer-kop, anders plakt de titel tegen het handvat. */
	padding-top: 30px;
}
.dg_kop--kolom { display: block; }
.dg_kop__tekst { flex: 1; min-width: 0; }
.dg_titel
{
	font-size: 22px;
	letter-spacing: 1px;
	text-shadow: 0 2px black;
}
/* "RANKED PVP · WEEK 33" is nét te breed voor de ruimte naast de seizoenschip
   en brak "33" af naar een tweede regel; een tandje kleiner houdt hem heel. */
.dg_titel.is-lang { font-size: 20px; letter-spacing: .5px; }
.dg_sub { font-size: 10.5px; color: #ffffff8a; margin-top: 3px; }

.dg_chip
{
	flex: none;
	font-size: 9.5px;
	letter-spacing: 1px;
	border-radius: 8px;
	padding: 5px 8px;
}
.dg_chip.is-oranje	{ color: #ff8a5b; border: 1px solid #ff8a5b66; }
.dg_chip.is-paars	{ color: #c49bff; border: 1px solid #c49bff66; }

.dg_tabs
{
	flex: none;
	padding: 0 14px 12px;
	display: flex;
	gap: 7px;
}
.dg_tab
{
	flex: 1;
	border: 4px solid #000;
	border-radius: 13px;
	cursor: pointer;
}
.dg_tab__in
{
	border: 2px solid #ffffff2b;
	border-radius: 9px;
	background: #00000073;
	padding: 9px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	color: #ffffffab;
}
.dg_tab__in.is-actief
{
	border-color: #ffe07a;
	background: linear-gradient(0deg, #e09b00 0%, #FFC107 100%);
	color: #3a1c00;
}


/* ---- 3. Uitlegstrip, eyebrows, lijnen ------------------------------------ */

.dg_strip
{
	flex: none;
	margin: 0 14px 10px;
	border: 1px solid #ffc10740;
	border-radius: 11px;
	background: #ffc1070f;
	padding: 10px 12px;
	font-size: 10px;
	line-height: 1.6;
	color: #ffffff9c;
}
.dg_strip.is-paars { border-color: #c49bff40; background: #c49bff0f; }
.dg_strip b { font-size: 10.5px; letter-spacing: 1px; font-weight: normal; }
.dg_strip b.is-goud		{ color: #FFC46B; }
.dg_strip b.is-paars	{ color: #c49bff; }

.dg_eyebrow
{
	font-size: 9.5px;
	letter-spacing: 2.5px;
	color: #FFC46B;
	padding: 2px 2px 0;
}
.dg_eyebrow.is-oranje	{ color: #ff8a5b; }
.dg_eyebrow.is-groen	{ color: #5ce08a; }
.dg_eyebrow.is-paars	{ color: #c49bff; }

.dg_lijn { height: 1px; background: #ffffff14; }


/* ---- 4. Paneelrecept met kleurvarianten ----------------------------------
   Zelfde dubbelrand als pm_paneel (zwart kader eromheen via .pm_kader), maar
   met de digest-paddings en de vier kleurvarianten van het ontwerp. */
.dg_paneel
{
	border: 2px solid #ffffff21;
	border-radius: 12px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 12px;
	box-sizing: border-box;
}
.dg_paneel--goud		{ border-color: #ffc10759; background: linear-gradient(160deg, #4a2a10, #2a1508); }
.dg_paneel--rood		{ border-color: #ff5a5a4d; background: linear-gradient(160deg, #4a1c1c, #2a0f0f); }
.dg_paneel--groen		{ border-color: #5ce08a5c; background: linear-gradient(160deg, #26502f, #14291b); }
.dg_paneel--paars-hi	{ border-color: #c49bff59; background: linear-gradient(160deg, #3a2168, #1f1038); }
.dg_paneel--vlak		{ background: #00000059; }


/* ---- 5. Tegels (rangen, divisies, stats) --------------------------------- */

.dg_tegels
{
	flex: none;
	padding: 0 14px 12px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
}
.dg_stats
{
	flex: none;
	padding: 0 14px 10px;
	display: flex;
	gap: 8px;
}
.dg_stats > .pm_kader { flex: 1; }

.dg_tegel__in
{
	border: 2px solid #ffffff21;
	border-radius: 11px;
	background: linear-gradient(160deg, #3d1a63, #240f3d);
	padding: 11px 8px;
	text-align: center;
	height: 100%;
	box-sizing: border-box;
}
/* De kleurvarianten nog eens mét .dg_tegel__in: de tegel-basisregel staat
   verderop in de cascade dan sectie 4 en at de variant-achtergrond anders op —
   drie paarse tegels waar het ontwerp groen/rood vraagt. */
.dg_tegel__in.dg_paneel--goud	{ border-color: #ffc10759; background: linear-gradient(160deg, #4a2a10, #2a1508); }
.dg_tegel__in.dg_paneel--rood	{ border-color: #ff5a5a4d; background: linear-gradient(160deg, #4a1c1c, #2a0f0f); }
.dg_tegel__in.dg_paneel--groen	{ border-color: #5ce08a5c; background: linear-gradient(160deg, #26502f, #14291b); }
.dg_tegel__in--divisie { padding: 10px 6px; }
.dg_tegel__in--divisie img
{
	width: 34px;
	height: 34px;
	object-fit: contain;
	display: block;
	margin: 0 auto 5px;
}
.dg_tegel__label
{
	font-size: 8.5px;
	letter-spacing: 1.5px;
	color: #ffffff9c;
}
.dg_tegel__groot	{ font-size: 15px; margin-top: 5px; }
.dg_tegel__sub		{ font-size: 8.5px; margin-top: 3px; color: #ffffff70; }
.dg_tegel__divisie	{ font-size: 12px; margin-top: 4px; }

.dg_pips
{
	display: flex;
	gap: 2px;
	justify-content: center;
	margin-top: 5px;
}
.dg_pips i
{
	width: 9px;
	height: 6px;
	border-radius: 2px;
	background: #ffffff26;
}

/* Mission-command-stats: getal groot boven het label. */
.dg_stat { padding: 9px; }
.dg_stat__getal { font-size: 17px; }


/* ---- 6. Scrollzone en voet ----------------------------------------------- */

.dg_scroll
{
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	-webkit-overflow-scrolling: touch;
}
/* Schermen zonder voetbalk (mission command) scrollen tot de onderrand. */
.dg_scroll--staart
{
	padding-bottom: calc(18px + env(safe-area-inset-bottom));
	gap: 11px;
}

.dg_voet
{
	flex: none;
	padding: 12px 14px 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.dg_voet .cl-btn-frame { display: block; width: 100%; }
.dg_voet .cl-btn { font-size: 15px; letter-spacing: 1.2px; }
.dg_voet .dg_secundair_vol
{
	width: 100%;
	font-size: 14px;
	padding: 14px;
	border-radius: 11px;
	color: #ffffffc4;
}
.dg_voetnoot { text-align: center; font-size: 10px; color: #ffffff70; }


/* ---- 7. Claimrijen, vriendenborden, nudge -------------------------------- */

.dg_claim
{
	display: flex;
	align-items: center;
	gap: 11px;
}
.dg_claim img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.dg_claim.is-af { opacity: .6; }
.dg_claim__tekst { flex: 1; min-width: 0; }
.dg_claim__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.dg_claim__tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 1px; }
.dg_claim__goud { flex: none; font-size: 15px; font-weight: normal; color: #FFC107; }
.dg_claim__af { flex: none; font-size: 9.5px; font-weight: normal; letter-spacing: 1px; color: #ffffff70; }

.dg_board_rij
{
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 11px;
	padding: 4px 0;
}
.dg_board_rij .dg_pos { flex: none; width: 14px; color: #ffffff70; }
.dg_board_rij .dg_naam { flex: 1; min-width: 0; font-size: 12px; letter-spacing: .5px; }
.dg_board_rij b { font-weight: normal; }
/* De eigen rij is goud — de hele rij, zoals in het ontwerp. */
.dg_board_rij.is-ik,
.dg_board_rij.is-ik .dg_pos,
.dg_board_rij.is-ik .dg_naam { color: #FFC46B; }

.dg_nudge
{
	display: flex;
	align-items: center;
	gap: 11px;
}
.dg_nudge__tekst { flex: 1; min-width: 0; }
.dg_nudge__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 13px;
	letter-spacing: .5px;
	color: #ff8a5b;
}
.dg_nudge__tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 2px; }
.dg_mini { border-radius: 9px; padding: 8px 12px; font-size: 11px; letter-spacing: 1px; }


/* ---- 8. Ranked: seizoensbank en stakes ----------------------------------- */

.dg_bank__kop
{
	display: flex;
	align-items: center;
	gap: 11px;
}
/* Ontkleurd = op slot; het slot zit in de munt, niet in een nepknop. */
.dg_bank__munt { width: 34px; height: 34px; object-fit: contain; flex: none; filter: saturate(.55); }
.dg_bank__tekst { flex: 1; min-width: 0; }
.dg_bank__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 15px;
	letter-spacing: .5px;
}
.dg_bank__tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 1px; }
.dg_bank__rechts { flex: none; text-align: right; }
.dg_bank__bedrag { display: block; font-weight: normal; font-size: 19px; color: #c49bff; }
.dg_bank__rechts small { display: block; font-size: 8.5px; letter-spacing: 1px; color: #ffffff70; }
.dg_bank__voet
{
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 9px;
	color: #ffffff70;
}

.dg_rij_tussen
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-top: 11px;
	font-size: 10.5px;
	color: #ffffffc4;
}
.dg_rij_waarde { font-weight: normal; font-size: 12px; }
.dg_balk
{
	margin-top: 11px;
	height: 8px;
	border-radius: 5px;
	background: #00000073;
	border: 1px solid #ffffff1a;
	overflow: hidden;
}
.dg_balk i
{
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #7a3ecb, #c49bff);
}

.dg_stakes__kop
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dg_stakes__kop small { font-size: 9px; color: #ffffff70; }
.dg_stakes__rijen { margin-top: 3px; }
.dg_stakes__rijen .dg_lijn { margin-top: 8px; }
.dg_stakes__rijen .dg_rij_tussen { margin-top: 8px; font-size: 11px; }


/* ---- 9. Mission command: kaarten en held-rijen --------------------------- */

.dg_kaart_kop
{
	display: flex;
	align-items: center;
	gap: 10px;
}
.dg_avatar
{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: #150829;
	border: 2px solid #ff8a5b;
	flex: none;
}
.dg_kaart_kop__tekst { flex: 1; min-width: 0; }
.dg_kaart_kop__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.dg_kaart_kop__tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 1px; }

.dg_paar
{
	display: flex;
	gap: 8px;
	margin-top: 11px;
}
.dg_paar > div
{
	flex: 1;
	border: 1px solid #ffffff21;
	border-radius: 10px;
	background: #00000059;
	padding: 8px 10px;
}
.dg_paar small
{
	display: block;
	font-size: 8.5px;
	letter-spacing: 1.5px;
	color: #ffffff70;
}
.dg_paar b { display: block; font-weight: normal; font-size: 13px; margin-top: 2px; }

.dg_kaart_cta { margin-top: 11px; }
.dg_kaart_cta .cl-btn { padding: 11px; font-size: 13px; letter-spacing: 1.2px; border-radius: 9px; }
.dg_kaart_cta .cl-btn::before { border-radius: 5px; }
.dg_kaart_cta__sec { width: 100%; padding: 11px; font-size: 13px; letter-spacing: 1.2px; border-radius: 9px; color: #ffffffc4; }

.dg_held
{
	display: flex;
	align-items: center;
	gap: 11px;
}
.dg_held__tekst { flex: 1; min-width: 0; }
.dg_held__tekst b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.dg_held__tekst small { display: block; font-size: 9.5px; color: #ffffff8a; margin-top: 1px; }
.dg_held__score { flex: none; font-weight: normal; font-size: 14px; color: #5ce08a; }


/* ---- 10. Comeback pack --------------------------------------------------- */

.dg_cb_kop
{
	flex: none;
	padding: 16px 18px 6px;
	padding-top: 30px;
	text-align: center;
}
.dg_cb_eyebrow
{
	font-size: 10px;
	letter-spacing: 3px;
	color: #FFC46B;
}
.dg_cb_titel
{
	font-size: 27px;
	letter-spacing: 1px;
	margin-top: 8px;
	text-shadow: 0 2px black;
}
.dg_cb_sub
{
	font-size: 11.5px;
	color: #ffffff9c;
	margin-top: 9px;
	line-height: 1.55;
}

.dg_pack_kop
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 11px;
}
.dg_free
{
	font-size: 8.5px;
	letter-spacing: 1px;
	color: #3a1c00;
	background: #FFC107;
	padding: 2px 6px;
	border-radius: 7px;
}
.dg_pack_rijen
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dg_reward
{
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1px solid #ffffff21;
	border-radius: 11px;
	background: #00000059;
	padding: 10px 12px;
}
.dg_reward--kaal { border: 0; background: none; padding: 0; }
.dg_reward img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.dg_reward b
{
	display: block;
	font-weight: normal;
	font-size: 14px;
	letter-spacing: .5px;
}
.dg_reward small { display: block; font-size: 9.5px; color: #ffffff70; margin-top: 1px; }

/* De levens-subkaart: rood omrand, met een eigen rode CTA. */
.dg_lives
{
	border: 2px solid #ff5a5a66;
	border-radius: 11px;
	background: #ff5a5a17;
	padding: 11px 12px;
}
.dg_rood_frame
{
	border: 4px solid #000;
	border-radius: 13px;
	margin-top: 10px;
}
.dg_btn-rood
{
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #ff8a8a;
	border-radius: 9px;
	background: linear-gradient(0deg, #b8262f 0%, #ff5a5a 100%);
	padding: 10px;
	text-align: center;
	font-size: 12.5px;
	letter-spacing: 1.2px;
	color: #2a0505;
	cursor: pointer;
}
.dg_btn-rood[disabled]
{
	filter: grayscale(.7);
	opacity: .55;
	pointer-events: none;
}

.dg_gone_rij
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	font-size: 11px;
	color: #ffffff8a;
}
.dg_gone_rij b { flex: none; font-weight: normal; font-size: 12px; color: #fff; }


/* ---- 11. Lege staten en skelet ------------------------------------------- */

.dg_leeg
{
	padding: 26px 16px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 1px;
	color: #ffffffab;
}
.dg_leeg small
{
	display: block;
	margin-top: 6px;
	font-family: p, sans-serif;
	font-size: 10.5px;
	letter-spacing: 0;
	line-height: 16px;
	color: #ffffff70;
}

/* Laadstand: drie stille balken — geen verzonnen cijfers in beeld. */
.dg_skelet
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
}
.dg_skelet i
{
	display: block;
	height: 64px;
	border-radius: 12px;
	background: #ffffff0d;
	border: 1px solid #ffffff12;
	animation: dg_adem 1.2s ease-in-out infinite alternate;
}
.dg_skelet i:nth-child(2) { animation-delay: .15s; }
.dg_skelet i:nth-child(3) { animation-delay: .3s; }
@keyframes dg_adem
{
	from	{ opacity: .5; }
	to		{ opacity: 1; }
}


/* ---- 12. Uitlijning -------------------------------------------------------
   De basissheet centreert lade-inhoud; in dit ontwerp is alles links
   uitgelijnd behalve wat expliciet centreert — zelfde correctie als .pm_drawer. */
.dg_vel { text-align: left; }
.dg_vel .dg_tegel__in,
.dg_vel .dg_leeg,
.dg_vel .dg_voetnoot,
.dg_vel .dg_cb_kop,
.dg_vel .dg_btn-rood,
.dg_vel .cl-btn,
.dg_vel .cl-btn-secondary { text-align: center; }
/* De kop en de tegels moeten de volle breedte pakken; gecentreerde flex-items
   in de lade-kolom krompen anders om hun inhoud. */
.dg_vel > div { align-self: stretch; width: 100%; box-sizing: border-box; }