/* ================================================================
   GARDEN VILLAGE — Animal Crossing × Story of Seasons
   Game Dashboard CSS
   ================================================================ */

/* ── Custom Properties ── */
:root {
    /* Sky palette */
    --sky-top:    #5BA8D4;
    --sky-mid:    #87CEEB;
    --sky-low:    #C8EFA8;
    --sky-ground: #76C442;

    /* Ground palette */
    --grass-bright:  #76C442;
    --grass-mid:     #5CA030;
    --grass-dark:    #3D7A1E;
    --soil-light:    #C4A26B;
    --soil-dark:     #8B6242;
    --soil-rich:     #6B4A2A;

    /* UI: Wooden panel (Animal Crossing dialog) */
    --panel-bg:       #FFFDE7;
    --panel-bg-2:     #FFF8D6;
    --panel-border:   #3E2723;
    --panel-shadow:   #1A0E08;
    --panel-sign:     #C68642;
    --panel-sign-dark:#8B5A2B;

    /* HUD */
    --hud-bg:         rgba(22, 14, 6, 0.86);
    --hud-border:     rgba(124, 204, 58, 0.35);
    --hud-text:       #F5E6C8;
    --hud-muted:      rgba(245, 230, 200, 0.55);

    /* Nav */
    --nav-bg:         #2A1B0E;
    --nav-border:     #4A3020;
    --nav-active:     #7CCC3A;

    /* Meter fills */
    --fill-ok:   linear-gradient(90deg, #29B6F6 0%, #4FC3F7 100%);
    --fill-dry:  linear-gradient(90deg, #F57C00 0%, #FFB300 100%);
    --fill-wet:  linear-gradient(90deg, #1565C0 0%, #1E88E5 100%);

    /* Typography */
    --font:  'Nunito', 'Noto Sans TC', sans-serif;

    /* Transitions */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Layout */
    --hud-h:  60px;
    --nav-h:  68px;
}

/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--sky-top);
    /* Prevent text selection in game UI */
    -webkit-tap-highlight-color: transparent;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ================================================================
   WORLD BACKGROUND — Fixed parallax layers
   ================================================================ */

.world-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;

    /* Sky gradient — day */
    background: linear-gradient(180deg,
        #5BA8D4 0%,
        #87CEEB 22%,
        #AEE4F8 42%,
        #C8F0A8 54%,
        #76C442 60%,
        #5CA030 72%,
        #3D7A1E 86%,
        #2A5A14 100%
    );
    transition: background 3s ease;
}

/* Night mode — applied to body */
body.is-night .world-bg {
    background: linear-gradient(180deg,
        #060C1A 0%,
        #0D1B3E 22%,
        #102240 42%,
        #0A1E0A 54%,
        #122C08 60%,
        #0D2206 72%,
        #091604 86%,
        #050E03 100%
    );
}

/* ── Stars layer ── */
.stars-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

/* CSS starfield via box-shadow on pseudo-elements */
.stars-layer::before,
.stars-layer::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: white;
}

.stars-layer::before {
    top: 0; left: 0;
    box-shadow:
        80px  50px white, 150px  30px rgba(255,255,255,0.8),
        230px  90px white, 320px  20px rgba(255,255,255,0.9),
        420px  70px white, 500px  40px rgba(255,255,255,0.7),
        600px  80px white, 700px  25px rgba(255,255,255,0.85),
        800px  60px white, 900px  35px rgba(255,255,255,0.75),
        1000px 75px white, 1100px 15px rgba(255,255,255,0.9),
        1200px 55px white, 1300px 45px rgba(255,255,255,0.8),
        1400px 85px white,  50px 120px rgba(255,255,255,0.7),
        160px 100px white, 270px 140px rgba(255,255,255,0.85),
        380px 110px white, 490px 150px rgba(255,255,255,0.75),
        580px 130px white, 670px 160px rgba(255,255,255,0.8),
        760px 105px white, 850px 170px rgba(255,255,255,0.7),
        940px 125px white, 1030px 145px rgba(255,255,255,0.85),
        1120px 100px white, 1210px 155px rgba(255,255,255,0.8),
        1310px 115px white, 1390px 135px rgba(255,255,255,0.75);
}

