/* Sprout & Skillet — styles & animations */
:root{
  --bg:#FFF7E3; --surface:#FFFFFF; --surface-alt:#FFF1D2;
  --ink:#3A2E22; --ink-soft:#8B7355;
  --primary:#3DAA4F; --primary-dark:#2C8A3C;
  --accent:#FFA733; --accent-soft:#FFE3AD;
  --warn:#FF5A5A; --good:#3DDC6B; --flame:#FF7A45; --water:#3E9BE0;
  --gold:#FFC72C; --platinum:#4BD6C8;
  --border:#FFDD9E;
  --garden:#3DAA4F; --garden-dark:#2C8A3C;
  --kitchen:#FF7A45; --kitchen-dark:#E85A2B;
  --dining:#F0529C; --dining-dark:#D33A82;
  --shop:#5C7CFA; --shop-dark:#4361D1;
  --goals:#FFC72C; --goals-dark:#E0A800;
  --radius:20px; --radius-sm:14px;
  --sky-top:#7EC8F0; --sky-bot:#D3EDFF;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overscroll-behavior-y:none;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  min-height:100vh; min-height:100dvh;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
  transition:background .8s ease;
}
body.night{background:#F3E9D2;}
button,.tile,.tab-btn{-webkit-user-select:none;user-select:none;}
h1,h2,h3{font-family:'Fredoka',system-ui,sans-serif;}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none;}
button:disabled{cursor:not-allowed;opacity:.45;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
#app{opacity:0;transition:opacity .4s ease;}
#app.loaded{opacity:1;}
#app.shake{animation:shake .45s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px) rotate(-.4deg);}40%{transform:translateX(6px) rotate(.4deg);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}

/* ---------- sky header ---------- */
#app-header{position:sticky;top:0;z-index:20;box-shadow:0 2px 12px rgba(0,0,0,.14);}
#sky{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));transition:background 2s linear;}
.sky-layer{position:absolute;inset:0;pointer-events:none;}
.celestial{position:absolute;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);transition:left 1.5s linear,top 1.5s linear;}
.sun{background:radial-gradient(circle,#FFF4B0 0 40%,#FFD34D 41% 70%,rgba(255,200,60,0) 71%);box-shadow:0 0 24px 8px rgba(255,220,100,.55);animation:sun-glow 4s ease-in-out infinite;}
@keyframes sun-glow{0%,100%{box-shadow:0 0 24px 8px rgba(255,220,100,.55);}50%{box-shadow:0 0 34px 12px rgba(255,220,100,.75);}}
.moon{background:radial-gradient(circle at 60% 40%,#FFFCEB 0 55%,#E8E2C8 56% 100%);box-shadow:0 0 18px 4px rgba(255,255,230,.45);}
.moon::after{content:"";position:absolute;left:9px;top:5px;width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.08);box-shadow:8px 10px 0 -3px rgba(0,0,0,.08);}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 2s;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 34% 60%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 52% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 70% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 86% 26%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 74%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 66%,#fff 50%,transparent 51%);}
body.night .stars{opacity:.9;animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.9;}50%{opacity:.5;}}
.clouds i{position:absolute;top:18%;width:60px;height:18px;border-radius:20px;background:rgba(255,255,255,.75);animation:cloud-drift linear infinite;}
.clouds i::before,.clouds i::after{content:"";position:absolute;background:inherit;border-radius:50%;}
.clouds i::before{width:26px;height:26px;left:10px;top:-12px;}
.clouds i::after{width:20px;height:20px;left:30px;top:-8px;}
.clouds i:nth-child(1){left:-70px;animation-duration:48s;}
.clouds i:nth-child(2){left:-70px;top:38%;transform:scale(.7);animation-duration:70s;animation-delay:-30s;opacity:.7;}
.clouds i:nth-child(3){left:-70px;top:8%;transform:scale(.55);animation-duration:60s;animation-delay:-12s;opacity:.6;}
@keyframes cloud-drift{from{transform:translateX(0) scale(var(--s,1));}to{transform:translateX(calc(100vw + 140px)) scale(var(--s,1));}}
body[data-weather="cloudy"] .clouds i,body[data-weather="rain"] .clouds i{background:rgba(235,235,240,.9);}
body[data-weather="rain"] .clouds i{background:rgba(180,190,205,.9);}
.hills{position:absolute;left:-5%;right:-5%;bottom:-14px;height:38px;background:radial-gradient(ellipse 34% 100% at 20% 100%,#5DBB63 60%,transparent 61%),radial-gradient(ellipse 40% 100% at 60% 100%,#4CAF50 60%,transparent 61%),radial-gradient(ellipse 30% 100% at 92% 100%,#57B45C 60%,transparent 61%);opacity:.9;}
.topbar{position:relative;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));text-shadow:0 1px 2px rgba(0,0,0,.25);}
.row1{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.topbar h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.2px;white-space:nowrap;}
.row1-right{display:flex;align-items:center;gap:5px;}
.icon-btn{background:rgba(255,255,255,.22);color:#fff;width:36px;height:36px;border-radius:50%;font-size:15px;backdrop-filter:blur(3px);transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.icon-btn:active{transform:scale(.88);}
#coins{background:rgba(29,49,41,.45);padding:5px 12px;border-radius:999px;font-weight:800;font-size:14px;display:flex;align-items:center;gap:5px;backdrop-filter:blur(3px);}
#coins.bump{animation:bump .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.22);background:rgba(255,199,44,.6);}100%{transform:scale(1);}}
.row2{display:flex;align-items:center;gap:8px;margin-top:8px;}
#level-badge{background:var(--accent);color:var(--ink);font-weight:800;font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;text-shadow:none;}
#prestige-badge{background:var(--platinum);color:#fff;font-weight:700;font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.xp-track{flex:1;height:12px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden;position:relative;}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--accent),#FFD166);transition:width .8s ease;border-radius:99px;}
.xp-label{position:absolute;inset:0;font-size:9px;font-weight:800;text-align:center;line-height:12px;letter-spacing:.3px;}
.row3{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.sky-chip{background:rgba(29,49,41,.32);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;backdrop-filter:blur(3px);}

/* ---------- status strip / event banner ---------- */
#status-strip{background:var(--primary-dark);color:#fff;padding:7px 14px;display:flex;align-items:center;gap:10px;font-size:11.5px;transition:background .6s;}
body.tier-silver #status-strip{background:linear-gradient(90deg,var(--primary-dark),#6E7C90);}
body.tier-gold #status-strip{background:linear-gradient(90deg,var(--primary-dark),#B58A00);}
body.tier-platinum #status-strip{background:linear-gradient(90deg,#1F6B5E,#2FA69A);}
#rep-icon{font-size:15px;}
#rep-block{flex:1;display:flex;align-items:center;gap:7px;min-width:0;}
#rep-name{font-weight:800;white-space:nowrap;}
.rep-track{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;min-width:30px;}
.rep-fill{height:100%;transition:width .8s ease,background .6s;}
#combo-badge{display:none;align-items:center;gap:4px;font-weight:800;white-space:nowrap;color:#FFD9A8;background:rgba(0,0,0,.18);padding:3px 9px;border-radius:999px;}
#combo-badge.show{display:flex;animation:combo-pulse 1s ease infinite;}
@keyframes combo-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
#event-banner{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:12px;color:#fff;background:linear-gradient(90deg,#5C7CFA,#8E6BF0);animation:banner-in .4s cubic-bezier(.34,1.56,.64,1);}
#event-banner.ev-rush{background:linear-gradient(90deg,#FF7A45,#F0529C);}
#event-banner.ev-market{background:linear-gradient(90deg,#3DAA4F,#8BC34A);}
#event-banner.ev-chill{background:linear-gradient(90deg,#4BB0D6,#7EC8F0);}
.ev-emoji{font-size:18px;animation:wiggle 1.4s ease-in-out infinite;}
.ev-text{flex:1;} .ev-time{font-weight:800;font-variant-numeric:tabular-nums;}
@keyframes banner-in{from{transform:translateY(-14px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}

/* ---------- ticket rail ---------- */
#ticket-rail{display:flex;gap:8px;overflow-x:auto;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border);scrollbar-width:none;}
#ticket-rail::-webkit-scrollbar{display:none;}
.rail-chip{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px 9px;display:flex;align-items:center;gap:6px;min-width:78px;min-height:42px;transition:transform .18s cubic-bezier(.34,1.56,.64,1);animation:chip-in .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes chip-in{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.rail-chip:active{transform:scale(.92);}
.rail-chip.critic{border-color:var(--gold);background:linear-gradient(135deg,#fff,var(--accent-soft));}
.rail-chip.ready{border-color:var(--good);box-shadow:0 0 0 2px rgba(61,220,107,.25);}
.rail-chip .icons{font-size:15px;line-height:1;}
.rail-info{display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
.mini-track{width:40px;height:5px;border-radius:99px;background:var(--border);overflow:hidden;}
.mini-fill{display:block;height:100%;background:var(--primary);transition:width 1s linear;}
.mini-fill.amber{background:var(--accent);} .mini-fill.red{background:var(--warn);}
.rail-time{font-size:9.5px;font-weight:800;color:var(--ink-soft);line-height:1;white-space:nowrap;}
.rail-time.low{color:var(--warn);animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.4;}}
.rail-check{background:var(--good);color:#fff;font-weight:800;font-size:10px;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.empty-note{color:var(--ink-soft);font-size:12px;padding:6px 2px;}

/* ---------- tabs ---------- */
#tabs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:var(--bg);scrollbar-width:none;}
#tabs::-webkit-scrollbar{display:none;}
.tab-btn{flex:1;white-space:nowrap;position:relative;min-height:42px;background:var(--surface);color:var(--ink-soft);border:1px solid var(--border);padding:9px 10px;border-radius:999px;font-weight:700;font-size:13px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s;}
.tab-btn:active{transform:scale(.92);}
.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 3px 8px rgba(0,0,0,.12);}
.tab-btn[data-tab="garden"].active{background:var(--garden);border-color:var(--garden);}
.tab-btn[data-tab="kitchen"].active{background:var(--kitchen);border-color:var(--kitchen);}
.tab-btn[data-tab="dining"].active{background:var(--dining);border-color:var(--dining);}
.tab-btn[data-tab="shop"].active{background:var(--shop);border-color:var(--shop);}
.tab-btn[data-tab="goals"].active{background:var(--goals);border-color:var(--goals);color:var(--ink);}
.tab-badge{position:absolute;top:-5px;right:3px;background:var(--warn);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:999px;padding:0 4px;display:none;animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 3px rgba(0,0,0,.3);}
@keyframes badge-pop{from{transform:scale(0);}to{transform:scale(1);}}

/* ---------- tutorial ---------- */
#tutorial-banner{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--accent),var(--accent-soft));border-top:2px solid var(--warn);padding:9px 14px;font-size:13px;}
.tutorial-dot{background:var(--dining);color:#fff;font-weight:800;font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap;animation:combo-pulse 1s ease-in-out infinite;}
.tutorial-text{flex:1;font-weight:800;color:var(--ink);text-align:left;padding:0;}
.tutorial-skip{background:rgba(255,255,255,.6);color:var(--ink);font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;}

/* ---------- layout / shared ---------- */
main{padding:2px calc(14px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));max-width:560px;margin:0 auto;}
.view{display:none;}
.view.active{display:block;}
.view.enter{animation:view-in .3s ease;}
@keyframes view-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.section-title{font-size:15px;font-weight:700;margin:18px 0 8px;color:var(--primary-dark);display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:'Fredoka',sans-serif;}
.section-title:first-child{margin-top:14px;}
#view-garden .section-title{color:var(--garden-dark);} #view-kitchen .section-title{color:var(--kitchen-dark);} #view-dining .section-title{color:var(--dining-dark);} #view-shop .section-title{color:var(--shop-dark);} #view-goals .section-title{color:var(--goals-dark);}
.hint{font-size:12.5px;color:var(--ink-soft);margin:-2px 0 12px;line-height:1.4;}
.hint-inline{font-size:12px;color:var(--ink-soft);font-style:italic;}
.chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:22px;}
.chip{background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;display:flex;gap:5px;align-items:center;}
.chip.small{padding:3px 9px;font-size:12px;}
.btn{background:var(--primary);color:#fff;padding:9px 14px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.12);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;}
.btn:active:not(:disabled){transform:scale(.92);box-shadow:none;}
.btn.accent{background:var(--accent);color:var(--ink);} .btn.rush{background:var(--flame);} .btn.danger{background:var(--warn);}
.btn.ghost{background:var(--surface-alt);color:var(--ink);border:1px solid var(--border);box-shadow:none;}
.btn.small{padding:6px 11px;font-size:12px;}
.btn.serve{background:var(--dining);animation:serve-pulse 1.2s ease-in-out infinite;}
@keyframes serve-pulse{0%,100%{box-shadow:0 2px 0 rgba(0,0,0,.12),0 0 0 0 rgba(240,82,156,.5);}50%{box-shadow:0 2px 0 rgba(0,0,0,.12),0 0 0 7px rgba(240,82,156,0);}}
.tag{font-size:11px;font-weight:800;color:var(--ink-soft);background:var(--surface-alt);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.tag.owned{background:var(--good);color:#fff;}
.progress-track{width:100%;height:6px;border-radius:99px;background:var(--border);overflow:hidden;margin-top:3px;}
.progress-fill{height:100%;background:var(--primary);transition:width 1s linear,background .4s;border-radius:99px;}
.progress-fill.amber{background:var(--accent);} .progress-fill.red{background:var(--warn);}
.pop{animation:pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{0%{transform:scale(1);}40%{transform:scale(1.1);}100%{transform:scale(1);}}
.season-tag{font-style:normal;font-size:11px;}

/* ---------- garden ---------- */
.land-panel{position:relative;background:#E7D7B4;border:1px solid #D2BC8E;border-radius:var(--radius);padding:18px 12px 14px;background-image:repeating-linear-gradient(0deg,rgba(139,107,74,.08) 0 7px,transparent 7px 16px);box-shadow:inset 0 2px 8px rgba(0,0,0,.06);transition:filter 1s;}
body.night .land-panel{filter:brightness(.9);}
.fence{position:absolute;left:12px;right:12px;top:-6px;height:12px;background:repeating-linear-gradient(90deg,#B98B5A 0 6px,transparent 6px 16px);border-radius:3px;}
.fence::after{content:"";position:absolute;left:0;right:0;top:4px;height:3px;background:#A6784B;border-radius:2px;}
#garden-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:360px){#garden-grid{grid-template-columns:repeat(2,1fr);}}
.plot-slot{display:contents;}
.tile{position:relative;width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 6px 8px;text-align:center;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;animation:tile-in .35s cubic-bezier(.34,1.56,.64,1);overflow:hidden;}
@keyframes tile-in{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
.tile:active:not(:disabled){transform:scale(.93);}
.tile.empty{background:linear-gradient(180deg,#F6E7C3,#E8D3A6);border-style:dashed;color:var(--ink-soft);justify-content:center;}
.tile-soil{width:60px;height:18px;border-radius:50%;background:#8B6242;box-shadow:inset 0 3px 4px rgba(0,0,0,.2);margin-bottom:2px;}
.tile-plus{font-size:26px;line-height:1;}
.tile.growing{background:linear-gradient(180deg,#FFFFFF,#F4FBEF);}
.tile.growing.watered{background:linear-gradient(180deg,#FFFFFF,#E8F5FF);}
.tile.ready{background:linear-gradient(180deg,#FFF7DA,var(--accent-soft));border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,167,51,.25);animation:ready-glow 1.3s ease-in-out infinite;}
@keyframes ready-glow{0%,100%{box-shadow:0 0 0 3px rgba(255,167,51,.25);}50%{box-shadow:0 0 0 6px rgba(255,167,51,.1);}}
.tile.pest{background:linear-gradient(180deg,#FFF,#FFE7E7);border-color:var(--warn);animation:pest-shake 1.6s ease-in-out infinite;}
@keyframes pest-shake{0%,90%,100%{transform:rotate(0);}92%{transform:rotate(-2deg);}96%{transform:rotate(2deg);}}
.tile.untilled{background:repeating-linear-gradient(135deg,#DCCBA0,#DCCBA0 6px,#D2BE8E 6px,#D2BE8E 12px);border:2px dashed #B69A63;color:#6B5B3E;justify-content:center;}
.crop-svg{width:78px;height:70px;display:block;overflow:visible;}
.crop-svg .plant{transform-box:fill-box;transform-origin:50% 100%;animation:sway 3.2s ease-in-out infinite;}
.crop-svg .plant.alt{animation-duration:2.6s;animation-delay:-1s;}
@keyframes sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
body[data-weather="wind"] .crop-svg .plant{animation-duration:1.1s;animation-name:sway-hard;}
@keyframes sway-hard{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(9deg);}}
.tile.ready .crop-svg .plant{animation:bounce-plant 1.1s ease-in-out infinite;}
@keyframes bounce-plant{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.05);}}
.pest-bug{animation:bug-crawl 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes bug-crawl{0%,100%{transform:translate(0,0) rotate(-10deg);}50%{transform:translate(-3px,2px) rotate(10deg);}}
.tile-label{font-size:12px;font-weight:800;line-height:1.15;}
.tile-meta{display:flex;justify-content:space-between;width:100%;gap:4px;align-items:baseline;}
.tile-time{font-size:11px;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.tile-sub{font-size:10.5px;font-weight:700;color:var(--ink-soft);}
.tile.watered .tile-sub{color:var(--water);}
.ready-tag{position:absolute;top:6px;right:6px;background:var(--good);color:#fff;font-weight:800;font-size:11px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25);animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1);}

/* ---------- kitchen ---------- */
.tray-shelf{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px;padding:12px 10px;background:linear-gradient(180deg,#C9A06B,#B5895A);border:1px solid #8B6B45;border-radius:var(--radius);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12);min-height:70px;}
.tray{flex:0 0 auto;width:52px;height:52px;border-radius:9px;position:relative;background:linear-gradient(180deg,#3c3c3c,#232323);border:2px solid #555;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 4px rgba(0,0,0,.45);transition:opacity .3s;}
.tray.empty{opacity:.4;}
.tray-emoji{font-size:24px;}
.tray-count{position:absolute;bottom:-7px;right:-7px;background:var(--accent);color:var(--ink);font-weight:800;font-size:11px;min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);padding:0 4px;}
.floor-panel{position:relative;background:#FFF1D2;border:1px solid var(--border);border-radius:var(--radius);padding:18px 10px 12px;overflow:hidden;}
.floor-panel .tiles{position:absolute;inset:0;background-image:linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.05) 75%),linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.05) 75%);background-size:28px 28px;background-position:0 0,14px 14px;pointer-events:none;}
#stations-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 8px;justify-items:center;}
.station-slot{display:contents;}
.station{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;width:100%;border-radius:var(--radius-sm);transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .3s;animation:tile-in .35s cubic-bezier(.34,1.56,.64,1);}
.station:active{transform:scale(.94);}
.station.idle{opacity:.85;}
.station.ready{background:rgba(61,220,107,.14);box-shadow:0 0 0 2px rgba(61,220,107,.45);animation:ready-glow-green 1.1s ease-in-out infinite;}
@keyframes ready-glow-green{0%,100%{box-shadow:0 0 0 2px rgba(61,220,107,.45);}50%{box-shadow:0 0 0 6px rgba(61,220,107,.12);}}
.chef-svg{width:46px;height:42px;display:block;margin-bottom:-8px;position:relative;z-index:2;}
.chef-arm{transform-box:fill-box;transform-origin:20% 10%;}
.chef-arm.busy{animation:chef-stir .8s ease-in-out infinite;}
@keyframes chef-stir{0%,100%{transform:rotate(-18deg);}50%{transform:rotate(16deg);}}
.appliance{position:relative;width:72px;height:56px;}
/* stove */
.stove .pot{position:absolute;left:14px;top:6px;width:44px;height:30px;z-index:1;}
.pot-body{position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(180deg,#6E7B85,#3F4A52);border-radius:4px 4px 10px 10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);}
.pot-body::before,.pot-body::after{content:"";position:absolute;top:6px;width:8px;height:6px;background:#3F4A52;border-radius:3px;}
.pot-body::before{left:-7px;} .pot-body::after{right:-7px;}
.pot-lid{position:absolute;left:2px;right:2px;top:2px;height:8px;background:linear-gradient(180deg,#8E9BA6,#5A6670);border-radius:6px 6px 2px 2px;}
.pot-lid::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:5px;margin-left:-4px;background:#3F4A52;border-radius:3px;}
.stove.cooking .pot-lid{animation:lid-rattle .5s ease-in-out infinite;}
@keyframes lid-rattle{0%,100%{transform:translateY(0) rotate(0);}30%{transform:translateY(-2px) rotate(-2deg);}60%{transform:translateY(-1px) rotate(2deg);}}
.stove::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:20px;background:linear-gradient(180deg,#5A5A5A,#333);border-radius:4px;}
.flames{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;z-index:2;opacity:0;transition:opacity .3s;}
.stove.cooking .flames{opacity:1;}
.flames i{width:10px;height:16px;background:radial-gradient(ellipse at 50% 100%,#FFF1A8 0 25%,#FFA733 26% 60%,#FF5A2A 61%);border-radius:50% 50% 45% 45%/60% 60% 40% 40%;transform-origin:50% 100%;animation:flame .35s ease-in-out infinite alternate;filter:drop-shadow(0 0 4px rgba(255,120,40,.7));}
.flames i:nth-child(2){animation-delay:-.15s;height:20px;} .flames i:nth-child(3){animation-delay:-.28s;}
@keyframes flame{from{transform:scaleY(.85) scaleX(1) translateY(1px);}to{transform:scaleY(1.15) scaleX(.9) translateY(-2px);}}
.steam{position:absolute;left:50%;top:-4px;width:0;z-index:3;}
.steam b{position:absolute;left:-5px;width:10px;height:10px;background:rgba(255,255,255,.75);border-radius:50%;filter:blur(2px);opacity:0;}
.stove.cooking .steam b,.stove.done .steam b,.oven.done .steam b{animation:steam-rise 2s ease-in infinite;}
.stove.done .steam b{animation-duration:1.2s;}
.steam b:nth-child(2){animation-delay:.6s;left:-11px;} .steam b:nth-child(3){animation-delay:1.2s;left:2px;}
@keyframes steam-rise{0%{transform:translateY(0) scale(.6);opacity:0;}25%{opacity:.8;}100%{transform:translateY(-30px) scale(1.6);opacity:0;}}
/* oven */
.oven{background:linear-gradient(180deg,#C9CED4,#8E979F);border-radius:8px;border:2px solid #6A737B;}
.oven-window{position:absolute;left:10px;right:10px;top:8px;height:28px;background:#2A2A2A;border-radius:5px;overflow:hidden;border:2px solid #555;}
.oven-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,#FFB347 0 20%,#FF6A2B 45%,transparent 75%);opacity:0;transition:opacity .4s;}
.oven.cooking .oven-glow{opacity:1;animation:oven-flicker 1.1s ease-in-out infinite;}
.oven.done .oven-glow{opacity:.5;}
@keyframes oven-flicker{0%,100%{opacity:.85;}50%{opacity:1;}}
.oven-knobs{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px;}
.oven-knobs i{width:8px;height:8px;border-radius:50%;background:#444;border:1px solid #999;}
.oven.cooking .oven-knobs i:first-child{background:#FF6A2B;box-shadow:0 0 4px #FF6A2B;}
/* prep board */
.board{display:flex;align-items:flex-end;justify-content:center;}
.board-top{width:64px;height:16px;background:linear-gradient(180deg,#D8A86A,#B9834A);border-radius:4px;box-shadow:0 3px 0 #8B6242;}
.board-chop{position:absolute;left:50%;bottom:16px;width:24px;height:6px;margin-left:-4px;background:linear-gradient(90deg,#5D4037 0 8px,#CFD8DC 8px);border-radius:2px;transform-origin:0 100%;transform:rotate(-20deg);}
.board.cooking .board-chop{animation:chop .35s ease-in-out infinite alternate;}
@keyframes chop{from{transform:rotate(-30deg) translateY(-3px);}to{transform:rotate(-5deg) translateY(0);}}
.board.cooking::after{content:"🥬";position:absolute;left:14px;bottom:18px;font-size:12px;animation:wiggle 1s ease-in-out infinite;}
.ring{position:absolute;top:44px;right:8px;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--kitchen) var(--pct,0%),rgba(0,0,0,.12) 0);display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.ring-inner{width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;}
.dish-float{position:absolute;top:40px;left:50%;font-size:26px;transform:translateX(-50%);animation:dish-hover 1s ease-in-out infinite;z-index:4;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));}
@keyframes dish-hover{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,-6px);}}
.station-label{font-size:11px;font-weight:800;color:var(--ink);text-align:center;line-height:1.25;margin-top:2px;}
.station-label small{font-weight:700;color:var(--ink-soft);font-size:10.5px;font-variant-numeric:tabular-nums;}
.perfect-hint{color:var(--kitchen-dark) !important;animation:blink 1s steps(2) infinite;}
.station .ready-tag{top:4px;right:4px;}
.pass{display:flex;flex-wrap:wrap;gap:9px;padding:12px 10px;background:linear-gradient(180deg,#F7F1E6,#E8DFCC);border:1px solid #D9C79E;border-radius:var(--radius);min-height:64px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);}
.plate{position:relative;width:74px;padding:6px 4px 5px;border-radius:12px;background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:2px;animation:tile-in .3s cubic-bezier(.34,1.56,.64,1);}
.plate.perfect{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,199,44,.3);}
.plate.cold{filter:saturate(.5);border-color:#9DB7D0;}
.plate.wanted{border-color:var(--dining);box-shadow:0 0 0 2px rgba(240,82,156,.25);}
.plate-emoji{font-size:26px;line-height:1;}
.plate-q{position:absolute;top:2px;right:4px;font-size:12px;}
.plate-name{font-size:9.5px;font-weight:800;text-align:center;line-height:1.1;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.plate-wanted{font-size:9px;font-weight:800;color:var(--dining);}
.plate-x{position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:50%;background:var(--ink-soft);color:#fff;font-size:12px;line-height:18px;text-align:center;opacity:.6;}
.plate-x:hover{opacity:1;}

/* ---------- dining ---------- */
.dining-panel{background:#F5E3D5;border:1px solid #E5C9B3;border-radius:var(--radius);padding:12px 10px;background-image:repeating-linear-gradient(90deg,rgba(120,70,40,.07) 0 2px,transparent 2px 34px);}
#tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.table-slot{display:contents;}
.table-card{position:relative;background:#FFFDF6;border:1px solid var(--border);border-radius:16px;padding:10px 12px 12px;display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;gap:6px 10px;box-shadow:0 3px 0 rgba(0,0,0,.05);animation:tile-in .35s cubic-bezier(.34,1.56,.64,1);transition:box-shadow .3s;}
.table-card.empty{grid-template-columns:96px 1fr;align-items:center;opacity:.75;background:transparent;border-style:dashed;box-shadow:none;}
.table-card.critic{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF6,#FFF3D6);}
.table-card.servable{box-shadow:0 3px 0 rgba(0,0,0,.05),0 0 0 3px rgba(240,82,156,.25);}
.table-top{position:relative;height:96px;grid-row:1 / span 2;}
.table-round{position:absolute;left:8px;bottom:6px;width:80px;height:34px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#F3E2BE,#C99A5E);box-shadow:0 5px 0 #8B6242,0 8px 6px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;}
.table-round::before{content:"";position:absolute;left:30px;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #E8DCC8;}
.table-round::after{content:"🕯️";position:absolute;right:12px;top:-6px;font-size:11px;}
body.night .table-round::after{filter:drop-shadow(0 0 4px #FFB347);}
.table-no{position:absolute;left:-4px;top:-4px;font-size:10px;font-weight:800;color:#fff;background:var(--dining);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.table-empty{font-size:12px;color:var(--ink-soft);font-style:italic;}
.guest-wrap{position:absolute;left:18px;top:2px;width:60px;height:70px;}
.guest-svg{width:100%;height:100%;display:block;overflow:visible;}
.guest-wrap.seated .guest-head{animation:head-bob 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
@keyframes head-bob{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.guest-wrap.seated .guest-arm{transform-box:fill-box;transform-origin:50% 0;animation:guest-fidget 1.3s ease-in-out infinite;}
@keyframes guest-fidget{0%,100%{transform:rotate(0);}50%{transform:rotate(-22deg);}}
.sweat{animation:sweat-drop 1.2s ease-in infinite;transform-box:fill-box;}
@keyframes sweat-drop{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(8px);opacity:0;}}
.guest-wrap.walk-in{animation:walk-in .6s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes walk-in{from{transform:translateX(-40px) scale(.8);opacity:0;}to{transform:translateX(0) scale(1);opacity:1;}}
.guest-wrap.exit-happy{animation:exit-happy .8s ease-in forwards;}
@keyframes exit-happy{0%{transform:translateY(0) scale(1);opacity:1;}30%{transform:translateY(-10px) scale(1.12);}100%{transform:translateY(-40px) scale(.85);opacity:0;}}
.guest-wrap.exit-sad{animation:exit-sad .8s ease-in forwards;}
@keyframes exit-sad{0%{transform:translateX(0) rotate(0);opacity:1;}100%{transform:translateX(50px) rotate(8deg);opacity:0;}}
.order-bubble{position:absolute;right:-2px;top:0;background:#fff;border:2px solid var(--border);border-radius:14px 14px 14px 3px;padding:3px 6px;font-size:20px;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.12);animation:bubble-in .4s cubic-bezier(.34,1.56,.64,1);}
.order-bubble.ready{border-color:var(--good);animation:bubble-bounce 1s ease-in-out infinite;}
@keyframes bubble-in{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes bubble-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.bubble-check{position:absolute;top:-8px;right:-8px;background:var(--good);color:#fff;font-size:10px;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.table-info{min-width:0;}
.guest-line{font-size:13px;display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.guest-type{font-size:11px;color:var(--ink-soft);font-weight:700;}
.critic-flag{font-size:10px;font-weight:800;color:var(--ink);background:var(--gold);padding:1px 6px;border-radius:999px;}
.order-line{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.35;}
.ings{display:inline-flex;gap:4px;margin-left:2px;}
.ing{font-size:11px;background:var(--surface-alt);border-radius:6px;padding:0 4px;white-space:nowrap;}
.ing b{font-size:9.5px;} .ing.short{background:#FFE0E0;color:#B23A3A;}
.mood-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-soft);margin-top:5px;gap:8px;}
.mood-tag{font-weight:700;}
.time-tag{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.time-tag.low{color:var(--warn);animation:blink 1s steps(2) infinite;}
.table-action{grid-column:2;display:flex;justify-content:flex-end;align-items:center;min-height:30px;}
.served-tag{font-weight:800;color:var(--primary-dark);animation:float-tag .8s ease forwards;}
@keyframes float-tag{from{transform:translateY(6px);opacity:0;}to{transform:none;opacity:1;}}
.left-tag{font-weight:800;color:var(--warn);font-size:12px;}
.need-tag{font-size:11px;font-weight:800;color:var(--ink-soft);}

/* ---------- shop / goals ---------- */
.shop-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:transform .2s;}
.shop-card.locked{opacity:.6;}
.shop-card.owned{background:linear-gradient(135deg,#fff,#EDF9EE);border-color:#BFE8C6;}
.shop-card.prestige{background:linear-gradient(135deg,#fff,#FFF3D6);border-color:var(--gold);}
.shop-body{flex:1;min-width:0;}
.shop-card h3{margin:0;font-size:14px;}
.shop-card p{margin:3px 0 0;font-size:12px;color:var(--ink-soft);}
.shop-card .count{font-family:'Nunito';font-size:12px;color:var(--ink-soft);}
.quest{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;animation:tile-in .3s;}
.quest-emoji{font-size:26px;width:36px;text-align:center;}
.quest-body{flex:1;min-width:0;font-size:13px;}
.quest-body small{display:block;color:var(--ink-soft);font-size:11px;margin-top:3px;}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px;font-size:12px;display:flex;justify-content:space-between;gap:6px;}
.stat b{font-size:13px;}

/* ---------- modal ---------- */
#modal-overlay{position:fixed;inset:0;background:rgba(29,49,41,.55);display:none;align-items:flex-end;justify-content:center;z-index:50;backdrop-filter:blur(2px);}
#modal-overlay.open{display:flex;animation:fade-in .2s ease;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
#modal-panel{background:var(--surface);width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:16px calc(16px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));max-height:82vh;overflow-y:auto;animation:sheet-up .3s cubic-bezier(.34,1.3,.64,1);}
@keyframes sheet-up{from{transform:translateY(60px);opacity:0;}to{transform:none;opacity:1;}}
#modal-panel h2{margin:0 0 12px;font-size:18px;}
.option{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px;transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.option:active:not(:disabled):not(.static){transform:scale(.97);}
.option.locked{opacity:.5;} .option.wanted{border-color:var(--dining);}
.option.danger{border-color:#FFB4B4;background:#FFF1F1;}
.opt-icon{font-size:26px;width:34px;text-align:center;flex:0 0 auto;}
.opt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.opt-body b{font-size:14px;} .opt-body small{font-size:11.5px;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.sale{font-size:10px;font-weight:800;background:var(--dining);color:#fff;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.modal-close{display:block;margin:8px auto 0;background:var(--surface-alt);color:var(--ink);font-weight:800;font-size:13px;padding:10px 22px;border-radius:999px;border:1px solid var(--border);}
.zoom{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 6px;text-align:center;}
.zoom-ring{width:124px;height:124px;border-radius:50%;background:conic-gradient(var(--kitchen) var(--pct,0%),var(--border) 0);display:flex;align-items:center;justify-content:center;transition:background .5s;}
.zoom-ring.ready{background:var(--good);animation:ready-glow-green 1.1s infinite;}
.zoom-inner{width:102px;height:102px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:46px;}
.zoom-title{font-weight:800;font-size:16px;} .zoom-sub{font-size:13px;color:var(--ink-soft);}
.zoom-actions{display:flex;gap:8px;margin-top:4px;}
.levelup{text-align:center;}
.levelup-num{font-family:'Fredoka';font-size:64px;font-weight:700;color:var(--accent);line-height:1;animation:level-pop .6s cubic-bezier(.34,1.56,.64,1);text-shadow:0 4px 0 rgba(0,0,0,.08);}
@keyframes level-pop{from{transform:scale(.3) rotate(-10deg);opacity:0;}to{transform:none;opacity:1;}}
.unlock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px;}
.unlock{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;animation:tile-in .4s cubic-bezier(.34,1.56,.64,1) both;}
.unlock:nth-child(2){animation-delay:.08s;} .unlock:nth-child(3){animation-delay:.16s;} .unlock:nth-child(4){animation-delay:.24s;}
.unlock span{font-size:28px;} .unlock b{font-size:12px;text-align:center;} .unlock small{font-size:10px;color:var(--ink-soft);}
.welcome p,.welcome li{font-size:14px;line-height:1.5;}
.welcome ul{padding-left:18px;margin:6px 0;}
.confirm-text{font-size:14px;line-height:1.5;}
.confirm-actions{display:flex;justify-content:center;margin-top:8px;}
.settings .hint{text-align:center;margin-top:8px;}

/* ---------- toasts & fx ---------- */
#toast-container{position:fixed;bottom:16px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:60;pointer-events:none;padding:0 12px;}
.toast{background:var(--primary-dark);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:toast-in .3s cubic-bezier(.34,1.56,.64,1);max-width:100%;text-align:center;transition:opacity .3s,transform .3s;}
.toast.gold{background:linear-gradient(90deg,#B58A00,#E0A800);} .toast.bad{background:#B23A3A;} .toast.event{background:linear-gradient(90deg,#5C7CFA,#8E6BF0);}
.toast.out{opacity:0;transform:translateY(6px);}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.9);}to{opacity:1;transform:none;}}
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden;}
.float-pop{position:fixed;transform:translate(-50%,-50%);font-weight:800;font-size:15px;color:var(--primary-dark);animation:float-up 1s ease forwards;white-space:nowrap;text-shadow:0 1px 0 #fff,0 0 6px #fff;}
.float-pop.bad{color:var(--warn);} .float-pop.gold{color:#C98A00;font-size:17px;} .float-pop.water{color:var(--water);}
@keyframes float-up{from{opacity:1;transform:translate(-50%,-50%) scale(.8);}20%{transform:translate(-50%,-60%) scale(1.15);}to{opacity:0;transform:translate(-50%,-140%) scale(1);}}
.particle{position:fixed;font-size:14px;transform:translate(-50%,-50%);animation:particle-out .6s ease-out forwards;}
@keyframes particle-out{from{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4) rotate(var(--rot));opacity:0;}}
.confetti-piece{position:fixed;top:-24px;font-size:18px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards;}
@keyframes confetti-fall{from{top:-24px;opacity:1;transform:rotate(0) translateX(0);}50%{transform:rotate(180deg) translateX(20px);}to{top:104%;opacity:0;transform:rotate(360deg) translateX(-20px);}}
.flyer{position:fixed;font-size:18px;transform:translate(-50%,-50%);animation:fly .65s cubic-bezier(.4,0,.6,1) forwards;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}
@keyframes fly{0%{transform:translate(-50%,-50%) scale(1.2);opacity:1;}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.6);opacity:.9;}}
.flash{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0;background:radial-gradient(circle,rgba(255,215,90,.35),transparent 70%);}
.flash.blue{background:radial-gradient(circle,rgba(120,150,255,.35),transparent 70%);}
.flash.on{animation:flash-on .5s ease-out;}
@keyframes flash-on{from{opacity:1;}to{opacity:0;}}
#night-dim{position:fixed;inset:0;pointer-events:none;z-index:5;background:#121A30;opacity:0;transition:opacity 2s linear;mix-blend-mode:multiply;}

/* weather */
#weather-layer{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden;opacity:0;transition:opacity 1.5s;}
body[data-weather="rain"] #weather-layer{opacity:1;}
.rain{position:absolute;inset:-100% 0 0 0;background-image:repeating-linear-gradient(100deg,transparent 0 22px,rgba(120,170,230,.35) 22px 23px,transparent 23px 60px);background-size:60px 100px;animation:rain-fall .7s linear infinite;}
.rain.back{background-image:repeating-linear-gradient(105deg,transparent 0 38px,rgba(120,170,230,.2) 38px 39px,transparent 39px 90px);animation-duration:1.1s;}
@keyframes rain-fall{from{transform:translateY(0);}to{transform:translateY(50%);}}
#ambient-layer{position:fixed;inset:0;pointer-events:none;z-index:7;overflow:hidden;}
.ambient{position:absolute;opacity:0;}
.ambient.leaf{animation:leaf-drift linear forwards;}
@keyframes leaf-drift{0%{transform:translate(0,0) rotate(0);opacity:0;}10%{opacity:.9;}50%{transform:translate(50vw,30px) rotate(180deg);}90%{opacity:.9;}100%{transform:translate(110vw,-10px) rotate(360deg);opacity:0;}}
.ambient.firefly{color:#FFE87A;text-shadow:0 0 8px #FFE87A;animation:firefly ease-in-out forwards;}
@keyframes firefly{0%{opacity:0;transform:translate(0,0);}30%{opacity:1;}60%{opacity:.3;transform:translate(14px,-18px);}100%{opacity:0;transform:translate(-8px,-34px);}}
.ambient.mote{color:#FFF1A8;animation:mote ease-in-out forwards;}
@keyframes mote{0%{opacity:0;transform:translateY(0) scale(.5);}40%{opacity:.8;}100%{opacity:0;transform:translateY(-40px) scale(1.2);}}
.ambient.cloud{opacity:.5;animation:leaf-drift linear forwards;filter:blur(1px);}

/* reduced motion */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}}
@media (min-width:600px){#garden-grid{grid-template-columns:repeat(4,1fr);}}