/* Main Styles - Cozy Garden Game */

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

:root {
    /* Typography */
    --font-heading: 'Fredoka', sans-serif;
    --font-body: 'Fredoka', sans-serif;

    /* Color palette - earth green + harvest gold */
    --primary-brown: #8B6F47;
    --dark-brown: #654321;
    --light-brown: #D2B48C;
    --grass-green: #15803D;
    --dark-green: #14532D;
    --harvest-gold: #CA8A04;
    --pale-green: #F0FDF4;
    --sky-blue: #87CEEB;
    --white: #FEFEFE;
    --shadow: rgba(0, 0, 0, 0.2);

    /* Gradients */
    --wood-grain: linear-gradient(90deg, #8B6F47 0%, #A0826D 50%, #8B6F47 100%);
    --dirt: linear-gradient(135deg, #6B4423 0%, #8B6F47 100%);

    /* Seasonal Theme Variables (Default - Spring) */
    --season-primary: #A4D65E;
    --season-secondary: #FFB6D9;
    --season-background: linear-gradient(135deg, #FFF9E6 0%, #FFF0F5 100%);
    --season-border: #7CB342;
    --season-shadow: rgba(255, 182, 217, 0.3);
    --season-text: #4A5D23;
    --season-icon: '🌸';
    --season-accent: rgba(255, 182, 217, 0.15);
}

/* Spring Theme */
body[data-season="spring"] {
    --season-primary: #A4D65E;
    --season-secondary: #FFB6D9;
    --season-background: linear-gradient(135deg, #FFF9E6 0%, #FFF0F5 100%);
    --season-border: #7CB342;
    --season-shadow: rgba(255, 182, 217, 0.3);
    --season-text: #4A5D23;
    --season-icon: '🌸';
    --season-accent: rgba(255, 182, 217, 0.15);
    --toolbar-bg: linear-gradient(135deg, rgba(164, 214, 94, 0.25) 0%, rgba(255, 182, 217, 0.25) 100%);
    --toolbar-base: rgba(139, 111, 71, 0.20); /* More transparent - was 0.90 */
}

/* Summer Theme */
body[data-season="summer"] {
    --season-primary: #FFD54F;
    --season-secondary: #FF8A50;
    --season-background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
    --season-border: #F57C00;
    --season-shadow: rgba(255, 138, 80, 0.3);
    --season-text: #5D4037;
    --season-icon: '☀️';
    --season-accent: rgba(255, 193, 7, 0.15);
    --toolbar-bg: linear-gradient(135deg, rgba(255, 213, 79, 0.25) 0%, rgba(255, 138, 80, 0.25) 100%);
    --toolbar-base: rgba(139, 111, 71, 0.20); /* More transparent - was 0.90 */
}

/* Fall/Autumn Theme */
body[data-season="fall"] {
    --season-primary: #FF8A50;
    --season-secondary: #D84315;
    --season-background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    --season-border: #6D4C41;
    --season-shadow: rgba(216, 67, 21, 0.3);
    --season-text: #3E2723;
    --season-icon: '🍂';
    --season-accent: rgba(255, 138, 80, 0.15);
    --toolbar-bg: linear-gradient(135deg, rgba(255, 138, 80, 0.25) 0%, rgba(216, 67, 21, 0.20) 100%);
    --toolbar-base: rgba(139, 111, 71, 0.20); /* More transparent - was 0.90 */
}

/* Winter Theme */
body[data-season="winter"] {
    --season-primary: #81D4FA;
    --season-secondary: #B3E5FC;
    --season-background: linear-gradient(135deg, #F1F8FF 0%, #E1F5FE 100%);
    --season-border: #607D8B;
    --season-shadow: rgba(129, 212, 250, 0.4);
    --season-text: #37474F;
    --season-icon: '❄️';
    --season-accent: rgba(129, 212, 250, 0.15);
    --toolbar-bg: linear-gradient(135deg, rgba(129, 212, 250, 0.25) 0%, rgba(179, 229, 252, 0.25) 100%);
    --toolbar-base: rgba(139, 111, 71, 0.20); /* More transparent - was 0.90 */
}

body {
    font-family: var(--font-body);
    background: var(--season-background);
    min-height: 100vh;
    overflow: hidden;
    position: relative;

    /* Custom cursor using your image with centered hotspot (for 24x24 image) */
    /* Only apply custom cursor on devices that support hover (desktop) */
    @media (hover: hover) {
        cursor: url('../assets/images/cursor/Cursor.png') 12 12, auto;
    }

    /* Smooth transitions for season changes */
    transition: opacity 0.8s ease-in-out, background-color 1.2s ease-in-out;
}

/* Smooth transition for seasonal CSS variables */
body[data-season] {
    transition:
        opacity 0.8s ease-in-out,
        background-color 1.2s ease-in-out,
        --season-primary 1s ease-in-out,
        --season-secondary 1s ease-in-out;
}

/* Interactive elements - Same cursor for now (you can add hover image later) */
/* Only apply custom cursor on devices that support hover (desktop) */
@media (hover: hover) {
    button, .tile, .fruit-cell, .garden-cell, a,
    [onclick], .clickable, .nav-button, .tool-button {
        cursor: url('../assets/images/cursor/Cursor.png') 12 12, pointer !important;
    }

    /* Force cursor on all elements */
    * {
        cursor: url('../assets/images/cursor/Cursor.png') 12 12, auto !important;
    }
}

/* Particles background */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

/* Screen Management */
.screen {
    display: none;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    position: relative;
    z-index: 1;
    overflow-y: auto; /* Scrollbar overlays content */
}

.screen.active {
    display: flex;
}

/* Overlay scrollbar (Webkit browsers) */
.screen::-webkit-scrollbar {
    width: 12px;
}

.screen::-webkit-scrollbar-track {
    background: transparent;
}

.screen::-webkit-scrollbar-thumb {
    background: rgba(139, 111, 71, 0.6);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.screen::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 111, 71, 0.8);
    border: 2px solid transparent;
    background-clip: padding-box;
}


/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* REDUCED PADDING for more garden space */
    padding: 15px 15px;
    padding-bottom: 16px;
    border-bottom: 4px solid var(--season-border);
    /* SEASONAL GRADIENT BACKGROUND - MORE TRANSPARENT */
    background: var(--toolbar-base, rgba(139, 111, 71, 0.65));
    background-image: var(--toolbar-bg);
    background-blend-mode: overlay;
    box-shadow: 0 2px 8px var(--shadow);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    /* PERFORMANCE OPTIMIZATION */
    will-change: background;
    contain: layout style;
    transform: translateZ(0);
    transition: background 0.6s ease-in-out;
}

.resources {
    margin-left: 0px;
    display: flex;
    gap: 20px;
}

.resource {
    background: var(--white);
    /* REDUCED PADDING */
    padding: 4px 10px; /* Was 6px 12px */
    border-radius: 18px; /* Slightly smaller */
    border: 3px solid var(--season-border); /* SEASONAL BORDER */
    display: flex;
    align-items: center;
    gap: 5px; /* Was 6px */
    font-weight: 600;
    /* REDUCED FONT SIZE */
    font-size: 14px; /* Was 16px */
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow); /* SEASONAL SHADOW */
    transition: transform 0.2s;
}

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

/* Season display - tinted with the active season's own palette */
#season-display {
    background: var(--season-background);
    border-color: var(--season-primary);
    color: var(--season-text);
    box-shadow: 0 2px 0 var(--season-primary), 0 3px 6px var(--season-shadow);
}

#season-display .season-icon {
    font-size: 28px;
}