.stars-layer::after {
    top: 0; left: 0;
    width: 1px; height: 1px;
    box-shadow:
        35px  180px rgba(255,255,255,0.6),
        115px 210px rgba(255,255,255,0.8),
        195px 195px rgba(255,255,255,0.7),
        275px 225px rgba(255,255,255,0.85),
        355px 185px rgba(255,255,255,0.6),
        435px 215px rgba(255,255,255,0.75),
        515px 200px rgba(255,255,255,0.8),
        595px 230px rgba(255,255,255,0.7),
        675px 190px rgba(255,255,255,0.85),
        755px 220px rgba(255,255,255,0.6),
        835px 210px rgba(255,255,255,0.75),
        915px 235px rgba(255,255,255,0.8),
        995px 195px rgba(255,255,255,0.7),
        1075px 225px rgba(255,255,255,0.85),
        1155px 205px rgba(255,255,255,0.6),
        1235px 215px rgba(255,255,255,0.75),
        1315px 230px rgba(255,255,255,0.8),
        1395px 200px rgba(255,255,255,0.7);
}

/* ── Clouds ── */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50px;
    animation: cloudDrift linear infinite;
    opacity: 0;
    animation-fill-mode: forwards;
}

body:not(.is-night) .cloud {
    opacity: 0.88;
}

body.is-night .cloud {
    background: rgba(60, 70, 100, 0.5);
    opacity: 0.4;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

/* Cloud A — large */
.cloud-a {
    width: 140px; height: 44px;
    top: 10%;
    left: -160px;
    animation-duration: 55s;
    animation-delay: -18s;
}
.cloud-a::before { width: 80px; height: 80px; top: -44px; left: 18px; }
.cloud-a::after  { width: 60px; height: 60px; top: -32px; left: 58px; }

/* Cloud B — medium */
.cloud-b {
    width: 100px; height: 34px;
    top: 18%;
    left: -120px;
    animation-duration: 45s;
    animation-delay: -30s;
}
.cloud-b::before { width: 60px; height: 60px; top: -32px; left: 12px; }
.cloud-b::after  { width: 45px; height: 45px; top: -24px; left: 42px; }

/* Cloud C — small */
.cloud-c {
    width: 80px; height: 28px;
    top: 8%;
    left: -100px;
    animation-duration: 35s;
    animation-delay: -8s;
}
.cloud-c::before { width: 48px; height: 48px; top: -26px; left: 10px; }
.cloud-c::after  { width: 36px; height: 36px; top: -18px; left: 34px; }

@keyframes cloudDrift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 220px)); }
}

/* ── Hills SVG layer ── */
.hills-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    pointer-events: none;
}
.hills-layer svg { width: 100%; height: 100%; }

/* ── Ground strip ── */
.ground-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(180deg, #2A5A14 0%, #1E3E0E 100%);
}


/* ================================================================
   GAME HUD — fixed top bar
   ================================================================ */

.game-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--hud-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;

    background: var(--hud-bg);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 2px solid var(--hud-border);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

/* Village name badge */
.hud-village {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;

    font-size: 0.82rem;
    font-weight: 800;
    color: #7CCC3A;
    letter-spacing: 0.3px;
    text-shadow: 0 0 12px rgba(124, 204, 58, 0.5);
}

.hud-leaf-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(124, 204, 58, 0.6));
}

/* DLI energy bar */
.hud-energy {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.energy-label {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--hud-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.energy-track {
    flex: 1;
    height: 18px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    overflow: visible;
    position: relative;
    min-width: 80px;
}

/* Clip bar overflow */
.energy-track > .energy-fill,
.energy-track > .energy-segments {
    border-radius: inherit;
    overflow: hidden;
}

.energy-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #56C234 0%, #7CCC3A 60%, #CDDC39 100%);
    transition: width 1s var(--ease-spring);
    overflow: hidden;
}

/* Shine streak on energy bar */
.energy-fill::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 8%;
    right: 8%;
    height: 5px;
    background: rgba(255, 255, 255, 0.32);
    border-radius: 3px;
}

