#game-root {
    --gp-accent: #10B981;
    --gp-accent-dark: #0c8d64;
    --gp-accent-light: #e3f9ef;
    --gp-accent-border: #a7f3d0;
    --gp-glass-bg: rgba(255, 255, 255, .62);
    --gp-glass-border: rgba(255, 255, 255, .45);
    border-radius: var(--kw-radius, 16px);
}

.kwg-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

.gp-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.gp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.gp-header-icon {
    display: flex;
    font-size: 22px;
    line-height: 1;
}

.gp-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.gp-hud-row {
    justify-content: center;
    margin-bottom: 15px;
}

.gp-plant-pill,
.gp-stat {
    background: var(--gp-accent-light);
    color: var(--gp-accent-dark);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    transition: transform .15s ease;
}

.gp-stat-score { background: #fef3c7; color: #92400e; }
.gp-stat-health { background: #fee2e2; color: #b91c1c; }
.gp-stat-growth { background: var(--gp-accent-light); color: var(--gp-accent-dark); }

.gp-seed-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gp-seed-btn {
    border: 2px solid transparent;
    background: var(--gp-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: transform .1s ease, border-color .15s ease;
}

.gp-seed-btn:hover {
    transform: translateY(-2px);
}

.gp-seed-active {
    border-color: var(--gp-accent);
    background: #fff;
}

/* Greenhouse scene */

.gp-green {
    position: relative;
    background: #ded0b6;
    border: 1px solid var(--gp-glass-border);
    border-radius: var(--kw-radius, 16px);
    padding: 8px 10px 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}

.gp-scene-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.gp-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 76px;
    flex-shrink: 0;
}

.gp-gauge-label {
    font-size: 11px;
    font-weight: 800;
    color: #6b5b3d;
}

.gp-gauge-track {
    width: 22px;
    height: 170px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.gp-gauge-fill {
    width: 100%;
    height: 50%;
    transition: height .2s ease, background .2s ease;
}

.gp-gauge-target {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    background: rgba(255, 255, 255, .32);
    border-top: 2px dashed rgba(255, 255, 255, .95);
    border-bottom: 2px dashed rgba(255, 255, 255, .95);
    pointer-events: none;
}

.gp-gauge-fill-water { background: linear-gradient(180deg, #7dd3fc, #0284c7); }
.gp-gauge-fill-nutrient { background: linear-gradient(180deg, #bef264, #65a30d); }

.gp-slider-wrap {
    width: 40px;
    height: 170px;
    position: relative;
    margin-top: 4px;
}

.gp-slider-input {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170px;
    height: 28px;
    margin-top: -14px;
    margin-left: -85px;
    transform: rotate(-90deg);
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.gp-slider-input::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(107, 91, 61, .35);
}

.gp-slider-input::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(107, 91, 61, .35);
}

.gp-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
    margin-top: -9px;
    cursor: grab;
}

.gp-slider-input::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
    cursor: grab;
}

.gp-side-nutrient .gp-slider-input::-webkit-slider-thumb { background: #65a30d; }
.gp-side-nutrient .gp-slider-input::-moz-range-thumb { background: #65a30d; }

/* Slider input itself flashes red while its value sits outside the target
   zone, on top of the existing gauge-fill color / top-badge text, so a
   wrong slider is obvious without having to read anything. steps(1, end)
   gives a hard on/off blink rather than a smooth pulse. */
.gp-side-bad .gp-slider-input {
    animation: gp-slider-flash .6s steps(1, end) infinite;
}

.gp-side-bad .gp-slider-input::-webkit-slider-runnable-track { background: #dc2626; }
.gp-side-bad .gp-slider-input::-moz-range-track { background: #dc2626; }

@keyframes gp-slider-flash {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: .4; }
}

.gp-side-caption {
    font-size: 12px;
    font-weight: 800;
    color: #6b5b3d;
    margin-top: 4px;
}

.gp-indicator {
    font-size: 12px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: background .2s ease, color .2s ease;
}

/* No "Just Right" badge — the flashing slider (see .gp-side-bad above)
   already says correct is correct; a badge here only earns its place when
   something needs fixing. */
.gp-indicator-ok {
    display: none;
}

.gp-indicator-bad {
    background: #fee2e2;
    color: #b91c1c;
}

/* Bad-state badges float centered at the top of the greenhouse window
   (not tucked under their gauge) so they read as part of the scene the
   player is actually watching. Both live in one flex row so a single bad
   badge still lands dead-center, and two at once sit side by side instead
   of overlapping. */
.gp-indicator-row {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 8px;
}

.gp-window {
    position: relative;
    flex: 1;
    min-width: 0;
    border: 6px solid #b08b52;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #c49a63, #a37a45);
    display: flex;
    flex-direction: column;
}

.gp-sky {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #7dc4f0, #cdeaff);
    overflow: hidden;
}

.gp-sky-img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}

.gp-planter {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 90px;
}

.gp-plant-area {
    position: relative;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gp-stem {
    width: 8px;
    min-height: 3px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #6fbf6f, #2f7d3c);
    transition: height .4s ease;
}

.gp-cap {
    position: absolute;
    left: 50%;
    bottom: 0;
    font-size: 36px;
    line-height: 1;
    transform: translateX(-50%) scale(.4);
    opacity: 0;
    transition: bottom .4s ease, transform .4s ease, opacity .4s ease;
}

.gp-leaves {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 0;
}

.gp-leaf {
    position: absolute;
    width: 24px;
    height: 13px;
    background: linear-gradient(135deg, #7fd48a, #3e9450);
    border-radius: 0 100% 0 100%;
    opacity: 0;
    transition: opacity .3s ease, bottom .4s ease;
}

.gp-leaf-l { right: 4px; transform: rotate(-25deg); }
.gp-leaf-r { left: 4px; transform: rotate(25deg) scaleX(-1); }

.gp-plant-img {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: auto;
    max-width: 92%;
    z-index: 3;
    transform: translateX(-50%);
    transition: height .4s ease;
    pointer-events: none;
}

/* Sized to match img/scene/pot.png's own aspect ratio (2048x768) so the
   whole illustrated pot — rim, decorative band, tapered body — shows at
   its real proportions instead of being squashed into a thin strip. The
   fallback border-radius/gradient below only shows through pot-img's own
   transparent corners (or on its own, if the image never loads). */
.gp-soil-bed {
    position: relative;
    width: 92%;
    aspect-ratio: 2048 / 512;
    margin-top: -6px;
    overflow: hidden;
}

.gp-pot-img {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
}

.gp-critter {
    position: absolute;
    border: none;
    background: rgba(255, 255, 255, .85);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    animation: gp-wiggle 1.1s ease-in-out infinite;
    z-index: 4;
}

.gp-pause-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    z-index: 5;
    cursor: pointer;
}

.gp-paused .gp-pause-overlay {
    display: flex;
}

/* Weeks timeline */

.gp-weeks {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.gp-weeks-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-weight: 800;
    font-size: 13px;
    color: var(--gp-accent-dark);
    background: var(--gp-accent-light);
    white-space: nowrap;
}

.gp-week-seg {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: #dff5ec;
    font-weight: 700;
    font-size: 13px;
    color: #0c8d64;
    border-left: 1px solid rgba(255, 255, 255, .6);
    overflow: hidden;
}

.gp-week-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--gp-accent);
    z-index: 0;
    transition: width .15s linear;
}

.gp-week-num {
    position: relative;
    z-index: 1;
}

.gp-week-done .gp-week-num,
.gp-week-current .gp-week-num {
    color: #fff;
}

/* Controls */

.gp-controls-row {
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.gp-tool-btn {
    border: none;
    background: var(--gp-accent-light);
    color: var(--gp-accent-dark);
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: transform .12s ease, opacity .15s ease;
    white-space: nowrap;
}

.gp-tool-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--gp-accent-border);
}

.gp-tool-btn:disabled {
    opacity: .4;
    cursor: default;
}

.gp-btn-primary {
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform .1s ease;
    background: var(--gp-accent);
    color: #fff;
    box-shadow: 0 3px 0 var(--gp-accent-dark);
}

.gp-btn-primary:hover {
    transform: translateY(-1px);
}

/* Done screens */

.gp-done-card {
    text-align: center;
    background: var(--gp-glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--gp-glass-border);
    border-radius: var(--kw-radius, 16px);
    padding: 28px 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
    animation: gp-pop .3s ease;
    margin-bottom: 14px;
}

.gp-done-emoji {
    font-size: 56px;
    margin-bottom: 8px;
}

.gp-done-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--gp-accent-dark);
    margin-bottom: 6px;
}

.gp-done-score {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.gp-done-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 24px;
    margin-bottom: 12px;
}

.gp-intro-text {
    font-size: 14px;
    color: #555;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
}

.gp-fun-fact {
    font-size: 13px;
    color: #444;
    background: var(--gp-accent-light);
    border-radius: 12px;
    padding: 10px 14px;
    max-width: 480px;
    margin: 12px auto 0;
    line-height: 1.5;
}

.gp-done-share {
    justify-content: center;
    margin-top: 16px;
}

.gp-done-actions {
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 0px;
}

@keyframes gp-pop {
    0% { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gp-wiggle {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

@media (max-width: 560px) {
    .gp-side { width: 56px; }
    .gp-gauge-track { width: 16px; height: 130px; }
    .gp-slider-wrap { height: 130px; }
    .gp-slider-input { width: 130px; margin-left: -65px; }
    .gp-gauge-label { font-size: 9px; }
    .gp-side-caption { font-size: 10px; }
    .gp-stat, .gp-plant-pill { font-size: 11px; padding: 5px 10px; }
    .gp-weeks-label { font-size: 11px; padding: 0 8px; }
    .gp-week-seg { font-size: 11px; padding: 8px 2px; }
}