/* ===== Topbar - title plain, season/level/money each their own card ===== */

.topbar-title {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 700;
    color: var(--season-text);
    flex-shrink: 0;
}

.topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--season-text);
    background: var(--white);
    border: 2px solid var(--season-border);
    border-radius: 14px;
    padding: 6px 14px;
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow);
}

#harvested-display.topbar-stat,
.topbar-level {
    cursor: pointer;
    transition: opacity 0.2s;
}

#harvested-display.topbar-stat:hover,
.topbar-level:hover {
    opacity: 0.75;
}

.topbar-icon,
.season-icon {
    font-size: 22px;
    line-height: 1;
}

.topbar-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.topbar-season-text {
    font-weight: 700;
}

.topbar-date-text {
    font-size: 12px;
    color: var(--season-text);
    opacity: 0.75;
}

.level-label {
    font-weight: 700;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-money {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    color: var(--season-text);
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 12px;
    padding: 0 14px;
    height: 38px;
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.topbar-money .coin-icon {
    width: 20px;
    height: 20px;
}

.topbar-money:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--season-border), 0 6px 10px var(--season-shadow);
}

/* Reset is a developer tool, not a gameplay action - kept small and visually apart */
.gear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 10px;
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow);
    color: var(--season-text, var(--dark-brown));
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.gear-btn svg {
    width: 18px;
    height: 18px;
}

.gear-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--season-border), 0 6px 10px var(--season-shadow);
}

/* ===== Nav strip - between the topbar and the garden/seeds area ===== */

/* Just a row of buttons, no toolbar strip behind them */
.nav-strip {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 15px 14px;
    background: none;
    flex-shrink: 0;
}

