/* A620 — custom Pixel Battle media players + compact composer attachments */
.pb-social-extra-media,
.home-feed-extra-media,
.profile-post-extra-media{
  display:grid!important;
  gap:10px!important;
  margin:10px 0 12px!important;
}

.pb-media-player{
  --pb-media-accent:#8cff3f;
  --pb-media-surface:#0c121a;
  --pb-media-line:rgba(255,255,255,.09);
  box-sizing:border-box;
  color:#eef4fb;
}
.pb-media-player *, .pb-media-player *::before, .pb-media-player *::after{box-sizing:border-box}
.pb-media-player button{font:inherit;-webkit-tap-highlight-color:transparent}
.pb-media-player svg{display:block!important;stroke:currentColor!important;fill:none!important}
.pb-media-state-icon{display:grid;place-items:center;line-height:0}
.pb-media-icon-pause{display:none}
.pb-media-player[data-playing="1"] .pb-media-icon-play{display:none}
.pb-media-player[data-playing="1"] .pb-media-icon-pause{display:grid}

.home-feed-extra-video.pb-media-player,
.profile-post-extra-video.pb-media-player{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  border:1px solid var(--pb-media-line)!important;
  border-radius:20px!important;
  background:#05080d!important;
  isolation:isolate;
}
.home-feed-extra-video.pb-media-player .pb-media-element,
.profile-post-extra-video.pb-media-player .pb-media-element{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:min(72vh,680px)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  background:#05080d!important;
  opacity:1!important;
  visibility:visible!important;
}
.pb-media-center-toggle{
  position:absolute;
  left:50%;top:50%;
  width:64px;height:64px;
  display:grid;place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(8,12,18,.78);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  z-index:3;
  transition:opacity .16s ease,transform .16s ease,background .16s ease;
}
.pb-media-center-toggle svg{width:28px!important;height:28px!important}
.pb-media-player[data-playing="1"] .pb-media-center-toggle{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.92)}
.pb-media-player--video:hover .pb-media-center-toggle{background:rgba(15,21,30,.9)}

.pb-media-controls{
  position:absolute;
  left:10px;right:10px;bottom:10px;
  min-height:44px;
  display:grid;
  grid-template-columns:36px auto minmax(72px,1fr) auto 36px 36px;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(7,10,15,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:4;
}
.pb-media-control,
.pb-media-audio-toggle{
  width:36px;height:36px;
  display:grid;place-items:center;
  padding:0;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#d9e2ef;
  cursor:pointer;
}
.pb-media-control:hover,.pb-media-audio-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
.pb-media-control svg,.pb-media-audio-toggle svg{width:18px!important;height:18px!important}
.pb-media-player[data-muted="1"] .pb-media-mute{color:#738095;opacity:.7}
.pb-media-time,.pb-media-audio-time{font-size:11px;font-weight:850;color:#cbd4e1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-media-time-separator{margin:0 4px;color:#657184}
.pb-media-seek{
  --pb-media-progress:0%;
  width:100%;height:20px;min-width:0;margin:0;
  appearance:none;-webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  touch-action:pan-x;
}
.pb-media-seek::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--pb-media-accent) 0 var(--pb-media-progress),rgba(255,255,255,.16) var(--pb-media-progress) 100%);
}
.pb-media-seek::-webkit-slider-thumb{
  width:13px;height:13px;margin-top:-4.5px;
  appearance:none;-webkit-appearance:none;
  border:2px solid #0b1118;border-radius:50%;
  background:var(--pb-media-accent);
  box-shadow:0 0 0 2px rgba(140,255,63,.16);
}
.pb-media-seek::-moz-range-track{height:4px;border:0;border-radius:999px;background:rgba(255,255,255,.16)}
.pb-media-seek::-moz-range-progress{height:4px;border-radius:999px;background:var(--pb-media-accent)}
.pb-media-seek::-moz-range-thumb{width:13px;height:13px;border:2px solid #0b1118;border-radius:50%;background:var(--pb-media-accent)}

.home-feed-extra-audio.pb-media-player,
.profile-post-extra-audio.pb-media-player{
  display:grid!important;
  grid-template-columns:40px 40px minmax(0,1fr) 38px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:66px!important;
  padding:10px 11px!important;
  border:1px solid var(--pb-media-line)!important;
  border-radius:18px!important;
  background:var(--pb-media-surface)!important;
}
.pb-media-player--audio .pb-media-element{display:none!important}
.pb-media-audio-mark{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:13px;
  background:rgba(140,255,63,.09);
  color:var(--pb-media-accent);
}
.pb-media-audio-mark svg{width:20px!important;height:20px!important}
.pb-media-audio-toggle{
  width:40px;height:40px;
  border:1px solid rgba(140,255,63,.20);
  border-radius:13px;
  background:rgba(140,255,63,.08);
  color:var(--pb-media-accent);
}
.pb-media-audio-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0}
.pb-media-player--audio .pb-media-seek{min-width:0}
.pb-media-player--audio .pb-media-mute{width:38px;height:38px;border-radius:12px}

