/* =========================================================================
   The Wine Profile — Base Styles
   ========================================================================= */

:root {
    --color-primary: #440304;
    --color-primary-light: #6b1011;
    --color-accent: #DAA520;
    --color-success: #2D6A2E;
    --color-error: #901718;
    --color-tier-bronze: #CD7F32;
    --color-tier-silver: #C0C0C0;
    --color-tier-gold: #FFD700;
    --color-tier-diamond: #B9F2FF;
    --color-border-primary: #aaa;
    --color-border-secondary: #bbb;
    --color-border-tertiary: #e0e0e0;
    --color-burgundy-pale: #F8E5E8;
    --color-burgundy-pale-soft: #FBF0F2;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Typography scale */
    --fs-page-title: 1.75rem;
    --fs-section:    1.25rem;
    --fs-body:       1rem;
    --fs-secondary:  0.875rem;
    --fs-small:      0.75rem;
}

/* ---- Background ---- */
body {
    font-family: var(--font-body);
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FAF8F5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

.points-display {
    font-family: var(--font-mono);
    font-weight: 700;
}

.rank-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #F5E6C8;
    font-weight: 600;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

/* ---- Achievement unlock modal ---- */
.achievement-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.achievement-modal {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.achievement-modal-star {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.achievement-modal-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.achievement-modal-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.achievement-modal-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.achievement-modal-flavour {
    font-size: 0.8rem;
    font-style: italic;
    color: #999;
    margin-bottom: 1.5rem;
}

.achievement-modal-asset img {
    max-width: 120px;
    max-height: 120px;
    margin: 1rem auto;
    display: block;
}

.achievement-modal-btn {
    background: var(--color-accent);
    color: var(--color-primary);
    border: none;
    border-radius: 24px;
    padding: 0.75rem 2rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    width: 100%;
    margin-top: 1rem;
}

.achievement-modal-btn:hover {
    opacity: 0.9;
}

.achievement-modal__collection-link {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-top: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.achievement-modal__collection-link:hover {
    opacity: 1;
    color: var(--color-accent);
}
.achievement-modal-count {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---- Rarity colours (WoW convention) ---- */
.rarity-common    { color: #9d9d9d; }
.rarity-uncommon  { color: #1eff00; }
.rarity-rare      { color: #0070dd; }
.rarity-epic      { color: #a335ee; }
.rarity-legendary { color: #ff8000; }

/* ====================================
   ACHIEVEMENT RARITY SYSTEM
   Simple frames + stars on top border
==================================== */

/* Rarity borders — thinner, cleaner frame look */

.rarity-border-common {
    border: 5px solid #B5A98F !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.08);
}

.rarity-border-uncommon {
    border: 5px solid #B08355 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 200, 0.4),
        0 2px 6px rgba(176, 131, 85, 0.2);
}

.rarity-border-rare {
    border: 5px solid #B8B8B8 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        0 3px 8px rgba(184, 184, 184, 0.25);
}

.rarity-border-epic {
    border: 5px solid #D4A017 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 240, 180, 0.5),
        0 3px 12px rgba(212, 160, 23, 0.3);
}

.rarity-border-legendary {
    border: 5px solid transparent !important;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(
            135deg,
            #FFD700 0%,
            #FF69B4 20%,
            #9370DB 40%,
            #4169E1 60%,
            #00CED1 80%,
            #FFD700 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rarity-border-legendary.achievement-card--avatar {
    background-image:
        linear-gradient(#F5EDE4, #F5EDE4),
        linear-gradient(
            135deg,
            #FFD700 0%,
            #FF69B4 20%,
            #9370DB 40%,
            #4169E1 60%,
            #00CED1 80%,
            #FFD700 100%
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Badge cards opt out of the square frame — they use hexagonal
   pseudo-element frames defined further down. */
.achievement-card--badge.rarity-border-common,
.achievement-card--badge.rarity-border-uncommon,
.achievement-card--badge.rarity-border-rare,
.achievement-card--badge.rarity-border-epic,
.achievement-card--badge.rarity-border-legendary {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Leaderboard avatars are 40px (32px mobile) — the default 5px rarity
   border swallows most of the icon. Scale the border down here. */
.leader-avatar.rarity-border-common,
.leader-avatar.rarity-border-uncommon,
.leader-avatar.rarity-border-rare {
    border-width: 1.5px !important;
}
.leader-avatar.rarity-border-epic,
.leader-avatar.rarity-border-legendary {
    border-width: 2px !important;
}


/* ---- Achievement cards ---- */
.achievement-category { margin-bottom: 2rem; }
.achievement-category-header {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-tertiary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.achievement-card {
    position: relative;
    border-radius: 8px;
    border: 3px solid transparent;
    overflow: visible;
    cursor: default;
    transition: transform 0.15s ease;
    width: 100%;
    aspect-ratio: 1;
}
.achievement-card:hover {
    transform: translateY(-2px);
    z-index: 10;
}

/* Avatar card */
.achievement-card--avatar { aspect-ratio: 1; }
.achievement-card__image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
}
.achievement-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.achievement-card__image--empty {
    background: var(--color-background-secondary, #f5f3f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-text-secondary);
}

/* Badge / Trophy card — hexagonal frame via pseudo-elements */
.achievement-card--badge {
    aspect-ratio: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 0;
    position: relative;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
}

/* Outer hex — rarity colour */
.achievement-card--badge::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    z-index: 1;
}

/* Inner hex — card surface behind the image */
.achievement-card--badge::after {
    content: '';
    position: absolute;
    inset: 5px;
    background: #F5EDE4;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    z-index: 2;
}

/* Rarity-specific outer hex fills */
.achievement-card--badge.rarity-border-common::before {
    background: #B5A98F;
}
.achievement-card--badge.rarity-border-uncommon::before {
    background: #B08355;
}
.achievement-card--badge.rarity-border-rare::before {
    background: #B8B8B8;
}
.achievement-card--badge.rarity-border-epic::before {
    background: #D4A017;
}
.achievement-card--badge.rarity-border-legendary::before {
    background: linear-gradient(
        135deg,
        #FFD700 0%,
        #FF69B4 20%,
        #9370DB 40%,
        #4169E1 60%,
        #00CED1 80%,
        #FFD700 100%
    );
}

/* Unearned: dim the inner hex surface */
.achievement-card--unearned.achievement-card--badge::after {
    opacity: 0.6;
}

.achievement-card--badge .achievement-card__badge-image {
    position: relative;
    z-index: 3;
    width: 85%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.achievement-card__badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.achievement-card--badge .achievement-card__badge-placeholder {
    position: relative;
    z-index: 3;
    width: 85%;
    height: 85%;
    background: transparent;
}
.achievement-card--badge .achievement-card__badge-name {
    display: none;
}
.achievement-card__badge-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.2;
    padding: 0 0.25rem;
    margin-top: 0.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.achievement-card__badge-placeholder {
    width: 75%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* Rarity backgrounds for badge icons */
.rarity-bg-common    { background: rgba(181, 169, 143, 0.12); color: #7a6f5a; }
.rarity-bg-uncommon  { background: rgba(176, 131, 85, 0.12);  color: #8B5E3C; }
.rarity-bg-rare      { background: rgba(184, 184, 184, 0.12); color: #6a6a6a; }
.rarity-bg-epic      { background: rgba(212, 160, 23, 0.15);  color: #9a7510; }
.rarity-bg-legendary { background: rgba(147, 112, 219, 0.12); color: #4B0D5C; }

/* Earned indicator */
/* Secret card */
.achievement-card--secret {
    aspect-ratio: 1;
    background: var(--color-background-secondary, #f5f3f0);
    border: 3px dashed var(--color-border-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.achievement-card__secret {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-secondary);
    font-size: 0.7rem;
}

/* Secret locked card (dimmed image + lock overlay) */
.achievement-card--secret-locked {
    aspect-ratio: 1;
    position: relative;
    border: 3px dashed var(--color-border-tertiary);
    border-radius: 8px;
    overflow: visible;
    cursor: default;
}
.achievement-card__secret-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Tooltip on hover */
.achievement-card__tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--color-border-secondary);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    width: 180px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-align: center;
}
.achievement-card__tooltip strong {
    display: block;
    font-size: 0.8rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}
.achievement-card__tooltip span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.achievement-card__tooltip em {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: 0.25rem;
    opacity: 0.7;
}
.achievement-card__tooltip-type {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.achievement-card:hover .achievement-card__tooltip { display: block; }

/* ---- Collection tab ---- */
.collection-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.collection-group { margin-bottom: 0; }
.profile-badge-showcase {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.badge-slot-counter {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 0.5rem;
}
.collection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.collection-empty {
    color: var(--color-text-secondary);
    font-size: var(--fs-secondary);
    margin: 0;
    padding: 1rem 0;
}
.achievement-card--active {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.collection-equip-link {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.6rem;
    font-weight: 600;
    background: var(--color-background-secondary);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 20px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.15s;
    white-space: nowrap;
}
.collection-equip-link:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}
.collection-card__active-text {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.6rem;
    font-weight: 600;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Unearned achievements on discovery tab */
.achievement-card--unearned .achievement-card__image img,
.achievement-card--unearned .achievement-card__image--empty,
.achievement-card--unearned .achievement-card__badge-image,
.achievement-card--unearned .achievement-card__badge-placeholder,
.achievement-card--unearned .achievement-card__badge-name {
    opacity: 0.4;
    filter: grayscale(60%);
}

.achievement-card--unearned:hover .achievement-card__image img,
.achievement-card--unearned:hover .achievement-card__image--empty,
.achievement-card--unearned:hover .achievement-card__badge-image,
.achievement-card--unearned:hover .achievement-card__badge-placeholder,
.achievement-card--unearned:hover .achievement-card__badge-name,
.achievement-card--unearned.achievement-card--badge:hover::after {
    opacity: 1 !important;
    filter: none !important;
}

.collection-card__active {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 2;
}

/* ---- Leaderboard ---- */
.rank-col { min-width: 140px; }
.leader-username { font-weight: 600; display: block; }
.leader-title { font-size: 0.75rem; color: var(--color-accent); display: block; }
.leader-avatar { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; border: 1.5px solid var(--color-accent); flex-shrink: 0; }
.leader-points { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* =========================================================================
   Header Bar (top bar with logo + pill-based controls)
   ========================================================================= */
.header-bar {
    background-color: var(--color-primary);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.header-brand:hover .header-brand-text { color: var(--color-accent); }

.header-brand-text {
    color: #F5E6C8;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pill base */
.header-pill {
    display: flex;
    align-items: center;
    height: 36px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    border: 0.5px solid rgba(218, 165, 32, 0.3);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    transition: border-color 0.2s;
}

.header-pill:hover {
    border-color: rgba(218, 165, 32, 0.5);
    color: #fff;
}

/* Stats pill */
.header-pill-stats {
    padding: 0 14px;
    gap: 8px;
}

.header-pill-divider {
    width: 1px;
    height: 12px;
    background: rgba(218, 165, 32, 0.3);
}

.header-level {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 500;
}

.header-points {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

/* Language pill */
.header-pill-lang {
    padding: 0 10px;
    gap: 4px;
}

.lang-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 3px;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, border-color 0.2s;
    line-height: 0;
}

.lang-btn:hover { opacity: 0.8; }

.lang-active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Avatar (standalone) */
.header-avatar-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 2px solid var(--color-accent);
    object-fit: cover;
    flex-shrink: 0;
    overflow: hidden;
    display: block;
}

.header-avatar-placeholder {
    background: #2a0102;
}

/* User pill */
.header-pill-user {
    padding: 0 14px;
    gap: 8px;
}

.header-username {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.header-title {
    color: rgba(218, 165, 32, 0.85);
    font-size: 11px;
    line-height: 1;
}

/* Icon pill (admin, logout) */
.header-pill-icon {
    width: 36px;
    justify-content: center;
    font-size: 13px;
}

/* Notification bell (shown in the header when user has pending
   alerts — currently only unverified email). */
.notification-bell {
    position: relative;
    display: inline-block;
}
.notification-bell__btn {
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 1.1rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    position: relative;
    animation: bell-blink 2s ease-in-out infinite;
}
.notification-bell__btn:hover {
    color: #fff;
}
@keyframes bell-blink {
    0%, 50%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(0deg); }
}
.notification-bell__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}
.notification-bell__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid var(--color-border-secondary);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}
.notification-bell__header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
}
.notification-bell__item {
    padding: 0.85rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.notification-bell__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(218, 165, 32, 0.15);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.notification-bell__body {
    flex: 1;
}
.notification-bell__title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}
.notification-bell__type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.3rem 0;
}
.notification-bell__context {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}
.notification-bell__desc {
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.4;
}
.notification-bell__actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.5rem;
}
.notification-bell__visit {
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.notification-bell__visit:hover {
    text-decoration: underline;
}
.notification-bell__dismiss {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.25rem;
    margin-left: auto;
    line-height: 1;
}
.notification-bell__dismiss:hover {
    color: var(--color-primary);
}
.notification-bell__item--personal + .notification-bell__item--personal {
    border-top: 1px solid var(--color-border-secondary);
}

/* Admin row — sits at the top of the dropdown for content-admins when
   the feedback queue is non-empty. Burgundy/cream surface so it reads
   visually distinct from the gold-accented personal rows. Clickable
   row (the whole row is the link to the feedback review page). */
.notification-bell__item--admin {
    background: var(--color-primary);
    color: #F5E6C8;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-secondary);
}
.notification-bell__item--admin:hover {
    background: color-mix(in srgb, var(--color-primary) 88%, #000);
    color: #F5E6C8;
    text-decoration: none;
}
.notification-bell__item--admin .notification-bell__icon {
    background: rgba(245, 230, 200, 0.18);
    color: #F5E6C8;
}
.notification-bell__item--admin .notification-bell__title {
    color: #F5E6C8;
    margin-bottom: 0;
}
.notification-bell__dropdown {
    max-height: 70vh;
    overflow-y: auto;
}
@media (max-width: 500px) {
    .notification-bell__dropdown {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* Auth pills (guest) — shared shape rule for Login + Sign Up.
   Both pills inherit .header-pill (36px height, 20px radius) and
   .header-pill-stats (padding 0 14px). The only legitimate differences
   between them are colour (burgundy vs gold) and icon glyph; everything
   else (gap, icon size, font-weight on label) is unified here. */
.header-login-btn,
.header-signup-btn {
    gap: 8px;
}

.header-login-btn .fa-solid,
.header-signup-btn .fa-solid {
    font-size: 12px;
}

.header-login-btn .header-level,
.header-signup-btn .header-level {
    font-weight: 700;
}

/* Leaderboard visitor CTA banner */
.leaderboard-visitor-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--color-primary);
    color: #F5E6C8;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.leaderboard-visitor-cta__text {
    flex: 1;
    min-width: 0;
}

.leaderboard-visitor-cta__heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0 0 4px;
    color: #F5E6C8;
    line-height: 1.2;
}

.leaderboard-visitor-cta__body {
    font-size: var(--fs-body);
    margin: 0;
    color: rgba(245, 230, 200, 0.8);
}

/* The Sign Up button inside this banner reuses .header-signup-btn
   for visual consistency with the navbar pill — one canonical CTA. */

@media (max-width: 600px) {
    .leaderboard-visitor-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 20px;
    }
    .leaderboard-visitor-cta__heading { font-size: 1.2rem; }
    .leaderboard-visitor-cta .header-signup-btn { align-self: stretch; justify-content: center; }
}

/* Sign Up pill — colour-only modifier. Shape lives in the shared
   .header-login-btn / .header-signup-btn rule above; this rule supplies
   the gold fill, dark text, and brightness-on-hover that distinguish
   Sign Up from the burgundy Login. */
.header-signup-btn {
    background: var(--color-accent);
    color: var(--color-primary);
    border: 0.5px solid var(--color-accent);
    transition: filter 0.15s ease, border-color 0.15s ease;
}

.header-signup-btn:hover {
    filter: brightness(1.08);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.header-signup-btn .header-level,
.header-signup-btn .fa-solid {
    color: inherit;
}

/* Responsive: compact top-row identity on mobile.
   The top row carries: logo + (smaller) brand text, then the
   points pill and avatar. Mode toggle + admin pill move into
   the hamburger menu below 768px. */
@media (max-width: 767px) {
    .header-brand-text {
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }
    .header-pill-stats { padding: 4px 10px; font-size: 0.8rem; }
    .header-pill-user { display: none; }
    .mode-toggle-btn { display: none; }
    .header-avatar { width: 36px; height: 36px; }
    /* Login + Sign Up pills go icon-only on mobile (text labels hidden via
       d-none/d-md-inline on the inner span). Lock both to a fixed 36×36
       square so the natural icon-glyph widths (fa-sign-in-alt is wider,
       fa-user-plus is narrower) don't make them render at different
       aspect ratios. Both pills now read as identical icon chips. */
    .header-login-btn,
    .header-signup-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
    }
}

@media (max-width: 576px) {
    /* Shrink the language flags a touch so they don't dominate the
       narrow guest header. */
    .header-pill-lang { padding: 2px 6px; }
    .header-pill-lang .lang-btn img { width: 20px; height: auto; }
}

/* =========================================================================
   Navigation Bar (below header) — custom, no Bootstrap navbar
   ========================================================================= */
.nav-bar-wine {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-primary);
    border-bottom: 2px solid #2a0102;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav-bar-wine .container {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.nav-links li a,
.nav-links li button {
    display: inline-block;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-links li a:hover,
.nav-links li a:focus {
    color: var(--color-accent);
}

.nav-links li a.nav-active {
    color: var(--color-accent);
}

/* Hamburger button */
.nav-hamburger {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 0.5rem;
}

.nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    transition: transform 0.2s, opacity 0.2s;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile: hide nav links by default, show when toggled */
@media (max-width: 767px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--color-primary);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        border-bottom: 2px solid #2a0102;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        padding: 0.25rem 0;
    }

    .nav-links.nav-open {
        display: flex;
    }

    .nav-links li a {
        padding: 0.6rem 1.25rem;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-bar-wine .container {
        position: relative;
        flex-wrap: wrap;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}

/* Desktop: hide hamburger */
@media (min-width: 768px) {
    .nav-hamburger { display: none !important; }
}

/* =========================================================================
   Content area
   ========================================================================= */
.site-main {
    flex: 1;
}
.content-container {
    padding: 2rem 0;
    margin-top: 1rem;
}

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.25rem;
}

.breadcrumb-item a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    color: #999;
}

/* Trimmed breadcrumb variant used on quiz_play and quiz_results — the
   current page is omitted from the crumb list and all remaining crumbs
   are clickable. Mobile (≤576px) shows the last 2 crumbs only with an
   ellipsis prefix when ancestors are hidden. */
@media (max-width: 576px) {
    .breadcrumb--trimmed .breadcrumb-item:not(:nth-last-child(-n+2)) {
        display: none;
    }
    .breadcrumb--trimmed .breadcrumb-item:nth-last-child(2):not(:first-child)::before {
        content: '…';
    }
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    overflow: hidden;
}

.card-header {
    background-color: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    border-bottom: none;
}

.card-header h5 { font-size: 1.05rem; }

.wine-card-header {
    font-family: var(--font-heading);
    background-color: #f8f9fa;
    color: #721c24;
    font-size: 1.1rem;
    font-weight: 700;
}

.card-img-top { object-fit: cover; }

/* ---- Page title ---- */
.page-title {
    color: var(--color-primary);
    font-size: var(--fs-page-title);
    word-break: break-word;
}

@media (max-width: 767px) {
    .page-title {
        font-size: 1.4rem;
    }
}

/* Sub-node badges */
.node-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    margin: 0.15rem;
    text-decoration: none;
    transition: background 0.2s;
}

.node-badge:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

/* =========================================================================
   Unified content hero — used on node detail, quiz play/results, map detail, daily quiz
   ========================================================================= */
.content-hero {
    position: relative;
    height: 220px;
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
body.club-mode .content-hero {
    border-color: var(--club-primary);
}
.content-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary);
}
.content-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(68,3,4,0.88));
}
.content-hero-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    z-index: 1;
}
.content-hero-label {
    font-size: 11px;
    color: rgba(245,230,200,0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.content-hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-page-title);
    color: #F5E6C8;
    line-height: 1.1;
    margin-bottom: 4px;
}
.content-hero-sub {
    font-size: var(--fs-secondary);
    color: rgba(245,230,200,0.7);
    line-height: 1.5;
    margin-bottom: 0;
}
.content-hero-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.content-hero-badge.badge-bronze { background: var(--color-tier-bronze); color: white; }
.content-hero-badge.badge-silver { background: #A0A0A0; color: white; }
.content-hero-badge.badge-gold { background: var(--color-tier-gold); color: #5a4a00; }
.content-hero-badge.badge-diamond { background: var(--color-tier-diamond); color: #1a6080; }
/* Page-identity pill for the daily quiz hero — cream fill with
   burgundy text, distinct from the four difficulty tiers. */
.content-hero-badge.badge-daily { background: #F5E6C8; color: var(--color-primary); }
.content-hero-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    .content-hero { height: 180px; }
    .content-hero-title { font-size: var(--fs-section); }
    .content-hero-body { padding: 14px 16px; }
}

/* =========================================================================
   Dashboard welcome hero — image-hero family, one-time onboarding artwork
   shown in the Recently played slot until the user has 5+ attempt records.
   Parallels .content-hero structurally; kept as a separate class so that
   the two concepts can evolve independently.
   ========================================================================= */
.welcome-hero {
    position: relative;
    height: 220px;
    border: 1px solid var(--color-primary);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
body.club-mode .welcome-hero {
    border-color: var(--club-primary);
}
.welcome-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    background-color: var(--color-primary);
}
.welcome-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(68,3,4,0.88));
}
.welcome-hero-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    z-index: 1;
}
.welcome-hero-title {
    font-family: var(--font-heading);
    font-size: var(--fs-page-title);
    color: #F5E6C8;
    line-height: 1.1;
    margin-bottom: 6px;
}
.welcome-hero-text {
    font-size: var(--fs-secondary);
    color: rgba(245,230,200,0.92);
    line-height: 1.5;
    margin: 0;
    max-width: 600px;
}
@media (max-width: 576px) {
    .welcome-hero { height: 180px; }
    .welcome-hero-title { font-size: var(--fs-section); }
    .welcome-hero-body { padding: 14px 16px; }
}

/* ---- Node hero header (legacy alias) ---- */
.node-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2A0102 100%);
    color: #F5F0EB;
    padding: 1.5rem 2rem;
    border-radius: 10px;
}

.node-hero-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.node-hero-title {
    color: #fff;
    font-size: var(--fs-page-title);
}

.node-hero-desc {
    color: rgba(245, 240, 235, 0.75);
    font-size: 0.95rem;
}

.node-hero-progress {
    border-left: 2px solid rgba(255,255,255,0.2);
    text-align: center;
    min-width: 160px;
}
.node-hero-progress-bar {
    position: relative;
    height: 22px;
    background: rgba(255,255,255,0.15);
    border-radius: 11px;
    overflow: hidden;
}
.node-hero-progress-fill {
    height: 100%;
    background: gold;
    border-radius: 11px;
    transition: width 0.5s ease;
}
.node-hero-progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.node-hero-stars {
    display: flex;
    gap: 10px;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
}
.node-hero-stars span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.node-hero-stars .fa-star,
.node-hero-stars .fa-regular,
.node-hero-stars .fa-star-half-stroke {
    font-size: 0.95rem;
}

/* ---- Quiz header card (play & results) ---- */
.quiz-header-card {
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    overflow: hidden;
}
.quiz-header-card .border-end-dark {
    border-right: 1px solid rgba(255,255,255,0.15) !important;
}
.quiz-header-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 0;
}
.quiz-header-desc {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.75);
}
.quiz-header-stats p {
    font-size: 0.85rem;
    margin: 0.25rem 0;
}
.quiz-header-stats p:first-child {
    font-weight: 700;
}

/* Results layout: options left, explanation right */
.result-options-col {
    flex: 1 1 60%;
    min-width: 0;
}
.result-explanation-col {
    flex: 0 0 35%;
    padding-left: 1rem;
    margin-left: 1rem;
    border-left: 1px solid #ccc;
}
.result-explanation {
    font-size: 0.875rem;
    color: #333;
    margin: 0;
}
@media (max-width: 767px) {
    .quiz-header-card .border-end-dark {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    }
    .result-explanation-col {
        flex: 1 1 100%;
        padding-left: 0;
        margin-left: 0;
        border-left: none;
        border-top: 1px solid #ccc;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }
}

/* ---- Quiz group cards ---- */
.quiz-group-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quiz-group-card .card-header { padding: 0.75rem 1rem; }

/* ---- Difficulty tier quiz tiles ---- */
.quiz-tile {
    border-radius: 0.5rem;
    border: 2px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    background: #fff;
}

.quiz-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quiz-tile.completed { border-color: var(--color-success); }

/* Quiz tile header bar */
.quiz-tile-header {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: #333;
    border-radius: 0.5rem 0.5rem 0 0;
}

.quiz-tile-header.tier-bronze-bg { background: var(--color-tier-bronze); color: #fff; }
.quiz-tile-header.tier-silver-bg { background: #888; color: #fff; }
.quiz-tile-header.tier-gold-bg { background: #B8860B; color: #fff; }
.quiz-tile-header.tier-diamond-bg { background: #1a6b7a; color: var(--color-tier-diamond); }

.tier-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tier-bronze .tier-label { color: var(--color-tier-bronze); }
.tier-silver .tier-label { color: var(--color-tier-silver); text-shadow: 0 0 1px rgba(0,0,0,0.3); }
.tier-gold .tier-label { color: var(--color-tier-gold); text-shadow: 0 0 1px rgba(0,0,0,0.2); }
.tier-diamond .tier-label {
    color: var(--color-tier-diamond);
    animation: sparkle 1.5s ease-in-out infinite alternate;
}

@keyframes sparkle {
    0% { text-shadow: 0 0 2px rgba(185,242,255,0.3); }
    100% { text-shadow: 0 0 8px rgba(185,242,255,0.8), 0 0 16px rgba(185,242,255,0.3); }
}

/* ---- Quiz detail cards (leaf node page) ---- */
.quiz-group-container {
    background: rgba(211, 211, 211, 0.5);
    padding: 1rem;
    border-radius: 8px;
}

.quiz-group-heading {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-primary);
}

/* Tier-colored stars */
.tier-star-bronze { color: #CD7F32; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.tier-star-silver { color: #C0C0C0; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.tier-star-gold { color: #FFD700; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }

/* Half-star variants (partial tier completion) */
.tier-star-bronze.fa-star-half-stroke { color: #CD7F32; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.tier-star-silver.fa-star-half-stroke { color: #C0C0C0; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.tier-star-gold.fa-star-half-stroke { color: #FFD700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.tier-star-diamond,
.tier-star-diamond.fa-star-half-stroke {
    color: #B9F2FF;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn-wine {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-wine:hover {
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
}

.btn-outline-wine {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

.btn-outline-wine:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: 600;
}

.btn-accent:hover {
    background-color: #c49518;
    border-color: #c49518;
    color: var(--color-primary);
}

/* =========================================================================
   Homepage
   ========================================================================= */
.page-home { background: #FAF8F5; }
.page-home::before { display: none; }.home-section { padding: 56px 32px; }/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
    padding: 1rem 0;
    text-align: center;
    background: var(--color-primary);
    color: #F5E6C8;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer p { margin: 0; }
.site-footer a {
    color: #F5E6C8;
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover {
    color: var(--color-accent);
}

/* =========================================================================
   Auth pages (login/register)
   ========================================================================= */

/* Wine background on auth pages */
.page-auth {
    background: url('https://wineprofile.s3.eu-north-1.amazonaws.com/live/media/home/hero.webp') center center / cover no-repeat fixed;
}

.page-auth::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(20,15,10,0.45) 0%,
        rgba(20,15,10,0.7) 100%
    );
    z-index: -1;
}

.page-auth .content-container {
    background: transparent !important;
    box-shadow: none !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ====================================
   AUTH PAGE V2
==================================== */

.auth-card {
    max-width: 440px;
    margin: 4rem auto 2rem;
    padding: 2.5rem 2.25rem;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.auth-sub {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

.auth-tabs {
    display: flex;
    border-bottom: 1px solid #e8e0d8;
    margin-bottom: 1.75rem;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 0.85rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}

.auth-tab:hover {
    color: var(--color-primary);
}

.auth-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-accent);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid #d8d0c6;
    border-radius: 6px;
    background: #fafafa;
    transition: all 0.15s;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.15);
}

.auth-hint {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.3rem;
}

.auth-error {
    font-size: 0.8rem;
    color: #b03030;
    margin-top: 0.3rem;
}

.auth-error-banner {
    padding: 0.6rem 0.85rem;
    background: rgba(176, 48, 48, 0.08);
    border: 1px solid rgba(176, 48, 48, 0.2);
    border-radius: 6px;
    color: #b03030;
    font-size: 0.85rem;
}

.auth-remember,
.auth-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

.auth-remember input,
.auth-privacy input {
    margin-top: 0.2rem;
}

.auth-privacy a {
    color: var(--color-primary);
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 0.25rem;
    background: var(--color-primary);
    color: #ffffff;
}

.auth-submit:hover {
    background: #5a0408;
}

.auth-submit--primary {
    background: var(--color-accent);
    color: #1a1a1a;
}

.auth-submit--primary:hover {
    background: #c99a2c;
}

.auth-footer-link {
    text-align: center;
    margin-top: 0.5rem;
}

.auth-footer-link a {
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
}

/* Google OAuth button + divider (spec google-auth.md §9.1) */
.auth-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0 0 0.85rem;
    background: #ffffff;
    color: #1f1f1f;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid #dadce0;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.auth-google-btn:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.auth-google-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    color: #999;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}


.auth-footer-link a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

@media (max-width: 500px) {
    .auth-card {
        margin: 2rem 1rem;
        padding: 2rem 1.5rem;
    }
    .auth-title {
        font-size: 1.75rem;
    }
}.dashboard-profile-card {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}/* Wine-themed progress bar */
.wine-progress {
    height: 28px;
    border-radius: 6px;
    background: #E0D5CC;
}

.wine-progress .progress-bar {
    background: var(--color-accent);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: width 0.3s ease-out;
}

/* Leaderboard table */
.leaderboard-table tr {
    transition: background 0.15s;
}

.leaderboard-table tr:hover {
    background: #FAF6F1;
}

.current-user-row {
    border-left: 3px solid var(--color-accent) !important;
    background: #FFF8E7 !important;
}

.rank-cell {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
}

/* =========================================================================
   Quiz play / results
   ========================================================================= */

/* Quiz header */
.quiz-header {
    max-width: 700px;
}

.quiz-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quiz-tier-badge {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

.quiz-count {
    color: #8C8279;
    font-size: 0.9rem;
}

/* Question cards */
.question-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    max-width: 700px;
    overflow: visible;
}

.question-text {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    /* Pin to body sans-serif so the numeral reads the same regardless
       of parent heading. Without this, .question-number inside <h6>
       inherits Playfair Display (from the heading defaults rule) and
       renders visibly narrower than the same numeral inside the play
       page's <h5 class="question-text"> wrapper. */
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Quiz option buttons (A/B/C/D) */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #D5CFC8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 200ms ease;
    background: #fff;
}

.quiz-option:hover {
    background: #FAF6F1;
    border-color: var(--color-accent);
}

.quiz-option input[type="radio"] {
    display: none;
}

.quiz-option input[type="radio"]:checked ~ .option-letter {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.quiz-option input[type="radio"]:checked ~ .option-text {
    font-weight: 600;
}

.quiz-option:has(input:checked) {
    border-color: var(--color-accent);
    border-width: 2px;
    background: #FFF8E7;
}

.option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #D5CFC8;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 200ms ease;
    color: #666;
}

.option-text {
    flex: 1;
    font-size: 0.95rem;
    transition: font-weight 200ms ease;
}

/* Submit button */
.quiz-submit-btn {
    max-width: 700px;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Results styles */
.result-correct { border-left: 4px solid var(--color-success); }
.result-incorrect { border-left: 4px solid var(--color-error); }

.results-points-earned {
    font-size: 1.25rem;
    color: var(--color-tier-gold);
    font-weight: 600;
    margin-top: 0.5rem;
}

.results-level-up {
    display: inline-block;
    background: rgba(218, 165, 32, 0.15);
    color: var(--color-tier-gold);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(218, 165, 32, 0.3);
}

.result-option {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid #D5CFC8;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: #fff;
}

.result-option-correct {
    background: #E8F5E9;
    border-color: var(--color-success);
    border-width: 2px;
}

.result-option-wrong {
    background: #FFEBEE;
    border-color: var(--color-error);
    border-width: 2px;
}

.option-letter-correct {
    background: var(--color-success) !important;
    color: #fff !important;
    border-color: var(--color-success) !important;
}

.option-letter-wrong {
    background: var(--color-error) !important;
    color: #fff !important;
    border-color: var(--color-error) !important;
}

.result-explanation {
    font-size: 0.9rem;
    color: #8C8279;
    font-style: italic;
    padding: 0.5rem 0.75rem;
    background: #FAF6F1;
    border-radius: 6px;
}

/* Score display */
.score-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a0001 100%);
    color: #fff;
    border: none;
    border-radius: 0.75rem;
}

.score-card .display-4 {
    font-family: var(--font-mono);
    font-weight: 700;
}

/* =========================================================================
   Leaderboard (full page)
   ========================================================================= */
.leaderboard-full thead th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    padding: 0.75rem 0.5rem;
}

.leaderboard-full tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.leaderboard-alt {
    background: #FAF6F1 !important;
}

.rank-gold { color: #B8860B !important; }
.rank-silver { color: #888 !important; }
.rank-bronze { color: var(--color-tier-bronze) !important; }

.rank-gold i { color: #FFD700; }
.rank-silver i { color: #C0C0C0; }
.rank-bronze i { color: var(--color-tier-bronze); }

.fw-500 { font-weight: 500; }/* =========================================================================
   Clubs hub
   ========================================================================= */
.club-hero-card {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    color: #F5E6C8;
    margin-bottom: 1.5rem;
}

.club-hero-name {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    color: #F5E6C8;
    text-decoration: none;
}

.club-hero-name:hover {
    color: var(--color-accent);
}

.club-hero-stats {
    display: flex;
    gap: 1.5rem;
    margin: 0.75rem 0 1rem;
}

.club-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.club-hero-stat-label {
    font-size: var(--fs-small);
    color: rgba(245, 230, 200, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.club-hero-stat-value {
    font-size: var(--fs-section);
    font-weight: 500;
    color: var(--color-accent);
    font-family: var(--font-mono);
}

.club-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.club-cta-card {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    color: #F5E6C8;
}

.club-cta-card h5 {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    color: #F5E6C8;
    margin-bottom: 0.5rem;
}

.club-cta-card p {
    font-size: var(--fs-secondary);
    color: rgba(245, 230, 200, 0.7);
    margin-bottom: 1rem;
}

@media (max-width: 576px) {
    .club-cta-grid {
        grid-template-columns: 1fr;
    }
    .club-hero-stats {
        gap: 1rem;
    }
}

/* =========================================================================
   Dashboard progress strip
   Slim, light replacement for .dashboard-hero on the dashboard page only.
   .dashboard-hero (below) is still used by profile / club / public-profile /
   join-club templates — do not consolidate.
   ========================================================================= */

.dashboard-progress {
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: 22px 28px;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.dashboard-progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 1rem;
}

.dashboard-progress-level,
.dashboard-progress-next-level {
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px */
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
}

.dashboard-progress-next-level {
    opacity: 0.5;
    text-align: right;
}

.dashboard-progress-bar {
    height: 10px;
    background: rgba(68, 3, 4, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.dashboard-progress-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.dashboard-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
    color: var(--color-primary);
    gap: 1rem;
}

.dashboard-progress-stats-pts {
    opacity: 0.7;
}

.dashboard-progress-stats-remaining {
    opacity: 0.9;
    font-weight: 600;
}

/* Club mode — pale variant of the club's primary color */
body.club-mode .dashboard-progress {
    background: color-mix(in srgb, var(--club-primary) 10%, white);
    border-color: var(--club-primary);
    color: var(--club-primary);
}

body.club-mode .dashboard-progress-level,
body.club-mode .dashboard-progress-next-level,
body.club-mode .dashboard-progress-stats {
    color: var(--club-primary);
}

body.club-mode .dashboard-progress-bar {
    background: color-mix(in srgb, var(--club-primary) 18%, white);
}

body.club-mode .dashboard-progress-bar-fill {
    background: var(--club-primary);
}

/* Mobile */
@media (max-width: 576px) {
    .dashboard-progress {
        padding: 16px 18px;
        border-radius: 10px;
    }
    .dashboard-progress-header {
        margin-bottom: 10px;
    }
    .dashboard-progress-level,
    .dashboard-progress-next-level {
        font-size: 1.5rem; /* 24px */
    }
    .dashboard-progress-bar {
        height: 8px;
        margin-bottom: 8px;
    }
    .dashboard-progress-stats {
        font-size: 0.8125rem;
    }
}

/* =========================================================================
   Profile hero — user profile (shared/profile_page.html)
   Identity row (avatar + name + rank + showcase) plus a progress row
   (level labels + bar + stats; own-surface only). Same DNA as
   .dashboard-progress.
   ========================================================================= */
.profile-hero {
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: 22px 28px;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Identity row */
.profile-hero-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.profile-hero-avatar {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--color-accent);
}

.profile-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-hero-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 1.75rem;
}

.profile-hero-name-rank {
    flex: 1;
    min-width: 0;
}

.profile-hero-name {
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px */
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 4px;
    color: var(--color-primary);
}

.profile-hero-rank {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--color-primary);
    opacity: 0.6;
    text-transform: uppercase;
}

.profile-hero-showcase {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Size the hexes down inside this hero (scoped — does not affect other usages). */
.profile-hero-showcase .badge-showcase-hex,
.profile-hero-showcase .hero-showcase-hex,
.profile-hero-showcase .achievement-hex,
.profile-hero-showcase .hex {
    width: 48px;
    height: 48px;
}

/* Progress row — mirrors .dashboard-progress structure */
.profile-hero-progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 1rem;
}

.profile-hero-progress-level,
.profile-hero-progress-next-level {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
}

.profile-hero-progress-next-level {
    opacity: 0.5;
    text-align: right;
}

.profile-hero-progress-bar {
    height: 10px;
    background: rgba(68, 3, 4, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.profile-hero-progress-bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.profile-hero-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.875rem;
    color: var(--color-primary);
    gap: 1rem;
}

.profile-hero-progress-stats-pts {
    opacity: 0.7;
}

.profile-hero-progress-stats-remaining {
    opacity: 0.9;
    font-weight: 600;
}

/* Club mode — pale variant of the club's primary color */
body.club-mode .profile-hero {
    background: color-mix(in srgb, var(--club-primary) 10%, white);
    border-color: var(--club-primary);
    color: var(--club-primary);
}

body.club-mode .profile-hero-name,
body.club-mode .profile-hero-rank,
body.club-mode .profile-hero-progress-level,
body.club-mode .profile-hero-progress-next-level,
body.club-mode .profile-hero-progress-stats {
    color: var(--club-primary);
}

body.club-mode .profile-hero-avatar {
    border-color: var(--club-primary);
}

body.club-mode .profile-hero-progress-bar {
    background: color-mix(in srgb, var(--club-primary) 18%, white);
}

body.club-mode .profile-hero-progress-bar-fill {
    background: var(--club-primary);
}

/* Mobile — stack everything */
@media (max-width: 576px) {
    .profile-hero {
        padding: 16px 18px;
        border-radius: 10px;
    }
    .profile-hero-identity {
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 18px;
    }
    .profile-hero-avatar {
        width: 60px;
        height: 60px;
    }
    .profile-hero-name {
        font-size: 1.5rem;
    }
    .profile-hero-rank {
        font-size: 0.75rem;
    }
    /* Showcase moves to its own full-width row on mobile */
    .profile-hero-showcase {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
    .profile-hero-showcase .badge-showcase-hex,
    .profile-hero-showcase .hero-showcase-hex,
    .profile-hero-showcase .achievement-hex,
    .profile-hero-showcase .hex {
        width: 40px;
        height: 40px;
    }
    .profile-hero-progress-header {
        margin-bottom: 10px;
    }
    .profile-hero-progress-level,
    .profile-hero-progress-next-level {
        font-size: 1.5rem;
    }
    .profile-hero-progress-bar {
        height: 8px;
        margin-bottom: 8px;
    }
    .profile-hero-progress-stats {
        font-size: 0.8125rem;
    }
}

/* =========================================================================
   Dashboard (new)
   ========================================================================= */
.dashboard-hero {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    color: #F5E6C8;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-hero-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dashboard-hero-avatar-col {
    flex-shrink: 0;
}

.dashboard-hero-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-hero-right-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.dashboard-hero-stat-row {
    display: flex;
    gap: 1.5rem;
}

.dashboard-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
    object-fit: cover;
    flex-shrink: 0;
}

/* Hero avatar frame — wraps an <img>.dashboard-hero-avatar so
   .rarity-border-* can be applied to the frame (works for
   legendary's gradient trick which needs a non-image host). */
.hero-avatar-frame {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.hero-avatar-frame .dashboard-hero-avatar {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    display: block;
}

/* Legendary hero avatar: the rainbow-gradient border trick needs
   an opaque padding-box, but our region avatar WebPs have
   transparent corners. Fall back to a solid purple border so the
   hero card background shows through the transparent art cleanly. */
.hero-avatar-frame.rarity-border-legendary {
    border: 5px solid #9370DB !important;
    background-image: none !important;
    background: transparent !important;
    box-shadow:
        inset 0 0 0 2px rgba(255, 215, 0, 0.4),
        0 0 0 1px rgba(255, 105, 180, 0.5) !important;
}

/* Showcase badges reuse the hex frame from .achievement-card--badge.
   Wrapper gives the card its size in the flex row. */
.badge-showcase-hex {
    width: 72px;
    flex-shrink: 0;
}

/* Hero pills: one combined "125,100 pts | Level 40" on desktop, two
   split pills (points / level) stacked on mobile. All three pills are
   always in the DOM; CSS just toggles visibility. */
.pill-points,
.pill-level {
    display: none !important;
}

/* Profile hero badge showcase — the desktop copy sits inside the
   right column under the pills; the mobile copy is a sibling of the
   right column, so flex-wrap on .dashboard-hero drops it to its own
   full-width row below the avatar+info+pills top row. */
.profile-badge-showcase--mobile {
    display: none;
}

@media (max-width: 767px) {
    .pill-combined { display: none !important; }
    .pill-points,
    .pill-level { display: inline-flex !important; }

    .profile-badge-showcase--desktop { display: none; }

    .profile-badge-showcase--mobile {
        display: flex;
        flex-basis: 100%;
        max-width: none;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.75rem;
        justify-content: flex-start;
    }
    .profile-badge-showcase--mobile .badge-showcase-hex,
    .profile-badge-showcase--mobile .badge-showcase-hex--empty {
        width: 40px;
        height: 40px;
    }
}

/* Empty showcase slot — hex outline placeholder. When the viewer owns
   the profile/club the slot is a link to the achievements collection;
   for non-owners it renders as a static decorative hex. */
.badge-showcase-hex--empty {
    position: relative;
    width: 72px;
    height: 72px;
    display: block;
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.2s;
}
a.badge-showcase-hex--empty:hover {
    opacity: 0.8;
}
.badge-showcase-hex--empty::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--color-border-secondary);
    z-index: 1;
}
.badge-showcase-hex--empty::after {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: var(--color-background);
    z-index: 2;
}
.badge-showcase-hex--empty .badge-empty-slot {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    font-weight: 300;
}

.dashboard-hero-name {
    font-family: var(--font-heading);
    font-size: var(--fs-section);
    color: #F5E6C8;
    margin: 0;
}

.dashboard-hero-title {
    color: var(--color-accent);
    font-size: var(--fs-secondary);
}

/* XP progress bar below the name/title (width-controlled per breakpoint). */
.hero-xp-bar {
    margin-top: 6px;
    width: 180px;
}

/* Override .rank-label's default grey (tuned for light pages) so it
   stays legible on the wine-primary hero background. */
.dashboard-hero .rank-label {
    color: rgba(245, 230, 200, 0.7);
}

/* .dashboard-stats-bar / .dashboard-stat-item / .dashboard-stat-value /
 * .dashboard-stat-label / .dashboard-stat-sep are profile-only as of
 * the May 2026 dashboard stats-bar removal. The dashboard hero no longer
 * carries this widget; profile.html re-uses the class set as a layout
 * primitive for its rank/quizzes/maps stats row. Keep the rules. */
.dashboard-stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-background-secondary, #f8f8f8);
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    padding: 10px 20px;
    margin-bottom: 1.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.dashboard-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    gap: 2px;
    flex-shrink: 0;
}

.dashboard-stat-value {
    font-size: var(--fs-section);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.dashboard-stat-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.dashboard-stat-sep {
    width: 1px;
    height: 28px;
    background: var(--color-border-tertiary, #e0e0e0);
    flex-shrink: 0;
}

/* First-time club welcome banner — shown once on club_page member view */
.club-welcome-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.12) 0%, rgba(218, 165, 32, 0.05) 100%);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.club-welcome-banner__icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.club-welcome-banner__body {
    flex: 1;
}
.club-welcome-banner__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}
.club-welcome-banner__desc {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}
.club-welcome-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .club-welcome-banner {
        flex-direction: column;
    }
    .club-welcome-banner__icon {
        font-size: 1.5rem;
    }
}@media (max-width: 800px) {
    .continue-grid {
        grid-template-columns: 1fr;
    }
}
.continue-card {
    display: flex;
    align-items: center;
    background: var(--color-primary);
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.continue-card:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #fff;
}
.continue-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 0;
}
/* Dark gradient over the image for label/name legibility */
.continue-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}
.continue-card__content {
    position: relative;
    z-index: 1;
    flex: 1;
}
.continue-card__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.continue-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}
body.club-mode .continue-card__name {
    color: #fff;
}
.continue-card__arrow {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.dashboard-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.dashboard-col {
    min-width: 0;
}

.dashboard-three-col .knowledge-map-grid {
    grid-template-columns: repeat(2, 1fr);
}

.knowledge-map-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 1rem 0;
}

.grape-card {
    border-radius: var(--border-radius-md, 8px);
    padding: 8px 8px 6px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    text-decoration: none;
    display: block;
    transition: transform 0.15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.grape-card,
.grape-card:hover,
.grape-card:visited,
.grape-card:active {
    color: var(--color-text-primary);
    text-decoration: none;
}

.grape-card:hover {
    transform: translateY(-1px);
}

.grape-card:focus {
    outline: none;
}

.grape-card:focus-visible {
    outline: 2px solid var(--color-accent);
}

.grape-card-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.grape-card-content {
    position: relative;
    z-index: 1;
}

.grape-card-name {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

.grape-card-subtitle {
    font-size: 9px;
    margin-top: -2px;
    margin-bottom: 4px;
    color: var(--color-text-secondary);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Rich card variant — split layout ===
   Image on top (no overlay), content footer in translucent burgundy
   below. Tier pill top-left, completion ✓ top-right. Used on the
   dashboard recently-played grid and the /progress/ page cards. */

.grape-card--rich {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    padding: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.grape-card--rich:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Archived (non-clickable) variant — used for past daily quiz cards.
   Past attempts can't be re-played, so the card is a record, not a link.
   Subtle muting + cursor default + hover suppression communicate that. */
.grape-card--archived {
    cursor: default;
    opacity: 0.85;
}
.grape-card--archived:hover {
    transform: none;
    box-shadow: none;
}

/* Image fills the entire card; the footer floats over its bottom as
   a translucent overlay so the bottom of the image bleeds through
   slightly, unifying the card vertically. */
.grape-card--rich .grape-card-image {
    flex: 1 1 auto;
    min-height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #2A0102;
    position: relative;
}

/* Completion indicator — appears top-right on cards where the user has
   reached full Diamond completion (all four tier stars 'full'). Mirrors
   the identity pill in the top-left. Sparse, celebratory signal. */
.grape-card--rich .grape-card-completion {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-tier-diamond);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Identity pill — appears top-left on every card type. The pill text
   is the card's subject (grape name / region name / country name /
   map geography). See template for rule documentation. */
.grape-card--rich .grape-card-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 11px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    background: var(--color-burgundy-pale);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.grape-card--rich .grape-card-footer {
    flex: 0 0 auto;
    background: var(--color-burgundy-pale-soft);
    border-top: 1px solid var(--color-burgundy-pale);
    color: var(--color-primary);
    padding: 8px 11px 9px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Club mode — translucent navy overlay matching the card's pattern.
   Personal mode uses pale-burgundy chrome; club mode keeps the legacy
   dark-navy treatment as a scope-shift signal. Restores parchment text
   and drops the pale-burgundy border so the navy reads cleanly. */
body.club-mode .grape-card--rich .grape-card-footer {
    background: rgba(15, 26, 46, 0.85);
    border-top: none;
    color: #F5E6C8;
}

body.club-mode .grape-card--rich .grape-card-pill {
    background: rgba(15, 26, 46, 0.85);
    border: none;
    color: #F5E6C8;
}

body.club-mode .grape-card--rich .grape-card-footer-last-action {
    color: rgba(245, 230, 200, 0.9);
}

body.club-mode .grape-card--rich .grape-card-footer-timestamp {
    color: rgba(245, 230, 200, 0.65);
}

body.club-mode .progress-card .progress-card-completion-text {
    color: rgba(245, 230, 200, 0.75);
}

.grape-card--rich .grape-card-footer-last-action {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 14px;
}

.grape-card--rich .grape-card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.grape-card--rich .grape-card-footer-stars .fa-star,
.grape-card--rich .grape-card-footer-stars .fa-regular,
.grape-card--rich .grape-card-footer-stars .fa-star-half-stroke {
    font-size: 12px;
}

.grape-card--rich .grape-card-footer-timestamp {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(68, 3, 4, 0.65);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Reset legacy state-class background tints on v2 cards so the burgundy
   footer reads cleanly. The .grape-card-bg dim rules don't apply because
   v2 cards use .grape-card-image, not .grape-card-bg. */
.grape-card--rich.state-0,
.grape-card--rich.state-bronze,
.grape-card--rich.state-silver,
.grape-card--rich.state-gold,
.grape-card--rich.state-diamond {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    box-shadow: none;
}

/* === /progress/ page card variant ===
   Smaller, denser version of grape-card--rich. No last-action line, no
   timestamp — single completion-text line under stars. Used on the
   three /progress/ tabs (Grapes, Regions, Maps). */

.progress-card {
    min-height: 170px;
}

.progress-card .grape-card-image {
    min-height: 120px;
}

.progress-card .grape-card-pill {
    font-size: 12px;
    padding: 3px 9px;
}

/* Engaged-state accent — subtle gold halo around cards where the user
   has any progress (at least one quiz / map difficulty completed).
   Reward: untouched cards remain fully alive, just without the accent.
   No dimming, no opacity changes elsewhere. */
.progress-card.progress-card--engaged {
    box-shadow: 0 0 0 1.5px var(--color-accent);
}
.progress-card.progress-card--engaged:hover {
    box-shadow: 0 0 0 1.5px var(--color-accent), 0 6px 18px rgba(0, 0, 0, 0.18);
}

.progress-card .grape-card-completion {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.progress-card .grape-card-footer {
    padding: 6px 10px 7px;
    gap: 1px;
}

.progress-card .progress-card-row {
    display: flex;
    align-items: center;
}

.progress-card .progress-card-completion-text {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(68, 3, 4, 0.75);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.progress-card .grape-card-footer-stars .fa-star,
.progress-card .grape-card-footer-stars .fa-regular,
.progress-card .grape-card-footer-stars .fa-star-half-stroke {
    font-size: 11px;
}

/* === /progress/ Regions tab — country sections === */

.progress-country-section {
    margin-bottom: 1rem;
}

.progress-country-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-background-secondary, #f8f8f8);
    border: 1px solid var(--color-border-tertiary, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.progress-country-header:hover {
    background: #f0ede8;
}

.progress-country-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.progress-country-aggregate {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.progress-country-chevron {
    color: var(--color-text-secondary);
    transition: transform 0.2s;
    font-size: 14px;
}

.progress-country-header.is-expanded .progress-country-chevron,
.progress-country-header[aria-expanded="true"] .progress-country-chevron {
    transform: rotate(180deg);
}

.progress-country-cards {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* === /progress/ — brand-styled tab navigation ===
   Replaces Bootstrap's default gray-borders/blue-active look with
   editorial wine aesthetic. Scoped via .progress-tabs so other
   .nav-tabs usage in the codebase isn't affected. */

.progress-tabs.nav-tabs {
    border-bottom: 1px solid var(--color-border-tertiary, #e0e0e0);
    gap: 0.25rem;
}

.progress-tabs .nav-link {
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.6rem 1.1rem;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.progress-tabs .nav-link:hover {
    color: var(--color-accent);
    background: transparent;
    border: none;
}

.progress-tabs .nav-link.active {
    color: var(--color-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-accent);
}

/* === Dashboard section header — flex row holding the page-title +
   right-aligned CTA link. Used for the "Recently played" header on
   the dashboard. */
.dashboard-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dashboard-section-header .page-title {
    margin-bottom: 0;
}

/* === Dashboard missions widget ===
   Forward-pulling "do this next" cards. Sits between the hero and the
   recently-played grid. 4 cards desktop, 2 tablet, 1 mobile. */
.dashboard-missions {
    margin-bottom: 1.5rem;
}
.dashboard-missions .dashboard-section-header {
    margin-bottom: 0.75rem;
}
.dashboard-missions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    /* default align-items: stretch — uniform card heights across the row. */
}
@media (max-width: 991px) {
    .dashboard-missions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    .dashboard-missions-grid { grid-template-columns: 1fr; }
}

.mission-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-background-secondary, #F2EDE5);
    border: 1px solid var(--color-border-tertiary, rgba(0,0,0,0.08));
    border-radius: 8px;
    transition: border-color 0.15s, transform 0.15s;
    /* Reset Bootstrap defaults — applies to both <a> (available) and
     * <form> (completed) variants of this class. */
    color: inherit;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
}

/* Variant icon — top-left corner, sits above the header. Emoji renders in
   OS-native colors; the variant's accent shows through the top border and
   pill, not the icon itself. */
.mission-card__icon {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 1.4rem;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.mission-card:hover,
.mission-card:focus {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}
.mission-card__header {
    /* Header is now a passthrough block — title spans full card body width;
       XP is absolute top-right (see .mission-card__xp). Kept as a container
       so the completed-state CTA layout still works. */
    padding-left: 32px;   /* reserve space for absolute icon top-left */
    padding-right: 56px;  /* reserve space for absolute XP pill top-right */
}
.mission-card__title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    margin: 0;
}
.mission-card__xp {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}
.mission-card__description {
    font-size: var(--fs-secondary);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin: 0;
    padding-left: 32px;  /* align with header text past the variant icon */
}
.mission-card__cta {
    align-self: flex-start;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.mission-card__cta:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

/* === Variant accents — four pale tinted treatments by mission category.
   Top border + pill chrome only; card body bg + structure stay shared.
   Completed-state gold border-color override + claim pulse swallow these
   accents during "ready to claim" — intentional emphasis. */
.mission-card--grape  { border-top: 3px solid #E8B4B8; }
.mission-card--grape  .mission-card__xp {
    background: #F5DBDD; border: 1px solid #E8B4B8;
    color: #6B1011; padding: 2px 8px; border-radius: 10px;
}

.mission-card--region { border-top: 3px solid #A8B89A; }
.mission-card--region .mission-card__xp {
    background: #D8DECF; border: 1px solid #A8B89A;
    color: #3E4A36; padding: 2px 8px; border-radius: 10px;
}

.mission-card--map    { border-top: 3px solid #A8B5C5; }
.mission-card--map    .mission-card__xp {
    background: #D5DCE5; border: 1px solid #A8B5C5;
    color: #2C3E50; padding: 2px 8px; border-radius: 10px;
}

.mission-card--daily  { border-top: 3px solid #E8D08F; }
.mission-card--daily  .mission-card__xp {
    background: #F2E5BC; border: 1px solid #E8D08F;
    color: #7A5C00; padding: 2px 8px; border-radius: 10px;
}

/* === Completed mission card ===
   Visually distinct "ready to claim" state. The card is a <form> wrapping
   a <button> so the whole surface is the claim trigger. Button styling is
   reset to make the button look identical to the <a> available card. */
.mission-card--completed {
    background: rgba(218, 165, 32, 0.08);  /* color-accent #DAA520 at 8% */
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent) inset;
    padding: 0;
}
.mission-card--completed:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--color-accent) inset, 0 4px 12px rgba(0,0,0,0.08);
}
.mission-card__button {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.mission-card__button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.mission-card__xp--ready {
    font-size: 0.875rem;
}
.mission-card__cta--claim {
    font-weight: 700;
}

/* === Empty state — when all eligible missions are claimed for today ==== */
.dashboard-missions--empty {
    margin-bottom: 1.5rem;
}
.dashboard-missions__empty-text {
    margin: 0;
    padding: 12px 0;
    font-size: var(--fs-secondary);
    color: var(--color-text-secondary);
    font-style: italic;
    animation: mission-empty-fade-in 0.3s ease-out;
}
@keyframes mission-empty-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* === Claim animation ===
   Triggered by AJAX claim flow in static/js/missions.js. Sequence:
     1. Pulse + glow ring (400ms)
     2. "+XP" text floats up from card center (1000ms)
     3. Card fades to 0.3 opacity (400ms, starts at +200ms)
     4. JS collapses max-height + margins to remove from layout (~320ms)
   Total ~1300ms before the card is gone. */
.mission-card--claiming {
    animation: mission-claim-pulse 0.4s ease-out;
    position: relative;
    overflow: visible;
    z-index: 2;
}
@keyframes mission-claim-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 1px var(--color-accent) inset, 0 0 0 0   rgba(218, 165, 32, 0); }
    50%  { transform: scale(1.04); box-shadow: 0 0 0 1px var(--color-accent) inset, 0 0 0 10px rgba(218, 165, 32, 0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 1px var(--color-accent) inset, 0 0 0 0   rgba(218, 165, 32, 0); }
}

.mission-xp-float {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    animation: mission-xp-float-up 1s ease-out forwards;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}
@keyframes mission-xp-float-up {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    60%  { opacity: 1; transform: translate(-50%, -90%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

.mission-card--claimed-fade {
    transition: opacity 0.4s ease-out;
    opacity: 0.3;
}

/* === Dashboard CTA — gold-accented arrow link ===
   Editorial link treatment for "See full progress →" in the
   recently-played section header. */
.dashboard-cta-link {
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto;
    padding: 0 8px;
    transition: color 0.15s;
    white-space: nowrap;
}

.dashboard-cta-link:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}

.grape-card-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    z-index: 2;
    background: var(--color-tier-diamond);
    color: #1a6080;
}

.grape-tiers {
    display: flex;
    gap: 3px;
    align-items: center;
}

/* Star sizes by context */
.grape-tiers .fa-star,
.grape-tiers .fa-regular,
.grape-tiers .fa-star-half-stroke { font-size: 15px; }

.quiz-group-stars .fa-star,
.quiz-group-stars .fa-regular,
.quiz-group-stars .fa-star-half-stroke { font-size: 15px; }

.map-diff-stars .fa-star,
.map-diff-stars .fa-regular,
.map-diff-stars .fa-star-half-stroke { font-size: 15px; }

.grape-tiers .tier-star-empty {
    color: #999;
}
.node-hero-stars .tier-star-empty {
    color: #999;
}
.quiz-group-stars .tier-star-empty {
    color: #999;
}

/* State 0 — untouched — still beautiful */
.grape-card.state-0 {
    background: var(--color-background-primary);
    border: 1.5px solid #444;
}
.grape-card.state-0 .grape-card-bg { opacity: 0.22; }
.grape-card.state-0 .grape-card-name { color: var(--color-text-primary); }

/* State 1 — bronze — warmer */
.grape-card.state-bronze {
    background: var(--color-background-primary);
    border: 1.5px solid #444;
}
.grape-card.state-bronze .grape-card-bg { opacity: 0.28; }

/* State 2 — silver — crisper */
.grape-card.state-silver {
    background: var(--color-background-primary);
    border: 1.5px solid #444;
}
.grape-card.state-silver .grape-card-bg { opacity: 0.32; }

/* State 3 — gold — clearly prestigious */
.grape-card.state-gold {
    background: rgba(255,215,0,0.06);
    border: 1.5px solid #444;
}
.grape-card.state-gold .grape-card-bg { opacity: 0.36; }
.grape-card.state-gold .grape-card-name { font-weight: 600; }

/* State 4 — diamond — legendary */
.grape-card.state-diamond {
    background: linear-gradient(135deg, rgba(185,242,255,0.14), rgba(218,165,32,0.10));
    border: 1.5px solid #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(185,242,255,0.3);
}
.grape-card.state-diamond .grape-card-bg { opacity: 1; }
.grape-card.state-diamond .grape-card-name {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    padding: 3px 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}
.dashboard-coming-soon {
    border: 1.5px dashed #ddd;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-secondary);
    margin-top: 1rem;
}

@media (min-width: 577px) and (max-width: 900px) {
    .knowledge-map-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .knowledge-map-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-three-col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .dashboard-three-col {
        grid-template-columns: 1fr;
    }
    .dashboard-hero {
        padding: 10px 12px;
    }
    .hero-avatar-frame {
        width: 48px;
        height: 48px;
    }
    .dashboard-hero-left { gap: 8px; }
    .dashboard-hero-name { font-size: 1rem; }
    .hero-xp-bar { width: 110px; }
    .dashboard-hero-right-col { gap: 0.25rem; }
    .dashboard-stats-bar {
        padding: 8px 12px;
    }
    .dashboard-stat-item {
        padding: 0 10px;
    }
}

/* =========================================================================
   Club page tabs & components
   ========================================================================= */
.club-hero-large {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    color: #F5E6C8;
    flex-wrap: wrap;
    gap: 1rem;
}

.club-identity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.club-hero-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
    color: rgba(245, 230, 200, 0.65);
    margin-top: 4px;
    flex-wrap: wrap;
}

.club-hero-meta-sep {
    opacity: 0.4;
}

.club-description {
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 0.5px solid var(--color-border-tertiary, #e0e0e0);
}

.club-tabs {
    display: flex;
    gap: 0;
    border-bottom: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    margin-bottom: 1.5rem;
}

.club-tab {
    padding: 10px 20px;
    font-size: var(--fs-secondary);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.club-tab:hover {
    color: var(--color-text-primary);
}

.club-tab.active {
    color: var(--color-text-primary);
    border-bottom-color: var(--color-accent);
    font-weight: 500;
}

.top-members-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.top-member-card {
    background: var(--color-background-secondary, #f8f8f8);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
}

.top-member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid var(--color-accent);
    object-fit: cover;
}.manage-card.danger {
    border-color: rgba(224, 76, 76, 0.3);
    background: rgba(224, 76, 76, 0.03);
}@media (max-width: 768px) {
    .top-members-grid,
    .manage-cards-grid {
        grid-template-columns: 1fr;
    }
    .club-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
    .club-hero-large {
        padding: 1.25rem 1.5rem;
    }
}

/* =========================================================================
   Daily quiz banner & streak
   ========================================================================= */

/* Result banner rendered after completing a quiz — pale gold-tint
   neutral card (kept distinct from the burgundy-pale-soft background
   used by .result-incorrect / wrong-answer highlighting). Used by
   both the daily quiz and grape/region quiz results pages. The
   gold-tint is mode-independent; club mode only retargets text and
   border to --club-primary. */
.quiz-results-bar {
    background: color-mix(in srgb, var(--color-accent) 8%, white);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    color: var(--color-primary);
}
body.club-mode .quiz-results-bar {
    border-color: var(--club-primary);
    color: var(--club-primary);
}

/* Single horizontal strip inside .quiz-results-bar:
   [dots] · [score] · [message] · [+Xp] */
.quiz-results-bar {
    padding: 14px 20px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.quiz-results-bar__dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.quiz-results-bar__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.quiz-results-bar__dot--correct { background: #2D6A2E; }
.quiz-results-bar__dot--wrong   { background: #901718; }
.quiz-results-bar__score {
    font-family: var(--font-mono);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    flex-shrink: 0;
}
.quiz-results-bar__message {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--color-primary);
    flex-shrink: 0;
}
.quiz-results-bar__points {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.quiz-results-bar__xp {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-body);
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Embedded actions row inside .quiz-results-bar (grape/region quiz only —
   daily quiz doesn't render this child). flex-basis: 100% forces it to a
   new line via the parent's flex-wrap so it sits as Row 2 below the main
   result info. Not used on .daily-quiz-result-banner. */
.quiz-results-bar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-basis: 100%;
    align-items: center;
}
body.club-mode .quiz-results-bar__score,
body.club-mode .quiz-results-bar__message,
body.club-mode .quiz-results-bar__xp {
    color: var(--club-primary);
}

@media (max-width: 576px) {
    /* Mobile layout via flex-wrap + order:
       Row 1: dots · score · +Xp (push-right)
       Row 2: motivational message (full width, left-aligned)
       Row 3: actions — Continue (primary, full width) followed by
              Retake + Choose new quiz wrapping into a 2-up row. */
    .quiz-results-bar {
        padding: 14px 16px;
        gap: 10px;
    }
    .quiz-results-bar__dots    { order: 1; }
    .quiz-results-bar__score   { order: 2; }
    .quiz-results-bar__points  { order: 3; margin-left: auto; }
    .quiz-results-bar__message { order: 4; flex-basis: 100%; }
    .quiz-results-bar__actions { order: 5; }
    .quiz-results-bar__actions .btn { flex: 1 1 auto; }
    .quiz-results-bar__actions-primary { flex: 1 1 100%; }
}.daily-quiz-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-right: 4px;
    vertical-align: middle;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}.quiz-content-wrapper {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.daily-attempts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.daily-attempt-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    align-items: center;
    gap: 12px;
    background: #f5f3f0;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    padding: 10px 14px;
}

.daily-attempt-date {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.daily-attempt-theme {
    font-size: var(--fs-secondary);
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-attempt-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.daily-attempt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-correct { background: #2D6A2E; }
.dot-wrong { background: #901718; }
.dot-empty { background: var(--color-border-secondary, #bbb); }

.daily-attempt-score {
    font-size: var(--fs-secondary);
    font-weight: 500;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .daily-attempt-row {
        grid-template-columns: 50px 1fr auto auto;
        gap: 8px;
    }
}

.profile-streak-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-secondary);
    color: var(--color-text-secondary);
    margin-top: 10px;
    justify-content: center;
}

.profile-streak-best {
    color: var(--color-text-tertiary, #999);
    font-size: var(--fs-small);
}

/* =========================================================================
   Profile knowledge summary
   ========================================================================= */
.profile-knowledge-summary {
    display: flex;
    align-items: center;
    background: #f5f3f0;
    border-radius: 8px;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    padding: 16px 24px;
    margin-top: 1rem;
}

.profile-ks-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 4px;
}

.profile-ks-value {
    font-size: var(--fs-section);
    font-weight: 500;
    color: var(--color-text-primary);
    font-family: var(--font-mono);
}

.profile-ks-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.profile-ks-sep {
    width: 1px;
    height: 32px;
    background: var(--color-border-tertiary, #e0e0e0);
    flex-shrink: 0;
}

.profile-ks-split {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.profile-ks-split-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.profile-ks-sublabel {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

.profile-ks-total {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    align-self: center;
}.club-icon-opt.selected {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(218, 165, 32, 0.08);
}.club-color-opt.selected {
    border-color: var(--color-accent);
}@media (max-width: 576px) {
    .club-icon-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .club-color-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   Unified card system (.twp-card)
   ========================================================================= */
.twp-card {
    border-radius: 10px;
    overflow: hidden;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    background: #f5f3f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    text-decoration: none;
    display: block;
    color: var(--color-text-primary);
}

.twp-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-secondary, #bbb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    color: var(--color-text-primary);
}

.twp-card:visited, .twp-card:active, .twp-card:focus {
    text-decoration: none;
    outline: none;
    color: var(--color-text-primary);
}

.twp-card-img {
    height: 160px;
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
}

.twp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.twp-card:hover .twp-card-img img {
    transform: scale(1.04);
}

.twp-card-body {
    padding: 10px 12px 12px;
}

.twp-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-family: var(--font-heading);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twp-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 18px;
}

.twp-card-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.twp-card-sub.complete {
    color: var(--color-accent);
    font-weight: 500;
}

.twp-card-tiers {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    align-items: center;
}

.twp-card-tiers .fa-star,
.twp-card-tiers .fa-regular,
.twp-card-tiers .fa-star-half-stroke {
    font-size: 15px;
}

.twp-card-tiers .tier-star-empty {
    color: #999;
}

.twp-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.twp-card.locked {
    pointer-events: none;
    cursor: default;
}

.twp-card.locked .twp-card-img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.twp-card.locked .twp-card-body,
.twp-card.locked .twp-card-header {
    opacity: 0.85;
}

/* Compact lock indicator that lives in the star-position slot of the
   card footer (replaces the star icon for locked tiers). Same row,
   same vertical envelope as active cards. */
.twp-card-lock-slot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.twp-card-lock-slot .fa-lock {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.twp-card-lock-slot a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}

.twp-card-lock-slot a:hover {
    text-decoration: underline;
}

/* Allow the sign-up link inside a locked card to receive clicks even though
   the card itself has pointer-events: none. */
.twp-card.locked .twp-card-lock-slot,
.twp-card.locked .twp-card-lock-slot a {
    pointer-events: auto;
}

.twp-card-header {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.twp-card-header.header-bronze { background: var(--color-tier-bronze); color: white; }
.twp-card-header.header-silver { background: #A0A0A0; color: white; }
.twp-card-header.header-gold { background: var(--color-tier-gold); color: #5a4a00; }
.twp-card-header.header-diamond { background: var(--color-tier-diamond); color: #1a6080; }

.twp-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .twp-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .twp-card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Map game selection
   ========================================================================= */
.map-difficulty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.map-easy { background: #4CAF50; }
.map-medium { background: #FF9800; }
.map-hard { background: #F44336; }

.map-section-title {
    font-size: 1.3rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #ddd;
    margin-bottom: 1rem;
}

.map-section-title.map-easy { border-bottom-color: #4CAF50; color: #2D6A2E; }
.map-section-title.map-medium { border-bottom-color: #FF9800; color: #E65100; }
.map-section-title.map-hard { border-bottom-color: #F44336; color: #C62828; }

.map-difficulty-section {
    background: rgba(211, 211, 211, 0.5);
    padding: 1rem;
    border-radius: 8px;
}

.map-star-easy { color: #CD7F32; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.map-star-medium { color: #C0C0C0; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
.map-star-hard { color: #FFD700; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }

/* =========================================================================
   Feedback Report Flag
   ========================================================================= */
.report-flag-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #8C8279;
    font-size: 16px;
    line-height: 1;
    position: relative;
    transition: color 0.2s;
}
.report-flag-btn:hover { color: #DAA520; }
.report-flag-btn.reported { color: #DAA520; pointer-events: none; }

/* Question card needs relative positioning for the flag */
.question-card .card-body {
    position: relative;
}
.question-card .report-flag-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* Map game header flag */
.map-header-flag {
    color: rgba(68, 3, 4, 0.5);
    font-size: 18px;
}
.map-header-flag:hover {
    color: #DAA520;
}
.map-header-flag.reported {
    color: #DAA520;
}
body.club-mode .map-header-flag {
    color: color-mix(in srgb, var(--club-primary) 50%, transparent);
}
body.club-mode .map-header-flag:hover,
body.club-mode .map-header-flag.reported {
    color: var(--club-accent, #DAA520);
}

/* Report modal ------------------------------------------------------------ */
.report-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(20, 15, 12, 0.55);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.report-modal-backdrop.show { display: flex; }

.report-modal {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid #D5CFC8;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    padding: 24px 24px 20px;
    position: relative;
    font-family: var(--font-body);
    max-height: 90vh;
    overflow-y: auto;
}

.report-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
}
.report-modal__close:hover { color: #000; }

.report-modal__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin: 0 0 16px;
    color: var(--color-primary);
}

.report-modal__section {
    margin-bottom: 16px;
}

.report-modal__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.report-modal__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.report-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #D5CFC8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
}
.report-option:hover {
    border-color: var(--color-accent);
    background: #FAF6F1;
}
.report-option input[type="radio"] {
    margin: 0;
    accent-color: var(--color-primary);
}
.report-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #FAF6F1;
}

.report-modal__textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border: 1px solid #D5CFC8;
    border-radius: 6px;
    resize: vertical;
}
.report-modal__textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.report-modal__counter {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: right;
    font-family: var(--font-mono);
}

.report-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.report-modal__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .report-modal__options { grid-template-columns: 1fr; }
}

/* Toast -------------------------------------------------------------------- */
.report-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1080;
    min-width: 220px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transform: translateX(calc(100% + 40px));
    transition: transform 0.3s ease;
}
.report-toast--visible { transform: translateX(0); }
.report-toast--success { background: #2D6A2E; }
.report-toast--error { background: #B33A3A; }

@media (max-width: 480px) {
    .report-toast { top: 16px; right: 16px; left: 16px; max-width: none; }
}
/* =========================================================================
   Node progress strip — slim pale card on grape/region node detail pages,
   matching the dashboard XP strip DNA. Row 1: gold-fill progress bar +
   right-aligned X/Y label. Row 2: 4 tier stars with "Bronze · X/3" labels.
   ========================================================================= */
.node-progress-card {
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 12px 18px;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.club-mode .node-progress-card {
    background: color-mix(in srgb, var(--club-primary) 10%, white);
    border-color: var(--club-primary);
    color: var(--club-primary);
}

.node-progress-card__bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.node-progress-card__bar {
    flex: 1;
    height: 8px;
    background: rgba(68, 3, 4, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
body.club-mode .node-progress-card__bar {
    background: color-mix(in srgb, var(--club-primary) 18%, white);
}
.node-progress-card__bar-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.node-progress-card__bar-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}
body.club-mode .node-progress-card__bar-label {
    color: var(--club-primary);
}

.node-progress-card__stars {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.node-progress-card__star {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}
/* Match the existing tier-star treatment used by .quiz-group-stars on
   the same page: 15px size, base tier-star-* text-shadow inherited,
   #999 for empty. */
.node-progress-card__star .fa-star,
.node-progress-card__star .fa-regular,
.node-progress-card__star .fa-star-half-stroke {
    font-size: 15px;
}
.node-progress-card__star .tier-star-empty {
    color: #999;
}
.node-progress-card__star-label {
    color: var(--color-primary);
    font-weight: 500;
}
body.club-mode .node-progress-card__star-label {
    color: var(--club-primary);
}

@media (max-width: 576px) {
    .node-progress-card { padding: 12px 14px; }
    /* Stars wrap to 2×2 grid on mobile */
    .node-progress-card__stars {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }
    .node-progress-card__star { font-size: 0.8125rem; }
}

/* =========================================================================
   Map game hero — pale, same DNA as .profile-hero / .dashboard-progress.
   No avatar, no XP bar — slim header above the map.
   ========================================================================= */
.map-game-hero {
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 1rem;
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.map-game-hero h4 {
    color: var(--color-primary);
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px */
    font-weight: 500;
    line-height: 1.1;
}

.map-game-hero .map-header__meta-text {
    color: var(--color-primary);
    opacity: 0.7;
    font-size: 0.875rem;
}

.map-game-hero .map-header__meta-best {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Trophy icon: dual-tone — gold fill with 1px burgundy stroke
   so the gold reads against the pale bg. Same pattern applies in
   club mode (stroke rebases to --club-primary). */
.map-game-hero .map-header__meta-best i {
    color: var(--color-accent);
    -webkit-text-stroke: 1px var(--color-primary);
}

/* Back button — outline burgundy on pale */
.map-game-hero .map-header__back {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: transparent;
    font-weight: 500;
}
.map-game-hero .map-header__back:hover {
    color: var(--color-accent);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

@media (max-width: 576px) {
    .map-game-hero {
        padding: 14px 16px;
        border-radius: 10px;
    }

    /* Outer flex row becomes a 2-row × 2-col grid on mobile.
       Row 1: title (left) + back button (right).
       Row 2: meta pills (left) + flag (right).
       !important is needed to override Bootstrap's .d-flex on the row. */
    .map-game-hero .map-header-row {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title back"
            "meta  flag";
        row-gap: 8px;
        column-gap: 0.5rem;
        align-items: center;
    }

    /* Flatten both wrappers so their children become direct grid items.
       !important is needed to override Bootstrap's .d-flex on .map-header__actions. */
    .map-game-hero .map-header__info,
    .map-game-hero .map-header__actions {
        display: contents !important;
    }

    /* Row 1 left: title */
    .map-game-hero .map-header__info > h4 {
        grid-area: title;
        font-size: 1.5rem; /* 24px */
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* Row 1 right: back button */
    .map-game-hero .map-header__back {
        grid-area: back;
    }

    /* Row 2 left: meta pills */
    .map-game-hero .map-header__meta {
        grid-area: meta;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.6rem;
        font-size: 0.8rem;
        min-width: 0;
    }
    .map-game-hero .map-header__meta > .ms-2 {
        margin-left: 0 !important;
    }

    /* Row 2 right: flag */
    .map-game-hero .map-header-flag {
        grid-area: flag;
        justify-self: end;
    }

    /* Pill's stale 6px bottom margin from .content-hero-badge */
    .map-game-hero .content-hero-badge {
        margin-bottom: 0;
    }
}

/* Map game instruction/score panel — pale card overlay over the top
   of the map. Same DNA as .profile-hero / recently-played card. */
.map-game-instruction {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    border: 2px solid var(--color-primary);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    color: var(--color-primary);
    padding: 14px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    animation: slideIn 0.4s ease-out, pulseStripe 2s ease-in-out infinite;
}

@keyframes slideIn {
    from { top: -40px; opacity: 0; }
    to { top: 0; opacity: 1; }
}

@keyframes pulseStripe {
    0%, 100% { border-left-color: var(--color-accent); }
    50% { border-left-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .map-game-instruction { animation: none; }
}

.map-game-instruction .instruction-target {
    font-size: 1.15em;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.map-game-instruction .instruction-pointer {
    display: inline-block;
    font-size: 1.5em;
    margin-right: 0.4em;
    vertical-align: middle;
    line-height: 1;
    animation: instruction-pointer-bounce 1.2s ease-in-out infinite;
}

@keyframes instruction-pointer-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .map-game-instruction .instruction-pointer { animation: none; }
}

.map-game-instruction.expanded {
    padding: 16px 18px;
}

.map-game-instruction .instruction {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-primary);
    white-space: nowrap;
}

.map-game-instruction.expanded .instruction {
    font-size: 1.25rem;
    font-weight: 600;
}

.map-game-instruction .score-tracker {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    /* Separators (/ and |) read at 40% burgundy; numerals override below */
    color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    white-space: nowrap;
}

.map-game-instruction .score-tracker .score-num {
    color: var(--color-primary);
    font-weight: 700;
}

.map-game-instruction .complete-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.map-game-instruction .complete-extras {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--color-primary);
}

/* Outline-burgundy treatment for in-panel outline buttons (Change
   difficulty / Change map). JS emits .btn-outline-light; override
   scoped to this panel so it reads as outline burgundy on the pale bg. */
.map-game-instruction .btn-outline-light {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}
.map-game-instruction .btn-outline-light:hover {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

@media (max-width: 576px) {
    .map-game-instruction {
        padding: 12px 14px;
        border-radius: 10px;
    }
    .map-game-instruction .instruction { font-size: 0.95rem; }
    .map-game-instruction.expanded .instruction { font-size: 1.1rem; }
    .map-game-instruction .score-tracker { font-size: 0.85rem; }

    /* Complete state stacks: title row, score row, buttons row */
    .map-game-instruction.expanded {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .map-game-instruction.expanded .instruction,
    .map-game-instruction.expanded .score-tracker {
        text-align: center;
    }
    .map-game-instruction .complete-buttons {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
    .map-game-instruction .complete-buttons .btn {
        flex: 1 1 auto;
    }
    .map-game-instruction .complete-extras {
        width: 100%;
        justify-content: center;
    }
}

/* Club-mode palette for map game */
body.club-mode .map-game-hero {
    background: color-mix(in srgb, var(--club-primary) 10%, white);
    border-color: var(--club-primary);
    color: var(--club-primary);
}
body.club-mode .map-game-hero h4,
body.club-mode .map-game-hero .map-header__meta-text {
    color: var(--club-primary);
}
body.club-mode .map-game-hero .map-header__meta-best {
    color: var(--club-primary);
}
body.club-mode .map-game-hero .map-header__meta-best i {
    color: var(--color-accent);
    -webkit-text-stroke: 1px var(--club-primary);
}
body.club-mode .map-game-hero .map-header__back {
    color: var(--club-primary);
    border-color: var(--club-primary);
}
body.club-mode .map-game-hero .map-header__back:hover {
    color: var(--club-accent, #E8C547);
    background: var(--club-primary);
    border-color: var(--club-primary);
}

body.club-mode .map-game-instruction {
    background: color-mix(in srgb, var(--club-primary) 10%, white);
    /* Gold left stripe is mode-independent; recolor only the other three sides */
    border-top-color: var(--club-primary);
    border-right-color: var(--club-primary);
    border-bottom-color: var(--club-primary);
    color: var(--club-primary);
}
body.club-mode .map-game-instruction .instruction {
    color: var(--club-primary);
}
body.club-mode .map-game-instruction .score-tracker {
    color: color-mix(in srgb, var(--club-primary) 40%, transparent);
}
body.club-mode .map-game-instruction .score-tracker .score-num {
    color: var(--club-primary);
    font-weight: 700;
}
body.club-mode .map-game-instruction .complete-extras {
    color: var(--club-primary);
}
body.club-mode #map {
    border-color: var(--club-primary);
}

/* Outline-burgundy buttons inside the instruction panel — re-color
   to use --club-primary in club mode. */
body.club-mode .map-game-instruction .btn-outline-light {
    color: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    background-color: transparent !important;
}
body.club-mode .map-game-instruction .btn-outline-light:hover {
    color: #fff !important;
    background-color: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
}
body.club-mode .map-game-instruction .btn-wine {
    background-color: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    color: #fff !important;
}
body.club-mode .map-game-instruction .btn-wine:hover {
    background-color: color-mix(in srgb, var(--club-primary) 80%, white) !important;
    border-color: color-mix(in srgb, var(--club-primary) 80%, white) !important;
}

/* =========================================================================
   Responsive (general)
   ========================================================================= */


@media (max-width: 767px) {
    .content-container {
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 8px;
    }

    .home-h1 { font-size: 1.75rem; }
    .home-features-grid { grid-template-columns: 1fr; }
    .home-how-grid { grid-template-columns: repeat(2, 1fr); }
    .home-bands-grid { grid-template-columns: repeat(2, 1fr); }
    .home-hero-stats { gap: 20px; }
    .home-hero { padding: 40px 20px 48px; }
    .home-why-grid { grid-template-columns: 1fr !important; }
    .home-map-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---- Mobile (≤480px) ---- */
@media (max-width: 480px) {
    .content-container {
        padding: 0.75rem;
        margin-top: 0.5rem;
    }

    /* Typography */
    :root {
        --fs-page-title: 1.35rem;
        --fs-section: 1.1rem;
    }

    /* Homepage */
    .home-h1 { font-size: 1.5rem; }
    .home-hero-stats { gap: 12px; flex-wrap: wrap; justify-content: center; }
    .home-stat-val { font-size: 1.35rem; }
    .home-how-grid { grid-template-columns: 1fr; }
    .home-bands-grid { grid-template-columns: 1fr; }
    .home-grape-preview-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Dashboard stats bar */
    .dashboard-stats-bar {
        gap: 8px;
        padding: 8px 10px;
    }
    .dashboard-stat-item { padding: 0 6px; }
    .dashboard-stat-value { font-size: var(--fs-secondary); }
    .dashboard-stat-sep { height: 20px; }

    /* Dashboard hero */
    .dashboard-hero {
        padding: 12px 14px;
    }
    .hero-avatar-frame { width: 56px; height: 56px; }
    .dashboard-hero-left { gap: 10px; }
    .hero-xp-bar { width: 140px; }
    .dashboard-hero .header-pill-stats {
        padding: 3px 8px;
        font-size: 0.75rem;
    }

    /* Card grids */
    .twp-card-grid { grid-template-columns: 1fr; }

    /* Knowledge map */
    .knowledge-map-grid { grid-template-columns: repeat(2, 1fr); }

    /* Club hero */
    .club-hero-large {
        padding: 1rem 1.25rem;
        flex-direction: column;
    }

    /* Leaderboard */
    .leaderboard-table th,
    .leaderboard-table td { padding: 6px 8px; font-size: var(--fs-small); }
    .leaderboard-table .player-column { min-width: 100px; }
    .leaderboard-table .points-column { width: 65px; }
    .leaderboard-table .level-column { width: 45px; }

    /* Quiz */
    .quiz-option { padding: 10px 12px; }
    .question-card { margin-bottom: 0.5rem; }

    /* Content hero */
    .content-hero { height: 150px; }
    .content-hero-title { font-size: 1.25rem; }

    /* Welcome hero — match content-hero responsive treatment */
    .welcome-hero { height: 150px; }
    .welcome-hero-title { font-size: 1.25rem; }

    /* Nav touch targets */
    .nav-links li a { padding: 0.75rem 1.25rem; }

    /* Breadcrumbs */
    .breadcrumb { font-size: var(--fs-small); flex-wrap: nowrap; overflow-x: auto; }
    .breadcrumb-item { white-space: nowrap; }

    /* Achievement grids */

    /* Club icon picker */
    .club-icon-grid { grid-template-columns: repeat(6, 1fr); }

    /* Homepage sections */
    .home-hero-section { padding: 40px 16px 48px !important; }
    .page-home section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------------------------------------------------------------------------
   Club / Team mode
   --------------------------------------------------------------------------- */

.mode-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid var(--color-accent);
    border-radius: 20px;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mode-toggle-btn:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

.mode-toggle-btn--active {
    background: var(--color-accent);
    color: var(--color-primary);
}

.playing-for-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
}

/* ========================================
   CLUB MODE THEME
   Dark navy replaces burgundy
   throughout in club mode
======================================== */

body.club-mode {
    --club-primary: #0f1a2e;
    --club-primary-light: #1a2942;
    --club-primary-dark: #060d1a;
    --club-accent: #E8C547;
    --club-accent-bright: #f5d76e;
    --color-primary: #0f1a2e;
}

/* === HEADER BAR === */
body.club-mode .header-bar {
    background: var(--club-primary);
    border-bottom: 2px solid var(--club-accent);
}

body.club-mode .header-brand-text {
    color: var(--club-accent);
}

body.club-mode .header-pill {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: #ffffff;
}

body.club-mode .header-pill-stats {
    background: var(--club-primary-light);
    border: 1px solid var(--club-accent);
    color: var(--club-accent);
}

body.club-mode .header-points {
    color: var(--club-accent);
}

body.club-mode .mode-toggle-btn {
    background: var(--club-accent);
    color: var(--club-primary);
    border-color: var(--club-accent);
}

body.club-mode .mode-toggle-btn:hover {
    background: var(--club-accent-bright);
}

body.club-mode .mode-toggle-btn--active {
    background: var(--club-accent);
    color: var(--club-primary);
}

/* === NAV BAR === */
body.club-mode .nav-bar-wine {
    background: var(--club-primary);
    border-bottom: 1px solid rgba(232, 197, 71, 0.2);
}

body.club-mode .nav-links a {
    color: rgba(255,255,255,0.85);
}

body.club-mode .nav-links a:hover,
body.club-mode .nav-links a.nav-active {
    color: var(--club-accent);
}

body.club-mode .daily-quiz-indicator {
    background: var(--club-accent);
}

/* === HEROES === */
body.club-mode .dashboard-hero {
    background: var(--club-primary);
    border-radius: var(--border-radius-md, 10px);
    padding: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

body.club-mode .dashboard-hero-name {
    color: #ffffff;
}

body.club-mode .dashboard-hero-title {
    color: var(--club-accent);
}

body.club-mode .rank-label {
    background: rgba(255,255,255,0.1);
    color: var(--club-accent);
    border: 1px solid rgba(232, 197, 71, 0.3);
}

body.club-mode .dashboard-hero .rank-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: inherit;
}

body.club-mode .level-progress-bar-bg {
    background: rgba(255,255,255,0.15);
}

body.club-mode .level-progress-bar-fill {
    background: var(--club-accent);
}

body.club-mode .avatar-placeholder {
    background: var(--club-primary-light);
    color: var(--club-accent);
    border: 2px solid var(--club-accent);
}

/* === BUTTONS === */
body.club-mode .btn-wine {
    background: var(--club-primary);
    border-color: var(--club-primary);
    color: var(--club-accent);
}

body.club-mode .btn-wine:hover {
    background: var(--club-primary-light);
    border-color: var(--club-accent);
    color: var(--club-accent-bright);
}

body.club-mode .btn-outline-wine {
    border-color: var(--club-primary);
    color: var(--club-primary);
}

body.club-mode .btn-outline-wine:hover {
    background: var(--club-primary);
    color: var(--club-accent);
}

/* === SECTION HEADERS === */
body.club-mode .achievement-category-header {
    border-bottom: 2px solid var(--club-primary);
    color: var(--club-primary);
}

/* === STATS CARDS === */
body.club-mode .club-stat-card,
body.club-mode .dashboard-stat-item {
    border-color: var(--club-primary-light);
}

body.club-mode .club-stat-value,
body.club-mode .dashboard-stat-value {
    color: var(--club-primary);
}

/* === FOOTER === */
body.club-mode .site-footer a:hover {
    color: var(--club-accent);
}

/* === LINKS === */
body.club-mode a {
    color: var(--club-primary);
}

body.club-mode a:hover {
    color: var(--club-primary-light);
}

/* ---------------------------------------------------------------------------
   Club page — hero + members
   --------------------------------------------------------------------------- */


.btn-remove-member {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem;
}

.btn-remove-member:hover {
    color: var(--color-error, #dc3545);
}

/* ---- Members card grid — avatar fills card, text overlay ---- */
.club-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-width: 100%;
}
.club-member-card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    max-width: 160px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 3px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    background: var(--color-primary);
    justify-self: center;
}
.club-member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: inherit;
}
.club-member-card__avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.club-member-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
}
.club-member-card__avatar .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--color-accent);
    background: var(--color-primary);
    border: none;
    border-radius: 0;
}
.club-member-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
    color: #fff;
}
.club-member-card__name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    margin-bottom: 0.1rem;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.club-member-card__rank {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    margin-bottom: 0.15rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.club-member-card__points {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--color-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.club-member-card__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
}
.club-member-card__remove .btn-remove-member {
    opacity: 0;
    transition: opacity 0.15s;
    background: rgba(220, 53, 69, 0.85);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.club-member-card:hover .club-member-card__remove .btn-remove-member {
    opacity: 1;
}
.club-member-card__remove .btn-remove-member:hover {
    background: #dc3545;
}
@media (max-width: 900px) {
    .club-members-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .club-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.club-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.club-stat-card {
    background: var(--twp-card-bg, var(--color-background));
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md, 10px);
    padding: 1rem 0.75rem;
    text-align: center;
}

.club-stat-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1.2;
}

.club-stat-label {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

@media (max-width: 600px) {
    .club-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.club-settings-details {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border-secondary);
    padding-top: 1.5rem;
}

.club-settings-summary {
    cursor: pointer;
    font-size: var(--fs-secondary);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
    list-style: none;
    user-select: none;
}

.club-settings-summary::-webkit-details-marker {
    display: none;
}

.club-settings-summary::before {
    content: '▸';
    margin-right: 0.5rem;
    display: inline-block;
    transition: transform 0.2s;
}

details[open] .club-settings-summary::before {
    transform: rotate(90deg);
}

.club-invite-section {
    margin-bottom: 1.5rem;
}

.club-invite-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.club-tab-count {
    font-size: 0.65rem;
    margin-left: 0.3rem;
    opacity: 0.7;
}

/* ====================================
   LANDING PAGE V2
==================================== */

.home-hero-v2 {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 0;
}

.home-hero-v2__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.home-hero-v2__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(20,15,10,0.2) 0%,
        rgba(20,15,10,0.5) 50%,
        rgba(20,15,10,0.85) 100%
    );
    z-index: 2;
}

.home-hero-v2__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 6rem 0 4rem;
    color: #fff;
}

.home-hero-v2__eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E8C547;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.home-hero-v2__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em;
}

.home-hero-v2__sub {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 0 2.5rem;
    color: rgba(255,255,255,0.9);
}

.home-hero-v2__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-hero-v2__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
    border: 1.5px solid transparent;
}

.home-hero-v2__btn--primary {
    background: #E8C547;
    color: #1a1a1a;
    border-color: #E8C547;
}

.home-hero-v2__btn--primary:hover {
    background: #f5d76e;
    border-color: #f5d76e;
    color: #1a1a1a;
}

.home-hero-v2__btn--secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

.home-hero-v2__btn--secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
}

.home-hero-v2__mobile-cue {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}

/* Daily quiz visitor card */
.home-daily-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    background: #FAF8F5;
    border: 1px solid #e8e0d8;
    border-radius: 12px;
    text-align: center;
}

.home-daily-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.home-daily-card__heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: #1a1a1a;
}

.home-daily-card__body {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin: 0 auto 1.5rem;
    max-width: 480px;
}

/* Sections */
.home-section {
    padding: 5rem 0;
    background: #fff;
}

.home-section--alt {
    background: #FAF8F5;
}

.home-section__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

.home-section__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.home-section__sub {
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    max-width: 640px;
    margin: 0 auto 3rem;
}

/* Journey */
.home-journey {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.home-journey__step {
    text-align: center;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e8e0d8;
    min-width: 140px;
}

.home-journey__step--final {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.home-journey__step--final .home-journey__band,
.home-journey__step--final .home-journey__desc {
    color: #E8C547;
}

.home-journey__band {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.home-journey__desc {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.home-journey__arrow {
    font-size: 1.5rem;
    color: #ccc;
}

/* Stats bar */
.home-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e0d8;
}

.home-stat {
    text-align: center;
}

.home-stat__value {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.home-stat__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

/* Final CTA */
.home-cta-v2 {
    padding: 5rem 0;
    background: var(--color-primary);
    text-align: center;
    color: #fff;
}

.home-cta-v2__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin: 0 0 1rem;
    color: #fff;
}

.home-cta-v2__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    margin: 0 0 2rem;
}

/* Mobile */
@media (max-width: 600px) {
    .home-hero-v2 {
        /* Shorter phones (iPhone SE is 568px tall) would otherwise see
           the hero fill the entire viewport with no "scroll for more"
           cue. 60vh leaves room for the next section to peek. */
        min-height: 60vh;
    }
    .home-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-journey {
        flex-direction: column;
    }
    .home-journey__arrow {
        transform: rotate(90deg);
    }
}

/* Activity feed achievement row — shows the real achievement visual
   (hex badge, black title card, or avatar square) at 48px next to
   the achievement name, description and timestamp. */
.feed-achievement-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(218,165,32,0.08);
    border: 0.5px solid rgba(218,165,32,0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.feed-achievement-row__visual {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}
.feed-achievement-row__visual .achievement-card {
    width: 48px;
    height: 48px;
}
.feed-achievement-row__body {
    flex: 1;
    min-width: 0;
}
.feed-achievement-row__name {
    font-family: var(--font-heading);
    font-size: var(--fs-secondary);
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.3;
}
.feed-achievement-row__desc {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}
.feed-achievement-row__time {
    font-size: 10px;
    color: var(--color-text-secondary);
    opacity: 0.6;
    margin-top: 4px;
}
.feed-achievement-row--nested {
    margin-bottom: 0;
    padding: 8px 12px;
}

/* ── /about/ page ──────────────────────────────────────────────── */
.about-hero {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    margin: 0 0 2rem;
}

.about-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(20,15,10,0.15) 0%,
        rgba(20,15,10,0.45) 60%,
        rgba(20,15,10,0.75) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 2rem clamp(1rem, 5vw, 3rem);
}

.about-hero-title {
    font-family: 'Playfair Display', serif;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

@media (max-width: 767px) {
    .about-hero {
        height: 200px;
        margin-bottom: 1.25rem;
    }
    .about-hero-overlay {
        padding: 1.25rem;
    }
}

.about-section-h {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.about-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

@media (max-width: 575px) {
    .about-tier-grid {
        grid-template-columns: 1fr;
    }
}

.about-tier-card {
    border-radius: 10px;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    background: #f5f3f0;
    padding: 14px 16px;
}

.about-tier-card p {
    margin: 0;
    font-size: var(--fs-secondary);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.about-tier-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--color-primary);
}

.about-tier-card--bronze .about-tier-name { color: #a06a3a; }
.about-tier-card--silver .about-tier-name { color: #6c7480; }
.about-tier-card--gold   .about-tier-name { color: #b88a3c; }
.about-tier-card--diamond .about-tier-name { color: #6f8a9c; }

.about-subsection-h {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.85;
}

.about-quiz-groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .about-quiz-groups-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.about-group-card {
    border-radius: 10px;
    border: 0.5px solid var(--color-border-tertiary, #e0e0e0);
    background: #f5f3f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.about-group-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.about-group-card .about-group-name {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    padding: 12px 14px 4px;
    font-size: 1rem;
    line-height: 1.3;
}

.about-group-card .about-group-description {
    font-size: var(--fs-small);
    color: var(--color-text-secondary);
    line-height: 1.5;
    padding: 0 14px 14px;
    margin: 0;
}

.about-group-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
}

.about-group-item {
    border-left: 3px solid var(--color-accent, #8a1c1c);
    padding: 4px 0 4px 14px;
}

.about-group-item strong {
    display: block;
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: 2px;
}

.about-group-item p {
    margin: 0;
    font-size: var(--fs-secondary);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.about-progression {
    line-height: 1.7;
}

.about-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2rem;
}


/* =========================================================================
   Courses — catalog tile, detail hero, progress bar, lesson rows,
   tier buttons. See specs/DESIGN_BRIEF.md §3 (colors), §5.2 (progress),
   §7.2 (node tiles), §7.3 (quiz cards). All colors reference the CSS
   custom properties on :root — no hardcoded values.
   ========================================================================= */

/* ---- Catalog grid + tile (§7.2 pattern) ---- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.course-tile {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.course-tile:hover,
.course-tile:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    color: inherit;
    text-decoration: none;
}

.course-tile-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-size: 2.5rem;
}

.course-tile-image--has-cover { color: transparent; }

/* Compact variant — used in the dashboard "Your courses" section. */
.course-tile--compact .course-tile-image { height: 110px; font-size: 1.75rem; }
.course-tile--compact .course-tile-title { font-size: 1rem; }
.course-tile--compact .course-tile-body { padding: 0.75rem 0.85rem 0.9rem; gap: 0.4rem; }

/* ========================================================================
   Dashboard course card (spec §11, v0.4) — dedicated component, NOT shared
   with the catalog browse-tile or the Mission card. Footprint matches a
   Recently-played .grape-card--rich (column width via .knowledge-map-grid,
   same cover-image height). One "Course" pill in the top-left corner
   identifies the card type. No status pill — draft courses are excluded
   outright from the dashboard. No summary text.
   ======================================================================== */
.course-dashboard-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    min-height: 200px;
}
.course-dashboard-card:hover,
.course-dashboard-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: inherit;
    text-decoration: none;
}

.course-dashboard-card__image {
    flex: 0 0 auto;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #2A0102;
    /* fallback gradient when a card has no cover_image set */
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position: relative;
}

/* "Course" type pill — same shape, size, and corner slot as the
   .grape-card-pill on Recently-played cards, but with a burgundy fill
   and cream text so the card type reads at a glance even on a busy
   dashboard. */
.course-dashboard-card__pill {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 11px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    background: #440304;
    color: #F5E6C8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-dashboard-card__pill i { font-size: 10px; }

.course-dashboard-card__body {
    flex: 1 1 auto;
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-dashboard-card__title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-dashboard-card__progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(68, 3, 4, 0.12);
    overflow: hidden;
}
.course-dashboard-card__progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.course-dashboard-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    margin-top: auto;
}
/* Suggested (not-enrolled) card has only one footer item — push it to
   the right so the layout still feels balanced. */
.course-dashboard-card__footer--suggested {
    justify-content: flex-end;
}
.course-dashboard-card__count {
    color: var(--color-text-muted, #8C8279);
    font-family: var(--font-mono);
}
.course-dashboard-card__cta {
    color: var(--color-accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ========================================================================
   Catalog course card (spec §9, v0.4) — sibling of .course-dashboard-card.
   Shares the image footprint and "Course" pill treatment; adds summary,
   tier badge, lesson count, prerequisite line, and a state-dependent
   footer (Enrol / progress+Continue / Claim / Completed).
   ======================================================================== */
/* Matches .knowledge-map-grid (Recently-played) at every breakpoint so
   the tile width is identical — narrow portrait cards, ~5 per row on
   desktop. Catalog cards run taller than Recently-played because they
   carry summary/meta/footer rows, but tile width stays in lockstep. */
.course-catalog-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 1rem 0;
}
@media (min-width: 577px) and (max-width: 900px) {
    .course-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
    .course-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

.course-catalog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.course-catalog-card:hover,
.course-catalog-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: inherit;
    text-decoration: none;
}

.course-catalog-card__image {
    flex: 0 0 auto;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-color: #2A0102;
    background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position: relative;
}

/* "Course" type pill — identical treatment to the dashboard card. */
.course-catalog-card__pill {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 11px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.35;
    background: #440304;
    color: #F5E6C8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.course-catalog-card__pill i { font-size: 10px; }

/* Admin-only status pill (DRAFT / ARCHIVED) — sits top-right, mirrors
   the slot the .grape-card-completion checkmark uses on quiz cards. */
.course-catalog-card__admin-pill {
    position: absolute;
    top: 8px;
    right: 8px;
}

.course-catalog-card__body {
    flex: 1 1 auto;
    background: var(--color-burgundy-pale-soft, #FBF0F2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.course-catalog-card__title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Summary clamped to a single line; min-height reserves a blank line so
   cards in a row stay even-height even when one course has no summary. */
.course-catalog-card__summary {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-text-secondary, #4a4a4a);
    min-height: 1.35em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-catalog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--color-text-muted, #8C8279);
}

.course-catalog-card__prereq {
    font-size: 0.78rem;
    color: var(--color-text-muted, #8C8279);
}
.course-catalog-card__prereq em {
    font-style: italic;
    color: var(--color-primary-light);
}

.course-catalog-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.course-catalog-card__progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(68, 3, 4, 0.12);
    overflow: hidden;
}
.course-catalog-card__progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.course-catalog-card__progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}
.course-catalog-card__count {
    color: var(--color-text-muted, #8C8279);
    font-family: var(--font-mono);
}

.course-catalog-card__cta {
    color: var(--color-accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}
.course-catalog-card__completed {
    color: var(--color-success, #2D6A2E);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
}

/* Slim progress bar — used in compact tiles (vs the 28px detail-page bar). */
.course-progress--slim { height: 8px; border-radius: 999px; }
.course-progress--slim .course-progress-fill {
    border-radius: 999px;
    padding: 0;
    box-shadow: none;
}

.course-tile-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.course-tile-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.3;
}

.course-tile-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--color-text-muted, #8C8279);
}

.course-tile-prereq {
    font-size: 0.8rem;
    color: var(--color-text-muted, #8C8279);
}

.course-tile-prereq em {
    font-style: italic;
    color: var(--color-primary-light);
}

.course-tile-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted, #8C8279);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-tile-footer {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Detail hero (brand-tone gradient stand-in for cover art) ---- */
/* Courses reuse .content-hero directly (see node_detail pattern) — no
   height override; the standard 220px / 180px-mobile sizing is reused
   verbatim. */

/* XP figure shown inline next to the tier badge in the hero. JetBrains
   Mono gold per DESIGN_BRIEF §5.4. */
.course-hero-xp {
    font-family: var(--font-mono);
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 400;
}

/* "Builds on: …" line inline under the hero meta row. */
.course-hero-prereq-inline {
    color: rgba(245, 230, 200, 0.75);
    font-size: 0.85rem;
}

.course-hero-prereq-inline a {
    color: var(--color-accent);
    text-decoration: none;
}

.course-hero-prereq-inline a:hover { text-decoration: underline; }

/* ---- Tier badge (course-level tier indicator) ---- */
.course-tier-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid;
    background: rgba(255,255,255,0.06);
}

.course-tier-badge--bronze  { color: var(--color-tier-bronze);  border-color: var(--color-tier-bronze);  }
.course-tier-badge--silver  { color: #b8b8b8;                   border-color: var(--color-tier-silver);  }
.course-tier-badge--gold    { color: var(--color-tier-gold);    border-color: var(--color-tier-gold);    }
.course-tier-badge--diamond {
    color: var(--color-tier-diamond);
    border-color: var(--color-tier-diamond);
    animation: sparkle 1.5s ease-in-out infinite alternate;
}

.course-tier-badge--on-light {
    background: rgba(0,0,0,0.03);
}

/* ---- Status pill (DRAFT / ARCHIVED) — gold-tinted, off-Bootstrap ---- */
.course-status-pill {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(218, 165, 32, 0.15);
    color: var(--color-accent);
    border: 1px solid rgba(218, 165, 32, 0.4);
}

/* ---- Progress bar (§5.2: 28px linear, wine-gradient fill by %).
   Lives inside a .node-progress-card below the hero banner. */
.course-progress {
    height: 28px;
    border-radius: 6px;
    background: rgba(68, 3, 4, 0.12);    /* matches .node-progress-card__bar track */
    overflow: hidden;
    position: relative;
}

.course-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease-out;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.6rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    white-space: nowrap;
}

/* Percentage-banded fill colors (§3.8) */
.course-progress-fill--p0   { background: #901718; }
.course-progress-fill--p25  { background: #E67E22; }
.course-progress-fill--p50  { background: var(--color-accent); }
.course-progress-fill--p75  { background: #8DB33A; }
.course-progress-fill--p99  { background: #4CAF50; }
.course-progress-fill--p100 { background: var(--color-success); }

/* When the fill is too narrow to hold the % text, surface it outside */
.course-progress-label-outside {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    pointer-events: none;
}

/* Course status bar — the secondary/claim action sits inline at the
   right end of the progress row inside .node-progress-card. */
.course-status-bar .node-progress-card__bar-row form { margin: 0; }
.course-status-bar__indicator {
    color: var(--color-accent);
    font-weight: 600;
    font-family: var(--font-heading);
    white-space: nowrap;
}

/* ---- Section sub-divider inside a chapter (when YAML section grouping used) ---- */
.course-section-bar {
    padding: 0.4rem 0.5rem 0.4rem 0;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(68, 3, 4, 0.12);
}

/* ---- Lesson list wrapper sits inside .quiz-group-container ---- */
.course-lesson-list {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ---- Lesson row ---- */
.course-lesson-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.course-lesson-row:last-child { border-bottom: none; }

.course-lesson-row--indent { padding-left: 2rem; }

.course-lesson-indicator {
    flex-shrink: 0;
    width: 1.5em;
    text-align: center;
    color: var(--color-text-muted, #8C8279);
    font-size: 1rem;
}

.course-lesson-indicator--complete { color: var(--color-success); }

.course-lesson-label {
    flex-grow: 1;
    min-width: 0;
}

.course-lesson-label-primary {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.course-lesson-label-secondary {
    font-size: 0.85rem;
    color: var(--color-text-muted, #8C8279);
    margin-left: 0.35rem;
}

.course-lesson-tiers {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---- Tier buttons (derived from tier colors + §7.3 quiz-card states) ---- */
.course-tier-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1.5px solid;
    background: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    line-height: 1.1;
}

.course-tier-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    text-decoration: none;
}

/* Per-tier outline treatment when the tier is currently available */
.course-tier-btn--bronze   { color: var(--color-tier-bronze);  border-color: var(--color-tier-bronze);  }
.course-tier-btn--silver   { color: #6f6f6f;                   border-color: var(--color-tier-silver);  }
.course-tier-btn--gold     { color: #B8860B;                   border-color: var(--color-tier-gold);    }
.course-tier-btn--diamond  { color: #1a6b7a;                   border-color: var(--color-tier-diamond); }

/* Completed state — vineyard green, fills with check */
.course-tier-btn--completed {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}

.course-tier-btn--completed:hover { color: #fff; }

/* Locked state — muted grey, not clickable */
.course-tier-btn--locked {
    background: rgba(0,0,0,0.04);
    color: var(--color-text-muted, #8C8279);
    border-color: rgba(0,0,0,0.12);
    cursor: not-allowed;
}

.course-tier-btn--locked:hover {
    transform: none;
    box-shadow: none;
}

/* Preview mode: pill rather than interactive button */
.course-tier-pill {
    display: inline-block;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.03);
    color: var(--color-text-muted, #8C8279);
}