*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{display:grid;place-items:center;background:#286b2e url('assets/grass.png') center/cover no-repeat;font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;font-weight:900;touch-action:none}
body:before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 15%,#102f2099 100%);pointer-events:none}
button{font:inherit;cursor:pointer;touch-action:manipulation;color:white;border:0;user-select:none}
button:focus-visible{outline:3px solid #fff;outline-offset:-3px}
button:active{filter:brightness(.93);transform:translateY(2px)}
button:disabled{cursor:default;opacity:.42}
#game{position:relative;width:min(100vw,44.230769dvh);height:min(100dvh,226.086956vw);aspect-ratio:368/832;overflow:hidden;background:#419b3a;box-shadow:0 0 90px #0b352666;isolation:isolate;container-type:size}

/* Interaction safeguards: suppress long-press selection/callouts and browser context UI in the game area. */
#game,#game *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#game,#board,#effects{touch-action:none}
canvas,#ui{position:absolute;width:100%;height:100%;inset:0}
#ui{pointer-events:none}
header{position:absolute;top:4.55%;left:10%;width:80%;height:5.7%;filter:drop-shadow(0 3px 0 #845d28);pointer-events:none}
#level-label{position:absolute;top:0;left:25%;width:50%;height:45%;text-align:center;background:#f6e5b6;color:#965620;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);font-size:3.8cqw;padding-top:1px;letter-spacing:-.3px}
#meter{position:absolute;top:40%;width:100%;height:46%;background:#98774e;border:3px solid #f3e0ab;box-shadow:0 0 0 2px #b39351}
#fill{height:100%;width:0;background:linear-gradient(#fff67c 0 28%,#ffd50d 30% 70%,#ffbd00 75%);transition:width .23s}
#meter i{position:absolute;left:34%;top:30%;width:5px;height:5px;background:#e8d6a3;border-radius:2px}
#meter i+i{left:67%}
#meter-head{position:absolute;left:-7%;top:-95%;width:14%;height:265%;background:center/contain no-repeat}
#meter-fruit{position:absolute;right:-7%;top:-90%;width:16%;height:260%;background:center/contain no-repeat}
footer{position:absolute;bottom:1%;left:3%;width:94%;height:8.2%;display:flex;justify-content:space-between;align-items:center;gap:2%;pointer-events:auto}
.unlock{position:relative;width:19%;height:100%;background:linear-gradient(145deg,#fff5ce,#e8cc86);clip-path:polygon(25% 0,75% 0,100% 45%,84% 81%,73% 88%,73% 100%,23% 100%,23% 88%,15% 81%,0 45%);box-shadow:inset 0 0 0 3px #d99735}
.lock{display:block;position:absolute;inset:7% 15% 25%;background:center/contain no-repeat}
.unlock.locked .lock{filter:brightness(.35) saturate(.5);opacity:.4}
.unlock.locked:after{content:'?';position:absolute;inset:17% 0 30%;font-size:7cqw;color:#ffd12d;text-shadow:0 2px #bc7e15}
.unlock small{position:absolute;bottom:3%;left:19%;width:62%;background:#3d66a4;border:2px solid #dae8ff;font-size:2.45cqw;line-height:1.15;white-space:nowrap}
#settings{position:relative;z-index:3;pointer-events:auto;width:12%;height:61%;padding:2.4cqw;background:#a58457;clip-path:polygon(20% 0,80% 0,100% 35%,100% 65%,80% 100%,20% 100%,0 65%,0 35%)}
#settings svg{width:100%;height:100%;fill:#fff}#settings circle{fill:#a58457}
#toast{position:absolute;top:11%;left:5%;width:90%;text-align:center;color:#fff9d9;text-shadow:0 2px #356323;font-size:4cqw;opacity:0;transition:opacity .2s}#toast.show{opacity:1}
#tutorial{position:absolute;inset:0;background:#001d06aa;pointer-events:auto;display:flex;align-items:center;flex-direction:column;padding-top:29%}
.instruction{border:5px solid #39c2f5;background:#fff;color:#24618b;box-shadow:0 4px #0b647b;padding:11px 8px;font-size:3.65cqw;text-align:center;line-height:1.5;max-width:86%;transform:rotate(-1deg)}
em{font-style:normal;color:#ee626d}
#tutorial-hand{position:absolute;top:66%;left:45%;width:12%;height:9%;object-fit:contain;animation:swipe 1.6s infinite}
#tutorial p{position:absolute;bottom:19%;font-size:3.3cqw;color:white;text-shadow:0 2px #203f1f;margin:8px}
#begin{position:absolute;bottom:13%;background:none;padding:10px 20px;font-size:4.3cqw;text-shadow:0 3px #4c5943}
#overlay{position:absolute;inset:0;background:#061304cc;display:flex;align-items:center;justify-content:center;z-index:10}
[hidden]{display:none!important}
.panel{width:92%;display:flex;flex-direction:column;align-items:center;text-align:center;max-height:96%}
.panel h1{font-size:10.5cqw;color:white;text-shadow:3px 5px #a32a1b,-2px -1px #ad3024;margin:0 0 5cqw;transform:rotate(-3deg);letter-spacing:-1px}
.panel p{color:#fff8d5;font-size:4.15cqw;max-width:88%;margin:0 0 5cqw;line-height:1.4}
.panel button{width:76%;padding:3.3cqw 8px;margin:1.6cqw 0;font-size:4.8cqw;border-radius:8px;border-bottom:5px solid #3d9000;background:linear-gradient(#8bea05,#55c501);text-shadow:0 2px #3b9200;flex-shrink:0}
.panel .secondary{background:linear-gradient(#f8e9be,#e5cc94);color:#876130;border-color:#b59359;text-shadow:none;font-size:4cqw;padding:2.9cqw 8px}
#reward{margin:0 0 5cqw;position:relative;width:42cqw;height:34cqw;display:grid;place-items:center;filter:drop-shadow(0 0 20px #ffd82b66)}
#reward img{width:100%;height:100%;object-fit:contain;animation:reward-pop .6s ease-out both}
#reward b{position:absolute;bottom:-4%;right:7%;font-size:9cqw;color:white;text-shadow:2px 3px #976814}
#new-item{position:relative;width:82%;margin:1cqw 0 5cqw;padding:4cqw 3cqw;background:linear-gradient(#ffeeba,#edc475);border:3px solid #bb832c;border-radius:14px;box-shadow:0 5px #8a582b;animation:reward-pop .45s ease-out both}
.new-item-label{position:absolute;top:-3cqw;left:21%;width:58%;background:#ffcf35;color:#8f561c;padding:1cqw;font-size:3.8cqw;clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}
.item-burst{position:relative;display:grid;place-items:center;margin:1cqw auto;width:27cqw;height:25cqw;background:radial-gradient(#fff 0%,#fff09050 48%,transparent 70%)}
.item-burst img{position:relative;width:85%;height:85%;object-fit:contain;animation:float 2.3s ease-in-out infinite;filter:drop-shadow(0 4px 2px #9a660933)}
#new-item-name{display:block;font-size:5cqw;color:#805020;margin:1cqw 0 2cqw}
.unlock-meter{height:3.5cqw;border:2px solid #9e672e;border-radius:20px;background:#a3783e;overflow:hidden}.unlock-meter span{display:block;width:100%;height:100%;background:linear-gradient(#baff29,#6aca00);animation:fill-up .9s ease-out both}
#new-item-detail{display:block;margin:2cqw 0 0;font-size:3cqw;color:#91602f}
#overlay[data-mode=won] .panel h1{margin-bottom:9cqw;font-size:11.5cqw}#overlay[data-mode=won] .panel p{display:none}#overlay[data-mode=won] .panel{height:82%;justify-content:space-between}#overlay[data-mode=won] #new-item{padding:3cqw;margin-top:7cqw}#overlay[data-mode=won] .item-burst{width:20cqw;height:17cqw}#overlay[data-mode=won] #new-item-name{font-size:4cqw}
#catalog{position:absolute;inset:0;z-index:12;background:#123917ee;display:grid;place-items:center}
.catalog-panel{width:94%;padding:5cqw 3cqw;background:#f2e1b6;border:3px solid #b18a49;border-radius:15px;box-shadow:0 7px #614725}
.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:1cqw}.catalog-heading h2{margin:0;color:#8c5628;font-size:6cqw}.catalog-heading button{width:9cqw;height:9cqw;background:#ab7850;border-radius:7px;font-size:7cqw;line-height:1}
#catalog-subtitle{color:#a37445;font-size:3.2cqw;margin:2cqw 0 4cqw}
#catalog-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.7cqw}
.catalog-cell{position:relative;border-radius:7px;height:17cqw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff1cf;border:2px solid #d4af6d;color:#935c29;gap:1cqw;padding:1cqw}
.catalog-cell img{width:90%;height:75%;object-fit:contain}.catalog-cell small{font-size:2.5cqw}.catalog-cell.locked img{filter:brightness(.1);opacity:.15}.catalog-cell.locked:after{content:'?';position:absolute;top:15%;font-size:7cqw;color:#b39464}.catalog-cell.current{border-color:#67b914;box-shadow:0 0 0 2px #a6db39}.catalog-cell strong{font-size:6.7cqw}.catalog-cell.completed{background:#d2ed9d;border-color:#9bc457}
.pager{display:flex;align-items:center;justify-content:space-between;margin:4cqw 0 2cqw}.pager button{background:#94c94a;border-radius:7px;width:13cqw;height:10cqw;font-size:8cqw;line-height:1;border-bottom:3px solid #5d9228}.pager span{font-size:3.9cqw;color:#966637}
#catalog-detail{margin:2cqw 0 0;text-align:center;min-height:4.5cqw;color:#8c5b30;font-size:3.5cqw}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#fff6d3;background:#388f37;font-size:3.8cqw;z-index:15}
#loading span{width:32px;height:32px;border:5px solid #f0dea144;border-top-color:#ffdb27;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes swipe{0%,100%{transform:translateX(-15px) rotate(-10deg)}60%{transform:translateX(65px) rotate(4deg)}}@keyframes float{50%{transform:translateY(-4px) rotate(3deg)}}@keyframes reward-pop{0%{transform:scale(.5);opacity:0}65%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes fill-up{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#effects{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none}
/* Reference-matched game chrome, rendered sharply at every pixel density. */
@font-face{font-family:Lilita;src:url('assets/fonts/LilitaOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
body{background-image:url('assets/grass-hd.png');font-family:Lilita,'Arial Rounded MT Bold',sans-serif;font-weight:400}
button{font-weight:400}
#game{box-shadow:0 0 100px #173e2850}
header{top:4.6%;left:10.5%;width:79%;height:5.4%;filter:drop-shadow(0 2px 0 #946333)}
#level-label{font-size:4.4cqw;color:#9e5f28;line-height:1.15;padding-top:.1cqw;letter-spacing:0;text-shadow:0 .6px #84441f}
#meter{border-width:2px;border-color:#f5e4b9;background:#a48154;box-shadow:0 0 0 1px #c1a071}
#fill{box-shadow:inset 0 2px #fff6a8,inset 0 -2px #e8a400;background:linear-gradient(#ffe743,#ffd515)}
#meter-head{left:-6.7%;width:12.8%;top:-87%;height:259%}
#meter-fruit{right:-7%;width:15%;top:-87%;height:252%}
footer{bottom:.8%;left:3%;width:94%;height:8.4%;gap:2.2%}
.unlock{background:linear-gradient(150deg,#fff4cf,#efd69a);border:0;box-shadow:inset 0 0 0 2px #dc9b43}
.lock{inset:5% 18% 25%}
.unlock.locked .lock{filter:none;opacity:1}
.unlock.locked:after{display:none}
.unlock small{font-size:2.7cqw;font-family:Lilita,sans-serif;left:20%;width:60%;line-height:1.12;border-width:1.6px}
#settings{padding:2.6cqw;background:linear-gradient(#b79567,#98784e)}
#toast{top:11.6%;font-size:4.3cqw;text-shadow:0 2px 1px #366b2c}
.instruction{font-size:3.8cqw;padding:2.7cqw 3cqw;line-height:1.38;border:4px solid #32bbed;box-shadow:0 2px 0 #0d6b98;transform:none;color:#2d6085;max-width:82%}
#tutorial-hand{width:13%;left:43%;top:66%}
#tutorial p{font-size:3.4cqw}
#begin{font-size:5.1cqw;bottom:12.5%;letter-spacing:.1cqw;text-shadow:0 2px #466444}
.panel h1{font-size:12cqw;letter-spacing:0;-webkit-text-stroke:.7px #fff;text-shadow:1px 1px #a62917,2px 4px #941c12,3px 6px #64170c}
.panel p{font-size:4.6cqw;line-height:1.4}
.panel button{font-size:5.3cqw;border-radius:7px;background:linear-gradient(160deg,#93f20a 0%,#64d503 70%);border-bottom:4px solid #3b8e03;box-shadow:inset 0 2px 0 #b6ff2655,0 3px 0 #153f1333;text-shadow:0 2px #488f0b}
.panel .secondary{font-size:4.4cqw;border-bottom:4px solid #a27c47;background:linear-gradient(#ffefc3,#e3c88d)}
#overlay[data-mode=won] .panel{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block}
#overlay[data-mode=won] .panel h1{position:absolute;top:16%;left:0;width:100%;margin:0;font-size:12.5cqw;transform:rotate(-4deg)}
#overlay[data-mode=won] #reward{position:absolute;top:36%;left:28%;width:44%;height:18%;margin:0;filter:drop-shadow(0 0 25px #ffce3e77)}
#overlay[data-mode=won] #reward b{font-size:10cqw;right:3%;bottom:-1%;text-shadow:0 3px #754819}
#overlay[data-mode=won] #primary{position:absolute;bottom:11%;left:27%;width:46%;height:6%;padding:0;margin:0;transform:rotate(-4deg);font-size:5.1cqw;letter-spacing:.1cqw}
#overlay[data-mode=won] #new-item{position:absolute;top:66%;left:11%;width:78%;height:4.6%;padding:0;margin:0;border:2px solid #b68236;border-radius:18px;background:#b0874e;box-shadow:0 3px #643f23}
#overlay[data-mode=won] .new-item-label{top:-58%;left:23%;width:55%;font-size:3.2cqw;background:#f2bc4a;padding:0 1cqw;line-height:1.3;color:#8c491c;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
#overlay[data-mode=won] .item-burst{position:absolute;right:-8%;top:-48%;width:21%;height:160%;margin:0;background:none;z-index:2}
#overlay[data-mode=won] .item-burst img{width:100%;height:100%}
#overlay[data-mode=won] #new-item-name{display:none}
#overlay[data-mode=won] .unlock-meter{position:absolute;inset:9% 1.5%;height:82%;border:1px solid #8d6337;background:#a67d49}
#overlay[data-mode=won] #new-item-detail{position:absolute;top:105%;left:0;width:100%;font-size:3.2cqw;margin-top:2cqw;color:#e6cfa0}
#overlay[data-mode=unlock] #new-item{border:2px solid #c79548;background:linear-gradient(#fff2c7,#f2d080);border-radius:13px;box-shadow:0 5px #996535}
#overlay[data-mode=unlock] .item-burst{width:39cqw;height:36cqw}
#overlay[data-mode=unlock] #new-item-name{font-size:6.5cqw}
#overlay[data-mode=unlock] .new-item-label{font-size:4cqw}
.catalog-heading h2{font-size:6.7cqw}.catalog-cell strong{font-size:7.7cqw}.catalog-cell small{font-size:2.9cqw}

/* Original board proportions with a single seamless landscape background. */
#game{background:transparent;box-shadow:none;border:0}
#speed-up{position:absolute;left:18%;bottom:10.5%;width:64%;height:5.8%;pointer-events:auto;display:grid;grid-template-columns:1fr auto;align-content:center;gap:0 2cqw;padding:.8cqw 3cqw;border-radius:3cqw;background:linear-gradient(#ffdf55,#f4a829);border-bottom:3px solid #ba6c17;color:#744214;text-shadow:0 1px #ffe595;box-shadow:0 3px 9px #21481933}
#speed-up strong{font-size:4cqw;line-height:1.1}#speed-up small{font-size:2.7cqw;line-height:1.3}#speed-value{grid-column:2;grid-row:1/3;align-self:center;font-size:4.7cqw}
#speed-up:disabled{opacity:.8;filter:saturate(.7)}
#tutorial{z-index:2}

/* Large, readable first-level directions. */
#tutorial{padding-top:22%;}
.instruction{width:92%;max-width:92%;font-size:7cqw;line-height:1.3;padding:5cqw 3cqw;border-radius:3cqw}
.instruction-detail{display:block;font-size:4.8cqw;line-height:1.5;margin-top:4cqw;color:#31556d}
#tutorial p{font-size:4.6cqw;bottom:21%}
#begin{font-size:6cqw;bottom:12%}
@media (orientation:landscape){
 #tutorial{position:fixed;inset:0;padding:8vh 16px 0;z-index:20}
 .instruction{width:min(520px,92vw);max-width:92vw;font-size:clamp(20px,5vh,36px);padding:3vh 20px;border-radius:12px}
 .instruction-detail{font-size:clamp(16px,3.6vh,24px);margin-top:2vh}
 #tutorial-hand{top:60%;width:8vh;height:11vh;left:45%}
 #tutorial p{font-size:clamp(14px,3vh,20px);bottom:17%}
 #begin{font-size:clamp(18px,4vh,28px);bottom:5%;padding:10px 20px}
}

/* Opaque fallback and matching canvas/page grass prevent black embedded backgrounds. */
html,body{background-color:#388f37}
body:before{display:none}
#game{background-color:#388f37}
canvas:focus,canvas:focus-visible,#board:focus,#board:focus-visible{outline:none!important;box-shadow:none!important}
/* Portal banners occupy their own desktop menu band, never the game canvas. */
#portal-banner{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:728px;height:90px;z-index:50;background:#255d2a}
body.with-banner{align-items:start}body.with-banner #game{height:min(calc(100dvh - 110px),226.086956vw);width:min(100vw,calc((100dvh - 110px)*.44230769))}body.with-banner #overlay,body.with-banner #catalog{bottom:0}
#sdk-debug{position:fixed;z-index:10000;left:8px;top:8px;width:min(340px,calc(100vw - 16px));max-height:90dvh;overflow:auto;background:#132c22f5;color:#fff;padding:10px;border:1px solid #96cca3;border-radius:8px;font:12px/1.4 monospace;touch-action:pan-y}
#sdk-debug summary{cursor:pointer;font-weight:bold}#sdk-debug pre{white-space:pre-wrap;overflow-wrap:anywhere}#sdk-debug button{display:inline-block;margin:4px;padding:8px;border:0;border-radius:5px;color:#172b14;background:#ddedc4;font:12px sans-serif}#sdk-debug p{overflow-wrap:anywhere}
@media(max-width:799px),(max-height:649px){#portal-banner{display:none}}

#ui header{top:max(4.55%,env(safe-area-inset-top))}footer{bottom:max(1.6%,env(safe-area-inset-bottom))}
html[lang=ru] body{font-family:"Arial Rounded MT Bold",Arial,sans-serif;font-weight:800}

#mute-toggle{position:absolute;top:max(1cqw,env(safe-area-inset-top));right:2cqw;width:8cqw;height:8cqw;min-width:32px;min-height:32px;border-radius:50%;background:#f5e4b6;color:#644819;font-size:5cqw;pointer-events:auto;}
html[lang=ru] #tutorial strong{font-size:8cqw;}

/* Game branding: keep the exact catalog title visible in-game. */
#game-title{position:absolute;top:max(.8%,env(safe-area-inset-top));left:6%;width:88%;text-align:center;color:#f8efce;font-size:2.8cqw;line-height:1.05;text-shadow:0 1px 2px #245626;letter-spacing:.02em;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
#loading-title{display:block;max-width:86%;text-align:center;font-size:6.2cqw;line-height:1.08;color:#fff8da;text-shadow:0 3px 0 #23652e;letter-spacing:.01em}
#loading-copy{font-size:3.6cqw;line-height:1.2;color:#fff6d3;text-align:center}
html[lang=ru] #game-title{font-family:Arial,sans-serif;font-weight:700}