/* Promo site v4, designed and written by Claude on 2026-10-03.
   Three colours: sun yellow, deep grass green, cream. Display type: Source Han Sans Heavy (subset, SHS).
   Hooks main.js drives: #home --hero-x/--hero-y (pointer, -1..1) and --hero-scroll (0..1); .header.solid;
   nav a.is-current; .step.active / .how-image.active; .almanac.enhanced + .seed-tray/.seed-button + .packet.is-active
   and --dir (1 / -1) on .packets; the mini-lawn data-state, data-armed, --x/--y/--hp custom properties. */
@font-face{font-family:'SHS';src:url('assets/fonts/shs-heavy-v2.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  --sun:#ffcf33;
  --grass:#173016;
  --night:#0e1c0d;
  --cream:#fff5dc;
  --ink:var(--grass);
  --line:rgba(23,48,22,.16);
  --line-dark:rgba(255,245,220,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.25rem,5vw,5rem);
  --display:'SHS','Hiragino Sans GB','PingFang SC','Microsoft YaHei',sans-serif;
  --text:'Hiragino Sans GB','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.75 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.modal-open{overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
a,button,[role=tab]{-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.02em}
p{margin:0}
.content{width:min(100% - 2*var(--gutter),1320px);margin-inline:auto}

.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.6rem 1rem;border-radius:4px;background:var(--sun);color:var(--grass);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:1rem}

/* ---------------------------------------------------------------- header */
.header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gutter);color:var(--cream);transition:background .4s,padding .4s,box-shadow .4s}
.header.solid{padding-block:.6rem;background:rgba(14,28,13,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line-dark)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.02em;text-decoration:none}
.brand img{width:28px;height:28px}
.header nav{display:flex;gap:clamp(1rem,2.5vw,2.25rem)}
.header nav a{position:relative;font-size:.95rem;font-weight:600;text-decoration:none;opacity:.82;transition:opacity .2s}
.header nav a::after{content:'';position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.header nav a:hover,.header nav a.is-current{opacity:1}
.header nav a:hover::after,.header nav a.is-current::after{transform:scaleX(1)}

/* ---------------------------------------------------------------- hero
   The plates are 2:1 and pinned to the bottom edge, so every height below is a fraction of the plate height --ph.
   Measured on the renders: fence top 0.49 of --ph above the bottom, lawn top 0.28. The title sits between the far
   plate and the fence, so the fence hides its foot and it rises from behind it on load. */
.hero{position:relative;height:100svh;min-height:640px;max-height:1200px;overflow:hidden;isolation:isolate;background:var(--grass);color:var(--cream)}
.hero-scene{position:absolute;inset:0;container-type:size;--ph:max(100cqh,50cqw)}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;scale:1.05;transform-origin:50% 100%;
  translate:calc(var(--hero-x,0) * var(--depth) * -30px) calc(var(--hero-scroll,0) * (1 - var(--depth)) * 34vh + var(--hero-y,0) * var(--depth) * -12px)}
