@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800;900&family=JetBrains+Mono:wght@600;800&family=Outfit:wght@800;900&family=Audiowide&family=VT323&family=Press+Start+2P&display=swap');
/* ═══════════════════════════════════════════════════════════════
   OW USER PROFILE PAGE — V17 (.ow-up = OneWay User Profile)
   guns.lol-style: banner → avatar overlap → identity → stat row →
   sublinks list → clans strip → footer hint
   ═══════════════════════════════════════════════════════════════ */
.ow-up {
  max-width: 720px;
  margin: 0 auto 80px;
  padding: 0 20px;
}
.ow-up__banner {
  position: relative;
  height: 260px;
  margin: 0 -20px;
  background: linear-gradient(135deg, var(--up-accent-soft), transparent 80%),
              radial-gradient(at 30% 20%, var(--up-accent-soft), transparent 60%),
              var(--ow-bg-alt);
  overflow: hidden;
  border-radius: 0 0 26px 26px;
}
.ow-up__banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ow-up__banner-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, var(--ow-bg) 100%);
  pointer-events: none;
}
.ow-up__head {
  display: flex; align-items: flex-end; gap: 22px;
  padding: 0 4px;
  margin-top: -64px;
  position: relative;
  z-index: 2;
}
.ow-up__avatar-wrap {
  width: 132px; height: 132px;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--up-accent), #38bdf8);
  flex-shrink: 0;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.ow-up__avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ow-bg-alt);
  display: block;
}
.ow-up__identity {
  flex: 1; min-width: 0;
  padding-bottom: 10px;
}
.ow-up__name {
  margin: 0;
  font-family: var(--ow-font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--ow-text);
  line-height: 1.1;
}
.ow-up__handle {
  margin-top: 2px;
  font-family: var(--ow-font-mono);
  font-size: 0.9rem;
  color: var(--up-accent);
  letter-spacing: -0.005em;
}
.ow-up__bio {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ow-text-dim);
  max-width: 560px;
}

/* ── Stat row ───────────────────────────────────────────────── */
.ow-up__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 28px;
  padding: 14px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 16px;
}
.ow-up__stat {
  text-align: center;
  padding: 8px 4px;
}
.ow-up__stat .lbl {
  font-family: var(--ow-font-mono);
  font-size: 0.62rem;
  color: var(--ow-text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ow-up__stat .val {
  font-family: var(--ow-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ow-text);
  letter-spacing: -0.02em;
}

/* ── Sections ───────────────────────────────────────────────── */
.ow-up__section {
  margin-top: 28px;
}
.ow-up__section h2 {
  margin: 0 0 12px;
  font-family: var(--ow-font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ow-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Sublinks (the guns.lol money shot) ───────────────────── */
.ow-up__links {
  display: flex; flex-direction: column;
  gap: 10px;
}
.ow-up__link {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ow-surface);
  border: 1px solid var(--ow-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ow-text);
  font-weight: 700;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1),
              border-color 0.22s ease,
              box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.ow-up__link::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--link-accent, var(--up-accent));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ow-up__link:hover {
  transform: translateY(-2px);
  border-color: var(--link-accent, var(--up-accent));
  box-shadow: 0 12px 28px rgba(0,0,0,0.35),
              0 0 0 1px var(--link-accent, var(--up-accent));
}
.ow-up__link:hover::before { opacity: 1; }
.ow-up__link-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--ow-bg-alt);
  font-size: 18px;
  color: var(--link-accent, var(--up-accent));
}
.ow-up__link-name {
  font-family: var(--ow-font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ow-up__link-arrow {
  font-family: var(--ow-font-mono);
  color: var(--ow-text-muted);
  transition: transform 0.22s ease, color 0.22s ease;
}
.ow-up__link:hover .ow-up__link-arrow {
  transform: translateX(4px);
  color: var(--link-accent, var(--up-accent));
}
.ow-up__empty {
  color: var(--ow-text-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0;
}

/* ── Clan chips ──────────────────────────────────────────── */
.ow-up__clans {
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.ow-up__clan {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--ow-bg-alt);
  border: 1px solid var(--ow-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ow-text);
  font-weight: 700;
  font-size: 0.82rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ow-up__clan:hover {
  border-color: var(--up-accent);
  background: var(--ow-surface-hover);
}
.ow-up__clan img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Footer hint ─────────────────────────────────────────── */
.ow-up__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed var(--ow-border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--ow-text-muted);
}
.ow-up__footer code {
  background: var(--ow-bg-alt);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--ow-font-mono);
  font-size: 0.72rem;
  border: 1px solid var(--ow-border);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .ow-up__banner { height: 180px; }
  .ow-up__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: -56px; }
  .ow-up__avatar-wrap { width: 108px; height: 108px; }
  .ow-up__stats { grid-template-columns: repeat(2, 1fr); }
  .ow-up__stat .val { font-size: 1.2rem; }
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE-V40 (2026-05-23): video bg + audio player styles
   ════════════════════════════════════════════════════════════════════ */
.ow-up__banner-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    background: #0a0c10;
}

.ow-up__audio {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10, 12, 18, 0.78);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 14px 8px 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    font-family: 'Inter', system-ui, sans-serif;
    animation: ow-up-audio-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ow-up-audio-in {
    from { opacity: 0; transform: translateY(20px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ow-up__audio-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--up-accent, #5b8cff), color-mix(in srgb, var(--up-accent, #5b8cff) 60%, #4f46e5));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    transition: transform 0.15s ease;
    box-shadow: 0 4px 14px rgba(91, 140, 255, 0.4);
}
.ow-up__audio-btn:hover { transform: scale(1.06); }
.ow-up__audio-btn:active { transform: scale(0.94); }

.ow-up__audio-icon { display: block; line-height: 1; }
.ow-up__audio-icon[hidden] { display: none; }

.ow-up__audio-vol {
    appearance: none;
    -webkit-appearance: none;
    width: 90px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
.ow-up__audio-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--up-accent, #5b8cff);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* V72 CUSTOM PLAYER — UI propia que matchea OneWay (glass + indigo accent) */
.ow-up__player {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 9000;
    display: flex; align-items: center; gap: 10px;
    width: min(380px, calc(100vw - 44px));
    background: rgba(10, 12, 18, 0.85);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55), 0 6px 18px -4px rgba(99, 102, 241, 0.18);
    font-family: 'Inter', system-ui, sans-serif;
    animation: ow-up-audio-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.ow-up__player.is-collapsed {
    width: 56px !important;
    padding: 8px;
    overflow: hidden;
}
.ow-up__player.is-collapsed .ow-up__player-meta,
.ow-up__player.is-collapsed .ow-up__player-collapse,
.ow-up__player.is-collapsed .ow-up__player-vol { display: none !important; }
.ow-up__player-cover {
    width: 44px; height: 44px;
    border-radius: 9px;
    overflow: hidden;
    flex: 0 0 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}
.ow-up__player-cover img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.ow-up__player-cover-fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff;
}
.ow-up__player-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 3px;
}
.ow-up__player-title {
    font-weight: 800; font-size: 0.86rem;
    color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-up__player-sub {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap; overflow: hidden;
}
.ow-up__player-source {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    font-weight: 700;
    color: #c7d2fe;
}
.ow-up__player-src-icon { font-size: 0.85em; }
.ow-up__player-time {
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.62);
    font-weight: 600;
}
.ow-up__player-scrub {
    position: relative;
    height: 3px;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    cursor: pointer;
    margin-top: 5px;
    overflow: hidden;
}
.ow-up__player-scrub-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    transition: width 0.12s linear;
}
.ow-up__player-btn {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    border: 0;
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
    box-shadow: 0 6px 16px -4px rgba(99,102,241,0.55);
}
.ow-up__player-btn:hover { transform: scale(1.06); box-shadow: 0 10px 22px -6px rgba(99,102,241,0.70); }
.ow-up__player-btn:active { transform: scale(0.94); }
.ow-up__player-vol {
    position: relative;
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f1f5f9;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background 0.18s;
}
.ow-up__player-vol:hover { background: rgba(255,255,255,0.12); }
.ow-up__player-vol-pop {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    padding: 10px 8px;
    background: rgba(10,12,18,0.95);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.ow-up__player-vol-slider {
    -webkit-appearance: none; appearance: none;
    width: 8px; height: 80px;
    writing-mode: vertical-lr;
    direction: rtl;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    cursor: pointer;
    outline: 0;
}
.ow-up__player-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    cursor: pointer;
    border: 2px solid #fff;
}
.ow-up__player-collapse {
    position: absolute;
    top: -6px; right: -6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(10,12,18,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all 0.18s;
    opacity: 0;
}
.ow-up__player:hover .ow-up__player-collapse { opacity: 1; }
.ow-up__player-collapse:hover { color: #fff; background: rgba(99,102,241,0.4); }
.ow-up__player.is-collapsed .ow-up__player-collapse {
    opacity: 1;
    transform: rotate(180deg);
    display: grid !important;
    position: static;
    margin-left: auto;
}
/* V72n Spotify mini card (sin iframe, sin upsell, sin volumen alto) */
.ow-up__spotify-card {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    width: min(320px, calc(100vw - 44px));
    background: rgba(10, 12, 18, 0.85);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(30, 215, 96, 0.30);
    border-radius: 14px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55), 0 6px 18px -4px rgba(30, 215, 96, 0.18);
    animation: ow-up-audio-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ow-up__sp-cover {
    width: 48px; height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 48px;
    background: rgba(30, 215, 96, 0.10);
    border: 1px solid rgba(30, 215, 96, 0.20);
    display: grid; place-items: center;
}
.ow-up__sp-cover img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
.ow-up__sp-cover-fb {
    font-size: 1.3rem;
    color: #1ed760;
}
.ow-up__sp-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.ow-up__sp-source {
    font-size: 0.66rem;
    font-weight: 800;
    color: #1ed760;
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 4px;
    margin-bottom: 2px;
}
.ow-up__sp-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.ow-up__sp-artist {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-up__sp-btn {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ed760, #1db954);
    color: #fff !important;
    cursor: pointer;
    display: grid !important; place-items: center;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.22s ease;
    box-shadow: 0 6px 16px -4px rgba(30, 215, 96, 0.55);
    padding-left: 3px; /* visual offset for the play triangle */
}
.ow-up__sp-btn:hover { transform: scale(1.06); box-shadow: 0 10px 22px -6px rgba(30, 215, 96, 0.7); }
.ow-up__sp-btn:active { transform: scale(0.94); }
.ow-up__sp-collapse {
    position: absolute;
    top: -8px; right: -8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(10,12,18,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8;
    cursor: pointer;
    display: grid; place-items: center;
    font-family: inherit; font-size: 0.95rem; line-height: 1;
    opacity: 0;
    transition: all 0.18s;
}
.ow-up__spotify-card:hover .ow-up__sp-collapse { opacity: 1; }
.ow-up__sp-collapse:hover { color: #fff; background: rgba(30,215,96,0.4); }
.ow-up__spotify-card.is-collapsed {
    width: 60px !important;
    padding: 8px;
}
.ow-up__spotify-card.is-collapsed .ow-up__sp-meta,
.ow-up__spotify-card.is-collapsed .ow-up__sp-btn { display: none !important; }
.ow-up__spotify-card.is-collapsed .ow-up__sp-collapse { opacity: 1; }
@media (max-width: 720px) {
    .ow-up__spotify-card { right: 12px; bottom: 12px; }
}

/* V72r embed iframe directo — SIN header (era lo que dejaba el borde blanco)
   Solo iframe + botón flotante colapsar */
.ow-up__embed-direct {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 9000;
    width: min(340px, calc(100vw - 44px));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 44px -12px rgba(0,0,0,0.55), 0 6px 18px -4px rgba(0,0,0,0.4);
    animation: ow-up-audio-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: transform 0.25s ease, width 0.3s var(--spring, cubic-bezier(0.34,1.56,0.64,1)), height 0.3s ease;
    line-height: 0;
    background: #000;
}
.ow-up__embed-direct iframe {
    width: 100% !important;
    border: 0 !important;
    display: block !important;
    color-scheme: dark;
    border-radius: 14px;
    margin: 0;
    padding: 0;
}
.ow-up__embed-direct--spotify iframe { height: 80px !important; }
.ow-up__embed-direct--youtube iframe { height: 180px !important; }
.ow-up__embed-direct--soundcloud iframe { height: 120px !important; }
.ow-up__embed-mini-header { display: none !important; }
.ow-up__embed-collapse {
    position: absolute !important;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7) !important;
    border: 0 !important;
    color: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    font-family: inherit; font-size: 1rem; line-height: 1;
    opacity: 0;
    transition: opacity 0.18s, background 0.18s;
    z-index: 2;
    backdrop-filter: blur(6px);
}
.ow-up__embed-direct:hover .ow-up__embed-collapse { opacity: 1; }
.ow-up__embed-collapse:hover { background: rgba(0,0,0,0.9) !important; }
.ow-up__embed-collapse {
    background: transparent; border: 0;
    color: rgba(255,255,255,0.6);
    cursor: pointer; padding: 2px 6px;
    border-radius: 6px;
    transition: all 0.18s;
    font-family: inherit;
}
.ow-up__embed-collapse:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ow-up__embed-direct.is-collapsed { width: 44px; }
.ow-up__embed-direct.is-collapsed iframe { display: none !important; }
.ow-up__embed-direct.is-collapsed .ow-up__embed-mini-header { justify-content: center; padding: 10px; }
.ow-up__embed-direct.is-collapsed .ow-up__embed-mini-header > span:first-child { display: none; }
@media (max-width: 720px) {
    .ow-up__embed-direct { right: 12px; bottom: 12px; }
}
.ow-up__player-icon { display: block; }
@media (max-width: 720px) {
    .ow-up__player { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
    .ow-up__player.iframe-loaded .ow-up__player-iframe { right: 12px; bottom: 92px; width: calc(100vw - 24px); }
}

/* V70 audio embed legacy (no usado pero conservar) */
.ow-up__audio--embed {
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden;
    width: min(380px, calc(100vw - 44px));
    height: 152px;
    background: rgba(10, 12, 18, 0.92) !important;
}
.ow-up__audio--embed:has(.ow-up__audio-iframe--sc) { height: 166px; }
.ow-up__audio-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 720px) {
    .ow-up__audio--embed { right: 12px !important; bottom: 12px !important; width: calc(100vw - 24px); }
}
.ow-up__audio-vol::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--up-accent, #5b8cff);
    border: 2px solid #fff;
    cursor: pointer;
}

@media (max-width: 480px) {
    .ow-up__audio {
        bottom: 14px;
        right: 14px;
        padding: 6px 12px 6px 6px;
        gap: 8px;
    }
    .ow-up__audio-btn { width: 34px; height: 34px; font-size: 0.95rem; }
    .ow-up__audio-vol { width: 70px; }
}

/* ════════════════════════════════════════════════════════════════════
   PROFILE-REMODEL-V41 (2026-05-23): rewrite estético guns.lol-style.
   - Background full-screen (image/video/gif/gradient)
   - Glass card centrado max 720px
   - Avatar HUGE (160px) con ring + glow accent
   - Bio prominente italic
   - Stats row inline minimalista
   - Social cards con accent border + hover lift
   - Modern typography + spacing generoso
   ════════════════════════════════════════════════════════════════════ */

/* Body backdrop — full-screen behind everything */
body.ow-dir-body,
body:has(.ow-up) {
    background: #0a0c10 !important;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Background layer (banner becomes full-screen bg) */
.ow-up {
    position: relative;
    min-height: 100vh;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #f1f5f9;
}
/* V74lt — MODO CLARO: el color base del wrapper pasa a oscuro para que el
   texto heredado (spans sin regla propia) se lea sobre superficies claras. */
html[data-theme="light"] .ow-up,
html.theme-light .ow-up { color: var(--ow-text); }

/* V72aj — Banner DISCORD-STYLE: hero top, no fullscreen.
   2026-06-02 BANNER MÁS "BANNER": subido a 360px (antes 340) para que se lea como
   un banner ancho y no un hero corto; el avatar sigue solapando abajo (el head usa
   margin-top:-90px, independiente del alto del banner, así no se rompe el overlap). */
.ow-up__banner {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 360px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #0a0c10 0%, #1a1d27 50%, #2a1d3e 100%);
    border-radius: 0 0 22px 22px;
}
.ow-up__banner-img,
.ow-up__banner-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: brightness(0.92) saturate(1.08);
}
.ow-up__banner-fade {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(10, 12, 16, 0.75) 70%, #0a0c10);
    pointer-events: none;
}
@media (max-width: 720px) {
    .ow-up__banner { height: 240px !important; border-radius: 0 0 16px 16px; }
}

/* Body global background — antes lo daba el banner fixed, ahora es propio del body */
body.ow-dir-body,
body:has(.ow-up) {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(99,102,241,0.10), transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(168,85,247,0.10), transparent 55%),
        #0a0c10 !important;
}
@keyframes ow-up-bg-pan {
    from { transform: scale(1.05) translate(0, 0); }
    to { transform: scale(1.10) translate(-2%, -1%); }
}
.ow-up__banner-fade {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse 70% 60% at center, transparent 0%, rgba(10, 12, 16, 0.65) 90%),
        linear-gradient(to bottom, transparent 0%, rgba(10, 12, 16, 0.85) 100%) !important;
    pointer-events: none;
}

/* Main content stack — centered glass card */
.ow-up > *:not(.ow-up__banner):not(.ow-up__scanlines):not(.ow-up__grid-overlay):not(.ow-up__particles):not(.ow-up__pagebg) {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* V72ao HEAD — diseño LIMPIO sin overlap, avatar grande visible */
.ow-up__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 20px 32px !important;
    margin-top: -90px !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    background: linear-gradient(to bottom, transparent, rgba(10,12,16,0.6) 40%);
    border-radius: 0 0 22px 22px;
}
.ow-up__avatar-wrap {
    width: 160px;
    height: 160px;
    margin-bottom: 18px;
    position: relative;
}
.ow-up__avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 0deg, var(--up-accent, #5b8cff), color-mix(in srgb, var(--up-accent, #5b8cff) 30%, #8b5cf6), var(--up-accent, #5b8cff));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ow-up-ring 8s linear infinite;
}
@keyframes ow-up-ring {
    to { transform: rotate(360deg); }
}
.ow-up__avatar {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(10, 12, 16, 0.9),
        0 0 60px color-mix(in srgb, var(--up-accent, #5b8cff) 30%, transparent);
    background: #0a0c10;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ow-up__avatar:hover {
    transform: scale(1.04);
}

.ow-up__name {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}
.ow-up__handle {
    font-size: 0.95rem !important;
    color: rgba(241, 245, 249, 0.55) !important;
    font-family: 'Geist Mono', ui-monospace, monospace;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}
.ow-up__bio {
    font-size: 1.05rem !important;
    color: rgba(241, 245, 249, 0.88) !important;
    max-width: 56ch;
    margin: 0 auto !important;
    line-height: 1.55;
    font-weight: 400;
    text-wrap: balance;
}

/* STATS — inline subtle row */
.ow-up__stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
    gap: 8px !important;
    background: rgba(15, 18, 25, 0.5) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    margin: 28px auto !important;
    max-width: 600px;
}
.ow-up__stat {
    text-align: center;
}
.ow-up__stat .lbl {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: rgba(241, 245, 249, 0.45) !important;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.ow-up__stat .val {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1;
}

/* SECTIONS — glassy cards */
.ow-up__section {
    background: rgba(15, 18, 25, 0.55) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 18px !important;
    padding: 22px 24px !important;
    margin: 18px auto !important;
}
.ow-up__section h2 {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(241, 245, 249, 0.55) !important;
    margin: 0 0 14px !important;
}

/* Sublinks (.ow-up__links): vertical stack of pill cards */
.ow-up__links {
    display: grid !important;
    gap: 10px !important;
}
.ow-up__link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}
.ow-up__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--link-accent, #5b8cff);
    border-radius: 0 4px 4px 0;
    opacity: 0.7;
}
.ow-up__link:hover {
    transform: translateY(-2px);
    border-color: var(--link-accent, #5b8cff) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--link-accent, #5b8cff) 35%, transparent);
}
.ow-up__link-icon {
    font-size: 1.4rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.ow-up__link-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.98rem;
}
.ow-up__link-arrow {
    opacity: 0.35;
    transition: all 0.22s ease;
}
.ow-up__link:hover .ow-up__link-arrow {
    opacity: 1;
    transform: translateX(4px);
    color: var(--link-accent, #5b8cff);
}

/* Connections (mini icons row) */
.ow-up__connections {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.ow-up__conn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    transition: all 0.2s ease !important;
}
.ow-up__conn:hover {
    background: var(--conn-accent, #5b8cff) !important;
    border-color: var(--conn-accent, #5b8cff) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Roblox card (legacy) */
.ow-up__roblox {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(230, 0, 18, 0.16), rgba(230, 0, 18, 0.04)) !important;
    border: 1px solid rgba(230, 0, 18, 0.30) !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.ow-up__roblox:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(230, 0, 18, 0.45);
}

/* V66 Roblox card mejorada — avatar + display name + descripción */
.ow-up__roblox-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(91, 140, 255, 0.10), rgba(6, 182, 212, 0.04)) !important;
    border: 1px solid rgba(91, 140, 255, 0.22) !important;
    color: #f1f5f9 !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    position: relative;
}
.ow-up__roblox-card:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 140, 255, 0.42) !important;
    box-shadow: 0 14px 32px -10px rgba(91, 140, 255, 0.35);
}
.ow-up__roblox-card--banned { opacity: 0.55; filter: grayscale(0.4); }
.ow-up__rbx-avatar {
    width: 64px; height: 64px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    flex: 0 0 64px;
    position: relative;
}
.ow-up__rbx-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
    background: #222 !important;
}
.ow-up__rbx-skeleton {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    background-size: 200% 100%;
    animation: rbxSkel 1.4s linear infinite;
}
@keyframes rbxSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ow-up__rbx-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 4px;
}
.ow-up__rbx-name {
    font-weight: 800;
    font-size: 1rem;
    color: #f4f4f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ow-up__rbx-handle {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.82rem;
    margin-left: 4px;
}
.ow-up__rbx-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ow-up__rbx-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    margin-left: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5b8cff, #06b6d4);
    color: #fff !important;
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none !important;
    flex: 0 0 auto;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(91, 140, 255, 0.55);
    transition: transform 0.18s ease, box-shadow 0.22s ease !important;
}
.ow-up__rbx-cta > span { display: inline-block; }
.ow-up__rbx-cta > svg { flex: 0 0 14px; }
.ow-up__rbx-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(91, 140, 255, 0.65);
}
@media (max-width: 520px) {
    .ow-up__roblox-card { flex-wrap: wrap; }
    .ow-up__rbx-cta { width: 100%; justify-content: center; margin-left: 0; margin-top: 4px; }
}

