/* ========================================
   Torrorèndum - Direction 1c "Viral Drop"
   Main Stylesheet
   Source of truth for tokens: docs/design-deliverables/Torrorendum Identity.dc.html (#1c)
   + docs/design-deliverables/Torrorendum Redesign Audit.dc.html (derived tokens)
   ======================================== */

/* CSS Variables - Brand Colors */
:root {
    /* --- Generic action / brand accent (caramel glaçat) ---
       Was Torrons Vicens burgundy (#4E0011-family). Every call site that used
       --color-primary as a GENERIC button/link/action color keeps using this
       same variable name — only the value moved to caramel. Genuinely
       competition-only moments (VS badges, "GUANYADOR" banners, the
       "comparteix el resultat" CTA, live/active-round pills) were repointed
       to --color-competition instead, see below. */
    --color-primary: #E0923F;        /* caramel glaçat — generic CTA/action/link color */
    --color-primary-light: #B96F26;  /* caramel fosc — used for hover/pressed states; darker than
                                         base despite the "light" name, kept for AA contrast against
                                         existing white-text hover call sites (see audit derived token) */
    --color-primary-dark: #B96F26;   /* caramel fosc — AA-contrast text + sticker-button drop-shadow */
    --color-primary-tint: rgba(224, 146, 63, 0.08);
    --color-brand-gold: #EFC26E;     /* or — lighter decorative accent/detail (NOT the same as the
                                         pre-existing --color-gold medal token below, which is unrelated) */

    /* --- Competition-only accent (burdeus) — RESERVED ---
       Never a generic action color. Use only for: VS badges/separators,
       "GUANYADOR" (winner) banners, the "comparteix el resultat" share CTA,
       and live/active-round status pills. */
    --color-competition: #8A2638;
    --color-competition-dark: #6B1D2A;
    --color-competition-tint: rgba(138, 38, 56, 0.08);
    --color-competition-contrast: #FFFAF1;

    --color-white: #FFFFFF;
    --color-card: #FFFAF1;               /* taula/card surface, near-white */
    --color-background: #FBF2E3;         /* crema lluminosa — page/content background */
    --color-surface: #F0DFC2;            /* crema fosca — secondary surface, hover backgrounds */
    --color-desktop-background: #E7E0D0; /* taula — wide-viewport page canvas */

    --color-text: #3A2A1C;               /* cacau */
    --color-text-light: #8A7458;         /* terra suau — secondary text */
    --color-text-light-dark: #6B5A44;    /* terra fosc — AA-contrast secondary text */

    --color-border: #E8D6B4;             /* default card/element border */
    --color-border-dashed: #D8C097;      /* dashed border — sponsorship / reserved-space placeholders */

    --color-placeholder-1: #F1EFEA;      /* photo placeholder diagonal stripe A */
    --color-placeholder-2: #E3E0D6;      /* photo placeholder diagonal stripe B */

    --color-shadow: rgba(58, 42, 28, 0.12);
    --color-shadow-heavy: rgba(58, 42, 28, 0.28);
    --color-shadow-soft: rgba(58, 42, 28, 0.16);
    --color-shadow-faint: rgba(58, 42, 28, 0.05);
    --color-shadow-text: rgba(58, 42, 28, 0.2);
    --color-overlay-light: rgba(255, 255, 255, 0.3);
    --color-overlay-dark: rgba(58, 42, 28, 0.55);

    /* Semantic / status colors (unrelated to the brand palette — unchanged) */
    --color-success: #4CAF50;
    --color-success-bg: rgba(76, 175, 80, 0.1);
    --color-danger: #F44336;
    --color-danger-bg: rgba(244, 67, 54, 0.1);
    --color-warning: #FF9800;
    --color-warning-bg: rgba(255, 152, 0, 0.1);
    --color-info: #2196F3;

    /* Ranking / medal accent colors (podium gold/silver/bronze — distinct from
       --color-brand-gold above; unrelated to the brand palette, unchanged) */
    --color-gold: #FFD700;
    --color-gold-bg: #FFF9E6;
    --color-silver: #C0C0C0;
    --color-bronze: #CD7F32;
    --color-bronze-bg: #FFF5E6;

    /* Neutral grays (skeletons, tracks, muted borders) */
    --color-neutral: #f0f0f0;
    --color-neutral-light: #f5f5f5;
    --color-neutral-dark: #e0e0e0;
    --color-border-muted: #ccc;

    /* Brand / social colors */
    --color-twitter: #1DA1F2;
    --color-facebook: #4267B2;
    --color-whatsapp: #25D366;

    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 25px;
    --spacing-xl: 40px;

    /* Typography */
    --font-family: 'Newsreader', Georgia, serif;                 /* body copy, italic notes/taglines */
    --font-family-display: 'Bricolage Grotesque', sans-serif;    /* headings, UI labels, buttons, nav */
    --font-size-base: 16px;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Border radius */
    --border-radius: 5px;
    --border-radius-lg: 10px;
    --radius-card: 20px;      /* "adhesius arrodonits" — rounded sticker cards */
    --radius-button: 18px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px var(--color-shadow);
    --shadow-md: 0 4px 8px var(--color-shadow);
    --shadow-lg: 0 5px 10px var(--color-shadow-heavy);
    --shadow-sticker: 0 6px 0 var(--color-border);              /* offset "sticker" card shadow */
    --shadow-sticker-btn: 0 4px 0 var(--color-primary-dark);    /* caramel CTA button shadow */
    --shadow-sticker-badge: 2px 2px 0 rgba(58, 42, 28, .18);    /* small circular badge shadow */
}

/* ========================================
   Base Styles
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings, UI labels and buttons use the display face; body copy (set above)
   stays on the serif. See docs/design-deliverables/Torrorendum Identity.dc.html #1c. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-display);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

/* ========================================
   Header (brand masthead strip)
   ======================================== */

#header {
    background-color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

#header p {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-card);
    cursor: pointer;
    margin: 0;
    max-width: 100%;
    transition: opacity var(--transition-fast);
}

#header p:hover {
    opacity: 0.85;
}

#header p:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background-color: var(--color-competition);
}

.brand-mark-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-brand-gold);
}

.brand-wordmark {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
}

.brand-tagline {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 12px;
    color: var(--color-surface);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .brand-tagline {
        display: none;
    }
}

/* ========================================
   Topbar with Logo + Navigation
   ======================================== */

#topbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--color-card);
    border-bottom: 1.5px solid var(--color-border);
    box-shadow: 0 2px 0 var(--color-shadow-faint);
    position: relative;
    z-index: 10;
}

.topbar-brand {
    display: flex;
    align-items: center;
    flex: none;
    padding-right: 10px;
    margin-right: 2px;
    border-right: 1px solid var(--color-border);
}

#topbar img {
    margin: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    cursor: pointer;
    transition: transform var(--transition-normal);
}

#topbar img:hover {
    transform: scale(1.05);
}

/* Navigation */
.topbar-nav {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
    display: none;
}

/* Mobile scroll affordance: a static edge fade hinting that .topbar-nav has
   more pills to scroll to. Anchored on #topbar (not .topbar-nav) so it does
   NOT scroll along with the nav's content — #topbar itself never scrolls,
   only its .topbar-nav child does, so the fade stays pinned to the right
   edge of the bar. Disabled at the >=640px breakpoint below, where
   .topbar-nav stops scrolling. */
#topbar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--color-card));
    pointer-events: none;
}

.nav-link,
.nav-item {
    flex: 0 0 auto;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text-light-dark);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.2px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover,
.nav-item:hover {
    background-color: var(--color-background);
}

.nav-item.nav-item--active {
    background-color: var(--color-primary);
    color: var(--color-text);
    transform: rotate(-2deg);
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
}

/* Icon glyphs — plain CSS shapes drawn with currentColor so they recolor
   automatically with the parent .nav-item's active/inactive text color. */
.nav-icon-vota {
    width: 16px;
    height: 16px;
    border: 2.5px solid currentColor;
    border-radius: 50%;
}

.nav-icon-vota span {
    display: block;
    width: 5px;
    height: 5px;
    margin: 3px auto;
    border-radius: 50%;
    background: currentColor;
}

.nav-icon-classificacio {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.nav-icon-classificacio span {
    display: block;
    width: 3.5px;
    background: currentColor;
    border-radius: 1.5px 1.5px 0 0;
}

.nav-icon-classificacio span:nth-child(1) { height: 6px; }
.nav-icon-classificacio span:nth-child(2) { height: 11px; }
.nav-icon-classificacio span:nth-child(3) { height: 8px; }

.nav-icon-estadistiques {
    width: 15px;
    height: 15px;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    transform: rotate(25deg);
}

.nav-icon-historial {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.nav-icon-historial span:nth-child(1) {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 1.5px;
    height: 5px;
    background: currentColor;
    transform: translateX(-50%);
}

.nav-icon-historial span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 1.5px;
    background: currentColor;
    transform-origin: left center;
    transform: rotate(35deg);
}

.nav-icon-advent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: 15px;
    height: 15px;
}

.nav-icon-advent span {
    background: currentColor;
    border-radius: 2px;
}

.nav-icon-amics {
    position: relative;
    width: 18px;
    height: 15px;
}

.nav-icon-amics span {
    position: absolute;
    top: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.nav-icon-amics span:nth-child(1) { left: 0; opacity: 0.55; }
.nav-icon-amics span:nth-child(2) { left: 7px; }

.nav-label {
    line-height: 1.1;
}

@media (min-width: 640px) {
    .topbar-nav {
        overflow-x: visible;
    }

    .nav-link,
    .nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* .topbar-nav no longer scrolls at this breakpoint, so the mobile edge
       fade from #topbar::after above would be a pointless visual artifact. */
    #topbar::after {
        display: none;
    }
}

/* ========================================
   Main Content Containers
   ======================================== */

#description {
    max-width: 480px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease-in;
}

#classes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-sm);
    min-height: 72vh;
    padding: var(--spacing-sm);
    flex-direction: column;
    gap: var(--spacing-lg);
    animation: fadeIn 0.5s ease-in;
}

/* Friends circle list (public/templates/friends.html) — was previously id="classes",
   which collided with the unrelated #classes wrapper on the /classes category-select
   screen (public/templates/classes.html, an HTMX hx-target the latter still owns).
   Renamed to its own id; properties copied verbatim from #classes above so the
   friends-index layout is unchanged. */
#friends-classes-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-sm);
    min-height: 72vh;
    padding: var(--spacing-sm);
    flex-direction: column;
    gap: var(--spacing-lg);
    animation: fadeIn 0.5s ease-in;
}

/* ========================================
   Typography
   ======================================== */

.description-text {
    text-align: justify;
    margin: var(--spacing-md);
    font-weight: 300;
    line-height: 1.8;
}

.class-description {
    text-align: center;
    margin: var(--spacing-sm);
    font-weight: 300;
    color: var(--color-text-light);
}

/* ========================================
   Countdown Widget
   ======================================== */

#countdown-widget {
    margin: var(--spacing-lg) 0;
    width: 100%;
}

.countdown-active,
.countdown-ended,
.countdown-inactive {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: var(--spacing-lg);
    background: var(--color-text);
    border-radius: var(--radius-card);
    color: var(--color-card);
    box-shadow: var(--shadow-lg);
}

.countdown-active::before,
.countdown-ended::before,
.countdown-inactive::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(239, 194, 110, 0.14);
}

.countdown-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-family-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.countdown-label::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.countdown-ended .countdown-label {
    color: var(--color-brand-gold);
}

.countdown-inactive .countdown-label {
    color: var(--color-text-light-dark);
}

