/* ===========================================================================
 * AI News Digest — style.css
 * Hand-crafted CSS with thorough learning comments
 * ===========================================================================
 *
 * This stylesheet is organized into these sections:
 *   1. CSS Custom Properties (theme variables)
 *   2. Dark Mode Override
 *   3. Reset & Base Styles
 *   4. Layout: Header
 *   5. Layout: Articles Grid (CSS Grid)
 *   6. Component: Article Card
 *   7. Component: Card Image & AI Badge
 *   8. Component: Card Content
 *   9. Component: Read More Button
 *  10. Component: Source Link
 *  11. Layout: Footer
 *  12. Layout: Legal Pages
 *  13. Responsive Breakpoints
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. CSS CUSTOM PROPERTIES (a.k.a. CSS Variables)
 * ---------------------------------------------------------------------------
 * Custom properties let you define reusable values in one place.
 * They're declared with the -- prefix and accessed with var(--name).
 *
 * :root targets the <html> element — the highest level — making these
 * variables available to every element on the page.
 *
 * This is our LIGHT THEME (the default).
 * --------------------------------------------------------------------------- */
:root {
    /* Background and surface colors */
    --color-bg: #f8f9fa;            /* Page background: very light grey */
    --color-surface: #ffffff;        /* Card background: white */

    /* Text colors */
    --color-text: #1a1a2e;           /* Primary text: near-black with a slight blue tone */
    --color-text-muted: #6c757d;     /* Secondary text: medium grey for dates, captions */

    /* Accent color (links, buttons, badges) */
    --color-accent: #2563eb;         /* A vibrant blue */
    --color-accent-hover: #1d4ed8;   /* Darker blue for hover states */

    /* Borders and decorative elements */
    --color-border: #e2e8f0;         /* Subtle border: very light grey-blue */

    /* AI badge specific colors */
    --color-badge-bg: rgba(37, 99, 235, 0.1);   /* Semi-transparent blue background */
    --color-badge-text: #2563eb;                  /* Blue text to match accent */

    /* Shadows — subtle depth for cards */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Geometry */
    --radius: 12px;                  /* Border radius for cards and buttons */
    --max-width: 1200px;             /* Maximum content width for readability */
}


/* ---------------------------------------------------------------------------
 * 2. DARK MODE via prefers-color-scheme
 * ---------------------------------------------------------------------------
 * The @media query (prefers-color-scheme: dark) checks the user's OS/browser
 * setting. If they prefer dark mode, these variable overrides take effect.
 *
 * Because we're only overriding custom properties (not rewriting selectors),
 * the entire page theme switches with zero duplication of CSS rules.
 * --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;                        /* Deep navy background */
        --color-surface: #1e293b;                    /* Slightly lighter navy for cards */
        --color-text: #e2e8f0;                       /* Light grey text */
        --color-text-muted: #94a3b8;                 /* Medium grey for secondary text */
        --color-accent: #60a5fa;                     /* Lighter blue that's readable on dark */
        --color-accent-hover: #93c5fd;               /* Even lighter on hover */
        --color-border: #334155;                     /* Dark grey-blue border */
        --color-badge-bg: rgba(96, 165, 250, 0.15); /* Semi-transparent light blue */
        --color-badge-text: #60a5fa;
        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
}


/* ---------------------------------------------------------------------------
 * 3. RESET & BASE STYLES
 * ---------------------------------------------------------------------------
 * box-sizing: border-box makes width/height include padding and border,
 * which is far more intuitive than the default content-box model.
 *
 * The *, *::before, *::after selector applies this to EVERY element.
 * --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* System font stack: uses the OS's native font for a fast, native feel.
     * No external font files = no extra network requests = faster loading
     * and no GDPR concerns about third-party font services like Google Fonts. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", sans-serif;

    background-color: var(--color-bg);
    color: var(--color-text);

    /* line-height 1.6 gives comfortable spacing between lines of text.
     * The default (roughly 1.2) feels cramped for body text. */
    line-height: 1.6;

    /* Smooth transitions when the OS theme changes (light ↔ dark).
     * Without this, the color change would be instantaneous and jarring. */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove default link underlines globally; we'll add them back selectively */