.layer-sky{z-index:0;background:linear-gradient(180deg,#7fb7dc 0%,#a9d0e4 30%,#e3ead6 58%,#ffe2a6 78%,#ffcf7a 100%)}
.layer-far{z-index:1;animation:plate-in 1.6s var(--ease-out) both}
.layer-fence{z-index:3;animation:plate-in 1.6s .08s var(--ease-out) both}
.layer-lawn{z-index:4;animation:plate-in 1.6s .16s var(--ease-out) both}
@keyframes plate-in{from{opacity:0;transform:translateY(3%)}}

.hero-title{position:absolute;z-index:2;left:50%;bottom:calc(var(--ph) * .5 - .1em);display:flex;align-items:flex-start;white-space:nowrap;font-size:min(14vw,26cqh);line-height:.92;letter-spacing:-.04em;color:var(--cream);text-shadow:0 .02em .12em rgba(14,28,13,.35);
  translate:calc(-50% + var(--hero-x,0) * var(--depth) * -30px) calc(var(--hero-scroll,0) * (1 - var(--depth)) * 34vh);
  animation:title-in 1.5s .25s var(--ease-out) both}
.title-word{display:block}
.hero-title .badge{display:grid;place-items:center;width:2.1em;height:2.1em;margin:.18em 0 0 .12em;border-radius:50%;background:var(--sun);color:var(--grass);font-size:.24em;line-height:1;letter-spacing:0;text-shadow:none;rotate:-8deg;box-shadow:0 .2em .6em rgba(14,28,13,.3)}
@keyframes title-in{from{transform:translateY(60%);opacity:0}30%{opacity:1}}

.hero-shade{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(to top,rgba(14,28,13,.88) 0%,rgba(14,28,13,.5) 18%,rgba(14,28,13,0) 42%),linear-gradient(to bottom,rgba(14,28,13,.45),rgba(14,28,13,0) 18%)}

/* characters stand on the lawn: --foot is where the feet touch, --pad the empty margin under the feet in the render */
.hero-cast{position:absolute;inset:0;z-index:6;translate:calc(var(--hero-x,0) * -30px) calc(var(--hero-y,0) * -12px)}
.cast{position:absolute;left:var(--left);bottom:calc(var(--foot) - var(--h) * var(--pad));width:auto;height:var(--h);transform-origin:50% 90%;filter:drop-shadow(0 1.2vh 1.4vh rgba(14,28,13,.25));
  animation:cast-in 1.3s var(--d,.5s) var(--ease-out) both,sway 5.5s var(--d2,1.8s) ease-in-out infinite alternate}
.cast-sunflower{z-index:1;--h:calc(var(--ph) * .42);--pad:.078;--foot:16%;--left:46%;--d:.6s;--d2:2.2s}
.cast-peashooter{z-index:3;--h:calc(var(--ph) * .46);--pad:.135;--foot:8%;--left:56%;--d:.75s;--d2:1.6s}
.cast-zombie{z-index:2;--h:calc(var(--ph) * .5);--pad:.15;--foot:12%;--left:75%;--d:1s;animation-name:zombie-in,sway;animation-duration:1.8s,7s}
@keyframes cast-in{from{transform:translateY(12%) scale(.94);opacity:0}}
@keyframes zombie-in{from{transform:translateX(30%);opacity:0}}
@keyframes sway{from{rotate:-1deg}to{rotate:1.2deg}}

.hero-content{position:absolute;z-index:10;left:var(--gutter);bottom:clamp(5rem,11vh,7.5rem);max-width:34rem;animation:fade-up 1.2s .9s var(--ease-out) both}
.tagline{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.18;letter-spacing:-.01em}
.tagline span{display:block}
.tagline span:last-child{color:var(--sun)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.sun-button{display:inline-flex;align-items:center;gap:.55rem;min-height:3.1rem;padding:0 1.5rem 0 1.1rem;border:0;border-radius:999px;background:var(--sun);color:var(--grass);font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.02em;box-shadow:0 .5rem 1.5rem -.5rem rgba(255,207,51,.7);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sun-button img{width:1.6rem;height:1.6rem;transition:rotate .8s var(--ease)}
.sun-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 .9rem 2rem -.6rem rgba(255,207,51,.85)}
.sun-button:hover:not(:disabled) img{rotate:90deg}
.sun-button:disabled{opacity:.55;box-shadow:none}
.download{min-height:3.1rem;padding:0 1.3rem;border:1px solid rgba(255,245,220,.35);border-radius:999px;background:transparent;color:var(--cream);font-weight:600;opacity:.8}
.status{margin-top:.8rem;font-size:.85rem;opacity:.7}
.hero-info{position:absolute;z-index:10;left:var(--gutter);right:var(--gutter);bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0 1.25rem;border-top:1px solid var(--line-dark);font-size:.85rem;letter-spacing:.06em;color:rgba(255,245,220,.75);animation:fade-up 1.2s 1.1s var(--ease-out) both}
.hero-info i{margin:0 .4em;font-style:normal;color:var(--sun)}
.hero-info a{color:var(--cream);text-decoration:none}
.hero-info a:hover{color:var(--sun)}
@keyframes fade-up{from{opacity:0;transform:translateY(1.5rem)}}

/* ---------------------------------------------------------------- section headings */
.section-heading{display:grid;gap:1rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.chapter{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700;letter-spacing:.18em;opacity:.7}
.chapter::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(255,207,51,.25)}
.section-heading h2{font-size:clamp(3.75rem,11vw,10.5rem);line-height:.88;letter-spacing:-.045em}
.section-heading p{max-width:28em;font-size:clamp(1.1rem,1.6vw,1.4rem);opacity:.8}

/* ---------------------------------------------------------------- how to play */
.how{padding-block:clamp(6rem,12vw,11rem)}
.how-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.how-visual{position:sticky;top:6.5rem;margin:0}
.how-images{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:var(--grass);box-shadow:0 2rem 4rem -2rem rgba(23,48,22,.45)}
.how-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .7s var(--ease),scale 1.4s var(--ease)}
.how-image.active{opacity:1;scale:1}
.how-visual figcaption{display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;font-size:.85rem}
.how-visual figcaption span{letter-spacing:.14em;opacity:.6}
.how-visual figcaption strong{font-family:var(--display);font-weight:900;font-size:1.1rem}
.steps{display:grid}
.step{display:grid;grid-template-columns:4.5rem 1fr;gap:1.25rem;padding:2rem 0;border-top:1px solid var(--line);opacity:.5;transition:opacity .5s var(--ease)}
.step:last-child{border-bottom:1px solid var(--line)}
html:not(.js) .step,.step.active,.step:hover{opacity:1}
.step-number{font-family:var(--display);font-weight:900;font-size:3.5rem;line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--grass);transition:color .4s,text-shadow .4s}
.step.active .step-number{color:var(--grass);text-shadow:.07em .07em 0 var(--sun)}
.step h3{margin-bottom:.4rem;font-size:1.6rem}
.step p{opacity:.82}

/* ---------------------------------------------------------------- almanac
   Without JS every packet is a full spread. With .enhanced, main.js builds .seed-tray (role=tablist) of
   button.seed-button[aria-selected] (card img + strong cost) and shows only .packet.is-active. */
.almanac{position:relative;overflow:hidden;padding-block:clamp(6rem,12vw,11rem) clamp(4rem,8vw,7rem);background:radial-gradient(60% 50% at 30% 45%,rgba(255,207,51,.16),transparent 70%),var(--grass);color:var(--cream)}
.almanac .section-heading{margin-bottom:clamp(2rem,4vw,3.5rem)}
.lane{width:min(100% - 2*var(--gutter),1320px);margin-inline:auto}
.packets{display:grid;gap:clamp(4rem,8vw,8rem)}
.packet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);outline:none}
.packet:nth-child(even) .packet-art{order:2}
.packet:focus-visible{outline:3px solid var(--sun);outline-offset:8px;border-radius:8px}
.packet-art{position:relative;display:grid;place-items:center;aspect-ratio:1}
.packet-art::after{content:'';position:absolute;left:18%;right:18%;bottom:7%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,207,51,.35),transparent)}
.packet-art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:blur(0) drop-shadow(0 2.5rem 2.5rem rgba(14,28,13,.35))}
.packet-echo{position:absolute;inset:auto -20% 24% -20%;text-align:center;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:clamp(6rem,15vw,15rem);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,245,220,.16);pointer-events:none;user-select:none}
.packet-copy{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'window cost' 'name name' 'crit crit' 'specs specs' 'text text';align-items:center;column-gap:1rem}
.packet-window{grid-area:window;width:4.5rem;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--cream);box-shadow:0 0 0 1px var(--line-dark)}
.packet-window img{width:100%;height:100%;object-fit:cover}
.packet h3{grid-area:name;margin-top:1.25rem;font-size:clamp(3.5rem,8.5vw,8.5rem);line-height:.9;letter-spacing:-.045em}
.crit-stamp{grid-area:crit;justify-self:start;margin-top:.9rem;padding:.25rem .7rem;border-radius:999px;background:var(--sun);color:var(--grass);font-family:var(--display);font-weight:900;font-size:.85rem;letter-spacing:.06em}
.sun-cost{grid-area:cost;display:flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:900;font-size:1.75rem;color:var(--sun)}
.sun-cost img{width:2rem;height:2rem}
.specs,.enemy dl{display:flex;flex-wrap:wrap;gap:1.75rem;margin:0}
.specs{grid-area:specs;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line-dark)}
.specs div,.enemy dl div{display:grid}
.specs dt,.enemy dt{font-size:.78rem;letter-spacing:.14em;opacity:.6}
.specs dd,.enemy dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.35rem}
.packet-copy>p{grid-area:text;max-width:30em;margin-top:1.4rem;opacity:.86}
.packet-copy>p strong{display:inline-block;margin-bottom:.35rem;font-size:1.15rem}
.packet-copy q{display:inline-block;margin-top:.5rem;color:var(--sun);font-weight:600}