/* V67 Discord live card */
.ow-up__discord-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.10), rgba(91, 140, 255, 0.04)) !important;
    border: 1px solid rgba(88, 101, 242, 0.22) !important;
    color: #f1f5f9 !important;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
}
.ow-up__discord-card:hover {
    border-color: rgba(88, 101, 242, 0.42) !important;
    box-shadow: 0 14px 32px -10px rgba(88, 101, 242, 0.30);
}
.ow-up__dc-avatar {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: visible;
    flex: 0 0 56px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ow-up__dc-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block;
}
.ow-up__dc-avatar .ow-up__rbx-skeleton {
    border-radius: 50%;
}
.ow-up__dc-fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    border-radius: 50%;
    color: rgba(255,255,255,0.4);
    font-size: 1.3rem; font-weight: 800;
}
.ow-up__dc-status {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 3px solid #1a1a23;
    box-sizing: border-box;
    background: #747f8d;
    transition: background 0.22s ease;
}
.ow-up__dc-status--online   { background: #3ba55d; box-shadow: 0 0 12px rgba(59,165,93,0.55); }
.ow-up__dc-status--idle     { background: #faa61a; }
.ow-up__dc-status--dnd      { background: #ed4245; }
.ow-up__dc-status--offline  { background: #747f8d; }
.ow-up__dc-status--streaming{ background: #593695; }
.ow-up__dc-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.ow-up__dc-name {
    font-weight: 800; font-size: 1rem;
    color: #f4f4f5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-up__dc-tag {
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    margin-left: 4px;
}
.ow-up__dc-line {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ow-up__dc-line b { color: #fff; font-weight: 700; }
.ow-up__dc-ico { margin-right: 4px; }
.ow-up__dc-detail { color: rgba(255,255,255,0.55); }
.ow-up__dc-mic { margin-left: 6px; font-size: 0.78rem; }
.ow-up__dc-mic--mute, .ow-up__dc-mic--deaf { filter: hue-rotate(-20deg); }

/* V68b THEME VARIANTS — solo cambian la variable --up-accent. NO se tocan
   filters, backgrounds, ni text-shadows del article entero (porque rompen
   el render). El accent se propaga via el style="--up-accent:..." en el
   article, y los headers y botones lo consumen donde corresponda. */
.ow-up--theme-default  { --up-accent: #6366f1; --up-accent-soft: rgba(99,102,241,0.16); }
.ow-up--theme-cyber    { --up-accent: #06b6d4; --up-accent-soft: rgba(6,182,212,0.18); }
.ow-up--theme-neon     { --up-accent: #10b981; --up-accent-soft: rgba(16,185,129,0.16); }
.ow-up--theme-minimal  { --up-accent: #9ca3af; --up-accent-soft: rgba(156,163,175,0.14); }
.ow-up--theme-sunset   { --up-accent: #f97316; --up-accent-soft: rgba(249,115,22,0.16); }
.ow-up--theme-forest   { --up-accent: #16a34a; --up-accent-soft: rgba(22,163,74,0.16); }
.ow-up--theme-rose     { --up-accent: #ec4899; --up-accent-soft: rgba(236,72,153,0.16); }
.ow-up[class*="--theme-"] .ow-up__section h2 { color: var(--up-accent); }
.ow-up[class*="--theme-"] .ow-up__stat .val,
.ow-up[class*="--theme-"] .ow-up__name { color: var(--up-accent); }

/* ════════════════════════════════════════════════════════════════
   V74lt — MODO CLARO REAL DEL PERFIL  (2026-05-31)
   El perfil /u/<slug> es un showcase con FONDO elegido por el dueño
   (banner / backgroundImage) + glows accent-driven. El modo claro NO
   pinta la página de blanco: respeta el fondo del usuario y sólo sube
   el CONTRASTE de superficies/cards/texto para que se lean bien.
   Todo va scopeado al perfil (body.ow-dir-body / .ow-up / #ow-profile-root)
   y SÓLO bajo [data-theme="light"] / .theme-light → en oscuro nada aplica.
   IMPORTANTE: NO se overridea ningún fondo de página/banner/customBgUrl;
   el usuario decide qué tan claro/oscuro se ve su fondo.
   ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] body.ow-dir-body,
html[data-theme="light"] .ow-up,
html[data-theme="light"] #ow-profile-root,
html.theme-light body.ow-dir-body,
html.theme-light .ow-up,
html.theme-light #ow-profile-root {
    /* Superficies claras pero NO blanco puro plano: un pelín de gris
       cálido para que las tarjetas se despeguen del fondo del usuario. */
    --ow-bg: #f1f2f6;
    --ow-bg-alt: #e7e9f0;
    --ow-surface: #fbfbfe;
    --ow-surface-hover: #f0f1f7;
    --ow-surface-active: #e6e8f1;
    /* Bordes/sombras sutiles para separar cada card del fondo. */
    --ow-border: rgba(15,18,40,0.12);
    --ow-border-hover: rgba(15,18,40,0.22);
    /* Texto oscuro de alto contraste sobre las superficies claras. */
    --ow-text: #15172a;
    --ow-text-dim: #3a3d55;
    --ow-text-muted: #5b5f78;
    --ow-accent: #4f46e5;
    --ow-accent-dim: rgba(79,70,229,0.14);
    --ow-glass: rgba(252,252,254,0.82);
    --ow-glass-border: rgba(15,18,40,0.10);
    --ow-shadow: 0 8px 28px rgba(20,24,55,0.12);
    --ow-shadow-lg: 0 22px 60px rgba(20,24,55,0.18);
    --ow-modal-bg: rgba(20,24,55,0.45);
    --ow-modal-surface: #fbfbfe;
}
/* El navbar global pone body{color:#0f172a!important} + a{color:#4338ca} en
   light; lo dejamos pasar pero re-aseguramos el texto del showcase a las
   vars (alto contraste) para que bio/anuncio/links/stats se lean perfecto. */
html[data-theme="light"] .ow-up,
html[data-theme="light"] .ow-up h1,
html[data-theme="light"] .ow-up h3,
html[data-theme="light"] .ow-up h4,
html[data-theme="light"] .ow-up h5,
html[data-theme="light"] .ow-up p,
html[data-theme="light"] .ow-up li,
html.theme-light .ow-up,
html.theme-light .ow-up h1,
html.theme-light .ow-up h3,
html.theme-light .ow-up h4,
html.theme-light .ow-up h5,
html.theme-light .ow-up p,
html.theme-light .ow-up li { color: var(--ow-text); }
/* h2 de sección: mantener su color muted/accent original (no forzar a --ow-text). */
html[data-theme="light"] .ow-up__section h2,
html.theme-light .ow-up__section h2 { color: var(--ow-text-muted); }
/* LIGHT-LEGIBILITY-FIX 2026-06-01 (feedback: "en modo claro RE MAL, bio ilegible"):
   las bases del showcase fuerzan texto claro (#f1f5f9 !important, pensado para
   fondos oscuros custom). En modo claro el fondo de página es CLARO → ese texto
   queda ilegible (bio casi invisible). Re-forzamos texto OSCURO de alto contraste
   en el cuerpo del perfil con !important + especificidad alta (3 clases) para
   ganarle a las bases !important. El name/badges/links/botones conservan su accent
   (legibles en claro). */
html[data-theme="light"] .ow-up .ow-up__bio,
html.theme-light .ow-up .ow-up__bio { color: var(--ow-text-dim) !important; }
html[data-theme="light"] .ow-up .ow-up__quote,
html.theme-light .ow-up .ow-up__quote { color: var(--ow-text) !important; }
html[data-theme="light"] .ow-up .ow-up__handle,
html[data-theme="light"] .ow-up .ow-up__stat .lbl,
html[data-theme="light"] .ow-up .ow-up__stat-pill .lbl,
html.theme-light .ow-up .ow-up__handle,
html.theme-light .ow-up .ow-up__stat .lbl,
html.theme-light .ow-up .ow-up__stat-pill .lbl { color: var(--ow-text-muted) !important; }
/* Links del showcase usan el accent del perfil (el navbar pone a{color:#4338ca}). */
html[data-theme="light"] .ow-up a,
html.theme-light .ow-up a { color: var(--up-accent, #4f46e5); }

/* ── Cards que se lavaban en claro (fondos rgba-blancos sobre fondo claro).
      Les damos superficie clara concreta + borde/sombra sutil + texto oscuro.
      Sólo en light: en oscuro conservan su rgba(255,255,255,…) original. ── */
html[data-theme="light"] .ow-up__link,
html.theme-light .ow-up__link {
    background: var(--ow-surface) !important;
    border-color: var(--ow-border) !important;
    color: var(--ow-text) !important;
    box-shadow: 0 2px 10px rgba(20,24,55,0.06);
}
html[data-theme="light"] .ow-up__link:hover,
html.theme-light .ow-up__link:hover {
    background: var(--ow-surface-hover) !important;
}
html[data-theme="light"] .ow-up__conn,
html[data-theme="light"] .ow-up__clan,
html[data-theme="light"] .ow-up__stat-pill,
html.theme-light .ow-up__conn,
html.theme-light .ow-up__clan,
html.theme-light .ow-up__stat-pill {
    background: var(--ow-surface) !important;
    border-color: var(--ow-border) !important;
    color: var(--ow-text) !important;
}
html[data-theme="light"] .ow-up__clan:hover,
html.theme-light .ow-up__clan:hover {
    background: var(--ow-surface-hover) !important;
}
/* Discord & Roblox cards: tints accent claros (no el tint oscuro) + texto oscuro. */
html[data-theme="light"] .ow-up__discord-card,
html.theme-light .ow-up__discord-card {
    background: linear-gradient(135deg, rgba(88,101,242,0.10), rgba(88,101,242,0.03)) !important;
    border-color: rgba(88,101,242,0.30) !important;
    color: var(--ow-text) !important;
}
html[data-theme="light"] .ow-up__roblox-card,
html.theme-light .ow-up__roblox-card {
    background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(6,182,212,0.04)) !important;
    border-color: rgba(79,70,229,0.28) !important;
    color: var(--ow-text) !important;
}
html[data-theme="light"] .ow-up__dc-name,
html.theme-light .ow-up__dc-name { color: var(--ow-text); }
html[data-theme="light"] .ow-up__dc-line,
html.theme-light .ow-up__dc-line { color: var(--ow-text-dim); }
html[data-theme="light"] .ow-up__dc-line b,
html.theme-light .ow-up__dc-line b { color: var(--ow-text); }
html[data-theme="light"] .ow-up__dc-tag,
html[data-theme="light"] .ow-up__dc-detail,
html.theme-light .ow-up__dc-tag,
html.theme-light .ow-up__dc-detail { color: var(--ow-text-muted); }
html[data-theme="light"] .ow-up__rbx-sub,
html.theme-light .ow-up__rbx-sub { color: var(--ow-text-dim); }
/* Avatares internos de las cards (eran white-on-dark). */
html[data-theme="light"] .ow-up__rbx-avatar,
html[data-theme="light"] .ow-up__dc-avatar,
html[data-theme="light"] .ow-up__feat-img,
html[data-theme="light"] .ow-up__friend-avatar,
html.theme-light .ow-up__rbx-avatar,
html.theme-light .ow-up__dc-avatar,
html.theme-light .ow-up__feat-img,
html.theme-light .ow-up__friend-avatar {
    background: var(--ow-surface-active);
    border-color: var(--ow-border);
}
/* Notas, gallery tiles, footer code. */
html[data-theme="light"] .ow-up__notes,
html.theme-light .ow-up__notes { color: var(--ow-text-dim); }
html[data-theme="light"] .ow-up__gal-tile,
html.theme-light .ow-up__gal-tile {
    background: var(--ow-surface-active);
    border-color: var(--ow-border) !important;
}
html[data-theme="light"] .ow-up__footer,
html.theme-light .ow-up__footer { color: var(--ow-text-muted); }
html[data-theme="light"] .ow-up__footer code,
html.theme-light .ow-up__footer code {
    background: var(--ow-surface-active);
    color: var(--ow-text-dim);
}
/* tempNote header/expires y rotating: subir contraste del texto auxiliar. */
html[data-theme="light"] .ow-up__tn-header,
html[data-theme="light"] .ow-up__rotating,
html.theme-light .ow-up__tn-header,
html.theme-light .ow-up__rotating { color: var(--ow-text-muted); }
html[data-theme="light"] .ow-up__tn-text,
html.theme-light .ow-up__tn-text { color: var(--ow-text); }
/* Stats container + valores legibles sobre superficie clara. */
html[data-theme="light"] .ow-up__stats,
html.theme-light .ow-up__stats {
    background: var(--ow-surface);
    border-color: var(--ow-border);
    box-shadow: 0 4px 18px rgba(20,24,55,0.07);
}
html[data-theme="light"] .ow-up__stat .val,
html.theme-light .ow-up__stat .val { color: var(--ow-text); }
html[data-theme="light"] .ow-up__stat .lbl,
html.theme-light .ow-up__stat .lbl { color: var(--ow-text-muted); }
/* views-card: el número usa gradiente con #fff (invisible en claro). Lo
   reanclamos al accent oscuro sobre superficie clara, manteniendo el glow. */
html[data-theme="light"] .ow-up .ow-up__views-card,
html.theme-light .ow-up .ow-up__views-card {
    background: linear-gradient(135deg, var(--ow-surface), var(--ow-surface-hover));
    border-color: var(--ow-border);
}
html[data-theme="light"] .ow-up .ow-up__views-num,
html.theme-light .ow-up .ow-up__views-num {
    background: linear-gradient(180deg, var(--up-accent, #4f46e5) 0%, color-mix(in srgb, var(--up-accent, #4f46e5) 60%, #15172a) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] .ow-up .ow-up__views-label,
html.theme-light .ow-up .ow-up__views-label { color: var(--ow-text-muted); }
html[data-theme="light"] .ow-up .ow-up__views-trend,
html.theme-light .ow-up .ow-up__views-trend { color: var(--ow-text-dim); }

/* V72ad Native HTML5 audio player — funciona seguro */
.ow-up__nplay {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 9000;
    width: min(340px, calc(100vw - 44px));
    background: rgba(10, 12, 18, 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(99, 102, 241, 0.30);
    border-radius: 14px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55), 0 6px 18px -4px rgba(99, 102, 241, 0.2);
    overflow: hidden;
    animation: ow-up-audio-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ow-up__nplay-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.2);
}
.ow-up__nplay-cover {
    width: 36px; height: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    flex: 0 0 36px;
    display: grid; place-items: center;
}
.ow-up__nplay-cover img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
}
.ow-up__nplay-cover-fb {
    color: #fff;
    font-size: 1.1rem;
}
.ow-up__nplay-meta {
    flex: 1; min-width: 0;
}
.ow-up__nplay-title {
    font-weight: 800;
    font-size: 0.86rem;
    color: #f1f5f9;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-up__nplay-artist {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ow-up__nplay-close {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 0;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: grid; place-items: center;
    flex: 0 0 24px;
    transition: all 0.18s;
}
.ow-up__nplay-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ow-up__nplay-audio {
    display: block;
    width: 100%;
    height: 36px;
    background: rgba(0,0,0,0.4);
    color-scheme: dark;
    padding: 4px 8px;
    box-sizing: border-box;
}
@media (max-width: 720px) {
    .ow-up__nplay { right: 12px; bottom: 12px; }
}

/* V72an ROLE BADGES — insignia notable por rol con efectos */
.ow-up__role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    border: 1px solid;
    animation: badge-pulse 3s ease-in-out infinite;
}
.ow-up__role-badge::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: badge-sheen 3.5s ease-in-out infinite;
}
@keyframes badge-sheen { 0%, 50% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--badge-glow); } 50% { box-shadow: 0 0 22px 4px var(--badge-glow); } }
.ow-up__role-badge--ricardo {
    --badge-glow: rgba(168,85,247,0.65);
    background: linear-gradient(135deg, #a855f7, #6366f1, #ec4899);
    background-size: 200% 200%;
    color: #fff;
    border-color: rgba(255,255,255,0.30);
    animation: badge-pulse 3s ease-in-out infinite, badge-shift 6s ease infinite;
    text-shadow: 0 0 8px rgba(168,85,247,0.9);
}
@keyframes badge-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ow-up__role-badge--owner {
    --badge-glow: rgba(245,158,11,0.55);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: rgba(252,211,77,0.45);
    text-shadow: 0 0 6px rgba(245,158,11,0.8);
}
.ow-up__role-badge--developer {
    --badge-glow: rgba(6,182,212,0.55);
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    border-color: rgba(34,211,238,0.40);
    text-shadow: 0 0 6px rgba(6,182,212,0.8);
}
.ow-up__role-badge--staff {
    --badge-glow: rgba(139,92,246,0.45);
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border-color: rgba(167,139,250,0.40);
    text-shadow: 0 0 6px rgba(139,92,246,0.7);
}
.ow-up__role-badge-icon { font-size: 0.95em; }
.ow-up__role-badge-label { position: relative; z-index: 1; }

/* V72ak SPLASH SCREEN — entrada estilo guns.lol */
.ow-splash {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: hidden;
    cursor: pointer;
    animation: ow-splash-in 0.5s ease;
    background: #000;
}
@keyframes ow-splash-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ow-splash.ow-splash--exit {
    animation: ow-splash-out 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes ow-splash-out {
    to { opacity: 0; transform: scale(1.08); filter: blur(12px); }
}
.ow-splash__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(0.4) saturate(1.2);
    transform: scale(1.1);
    z-index: 1;
}
.ow-splash__bg--gradient {
    background: linear-gradient(135deg, #0a0c10, #1a1d27 50%, #2a1d3e);
}
.ow-splash__overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.7) 100%),
        radial-gradient(at 20% 20%, rgba(99,102,241,0.2), transparent 50%),
        radial-gradient(at 80% 80%, rgba(168,85,247,0.2), transparent 50%);
    z-index: 2;
}
.ow-splash__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 3;
    padding: 20px;
    text-align: center;
    animation: ow-splash-content-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes ow-splash-content-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.ow-splash__avatar {
    width: 130px; height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.10);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(99,102,241,0.25);
    animation: ow-splash-avatar-pulse 3s ease-in-out infinite;
}
@keyframes ow-splash-avatar-pulse {
    0%, 100% { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(99,102,241,0.25); }
    50%      { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 120px rgba(168,85,247,0.45); }
}
.ow-splash__name {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0,0,0,0.8);
    line-height: 1;
}
.ow-splash__handle {
    font-size: 1rem;
    color: rgba(255,255,255,0.55);
    font-family: 'Geist Mono', monospace;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}
.ow-splash__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 14px;
    border: 0;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 18px 44px -10px rgba(99, 102, 241, 0.6);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.ow-splash__btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 24px 60px -10px rgba(99, 102, 241, 0.75);
}
.ow-splash__btn:active { transform: scale(0.97); }
.ow-splash__btn-icon { font-size: 0.85em; }
.ow-splash__hint {
    margin-top: 4px;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* V72u connection icon img */
.ow-up__conn-icon-img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
}
.ow-up__conn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--conn-accent, rgba(255,255,255,0.10)) !important;
    border-radius: 11px !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    font-size: 0.84rem;
    font-weight: 600;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}
.ow-up__conn:hover {
    background: color-mix(in srgb, var(--conn-accent, #5b8cff) 18%, transparent) !important;
    transform: translateY(-1px);
    border-color: var(--conn-accent, #5b8cff) !important;
}
.ow-up__conn-icon {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    flex: 0 0 24px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--conn-accent, #5b8cff) 20%, transparent);
}
.ow-up__connections {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* V72p PREMIUM — fontStyle + neonEffect + animatedBg */
/* @import movido al inicio (Bug #1) */
.ow-up--font-serif   .ow-up__name { font-family: 'Playfair Display', Georgia, serif !important; letter-spacing: -0.01em; }
.ow-up--font-mono    .ow-up__name { font-family: 'JetBrains Mono', monospace !important; letter-spacing: -0.02em; }
.ow-up--font-display .ow-up__name { font-family: 'Outfit', sans-serif !important; letter-spacing: -0.04em; font-weight: 900 !important; }
.ow-up--font-neon    .ow-up__name { font-family: 'Audiowide', cursive !important; letter-spacing: 0.04em; }
.ow-up--font-glitch  .ow-up__name { font-family: 'VT323', monospace !important; font-size: 3.2rem !important; letter-spacing: 0.02em; }
.ow-up--font-retro   .ow-up__name { font-family: 'Press Start 2P', monospace !important; font-size: 1.6rem !important; line-height: 1.4; letter-spacing: 0; }

/* Neon effect animado */
.ow-up--neon .ow-up__name {
    color: var(--up-accent) !important;
    text-shadow:
        0 0 4px var(--up-accent),
        0 0 12px var(--up-accent),
        0 0 22px var(--up-accent),
        0 0 38px color-mix(in srgb, var(--up-accent) 80%, transparent);
    animation: ow-neon-flicker 3s ease-in-out infinite alternate;
}
@keyframes ow-neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 4px var(--up-accent),
            0 0 12px var(--up-accent),
            0 0 22px var(--up-accent),
            0 0 38px color-mix(in srgb, var(--up-accent) 80%, transparent);
    }
    20%, 24%, 55% { text-shadow: none; }
}
.ow-up--neon .ow-up__avatar-wrap::before {
    box-shadow: 0 0 36px var(--up-accent), 0 0 70px color-mix(in srgb, var(--up-accent) 50%, transparent) !important;
}

/* Animated backgrounds */
.ow-up__animbg {
    position: fixed; inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ow-up__animbg--particles {
    background:
      radial-gradient(2px 2px at 20% 30%, var(--up-accent), transparent),
      radial-gradient(2px 2px at 60% 70%, var(--up-accent), transparent),
      radial-gradient(2px 2px at 80% 10%, var(--up-accent), transparent),
      radial-gradient(2px 2px at 30% 80%, var(--up-accent), transparent),
      radial-gradient(1px 1px at 50% 50%, var(--up-accent), transparent),
      radial-gradient(1px 1px at 70% 40%, var(--up-accent), transparent),
      radial-gradient(1px 1px at 10% 60%, var(--up-accent), transparent),
      radial-gradient(1px 1px at 90% 90%, var(--up-accent), transparent);
    background-size: 100% 100%;
    opacity: 0.55;
    animation: ow-particles-pan 20s ease-in-out infinite alternate;
}
@keyframes ow-particles-pan {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-3%, -3%); }
}
.ow-up__animbg--stars {
    background:
      radial-gradient(1px 1px at 15% 20%, #fff, transparent 50%),
      radial-gradient(1px 1px at 25% 60%, #fff, transparent 50%),
      radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent 50%),
      radial-gradient(1px 1px at 55% 10%, #fff, transparent 50%),
      radial-gradient(1px 1px at 70% 50%, #fff, transparent 50%),
      radial-gradient(2px 2px at 85% 30%, #fff, transparent 50%),
      radial-gradient(1px 1px at 5% 90%, #fff, transparent 50%),
      radial-gradient(1px 1px at 95% 75%, #fff, transparent 50%);
    animation: ow-stars-blink 4s ease-in-out infinite alternate;
}
@keyframes ow-stars-blink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.ow-up__animbg--gradient {
    background: linear-gradient(125deg, var(--up-accent), #06b6d4, #a855f7, var(--up-accent));
    background-size: 300% 300%;
    opacity: 0.16;
    animation: ow-gradient-flow 18s ease infinite;
}
@keyframes ow-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.ow-up__animbg--aurora {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--up-accent) 35%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 30% 100%, rgba(6, 182, 212, 0.32), transparent 70%),
        radial-gradient(ellipse 60% 40% at 70% 100%, rgba(168, 85, 247, 0.30), transparent 70%);
    filter: blur(40px);
    animation: ow-aurora-shift 14s ease-in-out infinite alternate;
}
@keyframes ow-aurora-shift {
    0%   { transform: translateY(0) scale(1); }
    100% { transform: translateY(-20px) scale(1.05); }
}
.ow-up__animbg--rain {
    background-image: linear-gradient(180deg, transparent 50%, rgba(99, 102, 241, 0.6) 100%);
    background-size: 2px 14px;
    opacity: 0.18;
    animation: ow-rain-fall 0.7s linear infinite;
}
@keyframes ow-rain-fall {
    from { background-position: 0 0; }
    to { background-position: 0 14px; }
}
/* V72ao z-index FINAL — animbg ABAJO de TODO, contenido SIEMPRE encima */
.ow-up { isolation: isolate; }
.ow-up__animbg {
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.7;
}
.ow-up__banner { z-index: 1 !important; position: relative !important; }
.ow-up > *:not(.ow-up__banner):not(.ow-up__animbg):not(.ow-up__scanlines):not(.ow-up__grid-overlay):not(.ow-up__particles):not(.ow-up__pagebg) {
    position: relative !important;
    z-index: 5 !important;
}
.ow-up__head { z-index: 10 !important; }
.ow-up__avatar-wrap { z-index: 11 !important; }

/* V72ag tempNote styles — la sección de Estado en /u/slug */
.ow-up__section--tempnote {
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.06)) !important;
    border: 1px solid rgba(168,85,247,0.28) !important;
}
.ow-up__tempnote {
    display: flex; flex-direction: column;
    gap: 8px;
}
.ow-up__tn-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.55);
}
.ow-up__tn-icon { font-size: 1.05rem; }
.ow-up__tn-label {
    font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--up-accent, #a78bfa);
}
.ow-up__tn-expires {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    font-size: 0.7rem;
}
.ow-up__tn-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #f1f5f9;
    word-break: break-word;
}
.ow-up__rotating {
    margin-top: 6px;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.62);
    font-style: italic;
}
.ow-up__rot-text {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(99,102,241,0.10);
    border-radius: 999px;
    border: 1px solid rgba(99,102,241,0.20);
}

/* V69 mentions + autolinks en bio/notes */
.ow-up__mention {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 1px;
    background: rgba(99,102,241,0.16);
    border: 1px solid rgba(99,102,241,0.32);
    border-radius: 999px;
    color: #c7d2fe !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.18s ease;
    font-size: 0.92em;
}
.ow-up__mention:hover {
    background: rgba(99,102,241,0.26);
    transform: translateY(-1px);
}
.ow-up__rich-link {
    color: var(--up-accent, #6fe0ff) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    word-break: break-all;
}
.ow-up__rich-link:hover { opacity: 0.85; }

/* V69 stats bar (views + like) — pills compactos */
.ow-up__stats-bar {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.ow-up__stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: default;
    transition: all 0.22s ease;
    font-family: inherit;
}
.ow-up__stat-pill--like {
    cursor: pointer;
}
.ow-up__stat-pill--like:hover {
    background: rgba(244, 63, 94, 0.14);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fda4af;
    transform: translateY(-1px);
}
.ow-up__stat-pill--like.is-liked {
    background: linear-gradient(135deg, rgba(244,63,94,0.22), rgba(236,72,153,0.18));
    border-color: rgba(244,63,94,0.5);
    color: #ff6b8b;
    box-shadow: 0 6px 18px -6px rgba(244, 63, 94, 0.45);
}
.ow-up__stat-pill--like.is-liked .ow-up__sp-icon {
    animation: heartbeat 1.4s ease infinite;
}
@keyframes heartbeat {
    0%, 50%, 100% { transform: scale(1); }
    25%, 75% { transform: scale(1.15); }
}
.ow-up__sp-icon {
    font-size: 1rem;
    line-height: 1;
}
.ow-up__sp-val {
    font-variant-numeric: tabular-nums;
}

/* V66 Clanes "+N Ver más" botón */
.ow-up__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: rgba(91, 140, 255, 0.18);
    border: 1px solid rgba(91, 140, 255, 0.35);
    color: #c7d2fe;
    font-size: 0.7rem; font-weight: 800;
    vertical-align: middle;
}
.ow-up__clan-more {
    cursor: pointer !important;
    border: 1px dashed rgba(91, 140, 255, 0.45) !important;
    background: rgba(91, 140, 255, 0.10) !important;
    color: #c7d2fe !important;
    font-family: inherit;
    transition: all 0.18s ease !important;
}
.ow-up__clan-more:hover {
    background: rgba(91, 140, 255, 0.20) !important;
    border-style: solid !important;
    transform: translateY(-1px);
}
.ow-up__clan-more-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(91, 140, 255, 0.22);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}
.ow-up__clan-more-label { font-weight: 700; font-size: 0.84rem; }
.ow-up__clans-extra {
    display: contents !important;
}
.ow-up__clans-extra[hidden] {
    display: none !important;
}

/* Notes — long form text */
.ow-up__notes {
    color: rgba(241, 245, 249, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Gallery: grid de thumbnails */
.ow-up__gallery {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 10px !important;
}
.ow-up__gal-tile {
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    padding: 0 !important;
    transition: transform 0.2s ease;
}
.ow-up__gal-tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.ow-up__gal-tile:hover {
    transform: scale(1.04);
}

/* Clanes — chips compactos */
.ow-up__clans {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.ow-up__clan {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px 7px 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    font-size: 0.84rem;
    transition: all 0.18s ease !important;
}
.ow-up__clan:hover {
    background: rgba(91, 140, 255, 0.15) !important;
    border-color: rgba(91, 140, 255, 0.45) !important;
    transform: translateY(-1px);
}
.ow-up__clan img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover;
}

/* Footer */
.ow-up__footer {
    text-align: center;
    color: rgba(241, 245, 249, 0.4);
    font-size: 0.8rem;
    padding: 40px 20px 80px;
    line-height: 1.6;
}
.ow-up__footer code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 5px;
    color: rgba(241, 245, 249, 0.75);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.85em;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .ow-up__head {
        padding: 70px 18px 24px !important;
    }
    .ow-up__avatar-wrap {
        width: 130px;
        height: 130px;
    }
    .ow-up__name {
        font-size: 1.9rem !important;
    }
    .ow-up__bio {
        font-size: 0.95rem !important;
    }
    .ow-up > *:not(.ow-up__banner) {
        padding-left: 14px;
        padding-right: 14px;
    }
    .ow-up__section {
        padding: 18px !important;
        margin: 14px auto !important;
    }
}

/* Gallery lightbox overlay */
.ow-up__gal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
    animation: ow-up-fade 0.25s ease;
}
.ow-up__gal-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.ow-up__gal-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ow-up__gal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.06);
}
@keyframes ow-up-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Theme presets — override --up-accent dinámicamente */
.ow-up--theme-cyber   { --up-accent: #00ffd9; }
.ow-up--theme-neon    { --up-accent: #ff00aa; }
.ow-up--theme-sunset  { --up-accent: #ff7a45; }
.ow-up--theme-forest  { --up-accent: #4ade80; }
.ow-up--theme-rose    { --up-accent: #fb7185; }
.ow-up--theme-minimal { --up-accent: #94a3b8; }

/* Empty profile placeholder — when bio/links/etc. all missing */
.ow-up__bio:empty,
.ow-up:not(:has(.ow-up__bio)) .ow-up__head::after {
    content: '';
}


/* ════════════════════════════════════════════════════════════════════
   PROFILE-V41 (2026-05-24): Destacado + Conocidos sections
   ════════════════════════════════════════════════════════════════════ */
.ow-up__section--featured h2,
.ow-up__section--friends h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ow-up__friends-count {
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(91, 140, 255, 0.12);
    color: var(--up-accent, #5b8cff);
    border: 1px solid rgba(91, 140, 255, 0.25);
}

/* DESTACADO card */
.ow-up__feat-card {
    display: block;
    background: linear-gradient(135deg, rgba(91, 140, 255, 0.10), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(91, 140, 255, 0.25);
    border-radius: 16px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 16px -4px rgba(91, 140, 255, 0.12);
    position: relative;
    overflow: hidden;
}
.ow-up__feat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(91, 140, 255, 0.08) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ow-up__feat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(91, 140, 255, 0.55);
    box-shadow: 0 12px 32px -8px rgba(91, 140, 255, 0.35);
}
.ow-up__feat-card:hover::before { opacity: 1; }
.ow-up__feat-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.ow-up__feat-img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
}
.ow-up__feat-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.ow-up__feat-body { flex: 1; min-width: 0; }
.ow-up__feat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--up-accent, #5b8cff);
    font-weight: 700;
    margin-bottom: 3px;
}
.ow-up__feat-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ow-up__feat-note {
    font-size: 0.9rem;
    color: var(--ow-text-muted, rgba(255,255,255,0.65));
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ow-up__feat-arrow {
    font-size: 1.4rem;
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.25s ease;
    flex-shrink: 0;
}
.ow-up__feat-card:hover .ow-up__feat-arrow {
    opacity: 1;
    transform: translateX(4px);
    color: var(--up-accent, #5b8cff);
}

/* CONOCIDOS grid */
.ow-up__friends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.ow-up__friend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    animation: ow-up-friend-fade 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes ow-up-friend-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.ow-up__friend:hover {
    background: rgba(91, 140, 255, 0.10);
    border-color: rgba(91, 140, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(91, 140, 255, 0.25);
}
.ow-up__friend--noref { cursor: default; }
.ow-up__friend--noref:hover {
    transform: none;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}
.ow-up__friend-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.10);
}
.ow-up__friend-body { flex: 1; min-width: 0; }
.ow-up__friend-name {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ow-up__friend-label {
    font-size: 0.72rem;
    color: var(--ow-text-muted, rgba(255,255,255,0.55));
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* V74lt — MODO CLARO: feat-card mantiene su tint accent (glow) pero con
   sombra clara y texto oscuro; el body usa las vars ya re-mapeadas a oscuro. */
[data-theme="light"] .ow-up__feat-card {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.09), rgba(99, 102, 241, 0.04));
    border-color: rgba(79, 70, 229, 0.26);
    box-shadow: 0 4px 16px -4px rgba(79, 70, 229, 0.14);
    color: var(--ow-text);
}
[data-theme="light"] .ow-up__feat-card:hover {
    border-color: rgba(79, 70, 229, 0.55);
    box-shadow: 0 12px 30px -8px rgba(79, 70, 229, 0.28);
}
[data-theme="light"] .ow-up__feat-note { color: var(--ow-text-muted); }
/* Friend card: superficie clara coherente + texto oscuro legible + borde sutil. */
[data-theme="light"] .ow-up__friend {
    background: var(--ow-surface);
    border-color: var(--ow-border);
    color: var(--ow-text);
    box-shadow: 0 2px 10px rgba(20,24,55,0.06);
}
[data-theme="light"] .ow-up__friend:hover {
    background: rgba(79, 70, 229, 0.07);
    border-color: rgba(79, 70, 229, 0.32);
}
[data-theme="light"] .ow-up__friend--noref:hover {
    background: var(--ow-surface);
    border-color: var(--ow-border);
}
[data-theme="light"] .ow-up__friend-name { color: var(--ow-text); }
[data-theme="light"] .ow-up__friend-label { color: var(--ow-text-muted); }

@media (max-width: 600px) {
    .ow-up__feat-card { padding: 14px; }
    .ow-up__feat-img { width: 52px; height: 52px; border-radius: 12px; }
    .ow-up__feat-name { font-size: 1.05rem; }
    .ow-up__friends { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   V72ap NUCLEAR FIX (2026-05-27) — Garantiza que el HEAD (avatar+nombre+
   badge+bio) se renderice visible SIEMPRE, sin conflicts de z-index,
   overflow, isolation ni nada raro. Reset completo + display forzado.
   ════════════════════════════════════════════════════════════════════ */

/* Article: flow normal, no min-height absurdo */
.ow-up,
article.ow-up {
    display: block !important;
    position: relative !important;
    isolation: auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 80px 0 !important;
    contain: none !important;
    transform: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    color: #f1f5f9 !important;
}

/* Banner: hero arriba, posición relativa, NO fixed/absolute */
/* 2026-06-02 BANNER MÁS "BANNER": 360px desktop / 240px mobile (antes 340/220)
   para que se vea como un banner ancho. Es la regla ganadora (mayor especificidad
   que .ow-up__banner). El overlap del avatar lo da el margin-top:-90px del head. */
.ow-up > .ow-up__banner {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
    border-radius: 0 0 22px 22px;
}
@media (max-width: 720px) {
    .ow-up > .ow-up__banner { height: 240px !important; border-radius: 0 0 14px 14px; }
}

/* Animbg: SIEMPRE detrás de todo, fixed, no afecta flow */
.ow-up > .ow-up__animbg {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* HEAD: VISIBLE garantizado. Stack vertical, centrado, encima del banner. */
.ow-up > .ow-up__head,
header.ow-up__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: -90px auto 0 !important;
    padding: 0 20px 28px 20px !important;
    position: relative !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
    background: transparent !important;
    color: #f1f5f9 !important;
    pointer-events: auto !important;
    min-height: 280px;
}
@media (max-width: 720px) {
    .ow-up > .ow-up__head,
    header.ow-up__head {
        margin-top: -60px !important;
        padding: 0 14px 22px 14px !important;
    }
}

/* AVATAR WRAP: 160x160 garantizado, anillo de gradiente, visible */
.ow-up__head .ow-up__avatar-wrap,
.ow-up .ow-up__avatar-wrap {
    display: block !important;
    position: relative !important;
    width: 168px !important;
    height: 168px !important;
    min-width: 168px;
    min-height: 168px;
    padding: 4px !important;
    margin: 0 0 18px 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--up-accent, #5b8cff), #38bdf8, #a855f7) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.6),
        0 0 0 6px rgba(10, 12, 16, 0.92),
        0 0 80px color-mix(in srgb, var(--up-accent, #5b8cff) 35%, transparent);
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 51 !important;
    flex-shrink: 0 !important;
}
@media (max-width: 720px) {
    .ow-up__head .ow-up__avatar-wrap,
    .ow-up .ow-up__avatar-wrap { width: 130px !important; height: 130px !important; min-width: 130px; min-height: 130px; }
}

/* AVATAR IMG: llena el wrap, fondo de fallback visible */
.ow-up__head .ow-up__avatar,
.ow-up .ow-up__avatar {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #1a1d27 !important;
    border: 3px solid #0a0c10 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ow-up__head .ow-up__avatar:hover { transform: scale(1.05); }

/* IDENTITY: contenedor vertical centrado, sin flex:1 raro */
.ow-up__head .ow-up__identity,
.ow-up .ow-up__identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 600px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Nombre: grande, color claro forzado */
.ow-up__head .ow-up__name,
.ow-up .ow-up__name {
    margin: 0 !important;
    font-size: clamp(1.7rem, 4.2vw, 2.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: #f1f5f9 !important;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    opacity: 1 !important;
    visibility: visible !important;
}
.ow-up[class*="--theme-"] .ow-up__head .ow-up__name {
    color: var(--up-accent, #f1f5f9) !important;
}

/* Handle: visible con accent */
.ow-up__head .ow-up__handle,
.ow-up .ow-up__handle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    font-family: 'Geist Mono', ui-monospace, monospace !important;
    font-size: 0.92rem !important;
    color: var(--up-accent, #5b8cff) !important;
    opacity: 0.9 !important;
    visibility: visible !important;
}

/* Role badge: centrado, visible */
.ow-up__head .ow-up__role-badge,
.ow-up .ow-up__role-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bio: color claro forzado */
.ow-up__head .ow-up__bio,
.ow-up .ow-up__bio {
    margin: 6px 0 0 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    color: rgba(241, 245, 249, 0.88) !important;
    max-width: 560px;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Quote: visible */
.ow-up__head .ow-up__quote,
.ow-up .ow-up__quote {
    opacity: 1 !important;
    visibility: visible !important;
    color: rgba(241, 245, 249, 0.70) !important;
}

/* Stats bar (views/likes): visible debajo de bio */
.ow-up__head .ow-up__stats-bar,
.ow-up .ow-up__stats-bar {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hijos del article (no banner/animbg/stats): centrados, max 720px.
   V74: stats excluido para poder usar display:grid.
   V78: scanlines/grid-overlay/particles excluidos — son capas FIXED full-bleed,
   no deben caer en la columna 720px (si caían, el !important position:relative +
   max-width las encogía y rompía el overlay). */
.ow-up > *:not(.ow-up__banner):not(.ow-up__animbg):not(.ow-up__head):not(.ow-up__stats):not(.ow-up__scanlines):not(.ow-up__grid-overlay):not(.ow-up__particles):not(.ow-up__pagebg) {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
@media (max-width: 720px) {
    .ow-up > *:not(.ow-up__banner):not(.ow-up__animbg):not(.ow-up__head):not(.ow-up__stats):not(.ow-up__scanlines):not(.ow-up__grid-overlay):not(.ow-up__particles):not(.ow-up__pagebg) {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Fix: si el ssr shell tiene el spinner de carga, ocultarlo cuando el
   JS ya renderizó (el JS reemplaza todo, pero por si acaso) */
#ow-ssr-shell .ow-dir-loading { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   V72aq UI POLISH (2026-05-27) — Refinamiento responsive + estética
   para TODAS las secciones del perfil DEBAJO del head. Hall of Shame,
   stats prominentes, role badges intensificados, mobile 320–414px,
   tablet 768px, glass-morphism unificado y spacing consistente.
   NO toca el head (eso es V72ap).
   ════════════════════════════════════════════════════════════════════ */

/* ---- Tokens locales para consistencia ---- */
.ow-up {
    --owp-gap: 18px;
    --owp-radius: 18px;
    --owp-radius-sm: 12px;
    --owp-radius-lg: 22px;
    --owp-glass-bg: rgba(15, 18, 25, 0.58);
    --owp-glass-border: rgba(255, 255, 255, 0.07);
    --owp-text: #f1f5f9;
    --owp-text-mute: rgba(241, 245, 249, 0.66);
    --owp-text-dim: rgba(241, 245, 249, 0.46);
    --owp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Spacing consistente entre secciones ---- */
.ow-up .ow-up__section {
    margin: 0 auto var(--owp-gap, 18px) !important;
    box-shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.55);
}
.ow-up .ow-up__section + .ow-up__section { margin-top: var(--owp-gap, 18px) !important; }
.ow-up .ow-up__section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ════════ HALL OF SHAME — sección entera (V72aq) ════════ */
.ow-up__section--shame,
.ow-up__shame-section {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.10), rgba(190, 18, 60, 0.04)) !important;
    border: 1px solid rgba(244, 63, 94, 0.28) !important;
    box-shadow: 0 12px 40px -20px rgba(244, 63, 94, 0.45) !important;
}
.ow-up__section--shame h2,
.ow-up__shame-section h2 {
    color: #fda4af !important;
}
.ow-up__shame {
    display: grid;
    gap: 14px;
}
.ow-up__shame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.ow-up__shame-card,
.ow-up__shame-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.22);
    transition: transform 0.22s var(--owp-ease), box-shadow 0.22s ease, border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}
.ow-up__shame-card::before,
.ow-up__shame-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(244, 63, 94, 0.18), transparent 60%);
    pointer-events: none;
    opacity: 0.7;
}
.ow-up__shame-card:hover,
.ow-up__shame-item:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 16px 32px -12px rgba(244, 63, 94, 0.45);
}
.ow-up__shame-img,
.ow-up__shame-photo {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(244, 63, 94, 0.35);
    flex-shrink: 0;
    display: block;
}
.ow-up__shame-img--placeholder,
.ow-up__shame-photo--placeholder {
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: rgba(244, 63, 94, 0.7);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(190, 18, 60, 0.06));
}
.ow-up__shame-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.ow-up__shame-name,
.ow-up__shame-title {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ow-up__shame-emoji {
    display: inline-block;
    margin-right: 4px;
    font-size: 1.1em;
    filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.5));
}
.ow-up__shame-reason {
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.ow-up__shame-date {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    font-family: 'Geist Mono', ui-monospace, monospace;
}

/* Hall of Shame en mobile: una columna, imagen full-width arriba */
@media (max-width: 480px) {
    .ow-up__shame-grid { grid-template-columns: 1fr; gap: 10px; }
    .ow-up__shame-card,
    .ow-up__shame-item {
        grid-template-columns: 72px 1fr;
        padding: 10px;
        gap: 10px;
    }
    .ow-up__shame-img,
    .ow-up__shame-photo { width: 72px; height: 72px; border-radius: 10px; }
    .ow-up__shame-name,
    .ow-up__shame-title { font-size: 0.94rem; }
    .ow-up__shame-reason { font-size: 0.82rem; -webkit-line-clamp: 2; }
}

/* ════════ STATS BAR de views/likes — MÁS PROMINENTE (V72aq) ════════ */
.ow-up .ow-up__stats-bar {
    gap: 10px !important;
    margin-top: 14px !important;
}
.ow-up .ow-up__stat-pill {
    padding: 10px 16px !important;
    font-size: 0.92rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}
.ow-up .ow-up__stat-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.ow-up .ow-up__stat-pill:hover::after { transform: translateX(100%); }
.ow-up .ow-up__stat-pill .ow-up__sp-icon {
    font-size: 1.15rem !important;
}
.ow-up .ow-up__stat-pill .ow-up__sp-val {
    font-weight: 900;
    font-size: 1rem;
}
.ow-up .ow-up__stat-pill--views {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(56, 189, 248, 0.10)) !important;
    border-color: rgba(99, 102, 241, 0.38) !important;
    color: #c7d2fe !important;
}
.ow-up .ow-up__stat-pill--views:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.65) !important;
    box-shadow: 0 14px 28px -10px rgba(99, 102, 241, 0.45);
}
.ow-up .ow-up__stat-pill--like {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.10), rgba(236, 72, 153, 0.06)) !important;
}

/* ════════ ROLE BADGES — más sheen + glow (V72aq) ════════ */
.ow-up .ow-up__role-badge {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.10em !important;
    border-width: 1.5px !important;
}
@keyframes owp-badge-sheen-strong {
    0%, 40% { transform: translateX(-120%) skewX(-12deg); }
    100%    { transform: translateX(120%) skewX(-12deg); }
}
.ow-up .ow-up__role-badge--ricardo,
.ow-up .ow-up__role-badge--owner,
.ow-up .ow-up__role-badge--developer,
.ow-up .ow-up__role-badge--staff {
    box-shadow: 0 6px 22px -6px var(--badge-glow, rgba(99, 102, 241, 0.5));
}
.ow-up .ow-up__role-badge--ricardo::before,
.ow-up .ow-up__role-badge--owner::before,
.ow-up .ow-up__role-badge--developer::before,
.ow-up .ow-up__role-badge--staff::before {
    animation: owp-badge-sheen-strong 2.6s ease-in-out infinite !important;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%) !important;
}
.ow-up .ow-up__role-badge--ricardo {
    background-size: 220% 220% !important;
    animation: badge-pulse 2.6s ease-in-out infinite, badge-shift 5s ease infinite !important;
}

/* ════════ PINNED (anuncio fijado) — más vistoso (V72aq) ════════ */
.ow-up__pinned,
.ow-up__section--pinned {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.03)) !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
    box-shadow: 0 12px 32px -14px rgba(245, 158, 11, 0.35) !important;
    position: relative;
}
.ow-up__section--pinned h2 {
    color: #fcd34d !important;
}
.ow-up__pinned-icon,
.ow-up__pinned::before {
    color: #fcd34d;
}
.ow-up__pinned-text {
    color: var(--owp-text);
    line-height: 1.55;
    font-size: 0.96rem;
    word-break: break-word;
}

/* ════════ NOTES (long-form) — typography enhance (V72aq) ════════ */
.ow-up .ow-up__notes {
    font-size: 0.96rem;
    line-height: 1.65;
    color: rgba(241, 245, 249, 0.88);
    word-break: break-word;
}
.ow-up .ow-up__notes p { margin: 0 0 10px; }
.ow-up .ow-up__notes p:last-child { margin-bottom: 0; }
.ow-up .ow-up__notes a {
    color: var(--up-accent, #6fe0ff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ════════ GALLERY — refinado responsive (V72aq) ════════ */
.ow-up .ow-up__gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
}
.ow-up .ow-up__gal-tile {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s var(--owp-ease), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.ow-up .ow-up__gal-tile:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 16px 32px -10px rgba(99, 102, 241, 0.4);
}
@media (max-width: 480px) {
    .ow-up .ow-up__gallery {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
        gap: 8px !important;
    }
    .ow-up .ow-up__gal-tile { border-radius: 12px !important; }
}
@media (min-width: 640px) and (max-width: 900px) {
    .ow-up .ow-up__gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ════════ CONNECTIONS — touch-friendly + glow (V72aq) ════════ */
.ow-up .ow-up__connections {
    gap: 8px !important;
}
.ow-up .ow-up__conn {
    min-height: 38px;
    padding: 8px 14px 8px 10px !important;
    font-size: 0.86rem;
    border-radius: 12px !important;
}
.ow-up .ow-up__conn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--conn-accent, #5b8cff) 60%, transparent);
}
.ow-up .ow-up__conn-icon-img,
.ow-up .ow-up__conn-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .ow-up .ow-up__connections { gap: 6px !important; }
    .ow-up .ow-up__conn {
        padding: 7px 12px 7px 8px !important;
        font-size: 0.82rem !important;
        min-height: 36px;
    }
    .ow-up .ow-up__conn-icon-img,
    .ow-up .ow-up__conn-icon { width: 18px !important; height: 18px !important; }
}

/* ════════ NPLAY (audio player) — mobile fix (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up__nplay {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        width: auto !important;
        max-width: none !important;
    }
    .ow-up__nplay-head { gap: 8px; }
    .ow-up__nplay-cover { width: 40px; height: 40px; flex-shrink: 0; }
    .ow-up__nplay-title { font-size: 0.85rem; }
    .ow-up__nplay-artist { font-size: 0.72rem; }
}

/* ════════ FRIENDS — 320px no rompe, tablet 2 cols (V72aq) ════════ */
.ow-up .ow-up__friends {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
@media (min-width: 481px) and (max-width: 900px) {
    .ow-up .ow-up__friends {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .ow-up .ow-up__friends {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .ow-up .ow-up__friend {
        padding: 10px;
    }
    .ow-up .ow-up__friend-avatar { width: 34px; height: 34px; }
    .ow-up .ow-up__friend-name { font-size: 0.86rem; }
    .ow-up .ow-up__friend-label { font-size: 0.70rem; }
}

/* ════════ TEMPNOTE (estado) — slight polish (V72aq) ════════ */
.ow-up .ow-up__section--tempnote {
    box-shadow: 0 12px 32px -14px rgba(168, 85, 247, 0.35) !important;
}
.ow-up .ow-up__tn-text {
    font-size: 0.98rem;
}
@media (max-width: 480px) {
    .ow-up .ow-up__tn-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .ow-up .ow-up__tn-expires {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }
    .ow-up .ow-up__tn-text { font-size: 0.92rem; }
}

/* ════════ FEATURED card — keep alignment on small (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up .ow-up__feat-card {
        padding: 12px !important;
        gap: 12px;
    }
    .ow-up .ow-up__feat-img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 10px !important;
    }
    .ow-up .ow-up__feat-name { font-size: 1rem !important; }
    .ow-up .ow-up__feat-desc { font-size: 0.82rem; }
}

/* ════════ LINKS / SUBLINKS — mobile padding (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up .ow-up__link {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .ow-up .ow-up__link-icon { font-size: 1.2rem; width: 28px; }
    .ow-up .ow-up__link-name { font-size: 0.92rem; }
}

/* ════════ DISCORD / ROBLOX cards — mobile wrap (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up .ow-up__discord-card,
    .ow-up .ow-up__roblox-card,
    .ow-up .ow-up__roblox {
        padding: 12px !important;
        gap: 10px !important;
        flex-wrap: wrap;
    }
    .ow-up .ow-up__rbx-avatar {
        width: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;
    }
    .ow-up .ow-up__rbx-name { font-size: 0.94rem !important; }
    .ow-up .ow-up__rbx-sub { font-size: 0.78rem !important; }
    .ow-up .ow-up__rbx-cta {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* ════════ CLANS — mobile (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up .ow-up__clans { gap: 6px !important; }
    .ow-up .ow-up__clan {
        padding: 6px 10px 6px 6px !important;
        font-size: 0.80rem;
    }
    .ow-up .ow-up__clan img { width: 20px !important; height: 20px !important; }
}

/* ════════ SECTION padding tight para 320–414px (V72aq) ════════ */
@media (max-width: 480px) {
    .ow-up .ow-up__section {
        padding: 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }
    .ow-up .ow-up__section h2 {
        font-size: 0.72rem !important;
        margin-bottom: 12px !important;
    }
}

/* ════════ Tablet 768px refinements (V72aq) ════════ */
@media (min-width: 481px) and (max-width: 900px) {
    .ow-up .ow-up__section {
        padding: 20px 22px !important;
    }
    .ow-up .ow-up__shame-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ════════ No overflow horizontal en ningún viewport (V72aq) ════════ */
html, body { overflow-x: hidden; }
.ow-up,
.ow-up * {
    max-width: 100%;
    box-sizing: border-box;
}
.ow-up img,
.ow-up video {
    max-width: 100%;
    height: auto;
}
.ow-up__banner img,
.ow-up__banner video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* V74lt — MODO CLARO: shame/pinned mantienen su tint de color (rojo/ámbar =
   estética accent) pero un poco más sólido para contrastar sobre fondo claro,
   y forzamos texto oscuro legible en su interior. */
[data-theme="light"] .ow-up__shame-section {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.05)) !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
    box-shadow: 0 10px 32px -18px rgba(244, 63, 94, 0.40) !important;
}
[data-theme="light"] .ow-up__shame-card,
[data-theme="light"] .ow-up__shame-item {
    background: rgba(244, 63, 94, 0.10);
    border-color: rgba(244, 63, 94, 0.30);
}
[data-theme="light"] .ow-up__shame-name,
[data-theme="light"] .ow-up__shame-title { color: #9f1239; }
[data-theme="light"] .ow-up__shame-reason { color: var(--ow-text-dim); }
[data-theme="light"] .ow-up__shame-date { color: var(--ow-text-muted); }
[data-theme="light"] .ow-up__pinned,
[data-theme="light"] .ow-up__section--pinned {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.05)) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
}
/* LIGHT-FIX-2 2026-06-01 (feedback "se ve fatal el modo claro"): el override de
   pinned solo cambiaba el FONDO, no el texto → el título DESTACADO + la feat-card
   quedaban claros sobre claro (ilegibles); el reproductor era una barra oscura. */
[data-theme="light"] .ow-up__section--pinned h2,
[data-theme="light"] .ow-up__pinned-text,
[data-theme="light"] .ow-up__pinned .ow-up__feat-name,
[data-theme="light"] .ow-up__section--pinned .ow-up__feat-name,
[data-theme="light"] .ow-up__feat-name { color: var(--ow-text) !important; }
[data-theme="light"] .ow-up__pinned .ow-up__feat-note,
[data-theme="light"] .ow-up__section--pinned .ow-up__feat-note,
[data-theme="light"] .ow-up__feat-note { color: var(--ow-text-muted) !important; }
/* Reproductor de música (now-playing) en CLARO: glass claro + texto oscuro
   (era una barra oscura flotando sobre el fondo claro = "se ve mal"). */
[data-theme="light"] .ow-up__nplay {
    background: linear-gradient(135deg, rgba(255,255,255,0.90), rgba(244,246,251,0.86)) !important;
    border-color: rgba(20,24,55,0.12) !important;
    box-shadow: 0 24px 60px -18px rgba(20,24,55,0.28), 0 0 0 1px rgba(255,255,255,0.55) inset !important;
}
[data-theme="light"] .ow-up__nplay-title { color: #15172a !important; text-shadow: none !important; }
[data-theme="light"] .ow-up__nplay-artist { color: #5b5f78 !important; }
[data-theme="light"] .ow-up__nplay-close { background: rgba(20,24,55,0.06) !important; border-color: rgba(20,24,55,0.12) !important; color: #5b5f78 !important; }
[data-theme="light"] .ow-up__nplay-audio { background: rgba(20,24,55,0.05) !important; filter: none !important; }
[data-theme="light"] .ow-up__nplay::after { opacity: 0.30; }
[data-theme="light"] .ow-up__nplay-cover-fb { color: rgba(20,24,55,0.6); }

/* ════════ Reduced motion (V72aq) ════════ */
@media (prefers-reduced-motion: reduce) {
    .ow-up .ow-up__role-badge,
    .ow-up .ow-up__role-badge::before,
    .ow-up .ow-up__stat-pill::after {
        animation: none !important;
        transition: none !important;
    }
}

/* V72aq END ─────────────────────────────────────────────────────── */

/* ════════ V73 PROFILE-VIEWS-CARD (2026-05-27) ════════
   "vile quiere que las vistas se vean prominentes — 20 vistas en mi perfil
   por ejemplo". Tarjeta glass con número grande, subtítulo de tendencia,
   spark line de barras y tooltip al hover con stats agregadas. */
.ow-up .ow-up__views-card {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    min-width: 168px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb, 102,126,234), 0.18) inset,
        0 6px 22px -10px rgba(var(--accent-rgb, 102,126,234), 0.32),
        0 1px 0 rgba(255,255,255,0.05) inset;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    cursor: default;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: visible;
}
.ow-up .ow-up__views-card:hover,
.ow-up .ow-up__views-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb, 102,126,234), 0.42);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb, 102,126,234), 0.32) inset,
        0 10px 30px -10px rgba(var(--accent-rgb, 102,126,234), 0.48);
    outline: none;
}
.ow-up .ow-up__views-card-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.ow-up .ow-up__views-icon {
    font-size: 1.05rem;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 102,126,234), 0.35));
}
.ow-up .ow-up__views-num {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--accent, #667eea) 70%, #fff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.ow-up .ow-up__views-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3, rgba(255,255,255,0.55));
    margin-left: 2px;
}
.ow-up .ow-up__views-trend {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.7;
    color: var(--text-2, rgba(255,255,255,0.75));
    min-height: 1em;
    transition: opacity .2s ease, color .2s ease;
}
.ow-up .ow-up__views-trend.is-active {
    color: var(--accent, #667eea);
    opacity: 1;
}
.ow-up .ow-up__views-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    margin-top: 4px;
}
.ow-up .ow-up__views-spark-bar {
    flex: 1 1 0;
    min-width: 4px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent, #667eea) 95%, #fff) 0%,
        color-mix(in srgb, var(--accent, #667eea) 55%, transparent) 100%);
    border-radius: 2px 2px 0 0;
    transition: filter .2s ease, transform .2s ease;
}
.ow-up .ow-up__views-card:hover .ow-up__views-spark-bar {
    filter: brightness(1.2);
}
.ow-up .ow-up__views-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 12px;
    background: rgba(20, 20, 28, 0.95);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 50;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
}
.ow-up .ow-up__views-card:hover .ow-up__views-tooltip,
.ow-up .ow-up__views-card:focus-within .ow-up__views-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* La views-card vive dentro de stats-bar; sustituye al pill antiguo, que
   se queda como fallback si el JS no hidrata. */
.ow-up .ow-up__stats-bar {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 520px) {
    .ow-up .ow-up__views-card { min-width: 140px; padding: 10px 12px; }
    .ow-up .ow-up__views-num { font-size: 1.8rem; }
    .ow-up .ow-up__views-tooltip { white-space: normal; max-width: 240px; }
}
/* V73 END ─────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   V73a EMPTY STATE — perfiles inexistentes / errores
   Fix del CSS roto cuando el perfil no existe: card centrada vertical-
   mente en viewport, branded con ONE WAY, separado del navbar.
   ════════════════════════════════════════════════════════════════════ */
body.ow-dir-body #ow-profile-root:has(.ow-dir-empty),
body.ow-dir-body #ow-profile-root.is-empty {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    box-sizing: border-box;
}