.nav-strip-btn {
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--season-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--season-text);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.nav-strip-btn:hover {
    background: var(--white);
    transform: translateY(-2px);
}

.nav-strip-icon {
    display: inline-flex;
    color: var(--season-text);
}

.nav-strip-icon svg {
    width: 18px;
    height: 18px;
}

.title {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    display: flex;
    color: var(--season-text);
}

/* Headings across the game use the handwritten display font; body text stays on --font-body */
h1, h2, h3,
.screen-header h2,
.season-change-title {
    font-family: var(--font-heading);
}

/* Coin icon (CSS art) */
.coin-icon {
    width: 24px;
    height: 24px;
    background: radial-gradient(circle at 30% 30%, #FFD700, #FFA500);
    border-radius: 50%;
    border: 3px solid #FF8C00;
    position: relative;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
}

.coin-icon::after {
    content: '$';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8B4513;
    font-weight: bold;
    font-size: 14px;
}

.season-icon {
    font-size: 24px;
    position: relative;
    justify-items: center;
}

/* Buttons */
.nav-button {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: 3px solid var(--season-border); /* SEASONAL BORDER */
    border-radius: 8px; /* Was 10px */
    /* REDUCED PADDING */
    padding: 6px 12px; /* Was 8px 16px */
    cursor: pointer;
    /* REDUCED FONT SIZE */
    font-size: 13px; /* Was 14px */
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow); /* SEASONAL SHADOW */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px; /* Was 5px */
    color: var(--dark-brown);
}

.nav-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 var(--season-border), 0 8px 16px var(--season-shadow); /* SEASONAL SHADOW */
}

.nav-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #CC7000, 0 3px 6px var(--shadow);
}

/* Shop, Upgrades, Market, and Reset buttons - slightly bigger */
.shop-btn,
.upgrade-btn,
.market-btn,
.reset-btn {
    padding: 8px 16px; /* Bigger than regular nav buttons (6px 12px) */
    font-size: 15px; /* Bigger font (was 13px) */
    font-weight: 700; /* Bolder */
}

.shop-btn .btn-icon,
.upgrade-btn .btn-icon,
.market-btn .btn-icon,
.reset-btn .btn-icon {
    font-size: 20px; /* Bigger icons */
}

/* Reset button - red styling */
.reset-btn {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4444 100%);
    border-color: #CC0000;
}

.reset-btn:hover {
    background: linear-gradient(135deg, #FF8888 0%, #FF6666 100%);
    border-color: #FF0000;
}

/* Level Display System */
.level-display {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: 20px;
    border: 3px solid var(--season-border);
    box-shadow: 0 2px 0 var(--season-border), 0 3px 8px var(--season-shadow);
    transition: all 0.3s ease;
}

.level-display:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--season-border), 0 6px 12px var(--season-shadow);
}

.level-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
    border-right: 2px solid var(--season-border);
}

.level-icon {
    font-size: 22px;
    animation: levelPulse 2s ease-in-out infinite;
}

@keyframes levelPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.level-number {
    font-size: 18px;
    font-weight: 700;
    color: black;
    min-width: 20px;
    text-align: center;
}

.xp-bar-container {
    position: relative;
    width: 150px;
    height: 20px;
    background: #b7ddec; /* Light blue background */
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #5DADE2;
}

.xp-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #5DADE2; /* Light blue fill - always this color */
    border-radius: 0; /* Square fill - no rounding */
    transition: width 0.5s ease-out;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.xp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 1;
    white-space: nowrap;
}

/* Game Container */
.game-container {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    gap: 20px;
    min-height: 0; /* lets this shrink below its content's intrinsic height instead of overflowing the screen and getting clipped by body's overflow:hidden */
}

/* Seasonal garden photo, washed out behind the header/nav/cards (which sit at z-index:1)
   so it reads as mood, not something to look at directly */
.garden-bg-image {
    /* fixed (not absolute) so it never inflates #garden-screen's own scrollable area -
       a transformed element's scaled box counts toward its scrolling ancestor's overflow,
       which was forcing both scrollbars on when this used a scale() overscan trick */
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.garden-bg-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 250, 240, 0.55);
}

/* ===== Left column: stats + tools + seed menu, all together ===== */

.stats-panel {
    width: 340px;
    flex-shrink: 0;
    padding: 14px 0;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: flex-start;
    max-height: 100%;
    overflow-y: auto;
}

/* Card container for the Tools and Seed Pouch sections in the left column */
.side-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--season-border);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 3px 10px var(--season-shadow);
}

.side-card-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--season-text);
    opacity: 0.6;
    margin-bottom: 8px;
}