.almanac.enhanced .packets{grid-template-areas:'stack';gap:0}
.almanac.enhanced .packet{grid-area:stack;visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s}
.almanac.enhanced .packet:nth-child(even) .packet-art{order:0}
.almanac.enhanced .packet-art{justify-self:center;width:auto;height:min(calc(100svh - 15rem),44vw);min-height:18rem}
.almanac.enhanced .seed-tray{scroll-margin-top:5rem}
.almanac.enhanced .packet.is-active{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.almanac.enhanced .packet.is-active .packet-art img{animation:rack-focus .95s var(--ease-out) both}
.almanac.enhanced .packet.is-active .packet-echo{animation:echo-in 1.2s var(--ease-out) both}
.almanac.enhanced .packet.is-active h3{animation:name-in .9s .08s var(--ease-out) both}
.almanac.enhanced .packet.is-active .packet-copy>:not(h3){animation:fade-up .8s .18s var(--ease-out) both}
@keyframes rack-focus{from{opacity:0;transform:translateX(calc(var(--dir,1) * 8%)) scale(1.1);filter:blur(14px) drop-shadow(0 2.5rem 2.5rem rgba(14,28,13,.35))}}
@keyframes echo-in{from{opacity:0;transform:translateX(calc(var(--dir,1) * -12%))}}
@keyframes name-in{from{opacity:0;transform:translateY(.35em);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -10% 0)}}

