/**
 * profile-extra.css  v3 — extra styles for rich profile features
 * (video BG, music button, XP bar premium, achievement trophy cards)
 * ESAForum — do NOT edit theme.css
 */

/* =====================================================================
   VIDEO BACKGROUND
   ===================================================================== */
.profile-video-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.profile-video-bg iframe {
    position: absolute;
    /* Oversized so the 16:9 frame always covers the viewport edge-to-edge */
    top: 50%;
    left: 50%;
    width: 177.78vh;   /* 16/9 * 100vh */
    height: 100vh;
    min-width: 100vw;
    min-height: 56.25vw; /* 9/16 * 100vw */
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
}
.profile-video-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(0, 0, 0, var(--profile-dim, 0.6));
    backdrop-filter: blur(1px);
}

/* When the user prefers reduced motion, hide the video */
@media (prefers-reduced-motion: reduce) {
    .profile-video-bg { display: none; }
    .profile-video-overlay { display: none; }
}

/* =====================================================================
   MUSIC BUTTON
   ===================================================================== */
.profile-music-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(var(--primary-rgb, 124, 92, 255), .45);
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
    user-select: none;
}
.profile-music-btn:hover {
    background: rgba(var(--primary-rgb, 124, 92, 255), .25);
    border-color: var(--primary, #7c5cff);
    transform: translateY(-2px);
}
.profile-music-btn.playing {
    background: rgba(var(--primary-rgb, 124, 92, 255), .35);
    border-color: var(--primary, #7c5cff);
}
.profile-music-btn .music-icon {
    font-size: 18px;
    animation: none;
}
.profile-music-btn.playing .music-icon {
    animation: musicPulse 1.2s ease-in-out infinite alternate;
}
@keyframes musicPulse {
    from { transform: scale(1);    opacity: 1;   }
    to   { transform: scale(1.22); opacity: .75; }
}
.profile-music-hidden-frame {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    border: none;
}

/* =====================================================================
   XP / LEVEL — PREMIUM BAR  (profile page)
   ===================================================================== */
.xp-premium-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    margin-top: 18px;
    background: linear-gradient(135deg,
        rgba(var(--primary-rgb, 124, 92, 255), .12) 0%,
        rgba(var(--primary-rgb, 124, 92, 255), .04) 100%);
    border: 1px solid rgba(var(--primary-rgb, 124, 92, 255), .22);
    border-radius: 14px;
    flex-wrap: wrap;
}
.xp-lvl-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary, #7c5cff), rgba(var(--primary-rgb, 124, 92, 255), .6));
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 124, 92, 255), .45),
                inset 0 1px 0 rgba(255,255,255,.15);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .05em;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    gap: 1px;
}
.xp-lvl-badge strong {
    display: block;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1;
}
.xp-bar-col {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xp-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.xp-bar-labels .xp-total {
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}
.xp-bar-labels .xp-next {
    color: var(--text-mute);
    font-size: 12px;
}
.xp-bar-track {
    position: relative;
    height: 10px;
    background: rgba(255,255,255,.08);
    border-radius: 99px;
    overflow: hidden;
}
.xp-bar-track::before {
    /* subtle scanline texture */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 6px,
        rgba(0,0,0,.06) 6px,
        rgba(0,0,0,.06) 7px
    );
}
.xp-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg,
        var(--primary, #7c5cff) 0%,
        rgba(var(--primary-rgb, 124, 92, 255), .75) 100%);
    box-shadow: 0 0 10px rgba(var(--primary-rgb, 124, 92, 255), .6);
    transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 16px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35));
    border-radius: 99px;
}
.xp-streak-chip {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
    white-space: nowrap;
}

/* =====================================================================
   XP MINI-BAR — inside post author column (_post.php)
   ===================================================================== */
.pa-xp-mini {
    margin-top: 5px;
    width: 100%;
}
.pa-xp-track {
    height: 4px;
    background: rgba(255,255,255,.10);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}
.pa-xp-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary, #7c5cff), rgba(var(--primary-rgb,124,92,255),.6));
    min-width: 3px;
    transition: width .4s ease;
}

/* =====================================================================
   ACHIEVEMENT TROPHY CARDS
   ===================================================================== */
.ach-trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.ach-trophy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 16px 18px;
    background: var(--surface-2, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,.09));
    border-radius: 16px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.ach-trophy-card::before {
    /* ambient glow behind the icon */
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ach-glow, rgba(var(--primary-rgb,124,92,255),.25));
    filter: blur(22px);
    pointer-events: none;
}
.ach-trophy-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary, #7c5cff);
    box-shadow: 0 8px 32px rgba(var(--primary-rgb,124,92,255),.2);
}
.ach-trophy-icon {
    font-size: 36px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.ach-trophy-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    line-height: 1.3;
}
.ach-trophy-desc {
    font-size: 12px;
    color: var(--text-mute);
    line-height: 1.4;
}
.ach-trophy-time {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-mute);
    opacity: .7;
}

/* Empty achievements state */
.ach-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
    color: var(--text-mute);
    gap: 8px;
}
.ach-empty .ach-empty-icon { font-size: 44px; opacity: .35; }
.ach-empty p { font-size: 14px; margin: 0; }

/* =====================================================================
   OVERFLOW GUARDS (apply at all sizes)
   ===================================================================== */
