@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

* { box-sizing: border-box; }
html, body { 
    margin: 0; 
    height: 100%; 
    background: #0f172a; 
    color: #f8fafc; 
    font-family: 'Outfit', "Segoe UI", system-ui, sans-serif; 
    overflow: hidden;
}

/* 화면 = 왼쪽 사이드(게이지·설명) + 게임 화면. 사이드는 게임 화면 밖이라 해·구름과 겹칠 일이 없다 */
.game { display: flex; flex-direction: row; height: 100%; }
.side { flex: none; width: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 16px; background: #0b1220; border-right: 1px solid rgba(255,255,255,0.08); overflow: auto; }

/* 왼쪽 사이드 위: 게이지 판. 가운데 화면에는 식물·해·비만 있다 (제목 카드는 두지 않는다) */
.hud {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
    border-radius: 16px;
}
.plant-name { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: #f8fafc; }
.latin { color: #94a3b8; font-style: italic; font-size: 0.85rem; margin-left: 6px; font-weight: 300; }

.hint { margin: 0 0 12px; color: #cbd5e1; font-size: 0.9rem; font-weight: 300; }

.meters { display: flex; flex-direction: column; gap: 10px; }
.meter { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: #e2e8f0; font-weight: 600; }
.meter span { width: 36px; text-align: right; letter-spacing: 1px; }
.track { flex: 1; height: 8px; background: rgba(0,0,0,0.4); border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.bar { height: 100%; width: 0; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 999px; }

.growth-bar { background: linear-gradient(90deg, #84cc16, #22c55e); box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
.light-bar { background: linear-gradient(90deg, #fde047, #f59e0b); box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); }
.water-bar { background: linear-gradient(90deg, #38bdf8, #0284c7); box-shadow: 0 0 12px rgba(2, 132, 199, 0.6); }

.meta { margin: 12px 0 0; font-size: 0.85rem; color: #94a3b8; font-weight: 300; }
.meta-sub { margin-top: 4px; font-size: 0.8rem; }
.meta-sub span + span { margin-left: 10px; }

/* Field */
.field { position: relative; flex: 1; min-width: 0; height: 100%; overflow: hidden; touch-action: none; user-select: none; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0ea5e9 0%, #38bdf8 45%, #e0f2fe 100%); transition: filter 1.5s ease, background 1.5s ease; }
.field.overcast .sky { background: linear-gradient(180deg, #475569 0%, #64748b 45%, #cbd5e1 100%); filter: saturate(0.8); }
/* 별: 밤에만 서서히 나타나 반짝인다. 하늘 위쪽 70%에 흩어져 있고, 구름 뒤(z 1)에 있다 */
.stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s ease; z-index: 1; }
.field.night .stars { opacity: 1; }
.field.night.overcast .stars { opacity: 0.25; }
.stars i { position: absolute; display: block; border-radius: 50%; background: #f8fafc; box-shadow: 0 0 6px rgba(248,250,252,0.8); animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
/* 흘러가는 구름: 낮 하늘 높이 옅은 뭉게구름이 바람 세기만큼 흘러간다 (규칙엔 관여하지 않는다). 밤엔 거의 안 보인다 */
.drift { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.85; transition: opacity 2s ease; }
.field.overcast .drift { opacity: 0.45; }
.field.night .drift, .field.night.overcast .drift { opacity: 0; }   /* 밤엔 구름을 전부 감춘다 — 별·달만 (비구름도 밤에는 없다, game.js applySky) */
.drift svg { position: absolute; width: 140px; height: auto; }
/* 해의 빛: 해 아래로 퍼지는 따뜻한 빛 번짐 + 가장자리가 흐린 넓은 줄기 셋. 아주 옅고 천천히 일렁인다 — 해가 식물 위일수록 조금 더 */
.rays {
    position: absolute; top: calc(5% + 58px); width: 760px; height: 130%; --tilt: 0deg;
    transform: translateX(-50%) rotate(var(--tilt)); transform-origin: 50% 0; pointer-events: none; z-index: 2; opacity: 0;
    background:
        radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255,246,200,0.55), rgba(255,246,200,0) 70%),
        conic-gradient(from 166deg at 50% 0%,
            transparent 0deg, rgba(255,250,215,0.10) 5deg, rgba(255,250,215,0.22) 7deg, rgba(255,250,215,0.10) 9deg, transparent 14deg,
            transparent 17deg, rgba(255,250,215,0.10) 21deg, rgba(255,250,215,0.24) 23deg, rgba(255,250,215,0.10) 25deg, transparent 30deg,
            transparent 33deg, rgba(255,250,215,0.10) 37deg, rgba(255,250,215,0.20) 39deg, rgba(255,250,215,0.10) 41deg, transparent 46deg);
    filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.4) 40%, transparent 70%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.4) 40%, transparent 70%);
    transition: opacity 1.2s ease;
    animation: rays-breathe 9s ease-in-out infinite;
}
@keyframes rays-breathe { 0%, 100% { filter: blur(10px) brightness(1); } 50% { filter: blur(14px) brightness(1.12); } }
.rays[hidden] { display: none; }
/* 비 갠 뒤 반짝임: 젖은 흙과 잎 위에 작은 물방울 빛점이 드문드문, 부드럽게 켜졌다 꺼진다 (별 모양 아님) */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sparkle {
    position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0 25%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0) 100%);
    animation: glint 2.2s ease-in-out forwards;
}
@keyframes glint { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } }
/* 벌: 만개 때 맑은 낮에만. 날개는 빠르게, 몸은 천천히 오간다 */
.bees { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.bee { position: absolute; width: 30px; height: 25px; left: 0; top: 0; opacity: 0; transition: opacity 1s ease; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.bee.on { opacity: 1; }
.bee .wings { transform-origin: 28px 14px; animation: flap 0.12s linear infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
/* 밤: 해가 뜰 수 없다. 하늘은 짙푸르고 땅과 식물은 어둡다. 비는 밤에도 온다 */
.field.night .sky { background: linear-gradient(180deg, #0b1220 0%, #1e293b 55%, #334155 100%); }
.field.night.overcast .sky { background: linear-gradient(180deg, #0f172a 0%, #1e293b 55%, #475569 100%); filter: none; }
.field.night .ground, .field.night .plant-box { filter: brightness(0.62); transition: filter 1.5s ease; }
.ground, .plant-box { transition: filter 1.5s ease; }
.moon { position: absolute; top: 6%; right: 12%; width: 72px; height: 72px; filter: drop-shadow(0 0 14px rgba(241,245,249,0.45)); z-index: 5; }
.moon[hidden] { display: none; }

/* 해/비 바꾸기 — 게이지 판 안의 버튼 */
.toggle {
    display: block; width: 100%; margin-top: 14px;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
    background: rgba(255,255,255,0.1); color: #fff;
    padding: 9px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s ease;
    font-family: 'Outfit', sans-serif;
}
.toggle:hover { background: rgba(255,255,255,0.2); }
.toggle[hidden] { display: none; }

.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #65a30d 0%, #3f6212 20%, #78350f 30%, #451a03 100%); }
.soil-wet {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(0,0,0,0.3) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(0,0,0,0.3) 100%);
    transition: background 0.6s linear;
}
.soil-sheen { position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none; transition: background 0.6s linear; }

.weather { position: absolute; top: 5%; width: 120px; height: auto; cursor: grab; transform: translateX(-50%); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2)); transition: filter 0.2s; z-index: 5; }
.weather.dragging { cursor: grabbing; filter: drop-shadow(0 16px 24px rgba(0,0,0,0.4)) scale(1.05); }
.weather[hidden], .rain[hidden] { display: none; }
.cloud { width: 150px; top: 7%; }

/* 비 층: 구름 그림(150px 폭 → 높이 약 99px)의 밑면에서 시작한다. 빗방울은 구름 뒤(z 4 < 5)에서 나오므로 밑면과 이어져 보인다 */
.rain { position: absolute; top: calc(7% + 94px); bottom: 26%; width: 112px; transform: translateX(-50%); pointer-events: none; overflow: hidden; z-index: 4; }
.rain i {
    position: absolute; top: -30px; width: 2px; height: 30px; border-radius: 2px;
    background: linear-gradient(180deg, rgba(186,230,253,0), rgba(186,230,253,0.9));
    animation: fall 1s linear infinite;
}
@keyframes fall {
    0%   { top: -30px; opacity: 1; }   /* 처음부터 보인다 — 구름 밑면에서 바로 떨어진다 */
    85%  { opacity: 0.9; }
    100% { top: 100%; opacity: 0; }
}

.shadow {
    /* 땅 선 바로 아래 풀밭 위에 납작하게 눕는 타원 — 하늘 쪽으로는 올라오지 않는다. 폭은 실제 잎·수관 폭(JS) */
    position: absolute; left: 50%; bottom: calc(26% - 26px); height: 26px; width: var(--w, 60px);
    --dx: 0px; --stretch: 1; --alpha: 0.3;
    transform: translateX(-50%) translateX(var(--dx)) scaleX(var(--stretch));
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, var(--alpha)) 0%, rgba(15, 23, 42, calc(var(--alpha) * 0.55)) 45%, rgba(15, 23, 42, 0) 72%);
    pointer-events: none; transition: transform 0.25s ease, width 0.3s ease; z-index: 2;
}

/* 식물 상자: 캔버스 320×440(y -100~340) 을 1.3배로 (416×572) — 땅 표면(y=270)이 들판의 땅 선(bottom 26%)에 맞고, 아래 91px 는 흙 속(씨앗·뿌리) */
.plant-box { position: absolute; left: 50%; bottom: calc(26% - 91px); transform: translateX(-50%); width: 416px; height: 572px; z-index: 3; }
.plant-box[hidden] { display: none; }
/* 흔들림은 JS 가 그림 안의 잎 그룹(soft)에만 준다 — 상자 전체를 움직이는 애니메이션은 두지 않는다(뿌리가 흔들린다) */
.plant { position: absolute; inset: 0; transition: filter 0.8s ease; }
.plant svg { width: 100%; height: 100%; display: block; overflow: visible; }

.plant-box.thirsty .plant { filter: saturate(0.5) sepia(0.2) brightness(0.9); }
.plant-box.wilting .plant { filter: saturate(0.2) sepia(0.5) brightness(0.8); }

.sow { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 24px; z-index: 10; }
.sow[hidden] { display: none; }
.sow .seed { width: 48px; height: 48px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)); }
.sow .seed-hint { margin: 0; color: #fff; font-size: 1rem; opacity: 0.9; text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-weight: 300; }


/* 배우는 판: 지금 단계에서 식물에게 일어나는 일. 왼쪽 아래, 나무를 가리지 않게 작게 */
.learn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px 20px; color: #f1f5f9;
}
.learn[hidden] { display: none; }
.learn-stage { margin: 0 0 4px; font-size: 0.85rem; font-weight: 700; color: #bef264; }
.learn-text { margin: 0; font-size: 0.86rem; line-height: 1.45; font-weight: 300; }

/* 라운드 완료: 나무가 주인공 — 화면을 가리거나 흐리지 않고, 발밑(흙 자리)에 작은 카드만 떠오른다 */
.complete { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 40px; background: none; pointer-events: none; z-index: 30; }
.complete[hidden] { display: none; }
.complete-card {
    pointer-events: auto;
    display: flex; align-items: center; gap: 18px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    border-radius: 18px;
    padding: 14px 22px;
    text-align: left;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,1);
    animation: rise 0.6s ease;
}
@keyframes rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.complete-card svg { width: 48px; height: 48px; flex: none; }
.badge { display: inline-block; background: #fef2f2; color: #dc2626; border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 700; margin: 0 0 4px; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2); }
.complete-card h2 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.complete-card p { margin: 2px 0 0; color: #64748b; font-size: 0.9rem; }
.complete-card .btn { padding: 10px 20px; font-size: 1rem; margin-left: 6px; }
.btn { 
    border: none; border-radius: 12px; 
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); 
    color: #fff; padding: 14px 32px; font-size: 1.1rem; font-weight: 600; cursor: pointer; 
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3); transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(22, 163, 74, 0.4); }
.btn:active { transform: translateY(0); }

@media (max-width: 768px) {
    .game { flex-direction: column; }
    .side { width: auto; flex-direction: row; padding: 10px; gap: 10px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .side > * { flex: 1; min-width: 0; }
    .hud, .learn { padding: 10px 14px; }
    .plant-box { width: 256px; height: 352px; bottom: calc(26% - 56px); }
}