.seed-tray{display:flex;gap:.5rem;width:max-content;max-width:100%;margin:0 0 clamp(1.5rem,3vw,2.5rem);padding:.5rem;overflow-x:auto;border-radius:12px;background:rgba(14,28,13,.55);box-shadow:inset 0 0 0 1px var(--line-dark);scrollbar-width:none}
.seed-tray{scroll-padding-inline:.5rem}
.seed-tray::after{content:'';flex:none;width:1px}
.seed-button{position:relative;flex:none;display:grid;justify-items:center;gap:.2rem;width:4.75rem;padding:.4rem .35rem .45rem;border:0;border-radius:8px;background:transparent;color:var(--cream);transition:background .25s,transform .35s var(--ease)}
.seed-button img{width:3.25rem;height:3.25rem;border-radius:5px;object-fit:cover;opacity:.6;filter:saturate(.6);transition:opacity .25s,filter .25s}
.seed-button strong{font-family:var(--display);font-weight:900;font-size:.85rem;color:var(--sun)}
.seed-button:hover img,.seed-button[aria-selected='true'] img{opacity:1;filter:none}
.seed-button[aria-selected='true']{background:rgba(255,245,220,.1);transform:translateY(-3px)}
.seed-button[aria-selected='true']::after{content:'';position:absolute;left:30%;right:30%;bottom:-.3rem;height:3px;border-radius:2px;background:var(--sun)}