/* Segment dividers overlay */
.energy-segments {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    border-radius: 8px;
    overflow: hidden;
}

.energy-segments span {
    flex: 1;
    border-right: 2px solid rgba(0, 0, 0, 0.3);
}
.energy-segments span:last-child { border-right: none; }

.energy-readout {
    font-size: 0.78rem;
    font-weight: 900;
    color: var(--hud-text);
    flex-shrink: 0;
    min-width: 40px;
}

.energy-max {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--hud-muted);
}

/* Right side pills */
.hud-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hud-lux-pill,
.hud-time-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.hud-lux-pill {
    background: rgba(255, 215, 64, 0.14);
    border: 1px solid rgba(255, 215, 64, 0.3);
    color: #FFD740;
}

.hud-time-pill {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--hud-muted);
}

.unit {
    font-size: 0.65rem;
    opacity: 0.7;
}


/* ================================================================
   MAIN GAME SCENE
   ================================================================ */

.game-scene {
    position: relative;
    z-index: 10;
    min-height: 100dvh;
    padding-top: var(--hud-h);
    padding-bottom: var(--nav-h);
}

/* Tab content visibility */
.tab-content {
    display: none;
    animation: sceneReveal 0.35s var(--ease-out) both;
}

.tab-content.active {
    display: block;
}

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


/* ================================================================
   SKY ZONE — Sun character + decorative flora
   ================================================================ */

.sky-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 38vh;
    min-height: 200px;
    max-height: 300px;
    padding: 16px;
    overflow: hidden;
}

/* ── Sun visual ── */
.sun-visual {
    width: 130px;
    height: 130px;
    position: relative;
    transition: opacity 1.2s ease;
    filter: drop-shadow(0 4px 16px rgba(255, 215, 64, 0.45));
}

body.is-night .sun-visual {
    filter: drop-shadow(0 0 20px rgba(200, 220, 255, 0.4));
}

.sun-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sun-rays {
    transform-origin: 100px 100px;
    animation: raysRotate 12s linear infinite;
}

@keyframes raysRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.sun-visual.night .sun-rays {
    display: none;
}

/* Night: convert to moon */
body.is-night #sun-visual circle:first-of-type {
    fill: #C8D8F0 !important;
}
body.is-night #sun-visual circle:nth-of-type(2) {
    fill: #D8E8FF !important;
}

/* ── Decorative sky flora ── */
.sky-flora {
    display: flex;
    gap: 28px;
    align-items: flex-end;
    margin-top: 14px;
}

.flora-item {
    opacity: 0.9;
    animation: floraFloat ease-in-out infinite;
    transform-origin: center bottom;
}

.flora-1 { animation-duration: 3.2s; animation-delay: 0s;    }
.flora-2 { animation-duration: 2.8s; animation-delay: -0.6s; }
.flora-3 { animation-duration: 3.6s; animation-delay: -1.2s; }
.flora-4 { animation-duration: 3.0s; animation-delay: -1.8s; }
.flora-5 { animation-duration: 3.4s; animation-delay: -0.9s; }

@keyframes floraFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%       { transform: translateY(-6px) rotate(3deg); }
}


/* ================================================================
   FENCE DIVIDER
   ================================================================ */

.fence-divider {
    width: 100%;
    height: 56px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.fence-divider svg {
    width: 100%;
    height: 100%;
}


/* ================================================================
   GARDEN ZONE — Plant plots
   ================================================================ */

.garden-zone {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    padding: 24px 20px 32px;

    /* Subtle soil gradient underneath */
    background: linear-gradient(180deg,
        rgba(62, 39, 19, 0.0) 0%,
        rgba(62, 39, 19, 0.18) 100%
    );
}


/* ── Garden Plot ── */
.garden-plot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 220px;
    flex-shrink: 0;
}


