/* ==========================================================================
   FERN -- Garden Scene (Warm Sunset, Pixel Art)
   All decorative elements drawn as pixel art to match plant sprites
   ========================================================================== */

/* -- 1. Scene container ---------------------------------------------------- */

#screen-container:has(.garden-scene) {
    overflow-y: hidden;
    padding: 0;
}

.garden-scene {
    position: relative;
    height: calc(100vh - var(--top-bar-height) - var(--bottom-nav-height));
    overflow: hidden;
    background: #224418;
    image-rendering: pixelated;
    transition: background 60s linear;
}

/* -- 2. Sky ---------------------------------------------------------------- */

.garden-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: background 60s linear;
}


/* -- 3. Sun / Moon (canvas-drawn, placed by JS) ---------------------------- */

.garden-sun,
.garden-moon {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    image-rendering: pixelated;
}

.garden-sun {
    opacity: 0.5;
    animation: sun-pulse 6s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 12px rgba(255,220,100,0.15));
}

.garden-moon {
    opacity: 0.7;
    animation: moon-pulse 8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 8px rgba(200,200,230,0.2));
}

.garden-sun canvas,
.garden-moon canvas {
    display: block;
    image-rendering: pixelated;
}

@keyframes sun-pulse {
    0%   { opacity: 0.85; filter: brightness(0.95); }
    100% { opacity: 1; filter: brightness(1.05); }
}

@keyframes moon-pulse {
    0%   { opacity: 0.65; filter: brightness(0.95); }
    100% { opacity: 0.8; filter: brightness(1.08); }
}

/* -- 4. Clouds (canvas-drawn, placed by JS) -------------------------------- */

.garden-clouds {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.garden-cloud {
    position: absolute;
    image-rendering: pixelated;
    animation: cloud-drift linear infinite;
}

.garden-cloud canvas {
    display: block;
    image-rendering: pixelated;
}

@keyframes cloud-drift {
    0%   { left: -300px; }
    100% { left: calc(100% + 200px); }
}

/* -- 5. Ground (2.5D surface + face) -------------------------------------- */

.garden-ground-surface {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(22,40,18,0.30) 5%,
        rgba(26,46,20,0.65) 10%,
        rgba(28,50,22,0.90) 16%,
        #224418 22%,
        #264a1c 58%,
        #284e1e 100%
    );
}
.garden-ground-face { display: none; }

.garden-horizon-fog { display: none; }

/* -- 5b. Grass clumps (scroll with track, animated) ----------------------- */

.garden-grass-clump {
    position: absolute;
    pointer-events: none;
    image-rendering: pixelated;
    transform-origin: bottom center;
    animation: grass-sway ease-in-out infinite alternate;
    will-change: transform;
}

.garden-grass-clump canvas {
    display: block;
    image-rendering: pixelated;
}

@keyframes grass-sway {
    0%   { transform: skewX(-6deg) rotate(-2deg); }
    35%  { transform: skewX(2deg) rotate(1deg); }
    65%  { transform: skewX(5deg) rotate(1.5deg); }
    100% { transform: skewX(-4deg) rotate(-1.5deg); }
}

.garden-grass-distant {
    z-index: 0;
    opacity: 0.35;
    filter: brightness(0.55);
}

.garden-grass-horizon {
    z-index: 0;
    opacity: 0.55;
    filter: brightness(0.65);
}

.garden-grass-back {
    z-index: 0;
    opacity: 0.8;
    filter: brightness(0.8);
}

.garden-grass-front {
    z-index: 2;
    opacity: 0.92;
}

.garden-grass-fore {
    z-index: 6;
    opacity: 0.55;
    filter: brightness(1.1) blur(0.5px);
}

/* -- 6. Spotlight cone + ambient ------------------------------------------- */

.garden-spotlight-cone { display: none; }
.garden-spotlight-ambient { display: none; }

/* -- 7. Particles / motes ------------------------------------------------- */

.garden-mote {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    will-change: transform, opacity;
}

.garden-mote--gold {
    width: 2px;
    height: 2px;
    background: rgba(220, 200, 130, 0.45);
    box-shadow: 0 0 4px rgba(220, 190, 110, 0.25);
}

.garden-mote--pollen {
    width: 2px;
    height: 2px;
    background: rgba(190, 180, 140, 0.35);
    box-shadow: 0 0 2px rgba(190, 180, 140, 0.15);
}

.garden-mote--dust {
    width: 2px;
    height: 2px;
    background: rgba(200, 195, 185, 0.20);
}

@keyframes mote-float-1 {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    10%  { opacity: 0.8; }
    50%  { transform: translate(12px, -25px) scale(1.1); opacity: 0.6; }
    90%  { opacity: 0; }
    100% { transform: translate(-8px, -50px) scale(0.5); opacity: 0; }
}

@keyframes mote-float-2 {
    0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
    15%  { opacity: 0.6; }
    60%  { transform: translate(-15px, -35px) scale(1); opacity: 0.5; }
    100% { transform: translate(4px, -65px) scale(0.3); opacity: 0; }
}

@keyframes mote-drift {
    0%   { transform: translate(0, 0); opacity: 0; }
    20%  { opacity: 0.4; }
    80%  { opacity: 0.25; }
    100% { transform: translate(20px, -16px); opacity: 0; }
}

@keyframes mote-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%      { opacity: 0.8; transform: scale(1.2); }
}

/* -- 7b. Fireflies -------------------------------------------------------- */

.garden-firefly {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    will-change: transform, opacity;
    animation: firefly-drift ease-in-out infinite alternate;
}

@keyframes firefly-drift {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 0.8; }
    35%  { transform: translate(15px, -20px); opacity: 1; }
    55%  { transform: translate(-10px, -35px); opacity: 0.6; }
    75%  { transform: translate(8px, -15px); opacity: 0.9; }
    90%  { opacity: 0.2; }
    100% { transform: translate(-5px, -40px); opacity: 0; }
}