.countdown-timer {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    background: var(--color-card);
    border-radius: 14px;
    padding: 12px 6px;
    text-align: center;
}

.countdown-unit:nth-child(1) { transform: rotate(-2deg); }
.countdown-unit:nth-child(2) { transform: rotate(1deg); }
.countdown-unit:nth-child(3) { transform: rotate(-1deg); }
.countdown-unit:nth-child(4) { transform: rotate(2deg); }

.countdown-value {
    font-family: var(--font-family-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
    text-shadow: none;
}

.countdown-unit-label {
    font-family: var(--font-family-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
    color: var(--color-text-light);
    opacity: 1;
}

.countdown-date {
    position: relative;
    font-family: var(--font-family);
    font-style: italic;
    font-size: 13px;
    opacity: 0.75;
    margin-top: var(--spacing-sm);
}

.countdown-icon {
    position: relative;
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.countdown-text {
    position: relative;
    font-family: var(--font-family);
    font-style: italic;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--color-card);
}

.countdown-subtext {
    position: relative;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    opacity: 0.75;
}

.countdown-error {
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* ========================================
   Landing Hero (index.html "description" block)
   Source: docs/design-deliverables/Torrorendum Landing Page.dc.html
   ======================================== */

.hero-badge-row {
    padding: 22px 28px 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-primary);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transform: rotate(-1deg);
}

.hero-badge-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background-color: var(--color-text);
}

.hero-copy {
    padding: 16px 28px 0;
}

.hero-headline {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.04;
    color: var(--color-text);
}

.hero-tagline {
    font-family: var(--font-family);
    font-style: italic;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.45;
    color: var(--color-text-light-dark);
    margin-top: 14px;
}

.hero-preview {
    padding: 26px 28px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 3vw, 14px);
}

.hero-torro--a {
    transform: rotate(-3deg);
}

.hero-torro--b {
    transform: rotate(3deg);
}

.hero-torro-photo {
    position: relative;
    width: clamp(96px, 30vw, 128px);
    height: clamp(128px, 40vw, 172px);
    border-radius: var(--radius-card);
    background-color: var(--color-placeholder-1);
    border: 1px solid var(--color-placeholder-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-torro-photo-shadow {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--color-shadow-soft), transparent 70%);
}

.hero-torro-silhouette {
    width: 45%;
    height: 60%;
    border-radius: 6px;
    background-color: var(--color-placeholder-2);
    border: 1px solid var(--color-neutral-dark);
}

.hero-torro-photo-label {
    position: absolute;
    top: 8px;
    left: 8px;
    font: 600 7px ui-monospace, Menlo, monospace;
    color: var(--color-text-light);
}

.hero-torro-name {
    text-align: center;
    margin-top: 8px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text);
}

.hero-vs-badge {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-competition);
    color: var(--color-competition-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 12px;
    transform: rotate(-6deg);
    box-shadow: var(--shadow-sticker-badge);
}

.hero-actions {
    padding: 26px 28px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.hero-cta {
    width: 100%;
    max-width: 320px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hero-secondary-link {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-secondary-link:hover,
.hero-secondary-link:focus-visible {
    color: var(--color-text);
}

.landing-countdown {
    margin-top: var(--spacing-sm);
    padding: 0 20px;
}

/* ========================================
   How It Works Section
   ======================================== */

.how-it-works-section {
    padding: 38px 28px 0;
}

.how-it-works-title {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--color-text);
}

.how-it-works {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.how-it-works-step {
    display: flex;
    gap: 14px;
}

.how-it-works-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 14px;
}

.step-number--1 {
    background-color: var(--color-primary);
    color: var(--color-text);
    transform: rotate(-6deg);
}

.step-number--2 {
    background-color: var(--color-brand-gold);
    color: var(--color-text);
    transform: rotate(6deg);
}

.step-number--3 {
    background-color: var(--color-competition);
    color: var(--color-competition-contrast);
    transform: rotate(-4deg);
}

.how-it-works-connector {
    width: 2px;
    flex: 1;
    min-height: 32px;
    margin: 4px 0;
    background-color: var(--color-border);
}

.how-it-works-copy {
    padding-bottom: 22px;
}

.how-it-works-step--last .how-it-works-copy {
    padding-bottom: 0;
}

.step-title {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text);
}

.step-text {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-light-dark);
    margin: 4px 0 0;
}

/* ========================================
   Bracket Teaser
   ======================================== */

.bracket-teaser {
    margin: 32px 20px 0;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 24px;
}

.bracket-teaser-title {
    margin: 0;
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
}

.bracket-teaser-funnel {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bracket-teaser-row {
    display: flex;
    gap: 6px;
}

.bracket-teaser-row--entries span {
    width: 30px;
    height: 12px;
    border-radius: 4px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

.bracket-teaser-row--semis {
    gap: 8px;
}

.bracket-teaser-row--semis span {
    width: 36px;
    height: 14px;
    border-radius: 5px;
    background-color: var(--color-brand-gold);
    border: 1px solid var(--color-primary-dark);
}

.bracket-teaser-connector {
    width: 1px;
    height: 10px;
    background-color: var(--color-border-dashed);
}

.bracket-teaser-champion {
    width: 52px;
    height: 20px;
    border-radius: 8px;
    background-color: var(--color-competition);
    box-shadow: var(--shadow-sticker-badge);
}

.bracket-teaser-champion-label {
    margin-top: 2px;
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--color-competition);
}

.bracket-teaser-note {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--font-family);
    font-style: italic;
    font-size: 13px;
    color: var(--color-text-light);
}

/* ========================================
   Landing Footer
   ======================================== */

.hero-actions--final {
    padding-top: 34px;
}

.landing-footer {
    margin-top: 8px;
    padding: 28px 28px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.landing-footer-sponsor {
    border: 1.5px dashed var(--color-border-dashed);
    border-radius: 14px;
    padding: 10px 18px;
    font: 600 9px ui-monospace, Menlo, monospace;
    letter-spacing: 0.3px;
    color: var(--color-text-light-dark);
}

.landing-footer-tagline {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-light);
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    margin: var(--spacing-lg) var(--spacing-xs);
    background-color: var(--color-primary);
    color: var(--color-text);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: var(--radius-button);
    cursor: pointer;
    border: none;
    font-family: var(--font-family-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sticker-btn);
    transform: rotate(-1deg);
    min-width: 100px;
}

.btn:hover {
    background-color: var(--color-brand-gold);
    transform: rotate(-1deg) translateY(-2px);
    box-shadow: var(--shadow-sticker-btn);
}

.btn:active {
    transform: rotate(-1deg) translateY(2px);
    box-shadow: 0 2px 0 var(--color-primary-dark);
}

.btn-large {
    font-size: var(--font-size-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    min-width: 200px;
}

.btn-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.btn-text {
    line-height: 1;
}

/* ========================================
   Class/Category Cards
   ======================================== */

.class-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: slideUp 0.4s ease-out;
}

/* ========================================
   Category Select ("Tria la teva arena", /classes)
   New, uniquely-named classes for the 5 real category cards + the
   Sinergia placeholder — does not touch .class-card/.class-description
   above, which friends.html still relies on.
   ======================================== */

.arena-intro {
    width: 100%;
    max-width: 640px;
    text-align: left;
    padding: 0 var(--spacing-sm);
}

.arena-heading {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-2xl);
    line-height: 1.08;
    color: var(--color-text);
    margin: 0;
}

.arena-tagline {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-text-light-dark);
    margin: 8px 0 0;
}

.arena-list {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.arena-footnote {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light-dark);
    text-align: center;
    margin: 0;
}

.arena-card {
    width: 100%;
    animation: slideUp 0.4s ease-out;
}

.arena-list .arena-card:nth-child(1) { animation-delay: 0.1s; }
.arena-list .arena-card:nth-child(2) { animation-delay: 0.2s; }
.arena-list .arena-card:nth-child(3) { animation-delay: 0.3s; }
.arena-list .arena-card:nth-child(4) { animation-delay: 0.4s; }
.arena-list .arena-card:nth-child(5) { animation-delay: 0.5s; }
.arena-list .arena-card:nth-child(6) { animation-delay: 0.6s; }

/* Card surface — shared by the real <button> cards and the static Sinergia
   card. Hover/active/focus lift is qualified with the `button` tag so it
   never applies to the non-interactive Sinergia card below. */
.arena-card-action {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 18px;
    box-shadow: 0 3px 0 var(--color-border);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

button.arena-card-action {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

button.arena-card-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 var(--color-border);
}

button.arena-card-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--color-border);
}

button.arena-card-action:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Arena 02 — Novetats: a hair warmer than the default card tint (mockup's
   own literal value; no existing token matches it closely enough to reuse). */
.arena-card--2 .arena-card-action {
    background: #FDF0DE;
    border-color: #EAD2A6;
    box-shadow: 0 3px 0 #EAD2A6;
}

.arena-card--2 button.arena-card-action:hover {
    box-shadow: 0 6px 0 #EAD2A6;
}

.arena-card--2 button.arena-card-action:active {
    box-shadow: 0 2px 0 #EAD2A6;
}

/* Arena 04 — Adrià Natura: quieter "limited edition" surface (mockup's own
   literal value, same reasoning as Arena 02 above). */
.arena-card--4 .arena-card-action {
    background: #F6F2E6;
    border: 1px solid #E3D6B0;
    padding: 20px;
    box-shadow: 0 1px 0 #E3D6B0;
}

.arena-card--4 button.arena-card-action:hover {
    box-shadow: 0 4px 0 #E3D6B0;
}

.arena-card--4 button.arena-card-action:active {
    box-shadow: 0 1px 0 #E3D6B0;
}

/* Arena 05 — Global: the premium cross-category showdown finale. Dark cacau
   surface + brand gold, matching the "GUANYADOR/VS" gold accent language —
   deliberately NOT burgundy, which stays reserved for competition-outcome
   moments (winner banners, VS badges, share CTA, live-round badges), and a
   category *selector* isn't one of those. */
.arena-card--final .arena-card-action {
    background: var(--color-text);
    border: 2px solid var(--color-brand-gold);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18), 0 16px 34px var(--color-shadow-heavy);
    margin-top: 4px;
}

.arena-card--final button.arena-card-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18), 0 20px 38px var(--color-shadow-heavy);
}

.arena-card--final button.arena-card-action:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18), 0 12px 28px var(--color-shadow-heavy);
}

.arena-card--final button.arena-card-action:focus-visible {
    outline-color: var(--color-brand-gold);
}

.arena-card--final .arena-eyebrow,
.arena-card--final .arena-tag {
    color: var(--color-brand-gold);
}

.arena-card--final .arena-name {
    color: var(--color-card);
    font-size: 1.35rem;
}

.arena-card--final .arena-description {
    color: #D8C7A8; /* mockup's own literal tint of cream over the dark card; no token covers a text-on-dark shade */
}

/* Sinergia — visual-only, non-interactive placeholder (see markup comment
   in classes.html). Dashed border reuses the token already reserved for
   "sponsorship / reserved-space placeholders". */
.arena-card--soon .arena-card-action {
    cursor: default;
    background: var(--color-surface);
    border-style: dashed;
    border-color: var(--color-border-dashed);
    box-shadow: none;
}

.arena-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.arena-soon-badge {
    font-family: var(--font-family-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--color-text-light-dark);
    background: var(--color-card);
    border: 1px dashed var(--color-border-dashed);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
}

/* Icon badges */

.arena-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;
}

/* Arena 01 — Clàssics: a simple ringed dot */
.arena-icon-ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid var(--color-brand-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.arena-icon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-brand-gold);
}

