@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root{
  --bg:#74c8ff;--ink:#2e3038;--muted:#6d7480;--line:rgba(40,55,75,.12);
  --glass:rgba(255,255,255,.93);--shadow:0 18px 42px rgba(28,80,130,.22);
  --soft:0 8px 20px rgba(28,80,130,.16);--green:#70e542;--blue:#1e8eed;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);user-select:none}
button{font:inherit;border:0;color:inherit;cursor:pointer}
#app{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(circle at 12% 18%,rgba(255,255,255,.20),transparent 14%),
  radial-gradient(circle at 86% 28%,rgba(255,255,255,.15),transparent 12%),
  radial-gradient(circle at 50% 88%,rgba(255,255,255,.20),transparent 18%),
  linear-gradient(180deg,#78d7ff 0%,#3aa2f2 100%)}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.menu-shell{position:absolute;inset:0;z-index:38;opacity:0;visibility:hidden;pointer-events:none;background:#8bd9ff;transition:opacity .22s ease,visibility .22s ease}
.menu-shell.show{opacity:1;visibility:visible;pointer-events:auto}
.menu-frame{width:100%;height:100%;border:0;display:block;background:#8bd9ff}
/* legacy menu panels were replaced by the exact uploaded menu iframe */


.loader-screen{position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:linear-gradient(180deg,#43b6f5 0%,#8bd9ff 48%,#bdf0ff 100%);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
.loader-screen.show{opacity:1;visibility:visible}
.loader-plain{width:min(420px,calc(100% - 44px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:translateY(-10px)}
.loader-plain-title{margin:0 0 18px;font-size:clamp(32px,7vw,50px);font-weight:950;letter-spacing:-.06em;line-height:.92;color:#fff;text-shadow:0 4px 0 rgba(20,96,163,.26)}

.loader-menu-logo{position:relative;width:min(320px,84vw);height:154px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:16px;transform:translateY(-2px) rotate(-2deg)}
.loader-logo-bg{position:absolute;left:18px;right:18px;top:34px;bottom:36px;border-radius:28px;background:url("./assets/cloud.png") center/contain no-repeat;filter:drop-shadow(0 9px 0 rgba(205,225,239,.55)) drop-shadow(0 14px 16px rgba(33,96,150,.14));transform:rotate(1deg) scale(1.15);opacity:.98}
.loader-logo-word{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;font-weight:1000;line-height:.86;letter-spacing:-1.4px;max-width:100%;font-family:"Nunito",Inter,system-ui,sans-serif}
.loader-logo-word span{display:inline-block}
.loader-puzzle-word{font-size:44px;margin-top:8px}
.loader-puzzle-word span{color:var(--c);-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 4px 0 var(--s),0 7px 7px rgba(30,55,112,.24)}
.loader-blocks-word{margin-top:10px;padding:.10em .58em .24em;border-radius:999px;background:linear-gradient(180deg,#1f93ff,#0866df);box-shadow:0 6px 0 #084aa7,0 12px 14px rgba(15,82,171,.22),inset 0 3px 0 rgba(255,255,255,.22);font-size:36px;letter-spacing:-.8px;transform:rotate(1deg)}
.loader-blocks-word span{color:#fff;-webkit-text-stroke:4px rgba(255,255,255,.96);paint-order:stroke fill;text-shadow:0 2px 0 #b5c4e0,0 5px 7px rgba(31,61,101,.24)}
.loader-plain-title{display:none}
@media (max-width:420px){.loader-menu-logo{width:min(286px,84vw);height:140px;margin-bottom:14px}.loader-logo-bg{left:16px;right:16px;top:32px;bottom:34px}.loader-puzzle-word{font-size:39px}.loader-blocks-word{font-size:32px}}
.loader-plain-bar{width:min(280px,74vw);height:18px;padding:3px;border-radius:999px;border:3px solid rgba(255,255,255,.98);background:rgba(255,255,255,.22);box-shadow:0 8px 20px rgba(28,80,130,.14),inset 0 1px 0 rgba(255,255,255,.28);overflow:hidden}
.loader-fill{height:100%;width:0%;background:linear-gradient(90deg,#7eea49,#34c722);border-radius:999px;transition:none;will-change:width}
.loader-plain-copy{margin:14px 0 4px;font-size:14px;font-weight:900;letter-spacing:.02em;color:#ffffff;text-shadow:0 2px 0 rgba(39,114,171,.2)}
.loader-plain-percent{font-size:12px;font-weight:900;color:rgba(255,255,255,.82)}
@media (max-width:420px){.loader-plain-title{margin-bottom:16px}.loader-plain-bar{width:min(250px,76vw);height:16px}.loader-plain-copy{font-size:13px;margin-top:12px}}

.game-hud{position:absolute;inset:0;z-index:4;pointer-events:none}.game-hud button,.screen{pointer-events:auto}
.hud-top{position:absolute;top:max(16px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 24px));display:grid;grid-template-columns:78px 1fr 112px;gap:10px}
.round-btn,.combo-pill,.progress-card,.hud-stats,.hud-bottom,.menu-card,.panel-card{
  background:var(--glass);backdrop-filter:blur(20px);border:4px solid rgba(255,255,255,.86);box-shadow:var(--soft)}
.round-btn{height:62px;border-radius:24px;background:linear-gradient(180deg,#39a7ff,#1276dc);color:#fff;font-size:26px;font-weight:950;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.progress-card{border-radius:28px;padding:13px 16px;background:linear-gradient(180deg,#ffffff,#edf6ff);border-color:#fff}.progress-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;font-weight:950;margin-bottom:9px}.progress-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-track{height:13px;border-radius:999px;background:rgba(45,70,95,.10);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}.progress-fill{height:100%;width:0;background:linear-gradient(180deg,#8dff4a,#4fd430);border-radius:inherit;transition:width .22s cubic-bezier(.2,.9,.2,1)}
.hud-bottom{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 24px));height:74px;border-radius:34px;padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:linear-gradient(180deg,#ffffff,#eef7ff);border-color:#fff}
.soft-btn,.menu-btn,.primary-btn,.claim-btn,.setting-row,.danger-btn{border-radius:20px;font-weight:950;box-shadow:0 6px 16px rgba(0,0,0,.07);transition:transform .14s ease,box-shadow .14s ease}.soft-btn,.menu-btn,.setting-row{background:linear-gradient(180deg,#ffffff,#f2f7ff);border:2px solid rgba(255,255,255,.9)}.soft-btn:active,.menu-btn:active,.primary-btn:active,.round-btn:active,.claim-btn:active{transform:translateY(2px) scale(.985);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.floating-layer{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:hidden}.float-pop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.1);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:950;animation:floatUp .72s cubic-bezier(.16,.84,.28,1) forwards}.float-pop.bad{color:#ff3158}@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-35%) scale(.78)}15%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-155%) scale(.86)}}
.screen{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:22px;background:rgba(82,178,245,.42);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}.screen.show{opacity:1;visibility:visible}
.menu-card,.panel-card{width:min(430px,100%);border-radius:36px;padding:24px;background:linear-gradient(180deg,#ffffff,#eff8ff);box-shadow:var(--shadow);animation:cardIn .28s cubic-bezier(.16,.84,.28,1) both}@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-card{width:min(480px,100%)}.brand-row{display:flex;gap:14px;align-items:center;margin-bottom:18px}.brand-icon{margin:0;flex:0 0 74px;background:linear-gradient(180deg,#32aaff,#0d74db)}.win-badge{background:linear-gradient(180deg,#98ff3d,#42c713)}
h1,h2{margin:0 0 7px;letter-spacing:-.06em;line-height:.96}h1{font-size:38px}h2{font-size:34px}p{margin:0;color:#686861;font-weight:650;line-height:1.4;font-size:14px}
.meta-grid,.reward-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.meta-grid>div,.reward-row>div,.daily-card,.shake-ui{animation:uiShake .28s linear}@keyframes uiShake{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 5px))}40%{transform:translateX(calc(-50% + 5px))}60%{transform:translateX(calc(-50% - 3px))}80%{transform:translateX(calc(-50% + 3px))}}
@media(max-width:620px){
  .hud-top{grid-template-columns:50px 1fr 68px;width:calc(100% - 16px);gap:7px}.round-btn{height:50px;border-radius:18px}.progress-card{padding:10px 12px}.combo-pill strong{font-size:17px}.hud-bottom{width:calc(100% - 16px)}.menu-card{padding:22px}.brand-icon{width:62px;height:62px;flex-basis:62px}h1{font-size:32px}h2{font-size:30px}
}


/* Chunky LEVEL top bar adapted from the provided card style */
.topbar-wrap{
  top:max(16px,env(safe-area-inset-top));
  width:min(720px,calc(100% - 22px));
  height:132px;
  display:block;
  pointer-events:none;
}

.topbar-bg{
  position:relative;
  width:100%;
  height:104px;
  margin-top:28px;
  pointer-events:auto;
  transform:perspective(520px) rotateX(354deg);
  transform-origin:center top;
}

.bar-levelbg{
  width:calc(100% - 18px);
  height:calc(100% - 14px);
  border-radius:30px 30px 40px 40px;
  background:#3184ec;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  filter:blur(4px);
  z-index:1;
}

.bar-dark{
  width:100%;
  height:100%;
  border-radius:30px 30px 48px 48px;
  background:#205fc2;
  position:absolute;
  inset:0;
  z-index:0;
  box-shadow:inset 0 -10px 0 rgba(24,73,152,.38);
}

.bar-dark:before{
  content:"";
  position:absolute;
  top:8px;
  left:28px;
  width:38%;
  height:10px;
  background:linear-gradient(45deg,#ffffff,transparent);
  z-index:2;
  filter:blur(7px);
  transform:rotate(353deg);
  opacity:.78;
}

.bar-outline{
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  background:#fff;
  border-radius:38px 38px 54px 54px;
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 0 #b5b9c4, 0 16px 26px rgba(28,80,130,.20);
}

.topbar-content{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  grid-template-columns:132px 1fr 132px;
  gap:118px;
  align-items:center;
  padding:13px 18px 18px;
}

.topbar-box{
  height:72px;
  border-radius:22px 22px 30px 30px;
  border:0;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 0 rgba(181,185,196,.95), inset 0 4px 0 rgba(255,255,255,.82);
  display:grid;
  place-items:center;
  align-content:center;
  color:#205fc2;
  font-family:"Nunito", Inter, system-ui, sans-serif;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  transform:translateZ(1px);
}

.topbar-box:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(181,185,196,.95), inset 0 4px 0 rgba(255,255,255,.82);
}

.topbar-box .box-label{
  color:#5c7bb0;
  font-size:12px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:1000;
}

.menu-box strong,
.combo-box strong{
  font-size:30px;
  line-height:1;
  color:#205fc2;
}

.progress-box{
  align-items:stretch;
  justify-items:stretch;
  padding:11px 15px 12px;
}

.progress-box .progress-meta{
  font-family:"Nunito", Inter, system-ui, sans-serif;
  margin:0 0 8px;
  color:#205fc2;
  font-size:12px;
  text-shadow:none;
}

.progress-box .progress-meta span{
  color:#205fc2;
  font-size:13px;
  font-weight:1000;
}

.progress-box .progress-meta strong{
  color:#205fc2;
  font-size:13px;
}

.progress-box .progress-track{
  height:13px;
  border-radius:999px;
  background:#dce7f7;
  box-shadow:inset 0 3px 0 rgba(32,95,194,.10);
}

.progress-box .progress-fill{
  background:linear-gradient(180deg,#91ff4c,#4fd326);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55);
}

.top-level-card{
  width:146px;
  height:146px;
  position:absolute;
  z-index:8;
  top:-34px;
  left:50%;
  transform:translateX(-50%) perspective(220px) rotateX(350deg);
  transform-origin:center center;
  pointer-events:none;
}

.levelbg{
  width:calc(100% - 13px);
  height:calc(100% - 13px);
  border-radius:32px 32px 40px 40px;
  background:#3184ec;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  filter:blur(4px);
  z-index:2;
}

.leveldark{
  width:100%;
  height:100%;
  border-radius:32px 32px 48px 48px;
  background:#205fc2;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  box-shadow:inset 0 -12px 0 rgba(24,73,152,.38);
}

.leveldark:before{
  content:"";
  position:absolute;
  top:5px;
  left:15px;
  width:79px;
  height:9px;
  background:linear-gradient(45deg,#ffffff,transparent);
  z-index:6;
  filter:blur(7px);
  transform:rotate(353deg);
}

.leveloutline{
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  background:#ffffff;
  border-radius:38px 38px 52px 52px;
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 0 #b5b9c4, 0 16px 28px rgba(28,80,130,.22);
}

.level-content{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#fff;
  font-weight:1000;
  font-family:"Nunito", Inter, system-ui, sans-serif;
  text-shadow:0 2px 0 #184998, 0 4px 0 #184998, 0 5px 0 #184998;
}

.level-label{
  font-size:22px;
  line-height:.85em;
}

.level-number{
  font-size:50px;
  line-height:1em;
}

@media(max-width:620px){
  .topbar-wrap{
    width:calc(100% - 16px);
    height:118px;
    top:max(10px,env(safe-area-inset-top));
  }
  .topbar-bg{
    height:92px;
    margin-top:26px;
  }
  .topbar-content{
    grid-template-columns:72px 1fr 72px;
    gap:74px;
    padding:12px 12px 16px;
  }
  .topbar-box{
    height:62px;
    border-radius:20px 20px 28px 28px;
  }
  .topbar-box .box-label{
    font-size:10px;
  }
  .menu-box strong,
  .combo-box strong{
    font-size:24px;
  }
  .progress-box{
    padding:10px 12px;
  }
  .progress-box .progress-meta span{
    max-width:96px;
  }
  .top-level-card{
    width:122px;
    height:122px;
    top:-29px;
  }
  .level-label{
    font-size:18px;
  }
  .level-number{
    font-size:42px;
  }
}


.top-subbar{
  position:absolute;
  left:50%;
  top:106px;
  z-index:6;
  transform:translateX(-50%);
  min-width:min(360px,calc(100vw - 70px));
  max-width:min(520px,calc(100vw - 42px));
  height:38px;
  padding:0 22px;
  border-radius:0 0 22px 22px;
  background:linear-gradient(180deg,#ffffff,#edf6ff);
  border:4px solid #fff;
  border-top:0;
  box-shadow:0 6px 0 #b5b9c4, 0 12px 22px rgba(28,80,130,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.top-subbar span{
  font-family:"Nunito", Inter, system-ui, sans-serif;
  color:#205fc2;
  font-size:16px;
  font-weight:1000;
  line-height:1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

@media(max-width:620px){
  .top-subbar{
    top:94px;
    height:34px;
    min-width:min(260px,calc(100vw - 64px));
    padding:0 16px;
    border-radius:0 0 20px 20px;
    box-shadow:0 5px 0 #b5b9c4, 0 10px 18px rgba(28,80,130,.15);
  }
  .top-subbar span{
    font-size:14px;
  }
}

.topbar-center-space{
  height:72px;
}

.top-subbar{
  top:104px;
  height:62px;
  min-width:min(410px,calc(100vw - 58px));
  padding:8px 20px 10px;
  border-radius:0 0 26px 26px;
  display:grid;
  grid-template-rows:auto 14px;
  gap:7px;
  align-items:center;
  justify-content:stretch;
}

.subbar-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
}

.top-subbar span{
  min-width:0;
  flex:1;
  text-align:left;
}

.subbar-title-row strong{
  font-family:"Nunito", Inter, system-ui, sans-serif;
  color:#205fc2;
  font-size:15px;
  font-weight:1000;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}

.subbar-progress-track{
  width:100%;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:#dce7f7;
  box-shadow:inset 0 3px 0 rgba(32,95,194,.12);
}

.subbar-progress-track .progress-fill{
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(180deg,#91ff4c,#4fd326);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55);
  transition:width .22s cubic-bezier(.2,.9,.2,1);
}

@media(max-width:620px){
  .top-subbar{
    top:92px;
    height:56px;
    min-width:min(300px,calc(100vw - 58px));
    padding:7px 16px 9px;
    border-radius:0 0 23px 23px;
    grid-template-rows:auto 13px;
    gap:6px;
  }
  .subbar-title-row strong{
    font-size:13px;
  }
}

/* Final compact responsive top hub tune */
.topbar-wrap{
  top:max(24px,calc(env(safe-area-inset-top) + 14px));
  width:min(620px,calc(100% - 24px));
  height:106px;
  padding-top:4px;
}
.topbar-bg{
  height:78px;
  margin-top:20px;
}
.topbar-content{
  grid-template-columns:90px 1fr 90px;
  gap:82px;
  padding:10px 14px 14px;
}
.topbar-box{
  height:54px;
  border-radius:18px 18px 24px 24px;
  box-shadow:0 4px 0 rgba(181,185,196,.95), inset 0 3px 0 rgba(255,255,255,.82);
}
#menuBtn .box-label{display:none}
.menu-box strong,
.combo-box strong{
  font-size:24px;
}
.combo-box .box-label{
  font-size:10px;
}
.topbar-center-space{
  height:54px;
}
.top-level-card{
  width:108px;
  height:108px;
  top:-24px;
}
.level-label{
  font-size:15px;
}
.level-number{
  font-size:36px;
}
.top-subbar{
  top:78px;
  height:48px;
  min-width:min(350px,calc(100vw - 56px));
  padding:6px 16px 8px;
  border-radius:0 0 22px 22px;
  grid-template-rows:auto 11px;
  gap:5px;
}
.top-subbar span{
  font-size:13px;
}
.subbar-title-row strong{
  font-size:13px;
}
.subbar-progress-track{
  height:11px;
}
@media(max-width:620px){
  .topbar-wrap{
    top:max(18px,calc(env(safe-area-inset-top) + 12px));
    width:calc(100% - 14px);
    height:96px;
    padding-top:3px;
  }
  .topbar-bg{
    height:70px;
    margin-top:18px;
  }
  .topbar-content{
    grid-template-columns:56px 1fr 62px;
    gap:64px;
    padding:9px 10px 12px;
  }
  .topbar-box{
    height:48px;
    border-radius:16px 16px 22px 22px;
  }
  .combo-box .box-label{
    font-size:8.5px;
  }
  .menu-box strong,
  .combo-box strong{
    font-size:20px;
  }
  .topbar-center-space{
    height:48px;
  }
  .top-level-card{
    width:92px;
    height:92px;
    top:-20px;
  }
  .level-label{
    font-size:12px;
  }
  .level-number{
    font-size:30px;
  }
  .top-subbar{
    top:70px;
    height:43px;
    min-width:min(276px,calc(100vw - 54px));
    padding:5px 13px 7px;
    grid-template-rows:auto 10px;
    gap:5px;
  }
  .top-subbar span{
    font-size:12px;
  }
  .subbar-title-row{
    gap:10px;
  }
  .subbar-title-row strong{
    font-size:12px;
  }
  .subbar-progress-track{
    height:10px;
  }
}
@media(max-width:380px){
  .topbar-content{
    grid-template-columns:50px 1fr 58px;
    gap:58px;
    padding-inline:8px;
  }
  .top-level-card{
    width:86px;
    height:86px;
  }
  .level-number{
    font-size:28px;
  }
  .top-subbar{
    min-width:min(250px,calc(100vw - 50px));
  }
}


/* v0.2 UI alignment: keep gameplay HUD clean and match the chunky blue top bar */
:root{font-family:"Nunito",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hud-bottom{
  height:66px;
  border:4px solid #fff;
  border-radius:28px 28px 34px 34px;
  background:linear-gradient(180deg,#ffffff,#edf6ff);
  box-shadow:0 6px 0 #b5b9c4, 0 14px 24px rgba(28,80,130,.16);
}
.soft-btn,.menu-btn,.setting-row{
  color:#205fc2;
  font-family:"Nunito",Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,#ffffff,#f0f7ff);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 4px 0 rgba(181,185,196,.72), inset 0 2px 0 rgba(255,255,255,.86);
}
.menu-card,.panel-card{
  border-color:#fff;
  background:linear-gradient(180deg,#ffffff,#edf6ff);
  box-shadow:0 8px 0 #b5b9c4, 0 20px 42px rgba(28,80,130,.22);
  font-family:"Nunito",Inter,system-ui,sans-serif;
}
.menu-card h1,.menu-card h2,.panel-card h2{color:#205fc2;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.meta-grid>div,.reward-row>div,.daily-card,.shop-wallet,.shop-item,.level-btn{
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 4px 0 rgba(181,185,196,.52);
}
@media(max-width:620px){
  .hud-bottom{width:calc(100% - 16px);height:62px;gap:8px;padding:8px}
  .soft-btn{border-radius:18px;font-size:14px}
}

/* v0.3 HUD counters: top score + blocks-left, separate coins/combo chips */
#menuBtn.score-box .box-label{display:block}
.score-box,
.blocks-box{
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  padding:5px 8px 7px;
  color:#205fc2;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.score-box .box-label,
.blocks-box .box-label,
.hud-chip span{
  display:block;
  color:#5c7bb0;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.score-box strong,
.blocks-box strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(18px,3.4vw,24px);
  font-weight:1000;
  color:#205fc2;
  font-variant-numeric:tabular-nums;
}
.blocks-box .box-label{font-size:8px;letter-spacing:.045em}
.hud-chipbar{
  position:absolute;
  left:50%;
  top:max(148px,calc(env(safe-area-inset-top) + 138px));
  transform:translateX(-50%);
  z-index:4;
  width:min(330px,calc(100% - 24px));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  pointer-events:none;
}
.hud-chip{
  min-height:42px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:7px 14px 8px;
  border:4px solid #fff;
  border-radius:18px 18px 24px 24px;
  background:linear-gradient(180deg,#ffffff,#edf6ff);
  box-shadow:0 5px 0 #b5b9c4, 0 12px 22px rgba(28,80,130,.15), inset 0 2px 0 rgba(255,255,255,.85);
  font-family:"Nunito",Inter,system-ui,sans-serif;
}
.hud-chip strong{
  font-size:18px;
  line-height:1;
  color:#205fc2;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  font-variant-numeric:tabular-nums;
}
.sr-stat{display:none!important}
@media(max-width:620px){
  .topbar-content{
    grid-template-columns:72px 1fr 88px;
    gap:50px;
  }
  .score-box,
  .blocks-box{
    padding:4px 6px 6px;
  }
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:7.5px;
    letter-spacing:.045em;
  }
  .score-box strong,
  .blocks-box strong{
    font-size:clamp(16px,4.8vw,20px);
  }
  .hud-chipbar{
    top:max(132px,calc(env(safe-area-inset-top) + 124px));
    width:min(292px,calc(100% - 18px));
    gap:8px;
  }
  .hud-chip{
    min-height:38px;
    border-width:3px;
    border-radius:16px 16px 21px 21px;
    padding:6px 10px 7px;
  }
  .hud-chip span{font-size:8px}
  .hud-chip strong{font-size:16px}
}
@media(max-width:380px){
  .topbar-content{
    grid-template-columns:64px 1fr 82px;
    gap:38px;
  }
  .blocks-box .box-label{font-size:7px;letter-spacing:.03em}
  .hud-chipbar{width:calc(100% - 22px)}
}

/* v0.4: Coins + Combo live inside the same top HUD bar */
.topbar-content{
  grid-template-columns:82px 74px minmax(92px,1fr) 74px 94px;
  gap:8px;
  align-items:center;
  padding:10px 14px 14px;
}
.topbar-center-space{height:54px;min-width:92px}
.topbar-chip{
  position:relative;
  min-height:54px;
  height:54px;
  width:auto;
  border-width:0;
  border-radius:18px 18px 24px 24px;
  box-shadow:0 4px 0 rgba(181,185,196,.95), inset 0 3px 0 rgba(255,255,255,.82);
  padding:5px 6px 7px;
  pointer-events:none;
}
.score-box,.blocks-box{height:54px;min-width:0}
.topbar-chip span,
.score-box .box-label,
.blocks-box .box-label{
  font-size:8px;
  letter-spacing:.055em;
}
.topbar-chip strong,
.score-box strong,
.blocks-box strong{
  font-size:clamp(17px,2.6vw,22px);
}
.blocks-box .box-label{font-size:7.4px;letter-spacing:.025em}
/* Hide the old separate chip-bar if an older DOM/cache still has it. */
.hud-chipbar{display:none!important}
.sr-stat{display:none!important}
@media(max-width:620px){
  .topbar-content{
    grid-template-columns:minmax(50px,.9fr) minmax(48px,.8fr) minmax(72px,1.12fr) minmax(48px,.8fr) minmax(60px,1fr);
    gap:5px;
    padding:9px 8px 12px;
  }
  .topbar-center-space{height:48px;min-width:72px}
  .score-box,.blocks-box,.topbar-chip{height:48px;min-height:48px;border-radius:16px 16px 22px 22px}
  .score-box,.blocks-box,.topbar-chip{padding:4px 4px 6px}
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{font-size:6.9px;letter-spacing:.035em}
  .blocks-box .box-label{font-size:6.2px;letter-spacing:.015em}
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{font-size:clamp(14px,4.1vw,18px)}
}
@media(max-width:380px){
  .topbar-content{
    grid-template-columns:minmax(46px,.9fr) minmax(43px,.78fr) minmax(66px,1.05fr) minmax(43px,.78fr) minmax(56px,.98fr);
    gap:4px;
    padding-inline:7px;
  }
  .topbar-center-space{min-width:66px}
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{font-size:6.2px}
  .blocks-box .box-label{font-size:5.7px}
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{font-size:clamp(13px,4vw,16px)}
}


/* v0.5: equal top chips + invisible level spacer to prevent overlap */
.topbar-bg{
  --chip-h:54px;
  --level-slot:108px;
}
.topbar-content{
  grid-template-columns:repeat(2,minmax(0,1fr)) var(--level-slot) repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:10px 14px 14px !important;
}
.score-box,
.blocks-box,
.topbar-chip{
  width:100%;
  min-width:0;
  height:var(--chip-h);
  min-height:var(--chip-h);
  box-sizing:border-box;
}
.topbar-center-space{
  width:var(--level-slot);
  min-width:var(--level-slot);
  height:var(--chip-h);
  pointer-events:none;
  visibility:hidden;
}
.topbar-chip span,
.score-box .box-label,
.blocks-box .box-label{
  font-size:7.4px;
  letter-spacing:.035em;
}
.blocks-box .box-label{
  font-size:6.8px;
  letter-spacing:.01em;
}
.topbar-chip strong,
.score-box strong,
.blocks-box strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(15px,2.25vw,20px);
}
@media(max-width:620px){
  .topbar-bg{
    --chip-h:48px;
    --level-slot:92px;
  }
  .topbar-content{
    grid-template-columns:repeat(2,minmax(0,1fr)) var(--level-slot) repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
    padding:9px 8px 12px !important;
  }
  .topbar-center-space{
    width:var(--level-slot);
    min-width:var(--level-slot);
    height:var(--chip-h);
  }
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:6.1px;
    letter-spacing:.015em;
  }
  .blocks-box .box-label{
    font-size:5.55px;
    letter-spacing:0;
  }
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{
    font-size:clamp(12px,3.45vw,16px);
  }
}
@media(max-width:380px){
  .topbar-bg{
    --chip-h:46px;
    --level-slot:86px;
  }
  .topbar-content{
    gap:3px !important;
    padding-inline:6px !important;
  }
  .score-box,
  .blocks-box,
  .topbar-chip{
    height:var(--chip-h);
    min-height:var(--chip-h);
    padding:3px 2px 5px;
  }
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:5.55px;
  }
  .blocks-box .box-label{
    font-size:5.05px;
  }
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{
    font-size:clamp(11px,3.25vw,14px);
  }
}


/* v0.6: fixed 128px center spacer; only side chips compress to fit */
.topbar-bg{
  --level-slot:128px !important;
}
.topbar-content{
  grid-template-columns:repeat(2,minmax(0,1fr)) 128px repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
  padding-inline:10px !important;
}
.topbar-center-space{
  width:128px !important;
  min-width:128px !important;
  max-width:128px !important;
  flex:0 0 128px !important;
}
.score-box,
.blocks-box,
.topbar-chip{
  min-width:0 !important;
  padding-left:4px !important;
  padding-right:4px !important;
  overflow:hidden;
}
.topbar-chip span,
.score-box .box-label,
.blocks-box .box-label{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:620px){
  .topbar-wrap{
    width:calc(100% - 8px);
  }
  .topbar-content{
    grid-template-columns:repeat(2,minmax(0,1fr)) 128px repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
    padding-inline:5px !important;
  }
  .topbar-center-space{
    width:128px !important;
    min-width:128px !important;
    max-width:128px !important;
  }
  .score-box,
  .blocks-box,
  .topbar-chip{
    padding-left:2px !important;
    padding-right:2px !important;
  }
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:5.35px !important;
    letter-spacing:0 !important;
  }
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{
    font-size:clamp(10px,3.1vw,15px) !important;
  }
}
@media(max-width:380px){
  .topbar-content{
    gap:2px !important;
    padding-inline:4px !important;
  }
  .topbar-center-space{
    width:128px !important;
    min-width:128px !important;
    max-width:128px !important;
  }
  .score-box,
  .blocks-box,
  .topbar-chip{
    padding-left:1px !important;
    padding-right:1px !important;
  }
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:4.9px !important;
  }
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{
    font-size:clamp(9px,2.85vw,13px) !important;
  }
}

/* v0.7: real fluid mobile scale for the top hub (384x853 safe) */
.topbar-wrap{
  top:max(env(safe-area-inset-top), clamp(10px, 2.7vw, 18px)) !important;
  width:min(620px, calc(100% - clamp(10px, 3.4vw, 24px))) !important;
  height:clamp(84px, 23vw, 108px) !important;
  padding-top:clamp(2px, .9vw, 6px) !important;
}
.topbar-bg{
  height:clamp(60px, 17vw, 78px) !important;
  margin-top:clamp(14px, 4.4vw, 22px) !important;
  --hub-gap:clamp(2px, .72vw, 6px);
  --hub-pad-x:clamp(5px, 1.7vw, 12px);
  --hub-pad-top:clamp(6px, 2vw, 10px);
  --hub-pad-bottom:clamp(8px, 2.7vw, 14px);
  --hub-chip-h:clamp(40px, 11vw, 54px);
  --hub-chip-radius:clamp(13px, 4vw, 20px);
  --hub-depth:clamp(2px, .9vw, 5px);
  --hub-label-size:clamp(4.85px, 1.43vw, 7.4px);
  --hub-value-size:clamp(10.5px, 3.35vw, 18px);
  --hub-border-plus:clamp(10px, 3.1vw, 20px);
  --hub-soft-shadow:clamp(12px, 4vw, 24px);
  --level-card-size:clamp(78px, 22vw, 108px);
  --level-card-top:calc(var(--level-card-size) * -0.225);
  --level-slot:128px !important;
}
.topbar-content{
  grid-template-columns:repeat(2,minmax(0,1fr)) 128px repeat(2,minmax(0,1fr)) !important;
  gap:var(--hub-gap) !important;
  padding:var(--hub-pad-top) var(--hub-pad-x) var(--hub-pad-bottom) !important;
}
.score-box,
.blocks-box,
.topbar-chip{
  height:var(--hub-chip-h) !important;
  min-height:var(--hub-chip-h) !important;
  border-radius:var(--hub-chip-radius) var(--hub-chip-radius) calc(var(--hub-chip-radius) + 6px) calc(var(--hub-chip-radius) + 6px) !important;
  padding:clamp(2px, .9vw, 5px) clamp(1px, .65vw, 4px) clamp(4px, 1.2vw, 7px) !important;
  box-shadow:0 var(--hub-depth) 0 rgba(181,185,196,.95), inset 0 clamp(2px,.65vw,4px) 0 rgba(255,255,255,.82) !important;
}
.topbar-center-space{
  width:128px !important;
  min-width:128px !important;
  max-width:128px !important;
  height:var(--hub-chip-h) !important;
}
.topbar-chip span,
.score-box .box-label,
.blocks-box .box-label{
  font-size:var(--hub-label-size) !important;
  letter-spacing:clamp(-.015em, .12vw, .035em) !important;
  line-height:1 !important;
}
.blocks-box .box-label{
  font-size:calc(var(--hub-label-size) * .9) !important;
  letter-spacing:-.025em !important;
}
.topbar-chip strong,
.score-box strong,
.blocks-box strong{
  font-size:var(--hub-value-size) !important;
  line-height:1 !important;
}
.bar-dark{
  border-radius:clamp(19px, 6vw, 30px) clamp(19px, 6vw, 30px) clamp(28px, 8vw, 48px) clamp(28px, 8vw, 48px) !important;
  box-shadow:inset 0 calc(var(--hub-depth) * -2.2) 0 rgba(24,73,152,.38) !important;
}
.bar-levelbg{
  width:calc(100% - clamp(9px, 2.8vw, 18px)) !important;
  height:calc(100% - clamp(7px, 2.2vw, 14px)) !important;
  border-radius:clamp(19px, 6vw, 30px) clamp(19px, 6vw, 30px) clamp(28px, 8vw, 40px) clamp(28px, 8vw, 40px) !important;
  filter:blur(clamp(2px, .9vw, 4px)) !important;
}
.bar-outline{
  width:calc(100% + var(--hub-border-plus)) !important;
  height:calc(100% + var(--hub-border-plus)) !important;
  border-radius:clamp(24px, 7vw, 38px) clamp(24px, 7vw, 38px) clamp(34px, 9vw, 54px) clamp(34px, 9vw, 54px) !important;
  box-shadow:0 clamp(4px, 1.45vw, 8px) 0 #b5b9c4, 0 clamp(9px, 3vw, 16px) var(--hub-soft-shadow) rgba(28,80,130,.20) !important;
}
.bar-dark:before{
  top:clamp(4px, 1.4vw, 8px) !important;
  left:clamp(12px, 5vw, 28px) !important;
  height:clamp(5px, 1.9vw, 10px) !important;
  filter:blur(clamp(3px, 1.55vw, 7px)) !important;
}
.top-level-card{
  width:var(--level-card-size) !important;
  height:var(--level-card-size) !important;
  top:var(--level-card-top) !important;
}
.levelbg{
  border-radius:clamp(19px, 6vw, 32px) clamp(19px, 6vw, 32px) clamp(27px, 8vw, 40px) clamp(27px, 8vw, 40px) !important;
  filter:blur(clamp(2px, .9vw, 4px)) !important;
}
.leveldark{
  border-radius:clamp(19px, 6vw, 32px) clamp(19px, 6vw, 32px) clamp(31px, 9vw, 48px) clamp(31px, 9vw, 48px) !important;
  box-shadow:inset 0 clamp(-12px, -2.9vw, -7px) 0 rgba(24,73,152,.38) !important;
}
.leveloutline{
  width:calc(100% + clamp(11px, 3.1vw, 20px)) !important;
  height:calc(100% + clamp(11px, 3.1vw, 20px)) !important;
  border-radius:clamp(24px, 7vw, 38px) clamp(24px, 7vw, 38px) clamp(34px, 9vw, 52px) clamp(34px, 9vw, 52px) !important;
  box-shadow:0 clamp(4px, 1.45vw, 8px) 0 #b5b9c4, 0 clamp(8px, 2.8vw, 16px) clamp(16px, 5vw, 28px) rgba(28,80,130,.22) !important;
}
.leveldark:before{
  top:clamp(3px, 1.2vw, 5px) !important;
  left:clamp(8px, 3.9vw, 15px) !important;
  width:calc(var(--level-card-size) * .55) !important;
  height:clamp(4px, 1.45vw, 9px) !important;
  filter:blur(clamp(3px, 1.5vw, 7px)) !important;
}
.level-label{
  font-size:clamp(9px, 2.75vw, 15px) !important;
  line-height:.86 !important;
}
.level-number{
  font-size:clamp(24px, 7.1vw, 36px) !important;
  line-height:1 !important;
}
.top-subbar{
  top:clamp(58px, 17vw, 78px) !important;
  height:clamp(34px, 10vw, 48px) !important;
  min-width:min(clamp(230px, 74vw, 350px), calc(100vw - clamp(44px, 13vw, 60px))) !important;
  max-width:calc(100vw - clamp(40px, 12vw, 64px)) !important;
  padding:clamp(4px, 1.35vw, 7px) clamp(11px, 3.4vw, 17px) clamp(5px, 1.8vw, 9px) !important;
  border-width:clamp(2px, .82vw, 4px) !important;
  border-radius:0 0 clamp(18px, 5.8vw, 26px) clamp(18px, 5.8vw, 26px) !important;
  grid-template-rows:auto clamp(8px, 2.55vw, 11px) !important;
  gap:clamp(3px, 1.1vw, 5px) !important;
  box-shadow:0 clamp(3px, 1.25vw, 6px) 0 #b5b9c4, 0 clamp(7px, 2.5vw, 12px) clamp(13px, 4.2vw, 22px) rgba(28,80,130,.16) !important;
}
.top-subbar span,
.subbar-title-row strong{
  font-size:clamp(9.5px, 2.9vw, 13px) !important;
  line-height:1 !important;
}
.subbar-title-row{
  gap:clamp(6px, 2.3vw, 16px) !important;
}
.subbar-progress-track{
  height:clamp(8px, 2.55vw, 11px) !important;
}

@media(max-width:390px){
  .topbar-bg{
    --hub-gap:2px;
    --hub-pad-x:5px;
    --hub-label-size:4.65px;
    --hub-value-size:11px;
    --level-card-size:80px;
  }
  .topbar-wrap{
    width:calc(100% - 10px) !important;
  }
  .blocks-box .box-label{
    font-size:4.25px !important;
  }
}

/* v0.8: base outlines fixed requested size */
.bar-outline,
.leveloutline{
  width:calc(100% + 16px) !important;
  height:calc(100% + 16px) !important;
}

/* v0.9: keep mobile top HUD readable by reducing wasted spacing instead of shrinking type */
@media(max-width:620px){
  .topbar-wrap{
    width:calc(100% - clamp(4px, 1.6vw, 10px)) !important;
  }
  .topbar-bg{
    --hub-gap:clamp(1px, .45vw, 3px) !important;
    --hub-pad-x:clamp(2px, .9vw, 5px) !important;
    --hub-pad-top:clamp(4px, 1.35vw, 7px) !important;
    --hub-pad-bottom:clamp(6px, 1.8vw, 10px) !important;
    --hub-chip-h:clamp(38px, 10.2vw, 50px) !important;
    --hub-label-size:clamp(6.1px, 1.72vw, 7.4px) !important;
    --hub-value-size:clamp(14px, 4.05vw, 18px) !important;
    --hub-chip-radius:clamp(12px, 3.45vw, 17px) !important;
  }
  .topbar-content{
    gap:var(--hub-gap) !important;
    padding:var(--hub-pad-top) var(--hub-pad-x) var(--hub-pad-bottom) !important;
  }
  .score-box,
  .blocks-box,
  .topbar-chip{
    padding:clamp(1px, .45vw, 3px) clamp(0px, .45vw, 2px) clamp(3px, .9vw, 5px) !important;
  }
  .topbar-chip span,
  .score-box .box-label,
  .blocks-box .box-label{
    font-size:var(--hub-label-size) !important;
    letter-spacing:0 !important;
  }
  .blocks-box .box-label{
    font-size:calc(var(--hub-label-size) * .86) !important;
    letter-spacing:-.045em !important;
  }
  .topbar-chip strong,
  .score-box strong,
  .blocks-box strong{
    font-size:var(--hub-value-size) !important;
  }
}

@media(max-width:390px){
  .topbar-wrap{
    width:calc(100% - 6px) !important;
  }
  .topbar-bg{
    --hub-gap:1px !important;
    --hub-pad-x:3px !important;
    --hub-pad-top:4px !important;
    --hub-pad-bottom:7px !important;
    --hub-chip-h:39px !important;
    --hub-label-size:6.25px !important;
    --hub-value-size:15px !important;
  }
  .score-box,
  .blocks-box,
  .topbar-chip{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .blocks-box .box-label{
    font-size:5.45px !important;
    letter-spacing:-.055em !important;
  }
}

/* v1.4 bottom menu: fluid 3D icon bar */
.hud-bottom.menu-bar{
  --bottom-btn:clamp(58px, min(15.4vw, 8.4vh), 92px);
  --bottom-gap:clamp(8px, calc(var(--bottom-btn) * .20), 26px);
  --bottom-pad-x:clamp(10px, calc(var(--bottom-btn) * .28), 28px);
  --bottom-panel-extra:clamp(25px, calc(var(--bottom-btn) * .54), 50px);
  --bottom-h:calc(var(--bottom-btn) + var(--bottom-panel-extra));
  --bottom-inner:clamp(6px, calc(var(--bottom-btn) * .105), 10px);
  --bottom-z:clamp(10px, calc(var(--bottom-btn) * .18), 18px);
  position:absolute;
  left:50%;
  bottom:max(clamp(7px,1.7vh,14px),env(safe-area-inset-bottom));
  width:max-content;
  max-width:calc(100% - clamp(10px,3.2vw,24px));
  height:var(--bottom-h);
  padding:0 var(--bottom-pad-x);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  transform:translateX(-50%) perspective(620px) rotateX(-7deg);
  transform-style:preserve-3d;
  overflow:visible;
  pointer-events:auto;
}
.hud-bottom.menu-bar .bar-outline{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border-radius:999px !important;
  background:#fff;
  box-shadow:0 clamp(5px,calc(var(--bottom-btn) * .095),9px) 0 #c6cbd3,0 clamp(9px,calc(var(--bottom-btn) * .17),15px) clamp(13px,calc(var(--bottom-btn) * .24),22px) rgba(49,71,102,.16) !important;
  z-index:1;
  transform:translateZ(0) !important;
}
.hud-bottom.menu-bar .bar-face{
  position:absolute;
  inset:var(--bottom-inner);
  border-radius:999px;
  background:linear-gradient(180deg,#f8f9fb 0%,#eef1f5 100%);
  z-index:2;
  overflow:hidden;
  transform:translateZ(4px);
}
.hud-bottom.menu-bar .bar-face::before{
  content:"";
  position:absolute;
  top:clamp(6px,calc(var(--bottom-btn) * .12),10px);
  left:clamp(16px,calc(var(--bottom-btn) * .34),32px);
  width:68%;
  height:clamp(10px,calc(var(--bottom-btn) * .21),20px);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.22),transparent);
  filter:blur(clamp(3px,calc(var(--bottom-btn) * .055),6px));
  opacity:.85;
}
.hud-bottom.menu-bar .menu-content{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--bottom-gap);
  transform:translateZ(var(--bottom-z));
  transform-style:preserve-3d;
  margin:0 clamp(6px,calc(var(--bottom-btn) * .18),20px) clamp(5px,calc(var(--bottom-btn) * .085),9px);
}
.hud-bottom.menu-bar .ui-btn{
  --main:#4398f5;
  --top:#74c2ff;
  --dark:#2368cb;
  --shadow:#1a529f;
  position:relative;
  width:var(--bottom-btn);
  height:var(--bottom-btn);
  flex:0 0 var(--bottom-btn);
  border:0;
  padding:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  transform:translateZ(clamp(8px,calc(var(--bottom-btn) * .13),12px));
  transform-style:preserve-3d;
  box-shadow:none;
  color:#fff;
}
.hud-bottom.menu-bar .ui-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--dark);
  box-shadow:0 clamp(2px,calc(var(--bottom-btn) * .035),3px) 0 var(--shadow),0 clamp(5px,calc(var(--bottom-btn) * .075),8px) clamp(7px,calc(var(--bottom-btn) * .105),10px) rgba(0,0,0,.14);
  z-index:1;
}
.hud-bottom.menu-bar .face{
  position:absolute;
  border-radius:inherit;
  background:var(--main);
  filter:blur(clamp(.8px,calc(var(--bottom-btn) * .015),1.4px));
  z-index:2;
  overflow:hidden;
  top:clamp(2px,calc(var(--bottom-btn) * .035),3px);
  width:calc(100% - clamp(5px,calc(var(--bottom-btn) * .08),8px));
  height:calc(100% - clamp(5px,calc(var(--bottom-btn) * .08),8px));
  left:50%;
  transform:translateX(-50%);
}
.hud-bottom.menu-bar .face::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 20%,var(--top) 0%,rgba(255,255,255,.08) 30%,transparent 55%);
  filter:blur(clamp(4px,calc(var(--bottom-btn) * .065),7px));
  opacity:.95;
}
.hud-bottom.menu-bar .face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 100%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 34%,transparent 62%);
  opacity:.8;
}
.hud-bottom.menu-bar .shine{
  position:absolute;
  top:18%;
  left:18%;
  width:47%;
  height:6%;
  border-radius:999px;
  background:linear-gradient(11deg,#fff,transparent);
  filter:blur(clamp(2px,calc(var(--bottom-btn) * .04),4px));
  opacity:.82;
  transform:translate(-2px,-2px) rotate(334deg);
  z-index:3;
  pointer-events:none;
}
.hud-bottom.menu-bar .icon{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  color:#fff;
}
.hud-bottom.menu-bar .icon svg{
  width:clamp(32px,calc(var(--bottom-btn) * .56),52px);
  height:clamp(32px,calc(var(--bottom-btn) * .56),52px);
  overflow:visible;
  fill:currentColor;
  filter:drop-shadow(0 clamp(1px,calc(var(--bottom-btn) * .025),2px) 0 rgba(24,73,152,.9)) drop-shadow(0 clamp(2px,calc(var(--bottom-btn) * .045),4px) 0 rgba(24,73,152,.78)) drop-shadow(0 clamp(4px,calc(var(--bottom-btn) * .065),6px) 4px rgba(0,35,95,.22));
}
.hud-bottom.menu-bar .icon svg *{fill:currentColor}
.hud-bottom.menu-bar .blue{--main:#4398f5;--top:#74c2ff;--dark:#2368cb;--shadow:#1a529f}
.hud-bottom.menu-bar .purple{--main:#9649f5;--top:#c07cff;--dark:#6321bb;--shadow:#4d1892}
.hud-bottom.menu-bar .yellow{--main:#ffbf27;--top:#ffe073;--dark:#ca8500;--shadow:#9f6700}
.hud-bottom.menu-bar .pink{--main:#f54892;--top:#ff7db8;--dark:#b92060;--shadow:#8f1849}
.hud-bottom.menu-bar .badge,
.hud-bottom.menu-bar .plus{
  position:absolute;
  z-index:10;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:1000;
  isolation:isolate;
  text-shadow:0 2px 0 rgba(24,73,152,.7),0 4px 0 rgba(24,73,152,.45);
}
.hud-bottom.menu-bar .badge{
  top:-8%;
  right:-6%;
  width:clamp(25px,calc(var(--bottom-btn) * .44),40px);
  height:clamp(25px,calc(var(--bottom-btn) * .44),40px);
  border-radius:999px;
  font-size:clamp(15px,calc(var(--bottom-btn) * .24),23px);
  background:#9250ea;
  box-shadow:0 clamp(2px,calc(var(--bottom-btn) * .035),3px) 0 #6c2fc3,0 clamp(4px,calc(var(--bottom-btn) * .07),6px) 8px rgba(70,32,126,.18);
}
.hud-bottom.menu-bar .badge::before,
.hud-bottom.menu-bar .plus::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:inherit;
  filter:blur(clamp(3px,calc(var(--bottom-btn) * .055),5px));
  opacity:.75;
  z-index:-1;
}
.hud-bottom.menu-bar .badge::before{background:#b06bff}
.hud-bottom.menu-bar .plus{
  right:-8%;
  bottom:-2%;
  width:clamp(25px,calc(var(--bottom-btn) * .42),38px);
  height:clamp(25px,calc(var(--bottom-btn) * .42),38px);
  border-radius:999px;
  font-size:clamp(20px,calc(var(--bottom-btn) * .34),30px);
  line-height:1;
  background:#2ec861;
  box-shadow:0 clamp(2px,calc(var(--bottom-btn) * .035),3px) 0 #1b9a48,0 clamp(4px,calc(var(--bottom-btn) * .07),6px) 8px rgba(22,105,50,.18);
}
.hud-bottom.menu-bar .plus::before{background:#52de7a}
.hud-bottom.menu-bar .ui-btn:active{
  transform:translateY(3px) translateZ(8px);
}
.hud-bottom.menu-bar .ui-btn:active::before{
  box-shadow:0 1px 0 var(--shadow),0 4px 6px rgba(0,0,0,.12);
}
@media(max-width:430px){
  .hud-bottom.menu-bar{
    --bottom-btn:clamp(58px, 15.2vw, 64px);
    --bottom-gap:clamp(7px, 2.2vw, 10px);
    --bottom-pad-x:clamp(8px, 2.6vw, 12px);
    --bottom-panel-extra:clamp(23px, 6.6vw, 28px);
    max-width:calc(100% - 8px);
  }
  .hud-bottom.menu-bar .menu-content{
    margin:0 clamp(4px,1.5vw,8px) 5px;
  }
}
@media(max-width:360px){
  .hud-bottom.menu-bar{
    --bottom-btn:54px;
    --bottom-gap:7px;
    --bottom-pad-x:8px;
    --bottom-panel-extra:23px;
  }
}
@media(max-height:700px){
  .hud-bottom.menu-bar{
    --bottom-btn:clamp(54px, 14vh, 70px);
    --bottom-panel-extra:clamp(22px, 5.7vh, 34px);
    bottom:max(6px,env(safe-area-inset-bottom));
  }
}

/* v1.5 bottom menu: smaller, less padding, lighter border */
.hud-bottom.menu-bar{
  --bottom-btn:clamp(46px, min(12.8vw, 7vh), 72px) !important;
  --bottom-gap:clamp(5px, calc(var(--bottom-btn) * .13), 14px) !important;
  --bottom-pad-x:clamp(5px, calc(var(--bottom-btn) * .16), 14px) !important;
  --bottom-panel-extra:clamp(14px, calc(var(--bottom-btn) * .36), 26px) !important;
  --bottom-h:calc(var(--bottom-btn) + var(--bottom-panel-extra)) !important;
  --bottom-inner:clamp(3px, calc(var(--bottom-btn) * .075), 7px) !important;
  --bottom-z:clamp(7px, calc(var(--bottom-btn) * .12), 12px) !important;
  bottom:max(clamp(5px, 1.15vh, 10px), env(safe-area-inset-bottom)) !important;
  max-width:calc(100% - clamp(6px, 2vw, 16px)) !important;
  padding:0 var(--bottom-pad-x) !important;
}
.hud-bottom.menu-bar .bar-outline{
  box-shadow:
    0 clamp(3px, calc(var(--bottom-btn) * .06), 6px) 0 #c6cbd3,
    0 clamp(6px, calc(var(--bottom-btn) * .12), 12px) clamp(8px, calc(var(--bottom-btn) * .18), 16px) rgba(49,71,102,.14) !important;
}
.hud-bottom.menu-bar .bar-face{
  inset:var(--bottom-inner) !important;
}
.hud-bottom.menu-bar .bar-face::before{
  top:clamp(4px, calc(var(--bottom-btn) * .09), 8px) !important;
  left:clamp(12px, calc(var(--bottom-btn) * .25), 22px) !important;
  height:clamp(7px, calc(var(--bottom-btn) * .15), 13px) !important;
  filter:blur(clamp(2px, calc(var(--bottom-btn) * .04), 4px)) !important;
  opacity:.72 !important;
}
.hud-bottom.menu-bar .menu-content{
  gap:var(--bottom-gap) !important;
  margin:0 clamp(2px, calc(var(--bottom-btn) * .08), 8px) clamp(2px, calc(var(--bottom-btn) * .055), 5px) !important;
}
.hud-bottom.menu-bar .ui-btn{
  width:var(--bottom-btn) !important;
  height:var(--bottom-btn) !important;
  flex:0 0 var(--bottom-btn) !important;
  transform:translateZ(clamp(6px, calc(var(--bottom-btn) * .10), 10px)) !important;
}
.hud-bottom.menu-bar .ui-btn::before{
  box-shadow:
    0 clamp(1px, calc(var(--bottom-btn) * .03), 2px) 0 var(--shadow),
    0 clamp(3px, calc(var(--bottom-btn) * .06), 5px) clamp(4px, calc(var(--bottom-btn) * .09), 7px) rgba(0,0,0,.12) !important;
}
.hud-bottom.menu-bar .face{
  top:clamp(1px, calc(var(--bottom-btn) * .025), 2px) !important;
  width:calc(100% - clamp(4px, calc(var(--bottom-btn) * .065), 6px)) !important;
  height:calc(100% - clamp(4px, calc(var(--bottom-btn) * .065), 6px)) !important;
  filter:blur(clamp(.55px, calc(var(--bottom-btn) * .011), 1px)) !important;
}
.hud-bottom.menu-bar .face::before{
  filter:blur(clamp(3px, calc(var(--bottom-btn) * .052), 5px)) !important;
}
.hud-bottom.menu-bar .shine{
  top:17% !important;
  left:17% !important;
  width:43% !important;
  height:5.2% !important;
  filter:blur(clamp(1.4px, calc(var(--bottom-btn) * .032), 3px)) !important;
  opacity:.72 !important;
}
.hud-bottom.menu-bar .icon svg{
  width:clamp(25px, calc(var(--bottom-btn) * .52), 38px) !important;
  height:clamp(25px, calc(var(--bottom-btn) * .52), 38px) !important;
  filter:
    drop-shadow(0 1px 0 rgba(24,73,152,.88))
    drop-shadow(0 2px 0 rgba(24,73,152,.72))
    drop-shadow(0 4px 3px rgba(0,35,95,.20)) !important;
}
.hud-bottom.menu-bar .badge{
  top:-6% !important;
  right:-5% !important;
  width:clamp(18px, calc(var(--bottom-btn) * .36), 27px) !important;
  height:clamp(18px, calc(var(--bottom-btn) * .36), 27px) !important;
  font-size:clamp(11px, calc(var(--bottom-btn) * .20), 16px) !important;
  box-shadow:0 2px 0 #6c2fc3, 0 4px 6px rgba(70,32,126,.16) !important;
}
.hud-bottom.menu-bar .plus{
  right:-6% !important;
  bottom:-1% !important;
  width:clamp(18px, calc(var(--bottom-btn) * .35), 26px) !important;
  height:clamp(18px, calc(var(--bottom-btn) * .35), 26px) !important;
  font-size:clamp(15px, calc(var(--bottom-btn) * .28), 22px) !important;
  box-shadow:0 2px 0 #1b9a48, 0 4px 6px rgba(22,105,50,.16) !important;
}
.hud-bottom.menu-bar .badge::before,
.hud-bottom.menu-bar .plus::before{
  inset:15% !important;
  filter:blur(clamp(2px, calc(var(--bottom-btn) * .04), 3.5px)) !important;
}
.hud-bottom.menu-bar .ui-btn:active{
  transform:translateY(2px) translateZ(6px) !important;
}

@media(max-width:430px){
  .hud-bottom.menu-bar{
    --bottom-btn:clamp(45px, 12.6vw, 50px) !important;
    --bottom-gap:clamp(4px, 1.4vw, 6px) !important;
    --bottom-pad-x:clamp(4px, 1.7vw, 7px) !important;
    --bottom-panel-extra:clamp(14px, 4.5vw, 18px) !important;
    max-width:calc(100% - 6px) !important;
  }
}
@media(max-width:360px){
  .hud-bottom.menu-bar{
    --bottom-btn:44px !important;
    --bottom-gap:4px !important;
    --bottom-pad-x:4px !important;
    --bottom-panel-extra:14px !important;
  }
}
@media(max-height:700px){
  .hud-bottom.menu-bar{
    --bottom-btn:clamp(44px, 11vh, 58px) !important;
    --bottom-panel-extra:clamp(13px, 3.7vh, 20px) !important;
    bottom:max(4px, env(safe-area-inset-bottom)) !important;
  }
}


/* v1.6 bottom menu: fixed 360px pill, proportional height, slightly wider gaps */
.hud-bottom.menu-bar{
  --bottom-panel-w:min(360px, calc(100vw - 14px)) !important;
  --bottom-btn:64px !important;
  --bottom-gap:clamp(8px, calc(var(--bottom-panel-w) * .032), 12px) !important;
  --bottom-pad-x:clamp(9px, calc(var(--bottom-panel-w) * .035), 14px) !important;
  --bottom-panel-extra:clamp(21px, calc(var(--bottom-panel-w) * .066), 26px) !important;
  --bottom-h:calc(var(--bottom-btn) + var(--bottom-panel-extra)) !important;
  --bottom-inner:clamp(5px, calc(var(--bottom-panel-w) * .017), 7px) !important;
  width:var(--bottom-panel-w) !important;
  max-width:var(--bottom-panel-w) !important;
  padding:0 var(--bottom-pad-x) !important;
}
.hud-bottom.menu-bar .menu-content{
  gap:var(--bottom-gap) !important;
  margin:0 clamp(5px, calc(var(--bottom-panel-w) * .025), 9px) clamp(3px, calc(var(--bottom-panel-w) * .013), 5px) !important;
}
.hud-bottom.menu-bar .bar-outline{
  box-shadow:
    0 clamp(4px, calc(var(--bottom-panel-w) * .014), 5px) 0 #c6cbd3,
    0 clamp(7px, calc(var(--bottom-panel-w) * .026), 10px) clamp(10px, calc(var(--bottom-panel-w) * .036), 14px) rgba(49,71,102,.14) !important;
}
.hud-bottom.menu-bar .icon svg{
  width:34px !important;
  height:34px !important;
}
@media(max-width:370px){
  .hud-bottom.menu-bar{
    --bottom-panel-w:calc(100vw - 12px) !important;
    --bottom-gap:clamp(6px, calc(var(--bottom-panel-w) * .026), 9px) !important;
    --bottom-pad-x:8px !important;
  }
}
@media(max-height:700px){
  .hud-bottom.menu-bar{
    --bottom-h:clamp(66px, calc(var(--bottom-btn) + 18px), 78px) !important;
  }
}

/* v1.9 juice pass: subtle satisfying UI feedback */
.juice-pop{
  animation:juicePop .34s cubic-bezier(.16,1.08,.28,1) both !important;
}
.juice-warn{
  animation:juiceWarn .34s cubic-bezier(.16,1.08,.28,1) both !important;
}
@keyframes juicePop{
  0%{transform:translateZ(0) scale(1)}
  42%{transform:translateZ(0) scale(1.105)}
  100%{transform:translateZ(0) scale(1)}
}
@keyframes juiceWarn{
  0%,100%{filter:none;transform:translateZ(0) scale(1)}
  30%{filter:brightness(1.08) saturate(1.12);transform:translateZ(0) scale(1.07)}
  55%{transform:translateZ(0) translateX(-2px) scale(1.02)}
  75%{transform:translateZ(0) translateX(2px) scale(1.02)}
}
.progress-juice{
  box-shadow:0 0 0 3px rgba(119,255,124,.18),0 0 16px rgba(119,255,124,.46);
  filter:saturate(1.14) brightness(1.05);
}
.fly-coin{
  position:absolute;
  left:var(--sx);
  top:var(--sy);
  width:16px;
  height:16px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 28%, #fff7ad 0 22%, #ffd84a 24% 60%, #f49a17 61% 100%);
  box-shadow:0 2px 0 #d9820e,0 6px 10px rgba(119,73,0,.18);
  transform:translate(-50%,-50%) scale(.78);
  animation:coinFly .82s cubic-bezier(.18,.86,.22,1) forwards;
  z-index:30;
}
.fly-coin::after{
  content:"";
  position:absolute;
  inset:4px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  transform:rotate(18deg);
}
@keyframes coinFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(0deg)}
  15%{opacity:1;transform:translate(calc(-50% + 0px),calc(-50% - 28px)) scale(1.05) rotate(80deg)}
  100%{opacity:0;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%) scale(.38) rotate(360deg)}
}
.float-pop{
  will-change:transform,opacity;
}
.float-pop:not(.bad){
  color:#1f6dd6;
}
@media(max-width:430px){
  .fly-coin{width:13px;height:13px}
}

/* v2.0 HUD cleanup: combo chip becomes pause button, camera loses plus, bottom Home removed */
.pause-chip{
  pointer-events:auto !important;
  cursor:pointer;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#ffffff 0%,#edf3fb 100%);
  color:#1d67c7;
  transform:translateZ(0);
}
.pause-chip:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:2px;
}
.pause-chip .pause-lines{
  width:clamp(22px, 5.4vw, 34px);
  height:clamp(18px, 4.4vw, 26px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:stretch;
  filter:drop-shadow(0 2px 0 rgba(24,73,152,.28));
}
.pause-chip .pause-lines i{
  display:block;
  height:clamp(4px, 1vw, 6px);
  border-radius:999px;
  background:linear-gradient(180deg,#3aa5ff 0%,#116fd8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 2px 0 rgba(24,73,152,.24);
}
.pause-chip:active .pause-lines{
  transform:translateY(2px) scale(.96);
}
@media(max-width:430px){
  .pause-chip .pause-lines{
    width:clamp(20px, 5.1vw, 28px);
    height:clamp(16px, 4.05vw, 22px);
  }
  .pause-chip .pause-lines i{
    height:clamp(3px, .85vw, 5px);
  }
}

/* v2.1 top/bottom layout polish */
.topbar-content{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) 128px minmax(0,1fr) minmax(0,1fr) !important;
}
.pause-chip{
  order:0;
}
.score-box{order:1;}
.topbar-center-space{order:2;}
.coin-chip{order:3;}
.blocks-box{order:4;}

/* keep top chips readable: reduce waste, not type */
.topbar-bg{
  --hub-label-size:clamp(7px, 1.95vw, 9px) !important;
  --hub-value-size:clamp(16px, 4.25vw, 21px) !important;
}
.topbar-chip span,
.score-box .box-label,
.blocks-box .box-label{
  font-size:var(--hub-label-size) !important;
  letter-spacing:.01em !important;
}
.blocks-box .box-label{
  font-size:clamp(6.2px, 1.58vw, 7.6px) !important;
  letter-spacing:-.035em !important;
}
.topbar-chip strong,
.score-box strong,
.blocks-box strong{
  font-size:var(--hub-value-size) !important;
}
.pause-chip .pause-lines{
  width:clamp(24px, 5.8vw, 36px) !important;
  height:clamp(19px, 4.7vw, 28px) !important;
}
.pause-chip .pause-lines i{
  height:clamp(4px, 1.08vw, 6px) !important;
}

/* bottom menu should shrink-wrap the 3 action buttons instead of staying 360px */
.hud-bottom.menu-bar{
  --bottom-panel-w:auto !important;
  --bottom-btn:64px !important;
  --bottom-gap:12px !important;
  --bottom-pad-x:14px !important;
  --bottom-panel-extra:24px !important;
  --bottom-h:88px !important;
  width:max-content !important;
  max-width:calc(100vw - 14px) !important;
  padding:0 var(--bottom-pad-x) !important;
}
.hud-bottom.menu-bar .menu-content{
  gap:var(--bottom-gap) !important;
  margin:0 6px 4px !important;
}
.hud-bottom.menu-bar .ui-btn{
  width:var(--bottom-btn) !important;
  height:var(--bottom-btn) !important;
  flex:0 0 var(--bottom-btn) !important;
}

@media(max-width:430px){
  .topbar-bg{
    --hub-label-size:clamp(6.8px, 1.9vw, 8px) !important;
    --hub-value-size:clamp(15.5px, 4.15vw, 19px) !important;
  }
  .blocks-box .box-label{
    font-size:clamp(5.9px, 1.55vw, 7px) !important;
  }
  .hud-bottom.menu-bar{
    --bottom-btn:60px !important;
    --bottom-gap:10px !important;
    --bottom-pad-x:12px !important;
    --bottom-panel-extra:22px !important;
    --bottom-h:82px !important;
  }
}
@media(max-width:360px){
  .topbar-bg{
    --hub-label-size:6.35px !important;
    --hub-value-size:14.8px !important;
  }
  .blocks-box .box-label{
    font-size:5.55px !important;
  }
  .hud-bottom.menu-bar{
    --bottom-btn:56px !important;
    --bottom-gap:8px !important;
    --bottom-pad-x:10px !important;
    --bottom-h:78px !important;
  }
}

/* v2.8: GSAP forum-style DOM/UI paper confetti.
   Big square/petal pieces, real front/back faces, darker reverse side, and fake 3D flip. */
.ui-confetti-layer{
  position:fixed;
  inset:0;
  z-index:72;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
  perspective:760px;
}
.confetti-2d.petal-confetti{
  position:fixed;
  left:0;
  top:0;
  width:var(--w,22px);
  height:var(--h,22px);
  border-radius:var(--r,5px);
  opacity:0;
  pointer-events:none;
  z-index:1;
  transform-origin:center;
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform,opacity;
  animation:confettiPaperFall 3.05s cubic-bezier(.16,.64,.25,1) forwards;
}
.confetti-face{
  position:absolute;
  inset:0;
  border-radius:inherit;
  display:block;
  overflow:hidden;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 5px 12px rgba(28,44,82,.14);
}
.confetti-front{
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0 17%, transparent 18% 61%, rgba(0,0,0,.10) 62% 100%),
    var(--c1);
}
.confetti-back{
  transform:rotateY(180deg) translateZ(.1px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0 14%, transparent 16% 62%, rgba(0,0,0,.20) 63% 100%),
    var(--c2);
  filter:saturate(1.04) brightness(.96);
}
.confetti-front::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--c3), transparent 48%);
  opacity:.34;
  mix-blend-mode:screen;
}
.confetti-back::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 52%, rgba(0,0,0,.14));
  opacity:.45;
}
@keyframes confettiPaperFall{
  0%{
    opacity:0;
    transform:translate3d(var(--x0),var(--y0),0) perspective(760px) rotateX(var(--rx0)) rotateY(var(--ry0)) rotateZ(var(--r0)) scale(.82);
  }
  9%{
    opacity:1;
    transform:translate3d(var(--x0),calc(var(--y0) + 46px),0) perspective(760px) rotateX(calc(var(--rx0) + 42deg)) rotateY(calc(var(--ry0) + 80deg)) rotateZ(calc(var(--r0) + 40deg)) scale(1);
  }
  44%{
    opacity:1;
    transform:translate3d(var(--x1),var(--y1),0) perspective(760px) rotateX(var(--rx1)) rotateY(var(--ry1)) rotateZ(var(--r1)) scale(.98);
  }
  74%{
    opacity:1;
    transform:translate3d(var(--x1),calc(var(--y1) + 90px),0) perspective(760px) rotateX(calc(var(--rx1) + 120deg)) rotateY(calc(var(--ry1) + 220deg)) rotateZ(calc(var(--r1) + 180deg)) scale(.96);
  }
  100%{
    opacity:0;
    transform:translate3d(var(--x2),var(--y2),0) perspective(760px) rotateX(var(--rx2)) rotateY(var(--ry2)) rotateZ(var(--r2)) scale(.78);
  }
}
@media(max-width:430px){
  .confetti-face{
    box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 3px 8px rgba(28,44,82,.10);
  }
}


/* v2.5 — Cloud main menu implementation */
/* GSAP-managed DOM juice: disables duplicate CSS keyframes where GSAP owns transforms. */
.confetti-2d.petal-confetti.gsap-confetti{
  animation:none !important;
  transform-style:preserve-3d;
}


.float-pop.gsap-pop,
.fly-coin.gsap-fly-coin{
  animation:none !important;
  will-change:transform,opacity;
}
.gsap-fly-coin{
  left:0 !important;
  top:0 !important;
}

/* v3.0 — canvas confetti cannon/rain overlay: cheaper than DOM pieces, still GSAP-driven. */
.ui-confetti-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:73;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}

/* v3.2 Difficulty pass: moves + special blocks */
.score-box.low-moves{
  filter: saturate(1.16) brightness(1.03);
}
.score-box.low-moves strong{
  color:#ff3f6f;
  text-shadow:0 2px 0 rgba(132,14,54,.18),0 0 12px rgba(255,63,111,.22);
}
.out-badge{
  background:linear-gradient(180deg,#ff6788,#e71f5d)!important;
  text-shadow:0 3px 0 rgba(115,11,44,.26);
}
.out-card .primary-btn{
  background:linear-gradient(180deg,#8bea3b,#47bf1f);
}


/* v4.9 pause ribbon over live gameplay: no decorative background leftovers */
.pause-screen{
  position:absolute;
  inset:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:max(22px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.48);
}
.pause-card{position:relative;width:min(410px,calc(100vw - 28px));max-width:410px;margin:0;padding:82px 28px 44px;border-radius:38px;background:linear-gradient(180deg,#ffffff 0%,#fbfbf7 100%);box-shadow:0 9px 0 rgba(198,211,224,.96),0 22px 34px rgba(31,100,158,.22),inset 0 2px 0 rgba(255,255,255,.96);isolation:isolate;}
.pause-card::before{content:"";position:absolute;inset:7px;border-radius:31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95);pointer-events:none;}
.pause-ribbon{position:absolute;z-index:3;left:50%;top:-62px;width:min(480px,calc(100vw + 42px));max-width:none;transform:translateX(-50%);pointer-events:none;user-select:none;filter:drop-shadow(0 10px 8px rgba(0,72,160,.22));}
.pause-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;}
.pause-subtitle{margin:0 0 16px;color:#34496f;font-size:clamp(20px,6vw,27px);line-height:1;font-weight:900;letter-spacing:1.2px;}
.pause-btn{position:relative;width:100%;height:74px;border:0;border-radius:27px;display:grid;grid-template-columns:82px minmax(0,1fr) 50px;align-items:center;gap:0;padding:0;cursor:pointer;color:#fff;font-weight:900;font-size:clamp(30px,9vw,39px);letter-spacing:4px;text-shadow:0 3px 0 rgba(0,76,142,.48),0 6px 8px rgba(14,64,116,.20);transform-origin:center;transition:transform .12s cubic-bezier(.2,.8,.2,1),filter .12s ease,box-shadow .12s ease;will-change:transform;}
.pause-btn>*{position:relative;z-index:2;pointer-events:none;}
.pause-btn span:last-child{justify-self:center;transform:translateX(-8px);}
.pause-btn.primary{background:linear-gradient(180deg,#9eef42 0%,#65d620 45%,#41b513 100%);box-shadow:0 8px 0 #257d0d,0 14px 20px rgba(43,121,17,.22),inset 0 4px 0 rgba(255,255,255,.30),inset 0 -18px 18px rgba(36,143,15,.22);}
.pause-btn.blue{background:linear-gradient(180deg,#4dbfff 0%,#229af4 50%,#0b77de 100%);box-shadow:0 8px 0 #075ab4,0 14px 20px rgba(19,103,190,.20),inset 0 4px 0 rgba(255,255,255,.26),inset 0 -16px 16px rgba(5,94,186,.18);}
.pause-btn.outline{height:72px;min-height:72px;grid-template-columns:78px minmax(0,1fr) 44px;border:2.5px solid #2595f1;color:#2789e8;font-size:clamp(21px,6.2vw,28px);letter-spacing:4px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);box-shadow:0 8px 0 #1b7ed8,0 14px 20px rgba(26,112,195,.18),inset 0 2px 0 rgba(255,255,255,.9);text-shadow:0 2px 0 rgba(255,255,255,.9),0 4px 7px rgba(35,118,199,.16);}
.pause-btn .btn-icon{justify-self:center;width:44px;height:44px;display:grid;place-items:center;}
.pause-btn.outline .btn-icon{width:42px;height:42px;}
.pause-btn .btn-icon svg{width:100%;height:100%;overflow:visible;fill:none;stroke:none;filter:drop-shadow(0 3px 0 rgba(0,73,135,.22));}
.pause-btn .btn-icon .icon-fill{fill:currentColor;stroke:none;}
.pause-btn .btn-icon .icon-line{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;}
.pause-btn .btn-icon .icon-cut{fill:#fff;stroke:none;}
.pause-btn .play-icon svg{fill:#fff;stroke:none;filter:drop-shadow(0 3px 0 rgba(37,117,12,.45)) drop-shadow(0 6px 8px rgba(27,86,8,.18));}
.pause-btn:hover{transform:translateY(-2px);filter:brightness(1.02);}
.pause-btn:active,.pause-btn.pressed{transform:translateY(6px)!important;filter:brightness(.985);}
.pause-btn.primary:hover{box-shadow:0 9px 0 #257d0d,0 15px 20px rgba(43,121,17,.22),inset 0 4px 0 rgba(255,255,255,.30),inset 0 -18px 18px rgba(36,143,15,.22);}
.pause-btn.blue:hover{box-shadow:0 9px 0 #075ab4,0 15px 20px rgba(19,103,190,.20),inset 0 4px 0 rgba(255,255,255,.26),inset 0 -16px 16px rgba(5,94,186,.18);}
.pause-btn.outline:hover{box-shadow:0 9px 0 #1b7ed8,0 15px 20px rgba(26,112,195,.18),inset 0 2px 0 rgba(255,255,255,.9);}
.pause-btn.primary:active,.pause-btn.primary.pressed{box-shadow:0 2px 0 #257d0d,0 7px 12px rgba(43,121,17,.16),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 13px rgba(36,143,15,.18);}
.pause-btn.blue:active,.pause-btn.blue.pressed{box-shadow:0 2px 0 #075ab4,0 7px 12px rgba(19,103,190,.15),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 13px rgba(5,94,186,.15);}
.pause-btn.outline:active,.pause-btn.outline.pressed{box-shadow:0 2px 0 #1b7ed8,0 6px 10px rgba(26,112,195,.12),inset 0 1px 0 rgba(255,255,255,.8);}
@media (max-width:720px){.pause-card{width:min(410px,calc(100vw - 28px));}}
@media (max-height:700px){.pause-card{transform:scale(.92);transform-origin:center center;}}
@media (max-height:620px){.pause-card{transform:scale(.84);}}

/* v4.6 pause overlay: transparent black over the live 3D game */
.pause-screen{background:rgba(0,0,0,.48)!important;overflow:hidden;padding:calc(env(safe-area-inset-top) + 78px) 14px calc(env(safe-area-inset-bottom) + 22px);}



/* v4.8 in-game settings uses the same polished settings screen language as the menu */
.game-settings-screen{
  background:rgba(0,0,0,.52)!important;
  padding:0;
  overflow:hidden;
  place-items:center;
}
.game-settings-screen .settings-main{
  position:relative;
  z-index:5;
  width:min(480px,100vw);
  height:100%;
  margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 34px) 22px calc(env(safe-area-inset-bottom) + 34px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.game-settings-screen .settings-modal-close{
  position:absolute;
  z-index:30;
  top:-18px;
  left:-12px;
  width:48px;
  height:48px;
  border-radius:18px;
  color:#fff;
  font-size:34px;
  font-weight:900;
  line-height:1;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#49b8ff,#0876dc);
  box-shadow:0 5px 0 #075db0,0 12px 16px rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.28);
  text-shadow:0 2px 0 rgba(0,0,0,.18);
}
.game-settings-screen .settings-head{
  width:100%;
  margin-bottom:18px;
  display:grid;
  place-items:center;
}
.game-settings-screen .settings-head h1{
  margin:0;
  color:#fff;
  font-size:clamp(38px,10vw,54px);
  line-height:.92;
  font-weight:900;
  letter-spacing:-2px;
  -webkit-text-stroke:5px #2a8ce7;
  paint-order:stroke fill;
  text-shadow:0 6px 0 #1264be,0 13px 14px rgba(18,71,135,.22);
}
.game-settings-screen .settings-panel{
  position:relative;
  width:min(404px,calc(100vw - 44px));
  max-height:calc(100svh - 140px);
  overflow:visible;
  border-radius:44px;
  padding:32px 24px 26px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fb 100%);
  box-shadow:0 8px 0 #c8d0db,0 18px 28px rgba(28,80,130,.18),inset 0 2px 0 rgba(255,255,255,.92);
}
.game-settings-screen .setting-row{
  position:relative;
  width:100%;
  height:72px;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) max-content;
  align-items:center;
  column-gap:12px;
  border-radius:22px;
  padding:0 14px 0 12px;
  margin-bottom:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  box-shadow:0 3px 0 #d6dde6,0 8px 15px rgba(52,91,128,.10),inset 0 2px 0 rgba(255,255,255,.92);
}
.game-settings-screen .quality-row{z-index:10;}
.game-settings-screen .setting-icon{
  width:56px;
  height:56px;
  border-radius:17px;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 4px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.32);
}
.game-settings-screen .setting-icon svg{width:34px;height:34px;fill:currentColor;}
.game-settings-screen .setting-icon svg *{fill:currentColor;}
.game-settings-screen .setting-icon .line{fill:none!important;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;}
.game-settings-screen .setting-icon.blue{background:linear-gradient(180deg,#47bdff 0%,#1586e6 100%);box-shadow:0 4px 0 #0765bd,inset 0 2px 0 rgba(255,255,255,.32);}
.game-settings-screen .setting-icon.purple{background:linear-gradient(180deg,#b262ff 0%,#7b2bdd 100%);box-shadow:0 4px 0 #5412ae,inset 0 2px 0 rgba(255,255,255,.32);}
.game-settings-screen .setting-icon.orange{background:linear-gradient(180deg,#ffc54c 0%,#f39200 100%);box-shadow:0 4px 0 #c56c00,inset 0 2px 0 rgba(255,255,255,.32);}
.game-settings-screen .setting-icon.green{background:linear-gradient(180deg,#91e642 0%,#43bd22 100%);box-shadow:0 4px 0 #248916,inset 0 2px 0 rgba(255,255,255,.32);}
.game-settings-screen .setting-label{
  justify-self:start;
  min-width:0;
  color:#183d7c;
  font-size:clamp(16px,4.3vw,20px);
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}
.game-settings-screen .toggle,.game-settings-screen .quality-select{justify-self:end;margin-left:auto;}
.game-settings-screen .toggle{
  position:relative;
  width:86px;
  height:38px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  background:linear-gradient(180deg,#d5dde7 0%,#aeb8c5 100%);
  box-shadow:0 4px 0 #8894a3,inset 0 2px 3px rgba(255,255,255,.42);
}
.game-settings-screen .toggle span{
  position:absolute;
  top:4px;
  left:5px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(180deg,#ffffff 0%,#edf2f7 100%);
  box-shadow:0 3px 4px rgba(41,52,65,.18),inset 0 2px 0 rgba(255,255,255,.96);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.game-settings-screen .toggle.active{background:linear-gradient(180deg,#9af13c 0%,#55c92a 100%);box-shadow:0 4px 0 #278b16,inset 0 2px 3px rgba(255,255,255,.34);}
.game-settings-screen .toggle.active span{transform:translateX(46px);}
.game-settings-screen .quality-select{position:relative;width:128px;}
.game-settings-screen .quality-btn{
  width:100%;
  height:45px;
  border:0;
  border-radius:18px;
  padding:0 14px 0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg,#4bbdff 0%,#168ee8 100%);
  box-shadow:0 4px 0 #0868bd,0 8px 12px rgba(22,111,190,.16),inset 0 2px 0 rgba(255,255,255,.3);
}
.game-settings-screen .quality-btn span{font-size:clamp(15px,4.3vw,20px);font-weight:900;letter-spacing:1px;}
.game-settings-screen .quality-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.2,.8,.2,1);}
.game-settings-screen .quality-select[data-open="true"] .quality-btn svg{transform:rotate(180deg);}
.game-settings-screen .quality-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 10px);
  right:0;
  width:158px;
  padding:8px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#eef4fa 100%);
  box-shadow:0 6px 0 #c7d0db,0 14px 22px rgba(35,82,125,.18),inset 0 2px 0 rgba(255,255,255,.94);
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px) scale(.96);
  transform-origin:top right;
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.game-settings-screen .quality-select[data-open="true"] .quality-menu{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.game-settings-screen .quality-option{
  width:100%;
  height:42px;
  border:0;
  border-radius:16px;
  margin-bottom:6px;
  padding:0 13px;
  color:#2862a7;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-weight:900;
  letter-spacing:.8px;
}
.game-settings-screen .quality-option:last-child{margin-bottom:0;}
.game-settings-screen .quality-option:hover{background:rgba(47,157,241,.10);}
.game-settings-screen .quality-option.active{color:#fff;background:linear-gradient(180deg,#6fd0ff 0%,#2097ef 100%);box-shadow:0 3px 0 #0b6fc5,inset 0 2px 0 rgba(255,255,255,.26);}
.game-settings-screen .settings-separator{height:2px;margin:20px 0;border-radius:999px;background:#d9e0e9;}
.game-settings-screen .action-row{
  width:100%;
  height:62px;
  border:0;
  border-radius:20px;
  padding:0 18px;
  margin-bottom:12px;
  display:grid;
  grid-template-columns:48px 1fr 32px;
  align-items:center;
  column-gap:14px;
  cursor:pointer;
  background:linear-gradient(180deg,#f9fbfd 0%,#edf2f7 100%);
  color:#247bd9;
  box-shadow:0 3px 0 #d1d9e4,0 8px 14px rgba(46,88,130,.10),inset 0 2px 0 rgba(255,255,255,.94);
}
.game-settings-screen .action-row.danger-row{color:#ef3f48;}
.game-settings-screen .action-row.danger-row span{color:#d92f3c;}
.game-settings-screen .action-row span{justify-self:start;font-size:16px;font-weight:900;letter-spacing:.8px;}
.game-settings-screen .action-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#55c6ff,#188ce8);box-shadow:0 4px 0 #0d66b6,inset 0 2px 0 rgba(255,255,255,.3);}
.game-settings-screen .action-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.game-settings-screen .action-icon.danger{background:linear-gradient(180deg,#ff6874,#ef3f48);box-shadow:0 4px 0 #bd2630,inset 0 2px 0 rgba(255,255,255,.3);}
.game-settings-screen .action-icon.shield{background:linear-gradient(180deg,#5fc9ff,#198ce7);}
.game-settings-screen .action-arrow{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;justify-self:end;opacity:.72;}
@media (max-width:420px){
  .game-settings-screen .settings-main{padding-inline:14px;}
  .game-settings-screen .settings-head{margin-bottom:12px;}
  .game-settings-screen .settings-panel{width:min(390px,calc(100vw - 28px));padding:24px 16px 20px;border-radius:34px;}
  .game-settings-screen .setting-row{height:64px;grid-template-columns:48px minmax(0,1fr) max-content;column-gap:10px;padding:0 10px;margin-bottom:10px;}
  .game-settings-screen .setting-icon{width:48px;height:48px;border-radius:15px;}
  .game-settings-screen .setting-icon svg{width:29px;height:29px;}
  .game-settings-screen .toggle{width:74px;height:34px;}
  .game-settings-screen .toggle span{width:26px;height:26px;}
  .game-settings-screen .toggle.active span{transform:translateX(39px);}
  .game-settings-screen .quality-select{width:112px;}
  .game-settings-screen .quality-btn{height:40px;border-radius:16px;padding-inline:12px 10px;}
  .game-settings-screen .quality-menu{width:142px;}
  .game-settings-screen .settings-separator{margin:15px 0;}
  .game-settings-screen .action-row{height:56px;grid-template-columns:42px 1fr 26px;column-gap:10px;padding:0 14px;margin-bottom:10px;}
  .game-settings-screen .action-icon{width:42px;height:42px;border-radius:14px;}
  .game-settings-screen .action-icon svg{width:26px;height:26px;}
}
@media (max-height:700px){
  .game-settings-screen .settings-main{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 24px);overflow-y:auto;}
  .game-settings-screen .settings-head h1{font-size:clamp(32px,8vw,44px);}
  .game-settings-screen .settings-panel{margin-bottom:24px;}
}


/* v5.0: close button sits on the white settings modal corner */
@media (max-width:420px){.game-settings-screen .settings-modal-close{top:-16px;left:-8px;width:44px;height:44px;border-radius:16px;font-size:31px;}}


/* v5.3 in-game settings confirm modals: no browser confirm/alert */
.game-modal-layer{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:22px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.game-modal-layer.active{opacity:1;pointer-events:auto;}
.game-modal-backdrop{position:absolute;inset:0;background:rgba(23,72,122,.42);backdrop-filter:blur(7px);}
.confirm-modal{
  position:absolute;
  width:min(354px,calc(100vw - 44px));
  border-radius:36px;
  padding:30px 24px 24px;
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fc 100%);
  box-shadow:0 9px 0 #c7d0db,0 26px 38px rgba(26,75,126,.30),inset 0 2px 0 rgba(255,255,255,.96);
  transform:translateY(22px) scale(.9);
  opacity:0;
  pointer-events:none;
}
.game-modal-layer.active .confirm-modal.active{pointer-events:auto;animation:gameModalPopIn .32s cubic-bezier(.18,.9,.2,1.12) both;}
.confirm-modal.modal-out{animation:gameModalPopOut .18s ease both;}
@keyframes gameModalPopIn{0%{opacity:0;transform:translateY(26px) scale(.88);}68%{opacity:1;transform:translateY(-4px) scale(1.02);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes gameModalPopOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(14px) scale(.94);}}
.modal-x{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border:0;
  border-radius:14px;
  color:#6d7f99;
  font-size:28px;
  font-weight:900;
  line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#edf2f7 100%);
  box-shadow:0 3px 0 #cdd5df,inset 0 2px 0 rgba(255,255,255,.94);
  cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1);
}
.modal-x:hover{transform:translateY(-2px);}
.modal-x:active{transform:translateY(2px);}
.modal-icon{width:78px;height:78px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;color:#fff;}
.modal-icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.modal-icon svg path,.modal-icon svg circle{fill:none;}
.modal-icon.blue{background:linear-gradient(180deg,#4bbdff 0%,#168ee8 100%);box-shadow:0 6px 0 #0868bd,inset 0 2px 0 rgba(255,255,255,.28);}
.modal-icon.blue svg{fill:currentColor;stroke:none;}
.modal-icon.blue svg path,.modal-icon.blue svg circle{fill:currentColor;stroke:none;}
.modal-icon.blue svg path:nth-child(2),.modal-icon.blue svg path:nth-child(3),.modal-icon.blue svg circle{fill:#fff;opacity:.9;}
.modal-icon.danger{background:linear-gradient(180deg,#ff777a 0%,#e8343e 100%);box-shadow:0 6px 0 #b81b25,inset 0 2px 0 rgba(255,255,255,.30);}
.confirm-modal h2{margin:0;color:#183d7c;font-size:31px;line-height:1;font-weight:900;letter-spacing:-1px;}
.reset-modal h2{color:#d72232;}
.confirm-modal p{width:min(250px,100%);margin:12px auto 22px;color:#4a78ad;font-size:16px;line-height:1.22;font-weight:900;}
.reset-modal p{color:#a6424a;}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-btn{height:56px;border:0;border-radius:20px;color:#fff;font-size:17px;font-weight:900;letter-spacing:.8px;cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1),filter .16s ease;}
.modal-btn:hover{transform:translateY(-2px);filter:brightness(1.02);}
.modal-btn:active{transform:translateY(3px);}
.modal-btn.ghost{color:#4870a2;background:linear-gradient(180deg,#ffffff 0%,#edf2f7 100%);box-shadow:0 4px 0 #cdd5df,inset 0 2px 0 rgba(255,255,255,.95);}
.modal-btn.danger{background:linear-gradient(180deg,#ff777a 0%,#e8343e 100%);box-shadow:0 4px 0 #b81b25,inset 0 2px 0 rgba(255,255,255,.25);}
.modal-btn.blue{background:linear-gradient(180deg,#4bbdff 0%,#168ee8 100%);box-shadow:0 4px 0 #0868bd,inset 0 2px 0 rgba(255,255,255,.28);}
.reset-flash{animation:resetFlash .34s ease both;}
@keyframes resetFlash{0%,100%{filter:none;}45%{filter:brightness(1.18) saturate(1.15);}}


/* v5.5 — shared uploaded coin art everywhere coins are shown */
.coin-chip {
  display: grid !important;
  grid-template-columns: clamp(20px, 4.8vw, 30px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(3px, .9vw, 6px);
  align-content: center;
  align-items: center;
  justify-items: start;
  place-items: initial;
}
.coin-chip .coin-ui-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: clamp(20px, 4.8vw, 30px);
  height: clamp(20px, 4.8vw, 30px);
  display: block !important;
  background: url("./assets/coin.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(176, 104, 0, .42));
}
.coin-chip .coin-chip-label {
  grid-row: 1;
  grid-column: 2;
  display: block !important;
}
.coin-chip strong {
  grid-row: 2;
  grid-column: 2;
}
.coin-mini {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: -5px;
  background: url("./assets/coin.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(176, 104, 0, .42));
}
.reward-coin-cell strong {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.reward-coin-cell strong b {
  font: inherit;
  color: inherit;
}
.fly-coin,
.fly-coin::after {
  background: none !important;
  box-shadow: none !important;
}
.fly-coin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: url("./assets/coin.webp") center / contain no-repeat !important;
  filter: drop-shadow(0 3px 0 rgba(176, 104, 0, .42));
}
.fly-coin::after {
  content: none !important;
}
@media(max-width:430px){
  .coin-mini{width:20px;height:20px;vertical-align:-4px;}
  .fly-coin{width:22px;height:22px;}
}

/* Global interaction lock: no text/image selection, dragging, or native context menus. */
html, body, #app, #app *, .menu-shell, .menu-shell *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
img, svg, canvas, video, picture, source, iframe{
  -webkit-user-drag:none!important;
  user-drag:none!important;
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
::selection{background:transparent;color:inherit;}

/* v5.7 — uploaded reward complete modal */
.reward-screen{
  z-index:24;
  padding:max(22px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.30) 0 17%, transparent 42%),
    linear-gradient(180deg, #43b8f8 0%, #8bdcff 52%, #b9efff 100%)!important;
  overflow:hidden;
}
.reward-screen::before,
.reward-screen::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:.24;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  filter:blur(.1px);
}
.reward-screen::before{width:190px;height:58px;left:-78px;bottom:8%;box-shadow:52px -28px 0 2px rgba(255,255,255,.58),112px -14px 0 12px rgba(255,255,255,.58);}
.reward-screen::after{width:160px;height:48px;right:-66px;top:24%;box-shadow:44px -22px 0 4px rgba(255,255,255,.58),92px -10px 0 10px rgba(255,255,255,.58);}
.reward-modal{
  position:relative;
  width:min(356px, calc(100vw - 28px));
  max-width:356px;
  margin:0;
  padding:78px 22px 24px;
  border-radius:32px;
  background:linear-gradient(180deg, #ffffff 0%, #fbfbf7 100%);
  box-shadow:0 9px 0 rgba(198,211,224,.96),0 22px 34px rgba(31,100,158,.22),inset 0 2px 0 rgba(255,255,255,.96);
  isolation:isolate;
}
.reward-modal::before{content:"";position:absolute;inset:6px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95);pointer-events:none;}
.reward-ribbon{position:absolute;z-index:3;left:50%;top:-54px;width:min(455px, calc(100vw + 38px));transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 10px 12px rgba(0,72,160,.22));}
.reward-ribbon-img{width:100%;height:auto;display:block;object-fit:contain;}
.reward-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;}
.coins-card{width:min(238px,72vw);height:56px;border-radius:21px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;background:linear-gradient(180deg,#fff 0%,#edf5ff 100%);border:4px solid rgba(255,255,255,.96);box-shadow:0 12px 0 rgba(167,197,228,.36),0 17px 24px rgba(31,100,158,.14),inset 0 -8px 0 rgba(138,175,235,.13);overflow:hidden;}
.coins-card::after{content:"";position:absolute;inset:-42px auto auto -30px;width:68px;height:150px;background:rgba(255,255,255,.65);transform:rotate(28deg);}
.coin-icon{width:45px;height:45px;display:grid;place-items:center;z-index:1;filter:drop-shadow(0 7px 0 rgba(220,126,0,.22)) drop-shadow(0 11px 12px rgba(206,124,8,.16));}
.coin-icon img{width:100%;height:100%;object-fit:contain;display:block;}
.coin-copy{z-index:1;min-width:74px;}
.coin-burst{position:absolute;inset:0;pointer-events:none;z-index:2;}
.coins-label{display:block;font-size:10px;font-weight:1000;color:#84a0c7;line-height:1;text-transform:uppercase;}
#coinAmount{display:block;font-size:21px;line-height:1;color:#24356c;letter-spacing:-.03em;}
#coinAmount b{font:inherit;color:inherit;}
.meter-card{width:calc(100% + 58px);min-height:148px;display:grid;place-items:center;position:relative;padding:0 0 2px;}
.meter-wrap{width:min(326px,84vw);aspect-ratio:1247 / 499;position:relative;display:block;margin-top:4px;transform-origin:50% 91%;filter:drop-shadow(0 18px 18px rgba(44,86,155,.15));}
.range-img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;}
.needle-pivot{position:absolute;left:50%;top:105%;width:0;height:0;transform:rotate(0deg);transform-origin:0 0;z-index:3;filter:drop-shadow(0 8px 8px rgba(0,45,130,.22));}
.needle-img{position:absolute;width:58px;left:0;top:0;transform:translate(-50%, -91.5%);transform-origin:50% 91.5%;pointer-events:none;}
.zone-glow{position:absolute;left:50%;top:27%;width:25%;height:22%;border-radius:999px;background:radial-gradient(ellipse,rgba(255,255,255,.72),rgba(255,255,255,0) 68%);transform:translateX(-50%);mix-blend-mode:screen;opacity:0;pointer-events:none;}
.result-pill{position:absolute;left:50%;top:0;transform:translate(-50%,-10px) scale(.86);min-width:72px;height:40px;display:grid;place-items:center;padding:0 16px;border-radius:999px;background:linear-gradient(180deg,#fff,#eef6ff);color:#1b55c8;border:4px solid rgba(255,255,255,.95);box-shadow:0 14px 22px rgba(38,80,170,.16),inset 0 -5px 0 rgba(131,172,240,.2);font-size:21px;font-weight:1000;opacity:0;pointer-events:none;z-index:4;}
.reward-hint{min-height:20px;margin:-4px 0 0;font-size:14px;font-weight:1000;text-align:center;color:#7893bb;text-shadow:0 2px 0 rgba(255,255,255,.7);}
.reward-actions-row{width:100%;display:grid;grid-template-columns:1fr 108px;gap:10px;margin-top:2px;align-items:center;}
.reward-action-btn{position:relative;width:100%;height:60px;border:0;border-radius:22px;display:grid;place-items:center;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;gap:8px;padding:0 12px;cursor:pointer;color:#fff;font-weight:1000;font-size:clamp(17px,4.8vw,21px);letter-spacing:.7px;text-shadow:0 3px 0 rgba(0,76,142,.48),0 6px 8px rgba(14,64,116,.20);transform-origin:center;transition:transform .12s cubic-bezier(.2,.8,.2,1),filter .12s ease,box-shadow .12s ease;}
.reward-action-btn.primary{background:linear-gradient(180deg,#9eef42 0%,#65d620 45%,#41b513 100%);box-shadow:0 8px 0 #257d0d,0 14px 20px rgba(43,121,17,.22),inset 0 4px 0 rgba(255,255,255,.30),inset 0 -18px 18px rgba(36,143,15,.22);}
.reward-action-btn.blue{background:linear-gradient(180deg,#4dbfff 0%,#229af4 50%,#0b77de 100%);box-shadow:0 8px 0 #075ab4,0 14px 20px rgba(19,103,190,.20),inset 0 4px 0 rgba(255,255,255,.26),inset 0 -16px 16px rgba(5,94,186,.18);}
.reward-action-btn:hover{transform:translateY(-2px);filter:brightness(1.02);}
.reward-action-btn:active,.reward-action-btn.pressed{transform:translateY(6px)!important;filter:brightness(.985);}
.reward-action-btn.primary:active,.reward-action-btn.primary.pressed{box-shadow:0 2px 0 #257d0d,0 7px 12px rgba(43,121,17,.16),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 13px rgba(36,143,15,.18);}
.reward-action-btn.blue:active,.reward-action-btn.blue.pressed{box-shadow:0 2px 0 #075ab4,0 7px 12px rgba(19,103,190,.15),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -10px 13px rgba(5,94,186,.15);}
.reward-action-btn[disabled]{opacity:.72;filter:saturate(.8);cursor:default;}
.reward-pop{position:absolute;left:50%;top:50%;width:68px;height:68px;border-radius:50%;border:4px solid rgba(255,226,79,.95);transform:translate(-50%,-50%);}
@media(max-width:390px){.reward-modal{padding-left:18px;padding-right:18px}.reward-actions-row{grid-template-columns:1fr 92px;gap:8px}.reward-action-btn{font-size:15px}}
@media(max-height:700px){.reward-modal{transform:scale(.93);transform-origin:center center;}}
@media(max-height:620px){.reward-modal{transform:scale(.84);}}


/* v5.8 — reward modal polish: live black overlay like pause, no video/ad icon */
.reward-screen{
  background:rgba(0,0,0,.48)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:hidden;
  padding:max(22px,env(safe-area-inset-top)) 14px max(22px,env(safe-area-inset-bottom))!important;
}
.reward-screen::before,
.reward-screen::after{
  display:none!important;
  content:none!important;
}
.reward-screen .reward-modal{
  width:min(410px,calc(100vw - 28px))!important;
  max-width:410px!important;
  padding:82px 28px 24px!important;
  border-radius:38px!important;
  box-shadow:0 9px 0 rgba(198,211,224,.96),0 22px 34px rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.96)!important;
}
.reward-screen .reward-modal::before{
  inset:7px!important;
  border-radius:31px!important;
}
.reward-screen .reward-ribbon{
  top:-62px!important;
  width:min(480px,calc(100vw + 42px))!important;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.18))!important;
}
.reward-actions-row{
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
.reward-action-btn{
  height:58px!important;
  min-height:58px!important;
  border-radius:21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  grid-auto-flow:unset!important;
  grid-auto-columns:unset!important;
  gap:0!important;
  padding:0 12px!important;
  font-size:clamp(15px,4.4vw,18px)!important;
  letter-spacing:.45px!important;
  white-space:nowrap!important;
}
.reward-action-btn.multiply-variant span,
.reward-action-btn.blue span{
  width:auto!important;
  text-align:center!important;
  white-space:nowrap!important;
  transform:none!important;
  justify-self:center!important;
  line-height:1!important;
}
@media(max-width:390px){
  .reward-screen .reward-modal{padding-left:22px!important;padding-right:22px!important;}
  .reward-actions-row{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  .reward-action-btn{font-size:clamp(13px,4.05vw,16px)!important;padding:0 8px!important;}
}
@media(max-height:700px){.reward-screen .reward-modal{transform:scale(.92);transform-origin:center center;}}
@media(max-height:620px){.reward-screen .reward-modal{transform:scale(.84);}}


/* v5.9 — reward modal matched to uploaded v9 spacing + congrats/bonus copy */
.reward-screen .reward-modal{
  padding-top:82px!important;
  padding-bottom:34px!important;
}
.reward-content{
  gap:10px!important;
}
.reward-congrats{
  margin:0 0 0;
  color:#34496f;
  font-size:clamp(19px,5.8vw,26px);
  line-height:1;
  font-weight:1000;
  letter-spacing:1.05px;
  text-transform:uppercase;
  text-shadow:0 3px 0 rgba(199,214,230,.82);
}
.reward-bonus-msg{
  min-height:17px;
  margin:-2px 0 2px;
  color:#8aa0c0;
  font-size:clamp(10px,3.1vw,12px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.45px;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 2px 0 rgba(255,255,255,.72);
}
.reward-screen .coins-card{
  width:min(252px,72vw)!important;
  height:56px!important;
  margin-top:0!important;
}
.reward-screen .coin-icon{
  width:40px!important;
  height:40px!important;
}
.reward-screen .coin-icon img{
  transform:scale(.92);
  transform-origin:center;
}
.reward-screen .coin-copy{
  min-width:74px!important;
}
.reward-screen #coinAmount{
  font-size:25px!important;
}
.reward-screen .meter-card{
  padding-top:28px!important;
  padding-bottom:28px!important;
  min-height:158px!important;
  margin-top:-2px!important;
}
.reward-screen .meter-wrap{
  width:min(340px,84vw)!important;
  margin-top:0!important;
}
.reward-screen .result-pill{
  top:8px!important;
  z-index:20!important;
}
.reward-screen .reward-hint{
  margin:-8px 0 0!important;
}
.reward-screen .reward-actions-row{
  margin-top:4px!important;
}
@media(max-height:700px){
  .reward-screen .reward-modal{padding-bottom:28px!important;}
  .reward-screen .meter-card{padding-top:22px!important;padding-bottom:22px!important;min-height:145px!important;}
}
@media(max-height:620px){
  .reward-congrats{font-size:clamp(17px,5vw,22px);}
  .reward-bonus-msg{font-size:10px;}
  .reward-screen .meter-card{padding-top:16px!important;padding-bottom:16px!important;min-height:130px!important;}
}

/* v6.2 — reward claim coins stay inside the modal: meter -> reward counter */
.reward-screen .reward-modal{
  overflow:visible!important;
}
.reward-fx-layer{
  position:absolute;
  inset:0;
  z-index:35;
  pointer-events:none;
  overflow:visible;
  border-radius:inherit;
}
.reward-content,
.reward-ribbon{
  z-index:12!important;
}
.reward-screen .meter-card,
.reward-screen .coins-card{
  z-index:13;
}
.reward-meter-coin{
  z-index:40!important;
  width:24px!important;
  height:24px!important;
  filter:drop-shadow(0 4px 0 rgba(176,104,0,.38)) drop-shadow(0 8px 8px rgba(80,43,0,.14));
}
.reward-pop.tiny{
  width:34px;
  height:34px;
  border-width:3px;
  opacity:.55;
}
@media(max-width:430px){
  .reward-meter-coin{width:21px!important;height:21px!important;}
}

/* v6.3 — reward coin claim: more spacing + richer in-modal juice */
.reward-screen .reward-modal{
  width:min(422px,calc(100vw - 26px))!important;
  max-width:422px!important;
  padding-top:88px!important;
  padding-bottom:42px!important;
}
.reward-screen .reward-content{
  gap:12px!important;
}
.reward-screen .coins-card{
  margin-bottom:10px!important;
  transform-origin:center;
}
.reward-screen .meter-card{
  padding-top:38px!important;
  padding-bottom:36px!important;
  min-height:188px!important;
  margin-top:4px!important;
}
.reward-screen .meter-wrap{
  width:min(356px,86vw)!important;
}
.reward-screen .reward-hint{
  margin:-4px 0 2px!important;
}
.reward-fx-layer{
  inset:-12px -10px -12px -10px!important;
  z-index:45!important;
  overflow:visible!important;
}
.reward-screen .reward-modal.reward-claiming .meter-wrap{
  filter:drop-shadow(0 20px 18px rgba(44,86,155,.18)) drop-shadow(0 0 18px rgba(112,231,77,.30));
}
.reward-screen .reward-modal.reward-claiming .coins-card{
  box-shadow:0 13px 0 rgba(167,197,228,.36),0 20px 28px rgba(31,100,158,.18),0 0 0 4px rgba(255,218,78,.12),inset 0 -8px 0 rgba(138,175,235,.13)!important;
}
.reward-accepting{
  animation:rewardCounterBreath .54s ease-in-out infinite;
}
.reward-counter-final{
  animation:rewardCounterFinal .42s cubic-bezier(.19,1,.22,1) both!important;
}
.reward-meter-coin{
  z-index:60!important;
  width:27px!important;
  height:27px!important;
  filter:drop-shadow(0 5px 0 rgba(176,104,0,.40)) drop-shadow(0 9px 10px rgba(80,43,0,.18));
  will-change:transform,opacity;
}
.reward-meter-coin::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,244,148,.40),rgba(255,244,148,0) 68%);
  z-index:-1;
}
.reward-spark{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ffd84a;
  box-shadow:0 2px 0 #dc8c08,0 0 10px rgba(255,216,74,.55);
  z-index:58;
  pointer-events:none;
}
.reward-spark:nth-child(3n){background:#7dff4a;box-shadow:0 2px 0 #32a817,0 0 10px rgba(125,255,74,.45);}
.reward-spark:nth-child(4n){background:#ffffff;box-shadow:0 2px 0 #c7d8ef,0 0 10px rgba(255,255,255,.55);}
.reward-ring{
  position:absolute;
  width:62px;
  height:62px;
  border-radius:999px;
  border:4px solid rgba(255,216,74,.82);
  box-shadow:0 0 0 4px rgba(255,255,255,.22),0 0 22px rgba(255,216,74,.28);
  z-index:57;
  pointer-events:none;
}
.reward-ring.small{
  width:42px;
  height:42px;
  border-width:3px;
  opacity:.72;
}
.reward-ring.source{
  border-color:rgba(116,239,55,.86);
  box-shadow:0 0 0 4px rgba(255,255,255,.16),0 0 24px rgba(116,239,55,.34);
}
.reward-ring.final{
  width:86px;
  height:86px;
  border-width:5px;
  border-color:rgba(255,236,115,.92);
  box-shadow:0 0 0 5px rgba(255,255,255,.22),0 0 30px rgba(255,216,74,.35);
}
@keyframes rewardCounterBreath{
  0%,100%{transform:translateZ(0) scale(1)}
  50%{transform:translateZ(0) scale(1.025)}
}
@keyframes rewardCounterFinal{
  0%{transform:translateZ(0) scale(1)}
  38%{transform:translateZ(0) scale(1.13)}
  100%{transform:translateZ(0) scale(1)}
}
@media(max-width:430px){
  .reward-screen .reward-modal{padding-left:20px!important;padding-right:20px!important;padding-bottom:34px!important;}
  .reward-screen .meter-card{padding-top:30px!important;padding-bottom:30px!important;min-height:168px!important;}
  .reward-meter-coin{width:23px!important;height:23px!important;}
  .reward-spark{width:7px;height:7px;}
}
@media(max-height:700px){
  .reward-screen .reward-modal{padding-top:78px!important;padding-bottom:30px!important;}
  .reward-screen .meter-card{padding-top:24px!important;padding-bottom:24px!important;min-height:152px!important;}
}
@media(max-height:620px){
  .reward-screen .meter-card{padding-top:18px!important;padding-bottom:18px!important;min-height:132px!important;}
  .reward-screen .coins-card{margin-bottom:4px!important;}
}

.image-loader-logo{
  width:min(620px,94vw);
  max-width:620px;
  height:auto;
  margin:0 auto 20px;
  transform:none!important;
}
.image-loader-logo .loader-title-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 10px 20px rgba(42,76,118,.20));
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
@media (max-width:420px){
  .image-loader-logo{width:min(390px,94vw); margin:0 auto 16px;}
}


/* v7.4 loader logo containment fix: keep title fully inside viewport with proportional scaling */
.loader-screen .loader-plain{
  width:min(620px,calc(100vw - 44px))!important;
  max-width:calc(100vw - 44px)!important;
  max-height:calc(100svh - 48px)!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.loader-screen .image-loader-logo,
.loader-screen .loader-menu-logo.image-loader-logo{
  width:100%!important;
  max-width:min(560px,calc(100vw - 44px))!important;
  height:auto!important;
  max-height:min(34svh,250px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto 22px!important;
  padding:0!important;
  transform:none!important;
  overflow:visible!important;
  flex:0 1 auto!important;
}
.loader-screen .image-loader-logo .loader-title-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(34svh,250px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  transform:none!important;
}
.loader-screen .loader-plain-bar{
  width:min(280px,72vw)!important;
  flex:0 0 auto!important;
}
@media (max-width:420px){
  .loader-screen .loader-plain{width:calc(100vw - 34px)!important;max-width:calc(100vw - 34px)!important;}
  .loader-screen .image-loader-logo,
  .loader-screen .loader-menu-logo.image-loader-logo{max-width:calc(100vw - 34px)!important;max-height:min(30svh,190px)!important;margin-bottom:18px!important;}
  .loader-screen .image-loader-logo .loader-title-image{max-height:min(30svh,190px)!important;}
}
@media (max-height:620px){
  .loader-screen .image-loader-logo,
  .loader-screen .loader-menu-logo.image-loader-logo{max-height:28svh!important;margin-bottom:14px!important;}
  .loader-screen .image-loader-logo .loader-title-image{max-height:28svh!important;}
  .loader-screen .loader-plain-copy{margin-top:10px!important;}
}


/* v8.3 — mobile-only modal comfort: pause + complete are 20% smaller on phones */
@media (hover:none) and (pointer:coarse), (max-width:600px){
  .pause-card,
  .reward-screen .reward-modal{
    scale:.8;
    transform-origin:center center;
  }
  .pause-screen,
  .reward-screen{
    place-items:center;
  }
}

/* v8.3 — low quality also trims the heaviest in-game UI filters a bit */
:root[data-quality="low"] .reward-ribbon,
:root[data-quality="low"] .pause-ribbon,
:root[data-quality="low"] .meter-wrap,
:root[data-quality="low"] .coin-icon{
  filter:none!important;
}

/* v8.4 — real mobile compact modals: shrink layout dimensions, not only visual scale */
@media (max-width:600px), (hover:none) and (pointer:coarse){
  .pause-screen{
    padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    place-items:center!important;
  }
  .pause-card{
    width:min(328px,calc(100vw - 34px))!important;
    max-width:328px!important;
    padding:66px 22px 31px!important;
    border-radius:30px!important;
    transform:none!important;
    scale:1!important;
    max-height:calc(100svh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;
  }
  .pause-card::before{inset:6px!important;border-radius:25px!important;}
  .pause-ribbon{
    top:-50px!important;
    width:min(384px,calc(100vw + 14px))!important;
    filter:drop-shadow(0 7px 6px rgba(0,72,160,.18))!important;
  }
  .pause-content{gap:13px!important;}
  .pause-subtitle{
    margin:0 0 10px!important;
    font-size:clamp(16px,4.8vw,22px)!important;
    letter-spacing:.8px!important;
  }
  .pause-btn{
    height:59px!important;
    min-height:59px!important;
    border-radius:22px!important;
    grid-template-columns:66px minmax(0,1fr) 40px!important;
    font-size:clamp(23px,7vw,31px)!important;
    letter-spacing:3px!important;
  }
  .pause-btn.outline{
    height:58px!important;
    min-height:58px!important;
    grid-template-columns:62px minmax(0,1fr) 35px!important;
    font-size:clamp(17px,5vw,22px)!important;
    letter-spacing:3px!important;
  }
  .pause-btn .btn-icon{width:36px!important;height:36px!important;}
  .pause-btn.outline .btn-icon{width:34px!important;height:34px!important;}
  .pause-btn span:last-child{transform:translateX(-5px)!important;}

  .reward-screen{
    padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    place-items:center!important;
  }
  .reward-screen .reward-modal{
    width:min(338px,calc(100vw - 34px))!important;
    max-width:338px!important;
    padding:70px 22px 30px!important;
    border-radius:30px!important;
    transform:none!important;
    scale:1!important;
    max-height:calc(100svh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;
    overflow:visible!important;
  }
  .reward-screen .reward-modal::before{inset:6px!important;border-radius:25px!important;}
  .reward-screen .reward-ribbon{
    top:-50px!important;
    width:min(384px,calc(100vw + 14px))!important;
    filter:drop-shadow(0 7px 6px rgba(0,0,0,.15))!important;
  }
  .reward-screen .reward-content{gap:9px!important;}
  .reward-congrats{
    font-size:clamp(16px,4.8vw,21px)!important;
    letter-spacing:.85px!important;
  }
  .reward-bonus-msg{
    min-height:14px!important;
    margin:-2px 0 0!important;
    font-size:clamp(9px,2.75vw,11px)!important;
  }
  .reward-screen .coins-card{
    width:min(202px,62vw)!important;
    height:45px!important;
    margin-bottom:6px!important;
    border-width:3px!important;
    border-radius:18px!important;
  }
  .reward-screen .coin-icon{width:32px!important;height:32px!important;}
  .reward-screen .coin-copy{min-width:58px!important;}
  .reward-screen #coinAmount{font-size:20px!important;}
  .reward-screen .coins-label{font-size:8.5px!important;}
  .reward-screen .meter-card{
    width:calc(100% + 34px)!important;
    min-height:150px!important;
    padding-top:22px!important;
    padding-bottom:22px!important;
    margin-top:0!important;
  }
  .reward-screen .meter-wrap{
    width:min(285px,78vw)!important;
    filter:drop-shadow(0 12px 12px rgba(44,86,155,.12))!important;
  }
  .reward-screen .needle-img{width:46px!important;}
  .reward-screen .result-pill{
    top:6px!important;
    min-width:58px!important;
    height:32px!important;
    padding:0 12px!important;
    border-width:3px!important;
    font-size:17px!important;
  }
  .reward-screen .reward-hint{
    min-height:16px!important;
    margin:-4px 0 0!important;
    font-size:12px!important;
    line-height:1.1!important;
  }
  .reward-screen .reward-actions-row{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:2px!important;
  }
  .reward-action-btn{
    height:48px!important;
    min-height:48px!important;
    border-radius:17px!important;
    padding:0 8px!important;
    font-size:clamp(12px,3.65vw,15px)!important;
    letter-spacing:.25px!important;
  }
  .reward-fx-layer{inset:-8px!important;}
}

@media (max-width:600px) and (max-height:620px), (hover:none) and (pointer:coarse) and (max-height:620px){
  .pause-card{padding-top:58px!important;padding-bottom:24px!important;}
  .pause-ribbon{top:-44px!important;width:min(352px,calc(100vw + 4px))!important;}
  .pause-content{gap:10px!important;}
  .pause-subtitle{margin-bottom:6px!important;font-size:clamp(15px,4.4vw,20px)!important;}
  .pause-btn{height:54px!important;min-height:54px!important;border-radius:20px!important;font-size:clamp(21px,6.4vw,28px)!important;}
  .pause-btn.outline{height:53px!important;min-height:53px!important;font-size:clamp(16px,4.7vw,20px)!important;}
  .pause-btn .btn-icon{width:32px!important;height:32px!important;}
  .pause-btn.outline .btn-icon{width:31px!important;height:31px!important;}

  .reward-screen .reward-modal{padding-top:60px!important;padding-bottom:24px!important;}
  .reward-screen .reward-ribbon{top:-44px!important;width:min(352px,calc(100vw + 4px))!important;}
  .reward-screen .reward-content{gap:7px!important;}
  .reward-screen .coins-card{height:42px!important;margin-bottom:3px!important;}
  .reward-screen .meter-card{min-height:124px!important;padding-top:14px!important;padding-bottom:14px!important;}
  .reward-screen .meter-wrap{width:min(258px,74vw)!important;}
  .reward-screen .reward-hint{font-size:11px!important;min-height:14px!important;}
  .reward-action-btn{height:44px!important;min-height:44px!important;font-size:clamp(11px,3.4vw,14px)!important;}
}

/* v8.5 — extra 5% mobile modal compaction over v8.4 */
@media (max-width:600px), (hover:none) and (pointer:coarse){
  .pause-card{
    width:min(312px,calc(100vw - 38px))!important;
    max-width:312px!important;
    padding:63px 21px 29px!important;
    border-radius:29px!important;
  }
  .pause-card::before{border-radius:24px!important;}
  .pause-ribbon{
    top:-48px!important;
    width:min(365px,calc(100vw + 8px))!important;
  }
  .pause-content{gap:12px!important;}
  .pause-subtitle{
    margin-bottom:9px!important;
    font-size:clamp(15px,4.55vw,21px)!important;
  }
  .pause-btn{
    height:56px!important;
    min-height:56px!important;
    border-radius:21px!important;
    grid-template-columns:63px minmax(0,1fr) 38px!important;
    font-size:clamp(22px,6.65vw,29px)!important;
  }
  .pause-btn.outline{
    height:55px!important;
    min-height:55px!important;
    grid-template-columns:59px minmax(0,1fr) 33px!important;
    font-size:clamp(16px,4.75vw,21px)!important;
  }
  .pause-btn .btn-icon{width:34px!important;height:34px!important;}
  .pause-btn.outline .btn-icon{width:32px!important;height:32px!important;}

  .reward-screen .reward-modal{
    width:min(321px,calc(100vw - 38px))!important;
    max-width:321px!important;
    padding:67px 21px 29px!important;
    border-radius:29px!important;
  }
  .reward-screen .reward-modal::before{border-radius:24px!important;}
  .reward-screen .reward-ribbon{
    top:-48px!important;
    width:min(365px,calc(100vw + 8px))!important;
  }
  .reward-screen .reward-content{gap:8px!important;}
  .reward-congrats{font-size:clamp(15px,4.55vw,20px)!important;}
  .reward-bonus-msg{font-size:clamp(8.5px,2.6vw,10.5px)!important;}
  .reward-screen .coins-card{
    width:min(192px,59vw)!important;
    height:43px!important;
    margin-bottom:5px!important;
    border-radius:17px!important;
  }
  .reward-screen .coin-icon{width:30px!important;height:30px!important;}
  .reward-screen #coinAmount{font-size:19px!important;}
  .reward-screen .meter-card{
    width:calc(100% + 32px)!important;
    min-height:143px!important;
    padding-top:21px!important;
    padding-bottom:21px!important;
  }
  .reward-screen .meter-wrap{width:min(271px,74vw)!important;}
  .reward-screen .needle-img{width:44px!important;}
  .reward-screen .result-pill{
    min-width:55px!important;
    height:30px!important;
    padding:0 11px!important;
    font-size:16px!important;
  }
  .reward-screen .reward-hint{font-size:11.5px!important;min-height:15px!important;}
  .reward-action-btn{
    height:46px!important;
    min-height:46px!important;
    border-radius:16px!important;
    font-size:clamp(11px,3.45vw,14px)!important;
  }
}

@media (max-width:600px) and (max-height:620px), (hover:none) and (pointer:coarse) and (max-height:620px){
  .pause-card{padding-top:55px!important;padding-bottom:23px!important;width:min(306px,calc(100vw - 38px))!important;max-width:306px!important;}
  .pause-ribbon{top:-42px!important;width:min(334px,calc(100vw - 2px))!important;}
  .pause-content{gap:9px!important;}
  .pause-subtitle{margin-bottom:5px!important;font-size:clamp(14px,4.2vw,19px)!important;}
  .pause-btn{height:51px!important;min-height:51px!important;border-radius:19px!important;font-size:clamp(20px,6.1vw,27px)!important;}
  .pause-btn.outline{height:50px!important;min-height:50px!important;font-size:clamp(15px,4.45vw,19px)!important;}
  .pause-btn .btn-icon{width:30px!important;height:30px!important;}
  .pause-btn.outline .btn-icon{width:29px!important;height:29px!important;}

  .reward-screen .reward-modal{padding-top:57px!important;padding-bottom:23px!important;width:min(315px,calc(100vw - 38px))!important;max-width:315px!important;}
  .reward-screen .reward-ribbon{top:-42px!important;width:min(334px,calc(100vw - 2px))!important;}
  .reward-screen .reward-content{gap:6px!important;}
  .reward-screen .coins-card{height:40px!important;margin-bottom:2px!important;}
  .reward-screen .meter-card{min-height:118px!important;padding-top:13px!important;padding-bottom:13px!important;}
  .reward-screen .meter-wrap{width:min(245px,71vw)!important;}
  .reward-screen .reward-hint{font-size:10.5px!important;min-height:13px!important;}
  .reward-action-btn{height:42px!important;min-height:42px!important;font-size:clamp(10px,3.2vw,13px)!important;}
}

/* v8.9 temporary flat title: replace image logo on loading with simple text */
.loader-screen .text-loader-logo{
  width:auto!important;
  max-width:calc(100vw - 44px)!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto 22px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
}
.loader-screen .text-loader-logo span{
  display:block;
  font-family:"Nunito",Inter,system-ui,sans-serif;
  font-size:clamp(40px,10vw,62px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.055em;
  color:#ffffff;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 4px 0 rgba(20,96,163,.22),0 10px 18px rgba(25,82,140,.18);
}
@media (max-height:620px){
  .loader-screen .text-loader-logo{margin-bottom:14px!important;}
  .loader-screen .text-loader-logo span{font-size:clamp(34px,9vw,52px);}
}