/* -- 8. Bees --------------------------------------------------------------- */

.garden-bee {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
}

.garden-bee canvas {
    display: block;
    image-rendering: pixelated;
}

/* -- 9. Vignette & atmosphere --------------------------------------------- */

.garden-vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(10, 8, 16, 0.25) 65%, rgba(6, 4, 10, 0.50) 100%);
}

.garden-sun-shaft {
    display: none;
}

.garden-haze { display: none; }

/* -- 10. Scroll viewport --------------------------------------------------- */

.gh-scroll-viewport {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 6;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gh-scroll-viewport::-webkit-scrollbar {
    display: none;
}

/* -- 11. Scroll track ------------------------------------------------------ */

.gh-scroll-track {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 0 60px;
    gap: 0;
    isolation: isolate;
}

/* -- 12. Plot base --------------------------------------------------------- */

.gh-plot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--plot-width, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 80px;
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 0.15s ease;
}

/* -- 12b. Dirt patch under pots -------------------------------------------- */

.plot-dirt-patch {
    position: absolute;
    bottom: 78px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    image-rendering: pixelated;
    opacity: 0.9;
}

.plot-dirt-patch canvas {
    display: block;
    image-rendering: pixelated;
}

/* -- 13. Rarity glow on hover ---------------------------------------------- */

.gh-plot .plot-sprite-stage {
    filter: drop-shadow(0 0 0px transparent);
    transition: filter 0.25s ease;
}

.gh-plot:hover .plot-sprite-stage {
    filter: drop-shadow(0 0 12px var(--plot-glow, rgba(255,255,255,0.3)))
            drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: filter 0.2s ease;
}

.gh-plot[data-rarity="common"]    { --plot-glow: rgba(160,140,110,0.5); }
.gh-plot[data-rarity="uncommon"]  { --plot-glow: rgba(104,168,88,0.6); }
.gh-plot[data-rarity="rare"]      { --plot-glow: rgba(80,150,220,0.7); }
.gh-plot[data-rarity="epic"]      { --plot-glow: rgba(150,100,210,0.7); }
.gh-plot[data-rarity="legendary"] { --plot-glow: rgba(230,180,50,0.8); }

.gh-plot.selected .plot-sprite-stage {
    filter: drop-shadow(0 0 16px var(--plot-glow, rgba(255,255,255,0.5)))
            drop-shadow(0 0 6px var(--plot-glow, rgba(255,255,255,0.25)));
    transform: translateX(-50%) scale(1.02);
}

.gh-plot:active .plot-sprite-stage {
    filter: brightness(1.1) drop-shadow(0 0 14px var(--plot-glow, rgba(255,255,255,0.5)));
    transform: translateX(-50%) scale(0.98);
}

.gh-plot:hover .plot-marker {
    transform: translateX(-50%) translateY(-1px);
}

/* -- 14. Sprite stage ------------------------------------------------------ */

.plot-sprite-stage {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.plot-sprite-stage img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* -- 15. Rarity aura (disabled) ------------------------------------------- */
.plot-aura { display: none; }

/* -- 16. Light pool (disabled) -------------------------------------------- */
.plot-light-pool { display: none; }

/* -- 16b. Effect particles ------------------------------------------------ */

.plot-effect-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* -- 17. Stars arc (canvas-drawn by JS) ------------------------------------ */

.plot-stars-arc {
    position: absolute;
    bottom: 258px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
    image-rendering: pixelated;
}

.plot-star {
    display: inline-block;
    width: 21px;
    height: 21px;
    position: relative;
    image-rendering: pixelated;
}

.plot-star canvas {
    display: block;
    image-rendering: pixelated;
}

.plot-stars-arc .plot-star:nth-child(1) { transform: translateY(2px) rotate(-3deg); }
.plot-stars-arc .plot-star:nth-child(2) { transform: translateY(1px) rotate(-1deg); }
.plot-stars-arc .plot-star:nth-child(3) { transform: translateY(0); }
.plot-stars-arc .plot-star:nth-child(4) { transform: translateY(1px) rotate(1deg); }
.plot-stars-arc .plot-star:nth-child(5) { transform: translateY(2px) rotate(3deg); }

@keyframes star-glow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 1px rgba(240,204,64,0.2)); }
    50%      { filter: brightness(1.4) drop-shadow(0 0 5px rgba(240,204,64,0.7)); }
}

.plot-star-filled:nth-child(1) { animation: star-glow 3s ease-in-out 0s infinite; }
.plot-star-filled:nth-child(2) { animation: star-glow 3s ease-in-out 0.4s infinite; }
.plot-star-filled:nth-child(3) { animation: star-glow 3s ease-in-out 0.8s infinite; }
.plot-star-filled:nth-child(4) { animation: star-glow 3s ease-in-out 1.2s infinite; }
.plot-star-filled:nth-child(5) { animation: star-glow 3s ease-in-out 1.6s infinite; }

/* -- 18. Water orb (canvas-drawn by JS) ------------------------------------ */

.plot-water-orb {
    position: absolute;
    bottom: 240px;
    right: 10%;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    image-rendering: pixelated;
}

.plot-water-orb canvas {
    display: block;
    image-rendering: pixelated;
}

.plot-water-timer {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: rgba(200, 225, 245, 0.95);
    text-shadow:
        0 0 3px rgba(0,0,0,0.8),
        0 1px 2px rgba(0,0,0,0.6),
        1px 0 2px rgba(0,0,0,0.4);
    margin-top: 4px;
}

.plot-water-orb.water-ready {
    animation: water-bob 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(100, 180, 255, 0.35));
}