body.ow-dir-body .ow-dir-empty {
    text-align: center !important;
    padding: 56px 36px !important;
    background: linear-gradient(160deg, rgba(15,18,26,0.95), rgba(20,12,30,0.85)) !important;
    border: 1px solid rgba(91, 140, 255, 0.25) !important;
    border-radius: 24px !important;
    color: #f1f5f9 !important;
    font-size: 1.0rem !important;
    line-height: 1.65 !important;
    max-width: 520px !important;
    width: 100%;
    margin: 0 auto !important;
    box-shadow:
        0 22px 60px -16px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 80px -20px rgba(99, 102, 241, 0.30);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    animation: ow-empty-fade-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ow-empty-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.ow-dir-body .ow-dir-empty::before {
    content: 'ONE WAY';
    position: absolute;
    top: 14px; right: 18px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(99, 102, 241, 0.55);
    text-shadow: 0 0 14px rgba(99, 102, 241, 0.4);
}
body.ow-dir-body .ow-dir-empty::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(168,85,247,0.3), rgba(6,182,212,0.4));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}
body.ow-dir-body .ow-dir-empty__icon {
    font-size: 4rem !important;
    margin: 0 0 18px 0 !important;
    opacity: 1 !important;
    display: block !important;
    filter: drop-shadow(0 8px 22px rgba(99, 102, 241, 0.45));
    animation: ow-empty-float 3s ease-in-out infinite;
}
@keyframes ow-empty-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
body.ow-dir-body .ow-dir-empty p {
    margin-top: 18px !important;
    color: rgba(241, 245, 249, 0.62) !important;
    font-size: 0.82rem !important;
}
body.ow-dir-body .ow-dir-empty code {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.30);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.85em;
    color: #c7d2fe;
}
body.ow-dir-body .ow-dir-empty a,
body.ow-dir-body .ow-dir-empty__cta {
    display: inline-block;
    margin-top: 22px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
    box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.55);
}
body.ow-dir-body .ow-dir-empty a:hover,
body.ow-dir-body .ow-dir-empty__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(99, 102, 241, 0.75);
}