a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Ensure images are responsive by default */
img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------------------------
 * 4. HEADER
 * ---------------------------------------------------------------------------
 * text-align: center centers all inline content within the header.
 * --------------------------------------------------------------------------- */
header {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;  /* Slightly tighter letter spacing looks better at large sizes */
}

/* .subtitle — the tagline beneath the site title */
.subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

/* Navigation pill bar below the subtitle */
.site-nav {
    display: inline-flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.15rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.nav-btn.active {
    background-color: var(--color-accent);
    color: #ffffff;
    font-weight: 600;
}


/* ---------------------------------------------------------------------------
 * 5. ARTICLES GRID — CSS Grid Layout
 * ---------------------------------------------------------------------------
 * CSS Grid is a two-dimensional layout system.
 *
 * display: grid       → activates grid layout on this container
 * grid-template-columns: repeat(3, 1fr) → creates 3 equal-width columns
 *   - "1fr" means "1 fraction of the available space"
 *   - repeat(3, 1fr) is shorthand for "1fr 1fr 1fr"
 * gap: 2rem           → adds 2rem spacing between grid items (both rows & cols)
 *
 * max-width + margin: 0 auto → centers the grid horizontally on wide screens
 * --------------------------------------------------------------------------- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 2rem 3rem;
}


/* ---------------------------------------------------------------------------
 * 6. ARTICLE CARD
 * ---------------------------------------------------------------------------
 * Each card uses flexbox (flex-direction: column) internally so that:
 *   - The image sits at the top
 *   - The content fills the remaining space
 *   - The "Read More" button is pushed to the bottom (via margin-top: auto)
 *
 * The ENTIRE card is an interactive tile with cursor: pointer.
 * Clicking anywhere on the tile expands/collapses the full article body.
 * --------------------------------------------------------------------------- */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    overflow: hidden;

    /* Flexbox column layout inside the card */
    display: flex;
    flex-direction: column;

    /* Entire tile is interactive */
    cursor: pointer;
    user-select: none; /* Prevents text selection accidental highlights when clicking card */

    /* Smooth hover effect — the shadow deepens slightly */
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);  /* Lifts the card up slightly on hover */
    border-color: var(--color-accent);
}

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


/* ---------------------------------------------------------------------------
 * 7. CARD IMAGE & AI BADGE
 * ---------------------------------------------------------------------------
 * position: relative on .card-image creates a "positioning context" so that
 * the .ai-badge (position: absolute) is positioned relative to the image
 * container — not the whole page.
 *
 * aspect-ratio: 16/9 ensures the image always maintains a widescreen ratio
 * regardless of the source image's dimensions.
 *
 * object-fit: cover makes the image fill the entire area, cropping any
 * overflow rather than stretching or squishing.
 * --------------------------------------------------------------------------- */
.card-image {
    position: relative;  /* Creates positioning context for the badge */
}

.card-image img {
    width: 100%;
    height: auto;
    display: block;       /* Removes the small gap below inline images */
    aspect-ratio: 16 / 9; /* Maintains consistent proportions */
    object-fit: cover;     /* Crops to fill, never distorts */
}

/* AI-generated image badge — positioned in the bottom-left of the image.
 * backdrop-filter: blur creates a frosted-glass (glassmorphism) effect. */
.ai-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: var(--color-badge-bg);
    color: var(--color-badge-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    backdrop-filter: blur(8px);  /* Blurs whatever is behind the badge */
    -webkit-backdrop-filter: blur(8px);  /* Safari support */
}