/* Kill the old native-audio title/copy presentation if cached markup briefly exists. */
.home-feed-extra-audio-copy,
.profile-post-extra-audio-copy,
.home-feed-extra-audio-icon,
.profile-post-extra-audio-icon{display:none!important}
.home-feed-extra-audio audio[controls],
.profile-post-extra-audio audio[controls]{display:none!important}

/* Composer attachments: never expose long local file names. */
.pbpc-extra-media-card{
  grid-template-columns:42px minmax(0,1fr) 38px!important;
  min-height:66px!important;
  padding:10px 11px!important;
  gap:10px!important;
  border-radius:16px!important;
}
.pbpc-extra-media-copy{min-width:0!important}
.pbpc-extra-media-copy strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:13px!important;
  font-weight:900!important;
  color:#eef3fa!important;
}
.pbpc-extra-media-copy small{font-size:10px!important;color:#778397!important;font-weight:750!important}
.pbpc-extra-media-remove{width:38px!important;height:38px!important;border-radius:12px!important}

@media(max-width:600px){
  .home-feed-extra-video.pb-media-player,
  .profile-post-extra-video.pb-media-player{border-radius:16px!important}
  .pb-media-center-toggle{width:56px;height:56px;border-radius:17px}
  .pb-media-center-toggle svg{width:24px!important;height:24px!important}
  .pb-media-controls{
    left:7px;right:7px;bottom:7px;
    grid-template-columns:34px auto minmax(46px,1fr) 34px 34px;
    gap:5px;
    padding:5px 6px;
    border-radius:13px;
  }
  .pb-media-control{width:34px;height:34px}
  .pb-media-time-duration{display:none}
  .home-feed-extra-audio.pb-media-player,
  .profile-post-extra-audio.pb-media-player{
    grid-template-columns:36px 38px minmax(0,1fr) 34px!important;
    gap:7px!important;
    min-height:62px!important;
    padding:9px!important;
    border-radius:16px!important;
  }
  .pb-media-audio-mark{width:36px;height:36px;border-radius:11px}
  .pb-media-audio-toggle{width:38px;height:38px;border-radius:12px}
  .pb-media-player--audio .pb-media-mute{width:34px;height:34px}
  .pb-media-audio-main{grid-template-columns:1fr;gap:1px}
  .pb-media-audio-time{font-size:10px}
}

/* A621 — profile wall separation, sane delete action and media controls revealed on first play */
.container[data-spa-content="profile"] .pb-profile-compose-entry{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:#0b1119!important;
  box-shadow:none!important;
}
.container[data-spa-content="profile"] .pb-profile-compose-entry .pb-profile-compose-avatar{
  width:46px!important;height:46px!important;
  border-radius:13px!important;
  object-fit:cover!important;
  margin:0!important;
}
.container[data-spa-content="profile"] .pb-profile-compose-field{
  min-width:0!important;
  min-height:46px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 38px!important;
  gap:8px!important;
  align-items:center!important;
  width:100%!important;
  padding:4px 4px 4px 14px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  background:#101822!important;
  color:#8e9aad!important;
  text-align:left!important;
  font:inherit!important;
  cursor:text!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
}
.container[data-spa-content="profile"] .pb-profile-compose-field:hover{
  border-color:rgba(140,255,63,.22)!important;
  background:#111b25!important;
}
.container[data-spa-content="profile"] .pb-profile-compose-placeholder{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  font-weight:750!important;
  color:#8e9aad!important;
}
.container[data-spa-content="profile"] .pb-profile-compose-field-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:rgba(140,255,63,.08);
  color:#8cff3f;
}
.container[data-spa-content="profile"] .pb-profile-compose-field-icon svg{width:18px!important;height:18px!important}
.container[data-spa-content="profile"] .pb-profile-compose-divider{
  height:1px!important;
  margin:20px 2px 24px!important;
  background:rgba(255,255,255,.07)!important;
}
.container[data-spa-content="profile"] .pb-profile-compose-divider + .post-card{
  margin-top:0!important;
}

.profile-post-delete{
  flex:0 0 auto!important;
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 11px!important;
  border:1px solid rgba(255,105,120,.18)!important;
  border-radius:12px!important;
  background:rgba(255,82,100,.06)!important;
  color:#ff7685!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
}
.profile-post-delete:hover{background:rgba(255,82,100,.11)!important;border-color:rgba(255,105,120,.28)!important}
.profile-post-delete svg{width:16px!important;height:16px!important;stroke:currentColor!important;fill:none!important}