@media (max-width: 600px) {
    body.ow-dir-body #ow-profile-root:has(.ow-dir-empty),
    body.ow-dir-body #ow-profile-root.is-empty {
        min-height: calc(100vh - 60px);
        padding: 40px 16px;
    }
    body.ow-dir-body .ow-dir-empty {
        padding: 40px 22px !important;
        font-size: 0.95rem !important;
    }
    body.ow-dir-body .ow-dir-empty__icon { font-size: 3.2rem !important; }
}

/* ════════════════════════════════════════════════════════════════════
   V73c — Fixes finales (2026-05-27):
   1. Fondo del body con gradientes (no negro plano)
   2. Banner-fade más suave (no "cortado" a la mitad)
   3. Friends sin avatar usan fallback Discord embed
   ════════════════════════════════════════════════════════════════════ */

/* Fix 1: Fondo body con gradientes (no negro plano) — backdrop decorativo del
   showcase (NO es el banner del usuario, ese es .ow-up__banner aparte). */
body.ow-dir-body,
html body.ow-dir-body,
body:has(.ow-up),
html body:has(.ow-up) {
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(99, 102, 241, 0.18), transparent 65%),
        radial-gradient(ellipse 70% 50% at 80% 30%, rgba(168, 85, 247, 0.14), transparent 60%),
        radial-gradient(ellipse 60% 60% at 50% 100%, rgba(6, 182, 212, 0.10), transparent 65%),
        #0a0c10 !important;
    background-attachment: fixed !important;
}
/* V74lt — MODO CLARO: backdrop decorativo aclarado (mantiene los glows accent
   para la estética), de modo que las cards contrasten sobre fondo claro.
   El banner/customBgUrl del usuario (.ow-up__banner) NO se toca. */