/* Arena 02 — Novetats: layered "spark" diamonds (caramel + gold accent —
   the mockup's small accent diamond used burgundy here, swapped for gold
   since burgundy stays reserved for competition-outcome moments only) */
.arena-icon-diamond-lg {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--color-primary);
    transform: rotate(45deg);
    position: absolute;
}

.arena-icon-diamond-sm {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--color-brand-gold);
    transform: rotate(45deg) translate(11px, -11px);
    position: absolute;
}

/* Arena 03 — Xocolata: dark cacau swatch with a waffle-grid texture */
.arena-icon--3 {
    border-radius: 16px;
    background: var(--color-text);
    border-color: var(--color-text);
    overflow: hidden;
}

.arena-icon-cacau-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(0, 0, 0, 0.28) 12px, rgba(0, 0, 0, 0.28) 13px),
        repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(0, 0, 0, 0.28) 12px, rgba(0, 0, 0, 0.28) 13px);
}

/* Arena 04 — Adrià Natura: blended flavour circles (caramel / gold / cacau
   tints — no burgundy, reserved elsewhere) */
.arena-icon-blend-a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(224, 146, 63, 0.5); /* --color-primary tint */
    position: absolute;
    transform: translate(-6px, -4px);
}

.arena-icon-blend-b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(239, 194, 110, 0.6); /* --color-brand-gold tint */
    position: absolute;
    transform: translate(7px, -2px);
}

.arena-icon-blend-c {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(58, 42, 28, 0.3); /* --color-text tint */
    position: absolute;
    transform: translate(1px, 9px);
}

/* Arena 05 — Global: premium ring/globe on the dark finale card */
.arena-icon--5 {
    width: 66px;
    height: 66px;
    background: rgba(239, 194, 110, 0.12);
    border: 2px solid var(--color-brand-gold);
}

.arena-icon-globe {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2.5px solid var(--color-brand-gold);
    position: relative;
}

.arena-icon-globe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid var(--color-brand-gold);
    transform: scaleX(0.42);
}

.arena-icon-globe::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    border-top: 2.5px solid var(--color-brand-gold);
}

/* Sinergia — three fading dots standing in for the (still unrevealed) chefs */
.arena-icon--soon {
    border: 1.5px dashed var(--color-border-dashed);
    background: var(--color-surface);
}

.arena-icon-sinergia {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arena-icon-sinergia span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-light-dark);
}

.arena-icon-sinergia span:nth-child(2) { opacity: 0.7; }
.arena-icon-sinergia span:nth-child(3) { opacity: 0.45; }

/* Card body copy */

.arena-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.arena-eyebrow {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--color-text-light-dark);
}

.arena-heading-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.arena-name {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--color-text);
}

.arena-tag {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.8px;
    color: var(--color-primary-dark);
}

.arena-description {
    font-family: var(--font-family);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--color-text-light-dark);
    margin-top: 4px;
}

@media (max-width: 600px) {
    .arena-heading {
        font-size: 1.6rem;
    }
}

/* ========================================
   Voting Interface
   ======================================== */

#vote-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-sm);
    height: 80vh;
    padding: var(--spacing-sm);
    flex-direction: column;
}

.pairing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-sm) auto;
    padding: var(--spacing-sm);
    flex-direction: column;
    max-width: 800px;
    width: 100%;
}

.torron-comparison {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: row;
    gap: var(--spacing-lg);
    width: 100%;
    margin: var(--spacing-lg) 0;
}

.torron-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    flex: 1;
    max-width: 350px;
    min-height: 400px;
}

.torron-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--color-shadow-heavy);
}

.torron-image {
    width: 100%;
    max-width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.torron-name {
    font-weight: 700;
    font-size: var(--font-size-lg);
    text-align: center;
    margin: var(--spacing-sm) 0;
    color: var(--color-primary);
}

/* ========================================
   Loading States
   ======================================== */

.loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-background);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.htmx-request .loading-indicator {
    display: inline-block;
}

/* ========================================
   Animations
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for class cards */
.class-card:nth-child(1) { animation-delay: 0.1s; }
.class-card:nth-child(2) { animation-delay: 0.2s; }
.class-card:nth-child(3) { animation-delay: 0.3s; }
.class-card:nth-child(4) { animation-delay: 0.4s; }
.class-card:nth-child(5) { animation-delay: 0.5s; }

/* ========================================
   HTMX Loading States
   ======================================== */

/* Global loading indicator */
#loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 9999;
}

#loading-indicator.htmx-request {
    transform: scaleX(1);
    animation: loadingProgress 1s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* Button loading state */
.btn.htmx-request,
.btn-small.htmx-request,
.category-btn.htmx-request,
.toggle-btn.htmx-request {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn.htmx-request::after,
.btn-small.htmx-request::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Same loading affordance for the stats-page category CTA pill (kept as its
   own rule rather than joining the shared selector list above, since that
   list belongs to .btn/.btn-small/.category-btn/.toggle-btn). */
.category-progress-cta.htmx-request {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.category-progress-cta.htmx-request::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-text);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Torron card loading state */
.torron-card.htmx-request {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.torron-card.htmx-request::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-overlay-light);
    border-top-color: var(--color-white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* Swapping state (smoother transitions) */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Settling state */
.htmx-settling {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Content loading skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-neutral) 25%,
        var(--color-neutral-dark) 50%,
        var(--color-neutral) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--border-radius);
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus styles for keyboard navigation */
.btn:focus,
.torron-card:focus,
#header p:focus,
#topbar img:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Responsive Design - Mobile
   ======================================== */

@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
    }

    /* #topbar / #topbar img / .topbar-nav mobile sizing now lives in the
       Topbar with Logo + Navigation section above (horizontal-scroll pill
       nav with a 640px breakpoint) — no separate override needed here. */

    /* #description (Landing Hero) manages its own responsive sizing via
       clamp() on its own rules above — no separate override needed here. */

    .torron-comparison {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .torron-card {
        max-width: 100%;
        min-height: auto;
    }

    .torron-image {
        max-width: 200px;
        height: 200px;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .description-text {
        text-align: left;
    }
}

/* ========================================
   Progress Bar
   (exclusively used on the vote screen — see the Vote / Duel Screen
   section below for the round header + streak pill that sit above it)
   ======================================== */

#progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--spacing-md) 0 var(--spacing-sm);
}

.progress-container {
    height: 8px;
    margin: 0 var(--spacing-md);
    overflow: hidden;
    background-color: var(--color-surface);
    border-radius: var(--radius-pill);
    box-shadow: none;
    width: 90%;
    max-width: 480px;
}

#progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    box-shadow: none;
    transition: width 0.6s ease;
}

/* ========================================
   Vote / Duel Screen
   See docs/design-deliverables/Torrorendum Voting Screen.dc.html and
   docs/design-deliverables/Torrorendum Streak Indicator.dc.html.
   Scoped, additive classes only — .torron-comparison/.torron-card/
   .torron-image/.torron-name/.torron-info-link/#progress/#progress-bar
   above are shared with advent.html, bracket.html, torro.html and
   leaderboard.html and are left untouched; everything below only ever
   applies alongside the extra classes vote.html adds.
   ======================================== */

.vote-round-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 90%;
    max-width: 480px;
}

.vote-round-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--color-text-light-dark);
}

.vote-round-icon {
    width: 11px;
    height: 11px;
    flex: none;
    border-left: 3px solid var(--color-text);
    border-bottom: 3px solid var(--color-text);
    transform: rotate(45deg);
}

/* Streak indicator pill */
.streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    flex: none;
}

.streak-pill--risk {
    background-color: var(--color-competition-tint);
    border: 1.5px dashed var(--color-competition);
}

.streak-flame {
    position: relative;
    width: 20px;
    height: 22px;
    flex: none;
}

.streak-flame::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 0 50% 50% 50%;
    transform: translateX(-50%) rotate(-45deg);
    background: linear-gradient(200deg, var(--color-primary), var(--color-primary-dark));
}

.streak-pill--risk .streak-flame::before {
    background: transparent;
    border: 2px solid var(--color-competition);
}

.streak-flame::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 0 50% 50% 50%;
    transform: translateX(-50%) rotate(-45deg);
    background: var(--color-brand-gold);
}

.streak-pill--risk .streak-flame::after {
    background: var(--color-competition-tint);
}

.streak-risk-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-competition);
    animation: streakRiskPulse 2s ease-in-out infinite;
}

@keyframes streakRiskPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.streak-count {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.streak-number {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text);
}

.streak-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
}

.streak-pill--risk .streak-label {
    color: var(--color-competition);
}

/* Duel layout */
.torron-comparison.vote-duel {
    align-items: stretch;
    gap: 10px;
    max-width: 480px;
    margin: var(--spacing-md) auto;
    position: relative;
}

.torron-card.vote-card {
    position: relative;
    align-items: stretch;
    justify-content: flex-start;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-sm);
    max-width: none;
    min-height: 0;
}

.torron-card.vote-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.vote-card-media {
    position: relative;
    width: 100%;
}

.vote-card .torron-image {
    width: 100%;
    max-width: 100%;
    height: 170px;
    border-radius: 14px;
    background-color: var(--color-placeholder-1);
    border: 1px solid var(--color-border);
    margin-bottom: 0;
}

.vote-badge-new {
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: var(--color-competition);
    color: var(--color-competition-contrast);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    transform: rotate(-8deg);
    box-shadow: var(--shadow-sticker-badge);
}

.vote-card .torron-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    text-align: left;
    color: var(--color-text);
    margin: var(--spacing-sm) 0 0;
}

.vote-diet-badges {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.vote-diet-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    font-size: 11px;
    background-color: var(--color-card);
}

.vote-card .torron-info-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
}

.vote-vs-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-competition);
    color: var(--color-competition-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 15px;
    z-index: 3;
    box-shadow: var(--shadow-sticker-badge);
    pointer-events: none;
    animation: voteVsPulse 2.2s ease-out infinite;
}

@keyframes voteVsPulse {
    0% { box-shadow: 0 0 0 0 var(--color-competition-tint); }
    100% { box-shadow: 0 0 0 14px rgba(138, 38, 56, 0); }
}

@media (max-width: 768px) {
    .torron-comparison.vote-duel {
        flex-direction: row;
        gap: 8px;
        max-width: 100%;
        padding: 0 var(--spacing-sm);
    }

    .torron-card.vote-card {
        max-width: none;
        min-height: 0;
        padding: 8px;
    }

    .vote-card .torron-image {
        height: 130px;
    }

    .vote-round-header,
    .progress-container {
        width: 100%;
        max-width: none;
        padding: 0 var(--spacing-sm);
        box-sizing: border-box;
    }
}

/* ========================================
   Leaderboard
   ======================================== */

#leaderboard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-md);
    animation: fadeIn 0.5s ease-in;
}

.leaderboard-header {
    margin-bottom: var(--spacing-lg);
}

/* Eyebrow: current category name + live indicator */
.leaderboard-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.eyebrow-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eyebrow-mark {
    width: 12px;
    height: 12px;
    flex: none;
    border-left: 3px solid var(--color-text);
    border-bottom: 3px solid var(--color-text);
    transform: rotate(45deg);
}

.eyebrow-text {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.leaderboard-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-primary);
    color: var(--color-text);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.live-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background-color: var(--color-text);
    animation: leaderboardLivePulse 2s ease-out infinite;
}

@keyframes leaderboardLivePulse {
    /* Pulse ring reuses --color-competition's RGB (custom properties can't be
       animated through rgba() alpha steps), just at lower opacities. */
    0% { box-shadow: 0 0 0 0 rgba(138, 38, 56, 0.35); }
    100% { box-shadow: 0 0 0 8px rgba(138, 38, 56, 0); }
}