/* ── Plot sign ── */
.plot-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.plot-sign-board {
    background: var(--panel-sign);
    color: white;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 5px 16px;
    border-radius: 8px;
    border: 2.5px solid var(--panel-sign-dark);
    box-shadow:
        0 2px 0 var(--panel-sign-dark),
        0 4px 8px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.plot-sign-stake {
    width: 6px;
    height: 22px;
    background: linear-gradient(180deg, #A07040 0%, #7A5428 100%);
    border-radius: 0 0 3px 3px;
    border: 1.5px solid var(--panel-sign-dark);
    border-top: none;
}


/* ── Plant visual container ── */
.plant-visual {
    width: 180px;
    height: 260px;
    position: relative;
    transition: transform 0.4s ease, filter 0.6s ease;
    flex-shrink: 0;
}

.plant-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Stem and leaf transitions */
.stem {
    transform-origin: bottom center;
    transition: transform 0.8s ease;
}

.leaves use {
    transform-origin: 100px 150px;
    transition: transform 0.8s ease, filter 0.6s ease;
}

.face { transition: opacity 0.4s ease; }

/* Happy state — gentle sway */
.plant-visual.happy {
    animation: plantSway 3.5s ease-in-out infinite;
}

@keyframes plantSway {
    0%, 100% { transform: rotate(-2deg) translateX(0); }
    50%       { transform: rotate(2deg)  translateX(2px); }
}

/* Droopy / thirsty state */
.plant-visual.droopy {
    filter: saturate(0.55) brightness(0.88);
    animation: plantDroop 2.2s ease-in-out infinite alternate;
}

@keyframes plantDroop {
    0%   { transform: rotate(-4deg) translateY(0); }
    100% { transform: rotate(3deg)  translateY(6px); }
}

.plant-visual.droopy .stem {
    transform: rotate(8deg);
    transform-origin: bottom center;
}

.plant-visual.droopy .leaves use {
    transform: rotate(18deg) translateY(16px) !important;
    filter: grayscale(0.4);
}

.plant-visual.droopy .face path {
    transform: rotate(180deg) scaleX(-1);
    transform-origin: 0 13px;
}


/* ── Speech bubble ── */
.plant-status-bubble {
    position: absolute;
    top: 26px;
    right: -36px;
    background: white;
    color: #3E2723;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 7px 13px;
    border-radius: 14px;
    border: 2.5px solid #3E2723;
    box-shadow: 2px 2px 0 #3E2723;
    white-space: nowrap;
    z-index: 20;
    animation: bubbleIn 0.4s var(--ease-spring) both;
    letter-spacing: 0.2px;
}

/* Bubble tail */
.plant-status-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 14px;
    border: 5px solid transparent;
    border-top-color: #3E2723;
}

.plant-status-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 15px;
    border: 4px solid transparent;
    border-top-color: white;
    z-index: 1;
}

@keyframes bubbleIn {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}


/* ── Plot dialog card (Animal Crossing style) ── */
.plot-dialog-card {
    width: 100%;
    max-width: 220px;
    background: var(--panel-bg);
    border: 3.5px solid var(--panel-border);
    border-radius: 20px;
    padding: 14px 16px;
    box-shadow:
        0 4px 0 var(--panel-border),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    margin-top: 4px;
}

/* Scanline texture overlay */
.plot-dialog-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.02) 3px,
        rgba(0, 0, 0, 0.02) 4px
    );
    pointer-events: none;
}

.plot-dialog-card { position: relative; }

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(62, 39, 19, 0.2);
}

.dialog-name {
    font-weight: 900;
    font-size: 0.92rem;
    color: #3E2723;
    letter-spacing: 0.3px;
}

.dialog-mood {
    font-size: 1.1rem;
    transition: transform 0.3s var(--ease-spring);
}

.dialog-mood:not(:empty) {
    animation: moodBounce 2s ease-in-out infinite;
}

@keyframes moodBounce {
    0%, 100% { transform: translateY(0) scale(1);    }
    50%       { transform: translateY(-3px) scale(1.1); }
}


/* ── Moisture meter row ── */
.meter-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.meter-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.meter-track {
    flex: 1;
    height: 14px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
}

.meter-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--fill-ok);
    transition: width 0.9s var(--ease-spring), background 0.5s ease;
    position: relative;
    overflow: hidden;
}

