/* Achievements: the browse panel, the badge selector, and the profile badges.
   Tier colors are defined once here and referenced by [data-tier], so a badge
   looks the same wherever it is rendered — settings list, selector chip, or
   public profile row. */

:root {
    /* Tiers have to be tellable apart at chip size, which the first pass got
       wrong: #cd7f32 bronze, #d4a017 gold and #f0883e mythic were three
       neighbouring oranges and read as one colour on a badge.
       Bronze is now a genuinely brown copper, and mythic moves off the warm
       ramp entirely to violet — the largest hue separation available without
       colliding with the danger red or the accent blue. */
    --achievement-bronze: #a1663a;
    --achievement-silver: #9fb1bd;
    --achievement-gold: #d4a017;
    --achievement-mythic: #a06bd8;
}

/* --- Settings nav unread badge ----------------------------------------- */

.settings-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color);
    color: var(--button-primary-text, #fff);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* Same treatment inside the user dropdown, which lists Achievements too.
   `.dropdown-item` is display:block, so this sits inline right after the label
   rather than being pushed to the trailing edge — matching how the settings
   sidebar renders the same count, and avoiding a layout change to every other
   item in the menu. */
.dropdown-item-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: middle;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color);
    color: var(--button-primary-text, #fff);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Overall progress -------------------------------------------------- */

.achievements-summary {
    margin-bottom: 20px;
}

.achievements-progress-headline {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.achievements-progress-headline strong {
    color: var(--text-color);
    font-size: 1.15rem;
}

.achievements-progress-track,
.achievement-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--entry-bg, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}

.achievements-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-gradient, var(--accent-color));
    transition: width 0.4s ease;
}

/* Per-achievement bars carry that achievement's tier rather than the theme
   accent, so the colour on the card always tells you what you are looking at.
   `--tier-color` is set by the [data-tier] rules below. */
.achievement-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--tier-color, var(--accent-color));
    transition: width 0.4s ease;
}

.achievements-error {
    color: var(--danger-color);
}

/* --- Category sections ------------------------------------------------- */

.achievement-category {
    margin-top: 24px;
}