@keyframes water-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.plot-water-orb.water-cooldown {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* -- 19. Equipment indicators ---------------------------------------------- */

/* -- Spigot (auto-waterer fixture) -- */

.plot-sprinkler {
    position: absolute;
    right: 28%;
    bottom: 88px;
    z-index: 5;
    pointer-events: none;
}

.plot-sprinkler-post {
    display: block;
    width: 24px;
    height: 30px;
    image-rendering: pixelated;
}

.plot-sprinkler-drop {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #68c0f0;
    box-shadow: 0 0 3px rgba(80,180,255,0.5);
    image-rendering: pixelated;
}

.plot-sprinkler-drop.drop-0 {
    left: -2px;
    top: 0;
    animation: sprinkle-left 2s ease-out infinite;
}

.plot-sprinkler-drop.drop-1 {
    right: -2px;
    top: 0;
    animation: sprinkle-right 2s ease-out 0.7s infinite;
}

.plot-sprinkler-drop.drop-2 {
    left: -2px;
    top: 0;
    width: 2px;
    height: 2px;
    animation: sprinkle-left 2s ease-out 1.3s infinite;
}

@keyframes sprinkle-left {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: 1; transform: translate(0, 0); }
    50%  { opacity: 0.7; transform: translate(-6px, 12px); }
    80%  { opacity: 0.3; transform: translate(-8px, 20px); }
    100% { opacity: 0; transform: translate(-9px, 26px); }
}

@keyframes sprinkle-right {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: 1; transform: translate(0, 0); }
    50%  { opacity: 0.7; transform: translate(6px, 12px); }
    80%  { opacity: 0.3; transform: translate(8px, 20px); }
    100% { opacity: 0; transform: translate(9px, 26px); }
}

/* -- Nutrient stake (left side of pot) -- */

.plot-nutrient-stake {
    position: absolute;
    left: 28%;
    bottom: 88px;
    z-index: 5;
    pointer-events: none;
}

.plot-nutrient-flask {
    display: block;
    width: 24px;
    height: 30px;
    image-rendering: pixelated;
}

.plot-nutrient-drop {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #50d860;
    box-shadow: 0 0 4px rgba(60,200,80,0.6);
    image-rendering: pixelated;
    border-radius: 0;
}

.plot-nutrient-drop.ndrop-0 {
    right: -2px;
    top: 4px;
    animation: nutrient-spray 3.5s ease-out infinite;
}

.plot-nutrient-drop.ndrop-1 {
    right: -1px;
    top: 6px;
    width: 3px;
    height: 3px;
    animation: nutrient-spray 3.5s ease-out 1.6s infinite;
}

.plot-nutrient-drop.ndrop-2 {
    right: 0;
    top: 3px;
    width: 3px;
    height: 3px;
    animation: nutrient-spray 3.5s ease-out 0.8s infinite;
}

@keyframes nutrient-spray {
    0%   { opacity: 0; transform: translate(0, 0); }
    10%  { opacity: 1; transform: translate(0, 0); }
    50%  { opacity: 0.7; transform: translate(8px, 10px); }
    80%  { opacity: 0.3; transform: translate(10px, 20px); }
    100% { opacity: 0; transform: translate(11px, 26px); }
}

/* -- Floating equipment icons (sun lamp only) -- */

.plot-equipment {
    position: absolute;
    bottom: 112px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: row;
    gap: 3px;
    pointer-events: none;
}

.plot-equip-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    animation: equip-bob 4s ease-in-out infinite;
}

@keyframes equip-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.plot-equip-icon[data-equip="auto_waterer"] {
    filter: drop-shadow(0 0 3px rgba(80,160,240,0.6));
}

.plot-equip-icon[data-equip="sun_lamp"] {
    filter: drop-shadow(0 0 3px rgba(240,200,80,0.6));
    animation-delay: -1.3s;
}

.plot-equip-icon[data-equip="nutrient_drip"] {
    filter: drop-shadow(0 0 3px rgba(100,220,140,0.5));
    animation-delay: -2.7s;
}

/* -- 20. Plant marker (minimal info below the plant) ---------------------- */

.plot-marker {
    position: absolute;
    bottom: 400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.85;
}

.plot-seedling .plot-marker {
    bottom: 310px;
}

.gh-plot.selected .plot-marker {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.gh-plot:hover .plot-marker {
    opacity: 1;
}

.plot-marker-name {
    font: 11px/1.2 var(--font-pixel, 'Press Start 2P', monospace);
    color: rgba(240,232,218,0.95);
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.6);
    text-align: center;
    white-space: nowrap;
}

.plot-stars-row {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.plot-stars-row .plot-star {
    width: 15px;
    height: 15px;
}

.plot-marker-xp {
    width: 80px;
    margin-top: 4px;
}

.plot-marker-xp-bar {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}

.plot-marker-xp-fill {
    height: 100%;
    transition: width 0.6s ease;
}

.plot-marker-xp-fill.plot-xp-low     { background: rgba(80,140,200,0.6); }
.plot-marker-xp-fill.plot-xp-mid     { background: rgba(90,170,80,0.6); }
.plot-marker-xp-fill.plot-xp-high    { background: rgba(210,180,60,0.7); }
.plot-marker-xp-fill.plot-xp-max     { background: rgba(240,200,60,0.8); }
.plot-marker-xp-fill.plot-xp-growing { background: rgba(90,170,80,0.5); }

.plot-marker-timer {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: rgba(160, 220, 140, 0.95);
    text-shadow:
        0 0 3px rgba(0,0,0,0.8),
        0 1px 2px rgba(0,0,0,0.6),
        1px 0 2px rgba(0,0,0,0.4);
    text-align: center;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* -- 21. Idle animations --------------------------------------------------- */

@keyframes seedling-breathe {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); }
    50%      { transform: translateX(-50%) scale(1.03) rotate(0.5deg); }
}

.plot-seedling .plot-sprite-stage {
    animation: seedling-breathe 3.5s ease-in-out infinite;
}

/* -- 22. Empty plot -------------------------------------------------------- */

.plot-empty {
    opacity: 0.85;
    transition: opacity 0.4s ease, transform 0.3s ease;
    cursor: pointer;
}