.meter-fill::after {
    content: '';
    position: absolute;
    top: 2px; left: 6%; right: 6%;
    height: 4px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 2px;
}

.meter-fill.fill-ok  { background: var(--fill-ok);  }
.meter-fill.fill-dry {
    background: var(--fill-dry);
    animation: pulseDry 1s ease-in-out infinite alternate;
}
.meter-fill.fill-wet { background: var(--fill-wet);  }

@keyframes pulseDry {
    from { opacity: 0.75; }
    to   { opacity: 1; }
}

.meter-val {
    font-weight: 900;
    font-size: 0.82rem;
    color: #3E2723;
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}

.meter-unit {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.6;
}


/* ── Moisture target hint ── */
.moisture-hint {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(62, 39, 19, 0.45);
    text-align: right;
    margin: -4px 0 8px;
    letter-spacing: 0.3px;
    min-height: 1em;
    transition: color 0.3s ease;
}

body.is-night .moisture-hint {
    color: rgba(176, 216, 136, 0.45);
}

/* ── Growth stage select ── */
.stage-row {
    width: 100%;
}

.game-select {
    width: 100%;
    padding: 7px 12px;
    border-radius: 12px;
    border: 2px solid rgba(62, 39, 19, 0.25);
    background: #FFF3CD;
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.82rem;
    color: #3E2723;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%233E2723' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.game-select:focus {
    border-color: #7CCC3A;
    box-shadow: 0 0 0 3px rgba(124, 204, 58, 0.25);
}

.game-select:hover {
    border-color: rgba(62, 39, 19, 0.45);
}


/* ================================================================
   GAME NAV — Fixed bottom bar
   ================================================================ */

.game-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    height: var(--nav-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: var(--nav-bg);
    border-top: 2.5px solid var(--nav-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.38);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.68rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 8px 4px;
    position: relative;
    letter-spacing: 0.3px;

    /* Minimum touch target */
    min-height: 44px;
}

.tab-btn svg {
    transition: transform 0.25s var(--ease-spring), color 0.2s ease;
}

.tab-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
}

.tab-btn:active {
    transform: scale(0.95);
}

.tab-btn.active {
    color: var(--nav-active);
    background: rgba(124, 204, 58, 0.07);
}

/* Active indicator bar at top */
.tab-btn.active::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--nav-active);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 8px rgba(124, 204, 58, 0.6);
}

.tab-btn.active svg {
    transform: translateY(-3px) scale(1.12);
    filter: drop-shadow(0 2px 6px rgba(124, 204, 58, 0.5));
}


/* ================================================================
   JOURNAL / CHARTS TAB
   ================================================================ */

.journal-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 32px;
}

/* Journal cover title bar */
.journal-cover {
    background: linear-gradient(135deg, #6D4C41 0%, #4E342E 100%);
    border-radius: 16px 16px 0 0;
    border: 3px solid #3E2723;
    border-bottom: none;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-cover-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 1.0rem;
    color: #FFF8DC;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Journal pages area */
.journal-page {
    background: #FFFDE7;
    border: 3px solid #3E2723;
    border-radius: 0 0 16px 16px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* Ruled lines background */
.journal-page::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0 0 13px 13px;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 27px,
        rgba(196, 162, 107, 0.2) 27px,
        rgba(196, 162, 107, 0.2) 29px
    );
    pointer-events: none;
}

.journal-page { position: relative; }

.journal-section {
    position: relative;
    z-index: 1;
}

.journal-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 0.95rem;
    color: #3E2723;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px dotted rgba(62, 39, 19, 0.25);
}

