@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Space+Mono:wght@400;700&display=swap');

:root{
--soil-900:#1c1712;
--soil-800:#2a2318;
--soil-700:#3a3020;
--blade-500:#7fb741;
--blade-300:#b6dc7f;
--blade-200:#e4f3cf;
--clay-400:#c98a4b;
--paper:#f4efe2;
}

*{box-sizing:border-box;}

html,body{
margin:0; padding:0; width:100%; height:100%;
background:var(--soil-900);
color:var(--paper);
font-family:'Space Mono', monospace;
overflow:hidden;
-webkit-tap-highlight-color:transparent;
}

#app{ position:fixed; inset:0; }

/* ---- intro / camera stage ---- */
#stage{ position:fixed; inset:0; display:flex; flex-direction:column; }

#camWrap{
position:relative; flex:1; overflow:hidden;
background:#000;
}
video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; transform:scaleX(-1);
filter:saturate(1.05) contrast(1.02);
}
#vignette{
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
}

#hud{
position:absolute; top:0; left:0; right:0; padding:22px 20px 0;
display:flex; justify-content:space-between; align-items:flex-start;
pointer-events:none;
}

#streakBadge{
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(0,0,0,.4); border:1px solid rgba(230,255,210,.3);
border-radius:14px; padding:8px 14px; line-height:1.1;
}
#streakBadgeNum{
font-family:'Fraunces', serif; font-weight:700; font-size:22px;
color:var(--blade-300);
}
#streakBadgeLabel{
font-size:9px; letter-spacing:.1em; text-transform:uppercase;
color:var(--blade-200); opacity:.8;
}

/* ---- gate stage: shown when the user already checked in today ---- */
#gateStage{
position:fixed; inset:0; display:none;
align-items:center; justify-content:center;
background:var(--soil-900); text-align:center; padding:0 24px;
}
#gateStage.active{ display:flex; }
#gateContent h1{ margin-top:10px; }
#gateStreakNum{
font-family:'Fraunces', serif; font-weight:700; font-style:italic;
font-size:clamp(48px,14vw,84px); color:var(--blade-300); line-height:1;
margin-top:26px;
}
#gateStreakLabel{
font-size:12px; letter-spacing:.14em; text-transform:uppercase;
color:var(--blade-200); opacity:.8; margin-bottom:26px;
}
#gateMessage{
font-size:13px; color:var(--blade-200); opacity:.85; max-width:320px;
margin:0 auto; line-height:1.6;
}
.eyebrow{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--blade-300); opacity:.85;
}
h1{
font-family:'Fraunces', serif; font-weight:700; font-style:italic;
font-size:clamp(28px,7vw,44px); margin:2px 0 0; line-height:1;
color:var(--paper);
}
h1 em{ color:var(--blade-300); font-style:italic; }

#meterWrap{
position:absolute; left:20px; right:20px; bottom:130px;
pointer-events:none;
}
#meterLabel{
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
margin-bottom:8px; color:var(--blade-200);
display:flex; justify-content:space-between;
}
#meterTrack{
height:10px; border-radius:6px; overflow:hidden;
background:rgba(0,0,0,.45); border:1px solid rgba(230,255,210,.25);
}
#meterFill{
height:100%; width:0%;
background:linear-gradient(90deg, var(--clay-400), var(--blade-500), var(--blade-300));
transition:width .12s linear;
}

#caption{
position:absolute; left:20px; right:20px; bottom:60px;
font-size:13px; text-align:center; color:var(--blade-200);
letter-spacing:.02em; pointer-events:none;
min-height:18px;
}

#controls{
padding:18px 20px 26px; background:var(--soil-900);
display:flex; flex-direction:column; gap:10px; align-items:center;
}
button{
font-family:'Space Mono', monospace; font-weight:700;
font-size:14px; letter-spacing:.06em; text-transform:uppercase;
padding:14px 28px; border-radius:999px; border:none; cursor:pointer;
background:var(--blade-500); color:var(--soil-900);
transition:transform .15s ease, background .2s ease;
width:min(320px,80vw);
}
button:active{ transform:scale(.96); }
button.ghost{
background:transparent; color:var(--blade-300);
border:1px solid rgba(182,220,127,.4);
}
#err{
color:#e2a06a; font-size:12px; text-align:center; max-width:320px;
}

