*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#ff9a4d;font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 80% at 50% 25%,#fff3b0 0%,#ffd36b 35%,#ff9f55 75%,#ff7b5c 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}
#flash.red{background:rgba(255,40,40,.35);opacity:1;transition:none}
#flash.gold{background:radial-gradient(circle at 50% 55%,rgba(255,230,120,.75),rgba(255,200,40,0) 70%);opacity:1;transition:none}

#hud{position:absolute;inset:0;pointer-events:none;color:#fff}
.hud-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:center}
.pill{background:rgba(120,40,10,.35);border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 14px;font-size:18px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);display:flex;align-items:center;gap:6px;backdrop-filter:blur(2px)}
.coins{display:inline-flex;align-items:center;gap:6px}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7b0,#ffc61a 55%,#d68a00);
  box-shadow:inset 0 0 0 2px #b87400}
#levelPill{margin-right:auto}
.iconbtn{pointer-events:auto;position:relative;z-index:20;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(120,40,10,.35) center/26px no-repeat;cursor:pointer}
.tag{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#7b3fe4;border:2px solid #fff;border-radius:12px;
  padding:4px 12px;font-size:14px;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.3)}
#meter{position:absolute;right:14px;top:22%;height:46%;width:22px;border-radius:12px;background:rgba(255,255,255,.35);border:3px solid #fff;overflow:visible;
  box-shadow:0 3px 0 rgba(0,0,0,.15)}
