/* cubelegend-showcase.css — trophy/badge showcase (profile TROPHIES tab,
   editor, PvP lobby strip). Loads AFTER CubeRunnerz.css + cubelegend-profile.css
   + cubelegend-pvp.css. No CSS variables, hex-with-alpha, 'headers' for
   numerals/labels, p for body copy.
   .profiel_kaart / .profiel_kaart__kop are NOT redefined here — cubelegend-
   profile.css already owns them and this tab reuses those cards verbatim. */

/* ---- showcase card (profile) ---------------------------------------- */
.showcase_frame{flex:0 0 auto;border:4px solid #000;border-radius:15px;margin-bottom:12px}
.showcase_frame__inner{border:3px solid #6631c3;border-radius:11px;background:linear-gradient(0deg,rgba(88,0,147,1) 68%,rgba(154,0,255,1) 100%);box-shadow:inset 0 0 20px #00000055;padding:11px 11px 12px}
.showcase_head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.showcase_head h2{margin:0 !important;padding:0 !important;font-family:'headers';font-size:14px !important;letter-spacing:.5px}
.showcase_head small{font-family:'p';font-size:9.5px;letter-spacing:1px;color:#ffffff9c;text-align:right}
.showcase_slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.showcase_slot{position:relative;background:#00000059;border:2px solid #ffffff2e;border-radius:12px;padding:10px 5px 8px;text-align:center;min-width:0}
.showcase_slot img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 3px 8px #00000099)}
.showcase_slot b{display:block;font-family:'headers';font-size:11px;line-height:12px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase_slot small{display:block;font-family:'p';font-size:8.5px;color:#ffffff8a;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase_slot__rang{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-family:'p';font-size:8px;letter-spacing:1px;padding:1px 6px;border-radius:4px;background:#ffffff2e;color:#0b0318;white-space:nowrap}
/* rarity ring: grade 6/5 gold, 4/3 purple, 2/1 blue — league/mission trophies
   keep the neutral ring plus their own kind colour below */
.showcase_slot.graad-6,.showcase_slot.graad-5{border-color:#FFC46B;box-shadow:0 0 18px #ffc46b33}
.showcase_slot.graad-6 .showcase_slot__rang,.showcase_slot.graad-5 .showcase_slot__rang{background:#FFC46B;color:#3a1c00}
.showcase_slot.graad-4,.showcase_slot.graad-3{border-color:#c05fff;box-shadow:0 0 18px #c05fff33}
.showcase_slot.graad-4 .showcase_slot__rang,.showcase_slot.graad-3 .showcase_slot__rang{background:#c05fff;color:#26003f}
.showcase_slot.graad-2,.showcase_slot.graad-1{border-color:#45adff;box-shadow:0 0 18px #45adff33}
.showcase_slot.graad-2 .showcase_slot__rang,.showcase_slot.graad-1 .showcase_slot__rang{background:#45adff;color:#002943}
.showcase_slot.is-league{border-color:#FFC46B;box-shadow:0 0 18px #ffc46b33}
.showcase_slot.is-league .showcase_slot__rang{background:#FFC46B;color:#3a1c00}
.showcase_slot.is-mission{border-color:#c05fff;box-shadow:0 0 18px #c05fff33}
.showcase_slot.is-mission .showcase_slot__rang{background:#c05fff;color:#26003f}
.showcase_slot.leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:104px;background:#00000038;border:2px dashed #ffffff33}
.showcase_slot.leeg i{width:30px;height:30px;border-radius:50%;border:2px solid #ffffff40;display:flex;align-items:center;justify-content:center;font-family:'headers';font-size:16px;font-style:normal;color:#ffffff8a}
.showcase_slot.leeg small{font-family:'p';font-size:9px;color:#ffffff8a;white-space:normal}
.showcase_slot__weg{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:#ff2d55;z-index:2}
.showcase_slot__weg:before,.showcase_slot__weg:after{content:'';position:absolute;top:9px;left:4px;width:12px;height:2px;background:#fff;border-radius:1px}
.showcase_slot__weg:before{transform:rotate(45deg)}
.showcase_slot__weg:after{transform:rotate(-45deg)}
.showcase_foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.showcase_foot small{flex:1;font-family:'p';font-size:10px;color:#ffffff9c;text-align:left}
.showcase_edit_knop{font-size:13px !important;padding:7px 16px 9px !important}
.showcase_leeg{font-family:'p';font-size:11px;color:#ffffff8a;margin:10px 0 2px;text-align:center}

/* ---- collection ------------------------------------------------------ */
/* Owned/Locked is een echte filter, geen teller: de pillen zijn tikbaar en de
   actieve staat is die van de gekozen filter. */
.collectie_telling{display:flex;background:#00000059;border-radius:20px;padding:2px;font-family:'p';font-size:9.5px}
.collectie_telling span{padding:4px 8px;border-radius:14px;color:#ffffffa8;white-space:nowrap}
.collectie_telling span.is-active{background:linear-gradient(to bottom,#ffd700 0%,rgb(255,119,0) 100%);color:#fff;text-shadow:0 1px black}
/* 3 kolommen i.p.v. 5: de trofeeën zijn het onderwerp van deze kaart, op
   34px waren ze niet uit elkaar te houden — nu met hun naam eronder */
.collectie_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.collectie_cel{position:relative;background:#00000047;border:1px solid #ffffff1f;border-radius:11px;padding:9px 4px 7px;text-align:center;min-width:0}
.collectie_cel img{width:56px;height:56px;object-fit:contain}
.collectie_cel small{display:block;font-family:'headers';font-size:9.5px;line-height:11px;margin-top:4px;color:#ffffffcc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collectie_cel.is-locked small{color:#ffffff8a}
.collectie_cel.is-league{border-color:#FFC46B66}
.collectie_cel.is-mission{border-color:#c05fff66}
.collectie_cel.is-locked{opacity:.35;border-color:#ffffff12}
.collectie_cel.is-locked img{filter:grayscale(1)}
.collectie_cel.is-pinned{border-color:#FFC46B;box-shadow:0 0 12px #ffc46b3d}
.collectie_cel b{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;background:#FFC46B;color:#3a1c00;font-family:'headers';font-size:9px;line-height:15px}
.collectie_cel.leeg{display:flex;align-items:center;justify-content:center;border:1px dashed #ffffff2e;font-family:'headers';font-size:12px;color:#ffffff8a}

/* ---- badges on the profile ------------------------------------------ */
.badge_frames{display:flex;gap:5px;margin-top:9px;font-family:'p';font-size:9.5px}
.badge_frames span{padding:4px 9px;border-radius:12px;color:#ffffff8a}
.badge_frames span.is-active{background:#ffffff1a;color:#fff}
/* 5 kolommen i.p.v. 6 en 52px i.p.v. 40px: badge-art draagt een symbool ín
   een gekleurde vorm — op 40px viel dat symbool weg */
.badge_grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:11px;justify-items:center}
.badge_chip{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.badge_chip img{width:52px;height:52px;object-fit:contain}
.badge_chip span{position:absolute;right:-4px;bottom:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#0b0318;border:1px solid #ffffff2e;font-family:'headers';font-size:10px;line-height:16px;text-align:center}
/* Nog niet verdiend: gedimd en grijs, net als een vergrendelde trofee in de
   COLLECTION. Hij blijft tikbaar — de detailkaart vertelt hoe je hem haalt. */
.badge_chip.is-locked{opacity:.32}
.badge_chip.is-locked img{filter:grayscale(1)}
.badge_telling{font-family:'p';font-size:9.5px;color:#ffffff8a;margin:9px 0 0;text-align:center}
.badge_chip.leeg{width:52px;height:52px;border:1px dashed #ffffff2e;border-radius:11px;font-family:'headers';font-size:12px;color:#ffffff8a}
.badge_top{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid #ffffff14}
.badge_top img{width:34px;height:34px;object-fit:contain}
.badge_top>div{flex:1;min-width:0}
.badge_top b{display:block;font-family:'headers';font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge_top small{display:block;font-family:'p';font-size:9.5px;color:#ffffff8a;margin-top:2px}
.badge_top a{margin-left:auto;font-family:'headers';font-size:11px;color:#FFC46B;white-space:nowrap}

/* ---- next up --------------------------------------------------------- */
.nextup_rij{display:flex;align-items:center;gap:10px;margin-top:10px}
.nextup_rij img{width:38px;height:38px;object-fit:contain;filter:grayscale(1);opacity:.6}
.nextup_rij>div{flex:1;min-width:0}
.nextup_rij b{display:block;font-family:'headers';font-size:12px}
.nextup_balk{display:block;margin-top:5px;height:8px;border-radius:5px;background:#00000073;overflow:hidden;position:relative}
.nextup_balk u{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff2d55,#ff8fa6);text-decoration:none}
.nextup_telling{font-family:'headers';font-size:13px;color:#FFC46B}
.nextup_voet{display:block;font-family:'p';font-size:9.5px;color:#ffffff70;margin-top:8px}

/* ---- detailkaart (tik op een trofee of badge) ------------------------ */
/* GEEN padding-top op de content: het handvat (::before) hoort BUITEN de lade te
   liggen, op de donkere onderlaag, net als bij elke andere lade. Dat doet het
   framework met margin-top:-20px — en elke padding-top hier duwt het handvat
   mee naar binnen, het paarse vlak in.
   De ruimte die de trofee nodig heeft komt daarom van de kop zelf. Die start
   door diezelfde -20px zo'n 15px BOVEN de bovenrand; 30px padding-top zet hem
   netjes een stukje eronder. */
#trofeeDetail .bottom_drawer__content{padding:0 14px calc(18px + env(safe-area-inset-bottom))}
.trofee_detail__kop{display:flex;align-items:center;gap:12px;padding:14px 0 12px;text-align:left}
#trofeeDetail .trofee_detail__kop{padding-top:30px}
/* De h2 erft een centrering uit de basissheet die specifieker is dan de
   text-align:left op de kop zelf. */
.trofee_detail__kop h2{text-align:left}
.trofee_detail__kop img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 4px 10px #00000099)}
.trofee_detail__kop.is-locked img{filter:grayscale(1);opacity:.5}
.trofee_detail__kop>div{flex:1;min-width:0}
.trofee_detail__kop h2{margin:0 !important;padding:0 !important;font-family:'headers';font-size:18px !important;line-height:20px}
.trofee_detail__kop small{display:block;font-family:'p';font-size:10px;letter-spacing:1px;color:#ffffff8a;margin-top:3px}
.trofee_detail__vink,.trofee_detail__slot{flex:0 0 auto;width:26px;height:26px;border-radius:50%;position:relative}
.trofee_detail__vink{background:#1c7a3a}
.trofee_detail__vink:before{content:'';position:absolute;left:8px;top:6px;width:6px;height:11px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
/* Het slot is nu een echte SVG in de markup (showcase-templates.js); dit vak
   geeft hem alleen zijn ronde achtergrond en centreert hem. */
.trofee_detail__slot{background:#ffffff1a;border:1px solid #ffffff2e;display:flex;align-items:center;justify-content:center;color:#ffffffb8}
.trofee_detail__regels{background:#170830;border:1px solid #ffffff17;border-radius:12px;padding:4px 12px}
.trofee_detail__regel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #ffffff12}
.trofee_detail__regel:first-child{border-top:0}
.trofee_detail__regel small{font-family:'p';font-size:10.5px;letter-spacing:1px;color:#ffffff8a;text-transform:uppercase}
.trofee_detail__regel b{font-family:'headers';font-size:13px;text-align:right}
.trofee_detail__hoe{margin-top:10px;background:#00000047;border:1px solid #6631c3;border-radius:12px;padding:10px 12px;text-align:left}
.trofee_detail__hoe small{display:block;font-family:'p';font-size:9.5px;letter-spacing:1.5px;color:#FFC46B}
.trofee_detail__hoe p{margin:5px 0 0;font-family:'p';font-size:12px;line-height:16px;color:#ffffffdd}
.trofee_detail__noot{font-family:'p';font-size:10px;color:#ffffff70;text-align:left;margin:8px 2px 0}
/* wanneer behaald (feedback 14 sep): seizoenen (league-trofee) of de week
   (classic-trofee) als lijst onder de eigenschappen */
.trofee_detail__wanneer{margin-top:10px;background:#170830;border:1px solid #ffffff17;border-radius:12px;padding:8px 12px 4px;text-align:left}
.trofee_detail__wanneer>small{display:block;font-family:'p';font-size:9.5px;letter-spacing:1.5px;color:#FFC46B;margin-bottom:2px}
.trofee_detail__wanneer ul{list-style:none;margin:0;padding:0}
.trofee_detail__wanneer li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #ffffff12}
.trofee_detail__wanneer li:first-child{border-top:0}
.trofee_detail__wanneer li b{font-family:'headers';font-size:13px;white-space:nowrap}
.trofee_detail__wanneer li span{font-family:'p';font-size:10.5px;color:#ffffff8a;text-align:right;line-height:14px}
.trofee_detail__wanneer li em{font-style:normal;font-family:'p';font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#1a0a2e;background:#FFC46B;border-radius:6px;padding:2px 6px;margin-left:4px;white-space:nowrap}
.trofee_detail__boek{display:block;margin-top:12px;text-align:center;font-size:15px !important;padding:9px 0 12px}

/* ---- 12 · editor ----------------------------------------------------- */
#showcaseEdit
{
	position:fixed;
	inset:0;
	z-index:1200;
	display:flex;
	flex-direction:column;
	background:#0b0318;
	transform:translateY(100%);
	transition:transform .28s ease;
}
#showcaseEdit.active{transform:translateY(0)}
.showcase_edit__kop{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:calc(16px + env(safe-area-inset-top)) 14px 12px;background:linear-gradient(1deg,rgba(88,0,147,1) 0%,rgba(154,0,255,1) 100%);border-bottom:1px solid #c05fff;box-shadow:0 0 0 5px #460274,0 14px 30px #00000080}
.showcase_edit__kop .terug{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#00000073;border:1px solid #ffffff2b;display:flex;align-items:center;justify-content:center;color:#fff}
.showcase_edit__kop b{display:block;font-family:'headers';font-size:17px;text-align:left}
.showcase_edit__kop small{display:block;font-family:'p';font-size:10px;letter-spacing:1px;color:#ffffff8a;text-align:left}
.showcase_edit__slots{flex:0 0 auto;padding:12px 14px 13px;background:#12042a;border-bottom:2px solid #00000080;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.showcase_edit__body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 0;display:flex;flex-direction:column;gap:10px;text-align:left}
.showcase_filters{display:flex;gap:5px;font-family:'p';font-size:9.5px;flex-wrap:wrap}
.showcase_filters span{padding:4px 9px;border-radius:12px;color:#ffffff8a}
.showcase_filters span.is-active{background:#ffffff1a;color:#fff}
.showcase_picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:14px}
.showcase_picker.leeg{display:block}
.showcase_pick{position:relative;background:#170830;border:1px solid #ffffff1f;border-radius:12px;padding:9px 6px 8px;text-align:center;min-width:0}
.showcase_pick img{width:44px;height:44px;object-fit:contain}
.showcase_pick b{display:block;font-family:'headers';font-size:10.5px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase_pick small{display:block;font-family:'p';font-size:8.5px;color:#ffffff8a;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase_pick small.tik{color:#45adff}
.showcase_pick.is-league{border-color:#FFC46B66}
.showcase_pick.is-mission{border-color:#c05fff66}
.showcase_pick.is-badge{border-color:#45adff66}
.showcase_pick.is-pinned{opacity:.55;border-color:#FFC46B}
.showcase_pick.is-locked{opacity:.4;border-color:#ffffff12;pointer-events:none}
.showcase_pick.is-locked img{filter:grayscale(1)}
.showcase_pick__nr{position:absolute;top:5px;left:5px;width:17px;height:17px;border-radius:5px;background:#FFC46B;color:#3a1c00;font-family:'headers';font-size:10px;line-height:17px}
/* de basisknoppen staan op 24px 'headers' — dat loopt "SAVE SHOWCASE" op
   393px dwars door zijn eigen knop heen; hier het formaat uit het ontwerp */
.showcase_edit__acties{flex:0 0 auto;padding:10px 14px calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px;background:linear-gradient(#0b031800,#0b0318 40%)}
.showcase_edit__acties .btn-purple,
.showcase_edit__acties .btn-orange{font-size:16px !important;padding:10px 14px 13px;white-space:nowrap}
.showcase_edit__acties .btn-purple{flex:0 0 auto;font-size:14px !important}
.showcase_edit__acties .btn-orange{flex:1;text-align:center;justify-content:center}

/* ---- 13 · PvP lobby strip -------------------------------------------- */
.pvp_showcase{display:flex;justify-content:center;gap:4px;margin-top:2px}
.pvp_showcase__cel{width:32px;height:32px;border-radius:8px;background:#00000059;border:1.5px solid #ffffff2e;display:flex;align-items:center;justify-content:center}
.pvp_showcase__cel img{width:24px;height:24px;object-fit:contain}
.pvp_showcase__cel.is-league{border-color:#FFC46B;box-shadow:0 0 12px #ffc46b3d}
.pvp_showcase__cel.is-mission{border-color:#c05fff;box-shadow:0 0 12px #c05fff3d}
.pvp_showcase__cel.is-badge{border-color:#45adff;box-shadow:0 0 12px #45adff3d}
.pvp_showcase__cel.leeg{border-style:dashed;border-color:#ffffff1f;box-shadow:none}
.pvp_showcase__label{display:block;font-family:'p';font-size:8px;letter-spacing:1px;color:#ffffff70;margin-top:4px;text-align:center}
/* align-self:stretch — #pvpVersus is een gecentreerde flex-kolom, zonder dit
   krimpt de leesregel tot z'n tekstbreedte i.p.v. de arena te spannen */
.pvp_showcase_reader{align-self:stretch;display:flex;align-items:center;gap:10px;background:#00000047;border:1px solid #6631c3;border-radius:12px;padding:7px 11px;text-align:left;margin:6px 12px 0;box-sizing:border-box}
.pvp_showcase_reader img{width:40px;height:40px;object-fit:contain}
.pvp_showcase_reader>div{min-width:0}
.pvp_showcase_reader b{display:block;font-family:'headers';font-size:13px}
.pvp_showcase_reader small{display:block;font-family:'p';font-size:10px;color:#ffffff8a;margin-top:2px}
.pvp_showcase_reader.leeg{justify-content:center;border-style:dashed;border-color:#ffffff1f}
.pvp_showcase_reader.leeg small{color:#ffffff70;margin:0}

/* ---- cube level chips (lobby) ---------------------------------------- */
/* renderCubeRij shows CUBE LEVELS per type, not counts: cubes[code] is
   cubeLevels[code].level and CUBE LVL is their sum (cubelegend.js:3755).
   Overrides the square 30x30 badge-chip from CubeRunnerz.css. */
#pvpVersus .pvp_cube{position:relative;flex:0 0 auto;width:auto;height:auto;display:flex;align-items:center;gap:3px;background:#00000059;border:1px solid #ffffff1f;border-radius:6px;padding:2px 4px 2px 2px}
#pvpVersus .pvp_cube img{width:16px;height:16px;object-fit:contain}
#pvpVersus .pvp_cube i{position:static;background:none;padding:0;border-radius:0;font-family:'headers';font-size:9px;font-style:normal;color:#fff}

/* ---- 13 · detailkaart: kop en uitlijning (feedbackronde) --------------
   .bottom_drawer__content is een flex-kolom met align-items:center, waardoor
   elk kind naar zijn eigen inhoudsbreedte kromp en gecentreerd oogde — ook de
   kop, die zelf al text-align:left droeg. De kaart hoort over de volle breedte
   te lopen met de tekst links, en het kruisje hoort BINNEN het paarse vlak,
   rechtsboven, in plaats van er los boven.

   LET OP — hier NOOIT position zetten. Het framework verankert de lade met
   `position:fixed; bottom:0` (CubeRunnerz.css ~9902). Een `position:relative`
   hier (bedoeld als houvast voor het absolute kruisje) haalt die fixed weg,
   waardoor `bottom:0` niets meer doet en de lade vanaf de BOVENkant van het
   document uitklapt in plaats van vanaf de onderrand. Een fixed element is zelf
   al het containing block voor absolute kinderen, dus er valt niets te winnen.
--------------------------------------------------------------------- */
#trofeeDetail .bottom_drawer__content{align-items:stretch}
#trofeeDetail .bottom_drawer__content > *{width:100%;box-sizing:border-box}
/* Het sleephandvat is een ::before van 100px breed. Het framework centreert dat
   met align-items:center op de kolom; de stretch hierboven zette het weer links.
   Alleen dit ene kind terugzetten, niet de hele uitlijning. */
#trofeeDetail .bottom_drawer__content::before{align-self:center}
/* Hetzelfde kruisje als elders in de app (.close.right_top): donkere cirkel van
   40px met een witte X. Niet fixed maar absolute — de lade staat zelf al fixed
   aan de onderrand, dus fixed zou het kruisje bovenaan het SCHERM plakken in
   plaats van rechtsboven in het paarse vlak. */
#trofeeDetail .close
{
	position:absolute;
	top:10px;
	right:10px;
	z-index:2;
	width:40px;
	height:40px;
	padding:4px;
	border-radius:100%;
	background:#00000080;
	border:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
}
#trofeeDetail .close svg{width:24px;height:24px}
/* De kop schuift onder het kruisje door; genoeg ruimte zodat een lange
   trofeenaam er niet tegenaan loopt. */
#trofeeDetail .trofee_detail__kop{padding-right:38px}
#trofeeDetail .trofee_detail__kop,
#trofeeDetail .trofee_detail__regels,
#trofeeDetail .trofee_detail__hoe,
#trofeeDetail .trofee_detail__noot{text-align:left}

/* ---- 13 · tips-knop ---------------------------------------------------- */

/* De "?" van de TROPHIES-tab krijgt een eigen regel bovenaan de pane: in de
   .showcase_head ernaast gezet zou hij over "SHOWN ON DUELS & LEADERBOARDS"
   vallen, en die kop wordt bij elke filtertik opnieuw getekend. */
.showcase_paneel__hulp
{
	display:flex;
	justify-content:flex-end;
	margin-bottom:-6px;
}