html,body{margin:0;height:100%;overflow:hidden;background:#2D3B62;font-family:'Vazirmatn',sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}
html body #game-root{position:fixed;inset:0;width:100vw;max-width:none;margin:0}
#game{position:absolute;inset:0}
#game canvas{width:100%!important;height:100%!important}
#stage{position:absolute;left:0;top:0;width:540px;height:960px;transform-origin:0 0;direction:rtl;color:#fff}
#stage *{box-sizing:border-box}
.wood{background:linear-gradient(#a8692f,#8B5A2B 60%,#6e4520);border:3px solid #4a2b12;border-radius:16px;box-shadow:0 5px 0 #3a210d,inset 0 2px 0 rgba(255,220,160,.35)}
.cap{position:absolute;left:-4px;right:-4px;top:-12px;height:20px;background:#fff;border-radius:12px 12px 8px 8px;box-shadow:0 2px 0 #b9c6e6}
.plate{position:absolute;height:64px;top:30px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:24px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#pLevel{left:22px;width:170px;flex-direction:column;gap:4px;font-size:20px}
#pLevel .bar{width:130px;height:10px;border-radius:6px;background:#3a210d;overflow:hidden}
#pLevel .bar i{display:block;height:100%;background:#b57cff;width:0;transition:width .4s}
#pMoves{left:206px;width:150px}
#pMoves .bar{position:absolute;inset-inline:0}
#movebar{width:62px;height:22px;border-radius:12px;background:#3a210d;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
#movebar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#7bf06a,#2fb84a);transition:width .25s}
#movebar b{position:relative;font-size:18px}
#pCoins{left:370px;width:148px}
.coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe58a,#FFB830 60%,#c47d10);border:3px solid #7a4a08}
#banner{position:absolute;left:50%;top:118px;transform:translateX(-50%);padding:4px 22px;background:#fff3d6;color:#5a3a16;border:3px solid #c9a46a;border-radius:20px;font-weight:800;font-size:22px;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.25)}
#frame{position:absolute;left:66px;top:318px;width:408px;height:408px;padding:14px;border-radius:14px;background:linear-gradient(#b5732f,#8B5A2B);border:4px solid #4a2b12;box-shadow:0 8px 0 #3a210d,0 14px 30px rgba(0,0,0,.4)}
#frame::before{content:'';position:absolute;left:-6px;right:-6px;top:-14px;height:22px;background:#fff;border-radius:14px;box-shadow:0 2px 0 #b9c6e6}
#grid{position:relative;width:380px;height:380px;display:grid;gap:0}
.tile{position:relative;background:linear-gradient(135deg,#c98a45,#a06a30);border:2px solid #6b4220;border-radius:6px;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,220,160,.25)}
.tile:nth-child(even){background:linear-gradient(135deg,#b97b3b,#94602a)}
.tile .pipe{position:absolute;inset:0;transition:transform .22s cubic-bezier(.3,1.5,.5,1);overflow:visible}
.tile svg{width:100%;height:100%;overflow:visible}
.tile.locked{background:linear-gradient(135deg,#7f8fb4,#5d6c92);cursor:not-allowed}
.tile.kb{outline:4px solid #fff;outline-offset:-4px;z-index:2}
.tile .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tile .ov svg{width:40%;height:40%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.tile.wet .p1{stroke:#c9f6ff}.tile.wet svg{filter:drop-shadow(0 0 6px #71E5FF)}
.tile.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(.92)}}
.pipeFlat{position:absolute;background:linear-gradient(90deg,#69c9e6,#bff0ff 40%,#69c9e6);border-radius:4px;box-shadow:0 0 10px rgba(113,229,255,.7)}
#portal{position:absolute;width:150px;height:150px;top:176px;transition:filter .4s}
#portal .arch{position:absolute;inset:0;border-radius:50%;background:#7a4a22;border:5px solid #4a2b12;box-shadow:0 0 30px rgba(113,229,255,.7)}
#portal .sw{position:absolute;inset:14px;border-radius:50%;background:conic-gradient(from 0deg,#fff,#71E5FF,#2b7fd0,#bff6ff,#fff,#71E5FF,#2b7fd0,#bff6ff,#fff);animation:spin 3s linear infinite;filter:blur(1px)}
#portal .sw2{position:absolute;inset:34px;border-radius:50%;background:radial-gradient(#fff,#71E5FF 60%,transparent 70%);animation:pulse 1.6s ease-in-out infinite}
#portal .snow{position:absolute;left:-6px;right:-6px;top:-14px;height:26px;background:#fff;border-radius:50% 50% 30% 30%;box-shadow:0 2px 0 #b9c6e6}
#portal.on{filter:brightness(1.6) drop-shadow(0 0 30px #71E5FF)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.25);opacity:.7}}
#cloud{position:absolute;width:150px;height:60px;top:716px;border-radius:50%;background:radial-gradient(#fff,#dfe8ff 70%);box-shadow:0 4px 0 #aab8dd}
#dragon{position:absolute;width:130px;height:110px;margin:-55px 0 0 -65px;transition:left .26s ease-in-out,top .26s ease-in-out,transform .3s;z-index:6;pointer-events:none}
#dragon svg{width:100%;height:100%;overflow:visible;animation:bob 2.4s ease-in-out infinite}
#dragon.hop svg{animation:hop .26s}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes hop{50%{transform:translateY(-26px) scale(1.1,.9)}}
#hand{position:absolute;width:56px;height:56px;z-index:8;pointer-events:none;animation:tap 1s ease-in-out infinite}
@keyframes tap{50%{transform:translate(6px,10px) scale(.88)}}
.rbtn{position:absolute;bottom:26px;width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid #4a2b12;background:linear-gradient(#b5732f,#8B5A2B);box-shadow:0 5px 0 #3a210d}
.rbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #3a210d}
.rbtn svg{width:36px;height:36px}
#tip{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);padding:6px 20px;background:rgba(25,30,60,.78);border-radius:20px;font-size:19px;font-weight:700;white-space:nowrap;transition:opacity .4s}
#ov{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(20,25,55,.55);flex-direction:column}
#ov.show{display:flex}
.panel{position:relative;width:420px;padding:34px 24px 26px;text-align:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.panel h1{margin:0 0 6px;font-size:44px;line-height:1.5;text-shadow:0 3px 0 #3a210d;color:#fff}
.panel p{margin:0 0 16px;font-size:22px;line-height:1.8;color:#ffeccc;font-weight:600}
.stars{display:flex;justify-content:center;gap:10px;margin:6px 0 10px;direction:ltr}
.stars svg{width:84px;height:84px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.stars svg.pop{animation:starpop .5s cubic-bezier(.3,1.8,.5,1) both}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}}
.gain{display:inline-flex;gap:8px;align-items:center;font-size:28px;font-weight:800;margin-bottom:14px}
.gain .coin{width:30px;height:30px}
.big{font-family:inherit;font-size:26px;font-weight:800;color:#fff;border:3px solid #1d6d2a;background:linear-gradient(#5fe36f,#2fb84a);border-radius:18px;padding:8px 40px;cursor:pointer;box-shadow:0 6px 0 #1d6d2a;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #1d6d2a}
#startBtn{position:absolute;left:50%;top:auto;bottom:210px;transform:translateX(-50%);font-family:'Vazirmatn',sans-serif;font-size:30px;color:#fff;background:linear-gradient(#5fe36f,#2fb84a);box-shadow:0 6px 0 #1d6d2a;border:3px solid #1d6d2a;z-index:40;min-width:240px}
#startBtn.hidden{display:none}
.shake{animation:shake .35s}
@keyframes shake{20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,0)}}


/* SCRUM-3950 — Kaplay's letterbox mode reads its mount root's EXISTING
   height rather than expanding it (unlike Phaser's Scale Manager, which
   injects one itself via expandParent) — the locked scaffold's #game-root
   deliberately carries no height so it stays portable across engines, so
   without this the canvas collapses to the browser's built-in ~150px
   canvas default instead of filling the frame. Measured live, SCRUM-3950. */
#game-root { height: 100vh; }
#game { height: 100%; }