.stats-panel-title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--season-text);
    margin-bottom: -6px;
}

/* Compact 2x2 stat tiles, instead of a tall list of full-width rows */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-tile {
    /* Same card treatment as .harvest-item (border + gradient) instead of a flat
       translucent box, so both modals' tiles read as the same component */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 16px 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
    border: 3px solid var(--dark-brown);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.stat-tile-icon {
    font-size: 32px;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--season-text);
    opacity: 0.8;
}

.stat-value {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 700;
    color: var(--dark-brown);
    line-height: 1.2;
    word-break: break-word;
}

/* ===== Options modal: section headers + Sound settings (Farm Stats reuses .stats-grid above) ===== */

.modal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--season-text);
    margin: 0 0 12px;
}

.modal-section-title:not(:first-child) {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid rgba(101, 67, 33, 0.15);
}

.sound-settings {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sound-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
    border: 3px solid var(--dark-brown);
    border-radius: 12px;
}

.sound-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--dark-brown);
    min-width: 130px;
}

.sound-row-icon {
    font-size: 18px;
}

.volume-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(101, 67, 33, 0.2);
    accent-color: var(--harvest-gold, #CA8A04);
    cursor: pointer;
}

.mute-btn {
    background: none;
    border: 2px solid var(--dark-brown);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s;
}

.mute-btn:hover {
    transform: scale(1.08);
}

.mute-btn.muted {
    opacity: 0.5;
}

/* ===== Right: garden area ===== */

.garden-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* top-aligned, same as .stats-panel, so the topbar gap matches on both sides */
    padding: 14px 0;
    position: relative;
    overflow-x: hidden; /* keeps the mobile slider contained */
    overflow-y: auto; /* never clip the garden card - scroll instead */
    min-width: 0;
}

/* The card wrapping a garden view's header, grid and legend - same style as .side-card */
.garden-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--season-border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 3px 10px var(--season-shadow);
}

.garden-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.garden-card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.garden-card-icon {
    display: inline-flex;
    flex-shrink: 0;
}

.garden-card-icon svg {
    width: 28px;
    height: 28px;
}

.garden-card-title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--season-text);
}

.garden-card-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--season-text);
    opacity: 0.7;
}

/* ===== Garden switch - now embedded in the garden card header ===== */

.garden-switch {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 4px;
}

.garden-switch-option {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--season-text);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.garden-switch-option svg {
    width: 15px;
    height: 15px;
}

.garden-switch-option.active {
    background: var(--white);
    box-shadow: 0 2px 6px var(--season-shadow);
}

.garden-switch-option.locked {
    opacity: 0.5;
    filter: grayscale(60%);
}

/* ===== Legend footer - explains the plot colors and the next unlock cost ===== */

.garden-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--season-text);
    opacity: 0.85;
}

.legend-swatch {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-swatch.legend-tilled {
    background: linear-gradient(135deg, #6B4423 0%, #5A3A1F 100%);
}

.legend-swatch.legend-locked {
    background: linear-gradient(135deg, #8B7355 0%, #6B5D4F 100%);
}

.legend-coin {
    width: 13px;
    height: 13px;
}

/* Mobile-only elements - hidden on desktop */
.garden-indicators {
    display: none;
}

.swipe-hint {
    display: none;
}

/* Bottom Bar */
/* No toolbar chrome - just the two buttons and the seed menu floating near the bottom */
.tool-section {
    display: flex;
    gap: 12px;
}

.tool-button {
    background: var(--white);
    border: 3px solid var(--season-border); /* SEASONAL BORDER */
    border-radius: 10px;
    /* Sized to match the seed buttons, per user feedback */
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow); /* SEASONAL SHADOW */
    min-width: 72px;
}

.tool-button:hover {
    transform: translateY(-3px);
}

.tool-button.active {
    background: linear-gradient(135deg, #90EE90 0%, #7CB342 100%);
    border-color: var(--dark-green);
    box-shadow: 0 4px 0 var(--dark-green), 0 6px 12px rgba(124, 179, 66, 0.4);
}

.tool-name {
    /* REDUCED FONT SIZE */
    font-size: 10px; /* Was 11px */
    font-weight: 600;
    color: var(--dark-brown);
}

.tool-subtitle {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--season-text);
    background: var(--season-accent);
    border-radius: 6px;
    padding: 1px 8px;
}

.tool-button.active .tool-subtitle {
    background: rgba(255, 255, 255, 0.6);
    color: var(--dark-green);
}

/* ===== Expandable seed menu - replaces the old always-visible scrolling seed strip ===== */

.seed-menu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--season-text);
}

.seed-menu-toggle-icon {
    font-size: 28px;
}