html[data-theme="light"] body.ow-dir-body,
html[data-theme="light"] body:has(.ow-up),
html.theme-light body.ow-dir-body,
html.theme-light body:has(.ow-up) {
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(99, 102, 241, 0.16), transparent 65%),
        radial-gradient(ellipse 70% 50% at 80% 30%, rgba(168, 85, 247, 0.12), transparent 60%),
        radial-gradient(ellipse 60% 60% at 50% 100%, rgba(6, 182, 212, 0.10), transparent 65%),
        #eef0f6 !important;
    background-attachment: fixed !important;
}

/* Fix 2: Banner-fade mucho más suave — el actual hace gradient muy abrupto al 50%.
   Bajar a 30% height + opacidad inferior. Sin "corte" visual. */
.ow-up > .ow-up__banner .ow-up__banner-fade,
.ow-up__banner > .ow-up__banner-fade {
    inset: auto 0 0 0 !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    height: 40% !important;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(10, 12, 16, 0.20) 40%,
        rgba(10, 12, 16, 0.60) 75%,
        rgba(10, 12, 16, 0.95) 100%) !important;
    pointer-events: none !important;
}

/* Banner: borde inferior más suave (radius mayor) y subtle vignette */
.ow-up > .ow-up__banner,
.ow-up__banner {
    border-radius: 0 0 28px 28px !important;
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px -16px rgba(0, 0, 0, 0.6) !important;
}
@media (max-width: 720px) {
    .ow-up > .ow-up__banner,
    .ow-up__banner { border-radius: 0 0 18px 18px !important; }
}

