:root{font-family:Inter,ui-rounded,"Noto Sans",system-ui,sans-serif;color:#173f38;background:#c8e6d0;--deep:#1e6658;--paper:#f9fff3;--gold:#edb63f}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{background:radial-gradient(circle at 20% 10%,#fff9d8,transparent 38rem),linear-gradient(145deg,#eaf7df,#b6deca)}button,select{font:inherit}button{cursor:pointer}.screen[hidden]{display:none!important}.screen{width:min(100%,920px);margin:auto}.main{min-height:100svh;padding:max(16px,env(safe-area-inset-top)) 20px;display:grid;grid-template-rows:58px 1fr}.main-header,.scene-header{display:grid;grid-template-columns:112px minmax(0,1fr) 112px;align-items:center;text-align:center}.return,.scene-header>button{justify-self:start;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:14px;background:#f9fff0;color:#173f38;text-decoration:none;font-size:1.35rem}.main-header>strong{font-size:.76rem;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.locale{justify-self:end;text-align:left;font-size:.68rem;font-weight:850}.locale{display:grid}.locale select{max-width:112px;border:1px solid #a9cdb6;border-radius:9px;padding:5px;background:#fff}.hero{display:grid;grid-template-columns:minmax(260px,470px) 1fr;gap:clamp(28px,6vw,70px);align-items:center}.hero>img{width:100%;border-radius:32px;box-shadow:0 22px 60px #174b3e2b}.eyebrow{margin:0;color:#277663;font-size:.75rem;font-weight:900;letter-spacing:.14em}.hero h1{font-size:clamp(2.7rem,7vw,5rem);line-height:.94;letter-spacing:-.05em;margin:.15em 0}.hero p{line-height:1.55}.primary{border:0;border-radius:15px;padding:14px 24px;background:linear-gradient(135deg,#287b68,#155d52);color:#fff;font-weight:900;box-shadow:0 8px 20px #1c5b4a33}.hero details{margin-top:16px;border-top:1px solid #a6cbb4;padding-top:10px}.hero summary{font-weight:900}.canvas{height:calc(100svh - 56px);min-height:430px;background:linear-gradient(155deg,#fbfff4,#d5ecd8);overflow:hidden}.scene-header{height:76px;padding:10px 16px;background:#19584e;color:#fff}.scene-header small{font-size:.66rem;letter-spacing:.13em;opacity:.75}.scene-header h2{margin:2px 0 0;font-size:1.16rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-header>span{justify-self:end;font-size:.78rem;font-weight:850}.stage{display:grid;grid-template-rows:76px 1fr 66px}.stage-grid{overflow:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start}.stage-card{min-height:92px;border:2px solid transparent;border-radius:17px;padding:12px;background:#fafff5;color:#173f38;text-align:left;box-shadow:0 7px 18px #244f4218}.stage-card.selected{border-color:#277b68;background:#e7f7e8}.stage-card:disabled{opacity:.42}.stage-card strong,.stage-card span{display:block}.stage-card span{margin-top:8px;font-size:.75rem}.enter{justify-self:center;align-self:center;min-width:180px}.battle{display:grid;grid-template-rows:76px 1fr}.battle-content{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 52px 32px;gap:9px;place-items:center;padding:12px 16px}.board{--cols:6;width:min(90vw,calc(100svh - 260px),600px);display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:6px;padding:8px;border-radius:22px;background:#b8d6bd;box-shadow:0 14px 35px #1a4a3b27}.tile{aspect-ratio:1;border:0;border-radius:clamp(7px,2vw,14px);background:#fffdf1;color:#204a42;font-weight:950;font-size:clamp(1rem,5vw,2rem);box-shadow:inset 0 -3px 0 #bed1bc,0 3px 6px #204f4212}.tile.selected{background:#ffe18a;box-shadow:0 0 0 4px #fff,0 0 0 7px #e4a82d}.tile.empty{visibility:hidden;pointer-events:none}.tile.hint{animation:pulse .7s 3}.tile.bad{animation:shake .25s 2}.tools{display:flex;gap:7px;justify-content:center}.tools button,dialog button{min-height:44px;border:1px solid #a8c7b0;border-radius:12px;background:#fafff4;color:#173f38;padding:9px 12px;font-weight:850}.tools button:disabled{opacity:.4}#status{margin:0;text-align:center;font-size:.83rem;font-weight:850}dialog{width:min(430px,calc(100% - 28px));border:0;border-radius:25px;text-align:center;padding:28px;color:#173f38;background:#fbfff3;box-shadow:0 28px 80px #10372f77}dialog::backdrop{background:#0b2e29aa;backdrop-filter:blur(4px)}.result-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#efb943;color:#fff;font-size:2rem;font-weight:950}dialog h2{margin:.2rem 0}dialog>div:last-child{display:flex;justify-content:center;gap:9px;margin-top:18px}dialog .primary{background:#1c6b5c;color:#fff}@keyframes pulse{50%{transform:scale(.86);background:#ffe18a}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:680px){.main-header{grid-template-columns:70px minmax(0,1fr) 100px}.hero{grid-template-columns:1fr;text-align:center;gap:18px}.hero>img{width:min(70vw,320px);justify-self:center}.hero h1{font-size:clamp(2.5rem,13vw,4rem)}.stage-grid{grid-template-columns:repeat(3,1fr);padding:12px}.board{gap:5px;padding:6px}}@media(max-height:500px) and (orientation:landscape){.canvas{height:calc(100svh - 56px);min-height:0}.scene-header{height:58px;padding:5px 12px}.stage{grid-template-rows:58px 1fr 54px}.stage-grid{grid-template-columns:repeat(6,1fr);padding:8px}.stage-card{min-height:72px}.battle{grid-template-rows:58px 1fr}.battle-content{grid-template-columns:minmax(260px,330px) 230px;grid-template-rows:1fr 30px;justify-content:center;gap:8px 20px;padding:6px}.board{grid-column:1;grid-row:1/3;width:min(268px,calc(100svh - 70px))}.tools{grid-column:2;grid-row:1;display:grid;width:100%;align-self:center}#status{grid-column:2;grid-row:2}}
body #stage{grid-template-rows:76px minmax(0,1fr);background:linear-gradient(#153f37dd,#153f37dd),var(--wp-stage-art) center/cover}body #stageGrid{display:flex;align-items:center;gap:16px;padding-inline:calc(50% - 132px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y}body #stageGrid::-webkit-scrollbar{display:none}body #stageGrid .stage-card{width:264px;min-width:264px;height:190px;scroll-snap-align:center;border:2px solid #a8c7b0;border-radius:19px;padding:16px;background:linear-gradient(#fffb,#fff),#fff;color:#173f38;text-align:left;display:grid;align-content:end;gap:8px;box-shadow:0 12px 26px #10372f66}body #stageGrid .stage-card.selected,body #stageGrid .stage-card.centered{border-color:#fff0a0;background:#fafff5;box-shadow:0 0 0 3px #287b68,0 0 28px #fff0a0}body #stageGrid .stage-card.locked{filter:saturate(.35) brightness(.72)}.ad-reserve{width:min(100%,920px);height:56px;margin:auto;background:#17243a}@media(max-height:500px) and (orientation:landscape){body #stage{grid-template-rows:58px minmax(0,1fr)}}
.tile{border-radius:0;background-color:transparent;background-image:url("../../assets/animal-number-match-tile-v1.webp");background-position:center;background-repeat:no-repeat;background-size:100% 100%;box-shadow:none}.tile.selected{background-color:transparent;background-image:url("../../assets/animal-number-match-selected-v1.webp");box-shadow:none}.tile.hint{background-image:url("../../assets/animal-number-match-hint-v1.webp")}.tile.bad{background-image:url("../../assets/animal-number-match-bad-v1.webp")}.tile.empty{visibility:visible;background-image:url("../../assets/animal-number-match-socket-v1.webp");color:transparent;opacity:.72}@keyframes pulse{50%{transform:scale(.9);filter:drop-shadow(0 0 8px #ffe18a)}}
@media(max-height:500px) and (orientation:landscape){dialog[open]{top:calc((100svh - 56px)/2);bottom:auto;margin:0 auto;transform:translateY(-50%);max-height:calc(100svh - 72px);padding:10px 20px;overflow:auto}.result-mark{width:56px;height:56px;font-size:1.55rem}dialog .eyebrow{font-size:.65rem}dialog h2{font-size:1.2rem;line-height:1.15;margin:.08rem 0}dialog>p:not(.eyebrow){margin:.35rem 0}dialog>div:last-child{margin-top:8px}dialog button{min-height:40px;padding:6px 14px}}

/* Premium Number Grove interaction layer. Approved images remain the artwork;
   these rules own only layout, focus, and animation. */
.difficulty-pips{color:#e8b83f;letter-spacing:.18em;text-shadow:0 1px 2px #173f3877}.difficulty-pips::before{content:"◆◇◇◇◇"}.difficulty-pips[data-tier="2"]::before{content:"◆◆◇◇◇"}.difficulty-pips[data-tier="3"]::before{content:"◆◆◆◇◇"}.difficulty-pips[data-tier="4"]::before{content:"◆◆◆◆◇"}.difficulty-pips[data-tier="5"]::before{content:"◆◆◆◆◆"}
body #stage{grid-template-rows:76px minmax(0,1fr) 56px}.stage-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:5px 12px;background:#173f31e8;border-top:1px solid #8ec59c66;backdrop-filter:blur(10px)}.stage-tab{grid-column:2;min-height:44px;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{position:relative;isolation:isolate}
.battle::before{content:"";position:absolute;z-index:-2;inset:76px 0 0;background:linear-gradient(#eff9e7e8,#d8efdae8),url("../../assets/animal-number-match-cover-general-v3.webp") center 58%/cover no-repeat}
.battle::after{content:"";position:absolute;z-index:-1;inset:76px 0 0;background:radial-gradient(circle at 50% 48%,transparent 0 28%,#e2f4e1c7 72%)}
.battle-content{position:relative}
.battle-coach{position:absolute;top:10px;right:10px;width:clamp(64px,18vw,112px);height:auto;filter:drop-shadow(0 10px 12px #173f3855);animation:coach-float 3.2s ease-in-out infinite;pointer-events:none}
.board{position:relative;border:2px solid #f6d56c;background:linear-gradient(145deg,#376f57,#8ab686);box-shadow:inset 0 0 0 5px #d7ad4f88,0 16px 38px #173f3844;animation:board-arrive .45s cubic-bezier(.2,.85,.2,1)}
.tile{position:relative;isolation:isolate;transition:transform .16s ease,filter .16s ease,color .16s ease}
.tile.selected{z-index:2;background-image:url("../../assets/animal-number-match-tile-v1.webp");background-position:center;background-repeat:no-repeat;background-size:100% 100%;color:#fff;filter:drop-shadow(0 0 5px #ffe889) drop-shadow(0 0 10px #f4b638);transform:translateY(-3px) scale(1.06)}
.tile.selected::before{content:"";position:absolute;z-index:-1;inset:22%;border-radius:24%;background:linear-gradient(145deg,#2d8a70,#155c50);box-shadow:inset 0 0 0 2px #fff0a0}
.match-echo{position:absolute;z-index:4;display:grid;place-items:center;background:url("../../assets/animal-number-match-hint-v1.webp") center/100% 100% no-repeat;color:#fff;font-weight:950;font-size:clamp(1rem,5vw,2rem);text-shadow:0 2px 4px #16483f;pointer-events:none;animation:match-bloom .42s ease-out forwards}
.tools button,dialog button{box-shadow:0 5px 14px #173f3822;transition:transform .14s ease,box-shadow .14s ease}
.tools button:active,dialog button:active{transform:translateY(2px);box-shadow:0 2px 6px #173f3822}
#status{padding:5px 12px;border-radius:999px;background:#f9fff0d9;box-shadow:0 4px 12px #173f3818}
dialog{border:2px solid #f1ca5f;background:linear-gradient(155deg,#fffff7,#eef8df);animation:result-pop .36s cubic-bezier(.2,.9,.25,1.2)}
#result>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}dialog>div:last-child button{width:100%}
.leave-dialog{max-width:390px}.leave-dialog>div:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@keyframes match-bloom{0%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(1.3) rotate(4deg)}100%{opacity:0;transform:scale(.35) rotate(-8deg)}}
@keyframes board-arrive{from{transform:translateY(16px) scale(.97)}}
@keyframes coach-float{50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes result-pop{from{opacity:0;transform:scale(.88) translateY(16px)}}
@media(max-width:680px){.battle-coach{width:112px;top:8px;right:4px}}
@media(max-height:500px) and (orientation:landscape){body #stage{grid-template-rows:58px minmax(0,1fr) 48px}.stage-tabs{padding:2px 10px}.stage-tab{min-height:40px}.battle::before,.battle::after{inset-block-start:58px}.battle-coach{display:none}}
@media(prefers-reduced-motion:reduce){.battle-coach,.board,.match-echo,dialog{animation:none!important}.tile{transition:none}}
#tutorialOpen{width:100%;min-height:44px;border:1px solid #8fbda8;border-radius:14px;background:#f9fff3;color:#19584e;font-weight:900}