.seed-menu-section {
    margin-bottom: 10px;
}

.seed-menu-section:last-child {
    margin-bottom: 0;
}

.seed-menu-section h4 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--season-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.seed-section-icon {
    display: inline-flex;
}

.seed-section-icon svg {
    width: 18px;
    height: 18px;
}

.seed-section-count {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--season-text);
    opacity: 0.7;
}

.seed-section-lock {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    color: var(--season-text);
    background: var(--season-accent);
    border-radius: 6px;
    padding: 2px 7px;
}

.seed-section-lock:empty {
    display: none;
}

.seed-menu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Screen Headers - COMPACT REDESIGN */
.screen-header {
    /* SEASONAL GRADIENT BACKGROUND - MORE TRANSPARENT */
    background: var(--toolbar-base, rgba(139, 111, 71, 0.65));
    background-image: var(--toolbar-bg);
    background-blend-mode: overlay;
    border-bottom: 4px solid var(--season-border);
    /* SAME PADDING AS MAIN HEADER */
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px var(--season-shadow);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    position: relative;
    /* PERFORMANCE OPTIMIZATION */
    will-change: background;
    contain: layout style;
    transform: translateZ(0);
    transition: background 0.6s ease-in-out;
}

/* Money display - pinned to the absolute center of the header, not flex-relative */
.header-money {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 16px;
    padding: 8px 18px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-brown);
    box-shadow: 0 3px 0 var(--season-border), 0 4px 10px var(--season-shadow);
    z-index: 1;
}

.header-money .coin-icon {
    width: 28px;
    height: 28px;
}

.screen-header h2 {
    /* REDUCED FONT SIZE - was 36px */
    font-size: 22px;
    color: var(--white);
    text-shadow: 2px 2px 0 var(--dark-brown);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.header-icon {
    display: inline-flex;
    color: var(--white);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

.header-icon svg {
    width: 28px;
    height: 28px;
}

.season-subtitle {
    /* REDUCED SIZE - was 18px */
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    font-style: italic;
}

/* Seasonal header accent color */
body[data-season="spring"] .seasonal-header {
    border-bottom-color: var(--season-border);
}

body[data-season="summer"] .seasonal-header {
    border-bottom-color: var(--season-border);
}

body[data-season="fall"] .seasonal-header {
    border-bottom-color: var(--season-border);
}

body[data-season="winter"] .seasonal-header {
    border-bottom-color: var(--season-border);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--dark-brown);
    box-shadow: 0 2px 0 var(--season-border), 0 3px 6px var(--season-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
}

.back-button svg {
    width: 20px;
    height: 20px;
}

.back-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--season-border), 0 6px 10px var(--season-shadow);
}

/* Content areas - REDUCED PADDING */
.shop-content,
.market-content,
.upgrades-content {
    flex: 1;
    /* REDUCED PADDING - was 30px */
    padding: 20px;
    overflow-y: auto;
    background: var(--season-background);
    position: relative;
}

/* ===== News screen ===== */

.news-page-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--season-background);
}

.news-list {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.news-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--white);
    border: 2px solid var(--season-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 3px 10px var(--season-shadow);
}

.news-card-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.news-card-headline {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-brown);
}

.news-card-message {
    font-size: 13px;
    color: var(--dark-brown);
    opacity: 0.8;
    margin: 4px 0 8px;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
}

.news-bonus .news-badge {
    background: rgba(124, 179, 66, 0.2);
    color: #33691E;
}

.news-penalty .news-badge {
    background: rgba(216, 67, 21, 0.15);
    color: #BF360C;
}

.news-bonus {
    border-color: #7CB342;
}

.news-penalty {
    border-color: #D84315;
}

.news-days {
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-brown);
    opacity: 0.6;
}

.news-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--dark-brown);
}

.news-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
}

.news-empty h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    margin-bottom: 6px;
}

.news-empty p {
    font-size: 14px;
    opacity: 0.7;
    max-width: 360px;
    margin: 0 auto;
}

/* ===== Level roadmap screen ===== */

.level-page-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--season-background);
}

.level-page-summary {
    max-width: 640px;
    margin: 0 auto 20px;
}

.level-page-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 2px solid var(--season-border);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 3px 10px var(--season-shadow);
}

.level-page-badge .level-icon {
    font-size: 32px;
}

.level-page-current {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-brown);
}

.level-page-xp {
    font-size: 13px;
    color: var(--dark-brown);
    opacity: 0.75;
}