.leaderboard-title {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-2xl);
    line-height: 1.1;
    color: var(--color-text);
    margin: var(--spacing-sm) 0 2px;
}

.leaderboard-subtitle {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-md);
}

/* View toggle (segmented pill) */
.view-toggle {
    display: flex;
    gap: 4px;
    background-color: var(--color-surface);
    border-radius: var(--radius-pill);
    padding: 4px;
    margin: var(--spacing-md) 0;
}

.toggle-btn {
    flex: 1;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-sm);
    background-color: transparent;
    color: var(--color-text-light);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all var(--transition-fast);
}

.toggle-btn:hover {
    color: var(--color-text);
}

.toggle-btn.active {
    background-color: var(--color-text);
    color: var(--color-card);
}

/* Category selector */
.category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.category-btn {
    padding: 8px 16px;
    background-color: var(--color-card);
    color: var(--color-text-light-dark);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: all var(--transition-fast);
}

.category-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.category-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* Dietary/allergen filter chips (reuses .category-btn look) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

/* Leaderboard list. Hero (top-3) cards keep their own gap; the compact rows
   below rank 3 are visually joined into one bordered "table" card. */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-lg) 0;
}

.leaderboard-entry {
    animation: slideUp 0.4s ease-out;
}

.leaderboard-entry:nth-child(1) { animation-delay: 0.05s; }
.leaderboard-entry:nth-child(2) { animation-delay: 0.1s; }
.leaderboard-entry:nth-child(3) { animation-delay: 0.15s; }
.leaderboard-entry:nth-child(4) { animation-delay: 0.2s; }
.leaderboard-entry:nth-child(5) { animation-delay: 0.25s; }
.leaderboard-entry:nth-child(n+6) { animation-delay: 0.3s; }

/* --- Top-3 "hero" cards --- */
.leaderboard-entry-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    margin-bottom: var(--spacing-sm);
}

.leaderboard-entry-hero.rank-1 {
    background-color: var(--color-competition);
    border: 2px solid var(--color-brand-gold);
    transform: rotate(-2deg);
}

.leaderboard-entry-hero.rank-2 {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    transform: rotate(1deg);
}

.leaderboard-entry-hero.rank-3 {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    transform: rotate(-1deg);
}

.hero-rank-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 13px;
    box-shadow: var(--shadow-sticker-badge);
}

.rank-1 .hero-rank-badge {
    background-color: var(--color-brand-gold);
    color: var(--color-text);
}

.rank-2 .hero-rank-badge {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.rank-3 .hero-rank-badge {
    background-color: var(--color-primary-light);
    color: var(--color-card);
}

.hero-entry-image {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-image: repeating-linear-gradient(135deg, var(--color-placeholder-1), var(--color-placeholder-1) 6px, var(--color-placeholder-2) 6px, var(--color-placeholder-2) 12px);
}

.rank-1 .hero-entry-image {
    border-color: rgba(239, 194, 110, 0.5);
}

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

.hero-entry-rating {
    flex: none;
    text-align: right;
}

.hero-entry-elo {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--color-text);
}

.rank-1 .hero-entry-elo {
    color: var(--color-competition-contrast);
}

.hero-entry-elo-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--color-text-light);
    margin-top: 2px;
}

.rank-1 .hero-entry-elo-label {
    color: rgba(255, 250, 241, 0.65);
}

.hero-entry-rating .rating-bar {
    width: 72px;
    margin: 8px 0 0 auto;
}

.rank-change-slot--hero {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

/* --- Compact rows (rank 4+), visually joined into one bordered card --- */
.leaderboard-entry-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-card);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.leaderboard-entry-hero + .leaderboard-entry-row {
    border-top: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    margin-top: var(--spacing-md);
}

.leaderboard-entry-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}

.row-rank-number {
    width: 22px;
    flex: none;
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-text-light-dark);
}

.row-entry-image {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-image: repeating-linear-gradient(135deg, var(--color-placeholder-1), var(--color-placeholder-1) 5px, var(--color-placeholder-2) 5px, var(--color-placeholder-2) 10px);
}

.row-entry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.row-entry-rating {
    margin-top: 4px;
}

.row-entry-rating .rating-bar {
    height: 3px;
}

.row-entry-elo {
    flex: none;
    text-align: right;
}

.row-elo-value {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    line-height: 1;
    color: var(--color-text);
}

.row-elo-label {
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.4px;
    color: var(--color-text-light-dark);
    margin-top: 2px;
}

.rank-change-slot--row {
    flex: none;
    width: 40px;
    display: flex;
    justify-content: flex-end;
}

/* --- Shared entry details (name, vote count, info link) --- */
.entry-details {
    flex-grow: 1;
    min-width: 0;
}

.entry-name {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-entry-hero .entry-name {
    font-weight: 800;
    font-size: var(--font-size-lg);
}

.rank-1 .entry-name {
    color: var(--color-competition-contrast);
}

.entry-stats {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: 2px;
}

.rank-1 .stat-label,
.rank-1 .stat-value {
    color: var(--color-competition-contrast);
    opacity: 0.85;
}

.rank-1 .torron-info-link {
    color: rgba(255, 250, 241, 0.85);
}

.rank-1 .torron-info-link:hover,
.rank-1 .torron-info-link:focus-visible {
    color: var(--color-brand-gold);
}

/* Rating bar (reused by both hero and row layouts) */
.rating-bar {
    height: 6px;
    background-color: var(--color-surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}

.rating-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
    transition: width 0.5s ease;
}

.rank-1 .rating-bar {
    background-color: rgba(255, 250, 241, 0.25);
}

.rank-1 .rating-fill {
    background: var(--color-brand-gold);
}

/* Rank-change indicator: CSS-drawn triangle + delta, a "NOU" pill, or a dash */
.rank-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.75rem;
}

.rank-change-slot--hero .rank-change {
    font-size: var(--font-size-sm);
}

.rank-change-arrow {
    width: 0;
    height: 0;
    flex: none;
}

.rank-change-arrow-up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid currentColor;
}

.rank-change-arrow-down {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
}

.rank-up {
    color: var(--color-primary-light);
}

.rank-down {
    /* Audit fix: canonical secondary-text token, not an undocumented neutral (#B3A182) */
    color: var(--color-text-light);
}

.rank-new .rank-change-value {
    background-color: var(--color-primary);
    color: var(--color-text);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.rank-same {
    color: var(--color-border-dashed);
}

.rank-1 .rank-up {
    color: var(--color-brand-gold);
}

.rank-1 .rank-down {
    color: rgba(255, 250, 241, 0.65);
}

.rank-1 .rank-new .rank-change-value {
    background-color: var(--color-brand-gold);
    color: var(--color-text);
}

.rank-1 .rank-same {
    color: rgba(255, 250, 241, 0.5);
}

/* Error state */
.leaderboard-error {
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--color-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-xl) auto;
    max-width: 500px;
}

.error-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.error-message {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.error-hint {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

/* Footer */
.leaderboard-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .leaderboard-entry-hero {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
    }

    .hero-entry-image {
        width: 52px;
        height: 52px;
    }

    .hero-entry-elo {
        font-size: var(--font-size-lg);
    }

    /* Horizontal-scroll pill strip, matching .topbar-nav's mobile pattern,
       instead of stacking every chip full-width down the page. */
    .category-selector,
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .category-selector::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar {
        display: none;
    }

    .category-btn {
        flex: none;
        white-space: nowrap;
    }
}

/* ========================================
   User Stats Page
   ======================================== */

#stats-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    animation: fadeIn 0.5s ease-in;
}

.stats-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.stats-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.stats-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

/* Stats summary cards */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stats-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.stats-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.stats-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.stats-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

/* Category progress */
.category-progress-list {
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.category-progress-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.category-progress-item {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-surface);
    transition: background-color var(--transition-fast);
}

.category-progress-item:last-child {
    border-bottom: none;
}

.category-progress-item:hover {
    background-color: var(--color-background);
}

.category-progress-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.category-progress-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.category-progress-body {
    flex: 1;
    min-width: 0;
}

.category-name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
}

.category-progress-meta {
    flex: none;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.category-votes {
    font-family: var(--font-family-display);
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.votes-current {
    font-weight: 800;
}

.votes-separator {
    margin: 0 1px;
    font-weight: 600;
    color: var(--color-text-light-dark);
}

.votes-required {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-light-dark);
}

.category-progress-pill {
    display: inline-block;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background-color: transparent;
    border: 1px solid var(--color-border-dashed);
    color: var(--color-text-light-dark);
}

.category-progress-item.unlocked .category-progress-pill {
    background-color: var(--color-brand-gold);
    border-color: transparent;
    color: var(--color-text);
}

.category-progress-bar {
    height: 8px;
    background-color: var(--color-surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-top: var(--spacing-sm);
}

.progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    transition: width 0.5s ease;
}

.category-progress-item.unlocked .progress-fill {
    background-color: var(--color-competition);
}

.category-progress-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-left: calc(40px + var(--spacing-md));
}

.category-progress-cta {
    display: inline-block;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-brand-gold);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.category-progress-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.category-progress-cta:focus-visible {
    outline: 2px solid var(--color-competition);
    outline-offset: 2px;
}

.progress-status {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
}

.progress-status.unlocked {
    color: var(--color-text-light-dark);
}

.progress-status.locked {
    color: var(--color-text-light-dark);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    display: inline-block;
}

.btn-small:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-1px);
}

/* Achievements */
.achievements-section {
    margin-bottom: var(--spacing-xl);
}

.achievements-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg) var(--spacing-md);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg) var(--spacing-xs);
}

.achievement-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs);
}

.achievement-badge.locked {
    opacity: 0.6;
}

.achievement-circle {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-placeholder-2);
    border: 1px solid var(--color-border);
}

.achievement-badge.unlocked .achievement-circle {
    background: linear-gradient(135deg, var(--color-brand-gold), var(--color-primary));
    border: 2px solid var(--color-brand-gold);
    box-shadow: var(--shadow-sticker-badge);
}

.achievement-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.achievement-badge.locked .achievement-icon {
    filter: grayscale(60%);
}

.achievement-shine {
    position: absolute;
    top: -40%;
    left: -10%;
    width: 30%;
    height: 180%;
    background-color: var(--color-overlay-light);
    filter: blur(3px);
    animation: statsAchievementShine 3.2s ease-in-out infinite;
}

@keyframes statsAchievementShine {
    0% { transform: translateX(-120%) rotate(20deg); }
    100% { transform: translateX(220%) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .achievement-shine {
        animation: none;
        display: none;
    }
}

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

.achievement-description {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--color-text-light);
    max-width: 100px;
}

/* Stats footer */
.stats-footer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* Responsive */
@media (max-width: 768px) {
    .stats-summary {
        grid-template-columns: 1fr;
    }

    .category-progress-main {
        flex-wrap: wrap;
    }

    .category-progress-meta {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
        margin-left: calc(40px + var(--spacing-md));
    }

    .category-progress-actions {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
    }

    .btn-small {
        width: 100%;
    }

    .stats-footer {
        flex-direction: column;
    }

    .stats-footer .btn {
        width: 100%;
    }

    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md) 4px;
    }

    .stats-hero-top {
        align-items: flex-start;
    }
}

/* Stats hero header (Direction 1c "Viral Drop") — new page-specific classes,
   kept separate from the shared .stats-header/.stats-title/.stats-summary/
   .stats-card family above (still relied on by bracket.html, advent.html,
   friends.html and wrapped.html) so this reskin doesn't ripple into them. */
.stats-hero {
    margin-bottom: var(--spacing-xl);
}