#meterZones{position:absolute;inset:0;border-radius:9px;overflow:hidden}
#meterZones div{position:absolute;left:0;right:0}
#meterFill{position:absolute;left:3px;right:3px;bottom:3px;border-radius:6px;background:linear-gradient(#fffdf2,#ffe9a8);height:0;box-shadow:0 0 6px rgba(255,255,255,.8)}
#meterNeedle{position:absolute;left:-10px;right:-10px;height:4px;background:#fff;border-radius:2px;bottom:0;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
#meterNeedle span{position:absolute;right:30px;top:-11px;font-size:15px;font-weight:bold;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap}
#meter.danger{animation:pulse .18s infinite alternate}
@keyframes pulse{from{border-color:#fff}to{border-color:#ff3b3b;box-shadow:0 0 14px #ff3b3b}}
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(40px + env(safe-area-inset-bottom));width:max-content;max-width:88%;text-align:center;font-size:17px;font-weight:bold;line-height:1.3;color:#fff;background:rgba(120,35,10,.55);border:2px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 18px;text-shadow:0 1px 2px rgba(0,0,0,.45);transition:opacity .3s}
#hint:empty{display:none}
#banner{position:absolute;left:0;right:0;top:24%;text-align:center;font-size:44px;font-weight:900;color:#fff;text-shadow:0 4px 0 #d9480f,0 8px 18px rgba(0,0,0,.25);animation:pop .35s ease-out}
#banner small{display:block;font-size:20px;margin-top:4px;text-shadow:0 2px 0 #d9480f}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
#title{background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.15),rgba(255,120,60,.25))}
.title-wrap{text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-6vh}
.logo{display:flex;flex-direction:column;line-height:.9;font-weight:900;letter-spacing:2px;transform:rotate(-4deg)}
.logo .l1{font-size:clamp(46px,14vw,84px);color:#fff;text-shadow:0 5px 0 #e03131,0 10px 0 #a61e1e,0 16px 24px rgba(0,0,0,.25)}
.logo .l2{font-size:clamp(52px,16vw,96px);color:#ffe066;text-shadow:0 5px 0 #e03131,0 10px 0 #a61e1e,0 16px 24px rgba(0,0,0,.25)}
.credit-big{font-size:18px;letter-spacing:3px;font-weight:bold;color:#fff;background:rgba(160,40,20,.35);padding:6px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.6)}
.howto{font-size:15px;font-weight:bold;line-height:1.45;max-width:min(370px,94vw);color:#fff;background:rgba(120,35,10,.6);border:2px solid rgba(255,255,255,.6);border-radius:16px;padding:10px 16px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.bigbtn{pointer-events:auto;font:inherit;font-weight:900;font-size:26px;letter-spacing:2px;color:#fff;background:linear-gradient(#5be36a,#2fb344);border:3px solid #fff;
  border-radius:20px;padding:14px 42px;box-shadow:0 6px 0 #1e7e34,0 10px 20px rgba(0,0,0,.2);cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #1e7e34}
.bigbtn.alt{background:linear-gradient(#ffb340,#f08c00);box-shadow:0 6px 0 #b35c00,0 10px 20px rgba(0,0,0,.2)}
.bigbtn.alt:active{box-shadow:0 2px 0 #b35c00}
.title-stats{display:flex;gap:16px;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.25)}

#result{background:linear-gradient(rgba(80,20,0,0) 35%,rgba(80,20,0,.3));align-items:flex-end;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
.card{background:linear-gradient(#fffaf0,#ffe8c2);border:4px solid #fff;border-radius:26px;padding:14px 18px 18px;width:min(340px,92vw);text-align:center;
  box-shadow:0 12px 0 rgba(160,60,10,.35),0 20px 40px rgba(0,0,0,.25);animation:pop .3s ease-out;color:#7a3410}
#resTitle{font-size:36px;font-weight:900;color:#ff6b00;text-shadow:0 3px 0 #ffd8a8}
#resTitle.fail{color:#e03131}
#resTitle.gold{color:#f2a900;text-shadow:0 3px 0 #fff0b3,0 0 18px #ffd43b}
.stars{display:flex;justify-content:center;gap:8px;margin:8px 0 2px}
.star{display:block;width:50px;height:50px;background:#e9d7bf;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:scale(.85)}
.star:nth-child(2){transform:translateY(-8px) scale(1)}
.star.on{background:linear-gradient(#fff3a0,#ffc61a 55%,#f08c00);animation:pop .35s ease-out both}
#resFill{font-size:22px;font-weight:bold;margin-top:4px}
#resSub{font-size:15px;min-height:20px;margin:4px 0 8px;opacity:.85}
#resCoins{justify-content:center;font-size:22px;margin-bottom:12px}
.btnrow{display:flex;gap:12px;justify-content:center}
.btnrow .bigbtn{padding:12px 20px;font-size:22px;flex:1}
.bigbtn.pulse{animation:pulsebtn 1.1s ease-in-out infinite}
@keyframes pulsebtn{0%,100%{transform:scale(1)}50%{transform:scale(1.08);box-shadow:0 6px 0 #1e7e34,0 0 30px rgba(120,255,140,.8)}}
.bigbtn:disabled{filter:grayscale(1);opacity:.5}

#fineprint{position:absolute;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:1.5px;font-weight:bold;color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none;z-index:5}
.ver{font-size:12px;letter-spacing:1px;font-weight:bold;color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.4);margin-top:-6px;order:9}

/* ---------------- v1.2 ---------------- */
.hud-top .pill{padding:6px 11px;font-size:16px}
.star-ic{display:inline-block;width:17px;height:17px;background:linear-gradient(#fff3a0,#ffc61a 55%,#f08c00);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.score{display:inline-flex;align-items:center;gap:5px}
.iconbtn.gear{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.4 13a7.6 7.6 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.5 7.5 0 0 0-1.7-1L15 3h-4l-.4 2.9a7.5 7.5 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7.5 7.5 0 0 0 1.7 1L11 21h4l.4-2.9a7.5 7.5 0 0 0 1.7-1l2.5 1 2-3.5zM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z' transform='translate(-1 0)'/%3E%3C/svg%3E")}
.titlegear{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:3}
.menurow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.smallbtn{pointer-events:auto;font:inherit;font-weight:bold;font-size:15px;color:#fff;background:rgba(150,45,15,.55);border:2px solid rgba(255,255,255,.75);border-radius:14px;padding:8px 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.smallbtn:active{transform:translateY(2px)}
.smallbtn.dark{background:#b5541c;border-color:#fff}
.ic{display:inline-block;width:18px;height:18px;background:center/contain no-repeat}
.ic-store{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 4h16l1 5a3 3 0 0 1-5 2 3 3 0 0 1-4 0 3 3 0 0 1-4 0 3 3 0 0 1-5-2zM5 13h14v7H5z'/%3E%3C/svg%3E")}
.ic-trophy{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 3h10v3h3v2a4 4 0 0 1-4 4 5 5 0 0 1-3 2v3h3v3H8v-3h3v-3a5 5 0 0 1-3-2 4 4 0 0 1-4-4V6h3zm0 5H6a2 2 0 0 0 1 2zm10 0v2a2 2 0 0 0 1-2z'/%3E%3C/svg%3E")}
.ic-user{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E")}
.ic-home{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3z'/%3E%3C/svg%3E")}
.title-stats .score b{font-weight:bold}
.resrow{display:flex;justify-content:center;gap:18px;font-size:22px;margin-bottom:6px}
#resCoins{margin-bottom:0}
.respost{font-size:13px;min-height:16px;margin-bottom:8px;opacity:.85}
.btnrow2{display:flex;gap:8px;justify-content:center;margin-top:12px}
.btnrow2 .smallbtn{font-size:14px;padding:7px 10px}

/* modals */
.modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(60,15,0,.45);padding:14px;pointer-events:auto}
.panel{background:linear-gradient(#fffaf0,#ffe8c2);border:4px solid #fff;border-radius:24px;padding:16px 16px 14px;width:min(360px,94vw);max-height:92vh;overflow:auto;color:#7a3410;
  box-shadow:0 10px 0 rgba(160,60,10,.35),0 20px 40px rgba(0,0,0,.25);animation:pop .25s ease-out;display:flex;flex-direction:column;gap:10px;-webkit-user-select:text;user-select:text}
.panel.tall{height:min(640px,90vh)}
.ptitle{font-size:26px;font-weight:900;color:#ff6b00;text-align:center;display:flex;justify-content:center;align-items:center;gap:12px}
.tgl{display:flex;align-items:center;justify-content:space-between;font-weight:bold;font-size:17px;background:#fff;border-radius:14px;padding:10px 14px;cursor:pointer}
.tgl small{font-weight:normal;opacity:.7}
.tgl input{display:none}
.tgl i{width:50px;height:28px;border-radius:14px;background:#d8c6ae;position:relative;transition:background .2s;flex:none}
.tgl i:after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.tgl input:checked+i{background:#2fb344}
.tgl input:checked+i:after{left:25px}
.bigbtn.wide{width:100%;padding:10px;font-size:20px}
.contact{font-size:13px;line-height:1.4;text-align:center;opacity:.85}
.pver{font-size:11px;text-align:center;opacity:.6;letter-spacing:1px}
.seg{display:flex;background:#f2dcc0;border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;font:inherit;font-weight:bold;font-size:13px;min-width:0;border:0;border-radius:9px;padding:8px 2px;letter-spacing:-.2px;background:transparent;color:#7a3410;cursor:pointer}
.seg button.on{background:#ff8a2b;color:#fff;box-shadow:0 2px 0 #c45f00}
.panel input,.panel textarea{font:inherit;font-size:16px;border:2px solid #f0caa0;border-radius:12px;padding:10px;background:#fff;color:#5a2a0c;width:100%;resize:vertical}
.panel input:focus,.panel textarea:focus{outline:none;border-color:#ff8a2b}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.fbstatus{min-height:18px;font-size:14px;text-align:center;font-weight:bold}
.fbstatus.ok{color:#1e7e34}.fbstatus.err{color:#c92a2a}
.storecoins{font-size:18px;color:#7a3410}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:auto;flex:1;padding:2px}
.item{background:#fff;border-radius:16px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;border:3px solid transparent;cursor:pointer;font:inherit;color:#7a3410}
.item.eq{border-color:#2fb344}
.item .sw{width:100%;height:74px;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.item .nm{font-weight:bold;font-size:14px;text-align:center;line-height:1.15}
.item .pr{font-size:13px;font-weight:bold;display:flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;background:#ffe1b0}
.item .pr .coin{width:14px;height:14px}
.item.eq .pr{background:#2fb344;color:#fff}
.item.own .pr{background:#4dabf7;color:#fff}
.item.lock .pr{background:#ffe1b0}
.item.cant{opacity:.7}
.item.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.bsub{text-align:center;font-size:13px;opacity:.75;margin-top:-6px}
.blist{flex:1;overflow:auto;background:#fff;border-radius:14px;padding:6px}
.brow{display:grid;grid-template-columns:34px 1fr auto;gap:6px;padding:7px 8px;border-radius:10px;font-size:15px;align-items:center}
.brow:nth-child(odd){background:#fff6ea}
.brow.me{background:#d3f9d8!important;font-weight:bold;box-shadow:inset 0 0 0 2px #2fb344}
.brow .rk{font-weight:900;color:#ff6b00}
.brow .sc{font-weight:bold}
.bempty{text-align:center;padding:30px 10px;font-size:17px;line-height:1.5}
.bguest{font-size:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.accnote{font-size:14px;line-height:1.45;text-align:center}
.toast{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%);z-index:60;background:rgba(40,20,5,.85);color:#fff;font-weight:bold;padding:9px 16px;border-radius:999px;font-size:15px;animation:pop .25s ease-out;white-space:nowrap;pointer-events:none}

/* tutorial hand */
#hand{position:absolute;z-index:6;pointer-events:none;width:0;height:0}
#hand .handsvg{position:absolute;width:64px;height:80px;left:-23px;top:0;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));transform-origin:23px 0}
#hand .ripple{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,.9);opacity:0}
#hand .handlabel{position:absolute;left:-80px;width:160px;top:86px;text-align:center;color:#fff;font-weight:900;font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.25)}
#hand.press .handsvg{animation:handpress 1.2s ease-in-out infinite}
#hand.press .ripple{animation:ripple 1.2s ease-out infinite}
@keyframes handpress{0%,100%{transform:translateY(-14px) scale(1)}35%,75%{transform:translateY(0) scale(.92)}}
@keyframes ripple{0%,30%{transform:scale(.3);opacity:0}40%{opacity:1}80%,100%{transform:scale(1.4);opacity:0}}
#hand.point .handsvg{transform:rotate(-90deg);animation:handpoint .8s ease-in-out infinite}
#hand.point .ripple,#hand.point .handlabel{display:none}
@keyframes handpoint{0%,100%{transform:rotate(-90deg) translateY(0)}50%{transform:rotate(-90deg) translateY(10px)}}

/* splash */
#splash{position:absolute;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease;cursor:pointer}
#splash img{width:min(88vw,520px);height:auto;animation:splashin 1.2s ease-out both}
#splash.out{opacity:0;pointer-events:none}
@keyframes splashin{0%{opacity:0;transform:scale(.9)}40%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* themes (background behind the 3D scene) */

/* sprinklers */
#sprinklers{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s}
#sprinklers.on{opacity:1}
#sprinklers .head{position:absolute;top:calc(56px + env(safe-area-inset-top));width:34px;height:22px;margin-left:-17px;background:linear-gradient(#f1f3f5,#adb5bd);border-radius:6px 6px 14px 14px;box-shadow:0 2px 0 #868e96}
#sprinklers .head:before{content:'';position:absolute;left:12px;top:-58px;width:10px;height:58px;background:linear-gradient(90deg,#ced4da,#f8f9fa,#adb5bd)}
#sprinklers .head:after{content:'';position:absolute;left:-60px;top:16px;width:154px;height:120px;background:radial-gradient(60% 100% at 50% 0%,rgba(190,230,255,.75),rgba(190,230,255,0) 70%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);animation:spray .25s linear infinite alternate}
@keyframes spray{from{opacity:.75}to{opacity:1}}
#mist{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(rgba(200,235,255,.35),rgba(200,235,255,.12));opacity:0;transition:opacity .6s}
#mist.on{opacity:1}
#resPost.link{text-decoration:underline;cursor:pointer;pointer-events:auto}

/* XOANA STUDIOS website link (title screen and Settings, never during play) */
.weblink{text-decoration:none;font-size:14px;padding:7px 14px;align-self:center}
.setweb{background:#ff8a2b;border-color:#fff;box-shadow:0 2px 0 #c45f00;justify-content:center}
.setweb.hidden{display:none}
.ic-globe{width:16px;height:16px;border-radius:50%;border:2px solid #fff;position:relative;box-sizing:border-box;display:inline-block}
.ic-globe::before{content:'';position:absolute;left:3px;right:3px;top:-2px;bottom:-2px;border:2px solid #fff;border-radius:50%;border-top-color:transparent;border-bottom-color:transparent}
.ic-globe::after{content:'';position:absolute;left:-2px;right:-2px;top:5px;height:2px;background:#fff}