/* First-play disclosure: before playback, controls/time/progress stay out of sight. */
.pb-media-player--video .pb-media-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(7px)!important;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important;
}
.pb-media-player--video[data-started="1"] .pb-media-controls{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}

.home-feed-extra-audio.pb-media-player,
.profile-post-extra-audio.pb-media-player{
  grid-template-columns:42px minmax(0,1fr)!important;
  min-height:62px!important;
}
.pb-media-player--audio .pb-media-audio-main,
.pb-media-player--audio .pb-media-mute{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.pb-media-player--audio[data-started="1"]{
  grid-template-columns:42px minmax(0,1fr) 38px!important;
}
.pb-media-player--audio[data-started="1"] .pb-media-audio-main,
.pb-media-player--audio[data-started="1"] .pb-media-mute{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.pb-media-player--audio .pb-media-audio-main{transition:opacity .16s ease!important}
.pb-media-player--audio .pb-media-mute{transition:opacity .16s ease!important}

@media(max-width:600px){
  .container[data-spa-content="profile"] .pb-profile-compose-entry{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:9px!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .container[data-spa-content="profile"] .pb-profile-compose-entry .pb-profile-compose-avatar{width:42px!important;height:42px!important;border-radius:12px!important}
  .container[data-spa-content="profile"] .pb-profile-compose-field{min-height:42px!important;padding-left:12px!important;border-radius:13px!important}
  .container[data-spa-content="profile"] .pb-profile-compose-field-icon{width:34px;height:34px;border-radius:10px}
  .container[data-spa-content="profile"] .pb-profile-compose-divider{margin:17px 2px 22px!important}
  .profile-post-delete{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:11px!important}
  .profile-post-delete span{display:none!important}
  .home-feed-extra-audio.pb-media-player,
  .profile-post-extra-audio.pb-media-player{grid-template-columns:38px minmax(0,1fr)!important}
  .pb-media-player--audio[data-started="1"]{grid-template-columns:38px minmax(0,1fr) 34px!important}
}

/* A622 — no native browser media chrome, compact first-play state, video remaining-time badge. */
.pb-media-player video::-webkit-media-controls,
.pb-media-player video::-webkit-media-controls-enclosure,
.pb-media-player video::-webkit-media-controls-panel,
.pb-media-player video::-webkit-media-controls-start-playback-button,
.pb-media-player audio::-webkit-media-controls,
.pb-media-player audio::-webkit-media-controls-enclosure,
.pb-media-player audio::-webkit-media-controls-panel{
  display:none!important;
  -webkit-appearance:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
.pb-media-player .pb-media-element{
  -webkit-appearance:none!important;
  outline:0!important;
}
.pb-media-duration-badge{
  position:absolute!important;
  right:12px!important;
  bottom:12px!important;
  z-index:5!important;
  min-width:44px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 9px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  background:rgba(6,9,14,.78)!important;
  color:#edf3fa!important;
  font:850 10px/1 Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.01em!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  transition:bottom .16s ease,opacity .16s ease!important;
}
.pb-media-duration-badge:not(.is-ready){opacity:.55!important}
.pb-media-player--video[data-started="1"] .pb-media-duration-badge{bottom:62px!important}

/* Audio starts as a tiny play control; timeline appears only after the first play. */
.home-feed-extra-audio.pb-media-player,
.profile-post-extra-audio.pb-media-player{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-height:56px!important;
  padding:8px 10px!important;
}
.pb-media-player--audio .pb-media-audio-toggle{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  flex:0 0 38px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
}
.pb-media-player--audio .pb-media-audio-toggle svg{width:18px!important;height:18px!important}
.pb-media-player--audio .pb-media-audio-main{
  flex:1 1 auto!important;
  min-width:0!important;
}
.pb-media-player--audio .pb-media-mute{flex:0 0 36px!important;width:36px!important;height:36px!important}
.pb-media-player--audio:not([data-started="1"]) .pb-media-audio-main,
.pb-media-player--audio:not([data-started="1"]) .pb-media-mute{
  display:none!important;
}
.pb-media-player--audio[data-started="1"] .pb-media-audio-main{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.pb-media-player--audio[data-started="1"] .pb-media-mute{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
@media(max-width:600px){
  .pb-media-duration-badge{right:9px!important;bottom:9px!important;height:26px!important;min-width:42px!important;padding:0 8px!important;font-size:9px!important}
  .pb-media-player--video[data-started="1"] .pb-media-duration-badge{bottom:57px!important}
  .home-feed-extra-audio.pb-media-player,
  .profile-post-extra-audio.pb-media-player{min-height:52px!important;padding:7px 9px!important;border-radius:15px!important}
  .pb-media-player--audio .pb-media-audio-toggle{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;flex-basis:36px!important}
}

/* A624 — stable first paint + metadata-aware flat media player. */
.pb-media-player:not([data-pb-media-ready="1"]) .pb-media-element{
  visibility:hidden!important;
  opacity:0!important;
}
.pb-media-player[data-pb-media-ready="1"] .pb-media-element{
  visibility:visible!important;
  opacity:1!important;
}
.pb-media-player--video .pb-media-element{pointer-events:none!important}
.pb-media-player--video[data-started="1"] .pb-media-duration-badge{
  display:none!important;
}
.pb-media-time-remaining{
  min-width:36px!important;
  text-align:right!important;
  color:#cbd4e1!important;
}

.home-feed-extra-audio.pb-media-player,
.profile-post-extra-audio.pb-media-player{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 36px!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  row-gap:7px!important;
  align-items:center!important;
  min-height:72px!important;
  padding:10px 11px!important;
}
.pb-media-player--audio .pb-media-audio-toggle{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  flex:none!important;
}
.pb-media-audio-meta{
  grid-column:2 / 4!important;
  grid-row:1!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
  padding-right:4px!important;
}
.pb-media-audio-meta strong,
.pb-media-audio-meta span{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.pb-media-audio-meta strong{
  color:#eef3fa!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.25!important;
  letter-spacing:-.01em!important;
}
.pb-media-audio-meta span{
  color:#748196!important;
  font-size:9px!important;
  font-weight:750!important;
  line-height:1.25!important;
}
.pb-media-player--audio .pb-media-audio-main{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0!important;
  align-items:center!important;
}
.pb-media-player--audio .pb-media-mute{
  grid-column:3!important;
  grid-row:2!important;
  width:36px!important;
  height:36px!important;
}
.pb-media-player--audio:not([data-started="1"]){
  grid-template-rows:auto!important;
  min-height:62px!important;
}
.pb-media-player--audio:not([data-started="1"]) .pb-media-audio-toggle{
  grid-row:1!important;
}
.pb-media-player--audio:not([data-started="1"]) .pb-media-audio-meta{
  grid-row:1!important;
  align-self:center!important;
}
.pb-media-player--audio:not([data-started="1"]) .pb-media-audio-main,
.pb-media-player--audio:not([data-started="1"]) .pb-media-mute{
  display:none!important;
}

@media(max-width:600px){
  .home-feed-extra-audio.pb-media-player,
  .profile-post-extra-audio.pb-media-player{
    grid-template-columns:36px minmax(0,1fr) 32px!important;
    column-gap:8px!important;
    row-gap:5px!important;
    min-height:66px!important;
    padding:9px!important;
  }
  .pb-media-player--audio .pb-media-audio-toggle{
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;
  }
  .pb-media-audio-meta strong{font-size:11px!important}
  .pb-media-audio-meta span{font-size:8.5px!important}
  .pb-media-player--audio .pb-media-mute{width:32px!important;height:32px!important}
}

/* A625 — compact video controls: never cover a large part of the frame. */
.pb-media-player--video .pb-media-controls{
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
  min-height:34px!important;
  grid-template-columns:28px 32px minmax(52px,1fr) 38px 28px 28px!important;
  gap:4px!important;
  padding:3px 5px!important;
  border-radius:11px!important;
  background:rgba(7,10,15,.82)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}
.pb-media-player--video .pb-media-control{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  border-radius:8px!important;
}
.pb-media-player--video .pb-media-control svg{width:15px!important;height:15px!important}
.pb-media-player--video .pb-media-time{
  min-width:0!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
}
.pb-media-player--video .pb-media-seek{height:16px!important}
.pb-media-player--video .pb-media-seek::-webkit-slider-runnable-track{height:3px!important}
.pb-media-player--video .pb-media-seek::-webkit-slider-thumb{width:11px!important;height:11px!important;margin-top:-4px!important}
.pb-media-player--video .pb-media-seek::-moz-range-track,
.pb-media-player--video .pb-media-seek::-moz-range-progress{height:3px!important}
.pb-media-player--video .pb-media-seek::-moz-range-thumb{width:11px!important;height:11px!important}
.pb-media-player--video[data-started="1"] .pb-media-center-toggle{display:none!important}
@media(max-width:600px){
  .pb-media-player--video .pb-media-controls{
    left:6px!important;right:6px!important;bottom:6px!important;
    min-height:32px!important;
    grid-template-columns:26px 30px minmax(42px,1fr) 34px 26px 26px!important;
    gap:3px!important;padding:3px 4px!important;border-radius:10px!important;
  }
  .pb-media-player--video .pb-media-control{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
  .pb-media-player--video .pb-media-control svg{width:14px!important;height:14px!important}
  .pb-media-player--video .pb-media-time{font-size:8.5px!important}
}