:root {
    --primary-color: #5b21b6;
    --primary-light: #8b5cf6;
    --primary-dark: #4c1d95;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --transition: all 0.3s ease;

    /* Arvosana-asteikko: lämmin ramppi punaisesta kultaan.
       Kylläisyys on korkeimmillaan ääripäissä ja laskee keskellä lähes nollaan,
       joten selvä tuomio erottuu ja "ei mitään sanottavaa" vetäytyy taka-alalle.
       Keltainen ei yllä punaisen kylläisyyteen (0,18 vs 0,22) vaan ponnistaa
       vaaleudella — siksi kolme ylintä porrasta tarvitsevat tumman musteen. */
    --star-1: #b91c1c;  /* punainen   — kylläisyys 0,190 */
    --star-2: #a8553a;  /* vaimea tiili        0,116 */
    --star-3: #d6d3d1;  /* neutraali kivi      0,004 */
    --star-4: #f59e0b;  /* amber               0,165 */
    --star-5: #ffd60a;  /* kirkas kulta        0,181 */

    /* Pilli on pystygradientti: sävy syvenee alaspäin, jolloin alareuna rajautuu
       itsestään eikä tarvita vierasta reunusviivaa. Ylä- ja alapysäkit on valittu
       niin että kontrasti pysyy yli 4,5:1 gradientin JOKAISESSA kohdassa —
       2★:n nosto on muita pienempi, koska +6 % pudotti sen 4,22:1:een. */
    --star-1-top: #d42020;  --star-1-bot: #9a1717;
    --star-2-top: #b35b3e;  --star-2-bot: #8d4831;
    --star-3-top: #e4e2e1;  --star-3-bot: #c5c1be;
    --star-4-top: #f6aa28;  --star-4-bot: #d48809;
    --star-5-top: #ffdb29;  --star-5-bot: #e5bf00;

    /* Tähdet ovat aina valkoisia. Kolme ylintä porrasta ovat kuitenkin liian
       vaaleita kantamaan valkoista tekstiä (5★ olisi 1,41:1), joten niillä on
       tumma ääriviiva joka antaa tähdelle reunan.

       HUOM: tämä ei täytä WCAG:n kirjainta — mittaus vertaa tekstin täyttöä
       taustaan eikä huomioi ääriviivaa. Luettavuus lepää ääriviivan varassa,
       joten --star-outline on pidettävä selvästi tummempana kuin portaan sävy
       (testi vaatii 4,5:1). Vaihtoehto oli tummentaa koko ylempi ramppi, mikä
       olisi vienyt kirkkaan kullan. */
    --star-ink: #ffffff;
    --star-outline: #451a03;

    /* Sparkline on yksivärinen: arvosanan kertoo palkin paikka, ja väriasteikko
       on jo arvosanapilleissä samalla rivillä. Harmaa lokero palkin takana näyttää
       myös ne arvosanat jotka jäivät tyhjiksi. */
    /* Palkki on tummennettu sen verran että se erottuu lokerosta myös rivin
       violetilla osumavärillä, jossa lokero on tummimmillaan (3,1:1). */
    --spark-bar-top: #5c564f;
    --spark-bar-bot: #36322e;
    /* Lokero on läpikuultava eikä kiinteä sävy, koska sparkline esiintyy
       usealla eri pinnalla: taulukon valkoinen solu, seepraraidat, mobiilikortin
       harmaa otsikko ja rivin violetti osumaväri. Kiinteä sävy katosi aina
       jollakin niistä — #e7e5e4 oli kortin otsikkoa vasten 1,19:1 ja
       #d4cfca hover-taustaa vasten 1,10:1. Läpikuultava tummentaa mitä tahansa
       alla olevaa pintaa, joten se erottuu kaikilla. */
    --spark-track: rgba(69, 26, 3, 0.18);
    --spark-axis: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Bitter', Georgia, serif;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    padding: 1.25rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

/* Base Utility Classes */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Heart Animations */
@keyframes heartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.heart-icon {
    display: inline-block;
    cursor: pointer;
    font-size: 1.2em;
    color: #ccc;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
    vertical-align: middle;
    user-select: none;
}

.heart-icon:hover {
    color: #ff4d4d;
    transform: scale(1.2);
}

.heart-icon.active {
    color: #ff4d4d;
    animation: heartBeat 0.3s ease-in-out;
}

/* Helper classes for visibility */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block; /* or flex/inline-block as needed */
}

@media (max-width: 768px) {
    .mobile-only {
        display: flex !important; /* Most mobile buttons use flex */
    }
    
    .desktop-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }

    .container {
        padding: 0 0.5rem;
    }

    .mobile-heart {
        margin-left: 0.5rem;
        font-size: 1.4em;
        padding: 5px; /* Bigger touch target */
    }
}

/* Load More Button */
.load-more-button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 30px auto 50px;
    display: block;
}

.load-more-button:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.load-more-button:active {
    transform: translateY(0);
}

.load-more-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}