.level-roadmap {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.level-node {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.level-node:last-child {
    padding-bottom: 0;
}

.level-node::before {
    /* connecting line down to the next node */
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 3px;
    background: var(--season-border);
    opacity: 0.35;
}

.level-node:last-child::before {
    display: none;
}

.level-node-marker {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    background: var(--white);
    border: 3px solid var(--season-border);
    color: var(--dark-brown);
    z-index: 1;
}

.level-node-done .level-node-marker {
    background: linear-gradient(135deg, #90EE90 0%, #7CB342 100%);
    border-color: var(--dark-green);
    color: white;
}

.level-node-current .level-node-marker {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-color: #FF8C00;
    color: white;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.25);
}

.level-node-locked .level-node-marker {
    opacity: 0.5;
}

.level-node-body {
    flex: 1;
    background: var(--white);
    border: 1px solid var(--season-border);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px var(--season-shadow);
}

.level-node-locked .level-node-body {
    opacity: 0.6;
}

.level-node-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--dark-brown);
    margin-bottom: 6px;
}

.level-node-unlocks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.level-unlock-chip {
    font-size: 12px;
    font-weight: 600;
    background: var(--season-accent);
    color: var(--dark-brown);
    border-radius: 8px;
    padding: 3px 9px;
}

.level-unlock-chip.level-unlock-none {
    opacity: 0.5;
    font-style: italic;
}

/* Seasonal decorative pattern overlay */
.shop-content::before,
.market-content::before,
.new-market-content::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

/* Spring pattern - floating flowers */
body[data-season="spring"] .shop-content::before,
body[data-season="spring"] .market-content::before,
body[data-season="spring"] .new-market-content::before {
    background-image:
        radial-gradient(circle at 20% 30%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 80% 60%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 45% 80%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 65% 20%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 30% 90%, var(--season-secondary) 2px, transparent 2px);
    background-size: 200px 200px, 250px 250px, 180px 180px, 220px 220px, 190px 190px;
    background-position: 0 0, 50px 50px, 100px 25px, 150px 75px, 75px 150px;
    animation: floatPattern 40s linear infinite;
}

/* Summer pattern - sun rays */
body[data-season="summer"] .shop-content::before,
body[data-season="summer"] .market-content::before,
body[data-season="summer"] .new-market-content::before {
    background-image:
        radial-gradient(circle at 15% 25%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 75% 70%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 50% 50%, var(--season-primary) 2px, transparent 2px);
    background-size: 300px 300px, 280px 280px, 240px 240px;
    background-position: 0 0, 100px 100px, 50px 50px;
}

/* Fall pattern - falling leaves */
body[data-season="fall"] .shop-content::before,
body[data-season="fall"] .market-content::before,
body[data-season="fall"] .new-market-content::before {
    background-image:
        radial-gradient(circle at 25% 35%, var(--season-primary) 3px, transparent 3px),
        radial-gradient(circle at 70% 65%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 40% 85%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 85% 25%, var(--season-secondary) 3px, transparent 3px);
    background-size: 180px 180px, 220px 220px, 200px 200px, 190px 190px;
    background-position: 0 0, 60px 80px, 120px 40px, 40px 120px;
    animation: floatPattern 50s linear infinite;
}

/* Winter pattern - snowflakes */
body[data-season="winter"] .shop-content::before,
body[data-season="winter"] .market-content::before,
body[data-season="winter"] .new-market-content::before {
    background-image:
        radial-gradient(circle at 22% 32%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 78% 58%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 48% 78%, var(--season-primary) 2px, transparent 2px),
        radial-gradient(circle at 62% 18%, var(--season-secondary) 2px, transparent 2px),
        radial-gradient(circle at 35% 88%, var(--season-primary) 2px, transparent 2px);
    background-size: 160px 160px, 200px 200px, 180px 180px, 170px 170px, 190px 190px;
    background-position: 0 0, 40px 60px, 80px 20px, 120px 100px, 60px 140px;
    animation: floatPattern 60s linear infinite;
}

@keyframes floatPattern {
    from { background-position: 0 0, 50px 50px, 100px 25px, 150px 75px, 75px 150px; }
    to { background-position: 0 200px, 50px 250px, 100px 225px, 150px 275px, 75px 350px; }
}

/* Ensure content is above decorative pattern */
.shop-content > *,
.market-content > *,
.new-market-content > * {
    position: relative;
    z-index: 1;
}