/* ---------------------------------------------------------------------------
 * 8. CARD CONTENT
 * ---------------------------------------------------------------------------
 * flex: 1 tells this element to grow and fill all remaining vertical space
 * inside the card (after the image). This ensures all cards in a row have
 * equal height even if their text lengths differ.
 * --------------------------------------------------------------------------- */
.card-content {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;             /* Grow to fill remaining card height */
}

/* Date/time label — small uppercase text for a clean editorial look.
 * letter-spacing: 0.05em adds breathing room between letters. */
.card-content time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Article title */
.card-content h2 {
    font-size: 1.2rem;
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

/* Summary paragraph — flex-grow pushes the button below it to the bottom */
.summary {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    flex-grow: 1;  /* Takes up remaining space, pushing button downward */
    margin-bottom: 1rem;
}

/* Expandable body text — hidden by default via the HTML "hidden" attribute.
 * When revealed by JavaScript, we add the .expanded class for animation. */
.card-body {
    font-size: 0.95rem;
    line-height: 1.7;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    white-space: pre-line;
    user-select: text;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* When the hidden attribute is removed AND .expanded is added by JS */
.card-body.expanded {
    max-height: 1500px;  /* Accommodates longer multi-paragraph articles */
    opacity: 1;
    padding-top: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* Override the browser's default [hidden] display:none when we want animation.
 * We use max-height: 0 + opacity: 0 instead for a smooth transition. */
.card-body[hidden] {
    display: block !important;  /* Override hidden's display:none */
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: none;
}


/* ---------------------------------------------------------------------------
 * 9. READ MORE BUTTON
 * ---------------------------------------------------------------------------
 * This button serves as a visual indicator and accessibility anchor.
 * Because clicking anywhere on the tile toggles expansion, pointer-events: none
 * ensures clicks directly over the button bubble straight to the card container.
 * --------------------------------------------------------------------------- */
.read-more-btn {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: auto;   /* Pushes button to the bottom of the flex container */
    align-self: flex-start;  /* Prevents the button from stretching full width */
    pointer-events: none;    /* Transparent to pointer clicks so whole tile triggers toggle */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.card:hover .read-more-btn {
    background-color: var(--color-accent);
    color: #ffffff;
}


/* ---------------------------------------------------------------------------
 * 10. SOURCE LINK
 * --------------------------------------------------------------------------- */
.source {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
}

.source a {
    color: var(--color-accent);
    position: relative;
    z-index: 2;          /* Ensures link stays on top and independently clickable */
    pointer-events: auto;
}

.source a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * 11. FOOTER
 * ---------------------------------------------------------------------------
 * The footer contains the designer credit, legal page links, and a note
 * about cookies/tracking.
 * --------------------------------------------------------------------------- */
footer {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-border);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.designer-credit {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Legal page links — spaced out with a gap between them */
.legal-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;           /* Adds horizontal space between the two links */
    margin-bottom: 0.75rem;
}

.legal-links a {
    color: var(--color-accent);
    font-size: 0.9rem;
}

.footer-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
    line-height: 1.5;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------------------------
 * 12. LEGAL PAGES (Impressum, Datenschutz)
 * ---------------------------------------------------------------------------
 * A narrower, centered layout optimized for reading long-form text.
 * max-width: 800px keeps lines at a comfortable reading length (~65-75 chars).
 * --------------------------------------------------------------------------- */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    line-height: 1.8;      /* Extra line height for dense legal text */
}

.legal-page h1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.legal-page h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
}

.legal-page p,
.legal-page ul {
    margin-bottom: 1rem;
    color: var(--color-text);
}

.legal-page ul {
    padding-left: 1.5rem;
}

.legal-page .back-link {
    display: inline-block;
    margin-top: 2rem;
    color: var(--color-accent);
    font-weight: 500;
}


/* ---------------------------------------------------------------------------
 * 13. RESPONSIVE BREAKPOINTS
 * ---------------------------------------------------------------------------
 * @media queries let you apply different styles at different screen widths.
 *
 * We use a "desktop-first" approach here:
 *   - Default styles target large screens (3 columns)
 *   - max-width: 1024px targets tablets (2 columns)
 *   - max-width: 640px targets phones (1 column)
 *
 * The grid automatically reflows the cards to fit the new column count.
 * --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 columns on tablets */
        padding: 1rem 1.5rem 2rem;
    }
}