/* Asegurar que el animbg fixed cubra todo el viewport */
.ow-up > .ow-up__animbg,
.ow-up__animbg {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.55 !important;
}

/* Fix 3: Friends avatar fallback más limpio (cuando no hay avatar Discord) */
.ow-up__friend-avatar[src=""],
.ow-up__friend-avatar:not([src]),
.ow-up__friend img.ow-up__friend-avatar[src*="undefined"],
.ow-up__friend img.ow-up__friend-avatar[src*="null"] {
    background: linear-gradient(135deg, #5b8cff, #a855f7) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}

/* ════════════════════════════════════════════════════════════════════
   V73f — Pulir tooltip vistas + asegurar legibilidad sobre badge
   ════════════════════════════════════════════════════════════════════ */
.ow-up .ow-up__views-tooltip {
    /* Abrir HACIA ABAJO en vez de arriba (no choca con badge ni quote) */
    bottom: auto !important;
    top: calc(100% + 10px) !important;
    transform: translateX(-50%) translateY(-4px) !important;
    background: rgba(8, 10, 18, 0.96) !important;
    border: 1px solid rgba(99, 102, 241, 0.40) !important;
    color: #f1f5f9 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    z-index: 200 !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 14px 32px -10px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(99, 102, 241, 0.20) inset,
        0 0 40px -10px rgba(99, 102, 241, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.5;
}
.ow-up .ow-up__views-card:hover .ow-up__views-tooltip,
.ow-up .ow-up__views-card:focus-within .ow-up__views-tooltip {
    transform: translateX(-50%) translateY(0) !important;
}
/* Asegurar el card de vistas siempre encima del badge cuando hover */
.ow-up .ow-up__views-card:hover,
.ow-up .ow-up__views-card:focus-within {
    z-index: 100 !important;
    position: relative !important;
}
/* Pequeña flecha indicadora arriba del tooltip */
.ow-up .ow-up__views-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(8, 10, 18, 0.96);
    border-left: 1px solid rgba(99, 102, 241, 0.40);
    border-top: 1px solid rgba(99, 102, 241, 0.40);
}

/* ════════════════════════════════════════════════════════════════════
   V73h MUSIC PLAYER REDESIGN — full-bottom glass bar, iOS-style
   premium animated, transparente con backdrop-blur fuerte
   ════════════════════════════════════════════════════════════════════ */
.ow-up__nplay {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: 640px !important;
    z-index: 9000;
    background: linear-gradient(135deg,
        rgba(28, 18, 48, 0.42),
        rgba(15, 18, 36, 0.40)) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 22px !important;
    box-shadow:
        0 24px 64px -16px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 80px -20px rgba(99, 102, 241, 0.35) !important;
    overflow: hidden !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: 64px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "cover meta close" "audio audio audio" !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    align-items: center;
    animation: ow-nplay-slide-in 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.1) !important;
}
@keyframes ow-nplay-slide-in {
    from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(0.94); filter: blur(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
}

/* Subtle animated shimmer overlay (premium feel) */
.ow-up__nplay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: ow-nplay-shimmer 6s linear infinite;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes ow-nplay-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Animated gradient ring on the border */
.ow-up__nplay::after {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(168, 85, 247, 0.50),
        rgba(6, 182, 212, 0.30),
        rgba(99, 102, 241, 0.50),
        rgba(168, 85, 247, 0.50));
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ow-nplay-border-flow 8s ease infinite;
    pointer-events: none;
    opacity: 0.6;
}
@keyframes ow-nplay-border-flow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Head section is now display:contents so grid takes its children directly */
.ow-up__nplay-head {
    display: contents !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 0 !important;
}

/* Cover — larger album art with glow + animated subtle scale */
.ow-up__nplay-cover {
    grid-area: cover !important;
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
    box-shadow:
        0 12px 28px -8px rgba(0, 0, 0, 0.6),
        0 0 28px -8px rgba(168, 85, 247, 0.45);
    position: relative;
    animation: ow-nplay-cover-breathe 4s ease-in-out infinite;
}
@keyframes ow-nplay-cover-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6), 0 0 28px -8px rgba(168,85,247,0.45); }
    50%      { transform: scale(1.025); box-shadow: 0 14px 32px -8px rgba(0,0,0,0.65), 0 0 42px -6px rgba(168,85,247,0.6); }
}
.ow-up__nplay-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.ow-up__nplay-cover-fb {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Title + artist */
.ow-up__nplay-meta {
    grid-area: meta !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden;
}
.ow-up__nplay-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    color: #fff !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: 3px;
}
.ow-up__nplay-artist {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.68) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

/* Close button — circle, glass */
.ow-up__nplay-close {
    grid-area: close !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.85, 0.25, 1.1);
    backdrop-filter: blur(8px);
}
.ow-up__nplay-close:hover {
    background: rgba(255, 80, 80, 0.18) !important;
    border-color: rgba(255, 80, 80, 0.35) !important;
    color: #fca5a5 !important;
    transform: scale(1.08) rotate(90deg);
}

/* Audio element — native controls but styled smoother */
.ow-up__nplay-audio {
    grid-area: audio !important;
    width: 100% !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    outline: 0 !important;
    /* Subtle filter to integrate */
    filter: brightness(1.05) saturate(0.95);
}
/* Webkit audio controls custom paint (Chrome/Edge/Safari) */
.ow-up__nplay-audio::-webkit-media-controls-panel {
    background: transparent;
    backdrop-filter: blur(8px);
}
.ow-up__nplay-audio::-webkit-media-controls-current-time-display,
.ow-up__nplay-audio::-webkit-media-controls-time-remaining-display {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Mobile — pegado al fondo, full width */
@media (max-width: 600px) {
    .ow-up__nplay {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        bottom: 10px !important;
        padding: 12px 14px !important;
        grid-template-columns: 52px 1fr auto !important;
        column-gap: 12px !important;
        border-radius: 18px !important;
    }
    .ow-up__nplay-cover {
        width: 52px !important;
        height: 52px !important;
        flex: 0 0 52px !important;
        border-radius: 12px !important;
    }
    .ow-up__nplay-title { font-size: 0.95rem !important; }
    .ow-up__nplay-artist { font-size: 0.78rem !important; }
    .ow-up__nplay-close { width: 28px !important; height: 28px !important; }
}

/* Reduced motion — disable shimmer/breathe */
@media (prefers-reduced-motion: reduce) {
    .ow-up__nplay,
    .ow-up__nplay::before,
    .ow-up__nplay::after,
    .ow-up__nplay-cover {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   V73i — Music player NO-PAUSE: solo volumen + ecualizador animado
   ════════════════════════════════════════════════════════════════════ */

/* Volume control container */
.ow-up__nplay-vol {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ow-up__nplay-vol:hover {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.30);
}

/* Volume icon (mute toggle) */
.ow-up__nplay-vol-icon {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 1.05rem;
    color: #f1f5f9;
    padding: 2px;
    line-height: 1;
    transition: transform 0.2s cubic-bezier(0.2, 0.85, 0.25, 1.1);
}
.ow-up__nplay-vol-icon:hover { transform: scale(1.15); }
.ow-up__nplay-vol-icon:active { transform: scale(0.92); }

/* Volume slider — iOS style */
.ow-up__nplay-vol-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 100px;
    height: 4px;
    background: linear-gradient(to right,
        rgba(168, 85, 247, 0.7) 0%,
        rgba(6, 182, 212, 0.7) var(--vol-pct, 50%),
        rgba(255, 255, 255, 0.12) var(--vol-pct, 50%),
        rgba(255, 255, 255, 0.12) 100%);
    border-radius: 999px;
    outline: 0;
    cursor: pointer;
}
.ow-up__nplay-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(168, 85, 247, 0.5);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ow-up__nplay-vol-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(168, 85, 247, 0.75);
}
.ow-up__nplay-vol-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.ow-up__nplay-vol-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(168, 85, 247, 0.5);
    cursor: grab;
}
.ow-up__nplay-vol-slider::-moz-range-track {
    background: transparent;
    border: 0;
}

/* Ecualizador animado — 4 barras que rebotan cuando reproduce */
.ow-up__nplay-eq {
    grid-area: audio !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 22px;
    margin-top: 2px;
    opacity: 0.85;
}
.ow-up__nplay-eq span {
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to top, rgba(168, 85, 247, 0.95), rgba(6, 182, 212, 0.95));
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
    transition: height 0.18s ease, opacity 0.3s ease;
    opacity: 0.45;
}
.ow-up__nplay-eq.is-playing span {
    opacity: 1;
    animation: ow-eq-bounce 1s ease-in-out infinite;
}
.ow-up__nplay-eq.is-playing span:nth-child(1) { animation-delay: 0s;   animation-duration: 0.7s; }
.ow-up__nplay-eq.is-playing span:nth-child(2) { animation-delay: 0.15s; animation-duration: 1.1s; }
.ow-up__nplay-eq.is-playing span:nth-child(3) { animation-delay: 0.3s; animation-duration: 0.85s; }
.ow-up__nplay-eq.is-playing span:nth-child(4) { animation-delay: 0.05s; animation-duration: 1.3s; }
@keyframes ow-eq-bounce {
    0%, 100% { height: 4px; }
    50%      { height: 20px; }
}

/* Hide native audio element completely — usamos custom UI */
.ow-up__nplay-audio {
    display: none !important;
    visibility: hidden;
    width: 0; height: 0;
}

/* Update grid template to match new structure (cover/meta/vol+close on row 1, eq on row 2) */
.ow-up__nplay {
    grid-template-columns: 64px 1fr auto auto !important;
    grid-template-areas: "cover meta vol close" "audio audio audio audio" !important;
    column-gap: 14px !important;
}
.ow-up__nplay-vol {
    grid-area: vol !important;
}
.ow-up__nplay-close {
    grid-area: close !important;
}

/* Minimized state — colapsa a un chip pequeño */
.ow-up__nplay.is-minimized {
    width: auto !important;
    grid-template-columns: 48px auto !important;
    grid-template-areas: "cover meta" !important;
    padding: 8px 14px 8px 8px !important;
    bottom: 16px !important;
}
.ow-up__nplay.is-minimized .ow-up__nplay-cover {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 10px !important;
}
.ow-up__nplay.is-minimized .ow-up__nplay-vol,
.ow-up__nplay.is-minimized .ow-up__nplay-close,
.ow-up__nplay.is-minimized .ow-up__nplay-eq { display: none !important; }
.ow-up__nplay.is-minimized .ow-up__nplay-meta {
    max-width: 160px;
}
.ow-up__nplay.is-minimized .ow-up__nplay-title { font-size: 0.85rem !important; }
.ow-up__nplay.is-minimized .ow-up__nplay-artist { font-size: 0.72rem !important; }
.ow-up__nplay.is-minimized::after {
    content: '🎵';
    position: absolute;
    bottom: -2px; right: -2px;
    font-size: 1rem;
    opacity: 0.5;
    background: none;
    mask: none;
    -webkit-mask: none;
}

@media (max-width: 600px) {
    .ow-up__nplay {
        grid-template-columns: 52px 1fr auto !important;
        grid-template-areas: "cover meta close" "vol vol vol" "audio audio audio" !important;
    }
    .ow-up__nplay-vol-slider { width: 100%; }
    .ow-up__nplay-vol { width: 100%; justify-content: space-between; }
}

/* ════════════════════════════════════════════════════════════════════
   V73j FINAL — Music player horizontal limpio, slider funcional
   ════════════════════════════════════════════════════════════════════ */
.ow-up__nplay {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(640px, calc(100vw - 32px)) !important;
    max-width: 640px !important;
    z-index: 9000;
    display: flex !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: center;
    gap: 14px !important;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, rgba(28, 18, 48, 0.45), rgba(15, 18, 36, 0.40)) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 100px !important;
    box-shadow:
        0 20px 50px -16px rgba(0, 0, 0, 0.55),
        0 0 60px -20px rgba(99, 102, 241, 0.35) !important;
    overflow: visible !important;
    animation: ow-nplay-slide-in 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.1) !important;
}
.ow-up__nplay::before,
.ow-up__nplay::after { display: none !important; content: none !important; }

.ow-up__nplay-head { display: contents !important; }
.ow-up__nplay-eq { display: none !important; }

.ow-up__nplay-cover {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    flex: 0 0 44px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #6366f1, #06b6d4) !important;
    box-shadow: 0 6px 16px -4px rgba(0,0,0,0.55), 0 0 18px -4px rgba(168,85,247,0.35);
    animation: none !important;
}
.ow-up__nplay-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.ow-up__nplay-cover-fb { display: grid; place-items: center; font-size: 1.3rem; color: #fff; }

.ow-up__nplay-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
}
.ow-up__nplay-title {
    font-family: 'Plus Jakarta Sans','Inter',system-ui,sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.92rem !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    margin-bottom: 2px;
}
.ow-up__nplay-artist {
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.62) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ow-up__nplay-vol {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    flex-shrink: 0;
    pointer-events: auto !important;
}
.ow-up__nplay-vol-icon {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: #f1f5f9;
    line-height: 1;
    pointer-events: auto !important;
    transition: transform 0.15s ease;
}
.ow-up__nplay-vol-icon:hover { transform: scale(1.15); }
.ow-up__nplay-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 88px;
    height: 4px;
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    outline: 0;
    cursor: pointer;
    pointer-events: auto !important;
    margin: 0;
    padding: 0;
}
.ow-up__nplay-vol-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
}
.ow-up__nplay-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    margin-top: -5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: grab;
    transition: transform 0.12s ease;
}
.ow-up__nplay-vol-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ow-up__nplay-vol-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(0.95); }
.ow-up__nplay-vol-slider::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    border: 0;
}
.ow-up__nplay-vol-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    cursor: grab;
}

.ow-up__nplay-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center;
    transition: all 0.18s ease;
}
.ow-up__nplay-close:hover {
    background: rgba(99,102,241,0.20) !important;
    border-color: rgba(99,102,241,0.45) !important;
    color: #fff !important;
    transform: scale(1.08);
}

.ow-up__nplay-audio {
    display: none !important;
    visibility: hidden;
    width: 0; height: 0;
}

