*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#121a10;color:#ddd;font-family:Arial,"Microsoft YaHei",sans-serif}
/* The lawn art sits behind the whole page, darkened, so the frames read as part of the game. */
body{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:34px 24px 24px;background:#121a10 url('assets/background.jpg') center/cover fixed}
body::before{content:'';position:fixed;inset:0;background:#07110a;opacity:.8;pointer-events:none}
main{position:relative;min-width:0}
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 14px;align-items:start}
main{width:min(1600px,100%)}
/* Title sign and podcast video sit in a left column; the lawn takes the remaining width on the right. */
.stage{grid-template-columns:320px minmax(0,1fr)}
.watch{order:-1}

/* Original dialog frame (3 × 3 stone pieces) and skull header, used for every panel on the page. */
.pvz-frame{position:relative;border:solid transparent;border-width:38px 46px 44px 42px;border-image:url('assets/dialog-frame.png') 97 120 114 107 fill stretch;color:#e6eccc}
.pvz-frame::before{content:'';position:absolute;left:50%;top:-60px;width:140px;height:48px;margin-left:-70px;background:url('assets/dialog-header.png') center/100% 100% no-repeat;pointer-events:none}

/* Original dialog button (left / middle / right strip), pressed state swaps the strip. */
.stone{color:#dcefb4;border:solid transparent;border-width:0 35px 0 36px;border-image:url('assets/button.png') 0 35 0 36 fill stretch;background:none;height:46px;padding:0 2px;font-weight:900;text-shadow:1px 2px #17260f;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:inherit}
.stone:active{border-image-source:url('assets/button-down.png');transform:translateY(1px)}
@media(hover:hover){.stone:hover{filter:brightness(1.12)}}
.stone:disabled{opacity:.65;cursor:wait}
button:focus-visible{outline:3px solid #ffdf58;outline-offset:2px}

.watch{position:sticky;top:12px;min-width:0;display:flex;flex-direction:column;gap:34px}
/* Chapter list under the player: plain rows on the stone interior, the playing chapter in gold. */
.chapters{padding:0}
.chapter-bar{display:none}
.chapter-list{max-height:calc(100vh - 560px);min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:#6f6a7c #1d1a22}
.chapter{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;border:0;background:transparent;color:#cfdcc0;font:13px/1.35 Arial,"Microsoft YaHei",sans-serif;padding:5px 6px;border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chapter .time{flex:0 0 3.8em;font:bold 12px Georgia,serif;color:#9fb08e}
.chapter .title{min-width:0}
@media(hover:hover){.chapter:hover{background:#ffffff14;color:#fff}}
.chapter.current{background:#3d3524;color:#fff3b0}
.chapter.current .time{color:#f0dfa6}
.watch-frame{padding:0}
.video-box{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#info{text-align:center;padding:2px 0 0}
#info h1{margin:4px 0 0;font:900 clamp(18px,1.6vw,22px)/1.3 Georgia,"Microsoft YaHei",serif;color:#f0dfa6;text-shadow:2px 3px #15220d}
#info h1 .sub{display:block;font-size:.8em;color:#e4e9de}
#info h1 .en{display:block;margin-top:5px;font-size:11px;font-weight:normal;letter-spacing:.4px;color:#9fb08e;text-shadow:none}

.game-wrap{position:relative;overflow:hidden;background:#344b29;border-radius:3px;box-shadow:0 15px 55px #0008;border:3px solid #0d120c;isolation:isolate}
.arena{position:relative;width:100%;aspect-ratio:3/2;touch-action:none}
canvas{display:block;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
#game{height:auto;aspect-ratio:3/2}
#held-item{position:absolute;inset:0;height:100%;z-index:7;pointer-events:none}
#hud{position:absolute;inset:0;z-index:2;pointer-events:none;touch-action:none}
#seed-bank{position:absolute;left:0;top:0;width:32.889%;height:14.5%;display:flex;padding:0;gap:1.69%;align-items:flex-start;background:#694623 url('assets/seed-bank.png') left top/100% 100% no-repeat;border-radius:0 0 6px 0;box-shadow:2px 3px 5px #0006;pointer-events:auto}
#sun-bank{position:relative;width:26.35%;height:100%;flex-shrink:0}
#sun-bank img{width:100%;height:100%;object-fit:fill;display:block}
#sun-total{position:absolute;bottom:6%;left:0;width:100%;text-align:center;font:bold clamp(13px,1.7vw,21px) Georgia,serif;color:#302611}
.seed{position:relative;width:16.89%;height:80.46%;margin-top:1.6%;flex-shrink:0;border:0;padding:0;background:transparent;overflow:hidden;align-self:flex-start;border-radius:2px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.seed img{width:100%;height:100%;object-fit:fill;display:block;-webkit-user-drag:none}
.seed.unaffordable img{filter:brightness(.52) saturate(.3)}
.seed.selected{outline:3px solid #fff45b;outline-offset:-3px;box-shadow:0 0 12px #fbec4a}
.seed .cost{position:absolute;bottom:4%;left:0;right:0;text-align:center;color:#262a12;font:bold clamp(11px,1.4vw,16px) Georgia,serif;pointer-events:none}
.seed.unaffordable .cost{color:#55564e}
.seed .cooldown{position:absolute;top:0;left:0;right:0;background:#282b32b3;pointer-events:none}
.seed:disabled{cursor:default}
#shovel{position:absolute;left:34%;top:0;width:7.778%;height:12%;border:0;padding:0;background:none;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#shovel>img:first-child{width:100%;height:100%;display:block}
#shovel .tool{position:absolute;left:0;top:23%;height:48%;width:100%;object-fit:contain;-webkit-user-drag:none}
#shovel.selected{filter:drop-shadow(0 0 6px #ffee44)}

/* Endless bowling: the seed bank gives way to the original conveyor belt, plus a score strip. */
.game-wrap.bowling #seed-bank,.game-wrap.bowling #shovel,.game-wrap.bowling #meter{display:none}
#conveyor{position:absolute;left:0;top:0;width:57.333%;height:14.333%;pointer-events:auto;background:url('assets/conveyor-backdrop.png') 0 0/100% 100% no-repeat}
#conveyor[hidden]{display:none}
.belt-strip{position:absolute;left:1.357%;top:73.26%;width:97.287%;height:18.6%;background:url('assets/conveyor-belt.png') 0 0/100% 600% no-repeat;animation:belt-cels .24s steps(6,end) infinite}
@keyframes belt-cels{to{background-position:0 120%}}
#belt-track{position:absolute;left:1.357%;top:0;width:97.287%;height:100%;overflow:hidden}
.packet{position:absolute;top:9.3%;width:9.96%;height:81.4%;border:0;padding:0;background:transparent;border-radius:2px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.packet img{width:100%;height:100%;object-fit:fill;display:block;-webkit-user-drag:none}
.packet.selected{outline:3px solid #fff45b;outline-offset:-3px;box-shadow:0 0 12px #fbec4a}
.packet:disabled{cursor:default}
#score-panel{pointer-events:none;position:absolute;left:58.5%;top:0;width:28%;height:6.5%;display:flex;align-items:center;justify-content:center;gap:1.2em;font:bold clamp(11px,1.5vw,18px) Georgia,serif;color:#f0dfa6;text-shadow:1px 2px #1a2618;background:#1b2618cc;border-radius:0 0 6px 6px}
#score-panel strong{color:#fff3b0}
#score-panel[hidden]{display:none}
#menu-button{pointer-events:auto;position:absolute;right:.7%;top:0;width:12%;height:6.5%;font-size:clamp(12px,1.6vw,19px);border-width:0 22px 0 23px;border-image-width:0 22px 0 23px}

#meter{position:absolute;right:2%;bottom:3.6%;width:17.5%;height:4%;pointer-events:none;z-index:1}
#meter>img:first-child{width:100%;height:100%;position:absolute;inset:0}
#meter-fill{position:absolute;right:0;top:0;height:100%;width:0;overflow:hidden}
#meter-fill img{position:absolute;right:0;height:100%;width:192px;max-width:none}
#meter-head{position:absolute;width:19%;height:auto;right:-6%;top:-47%}
#meter .flag{position:absolute;left:3%;bottom:50%;width:13%;height:auto}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:34px 12px 12px;background:#06120075;backdrop-filter:blur(1px);z-index:10;overflow:hidden}
.overlay[hidden]{display:none}
.panel{width:58%;max-height:100%;padding:0 0 2%;text-align:center;overscroll-behavior:contain;touch-action:pan-y}
.panel h2{font-family:Georgia,"Microsoft YaHei",serif;font-size:clamp(18px,3vw,30px);color:#f0dfa6;text-shadow:2px 3px #15220d;margin:6px 0 4%;line-height:1.3;overflow-wrap:anywhere}
.plant-line{height:95px;display:flex;justify-content:center;align-items:flex-end;gap:22px;margin-bottom:15px}
.plant-line img{max-width:20%;height:auto;max-height:100%}
.large{padding:0 10px;font-size:clamp(13px,1.8vw,20px);min-width:78%;margin-top:8px;white-space:nowrap}
#menu-settings{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Original options-menu slider art for the game volume. */
.volume{display:flex;align-items:center;justify-content:center;gap:10px;width:78%;white-space:nowrap;font:bold clamp(13px,1.5vw,17px) Georgia,"Microsoft YaHei",serif;color:#dcefb4;text-shadow:1px 2px #17260f}
.volume strong{min-width:3.2em;text-align:right;color:#fff3b0}
.volume input{flex:1 1 auto;min-width:0;height:29px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.volume input::-webkit-slider-runnable-track{height:10px;background:url('assets/slider-slot.png') center/100% 100% no-repeat;border:0}
.volume input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:29px;margin-top:-9.5px;background:url('assets/slider-knob.png') center/100% 100% no-repeat;border:0}
.volume input::-moz-range-track{height:10px;background:url('assets/slider-slot.png') center/100% 100% no-repeat;border:0}
.volume input::-moz-range-thumb{width:22px;height:29px;background:url('assets/slider-knob.png') center/100% 100% no-repeat;border:0;border-radius:0}
.volume input:focus-visible{outline:3px solid #ffdf58;outline-offset:2px}
#menu-settings[hidden]{display:none}
#extra-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px}
#extra-buttons:empty,#dialog-body:empty{display:none}
.menu-action{width:78%;min-width:78%;margin-top:0}
#menu-settings .large{margin-top:0}
.result-won{width:85px;height:auto}
.result-lost{width:65%;max-height:200px;object-fit:contain}
.summary{margin:8px 0 0;font:bold clamp(14px,2vw,20px) Georgia,serif;color:#f0dfa6;line-height:1.5}
.level-hint{margin:0 0 6px;font-size:clamp(12px,1.4vw,15px);color:#c9d6bd;line-height:1.5}
#notice{position:absolute;left:8%;right:8%;top:36%;color:#d50e08;font-size:clamp(20px,4vw,44px);font-weight:1000;text-align:center;text-shadow:2px 2px #ffe59c,-2px -2px #1b0906,3px 4px #150700;pointer-events:none;white-space:pre-line;z-index:5}
#error{position:absolute;inset:20% 5%;background:#251815;border:2px solid #a7634b;padding:20px;z-index:20;overflow:auto}
.nut-portrait{position:relative;display:block;flex:0 1 74px;width:74px;max-width:22%;aspect-ratio:74/82;overflow:hidden;transform-origin:50% 98%;animation:justin-nut-intro-idle 1.7s cubic-bezier(.44,0,.56,1) infinite}
.plant-line .nut-portrait img{position:absolute;width:167.23%;height:121.9%;left:-34.59%;top:-12.82%;max-width:none;max-height:none}
@keyframes justin-nut-intro-idle{
  0%,100%{transform:rotate(-1.4deg) scale(1,1)}
  22%{transform:rotate(-.2deg) scale(1.026,.955)}
  38%{transform:rotate(1.65deg) scale(.992,1.012)}
  50%{transform:rotate(1.4deg) scale(1,1)}
  72%{transform:rotate(.2deg) scale(1.022,.96)}
  88%{transform:rotate(-1.65deg) scale(.994,1.01)}
}
@media(max-height:700px) and (min-width:800px) and (pointer:fine){
  main{width:min(1600px,100%,calc((100svh - 65px)*1.5 + 334px))}
  body{padding:28px 12px 12px}
}
/* On phones, controls keep their touch size rather than shrinking with the lawn. */
@media(max-width:760px),(pointer:coarse){
  body{padding:max(26px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background-attachment:scroll}
  .stage{grid-template-columns:minmax(0,1fr);gap:26px}
  .watch{display:contents}
  .watch-frame,#info,.chapters{order:-1}
  /* Phones: one row with the playing chapter and prev / next; tapping the row opens the full list. */
  .chapter-bar{display:flex;align-items:center;gap:6px}
  .chapter-step{flex:0 0 40px;width:40px;height:36px;padding:0;font-size:12px;border-width:0 12px 0 12px;border-image-width:0 12px 0 12px}
  .chapter-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 8px;border:0;border-radius:3px;background:#ffffff12;color:#fff3b0;font:13px/1.3 Arial,"Microsoft YaHei",sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .chapter-toggle .time{flex:0 0 auto;font:bold 12px Georgia,serif;color:#f0dfa6}
  .chapter-toggle .title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chapter-toggle .arrow{flex:0 0 auto;color:#9fb08e}
  #chapters.open .chapter-toggle .arrow{transform:rotate(180deg)}
  .chapter-list{display:none;max-height:42vh;min-height:0;margin-top:8px}
  #chapters.open .chapter-list{display:flex}
  #info h1{margin:0;font-size:15px}
  #info h1 .sub{display:inline;margin-left:6px}
  #info h1 .en{display:none}
  .pvz-frame{border-width:20px 24px 23px 22px}
  .pvz-frame::before{width:84px;height:29px;margin-left:-42px;top:-38px}
  .game-wrap{border-width:2px}
  #hud{position:relative;inset:auto;display:flex;align-items:center;gap:6px;height:76px;padding:6px;background:#3e2b1e;border-bottom:2px solid #25190f}
  #seed-bank{position:relative;left:auto;top:auto;width:188px;height:62px;flex:0 0 188px;gap:4px;box-shadow:none;border-radius:3px}
  #sun-bank{width:44px;height:62px;flex:0 0 44px}
  #sun-total{left:2px;bottom:1px;width:40px;height:20px;line-height:20px;font-size:17px;background:#e7d9a8;border-radius:2px}
  .seed{width:44px;height:62px;flex:0 0 44px;margin:0}
  .seed .cost{font-size:14px;bottom:3%}
  #shovel{position:relative;left:auto;top:auto;width:44px;height:44px;flex:0 0 44px}
  #menu-button{position:relative;right:auto;top:auto;margin-left:auto;width:74px;height:44px;flex:0 0 74px;font-size:14px;border-width:0 18px 0 19px;border-image-width:0 18px 0 19px;white-space:nowrap}
  .game-wrap.bowling #hud{flex-wrap:wrap;height:auto;row-gap:6px}
  #conveyor{position:relative;left:auto;top:auto;width:100%;flex:1 1 100%;height:auto;aspect-ratio:516/86;border-radius:3px}
  #score-panel{position:relative;left:auto;top:auto;width:auto;height:36px;flex:1 1 auto;min-width:0;gap:.7em;padding:0 6px;font-size:12px;border-radius:3px}
  .game-wrap.bowling #menu-button{height:36px}
  .arena{aspect-ratio:900/535;overflow:hidden}
  #game,#held-item{position:absolute;inset:auto 0 0;width:100%;height:auto;aspect-ratio:3/2}
  .overlay{padding:12px}
  .panel{width:min(420px,96%);padding:0 0 10px;overflow:auto}
  .panel::before{display:none}
  .panel h2{font-size:clamp(18px,4.5vw,23px);margin:0 0 8px}
  .plant-line{height:64px;gap:18px;margin:8px 0 14px}
  .large{min-height:44px;height:44px;min-width:80%;padding:0 14px;font-size:16px;margin-top:0}
  .menu-action{width:80%;min-width:80%}
  #menu-settings,#extra-buttons{margin-top:10px}
  .volume{width:80%;font-size:13px}
  #extra-buttons{gap:10px}
  .level-hint{display:none}
  .result-won{width:60px}
  .result-lost{width:auto;max-width:55%;max-height:84px}
  .game-wrap.bowling .result-lost{display:none}
  .summary{margin-top:4px;font-size:13px;line-height:1.4}
  #notice{font-size:clamp(20px,5.2vw,32px);left:4%;right:4%}
}
@media(max-width:360px){
  body{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  #hud{padding:6px 4px;gap:4px}
  #menu-button{width:66px;flex-basis:66px}
}
@media(orientation:landscape) and (max-height:500px){
  body{padding:max(22px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  main{width:100%}
  .panel{padding-bottom:8px}
  .panel h2{font-size:20px;margin-bottom:10px}
  .plant-line{height:58px;margin:6px 0 10px}
  .level-hint{display:none}
}
@supports not(aspect-ratio:1/1){
  .arena{height:0;padding-bottom:66.6667%}
  #game,#held-item{position:absolute;inset:auto 0 0;height:auto}
  .video-box{height:0;padding-bottom:56.25%}
  @media(max-width:760px),(pointer:coarse){.arena{padding-bottom:59.4444%}#conveyor{height:58px}}
}