.stats-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.stats-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.stats-eyebrow-mark {
    width: 10px;
    height: 10px;
    flex: none;
    border-left: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(45deg);
}

.stats-hero-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.stats-season-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-surface);
    color: var(--color-text-light);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Voter rank/level badge — this concept has no equivalent in the Personal
   Stats mockup (docs/design-deliverables/Torrorendum Personal Stats.dc.html
   has no rank/level element anywhere, only the 3-card Vots/Categories/Ratxa
   summary row), so it's relocated here as a header badge rather than
   dropped, matching the season pill's shape with a caramel accent to mark
   it as an earned/achievement-like value rather than a neutral fact. */
.stats-rank-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary-tint);
    color: var(--color-primary-dark);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.stats-hero-title {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, var(--font-size-2xl));
    line-height: 1.1;
    color: var(--color-text);
    margin: var(--spacing-md) 0 0;
}

.stats-hero-subtitle {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin: var(--spacing-xs) 0 0;
}

/* Stats summary tiles — replaces .stats-summary/.stats-card for this page
   only. Always exactly 3 equal cards in one row (Vots emesos / Categories
   obertes / Ratxa actual), per the mockup's display:flex;gap:10px summary
   row — not a wrapping grid, so the 3rd (streak) card never drops onto its
   own line on narrow viewports. */
.stats-tiles {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stats-tile {
    flex: 1 1 0;
    min-width: 0;
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform var(--transition-normal);
}

.stats-tile:hover {
    transform: translateY(-2px);
}

.stats-tile-value {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-2xl);
    line-height: 1;
    color: var(--color-text);
}

.stats-tile-label {
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.stats-tile-streak {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-competition);
    border: 2px solid var(--color-brand-gold);
    box-shadow: var(--shadow-sticker-badge);
}

.stats-tile-streak .stats-tile-value {
    color: var(--color-competition-contrast);
}

.stats-tile-streak .stats-tile-label {
    color: var(--color-brand-gold);
}

/* Streak flame icon — canonical treatment, mirrors
   docs/design-deliverables/Torrorendum Streak Indicator.dc.html (default,
   not-at-risk state; the app has no "at risk" signal available yet). */
.stats-streak-flame {
    position: relative;
    width: 26px;
    height: 28px;
    flex: none;
}

.stats-streak-flame-outer,
.stats-streak-flame-inner {
    position: absolute;
    left: 50%;
    border-radius: 0 50% 50% 50%;
}

.stats-streak-flame-outer {
    width: 16px;
    height: 16px;
    bottom: 3px;
    transform: translateX(-50%) rotate(-45deg);
    background: linear-gradient(200deg, var(--color-primary), var(--color-primary-dark));
}

.stats-streak-flame-inner {
    width: 7px;
    height: 7px;
    bottom: 5px;
    transform: translateX(-50%) rotate(-45deg);
    background-color: var(--color-brand-gold);
}

/* Small-caps section label — distinct from the shared .section-title
   (used by bracket.html) so that rule is left untouched. */
.stats-section-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   Voting History Page
   ======================================== */

#history-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    animation: fadeIn 0.5s ease-in;
}

/* Eyebrow masthead row (small nav-style label + loaded-vote count) */
.history-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.history-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--color-text-light);
    text-transform: uppercase;
}

.history-eyebrow-chevron {
    width: 14px;
    height: 14px;
    flex: none;
    border-left: 3px solid var(--color-text);
    border-bottom: 3px solid var(--color-text);
    transform: rotate(45deg);
}

.history-count {
    font: 600 10px ui-monospace, Menlo, monospace;
    color: var(--color-text-light-dark);
}

.history-header {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}

.history-title {
    font-family: var(--font-family-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.history-subtitle {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 13.5px;
    color: var(--color-text-light);
}

/* Filter chips — horizontal-scroll pill row */
.history-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    margin-bottom: var(--spacing-lg);
}

.history-filters::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    flex: none;
    padding: 7px 14px;
    background-color: transparent;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-family-display);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.filter-btn.active {
    background-color: var(--color-text);
    color: var(--color-card);
    border-color: var(--color-text);
}

.filter-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Vote log — a single card holding day-grouped duel rows */
.history-list {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.history-day-header {
    padding: 13px 16px 6px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1px;
    color: var(--color-text-light);
}

.history-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition-fast);
}

.history-item:last-child {
    border-bottom: none;
}

.history-item:hover {
    background-color: var(--color-surface);
}

.history-item-icon {
    width: 28px;
    height: 28px;
    flex: none;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.history-item-main {
    flex: 1;
    min-width: 0;
}

.history-item-names {
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.history-item-winner {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-sep {
    flex: none;
    font-family: var(--font-family);
    font-style: italic;
    font-size: 11px;
    color: var(--color-text-light);
}

.history-item-loser {
    font-family: var(--font-family);
    font-size: 12.5px;
    color: var(--color-text-light-dark);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-dashed);
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-meta {
    margin-top: 3px;
    font: 600 8.5px ui-monospace, Menlo, monospace;
    letter-spacing: 0.3px;
    color: var(--color-text-light-dark);
}

.history-item-time {
    flex: none;
    font: 600 9.5px ui-monospace, Menlo, monospace;
    color: var(--color-text-light-dark);
}

/* --- Shared "duel row" component below (still rendered by
   public/templates/bracket.html) — kept intact, not owned by this screen. --- */

.history-torron-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.history-torron-info {
    flex: 1;
}

.history-torron-name {
    font-weight: 700;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
}

.winner-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-success);
    padding: 2px 8px;
    background-color: var(--color-success-bg);
    border-radius: var(--border-radius);
}

.history-vs {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

.category-badge {
    display: inline-block;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    color: var(--color-text);
}

/* --- End shared "duel row" component --- */

/* Empty state — shared with friends.html, bracket.html, advent.html */
.history-empty {
    text-align: center;
    padding: var(--spacing-xl);
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-xl) auto;
    max-width: 500px;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.empty-message {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.empty-hint {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
}

/* Load more & footer */
.history-load-more,
.history-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

/* Responsive */
@media (max-width: 768px) {
    /* .history-vs is shared with bracket.html's duel rows — keep this override. */
    .history-vs {
        transform: rotate(90deg);
        margin: var(--spacing-sm) 0;
    }

    .history-item {
        padding: 10px 14px;
    }

    .history-item-time {
        font-size: 9px;
    }
}

/* ========================================
   Share Functionality
   ======================================== */

.share-section {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.share-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
    transition: all var(--transition-fast);
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.share-btn-twitter {
    background-color: var(--color-twitter);
}

.share-btn-facebook {
    background-color: var(--color-facebook);
}

.share-btn-whatsapp {
    background-color: var(--color-whatsapp);
}

.share-btn-copy {
    background-color: var(--color-text-light);
}

.share-btn-copy.copied {
    background-color: var(--color-success);
}

/* Responsive */
@media (max-width: 768px) {
    .share-buttons {
        flex-direction: column;
    }

    .share-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   Toast Notifications
   ======================================== */

#toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 280px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.toast-show {
    opacity: 1;
    transform: translateX(0);
}

.toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-message {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
}

.toast-success {
    border-left: 4px solid var(--color-success);
}

.toast-achievement {
    border-left: 4px solid var(--color-gold);
    background: linear-gradient(135deg, var(--color-gold-bg) 0%, var(--color-white) 100%);
}

.toast-error {
    border-left: 4px solid var(--color-danger);
}

.toast-info {
    border-left: 4px solid var(--color-info);
}

@media (max-width: 768px) {
    #toast-container {
        top: 60px;
        right: 10px;
        left: 10px;
    }

    .toast {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }
}

/* ========================================
   Onboarding Modal
   ======================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.modal.modal-show {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay-dark);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 30px 26px 26px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px var(--color-shadow-heavy);
    animation: modalSlideIn 0.3s ease-out;
    z-index: 10001;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.onboarding-eyebrow {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--color-text-light-dark);
}

.onboarding-icon {
    margin-top: 18px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
}

.onboarding-icon-intro {
    background: var(--color-competition);
    border: none;
    color: var(--color-card);
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 19px;
    transform: rotate(-8deg);
    box-shadow: var(--shadow-sticker-badge);
}

.onboarding-icon-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-icon-dot span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.onboarding-icon-ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid var(--color-brand-gold);
}

.onboarding-icon-final {
    border: 3px solid var(--color-brand-gold);
    transform: rotate(-4deg);
}

.onboarding-icon-final span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-competition);
}

.modal-title {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
    color: var(--color-text);
    margin-top: 18px;
    text-align: left;
}

.modal-subtitle {
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text-light-dark);
    margin-top: 10px;
    margin-bottom: 0;
    text-align: left;
}

.onboarding-dots {
    display: flex;
    gap: 6px;
    margin-top: 24px;
}

.onboarding-dot {
    height: 6px;
    width: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    transition: all 0.2s ease;
}

.onboarding-dot.onboarding-dot--active {
    width: 20px;
    background: var(--color-primary);
}

.onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

.onboarding-back {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 12px 6px;
    background: none;
    border: none;
}

.onboarding-next {
    background: var(--color-primary);
    color: var(--color-text);
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 14px;
    padding: 13px 26px;
    border-radius: 16px;
    border: none;
    transform: rotate(-1deg);
    box-shadow: var(--shadow-sticker-btn);
    cursor: pointer;
    margin-left: auto;
}

.onboarding-next:hover {
    background: var(--color-brand-gold);
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 26px 22px 22px;
    }

    .modal-title {
        font-size: var(--font-size-xl);
    }
}

/* ========================================
   Accessibility
   ======================================== */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Enhanced focus styles for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

.torron-card:focus-visible {
    outline: 4px solid var(--color-primary);
    outline-offset: 4px;
    transform: scale(1.02);
}

.btn:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* ========================================
   Utility Classes
   ======================================== */

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

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.hidden {
    display: none;
}

/* ========================================
   Bracket (Phase 2 - The knockout)
   See docs/design-deliverables/Torrorendum Bracket.dc.html and
   ".../Torrorendum Bracket Tree.dc.html". This section owns every
   .bracket-* class outright (bracket.html is their only consumer) and
   additionally carries a few *scoped* overrides — selectors prefixed with
   #bracket-container / #bracket-vote-container — for shared components
   (.torron-card, .history-*, .stats-*, .section-title, .winner-badge…)
   that other screens also use. Those overrides only ever match inside
   this page's markup; the shared base rules they layer on top of (defined
   earlier in this file) are left untouched for the other screens that
   still own them.
   ======================================== */

.bracket-page-header {
    position: relative;
}

.bracket-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.bracket-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-competition);
    color: var(--color-competition-contrast);
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 0.6rem;
    transform: rotate(-8deg);
}

.bracket-eyebrow-text {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.bracket-status-pill {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px var(--spacing-md);
    border-radius: var(--radius-pill);
}

.bracket-status-pill.is-open {
    background-color: var(--color-primary-tint);
    color: var(--color-primary-dark);
}

.bracket-status-pill.is-closed {
    background-color: var(--color-text);
    color: var(--color-brand-gold);
}

.bracket-cta {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.bracket-champion {
    /* Competition-only moment (winner banner) — burdeus/cacau + gold, not
       the generic caramel accent. Mirrors the champion banner in the
       Bracket Tree mockup (#3A2A1C card, #EFC26E border). */
    position: relative;
    background-color: var(--color-text);
    color: var(--color-competition-contrast);
    border: 2px solid var(--color-brand-gold);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-xl);
    transform: rotate(-1deg);
}

.bracket-champion-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-button);
    border: 3px solid var(--color-brand-gold);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.bracket-champion-icon {
    font-size: 2.25rem;
}

.bracket-champion-label {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-brand-gold);
    margin-top: var(--spacing-xs);
}