@media (max-width: 640px) {
    .articles-grid {
        grid-template-columns: 1fr;  /* 1 column on phones — cards stack vertically */
        padding: 1rem 1rem 2rem;
    }

    header h1 {
        font-size: 1.5rem;  /* Slightly smaller title on phones */
    }

    .card-content h2 {
        font-size: 1.1rem;
    }
}


/* ---------------------------------------------------------------------------
 * 14. TOPIC WHEEL COMPONENT
 * ---------------------------------------------------------------------------
 * An interactive decision wheel adapted from data/index.html to fit seamlessly
 * into our design system with responsive CSS and dark mode support.
 * --------------------------------------------------------------------------- */
.wheel-page {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 3rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

.wheel-app {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1050px;
}

.wheel-section {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wheel-container {
    position: relative;
    width: 440px;
    height: 440px;
}

canvas#wheel {
    width: 440px;
    height: 440px;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: var(--color-surface);
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    background: var(--color-surface);
    border: 4px solid var(--color-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Pointer arrow ▶ on the right */
.pointer {
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 28px solid var(--color-accent);
    z-index: 3;
    filter: drop-shadow(-2px 0 4px rgba(0, 0, 0, 0.3));
}

/* Right-hand side panel */
.panel-section {
    flex: 1;
    min-width: 320px;
    max-width: 440px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.input-row {
    display: flex;
    gap: 8px;
}

.input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-row input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-badge-bg);
}

.input-row input::placeholder {
    color: var(--color-text-muted);
}

.btn-add {
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-add:hover {
    background: var(--color-accent-hover);
    transform: scale(1.03);
}

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
}

.list-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.list-header h3 span {
    color: var(--color-text-muted);
    font-weight: 400;
}

.header-actions {
    display: flex;
    gap: 6px;
}

.header-actions button {
    background: none;
    border: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.header-actions button:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

.slice-list {
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
}

.slice-list::-webkit-scrollbar {
    width: 5px;
}

.slice-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.slice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid var(--color-border);
    transition: opacity 0.2s ease;
}

.slice-item.disabled {
    opacity: 0.4;
    text-decoration: line-through;
}

.slice-name {
    flex: 1;
    font-size: 0.92rem;
    color: var(--color-text);
    padding-right: 8px;
}

.slice-actions {
    display: flex;
    gap: 6px;
}

.btn-toggle,
.btn-delete {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-toggle {
    background: var(--color-badge-bg);
    color: var(--color-accent);
    font-weight: 600;
}

.btn-toggle:hover {
    background: var(--color-accent);
    color: #ffffff;
}

.btn-toggle.off {
    background: var(--color-border);
    color: var(--color-text-muted);
}

.btn-delete {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.btn-delete:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-spin {
    width: 100%;
    padding: 13px;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.btn-spin:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-spin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Winner Overlay Modal */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 100;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.overlay.active {
    display: flex;
}

.winner-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 40px 48px;
    text-align: center;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    animation: pop 0.35s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

@keyframes pop {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.winner-card h2 {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
    font-weight: 500;
}

.winner-card .winner-name {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 24px;
    line-height: 1.3;
}

.winner-card button {
    padding: 10px 28px;
    background: var(--color-accent);
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s ease;
}

.winner-card button:hover {
    background: var(--color-accent-hover);
}

@media (max-width: 900px) {
    .wheel-app {
        flex-direction: column;
        gap: 2rem;
    }

    .wheel-container,
    canvas#wheel {
        width: 320px;
        height: 320px;
    }

    .panel-section {
        min-width: 0;
        width: 100%;
        max-width: 480px;
    }
}