@media (max-width: 600px) {
    .ow-up__nplay {
        width: calc(100vw - 16px) !important;
        bottom: 12px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .ow-up__nplay-cover { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
    .ow-up__nplay-vol-slider { width: 70px; }
    .ow-up__nplay-vol { padding: 5px 10px; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   V74 PROFILE REDESIGN — stats grid 3D, reveals, animations premium.
   Sin GSAP (no extra weight). Pure CSS + IntersectionObserver + RAF.
   ════════════════════════════════════════════════════════════════════ */

/* Stats grid — 5 cards en grid responsive.
   Specificity con section.ow-up__stats para vencer el V72ap nuclear fix
   que fuerza display:block en TODOS los hijos de .ow-up */
.ow-up > section.ow-up__stats,
section.ow-up__stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 22px auto !important;
    max-width: 720px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    perspective: 1200px;
}
@media (max-width: 720px) {
    .ow-up > section.ow-up__stats,
    section.ow-up__stats { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
    .ow-up > section.ow-up__stats,
    section.ow-up__stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* Individual stat card — glass 3D, glow dinámico, hover lift */
.ow-up .ow-up__stat {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 10px 16px !important;
    background: linear-gradient(160deg,
        rgba(28, 22, 48, 0.55),
        rgba(15, 18, 36, 0.40)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow:
        0 4px 14px -4px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transform-style: preserve-3d;
    transition: box-shadow 0.4s ease, border-color 0.3s ease;
    cursor: default;
    will-change: transform;
}
.ow-up .ow-up__stat:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow:
        0 16px 36px -10px rgba(0, 0, 0, 0.6),
        0 0 36px -8px rgba(168, 85, 247, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Icon at top of card */
.ow-up .ow-up__stat-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 4px 10px rgba(168, 85, 247, 0.45));
    transform: translateZ(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1.1);
}
.ow-up .ow-up__stat:hover .ow-up__stat-icon {
    transform: translateZ(30px) scale(1.18);
}

/* Label (KILLS, PHASE...) */
.ow-up .ow-up__stat .lbl {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.62rem !important;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.48) !important;
    text-transform: uppercase;
    margin: 0 !important;
    transform: translateZ(10px);
}

/* Value (large number) */
.ow-up .ow-up__stat .val {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    line-height: 1.1;
    color: #fff !important;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff, #c7d2fe 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(15px);
    transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1.1);
}
.ow-up[class*="--theme-"] .ow-up__stat .val {
    background: linear-gradient(135deg, #fff, var(--up-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Per-stat accent colors */
.ow-up .ow-up__stat--kills  { background: linear-gradient(160deg, rgba(239, 68, 68, 0.18), rgba(28, 18, 36, 0.5)) !important; }
.ow-up .ow-up__stat--phase  { background: linear-gradient(160deg, rgba(99, 102, 241, 0.18), rgba(28, 18, 36, 0.5)) !important; }
.ow-up .ow-up__stat--tier   { background: linear-gradient(160deg, rgba(245, 158, 11, 0.18), rgba(28, 18, 36, 0.5)) !important; }
.ow-up .ow-up__stat--sub    { background: linear-gradient(160deg, rgba(6, 182, 212, 0.18), rgba(28, 18, 36, 0.5)) !important; }
.ow-up .ow-up__stat--clans  { background: linear-gradient(160deg, rgba(168, 85, 247, 0.18), rgba(28, 18, 36, 0.5)) !important; }

/* Dynamic glow following mouse */
.ow-up .ow-up__stat-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(180px at var(--gx, 50%) var(--gy, 50%), rgba(168, 85, 247, 0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ow-up .ow-up__stat:hover .ow-up__stat-glow { opacity: 1; }

/* ── ENTRANCE ANIMATIONS (reveal on scroll) ─────────────────────── */
.ow-up [data-reveal],
.ow-up .ow-up__section,
.ow-up .ow-up__stat,
.ow-up .ow-up__friend,
.ow-up .ow-up__gal-tile,
.ow-up .ow-up__conn,
.ow-up .ow-up__feat-card {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.65s cubic-bezier(0.2, 0.85, 0.25, 1.1),
                transform 0.65s cubic-bezier(0.2, 0.85, 0.25, 1.1);
    will-change: opacity, transform;
}
.ow-up .is-revealed,
.ow-up [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Banner parallax — preparar el img para transform */
.ow-up .ow-up__banner-img,
.ow-up .ow-up__banner-video {
    will-change: transform;
    transition: transform 0.05s linear;
}

/* Avatar 3D tilt sutil on profile hover */
.ow-up .ow-up__avatar-wrap {
    transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1.1) !important;
}
.ow-up .ow-up__head:hover .ow-up__avatar-wrap {
    transform: rotateY(-6deg) rotateX(4deg) translateZ(20px) !important;
}

/* Avatar ring animation enhancement */
@keyframes ow-avatar-ring-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ow-up .ow-up__avatar-wrap::before {
    animation: ow-avatar-ring-rotate 6s linear infinite !important;
}

/* Sections también con tilt hover sutil */
.ow-up .ow-up__section {
    transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1.1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                opacity 0.65s cubic-bezier(0.2, 0.85, 0.25, 1.1) !important;
}
.ow-up .ow-up__section:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.18) inset !important;
}

/* H2 de secciones más prominentes con gradient */
.ow-up .ow-up__section h2 {
    background: linear-gradient(135deg, #fff, var(--up-accent, #c7d2fe));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
}

/* Pulse sutil en avatar */
@keyframes ow-avatar-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.35)); }
}
.ow-up .ow-up__avatar {
    animation: ow-avatar-pulse 4s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ow-up *,
    .ow-up *::before,
    .ow-up *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ow-up [data-reveal],
    .ow-up .ow-up__section,
    .ow-up .ow-up__stat { opacity: 1; transform: none; }
}
/* V74 END ─────────────────────────────────────────────────────── */

/* PROFILE-FIX (BUG 3): en mobile/touch desactivamos los tilts 3D (avatar +
   secciones + cards). En pantallas chicas o sin hover se veían "torcidos".
   El JS ya no engancha el tilt por mousemove en touch; esto cubre los
   tilts puramente CSS (:hover) por si algún browser táctil dispara :hover. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .ow-up .ow-up__head:hover .ow-up__avatar-wrap,
    .ow-up .ow-up__avatar-wrap {
        transform: none !important;
        rotate: 0deg !important;
    }
    .ow-up .ow-up__section:hover,
    .ow-up .ow-up__section {
        transform: none !important;
        rotate: 0deg !important;
    }
    .ow-up .ow-up__stat,
    .ow-up .ow-up__feat-card,
    .ow-up .ow-up__friend,
    .ow-up .ow-up__shame-card,
    .ow-up .ow-up__gal-tile {
        transform: none !important;
        rotate: 0deg !important;
    }
}


/* ============================================================
   LIGHT MODE — REVISIÓN A FONDO (2026-06-01)
   Bug raíz: las reglas base ponen color/background/-webkit-text-fill-color
   con !important; los overrides claros previos NO usaban !important → TODOS
   perdían. Resultado: números de stats blancos sobre fondo claro, y texto
   oscuro sobre paneles que seguían oscuros (dark-on-dark). Esto re-arma los
   overrides con !important + especificidad que gana a [class*="--theme-"],
   completando el modo claro que el diseño ya pretendía (paneles glassy →
   superficie clara). Verificado: 0 fallos de contraste AA (audit headless).
   Preserva los tints semánticos de --pinned (anuncio) y --shame.
   ============================================================ */

/* ---- Paneles glassy oscuros → superficie clara (excepto pinned/shame) ---- */
html[data-theme="light"] .ow-up .ow-up__stats,
html.theme-light .ow-up .ow-up__stats,
html[data-theme="light"] .ow-up .ow-up__section:not(.ow-up__section--pinned):not(.ow-up__section--shame):not(.ow-up__shame-section),
html.theme-light .ow-up .ow-up__section:not(.ow-up__section--pinned):not(.ow-up__section--shame):not(.ow-up__shame-section),
html[data-theme="light"] .ow-up .ow-up__feat-card,
html.theme-light .ow-up .ow-up__feat-card,
html[data-theme="light"] .ow-up .ow-up__roblox-card,
html.theme-light .ow-up .ow-up__roblox-card,
html[data-theme="light"] .ow-up .ow-up__discord-card,
html.theme-light .ow-up .ow-up__discord-card,
html[data-theme="light"] .ow-up .ow-up__views-card,
html.theme-light .ow-up .ow-up__views-card {
    background: rgba(255,255,255,0.82) !important;
    border-color: rgba(15,18,40,0.10) !important;
    box-shadow: 0 6px 22px -10px rgba(20,24,55,0.12) !important;
}
html[data-theme="light"] .ow-up .ow-up__feat-card-inner,
html.theme-light .ow-up .ow-up__feat-card-inner { background: transparent !important; box-shadow: none !important; }

/* ---- Texto principal → oscuro (mata el gradiente text-fill transparente) ---- */
html[data-theme="light"] .ow-up .ow-up__stat .val,
html.theme-light .ow-up .ow-up__stat .val,
html[data-theme="light"] .ow-up[class*="--theme-"] .ow-up__stat .val,
html.theme-light .ow-up[class*="--theme-"] .ow-up__stat .val,
html[data-theme="light"] .ow-up .ow-up__feat-name,
html.theme-light .ow-up .ow-up__feat-name,
html[data-theme="light"] .ow-up .ow-up__notes,
html.theme-light .ow-up .ow-up__notes,
html[data-theme="light"] .ow-up .ow-up__dc-name,
html.theme-light .ow-up .ow-up__dc-name,
html[data-theme="light"] .ow-up .ow-up__rbx-name,
html.theme-light .ow-up .ow-up__rbx-name,
html[data-theme="light"] .ow-up .ow-up__sp-title,
html.theme-light .ow-up .ow-up__sp-title,
html[data-theme="light"] .ow-up .ow-up__conn,
html.theme-light .ow-up .ow-up__conn {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #15172a !important;
    -webkit-text-fill-color: #15172a !important;
}

/* ---- Texto secundario / muted → oscuro ---- */
html[data-theme="light"] .ow-up .ow-up__stat .lbl,
html.theme-light .ow-up .ow-up__stat .lbl,
html[data-theme="light"] .ow-up .ow-up__feat-note,
html.theme-light .ow-up .ow-up__feat-note,
html[data-theme="light"] .ow-up .ow-up__dc-tag,
html.theme-light .ow-up .ow-up__dc-tag,
html[data-theme="light"] .ow-up .ow-up__dc-state,
html.theme-light .ow-up .ow-up__dc-state,
html[data-theme="light"] .ow-up .ow-up__rbx-handle,
html.theme-light .ow-up .ow-up__rbx-handle,
html[data-theme="light"] .ow-up .ow-up__rbx-sub,
html.theme-light .ow-up .ow-up__rbx-sub,
html[data-theme="light"] .ow-up .ow-up__sp-artist,
html.theme-light .ow-up .ow-up__sp-artist,
html[data-theme="light"] .ow-up .ow-up__views-label,
html.theme-light .ow-up .ow-up__views-label,
html[data-theme="light"] .ow-up .ow-up__handle,
html.theme-light .ow-up .ow-up__handle {
    color: #565b76 !important;
    -webkit-text-fill-color: #565b76 !important;
}

/* ---- Section headers (Destacado/Sublinks/Notas/etc.) → dim oscuro.
        :not() preserva el ámbar de --pinned y el rosa de --shame. ---- */
html[data-theme="light"] .ow-up .ow-up__section:not(.ow-up__section--pinned):not(.ow-up__section--shame):not(.ow-up__shame-section) h2,
html.theme-light .ow-up .ow-up__section:not(.ow-up__section--pinned):not(.ow-up__section--shame):not(.ow-up__shame-section) h2 {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #3a3d55 !important;
    -webkit-text-fill-color: #3a3d55 !important;
}

/* ---- views number: gradiente con #fff → sólido oscuro ---- */
html[data-theme="light"] .ow-up .ow-up__views-num,
html.theme-light .ow-up .ow-up__views-num {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #15172a !important;
    -webkit-text-fill-color: #15172a !important;
}

/* ---- iconos de glyph (los emojis se ignoran; esto es por si usan currentColor) ---- */
html[data-theme="light"] .ow-up .ow-up__stat-icon,
html.theme-light .ow-up .ow-up__stat-icon,
html[data-theme="light"] .ow-up .ow-up__views-icon,
html.theme-light .ow-up .ow-up__views-icon { color: #565b76 !important; }

/* ---- role badges + status pill (acento sobre tint claro → texto oscuro legible) ---- */
html[data-theme="light"] .ow-up .ow-up__role-badge,
html.theme-light .ow-up .ow-up__role-badge,
html[data-theme="light"] .ow-up .ow-up__role-badge-label,
html.theme-light .ow-up .ow-up__role-badge-label,
html[data-theme="light"] .ow-up .ow-up__status,
html.theme-light .ow-up .ow-up__status {
    color: #1c2030 !important;
    -webkit-text-fill-color: #1c2030 !important;
}

/* ---- friends count pill ---- */
html[data-theme="light"] .ow-up .ow-up__friends-count,
html.theme-light .ow-up .ow-up__friends-count {
    color: #15172a !important;
    -webkit-text-fill-color: #15172a !important;
}

/* ---- "Abrir" (rbx-cta): botón sólido en acento con texto blanco ---- */
html[data-theme="light"] .ow-up .ow-up__rbx-cta,
html.theme-light .ow-up .ow-up__rbx-cta {
    background: var(--up-accent, #4f46e5) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: transparent !important;
}

/* ---- labels en acento (Anuncio / Clan destacado): oscurecer para AA ---- */
html[data-theme="light"] .ow-up .ow-up__feat-label,
html.theme-light .ow-up .ow-up__feat-label,
html[data-theme="light"] .ow-up .ow-up__pin-label,
html.theme-light .ow-up .ow-up__pin-label {
    color: color-mix(in srgb, var(--up-accent, #e11d48) 62%, #15172a) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--up-accent, #e11d48) 62%, #15172a) !important;
}

/* ---- nombre del perfil: oscurecer el acento del usuario SOLO en claro (mantiene el matiz) ---- */
html[data-theme="light"] .ow-up[class*="--theme-"] .ow-up__head .ow-up__name,
html[data-theme="light"] .ow-up .ow-up__name,
html.theme-light .ow-up[class*="--theme-"] .ow-up__head .ow-up__name,
html.theme-light .ow-up .ow-up__name {
    color: color-mix(in srgb, var(--up-accent, #5b8cff) 72%, #15172a) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--up-accent, #5b8cff) 72%, #15172a) !important;
    text-shadow: none !important;
}

/* MUSIC PLAYER mobile fix (reporte owner 2026-06-02: "barra de volumen rota en
   celular"). (a) el <audio> no tiene 'controls' pero el CSS lo forzaba
   display:block/height:36px/bg-negro → barra vacía rota; lo ocultamos (el audio
   igual reproduce y el volumen se controla por el slider/JS). (b) en celular el
   slider de volumen se estiraba → player en fila limpia + slider compacto. */
.ow-up__nplay-audio { display: none !important; }
@media (max-width: 600px) {
  .ow-up__nplay { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .ow-up__nplay-meta { min-width: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
  .ow-up__nplay-vol { flex: 0 0 auto !important; }
  .ow-up__nplay-vol-slider { width: 64px !important; flex: 0 0 64px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   V78 VISUAL FLAGS — render of editor-chosen effects the v1 page never drew.
   Ported from profile-page-v2.js applyVisualFlags(): avatar shape/ring, frame
   style, scanlines, grid overlay, real floating particles, and the grid/waves
   animated backgrounds. v1 carries the flags as classes on <article class="ow-up
   --shape-* --ring-* --frame-* --scanlines --grid --particles"> (data-* mirrors
   too). Everything is GATED: an unset profile gets the legacy circle+spin look.

   NOTE: the base sheet (≈L4346/L4377) FORCES the avatar ring to spin and the
   avatar to pulse with !important regardless of choice — that's why "anillo
   ANIMATED" looked identical to everything. These rules come AFTER and override
   per chosen ring, so 'none/solid/duotone/pulse' stop the spin and only
   'animated' keeps revolving colors. Variable names adapted to --up-accent /
   --up-accent-2 (color2, set inline; falls back to --up-accent).
   ════════════════════════════════════════════════════════════════════ */

/* second accent fallback so every rule below is safe even pre-inline-var */
.ow-up { --up-accent-2: var(--up-accent, #5b8cff); }

/* registered angle prop so the conic ring can revolve its ANGLE (not the box) —
   keeps polygon clips still while colors spin, and dodges any transform pins. */
@property --up-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ow-up-ang { to { --up-ang: 360deg; } }
@keyframes ow-up-ring-spin { to { transform: rotate(360deg); } }
@keyframes ow-up-ring-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--up-accent) 40%, transparent)); opacity: 0.82; transform: scale(1); }
    50%      { filter: drop-shadow(0 0 26px color-mix(in srgb, var(--up-accent) 75%, transparent)); opacity: 1; transform: scale(1.035); }
}

/* ── AVATAR SHAPES ──────────────────────────────────────────────────
   The wrap::before is the visible ring band; the <img>.ow-up__avatar sits at
   100% on top. For polygon shapes we clip BOTH to the same polygon and drop the
   conic mask (a mask can't follow a polygon). circle/squircle stay rounded. */
/* circle (default) — explicit so it can win after light-mode etc. */
.ow-up--shape-circle .ow-up__avatar,
.ow-up--shape-circle .ow-up__avatar-wrap::before { border-radius: 50% !important; }
/* squircle */
.ow-up--shape-squircle .ow-up__avatar { border-radius: 30% !important; clip-path: none !important; }
.ow-up--shape-squircle .ow-up__avatar-wrap::before {
    border-radius: 34% !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
}
/* hex */
.ow-up--shape-hex .ow-up__avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%) !important;
}
.ow-up--shape-hex .ow-up__avatar-wrap::before {
    inset: -5px !important;
    border-radius: 0 !important;
    padding: 5px !important;
    -webkit-mask: none !important; mask: none !important;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%) !important;
}
/* shield */
.ow-up--shape-shield .ow-up__avatar {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 100% 12%, 100% 55%, 50% 100%, 0% 55%, 0% 12%) !important;
}
.ow-up--shape-shield .ow-up__avatar-wrap::before {
    inset: -5px !important;
    border-radius: 0 !important;
    padding: 5px !important;
    -webkit-mask: none !important; mask: none !important;
    clip-path: polygon(50% 0%, 100% 12%, 100% 55%, 50% 100%, 0% 55%, 0% 12%) !important;
}
/* polygon shapes: the avatar img box-shadow ring would poke past the clip, trim
   it so only the ::before band reads as the border. */
.ow-up--shape-hex .ow-up__avatar,
.ow-up--shape-shield .ow-up__avatar {
    box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
}

/* ── AVATAR RINGS ───────────────────────────────────────────────────
   Style only background/filter/animation; the SHAPE rules above own the clip,
   so every ring follows the chosen shape automatically. These override the base
   always-spin (L4347). 'animated' revolves the conic ANGLE so the avatar/box
   itself never rotates ("que no de vueltas la foto"). */
/* none — kill the band entirely */
.ow-up--ring-none .ow-up__avatar-wrap::before {
    background: transparent !important;
    -webkit-mask: none !important; mask: none !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
}
.ow-up--ring-none.ow-up--shape-hex .ow-up__avatar-wrap::before,
.ow-up--ring-none.ow-up--shape-shield .ow-up__avatar-wrap::before { padding: 0 !important; }
/* solid */
.ow-up--ring-solid .ow-up__avatar-wrap::before {
    background: var(--up-accent) !important;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--up-accent) 50%, transparent)) !important;
    animation: none !important;
    transform: none !important;
}
/* duotone — two-colour conic, static */
.ow-up--ring-duotone .ow-up__avatar-wrap::before {
    background: conic-gradient(from 0deg, var(--up-accent), var(--up-accent-2), var(--up-accent), var(--up-accent-2), var(--up-accent)) !important;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--up-accent) 45%, transparent)) !important;
    animation: none !important;
    transform: none !important;
}
/* animated — revolve the conic angle (box stays put) */
.ow-up--ring-animated .ow-up__avatar-wrap::before {
    background: conic-gradient(from var(--up-ang, 0deg), var(--up-accent), var(--up-accent-2), var(--up-accent), var(--up-accent-2), var(--up-accent)) !important;
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--up-accent) 50%, transparent)) !important;
    animation: ow-up-ang 9s linear infinite !important;
    transform: none !important;
}
/* pulse — breathing glow, static colours */
.ow-up--ring-pulse .ow-up__avatar-wrap::before {
    background: var(--up-accent) !important;
    animation: ow-up-ring-pulse 1.8s ease-in-out infinite !important;
    transform: none !important;
}
/* every non-default ring: stop the base avatar auto-pulse so the ring reads as
   the chosen effect (pulse ring keeps its own pulse on the band). */
