/* MCP Achievements UI — PR C
 *
 * All selectors prefixed `.mcp-achievement-*` so they don't collide with
 * the rest of MCP's CSS. Tier colors driven by CSS variables on :root —
 * tweak in one place if the design system ever consolidates them.
 *
 * Sizes: xs (32px) for the header rail, sm (48px) for listing details,
 *        md (72px) for catalog grids, lg (96px) for hero/celebration.
 */

:root {
    /* Tier palette — gradients (not flat colors) so each tier visibly
       escalates in prestige from Bronze → Diamond. Each tier has three
       stops: a bright top-left (light source), a mid value, and a
       deeper bottom-right (depth). Paired glows are tinted to the tier
       so earned badges feel "lit from within." */
    --mcp-tier-bronze-bg: linear-gradient(135deg, #cd7f32 0%, #a0522d 50%, #8b4513 100%);
    --mcp-tier-bronze-glow: 0 0 12px rgba(205, 127, 50, 0.4);
    --mcp-tier-bronze-ring: #b8722c;

    --mcp-tier-silver-bg: linear-gradient(135deg, #e8e8e8 0%, #b8b8b8 50%, #909090 100%);
    --mcp-tier-silver-glow: 0 0 12px rgba(192, 192, 192, 0.4);
    --mcp-tier-silver-ring: #a8a8a8;

    --mcp-tier-gold-bg: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #daa520 100%);
    --mcp-tier-gold-glow: 0 0 14px rgba(255, 215, 0, 0.5);
    --mcp-tier-gold-ring: #daa520;

    --mcp-tier-platinum-bg: linear-gradient(135deg, #b8c6db 0%, #8b9fbf 50%, #6b7fa0 100%);
    --mcp-tier-platinum-glow: 0 0 16px rgba(139, 159, 191, 0.5);
    --mcp-tier-platinum-ring: #8b9fbf;

    /* Diamond gets a 5-stop gradient so the diagonal sweep has a
       brighter band through the middle, plus a double-glow (close +
       far) for the prismatic feel. Combined with the shimmer
       animation below, this is the visual reward for the rarest tier. */
    --mcp-tier-diamond-bg: linear-gradient(135deg, #e0f7ff 0%, #b0e0ff 30%, #80d0ff 60%, #b0e0ff 90%, #e0f7ff 100%);
    --mcp-tier-diamond-glow: 0 0 20px rgba(176, 224, 255, 0.7), 0 0 40px rgba(135, 206, 250, 0.3);
    --mcp-tier-diamond-ring: #87ceeb;

    /* Mythic — PR-C addition. One step above diamond, reserved for the
       very top of any ladder (Hall of Fame, Has The Grail). Iridescent
       5-stop gradient sweeping through gold → coral → teal → mint →
       gold for a "rainbow shimmer" feel. Double-glow with two tinted
       layers so the badge reads as lit from within from any angle. */
    --mcp-tier-mythic-bg: linear-gradient(135deg, #FFD700 0%, #FF6B6B 25%, #4ECDC4 50%, #95E1D3 75%, #FFD700 100%);
    --mcp-tier-mythic-glow: 0 0 24px rgba(255, 215, 0, 0.6), 0 0 48px rgba(78, 205, 196, 0.4);
    --mcp-tier-mythic-ring: #FFD700;

    /* Standard depth shadow shared by all earned badges so they sit
       above the page consistently. Tier glows compose ON TOP of this. */
    --mcp-badge-depth-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Single-badge frame ---------------------------------------------------- */
.mcp-achievement-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: #212529;
    text-decoration: none;
    user-select: none;
}

/* Container that holds the 3D PNG. No border, no background, no shadow —
   the PNG carries all the visual weight. Earned/locked state is conveyed
   by a single CSS filter on the img below (saturation + opacity), not by
   the container. */
.mcp-achievement-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.mcp-achievement-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.mcp-achievement-badge-label {
    margin-top: 6px;
    font-weight: 600;
    color: #212529;
    word-break: break-word;
}

/* Sizes ---------------------------------------------------------------- */
.mcp-achievement-badge-xs .mcp-achievement-badge-icon { width: 32px; height: 32px; }
.mcp-achievement-badge-xs .mcp-achievement-badge-label { font-size: 11px; }

.mcp-achievement-badge-sm .mcp-achievement-badge-icon { width: 48px; height: 48px; }
.mcp-achievement-badge-sm .mcp-achievement-badge-label { font-size: 12px; }

.mcp-achievement-badge-md .mcp-achievement-badge-icon { width: 72px; height: 72px; }
.mcp-achievement-badge-md .mcp-achievement-badge-label { font-size: 13px; }

.mcp-achievement-badge-lg .mcp-achievement-badge-icon { width: 96px; height: 96px; }
.mcp-achievement-badge-lg .mcp-achievement-badge-label { font-size: 14px; }

/* Flat 3D-icon design — no tier gradients, no glows, no metallic frame.
   Every badge renders as a 3D PNG floating on the page; tier, category,
   and accent rules are intentionally retired. The data-tier attribute
   still lands on the markup for forward compatibility (e.g., we could
   add a tier label below the badge later) but no longer drives any
   visual styling.
   ---------------------------------------------------------------------- */

/* Disabled: the old tier-gradient + category-accent + per-code rules.
   See git history (PR #41, PR-C, PR-G3) for the previous metallic +
   glow system if we ever need to revive it. The :root tier color
   variables at the top of this file are also unused now but kept in
   case future work wants to reintroduce a flat tier-tinted treatment
   (e.g., a colored dot under the label) without re-deriving them.
   ---------------------------------------------------------------------- */

/* Hidden block-comment safety net so any stale tier rule below this
   point can be re-enabled by removing the wrapping block-comment
   markers if needed. */
/* Category-tinted gradients for non-tiered accent badges -------------- */
/* (Removed: the PR #41 category/code accent gradients — activation,
   special, subscription, community, auctions first-tier — all relied
   on the circular icon container's background gradient + glow that's
   no longer part of the design. Removed wholesale rather than left as
   no-op selectors. See git history for the previous palettes if a
   future design wants to bring colored accents back.) */

/* Earned hover — playful pop-and-tilt with a bounce-back ease.
   Adds a tiny rotation on top of scale so the badge feels like it's
   reacting to the pointer, not just zooming in. Drop-shadow gives it
   depth without bringing back the old colored glow. */
@keyframes mcp-badge-hover-pop {
    0%   { transform: scale(1)    rotate(0deg); }
    45%  { transform: scale(1.18) rotate(-6deg); }
    70%  { transform: scale(1.10) rotate(3deg); }
    100% { transform: scale(1.13) rotate(0deg); }
}
.mcp-achievement-badge-earned:hover .mcp-achievement-badge-img {
    animation: mcp-badge-hover-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

/* Achievements tab: bump badge size up ~15% (72px → 83px) so the
   3D-pack PNGs feel more prominent in the catalog grid. Scoped to the
   tab grid only — header rail, listing detail, and tooltips keep their
   existing sizes. Label font-size deliberately NOT bumped so the
   typography rhythm next to the page header stays consistent. */
.mcp-achievements-grid .mcp-achievement-badge-md .mcp-achievement-badge-icon {
    width: 83px;
    height: 83px;
}

/* Locked state ---------------------------------------------------------
   Full grayscale + reduced opacity on the PNG itself (not the wrapper),
   so the label stays at normal weight. Slight wrapper scale-down keeps
   the visual cue that the badge is recessed compared to earned ones. */
.mcp-achievement-badge-locked {
    transform: scale(0.92);
    transition: transform 200ms ease;
}
.mcp-achievement-badge-locked .mcp-achievement-badge-img {
    filter: grayscale(1);
    opacity: 0.35;
}
.mcp-achievement-badge-locked:hover {
    transform: scale(0.95);
}
.mcp-achievement-badge-locked:hover .mcp-achievement-badge-img {
    opacity: 0.55;
}
.mcp-achievement-badge-locked .mcp-achievement-badge-label {
    color: #909090;
}

/* Profile rail (top of seller-store) ----------------------------------- */
.mcp-achievements-profile-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 18px;
}
.mcp-achievements-more {
    font-size: 13px;
    font-weight: 600;
    color: #1e88e5;
    text-decoration: none;
    margin-left: 4px;
}
.mcp-achievements-more:hover { text-decoration: underline; }

/* Listing detail rail -------------------------------------------------- */
.mcp-achievements-listing-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Catalog grid (Achievements tab + /achievements public page) ----------
   Spacing tightened in PR #41 so the grid reads as a cohesive cluster
   instead of scattered points across a 1200px container.

   - max-width: 840px on the grid keeps the 6-column row tight enough
     that adjacent badges feel grouped (~118px per cell at gap 18px).
     Partial rows (e.g. Buyer Milestones with 3 badges, Special with 1)
     left-align inside the same 840px so the empty space on the right
     reads as "we ran out of badges in this category" rather than
     "these badges are floating alone in a wide container."

   - Section vertical margins reduced from 24px/18px to 18px/10px so the
     header → first-row gap is ~24-28px rather than the prior ~42px.
     The category header keeps its underline + uppercase styling. */
/* Horizontal padding gives the achievements section breathing room
   from the page edge on /mark and the public catalog page. The
   left-aligned grid (PR #43) sat flush against the page-content edge
   without it. Mobile drops to 16px in the media query below. */
.mcp-achievements-tab-content {
    padding: 8px 32px 24px;
}
.mcp-achievements-tab-header {
    margin-bottom: 10px;
}
.mcp-achievements-tab-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.mcp-achievements-category {
    margin-top: 18px;
}
.mcp-achievements-category-heading {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin: 0 0 10px;
    padding-bottom: 6px;
    /* Divider runs the full width of the achievements tab content area
       (no max-width cap) so each section visually breaks the page from
       edge to edge instead of stopping mid-line at the old 840px grid
       boundary. */
    border-bottom: 1px solid #e2e2e2;
}
/* Fixed-width cells (auto-fill) so badge-to-badge spacing stays identical
   regardless of how many badges a category has. The previous
   `repeat(6, minmax(0, 1fr))` stretched cells to fill 1/6 of the
   container, which made partial rows (3-, 4-, 5-badge categories) look
   spaced apart from the 6-badge ones. With auto-fill, partial rows just
   end early; gaps stay constant. 6 × 120px + 5 × 24px = 840px so a full
   row still fits the existing max-width exactly. Left-aligned (no auto
   margins) so the grid lines up flush with the headline + section
   headers — centring read as disconnected with 33 of an eventual 85+
   badges in the catalog. Once catalog expansion fills more rows the
   grid will naturally extend further down rather than re-centering. */
.mcp-achievements-grid {
    display: grid;
    /* Use auto-fill so the grid spreads cells across the full tab
       content width on desktop instead of capping at the old 840px
       boundary. min-content lower bound is 120px (a single badge);
       `1fr` upper bound lets each column grow to fill the row. */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    column-gap: 24px;
    row-gap: 24px;
}
/* Per-category column caps from the PR-C catalog expansion are no
   longer needed — the auto-fill above naturally lays the right number
   of columns for each section's badge count and the available width.
   (Removed: activation/sales/subscription/community max-width
   overrides.) */
/* Force every grid item to fill its cell so the icon position is
   identical across rows. Without this, the wrapper (inline-block) and
   badge (inline-flex) both collapse to content width, so a badge with
   a longer label renders wider than one with a short label, shifting
   the icon's centre within the 120px cell. PR #43 fixed the cell width
   but not the wrapper width — visible icon-to-icon spacing was still
   uneven row-by-row. width: 100% on both wrapper and badge means the
   icon (centred via align-items on the badge) always lands in the
   middle of the cell regardless of label length. Mobile cells are 1fr
   instead of 120px, so width: 100% adapts naturally. */
.mcp-achievements-grid > .mcp-achievement-badge-wrapper {
    display: block;
    width: 100%;
}
.mcp-achievements-grid > .mcp-achievement-badge-wrapper > .mcp-achievement-badge {
    display: flex;
    width: 100%;
}

/* Reserve 2 lines of label space in the grid so a longer label (e.g.
   "First Offer Received") doesn't push its badge baseline below
   single-line neighbours in the same row. 3+ line labels truncate with
   ellipsis (defensive — no current name needs this).

   Selector note: PR #43's version used `.mcp-achievements-grid >
   .mcp-achievement-badge` but the DOM is grid → wrapper → badge, so
   `>` matched nothing and the rule never applied. Descendant selector
   here matches all labels in the grid, which is fine because the grid
   only contains badges. */
.mcp-achievements-grid .mcp-achievement-badge-label {
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Public catalog page hero --------------------------------------------- */
.mcp-achievements-public-hero {
    text-align: center;
    margin: 24px 0 32px;
}
.mcp-achievements-public-hero h1 {
    font-size: 32px;
    font-weight: 800;
}
.mcp-achievements-public-hero p {
    color: #555;
    font-size: 15px;
    max-width: 640px;
    margin: 8px auto 0;
}
.mcp-achievements-public-progress {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    background: #fff7d6;
    border: 1px solid #ffd900;
    border-radius: 999px;
    font-weight: 600;
    color: #212529;
}

/* Tab pill matching existing seller-store tab style ------------------- */
.mcp-achievements-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #ffd900;
    color: #212529;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* Header bell entry (dormant until PR B writes the rows) -------------- */
.notif-achievement {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
}
.notif-achievement .notif-icon {
    color: #ffd700;
    font-size: 22px;
    flex-shrink: 0;
}
.notif-achievement .notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.notif-achievement .notif-title {
    font-weight: 700;
    font-size: 13px;
}
.notif-achievement .notif-text {
    font-size: 12px;
    color: #555;
}
.notif-achievement .notif-link {
    font-size: 12px;
    font-weight: 600;
    color: #1e88e5;
    align-self: flex-start;
    margin-top: 4px;
    text-decoration: none;
}

/* Admin tables --------------------------------------------------------- */
.mcp-admin-achievements-table th,
.mcp-admin-achievements-table td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    font-size: 13px;
}
.mcp-admin-achievements-table th { background: #f1f1f1; font-weight: 700; }
.mcp-admin-achievements-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 24px;
}
.mcp-admin-achievements-stat {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 14px;
}
.mcp-admin-achievements-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}
.mcp-admin-achievements-stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
}

/* Styled tooltip (PR D — replaces native title attribute when the badge
   component is given a `progress` prop). Hover-driven on desktop;
   tap-to-show on touch via `.tooltip-active` class added by
   public/frontend/js/achievement-tooltip.js. ----------------------- */
.mcp-achievement-badge-wrapper {
    position: relative;
    display: inline-block;
}
.mcp-achievement-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 200px;
    max-width: 280px;
    padding: 12px 14px;
    background: #1a1a1a;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    /* Tight body-text line-height. 1.25 still read airy on long wrapped
       descriptions ("Featured cards in 5 Crown Auction Events..."), so
       drop further to 1.15. Per-paragraph overrides below pin specific
       lines to match. */
    line-height: 1.15;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.mcp-achievement-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip,
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}
.mcp-achievement-tooltip-name {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}
.mcp-achievement-tooltip-description {
    margin: 0 0 8px 0;
    color: #cccccc;
    line-height: 1.15;
}
.mcp-achievement-tooltip-earned {
    margin: 0;
    /* MCP brand yellow — replaces the prior #4caf50 green so the
       earned line tracks the rest of the platform's accent color. */
    color: #ffd900;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.15;
}
.mcp-achievement-tooltip-progress {
    margin: 8px 0 4px 0;
}
.mcp-achievement-tooltip-progress-text {
    font-size: 12px;
    color: #ffd700;
    margin: 0 0 4px 0;
    font-weight: 500;
    line-height: 1.15;
}
.mcp-achievement-tooltip-progress-bar {
    width: 100%;
    height: 4px;
    background: #333333;
    border-radius: 2px;
    overflow: hidden;
}
.mcp-achievement-tooltip-progress-bar-fill {
    height: 100%;
    background: #ffd700;
    border-radius: 2px;
    transition: width 300ms ease;
}
.mcp-achievement-tooltip-howto {
    margin: 8px 0 0 0;
    color: #aaaaaa;
    font-size: 12px;
    font-style: italic;
    line-height: 1.15;
}
/* Edge case: tooltip near the right edge of the viewport. JS in
   achievement-tooltip.js sets data-position="right" when the default
   center-anchored placement would clip outside the viewport. */
.mcp-achievement-tooltip[data-position="right"] {
    left: auto;
    right: 0;
    transform: translateY(-8px);
}
.mcp-achievement-tooltip[data-position="right"]::after {
    left: auto;
    right: 12px;
    transform: none;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip[data-position="right"],
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip[data-position="right"] {
    transform: translateY(-12px);
}
.mcp-achievement-tooltip[data-position="left"] {
    left: 0;
    right: auto;
    transform: translateY(-8px);
}
.mcp-achievement-tooltip[data-position="left"]::after {
    left: 12px;
    right: auto;
    transform: none;
}
.mcp-achievement-badge-wrapper:hover .mcp-achievement-tooltip[data-position="left"],
.mcp-achievement-badge-wrapper.tooltip-active .mcp-achievement-tooltip[data-position="left"] {
    transform: translateY(-12px);
}

/* Mobile breakpoint matches recent leaderboard work ------------------- */
@media (max-width: 768px) {
    /* Badge sizes — shrink ~25% to fit a denser mobile layout. */
    .mcp-achievement-badge-xs .mcp-achievement-badge-icon { width: 24px; height: 24px; }
    .mcp-achievement-badge-xs .mcp-achievement-badge-icon i { font-size: 12px; }
    .mcp-achievement-badge-sm .mcp-achievement-badge-icon { width: 36px; height: 36px; }
    .mcp-achievement-badge-sm .mcp-achievement-badge-icon i { font-size: 18px; }
    .mcp-achievement-badge-md .mcp-achievement-badge-icon { width: 56px; height: 56px; }
    .mcp-achievement-badge-md .mcp-achievement-badge-icon i { font-size: 28px; }
    .mcp-achievement-badge-lg .mcp-achievement-badge-icon { width: 72px; height: 72px; }
    .mcp-achievement-badge-lg .mcp-achievement-badge-icon i { font-size: 36px; }

    /* Issue 1 — keep the seller-store tab bar on a single line on mobile.
       Without this, the 5th Achievements tab pushes the row to wrap below
       Shop / Reviews / Feed Posts. Now the bar scrolls horizontally
       instead. Hidden scrollbar matches mobile-native chip-row idiom. */
    .store-tab-section .store-tabs-flex {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .store-tab-section .store-tabs-flex::-webkit-scrollbar {
        display: none;
    }
    .store-tab-section .store-tabs-flex > .store-tabs {
        flex-shrink: 0;
    }

    /* Tighter section padding on mobile so the 4-col grid has more room
       per cell and badges aren't cramped against the viewport edge. */
    .mcp-achievements-tab-content {
        padding: 8px 16px 24px;
    }

    /* Uniform 4-column grid. Wrapper/badge fill rules from the desktop
       block above (`.mcp-achievements-grid > .mcp-achievement-badge-
       wrapper { width: 100%; }`) carry through and adapt automatically
       to the 1fr cells. */
    .mcp-achievements-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        justify-items: stretch;
    }

    /* Uniform label rendering on mobile. Min-height 30px (≈ 2 lines at
       the smaller mobile font) overrides the 2.4em desktop value because
       em on mobile renders ~26px which is too tight for 2 lines plus
       padding. Hyphens-auto lets long words like "Subscription" break
       cleanly when the cell is narrow. */
    .mcp-achievements-grid .mcp-achievement-badge-label {
        width: 100%;
        max-width: 100%;
        min-height: 30px;
        line-height: 1.2;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .mcp-admin-achievements-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Tooltip — slimmer on phones so it doesn't dominate the screen. */
    .mcp-achievement-tooltip {
        min-width: 180px;
        max-width: 240px;
        font-size: 12px;
        padding: 10px 12px;
    }
}