:root{
  --wood-dark:#5a3a22;
  --wood-mid:#8a5a34;
  --wood-light:#c98a4f;
  --gold:#ffcf5c;
  --gold-dark:#c98a1f;
  --accent:#ff595e;
  --accent2:#ff924c;
  --stone-dark:#2b2f22;
  --stone-mid:#4a4e37;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  display:flex;align-items:center;justify-content:center;
  background:#05070a;
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  color:#fff;
}

/* ================= ROTATE / PORTRAIT NOTICE ================= */
/* shown only on phones held in landscape (short viewport); portrait hides it */
.rotate-notice{ display:none; }
@media (orientation:landscape) and (max-height:500px){
  body{overflow: hidden;}
  .rotate-notice{
    display:flex;position:fixed;inset:0;z-index:9999;
    align-items:center;justify-content:center;text-align:center;
    padding:24px;
    background:url("https://akm-img-a-in.tosshub.com/sites/epaper/games/anarkali/assets/bg-cave.png") center/cover no-repeat, #0a0704;
  }
  .rotate-notice::after{ content:"";position:absolute;inset:0;background:rgba(0,0,0,.72); }
  .rotate-inner{ position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px; }
  .rotate-inner svg{ width:52px;height:52px;color:#f2c14e;animation:rotateHint 2s ease-in-out infinite; }
  .rotate-hi{ font-weight:800;font-size:18px;line-height:1.3;color:#fff; }
  .rotate-en{ font-weight:600;font-size:13px;color:#f2c14e; }
  @keyframes rotateHint{ 0%,60%,100%{ transform:rotate(0); } 30%{ transform:rotate(-90deg); } }
}

#app{
  position:relative;
  width:100%;height:100dvh;max-height:100dvh;
  max-width:480px;
  display:flex;flex-direction:column;
  background:#0d1021;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
@media (min-width:520px) and (min-height:760px){
  #app{height:900px;max-height:92vh;border-radius:28px;}
}
@media (min-width:520px) and (max-height:636px){
  #app{width:360px;max-width:360px;}
}
@media (pointer:coarse) and (min-width:600px){
  #app{width:400px;max-width:400px;height:100dvh;max-height:768px;border-radius:0;}
}

/* ---------- jungle temple backdrop ---------- */
#bgScene{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/bg.jpg') bottom center/cover no-repeat, #0d1021;
}

/* ---------- top HUD ---------- */
#topBar{
  position:relative;z-index:3;flex-shrink:0;
  width:100%;aspect-ratio:2172/675;
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/top-bg.png') center -20px no-repeat;
  background-size:calc(100% + 30px)
}
.roundBtn{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  cursor:pointer;border:none;background:transparent;padding:0;
  color:#fff8e6;font-size:18px;display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
.roundBtn:active{transform:scale(.9);}
#pauseBtn{
  position: absolute; left: 7%; top: 34%; transform: translateY(-50%); width: 13%; aspect-ratio: 1 / 1; height: auto; background: url(https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/pause-btn.png) center / contain no-repeat;
}
#pauseBtn:active{transform:translateY(-50%) scale(.9);}
#scorePanel{
  position:absolute;left:30%;top:9%;width:38%;height:33%;
  display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;
}
#scorePanel .lbl{font-size:9.5px;letter-spacing:2px;color:#ffe6b0;opacity:.85;font-weight:700;}
#scorePanel .val{font-size:20px;font-weight:800;color:#fff5db;text-shadow:0 2px 2px rgba(0,0,0,.5);line-height:1.1;}
#levelPill{
  position:absolute;left:73.5%;top:20%;width:22%;height:19%;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:14px;font-weight:800;color:#fff5db;
  text-shadow:0 2px 2px rgba(0,0,0,.5);
  white-space:nowrap;
}
#progressPillWrap{position:absolute;left:calc(20% - 2px);top:52.5%;width:62%;height:15%;}
#progressTrackInner{
  position:absolute;inset:0;border-radius:20px;overflow:hidden;
  background:rgba(20,12,6,.6);
  border:2px solid rgba(0,0,0,.4);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55);
}
#progressFill{
  height:100%;width:0%;
  background:linear-gradient(180deg,#9bf07a,#3fa832);
  transition:width .35s ease;
}
.star{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:19px;height:19px;background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/inactive-star.png') center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));
  z-index:2;transition:transform .2s;
}
#star1{left:30%;}
#star2{left:60%;}
#star3{left:calc(100% - 15px);}
.star.on{background-image:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/active-star.png');transform:translate(-50%,-50%) scale(1.18);}

/* ---------- board ---------- */
#boardWrap{position: relative; flex: 1; min-height: 0; z-index: 4; margin-top: -30px; margin-bottom: -53px;}
canvas#game{width:100%;height:100%;display:block;touch-action:none;background:transparent;position:relative;z-index:2;}
canvas#game.swap-lift{z-index:5;}

#movesPanel{
  position:absolute;left:20px;bottom:6dvh;z-index:4;
  width:72px;aspect-ratio:734/914;
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/moves-bg.png') center/100% 100% no-repeat;
  pointer-events:none;
}
#movesPanel .lbl{display:none;}
#movesPanel .val{
  position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);
  font-size:30px;font-weight:800;color:#fbd04d;text-shadow:0 3px 3px rgba(0,0,0,.7);
}