.plot-empty:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.plot-empty-sprite {
    position: absolute;
    bottom: 94px;
    left: 50%;
    transform: translateX(-50%);
    image-rendering: pixelated;
    animation: empty-pot-breathe 4s ease-in-out infinite alternate;
}

.plot-empty-sprite canvas {
    display: block;
    image-rendering: pixelated;
}

@keyframes empty-pot-breathe {
    0%   { opacity: 0.7; filter: brightness(0.9); transform: translateX(-50%) translateY(0); }
    100% { opacity: 1; filter: brightness(1.2); transform: translateX(-50%) translateY(-2px); }
}

.plot-empty-label {
    position: absolute;
    bottom: 186px;
    left: 50%;
    transform: translateX(-50%);
    font: 8px/1.2 var(--font-pixel, 'Press Start 2P', monospace);
    color: rgba(180, 220, 140, 0.85);
    text-shadow:
        0 0 6px rgba(100, 180, 80, 0.4),
        0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    text-align: center;
    padding: 4px 8px;
    background: rgba(10, 20, 8, 0.5);
    border: 1px solid rgba(120, 180, 90, 0.25);
    border-radius: 3px;
    transition: all 0.3s ease;
    animation: empty-label-pulse 3s ease-in-out infinite alternate;
}

@keyframes empty-label-pulse {
    0%   { border-color: rgba(120, 180, 90, 0.15); background: rgba(10, 20, 8, 0.4); }
    100% { border-color: rgba(120, 180, 90, 0.35); background: rgba(10, 20, 8, 0.55); }
}

.plot-empty:hover .plot-empty-label {
    color: rgba(200, 240, 160, 1);
    text-shadow: 0 0 10px rgba(140,200,100,0.5), 0 1px 2px rgba(0,0,0,0.8);
    border-color: rgba(140, 200, 100, 0.5);
    background: rgba(10, 20, 8, 0.7);
}