.achievement-category-title {
    margin: 0 0 10px;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.achievement-grid {
    display: grid;
    /* One column on narrow panels, two once there is room. auto-fit rather than
       a media query so this responds to the settings panel's own width, which
       is not the viewport's. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

/* --- One achievement --------------------------------------------------- */

.achievement-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg, rgba(255, 255, 255, 0.03));
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* Unlocked cards carry their tier color on the left edge. A full-border tint
   made the grid read as a set of warnings. */
.achievement-card.unlocked {
    border-left-width: 3px;
}

/* Published once on the card so the icon, tier label, progress bar and reward
   note all resolve the same colour without repeating the tier table four times. */
.achievement-card[data-tier="bronze"] { --tier-color: var(--achievement-bronze); }
.achievement-card[data-tier="silver"] { --tier-color: var(--achievement-silver); }
.achievement-card[data-tier="gold"]   { --tier-color: var(--achievement-gold); }
.achievement-card[data-tier="mythic"] { --tier-color: var(--achievement-mythic); }

.achievement-card.unlocked { border-left-color: var(--tier-color); }

/* Only unlocked cards lead anywhere, so only they get affordances. */
.achievement-card.is-actionable {
    cursor: pointer;
}

.achievement-card.is-actionable:hover,
.achievement-card.is-actionable:focus-visible {
    border-color: var(--tier-color, var(--accent-color));
    background: var(--entry-hover-bg, rgba(255, 255, 255, 0.06));
    outline: none;
}

.achievement-card.locked {
    opacity: 0.62;
}

.achievement-card.locked:hover {
    opacity: 0.85;
}

/* An admin looking through a hidden entry gets a dashed edge, so a privileged
   view is never mistaken for what players actually see. */
.achievement-card.admin-revealed {
    border-style: dashed;
    border-color: var(--tier-color, var(--accent-color));
}

.achievement-card.admin-revealed::after {
    content: "ADMIN VIEW";
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.achievement-card {
    position: relative;
}

/* SVG marks, not emoji: they take the tier colour and render identically on
   every platform. */
.achievement-svg {
    display: block;
    flex: 0 0 auto;
}

.achievement-icon {
    color: var(--tier-color, var(--text-muted));
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--entry-bg, rgba(255, 255, 255, 0.06));
    font-size: 1.25rem;
    line-height: 1;
}

.achievement-body {
    min-width: 0;
    flex: 1 1 auto;
}

.achievement-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Pushes the tier label to the trailing edge regardless of whether the NEW chip
   is present, so cards in a row keep their tier labels aligned. */
.achievement-headline .achievement-tier {
    margin-left: auto;
}

.achievement-name {
    color: var(--text-color);
    font-weight: 700;
    font-size: 0.92rem;
}

.achievement-tier {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.achievement-tier { color: var(--tier-color, var(--text-muted)); }

/* Marks the unlock(s) earned since the last visit to this panel. Bright and
   uppercase because it has one job: answering "which one did I just get?" in a
   grid where every unlocked card otherwise looks the same. */
.achievement-new-chip {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--accent-color);
    color: var(--button-primary-text, #fff);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.5;
}

/* Sits under the reward note, quieter than everything else on the card — it is
   provenance, not a call to action. */
.achievement-acquired {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.achievement-description {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* A hidden achievement's placeholder text should read as deliberately withheld
   rather than as a description that failed to load. */
.achievement-card.hidden-achievement .achievement-description {
    font-style: italic;
}

.achievement-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.achievement-progress-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.achievement-reward {
    margin: 6px 0 0;
    color: var(--tier-color, var(--accent-color));
    font-size: 0.74rem;
}

/* --- Badge selector (Settings > Public Profile) ------------------------ */

/* Sized to match `.playstyle-tag-toggle` (modals.css) exactly — the accent,
   badge and playstyle selectors stack directly on top of each other in Public
   Profile, and any difference in height reads as a mistake. */
.achievement-badge-toggle,
.accent-swatch {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
}

/* The toggle now holds a mark and a display face rather than an emoji glyph. */
.achievement-badge-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.achievement-badge-toggle .achievement-svg {
    color: var(--tier-color, currentColor);
}

.achievement-badge-toggle[data-tier="bronze"] { --tier-color: var(--achievement-bronze); }
.achievement-badge-toggle[data-tier="silver"] { --tier-color: var(--achievement-silver); }
.achievement-badge-toggle[data-tier="gold"]   { --tier-color: var(--achievement-gold); }
.achievement-badge-toggle[data-tier="mythic"] { --tier-color: var(--achievement-mythic); }

.achievement-badge-toggle[aria-pressed="true"][data-tier="bronze"] { border-color: var(--achievement-bronze); }
.achievement-badge-toggle[aria-pressed="true"][data-tier="silver"] { border-color: var(--achievement-silver); }
.achievement-badge-toggle[aria-pressed="true"][data-tier="gold"]   { border-color: var(--achievement-gold); }
.achievement-badge-toggle[aria-pressed="true"][data-tier="mythic"] { border-color: var(--achievement-mythic); }

/* --- Equipped badge on a public profile -------------------------------- */

.achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--entry-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-color);
    font-size: 0.85em;
    white-space: nowrap;
}

.achievement-badge[data-tier="bronze"] { --tier-color: var(--achievement-bronze); }
.achievement-badge[data-tier="silver"] { --tier-color: var(--achievement-silver); }
.achievement-badge[data-tier="gold"]   { --tier-color: var(--achievement-gold); }
.achievement-badge[data-tier="mythic"] { --tier-color: var(--achievement-mythic); }

/* Border and mark both take the tier; the label stays readable body colour so
   the badge reads as a label rather than as coloured text. */
.achievement-badge {
    border-color: var(--tier-color, var(--border-color));
}

.achievement-badge .achievement-svg {
    color: var(--tier-color, currentColor);
}

/* --- Accent picker ----------------------------------------------------- */

.accent-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.accent-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.accent-swatch-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--swatch-color, var(--text-muted));
    border: 1px solid rgba(0, 0, 0, 0.35);
}

.accent-swatch.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.accent-swatch[aria-pressed="true"] {
    border-color: var(--swatch-color, var(--accent-color));
}

/* --- Jump target: the badge selector in Public Profile ------------------ */

/* Clicking an unlocked achievement lands here. The flash exists because the
   selector sits mid-tab: without it the reader arrives at a scrolled page with
   no indication of which control they were sent to. */
.form-group.is-highlighted {
    animation: achievement-jump-flash 1.6s ease-out 1;
    border-radius: 10px;
}

@keyframes achievement-jump-flash {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow, rgba(88, 166, 255, 0.5)); }
    35%  { box-shadow: 0 0 0 6px var(--accent-glow, rgba(88, 166, 255, 0.35)); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* Respect a stated preference for less motion; the anchor is still identifiable
   from the resting outline. */
@media (prefers-reduced-motion: reduce) {
    .form-group.is-highlighted {
        animation: none;
        box-shadow: 0 0 0 2px var(--accent-color);
    }
}