.enemy{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1rem,3vw,2.5rem);margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line-dark)}
.enemy-art{width:clamp(9rem,18vw,15rem);aspect-ratio:1}
.enemy-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.5rem 1.5rem rgba(14,28,13,.35))}
.enemy-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75rem 1rem}
.enemy-head{width:3rem;height:3rem}
.enemy h3{font-size:clamp(2rem,4vw,3.5rem)}
.enemy dl,.enemy p{grid-column:1/-1}
.enemy p{opacity:.8}

/* ---------------------------------------------------------------- mini-lawn (hidden until main.js removes [hidden])
   .ml-board[data-state=idle|playing|won|lost][data-armed=true]; .ml-cell.has-plant holds a .ml-plant;
   .ml-zombie --x (centre, 0..1 of the lane) and --hp (0..1), .is-hit, .is-down; .ml-pea --x;
   .ml-sun-drop --x/--y inside #ml-sky, .is-collected to fly off. */
.minilawn[hidden]{display:none}
.minilawn{padding-block:clamp(6rem,12vw,10rem);background:var(--cream)}
.ml-board{display:grid;gap:1rem}
.ml-hud{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.ml-sun{display:flex;align-items:center;gap:.5rem;min-width:8rem;padding:.4rem 1.1rem .4rem .5rem;border-radius:999px;background:var(--grass);color:var(--sun)}
.ml-sun img{width:2.4rem;height:2.4rem}
.ml-sun output{font-family:var(--display);font-weight:900;font-size:1.6rem;font-variant-numeric:tabular-nums}
.ml-packet{display:flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .35rem;border:2px solid transparent;border-radius:10px;background:var(--grass);color:var(--cream);transition:transform .3s var(--ease),border-color .2s,opacity .2s}
.ml-packet img{width:3rem;height:3rem;border-radius:6px}
.ml-packet span{font-weight:700}
.ml-packet strong{font-family:var(--display);font-weight:900;color:var(--sun)}
.ml-packet:disabled{opacity:.45}
.ml-packet[aria-pressed='true']{border-color:var(--sun);transform:translateY(-3px)}
.ml-start{margin-left:auto}
.ml-sound{min-height:2.6rem;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:.9rem}
.ml-sound[aria-pressed='true']{background:var(--grass);color:var(--cream)}
.ml-lane{position:relative;display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;height:clamp(13rem,26vw,22rem);overflow:hidden;border-radius:8px;background:linear-gradient(90deg,#3f7d34 0 22.7%,#357029 22.7% 45.4%,#3f7d34 45.4% 68.1%,#2a5a22 68.1%);box-shadow:inset 0 -1.5rem 3rem -1rem rgba(14,28,13,.4),0 2rem 4rem -2.5rem rgba(23,48,22,.6)}
.ml-lane::before{content:'';position:absolute;inset:0 auto 0 0;z-index:1;width:6px;background:repeating-linear-gradient(180deg,var(--cream) 0 10px,transparent 10px 18px);opacity:.5}
.ml-cell{position:relative;padding:0;border:0;border-right:1px solid rgba(255,245,220,.08);background:transparent}
.ml-board[data-armed='true'] .ml-cell:not(.has-plant){cursor:copy}
.ml-board[data-armed='true'] .ml-cell:not(.has-plant)::after{content:'';position:absolute;inset:12%;border:2px dashed rgba(255,245,220,.55);border-radius:8px;animation:pulse 1.2s ease-in-out infinite alternate}
@keyframes pulse{to{opacity:.35}}
.ml-plant{position:absolute;left:50%;bottom:4%;height:92%;max-width:150%;aspect-ratio:1;translate:-50% 0;pointer-events:none;animation:plant-in .5s var(--ease-out) both}
.ml-plant img,.ml-zombie img{object-position:50% 100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ml-plant img{width:100%;height:100%;object-fit:contain}
@keyframes plant-in{from{transform:translateY(20%) scale(.6);opacity:0}}
.ml-zombie{position:absolute;z-index:3;left:calc(var(--x,.86) * 100%);bottom:3%;height:92%;aspect-ratio:1;translate:-50% 0;transform-origin:50% 90%;pointer-events:none}
.ml-zombie img{width:100%;height:100%;object-fit:contain;transition:filter .15s}
.ml-zombie.is-hit img{filter:brightness(1.8) saturate(.4)}
.ml-zombie.is-down{rotate:-70deg;opacity:0;transition:rotate .6s var(--ease),opacity .8s .3s}
.ml-hp{position:absolute;top:6%;left:35%;right:35%;height:5px;overflow:hidden;border-radius:3px;background:rgba(14,28,13,.5)}
.ml-hp i{display:block;width:calc(var(--hp,1) * 100%);height:100%;background:var(--sun);transition:width .2s}
.ml-pea{position:absolute;z-index:2;left:calc(var(--x,0) * 100%);bottom:52%;width:clamp(12px,1.4vw,18px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c8f27a,#4c9a22 70%);box-shadow:0 .2rem .4rem rgba(14,28,13,.3)}
.ml-sky{position:absolute;inset:0;z-index:4;pointer-events:none}
.ml-sun-drop{position:absolute;left:calc(var(--x,.5) * 100%);top:calc(var(--y,.4) * 100%);width:clamp(3rem,5vw,4.5rem);aspect-ratio:1;padding:0;border:0;background:none;translate:-50% -50%;pointer-events:auto;animation:sun-fall 1.1s var(--ease-out) both,sun-spin 6s linear infinite}
.ml-sun-drop img{width:100%;height:100%;filter:drop-shadow(0 0 .8rem rgba(255,207,51,.8))}
.ml-sun-drop.is-collected{pointer-events:none;animation:sun-collect .5s var(--ease) forwards}
@keyframes sun-fall{from{transform:translateY(-240%)}}
@keyframes sun-spin{to{rotate:360deg}}
@keyframes sun-collect{to{transform:translate(-200%,-300%) scale(.4);opacity:0}}
.ml-status{font-family:var(--display);font-weight:900;font-size:1.25rem}
.ml-board[data-state='lost'] .ml-lane{filter:saturate(.4) brightness(.8)}

/* ---------------------------------------------------------------- footage (night) */
.footage{padding-block:clamp(6rem,12vw,10rem);background:var(--night);color:var(--cream);box-shadow:0 0 0 100vmax var(--night);clip-path:inset(0 -100vmax)}
.stage{margin:0}
#stage{display:block;width:100%;padding:0;overflow:hidden;border:0;border-radius:6px;background:var(--night);cursor:zoom-in}
#stage-image{width:100%;aspect-ratio:16/9;object-fit:cover;transition:scale 1.2s var(--ease)}
#stage:hover #stage-image{scale:1.02}
#stage-caption{margin-top:1rem;font-family:var(--display);font-weight:900;font-size:1.25rem}
.thumbnails{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-top:1.75rem}
.thumbnail{padding:0;border:0;background:none;color:var(--cream);text-align:left;opacity:.55;transition:opacity .3s}
.thumbnail img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;outline:2px solid transparent;outline-offset:3px;transition:outline-color .3s}
.thumbnail span{display:block;margin-top:.5rem;font-size:.8rem;letter-spacing:.04em}
.thumbnail:hover,.thumbnail[aria-pressed='true']{opacity:1}
.thumbnail[aria-pressed='true'] img{outline-color:var(--sun)}

/* ---------------------------------------------------------------- footer */
.footer{padding-block:4rem 3rem;border-top:1px solid var(--line-dark);background:var(--night);color:rgba(255,245,220,.66);font-size:.85rem}
.footer .content{display:grid;gap:1rem}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--cream)}
.footer-top strong{font-family:var(--display);font-weight:900;font-size:1.25rem}
.footer summary{color:var(--cream);cursor:pointer}
.footer ul{padding-left:1.2rem}
.footer a{color:var(--cream);text-decoration-color:rgba(255,207,51,.6);text-underline-offset:3px}

/* ---------------------------------------------------------------- dialogs */
dialog{width:min(100% - 2rem,1100px);max-height:calc(100dvh - 2rem);padding:0;border:0;border-radius:10px;background:var(--night);color:var(--cream);box-shadow:0 3rem 6rem rgba(14,28,13,.5)}
dialog::backdrop{background:rgba(14,28,13,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:dialog-in .5s var(--ease-out)}
@keyframes dialog-in{from{opacity:0;transform:translateY(1rem) scale(.98)}}
.dialog-inner{display:grid;gap:1rem;padding:1.25rem}
.dialog-top{display:flex;align-items:center;justify-content:space-between}
.dialog-top h2{font-size:1.3rem}
.close{width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:rgba(255,245,220,.1);font-size:1.5rem;line-height:1}
.close:hover{background:var(--sun);color:var(--grass)}
.trailer-frame video{width:100%;aspect-ratio:16/9;border-radius:6px;background:var(--night)}
.player-controls,.lightbox-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.player-controls label{display:flex;flex:1;align-items:center;gap:.6rem;min-width:12rem;font-size:.85rem}
.player-controls input{flex:1;accent-color:var(--sun)}
.player-controls button,.lightbox-controls button{min-height:2.5rem;padding:0 1.1rem;border:1px solid var(--line-dark);border-radius:999px;background:transparent}
.player-controls button:hover,.lightbox-controls button:hover{border-color:var(--sun);color:var(--sun)}
#player-status{font-size:.85rem;opacity:.7}
#lightbox-image{width:100%;max-height:70dvh;object-fit:contain;border-radius:6px;background:var(--night)}
#lightbox-caption{font-family:var(--display);font-weight:900}
.lightbox-controls{justify-content:space-between}
#shot-count{font-variant-numeric:tabular-nums;opacity:.7}

/* ---------------------------------------------------------------- mobile: no parallax, scene above the copy */
@media (max-width:760px){
  .header{padding-block:.75rem}
  .header nav{gap:.9rem}
  .header nav a{font-size:.85rem}
  .brand span{display:none}
  .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
  .hero-scene{position:relative;height:72svh;min-height:520px}
  .layer,.hero-cast{translate:none}
  .hero-title{bottom:calc(var(--ph) * .5 + .16em);font-size:min(14.4vw,20cqh);translate:-50% 0}
  .cast-sunflower{--h:52vw;--left:-4%;--foot:10%}
  .cast-peashooter{--h:60vw;--left:20%;--foot:3%}
  .cast-zombie{--h:62vw;--left:50%;--foot:7%}
  .hero-shade{background:linear-gradient(to top,var(--grass) 0%,rgba(23,48,22,0) 30%),linear-gradient(to bottom,rgba(14,28,13,.45),rgba(14,28,13,0) 18%)}
  .hero-content{position:relative;left:auto;bottom:auto;margin:-1rem var(--gutter) 0;padding-bottom:1.5rem}
  .hero-info{position:relative;left:auto;right:auto;flex-direction:column;align-items:flex-start;gap:.5rem;margin:0 var(--gutter)}
  .how-layout{grid-template-columns:1fr}
  .how-visual{position:relative;top:auto}
  .step{grid-template-columns:3rem 1fr}
  .step-number{font-size:2.5rem}
  .packet{grid-template-columns:1fr}
  .packet:nth-child(even) .packet-art{order:0}
  .packet-art{width:min(100%,26rem);margin-inline:auto}
  .enemy{grid-template-columns:1fr}
  .enemy-art{width:12rem}
  .ml-start{margin-left:0}
  .ml-lane{height:12rem}
  .thumbnails{grid-template-columns:repeat(3,1fr)}
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .layer,.hero-cast{translate:none}
  .hero-title{translate:-50% 0}
}