/* sound toggle: round wooden button in the bottom-right, mirroring the MOVES panel */
#soundBtn{
  position:absolute;right:14px;bottom:calc(6dvh + 22px);z-index:4;
  width:44px;height:44px;border-radius:50%;padding:9px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #f2c35a;cursor:pointer;
  background:radial-gradient(circle at 50% 35%,#b0692c 0%,#7a4219 70%,#5a2f10 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #3b200a,0 4px 8px rgba(0,0,0,.5);
  color:#fff5db;
  transition:transform .12s ease;
}
#soundBtn:active{transform:scale(.9);}
#soundBtn svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
#soundBtn .snd-off{display:none;}
#soundBtn.muted .snd-on{display:none;}
#soundBtn.muted .snd-off{display:block;}
#soundBtn.muted{color:#ffb4a8;}

#swapBtn{
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/swap-arrow.png') center/contain no-repeat;
  border:none;
  position:absolute;right:16.7%;bottom:64px;z-index:4;
  width:14.4%;max-width:69px;min-width:40px;aspect-ratio:69/78;height:auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#swapBtn canvas{pointer-events:none; position: relative; left:3px; bottom:3px; width:66.7%; aspect-ratio:1/1; height:auto;}

#comboWrap{
  position:absolute;top:8px;left:50%;transform:translateX(-50%) scale(.8);z-index:4;
  background:rgba(255,89,94,.9);padding:5px 12px;border-radius:14px;
  font-size:12.5px;font-weight:800;opacity:0;transition:opacity .2s,transform .2s;
  pointer-events:none;
}
#comboWrap.show{opacity:1;transform:translateX(-50%) scale(1);}

/* ---------- power-up dock ---------- */
#powerRow{
  position:relative;z-index:5;flex-shrink:0;
  width:100%;aspect-ratio:2172/456;
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/footer-bg.png') center 0px no-repeat;
  background-size: calc(100% + 30px);
  display:flex;justify-content:center;align-items:center;gap:14%;
  padding:0 9% calc(0px + env(safe-area-inset-bottom)) 9%;
}
.powerBtn{
  position:relative;width:56px;aspect-ratio:635/650;height:auto;
  border:none;cursor:pointer;padding:0;
  background:url('https://akm-img-a-in.tosshub.com/sites/games/bubble-blast/images/option-bg.png') center/contain no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  transition:transform .12s,filter .15s;color:#fff;
  top:18px;
}
.powerBtn:active{transform:scale(.9);}
.powerIcon{width:56px;height:38px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));position:relative; top: -5px; left:3px;}
.powerBtn.depleted{filter:grayscale(.8) brightness(.55);cursor:default;}
.powerBtn .badge{
  position:absolute;bottom:6px;right:-4px;
  background:#e23c5c;border:2px solid #ffd8dd;border-radius:50%;
  min-width:20px;height:20px;padding:0 3px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
#powerShuffle .powerIcon{
    top: -1px;
    left: -1px;
}
/* ---------- overlays ---------- */
.screen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,20,.72);backdrop-filter:blur(4px);
  transition:opacity .25s ease;z-index:10;
}
.screen.hidden{opacity:0;pointer-events:none;}
.card{
  background:linear-gradient(180deg,#8a5a34,#4a2e18);
  border:4px solid var(--gold-dark);
  border-radius:22px;padding:26px 28px;text-align:center;
  min-width:230px;box-shadow:0 14px 40px rgba(0,0,0,.5);
  animation:pop .28s ease;
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.card h1{margin:0 0 8px;font-size:23px;color:#fff5db;text-shadow:0 2px 3px rgba(0,0,0,.5);}
.card p{opacity:.85;margin:2px 0 16px;font-size:13.5px;color:#ffe6b0;}
.stat-row{display:flex;justify-content:space-between;gap:24px;font-size:14px;margin:6px 0;color:#ffe6b0;}
.stat-row b{color:#fff5db;}
.btn{
  border:none;border-radius:14px;padding:12px 20px;font-size:14.5px;font-weight:700;
  cursor:pointer;margin:6px 4px 0;color:#fff;transition:transform .12s ease;
  display:inline-block;
}
.btn:active{transform:scale(.93);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px rgba(255,89,94,.4);}
.btn-secondary{background:rgba(255,255,255,.16);}
.btn-row{display:flex;flex-wrap:wrap;justify-content:center;}
.hidden{display:none !important;}

@media (max-height: 600px) and (orientation: landscape){
 #progressPillWrap{
   top:49.5%;
 }
 #levelPill{
  top:16%;
 }
 #scorePanel{
  gap:0px;
  top:7%;
 }
 .powerBtn{
  width:45px;
  top:14px;
 }
 .powerIcon{
  height:29px;
 }
}