/* cubelegend-summary.css — game summary (solo + duel), 9 screens.
   Load AFTER CubeRunnerz.css. No CSS variables, hex-with-alpha, 'headers' for
   numerals and p for body copy — same conventions as the rest of the sheet.
   Geïmporteerd uit design/Game Summary/cubelegend-summary.css; de app-scope is
   .summary_pop (de .gamepop van de summary) i.p.v. het design-#gamesummary, en
   onderaan staan de app-toevoegingen: tabpane-layout, sub-tab .active,
   chip-rijen, per-tap-kaarten, payout & rank, race/head-to-head/rivalry. */

/* ---- shell ---------------------------------------------------------- */
/* sidepanel op het top_overlayed-recept (schuift van rechts in); de
   achtergrond volgt de designframes: basis #0b0318, cbg0 op 24%, en een
   gradientwaas #0b0318cc→#0b0318f5 — i.p.v. de standaard cbg2 + zwart .5 */
.top_overlayed.summary_pop{background:#0b0318}
.top_overlayed.summary_pop:after{background:url(/public/img/cubelegend/cbg0.jpeg);background-size:cover;background-repeat:no-repeat;background-position:center;opacity:.24}
.top_overlayed.summary_pop:before{background:linear-gradient(#0b0318cc,#0b0318f5);opacity:1}
.summary_pop .summary_header{padding-top:calc(16px + env(safe-area-inset-top))}
.summary_pop .summary_body{flex:1;min-height:0;position:relative}
.summary_pop [tabcontent][tabgroup="summary"]{padding:10px 12px 12px;scrollbar-width:none}
.summary_pop [tabcontent]::-webkit-scrollbar{display:none}
.summary_pop [tabcontent][tabgroup="summary"].active{display:flex !important;flex-direction:column;gap:10px}
/* geneste sub-panes (DETAIL winner/loser, SOCIAL per replay): eigen scroll */
.summary_pop .summary_subpanes{position:relative;flex:1;min-height:0}
.summary_pop [tabcontent][tabgroup="duelDetail"],
.summary_pop [tabcontent][tabgroup="duelSocial"]{padding:2px 0 12px;scrollbar-width:none}
.summary_pop [tabcontent][tabgroup="duelDetail"].active,
.summary_pop [tabcontent][tabgroup="duelSocial"].active{display:flex !important;flex-direction:column;gap:10px}

.summary_header{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:16px 14px 10px}
.summary_header__avatar img{width:38px;height:38px;border-radius:50%;border:2px solid #6631c3;background:#170040;display:block}
.summary_header__title{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:0}
.summary_header__title b{font-family:'headers';font-size:17px}
.summary_header__title small{font-family:p;font-size:10px;color:#ffffff6e;letter-spacing:1px}
.summary_header__close{margin-left:auto;width:30px;height:30px;border-radius:50%;background:#00000073;border:1px solid #ffffff1f;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#ffffffb0}

.summary_versus{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.summary_versus img{width:40px;height:40px;border-radius:50%;background:#170040;display:block}
.summary_versus__a.is-winner img{border:2px solid #7CFC00;box-shadow:0 0 12px #4caf5055}
.summary_versus__b img{border:2px solid #ffffff2e;filter:saturate(.6)}
.summary_versus b{font-family:'headers2';font-size:15px;color:#FF9800;text-shadow:0 2px black}

/* ---- principal tabs: reuse .tabs-full, only the wrapper is new ------- */
.summary_tabs{flex:0 0 auto;background:#12042a;border-bottom:2px solid #00000080;padding: 11px 0;position:relative;z-index:2}

/* designtoken tab-label: 'headers' 11px + vierzijdige zwarte text-shadow —
   de kale .tab-full-btn erft anders het bodyfont */
.summary_tabs .tab-full-btn{padding:8px 7px 9px;font-family:'headers';font-size:11px;letter-spacing:.3px;white-space:nowrap;color:#efe7ff;text-shadow:0 1px black,0 -1px black,1px 0 black,-1px 0 black}
.summary_tabs .tab-full-btn-active{color:#fff;text-shadow:0 2px black,0 -1px #0000007a,1px 0 #0000007a,-1px 0 #0000007a}
.summary_tabs .tab-full-btn .badge-alert{top:-6px;right:2px;text-shadow:none;font-family:p}

/* ---- sub-tabs (DETAIL winner/loser, SOCIAL per replay) -------------- */
.summary_subtabs{flex:0 0 auto;display:flex;background:#1d0f30;border:1px solid #ffffff14;border-radius:24px;padding:4px;margin:0 0 2px}
.summary_subtabs__btn{flex:1;position:relative;font-family:'headers';font-size:12px;letter-spacing:.5px;padding:8px 0 10px;border-radius:20px;color:#d9c9f5;text-align:center}
.summary_subtabs__btn.active{color:#fff;text-shadow:0 1px black;background:linear-gradient(to bottom,#ffd700 0%,#ff7700 100%);box-shadow:inset 0 -3px #b25f00,inset 0 -4px #ffa548,0 3px 10px #ff770044}
.summary_subtabs__btn .badge-alert{top:-2px;right:4px}

/* ---- chip-rij (bereik/filter) --------------------------------------- */
.summary_chips{flex:0 0 auto;display:flex;gap:3px;background:#00000080;border:1px solid #ffffff1a;border-radius:20px;padding:3px}
.summary_chips__chip{flex:1;font-family:'headers';font-size:11px;letter-spacing:.5px;padding:7px 0 9px;border-radius:16px;color:#ffffff8a;text-align:center;white-space:nowrap}
.summary_chips__chip.active{color:#fff;text-shadow:0 1px black;background:linear-gradient(to bottom,#ffd700 0%,#ff7700 100%);box-shadow:inset 0 -3px #b25f00,inset 0 -4px #ffa548}

/* ---- solo hero ------------------------------------------------------ */
.summary_hero{flex:0 0 auto;border:4px solid #000;border-radius:15px}
.summary_hero__inner{border:3px solid #6631c3;border-radius:11px;background:linear-gradient(0deg,rgba(88,0,147,1) 70%,rgba(154,0,255,1) 100%);overflow:hidden;box-shadow:inset 0 0 20px #00000055}
.summary_hero__meta{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;font-family:p;font-size:10px;letter-spacing:1px;color:#ffffff8a}
.pill-mode{color:#2b0a3d;background:#ffffff9c;border-radius:4px;padding:2px 7px;text-transform:uppercase}
.summary_hero__row{display:flex;align-items:stretch}
.summary_hero__cell{flex:1;padding:8px 6px;text-align:center}
.summary_hero__divider{width:1px;background:#ffffff26;margin:8px 0}
.summary_hero__label{display:block;font-family:p;font-size:9px;color:#ffffffb5;letter-spacing:1px}
.summary_hero__value{display:block;font-family:'headers';font-size:20px;line-height:1.15;text-shadow:0 2px black}
.summary_hero__value.is-focus{color:#f5c542}.summary_hero__value.is-speed{color:#4bb4ff}.summary_hero__value.is-awareness{color:#c56cff}
.summary_hero__unit{display:block;font-family:p;font-size:9px;color:#ffffff8a}
.summary_hero__bar{height:5px;border-radius:3px;background:#00000073;margin-top:6px;overflow:hidden}
.summary_hero__bar i{display:block;height:100%;border-radius:3px;animation:barGrow 1s ease-out}
.summary_hero__bar i.is-focus{background:#f5c542}.summary_hero__bar i.is-speed{background:#4bb4ff}.summary_hero__bar i.is-awareness{background:#c56cff}
.summary_hero__delta{display:block;font-family:p;font-size:9px;margin-top:3px}
.summary_hero__delta.is-good{color:#7CFC00}.summary_hero__delta.is-bad{color:#ff8f8f}
.summary_hero__best{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px 8px;font-family:p;font-size:11px;color:#ffffffc4}
.pill-best{font-family:'headers';font-size:12px;color:#0b0318;background:#7CFC00;border-radius:4px;padding:3px 8px}
.summary_hero__xp{background:#000;border-top:#6631c3 2px solid;border-radius:0 0 8px 8px;padding:9px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.summary_hero__xp_rij{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}
.summary_hero__xp img{width:22px;height:22px;object-fit:contain}
.summary_hero__xp b{display:block;font-family:'headers';font-size:18px;line-height:22px;color:#FFC46B}
.summary_hero__xp small{display:block;font-family:p;font-size:9px;color:#ffffff8a;letter-spacing:1px;text-align:center}
/* dierenbadge boven elke discipline-score (+ NEW als hij in deze game verdiend is) */
/* de badge vult de kolom (feedback 2 nov: zo groot mogelijk, het level staat in de afbeelding) */
.summary_hero__badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 auto 2px;width:100%}
.summary_hero__badge img{width:100%;max-width:128px;height:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 4px 0 #000)}
.summary_hero__badge.is-none img{width:64px;max-width:64px;height:64px;margin:26px 0;filter:grayscale(1) brightness(.5) drop-shadow(0 2px 0 #000)}
.summary_hero__badge.is-new span{position:absolute;top:-2px;right:-2px;height:18px;font-size:10px;box-shadow:0 2px 0 #000;z-index:1}
.summary_hero__row .summary_hero__cell{padding:8px 3px}
.summary_hero__badge span{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:8px;border:1.5px solid #000;background:#2a1050;font-family:'headers';font-size:9px;letter-spacing:1px;color:#ffffffcc;white-space:nowrap}
.summary_hero__badge.is-new span{background:#FFC107;color:#3a1c00}
.summary_hero__badge.is-new img{filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 10px #ffc107aa)}
.summary_hero__badge.is-none span{color:#ffffff73}

/* ---- duel scoreboard ------------------------------------------------ */
.summary_duel{flex:0 0 auto;display:flex;align-items:stretch;gap:8px}
.summary_duel__card{flex:1;border-radius:12px;padding:10px 8px;position:relative;text-align:center}
.summary_duel__card.is-winner{border:2px solid #4CAF50;background:linear-gradient(#1c3a1e,#0d1f0f);box-shadow:0 0 20px #4caf5033}
.summary_duel__card.is-loser{border:2px solid #f3433677;background:linear-gradient(#33141a,#170a0d)}
.summary_duel__badge{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-family:'headers';font-size:10px;letter-spacing:1px;border-radius:4px;padding:2px 8px}
.summary_duel__card.is-winner .summary_duel__badge{background:#4CAF50;color:#06230a}
.summary_duel__card.is-loser .summary_duel__badge{background:#f34336;color:#fff}
.summary_duel__avatar img{width:52px;height:52px;border-radius:50%;background:#170040;margin-top:16px}
.summary_duel__card.is-winner .summary_duel__avatar img{border:2px solid #7CFC00}
.summary_duel__card.is-loser .summary_duel__avatar img{border:2px solid #ffffff2e;filter:saturate(.6)}
.summary_duel__name{display:block;font-family:'headers';font-size:13px;margin-top:5px}
.summary_duel__score{display:block;font-family:'headers';font-size:22px;margin-top:2px}
.summary_duel__card.is-winner .summary_duel__score{color:#7CFC00;text-shadow:0 0 16px #7cfc0055}
.summary_duel__card.is-loser .summary_duel__score{color:#ff8f8f}
.summary_duel__vs{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.summary_duel__vs b{font-family:'headers2';font-size:26px;color:#FF9800;text-shadow:0 2px black}
.summary_duel__vs span{font-family:p;font-size:10px;color:#ffffff8a;writing-mode:vertical-rl;letter-spacing:1px}
.summary_margin{flex:0 0 auto;background:#00000042;border:1px solid #6631c3;border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.summary_margin small{font-family:p;font-size:10px;color:#ffffff8a;letter-spacing:1px}
.summary_margin__bar{flex:1;height:8px;border-radius:4px;background:#f3433655;overflow:hidden}
.summary_margin__bar i{display:block;height:100%;background:linear-gradient(90deg,#7CFC00,#4CAF50);animation:barGrow 1.1s ease-out}
.summary_margin b{font-family:'headers';font-size:13px;color:#7CFC00}

/* ---- payout & rank (settle v2) -------------------------------------- */
.summary_payout{flex:0 0 auto;border:4px solid #000;border-radius:15px}
.summary_payout__inner{border-radius:11px;overflow:hidden}
.summary_payout.is-winner .summary_payout__inner{border:3px solid #4CAF50;background:linear-gradient(0deg,#123a16 60%,#1d5c24 100%)}
.summary_payout.is-loser .summary_payout__inner{border:3px solid #f3433699;background:linear-gradient(0deg,#33141a 60%,#4d1a22 100%)}
.summary_payout__kop{display:flex;align-items:center;gap:8px;padding:8px 10px}
.summary_payout__kop img{width:26px;height:26px;border-radius:50%;background:#170040}
.summary_payout__kop b{font-family:'headers';font-size:14px}
.summary_payout__badge{margin-left:auto;font-family:'headers';font-size:11px;letter-spacing:1px;border-radius:4px;padding:2px 8px}
.summary_payout__badge.is-op{background:#7CFC00;color:#06230a}
.summary_payout__badge.is-af{background:#f34336;color:#fff}
.summary_payout__badge.is-kaart{display:inline-flex;align-items:center;gap:5px;background:#00000073;border:1px solid #FFC107;color:#FFC107}
.summary_payout__badge.is-kaart img{width:14px;height:auto;border-radius:0;background:none}
.summary_payout__ladder{display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 10px 8px}
.summary_payout__ladder span{display:flex;flex-direction:column;align-items:center}
.summary_payout__ladder .is-oud{opacity:.55}
.summary_payout__ladder .is-oud img{width:34px}
.summary_payout__ladder .is-nieuw img{width:40px;filter:drop-shadow(0 0 10px #ffffff44)}
.summary_payout__ladder small{font-family:p;font-size:9px;text-transform:uppercase}
.summary_payout__blokken{flex-direction:row !important;gap:3px;margin-left:6px}
.summary_payout__blokken i{width:10px;height:10px;border-radius:2px;border:1px solid #ffffff4d;display:block;box-sizing:border-box}
.summary_payout__blokken i.is-vol{background:linear-gradient(#6ee87c,#4CAF50);border:none}
.summary_payout__strip{background:#000;border-radius:0 0 8px 8px;display:flex;flex-direction:column}
.summary_payout.is-winner .summary_payout__strip{border-top:#4CAF50 2px solid}
.summary_payout.is-loser .summary_payout__strip{border-top:#f3433699 2px solid}
.summary_payout__rij{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #ffffff0f}
.summary_payout__rij:last-child{border-bottom:none}
.summary_payout__rij img{width:17px}
.summary_payout__rij span{font-family:p;font-size:11px;color:#ffffffb5;text-align:left;flex:1}
.summary_payout__rij b{font-family:'headers';font-size:14px}
.summary_payout__rij b.is-op{color:#7CFC00}
.summary_payout__rij b.is-af{color:#ff8f8f}

/* ---- detail sub-pane: side hero + drie stats ------------------------ */
.summary_sidehero{flex:0 0 auto;display:flex;align-items:center;gap:10px;border-radius:12px;padding:9px 10px}
.summary_sidehero.is-winner{background:#0d1f0f;border:1px solid #4CAF50}
.summary_sidehero.is-loser{background:#170a0d;border:1px solid #f3433677}
.summary_sidehero img{width:40px;height:40px;border-radius:50%;background:#170040}
.summary_sidehero.is-winner img{border:2px solid #7CFC00}
.summary_sidehero.is-loser img{border:2px solid #ffffff2e;filter:saturate(.6)}
.summary_sidehero div{text-align:left;line-height:1.15}
.summary_sidehero b{font-family:'headers';font-size:15px}
.summary_sidehero small{display:block;font-family:p;font-size:10px;letter-spacing:1px;color:#9be59f}
.summary_sidehero.is-loser small{color:#ffb0b0}
.summary_sidehero__score{margin-left:auto;font-family:'headers';font-size:20px}
.summary_sidehero.is-winner .summary_sidehero__score{color:#7CFC00}
.summary_sidehero.is-loser .summary_sidehero__score{color:#ff8f8f}
.summary_sidestats{flex:0 0 auto;display:flex;gap:8px}
.summary_sidestats div{flex:1;background:#170040b8;border:1px solid #c19eff55;border-radius:10px;padding:9px 8px;text-align:center}
.summary_sidestats b{display:block;font-family:'headers';font-size:18px}
.summary_sidestats b.is-focus{color:#f5c542}
.summary_sidestats b.is-speed{color:#4bb4ff}
.summary_sidestats b.is-awareness{color:#c56cff}
.summary_sidestats small{font-family:p;font-size:9px;color:#ffffff8a;letter-spacing:1px}

/* ---- sections, cubes, stat rows ------------------------------------- */
.summary_section{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-top:2px}
.summary_section h2{margin:0;font-family:'headers';font-size:14px;letter-spacing:1px;color:#ffffffd6}
.summary_section small{font-family:p;font-size:10px;color:#ffffff6e}
.summary_section:after{content:'';flex:1;height:1px;background:#ffffff14}
.summary_cubes{flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap}
.summary_cubes__chip{display:flex;align-items:center;gap:5px;background:#00000063;border:1px solid #6631c3;border-radius:8px;padding:5px 9px 5px 5px}
.summary_cubes__chip img{width:24px}
.summary_cubes__chip b{font-family:'headers';font-size:15px}
.summary_stats{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;border-radius:10px;overflow:hidden;border:1px solid #6631c3}
.summary_stats__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#00000042}
.summary_stats__row span{font-family:p;font-size:11px;color:#ffffffb5;letter-spacing:.5px;text-align:left}
.summary_stats__row b{font-family:'headers';font-size:15px;flex:0 0 auto}
.summary_stats__row small{font-family:p;font-size:10px;color:#ffffff6e}
.summary_stats__row.is-h2h{justify-content:flex-start}
.summary_stats__row.is-h2h b{font-size:12px}
/* De score is waar de rij over gaat en stond op 12px — kleiner dan de W/L-badge
   ernaast. Eigen klasse i.p.v. nth-of-type, want dat raakt ook die badge. */
.summary_h2h__score{font-family:'headers';font-size:15px}
.summary_stats__row.is-h2h > small:first-of-type{color:#ffffff5c}
.summary_stats__row.is-h2h b:nth-of-type(2){margin-left:auto}
.summary_stats__row.is-h2h a{font-family:'headers';font-size:10px;color:#FFC46B}
.summary_h2h__wl{width:22px;height:22px;line-height:22px;border-radius:6px;font-size:11px !important;text-align:center;flex:0 0 auto}
.summary_h2h__wl.is-w{background:#4CAF50;color:#06230a}.summary_h2h__wl.is-l{background:#f34336;color:#fff}
.summary_h2h__wl.is-d{background:#4a3f66;color:#fff}

/* ---- charts --------------------------------------------------------- */
.summary_chart{flex:0 0 auto;background:#170040b8;border:1px solid #c19eff55;border-radius:12px;padding:12px 10px 10px}
.summary_chart h2{margin:0;font-family:'headers';font-size:14px;letter-spacing:1px}
.summary_chart__titel{text-align:left;margin-bottom:10px !important}
.summary_chart__kop{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.summary_chart__kop small{font-family:p;font-size:10px;color:#ffffff6e;margin-left:auto}
.summary_chart svg{width:100%;display:block;overflow:visible}
.summary_chart__legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin-top:6px}
/* marker-soorten in de legend: het icoon zelf (perk · booster · magic) */
.summary_chart__legend small.is-icoon img{width:16px;height:16px;display:block;filter:drop-shadow(0 1px 1px #000)}
.summary_chart__legend small.is-icoon img.is-magie{width:13px;height:13px;border-radius:3px}
.summary_chart__legend small,.summary_legend small{display:inline-flex;align-items:center;gap:5px;font-family:p;font-size:10px;color:#ffffff8a}
.summary_chart__legend i,.summary_legend i{width:8px;height:8px;border-radius:50%;display:block}
.summary_legend{flex:0 0 auto;display:flex;justify-content:center;gap:14px;padding:2px 0}
.summary_legend i{width:14px;height:4px;border-radius:2px}
.summary_chart__voetnoot{display:block;font-family:p;font-size:10px;color:#ffffff6e;margin-top:4px;text-align:left}
.summary_chart__as{display:flex;justify-content:space-between;margin-top:5px}
.summary_chart__as small{font-family:p;font-size:9px;color:#ffffff6e}
.summary_chart__as small.is-slowest{color:#ff8f8f}
.summary_bars{display:flex;align-items:flex-end;gap:2px;height:78px}
.summary_bars i{flex:1;display:block;border-radius:2px 2px 0 0;background:linear-gradient(#7fd3ff,#45adff)}
.summary_bars i.is-slowest{background:linear-gradient(#ff9a9a,#f34336)}
.summary_h2h{display:flex;flex-direction:column;gap:9px}
.summary_h2h__rij{display:flex;align-items:center;gap:8px}
.summary_h2h__rij > b{width:74px;font-family:'headers';font-size:13px;color:#c9d3e8;flex:0 0 auto}
.summary_h2h__rij > b:first-child{text-align:right}
.summary_h2h__rij > b:last-child{text-align:left}
.summary_h2h__rij > b.is-beter{color:#7CFC00}
.summary_h2h__rij > small{width:56px;font-family:p;font-size:9px;color:#ffffff8a;letter-spacing:1px;flex:0 0 auto;text-align:center}
.summary_h2h__balk{flex:1;height:9px;border-radius:5px;background:#00000063;overflow:hidden;display:flex}
.summary_h2h__balk.is-links{justify-content:flex-end}
.summary_h2h__balk.is-links i{background:linear-gradient(90deg,#4CAF50,#7CFC00)}
.summary_h2h__balk.is-rechts i{background:linear-gradient(90deg,#6b7ea6,#4a5875)}
.summary_h2h__balk i{display:block;height:100%;animation:barGrow 1s ease-out}
.summary_rivalry{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.summary_rivalry i{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'headers';font-size:13px;font-style:normal}
.summary_rivalry i.is-w{background:#4CAF50;color:#06230a}
.summary_rivalry i.is-l{background:#f34336;color:#fff}
.summary_rivalry i.is-d{background:#4a3f66;color:#fff}
.summary_rivalry i.is-laatste{box-shadow:0 0 12px #4caf5099}

/* ---- per-tap kaarten ------------------------------------------------ */
.summary_tap{flex:0 0 auto;border:1px solid #6631c3;background:#00000042;border-radius:12px;padding:10px}
.summary_tap.is-beste{border-color:#a400ff;background:#170040b8;box-shadow:0 0 18px #a400ff22}
.summary_tap.is-miss{border-color:#f3433677;background:#2a000733}
.summary_tap__kop{display:flex;align-items:center;gap:8px}
.summary_tap__nr{font-family:'headers';font-size:13px;background:#6631c3;border-radius:5px;padding:3px 8px}
.summary_tap__nr.is-beste{background:#a400ff}
.summary_tap__nr.is-miss{background:#f34336}
.summary_tap__bestlabel{font-family:p;font-size:10px;color:#ffe0b8;letter-spacing:1px;background:#00000063;border-radius:4px;padding:3px 7px}
.summary_tap__misslabel{font-family:p;font-size:10px;color:#ff9a9a;letter-spacing:1px}
.summary_tap__ms{margin-left:auto;display:flex;align-items:center;gap:4px;font-family:'headers';font-size:13px}
.summary_tap__ms b{color:#7CFC00;margin-left:4px}
.summary_tap__m{border-radius:4px;padding:2px 6px;font-style:normal;background:#45adff;color:#04223c}
.summary_tap__m.tap_m_a{background:#FFC107;color:#2b1500}
.summary_tap__m.tap_m_c{background:#a400ff;color:#fff}
.summary_tap__quad{display:flex;gap:6px;margin-top:9px}
.summary_tap__quad div{flex:1;background:#00000063;border-radius:7px;padding:6px 4px;text-align:center}
.summary_tap__quad b{display:block;font-family:'headers';font-size:15px}
.summary_tap__quad b.is-focus{color:#f5c542}
.summary_tap__quad b.is-speed{color:#4bb4ff}
.summary_tap__quad b.is-af{color:#ff8f8f}
.summary_tap__quad small{font-family:p;font-size:9px;color:#ffffff8a}
.summary_tap__cubes{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap;justify-content:flex-start}
.summary_tap__cubes > small{font-family:p;font-size:10px;color:#ffffff8a}
.summary_tap__cube{display:inline-flex;align-items:center;gap:3px;background:#00000063;border-radius:6px;padding:3px 7px 3px 3px}
.summary_tap__cube img{width:18px}
.summary_tap__cube b{font-family:'headers';font-size:12px}
/* WP8b: deze tap was een perk-inzet — icoon + naam, goud omrand */
.summary_tap__perk{border:1px solid #ffd76b66;background:#2a1c0063}
.summary_tap__perk b{font-size:10px;letter-spacing:.5px;color:#ffd76b}
/* boosters volgen (8 nov 2026): in deze tap ging de cube van een meegenomen
   booster af — neon-grid-art + naam, neutraal omrand */
.summary_tap__booster{border:1px solid #ffffff3d;background:#ffffff0f}
.summary_tap__booster img{width:22px}
.summary_tap__booster b{font-size:10px;letter-spacing:.5px}
.summary_tap__booster small{font-family:p;font-size:8px;letter-spacing:.6px;color:#ffffff8a;margin-left:2px}
/* WP8b: perk-/booster-/magic-markers onder de charts, uitgelijnd op dezelfde
   x-as als de lijn/staafjes; meer dan één op een tap stapelt (margin-top) */
.summary_chart__perkstrip{position:relative;height:22px;margin-top:3px}
.summary_chart__perkmarker{position:absolute;top:0;width:22px;height:22px;transform:translateX(-50%);filter:drop-shadow(0 1px 2px #000)}
.summary_chart__perkmarker.is-magie{width:17px;height:17px;top:2px;border-radius:4px;opacity:.92}
.summary_chart__perkstrip.is-duel{border-left-width:4px;border-left-style:solid;border-radius:2px;margin-top:5px}
/* actief-venster van hs/fw/lh achter de speed-staafjes */
.summary_bars{position:relative}
.summary_bars__band{position:absolute;top:0;bottom:0;border:1px solid transparent;border-radius:4px;pointer-events:none}
/* WP8b: LOADOUT op HIGHLIGHTS — meegedragen boosters/extenders + perks met inzetstatus */
.summary_loadout{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.summary_loadout__item{display:inline-flex;align-items:center;gap:6px;background:#00000063;border:1px solid #ffffff1f;border-radius:8px;padding:5px 9px 5px 5px}
.summary_loadout__item img{width:26px;height:26px}
.summary_loadout__item b{font-family:'headers';font-size:11px}
.summary_loadout__item small{font-family:p;font-size:9px;color:#ffffff8a;letter-spacing:.5px}
.summary_loadout__item small.is-gebruikt{color:#ffd76b}
.summary_loadout__item.is-dim{opacity:.45}
.summary_tap__reset{display:block;text-align:left;font-family:p;font-size:10px;color:#ffffff8a;margin-top:8px}
.summary_meer{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 2px}
.summary_meer:before,.summary_meer:after{content:'';flex:1;height:1px;background:#ffffff14}
.summary_meer small{font-family:p;font-size:10px;color:#ffffff6e}

/* ---- social --------------------------------------------------------- */
/* klassiek: prominente WATCH REPLAY-hero (designframe 04) — de compacte
   .summary_replay-kaart hieronder is de duel-vorm per kant */
.summary_watchreplay{flex:0 0 auto;border:4px solid #000;border-radius:15px}
.summary_watchreplay__inner{border:3px solid #6631c3;border-radius:11px;background:linear-gradient(0deg,rgba(88,0,147,1) 70%,rgba(154,0,255,1) 100%);overflow:hidden}
.summary_watchreplay__kop{padding:12px 12px 10px;display:flex;align-items:center;gap:12px}
.summary_watchreplay__thumb{position:relative;width:64px;height:64px;border-radius:10px;background:#00000073;border:1px solid #ffffff26;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.summary_watchreplay__pulse{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#7CFC00;animation:livePulse 1.6s ease-in-out infinite}
.summary_watchreplay__kop h2{margin:0;font-family:'headers';font-size:19px;text-shadow:0 2px black;text-align:left}
.summary_watchreplay__kop p{margin:3px 0 0;font-family:p;font-size:11px;color:#ffffffc4;text-wrap:pretty;text-align:left}
.summary_watchreplay__strip{background:#000;border-top:#6631c3 2px solid;border-radius:0 0 8px 8px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.summary_watchreplay__views{display:flex;align-items:center;gap:5px;font-family:p;font-size:11px;color:#ffffff8a}
.summary_watchreplay__strip .btn{margin-left:auto}
.summary_acties{flex:0 0 auto;display:flex;gap:8px}
.summary_acties__like,.summary_acties__comments{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 0 11px;border-radius:10px;font-family:'headers';font-size:14px}
.summary_acties__like{background:#f3433622;border:1px solid #f34336;color:#ff8f8f;animation:glowPulse 3s ease-in-out infinite}
.summary_acties__like.is-on{background:#f34336;color:#fff}
.summary_acties__comments{background:#00000063;border:1px solid #6631c3;color:#ffffffcf}
.summary_replay{flex:0 0 auto;border-radius:12px;overflow:hidden;border:2px solid #6631c3;background:#170040b8}
.summary_replay.is-winner{border-color:#4CAF50;background:#0d1f0f}
.summary_replay.is-loser{border-color:#f3433677;background:#170a0d}
.summary_replay__top{display:flex;align-items:center;gap:9px;padding:10px;text-align:left}
.summary_replay__top img{width:38px;height:38px;border-radius:50%;background:#170040}
.summary_replay.is-winner .summary_replay__top img{border:2px solid #7CFC00}
.summary_replay.is-loser .summary_replay__top img{border:2px solid #ffffff2e;filter:saturate(.6)}
.summary_replay__top b{font-family:'headers';font-size:15px}
.summary_replay__top small{display:block;font-family:p;font-size:9px;letter-spacing:1px;color:#9be59f}
.summary_replay.is-loser .summary_replay__top small{color:#ffb0b0}
.summary_replay:not(.is-winner):not(.is-loser) .summary_replay__top small{color:#ffffff8a}
.summary_replay__top .btn{margin-left:auto}
.summary_replay__stats{display:flex;gap:8px;padding:0 10px 10px}
.summary_replay__like,.summary_replay__views{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 0 10px;border-radius:20px;font-family:'headers';font-size:12px}
.summary_replay__like{background:#f3433622;border:1px solid #f34336;color:#ff8f8f}
.summary_replay__like.is-on{background:#f34336;color:#fff}
.summary_replay__views{background:#00000063;border:1px solid #ffffff1f;color:#ffffff9c}
.summary_likedby{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:#00000042;border:1px solid #6631c3;border-radius:10px;padding:8px 10px}
.summary_likedby__stack{display:flex}
.summary_likedby__stack img,.summary_likedby__stack span{width:26px;height:26px;border-radius:50%;background:#170040;border:2px solid #0b0318;margin-left:-9px}
.summary_likedby__stack img:first-child{margin-left:0}
.summary_likedby__stack span{background:#6631c3;display:flex;align-items:center;justify-content:center;font-family:'headers';font-size:10px}
.summary_likedby small{font-family:p;font-size:11px;color:#ffffffb5;text-align:left}
.summary_likedby small b{font-family:'headers';font-size:12px}
.summary_likedby__all{margin-left:auto;font-family:'headers';font-size:11px;color:#FFC46B;flex:0 0 auto}
.summary_sort{display:flex;gap:2px;background:#00000080;border:1px solid #ffffff1a;border-radius:14px;padding:3px;margin-left:auto}
.summary_sort span{font-family:p;font-size:10px;padding:3px 9px 4px;border-radius:11px;color:#ffffff8a}
.summary_sort span.is-active{color:#3a1c00;background:linear-gradient(to bottom,#ffd700 0%,#ff7700 100%)}
.summary_section .summary_sort{flex:0 0 auto}
.summary_section:has(.summary_sort):after{content:none}
.summary_commentlijst{flex:0 0 auto;display:flex;flex-direction:column;gap:10px}
.summary_comment{flex:0 0 auto;display:flex;gap:9px;text-align:left;background:#00000042;border:1px solid #6631c3;border-radius:10px;padding:9px}
.summary_comment img{width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:#170040}
.summary_comment__head{display:flex;align-items:baseline;gap:6px}
.summary_comment__head b{font-family:'headers';font-size:13px}
.summary_comment__head small{font-family:p;font-size:9px;color:#ffffff6e}
.summary_comment p{margin:2px 0 0;font-family:p;font-size:12px;color:#ffffffc9;text-wrap:pretty}
.summary_empty{font-family:p;font-size:11px;color:#ffffff6e;padding:14px 0;text-align:center}
.summary_otherside{flex:0 0 auto;display:flex;align-items:center;gap:9px;border-radius:12px;padding:9px 10px;margin-top:2px;text-align:left}
.summary_otherside.is-loser{background:#170a0d;border:1px solid #f3433677}
.summary_otherside.is-winner{background:#0d1f0f;border:1px solid #4CAF5077}
.summary_otherside img{width:32px;height:32px;border-radius:50%;background:#170040;border:2px solid #ffffff2e}
.summary_otherside b{font-family:'headers';font-size:13px}
.summary_otherside small{display:block;font-family:p;font-size:10px;color:#ffffff8a}
.summary_otherside .btn{margin-left:auto}

/* ---- footers -------------------------------------------------------- */
/* voet met ruimte tot de schermrand (safe-area, eigenaar 3 nov 2026); de CTA
   volgt de app-brede .an_cta-conventie (goudgradient, glans, zwarte rand) en
   vult de rij — de oude .btn-gold-balk plakte tegen de onderkant */
.summary_actions{flex:0 0 auto;padding:10px 16px calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px;background:linear-gradient(#0b031800,#0b0318 40%)}
.summary_actions .an_cta_rand{flex:1;min-width:0}
.summary_composer{flex:0 0 auto;padding:8px 12px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#0b031800,#0b0318 30%);display:flex;gap:8px;align-items:flex-end}
.summary_composer textarea{flex:1;background:#00000073;border:1px solid #6631c3;border-radius:10px;padding:9px 10px;font-family:p;font-size:12px;color:#fff;text-align:left;resize:none;min-height:38px;box-sizing:border-box}
.summary_composer textarea::placeholder{color:#ffffff59}
.summary_pop .btn{text-decoration:none;font-family:'headers';font-size:17px;padding:10px 0 13px;border-radius:6px;color:#fff;text-align:center;text-shadow:0 2px black}
.summary_pop .btn-gold{flex:1;background:linear-gradient(to bottom,#ffd700 0%,#ff7700 100%);box-shadow:inset 0 -4px #b25f00,inset 0 -5px #ffa548}
.summary_pop .btn-purple{flex:0 0 auto;font-size:15px;padding:10px 14px 13px;background:linear-gradient(to bottom,#9C27B0 0%,#673AB7 100%);box-shadow:inset 0 -4px #3f1e7a}
.summary_pop .btn-sm{flex:0 0 auto;font-size:12px;padding:8px 13px 10px;border-radius:20px}

/* voet wisselt met de actieve hoofdtab: composer enkel op SOCIAL */
.summary_pop .summary_composer{display:none}
.summary_pop.social-actief .summary_composer{display:flex}
.summary_pop.social-actief .summary_actions{display:none}

/* likers-sheet (SEE ALL) */
/* z-index 1000 en niet 6: de PLAY AGAIN-knop eronder draagt swipe-close, en
   `a[swipe-close]` staat app-breed op z-index:999. Met 6 lag de CLOSE-knop van
   dit vel er precies achter — onzichtbaar én niet aan te tikken. Dat viel niet
   op zolang de knop per ongeluk een halve schermhoogte besloeg: het bovenste
   stuk stak boven die balk uit en ving de tik.
   Ondoorzichtig i.p.v. #0b0318f0: dit is een eigen scherm met een eigen titel
   en een eigen sluitknop, geen sluier over de summary. Door de oude 94% heen
   las de samenvatting mee en werd het een wirwar. */
.summary_likers_sheet{position:absolute;inset:0;z-index:1000;background:radial-gradient(ellipse at 50% 0%, #9a00ff2e, transparent 60%), #0b0318;display:flex;flex-direction:column;padding:14px 12px 14px;padding-top:calc(14px + env(safe-area-inset-top))}
/* De CLOSE-knop is .btn-gold, en die staat op flex:1 — geschreven voor
   .summary_actions, een RIJ, waar dat de knop de breedte laat delen. Dit vel is
   een KOLOM, dus daar groeide diezelfde regel in de hoogte en werd de knop een
   goudgele lap van een halve schermhoogte. Hier dus terug naar inhoudshoogte. */
.summary_likers_sheet .btn{flex:0 0 auto;margin-top:12px}
.summary_likers_sheet .summary_deel_link{margin:0 0 12px}
/* lege stand: een lijst die leeg is, is een normale toestand — die verdient
   uitleg in plaats van één grijs regeltje onderaan het scherm */
.summary_likers_lijst .summary_leeg{margin:auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:24px 16px;text-align:center}
.summary_likers_lijst .summary_leeg i{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#ffffff0f;border:1px solid #ffffff1f;color:#ffffff59}
.summary_likers_lijst .summary_leeg b{font-family:'headers';font-size:15px;color:#ffffffc4}
.summary_likers_lijst .summary_leeg span{font-family:p;font-size:11.5px;color:#ffffff70;max-width:230px;text-wrap:pretty}
.summary_likers_sheet h2{margin:0 0 10px;font-family:'headers';font-size:15px;letter-spacing:1px}
.summary_likers_sheet .summary_likers_lijst{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px}
.summary_likers_sheet .summary_likers_rij{display:flex;align-items:center;gap:9px;background:#00000042;border:1px solid #6631c3;border-radius:10px;padding:8px 10px;text-align:left}
.summary_likers_sheet .summary_likers_rij img{width:30px;height:30px;border-radius:50%;background:#170040}
.summary_likers_sheet .summary_likers_rij b{font-family:'headers';font-size:13px}
.summary_likers_sheet .summary_likers_rij small{margin-left:auto;font-family:p;font-size:9px;color:#ffffff6e}
.summary_likers_sheet .summary_likers_noot{display:block;font-family:p;font-size:10px;color:#ffffff6e;padding:8px 2px;text-align:center;text-wrap:pretty}

@keyframes barGrow{from{width:0}}
@keyframes drawLine{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 #f3433600}50%{box-shadow:0 0 14px #f3433655}}
/* WP8b: grafieken zijn tikbaar (zoom naar 20 taps rond de tikplek) */
[tabcontent="chart"] .summary_chart svg,[tabcontent="chart"] .summary_bars{cursor:crosshair}