.player-money {
    background: var(--white);
    border: 3px solid var(--season-border);
    border-radius: 12px;
    padding: 20px 16px;
    /* INCREASED FONT SIZE for better visibility */
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 3px 0 var(--season-border), 0 4px 10px var(--season-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Seasonal money display variant - SOLID BACKGROUND */
.player-money.seasonal-money {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--season-border);
    position: relative;
    overflow: hidden;
}

.player-money.seasonal-money::before {
    content: var(--season-icon);
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    font-size: 50px;
    opacity: 0.08;
    pointer-events: none;
}

/* Season Change Announcement */
.season-announcement {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

.season-announcement.show {
    opacity: 1;
    animation: announceSlide 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes announceSlide {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.season-transition {
    background: rgba(255, 255, 255, 0.98);
    border: 5px solid var(--season-border);
    border-radius: 24px;
    padding: 40px 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 40px;
}

.old-season,
.new-season {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.season-icon-large {
    font-size: 80px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: seasonBounce 1s ease-in-out infinite;
}

@keyframes seasonBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.season-arrow {
    font-size: 60px;
    color: var(--season-border);
    font-weight: bold;
    animation: arrowPulse 1s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.season-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--dark-brown);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(139, 111, 71, 0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--dark-brown);
    border-radius: 10px;
    border: 2px solid rgba(139, 111, 71, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: #4a2f1a;
}

/* ===========================
   MODAL / POPUP
   =========================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.modal-content {
    background: var(--white);
    border: 5px solid var(--dark-brown);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    box-shadow: 0 10px 0 var(--dark-brown), 0 15px 30px rgba(0,0,0,0.5);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.modal-header {
    background: linear-gradient(135deg, var(--primary-brown) 0%, var(--dark-brown) 100%);
    padding: 15px 20px;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--dark-brown);
}

.modal-header h2 {
    color: white;
    font-size: 26px;
    text-shadow: 2px 2px 0 var(--dark-brown);
    margin: 0;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 3px solid var(--dark-brown);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ===========================
   WELCOME SCREEN - REDESIGNED
   =========================== */

.welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../.png') center top/cover no-repeat;
    display: none;
    z-index: 10000;
    overflow: hidden;
}

.welcome-screen.active {
    display: block;
}

/* Gradient overlay for better text readability */
.welcome-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 1;
}

.welcome-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 40px;
    padding-bottom: 90px;
    text-align: center;
    z-index: 2;
}

/* Seasonal ambience layers - sun rays (summer) and falling particles (spring/fall/winter) */
.welcome-rays,
.welcome-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Same ambience layers on the garden screen - fixed (not absolute) for the same reason as
   .garden-bg-image: avoids inflating #garden-screen's own scrollable area. z-index:5 puts it
   above the header/nav/cards (z-index:1) so it drifts over the whole screen like real weather,
   still non-interactive so it never blocks clicks on tiles or buttons */
.garden-rays,
.garden-particles {
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

/* Each ray fades independently and randomly via JS (see startSunRays) -
   opacity is toggled in JS, this transition is what makes it smooth.
   Shape: an isosceles wedge with its point pinned to the top-left corner, widening
   as it reaches toward the bottom/right edge - clip-path draws the triangle, the
   radial gradient (centered on that same corner) fades it from bright at the point
   to transparent at the base, so it reads as light spreading from the corner */
.ray {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255, 214, 102, 0.9) 0%, rgba(255, 214, 102, 0.55) 35%, rgba(255, 214, 102, 0) 70%);
    opacity: 0;
    transition: opacity 2.2s ease-in-out;
    filter: blur(3px);
    mix-blend-mode: screen;
}

.ray-1 {
    clip-path: polygon(0% 0%, 12% 100%, 42% 100%);
}

.ray-2 {
    clip-path: polygon(0% 0%, 58% 100%, 100% 62%);
}

.ray-3 {
    clip-path: polygon(0% 0%, 100% 22%, 100% 52%);
}

/* Falling leaf/snowflake/petal particles - spawned and removed by JS */
.wparticle {
    position: absolute;
    top: -32px;
    animation-name: wparticle-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

.wparticle svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes wparticle-fall {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate(var(--drift), 112vh) rotate(var(--rotate-end)); opacity: 0; }
}

/* Logo section */
/* Play button - same bevel/border language as the site's other primary buttons
   (upgrade-button, tool-button) instead of the old oversized pill shape */
.play-button {
    background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
    border: 4px solid #33691E;
    border-radius: 16px;
    padding: 16px 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow:
        0 5px 0 #1B5E20,
        0 10px 24px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
    animation: fadeInUp 1s ease-out 0.5s both, pulse 2s ease-in-out infinite 1.5s;
}

.play-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 0 #1B5E20,
        0 14px 30px rgba(0, 0, 0, 0.4);
}