.bracket-champion-name {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin: var(--spacing-xs) 0;
}

/* --- The full bracket tree ---
   Audit fix #1: this must never clip on mobile. It's wrapped in a
   horizontal-scroll container with a visible scroll hint, so at any
   viewport width (390px included) every round column stays reachable. */

.bracket-tree-hint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 4px var(--spacing-md);
}

.bracket-tree-hint-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-light);
    white-space: nowrap;
}

.bracket-tree-hint-rule {
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

.bracket-tree-hint-swipe {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.bracket-tree-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px var(--spacing-lg);
    padding: 4px 4px var(--spacing-sm);
}

.bracket-tree-scroll:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

.bracket-tree {
    --bracket-gap: 40px;
    display: flex;
    align-items: stretch;
    gap: var(--bracket-gap);
    min-width: max-content;
}

.bracket-round {
    flex: 0 0 250px;
    width: 250px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.bracket-round .section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.bracket-round.is-final .section-title {
    color: var(--color-competition);
}

.bracket-current-badge {
    /* Competition-only moment (live/active-round status pill) — burdeus. */
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-competition);
    background-color: var(--color-competition-tint);
    border-radius: var(--border-radius);
    padding: 2px var(--spacing-sm);
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

.bracket-round .bracket-current-badge {
    margin-left: 0;
}

.bracket-match-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: var(--spacing-md);
    position: relative;
}

/* Structural connectors — audit fix #2: always the border token
   (var(--color-border), #E8D6B4), never an ad hoc gray. */
.bracket-round:not(:last-child) .bracket-match::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--bracket-gap) / -2);
    width: calc(var(--bracket-gap) / 2);
    height: 2px;
    background-color: var(--color-border);
}

.bracket-round:not(:first-child) .bracket-match::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--bracket-gap) / -2);
    width: calc(var(--bracket-gap) / 2);
    height: 2px;
    background-color: var(--color-border);
}

.bracket-round:not(:first-child) .bracket-match-list::before {
    content: "";
    position: absolute;
    left: calc(var(--bracket-gap) / -2);
    top: 10%;
    bottom: 10%;
    width: 2px;
    background-color: var(--color-border);
}

.bracket-match {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow-sticker);
    transition: all var(--transition-normal);
}

.bracket-match.decided {
    border-color: var(--color-primary-dark);
}

.bracket-competitor {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 2px 0;
    min-width: 0;
}

.bracket-competitor.winner .history-torron-name {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.bracket-competitor.loser {
    opacity: 0.5;
}

.bracket-competitor.bracket-bye {
    justify-content: center;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-light);
    font-style: italic;
}

.bracket-seed {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--color-surface);
    color: var(--color-text-light);
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 700;
    font-size: 0.65rem;
    margin-right: var(--spacing-xs);
}

.bracket-bye-label {
    font-size: var(--font-size-sm);
}

/* Scoped: the shared history-* row components, sized down to fit inside a
   250px-wide bracket-tree column instead of history.html's full-width row. */
#bracket-container .history-torron-img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: none;
}

#bracket-container .history-torron-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#bracket-container .history-torron-name {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#bracket-container .winner-badge {
    align-self: flex-start;
    font-size: 0.65rem;
}

#bracket-container .history-vs {
    font-family: var(--font-family-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-competition);
    text-align: center;
    padding: 3px 0;
    border-top: 1px solid var(--color-surface);
}

#bracket-container .history-empty,
#bracket-vote-container .history-empty {
    background-color: var(--color-card);
    border: 1.5px dashed var(--color-border-dashed);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
}

@media (max-width: 480px) {
    .bracket-tree {
        --bracket-gap: 24px;
    }

    .bracket-round {
        flex-basis: 208px;
        width: 208px;
    }
}

/* --- Bracket vote screen (GET /bracket/{classId}/vote) ---
   Reuses the shared .torron-comparison/.torron-card head-to-head voting
   component; scoped so the sticker treatment only applies here and the
   shared base rules stay untouched for the other screens that use them. */
#bracket-vote-container .torron-card {
    border-radius: var(--radius-card);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-sticker);
}

#bracket-vote-container .torron-card:nth-child(1) {
    transform: rotate(-1.5deg);
}

#bracket-vote-container .torron-card:nth-child(2) {
    transform: rotate(1.5deg);
}

#bracket-vote-container .torron-card:nth-child(1):hover {
    transform: rotate(-1.5deg) translateY(-5px);
    border-color: var(--color-primary);
}

#bracket-vote-container .torron-card:nth-child(2):hover {
    transform: rotate(1.5deg) translateY(-5px);
    border-color: var(--color-primary);
}

#bracket-vote-container .torron-name {
    font-family: var(--font-family-display);
    color: var(--color-text);
}

#bracket-vote-container .torron-image {
    border-radius: var(--radius-button);
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .btn,
    #header,
    #topbar {
        display: none;
    }
}

/* ========================================
   Torró Info Link (vote card & leaderboard entry)
   ======================================== */

.torron-info-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
}

.torron-info-link:hover,
.torron-info-link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.icon-info {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 2px;
    flex-shrink: 0;
}

.entry-details .torron-info-link {
    margin-top: var(--spacing-xs);
}

/* ========================================
   Torró Detail Page (/torro/{id})
   "Fitxa del producte" — Viral Drop Product Page mockup.

   Notes on data availability vs the mockup:
   - No class-name (category) lookup is available in this page's template
     context (only the raw class id is, and resolving it to a display name
     would require new handler code), so the mockup's "CLÀSSICS" category
     pill/caption is intentionally omitted rather than showing a raw id.
   - The mockup's ELO trend sparkline and "+1 avui" delta assume a
     time-series history this app doesn't collect/pass to the template, so
     they're omitted rather than fabricated. Likewise "EN VIU" (live)
     wording is dropped from copy since campaign-active state isn't part of
     this page's data — the rank/ELO card keeps a purely decorative
     competition-accent dot instead of a textual live claim.
   - Dietary badges keep the existing HasDietInfo gate and only render
     flags that are actually true (no "No vegà"-style negative claims),
     since most torrons still have unbackfilled (default-false) dietary
     columns — asserting a negative here would misrepresent unknown data.
   ======================================== */

.torro-detail-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.torro-detail-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.torro-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.torro-back-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.torro-detail-kicker {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
}

.torro-detail-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.torro-photo-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto var(--spacing-xs);
}

.torro-photo {
    width: 100%;
    max-width: 220px;
    height: 260px;
    object-fit: cover;
    background-color: var(--color-placeholder-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    transform: rotate(-1deg);
}

.torro-rank-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .3px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sticker-badge);
}

.torro-detail-heading {
    text-align: center;
}

.torro-detail-title {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    line-height: 1.1;
    color: var(--color-text);
    margin: 0;
}

.torro-description {
    font-family: var(--font-family);
    color: var(--color-text-light-dark);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: var(--spacing-sm) 0 0;
}

.torro-eyebrow {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
    margin-bottom: var(--spacing-sm);
}

.torro-info-card-spaced {
    margin-top: var(--spacing-md);
}

.torro-spec-row,
.torro-intensity-card,
.torro-info-card,
.torro-rank-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 16px;
}

.torro-spec-row {
    display: flex;
    align-items: stretch;
}

.torro-spec-item {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
}

.torro-spec-value,
.torro-rank-stat-value {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 800;
    color: var(--color-text);
}

.torro-spec-value {
    font-size: 17px;
}

.torro-spec-label {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
    margin-top: 3px;
}

.torro-spec-divider {
    width: 1px;
    align-self: stretch;
    margin: var(--spacing-sm) 0;
    background-color: var(--color-surface);
}

.torro-intensity-card,
.torro-info-card,
.torro-rank-card {
    padding: var(--spacing-md);
}

.torro-intensity-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.torro-intensity-head .torro-eyebrow {
    margin-bottom: 0;
}

.torro-intensity-descriptor {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 12.5px;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.torro-intensity-bar {
    display: flex;
    gap: 6px;
    margin-top: var(--spacing-sm);
}

.torro-intensity-seg {
    flex: 1;
    height: 11px;
    border-radius: 3px;
    background-color: transparent;
    border: 1.5px solid var(--color-border);
}

.torro-intensity-seg.is-filled {
    background-color: var(--color-competition);
    border-color: var(--color-competition);
}

.torro-diet-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-md);
}

.torro-diet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 1 76px;
    text-align: center;
}

.torro-diet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    position: relative;
}

.torro-diet-icon.is-active.torro-diet-icon-leaf::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 0 100% 0 100%;
    background-color: var(--color-primary-dark);
    transform: rotate(-45deg);
}

.torro-diet-icon.is-active.torro-diet-icon-crossed {
    border-color: var(--color-primary-dark);
}

.torro-diet-icon.is-active.torro-diet-icon-crossed::before {
    content: "";
    position: absolute;
    left: -1.5px;
    right: -1.5px;
    top: 50%;
    height: 0;
    border-top: 2.5px solid var(--color-primary-dark);
    transform: rotate(-45deg);
}

.torro-diet-icon.is-active.torro-diet-icon-stamp {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 8px;
    letter-spacing: .3px;
    color: var(--color-primary-dark);
}

.torro-diet-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 9.5px;
    line-height: 1.2;
    color: var(--color-text);
    max-width: 74px;
}

.torro-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.torro-chip {
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 5px 12px;
}

.torro-chip-allergen {
    color: var(--color-text);
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.torro-rank-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
}

.torro-rank-head .torro-eyebrow {
    margin-bottom: 0;
}

.torro-rank-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background-color: var(--color-competition);
}

.torro-rank-stats {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.torro-rank-stat {
    display: flex;
    flex-direction: column;
}

.torro-rank-stat-value {
    font-size: 26px;
    line-height: 1;
}

.torro-cta-wrap {
    margin-top: var(--spacing-xs);
    text-align: center;
}

.torro-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background-color: var(--color-card);
    color: var(--color-text);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 15px;
    padding: var(--spacing-md);
    border: 1.5px solid var(--color-text);
    border-radius: 16px;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.torro-cta:hover {
    background-color: var(--color-text);
    color: var(--color-card);
    transform: translateY(-2px);
}

.torro-cta-arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform var(--transition-fast);
}

.torro-cta:hover .torro-cta-arrow {
    transform: translateX(3px);
}

.torro-cta-note {
    font-family: var(--font-family);
    font-style: italic;
    font-size: 11.5px;
    color: var(--color-text-light-dark);
    margin: var(--spacing-sm) 0 0;
}

.torro-related {
    max-width: 420px;
    margin: var(--spacing-lg) auto 0;
}

.torro-related-title {
    font-family: var(--font-family-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin: 0 0 var(--spacing-md);
}

.torro-related-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.torro-related-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    text-decoration: none;
    color: var(--color-text);
}

.torro-related-image {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background-color: var(--color-placeholder-1);
    margin-bottom: 6px;
}

.torro-related-name {
    font-family: var(--font-family);
    font-size: 11.5px;
    text-align: center;
    line-height: 1.25;
}

@media (max-width: 480px) {
    .torro-photo {
        max-width: 180px;
        height: 220px;
    }

    .torro-rank-stat-value {
        font-size: 22px;
    }
}

/* ========================================
   Press / Stats Page (/premsa)
   .press-grid/.press-card/.press-card-title/.press-stat-name/
   .press-stat-value/.press-empty/.press-duel/.press-duel-side/
   .press-duel-score below are ALSO used by wrapped.html - left
   untouched. press.html's own Data Page reskin (source of truth:
   docs/design-deliverables/Torrorendum Data Page.dc.html) lives in
   the dedicated, press.html-exclusive block further down.
   ======================================== */

