:root {
    --farmacy-green: #33691e;
    --farmacy-light: #f1f8e9;
    --farmacy-dark: #1b5e20;
    --farmacy-yellow: #fbc02d;
    --text-main: #3e2723;
    
    --farmacy-sans: 'Plus Jakarta Sans', sans-serif;
    --farmacy-serif: 'Tenor Sans', sans-serif;
    --farmacy-script: 'Pinyon Script', cursive;
}

/* =====================================================
   CAMPAIGN HEADERS
   ===================================================== */
.campaign-header {
    text-align: center;
    padding: 6rem 2rem 2rem 2rem;
    background: #fff;
}

.campaign-number {
    display: block;
    font-size: 2.5rem;
    color: var(--farmacy-green);
    margin-bottom: 0.5rem;
}

.accent-script {
    font-family: var(--farmacy-script);
}

.campaign-title {
    font-family: var(--farmacy-script);
    font-size: 4.5rem;
    color: var(--farmacy-green);
    margin-bottom: 0.5rem;
    font-weight: normal;
}

.campaign-subtitle {
    font-family: var(--farmacy-sans);
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

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

body {
    font-family: var(--farmacy-sans);
    background-color: #fff;
    color: var(--text-main);
    overflow-x: hidden;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;
    background: transparent;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

.back-btn {
    color: var(--farmacy-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo {
    font-family: var(--farmacy-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--farmacy-dark);
    letter-spacing: 2px;
}

/* =====================================================
   CAMPAIGN 01: BLENDER SCROLL ANIMATION
   ===================================================== */
.blender-campaign {
    height: 400vh; /* Creates the scrollable track */
    position: relative;
    background: linear-gradient(to bottom, #f9fbf9, #e8f5e9);
}

.blender-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    gap: 4rem;
}

/* Left Side: Visuals */
.blender-visuals {
    flex: 1;
    height: 600px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ingredients */
.drop-ingredient {
    font-size: 4rem;
    position: absolute;
    top: -100px;
    opacity: 0;
    z-index: 10;
}
.moringa { left: 30%; }
.papaya { left: 50%; transform: translateX(-50%); }
.sunflower { left: 70%; transform: translateX(-100%); }

/* Blender Design */
.blender-machine {
    position: absolute;
    bottom: 50px;
    width: 200px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blender-jar {
    width: 160px;
    height: 220px;
    background: rgba(255, 255, 255, 0.4);
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px 10px 40px 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2;
}

.blender-jar::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 20px;
    background: #333;
    border-radius: 10px;
}

.blender-liquid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0%; /* Animates to 100% */
    background: linear-gradient(to top, #81c784, #aed581);
    opacity: 0.8;
}

.blender-base {
    width: 200px;
    height: 120px;
    background: #e0e0e0;
    border-radius: 10px;
    margin-top: -10px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.blender-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    border: 4px solid #fff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

/* Final Product (Green Clean Jar) */
.final-product-jar {
    position: absolute;
    bottom: 100px;
    width: 180px;
    height: 180px;
    background: url('green_clean.jpg') center/cover no-repeat;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    opacity: 0;
    transform: scale(0.5) translateY(100px);
    z-index: 3;
}

/* Right Side: Pitch Cards */
.blender-pitch {
    flex: 1;
    position: relative;
    height: 600px;
}

.pitch-card {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(50px);
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    opacity: 0;
    pointer-events: none;
}

.pitch-meta {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
}

.pitch-title {
    font-family: var(--farmacy-serif);
    font-size: 2rem;
    color: var(--farmacy-dark);
    margin-bottom: 1rem;
}

.pitch-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.tools-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tools-list li {
    font-weight: 600;
    color: var(--farmacy-green);
    background: rgba(255,255,255,0.5);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: inline-block;
}

@media (max-width: 900px) {
    .blender-stage {
        flex-direction: column;
    }
    .blender-visuals, .blender-pitch {
        width: 100%;
        height: 50vh;
    }
    .pitch-card {
        padding: 1.5rem;
    }
}

/* Shopping Cart Section */
.shopping-cart-section {
    padding: 8rem 5%;
    background: #fff;
}

.cart-container {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--farmacy-light);
    border-radius: 40px;
    padding: 4rem;
    box-shadow: inset 0 0 50px rgba(76,175,80,0.1);
}

.cart-header {
    text-align: center;
    margin-bottom: 4rem;
}

.cart-header h2 {
    font-family: var(--farmacy-serif);
    font-size: 2.5rem;
    color: var(--farmacy-dark);
    margin-bottom: 1rem;
}

.cart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.cart-item {
    background: white;
    border-radius: 20px;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.cart-item:hover {
    transform: translateY(-10px);
}

.item-img {
    font-size: 3rem;
    margin-bottom: 1rem;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.green-clean { background: var(--farmacy-green); border-radius: 50%; width: 60px; margin: 0 auto 1rem; }
.honey-halo { background: var(--farmacy-yellow); border-radius: 50%; width: 60px; margin: 0 auto 1rem; }

.item-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--farmacy-dark);
}

/* Township Theme Game Section */
/* =====================================================
   STRATEGY SECTION
   ===================================================== */
.strategy-section {
    padding: 6rem 2rem;
    background: linear-gradient(to bottom, #f4fbf4, #e8f5e9);
    position: relative;
    z-index: 10;
}

.strategy-container {
    max-width: 1200px;
    margin: 0 auto;
}

.strategy-title {
    font-size: 2.5rem;
    color: var(--farmacy-dark);
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: var(--farmacy-serif);
}

.strategy-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #4a4a4a;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.strategy-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.strategy-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.strategy-card h3 {
    font-size: 1.4rem;
    color: var(--farmacy-dark);
    margin-bottom: 1rem;
    font-family: var(--farmacy-serif);
}

.strategy-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

.game-section {
    padding: 6rem 5%;
    background: #f9fbf9;
}

.game-container {
    max-width: 1200px;
    margin: 0 auto;
}

.game-header {
    text-align: center;
    margin-bottom: 3rem;
}

.game-header h2 {
    font-family: var(--farmacy-serif);
    font-size: 3rem;
    color: var(--farmacy-dark);
    margin-bottom: 1rem;
}

.township-wrapper {
    position: relative;
    background: #e0f7fa;
    border-radius: 30px;
    padding: 2rem;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* HUD removed */

.township-panel {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.5);
    text-align: center;
    position: relative;
}

.panel-header {
    background: linear-gradient(135deg, #2e7d32, #4caf50);
    color: white;
    padding: 15px 30px;
    border-radius: 20px;
    font-size: 1.8rem;
    font-family: var(--farmacy-serif);
    margin: -50px auto 20px auto;
    width: fit-content;
    box-shadow: 0 10px 20px rgba(76, 175, 80, 0.4);
    border: 2px solid rgba(255,255,255,0.3);
}

.panel-body {
    padding: 1.5rem;
}

.hint {
    font-size: 0.9rem;
    color: #5d4037;
    margin-bottom: 1rem;
    text-align: center;
}

.inventory-slots {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    min-height: 60px;
    justify-content: center;
}

.inventory-item {
    width: 50px;
    height: 50px;
    background: white;
    border: 3px solid #795548;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #5d4037;
    transition: transform 0.1s, box-shadow 0.1s;
}

.inventory-item:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #5d4037;
}

.lab-slots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lab-slot {
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.05);
    border: 3px dashed #795548;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.plus {
    font-size: 2rem;
    color: #795548;
    font-weight: 700;
}

.township-btn {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 15px;
    background: linear-gradient(to bottom, #aed581, #689f38);
    color: white;
    font-family: var(--farmacy-sans);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: not-allowed;
    box-shadow: 0 6px 0 #33691e;
    text-shadow: 0 2px 2px rgba(0,0,0,0.3);
    transition: transform 0.1s, box-shadow 0.1s, filter 0.3s;
    filter: grayscale(1);
}

.township-btn.ready, .township-btn:not(:disabled) {
    cursor: pointer;
    filter: grayscale(0);
}

.township-btn.ready:active, .township-btn:not(:disabled):active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #33691e;
}

/* Terrain & Isometric Farm Grid */
/* Township Scenery & 3D Environment */
.township-terrain {
    flex: 2;
    background: #6abf69;
    border-radius: 20px;
    border: 4px solid #388e3c;
    box-shadow: inset 0 0 80px rgba(0,80,0,0.15), 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    height: 700px;
}

/* =====================================================
   BACKGROUND IMAGE & INTERACTIVE OVERLAYS
   ===================================================== */
.isometric-world {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* Apply the generated image as the world background */
    background-image: url('background.jpg');
    background-size: 100% 100%; /* Stretch to fit container exactly so % coords always map to same spots */
    background-position: center;
    background-repeat: no-repeat;
}

.hitbox {
    position: absolute;
    /* Uncomment below to see hitboxes for debugging alignment */
    /* background: rgba(255, 0, 0, 0.3); */
    /* border: 2px solid red; */
    cursor: pointer;
    z-index: 100;
}

#overlay-lab {
    /* Rough guess for Farmacy building in the image (center right) */
    width: 25%;
    height: 25%;
    left: 45%;
    top: 40%;
}

#overlay-farm {
    /* Rough guess for the dirt plots in the image (center left) */
    width: 30%;
    height: 30%;
    left: 15%;
    top: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Farm Grid itself sits inside the farm overlay */
#farm-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    padding: 15px;
    /* Isometric transform to match the perspective of the ground in the image */
    transform: rotateX(60deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

/* Floating Dock UI (Inventory) */
.dock-ui {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.dock-panel {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 15px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.dock-hint {
    font-size: 0.85rem;
    font-weight: 600;
    color: #5d4037;
    margin-top: 10px;
    text-transform: uppercase;
}

/* Modals */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
}

/* Isometric Scenery Sprites (Upright) */
.tree, .rock {
    position: absolute;
    font-size: 3rem;
    transform: rotateZ(45deg) rotateX(-60deg) translateY(-20px); /* Counter-rotate to stand upright */
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.4));
    transform-style: preserve-3d;
}

.tree-1 { top: 50px; left: 300px; font-size: 4rem; }
.tree-2 { top: 300px; left: 50px; font-size: 3.5rem; }
.tree-3 { bottom: 100px; left: 150px; }
.tree-4 { top: 80px; right: 100px; font-size: 4.5rem; }
.rock-1 { top: 200px; left: 280px; font-size: 2rem; }

/* =====================================================
   FARM PLOTS (Transparent hitboxes over background image)
   ===================================================== */
.plot {
    width: 65px;
    height: 65px;
    background: transparent;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: filter 0.2s;
    /* Optional: uncomment to see the hitboxes */
    /* border: 1px solid rgba(255,255,255,0.3); */
}

.plot:hover, .plot.hover-target {
    background: rgba(255, 255, 255, 0.2);
}

.plot:active {
    background: rgba(255, 255, 255, 0.3);
}

.plot.growing {
    cursor: wait;
}

.progress-bar {
    width: 60px;
    height: 10px;
    background: rgba(0,0,0,0.5);
    border: 2px solid white;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    overflow: hidden;
    transform: rotateZ(45deg) rotateX(-60deg);
    z-index: 20;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #ffd54f, #ff8f00);
    width: 0%;
    animation: grow 3s linear forwards;
}

@keyframes grow {
    to { width: 100%; }
}

.seed-icon {
    font-size: 2.5rem;
    opacity: 0.5;
    /* Reverse the parent's isometric transform to make the fruit stand up clearly */
    transform: rotateZ(45deg) rotateX(-60deg);
    z-index: 10;
}

.plot.grown {
    cursor: pointer;
}

.plot.grown::after {
    content: attr(data-emoji);
    font-size: 5rem; /* Larger so it's super clear */
    position: absolute;
    /* Reverse the isometric transform perfectly so the fruit faces the camera */
    transform: rotateZ(45deg) rotateX(-60deg) translateY(-20px);
    z-index: 10;
    animation: bounce 1s infinite ease-in-out alternate;
    filter: drop-shadow(0 10px 5px rgba(0,0,0,0.5));
}

@keyframes bounce {
    from { transform: rotateZ(45deg) rotateX(-60deg) translateY(-15px); }
    to { transform: rotateZ(45deg) rotateX(-60deg) translateY(-30px); }
}

/* Flying Crop Animation */
.flying-crop {
    position: fixed;
    font-size: 3rem;
    z-index: 9999;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

/* Modal */
.craft-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.craft-modal .modal-content {
    max-width: 400px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.confetti {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    text-align: center;
}

.modal-content p {
    color: #5d4037;
    margin-bottom: 2rem;
    font-weight: 600;
    text-align: center;
}

.product-result {
    display: flex;
    justify-content: center;
}

.product-result img {
    width: 250px;
    height: auto;
    margin-bottom: 2rem;
    mix-blend-mode: multiply; /* Blends fake checkerboards with the cream background */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

@media (max-width: 900px) {
    .slider-panel { padding: 0 2rem; }
    .panel-content { min-width: 300px; max-width: 300px; }
    .slider-panel h2 { font-size: 2.5rem; }
    .game-layout { flex-direction: column; }
    .game-sidebar, .game-board { width: 100%; }
    .township-hud { flex-direction: column; gap: 1rem; }
}