.chart-container {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 2px solid rgba(62, 39, 19, 0.1);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* ================================================================
   RESPONSIVE — Mobile (≤ 600px)
   ================================================================ */

@media (max-width: 600px) {

    .hud-village span {
        /* Hide label, keep icon on very small screens */
        display: none;
    }

    .sky-zone {
        height: 30vh;
        min-height: 160px;
        max-height: 240px;
    }

    .sun-visual {
        width: 100px;
        height: 100px;
    }

    .sky-flora { gap: 18px; }
    .flora-item svg { width: 20px !important; height: 20px !important; }

    /* Horizontal scroll garden on mobile */
    .garden-zone {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 20px;
        padding-left: 20px;
        padding-right: 20px;
        gap: 24px;

        /* Hide scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .garden-zone::-webkit-scrollbar { display: none; }

    .garden-plot {
        scroll-snap-align: center;
        min-width: 80vw;
    }

    .plant-visual {
        width: 160px;
        height: 230px;
    }

    .plot-dialog-card {
        max-width: 100%;
        width: 100%;
    }

    .plant-status-bubble {
        right: -20px;
        font-size: 0.72rem;
    }

    /* Journal mobile */
    .journal-wrap { padding: 16px 12px 28px; }
    .journal-cover-inner { font-size: 0.9rem; }
}

@media (max-width: 380px) {
    :root {
        --hud-h: 56px;
        --nav-h: 62px;
    }

    .hud-lux-pill { display: none; }

    .energy-label { display: none; }
}


/* ================================================================
   TABLET & DESKTOP (≥ 768px)
   ================================================================ */

@media (min-width: 768px) {

    .sky-zone {
        height: 34vh;
        max-height: 280px;
    }

    .sun-visual {
        width: 150px;
        height: 150px;
    }

    .garden-zone {
        gap: 80px;
        padding: 30px 40px 40px;
    }

    .garden-plot { width: 240px; }
    .plant-visual { width: 200px; height: 280px; }
    .plot-dialog-card { max-width: 240px; }
}

@media (min-width: 1024px) {
    .garden-zone {
        gap: 120px;
        max-width: 1000px;
        margin: 0 auto;
    }

    .game-hud {
        padding: 0 24px;
        gap: 16px;
    }
}


/* ================================================================
   UTILITY — Focus & accessibility
   ================================================================ */

:focus-visible {
    outline: 3px solid #7CCC3A;
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
select:focus-visible {
    outline: 3px solid #7CCC3A;
    outline-offset: 2px;
}

/* Cursor on interactive elements */
button, select, [role="button"] {
    cursor: pointer;
}


/* ================================================================
   NIGHT MODE OVERRIDES (body.is-night)
   ================================================================ */

body.is-night .plot-dialog-card {
    background: #1E2A1E;
    border-color: #4A6A3A;
    box-shadow:
        0 4px 0 #2A4020,
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(124, 204, 58, 0.1);
}

body.is-night .dialog-name {
    color: #C8E8A0;
}

body.is-night .plot-dialog-card::before {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.015) 3px,
        rgba(255, 255, 255, 0.015) 4px
    );
}

body.is-night .game-select {
    background-color: #253020;
    color: #C8E8A0;
    border-color: rgba(124, 204, 58, 0.3);
}

body.is-night .meter-track {
    background: rgba(255, 255, 255, 0.08);
}

body.is-night .plot-sign-board {
    background: #4A6A3A;
    border-color: #2A4020;
}

body.is-night .plant-status-bubble {
    background: #1E2A1E;
    color: #C8E8A0;
    border-color: #4A6A3A;
    box-shadow: 2px 2px 0 #2A4020;
}

body.is-night .plant-status-bubble::before {
    border-top-color: #4A6A3A;
}

body.is-night .plant-status-bubble::after {
    border-top-color: #1E2A1E;
}

body.is-night .journal-page {
    background: #1A2010;
    border-color: #3A5028;
}

body.is-night .journal-section-title {
    color: #B0D888;
    border-bottom-color: rgba(124, 204, 58, 0.2);
}

body.is-night .journal-cover {
    background: linear-gradient(135deg, #243020 0%, #1A2415 100%);
    border-color: #3A5028;
}

body.is-night .journal-cover-inner {
    color: #B0D888;
}

body.is-night .chart-container {
    background: #121E0E;
    border-color: rgba(124, 204, 58, 0.15);
}

body.is-night .dialog-header {
    border-bottom-color: rgba(124, 204, 58, 0.2);
}

/* ── Sky flora goes dim at night ── */
body.is-night .sky-flora {
    opacity: 0.25;
    filter: grayscale(0.7);
}

/* ── Clouds hide more at night (handled inline) ── */