.play-button:active {
    transform: translateY(2px);
    box-shadow:
        0 3px 0 #1B5E20,
        0 6px 16px rgba(0, 0, 0, 0.35);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 5px 0 #1B5E20, 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(124, 179, 66, 0.4); }
    50% { box-shadow: 0 5px 0 #1B5E20, 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 16px rgba(124, 179, 66, 0); }
}

.play-icon {
    font-size: 28px;
    color: white;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.play-text {
    font-family: 'Fredoka', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Welcome -> garden crossfade (see Game.startGame): welcome zooms out slightly while
   fading, garden zooms in from slightly-small while fading in, overlapping briefly so
   it reads as one continuous "diving into the garden" transition, not two separate cuts. */
@keyframes welcomeExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.08); }
}

@keyframes gardenEnter {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.welcome-screen.exiting {
    animation: welcomeExit 0.6s ease-in forwards;
}

#garden-screen.entering {
    animation: gardenEnter 0.6s ease-out forwards;
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .welcome-content {
        padding: 20px;
        padding-bottom: 60px;
    }

    .play-button {
        padding: 14px 40px;
        border-width: 4px;
        border-radius: 16px;
        box-shadow:
            0 5px 0 #1B5E20,
            0 10px 25px rgba(0, 0, 0, 0.4);
    }

    .play-icon {
        font-size: 20px;
    }

    .play-text {
        font-size: 20px;
    }
}

.modal-button {
    padding: 10px 20px;
    border: 3px solid var(--dark-brown);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Fredoka', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 3px 0 var(--dark-brown);
}

.modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--dark-brown);
}

.modal-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--dark-brown);
}

.modal-button.primary {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: var(--dark-brown);
}

.modal-button.secondary {
    background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%);
    color: var(--dark-brown);
}

/* Harvest Modal Specific */
.harvest-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.harvest-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
    border: 3px solid var(--dark-brown);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s;
}

.harvest-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.harvest-item-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--item-color, #90EE90), var(--item-secondary, #228B22));
    border-radius: 50%;
    border: 3px solid var(--dark-brown);
}

.harvest-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.harvest-item-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-brown);
}

.harvest-item-details {
    font-size: 14px;
    color: #654321;
    display: flex;
    gap: 15px;
}

.harvest-item-quantity {
    display: flex;
    align-items: center;
    gap: 5px;
}

.harvest-item-price {
    display: flex;
    align-items: center;
    gap: 5px;
}

.harvest-item-total {
    font-size: 20px;
    font-weight: 700;
    color: #228B22;
    display: flex;
    align-items: center;
    gap: 5px;
}

.harvest-total {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border: 4px solid #FF8C00;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 0 #CC7000, 0 6px 12px rgba(255, 140, 0, 0.3);
}

.total-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-brown);
}

.total-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    font-weight: 700;
    color: var(--dark-brown);
}

.harvest-empty {
    text-align: center;
    padding: 30px 20px;
    color: #654321;
}

.harvest-empty-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.harvest-empty-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.harvest-empty-hint {
    font-size: 14px;
    color: #8B7355;
}

/* ==================== TOAST NOTIFICATIONS ==================== */

#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
    border: 3px solid var(--dark-brown);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 280px;
    max-width: 350px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Fredoka', sans-serif;
    animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s;
    pointer-events: auto;
}

.toast.success {
    border-color: #4CAF50;
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.toast.error {
    border-color: #F44336;
    background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
}

.toast.info {
    border-color: #2196F3;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.toast-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast-title {
    font-weight: 600;
    font-size: 15px;
    color: #2C1810;
}

.toast-message {
    font-size: 13px;
    color: #5D4E37;
    line-height: 1.4;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastFadeOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Season Display Smooth Transition */
#season-display {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Season Change Toast - Special Styling */
.season-change-toast {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.98) 0%,
        var(--season-background) 100%);
    border: 3px solid var(--season-primary);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 0 30px var(--season-shadow);
    min-width: 350px;
    padding: 20px;
}

.season-change-toast .toast-icon.season-transition {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 42px;
    margin-right: 20px;
}

.season-change-toast .season-from {
    animation: seasonFadeOut 2s ease-in-out infinite;
}

.season-change-toast .season-arrow {
    font-size: 28px;
    color: var(--season-primary);
    font-weight: bold;
    animation: seasonArrowPulse 1.5s ease-in-out infinite;
}

.season-change-toast .season-to {
    animation: seasonFadeIn 2s ease-in-out infinite;
}

.season-change-toast .toast-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--season-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
}

.season-change-toast .toast-message {
    font-size: 16px;
    font-weight: 600;
    color: var(--season-text);
}

/* Season Transition Animations */
@keyframes seasonFadeOut {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

@keyframes seasonFadeIn {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

@keyframes seasonArrowPulse {
    0%, 100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(8px) scale(1.2);
        opacity: 0.8;
    }
}