/* ---- result / three.js stage ---- */
#resultStage{
position:fixed; inset:0; display:none; flex-direction:column;
}
#resultStage.active{ display:flex; }
#threeHost{ position:absolute; inset:0; }
#resultHud{
position:absolute; top:0; left:0; right:0; padding:22px 20px;
display:flex; justify-content:space-between; align-items:flex-start;
pointer-events:none; z-index:5;
}
#resultFoot{
position:absolute; bottom:0; left:0; right:0; padding:18px 20px 26px;
display:flex; justify-content:center; z-index:5;
}
#photoBg{
position:absolute; inset:0; background-size:cover; background-position:center;
filter:blur(18px) brightness(.32) saturate(1.1); transform:scale(1.1);
}

#resultDim{
position:absolute; inset:0; background:rgba(0,0,0,0); pointer-events:none;
transition:background .5s ease;
}
#resultStage.active #resultDim{ background:rgba(0,0,0,0.75); }

.tagline{ font-size:12px; color:var(--blade-200); opacity:.85; max-width:70%; }

#hidden-canvas{ display:none; }

#modelStatus{
position:absolute; left:20px; top:22px; margin-top:56px;
font-size:10px; letter-spacing:.1em; text-transform:uppercase;
color:var(--blade-300); opacity:.65; pointer-events:none;
display:flex; align-items:center; gap:6px;
}
#modelStatus .dot{
width:6px; height:6px; border-radius:50%;
background:var(--clay-400);
}
#modelStatus.ready .dot{ background:var(--blade-500); }
#modelStatus.hide{ display:none; }

#mlDebug{
position:absolute; left:20px; right:20px; bottom:108px;
font-size:10px; letter-spacing:.04em; text-align:center;
color:var(--blade-200); opacity:.55; pointer-events:none;
}

/* ---- success / "touch more grass" stage ---- */
#successStage{
position:fixed; inset:0; display:none;
align-items:center; justify-content:center;
background:rgba(10,10,8,0.72);
-webkit-backdrop-filter:brightness(0.55) saturate(0.9);
backdrop-filter:brightness(0.55) saturate(0.9);
overflow:hidden;
}
#successStage.active{ display:flex; }
#successContent{
position:relative; z-index:2; text-align:center; padding:0 24px;
}
#successContent h2{
font-family:'Comic Relief', serif; font-weight:700;
font-size:clamp(22px,4.4vw,34px); color:#a9e88a; margin:0 0 18px;
line-height:1.25;
}
#successContent h3{
font-family:'Comic Relief', serif; font-weight:500; font-style:italic;
font-size:clamp(16px,2.6vw,22px); color:#a9e88a; margin:0 0 44px;
opacity:.9;
}
#successStreak{
display:flex; align-items:baseline; justify-content:center; gap:8px;
margin:-24px 0 32px;
}
#successStreakNum{
font-family:'Fraunces', serif; font-weight:700; font-size:28px; color:#c8f0a9;
}
#successStreakLabel{
font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#a9e88a; opacity:.85;
}
#moreGrassBtn{
position:relative;
font-family:'Comic Relief', monospace; font-weight:700;
font-size:20px; letter-spacing:.05em; text-transform:uppercase;
border:none; cursor:pointer; background:transparent; padding:0;
width:min(340px,86vw); aspect-ratio:486/133;
display:inline-flex; align-items:center; justify-content:center;
margin:0 auto;
transition:transform .15s ease;
}
#moreGrassBtn:active{ transform:scale(.96); }
#moreGrassBtn .btn-bg{
position:absolute; inset:0; width:100%; height:100%;
z-index:0; pointer-events:none;
}
#moreGrassBtn .btn-label{
position:absolute; z-index:1; color:#fff;
top:69.8%; left:50%; /* 69.8% = vertical center of the pill rect (y 55.275–130.275) within the 133-tall viewBox */
transform:translate(-50%, -50%);
white-space:nowrap;
}

.squiggle{
position:absolute; width:110px; height:auto;
stroke:#2ecc2e; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
fill:none; opacity:.85; z-index:1;
}
.sq1{ top:9%;  left:12%;  transform:rotate(-8deg); }
.sq2{ top:14%; right:8%;  width:150px; }
.sq3{ top:34%; left:8%;   width:100px; transform:rotate(6deg); }
.sq4{ top:31%; right:6%;  width:140px; }
.sq5{ bottom:22%; left:6%; width:150px; }
.sq6{ bottom:12%; left:22%; width:120px; }
.sq7{ bottom:7%;  left:44%; width:120px; }
.sq8{ bottom:14%; right:5%; width:160px; }
@media (max-width:600px){
.squiggle{ display:none; }
.sq1, .sq2{ display:block; width:90px; }
}