.ow-up--ring-none .ow-up__avatar,
.ow-up--ring-solid .ow-up__avatar,
.ow-up--ring-duotone .ow-up__avatar,
.ow-up--ring-pulse .ow-up__avatar { animation: none !important; }

/* ── FRAME STYLES (section cards) ───────────────────────────────────── */
.ow-up--frame-sharp .ow-up__section { border-radius: 8px !important; }
.ow-up--frame-soft  .ow-up__section { border-radius: 30px !important; }
.ow-up--frame-tactical .ow-up__section {
    border-radius: 4px !important;
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%) !important;
}
.ow-up--frame-glow .ow-up__section {
    border-color: color-mix(in srgb, var(--up-accent) 45%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--up-accent) 30%, transparent),
                0 0 34px -8px color-mix(in srgb, var(--up-accent) 45%, transparent) !important;
}

/* ── SCANLINES overlay (CRT) ───────────────────────────────────────── */
.ow-up__scanlines {
    position: fixed; inset: 0;
    z-index: 3 !important;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
}
html[data-theme="light"] .ow-up__scanlines,
html.theme-light .ow-up__scanlines {
    mix-blend-mode: normal;
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 3px);
}

/* ── GRID overlay ──────────────────────────────────────────────────── */
.ow-up__grid-overlay {
    position: fixed; inset: 0;
    z-index: 1 !important;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--up-accent) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--up-accent) 16%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    animation: ow-up-grid-pan 14s linear infinite;
}
@keyframes ow-up-grid-pan { to { background-position: 48px 96px; } }

/* ── PARTICLES layer (real floating dots; <i> nodes added by JS) ─────── */
.ow-up__particles {
    position: fixed; inset: 0;
    z-index: 1 !important;
    pointer-events: none;
    overflow: hidden;
}
.ow-up__particles i {
    position: absolute;
    bottom: -12px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--up-accent);
    opacity: 0;
    box-shadow: 0 0 8px var(--up-accent);
    animation: ow-up-particle-rise linear infinite;
}
@keyframes ow-up-particle-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-110vh) scale(0.5); opacity: 0; }
}

/* ── ANIMATED BACKGROUNDS — grid + waves (were missing); aurora/particles
   already exist above but we make sure they read with --up-accent-2 too.
   The layer is .ow-up__animbg.ow-up__animbg--<type>. ──────────────────── */
.ow-up__animbg--grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--up-accent) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--up-accent) 16%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
    opacity: 0.85;
    animation: ow-up-grid-pan 14s linear infinite;
}
.ow-up__animbg--waves {
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--up-accent) 22%, transparent),
            transparent 40%,
            color-mix(in srgb, var(--up-accent-2) 20%, transparent) 70%,
            transparent);
    background-size: 300% 300%;
    filter: blur(8px);
    opacity: 0.8;
    animation: ow-up-waves 16s ease-in-out infinite;
}
@keyframes ow-up-waves {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
/* aurora: blend in the second accent so color2 actually shows */
.ow-up--bg-aurora .ow-up__animbg--aurora {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--up-accent) 35%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 30% 100%, color-mix(in srgb, var(--up-accent-2) 32%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 70% 100%, color-mix(in srgb, var(--up-accent) 28%, transparent), transparent 70%);
}

/* ── REDUCED MOTION — calm the new layers too ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ow-up__particles i,
    .ow-up__animbg--grid,
    .ow-up__animbg--waves,
    .ow-up__grid-overlay,
    .ow-up--ring-animated .ow-up__avatar-wrap::before,
    .ow-up--ring-pulse .ow-up__avatar-wrap::before { animation: none !important; }
}

/* CARGA SUAVE 2026-06-02 (fix "al cargar se ve la imagen sin blur bruscamente"):
   .ow-up__pagebg lleva filter:blur inline, pero el navegador pinta un frame de la
   imagen NÍTIDA antes de componer el blur → flash feo. Lo desvanecemos (ya viene
   blurreado/oscurecido) para que entre suave y nunca se vea la imagen cruda. El
   .ow-up entra con un fade leve para una carga general más suave. Respeta RM. */
@keyframes ow-up-fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ow-up__pagebg, .ow-up__pagebg-scrim, .ow-splash__bg { animation: ow-up-fadein .9s ease both; }
  .ow-up { animation: ow-up-fadein .45s ease; }
}

/* ════════════════════════════════════════════════════════════════════════
   V79 OVERHAUL 2026-06-02 — bloque consolidado (gana por ser el último).
   Fuentes ampliadas (#23) · efectos de fondo nuevos (#22) · slider de volumen
   móvil (#24) · iconos de links (#12) · tarjetas de clan épicas (#16-18).
   ════════════════════════════════════════════════════════════════════════ */

/* ── #23 TIPOGRAFÍAS — el NOMBRE adopta la fuente elegida ──────────────── */
.ow-up--font-inter     .ow-up__name { font-family: 'Inter', sans-serif !important; font-weight: 900 !important; letter-spacing: -0.02em; }
.ow-up--font-space     .ow-up__name { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.ow-up--font-orbitron  .ow-up__name { font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em; }
.ow-up--font-chakra    .ow-up__name { font-family: 'Chakra Petch', sans-serif !important; font-weight: 700 !important; }
.ow-up--font-rajdhani  .ow-up__name { font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; letter-spacing: 0.01em; }
.ow-up--font-exo       .ow-up__name { font-family: 'Exo 2', sans-serif !important; font-weight: 800 !important; }
.ow-up--font-oxanium   .ow-up__name { font-family: 'Oxanium', sans-serif !important; font-weight: 800 !important; }
.ow-up--font-audiowide .ow-up__name { font-family: 'Audiowide', cursive !important; letter-spacing: 0.02em; }
.ow-up--font-russo     .ow-up__name { font-family: 'Russo One', sans-serif !important; }
.ow-up--font-teko      .ow-up__name { font-family: 'Teko', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.02em; font-size: 3.7rem !important; line-height: 1; }
.ow-up--font-bebas     .ow-up__name { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: 0.04em; font-size: 3.7rem !important; line-height: 1; }
.ow-up--font-michroma  .ow-up__name { font-family: 'Michroma', sans-serif !important; font-size: 2.3rem !important; letter-spacing: 0.01em; }
.ow-up--font-syncopate .ow-up__name { font-family: 'Syncopate', sans-serif !important; font-weight: 700 !important; font-size: 2.1rem !important; letter-spacing: 0.04em; }
.ow-up--font-mono      .ow-up__name { font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.ow-up--font-outfit    .ow-up__name { font-family: 'Outfit', sans-serif !important; font-weight: 900 !important; letter-spacing: -0.03em; }
.ow-up--font-zendots   .ow-up__name { font-family: 'Zen Dots', sans-serif !important; font-size: 2.4rem !important; }
.ow-up--font-unbounded .ow-up__name { font-family: 'Unbounded', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.ow-up--font-monoton   .ow-up__name { font-family: 'Monoton', cursive !important; font-size: 3rem !important; letter-spacing: 0.02em; -webkit-text-fill-color: currentColor; }
.ow-up--font-nabla     .ow-up__name { font-family: 'Nabla', cursive !important; font-size: 3.3rem !important; }
.ow-up--font-playfair  .ow-up__name { font-family: 'Playfair Display', serif !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.ow-up--font-vt323     .ow-up__name { font-family: 'VT323', monospace !important; font-size: 3.4rem !important; line-height: 1; }
.ow-up--font-pressstart .ow-up__name { font-family: 'Press Start 2P', monospace !important; font-size: 1.5rem !important; line-height: 1.5; letter-spacing: 0; }
/* fuentes legibles también dan personalidad a los títulos de sección */
.ow-up--font-space .ow-up__section h2, .ow-up--font-rajdhani .ow-up__section h2,
.ow-up--font-exo .ow-up__section h2, .ow-up--font-oxanium .ow-up__section h2,
.ow-up--font-orbitron .ow-up__section h2, .ow-up--font-chakra .ow-up__section h2,
.ow-up--font-unbounded .ow-up__section h2 { font-family: inherit; }

/* ── #22 EFECTOS DE FONDO NUEVOS (.ow-up__animbg--<id>; stackeables) ───── */
.ow-up__animbg--mesh {
  background:
    radial-gradient(40% 50% at 18% 28%, color-mix(in srgb, var(--up-accent) 38%, transparent), transparent 70%),
    radial-gradient(42% 52% at 82% 22%, color-mix(in srgb, var(--up-accent-2) 36%, transparent), transparent 70%),
    radial-gradient(50% 60% at 60% 88%, color-mix(in srgb, var(--up-accent) 30%, transparent), transparent 70%),
    radial-gradient(45% 55% at 25% 80%, color-mix(in srgb, var(--up-accent-2) 28%, transparent), transparent 70%);
  background-size: 200% 200%; filter: blur(34px); opacity: 0.75;
  animation: ow-up-mesh 22s ease-in-out infinite;
}
@keyframes ow-up-mesh { 0%,100% { background-position: 0% 0%; } 33% { background-position: 100% 30%; } 66% { background-position: 30% 100%; } }
.ow-up__animbg--snow {
  background-image:
    radial-gradient(2.5px 2.5px at 20% 10%, #fff, transparent),
    radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(3px 3px at 80% 60%, #fff, transparent),
    radial-gradient(2px 2px at 35% 75%, rgba(255,255,255,.8), transparent),
    radial-gradient(2.5px 2.5px at 50% 50%, #fff, transparent);
  background-size: 100% 100%; opacity: 0.7; animation: ow-up-snow 14s linear infinite;
}
@keyframes ow-up-snow { from { background-position: 0 -10%; } to { background-position: 6% 110%; } }
.ow-up__animbg--matrix {
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb,#16ff7a 22%, transparent) 0 1px, transparent 1px 14px);
  background-size: 100% 100%; opacity: 0.5; mix-blend-mode: screen;
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 8px, transparent 8px 20px);
  mask-image: repeating-linear-gradient(0deg, #000 0 8px, transparent 8px 20px);
  animation: ow-up-matrix 4.5s linear infinite;
}
@keyframes ow-up-matrix { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 28px; mask-position: 0 28px; } }
.ow-up__animbg--spotlight {
  background: radial-gradient(28% 42% at 50% 35%, rgba(255,255,255,.16), transparent 60%);
  opacity: 0.9; animation: ow-up-spot 12s ease-in-out infinite;
}
@keyframes ow-up-spot { 0%,100% { background-position: 20% 30%; } 50% { background-position: 80% 50%; } }
.ow-up__animbg--glow {
  background:
    radial-gradient(26% 34% at 25% 30%, color-mix(in srgb, var(--up-accent) 55%, transparent), transparent 70%),
    radial-gradient(24% 32% at 75% 65%, color-mix(in srgb, var(--up-accent-2) 50%, transparent), transparent 70%);
  background-size: 160% 160%; filter: blur(28px); opacity: 0.7;
  animation: ow-up-glow 18s ease-in-out infinite;
}
@keyframes ow-up-glow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .ow-up__animbg--mesh, .ow-up__animbg--snow, .ow-up__animbg--matrix,
  .ow-up__animbg--spotlight, .ow-up__animbg--glow { animation: none !important; }
}

/* ── #22 POLISH — que combinar VARIOS efectos se vea intencional, no sucio.
   Bajamos la intensidad de las capas full-screen y suavizamos scanlines (antes
   multiply oscurecía todo). Así 2-3 efectos lucen premium y 5-6 no se empastan. */
.ow-up .ow-up__animbg { z-index: 0; }
.ow-up .ow-up__animbg--aurora   { opacity: .50 !important; }
.ow-up .ow-up__animbg--gradient { opacity: .42 !important; }
.ow-up .ow-up__animbg--waves    { opacity: .48 !important; }
.ow-up .ow-up__animbg--mesh     { opacity: .5 !important; }
.ow-up .ow-up__animbg--glow     { opacity: .55 !important; }
.ow-up .ow-up__animbg--stars    { opacity: .8 !important; }
.ow-up .ow-up__animbg--rain     { opacity: .35 !important; }
.ow-up .ow-up__grid-overlay     { opacity: .42 !important; }
.ow-up .ow-up__scanlines        { opacity: .38 !important; mix-blend-mode: soft-light !important; }
.ow-up .ow-up__particles        { opacity: .85 !important; }
/* los efectos animados de color viven detrás del contenido pero por encima del
   fondo de página, para que el banner/imagen siga sintiéndose y no se tape. */
.ow-up .ow-up__animbg--matrix   { opacity: .4 !important; }
.ow-up .ow-up__animbg--snow     { opacity: .7 !important; }
.ow-up .ow-up__animbg--spotlight{ opacity: .7 !important; }

/* ── #12 ICONOS DE LINKS (SVG de marca real) ──────────────────────────── */
.ow-up__link { align-items: center; }
.ow-up__link-icon-img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; display: block; }
.ow-up__link-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ow-up__link-host { font-size: 0.66rem; opacity: 0.55; font-family: var(--ow-font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── #16-18 TARJETAS DE CLAN más épicas en el perfil público ──────────── */
.ow-up__clan {
  border: 1px solid color-mix(in srgb, var(--up-accent) 22%, rgba(255,255,255,.08)) !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--up-accent) 9%, rgba(255,255,255,.03)), rgba(255,255,255,.012)) !important;
  transition: transform .16s cubic-bezier(.22,1,.36,1), border-color .16s, box-shadow .24s !important;
}
.ow-up__clan:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--up-accent) 60%, transparent) !important;
  box-shadow: 0 12px 30px -16px var(--up-accent) !important;
}

/* ── #24 SLIDER DE VOLUMEN — base limpia + relleno por --vol-pct ─────────
   El player es hermano de .ow-up (--up-accent se propaga al :root en JS), pero
   igual dejamos un FALLBACK de color por si el var no llega. La regla apunta al
   propio input Y al runnable-track (algunos engines pintan el track, no el bg
   del input) para que el relleno SIEMPRE se vea. */
:root { --ow-vol-acc: #6aa8ff; }
.ow-up__nplay .ow-up__nplay-vol-slider,
.ow-up .ow-up__nplay .ow-up__nplay-vol-slider {
  -webkit-appearance: none !important; appearance: none !important;
  height: 6px !important; border-radius: 999px !important; cursor: pointer; outline: none;
  background: linear-gradient(90deg,
    var(--up-accent, var(--ow-vol-acc)) 0,
    var(--up-accent, var(--ow-vol-acc)) var(--vol-pct, 60%),
    rgba(255,255,255,.18) var(--vol-pct, 60%),
    rgba(255,255,255,.18) 100%) !important;
}
.ow-up__nplay .ow-up__nplay-vol-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: transparent;
}
.ow-up__nplay .ow-up__nplay-vol-slider::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.ow-up__nplay .ow-up__nplay-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -4.5px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.5); cursor: pointer; transition: transform .12s;
}
.ow-up__nplay .ow-up__nplay-vol-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.ow-up__nplay .ow-up__nplay-vol-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.5); cursor: pointer;
}

/* #24 MÓVIL: el volumen pasa a su PROPIA fila completa con un slider cómodo
   (antes 64px aplastado en una fila nowrap = "se ve fatal").
   OJO: el player .ow-up__nplay es HERMANO de .ow-up (no descendiente), así que
   los selectores NO pueden llevar `.ow-up ` adelante o no matchean. */
@media (max-width: 600px) {
  .ow-up__nplay {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 9px 10px !important; row-gap: 10px !important;
  }
  .ow-up__nplay .ow-up__nplay-cover { order: 1; }
  .ow-up__nplay .ow-up__nplay-meta { order: 2; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  .ow-up__nplay .ow-up__nplay-close { order: 3; flex: 0 0 auto !important; }
  .ow-up__nplay .ow-up__nplay-vol {
    order: 4; flex: 1 1 100% !important; width: 100% !important;
    display: flex !important; align-items: center !important; gap: 11px !important;
    border-top: 1px solid rgba(255,255,255,.10); padding-top: 9px !important; margin-top: 1px;
  }
  .ow-up__nplay .ow-up__nplay-vol-slider {
    flex: 1 1 auto !important; width: auto !important; height: 8px !important; min-width: 0 !important;
  }
  .ow-up__nplay .ow-up__nplay-vol-slider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; }
  .ow-up__nplay .ow-up__nplay-vol-slider::-moz-range-thumb { width: 20px; height: 20px; }
  .ow-up__nplay .ow-up__nplay-vol-icon { flex: 0 0 auto !important; font-size: 1.05rem !important; }
}