.plot-empty-glow {
    position: absolute;
    bottom: 81px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(100, 180, 80, 0.12) 0%, transparent 70%);
    animation: empty-glow-pulse 3.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes empty-glow-pulse {
    0%   { opacity: 0.4; transform: translateX(-50%) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.plot-empty-sparkles {
    position: absolute;
    bottom: 96px;
    left: 0;
    right: 0;
    height: 100px;
    pointer-events: none;
}

.plot-empty-sparkle {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    background: rgba(180, 230, 140, 0.8);
    border-radius: 50%;
    animation: sparkle-float 3s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(140, 200, 100, 0.6);
}

@keyframes sparkle-float {
    0%   { transform: translateY(0) scale(0); opacity: 0; }
    15%  { transform: translateY(-10px) scale(1); opacity: 0.9; }
    80%  { transform: translateY(-70px) scale(0.6); opacity: 0.4; }
    100% { transform: translateY(-90px) scale(0); opacity: 0; }
}

/* -- 23. Locked plot ------------------------------------------------------- */

.plot-locked {
    opacity: 0.45;
    transition: opacity 0.4s ease, transform 0.3s ease;
}

.plot-locked:hover {
    opacity: 0.75;
    transform: translateY(-2px);
}

.plot-locked-bed {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: opacity 0.25s ease;
    image-rendering: pixelated;
}

.plot-locked-sprite {
    image-rendering: pixelated;
    animation: lock-sway 4s ease-in-out infinite alternate;
}

.plot-locked-sprite canvas {
    display: block;
    image-rendering: pixelated;
}

@keyframes lock-sway {
    0%   { transform: rotate(-1deg); filter: brightness(0.85); }
    100% { transform: rotate(1deg); filter: brightness(1.1); }
}

.plot-locked:hover .plot-locked-sprite {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(200,180,120,0.25));
}

.plot-lock-cost {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: rgba(180,160,120,0.55);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.plot-locked:hover .plot-lock-cost {
    color: rgba(220,200,150,0.85);
}

.plot-locked-ground {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background: radial-gradient(ellipse at 50% 40%, rgba(100,80,60,0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* -- 24. Nav arrows -------------------------------------------------------- */

.gh-nav-arrow { display: none; }

/* -- 25. HUD --------------------------------------------------------------- */

.garden-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 14px;
    background: linear-gradient(180deg,
        rgba(16, 12, 24, 0.9) 0%,
        rgba(16, 12, 24, 0.7) 50%,
        rgba(16, 12, 24, 0.3) 80%,
        transparent 100%
    );
    pointer-events: none;
}

.garden-hud > * { pointer-events: auto; }

.ghud-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.ghud-block {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20,16,12,0.5);
    border: 1px solid var(--border-dark, #3a3028);
    padding: 8px 12px;
    min-width: 0;
    flex: 1;
    justify-content: center;
}

.ghud-block svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ghud-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-muted, #8a7860);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ghud-tool svg { color: #7eb8e0; }

.ghud-tool-name {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-main, #d0c4a8);
}

.ghud-tool-xp {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #7eb8e0;
}

.ghud-water-btn {
    background: rgba(60,120,180,0.15);
    border-color: rgba(80,140,200,0.3);
    cursor: pointer;
    animation: water-pulse 2s ease-in-out infinite;
}

.ghud-water-btn svg { color: #6bb5ff; }

.ghud-water-count {
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #6bb5ff;
}

.ghud-water-btn:hover {
    background: rgba(60,120,180,0.25);
    border-color: rgba(80,140,200,0.5);
}

.ghud-water-wait svg { color: var(--text-muted, #8a7860); }

.ghud-water-timer {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
}

.ghud-timer {
    gap: 8px;
}

.ghud-timer-icon { display: flex; }
.ghud-timer-icon svg { color: var(--green, #68a858); }

.ghud-timer-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
}

.ghud-timer-val {
    font: 10px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--gold-light, #e8c040);
}

/* -- 26. Detail panel ------------------------------------------------------ */

.gh-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    z-index: 15;
    background: linear-gradient(180deg, rgba(18,24,18,0.96) 0%, rgba(14,20,14,0.98) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(100,140,80,0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,140,80,0.3) transparent;
}

.gh-detail-panel.open { transform: translateX(0); }
.gh-detail-panel::-webkit-scrollbar { width: 4px; }
.gh-detail-panel::-webkit-scrollbar-track { background: transparent; }
.gh-detail-panel::-webkit-scrollbar-thumb { background: rgba(100,140,80,0.3); border-radius: 2px; }

.ghd-close {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    background: linear-gradient(180deg, rgba(18,24,18,0.95) 0%, transparent 100%);
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin-left: auto;
    align-items: center;
    color: #b0c8a0;
    transition: background 0.2s ease;
}

.ghd-close:hover { background: rgba(60,80,50,0.5); }

.ghd-sprite {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 4px;
    min-height: 120px;
}

.ghd-sprite-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ghd-sprite-wrap img {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
}

.ghd-sprite-aura {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 80%;
    border-radius: 50%;
    pointer-events: none;
}

.ghd-header {
    text-align: center;
    padding: 0 16px 8px;
}

.ghd-name {
    font: 13px/1.3 var(--font-pixel, 'Press Start 2P', monospace);
    color: #f0e8d8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    margin: 0 0 8px;
    word-break: break-word;
}

.ghd-type-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ghd-type-name {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #90a880;
}

.ghd-gen-badge {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #c8b878;
    background: rgba(120,100,40,0.25);
    border: 1px solid rgba(180,160,80,0.3);
    padding: 2px 5px;
}

.ghd-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.ghd-xp { padding: 6px 16px; }

.ghd-xp-bar {
    height: 8px;
    background: rgba(60,80,50,0.5);
    overflow: hidden;
    border: 1px solid rgba(100,140,80,0.15);
}

.ghd-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #5098c8, #78b868);
    transition: width 0.6s ease;
}

.ghd-xp-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #90a880;
    text-align: center;
    margin-top: 4px;
}

.ghd-description {
    font: 9px/1.6 var(--font-pixel, 'Press Start 2P', monospace);
    color: #a0b890;
    padding: 8px 16px;
    border-top: 1px solid rgba(100,140,80,0.1);
    border-bottom: 1px solid rgba(100,140,80,0.1);
    background: rgba(40,60,30,0.2);
}

.ghd-section {
    padding: 8px 16px;
}

.ghd-section-title {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #80a068;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(100,140,80,0.15);
}

.ghd-stat-row {
    margin-bottom: 8px;
}

.ghd-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.ghd-stat-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #b0c8a0;
}

.ghd-stat-value {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #e0d8c0;
}

.ghd-stat-track {
    height: 6px;
    background: rgba(60,80,50,0.4);
    overflow: hidden;
    border: 1px solid rgba(100,140,80,0.12);
}

.ghd-stat-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.ghd-fill-va {
    background: linear-gradient(90deg, #886098, #c888b8);
}

.ghd-fill-aroma {
    background: linear-gradient(90deg, #608868, #98c878);
}

.ghd-effect-card {
    background: rgba(40,60,30,0.3);
    border: 1px solid rgba(100,140,80,0.15);
    padding: 8px;
    margin-bottom: 6px;
}

.ghd-effect-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ghd-effect-name {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #d0c8a0;
}

.ghd-potency-pips {
    display: flex;
    gap: 3px;
}

.ghd-potency-pip {
    width: 6px;
    height: 6px;
    background: rgba(60,80,50,0.4);
    border: 1px solid rgba(100,140,80,0.2);
}

.ghd-potency-pip.active {
    background: #c8a848;
    border-color: #d8b858;
    box-shadow: 0 0 3px rgba(200,168,72,0.4);
}

.ghd-effect-desc {
    font: 7px/1.5 var(--font-pixel, 'Press Start 2P', monospace);
    color: #90a880;
}

.ghd-equip-tag {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #b0c8a0;
    background: rgba(60,80,50,0.4);
    padding: 5px 8px;
    border: 1px solid rgba(100,140,80,0.2);
    margin-bottom: 4px;
}

.ghd-comp-stats {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.ghd-comp-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: rgba(40,60,30,0.4);
    border: 1px solid rgba(80,120,60,0.2);
}

.ghd-comp-stat.ghd-comp-wins .ghd-comp-value {
    color: #e8c040;
}

.ghd-comp-value {
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #c8dcc0;
}

.ghd-comp-label {
    font: 6px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #708860;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ghd-comp-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(40,60,30,0.3);
    border: 1px solid rgba(80,120,60,0.15);
}

.ghd-comp-score-label {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #708860;
    text-transform: uppercase;
}

.ghd-comp-score-value {
    font: 10px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #c8dcc0;
}

.ghd-lock-badge {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #c8a848;
    text-align: center;
    padding: 4px 8px;
    background: rgba(120,100,40,0.2);
    border: 1px solid rgba(180,160,80,0.25);
}

.ghd-actions {
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* -- 26b. Detail panel — Equipment & Items --------------------------------- */

.ghd-equip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(40,60,30,0.3);
    border: 1px solid rgba(100,140,80,0.15);
}

.ghd-equip-info {
    flex: 1;
    min-width: 0;
}

.ghd-equip-name {
    font: 8px/1.2 var(--font-pixel, 'Press Start 2P', monospace);
    color: #b0c8a0;
}

.ghd-equip-desc {
    font: 6px/1.4 var(--font-pixel, 'Press Start 2P', monospace);
    color: #708860;
    margin-top: 3px;
}

.ghd-equip-btn {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    padding: 4px 8px;
    border: 1px solid rgba(100,140,80,0.3);
    background: rgba(60,80,50,0.5);
    color: #b0c8a0;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.15s, color 0.15s;
}

.ghd-equip-btn:hover {
    background: rgba(80,120,60,0.6);
    color: #d0e8c0;
}

.ghd-equip-btn.ghd-equip-remove {
    border-color: rgba(160,80,60,0.3);
    background: rgba(80,40,30,0.4);
    color: #c09080;
}

.ghd-equip-btn.ghd-equip-remove:hover {
    background: rgba(120,50,30,0.5);
    color: #e0a090;
}

.ghd-equip-cost {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #c8b060;
    margin-left: 4px;
}

.ghd-equip-installed {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #68a058;
    margin-left: 8px;
    flex-shrink: 0;
}

/* --- Pot Picker (left/right arrows) --- */

.ghd-pot-picker {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.ghd-pot-arrow {
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-dark, #333);
    border-radius: 3px;
    color: var(--text-dim, #807868);
    padding: 8px 4px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
}
.ghd-pot-arrow:hover:not(:disabled) {
    border-color: var(--gold-dark, #8a7030);
    color: var(--text-bright, #d8cfc0);
}
.ghd-pot-arrow:disabled { opacity: 0.25; cursor: default; }

.ghd-pot-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ghd-pot-display {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}
.ghd-pot-display canvas { display: block; }

.ghd-pot-picker-label {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #807868);
    text-align: center;
    text-transform: capitalize;
}
.ghd-pot-picker-label.ghd-pot-equipped {
    color: var(--green, #68a858);
}

.ghd-pot-equip-btn {
    font-size: 7px !important;
    padding: 4px 12px !important;
    margin-top: 2px;
}

.ghd-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: rgba(40,60,30,0.3);
    border: 1px solid rgba(100,140,80,0.15);
}

.ghd-item-info {
    flex: 1;
    min-width: 0;
}

.ghd-item-name {
    font: 8px/1.2 var(--font-pixel, 'Press Start 2P', monospace);
    color: #b0c8a0;
}

.ghd-item-desc {
    font: 6px/1.4 var(--font-pixel, 'Press Start 2P', monospace);
    color: #708860;
    margin-top: 3px;
}

.ghd-item-qty {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #90a880;
    margin-top: 2px;
}

.ghd-item-btn {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    padding: 4px 10px;
    border: 1px solid rgba(100,160,80,0.4);
    background: rgba(50,100,40,0.5);
    color: #a0d080;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.15s, color 0.15s;
}

.ghd-item-btn:hover {
    background: rgba(60,120,50,0.7);
    color: #c0f0a0;
}

.ghd-item-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.ghd-empty-hint {
    font: 7px/1.5 var(--font-pixel, 'Press Start 2P', monospace);
    color: #607050;
    text-align: center;
    padding: 8px 4px;
}

.ghd-seedling-progress {
    margin-bottom: 6px;
}

.ghd-seedling-bar {
    height: 8px;
    background: rgba(60,80,50,0.5);
    border: 1px solid rgba(100,140,80,0.12);
    overflow: hidden;
}

.ghd-seedling-fill {
    height: 100%;
    background: linear-gradient(90deg, #508040, #78b060);
    transition: width 0.5s;
}

.ghd-seedling-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #90a880;
    text-align: center;
    margin-top: 4px;
}

/* -- 27. Water animation --------------------------------------------------- */

@keyframes water-anim-fall {
    0%   { transform: translateY(0); opacity: 0.95; }
    85%  { transform: translateY(var(--fall-dist, 300px)); opacity: 0.9; }
    100% { transform: translateY(var(--fall-dist, 300px)) scaleY(0.3); opacity: 0; }
}

.water-anim-drop {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #80c4f0;
    border-radius: 0;
    pointer-events: none;
    z-index: 20;
    image-rendering: pixelated;
    animation: water-anim-fall 0.5s ease-in forwards;
}

@keyframes water-anim-splash-kf {
    0%   { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(var(--sx, 10px), var(--sy, -15px)); opacity: 0; }
}

.water-anim-splash {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: #6bb5ff;
    pointer-events: none;
    z-index: 20;
    image-rendering: pixelated;
    animation: water-anim-splash-kf 0.45s ease-out forwards;
}

@keyframes xp-float-up {
    0%   { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    12%  { transform: translateX(-50%) translateY(-10px) scale(1.3); opacity: 1; }
    30%  { transform: translateX(-50%) translateY(-30px) scale(1); opacity: 1; }
    75%  { transform: translateX(-50%) translateY(-100px) scale(1); opacity: 0.9; }
    100% { transform: translateX(-50%) translateY(-140px) scale(0.9); opacity: 0; }
}

.anim-xp-float {
    position: absolute;
    font: 22px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #6bb5ff;
    text-shadow:
        0 0 12px rgba(107,181,255,0.7),
        0 0 24px rgba(107,181,255,0.3),
        0 2px 4px rgba(0,0,0,0.7);
    pointer-events: none;
    animation: xp-float-up 1.8s ease-out forwards;
    z-index: 22;
    white-space: nowrap;
}

/* -- 27b. Sun XP tick animation -------------------------------------------- */

@keyframes sun-xp-float {
    0%   { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    15%  { transform: translateX(-50%) translateY(-8px) scale(1.1); opacity: 1; }
    35%  { transform: translateX(-50%) translateY(-20px) scale(1); opacity: 1; }
    80%  { transform: translateX(-50%) translateY(-60px) scale(1); opacity: 0.7; }
    100% { transform: translateX(-50%) translateY(-80px) scale(0.9); opacity: 0; }
}

.anim-sun-xp-float {
    position: absolute;
    font: 14px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #f0d860;
    text-shadow:
        0 0 8px rgba(240, 200, 60, 0.6),
        0 0 16px rgba(240, 180, 40, 0.25),
        0 2px 3px rgba(0,0,0,0.6);
    pointer-events: none;
    animation: sun-xp-float 2.2s ease-out forwards;
    z-index: 22;
    white-space: nowrap;
}

/* -- 28. Star-up animation ------------------------------------------------- */

@keyframes star-text-pop {
    0%   { transform: translateX(-50%) scale(0.5); opacity: 0; }
    30%  { transform: translateX(-50%) scale(1.2); opacity: 1; }
    70%  { transform: translateX(-50%) scale(1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-20px) scale(0.8); opacity: 0; }
}

.anim-star-text {
    position: absolute;
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: #f0cc40;
    text-shadow: 0 0 8px rgba(240,204,64,0.6), 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
    animation: star-text-pop 2s ease-out forwards;
    z-index: 20;
    white-space: nowrap;
}

@keyframes star-burst-kf {
    0%   { transform: translate(0,0) scale(1); opacity: 1; }
    50%  { opacity: 0.8; }
    100% { transform: translate(var(--bx, 0), var(--by, -40px)) scale(0); opacity: 0; }
}

.anim-star-burst {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #f0cc40;
    pointer-events: none;
    animation: star-burst-kf 0.8s ease-out forwards;
    z-index: 20;
    image-rendering: pixelated;
}

/* -- 29. Modals ------------------------------------------------------------ */

.garden-modal .modal { max-width: 360px; }

/* -- 30. Picker (game inventory screen) ------------------------------------ */

.gpk-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg-darkest, #0c0a08);
    display: flex;
    flex-direction: column;
}

.gpk-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.gpk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md, 18px);
    height: var(--top-bar-height, 52px);
    background:
        linear-gradient(180deg, rgba(60,48,30,0.4) 0%, rgba(30,24,16,0.8) 60%, var(--bg-surface, #322820) 100%);
    border-bottom: 2px solid var(--border-highlight, #806848);
    box-shadow:
        0 2px 0 var(--border-dark, #3a3028),
        0 6px 20px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,220,140,0.08);
    flex-shrink: 0;
}

.gpk-title {
    font: 14px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--gold, #d0a030);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(208,160,48,0.3), 0 2px 0 rgba(0,0,0,0.5);
}

.gpk-close {
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--border-mid, #504030);
    background: rgba(40,32,24,0.6);
    box-shadow: inset 0 1px 0 rgba(255,220,140,0.04);
}

.gpk-close:hover { color: var(--text-bright, #f0e4d0); border-color: var(--border-light, #685840); }

.gpk-tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-dark, #3a3028);
}

.gpk-tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font: 11px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
    background: var(--bg-dark, #1a1614);
    cursor: pointer;
    border-right: 1px solid var(--border-dark, #3a3028);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.15s, background 0.15s;
}

.gpk-tab:last-child { border-right: none; }
.gpk-tab:hover { color: var(--text-main, #d0c4a8); }

.gpk-tab.active {
    color: var(--gold-light, #e8c040);
    background: var(--bg-mid, #28201a);
    box-shadow: inset 0 -2px 0 var(--gold-dark, #8a6820);
}

.gpk-filters {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    padding: 8px 10px;
    background: var(--bg-dark, #1a1614);
    border-bottom: 1px solid var(--border-dark, #3a3028);
}

.gpk-filter {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font: 10px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-muted, #8a7860);
    background: rgba(30,24,18,0.6);
    border: 1px solid var(--border-dark, #3a3028);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gpk-filter:hover { color: var(--text-dim, #a89070); }

.gpk-filter.active {
    color: var(--gold-light, #e8c040);
    background: rgba(208,160,48,0.08);
    border-color: var(--gold-dark, #8a6820);
}

.gpk-filter-common.active { color: var(--rarity-common); border-color: var(--rarity-common); background: rgba(138,120,96,0.1); }
.gpk-filter-uncommon.active { color: var(--rarity-uncommon); border-color: var(--rarity-uncommon); background: rgba(104,168,88,0.1); }
.gpk-filter-rare.active { color: var(--rarity-rare); border-color: var(--rarity-rare); background: rgba(64,112,160,0.1); }
.gpk-filter-epic.active { color: var(--rarity-epic); border-color: var(--rarity-epic); background: rgba(112,80,160,0.1); }
.gpk-filter-legendary.active { color: var(--rarity-legendary); border-color: var(--rarity-legendary); background: rgba(208,160,48,0.12); }

.gpk-grid {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,140,80,0.3) transparent;
}

.gpk-grid::-webkit-scrollbar { width: 4px; }
.gpk-grid::-webkit-scrollbar-track { background: transparent; }
.gpk-grid::-webkit-scrollbar-thumb { background: rgba(100,140,80,0.3); }

.gpk-empty {
    grid-column: 1 / -1;
    text-align: center;
    font: 8px/2 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-muted, #8a7860);
    padding: 60px 20px;
}

.gpk-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-mid, #28201a);
    border: 2px solid var(--border-dark, #3a3028);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.gpk-card:hover {
    background: var(--bg-raised, #3e3228);
    border-color: var(--border-mid, #504030);
}

.gpk-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(255,220,140,0.03);
    pointer-events: none;
}

.gpk-card-common { border-left: 4px solid var(--rarity-common, #8a7860); }
.gpk-card-uncommon { border-left: 4px solid var(--rarity-uncommon, #68a858); }
.gpk-card-rare { border-left: 4px solid var(--rarity-rare, #4070a0); }
.gpk-card-epic { border-left: 4px solid var(--rarity-epic, #7050a0); }
.gpk-card-legendary {
    border-left: 4px solid var(--rarity-legendary, #d0a030);
    box-shadow: inset 0 0 12px rgba(208,160,48,0.08);
}

.gpk-sprite {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(12,10,8,0.4);
    border: 1px solid var(--border-dark, #3a3028);
    padding: 4px;
}

.gpk-sprite canvas,
.gpk-sprite img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.gpk-card-info {
    flex: 1;
    min-width: 0;
}

.gpk-card-name {
    font: 10px/1.4 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-bright, #f0e4d0);
    margin-bottom: 4px;
    word-break: break-word;
}

.gpk-card-rarity {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.gpk-card-common .gpk-card-rarity { color: var(--rarity-common); }
.gpk-card-uncommon .gpk-card-rarity { color: var(--rarity-uncommon); }
.gpk-card-rare .gpk-card-rarity { color: var(--rarity-rare); }
.gpk-card-epic .gpk-card-rarity { color: var(--rarity-epic); }
.gpk-card-legendary .gpk-card-rarity { color: var(--rarity-legendary); }

.gpk-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}

.gpk-star-on {
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--gold, #d0a030);
}

.gpk-star-off {
    font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--border-dark, #3a3028);
}

.gpk-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 6px;
}

.gpk-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gpk-bar-label {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-muted, #8a7860);
    width: 22px;
    flex-shrink: 0;
}

.gpk-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-darkest, #0c0a08);
    border: 1px solid var(--border-dark, #3a3028);
    overflow: hidden;
}

.gpk-bar-fill {
    height: 100%;
}

.gpk-fill-va { background: var(--green, #68a858); }
.gpk-fill-ar { background: var(--purple, #7050a0); }

.gpk-time {
    font: 9px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--gold-light, #e8c040);
    margin-bottom: 4px;
}

.gpk-gen {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
    margin-bottom: 4px;
}

.gpk-xp {
    font: 8px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--green-light, #98d870);
}

.gpk-effects {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.gpk-fx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.gpk-fx-name {
    font: 7px/1 var(--font-pixel, 'Press Start 2P', monospace);
    color: var(--text-dim, #a89070);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gpk-pips {
    display: flex;
    gap: 3px;
}

.gpk-pip {
    width: 6px;
    height: 6px;
    background: var(--border-dark, #3a3028);
}

.gpk-pip.active {
    background: var(--green, #68a858);
    box-shadow: 0 0 3px rgba(104,168,88,0.4);
}

/* -- 31. Responsive -------------------------------------------------------- */

@media (max-width: 499px) {
    .gh-plot { --plot-width: 200px; }

    .plot-sprite-stage { width: 260px; height: 260px; bottom: 70px; }
    .plot-marker { bottom: 330px; }
    .plot-seedling .plot-marker { bottom: 260px; }
    .plot-marker-name { font-size: 10px; }
    .plot-water-orb { bottom: 200px; }
    .plot-light-pool { width: 160px; height: 30px; }
    .plot-empty-sprite { bottom: 80px; }

    .gh-scroll-track { padding: 0 20px; }

    .garden-hud { padding: 8px 8px 12px; gap: 4px; }
    .ghud-block { padding: 6px 8px; }
}

@media (max-width: 767px) {
    .gh-detail-panel {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: none;
        border-left: none;
        border-top: none;
        transform: translateX(100%);
        padding-bottom: 70px;
    }

    .gh-detail-panel.open { transform: translateX(0); }

    .ghd-name { font-size: 18px; }
    .ghd-type-name { font-size: 11px; }
    .ghd-gen-badge { font-size: 10px; padding: 3px 7px; }
    .ghd-xp-label { font-size: 11px; }
    .ghd-description { font-size: 12px; line-height: 1.7; }
    .ghd-section-title { font-size: 12px; }
    .ghd-stat-label { font-size: 11px; }
    .ghd-stat-value { font-size: 12px; }
    .ghd-effect-name { font-size: 12px; }
    .ghd-effect-desc { font-size: 10px; line-height: 1.6; }
    .ghd-equip-tag { font-size: 11px; }
    .ghd-equip-name { font-size: 10px; }
    .ghd-equip-desc { font-size: 8px; }
    .ghd-equip-btn { font-size: 9px; padding: 5px 10px; }
    .ghd-equip-cost { font-size: 9px; }
    .ghd-item-name { font-size: 10px; }
    .ghd-item-desc { font-size: 8px; }
    .ghd-item-qty { font-size: 9px; }
    .ghd-item-btn { font-size: 9px; padding: 5px 12px; }
    .ghd-seedling-label { font-size: 10px; }
    .ghd-empty-hint { font-size: 9px; }
    .ghd-potency-pip { width: 8px; height: 8px; }
    .ghd-lock-badge { font-size: 10px; }
    .ghd-section { padding: 10px 20px; }
    .ghd-header { padding: 0 20px 10px; }
    .ghd-xp { padding: 8px 20px; }
    .ghd-description { padding: 10px 20px; }
    .ghd-actions { padding: 16px 20px 24px; }
    .ghd-stat-track { height: 8px; }
    .ghd-xp-bar { height: 10px; }
    .ghd-effect-card { padding: 10px; }
    .ghd-stars { gap: 6px; }
}

@media (min-width: 500px) and (max-width: 767px) {
    .gh-plot { --plot-width: 280px; }
    .plot-sprite-stage { width: 290px; height: 290px; bottom: 78px; }
    .plot-water-orb { bottom: 230px; }
}

@media (min-width: 768px) {
    .gh-plot { --plot-width: 320px; }
    .plot-sprite-stage { width: 330px; height: 330px; bottom: 80px; }
    .plot-water-orb { bottom: 260px; }
    .gh-detail-panel { width: 340px; }
    .gpk-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .plot-sprite-stage { width: 360px; height: 360px; }
    .plot-water-orb { bottom: 280px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .gh-plot { --plot-width: 180px; }
    .plot-sprite-stage { width: 100px; height: 100px; bottom: 6px; }
    .plot-marker { bottom: 120px; }
    .plot-seedling .plot-marker { bottom: 100px; }
    .plot-marker-name { font-size: 6px; }
    .plot-star { width: 12px; height: 12px; }
    .plot-water-orb { bottom: 80px; }
    .plot-equipment { bottom: 80px; }
    .plot-light-pool { width: 80px; height: 16px; }
    .garden-hud { padding: 6px 10px; }
    .garden-hud-stat { font-size: 9px; }
    .gh-detail-panel { width: 240px; }
}