/* ══════════════════════════════════════════════════════════════════════════ CubeLegend — PvP entry flow styles handover-pvp-entry/cubelegend-pvp-entry.css → public/css/ Scoped under .pe_* so nothing collides with cubelegend-pvp.css. Every discipline block sets --pe-edge; tiles read it. ══════════════════════════════════════════════════════════════════════════ */ /* ── drawer shell ────────────────────────────────────────────────────────── TOP + BOTTOM verankeren, niet alleen bottom. Een absoluut kind met enkel bottom:0 krijgt zijn hoogte van de INHOUD: op de TEAM-tab (4 formaten) groeide het paneel 247px boven de viewport uit — kop en tabs stonden buiten beeld en .pe_kolom kreeg nooit een begrensde hoogte, dus scrollen deed niets. De top volgt de padding-top die searchingOpponent zelf voor de globale home-knop reserveert (absolute positionering negeert die padding). */ /* De picker leeft in de NATIVE bottom drawer (.bottom_drawer__content, max-height:90vh, sleep-om-te-sluiten). Hij vult die schil en scrollt van binnen — geen eigen absolute positionering meer, dus ook geen ruzie met de app-chrome of met een container die iemand anders sluit. */ .pe_lade{padding:0 !important;background:transparent !important} .pe_drawer{width:100%;max-height:90vh;display:flex;flex-direction:column;gap:7px; padding:12px 13px calc(12px + env(safe-area-inset-bottom));box-sizing:border-box; border-radius:34px 34px 0 0;border-top:1px solid rgba(255,255,255,.12); background:radial-gradient(ellipse at 50% -2%,#5a1aa8 0%,#2b0a5e 42%,#0f0326 82%);color:#fff} .pe_drawer_weekend{background: radial-gradient(ellipse at 50% 106%,rgba(255,122,60,.2),transparent 58%), radial-gradient(ellipse at 50% -4%,#8a1a55 0%,#3c0a66 40%,#100228 82%)} .pe_drawer_kop{flex:none;display:flex;align-items:center;gap:8px} .pe_home,.pe_help{display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%; background:linear-gradient(#25093f,#0d0322);border:1px solid rgba(255,255,255,.2);color:#fff} .pe_home{width:34px;height:34px;font-size:14px} .pe_help{width:26px;height:26px;font-size:11px;color:rgba(255,255,255,.6)} .pe_titel{flex:1;display:flex;flex-direction:column;gap:1px;align-items:center;text-align:center} .pe_titel span{font-family:'headers';font-size:22px;letter-spacing:1px;color:#ffd85c; text-shadow:0 3px 0 #7a3a00,0 0 18px rgba(255,176,60,.4)} .pe_titel small{font-size:9px;color:#c6a8ff} .pe_drawer_weekend .pe_titel small{color:#ffb8e0} /* ── weekend banner ─────────────────────────────────────────────────────── Design D3/D4: 2px verloop-rand (#ff3c7a → #ffd85c → #c56cff) om een donker vlak, met een schuine shimmer-veeg die elke ~4s voorbijtrekt. */ /* transform-only (batterij): `left` animeren dwong élk frame layout af — translateX blijft op de compositor. 1250% van de eigen ~40px-breedte overbrugt de volle containerbreedte, zelfde veeg als voorheen. */ @keyframes pe_shimmer{ 0%{transform:skewX(-18deg) translateX(0);opacity:0} 18%{opacity:1} 60%{transform:skewX(-18deg) translateX(1250%);opacity:.9} 100%{transform:skewX(-18deg) translateX(1250%);opacity:0}} /* ⚠ flex:none: de drawer is een max-height-flexkolom — zonder shrink-slot werd de banner op korte schermen platgedrukt (subtitel/klok uit het vlak, eigenaarsfeedback 5 sep); de kolom eronder is de enige die mag krimpen */ .pe_banner{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;gap:9px; padding:8px 10px;border-radius:14px;border:2px solid transparent; background:linear-gradient(#2e0644,#12032a) padding-box, linear-gradient(90deg,#ff3c7a,#ffd85c 45%,#c56cff) border-box} .pe_banner::before{content:'';position:absolute;top:-40%;bottom:-40%;left:-14%;width:38px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.67),transparent); transform:skewX(-18deg);animation:pe_shimmer 4.2s ease-in-out infinite;pointer-events:none} .pe_live{display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:7px;background:#ff3c3c; font-family:'headers';font-size:8px;letter-spacing:1.2px;flex:none} .pe_live i{width:5px;height:5px;border-radius:50%;background:#fff;animation:pe_pulse 1.2s ease-in-out infinite} .pe_banner_tekst{flex:1;display:flex;flex-direction:column;gap:2px} .pe_banner_tekst span{font-family:'headers';font-size:14px;letter-spacing:1px} .pe_banner_tekst small{font-size:9px;color:#ffd85c} .pe_banner_klok{display:flex;flex-direction:column;gap:2px;align-items:flex-end;flex:none} /* tabular-nums + min-width: de per-seconde-cijfers mogen de banner niet laten wiebelen; 12px zodat "1D 04:23:12" op de smalle klokkolom past */ .pe_banner_klok span{font-family:'headers';font-size:12px;letter-spacing:.5px; font-variant-numeric:tabular-nums;min-width:70px;text-align:right; animation:pe_tick 1s ease-in-out infinite} .pe_klok_label{font-family:p;font-size:7px;letter-spacing:1.6px;color:rgba(255,255,255,.55)} .pe_banner_bar{display:block;width:70px;height:5px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden} .pe_banner_bar b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ff7a3c,#ffd85c)} /* dichte stand (doordeweeks): zelfde banner, gedempt chroom — paarse SOON-pil, tragere glans, en de balk "laadt op" richting vrijdag 18:00 */ .pe_banner_dicht{background:linear-gradient(#1d0733,#0d0221) padding-box, linear-gradient(90deg,#6d3df0,#c56cff 55%,#ffd85c) border-box} .pe_banner_dicht::before{animation-duration:8.5s} .pe_soon{background:#6d3df0} .pe_banner_dicht .pe_banner_tekst small{color:#c6a8ff} .pe_banner_dicht .pe_banner_bar b{background:linear-gradient(90deg,#6d3df0,#c56cff)} /* ── tabs ─────────────────────────────────────────────────────────────── */ .pe_tabs{flex:none;display:flex;gap:5px;padding:4px;border-radius:999px;background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 2px 6px rgba(0,0,0,.45)} .pe_tab{flex:1;display:flex;align-items:center;justify-content:center;padding:15px 0;border-radius:999px; font-family:'headers';font-size:13px;letter-spacing:2px;color:rgba(255,255,255,.54)} .pe_tab_solo.pe_tab_actief{background:linear-gradient(#ffe07a,#ef9c14);color:#3a1f00; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(0,0,0,.45)} .pe_tab_team.pe_tab_actief{background:linear-gradient(#7ccfff,#1f78dc);color:#02121f; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px rgba(0,0,0,.45)} /* ── discipline block ─────────────────────────────────────────────────── */ .pe_kolom{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;overflow-y:auto; scrollbar-width:none;padding-bottom:26px; -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 22px),transparent 100%)} .pe_kolom::-webkit-scrollbar{display:none} /* Kaart exact als de mock: een 3px verlooprand (lijst) om een gevuld binnenvlak, met glans over de bovenste 42%. De weekend-balk hangt ERONDER als los broertje — niet in de kaart. */ .pe_disc_groep{flex:none;display:flex;flex-direction:column;gap:5px} .pe_disc_frame{border-radius:20px;padding:3px;box-shadow:0 10px 24px rgba(0,0,0,.5); background:linear-gradient(var(--pe-rand),var(--pe-rand2) 45%,var(--pe-rand3))} .pe_disc{position:relative;border-radius:17px;overflow:hidden; background:linear-gradient(var(--pe-vlak),var(--pe-vlak2)); box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35); padding:6px 8px 8px;display:flex;flex-direction:column;gap:6px} .pe_disc_glans{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none; background:linear-gradient(rgba(255,255,255,.27),rgba(255,255,255,0))} .pe_disc>*:not(.pe_disc_glans){position:relative} .pe_disc_kop{display:flex;align-items:center;gap:7px} .pe_disc_kop .pe_rangplaat{margin-right:auto} .pe_rangplaat{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 4px;border-radius:12px;flex:none; background:linear-gradient(#180634,#0a021c);border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 8px rgba(0,0,0,.5)} .pe_rangplaat img{width:34px;height:34px;object-fit:contain;margin:-7px 0 -3px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.65));animation:pe_bob 3.2s ease-in-out infinite} .pe_rangplaat div{display:flex;flex-direction:column;gap:2px;min-width:0; align-items:flex-start;text-align:left} .pe_rangplaat span{font-family:'headers';font-size:17px;letter-spacing:1.2px;color:#fff;line-height:1.05; text-shadow:0 0 14px var(--pe-gloed)} .pe_rangplaat small{font-family:'headers';font-size:8px;letter-spacing:.6px;color:rgba(255,255,255,.8)} .pe_stake{display:flex;flex-direction:column;gap:1px;align-items:flex-start;flex:none; padding:3px 8px 3px 5px;border-radius:9px;background:#12042a;border:1px solid rgba(240,196,55,.35)} .pe_stake small{font-family:'headers';font-size:8px;letter-spacing:.4px;color:rgba(255,255,255,.44)} .pe_streak{display:flex;align-items:center;gap:4px;padding:3px 7px 3px 4px;border-radius:9px;flex:none; background:#3a0f18;border:1px solid rgba(255,90,60,.45);font-family:'headers';font-size:11px;color:#ffb03c} .pe_streak img{width:13px;height:13px;object-fit:contain} .pe_wint{font-family:'headers';font-size:9px;letter-spacing:1.3px;color:#fff;text-align:left; text-shadow:0 1px 0 rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35)} /* ── seat pips ────────────────────────────────────────────────────────── */ .pe_pips{display:flex;align-items:center;gap:4px} .pe_pip_groep{display:flex;gap:2px} .pe_pip{width:6px;height:6px;border-radius:50%} .pe_pip_split{width:1px;height:8px;background:rgba(255,255,255,.24)} /* ── event tiles ──────────────────────────────────────────────────────── */ .pe_event_rij{display:flex;gap:6px;align-items:stretch;min-width:0} .pe_tegel{position:relative;overflow:hidden;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px; padding:6px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .pe_tegel_heet{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.05)); border-color:var(--pe-edge);box-shadow:0 0 16px var(--pe-gloed),inset 0 1px 0 rgba(255,255,255,.22)} /* diagonal corner ribbon — costs no vertical space */ .pe_ribbon{position:absolute;top:13px;right:-32px;width:116px;padding:3px 0;transform:rotate(45deg);z-index:3; background:linear-gradient(90deg,#ff8fb2,#ff2f6e 45%,#c60d2c);text-align:center; box-shadow:0 3px 9px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 #8f0022; font-family:'headers';font-size:12px;letter-spacing:.7px;color:#fff;text-shadow:0 1px 0 #8f0022} .pe_tegel_kop{display:flex;align-items:center;gap:6px;min-width:0;padding-right:30px;text-align:left} .pe_fmt{font-family:'headers';font-size:18px;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.35)} .pe_prijs{display:flex;flex-direction:column;gap:5px;min-width:0;padding:5px 6px;border-radius:11px; background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)} .pe_prijs_extra{display:flex;align-items:center;gap:8px} .pe_munt{display:flex;align-items:center;gap:3px;font-family:'headers';font-size:13px} .pe_munt img{width:13px;height:13px;object-fit:contain} .pe_munt_gold{color:#ffd24a} .pe_munt_diamond{color:#7fe4ff;font-size:10px} .pe_munt_energy{color:#ffe07a;font-size:10px} /* ── rank after win ──────────────────────────────────────────────────── */ .pe_winst{display:flex;flex-direction:column;gap:4px;min-width:0;padding:5px 6px;border-radius:11px; background:linear-gradient(#2a0b4d,#170528);border:1px solid rgba(60,232,138,.35); box-shadow:0 0 14px rgba(60,232,138,.15)} .pe_winst_titel{font-family:'headers';font-size:8px;letter-spacing:.9px;color:rgba(60,232,138,.72)} .pe_winst_rij{display:flex;align-items:center;gap:5px;min-width:0} .pe_winst img{width:20px;height:20px;object-fit:contain;flex:none} .pe_winst_rang{font-family:'headers';font-size:11px;letter-spacing:.4px;color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pe_winst_plus{margin-left:auto;flex:none;font-family:'headers';font-size:11px;color:#3ce88a; text-shadow:0 0 10px rgba(60,232,138,.5)} .pe_meter{display:flex;align-items:center;gap:2px;min-width:0} .pe_blok{flex:1 1 0;min-width:5px;height:5px;border-radius:3px} .pe_blok_winst{box-shadow:0 0 8px #3ce88a} .pe_divup{align-self:flex-start;padding:2px 7px;border-radius:6px;background:#0f2b18; border:1px solid rgba(60,232,138,.45);font-family:'headers';font-size:8px;letter-spacing:.8px;color:#5cf07a} .pe_winst_compact{flex-direction:row;align-items:center;gap:6px;padding:4px 7px;border-radius:10px} .pe_winst_compact img{width:17px;height:17px} .pe_winst_compact .pe_meter{flex:1;min-width:14px} .pe_queue{display:flex;align-items:center;gap:5px;font-size:8px;color:rgba(255,255,255,.72)} .pe_queue i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.27)} .pe_dot_aan{background:#3ce88a!important;box-shadow:0 0 7px #3ce88a} .pe_dot_uit{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.27)} /* standoff-chips: pe_dot_aan erfde nergens een maat (alleen kleur+gloed), dus de groene ready-dot was 0×0 — onzichtbaar, terwijl de grijze pe_dot_uit wél toonde. Hier de eigen 8px-cirkel, gescopet zodat de 5px-queue-dots op de formaatkaarten hun maat houden. */ .pe_so_lid .pe_dot_aan{width:8px;height:8px;border-radius:50%;flex:none} .pe_cta{margin-top:auto;padding:14px 0;border-radius:11px;text-align:center;font-family:'headers'; font-size:12px;letter-spacing:1.5px;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.84)} .pe_tegel_heet .pe_cta{background:linear-gradient(#ffe07a,#ef9c14);border-color:#fff3bd;color:#3a1f00; box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -3px 0 #b06a00} /* ── always-on rows ──────────────────────────────────────────────────── */ .pe_altijd_kop{display:flex;align-items:center;gap:6px;font-family:'headers';font-size:8px;letter-spacing:1.4px; color:rgba(255,255,255,.72);text-shadow:0 1px 2px rgba(0,0,0,.5)} .pe_altijd_kop i{flex:1;height:1px;background:rgba(255,255,255,.22)} .pe_rij{display:flex;flex-direction:column;gap:4px;padding:5px 5px 6px 7px;border-radius:12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)} .pe_rij_kop{display:flex;align-items:center;gap:8px} .pe_rij_naam{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px; align-items:flex-start;text-align:left} .pe_rij_naam>span{font-family:'headers';font-size:14px;letter-spacing:.6px;text-shadow:0 2px 0 rgba(0,0,0,.45)} .pe_rij_naam>div{display:flex;align-items:center;gap:7px} .pe_rij_naam small{font-family:'headers';font-size:8px;letter-spacing:.5px;color:rgba(255,255,255,.82)} .pe_rij_cta{flex:none;padding:15px 14px;border-radius:11px;font-family:'headers';font-size:11px; letter-spacing:1.2px;background:linear-gradient(#ffe07a,#ef9c14);border:1px solid #fff3bd;color:#3a1f00; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 #b06a00} .pe_rij_cta_team{background:linear-gradient(#7ccfff,#1f78dc);border-color:#cfeaff;color:#02121f; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 #0b4a8f} /* ── weekday locked bar ──────────────────────────────────────────────── */ .pe_slot{position:relative;display:flex;align-items:stretch;border-radius:12px;overflow:hidden; background:#0b0220;border:1px solid rgba(255,255,255,.15)} .pe_slot>i{width:28px;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none; font-style:normal;background:linear-gradient(var(--pe-rand2),var(--pe-rand3))} .pe_slot_body{flex:1;position:relative;display:flex;align-items:center;gap:7px;padding:4px 9px} .pe_slot_body::before{content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 7px,transparent 7px 14px)} .pe_slot_titel{position:relative;font-family:'headers';font-size:9px;letter-spacing:1.2px;color:var(--pe-rand2)} .pe_slot_chips{position:relative;display:flex;gap:4px;flex:1;justify-content:center} .pe_slot_chips span{padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);font-family:'headers';font-size:10px;color:rgba(255,255,255,.67)} .pe_slot_winst{position:relative;font-family:'headers';font-size:9px;color:#3ce88a} /* ── searching ───────────────────────────────────────────────────────── */ .pe_zoek{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:15px; padding:calc(env(safe-area-inset-top) + 22px) 20px calc(env(safe-area-inset-bottom) + 24px); box-sizing:border-box;color:#fff;background:linear-gradient(rgba(28,6,54,.5),rgba(28,6,54,.88))} .pe_zoek .pe_home{align-self:flex-start} .pe_zoek_chip{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px; background:rgba(0,0,0,.33);border:1px solid var(--pe-edge);font-family:'headers';font-size:12px;letter-spacing:2px} .pe_zoek_titel{margin:0;font-family:'headers';font-size:42px;letter-spacing:2px;text-shadow:0 6px 26px rgba(0,0,0,.53)} .pe_radar{position:relative;width:174px;height:174px;display:flex;align-items:center;justify-content:center} /* in plaats van de radar (o.league): de drie ELIGIBLE FOR MATCHMAKING-trofeeën, groot en zonder kaartrand — het venster is hier de held, niet de eigen avatar */ .pe_zoek_band{width:100%;display:flex;justify-content:center;padding:10px 0 4px} .pe_zoek_band .pe_band{background:transparent;border:0;padding:0} .pe_zoek_band .pe_band_kop{font-size:11px;margin-bottom:4px} .pe_zoek_band .pe_band_rij{gap:18px} .pe_zoek_band .pe_band_cel img{width:64px;height:64px} .pe_zoek_band .pe_band_eigen img{width:104px;height:104px} .pe_zoek_band .pe_band_cel b{font-size:9px} .pe_zoek_band .pe_band_cel small{font-size:12px} .pe_zoek_band .pe_band_eigen small{font-size:15px} .pe_zoek_botaan .pe_zoek_band .pe_band_eigen img{filter:drop-shadow(0 0 16px rgba(240,196,55,.6))} .pe_zoek_gevonden .pe_zoek_band .pe_band_cel:not(.pe_band_eigen){opacity:.35} .pe_radar_ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(255,255,255,.24); animation:pe_spin 12s linear infinite} .pe_radar_avatar{width:104px;height:104px;border-radius:50%;border:4px solid var(--pe-edge);background:#1c0636;position:relative} .pe_radar_glow{position:absolute;inset:0;border-radius:50%;opacity:.35; background:radial-gradient(circle,var(--pe-edge),transparent 68%);animation:pe_glow 2.4s ease-in-out infinite} .pe_radar_loep{position:absolute;right:10px;bottom:12px;font-size:24px;line-height:1;animation:pe_sweep 3.4s ease-in-out infinite} .pe_stoelen{display:flex;gap:10px;align-items:flex-start} .pe_stoel_kaart{display:flex;flex-direction:column;align-items:center;gap:5px} .pe_stoel_kaart small{font-family:'headers';font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.5)} .pe_stoel_kaart_eigen small{color:#7fffdc} .pe_stoel{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:17px;color:rgba(255,255,255,.4);box-sizing:border-box} .pe_stoel_vol{border:2px solid rgba(255,255,255,.35)} .pe_stoel_kaart_eigen .pe_stoel_vol{border-color:#7fffdc;background:rgba(127,255,220,.12)} .pe_stoel_leeg{border:2px dashed rgba(255,255,255,.3);animation:pe_hunt 1.6s ease-in-out infinite} .pe_zoek_teller{font-family:'headers';font-size:13px;letter-spacing:2px} .pe_zoek_bar{display:block;width:230px;height:7px;border-radius:999px;background:rgba(0,0,0,.4);overflow:hidden} .pe_zoek_bar b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#45adff,#7fffdc); transition:width .3s ease} .pe_zoek_wacht{font-family:'headers';font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.6)} .pe_zoek_wacht span{color:var(--pe-edge)} .pe_zoek_botklok span{color:#f0c437} /* S1/S2: bot-kaart en CANCEL SEARCH samen onderin (mock: margin-top:auto op het blok) */ .pe_zoek .pe_bot{margin-top:auto} .pe_zoek .pe_annuleer{margin-top:-3px} /* S1 · 1v1: grotere radar, YOU · VS · SEAT 2, gouden balk zolang de bot-invaller aan staat */ .pe_zoek_1v1 .pe_radar{width:190px;height:190px;margin-top:2px} .pe_zoek_1v1 .pe_radar_avatar{width:118px;height:118px} .pe_zoek_1v1 .pe_radar_loep{right:14px;bottom:16px;font-size:26px} .pe_zoek_1v1 .pe_stoelen{gap:14px} .pe_zoek_1v1 .pe_stoel{width:52px;height:52px;font-size:18px} .pe_zoek_1v1 .pe_stoel_kaart small{font-size:10px} .pe_vs{font-family:'headers';font-size:16px;color:rgba(255,255,255,.4);align-self:flex-start; height:52px;display:flex;align-items:center} .pe_zoek_botaan .pe_radar_avatar{border-color:#f0c437} .pe_zoek_botaan .pe_zoek_bar b{background:linear-gradient(90deg,#f0c437,#ff7a3c)} .pe_zoek_gevonden .pe_zoek_titel{color:#7fffdc;font-size:32px;white-space:nowrap} .pe_zoek_gevonden .pe_radar_ring,.pe_zoek_gevonden .pe_radar_loep,.pe_zoek_gevonden .pe_stoel_leeg{animation:none} .pe_zoek_gevonden .pe_radar_loep{opacity:0} .pe_zoek_gevonden .pe_bot,.pe_zoek_gevonden .pe_annuleer{opacity:0;pointer-events:none;transition:opacity .3s ease} /* de legacy wachtregel ("estimated wait 30s") schemerde onder het V2-scherm door */ body.pe_vol_open #pvpWait{display:none} /* ── bot switch ──────────────────────────────────────────────────────── */ .pe_bot{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:13px 14px; border-radius:18px;background:rgba(0,0,0,.4);border:1px solid rgba(240,196,55,.25)} .pe_bot div{flex:1;display:flex;flex-direction:column;gap:3px;text-align:left} .pe_bot div span{font-family:'headers';font-size:13px;letter-spacing:1px;color:#f0c437} .pe_bot div small{font-size:10px;color:rgba(255,255,255,.54)} .pe_bot input{position:absolute;opacity:0;pointer-events:none} .pe_bot>i{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);flex:none;display:flex; align-items:center;justify-content:center;font-size:14px;font-style:normal} .pe_switch{position:relative;width:48px;height:27px;border-radius:999px;flex:none; background:rgba(255,255,255,.1);transition:background .2s ease} .pe_switch::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%; background:rgba(255,255,255,.35);transition:transform .2s ease} .pe_bot_aan .pe_switch{background:#f0c437;box-shadow:0 0 16px rgba(240,196,55,.33)} .pe_bot_aan .pe_switch::after{transform:translateX(21px);background:#0b0318} .pe_bot_uit{opacity:.72;border-color:rgba(255,255,255,.1)} .pe_bot_uit div span{color:rgba(255,255,255,.7)} .pe_annuleer{margin-top:auto;width:100%;box-sizing:border-box;padding:15px 0;border-radius:16px;text-align:center; border:1px solid rgba(255,255,255,.18);font-family:'headers';font-size:15px;letter-spacing:2px; color:rgba(255,255,255,.7)} /* ── team lobby ──────────────────────────────────────────────────────── */ .pe_lobby{position:absolute;inset:0;display:flex;flex-direction:column;gap:13px;color:#fff; padding:calc(env(safe-area-inset-top) + 18px) 16px 0; box-sizing:border-box;overflow-y:auto;scrollbar-width:none; background:linear-gradient(rgba(3,8,15,.58),rgba(3,8,15,.9))} .pe_lobby::-webkit-scrollbar{display:none} /* de CTA-voet kleeft aan de onderrand van de scroller: team + chat schuiven eronder door en SEARCH MATCH blijft in beeld; de onder-padding van de lobby zit hier (incl. safe-area), met een donkere fade zodat de inhoud er niet doorheen schijnt */ .pe_lobby_voet{position:sticky;bottom:0;z-index:3;flex:none;display:flex;flex-direction:column; margin:auto -16px 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 14px); background:linear-gradient(rgba(3,8,15,0),rgba(3,8,15,.94) 42%);pointer-events:none} .pe_lobby_voet>*{pointer-events:auto} .pe_lobby_kop{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.54)} .pe_lobby_disc{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.06); border:1px solid rgba(240,196,55,.35);font-family:'headers';font-size:11px;letter-spacing:2px;color:#f0c437} .pe_lobby_titel{margin:0;font-family:'headers';font-size:32px;letter-spacing:1px} .pe_lobby_sub{font-size:11px;color:rgba(255,255,255,.54)} .pe_lobby_team{display:flex;flex-direction:column;gap:9px;padding:13px 12px;border-radius:20px; background:rgba(255,255,255,.04);border:1px solid rgba(69,173,255,.2)} .pe_lobby_team_kop{display:flex;align-items:center;justify-content:space-between} .pe_lobby_team_kop span{font-family:'headers';font-size:12px;letter-spacing:2px;color:#45adff} .pe_lobby_team_kop small{font-size:10px;color:rgba(255,255,255,.54)} .pe_lid{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.05)} .pe_lid img{width:44px;height:44px;border-radius:50%;border:2px solid #45adff} .pe_lid div{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left} .pe_lid div span{font-family:'headers';font-size:14px} .pe_lid div small{font-size:10px;color:rgba(255,255,255,.54)} .pe_lid_tag{padding:4px 9px;border-radius:999px;background:rgba(60,232,138,.12);font-family:'headers'; font-size:9px;letter-spacing:1px;color:#3ce88a} .pe_lid_bot img{filter:grayscale(.5);border-color:#c19eff} .pe_lid_bot .pe_lid_tag{background:rgba(193,158,255,.15);color:#c19eff} .pe_lid_leeg{border:1px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.02)} .pe_lid_leeg i{width:44px;height:44px;border-radius:50%;border:1px dashed rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px; color:rgba(255,255,255,.35);animation:pe_hunt 1.8s ease-in-out infinite} .pe_lid_invite,.pe_lid_bot_add{flex:1;padding:14px 0;border-radius:12px;text-align:center; font-family:'headers';font-size:11px;letter-spacing:1px} .pe_lid_invite{background:#45adff;color:#03131f} .pe_lid_bot_add{border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7)} .pe_zoekbtn{margin-top:auto;padding:17px 0;border-radius:18px;text-align:center;font-family:'headers'; font-size:20px;letter-spacing:2px;background:linear-gradient(#5ec0ff,#2a86e0);color:#02121f; box-shadow:0 12px 30px rgba(69,173,255,.27)} .pe_zoekbtn_uit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.35);box-shadow:none;font-size:17px} /* ── standoff ────────────────────────────────────────────────────────── */ .pe_standoff{position:absolute;inset:0;display:flex;flex-direction:column;gap:11px;color:#fff; padding:calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 14px); box-sizing:border-box; background:linear-gradient(rgba(3,8,15,.55),rgba(3,8,15,.92))} .pe_so_kop{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px; color:rgba(255,255,255,.54)} .pe_so_event{padding:3px 9px;border-radius:8px;background:rgba(0,0,0,.45);border:1px solid var(--pe-edge); font-family:'headers';font-size:9px;letter-spacing:1px;color:var(--pe-edge)} .pe_so_timer{font-family:'headers';font-size:13px;color:#f0c437;animation:pe_tick 1s ease-in-out infinite} .pe_so_found{display:flex;align-items:center;justify-content:center;gap:7px;font-family:'headers'; font-size:11px;letter-spacing:2px;color:#3ce88a} .pe_so_found i{width:8px;height:8px;border-radius:50%;background:#3ce88a;box-shadow:0 0 10px #3ce88a} .pe_so_titel{margin:0;font-family:'headers';font-size:31px;letter-spacing:1px;text-align:center; text-shadow:0 5px 20px rgba(0,0,0,.6)} .pe_so_zijden{display:flex;gap:7px;align-items:stretch} .pe_so_zijden_3,.pe_so_zijden_4{flex-direction:column} .pe_so_solo{display:grid;grid-template-columns:1fr 1fr} .pe_zijde{flex:1;display:flex;flex-direction:column;gap:6px;padding:11px 8px;border-radius:18px; background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.15)} .pe_zijde_eigen{border-color:var(--pe-zijde)} .pe_zijde_label{font-family:'headers';font-size:10px;letter-spacing:2px;color:var(--pe-zijde)} .pe_zijde_lid{display:flex;align-items:center;gap:7px} .pe_zijde_lid img{width:34px;height:34px;border-radius:50%;border:2px solid var(--pe-zijde)} .pe_zijde_lid>div{flex:1;display:flex;flex-direction:column;text-align:left} .pe_zijde_lid>div>span{font-family:'headers';font-size:11px} .pe_zijde_lid>div>small{font-size:8px;color:rgba(255,255,255,.5)} .pe_zijde_lid i{width:8px;height:8px;border-radius:50%;flex:none} .pe_zijde_avg{margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1); font-family:'headers';font-size:11px;color:var(--pe-zijde)} .pe_so_pot{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:14px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)} .pe_so_pot small{font-size:10px;color:rgba(255,255,255,.54)} .pe_so_klaar{padding:8px 0;border-radius:12px;text-align:center;background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1);font-family:'headers';font-size:11px;letter-spacing:1px; color:rgba(255,255,255,.61)} .pe_readybtn{padding:16px 0;border-radius:18px;text-align:center;font-family:'headers';font-size:21px; letter-spacing:2px;background:linear-gradient(#ffc247,#f09a1e);color:#3a1f00; box-shadow:0 12px 30px rgba(240,196,55,.27);animation:pe_breathe 2.2s ease-in-out infinite} /* ── chat ────────────────────────────────────────────────────────────── */ .pe_chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-radius:18px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)} .pe_chat_kop{font-family:'headers';font-size:11px;letter-spacing:2px;color:#45adff} .pe_chat_tabs{display:flex;gap:5px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05)} .pe_chat_tabs a{flex:1;padding:6px 0;border-radius:999px;text-align:center;font-family:'headers'; font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.48)} .pe_chat_aan{background:linear-gradient(#7ccfff,#1f78dc);color:#03131f} .pe_chat_lijst{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow-y:auto;scrollbar-width:none} .pe_chat_lijst::-webkit-scrollbar{display:none} .pe_bericht{display:flex;gap:7px;align-items:flex-start} .pe_bericht img{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.18);flex:none} .pe_bericht div{display:flex;flex-direction:column;gap:2px;align-items:flex-start} .pe_bericht div>span{font-family:'headers';font-size:10px;color:#45adff} .pe_bericht div>span small{font-size:8px;color:rgba(255,255,255,.35)} .pe_bericht p{margin:0;font-size:11px;color:rgba(255,255,255,.84);background:rgba(255,255,255,.07); border-radius:11px;padding:6px 10px} /* systeemregel (join/bot/leave/kick + teamscore): gecentreerd, zonder avatar, als een stille tussenregel tussen de spelersberichten */ .pe_bericht.pe_bericht_sys{flex-direction:column;align-items:center;gap:2px;padding:2px 0} .pe_bericht.pe_bericht_sys p{background:none;padding:0;font-family:p;font-size:11px;line-height:1.35;font-style:italic;text-align:center;color:rgba(255,255,255,.5)} /* de 'headers'-bold heeft nauwelijks zijruimte: de spatie ervoor viel op iOS weg ("avg959MS") */ .pe_bericht.pe_bericht_sys p b{font-style:normal;font-family:'headers';font-size:9px;letter-spacing:.8px;color:rgba(255,255,255,.78);margin:0 3px} .pe_bericht.pe_bericht_sys small{font-size:8px;color:rgba(255,255,255,.28)} .pe_bericht_eigen{flex-direction:row-reverse} .pe_bericht_eigen div{align-items:flex-end} .pe_bericht_eigen div>span{color:#7fffdc} .pe_bericht_eigen p{background:#7fffdc;color:#08251c} .pe_chat_invoer{display:flex;gap:7px} .pe_chat_invoer input{flex:1;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);font-size:10px;color:#fff} .pe_chat_invoer a{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08); font-family:'headers';font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.7)} /* ── animations ──────────────────────────────────────────────────────── */ @keyframes pe_pulse{0%,100%{opacity:1}50%{opacity:.25}} @keyframes pe_tick{0%,100%{opacity:1}50%{opacity:.55}} @keyframes pe_bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes pe_spin{to{transform:rotate(360deg)}} @keyframes pe_hunt{0%,100%{opacity:.5}50%{opacity:1}} @keyframes pe_glow{0%,100%{transform:scale(.92);opacity:.25}50%{transform:scale(1.06);opacity:.5}} @keyframes pe_sweep{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-7px,-5px) rotate(8deg)}} @keyframes pe_breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}} @media (prefers-reduced-motion:reduce){ .pe_rangplaat img,.pe_radar_ring,.pe_radar_glow,.pe_radar_loep,.pe_so_timer,.pe_readybtn,.pe_live i,.pe_stoel_leeg,.pe_lid_leeg i, .pe_banner_klok span,.pe_banner::before,.pe_disc_frame_weekend::before,.pe_post_foil{animation:none} } /* ── V2-toevoegingen op het handover-pakket ───────────────────────────── */ /* ronde avatar-schil: templates leveren via avatar() met fallback */ .pe_avatar_rond{display:inline-flex;flex:none;border-radius:50%;overflow:hidden; /* iOS/WebKit: overflow:hidden + border-radius knipt een foto-avatar niet altijd rond zodra een voorouder transformeert/animeert (de drawer- slide) — de vierkante jpg-hoeken schemerden door ("squarish overflow", feedback 3 sep). Een radiale mask + eigen stacking-laag dwingt de ronde knip af; Chrome negeert 'm onschadelijk */ -webkit-mask-image:-webkit-radial-gradient(#fff,#000);isolation:isolate; -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .pe_avatar_rond img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:transparent; -webkit-user-select:none;user-select:none} .pe_lid .pe_avatar_rond{width:44px;height:44px;border:2px solid #45adff} .pe_lid_bot .pe_avatar_rond{border-color:#c19eff} .pe_lid_bot .pe_avatar_rond img{filter:grayscale(.5)} .pe_zijde_lid .pe_avatar_rond{width:34px;height:34px;border:2px solid var(--pe-zijde)} .pe_bericht .pe_avatar_rond{width:24px;height:24px;border:1px solid rgba(255,255,255,.18)} /* teamlobby-invite bovenin de drawer */ .pe_invite_banner{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:13px; background:linear-gradient(#0f3d31,#04140f);border:1px solid rgba(0,224,164,.5); box-shadow:0 0 16px rgba(0,224,164,.15)} .pe_invite_banner .pe_avatar_rond{width:32px;height:32px;border:2px solid #00e0a4} .pe_invite_banner div{flex:1;display:flex;flex-direction:column;gap:1px;text-align:left} .pe_invite_banner div span{font-family:'headers';font-size:12px} .pe_invite_banner div small{font-size:9px;color:#7fffdc} .pe_invite_banner b{padding:8px 13px;border-radius:9px;background:linear-gradient(#7fffdc,#00b382); font-family:'headers';font-size:11px;letter-spacing:1px;color:#03211a} /* invite-sheet (P0 · Invite friend) */ .pe_sheet{position:absolute;inset:0;display:flex;flex-direction:column;gap:11px;color:#fff; padding:calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 14px); box-sizing:border-box;background:linear-gradient(rgba(3,12,10,.62),rgba(0,0,0,.92))} .pe_vrienden{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none} .pe_vrienden::-webkit-scrollbar{display:none} .pe_vriend{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px; background:rgba(255,255,255,.05);border:1px solid rgba(0,224,164,.25)} .pe_vriend .pe_avatar_rond{width:40px;height:40px;border:2px solid #00e0a4} .pe_vriend>div{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left} .pe_vriend>div>span{font-family:'headers';font-size:14px} .pe_vriend>div>small{font-size:10px;color:rgba(255,255,255,.54)} .pe_vriend_uit{opacity:.55} .pe_vriend_uit .pe_avatar_rond{border-color:rgba(255,255,255,.25)} .pe_vriend_cta{flex:none;padding:9px 14px;border-radius:10px;background:linear-gradient(#7fffdc,#00b382); font-family:'headers';font-size:11px;letter-spacing:1px;color:#03211a} .pe_vriend_tag{flex:none;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08); font-family:'headers';font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.6)} /* standoff: leeg-stoel en uit-stand van de ready-knop */ .pe_zijde_lid_leeg{opacity:.6} .pe_readybtn_uit{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);box-shadow:none;animation:none} /* ── POST · de nieuwe uitslagkaarten (Post {{f.id}}) ──────────────────── */ .pe_overlay{position:fixed;inset:0;z-index:2147483000;background:#050109f6;color:#fff;display:flex} .pe_overlay_scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex} .pe_overlay_scroll::-webkit-scrollbar{display:none} .pe_overlay .pe_zoek{position:relative;inset:auto;flex:1} .pe_post{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px; padding:calc(env(safe-area-inset-top) + 18px) 15px 18px;box-sizing:border-box;min-height:100%; background:radial-gradient(circle at 50% 14%,rgba(240,196,55,.24),transparent 58%),linear-gradient(#050109cc,#050109)} .pe_post_team{background:radial-gradient(circle at 50% 14%,rgba(69,173,255,.24),transparent 58%),linear-gradient(#03080fcc,#03080f)} .pe_post_verlies{background:radial-gradient(circle at 50% 14%,rgba(243,67,54,.18),transparent 58%),linear-gradient(#0b0208cc,#0b0208)} .pe_post_koprij{display:flex;align-items:center;gap:8px;align-self:stretch} .pe_post_head{align-self:flex-start;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.54);text-transform:uppercase} .pe_post_koprij .pe_post_head{flex:1;align-self:center} .pe_post_titel{margin:0;font-family:'headers';font-size:38px;letter-spacing:1px;color:#f0c437; text-shadow:0 3px 0 #000,0 0 26px rgba(240,196,55,.53);animation:pe_post_pop .7s cubic-bezier(.34,1.56,.64,1) both} .pe_post_titel_team{font-size:32px;color:#45adff;text-shadow:0 3px 0 #000,0 0 26px rgba(69,173,255,.53)} .pe_post_verlies .pe_post_titel{color:#ff8f8f;text-shadow:0 3px 0 #000,0 0 22px rgba(243,67,54,.4)} .pe_post_sub{font-size:12px;color:rgba(255,255,255,.66);margin-top:-5px} /* MATCH PAYOUT (design/Claim_Rewards, PVP-tab) — vervangt de pot-plaat: tegels in de claim-jas (topglans + roterende rand, tint per zeldzaamheid) en een regelpaneel met de opbouw. Bij minder dan vier tegels blijven ze op kwartbreedte en centreren ze. */ .pe_post_payout{width:100%;display:flex;flex-direction:column;gap:7px;text-align:left} .pe_post_payout_kop{font-family:'headers';font-size:11px;letter-spacing:2px;color:#FFC46B;text-transform:uppercase} .pe_post_tegels{display:flex;justify-content:center;gap:7px} .pe_post_tegel{flex:0 1 calc(25% - 6px);min-width:0;padding:2px;border-radius:7px; background:color-mix(in srgb,var(--clm-tint) 17%,transparent)} .pe_post_tegel_in{position:relative;z-index:1;aspect-ratio:1/1.16;border-radius:5px;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; background:linear-gradient(177deg,#ffffff30 0%,#ffffff12 30%,transparent 31%),linear-gradient(180deg,#2e1450 0%,#180628 100%); box-shadow:inset 0 1px 0 #ffffff59} .pe_post_team .pe_post_tegel_in{background:linear-gradient(177deg,#ffffff30 0%,#ffffff12 30%,transparent 31%),linear-gradient(180deg,#123a52 0%,#061a28 100%)} .pe_post_tegel_gloed{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--clm-tint) 22%,transparent) 0%,transparent 68%)} .pe_post_tegel img{position:relative;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 4px #000000a6)} .pe_post_tegel b{position:relative;font-family:'headers';font-weight:normal;font-size:12px;line-height:1;color:#fff;text-shadow:0 2px 0 #000} .pe_post_tegel small{position:relative;font-family:'headers';font-size:7.5px;letter-spacing:1px;color:var(--clm-tint);text-transform:uppercase} .pe_post_tegel.clm_claimed .pe_post_tegel_in::after{content:'';position:absolute;inset:0;background:#0b031899} .pe_post_lijnen{border:1px solid #ffffff1a;border-radius:10px;background:#00000045;padding:10px 12px;display:flex;flex-direction:column;gap:7px} .pe_post_lijn{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#ffffff9c;text-align:left} .pe_post_lijn i{display:block;width:6px;height:6px;border-radius:50%;flex:none} .pe_post_lijn span{flex:1;min-width:0} .pe_post_lijn b{font-family:'headers';font-size:11px;font-weight:normal;color:#fff;white-space:nowrap} .pe_post_payout .pe_post_winnaars{margin-top:3px} /* Het 1v1-uitslagscherm vult het hele venster (feedback 13 sep): geen 20px zwevende kaart meer — de kop bovenaan, de CTA op de voet. */ #pvpResult.pe_vol{padding:0;align-items:stretch;justify-content:stretch} #pvpResult.pe_vol .pvp_result_inhoud{width:100%;max-width:none;height:100%;max-height:none} #pvpResult.pe_vol .pe_post{min-height:100%;border-radius:0} /* 1v1-uitslag op de ranked match summary: het oude scherm blijft in de DOM (opruiming via sluitPvpUitslag) maar is onzichtbaar en inert */ #pvpResult.pe_uitslag_weg{opacity:0 !important;pointer-events:none} .pe_post_xp{color:#b58cff!important} /* verlies-strook: wat je kwijt bent */ .pe_post_verloren{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:12px; flex-wrap:wrap;padding:10px 12px;border-radius:13px;background:rgba(18,4,10,.9);border:1px solid rgba(243,67,54,.4)} .pe_post_verloren span{display:inline-flex;align-items:center;gap:5px;font-family:'headers';font-size:15px;color:#ff8f8f} .pe_post_verloren img{width:15px;height:15px;object-fit:contain} .pe_post_verloren small{width:100%;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.44);text-transform:uppercase} /* "blocks harvested"-paneel */ .pe_post_blokken{width:100%;box-sizing:border-box;border:3px solid #4CAF50;border-radius:13px;padding:10px 11px; background:linear-gradient(#0d2a10,#050f06);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 0 #030a04; display:flex;flex-direction:column;gap:8px} .pe_post_blokken_rood{border-color:rgba(243,67,54,.55);background:linear-gradient(#2a0d10,#0f0506); box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 0 #0a0304} .pe_post_blokken_kop{display:flex;align-items:center;gap:8px} .pe_post_blokken_kop small{font-size:9px;letter-spacing:3px;color:#7CFC00;text-transform:uppercase} .pe_post_blokken_rood .pe_post_blokken_kop small{color:#ff8f8f} .pe_post_blokken_kop i{flex:1;height:1px;background:rgba(76,175,80,.27)} .pe_post_blokken_kop b{font-family:'headers';font-size:19px;color:#7CFC00} .pe_post_blokken_rood .pe_post_blokken_kop b{color:#ff8f8f} .pe_post_bordnoot{flex:none;font-size:9px;color:rgba(255,255,255,.54);letter-spacing:0;text-transform:none} .pe_post_meter{display:flex;gap:3px} .pe_post_blok{flex:1;height:10px;border-radius:3px} .pe_post_rankline{display:flex;align-items:center;gap:10px;background:#000;border:1px solid rgba(76,175,80,.33); border-radius:10px;padding:7px 10px} .pe_post_blokken_rood .pe_post_rankline{border-color:rgba(243,67,54,.33)} .pe_post_rankline img{width:22px;height:22px;object-fit:contain} .pe_post_rankline b{flex:1;text-align:left;font-family:'headers';font-size:13px;color:#f0c437;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .pe_divdown{background:#2b0f14;border-color:rgba(243,67,54,.45);color:#ff8f8f} /* eindtafel / verloren zijden */ .pe_post_lijst{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;flex:1;min-height:0} .pe_post_lijst>small{font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.44);text-transform:uppercase;text-align:left} .pe_post_rij{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px; background:#0d0320;border:1px solid #3a1a6b} .pe_post_team .pe_post_rij{background:#12040a;border-color:rgba(243,67,54,.33)} .pe_post_rij_win{background:#0d2a10;border-color:rgba(76,175,80,.55)} .pe_post_rij_eigen{box-shadow:0 0 0 1px rgba(255,255,255,.22)} .pe_post_rangnr{font-family:'headers';font-size:13px;color:#c19eff;width:18px;flex:none} .pe_post_rij .pe_avatar_rond{width:28px;height:28px;border:1px solid rgba(255,255,255,.2)} .pe_post_rij small{flex:1;text-align:left;font-size:11px;color:rgba(255,255,255,.54);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pe_post_rij b{font-family:'headers';font-size:13px;color:#fff} .pe_post_plus{font-size:10px;color:#7CFC00;width:34px;text-align:right;flex:none} .pe_post_min{font-size:10px;color:#ff5a5a;width:34px;text-align:right;flex:none} .pe_post_tag{font-family:'headers';font-size:12px;color:#ff8f8f;flex:none;width:24px;text-align:left} /* team-scorebord */ .pe_post_bord{width:100%;box-sizing:border-box;border:3px solid #45adff;border-radius:13px;padding:10px 11px; background:linear-gradient(#07293f,#03101c);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 0 #020a12; display:flex;flex-direction:column;gap:6px} .pe_post_bord .pe_post_blokken_kop small{color:#7fc9ff} .pe_post_bord .pe_post_blokken_kop i{background:rgba(69,173,255,.2)} .pe_post_bordrij{display:flex;align-items:center;gap:7px} .pe_post_bordrij .pe_post_tag{color:#7fc9ff;font-size:9px;width:20px} .pe_post_bordrij .pe_avatar_rond{width:24px;height:24px;border:1px solid rgba(255,255,255,.2)} .pe_post_bordnaam{font-family:'headers';font-size:12px;flex:0 0 58px;text-align:left;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pe_post_balk{flex:1;height:8px;border-radius:4px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12); overflow:hidden;display:block} .pe_post_balk i{display:block;height:100%;background:linear-gradient(90deg,#9fe6ff,#0b6fb8)} /* score mag NOOIT wikkelen ("67,880 %" op twee regels maakte elke rij dubbelhoog): vaste ondergrens, groeit mee met de tekst, balk krimpt */ .pe_post_bordscore{font-family:'headers';font-size:11px;color:#fff;flex:none;min-width:52px; white-space:nowrap;text-align:right} .pe_post_borddelta{font-size:9px;color:rgba(255,255,255,.54);flex:0 0 26px;text-align:right;white-space:nowrap} /* ingeklapte tegenstander-zijde (>6 stoelen): samenvattingsrij + leden */ .pe_post_zijde{display:flex;flex-direction:column;gap:6px} .pe_post_zijderij{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px; background:rgba(0,0,0,.35);border:1px solid rgba(127,201,255,.25);cursor:pointer} .pe_post_zijderij small{flex:1;text-align:left;font-family:'headers';font-size:10px;letter-spacing:1px; color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pe_post_zijdewin{flex:none;font-family:'headers';font-size:8px;letter-spacing:1px;color:#062b10; background:linear-gradient(#b8ffcf,#4CAF50);border-radius:4px;padding:2px 6px} .pe_post_zijdeavg{flex:none;font-family:'headers';font-size:11px;color:#7fc9ff;white-space:nowrap} .pe_post_chevron{flex:none;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.55); border-bottom:2px solid rgba(255,255,255,.55);transform:rotate(45deg) translateY(-2px);transition:transform .2s} .pe_post_zijdeleden{display:flex;flex-direction:column;gap:6px} .pe_post_zijde_dicht .pe_post_zijdeleden{display:none} .pe_post_zijde_dicht .pe_post_chevron{transform:rotate(-45deg) translateY(2px)} .pe_post_x2{font-style:normal;font-family:'headers';font-size:9px;color:#0b0318;background:#f0c437; border-radius:4px;padding:1px 4px;margin-left:4px;vertical-align:2px} /* winstreak-bonus op de eigen tegel: vlam-oranje naast de gouden card-tag */ .pe_post_streaktag{background:linear-gradient(#ffb03c,#ff7a3c);color:#3a1200} .pe_post_badges{display:flex;gap:6px;margin-top:3px} .pe_post_badge_mvp,.pe_post_badge_svp{flex:1;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.65); border:1px solid rgba(240,196,55,.4);border-radius:10px;padding:6px 8px} .pe_post_badge_svp{border-color:rgba(243,67,54,.4)} .pe_badge_chip{flex:none;font-family:'headers';font-size:8px;letter-spacing:1px;color:#3a2600; background:linear-gradient(#fff6cf,#f0c437);border-radius:4px;padding:3px 5px} .pe_badge_chip_svp{color:#ff8f8f;background:rgba(243,67,54,.15);border:1px solid rgba(243,67,54,.53)} .pe_post_badge_mvp small:last-child,.pe_post_badge_svp small:last-child{font-size:10px;color:rgba(255,255,255,.75);text-align:left} .pe_post_marge{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.65);border:1px solid #4CAF50; border-radius:10px;padding:7px 10px} .pe_post_verlies .pe_post_marge{border-color:rgba(243,67,54,.45)} .pe_post_marge img{width:15px;height:15px;object-fit:contain} .pe_post_marge small{flex:1;text-align:left;font-size:10px;color:rgba(255,255,255,.75)} .pe_post_marge b{font-family:'headers';font-size:11px;color:#7fdcff;background:rgba(69,173,255,.12); border:1px solid rgba(69,173,255,.4);border-radius:6px;padding:3px 7px;white-space:nowrap;flex:none} /* winnaars-tegels in de pot-plaat */ .pe_post_winnaars{display:flex;gap:7px;margin-top:9px;position:relative;z-index:2} .pe_post_winnaar{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(0,0,0,.65); border:2px solid #4CAF50;border-radius:11px;padding:8px 4px;box-shadow:0 0 16px rgba(76,175,80,.2)} .pe_post_winnaar .pe_avatar_rond{width:30px;height:30px;border:2px solid #4CAF50} .pe_post_winnaar b{font-family:'headers';font-size:10px;color:#7CFC00} .pe_post_winnaar span{display:inline-flex;align-items:center;gap:3px;font-family:'headers';font-size:14px; color:#7CFC00;text-shadow:0 2px 0 #000} .pe_post_winnaar span img{width:12px;height:12px;object-fit:contain} .pe_post_winnaar small{font-size:8px;color:rgba(255,255,255,.54)} .pe_post_cta{width:calc(100% - 24px);box-sizing:border-box;text-align:center;margin-top:auto} @keyframes pe_post_pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}} /* transform-only (batterij): zelfde veeg, maar zonder layout per frame */ @keyframes pe_foil{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(100vw + 76px))}} @media (prefers-reduced-motion:reduce){ .pe_post_titel{animation:none} } /* ── team-lobby naar de design-mock ──────────────────────────────────────── Kop (LOBBY · formaatnaam · pot), vergrendelde discipline, YOUR SIDE met stoelen + chips, actierij, chat met quick-pillen, OPPONENTS en de stake-plaat. De BODY ertussen scrollt; kop en stake-plaat staan vast. */ .pe_lobby_kop{display:flex;align-items:center;gap:8px;flex:none} /* ‹ BACK / ‹ BACK TO LOBBY als secundaire pil (zelfde familie als MESSAGE): een losse grijze tekst viel weg tegen de sterren (feedback 3 sep) */ .pe_terug{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px 0 11px;box-sizing:border-box; border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22); font-family:'headers';font-size:10px;letter-spacing:1px;color:#fff;line-height:1;white-space:nowrap; -webkit-tap-highlight-color:transparent} .pe_terug:active{background:rgba(255,255,255,.16)} .pe_lobby_titel{flex:none;margin:0;text-align:left;font-family:'headers';font-size:30px;letter-spacing:1px; color:#fff;text-shadow:0 3px 0 #000,0 0 22px rgba(0,224,164,.35)} .pe_potchip{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:12px; background:rgba(0,0,0,.6);border:1px solid rgba(240,196,55,.4);font-family:'headers';font-size:12px;color:#f0c437} .pe_potchip img{width:12px;height:12px;object-fit:contain} .pe_lock{flex:none;display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:12px; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)} .pe_lock_tegel{flex:none;padding:4px 9px 6px;border-radius:8px;font-family:'headers';font-size:11px; background:linear-gradient(#7fffdc,#00b382);color:#03211a;box-shadow:inset 0 -3px #027d5c} .pe_lock small{flex:1;text-align:left;font-size:9px;color:rgba(255,255,255,.54);line-height:1.25} .pe_lock b{flex:none;font-family:'headers';font-size:8px;letter-spacing:1px;color:#7fffdc} .pe_lobby_body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none; display:flex;flex-direction:column;gap:9px;padding-bottom:4px} .pe_lobby_body::-webkit-scrollbar{display:none} .pe_paneel{flex:none;display:flex;flex-direction:column;gap:7px;padding:9px 10px;border-radius:15px; background:linear-gradient(#052b23,#030f0c);border:2px solid rgba(0,224,164,.55)} .pe_paneel_opp{background:linear-gradient(#1a0740,#0a0119);border-color:rgba(193,158,255,.5)} .pe_paneel_kop{display:flex;align-items:center;gap:8px} .pe_paneel_kop span{font-family:'headers';font-size:10px;letter-spacing:2px;color:#7fffdc} .pe_paneel_opp .pe_paneel_kop span{color:#d9b3ff} .pe_paneel_kop i{flex:1;height:1px;background:rgba(0,224,164,.25)} .pe_paneel_opp .pe_paneel_kop i{background:rgba(193,158,255,.25)} .pe_paneel_chip{flex:none;padding:2px 7px;border-radius:6px;background:rgba(0,224,164,.12); border:1px solid rgba(0,224,164,.4);font-family:'headers';font-size:9px;color:#7fffdc} .pe_zit{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:12px;background:rgba(0,0,0,.35)} .pe_zit .pe_avatar_rond{width:38px;height:38px;border:2px solid #00e0a4;flex:none} .pe_zit_bot .pe_avatar_rond{border-color:#c19eff} .pe_zit_bot .pe_avatar_rond img{filter:grayscale(.5)} .pe_zit_mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left} .pe_zit_naam{display:flex;align-items:baseline;gap:6px} .pe_zit_naam b{font-family:'headers';font-size:14px} .pe_zit_tag{font-family:'headers';font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.5)} .pe_zit_klaar{color:#7fffdc} .pe_chips{display:flex;flex-wrap:wrap;gap:4px} .pe_chip{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:6px; background:rgba(0,0,0,.5);border:1px solid rgba(240,196,55,.3);font-size:9px;color:#f0c437} .pe_chip img{width:10px;height:10px;object-fit:contain} .pe_chip_cube{border-color:rgba(0,224,164,.45);color:#7fffdc} .pe_chip_streak{border-color:rgba(255,136,0,.45);color:#ffb03c} .pe_chip_bot{border-color:rgba(193,158,255,.45);color:#c19eff} .pe_zit_leeg{border:2px dashed rgba(0,224,164,.45);background:rgba(0,0,0,.25);animation:pe_hunt 2.2s ease-in-out infinite} .pe_zit_leeg i{width:38px;height:38px;border-radius:50%;border:2px dashed rgba(255,255,255,.28);flex:none; display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'headers'; font-size:17px;color:rgba(255,255,255,.4)} .pe_zit_leeg b{font-family:'headers';font-size:13px;color:#7fffdc;display:block;text-align:left} .pe_zit_leeg small{font-size:9px;color:rgba(255,255,255,.5)} .pe_acties{display:flex;gap:6px;margin-top:2px} .pe_actie{flex:1;padding:9px 4px 11px;border-radius:9px;text-align:center;font-family:'headers';font-size:12px; background:#031f19;border:1px solid rgba(0,224,164,.35);color:#fff} .pe_actie_prim{flex:1.3;background:linear-gradient(#7fffdc,#00b382);border-color:#7fffdc;color:#03211a; box-shadow:inset 0 -4px #027d5c} .pe_actie_bot{flex:.8;border-color:rgba(69,173,255,.45);color:#7fc9ff} .pe_actie_uit{opacity:.4} .pe_zoekpil{flex:none;display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:6px; background:rgba(0,0,0,.5);border:1px solid rgba(193,158,255,.4);font-size:9px;color:#d9b3ff} .pe_zoekpil i{width:6px;height:6px;border-radius:50%;background:#c19eff;animation:pe_pulse 1.1s ease-in-out infinite} .pe_opp_rij{display:flex;align-items:center;gap:6px} .pe_opp_stoel{width:24px;height:24px;border-radius:50%;border:1px dashed rgba(193,158,255,.55);flex:none; animation:pe_hunt 2.2s ease-in-out infinite} .pe_opp_rij small{margin-left:auto;text-align:right;font-size:9px;color:#d9b3ff} /* chat: kop met online-regel + quick-pillen */ .pe_chat_kopr{display:flex;align-items:center;gap:8px} .pe_chat_kopr .pe_chat_tabs{flex:1} .pe_chat_online{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:9px;color:#7fffdc} .pe_chat_online i{width:6px;height:6px;border-radius:50%;background:#7CFC00;display:inline-block} .pe_quick{display:flex;gap:5px} .pe_quick a{flex:1;padding:5px 2px 6px;border-radius:7px;text-align:center;font-size:9px;color:#7fffdc; background:rgba(0,0,0,.45);border:1px solid rgba(0,224,164,.35)} /* in de lobby is de chat een blok, geen vuller — de mock geeft 'm ~4 regels */ .pe_lobby_body .pe_chat{flex:none;max-height:210px} /* stake-plaat onderaan */ .pe_stakeplaat{flex:none;border:2px solid #f0c437;border-radius:13px;overflow:hidden; background:linear-gradient(#0f3d31,#04140f)} .pe_stakeplaat_kop{display:flex;align-items:center;gap:9px;padding:7px 11px} .pe_stakeplaat_kop small{font-size:9px;letter-spacing:2px;color:#f0c437;text-transform:uppercase} .pe_stakeplaat_kop b{margin-left:auto;font-family:'headers';font-size:19px;color:#fff;text-shadow:0 2px 0 #000} .pe_stakeplaat_kop small:last-child{margin-left:0;color:rgba(255,255,255,.5);letter-spacing:0} .pe_stakeplaat_cellen{display:flex;gap:6px;padding:7px 9px;background:#000;border-top:2px solid #f0c437} .pe_stakeplaat_cellen div{flex:1;padding:6px 5px;border-radius:8px;background:#04140f; border:1px solid rgba(0,224,164,.5)} .pe_stakeplaat_cellen div:last-child{border-color:rgba(240,196,55,.45)} .pe_stakeplaat_cellen b{display:block;font-family:'headers';font-size:10px;color:#7fffdc} .pe_stakeplaat_cellen div:last-child b{color:#f0c437} .pe_stakeplaat_cellen small{font-size:9px;color:rgba(255,255,255,.66)} .pe_status{flex:none;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 0 13px; border-radius:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15); font-family:'headers';font-size:15px;letter-spacing:1px;color:rgba(255,255,255,.6)} .pe_dot_puls{width:8px;height:8px;border-radius:50%;background:#00e0a4;animation:pe_pulse 1.2s ease-in-out infinite} /* POST · experience-regel (mock sluit de teamkaart hiermee af) */ .pe_post_xprij{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:9px 11px; border-radius:10px;background:#06202e;border:1px solid #3a1a6b} .pe_post_xprij img{width:20px;height:20px;object-fit:contain} .pe_post_xprij span{flex:1;text-align:left;font-size:11px;color:rgba(255,255,255,.7)} .pe_post_xprij b{font-family:'headers';font-size:15px;color:#b58cff} /* ── chat-kaart: stoel-uitnodiging (Ranked V2) ──────────────────────────── Leeft in de 1:1-thread naast de bestaande .chat_card-soorten. */ .pe_kaart{display:flex;flex-direction:column;gap:8px} .pe_kaart_kop{display:flex;align-items:center;gap:9px} .pe_kaart_fmt{flex:none;padding:6px 9px 8px;border-radius:9px;font-family:'headers';font-size:14px; background:linear-gradient(#7fffdc,#00b382);color:#03211a;box-shadow:inset 0 -3px #027d5c} .pe_kaart_kop div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left} .pe_kaart_kop b{font-family:'headers';font-size:14px;color:#fff} .pe_kaart_kop small{font-size:10px;color:rgba(255,255,255,.55)} .pe_kaart_stoelen{display:flex;align-items:center;gap:5px} .pe_kaart_stoelen i{width:14px;height:14px;border-radius:50%;flex:none} .pe_kaart_stoel_vol{background:#00e0a4;box-shadow:0 0 8px rgba(0,224,164,.55)} .pe_kaart_stoel_leeg{border:1px dashed rgba(255,255,255,.4);animation:pe_hunt 2.2s ease-in-out infinite} .pe_kaart_stoelen small{margin-left:auto;font-size:9px;color:rgba(255,255,255,.55)} .pe_kaart_actie{display:block;padding:11px 0 13px;border-radius:9px;text-align:center; font-family:'headers';font-size:13px;letter-spacing:1px} .pe_kaart_actie_join{background:linear-gradient(#7fffdc,#00b382);color:#03211a;box-shadow:inset 0 -4px #027d5c} .pe_kaart_actie_uit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.45)} /* ── rangplaat: de divisieblokjes die in de mock naast de rangnaam staan ── Deze ontbraken volledig; de plaat had alleen "IRON 1 · 0/4 BLOCKS" als tekst, terwijl het design 4 pillen toont (gevuld = disciplinekleur). */ /* LET OP de specificiteit: '.pe_rangplaat div' (0,1,1) zet ALLE divs in de plaat op flex-direction:column en won van een kale '.pe_rangregel' (0,1,0) — de blokjes stapelden daardoor onder de rangnaam i.p.v. ernaast. Deze selector is bewust even specifiek als de bron van het probleem. */ .pe_rangplaat .pe_rangregel{flex-direction:row;align-items:center;gap:5px;min-width:0; flex-wrap:nowrap;white-space:nowrap} .pe_rangplaat .pe_rangregel small{overflow:hidden;text-overflow:ellipsis;min-width:0} .pe_rangplaat .pe_rangregel small:last-child{flex:none;opacity:.75} .pe_rangblokjes{display:inline-flex;align-items:center;gap:2px;flex:none} .pe_rangblokjes i{width:9px;height:4px;border-radius:2px;background:rgba(255,255,255,.15)} .pe_rangblokjes i.vol{box-shadow:0 0 6px var(--pe-tick)} /* de "WEEKENDS ONLY"-balk staat op de gekleurde kaart: donker houden */ .pe_slot{background:rgba(8,2,20,.82);border-color:rgba(0,0,0,.4)} .pe_voet{color:rgba(0,0,0,.55)} /* ── het animerende artefact hoort ACHTER de kaarten ────────────────────── De hyperspace-/sterrencanvas wordt IN gehangen met z-index:1 (!important). Onze panelen stonden op z-index:auto en kregen de sterren dus dwars over de kaarten heen. Binnen dezelfde stacking context wint een hogere z-index — 2 is genoeg en laat de animatie zichtbaar als achtergrond staan, precies zoals in de mock. */ .pe_zoek,.pe_lobby,.pe_standoff,.pe_sheet{z-index:2} /* ── kaartdetails die de mock letterlijk voorschrijft ─────────────────── */ /* inzet-pil: muntenrij (gold · energy · diamonds zodra je divisie die vraagt) met YOUR STAKE eronder, gouden rand */ .pe_stake{flex-direction:column;align-items:flex-start;gap:2px;padding:3px 8px 3px 6px;border-radius:9px; background:#12042a;border:1px solid rgba(255,210,74,.35)} .pe_stake_munten{display:flex;align-items:center;gap:6px} .pe_stake_munten .pe_munt{font-size:12px;line-height:1} .pe_stake_munten .pe_munt img{width:12px;height:12px} .pe_stake_munten .pe_munt_energy,.pe_stake_munten .pe_munt_diamond{font-size:10px} .pe_stake>small{font-family:'headers';font-size:8px;letter-spacing:.4px;color:rgba(255,255,255,.44);line-height:1} /* potstapel in de always-on-rij: compacter dan op de weekendtegel */ .pe_prijs_rij{flex:none;gap:3px;padding:4px 7px;align-items:flex-end} .pe_prijs_rij .pe_munt{font-size:12px} .pe_prijs_rij .pe_prijs_extra{gap:6px} .pe_prijs_rij .pe_munt_energy,.pe_prijs_rij .pe_munt_diamond{font-size:9px} .pe_prijs_rij .pe_munt_energy img,.pe_prijs_rij .pe_munt_diamond img{width:11px;height:11px} /* formaatnaam + pips + lobbies links, pot en knop rechts */ .pe_rij_naam>span{font-family:'headers';font-size:14px;letter-spacing:.6px;color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45)} .pe_rij_naam small{font-family:'headers';font-size:8px;letter-spacing:.5px;color:rgba(255,255,255,.82); text-shadow:0 1px 2px rgba(0,0,0,.6)} .pe_rij_kop .pe_munt{color:#ffd24a;text-shadow:0 1px 2px rgba(0,0,0,.65)} .pe_rij_cta{padding:15px 14px;border-radius:11px;font-family:'headers';font-size:11px;letter-spacing:1.2px; background:linear-gradient(#ffe07a,#ef9c14);border:1px solid #fff3bd;color:#3a1f00; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 #b06a00} /* "WIN → SILVER 1 [meter] +1": donkere strook met groene rand */ .pe_winst_compact{flex-direction:row;align-items:center;gap:6px;padding:4px 7px;border-radius:10px; background:rgba(11,2,32,.65);border:1px solid rgba(60,232,138,.27)} .pe_winst_compact .pe_winst_titel{flex:none;font-size:8px;letter-spacing:.7px;color:rgba(60,232,138,.72)} .pe_winst_compact .pe_winst_rang{font-size:10px;letter-spacing:.4px;color:#fff;white-space:nowrap} .pe_winst_compact .pe_meter{flex:1;min-width:14px;gap:2px} .pe_winst_compact .pe_blok{height:4px;border-radius:3px;min-width:5px} .pe_winst_compact .pe_winst_plus{font-size:10px;color:#3ce88a} /* ── lobby naar design-frame T2 ("Team lobby full") ─────────────────────── Sober: BACK + disciplinepil, links uitgelijnde titel met subregel, YOUR TEAM-paneel met stoelrijen, de bot-team-schakelaar, teamchat en één grote SEARCH MATCH-knop. Géén stake-plaat/opponents-paneel: die staan niet in dit frame. De panelen zijn doorschijnend zodat de sterrenanimatie van erachter doorloopt. */ .pe_lobby_kop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none} .pe_disc_pil{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; background:rgba(255,255,255,.06);border:1px solid rgba(240,196,55,.35); font-family:'headers';font-size:11px;letter-spacing:2px;color:#f0c437} .pe_disc_pil i{width:7px;height:7px;border-radius:50%;flex:none} .pe_lobby_titelblok{flex:none;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left} .pe_lobby_sub{font-size:11px;color:#3ce88a;text-align:left} .pe_sheet_titel{color:#00e0a4;font-size:23px;text-shadow:0 3px 0 #000,0 0 24px rgba(0,224,164,.6)} .pe_paneel_team{background:rgba(255,255,255,.04);border:1px solid rgba(60,232,138,.24);border-radius:20px; padding:13px 12px;gap:9px} .pe_paneel_seats{font-family:'headers';font-size:11px;letter-spacing:1px;color:#3ce88a} .pe_zit{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px; background:rgba(255,255,255,.05)} /* kruisje rechtsboven (host): speler/bot uit de lobby zetten — tableKick. Het raakvlak is groter dan het rondje zelf (::before) zodat het op een telefoon te treffen is zonder de HOST/IN-chip eronder te verdringen */ .pe_zit_kickbaar .pe_zit_rechts{padding-top:10px} .pe_zit_kick{position:absolute;top:-7px;right:-7px;z-index:2;width:24px;height:24px;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center;border-radius:50%; background:#1a2330;border:1px solid rgba(255,255,255,.32);box-shadow:0 2px 8px rgba(0,0,0,.45); color:#fff;font-family:'headers';font-size:15px;line-height:1; -webkit-tap-highlight-color:transparent} .pe_zit_kick::before{content:'';position:absolute;inset:-9px} .pe_zit_kick:active{background:#ff5d6c;color:#fff;border-color:#ff5d6c} .pe_zit_kick[aria-busy]{opacity:.4;pointer-events:none} .pe_zit .pe_avatar_rond{width:44px;height:44px;border:2px solid #7fffdc;flex:none} .pe_zit_bot .pe_avatar_rond{border-color:#c19eff} .pe_zit_bot .pe_avatar_rond img{filter:grayscale(.5)} .pe_zit_mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left} .pe_zit_mid b{font-family:'headers';font-size:14px;color:#fff} .pe_zit_mid small{font-size:10px;color:rgba(255,255,255,.54)} .pe_zit_chip{flex:none;padding:4px 9px;border-radius:999px;font-family:'headers';font-size:9px;letter-spacing:1px} .pe_zit_chip_host{background:rgba(127,255,220,.12);color:#7fffdc} .pe_zit_chip_in{background:rgba(60,232,138,.12);color:#3ce88a} .pe_zit_chip_bot{background:rgba(193,158,255,.15);color:#c19eff} /* bot-team-schakelaar als eigen rij (frame T2) */ .pe_botrij{flex:none;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px; background:rgba(0,0,0,.4);border:1px solid rgba(69,173,255,.27)} .pe_botrij div{flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left} .pe_botrij div span{font-family:'headers';font-size:13px;letter-spacing:1px;color:#45adff} .pe_botrij div small{font-size:10px;color:rgba(255,255,255,.54)} .pe_botrij input{position:absolute;opacity:0;pointer-events:none} .pe_botrij .pe_switch{width:48px;height:27px} .pe_botrij .pe_switch::after{width:21px;height:21px} .pe_botrij.pe_bot_aan .pe_switch{background:#45adff;box-shadow:0 0 16px rgba(69,173,255,.33)} .pe_botrij.pe_bot_aan .pe_switch::after{transform:translateX(21px);background:#03131f} /* de chat vult de rest; SEARCH MATCH staat er vast onder. Minimaal ~5 regels (feedback 3 sep: "way too compacted") — de lobby scrolt dan; met de invoer in focus groeit het vak vloeiend door (pe_chat_open, gezet op focusin) zodat je typend ziet waarop je antwoordt */ .pe_lobby .pe_chat{flex:1;min-height:230px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1); transition:min-height .38s cubic-bezier(.22,.8,.3,1)} .pe_lobby .pe_chat.pe_chat_open{min-height:340px} .pe_lobby .pe_chat_lijst{min-height:96px} .pe_lobby .pe_chat_kop{color:#45adff} .pe_zoekbtn{flex:none;padding:17px 0;border-radius:18px;text-align:center;font-family:'headers';font-size:20px; letter-spacing:2px;background:linear-gradient(#5ec0ff,#2a86e0);color:#02121f; box-shadow:0 12px 30px rgba(69,173,255,.27)} /* ── invite-sheet: infocellen + lijstkop ─────────────────────────────── */ .pe_cellen{flex:none;display:flex;gap:6px} .pe_cellen div{flex:1;padding:7px 8px;border-radius:10px;text-align:left; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)} .pe_cellen small{display:block;font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.44)} .pe_cellen b{font-family:'headers';font-size:14px;color:#fff} .pe_cel_goud{color:#f0c437 !important} .pe_lijstkop{flex:none;display:flex;align-items:center;gap:8px} .pe_lijstkop small{font-size:9px;letter-spacing:2px;color:#7fffdc;text-transform:uppercase} .pe_lijstkop small:last-child{color:rgba(255,255,255,.54);letter-spacing:1px} .pe_lijstkop i{flex:1;height:1px;background:rgba(0,224,164,.2)} .pe_vriend{background:linear-gradient(rgba(5,39,32,.9),rgba(2,16,13,.9));border:1px solid rgba(0,224,164,.33); border-radius:13px} .pe_vriend .pe_avatar_rond{width:42px;height:42px;border:2px solid #00e0a4} .pe_laden{display:flex;gap:6px;justify-content:center;padding:26px 0} .pe_laden i{width:9px;height:9px;border-radius:50%;background:rgba(0,224,164,.55); animation:pe_pulse 1.1s ease-in-out infinite} .pe_laden i:nth-child(2){animation-delay:.18s} .pe_laden i:nth-child(3){animation-delay:.36s} /* T2 zet de kop op space-between; er is geen deler-streepje meer */ .pe_paneel_team .pe_paneel_kop{justify-content:space-between} .pe_paneel_team .pe_paneel_kop span{color:#45adff} /* De globale huisknop staat op z-index 99999 en dus bovenop onze schermvullende panelen; BACK / BACK TO LOBBY neemt die functie over. */ /* De legacy zoekkop van (h1 "Searching opponent" → "opponent found", de loep, de oude tegenstanderhouder) schreef de pc-motor op het gevonden-moment opnieuw vol; door het doorschijnende V2-scherm stond er dan een tweede, grijs OPPONENT FOUND onder het onze. Zolang een V2-scherm vult blijft de legacy kop weg — openVol() leegt 'm al, dit dekt de latere schrijvers. */ body.pe_vol_open searchingOpponent>h1,body.pe_vol_open searchingOpponent>.searchingHolder, body.pe_vol_open searchingOpponent>.oponnentHolder,body.pe_vol_open searchingOpponent>.info{display:none !important} /* ── T1/T2-verfijning: typografie, uitlijning en compacte bediening ─────── Gemeten probleem: het chat-invoerveld en de knop werden 58px hoog doordat een globale regel een hoogte oplegt — de mock houdt ze op ~34px. Daarom hier een expliciete hoogte i.p.v. alleen padding. */ .pe_lobby_titelblok{align-items:center;text-align:center;gap:4px} .pe_lobby_titel{font-size:32px;text-align:center;letter-spacing:1px} .pe_lobby_sub{font-family:p;font-size:11px;color:rgba(255,255,255,.62);text-align:center} .pe_lobby_sub_klaar{color:#3ce88a} /* fontfamilies zoals de mock ze zet */ .pe_zit_mid small{font-family:p;font-size:10px;color:rgba(255,255,255,.54)} .pe_zit_mid b{font-family:'headers';font-size:14px;letter-spacing:.3px} .pe_paneel_seats{font-family:p;font-size:11px;letter-spacing:0;color:rgba(255,255,255,.54);text-transform:none} .pe_paneel_seats.vol{font-family:'headers';letter-spacing:1px;color:#3ce88a;text-transform:uppercase} .pe_paneel_team .pe_paneel_kop span{font-family:'headers';font-size:12px;letter-spacing:2px;color:#45adff} /* open stoel (T1): plus + de twee knoppen op één gestippelde rij */ .pe_leegrij{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:14px; border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.02)} .pe_leegrij>i{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center; justify-content:center;font-style:normal;font-family:'headers';font-size:18px; color:rgba(255,255,255,.45);border:1px dashed rgba(193,158,255,.55)} .pe_actie{flex:1;height:40px;padding:0 6px;display:flex;align-items:center;justify-content:center; border-radius:11px;font-family:'headers';font-size:12px;letter-spacing:.6px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#fff} .pe_actie_prim{background:linear-gradient(#5ec0ff,#2a86e0);border-color:#8fd4ff;color:#02121f; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(69,173,255,.3)} .pe_actie_uit{opacity:.4} /* tegenstander-hint (T1) */ .pe_hintrij{flex:none;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:16px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)} .pe_hintrij>i{width:26px;height:26px;flex:none;border-radius:50%;background:rgba(255,255,255,.12)} .pe_hintrij small{font-family:p;font-size:11px;color:rgba(255,255,255,.6);text-align:left} /* chatbediening compact — de mock houdt invoer en knop op één regelhoogte */ .pe_chat_kop{font-family:'headers';font-size:11px;letter-spacing:2px} .pe_chat_invoer{align-items:center;gap:8px} .pe_chat_invoer input{height:36px;min-height:0;padding:0 13px;font-family:p;font-size:11px; border-radius:999px;line-height:36px} .pe_chat_invoer a{height:36px;min-height:0;padding:0 15px;display:inline-flex;align-items:center; justify-content:center;border-radius:999px;font-family:'headers';font-size:10px;letter-spacing:1px; background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)} .pe_bericht p{font-family:p;font-size:11px} .pe_bericht div>span{font-family:'headers';font-size:10px} /* onderste knop: actief als het team vol is, anders de stand */ .pe_zoekbtn{height:54px;padding:0;display:flex;align-items:center;justify-content:center;gap:9px} .pe_zoekbtn_uit{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.45);box-shadow:none;font-size:17px} /* ── feedbackronde sep 2026 ───────────────────────────────────────────────── 1) alle primaire knoppen in de huisstijl van de PLAY-knop midden in het dok (goud verloop, zwarte ring, lichte binnenrand, glans-::before bovenop); 2) bot-team-schakelaar op designmaat; 3) eligible-band met drie trofeeën; 4) rang + divisieblokken, showcase en ping per speler; 5) grotere chat- tekst + "… IS TYPING"; 6) team-search onmiskenbaar; 7) uitnodigingskaart met venster/pot/inzet. */ /* 1 · primaire knoppen = dok-PLAY — in de event-rij draagt alleen de HETE tegel de gouden skin; de andere PLAY blijft de ghost (design D3/D4) */ .pe_zoekbtn:not(.pe_zoekbtn_uit),.pe_readybtn:not(.pe_readybtn_uit),.pe_actie_prim,.pe_rij_cta, .pe_kaart_actie_join,.pe_vriend_cta,.pe_invite_banner b,.pe_tegel_heet .pe_cta{ position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(0deg,#e09b00 0%,#FFC107 100%); border:0;color:#3a1c00;font-family:'headers';text-shadow:none; box-shadow:0 0 0 3px #000,inset 0 0 0 2px #ffe07a} .pe_zoekbtn:not(.pe_zoekbtn_uit)::before,.pe_readybtn:not(.pe_readybtn_uit)::before,.pe_actie_prim::before, .pe_rij_cta::before,.pe_kaart_actie_join::before,.pe_invite_banner b::before,.pe_vriend_cta::before, .pe_tegel_heet .pe_cta::before{ content:'';display:block;position:absolute;top:0;left:0;width:calc(100% - 6px);height:44%;margin:3px; background:#fff;opacity:.32;border-radius:6px;pointer-events:none;z-index:1} .pe_zoekbtn:not(.pe_zoekbtn_uit),.pe_readybtn:not(.pe_readybtn_uit){border-radius:14px; box-shadow:0 0 0 4px #000,inset 0 0 0 3px #ffe07a;font-size:24px;letter-spacing:1px;margin:4px} .pe_readybtn:not(.pe_readybtn_uit){animation:pe_breathe 1.6s ease-in-out infinite} .pe_zoekbtn_klaar{animation:pe_breathe 1.6s ease-in-out infinite} .pe_actie_prim{border-radius:11px} .pe_rij_cta,.pe_rij_cta_team{background:linear-gradient(0deg,#e09b00 0%,#FFC107 100%);color:#3a1c00; box-shadow:0 0 0 3px #000,inset 0 0 0 2px #ffe07a;border:0;border-radius:10px;font-size:12px} .pe_kaart_actie_join{border-radius:10px;font-size:15px} .pe_vriend_cta{border-radius:10px;font-size:12px;letter-spacing:.6px;display:flex;flex-direction:column; align-items:center;gap:1px;min-width:74px} .pe_vriend_cta small{font-family:p;font-size:8px;letter-spacing:0;color:#5a2e00;position:relative;z-index:2} .pe_invite_banner b{border-radius:9px} .pe_tegel .pe_cta,.pe_tegel_heet .pe_cta{border-radius:9px} /* de tekst boven de glans houden waar hij anders wegvaalt */ .pe_zoekbtn:not(.pe_zoekbtn_uit)>*,.pe_readybtn:not(.pe_readybtn_uit)>*{position:relative;z-index:2} /* 2 · bot-team-schakelaar op designmaat */ .pe_botrij .pe_switch{width:62px;height:34px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);box-sizing:border-box} .pe_botrij .pe_switch::after{top:3px;left:3px;width:26px;height:26px} .pe_botrij.pe_bot_aan .pe_switch{background:#45adff;border-color:#8fd4ff;box-shadow:0 0 18px rgba(69,173,255,.4)} .pe_botrij.pe_bot_aan .pe_switch::after{transform:translateX(28px);background:#03131f} .pe_botrij{padding:14px 14px;border-radius:18px;cursor:pointer} .pe_botrij_uit{opacity:.7} .pe_botrij_uit .pe_switch{cursor:default} /* 3 · eligible band — drie trofeeën, de middelste (jij/host) uitgelicht */ .pe_band{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;box-sizing:border-box; padding:9px 10px 10px;border-radius:16px;background:rgba(0,0,0,.42);border:1px solid rgba(255,210,74,.32)} .pe_band_kop{font-family:'headers';font-size:10px;letter-spacing:2px;color:#ffd24a} .pe_band_rij{display:flex;align-items:flex-end;justify-content:center;gap:14px;width:100%} .pe_band_cel{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;flex:1} .pe_band_cel img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) grayscale(.35);opacity:.8} .pe_band_cel b{font-family:'headers';font-size:8px;letter-spacing:1.2px;color:rgba(255,255,255,.5)} .pe_band_cel small{font-family:'headers';font-size:10px;letter-spacing:.4px;color:#fff;white-space:nowrap} .pe_band_eigen img{width:64px;height:64px;filter:drop-shadow(0 0 14px rgba(255,210,74,.55));opacity:1} .pe_band_eigen b{color:#ffd24a} .pe_band_eigen small{font-size:12px;color:#ffd24a} .pe_band_compact{padding:7px 8px 8px;gap:4px} .pe_band_compact .pe_band_rij{gap:10px} .pe_band_compact .pe_band_cel img{width:34px;height:34px} .pe_band_compact .pe_band_eigen img{width:50px;height:50px} .pe_band_buiten .pe_band_eigen img{filter:drop-shadow(0 0 12px rgba(255,90,90,.6)) grayscale(.2)} .pe_band_buiten .pe_band_eigen b,.pe_band_buiten .pe_band_eigen small{color:#ff7b7b} /* 1v1-zoekscherm: de band vervangt de vaste drie trofeeën in .info */ searchingOpponent .info .pe_band{background:transparent;border:0;padding:0;width:100%} searchingOpponent .info .pe_band_cel img{width:64px;height:64px} searchingOpponent .info .pe_band_eigen img{width:96px;height:96px} searchingOpponent .info .pe_band_cel b{font-size:9px} searchingOpponent .info .pe_band_cel small{font-size:12px} searchingOpponent .info .pe_band_eigen small{font-size:15px} searchingOpponent .info.active.pickleague .pe_band_eigen img{animation-duration:.8s} /* 4 · per speler: rang + divisieblokken, showcase, ping */ .pe_rang{display:inline-flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap} .pe_rang img{width:16px;height:16px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .pe_rang b{font-family:'headers';font-size:10px;letter-spacing:.5px;color:#ffd24a;white-space:nowrap} .pe_rang em{font-family:'headers';font-style:normal;font-size:8px;letter-spacing:1px;padding:2px 6px;border-radius:999px; background:rgba(255,90,90,.16);border:1px solid rgba(255,123,123,.5);color:#ff7b7b} .pe_rang_buiten b{color:rgba(255,255,255,.6)} .pe_blokjes{display:inline-flex;align-items:center;gap:2px;flex:none} .pe_blokjes i{width:9px;height:5px;border-radius:2px;background:rgba(255,255,255,.15)} .pe_blokjes i.vol{background:#3ce88a;box-shadow:0 0 6px rgba(60,232,138,.6)} .pe_showcase{display:flex;margin-top:2px} .pe_showcase .pvp_showcase{margin:0;gap:3px;justify-content:flex-start} .pe_showcase .pvp_showcase__cel{width:22px;height:22px;border-radius:6px;border-width:1px} .pe_showcase .pvp_showcase__cel img{width:16px;height:16px} .pe_showcase .pvp_showcase__label{display:none} .pe_ping{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);font-family:'headers';font-size:8px; letter-spacing:.6px;color:rgba(255,255,255,.75);white-space:nowrap} .pe_ping i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);flex:none} .pe_ping_goed i{background:#3ce88a;box-shadow:0 0 6px #3ce88a} .pe_ping_matig i{background:#ffb347;box-shadow:0 0 6px #ffb347} .pe_ping_slecht i{background:#ff5a5a;box-shadow:0 0 6px #ff5a5a} .pe_ping_leeg{opacity:.5} .pe_zit_rechts,.pe_zijde_rechts{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px} .pe_zijde_rechts{gap:4px} .pe_zijde_lid .pe_zijde_rechts i{width:8px;height:8px} .pe_zijde_lid>div .pe_rang b{font-size:8px} .pe_zijde_lid>div .pe_rang img{width:13px;height:13px} .pe_zijde_lid .pe_showcase .pvp_showcase__cel{width:18px;height:18px} .pe_zijde_lid .pe_showcase .pvp_showcase__cel img{width:13px;height:13px} .pe_zit_mid .pe_rang{margin:1px 0} .pe_cellen .pe_ping{font-size:10px;padding:4px 9px} /* invite-sheet rijen: rang/venster/presence/showcase */ .pe_vriend{align-items:flex-start} .pe_vriend_mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;align-items:flex-start} .pe_vriend_mid>span{font-family:'headers';font-size:14px} .pe_vriend_status{display:inline-flex;align-items:center;gap:5px;font-family:p;font-size:10px;color:rgba(255,255,255,.6)} .pe_vriend_status i{width:7px;height:7px;border-radius:50%;flex:none} .pe_vriend_buiten{border-color:rgba(255,123,123,.35)} .pe_vriend_buiten .pe_avatar_rond{border-color:rgba(255,123,123,.5)} .pe_vriend_buiten .pe_rang b{color:#ff7b7b} .pe_vriend_buiten .pe_vriend_tag{color:#ff7b7b;border-color:rgba(255,123,123,.4)} .pe_vriend_uit{opacity:1} .pe_vriend_uit .pe_vriend_mid>span{color:rgba(255,255,255,.7)} .pe_vriend .pe_avatar_rond{border-color:rgba(255,255,255,.25);margin-top:2px} .pe_vriend .pe_avatar_online{border-color:#00e0a4} .pe_vriend_tag{align-self:center;font-family:'headers';font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.6)} .pe_vriend_tag_ok{background:rgba(60,232,138,.14);color:#3ce88a;border:1px solid rgba(60,232,138,.4)} .pe_vriend_cta{align-self:center} .pe_vriend_cta_push{background:linear-gradient(0deg,#c98600 0%,#f4b400 100%)} /* 5 · chat: grotere tekst, hogere invoer, "… IS TYPING" */ .pe_bericht p{font-family:p;font-size:13px;line-height:1.35;padding:6px 10px} .pe_bericht div>span{font-family:'headers';font-size:11px} .pe_bericht div>span small{font-size:9px} .pe_bericht .pe_avatar_rond{width:28px;height:28px} .pe_chat_invoer input{height:42px;box-sizing:border-box;line-height:40px;font-size:14px;padding:0 15px} .pe_chat_invoer a{height:42px;box-sizing:border-box;font-size:11px;padding:0 17px} .pe_quick a{font-size:10px;padding:6px 2px 7px} .pe_typt{display:flex;align-items:center;gap:3px;padding:2px 4px;align-self:flex-start} .pe_typt i{width:6px;height:6px;border-radius:50%;background:#45adff;animation:pe_pulse 1s ease-in-out infinite} .pe_typt i:nth-child(2){animation-delay:.2s} .pe_typt i:nth-child(3){animation-delay:.4s} .pe_typt span{margin-left:5px;font-family:'headers';font-size:9px;letter-spacing:1px;color:#45adff} /* 6 · team search: radar + titel die niet te missen zijn */ .pe_tz_radar{position:relative;width:132px;height:132px;flex:none;display:flex;align-items:center;justify-content:center} .pe_tz_radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--pe-edge);opacity:0; animation:pe_radar 2.4s ease-out infinite} .pe_tz_radar i:nth-child(2){animation-delay:.8s} .pe_tz_radar i:nth-child(3){animation-delay:1.6s} .pe_tz_radar b{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);border:2px dashed var(--pe-edge);font-family:'headers';font-size:26px;color:#fff; animation:pe_hunt 1.6s ease-in-out infinite} .pe_tz_radar b::after{content:'?';font-size:16px;margin-left:2px;color:rgba(255,255,255,.6)} @keyframes pe_radar{0%{transform:scale(.52);opacity:.95}100%{transform:scale(1.05);opacity:0}} .pe_tz_titel{font-size:26px;letter-spacing:1.5px;text-align:center;line-height:1.1;animation:pe_tick 1.4s ease-in-out infinite} .pe_tz_sub{font-family:p;font-size:11px;color:rgba(255,255,255,.66);text-align:center;margin-top:-8px} .pe_tz_kop .pe_dot_puls{display:inline-block;margin-right:6px;vertical-align:middle} .pe_tz_zoekt{border-color:var(--pe-edge);animation:pe_hunt 2.2s ease-in-out infinite} /* 7 · uitnodigingskaart: venster, pot, inzet */ .pe_kaart .pe_band{background:rgba(0,0,0,.3);border-color:rgba(255,210,74,.25)} .pe_kaart_cellen{display:flex;gap:6px} .pe_kaart_cellen div{flex:1;min-width:0;padding:7px 8px;border-radius:10px;text-align:left; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:2px} .pe_kaart_cellen div>small{font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.44);text-transform:uppercase} .pe_kaart_cellen b{display:flex;flex-wrap:wrap;gap:5px;font-family:'headers';font-size:12px;color:#fff} .pe_kaart_cellen .pe_munt{font-size:12px} .pe_kaart_ok{color:#3ce88a !important;font-family:'headers';letter-spacing:.5px;text-transform:none !important} .pe_kaart_tekort{color:#ff7b7b !important;font-family:'headers';letter-spacing:.5px;text-transform:none !important} /* standoff-zijden zijn smal (3v3 = twee kolommen van ~190px): alles compacter */ .pe_zijde_lid>div{min-width:0} .pe_zijde_lid>div .pe_rang{gap:3px} .pe_zijde_lid .pe_blokjes i{width:7px;height:4px} .pe_zijde_lid .pe_showcase{margin-top:1px} .pe_zijde_lid .pe_showcase .pvp_showcase{gap:2px} .pe_zijde_lid .pe_ping{padding:2px 5px;font-size:7px;gap:3px} .pe_zijde_lid .pe_ping i{width:5px;height:5px} .pe_so_zijden_3 .pe_zijde_lid .pe_showcase,.pe_so_zijden_4 .pe_zijde_lid .pe_showcase{display:none} .pe_so_zijden_3 .pe_zijde_lid .pe_blokjes,.pe_so_zijden_4 .pe_zijde_lid .pe_blokjes{display:none} /* chat-placeholder was bijna onleesbaar op de donkere invoer */ .pe_chat_invoer input::placeholder{color:rgba(255,255,255,.38)} /* ── T3 · team search (mock "Team search") ─────────────────────────────── Deze klassen bestonden alleen in de template — het scherm rendert sinds de lobby-rebuild ongestyled (reuze-avatars). Mock: eigen zijde op slot in een groen omrand paneel, VS, gestippeld "OPPOSING TEAM — SEARCHING" paneel met vraagtekens dat ademt, teller + balk, botrij en CANCEL onderaan. */ /* doorschijnend, zodat de bewegende sterrenachtergrond van searchingOpponent — net als op de lobby en het solo-zoekscherm — zichtbaar blijft (feedback 4 sep) */ .pe_tz{gap:12px;overflow-y:auto;background:radial-gradient(ellipse at 50% 28%,rgba(27,111,196,.5) 0%,rgba(11,55,103,.55) 46%,rgba(3,8,15,.78) 82%)} .pe_tz_paneel{width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px 12px;border-radius:20px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);flex:none} .pe_tz_eigen{border-color:rgba(60,232,138,.35)} .pe_tz_eigen .pe_tz_kop{color:#3ce88a} .pe_tz_kop{display:block;font-family:'headers';font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.55);text-align:left} .pe_tz_rij{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .pe_tz_lid{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px} .pe_tz_lid .pe_avatar_rond{width:54px;height:54px;border:2px solid #45adff;box-sizing:border-box} .pe_tz_lid:first-child .pe_avatar_rond{border-color:#7fffdc} .pe_tz_lid>span:last-child{font-family:'headers';font-size:9px;letter-spacing:.5px;color:rgba(255,255,255,.75);max-width:64px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pe_tz_lid:first-child>span:last-child{color:#7fffdc} .pe_tz_lid_bot .pe_avatar_rond{border-color:#c19eff;filter:grayscale(.5)} .pe_tz_lid_bot>span:last-child{color:#c19eff} .pe_tz_vraag{width:54px;height:54px;border-radius:50%;border:2px dashed rgba(255,255,255,.28);display:flex;align-items:center; justify-content:center;font-family:p;font-size:18px;font-style:normal;color:rgba(255,255,255,.4);box-sizing:border-box} .pe_tz_zoekt{border-style:dashed} .pe_tz_gevonden{border-color:rgba(255,176,60,.5)} .pe_tz_gevonden .pe_tz_kop{color:#ffb03c} .pe_tz_vs{font-family:'headers';font-size:20px;color:#ffb03c;animation:pe_bob 1.8s ease-in-out infinite;flex:none} .pe_tz_vs_klein{font-size:14px;opacity:.8} .pe_tz_status{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;flex:none} .pe_tz_status>b{font-family:'headers';font-size:13px;letter-spacing:2px;color:#fff} .pe_tz_status .pe_zoek_bar b{background:linear-gradient(90deg,#45adff,#7fffdc)} .pe_tz_status small{font-family:'headers';font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.6)} .pe_tz_status small span{color:#45adff} .pe_tz_voet{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:10px;flex:none} .pe_tz_botrij{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:16px;background:rgba(0,0,0,.4); border:1px solid rgba(69,173,255,.25)} .pe_tz_botrij i{width:8px;height:8px;border-radius:50%;background:#45adff;animation:pe_pulse 1.4s ease-in-out infinite;flex:none} .pe_tz_botrij span{flex:1;font-family:p;font-size:10px;color:rgba(255,255,255,.62);text-align:left} .pe_tz_botrij span b{color:#45adff} .pe_tz .pe_annuleer{margin-top:0} .pe_annuleer_uit{opacity:.5;font-size:12px} /* ── P1 · speler-lade (pre-profiel) ───────────────────────────────────── Een EIGEN body-drawer (.bottom_drawer-schil) bóven de flow: z-index 100 ligt over (99) en onder de toasts (99999); met _boven gaat hij ook over de POST-overlay (2147483000). De inhoud scrollt van binnen (max 90vh), zoals de picker. Kop = avatar 66px + naam + presence, dan de DRIE rang-chips als tabs (actieve chip: volle kleur + rand in de disciplinekleur), het cijferpaneel van die discipline, en de voet MESSAGE · INVITE TO SEAT / VIEW PROFILE. */ .bottom_drawer.pe_speler_vel{z-index:100} .bottom_drawer.pe_speler_vel_boven{z-index:2147483100} .pe_sp_lade{padding:0 !important;background:transparent !important} /* het zwevende ::before-handvat uit — deze lade draagt de greep BINNEN het vel (pe_sp_greep), zelfde maat en afstand als pm_greep in de game-mode- picker: dezelfde "main drawer interface" dus (feedback 5 sep) */ .bottom_drawer__content.pe_sp_lade:before{display:none} .pe_sp_greep{flex:none;text-align:center;line-height:0;margin-bottom:-3px} .pe_sp_greep i{display:inline-block;width:44px;height:4px;border-radius:3px;background:#ffffff33} .pe_speler{width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;gap:9px;box-sizing:border-box; padding:10px 13px calc(12px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0; border-top:1px solid rgba(255,255,255,.14);color:#fff;text-align:left;--pe-edge:#f5c542; background:radial-gradient(ellipse at 50% -6%,rgba(0,224,164,.26) 0%,rgba(69,173,255,.12) 38%,#040d0b 76%),#040d0b} .pe_speler_focus{--pe-edge:#f5c542} .pe_speler_speed{--pe-edge:#4bb4ff} .pe_speler_awareness{--pe-edge:#c56cff} .pe_speler>*{width:100%;box-sizing:border-box} .pe_speler .pe_laden{padding:34px 0} .pe_sp_kop{display:flex;align-items:center;gap:12px;padding:2px 2px 0;flex:none} .pe_avatar_rond.pe_sp_avatar{width:66px;height:66px;border:3px solid rgba(255,255,255,.28);box-sizing:border-box; box-shadow:0 0 22px rgba(0,0,0,.5);background:rgba(0,0,0,.4)} .pe_avatar_rond.pe_sp_avatar.pe_avatar_online{border-color:#00e0a4;box-shadow:0 0 22px rgba(0,224,164,.4)} .pe_sp_tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .pe_sp_naam{font-family:'headers';font-size:24px;line-height:1;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pe_sp_sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:p;font-size:10px;letter-spacing:.4px;color:rgba(255,255,255,.62)} .pe_sp_sub i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:2px;flex:none} .pe_sp_kroon{color:#f0c437;font-family:'headers';font-size:9px;letter-spacing:1px} .pe_sp_vriend{color:#00e0a4;font-family:'headers';font-size:9px;letter-spacing:1px} .pe_sp_sluit{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center; align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:18px;line-height:1} /* de drie rang-chips als tabs */ .pe_sp_chips{display:flex;gap:6px;flex:none} .pe_sp_chip{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:7px 7px;border-radius:12px; background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);opacity:.6; transition:opacity .15s,border-color .15s,box-shadow .15s,background .15s} .pe_sp_chip img{width:26px;height:26px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .pe_sp_chip>div{display:flex;flex-direction:column;gap:2px;min-width:0} .pe_sp_chip small{font-family:p;font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.55)} .pe_sp_chip b{font-family:'headers';font-size:10px;letter-spacing:.5px;color:var(--pe-edge);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pe_sp_chip .pe_blokjes i{width:8px;height:4px} .pe_sp_chip .pe_blokjes i.vol{background:var(--pe-edge);box-shadow:none} .pe_sp_chip_aan{opacity:1;border-color:var(--pe-edge);box-shadow:0 0 0 1px var(--pe-edge),0 6px 18px rgba(0,0,0,.5); background:linear-gradient(rgba(255,255,255,.08),rgba(0,0,0,.5))} .pe_sp_chip_aan small{color:#fff} .pe_sp_chip_aan::after{content:'';position:absolute;left:50%;bottom:-7px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg); background:#0b1714;border-right:1px solid var(--pe-edge);border-bottom:1px solid var(--pe-edge)} /* cijferpaneel van de actieve discipline */ .pe_sp_stats{display:flex;flex-direction:column;gap:8px;padding:10px 10px 9px;border-radius:14px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-top:2px solid var(--pe-edge)} .pe_sp_cellen{display:flex;gap:6px} .pe_sp_cellen div{background:rgba(255,255,255,.05);padding:7px 7px} .pe_sp_cellen b{font-size:15px} .pe_sp_rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pe_sp_rij>small{font-family:p;font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.44)} .pe_sp_vorm{display:inline-flex;gap:3px} .pe_sp_vorm i{width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; font-family:'headers';font-style:normal;font-size:9px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.35)} .pe_sp_vorm .pe_sp_w{background:rgba(60,232,138,.2);color:#3ce88a;border:1px solid rgba(60,232,138,.45)} .pe_sp_vorm .pe_sp_l{background:rgba(255,123,123,.16);color:#ff7b7b;border:1px solid rgba(255,123,123,.4)} .pe_sp_vorm .pe_sp_d{background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)} .pe_sp_rij .pe_sp_totaal{margin-left:auto;font-family:p;font-size:9px;letter-spacing:.3px;color:rgba(255,255,255,.62)} .pe_sp_totaal b{font-family:'headers';font-size:9px;color:#ffb03c} .pe_sp_samen{display:flex;align-items:center;gap:6px;font-family:p;font-size:10px;line-height:1.3;color:rgba(255,255,255,.72)} .pe_sp_samen i{width:6px;height:6px;border-radius:50%;background:var(--pe-edge);flex:none} .pe_sp_showcase{display:flex;justify-content:flex-start} .pe_sp_showcase .pe_showcase{margin-top:0} .pe_sp_showcase .pe_showcase .pvp_showcase__cel{width:40px;height:40px;border-radius:10px} .pe_sp_showcase .pe_showcase .pvp_showcase__cel img{width:30px;height:30px} /* voet: MESSAGE (secundair, links) + INVITE TO SEAT / VIEW PROFILE */ .pe_sp_voet{display:flex;gap:8px;flex:none;padding-top:2px} .pe_sp_btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;border-radius:12px; font-family:'headers';font-size:13px;letter-spacing:.8px;text-align:center;box-sizing:border-box;position:relative;line-height:1.1} .pe_sp_btn_sec{flex:0 0 38%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff} .pe_sp_btn_prim{background:linear-gradient(#7fffdc,#00b382);color:#022b1f;border:1px solid rgba(255,255,255,.35); box-shadow:0 4px 0 #005a3f,0 8px 20px rgba(0,179,130,.35)} .pe_sp_btn_prim small{font-family:p;font-size:8px;letter-spacing:0;color:#004a35;margin-top:2px} .pe_sp_btn_profiel{background:linear-gradient(#ffd85c,#f0a500);color:#3d2300;box-shadow:0 4px 0 #7a3a00,0 8px 20px rgba(240,165,0,.3)} .pe_sp_btn_weg{background:linear-gradient(#ff9d9d,#e04b4b);color:#3a0000;box-shadow:0 4px 0 #7a1010} .pe_sp_btn_tag{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.25);color:rgba(255,255,255,.6);font-size:10px;letter-spacing:1px} .pe_sp_btn_ok{background:rgba(60,232,138,.14);color:#3ce88a;border:1px solid rgba(60,232,138,.4)} .pe_sp_btn_wacht{opacity:.6;pointer-events:none} .pe_sp_voet_bevestig{flex-direction:column;gap:7px;padding:9px 10px;border-radius:14px; background:rgba(255,123,123,.1);border:1px solid rgba(255,123,123,.35)} .pe_sp_voet_bevestig>small{font-family:p;font-size:10px;line-height:1.35;color:#ffc0c0;text-align:center} .pe_sp_voet_bevestig>div{display:flex;gap:8px;width:100%} /* tikbare avatars/namen — overal in de flow behalve de HUD-kaarten */ [pvp-speler],.pe_zit_tik{cursor:pointer} .pe_tiknaam{font-style:normal;text-decoration:underline dotted rgba(255,255,255,.35);text-underline-offset:2px} /* invite-sheet: MESSAGE links van INVITE */ .pe_vriend>.pe_vriend_acties{display:flex;flex-direction:row;align-items:center;gap:6px;flex:none;align-self:center} .pe_vriend_msg{flex:none;padding:9px 9px;border-radius:10px;font-family:'headers';font-size:10px;letter-spacing:.8px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff} .pe_vriend_acties .pe_vriend_cta,.pe_vriend_acties .pe_vriend_tag{align-self:auto} /* monoliet-vensters (1:1-chat, profiel) boven onze lagen: in de flow boven , vanuit de POST-kaart boven de uitslag-overlay */ body.pe_vol_open #chatthread .top_overlayed,body.pe_vol_open #chatthread .top_overlayed_underlay{z-index:100} body.pe_boven_uitslag #chatthread .top_overlayed,body.pe_boven_uitslag #chatthread .top_overlayed_underlay, body.pe_boven_uitslag #gamerprofile .top_overlayed,body.pe_boven_uitslag #gamerprofile .top_overlayed_underlay{z-index:2147483100} /* ── secundaire knoppen = ghost-ontwerp van de GAMEMODE-lade (DUEL/CONTINUE: .cl-btn-frame + .cl-btn-secondary) — feedback 3 sep: één secundaire knopfamilie over alle V2-schermen. Zwarte 4px rand via box-shadow, 2px binnenrand, donkere vulling, headers 13px. ────────────────────────────── */ .pe_annuleer,.pe_tz .pe_annuleer,.pe_actie:not(.pe_actie_prim),.pe_terug,.pe_sp_btn_sec{ background:#00000073;border:2px solid #ffffff2b;border-radius:10px;box-shadow:0 0 0 4px #000; font-family:'headers';font-size:13px;letter-spacing:1px;color:#ffffffab;text-align:center; -webkit-tap-highlight-color:transparent} .pe_annuleer{padding:13px 0;margin-left:4px;margin-right:4px;width:calc(100% - 8px)} .pe_annuleer:active,.pe_terug:active,.pe_actie:not(.pe_actie_prim):active,.pe_sp_btn_sec:active{background:#00000099;color:#fff} .pe_annuleer_uit{opacity:.5;font-size:11px;letter-spacing:.6px} .pe_terug{border-radius:10px;min-height:34px;padding:0 13px 0 10px;font-size:11px;margin:4px 4px 4px 4px} .pe_acties{gap:10px;padding:4px} .pe_actie:not(.pe_actie_prim){font-size:12px;letter-spacing:.6px} .pe_actie_bot{color:#7fc9ff} .pe_sp_voet{gap:12px;padding:4px 4px 6px} .pe_sp_btn_sec{border-radius:10px} /* zoekschermen: de huisknop is weg, CANCEL onderaan is de uitweg */ .pe_zoek .pe_annuleer{margin-bottom:4px} /* ── T3 · bot-TEAM-schakelaar: het blauwe lobby-ontwerp (62×34 switch), nu op het zoekscherm; gast = disabled, >2 zijden = vergrendeld ───────────── */ .pe_bot_team{border-color:rgba(69,173,255,.25);border-radius:18px;padding:14px 14px;cursor:pointer} .pe_bot_team div span{color:#45adff} .pe_bot_team .pe_switch{width:62px;height:34px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-sizing:border-box} .pe_bot_team .pe_switch::after{top:3px;left:3px;width:26px;height:26px} .pe_bot_team.pe_bot_aan .pe_switch{background:#45adff;border-color:#8fd4ff;box-shadow:0 0 18px rgba(69,173,255,.4)} .pe_bot_team.pe_bot_aan .pe_switch::after{transform:translateX(28px);background:#03131f} .pe_bot_team.pe_bot_uit,.pe_bot_gast{opacity:.7} .pe_bot_team.pe_bot_uit div span{color:rgba(255,255,255,.7)} .pe_bot_gast .pe_switch{cursor:default} .pe_tz_voet .pe_bot{margin-top:0} .pe_tz.pe_zoek_botaan .pe_zoek_band .pe_band_eigen img{filter:drop-shadow(0 0 16px rgba(69,173,255,.6))} .pe_tz.pe_zoek_botaan .pe_zoek_bar b{background:linear-gradient(90deg,#45adff,#7fffdc)} /* ── vaste voeten: de onderste knop (CANCEL / READY / CLAIM / MESSAGE-INVITE) kleeft aan de onderrand van de scroller en is altijd bereikbaar zonder scrollen — op elk scherm (feedback 4 sep). Zelfde recept als .pe_lobby_voet: de scroller heeft onderaan geen padding, de voet draagt die (incl. safe-area) en een donkere fade zodat doorschuivende inhoud er niet doorheen schijnt. ── */ .pe_zoek{overflow-y:auto;scrollbar-width:none;padding-bottom:0} .pe_zoek::-webkit-scrollbar{display:none} .pe_zoek_voet,.pe_tz_voet{position:sticky;bottom:0;z-index:3;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px; width:calc(100% + 40px);box-sizing:border-box;margin:auto -20px 0;padding:12px 20px calc(env(safe-area-inset-bottom) + 20px); background:linear-gradient(rgba(28,6,54,0),rgba(28,6,54,.92) 40%);pointer-events:none} .pe_zoek_voet>*,.pe_tz_voet>*{pointer-events:auto} .pe_zoek_voet .pe_bot,.pe_zoek .pe_zoek_voet .pe_bot{margin-top:0} .pe_tz_voet{background:linear-gradient(rgba(3,8,15,0),rgba(3,8,15,.9) 40%)} .pe_zoek_gevonden .pe_zoek_voet{opacity:0;pointer-events:none;transition:opacity .3s} /* de post-kaarten scrollen in .pe_overlay_scroll; daar geen onder-padding op de scroller */ .pe_overlay .pe_zoek{overflow:visible;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)} /* standoff: de tafel scrolt als hij niet past, READY blijft staan; het chatvak houdt een bruikbare minimumhoogte i.p.v. tot nul te krimpen */ .pe_standoff{overflow-y:auto;scrollbar-width:none;padding-bottom:0} .pe_standoff::-webkit-scrollbar{display:none} .pe_standoff .pe_chat{min-height:170px} .pe_so_voet{position:sticky;bottom:0;z-index:3;flex:none;display:flex;flex-direction:column;gap:11px; margin:0 -14px;padding:8px 14px calc(env(safe-area-inset-bottom) + 14px); background:linear-gradient(rgba(3,8,15,0),rgba(3,8,15,.94) 36%);pointer-events:none} .pe_so_voet>*{pointer-events:auto} /* P1 speler-lade: MESSAGE / INVITE TO SEAT onderaan de scrollende lade */ .pe_speler{padding-bottom:0} .pe_speler .pe_sp_voet{position:sticky;bottom:0;z-index:3;margin:0 -13px;width:calc(100% + 26px);box-sizing:border-box; padding:8px 17px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(4,13,11,0),rgba(4,13,11,.96) 40%)} /* POST-kaarten: CLAIM/CONTINUE onderaan de scroller */ .pe_post{padding-bottom:0} .pe_post_voet{position:sticky;bottom:0;z-index:3;flex:none;display:flex;justify-content:center;width:calc(100% + 30px);box-sizing:border-box; margin:auto -15px 0;padding:10px 15px calc(env(safe-area-inset-bottom) + 18px); background:linear-gradient(rgba(5,1,9,0),rgba(5,1,9,.95) 40%)} .pe_post_voet .pe_post_cta{margin-top:0} /* ── T0 · join or create + T0b · browse open lobbies (sep 2026) ────────── Publieke teamlobby's: T0 toont CREATE/JOIN naast elkaar met een OPEN LOBBIES-preview (max 3), T0b de volledige bladerlijst (max 5, kijk-leases server-side). BACK linksboven is de ghost-secundair; de QUICK JOIN-knoppen dragen de primaire glans (ontwerpeis) op het blauwe designverloop. Achtergrond semi-transparant: de sterren van searchingOpponent blijven zichtbaar (regel 1.111.104.0). */ .pe_kies{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;color:#fff; padding:calc(env(safe-area-inset-top) + 18px) 16px 0; box-sizing:border-box;overflow-y:auto;scrollbar-width:none; background:linear-gradient(rgba(3,8,15,.58),rgba(3,8,15,.9))} .pe_kies::-webkit-scrollbar{display:none} .pe_kies_kaarten{flex:none;display:flex;gap:11px} .pe_kkaart{flex:1;display:flex;flex-direction:column;gap:9px;padding:15px 13px;border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.45)} .pe_kkaart_maak{background:linear-gradient(#0f3550,#071c2b);border:1px solid rgba(69,173,255,.4)} .pe_kkaart_join{background:linear-gradient(#123a2e,#071c17);border:1px solid rgba(60,232,138,.35)} .pe_kkaart>i{font-size:20px;font-style:normal} .pe_kkaart>span{font-family:'headers';font-size:16px;letter-spacing:1px;color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45);text-align:left;line-height:1.25} .pe_kkaart>small{font-family:p;font-size:10px;color:rgba(255,255,255,.61);text-align:left;text-wrap:pretty;flex:1} .pe_kbtn{display:block;padding:11px 0;border-radius:13px;text-align:center; font-family:'headers';font-size:11px;letter-spacing:1.2px; position:relative;overflow:hidden;isolation:isolate} .pe_kbtn::before{content:'';display:block;position:absolute;top:0;left:0;width:calc(100% - 6px);height:44%; margin:3px;background:#fff;opacity:.32;border-radius:6px;pointer-events:none;z-index:1} .pe_kbtn_blauw{background:linear-gradient(#7ccfff,#1f78dc);color:#04203a; box-shadow:0 0 0 3px #000,inset 0 0 0 2px #cfeaff} .pe_kbtn_groen{background:linear-gradient(#84f5bb,#17a862);color:#053322; box-shadow:0 0 0 3px #000,inset 0 0 0 2px #d3ffe8} .pe_kies_lobbys{flex:1;min-height:120px;display:flex;flex-direction:column;gap:9px;padding:12px;border-radius:18px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1)} .pe_kies_lkop{flex:none;display:flex;align-items:center;justify-content:space-between} .pe_kies_lkop span{font-family:'headers';font-size:11px;letter-spacing:2px;color:#3ce88a} .pe_kies_lkop small{font-family:p;font-size:10px;color:rgba(255,255,255,.54)} .pe_lob_lijst{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none;min-height:0} .pe_lob_lijst::-webkit-scrollbar{display:none} .pe_lob_rij{flex:none;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px; background:rgba(255,255,255,.04);transition:opacity .25s} .pe_lob_top{background:rgba(255,255,255,.06);border:1px solid rgba(60,232,138,.24)} .pe_lob_avatar{width:38px;height:38px;flex:none;border:2px solid #45adff;border-radius:50%;overflow:hidden} .pe_lob_avatar img,.pe_lob_avatar svg{width:100%;height:100%;display:block} .pe_lob_mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start} .pe_lob_naam{font-family:'headers';font-size:13px;letter-spacing:.4px;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65);text-transform:uppercase;display:flex;align-items:center;gap:6px; white-space:nowrap;overflow:hidden;max-width:100%} .pe_lob_naam b{font-family:'headers';font-size:11px;color:rgba(255,255,255,.66)} .pe_lob_vriend{font-family:'headers';font-size:8px;letter-spacing:.8px;font-style:normal;color:#7fffdc; padding:2px 6px;border-radius:999px;background:rgba(127,255,220,.14);flex:none} .pe_lob_mid>small{font-family:p;font-size:9px;color:rgba(255,255,255,.54);text-align:left} .pe_lob_pips{display:flex;align-items:center;gap:4px} .pe_lob_pips i{width:7px;height:7px;border-radius:2px;flex:none} .pe_lob_pip_vol{background:#3ce88a;box-shadow:0 0 6px rgba(60,232,138,.5)} .pe_lob_pip_bot{background:#c19eff} .pe_lob_pip_leeg{background:rgba(255,255,255,.16)} .pe_lob_pips small{font-family:'headers';font-size:8px;letter-spacing:.5px;color:rgba(255,255,255,.82)} .pe_lob_join{flex:none;padding:11px 13px;border-radius:12px;font-family:'headers';font-size:10px;letter-spacing:1px; border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7)} .pe_lob_join_prim{position:relative;overflow:hidden;isolation:isolate;border:0;color:#053322; background:linear-gradient(#84f5bb,#17a862);box-shadow:0 0 0 3px #000,inset 0 0 0 2px #d3ffe8} .pe_lob_join_prim::before{content:'';display:block;position:absolute;top:0;left:0;width:calc(100% - 6px);height:44%; margin:3px;background:#fff;opacity:.32;border-radius:5px;pointer-events:none;z-index:1} .pe_lob_weg{opacity:.42} .pe_lob_weg .pe_lob_join{border-color:rgba(255,90,60,.5);color:#ffb03c} .pe_lob_leeg{flex:1;display:flex;align-items:center;justify-content:center;text-align:center; font-family:p;font-size:11px;color:rgba(255,255,255,.45);padding:14px 10px;text-wrap:pretty} .pe_kies_voetnoot{flex:none;font-family:p;font-size:9px;color:rgba(255,255,255,.35);text-align:left} .pe_kies_hint{flex:none;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:16px; background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)} .pe_kies_hint>i{font-size:15px;font-style:normal;flex:none} .pe_kies_hint small{font-family:p;font-size:10px;color:rgba(255,255,255,.61);text-align:left;text-wrap:pretty} .pe_kies_hint b{color:#45adff} /* vaste voet (recept .pe_lobby_voet): QUICK JOIN altijd in beeld */ .pe_kies_voet{position:sticky;bottom:0;z-index:3;flex:none;display:flex;flex-direction:column; margin:auto -16px 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 14px); background:linear-gradient(rgba(3,8,15,0),rgba(3,8,15,.94) 42%);pointer-events:none} .pe_kies_voet>*{pointer-events:auto} .pe_kwik{display:block;width:100%;box-sizing:border-box;padding:15px 0;border-radius:18px;text-align:center; font-family:'headers';font-size:16px;letter-spacing:2px;color:#04203a; background:linear-gradient(#7ccfff,#1f78dc); box-shadow:0 0 0 3px #000,inset 0 0 0 2px #cfeaff; position:relative;overflow:hidden;isolation:isolate} .pe_kwik::before{content:'';display:block;position:absolute;top:0;left:0;width:calc(100% - 6px);height:44%; margin:3px;background:#fff;opacity:.32;border-radius:9px;pointer-events:none;z-index:1} .pe_browse_live{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;flex:none; background:rgba(255,255,255,.06);border:1px solid rgba(60,232,138,.35); font-family:'headers';font-size:11px;letter-spacing:2px;color:#3ce88a} .pe_browse_live i{width:7px;height:7px;border-radius:50%;background:#3ce88a;animation:pe_pulse 1.4s ease-in-out infinite} .pe_filterrij{flex:none;display:flex;gap:7px;flex-wrap:wrap} .pe_filter{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);font-family:'headers';font-size:10px;letter-spacing:1px; color:rgba(255,255,255,.61)} .pe_filter_aan{background:linear-gradient(#84f5bb,#17a862);border-color:#d3ffe8;color:#053322} .pe_lob_lijst_groot .pe_lob_rij{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05)} /* ── T1/T2 · LOBBY ACCESS (PUBLIC/PRIVATE) ────────────────────────────── Kleuraccent volgt de stand: groen = open, paars = besloten (mock). */ .pe_toegang{flex:none;display:flex;flex-direction:column;gap:9px;padding:13px 14px;border-radius:18px; background:rgba(0,0,0,.4)} .pe_toegang_pub{border:1px solid rgba(60,232,138,.27)} .pe_toegang_priv{border:1px solid rgba(193,158,255,.27)} .pe_toegang_kop{display:flex;align-items:center;gap:12px} .pe_toegang_kop>span{flex:1;font-family:'headers';font-size:13px;letter-spacing:1px;text-align:left} .pe_toegang_pub .pe_toegang_kop>span{color:#3ce88a} .pe_toegang_priv .pe_toegang_kop>span{color:#c19eff} .pe_toegang_pils{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);flex:none} .pe_toegang_pil{padding:6px 12px;border-radius:999px;font-family:'headers';font-size:10px;letter-spacing:1px; color:rgba(255,255,255,.54)} .pe_toegang_pil_pub{background:linear-gradient(#84f5bb,#17a862);border:1px solid #d3ffe8;color:#053322} .pe_toegang_pil_priv{background:linear-gradient(#d9c2ff,#8a52e0);border:1px solid #ece0ff;color:#241041} .pe_toegang>small{font-family:p;font-size:10px;color:rgba(255,255,255,.61);text-align:left;text-wrap:pretty} .pe_toegang_gast .pe_toegang_pils{opacity:.75} /* +100%-tag op de altijd-open laddertrede (1v1v1/2v2v2/5v5v5) in de drawer */ .pe_rij_ribbon{flex:none;font-family:'headers';font-size:9px;letter-spacing:.5px;color:#3ce88a; padding:3px 6px;border-radius:7px;background:rgba(60,232,138,.13);border:1px solid rgba(60,232,138,.3)} /* wie typt zoekt niet: met een open chat vouwt de sticky lobby-voet weg — anders lag de (uitgeschakelde) SEARCH-balk over de SEND-knop heen zodra het LOBBY ACCESS-paneel de chat onder de vouw duwde */ .pe_lobby.pe_voet_weg .pe_lobby_voet{opacity:0;pointer-events:none;transition:opacity .25s} .pe_lobby.pe_voet_weg .pe_lobby_voet>*{pointer-events:none} /* gast-zicht op LOBBY ACCESS: slotje vóór de pillen + host-regel eronder — de schakelaar is zichtbaar host-bezit (eigenaarsfeedback 5 sep) */ .pe_toegang_slot{flex:none;font-size:12px;font-style:normal;opacity:.8} .pe_toegang_gast .pe_toegang_pils{opacity:.55;filter:saturate(.55)} .pe_toegang_gast .pe_toegang_pil{cursor:default} .pe_toegang_host{font-family:'headers';font-size:9px;letter-spacing:.8px;color:rgba(255,255,255,.5);text-align:left} .pe_toegang_pub.pe_toegang_gast .pe_toegang_host{color:rgba(60,232,138,.75)} .pe_toegang_priv.pe_toegang_gast .pe_toegang_host{color:rgba(193,158,255,.78)} /* verlopen stoel-uitnodiging in de chat: de lobby bestaat niet meer (live lobby-veld van de server) of de invite-tijd is om — kaart gedempt, EXPIRED-chip i.p.v. een knop */ .pe_kaart_verlopen{opacity:.62;filter:saturate(.45)} .pe_kaart_verlopen .pe_kaart_actie_uit{color:rgba(255,255,255,.45);letter-spacing:1.5px} /* T3: één regel per team, óók bij 5 stoelen (eigenaarsfeedback 5 sep) — de rij mag nooit wrappen; de tegels krimpen mee en de avatar blijft 1:1 via aspect-ratio (width volgt de tegel, height volgt de width) */ .pe_tz_rij{flex-wrap:nowrap;gap:8px} .pe_tz_lid{flex:0 1 64px;width:auto;min-width:0} .pe_tz_lid .pe_avatar_rond{width:100%;max-width:54px;height:auto;aspect-ratio:1/1} .pe_tz_lid>span:last-child{max-width:100%} .pe_tz_vraag{flex:0 1 54px;width:100%;max-width:54px;height:auto;aspect-ratio:1/1;min-width:0;box-sizing:border-box} /* ── weekend-kaartchroom (design D3/D4 "Drawer solo/team weekend") ──────── In het weekend draagt de disciplinekaart het DONKERE eventontwerp: een 2px verloopframe in de disciplinekleuren (150°, eindigend op #ffd85c) met een shimmer-veeg, daarbinnen een donker vlak (#22063a → #0c0221) met bovenin een radiale gloed in de disciplinekleur. De rangplaat verliest zijn pil (de kaart ís al donker) en de disciplinenaam kleurt mee. Alles hier is strikt weekend-scoped: doordeweeks blijft de gevulde D1/D2-kaart staan. */ .pe_disc_frame_weekend{position:relative;overflow:hidden;padding:2px;border-radius:17px; background:linear-gradient(150deg,var(--pe-rand2),var(--pe-rand3) 60%,#ffd85c); box-shadow:0 8px 22px rgba(0,0,0,.5)} .pe_disc_frame_weekend::before{content:'';position:absolute;top:-40%;bottom:-40%;left:-14%;width:44px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.61),transparent); transform:skewX(-18deg);animation:pe_shimmer 4.2s ease-in-out infinite;pointer-events:none} .pe_disc_weekend{border-radius:15px;background:linear-gradient(#22063a,#0c0221); box-shadow:none;padding:7px 8px 8px;gap:7px} .pe_disc_weekend .pe_disc_glans{height:100%; background:radial-gradient(ellipse at 50% -12%,var(--pe-gloed),transparent 60%)} .pe_disc_weekend .pe_rangplaat{background:none;border:0;box-shadow:none;padding:3px 0} .pe_disc_weekend .pe_rangplaat span{color:var(--pe-edge)} .pe_disc_weekend .pe_wint{color:rgba(255,255,255,.63);text-shadow:none} /* de scheidingsteksten (WINNER TAKES ALL-voetnoot + ALWAYS ON-kop) waren op de donkere weekendkaart onleesbaar zwart — wit zodra de kaart donker is */ .pe_disc_weekend .pe_voet{color:rgba(255,255,255,.44)} .pe_disc_weekend .pe_altijd_kop{color:rgba(255,255,255,.55);text-shadow:none} .pe_disc_weekend .pe_altijd_kop i{background:rgba(255,255,255,.13)} /* ── P2 · PREPARE YOURSELF — wapenkamer vóór zoeken/lobby (5 sep 2026) ─── Naar het classic prepare-scherm: twee card-tegels met voorraadbadge (zoals de boosterbatterijen), twee slots eronder, gouden CONTINUE. */ .pe_prep_rij{flex:none;display:flex;gap:11px} .pe_prep_kaart{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px; padding:16px 12px 13px;border-radius:20px;background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.14);transition:border-color .2s,box-shadow .2s} .pe_prep_kaart img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))} .pe_prep_kaart>span{font-family:'headers';font-size:13px;letter-spacing:1px;color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45)} .pe_prep_kaart>small{font-family:p;font-size:10px;color:rgba(255,255,255,.61);text-align:center;text-wrap:pretty} .pe_prep_tal{position:absolute;top:-9px;left:-6px;min-width:24px;box-sizing:border-box;padding:4px 7px; border-radius:999px;background:linear-gradient(#8a5cff,#5a2ea6);border:2px solid rgba(255,255,255,.75); font-family:'headers';font-size:12px;color:#fff;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.5)} .pe_prep_stand{font-style:normal;font-family:'headers';font-size:9px;letter-spacing:1.2px; padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)} .pe_prep_aan{border-color:#3ce88a;box-shadow:0 0 18px rgba(60,232,138,.3),inset 0 1px 0 rgba(255,255,255,.2); background:linear-gradient(rgba(60,232,138,.12),rgba(255,255,255,.04))} .pe_prep_aan .pe_prep_stand{background:linear-gradient(#84f5bb,#17a862);color:#053322} .pe_prep_kaart_p.pe_prep_aan{border-color:#ffd24a;box-shadow:0 0 18px rgba(255,210,74,.3),inset 0 1px 0 rgba(255,255,255,.2); background:linear-gradient(rgba(255,210,74,.12),rgba(255,255,255,.04))} .pe_prep_kaart_p.pe_prep_aan .pe_prep_stand{background:linear-gradient(#ffe07a,#ef9c14);color:#3a1f00} .pe_prep_op{opacity:.45} .pe_prep_op img{filter:grayscale(1) drop-shadow(0 6px 12px rgba(0,0,0,.55))} .pe_prep_slots{flex:none;display:flex;flex-direction:column;gap:9px;padding:13px 14px;border-radius:18px; background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1)} .pe_prep_slots>small{font-family:'headers';font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.55);text-align:left} .pe_prep_slots>div{display:flex;gap:10px} .pe_prep_slot{flex:1;min-height:64px;display:flex;align-items:center;justify-content:center;gap:8px; border-radius:14px;border:1px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.03)} .pe_prep_slot>i{font-style:normal;font-family:p;font-size:20px;color:rgba(255,255,255,.35)} .pe_prep_slot img{width:40px;height:40px;object-fit:contain} .pe_prep_slot small{font-family:'headers';font-size:14px;color:#7CFC00} .pe_prep_slot_vol{border:1px solid rgba(60,232,138,.45);background:rgba(60,232,138,.08)} /* CONTINUE in de dok-PLAY-stijl (goud), zoals het classic PLAY NOW */ .pe_prep_door{background:linear-gradient(0deg,#e09b00 0%,#FFC107 100%);color:#3a1f00; box-shadow:0 0 0 3px #000,inset 0 0 0 2px #ffe07a} /* ── standoff in de T5-standaard (5 sep 2026) ───────────────────────────── Eén T5-teampaneel voor het eigen team, álle tegenstanders in een carrousel eronder (autoplay + pauze bij aanraken, zoals de shop-hot- deals). Vervangt het gestapelde T4-ontwerp voor élk formaat. */ .pe_so_team{flex:none;display:flex;flex-direction:column;gap:8px;padding:11px 12px;border-radius:16px; background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .pe_so_team_eigen{border-color:rgba(127,255,220,.4);background:rgba(127,255,220,.05)} .pe_so_team_kop{display:flex;align-items:center;justify-content:space-between} .pe_so_team_kop span{font-family:'headers';font-size:11px;letter-spacing:2px;color:var(--pe-zijde)} .pe_so_team_kop b{font-family:'headers';font-size:12px;letter-spacing:.5px;color:#ffd24a} .pe_so_leden{display:flex;gap:6px;flex-wrap:nowrap;min-width:0} /* meer dan drie leden: rooster van max drie chips per rij (5v5 = 3+2) — vijf chips op één regel kneep namen én LV-labels onleesbaar plat */ .pe_so_leden_rooster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .pe_so_lid{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 7px; border-radius:12px;background:rgba(255,255,255,.05)} .pe_so_lid .pe_avatar_rond{width:100%;max-width:32px;height:auto;aspect-ratio:1/1;flex:0 1 32px; border:2px solid var(--pe-zijde);box-sizing:border-box} .pe_so_lid>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;align-items:flex-start} .pe_so_lid>div span{font-family:'headers';font-size:10px;letter-spacing:.3px;color:#fff;max-width:100%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pe_so_lid>div small{font-family:'headers';font-size:7px;letter-spacing:.4px;color:rgba(255,255,255,.5)} .pe_so_lid>i:last-child{flex:none} .pe_so_lid_leeg .pe_stoel_leeg{width:32px;height:32px;flex:none} .pe_lid_bot .pe_avatar_rond{border-color:#c19eff;filter:grayscale(.5)} .pe_so_show{display:flex;align-items:center;gap:10px} .pe_so_show>small{flex:1;font-family:'headers';font-size:9px;letter-spacing:2.4px;color:rgba(255,255,255,.42);text-align:left} /* de carrousel: scroll-snap-rail met een piek van de volgende slide */ .pe_so_rail{flex:none;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;margin:0 -14px;padding:0 14px} .pe_so_rail::-webkit-scrollbar{display:none} .pe_so_slide{flex:0 0 100%;scroll-snap-align:center;min-width:0} .pe_so_slide .pe_so_team{height:100%;box-sizing:border-box} .pe_so_rail_meer .pe_so_slide{flex-basis:calc(100% - 30px)} .pe_so_dots{flex:none;display:flex;justify-content:center;gap:5px;margin-top:-3px} .pe_so_dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .2s} .pe_so_dots i.is-active{background:#ffd24a} /* ── WP8b: tafel-summary-herziening — per-stoel game-summary + teamstats ── */ /* knopje op een bordrij naar de volledige game-summary van die stoel */ .pe_post_kaartknop{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:8px;border:1px solid rgba(255,210,74,.5);background:rgba(255,210,74,.12);color:#ffd24a;cursor:pointer} .pe_post_kaartknop:active{transform:scale(.92)} /* zolang een game-summary openstaat duikt de POST-overlay weg (pe_overlay staat op een maximale z-index en zou de summary anders afdekken) */ body.pe_summary_open #pvpTafelUitslag{visibility:hidden} /* TEAM STATS / PLAYER STATS: kolom per zijde, beste waarde licht op */ .pe_post_teamstats{margin-top:12px;padding:11px;border-radius:12px;background:#0d0320;border:1px solid #3a1a6b;text-align:left; width:100%;box-sizing:border-box;align-self:stretch} .pe_post_teamstats_grid{display:grid;grid-template-columns:1fr repeat(var(--pe-ts-kolommen,2),minmax(52px,auto)); gap:6px 10px;align-items:center;margin-top:8px} .pe_post_teamstats_grid>small{font-size:9px;letter-spacing:.5px;color:rgba(255,255,255,.55)} .pe_post_teamstats_grid>b{font-family:'headers';font-size:12px;text-align:right} .pe_post_teamstats_grid>b.pe_post_tag{text-align:right;font-size:10px} .pe_post_teamstats_grid .pe_post_ts_win{color:#7CFC00} .pe_post_teamstats_grid .pe_post_ts_beste{color:#ffd24a} /* REPORT · BLOCK onder de voet van de spelerlade (App Store 1.2, moderatie.js): bewust klein en gedempt — bereikbaar, maar geen concurrent van de knoppen */ .pe_sp_moderatie{display:flex;justify-content:center;gap:28px;padding:10px 0 4px} .pe_sp_moderatie a{font-size:12px;letter-spacing:.12em;font-weight:700;color:#ffffff8c;text-decoration:none;cursor:pointer} .pe_sp_moderatie a:active{color:#ff8a8a}