.ach-trophy-name {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
.ach-trophy-desc {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}
.xp-bar-labels .xp-total,
.xp-bar-labels .xp-next {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
}

/* =====================================================================
   DESKTOP ENHANCEMENTS (≥1024px)
   ===================================================================== */
@media (min-width: 1024px) {
    /* XP bar: slightly larger level badge */
    .xp-lvl-badge {
        width: 72px;
        height: 72px;
        border-radius: 18px;
    }
    .xp-lvl-badge strong { font-size: 30px; }

    /* Achievement grid: more columns & larger icons */
    .ach-trophy-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
    .ach-trophy-card {
        padding: 28px 20px 22px;
        border-radius: 18px;
    }
    .ach-trophy-icon { font-size: 42px; margin-bottom: 12px; }
    .ach-trophy-name { font-size: 15px; }
    .ach-trophy-desc { font-size: 13px; }

    /* Music button: show on bottom-right with wider pill */
    .profile-music-btn { padding: 11px 22px; font-size: 15px; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
    .xp-premium-wrap { padding: 14px 16px; gap: 12px; }
    .xp-lvl-badge { width: 52px; height: 52px; }
    .xp-lvl-badge strong { font-size: 21px; }
    .ach-trophy-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* Music button: shrink on tablet, keep unobtrusive */
    .profile-music-btn { bottom: 14px; right: 14px; font-size: 13px; padding: 8px 14px; }
    /* Profile header fixes */
    .profile-avatar-wrap { margin-top: -44px; }
    /* Prevent long names overflowing */
    .profile-name {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    .profile-username {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    .profile-identity-main { min-width: 0; max-width: 100%; }
}

/* ── 480px (phones: 390/414px class) ─────────────────────────────── */
@media (max-width: 480px) {
    .ach-trophy-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ach-trophy-card { padding: 16px 10px 14px; }
    .ach-trophy-icon { font-size: 28px; }
    /* XP bar: stack vertically, level badge goes horizontal */
    .xp-premium-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
    .xp-lvl-badge {
        width: 100%;
        flex-direction: row;
        height: auto;
        padding: 8px 14px;
        border-radius: 10px;
        gap: 8px;
        justify-content: flex-start;
    }
    .xp-lvl-badge strong { font-size: 20px; }
    .xp-bar-col { min-width: 0; }
    .xp-bar-labels { flex-wrap: wrap; gap: 2px; }
    .xp-bar-labels .xp-total,
    .xp-bar-labels .xp-next { max-width: 100%; white-space: normal; }
    .xp-streak-chip { align-self: flex-start; }
    /* Avatar */
    .profile-avatar-wrap { margin-top: -36px; }
    .profile-avatar-wrap img.avatar.xl { width: 72px; height: 72px; }
    /* Music button: icon-only pill — label still there but smaller */
    .profile-music-btn {
        bottom: 10px;
        right: 10px;
        padding: 8px 12px;
        font-size: 0; /* hide text */
        gap: 0;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        justify-content: center;
    }
    .profile-music-btn .music-icon { font-size: 18px; }
    .profile-music-btn .music-label { display: none; }
}

/* ── 390px (iPhone 14 Pro / common Android) ──────────────────────── */
@media (max-width: 390px) {
    .ach-trophy-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ach-trophy-card { padding: 14px 8px 12px; }
    .ach-trophy-icon { font-size: 26px; }
    .xp-premium-wrap { padding: 10px 12px; gap: 8px; }
    .xp-lvl-badge { padding: 6px 12px; }
    .xp-lvl-badge strong { font-size: 18px; }
}

/* ── 360px (small Androids) ──────────────────────────────────────── */
@media (max-width: 360px) {
    .ach-trophy-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .ach-trophy-card { padding: 12px 6px 10px; }
    .profile-avatar-wrap img.avatar.xl { width: 64px; height: 64px; }
    .xp-lvl-badge strong { font-size: 16px; }
    /* Stack xp labels cleanly */
    .xp-bar-labels { flex-direction: column; gap: 1px; }
    .xp-bar-labels .xp-total,
    .xp-bar-labels .xp-next { font-size: 11px; max-width: 100%; }
}

/* =====================================================================
   SETTINGS PAGE — MOBILE FIXES (injected here, not theme.css)
   ===================================================================== */

/* 768px: tabs scroll horizontally (set in settings.php inline styles,
   but also reinforce here for the nav strip) */
@media (max-width: 768px) {
    /* Make sure tap targets in settings tabs are ≥ 44px tall */
    .settings-nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 480px) {
    /* 2FA QR layout: stack vertically */
    .twofa-setup-wrap {
        flex-direction: column !important;
        align-items: center !important;
    }
    .twofa-setup-wrap > div {
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    /* 2FA QR image: cap width so it doesn't overflow on phones */
    .twofa-setup-wrap img[src*="qr"],
    .twofa-setup-wrap canvas,
    .twofa-qr-img { max-width: min(220px, 100%); height: auto; }
    /* 2FA code input full-width on tiny screens */
    .twofa-code-input {
        width: 100% !important;
        box-sizing: border-box;
        font-size: 18px; /* larger for OTP entry on phone */
        letter-spacing: 0.25em;
        text-align: center;
    }
    /* Forms full-width */
    .settings-panel .input { width: 100%; box-sizing: border-box; }
    .settings-panel input[type=range].input { padding: 6px 0; }
    /* Range input should stretch */
    input[type=range].input { width: 100% !important; max-width: 100% !important; }
    /* Settings panel content comfortable on phones */
    .settings-panel.card { padding: 14px; }
    /* Session row: wrap UA on small phones */
    .session-row { flex-wrap: wrap; }
    .session-ua { font-size: 12px; white-space: normal; }
}

@media (max-width: 390px) {
    .settings-nav a { font-size: 12px; padding: 9px 9px; }
    .settings-panel.card { padding: 12px; }
}

@media (max-width: 360px) {
    .settings-nav a { font-size: 11px; padding: 8px 8px; }
    .settings-panel.card { padding: 10px; }
}