:root{font-family:ui-rounded,"Nunito",system-ui,sans-serif;color:#f7fff5;background:#063f3c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(#064741cc,#052e2dcb),url('../../assets/animal-bamboo-pipes-background.webp') center/cover fixed}button,select{font:inherit}button{border:0;border-radius:14px;padding:.75rem 1rem;font-weight:800;color:#073c38;background:#d9f4cf;cursor:pointer}.primary{background:#f8bf4b;color:#3c2505;box-shadow:0 4px 0 #9a641c}.screen{min-height:100vh;max-width:920px;margin:auto;padding:clamp(16px,4vw,40px);display:grid;align-content:center;gap:22px}.main{position:relative}.return,.locale{position:absolute;top:16px}.return{left:16px}.locale{right:16px;font-size:.78rem;font-weight:700}.locale select{margin-left:5px;border-radius:8px;padding:4px}.hero{display:grid;grid-template-columns:minmax(200px,1fr) minmax(230px,1fr);align-items:center;gap:clamp(18px,5vw,58px)}.hero img{width:100%;border-radius:30px;box-shadow:0 16px 42px #001f1c}.eyebrow,header small{letter-spacing:.14em;font-weight:900;color:#a6e6c3;font-size:.72rem}h1{font-size:clamp(2.1rem,6vw,4.4rem);line-height:1.02;margin:.2em 0}h2{margin:.1em 0}.hero p:not(.eyebrow){font-size:1.1rem;line-height:1.6}header{display:flex;align-items:center;justify-content:space-between;gap:15px}.back{font-size:1.3rem;padding:.45rem .75rem}.rail{display:flex;gap:14px;overflow:auto;padding:12px 8px;scroll-snap-type:x mandatory}.stage-card{min-width:176px;min-height:160px;scroll-snap-align:center;text-align:left;background:linear-gradient(140deg,#d3f3d4,#86cfa8);color:#073c38;padding:18px;border:3px solid transparent}.stage-card.selected{border-color:#f9c44d;box-shadow:0 0 0 4px #f9c44d55}.stage-card.locked{filter:saturate(.2);opacity:.6}.battle{align-content:start}.battle-panel{display:grid;grid-template-columns:150px minmax(260px,520px);gap:22px;justify-content:center}.guide{background:#063831d9;border-radius:18px;padding:12px;text-align:center}.guide img{width:100%;max-height:170px;object-fit:contain}.guide p{font-size:.9rem}.board{display:grid;grid-template-columns:repeat(5,1fr);aspect-ratio:1;border:8px solid #a4d69b;border-radius:20px;overflow:hidden;box-shadow:0 8px 25px #001b19}.pipe{position:relative;background:#2f7c61 url('../../assets/animal-bamboo-pipes-atlas.webp') center/400% 200%;border:1px solid #b7e0ae;min-width:0;transition:transform .16s ease}.pipe::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#67e1de55 0 24%,transparent 26%);opacity:0}.pipe.wet::after{opacity:1;animation:pulse 1s infinite}.pipe[data-shape="s"]{background-position:0 0}.pipe[data-shape="e"]{background-position:33.333% 0}.pipe[data-shape="t"]{background-position:66.666% 0}.pipe[data-shape="x"]{background-position:100% 0}.pipe[data-shape="source"]{background-position:0 100%}.pipe[data-shape="goal"]{background-position:33.333% 100%}.tools{grid-column:2;display:flex;justify-content:center;gap:10px}.tools button{background:#d0eee1;color:#07433c}dialog{border:0;border-radius:24px;max-width:min(430px,90vw);text-align:center;color:#073c38;background:#edfae7;padding:26px}dialog img{height:135px;display:block;margin:auto}dialog::backdrop{background:#001d1ab8}dialog div{display:flex;gap:10px;justify-content:center}@keyframes pulse{50%{filter:brightness(1.35)}}@media(max-width:620px){.hero{grid-template-columns:1fr;text-align:center;padding-top:42px}.hero img{max-width:360px;margin:auto}.battle-panel{grid-template-columns:1fr}.guide{display:flex;align-items:center;gap:10px}.guide img{width:90px}.tools{grid-column:auto}.locale{top:18px}.return{top:18px}}@media(max-height:500px) and (orientation:landscape){.screen{padding:10px;gap:10px}.guide{display:none}.battle-panel{grid-template-columns:minmax(280px,520px)}.tools{grid-column:auto}.rail{padding:4px}.stage-card{min-height:110px}}

/* Canonical Main header and guide ownership. */
.main{position:static;grid-template-rows:58px 1fr;align-content:stretch}
.main-header{display:grid;grid-template-columns:120px minmax(0,1fr) 120px;align-items:center;text-align:center}
.main-header>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main .return,.main .locale{position:static;top:auto;left:auto;right:auto}
.main .return{justify-self:start;width:46px;height:46px;display:grid;place-items:center;color:#073c38;text-decoration:none;background:#d9f4cf;border-radius:14px}
.main .locale{justify-self:end}
.main .wp-shell-language-row>.locale{display:grid;align-items:center;height:44px}
.hero details{margin-top:16px;border-top:1px solid #8ec6ae;padding-top:10px}
.hero summary{font-weight:900;cursor:pointer}
.stage,.battle{height:calc(100svh - 56px);min-height:0}
.ad-reserve{width:min(100%,920px);height:56px;margin:auto;background:#052e2d}
@media(max-width:620px){
  .main-header{grid-template-columns:70px minmax(0,1fr) 105px}
  .hero{padding-top:0}
  .hero img{max-width:330px}
}

/* Keep the production atlas visible. Water is a narrow current inside the
   illustrated bamboo, never a second pipe or a laser laid over the tile. */
.pipe .flow{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.pipe .flow path{fill:none;stroke-linecap:round}
.pipe .flow-channel path{stroke:#38d6cf;stroke-width:5;opacity:.42;filter:drop-shadow(0 0 1.5px #0a8d8b)}
.pipe .flow-current path{stroke:#c7fffa;stroke-width:2.4;stroke-dasharray:.08 .22;stroke-dashoffset:1;filter:drop-shadow(0 0 1px #35ded8);animation:waterTravel 1.15s linear infinite}
.pipe .flow-source .flow-current path{stroke:#efffff}
.pipe .flow-goal .flow-current path{stroke:#fff1a8;animation-duration:.72s}
.pipe.wet::after{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#b2fff677 0 18%,transparent 68%);opacity:.55;z-index:3;animation:pulse 1s infinite;pointer-events:none}
@keyframes waterTravel{to{stroke-dashoffset:0}}

/* Each source atlas cell contains presentation padding. Zoom every crop around
   its exact cell centre so pipe mouths reach neighbouring tile boundaries
   without moving the shared 50% junction point. */
.pipe{--atlas-x:50%;--atlas-y:50%;border:0;border-radius:0;background:#2f7c61;overflow:hidden;isolation:isolate}
.pipe::before{content:"";position:absolute;z-index:0;inset:-2px;background:url('../../assets/animal-bamboo-pipes-atlas.webp') var(--atlas-x) var(--atlas-y)/700% 350% no-repeat;transform:rotate(var(--pipe-rotation));transition:transform .16s ease;pointer-events:none}
.pipe .flow{transform:rotate(var(--pipe-rotation));transform-origin:center}
.pipe[data-shape="s"]{--atlas-x:8.07%;--atlas-y:15%}
.pipe[data-shape="e"]{--atlas-x:32.29%;--atlas-y:16.4%}
.pipe[data-shape="t"]{--atlas-x:63.67%;--atlas-y:16.9%}
.pipe[data-shape="x"]{--atlas-x:92.55%;--atlas-y:17%}
.pipe[data-shape="source"]{--atlas-x:7.8%;--atlas-y:85%}
.pipe[data-shape="goal"]{--atlas-x:35.42%;--atlas-y:85%}
.pipe.target{cursor:default}
.pipe.target::before{inset:-1px;background:url('../../assets/animal-bamboo-pipes-goal-v2.png') center/cover no-repeat;transform:none}
.battle.celebrating .pipe{pointer-events:none}
.board.celebrating{animation:restoredBoardGlow .9s ease-out}
.board.celebrating .pipe.wet::after{opacity:1;animation:celebrationCurrent .46s ease-in-out infinite alternate}
.board.celebrating .pipe.target{z-index:4;overflow:visible}
.board.celebrating .pipe.target::before{animation:lotusBloom .9s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 0 12px #fff5a8) drop-shadow(0 0 22px #73ffd0)}
.board.celebrating .pipe.target::after{inset:-18%;background:radial-gradient(circle,#fffbd6dd 0 14%,#ffe56f88 28%,#62f5ca44 48%,transparent 70%);opacity:1;animation:lotusHalo .9s ease-out both}
@keyframes restoredBoardGlow{45%{box-shadow:0 0 18px #8affd2,0 0 42px #fff0a866}100%{box-shadow:0 8px 25px #001b19}}
@keyframes celebrationCurrent{to{filter:brightness(1.8);transform:scale(1.24)}}
@keyframes lotusBloom{0%{transform:scale(.88);filter:brightness(1)}45%{transform:scale(1.15);filter:brightness(1.75) drop-shadow(0 0 16px #fff5a8) drop-shadow(0 0 28px #73ffd0)}100%{transform:scale(1);filter:brightness(1.25) drop-shadow(0 0 10px #fff5a8)}}
@keyframes lotusHalo{0%{opacity:0;transform:scale(.55)}45%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.65)}}
@media(prefers-reduced-motion:reduce){.board.celebrating,.board.celebrating .pipe.wet::after,.board.celebrating .pipe.target::before,.board.celebrating .pipe.target::after{animation:none}.board.celebrating .pipe.target::before{filter:brightness(1.5) drop-shadow(0 0 16px #fff5a8) drop-shadow(0 0 24px #73ffd0)}}

/* Canonical Main → Stage → Battle ownership. */
.main-group{max-width:920px;margin:0 auto}
.main-group[hidden],.public-guide[hidden]{display:none!important}
.main{min-height:100svh;padding:clamp(12px,3vw,32px);gap:12px}
.main-header{grid-template-columns:72px minmax(0,1fr) minmax(104px,132px)}
.main .return{width:58px!important;height:48px!important;min-height:48px!important;max-height:48px!important;grid-template-columns:16px 28px!important;gap:4px!important;padding:4px!important}
.main .return img{width:28px;height:28px;object-fit:contain}
.hero{min-height:0;gap:clamp(14px,4vw,42px)}
.hero-copy{min-width:0}
.main-progress{display:block;width:max-content;max-width:100%;min-height:38px;margin:10px 0;padding:8px 12px;border-radius:999px;background:#063831d9;color:#d9f4cf;white-space:nowrap}
.main #start{display:block;width:100%;min-height:52px}
.public-guide{margin:0 12px 36px;padding:clamp(18px,4vw,34px);border:1px solid #75bd9c;border-radius:24px;background:#063831e8;line-height:1.6}
.public-guide h2{font-size:clamp(1.45rem,4vw,2rem)}

.stage,.battle{box-sizing:border-box;height:calc(100svh - 56px);min-height:0!important;max-width:920px;padding:12px;align-content:stretch;overflow:hidden}
.stage{grid-template-rows:64px minmax(198px,1fr) 56px;gap:10px}
.stage header,.battle header{min-width:0}
.stage header>div,.battle header>div{min-width:0}
.stage header h2,.battle header h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage .rail{width:100%;height:100%;padding-block:4px!important}
.stage-card{padding:18px;border:3px solid transparent}
.stage-card.selected,.stage-card[aria-current="true"]{border-color:#f9c44d!important;box-shadow:0 0 0 4px #f9c44d55,0 0 26px #f9c44daa!important}
.ad-reserve{width:min(100%,920px);max-width:920px;height:56px;margin:0 auto;background:#052e2d;pointer-events:none}
.stage-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:center;height:56px;padding:5px 12px;border-top:1px solid #8ec59c66;background:#173f31e8;backdrop-filter:blur(10px)}
.stage-tabs>*{min-width:0}
.stage-tab{grid-column:2;min-height:44px;padding:8px 12px;border:1px solid #f8dc72;border-radius:13px;background:linear-gradient(180deg,#f9dc72,#e7ad36);color:#23422f;font-weight:950;box-shadow:0 5px 14px #102b2166}

.battle{grid-template-rows:68px minmax(0,1fr);gap:8px}
.battle-panel{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) 52px;gap:8px;justify-items:center;align-items:center}
.battle-objective{width:min(100%,620px);height:42px;margin:0;padding:10px 14px;overflow:hidden;border:1px solid #75bd9c;border-radius:12px;background:#063831e8;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.battle .board{grid-column:1;grid-row:2;width:min(100%,520px);height:auto;max-height:100%;align-self:center}
.battle .tools{grid-column:1;grid-row:3;width:min(100%,520px);height:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.battle .tools button{min-width:0;height:48px;padding:8px}

.battle.result-open>header,.battle.result-open>.battle-panel{visibility:hidden;pointer-events:none}
.battle.leave-open>header,.battle.leave-open>.battle-panel{visibility:hidden;pointer-events:none}
.leave-panel{position:absolute;inset:0;z-index:21;box-sizing:border-box;display:grid;place-content:center;width:100%;height:100%;padding:clamp(20px,5vw,48px);background:#063831f2;color:#f4fff1;text-align:center}
.leave-panel[hidden]{display:none!important}
.leave-panel h2,.leave-panel p{width:min(100%,560px);margin:0 auto 14px}
.leave-panel p{line-height:1.55}
.leave-panel>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,520px);margin:8px auto 0}
.leave-panel button{min-width:0;min-height:48px}
#result{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(16px,4vw,34px);border:0;border-radius:0;background:linear-gradient(#edfae7f7,#d7f4d8f7);overflow:auto;place-content:center;text-align:center;color:#073c38;z-index:20}
#result[hidden]{display:none!important;pointer-events:none!important}
#result:not([hidden]){display:grid;top:0!important;right:0!important;bottom:auto!important;left:0!important;transform:none!important}
#result img{height:110px}
#result .eyebrow{color:#245f4b}
#result>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,560px);margin:12px auto 0}
#result button{min-height:48px;min-width:0}

@media(max-width:620px){
  .main{padding:10px 12px}
  .main-header{grid-template-columns:62px minmax(0,1fr) 100px}
  .main-header>strong{font-size:.86rem}
  .main .locale{font-size:0}
  .main .locale select{width:96px;margin:0;font-size:.72rem}
  .hero{grid-template-columns:1fr;gap:10px;text-align:center}
  .hero img{width:min(100%,190px);max-width:190px;border-radius:20px}
  .hero .eyebrow{margin:0}
  .hero h1{font-size:1.72rem;margin:.12em 0}
  .hero p:not(.eyebrow){margin:6px 0;font-size:.96rem;line-height:1.35}
  .main-progress{margin:8px auto}
  .stage,.battle{padding:8px}
  .stage{grid-template-rows:58px minmax(198px,1fr) 56px}
  .battle{grid-template-rows:60px minmax(0,1fr)}
  .battle-panel{grid-template-rows:38px minmax(0,1fr) 48px;gap:6px}
  .battle-objective{height:38px;padding:8px 10px;font-size:.84rem}
  .battle .tools{height:48px;gap:6px}
  .battle .tools button{height:44px}
  #result>div{grid-template-columns:1fr;gap:8px}
  .leave-panel>div{grid-template-columns:1fr}
}

@media(max-height:500px) and (orientation:landscape){
  .stage{grid-template-rows:58px minmax(0,1fr) 48px}
  .stage-tabs{height:48px;padding:2px 10px}
  .stage-tab{min-height:40px}
  .battle-objective{height:24px;padding:3px 8px;font-size:.7rem}
  #result:not([hidden]){top:0!important}
  #result{place-content:start center;padding:10px}
  #result img{height:70px}
  #result>div{grid-template-columns:repeat(3,minmax(0,1fr));position:sticky;bottom:0}
}

@media (min-width:700px) {
  .main .hero{grid-template-columns:420px minmax(0,1fr)}
  .main .hero>img{width:420px;height:420px;aspect-ratio:1;object-fit:cover;object-position:center}
}
@media (max-width:699px) {
  .main{grid-template-rows:58px auto;align-content:start}
  .main .hero{align-content:start}
  .main .hero>img{width:min(100%,342px);max-width:none;height:auto;aspect-ratio:1;object-fit:cover;object-position:center}
}