.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.press-card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
}

.press-card-title {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md);
}

.press-stat-name {
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.press-stat-value {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.press-empty {
    color: var(--color-text-light);
    font-style: italic;
}

.press-duel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    text-align: center;
}

.press-duel-side {
    flex: 1;
}

.press-duel-side .press-stat-name {
    font-size: var(--font-size-sm);
}

.press-duel-score {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .press-duel {
        flex-direction: column;
    }
}

/* ========================================
   Press / Stats Page (/premsa) - Data Page reskin
   press.html-exclusive classes (not shared with wrapped.html).
   Screenshot-friendly numbers page for journalists: high contrast,
   big numbers, minimal decoration, honest numbers only - no stat
   renders here unless PressContent actually provides it.
   ======================================== */

#press-container {
    --press-radius: 14px;
    --press-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
}

.press-masthead {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.press-eyebrow {
    display: block;
    font-family: var(--press-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
    margin: 0 0 var(--spacing-sm);
}

.press-title {
    font-size: 2.4rem;
    line-height: 1.1;
    margin: 0;
}

.press-subtitle {
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-text-light-dark);
    max-width: 640px;
    margin: var(--spacing-sm) 0 0;
}

.press-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.press-data-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--press-radius);
    padding: 32px 34px;
}

.press-note {
    font-style: italic;
    color: var(--color-text-light-dark);
    max-width: 560px;
    margin: var(--spacing-md) 0 0;
}

.press-card-empty {
    color: var(--color-text-light-dark);
    font-style: italic;
    margin: 0;
}

.press-credit {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    font-family: var(--press-mono);
    font-size: 10.5px;
    letter-spacing: .4px;
    color: var(--color-text-light);
}

.press-credit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-competition);
    flex-shrink: 0;
}

/* Headline stat: most voted torró */
.press-headline-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.press-headline-image {
    width: 84px;
    height: 84px;
    border-radius: var(--border-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.press-headline-name {
    font-size: 2rem;
    line-height: 1.1;
}

.press-headline-value {
    font-family: var(--press-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-text);
    margin-top: 6px;
}

.press-headline-unit {
    font-family: var(--font-family);
    font-weight: 400;
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light-dark);
}

/* Sub-stats: biggest riser + closest duel */
.press-substats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.press-substat-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.press-substat-image {
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.press-substat-name {
    font-size: 1.35rem;
    line-height: 1.15;
}

.press-riser-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--spacing-xs);
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-tint);
    font-family: var(--press-mono);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-primary-dark);
}

.press-riser-arrow {
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-bottom: 7px solid var(--color-primary);
}

.press-duel-names {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 1.3rem;
}

.press-duel-side {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.press-duel-vs {
    font-family: var(--font-family);
    font-style: italic;
    font-weight: 400;
    font-size: var(--font-size-base);
    color: var(--color-text-light-dark);
}

.press-duel-bar {
    display: flex;
    height: 14px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-top: var(--spacing-md);
}

.press-duel-bar-a {
    background: var(--color-competition);
    height: 100%;
}

.press-duel-bar-b {
    background: var(--color-border);
    height: 100%;
}

.press-duel-percentages {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--press-mono);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.press-duel-percentage-a {
    color: var(--color-competition);
}

.press-duel-percentage-b {
    color: var(--color-text-light-dark);
}

.press-duel-total {
    margin-top: var(--spacing-sm);
}

/* Champion / Gran Final - the one burgundy moment on this page.
   Audit finding: border must use the canonical burgundy token
   (--color-competition, #8A2638), not the undocumented #6E1D2A. */
.press-champion-card {
    background: var(--color-competition);
    border-color: var(--color-competition);
    color: var(--color-competition-contrast);
}

.press-champion-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.press-champion-eyebrow {
    font-family: var(--press-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-brand-gold);
}

.press-champion-pill {
    background: var(--color-brand-gold);
    color: var(--color-text);
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.press-champion-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.press-champion-image {
    width: 84px;
    height: 84px;
    border-radius: var(--border-radius);
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-brand-gold);
}

.press-champion-name {
    font-size: 2rem;
    line-height: 1.1;
    color: var(--color-competition-contrast);
}

.press-champion-tag {
    font-style: italic;
    font-family: var(--font-family);
    color: rgba(255, 250, 241, .75);
    margin-top: 4px;
}

.press-champion-btn {
    margin-top: var(--spacing-md);
    margin-left: 0;
}

.press-champion-empty {
    color: rgba(255, 250, 241, .75);
    font-style: italic;
    margin: 0;
}

.press-methodology {
    font-family: var(--press-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--color-text-light-dark);
    max-width: 680px;
    margin: var(--spacing-xl) 0 0;
}

.press-section-title {
    margin: 0 0 var(--spacing-sm);
}

.press-embed-section {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--press-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.press-embed-description {
    color: var(--color-text-light-dark);
    margin-bottom: var(--spacing-md);
}

.press-embed-label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.press-embed-select {
    width: 100%;
    max-width: 320px;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.press-embed-textarea {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    font-family: monospace;
    font-size: var(--font-size-sm);
    resize: vertical;
    background: var(--color-background);
    color: var(--color-text);
}

.press-embed-copy {
    margin-bottom: var(--spacing-lg);
}

.press-embed-preview {
    display: flex;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-background);
    border-radius: var(--border-radius);
}

.press-embed-preview iframe {
    max-width: 100%;
    border: 0;
}

@media (max-width: 640px) {
    .press-data-card {
        padding: 24px 22px;
    }

    .press-title {
        font-size: 1.85rem;
    }

    .press-headline-name,
    .press-champion-name {
        font-size: 1.5rem;
    }

    .press-headline-value {
        font-size: 1.4rem;
    }

    .press-duel-names {
        justify-content: center;
        text-align: center;
    }
}

/* ========================================
   Advent Calendar (24-door duel)
   See docs/design-deliverables/Torrorendum Advent Calendar.dc.html
   ======================================== */

.advent-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    animation: fadeIn 0.5s ease-in;
}

.advent-hero {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.advent-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.advent-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text);
}

.advent-title {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    margin-top: var(--spacing-md);
}

.advent-subtitle {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-text-light-dark);
    max-width: 480px;
    margin: var(--spacing-sm) auto 0;
}

.advent-legend {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

.advent-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.advent-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    flex: none;
}

.advent-legend-swatch--today {
    background: linear-gradient(160deg, var(--color-text), #4A3223); /* decoratiu d'Advent */
    border: 1.5px solid var(--color-brand-gold);
}

.advent-legend-swatch--locked {
    background: repeating-linear-gradient(135deg, #F5EAD3, #F5EAD3 4px, #EFE0BF 4px, #EFE0BF 8px); /* decoratiu d'Advent */
    border: 1.5px dashed var(--color-border-dashed);
}

.advent-legend-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.advent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: var(--spacing-xl);
}

.advent-door {
    position: relative;
    border-radius: 16px;
    padding: 10px;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

/* "Today" door: the one real, votable duel. Not a numbered day claim
   (the backend only ever knows "today", not a specific Dec 1-24 date),
   so it spans the full grid width instead of occupying a numbered slot. */
.advent-door--today {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(160deg, var(--color-text), #4A3223); /* decoratiu d'Advent */
    border: 2px solid var(--color-brand-gold);
    box-shadow: 0 0 0 4px rgba(239, 194, 110, 0.22), var(--shadow-sticker);
    transform: rotate(-1deg);
    min-height: 140px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform var(--transition-normal);
}

.advent-door--today:hover,
.advent-door--today:focus-visible {
    transform: rotate(-1deg) translateY(-3px);
}

.advent-door-ribbon {
    align-self: flex-start;
    background: var(--color-primary);
    color: var(--color-text);
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 6px;
    transform: rotate(-2deg);
    box-shadow: var(--shadow-sticker-badge);
}

.advent-door-vs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
}

.advent-door-swatch {
    flex: 1;
    height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--color-brand-gold);
}

.advent-door-swatch--a {
    background: var(--color-primary);
}

.advent-door-swatch--b {
    background: #6B4A34; /* decoratiu d'Advent */
}

.advent-door-vs-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    background: var(--color-competition);
    color: var(--color-competition-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 9px;
}

.advent-door-today-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
    color: var(--color-brand-gold);
}

/* Locked/future doors: decorative only (no per-day history is available
   without backend changes), so every one uses the same neutral, non-claiming
   "still wrapped" treatment. Audit fix: dashed border stays neutral, never
   burgundy (burgundy is reserved for competition-only accents elsewhere). */
.advent-door--locked {
    background: repeating-linear-gradient(135deg, #F5EAD3, #F5EAD3 8px, #EFE0BF 8px, #EFE0BF 16px); /* decoratiu d'Advent */
    border: 1.5px dashed var(--color-border-dashed);
}

.advent-door-lock {
    align-self: flex-end;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: none;
    /* Audit fix: canonical secondary-text token, not the undocumented #B3A182 */
    border: 2px solid var(--color-text-light);
}

.advent-door-num {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 24px;
    color: #D8AC4E; /* decoratiu d'Advent — not used for text/interactive affordances */
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}

.advent-door-hint {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 9px;
    color: var(--color-text-light-dark);
    text-align: center;
}

.advent-duel {
    margin-top: var(--spacing-md);
}

.advent-torron-comparison {
    margin-top: var(--spacing-md);
}

.advent-torron-card {
    border-radius: var(--radius-card);
    border: 1.5px solid var(--color-border);
    box-shadow: var(--shadow-sticker);
}

.advent-torron-card:nth-child(1) { transform: rotate(-1deg); }
.advent-torron-card:nth-child(3) { transform: rotate(1deg); }

.advent-vs-badge {
    align-self: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-competition);
    color: var(--color-competition-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 13px;
    transform: rotate(-4deg);
    box-shadow: var(--shadow-sticker-badge);
}

.advent-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.advent-footer-tag {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-light);
}

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

    .advent-torron-comparison.torron-comparison {
        flex-direction: column;
    }

    .advent-vs-badge {
        transform: rotate(-4deg) translateY(-4px);
    }
}

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

/* ========================================
   Friends — Circles, Invite, Circle Podium
   (Viral Drop reskin: public/templates/friends.html)
   ======================================== */

.friends-eyebrow {
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

/* Scoped, non-destructive polish for the shared empty/error card shells so
   they match the cream/caramel surfaces on this screen — the base
   .history-empty/.leaderboard-error rules above are untouched and still
   apply as-is on every other screen that uses them. */
#friends-container .history-empty,
#friends-container .leaderboard-error {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
}

/* Circle list (friends-index) */
.friends-circle-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
    transform: rotate(-1deg);
    transition: transform var(--transition-normal);
}

.friends-circle-card:nth-child(even) {
    transform: rotate(1deg);
}

.friends-circle-card:hover {
    transform: rotate(0deg) translateY(-2px);
}

.friends-circle-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background-color: var(--color-surface);
    border-radius: 50%;
}

.friends-circle-meta {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Invite link box (friends-created) */
.friends-invite-box {
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: var(--color-background);
    border: 1.5px dashed var(--color-border-dashed);
    border-radius: var(--radius-button);
}

.friends-invite-link-text {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    word-break: break-all;
    text-align: center;
}

.friends-invite-copy-btn {
    border-radius: var(--radius-pill);
    background-color: var(--color-text);
}

/* Bridge CTA to the circle leaderboard (friends-created) */
.friends-bridge-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-background);
    border: 1.5px dashed var(--color-border-dashed);
    border-radius: var(--radius-button);
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.friends-bridge-card:hover {
    transform: translateY(-2px);
}

.friends-bridge-card:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 3px;
}

.friends-bridge-icon {
    flex: none;
    font-size: 1.5rem;
}

.friends-bridge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.friends-bridge-title {
    font-family: var(--font-family-display);
    font-weight: 700;
    color: var(--color-text);
    font-size: var(--font-size-base);
}

.friends-bridge-subtitle {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Back-to-global-leaderboard link (friends-leaderboard footer) */
.friends-global-link {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
    text-decoration: none;
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
}

.friends-global-link:hover {
    text-decoration: underline;
}

/* Circle podium — only rendered when the circle has 3+ ranked torrons (see
   friends.html's "friends-leaderboard" define); for 1-2 entries the honest
   flat state below is used instead so we never fabricate empty 2nd/3rd
   place slots. */
.friends-podium {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.friends-podium-label {
    text-align: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--color-text-light);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-surface);
}

.podium-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-radius: var(--radius-button);
    padding: var(--spacing-md);
}

.podium-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: var(--shadow-sticker-badge);
}

.podium-photo {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.podium-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-info {
    flex: 1;
    min-width: 0;
}

.podium-name {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-base);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: 2px;
}

.podium-info .torron-info-link {
    display: inline-block;
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

.podium-score {
    flex: none;
    text-align: right;
}

.podium-elo {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}

.podium-elo-label {
    font-size: 0.65rem;
    letter-spacing: .5px;
    color: var(--color-text-light);
    margin-top: 2px;
}

/* Rank 1 — gold medal tier on the reserved competition (burgundy) surface;
   this is the one "winner" moment on this screen. */
.podium-rank-1 {
    background-color: var(--color-competition);
    border: 2px solid var(--color-brand-gold);
}

.podium-rank-1 .podium-badge {
    background-color: var(--color-brand-gold);
    color: var(--color-text);
}

.podium-rank-1 .podium-photo {
    width: 64px;
    height: 64px;
    border-color: var(--color-competition-contrast);
}

.podium-rank-1 .podium-name,
.podium-rank-1 .podium-elo {
    color: var(--color-competition-contrast);
}

.podium-rank-1 .podium-meta,
.podium-rank-1 .podium-elo-label {
    color: var(--color-competition-contrast);
    opacity: .7;
}

.podium-rank-1 .torron-info-link {
    color: var(--color-brand-gold);
}

/* Rank 2 — caramel medal tier */
.podium-rank-2 {
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
}

.podium-rank-2 .podium-badge {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.podium-rank-2 .podium-photo {
    width: 54px;
    height: 54px;
}

/* Rank 3 — caramel fosc ("bronze") medal tier */
.podium-rank-3 {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
}

.podium-rank-3 .podium-badge {
    background-color: var(--color-primary-dark);
    color: var(--color-competition-contrast);
}

.friends-rest-list {
    margin-top: 0;
}

/* Honest non-podium state for circles with only 1-2 ranked torrons */
.friends-honest-state {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.friends-honest-hint {
    background-color: var(--color-surface);
    border: 1.5px dashed var(--color-border-dashed);
    border-radius: var(--radius-button);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
}

.friends-honest-hint-title {
    font-family: var(--font-family-display);
    font-weight: 700;
    color: var(--color-text);
}

.friends-honest-hint-text {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

@media (max-width: 480px) {
    .podium-name {
        font-size: var(--font-size-sm);
    }

    .podium-elo {
        font-size: var(--font-size-base);
    }
}

/* ========================================
   Wrapped Recap Page (/wrapped)
   A campaign-end "year in review" moment —
   one continuous dark stage (echoes the
   #countdown-widget dark-card recipe) with
   light sticker cards floating on top for
   each highlighted stat. See docs/design-
   deliverables/Torrorendum Wrapped.dc.html.
   ======================================== */

#wrapped-container {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    animation: fadeIn 0.5s ease-in;
}

.wrapped-stage {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-text) 0%, var(--color-competition-dark) 100%);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.wrapped-stage-glow {
    position: absolute;
    z-index: 0;
    top: 20%;
    left: 50%;
    width: 380px;
    height: 380px;
    max-width: 90%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-brand-gold) 0%, transparent 70%);
    opacity: 0.22;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.wrapped-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-brand-gold);
}

.wrapped-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}

.wrapped-title {
    position: relative;
    color: var(--color-card);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.15;
    margin-top: var(--spacing-md);
}

.wrapped-subtitle {
    position: relative;
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-card);
    opacity: 0.7;
    margin-top: var(--spacing-xs);
}

.wrapped-stat-hero {
    position: relative;
    margin-top: var(--spacing-xl);
}

.wrapped-stat-number {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: clamp(3.5rem, 16vw, 6rem);
    line-height: 0.95;
    color: var(--color-card);
}

.wrapped-stat-label {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-brand-gold);
    margin-top: var(--spacing-sm);
}

.wrapped-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    text-align: left;
}

.wrapped-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sticker);
    transform: rotate(-1deg);
}

.wrapped-grid .wrapped-card:nth-child(2) {
    transform: rotate(1deg);
}

.wrapped-grid .wrapped-card:nth-child(3) {
    transform: rotate(-0.6deg);
}

.wrapped-card-eyebrow {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.wrapped-empty {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-text-light);
    margin: 0;
}

.wrapped-duel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.wrapped-duel-side {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.wrapped-duel-name {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow-wrap: break-word;
}

.wrapped-duel-pct {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin-top: 2px;
}

.wrapped-duel-vs {
    flex: none;
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--color-competition-contrast);
    background: var(--color-competition);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sticker-badge);
}

.wrapped-stat-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.wrapped-stat-name {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.wrapped-stat-caption {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

.wrapped-bar-track {
    width: 100%;
    height: 10px;
    background: var(--color-surface);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.wrapped-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

.wrapped-bracket-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.wrapped-bracket-stat {
    display: flex;
    flex-direction: column;
}

.wrapped-bracket-value {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-xl);
    color: var(--color-text);
}

.wrapped-bracket-key {
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-top: 2px;
}

.wrapped-champion-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-competition-dark);
    background: var(--color-competition-tint);
    border: 1px solid var(--color-competition);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    margin-top: var(--spacing-sm);
}

.wrapped-share {
    position: relative;
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapped-share-text {
    font-family: var(--font-family);
    font-style: italic;
    color: var(--color-card);
    opacity: 0.7;
    margin: 0 0 var(--spacing-md);
}

.wrapped-download-btn {
    display: inline-block;
    background: var(--color-competition);
    color: var(--color-competition-contrast);
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-base);
    text-decoration: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-button);
    box-shadow: 0 4px 0 var(--color-competition-dark);
    transform: rotate(-1deg);
    transition: all var(--transition-normal);
}

.wrapped-download-btn:hover {
    transform: rotate(-1deg) translateY(-2px);
    box-shadow: 0 4px 0 var(--color-competition-dark);
}

.wrapped-download-btn:active {
    transform: rotate(-1deg) translateY(2px);
    box-shadow: 0 2px 0 var(--color-competition-dark);
}

.wrapped-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
}

@media (max-width: 640px) {
    .wrapped-stage {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: var(--border-radius-lg);
    }

    .wrapped-bracket-stats {
        gap: var(--spacing-md);
    }
}

/* ========================================
   Torró Personality Reveal Page (/reveal)
   Design prompt 14. Reuses #stats-container/
   .stats-hero/.stats-tiles from the Personal
   Stats page (mid-campaign persona/percentile
   moment) rather than the Wrapped page's dark
   "year in review" stage above - see reveal.html's
   own doc comment on the deferred full-screen
   ceremony treatment. See docs/design-
   deliverables/Torrorendum Reveal Moment.dc.html
   and Torrorendum Story Card.dc.html (reveal
   variant) for the deferred visual target.
   ======================================== */

#reveal-container {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
    animation: fadeIn 0.5s ease-in;
}

.reveal-persona {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.reveal-persona-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background-color: var(--color-primary-tint);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-pill);
    padding: 8px 18px;
}

.reveal-persona-tagline {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    max-width: 520px;
    margin: var(--spacing-md) auto 0;
}

.reveal-torro-card {
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sticker);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.reveal-torro-name {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin-top: var(--spacing-sm);
}

.reveal-torro-tag {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 600;
    font-size: var(--font-size-sm);
    letter-spacing: 0.4px;
    color: var(--color-primary-dark);
    margin-top: var(--spacing-xs);
}

.reveal-torro-stats {
    display: flex;
    align-items: stretch;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-surface);
}

.reveal-torro-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reveal-torro-stat:first-child {
    border-right: 1px solid var(--color-surface);
}

.reveal-torro-stat-value {
    font-family: var(--font-family-display);
    font-weight: 800;
    font-size: var(--font-size-xl);
    color: var(--color-text);
}

.reveal-torro-stat-value--accent {
    color: var(--color-competition);
}

.reveal-torro-stat-label {
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.reveal-torro-footnote {
    font-family: var(--font-family);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: var(--spacing-md) 0 0;
}

/* ========================================
   Site-wide footer (shared "footer" template define)
   ======================================== */

#site-footer {
    max-width: 640px;
    margin: var(--spacing-lg) auto 0;
    padding: var(--spacing-lg) var(--spacing-md);
    border-top: 1.5px solid var(--color-border);
    text-align: center;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.site-footer-nav a {
    font-family: var(--font-family-display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus-visible {
    text-decoration: underline;
}

.site-footer-disclosure {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-light);
    max-width: 480px;
    margin: 0 auto;
}

/* ========================================
   Evergreen content pages (/sobre, /torro-agramunt-igp,
   /torro-agramunt-vs-xixona, /tipus-de-torrons)
   Shared long-form article layout - narrower measure than the Data Page
   (.press-* above) since this is prose meant to be read, not scanned.
   ======================================== */

#content-page-container {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
}

.content-masthead {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.content-eyebrow {
    display: block;
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-light-dark);
    margin: 0 0 var(--spacing-sm);
}

.content-title {
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 0;
}

.content-subtitle {
    font-size: var(--font-size-base);
    font-style: italic;
    color: var(--color-text-light-dark);
    max-width: 560px;
    margin: var(--spacing-sm) 0 0;
}

.content-body h2 {
    font-size: var(--font-size-xl);
    margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.content-body h2:first-child {
    margin-top: 0;
}

.content-body h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-lg) 0 var(--spacing-xs);
}

.content-body p {
    margin: 0 0 var(--spacing-md);
}

.content-body ul,
.content-body ol {
    margin: 0 0 var(--spacing-md);
    padding-left: 1.4em;
}

.content-body li {
    margin-bottom: var(--spacing-xs);
}

.content-body a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* FAQ disclosure widget - native <details>/<summary>, zero JS */
.content-faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-md) 0;
}

.content-faq-item:first-of-type {
    border-top: 1px solid var(--color-border);
}

.content-faq-question {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-lg);
    cursor: pointer;
    list-style: none;
}

.content-faq-question::-webkit-details-marker {
    display: none;
}

.content-faq-question::before {
    content: '+';
    display: inline-block;
    width: 1em;
    color: var(--color-primary-dark);
}

.content-faq-item[open] .content-faq-question::before {
    content: '\2212';
}

.content-faq-answer {
    margin: var(--spacing-sm) 0 0;
    color: var(--color-text-light-dark);
}

.content-cross-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.content-cross-link {
    font-family: var(--font-family-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    text-decoration: none;
}

.content-cross-link:hover,
.content-cross-link:focus-visible {
    background: var(--color-surface);
}

.content-footnote {
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: var(--spacing-lg) 0 0;
}