:root {
  --bg: #eef3f7;
  --bg2: #e4ebf2;
  --panel: #ffffff;
  --panel2: #f5f8fb;
  --stroke: #d8e1ea;
  --text: #1f2a37;
  --muted: #708090;
  --accent: #5fd3b7;
  --accent2: #ffcf67;
  --danger: #ff7b8a;
  --shadow: rgba(21, 35, 52, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body {
  font-family: "Fredoka", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(95,211,183,.14), transparent 20%),
    radial-gradient(circle at 88% 12%, rgba(255,207,103,.16), transparent 20%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: 16px clamp(12px, 3vw, 24px) 14px;
}

.hud {
  display: grid;
  grid-template-columns: minmax(74px, 92px) minmax(240px, 1fr) minmax(96px, 116px);
  align-items: start;
  gap: 18px;
}

.hudIcon,
.movesCard {
  appearance: none;
  border: 1px solid rgba(126, 142, 161, 0.22);
  background: rgba(255,255,255,.94);
  border-radius: 28px;
  box-shadow:
    0 16px 30px rgba(53,67,88,.10),
    inset 0 2px 0 rgba(255,255,255,.85);
}

.hudIcon {
  width: 78px;
  height: 78px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.gearMark {
  position: relative;
  width: 30px;
  height: 30px;
  border: 5px solid #5b6782;
  border-radius: 50%;
}
.gearMark::before,
.gearMark::after,
.gearMark i {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 40px;
  margin-left: -2.5px;
  margin-top: -20px;
  background: #5b6782;
  border-radius: 999px;
}
.gearMark::before { transform: rotate(45deg); }
.gearMark::after { transform: rotate(90deg); }
.gearMark i { transform: rotate(135deg); }
.gearMark i:nth-child(2),
.gearMark i:nth-child(3),
.gearMark i:nth-child(4) { display: none; }

.levelPanel {
  min-height: 96px;
  padding: 18px 20px 16px;
  border-radius: 38px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(126,142,161,.18);
  box-shadow:
    0 20px 40px rgba(53,67,88,.10),
    inset 0 2px 0 rgba(255,255,255,.82);
  display: grid;
  gap: 12px;
  align-content: start;
}

.levelTitleRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.levelDot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 999px;
  background: rgba(111,123,144,.34);
}
.levelTitle {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #5a6480;
}
.levelProgressWrap {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.levelProgressTrack {
  width: min(100%, 380px);
  height: 12px;
  border-radius: 999px;
  background: rgba(111,123,144,.16);
  overflow: hidden;
}
.levelProgressFill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fd56d, #2ad56d);
}
.levelStars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  line-height: 1;
}
.hudStar {
  font-size: 18px;
  color: #cfd5df;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
.hudStar.active {
  color: #ffc53a;
}

.movesCard {
  min-height: 78px;
  padding: 14px 14px 12px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.movesCard small {
  display: block;
  color: #5f6a84;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
.movesCard b {
  display: block;
  margin-top: 4px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  color: #47506a;
}

.stageWrap {
  position: relative;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.controls {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.controls::-webkit-scrollbar { display: none; }

.btn {
  appearance: none;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 18px var(--shadow);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--panel2); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.active {
  color: #0d5242;
  background: #d9faf2;
  border-color: #9fe7d7;
}
.btn.primary {
  color: #734d00;
  background: #fff1cb;
  border-color: #ffe1a0;
}
.btn.ghost { color: #3c4b5d; }

.levelStrip {
  display: none;
}

body.loadingActive .hud,
body.loadingActive .controls,
body.loadingActive .levelStrip {
  display: none !important;
}
body.loadingActive .app {
  padding: 0 !important;
  display: block !important;
}
body.loadingActive .stageWrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.miniBlock {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff7a8a 0 50%, #62c7ff 50% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 0 0 4px rgba(255,255,255,.14);
}
.miniBlock::after {
  content: "";
  position: absolute;
  background: #5b6782;
  border-radius: 999px;
}
.miniBlock.vCut::after {
  width: 4px;
  height: 36px;
  left: 12px;
  top: -4px;
}
.miniBlock.hCut::after {
  width: 36px;
  height: 4px;
  left: -4px;
  top: 12px;
}

.sceneBtn span {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
}
.sceneBtn i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #5b6782;
}
.miniUndo i:first-child {
  width: 22px;
  height: 22px;
  left: 5px;
  top: 6px;
  border: 4px solid #5b6782;
  background: transparent;
  border-right-color: transparent;
}
.miniUndo i:last-child {
  width: 12px;
  height: 12px;
  left: 2px;
  top: 8px;
  transform: rotate(45deg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.miniRetry i:first-child {
  width: 24px;
  height: 24px;
  left: 5px;
  top: 5px;
  border: 4px solid #5b6782;
  background: transparent;
  border-top-color: transparent;
}
.miniRetry i:nth-child(2) {
  width: 10px;
  height: 10px;
  right: 4px;
  top: 4px;
  transform: rotate(-35deg);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.miniRetry i:nth-child(3) { display: none; }

.miniHint i {
  width: 18px;
  height: 24px;
  left: 8px;
  top: 2px;
  border-radius: 10px 10px 8px 8px;
  background: #ffd74d;
  box-shadow: inset 0 -8px 0 rgba(93,88,46,.10);
}
.miniHint::after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  background: #5b6782;
  border-radius: 3px;
}

.miniDrop i:nth-child(1),
.miniDrop i:nth-child(2),
.miniDrop i:nth-child(3),
.miniDrop i:nth-child(4) {
  width: 10px;
  height: 10px;
  background: #22cf74;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}
.miniDrop i:nth-child(1) { left: 4px; top: 4px; }
.miniDrop i:nth-child(2) { right: 4px; top: 4px; }
.miniDrop i:nth-child(3) { left: 4px; bottom: 4px; }
.miniDrop i:nth-child(4) { right: 4px; bottom: 4px; }

@media (max-width: 860px) {
  .app {
    padding: 12px 12px 10px;
    gap: 10px;
  }
  .hud {
    grid-template-columns: 74px 1fr 94px;
    gap: 10px;
  }
  .hudIcon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
  }
  .levelPanel {
    min-height: 82px;
    padding: 14px 14px 12px;
    border-radius: 28px;
    gap: 10px;
  }
  .levelTitle { font-size: 19px; }
  .levelTitleRow { gap: 10px; }
  .levelProgressTrack { height: 10px; }
  .levelStars { gap: 18px; }
  .hudStar { font-size: 16px; }
  .movesCard {
    min-height: 64px;
    border-radius: 22px;
    padding: 10px 8px;
  }
  .movesCard small { font-size: 11px; }
  .movesCard b { font-size: 24px; }
}
@media (max-width: 560px) {
  .hud {
    grid-template-columns: 58px 1fr 82px;
    gap: 8px;
  }
  .hudIcon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }
  .levelPanel {
    min-height: 76px;
    padding: 12px 12px 11px;
    border-radius: 24px;
    gap: 9px;
  }
  .levelTitle { font-size: 16px; }
  .levelDot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }
  .levelProgressTrack { height: 9px; }
  .levelStars { gap: 14px; }
  .movesCard {
    min-height: 58px;
    padding: 9px 6px;
  }
  .movesCard small { font-size: 10px; }
  .movesCard b { font-size: 22px; }
}


/* Responsive HTML HUD polish */
.app {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  gap: clamp(8px, 1.45vh, 14px) !important;
  padding: clamp(10px, 2vw, 18px) clamp(10px, 2.6vw, 24px) clamp(8px, 1.6vw, 14px) !important;
}

.hud {
  width: 100%;
  max-width: min(100%, 1180px);
  margin: 0 auto;
  grid-template-columns: clamp(56px, 7vw, 78px) minmax(240px, min(42vw, 520px)) clamp(70px, 8vw, 104px) !important;
  justify-content: space-between;
  align-items: start;
  gap: clamp(8px, 2vw, 18px) !important;
}

.hudIcon {
  width: clamp(54px, 7vw, 72px) !important;
  height: clamp(54px, 7vw, 72px) !important;
  border-radius: clamp(18px, 2.4vw, 26px) !important;
}

.hudIconImg {
  width: 46%;
  height: 46%;
  display: block;
}

.gearMark {
  display: none !important;
}

.levelPanel {
  width: 100%;
  max-width: 520px;
  justify-self: center;
  min-height: auto !important;
  padding: clamp(10px, 1.6vw, 16px) clamp(14px, 2.4vw, 22px) clamp(9px, 1.4vw, 14px) !important;
  border-radius: clamp(24px, 3.2vw, 34px) !important;
}

.levelTitle {
  font-size: clamp(15px, 2vw, 22px) !important;
  letter-spacing: .075em;
}

.levelTitleRow {
  gap: clamp(8px, 1.4vw, 13px) !important;
}

.levelDot {
  width: clamp(7px, .8vw, 9px) !important;
  height: clamp(7px, .8vw, 9px) !important;
  min-width: clamp(7px, .8vw, 9px) !important;
  min-height: clamp(7px, .8vw, 9px) !important;
}

.levelProgressWrap {
  gap: clamp(5px, .9vw, 8px) !important;
}

.levelProgressTrack {
  width: min(78%, 360px) !important;
  height: clamp(7px, .9vw, 10px) !important;
}

.levelStars {
  gap: clamp(14px, 2.2vw, 24px) !important;
}

.hudStar {
  width: clamp(14px, 1.7vw, 19px);
  height: clamp(14px, 1.7vw, 19px);
  display: inline-grid;
  place-items: center;
}

.hudStar img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: .34;
  filter: brightness(0) saturate(100%) invert(80%) sepia(8%) saturate(303%) hue-rotate(179deg) brightness(97%) contrast(87%);
}

.hudStar.active img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(81%) sepia(52%) saturate(1802%) hue-rotate(357deg) brightness(103%) contrast(101%);
}

.movesCard {
  width: clamp(70px, 8vw, 96px) !important;
  min-height: clamp(54px, 7vw, 72px) !important;
  border-radius: clamp(18px, 2.4vw, 24px) !important;
  padding: clamp(8px, 1.2vw, 12px) !important;
}

.movesCard small {
  font-size: clamp(9px, 1.1vw, 12px) !important;
}

.movesCard b {
  font-size: clamp(22px, 3vw, 32px) !important;
}

.stageWrap {
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
}

.controls {
  width: 100%;
  max-width: min(92vw, 520px);
  margin: 0 auto;
  justify-content: center !important;
  align-items: center;
  gap: clamp(7px, 1.4vw, 12px) !important;
  overflow-x: visible !important;
  padding: 0 !important;
}

.btn {
  width: clamp(48px, 6.2vw, 62px) !important;
  height: clamp(44px, 5.8vw, 58px) !important;
  min-width: clamp(48px, 6.2vw, 62px) !important;
  padding: 0 !important;
  border-radius: clamp(14px, 1.9vw, 18px) !important;
  display: grid !important;
  place-items: center !important;
}

.sceneBtn span,
.miniBlock {
  transform: scale(clamp(.78, 1.25vw, 1));
  transform-origin: center;
}

@media (orientation: landscape) and (max-height: 720px) {
  .app {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }

  .hud {
    grid-template-columns: 58px minmax(260px, 440px) 74px !important;
  }

  .hudIcon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  .levelPanel {
    padding: 9px 18px 8px !important;
    border-radius: 24px !important;
  }

  .levelTitle {
    font-size: 15px !important;
  }

  .levelProgressTrack {
    height: 7px !important;
  }

  .hudStar {
    width: 13px;
    height: 13px;
  }

  .movesCard {
    width: 66px !important;
    min-height: 54px !important;
    border-radius: 18px !important;
  }

  .movesCard small {
    font-size: 8px !important;
  }

  .movesCard b {
    font-size: 22px !important;
  }

  .controls {
    max-width: 460px;
  }

  .btn {
    width: 48px !important;
    height: 44px !important;
    min-width: 48px !important;
  }
}

@media (max-width: 560px) {
  .hud {
    grid-template-columns: 52px minmax(0, 1fr) 70px !important;
  }

  .levelPanel {
    padding-inline: 10px !important;
  }

  .levelTitle {
    font-size: 14px !important;
  }

  .levelProgressTrack {
    width: min(86%, 240px) !important;
  }

  .controls {
    max-width: 100%;
    gap: 6px !important;
  }

  .btn {
    width: 44px !important;
    height: 42px !important;
    min-width: 44px !important;
  }
}


/* ===== overlay HUD + controls polish ===== */
.app {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.stageWrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 0 !important;
}

.hud {
  position: fixed !important;
  top: clamp(16px, 2vw, 22px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(92vw, 1160px) !important;
  margin: 0 !important;
  z-index: 20 !important;
  grid-template-columns: clamp(56px, 7vw, 74px) minmax(280px, 1fr) clamp(78px, 9vw, 104px) !important;
  align-items: start !important;
  gap: clamp(10px, 1.8vw, 18px) !important;
  pointer-events: none !important;
}
.hud > * { pointer-events: auto !important; }

.hudIcon {
  justify-self: start !important;
  width: clamp(56px, 7vw, 74px) !important;
  height: clamp(56px, 7vw, 74px) !important;
  border-radius: clamp(18px, 2vw, 26px) !important;
}
.hudIconImg { width: 44% !important; height: 44% !important; }

.levelPanel {
  max-width: 100% !important;
  min-height: 0 !important;
  padding: clamp(12px, 1.5vw, 18px) clamp(16px, 2vw, 24px) clamp(10px, 1.2vw, 14px) !important;
  border-radius: clamp(26px, 3vw, 36px) !important;
}
.levelTitle { font-size: clamp(16px, 2vw, 24px) !important; }
.levelProgressTrack { width: min(100%, 370px) !important; }
.levelStars { gap: clamp(16px, 2.1vw, 24px) !important; }
.movesCard {
  justify-self: end !important;
  width: clamp(78px, 9vw, 104px) !important;
  min-height: clamp(56px, 7vw, 74px) !important;
  border-radius: clamp(20px, 2.2vw, 26px) !important;
}

.controls {
  position: fixed !important;
  left: 50% !important;
  bottom: clamp(18px, 2.3vw, 26px) !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  justify-content: center !important;
  gap: clamp(8px, 1.2vw, 12px) !important;
  padding: 0 !important;
  pointer-events: none !important;
}
.controls > * { pointer-events: auto !important; }

.btn {
  width: clamp(50px, 5.4vw, 62px) !important;
  height: clamp(46px, 5vw, 58px) !important;
  min-width: clamp(50px, 5.4vw, 62px) !important;
  border-radius: clamp(14px, 1.7vw, 18px) !important;
}

body.loadingActive .hud,
body.loadingActive .controls,
body.loadingActive .levelStrip {
  display: none !important;
}
body.loadingActive .app { display: block !important; }
body.loadingActive .stageWrap {
  z-index: 0 !important;
}

@media (max-width: 700px) {
  .hud {
    width: min(94vw, 560px) !important;
    grid-template-columns: 54px minmax(0, 1fr) 74px !important;
    gap: 8px !important;
  }
  .levelPanel {
    padding-inline: 12px !important;
  }
  .levelTitle { font-size: 14px !important; }
  .levelProgressTrack { width: min(88%, 250px) !important; height: 8px !important; }
  .movesCard small { font-size: 9px !important; }
  .movesCard b { font-size: 22px !important; }
  .controls {
    gap: 6px !important;
    bottom: 14px !important;
  }
  .btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;
  }
}

@media (orientation: landscape) and (max-height: 760px) {
  .hud {
    top: 14px !important;
    width: min(96vw, 1100px) !important;
    grid-template-columns: 54px minmax(260px, 1fr) 76px !important;
    gap: 10px !important;
  }
  .hudIcon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }
  .levelPanel {
    padding: 10px 16px 8px !important;
    border-radius: 24px !important;
  }
  .levelTitle { font-size: 15px !important; }
  .levelProgressTrack { height: 8px !important; }
  .hudStar { width: 14px !important; height: 14px !important; }
  .movesCard {
    width: 74px !important;
    min-height: 54px !important;
    border-radius: 18px !important;
    padding: 8px 6px !important;
  }
  .movesCard small { font-size: 9px !important; }
  .movesCard b { font-size: 22px !important; }
  .controls { bottom: 14px !important; }
  .btn {
    width: 46px !important;
    min-width: 46px !important;
    height: 42px !important;
  }
}


/* ===== compact overlay HUD v2 ===== */
.hud {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  transform: none !important;
  z-index: 25 !important;
  display: block !important;
  pointer-events: none !important;
}
.hud > * { pointer-events: auto !important; }

.hudIcon {
  position: fixed !important;
  top: clamp(16px, 2vw, 22px) !important;
  left: clamp(16px, 2vw, 22px) !important;
  width: clamp(58px, 6vw, 72px) !important;
  height: clamp(58px, 6vw, 72px) !important;
  border-radius: clamp(20px, 2vw, 26px) !important;
  justify-self: auto !important;
}

.movesCard {
  position: fixed !important;
  top: clamp(16px, 2vw, 22px) !important;
  right: clamp(16px, 2vw, 22px) !important;
  width: clamp(82px, 8.2vw, 102px) !important;
  min-height: clamp(58px, 6vw, 74px) !important;
  border-radius: clamp(20px, 2vw, 26px) !important;
  justify-self: auto !important;
}
.movesCard small { font-size: clamp(10px, .9vw, 12px) !important; }
.movesCard b { font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1 !important; }

.levelPanel {
  position: fixed !important;
  top: clamp(16px, 2vw, 22px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(430px, calc(100vw - 190px)) !important;
  min-height: 0 !important;
  padding: 12px 18px 10px !important;
  border-radius: 28px !important;
  display: grid !important;
  gap: 8px !important;
}
.levelTitle { font-size: clamp(16px, 1.8vw, 22px) !important; }
.levelTitleRow { gap: 10px !important; }
.levelDot { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; }
.levelProgressTrack { width: min(100%, 300px) !important; height: 10px !important; }
.levelProgressWrap { gap: 6px !important; }
.levelStars { gap: 14px !important; }
.hudStar { width: 16px !important; height: 16px !important; }

.controls {
  position: fixed !important;
  left: 50% !important;
  bottom: clamp(10px, 1.4vw, 16px) !important;
  transform: translateX(-50%) !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: auto !important;
  max-width: none !important;
  pointer-events: none !important;
}
.controls > * { pointer-events: auto !important; }

.iconBtn {
  width: clamp(58px, 6vw, 72px) !important;
  height: clamp(58px, 6vw, 72px) !important;
  min-width: clamp(58px, 6vw, 72px) !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.iconBtn img {
  width: 42% !important;
  height: 42% !important;
  display: block !important;
  opacity: .9;
}

#axisV, #axisH, #dropBtn, #retryBtn { display: none !important; }
.levelStrip { display: none !important; }

@media (max-width: 700px) {
  .hudIcon {
    top: 12px !important;
    left: 12px !important;
    width: 52px !important;
    height: 52px !important;
  }
  .movesCard {
    top: 12px !important;
    right: 12px !important;
    width: 72px !important;
    min-height: 52px !important;
  }
  .movesCard small { font-size: 9px !important; }
  .movesCard b { font-size: 22px !important; }
  .levelPanel {
    top: 12px !important;
    width: min(340px, calc(100vw - 152px)) !important;
    padding: 10px 14px 8px !important;
    border-radius: 22px !important;
  }
  .levelTitle { font-size: 14px !important; }
  .levelProgressTrack { width: min(100%, 220px) !important; height: 8px !important; }
  .hudStar { width: 14px !important; height: 14px !important; }
  .controls { gap: 10px !important; bottom: 10px !important; }
  .iconBtn { width: 50px !important; height: 50px !important; min-width: 50px !important; }
}


/* ===== stars-only level island + purple accent buttons ===== */
.levelProgressTrack,
.levelProgressFill {
  display: none !important;
}

.levelPanel {
  padding-bottom: 12px !important;
}

.levelProgressWrap.levelStarsOnly {
  gap: 0 !important;
}

.levelStars {
  min-height: 22px;
  gap: 18px !important;
}

.hudStar {
  width: 18px !important;
  height: 18px !important;
  opacity: .42;
  transform: scale(.78) translateY(0);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), filter .28s ease;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.75));
}
.hudStar img {
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), filter .28s ease;
  opacity: .35;
  transform: scale(.94);
  filter: brightness(0) saturate(100%) invert(78%) sepia(7%) saturate(257%) hue-rotate(180deg) brightness(92%) contrast(88%);
}
.hudStar.active {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 6px 10px rgba(255, 196, 59, .16));
}
.hudStar.active img {
  opacity: 1;
  transform: scale(1);
  filter: brightness(0) saturate(100%) invert(82%) sepia(58%) saturate(1236%) hue-rotate(341deg) brightness(103%) contrast(102%);
}
.hudStar.turningOff {
  transform: scale(.72) translateY(2px);
}
.hudIcon,
.iconBtn {
  border-color: rgba(161, 132, 255, .34) !important;
  background: linear-gradient(180deg, #faf7ff 0%, #efe7ff 100%) !important;
  box-shadow: 0 12px 26px rgba(108, 78, 168, .14), inset 0 2px 0 rgba(255,255,255,.92) !important;
}
.hudIcon:hover,
.iconBtn:hover {
  background: linear-gradient(180deg, #f7f2ff 0%, #e9ddff 100%) !important;
}
.hudIcon:active,
.iconBtn:active {
  transform: translateY(1px) scale(.985) !important;
}
.hudIconImg,
.iconBtn img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(18%) saturate(1538%) hue-rotate(228deg) brightness(98%) contrast(89%);
  opacity: 1 !important;
}
.iconBtn {
  box-shadow: 0 10px 24px rgba(108, 78, 168, .18), inset 0 2px 0 rgba(255,255,255,.95) !important;
}
@media (max-width: 700px) {
  .hudStar {
    width: 15px !important;
    height: 15px !important;
  }
  .levelPanel {
    padding-bottom: 10px !important;
  }
}


/* ===== tighter bottom stack polish ===== */
.controls {
  bottom: clamp(8px, 1vw, 12px) !important;
}

@media (max-width: 700px) {
  .controls {
    bottom: 8px !important;
  }
}


/* ===== stronger purple accent + pause modal ===== */
.hudIcon,
.iconBtn {
  border-color: rgba(132, 92, 255, .48) !important;
  background: linear-gradient(180deg, #F2EBFF 0%, #DCCBFF 100%) !important;
  box-shadow:
    0 14px 28px rgba(99, 70, 180, .22),
    inset 0 2px 0 rgba(255,255,255,.88) !important;
}

.hudIcon:hover,
.iconBtn:hover {
  background: linear-gradient(180deg, #EDE2FF 0%, #CEB8FF 100%) !important;
}

.hudIconImg,
.iconBtn img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(45%) saturate(1791%) hue-rotate(231deg) brightness(92%) contrast(90%) !important;
  opacity: 1 !important;
}

.pauseOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  background: rgba(31, 42, 55, .34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.pauseOpen .pauseOverlay {
  opacity: 1;
  pointer-events: auto;
}

.pauseCard {
  width: min(380px, calc(100vw - 34px));
  border-radius: 34px;
  padding: 26px 22px 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,242,255,.92));
  border: 1px solid rgba(150, 121, 255, .22);
  box-shadow:
    0 28px 70px rgba(36, 42, 64, .28),
    inset 0 2px 0 rgba(255,255,255,.86);
  transform: translateY(12px) scale(.96);
  transition: transform .24s cubic-bezier(.22,1,.36,1);
}

body.pauseOpen .pauseCard {
  transform: translateY(0) scale(1);
}

.pauseEyebrow {
  text-align: center;
  color: #7A69A6;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  margin-bottom: 5px;
}

.pauseCard h2 {
  margin: 0 0 18px;
  text-align: center;
  color: #4D5871;
  font-size: clamp(24px, 4.5vw, 34px);
  line-height: 1;
  letter-spacing: .02em;
}

.pauseActions {
  display: grid;
  gap: 11px;
}

.pauseAction {
  appearance: none;
  border: 1px solid rgba(132, 92, 255, .30);
  border-radius: 20px;
  min-height: 54px;
  padding: 0 18px;
  color: #5F45B8;
  background: linear-gradient(180deg, #FBF8FF, #EDE4FF);
  font: 800 15px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .08em;
  box-shadow:
    0 10px 24px rgba(99, 70, 180, .14),
    inset 0 2px 0 rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .13s ease, background .13s ease, box-shadow .13s ease;
}

.pauseAction:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #F4EEFF, #DDCEFF);
  box-shadow:
    0 13px 28px rgba(99, 70, 180, .18),
    inset 0 2px 0 rgba(255,255,255,.92);
}

.pauseAction:active {
  transform: translateY(1px) scale(.99);
}

.pauseAction.primary {
  color: #ffffff;
  border-color: rgba(116, 79, 230, .52);
  background: linear-gradient(180deg, #9270FF, #6B4ED9);
  box-shadow:
    0 14px 30px rgba(98, 66, 210, .30),
    inset 0 2px 0 rgba(255,255,255,.22);
}

@media (max-width: 560px) {
  .pauseCard {
    border-radius: 28px;
    padding: 22px 18px 18px;
  }

  .pauseAction {
    min-height: 50px;
    border-radius: 17px;
    font-size: 14px;
  }
}


/* ===== extra UI personality pass ===== */
body {
  background:
    radial-gradient(circle at 13% 10%, rgba(139, 118, 255, .16), transparent 22%),
    radial-gradient(circle at 88% 13%, rgba(99, 218, 170, .14), transparent 22%),
    radial-gradient(circle at 50% 94%, rgba(255, 196, 91, .12), transparent 24%),
    linear-gradient(180deg, #f8fbfd 0%, #edf3f8 100%) !important;
}

.levelPanel,
.movesCard,
.hudIcon,
.iconBtn {
  position: relative;
  overflow: hidden;
}

.levelPanel::before,
.movesCard::before,
.hudIcon::before,
.iconBtn::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
  pointer-events: none;
}

.levelPanel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: min(230px, 64%);
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(132, 92, 255, .18), transparent 68%);
  pointer-events: none;
}

.levelPanel {
  border-color: rgba(150, 121, 255, .20) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(249,246,255,.90)) !important;
  box-shadow:
    0 22px 46px rgba(69, 78, 101, .12),
    0 6px 18px rgba(132, 92, 255, .08),
    inset 0 2px 0 rgba(255,255,255,.88) !important;
}

.levelTitle {
  color: #52607C !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.80);
}

.levelDot {
  background: linear-gradient(180deg, #D6D1E6, #AFA6C9) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}

.levelStars {
  padding-top: 1px;
}

.hudStar.active {
  animation: starSoftPulse 2.2s ease-in-out infinite;
}

.hudStar:nth-child(2).active { animation-delay: .16s; }
.hudStar:nth-child(3).active { animation-delay: .32s; }

@keyframes starSoftPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.075) rotate(-2deg); }
}

.movesCard {
  background:
    radial-gradient(circle at 24% 0%, rgba(255,255,255,.85), transparent 38%),
    linear-gradient(180deg, #ffffff, #f5f0ff) !important;
  border-color: rgba(150, 121, 255, .22) !important;
}

.movesCard small {
  color: #75659F !important;
}

.movesCard b {
  color: #5F45B8 !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.88);
}

.iconBtn {
  background:
    radial-gradient(circle at 26% 8%, rgba(255,255,255,.92), transparent 32%),
    linear-gradient(180deg, #F0E8FF 0%, #CDB9FF 100%) !important;
  border-color: rgba(132, 92, 255, .54) !important;
  box-shadow:
    0 14px 30px rgba(99,70,180,.24),
    0 5px 13px rgba(255,255,255,.46) inset,
    inset 0 2px 0 rgba(255,255,255,.9) !important;
}

.iconBtn:nth-child(1) {
  background:
    radial-gradient(circle at 26% 8%, rgba(255,255,255,.92), transparent 32%),
    linear-gradient(180deg, #FFF4C9 0%, #FFD35C 100%) !important;
  border-color: rgba(236, 179, 36, .44) !important;
  box-shadow:
    0 14px 30px rgba(194,142,30,.18),
    inset 0 2px 0 rgba(255,255,255,.86) !important;
}

.iconBtn:nth-child(1) img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(31%) saturate(1386%) hue-rotate(354deg) brightness(92%) contrast(89%) !important;
}

.iconBtn img {
  transform: scale(1);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}

.iconBtn:hover img {
  transform: scale(1.08);
}

.iconBtn:active img {
  transform: scale(.94);
}

.pauseCard {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.94), transparent 36%),
    radial-gradient(circle at 84% 8%, rgba(220,203,255,.52), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,240,255,.94)) !important;
}

.pauseAction {
  position: relative;
  overflow: hidden;
}

.pauseAction::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent);
  pointer-events: none;
}

.pauseAction.primary {
  background: linear-gradient(180deg, #9D7AFF, #6348CC) !important;
}

/* stronger centered board feel on wide screens */
@media (min-width: 900px) {
  .levelPanel {
    width: min(390px, calc(100vw - 220px)) !important;
  }
}


/* ===== softer button hover / press transitions ===== */
.hudIcon,
.iconBtn,
.pauseAction,
.btn {
  transition:
    transform .22s cubic-bezier(.22, 1, .36, 1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
}

.hudIconImg,
.iconBtn img {
  transition:
    transform .24s cubic-bezier(.22, 1, .36, 1),
    opacity .24s ease,
    filter .28s ease !important;
}

.hudIcon:hover,
.iconBtn:hover {
  transform: translateY(-1px) scale(1.015) !important;
  background:
    radial-gradient(circle at 26% 8%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(180deg, #F2E9FF 0%, #D6C4FF 100%) !important;
  box-shadow:
    0 16px 32px rgba(99,70,180,.20),
    0 5px 14px rgba(255,255,255,.42) inset,
    inset 0 2px 0 rgba(255,255,255,.9) !important;
}

.iconBtn:nth-child(1):hover {
  background:
    radial-gradient(circle at 26% 8%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(180deg, #FFF6D5 0%, #FFD970 100%) !important;
  box-shadow:
    0 16px 32px rgba(194,142,30,.16),
    inset 0 2px 0 rgba(255,255,255,.88) !important;
}

.hudIcon:hover .hudIconImg,
.iconBtn:hover img {
  transform: scale(1.04) !important;
}

.hudIcon:active,
.iconBtn:active {
  transform: translateY(1px) scale(.985) !important;
  transition-duration: .10s !important;
}

.hudIcon:active .hudIconImg,
.iconBtn:active img {
  transform: scale(.96) !important;
  transition-duration: .10s !important;
}

.pauseAction:hover {
  transform: translateY(-1px) scale(1.006) !important;
  background: linear-gradient(180deg, #F6F0FF, #E4D8FF) !important;
  box-shadow:
    0 13px 28px rgba(99,70,180,.16),
    inset 0 2px 0 rgba(255,255,255,.92) !important;
}

.pauseAction.primary:hover {
  background: linear-gradient(180deg, #A383FF, #684DD4) !important;
  box-shadow:
    0 16px 32px rgba(98,66,210,.26),
    inset 0 2px 0 rgba(255,255,255,.24) !important;
}

.pauseAction:active {
  transform: translateY(1px) scale(.99) !important;
  transition-duration: .10s !important;
}

.btn:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

.btn:active {
  transform: translateY(1px) scale(.99) !important;
  transition-duration: .10s !important;
}


/* ===== mechanic tutorial modal ===== */
.tutorialOverlay {
  position: fixed;
  inset: 0;
  z-index: 76;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  background: rgba(31, 42, 55, .26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.tutorialOpen .tutorialOverlay {
  opacity: 1;
  pointer-events: auto;
}

.tutorialCard {
  width: min(430px, calc(100vw - 34px));
  border-radius: 34px;
  padding: 24px 22px 22px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.94), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(211,196,255,.48), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,242,255,.95));
  border: 1px solid rgba(150, 121, 255, .24);
  box-shadow:
    0 28px 70px rgba(36, 42, 64, .25),
    inset 0 2px 0 rgba(255,255,255,.88);
  transform: translateY(12px) scale(.96);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}

body.tutorialOpen .tutorialCard {
  transform: translateY(0) scale(1);
}

.tutorialBadge {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  color: #5F45B8;
  background: linear-gradient(180deg, #F3ECFF, #DDCEFF);
  border: 1px solid rgba(132,92,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font: 800 11px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .12em;
}

.tutorialCard h2 {
  margin: 12px 0 8px;
  color: #4D5871;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1;
}

.tutorialCard p {
  max-width: 330px;
  margin: 0 auto 18px;
  color: #6D7892;
  font: 600 15px/1.35 "Fredoka", system-ui, sans-serif;
}








/* ===== combo levels, rewards and game over ===== */
.puzzleProgressText {
  color: #8A7BAD;
  font-size: clamp(9px, .92vw, 11px);
  font-weight: 800;
  letter-spacing: .13em;
  margin-left: 4px;
  white-space: nowrap;
}

.levelTitleRow {
  flex-wrap: wrap;
  row-gap: 2px;
}

.hintBtn { position: relative !important; }
.hintCount {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #A383FF, #684DD4);
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 7px 16px rgba(85,61,174,.24);
  font: 900 11px/1 "Fredoka", system-ui, sans-serif;
  pointer-events: none;
}

.comboOverlay {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  background: rgba(31,42,55,.30);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

body.completeOpen .completeOverlay,
body.gameOverOpen .gameOverOverlay,
body.rewardConfirmOpen .rewardConfirmOverlay,
body.adCountdownOpen .adCountdownOverlay {
  opacity: 1;
  pointer-events: auto;
}

.comboCard {
  width: min(430px, calc(100vw - 34px));
  border-radius: 34px;
  padding: 25px 22px 22px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.95), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(220,203,255,.52), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,242,255,.95));
  border: 1px solid rgba(150,121,255,.24);
  box-shadow: 0 28px 70px rgba(36,42,64,.26), inset 0 2px 0 rgba(255,255,255,.88);
  transform: translateY(12px) scale(.96);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}

.comboCard.small { width: min(390px, calc(100vw - 34px)); }
body.completeOpen .completeOverlay .comboCard,
body.gameOverOpen .gameOverOverlay .comboCard,
body.rewardConfirmOpen .rewardConfirmOverlay .comboCard,
body.adCountdownOpen .adCountdownOverlay .comboCard {
  transform: translateY(0) scale(1);
}

.comboEyebrow {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  color: #5F45B8;
  background: linear-gradient(180deg, #F3ECFF, #DDCEFF);
  border: 1px solid rgba(132,92,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font: 900 11px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .13em;
}
.comboEyebrow.danger {
  color: #B85065;
  background: linear-gradient(180deg, #FFE9EE, #FFC9D5);
  border-color: rgba(216,99,123,.24);
}
.comboCard h2 {
  margin: 12px 0 8px;
  color: #4D5871;
  font-size: clamp(25px, 4.7vw, 36px);
  line-height: 1;
}
.comboCard p {
  max-width: 330px;
  margin: 0 auto 18px;
  color: #6D7892;
  font: 650 15px/1.35 "Fredoka", system-ui, sans-serif;
}
.comboActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.comboActions.threeActions {
  grid-template-columns: 1fr 1fr 1fr;
}
.comboAction {
  appearance: none;
  border: 1px solid rgba(132,92,255,.30);
  border-radius: 18px;
  min-height: 52px;
  padding: 0 10px;
  color: #5F45B8;
  background: linear-gradient(180deg, #FBF8FF, #EDE4FF);
  box-shadow: 0 10px 24px rgba(99,70,180,.14), inset 0 2px 0 rgba(255,255,255,.92);
  font: 900 13px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, background .24s ease;
}
.comboAction:hover { transform: translateY(-1px) scale(1.006); background: linear-gradient(180deg, #F6F0FF, #E4D8FF); }
.comboAction:active { transform: translateY(1px) scale(.99); transition-duration: .1s; }
.comboAction.primary {
  color: #fff;
  border-color: rgba(116,79,230,.48);
  background: linear-gradient(180deg, #9D7AFF, #6348CC);
  box-shadow: 0 14px 30px rgba(98,66,210,.28), inset 0 2px 0 rgba(255,255,255,.23);
}
.adCountdownText {
  width: 96px;
  height: 96px;
  margin: 14px auto 4px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(180deg, #9D7AFF, #6348CC);
  box-shadow: 0 18px 38px rgba(98,66,210,.30), inset 0 2px 0 rgba(255,255,255,.26);
  font: 900 46px/1 "Fredoka", system-ui, sans-serif;
}

@media (max-width: 560px) {
  .comboActions.threeActions { grid-template-columns: 1fr; }
  .comboAction { min-height: 48px; }
}


/* ===== flat stage progress instead of stars ===== */
.levelStars,
.hudStar {
  display: none !important;
}

.stageProgressWrap {
  width: 100% !important;
  display: grid !important;
  justify-items: center !important;
  gap: 0 !important;
}

.stageProgress {
  width: min(240px, 100%);
  height: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.stageSegment {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #E2E5EC;
  border: 0;
}

.stageSegment i {
  position: absolute;
  inset: 0;
  display: block;
  width: 0%;
  border-radius: inherit;
  background: #7457E6;
  transition: width .28s ease;
}

.stageSegment.complete i {
  width: 100%;
}

.stageSegment.current i {
  width: 38%;
  background: #8B70FF;
}

.stageSegment.pending i {
  width: 0%;
}

.levelPanel {
  background: #FFFFFF !important;
  border: 1px solid #E4E1F3 !important;
  box-shadow: 0 12px 28px rgba(51, 60, 88, .10) !important;
}

.levelPanel::before,
.levelPanel::after {
  display: none !important;
}

/* ===== flat level complete modal ===== */
.completeOverlay .comboCard {
  width: min(390px, calc(100vw - 34px)) !important;
  border-radius: 28px !important;
  padding: 24px 20px 20px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E1F3 !important;
  box-shadow: 0 22px 54px rgba(31, 42, 55, .22) !important;
}

.completeOverlay .comboEyebrow {
  color: #7457E6 !important;
  background: #F1EDFF !important;
  border: 0 !important;
  box-shadow: none !important;
}

.completeOverlay .comboCard h2 {
  margin: 14px 0 8px !important;
  color: #3F4658 !important;
  font-size: clamp(27px, 5vw, 40px) !important;
  letter-spacing: .01em !important;
}

.completeOverlay .comboCard p {
  margin-bottom: 18px !important;
  color: #6B7284 !important;
  font: 700 15px/1.35 "Fredoka", system-ui, sans-serif !important;
}

.completeOverlay .comboActions,
.completeOverlay .comboActions.threeActions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.completeOverlay .comboAction {
  min-height: 52px !important;
  border-radius: 18px !important;
  background: #F4F1FF !important;
  color: #5F45B8 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.completeOverlay .comboAction.primary {
  color: #FFFFFF !important;
  background: #7457E6 !important;
}

.completeOverlay .comboAction:hover {
  transform: translateY(-1px) !important;
  background: #ECE6FF !important;
}

.completeOverlay .comboAction.primary:hover {
  background: #6548D4 !important;
}

@media (max-width: 700px) {
  .stageProgress {
    width: min(190px, 100%);
    height: 10px;
    gap: 4px;
  }
}


/* ===== level complete button order polish ===== */
.completeOverlay .levelCompleteActions {
  grid-template-columns: 1fr !important;
}

.completeOverlay .levelCompleteActions #completeNextBtn {
  order: 1;
}

.completeOverlay .levelCompleteActions #completeRestartBtn {
  order: 2;
}

.completeOverlay .levelCompleteActions #completeResumeBtn {
  order: 3;
}

.completeOverlay .comboEyebrow {
  letter-spacing: .14em !important;
}

.completeOverlay .comboCard p {
  font-size: 18px !important;
  color: #5F45B8 !important;
}


/* ===== 4-stage tutorial level support ===== */
.stageProgress {
  grid-template-columns: repeat(var(--stage-count, 3), 1fr) !important;
}

#stageSegment4[hidden] {
  display: none !important;
}

/* ===== calmer flat feedback ===== */
.iconBtn,
.hudIcon,
.comboAction,
.pauseAction,



/* ===== hint badge overflow fix ===== */
.hintBtn,
.iconBtn.hintBtn {
  overflow: visible !important;
}

.controls {
  overflow: visible !important;
}

.hintCount {
  z-index: 5 !important;
  top: -7px !important;
  right: -7px !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

.hintBtn::before {
  border-radius: inherit;
  overflow: hidden;
}






/* ===== tutorial slot controlled by JS ===== */
body:not(.tutorialOpen) .tutorialOverlay {
  opacity: 0;
  pointer-events: none;
}

body.tutorialOpen .tutorialOverlay {
  display: grid;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}


/* ===== Cut n' Fill branding polish ===== */
.brand,
.logo,
.appTitle,
.menuTitle,
h1 {
  letter-spacing: -0.035em;
}

.brandName,
.logoText,
.appTitle,
.menuTitle {
  text-wrap: balance;
}

body::after {
  content: "";
  position: fixed;
  inset: auto 20px 18px auto;
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(135deg, rgba(255, 142, 178, .14), rgba(116, 87, 230, .11));
  filter: blur(.2px);
  opacity: .48;
  pointer-events: none;
  z-index: 0;
}

/* ===== tutorial continue CTA cleanup ===== */



/* ===== popup disabled globally ===== */
#tutorialOverlay,
.tutorialOverlay,
body.tutorialOpen #tutorialOverlay,
body.tutorialOpen .tutorialOverlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===== modal tutorial popup disabled; visual guide is JS-gated to Level 1 puzzles 1-4 ===== */
#tutorialOverlay,
.tutorialOverlay,
body.tutorialOpen #tutorialOverlay,
body.tutorialOpen .tutorialOverlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===== Main menu ===== */
.mainMenuOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 34px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 129, 164, .18), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(127, 97, 255, .16), transparent 32%),
    radial-gradient(circle at 50% 92%, rgba(95, 211, 183, .18), transparent 34%),
    linear-gradient(180deg, #F9FBFF 0%, #F1F5FA 100%);
}

body.mainMenuOpen .mainMenuOverlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.loadingActive .mainMenuOverlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mainMenuOpen .hud,
body.mainMenuOpen .controls,
body.mainMenuOpen .levelStrip {
  display: none !important;
}

body.mainMenuOpen .stageWrap {
  opacity: 0;
  pointer-events: none;
}

.mainMenuCard {
  width: min(520px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  scrollbar-width: none;
  border-radius: 44px;
  padding: clamp(24px, 5vw, 38px);
  text-align: center;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.98), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(220, 203, 255, .58), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,244,255,.94));
  border: 1px solid rgba(150, 121, 255, .22);
  box-shadow:
    0 34px 90px rgba(56, 64, 92, .18),
    inset 0 2px 0 rgba(255,255,255,.90);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}

.mainMenuCard::-webkit-scrollbar { display: none; }

body.mainMenuOpen .mainMenuCard {
  transform: translateY(0) scale(1);
}

.mainMenuBadge {
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  color: #7457E6;
  background: #fff;
  border: 1px solid #E9E4FF;
  box-shadow: 0 8px 22px rgba(67, 54, 126, .10);
  font: 900 12px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .08em;
}

.mainMenuCard h1 {
  margin: 14px 0 6px;
  color: #4C5170;
  font: 900 clamp(42px, 8vw, 66px)/.9 "Fredoka", system-ui, sans-serif;
  letter-spacing: -.055em;
}

.mainMenuSubtitle {
  margin: 0 auto;
  max-width: 350px;
  color: #7A829C;
  font: 700 16px/1.35 "Fredoka", system-ui, sans-serif;
}

.mainMenuPreview {
  position: relative;
  width: 214px;
  height: 88px;
  margin: 24px auto 18px;
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  place-items: center;
}

.previewTile {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.42),
    inset 0 0 0 8px rgba(255,255,255,.16),
    0 14px 28px rgba(68, 76, 104, .12);
}

.previewTile.red {
  background: linear-gradient(180deg, #FF7D91, #F45F78);
  border: 4px solid #D95168;
}

.previewTile.blue {
  background: linear-gradient(180deg, #65CEFF, #4AB9EC);
  border: 4px solid #40A2D8;
}

.previewCut {
  width: 7px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9B7BFF, #5FD3B7);
  box-shadow: 0 0 0 6px rgba(155,123,255,.10), 0 14px 24px rgba(95,211,183,.22);
}

.mainMenuStats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  color: #687089;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(126,142,161,.14);
  font: 900 12px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .08em;
}

.mainMenuActions {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 10px;
}

.mainMenuAction {
  appearance: none;
  border: 0;
  min-height: 58px;
  border-radius: 22px;
  color: #5C5578;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(126,142,161,.18);
  box-shadow: 0 13px 28px rgba(68,76,104,.11), inset 0 2px 0 rgba(255,255,255,.82);
  cursor: pointer;
  font: 900 15px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .04em;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, filter .18s ease;
}

.mainMenuAction.primary {
  color: white;
  background: linear-gradient(180deg, #A383FF, #7457E6);
  border-color: rgba(255,255,255,.58);
  box-shadow: 0 16px 36px rgba(116,87,230,.28), inset 0 2px 0 rgba(255,255,255,.30);
  font-size: 17px;
}

.mainMenuAction:hover,
.mainMenuAction.active {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.mainMenuAction:active {
  transform: translateY(1px) scale(.99);
}

.mainLevelGrid {
  margin-top: 14px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(126,142,161,.13);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mainLevelGrid[hidden] {
  display: none !important;
}

.mainLevelBtn {
  appearance: none;
  border: 1px solid rgba(126,142,161,.16);
  border-radius: 15px;
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 1px;
  background: #fff;
  color: #5B6380;
  box-shadow: 0 8px 18px rgba(68,76,104,.08);
  cursor: pointer;
  font-family: "Fredoka", system-ui, sans-serif;
}

.mainLevelBtn b {
  font-size: 16px;
  line-height: 1;
}

.mainLevelBtn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #939AB0;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}

.mainLevelBtn.done {
  background: linear-gradient(180deg, #E9FFF8, #D7FAEF);
  border-color: rgba(95,211,183,.34);
  color: #188D72;
}

.mainLevelBtn.current {
  background: linear-gradient(180deg, #F0E9FF, #E4D8FF);
  border-color: rgba(116,87,230,.34);
  color: #7457E6;
}

.mainLevelBtn.locked {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(.16);
}

@media (max-width: 560px) {
  .mainMenuCard {
    border-radius: 34px;
    padding: 22px 18px;
  }

  .mainMenuActions {
    grid-template-columns: 1fr;
  }

  .mainLevelGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mainMenuPreview {
    margin: 18px auto 14px;
    transform: scale(.9);
  }
}


/* ===== Splash + clean main menu v2 ===== */
.splashOverlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(116, 87, 230, .18), transparent 34%),
    linear-gradient(180deg, #F9FBFF 0%, #EEF3F8 100%);
  opacity: 0;
  visibility: hidden;
}

body.splashActive .splashOverlay {
  visibility: visible;
  animation: splashOverlayFade 1.55s ease both;
}

.splashLogo {
  width: min(58vw, 560px);
  max-width: calc(100vw - 38px);
  filter: drop-shadow(0 28px 42px rgba(30, 28, 90, .22));
  transform: translateY(34px) scale(.94);
  opacity: 0;
}

body.splashActive .splashLogo {
  animation: splashLogoInOut 1.55s cubic-bezier(.22,1,.36,1) both;
}

@keyframes splashOverlayFade {
  0% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes splashLogoInOut {
  0% { opacity: 0; transform: translateY(42px) scale(.92); }
  28% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(.985); }
}

.mainMenuOverlay {
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 129, 164, .12), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(127, 97, 255, .13), transparent 32%),
    linear-gradient(180deg, #F9FBFF 0%, #EEF3F8 100%) !important;
  overflow: hidden;
}

.mainMenuCard,
.mainMenuShell {
  width: min(360px, calc(100vw - 34px));
  max-height: min(760px, calc(100dvh - 30px));
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.mainMenuBadge,
.mainMenuSubtitle,
.mainMenuPreview,
.mainMenuStats {
  display: none !important;
}

.mainMenuTitle,
.mainMenuCard h1 {
  margin: 0 0 22px !important;
  color: #4C5170;
  text-shadow: 0 8px 24px rgba(75, 76, 120, .10);
  font: 900 clamp(42px, 8.5vw, 62px)/.92 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: -.055em;
}

.mainMenuActions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 11px !important;
  width: min(330px, calc(100vw - 44px));
  margin: 0 auto;
}

.mainMenuAction {
  min-height: 58px !important;
  width: 100%;
  border-radius: 22px !important;
  font: 900 15px/1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .06em;
}

.mainMenuAction.primary {
  min-height: 64px !important;
  font-size: 17px !important;
}

.mainMenuBrand {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(180px, 34vw);
  z-index: 1;
  opacity: .96;
  filter: drop-shadow(0 18px 28px rgba(29, 25, 94, .20));
  pointer-events: none;
}

.mainLevelGrid {
  width: min(420px, calc(100vw - 34px));
  max-height: min(285px, 38dvh);
  overflow: auto;
  margin: 14px auto 0 !important;
}

.settingsPanel {
  z-index: 240 !important;
}

@media (max-width: 560px) {
  .mainMenuTitle,
  .mainMenuCard h1 {
    margin-bottom: 18px !important;
  }

  .mainMenuBrand {
    width: min(142px, 38vw);
  }

  .splashLogo {
    width: min(78vw, 430px);
  }
}


/* ===== Real custom settings + shop ===== */
.customPanel {
  position: fixed;
  inset: 0;
  z-index: 245;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 42, 55, .28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.customPanel[hidden] {
  display: none !important;
}

.customPanelCard {
  width: min(430px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  overflow: auto;
  border-radius: 32px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,255,.96));
  border: 1px solid rgba(150,121,255,.22);
  box-shadow: 0 28px 70px rgba(36,42,64,.26), inset 0 2px 0 rgba(255,255,255,.88);
}

.customPanelTop {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #4C5170;
  font: 900 16px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .07em;
}

.customPanelClose {
  appearance: none;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #7457E6;
  background: #fff;
  box-shadow: 0 8px 18px rgba(68,76,104,.10);
  font: 900 24px/1 "Fredoka", system-ui, sans-serif;
  cursor: pointer;
}

.customPanelBody {
  display: grid;
  gap: 12px;
}

.customToggle {
  appearance: none;
  border: 1px solid rgba(126,142,161,.16);
  min-height: 58px;
  border-radius: 20px;
  padding: 0 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #5C5578;
  background: #fff;
  box-shadow: 0 10px 22px rgba(68,76,104,.08);
  font: 900 14px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
}

.customToggle i {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #DDE4ED;
  position: relative;
  transition: background .2s ease;
}

.customToggle i::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 14px rgba(21,35,52,.18);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}

.customToggle.on i {
  background: linear-gradient(180deg, #A383FF, #7457E6);
}

.customToggle.on i::after {
  transform: translateX(24px);
}

.customSliderRow {
  border: 1px solid rgba(126,142,161,.16);
  border-radius: 20px;
  padding: 14px 16px 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(68,76,104,.08);
}

.customSliderHead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #5C5578;
  font: 900 13px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .05em;
}

.customSliderHead b {
  color: #7457E6;
}

.customSlider {
  height: 28px;
  display: grid;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.customSlider i {
  grid-area: 1 / 1;
  height: 12px;
  border-radius: 999px;
  background: #E2E7EF;
  overflow: hidden;
}

.customSlider i::before {
  content: "";
  display: block;
  width: var(--value, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7457E6, #5FD3B7);
}

.customSlider em {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #7457E6;
  box-shadow: 0 8px 18px rgba(68,76,104,.18);
  transform: translateX(calc(var(--value, 50%) - 13px));
}

.orbsPill {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff7d8;
  color: #9C6B00;
  border: 1px solid #FFE3A2;
  font: 900 13px/1 "Fredoka", system-ui, sans-serif;
}

.orbsPill i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #ffd66b 38%, #f59e0b 100%);
}

.paletteGrid {
  display: grid;
  gap: 12px;
}

.paletteCard {
  appearance: none;
  border: 1px solid rgba(126,142,161,.16);
  border-radius: 22px;
  padding: 14px;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #fff;
  color: #4C5170;
  box-shadow: 0 10px 22px rgba(68,76,104,.08);
  cursor: pointer;
  font-family: "Fredoka", system-ui, sans-serif;
}

.paletteSwatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.paletteSwatches i {
  height: 22px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

.paletteCard strong {
  font: 900 14px/1.1 "Fredoka", system-ui, sans-serif;
}

.paletteAction {
  min-width: 74px;
  text-align: center;
  border-radius: 999px;
  padding: 9px 10px;
  color: #7457E6;
  background: #F0E9FF;
  font: 900 11px/1 "Fredoka", system-ui, sans-serif;
}

.paletteCard.active .paletteAction {
  color: #0E7D62;
  background: #DDFBF2;
}

.mainMenuActions {
  grid-template-areas:
    "continue"
    "levels"
    "endless"
    "shop"
    "settings"
    "daily";
}

#mainPlayBtn { grid-area: continue; }
#mainLevelsBtn { grid-area: levels; }
#mainEndlessBtn { grid-area: endless; }
#mainShopBtn { grid-area: shop; }
#mainSettingsBtn { grid-area: settings; }
#mainDailyBtn { grid-area: daily; }

body.reducedMotion *,
body.reducedMotion *::before,
body.reducedMotion *::after {
  animation-duration: .001s !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}

.comboActions:has(#gameMainMenuBtn) {
  grid-template-columns: 1fr;
}


/* ===== custom slider thumb position fix ===== */
.customSlider {
  position: relative !important;
  min-height: 32px !important;
}

.customSlider i {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.customSlider em {
  position: absolute !important;
  left: var(--value, 50%) !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.customSlider::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}


/* ===== fullscreen overlay edge leak fix ===== */
html,
body {
  background: #EEF3F8 !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

.customPanel,
.settingsPanel.customPanel,
.shopPanel.customPanel,
.pauseOverlay,
.comboOverlay,
.mainMenuOverlay,
.splashOverlay {
  inset: -3px !important;
  width: calc(100vw + 6px) !important;
  height: calc(100dvh + 6px) !important;
  min-width: calc(100vw + 6px) !important;
  min-height: calc(100dvh + 6px) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
}

.customPanel,
.settingsPanel.customPanel,
.shopPanel.customPanel {
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(218,222,232,.88), rgba(190,199,209,.88)) !important;
}

.customPanel::before,
.settingsPanel.customPanel::before,
.shopPanel.customPanel::before {
  content: "";
  position: fixed;
  inset: -8px;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(218,222,232,.94), rgba(190,199,209,.94));
}

.customPanelCard {
  box-shadow:
    0 32px 90px rgba(36,42,64,.26),
    inset 0 2px 0 rgba(255,255,255,.90) !important;
}

body:has(.customPanel:not([hidden])) .mainMenuBrand {
  opacity: 0 !important;
}


body.settingsOpen .mainMenuBrand,
body.shopOpen .mainMenuBrand {
  opacity: 0 !important;
}


/* ===== separate level select screen ===== */
.levelSelectScreen {
  position: fixed;
  inset: 0;
  z-index: 126;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 18px;
  padding: clamp(20px, 5vw, 44px);
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 129, 164, .12), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(127, 97, 255, .13), transparent 32%),
    linear-gradient(180deg, #F9FBFF 0%, #EEF3F8 100%);
}

.levelSelectScreen[hidden] {
  display: none !important;
}

body.levelSelectOpen .mainMenuShell,
body.levelSelectOpen .mainMenuBrand {
  display: none !important;
}

.levelSelectTop {
  width: min(600px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 96px 1fr 96px;
  align-items: center;
}

.levelSelectTop h2 {
  margin: 0;
  text-align: center;
  color: #4C5170;
  font: 900 clamp(28px, 6vw, 46px)/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: -.035em;
}

.levelSelectBackBtn,
.levelPageControls button {
  appearance: none;
  border: 0;
  min-height: 46px;
  border-radius: 17px;
  color: #7457E6;
  background: #fff;
  box-shadow: 0 12px 24px rgba(68,76,104,.10), inset 0 2px 0 rgba(255,255,255,.86);
  font: 900 12px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}

.levelSelectBackBtn:active,
.levelPageControls button:active {
  transform: translateY(1px) scale(.99);
}

.levelSelectScreen .mainLevelGrid {
  display: grid !important;
  width: min(610px, calc(100vw - 38px));
  max-height: none;
  overflow: visible;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 2vw, 14px);
}

.levelSelectScreen .mainLevelBtn {
  aspect-ratio: 1 / .78;
  min-height: 70px;
  border-radius: 24px;
}

.levelSelectScreen .mainLevelBtn b {
  font-size: clamp(22px, 5vw, 34px);
}

.levelSelectScreen .mainLevelBtn span {
  font-size: 9px;
}

.levelPageControls {
  width: min(420px, calc(100vw - 46px));
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  align-items: center;
  gap: 10px;
}

.levelPageControls span {
  text-align: center;
  color: #6C728C;
  font: 900 13px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .08em;
}

.levelPageControls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .levelSelectTop {
    grid-template-columns: 76px 1fr 76px;
  }

  .levelSelectBackBtn,
  .levelPageControls button {
    min-height: 40px;
    border-radius: 14px;
    font-size: 10px;
  }

  .levelSelectScreen .mainLevelGrid {
    gap: 8px;
  }

  .levelSelectScreen .mainLevelBtn {
    min-height: 58px;
    border-radius: 18px;
  }

  .levelPageControls {
    grid-template-columns: 74px 1fr 74px;
  }
}


/* ===== global UI tap feedback ===== */
button,
.customToggle,
.customSlider,
.mainLevelBtn,
.mainMenuAction,
.comboAction,
.levelSelectBackBtn,
.customPanelClose,
.iconBtn,
.hudIcon {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.uiTapPulse {
  animation: uiTapPulse .18s cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes uiTapPulse {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(.965); filter: brightness(1.045); }
  100% { transform: scale(1); filter: brightness(1); }
}

.mainMenuAction.uiTapPulse,
.comboAction.uiTapPulse,
.mainLevelBtn.uiTapPulse,
.customToggle.uiTapPulse,
.customPanelClose.uiTapPulse,
.levelSelectBackBtn.uiTapPulse,
.levelPageControls button.uiTapPulse {
  box-shadow:
    0 10px 20px rgba(68,76,104,.13),
    inset 0 2px 0 rgba(255,255,255,.78) !important;
}

.mainMenuAction.primary.uiTapPulse,
.comboAction.primary.uiTapPulse {
  box-shadow:
    0 12px 28px rgba(116,87,230,.28),
    inset 0 2px 0 rgba(255,255,255,.30) !important;
}

.customSlider.uiTapPulse {
  animation: uiSliderPulse .18s cubic-bezier(.22,1,.36,1) both !important;
}

@keyframes uiSliderPulse {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.075); }
  100% { filter: brightness(1); }
}


/* ===== CUT N FILL title polish ===== */
.mainMenuBrandTitle,
.mainMenuTitle,
.mainMenuLogoTitle,
.brandTitle,
.splashTitle,
.heroTitle {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: clamp(44px, 8vw, 88px) !important;
  line-height: .92 !important;
  letter-spacing: .14em !important;
  color: #FFFFFF !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 12px 26px rgba(116,87,230,.14) !important;
}

.mainMenuBrandTitle,
.mainMenuTitle,
.mainMenuLogoTitle {
  margin: 0 !important;
}

.mainMenuBrandTitle small,
.mainMenuTitle small,
.mainMenuLogoTitle small,
.mainMenuBrandTitle .titleTop,
.mainMenuTitle .titleTop,
.mainMenuLogoTitle .titleTop {
  display: block !important;
  font-size: .46em !important;
  line-height: .9 !important;
  letter-spacing: .24em !important;
  margin-bottom: .12em !important;
  opacity: .92 !important;
}

.mainMenuBrandTitle strong,
.mainMenuTitle strong,
.mainMenuLogoTitle strong,
.mainMenuBrandTitle .titleBottom,
.mainMenuTitle .titleBottom,
.mainMenuLogoTitle .titleBottom {
  display: block !important;
  font-size: 1em !important;
  line-height: .92 !important;
  letter-spacing: .13em !important;
}

@media (max-width: 640px) {
  .mainMenuBrandTitle,
  .mainMenuTitle,
  .mainMenuLogoTitle,
  .brandTitle,
  .splashTitle,
  .heroTitle {
    font-size: clamp(34px, 10vw, 56px) !important;
    letter-spacing: .10em !important;
  }
}


/* ===== CUT N FILL title color fix ===== */
.mainMenuBrandTitle,
.mainMenuTitle,
.mainMenuLogoTitle,
.brandTitle,
.splashTitle,
.heroTitle {
  color: #7A5AF8 !important;
  text-shadow:
    0 3px 0 #5B3FD1,
    0 4px 0 #5B3FD1 !important;
  margin-bottom: 18px !important;
}

.mainMenuBrandTitle small,
.mainMenuTitle small,
.mainMenuLogoTitle small,
.mainMenuBrandTitle .titleTop,
.mainMenuTitle .titleTop,
.mainMenuLogoTitle .titleTop {
  color: #8A6BFF !important;
  margin-bottom: 0.16em !important;
}

.mainMenuBrandTitle strong,
.mainMenuTitle strong,
.mainMenuLogoTitle strong,
.mainMenuBrandTitle .titleBottom,
.mainMenuTitle .titleBottom,
.mainMenuLogoTitle .titleBottom {
  color: #6E4EF2 !important;
}

.mainMenuTitleWrap,
.mainMenuBrandText,
.logoTitleWrap {
  padding-bottom: 8px !important;
}

@media (max-width: 640px) {
  .mainMenuBrandTitle,
  .mainMenuTitle,
  .mainMenuLogoTitle,
  .brandTitle,
  .splashTitle,
  .heroTitle {
    margin-bottom: 14px !important;
  }
}


/* ===== big 3x3 shop with purple orb currency ===== */
.shopPanel.customPanel {
  padding: clamp(12px, 2vw, 28px) !important;
}

.shopPanel .shopCard {
  width: min(880px, calc(100vw - 28px)) !important;
  max-height: min(820px, calc(100dvh - 26px)) !important;
  padding: clamp(16px, 2.2vw, 24px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 12px !important;
}

.shopTop {
  grid-template-columns: 1fr auto auto !important;
}

.shopHint {
  color: #7A5AF8;
  font: 900 12px/1 "Fredoka", system-ui, sans-serif;
  letter-spacing: .16em;
  opacity: .76;
}

.shopPanel .paletteGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.6vw, 15px) !important;
  min-height: 0 !important;
}

.shopPanel .paletteCard {
  min-width: 0 !important;
  min-height: 132px !important;
  height: 100% !important;
  border-radius: 24px !important;
  padding: 13px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: stretch !important;
  gap: 9px !important;
  text-align: left !important;
  border: 1px solid rgba(122, 90, 248, .12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,246,255,.96)) !important;
}

.shopPanel .paletteCard[hidden] {
  display: none !important;
}

.shopPanel .paletteSwatches {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  height: 36px !important;
}

.shopPanel .paletteSwatches i {
  height: 36px !important;
  border-radius: 12px !important;
}

.shopPanel .paletteCard strong {
  align-self: center !important;
  color: #4C5170 !important;
  font: 900 clamp(12px, 1.6vw, 16px)/1.06 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .01em !important;
}

.shopPanel .paletteAction {
  min-height: 34px !important;
  min-width: 0 !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 15px !important;
  padding: 8px 10px !important;
  color: #6E4EF2 !important;
  background: #EFE9FF !important;
  font: 900 12px/1 "Fredoka", system-ui, sans-serif !important;
}

.shopPanel .paletteCard.active {
  border-color: rgba(122, 90, 248, .42) !important;
  box-shadow:
    0 12px 26px rgba(122,90,248,.16),
    inset 0 0 0 2px rgba(122,90,248,.18) !important;
}

.shopPanel .paletteCard.active .paletteAction {
  color: #FFFFFF !important;
  background: #7A5AF8 !important;
}

.orbsPill {
  background: #F0EAFF !important;
  color: #5B3FD1 !important;
  border-color: rgba(122, 90, 248, .22) !important;
  min-width: 86px !important;
  justify-content: center !important;
}

.orbsPill i,
.orbMini {
  width: 15px !important;
  height: 15px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 12%, #B69AFF 13% 36%, #7A5AF8 37% 72%, #5B3FD1 73% 100%) !important;
  box-shadow:
    inset 0 -2px 0 rgba(45,27,120,.18),
    0 2px 0 #4B34AF !important;
}

.orbMini {
  width: 12px !important;
  height: 12px !important;
  box-shadow:
    inset 0 -1px 0 rgba(45,27,120,.18),
    0 1px 0 #4B34AF !important;
}

.shopPageControls {
  display: grid !important;
  grid-template-columns: 104px 1fr 104px !important;
  gap: 12px !important;
  align-items: center !important;
  padding-top: 3px !important;
}

.shopPageControls button {
  appearance: none !important;
  border: 0 !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  color: #7457E6 !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(68,76,104,.10), inset 0 2px 0 rgba(255,255,255,.86) !important;
  font: 900 12px/1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .06em !important;
  cursor: pointer !important;
}

.shopPageControls button:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

.shopPageControls span {
  text-align: center !important;
  color: #6C728C !important;
  font: 900 13px/1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .09em !important;
}

@media (max-width: 720px) {
  .shopPanel .shopCard {
    width: calc(100vw - 22px) !important;
    padding: 14px !important;
    border-radius: 28px !important;
  }

  .shopPanel .paletteGrid {
    gap: 8px !important;
  }

  .shopPanel .paletteCard {
    min-height: 112px !important;
    padding: 9px !important;
    border-radius: 18px !important;
    gap: 6px !important;
  }

  .shopPanel .paletteSwatches {
    height: 28px !important;
    gap: 3px !important;
  }

  .shopPanel .paletteSwatches i {
    height: 28px !important;
    border-radius: 9px !important;
  }

  .shopPanel .paletteCard strong {
    font-size: 10px !important;
  }

  .shopPanel .paletteAction {
    min-height: 28px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }

  .shopPageControls {
    grid-template-columns: 76px 1fr 76px !important;
    gap: 8px !important;
  }

  .shopPageControls button {
    min-height: 38px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
  }
}


/* ===== main menu title personality pass ===== */
.mainMenuTitle {
  display: inline-grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 24px !important;
  padding: 0 0 10px !important;
  color: transparent !important;
  text-shadow: none !important;
  line-height: 0.9 !important;
  transform: translateY(-2px) !important;
}

.mainMenuTitle .titleTopRow,
.mainMenuTitle .titleBottomRow,
.mainMenuTitle .titleDivider,
.mainMenuTitle .titleCut,
.mainMenuTitle .titleN {
  display: block !important;
}

.mainMenuTitle .titleTopRow {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 12px !important;
}

.mainMenuTitle .titleCut,
.mainMenuTitle .titleN,
.mainMenuTitle .titleBottomRow {
  font-family: "Fredoka", system-ui, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: .9 !important;
  user-select: none !important;
  -webkit-text-stroke: 0 transparent !important;
}

.mainMenuTitle .titleCut {
  font-size: clamp(34px, 6vw, 58px) !important;
  letter-spacing: .16em !important;
  color: #8B6BFF !important;
  text-shadow:
    0 2px 0 #6142DD,
    0 4px 0 #6142DD,
    0 6px 0 #6142DD,
    0 8px 0 #5133C8 !important;
}

.mainMenuTitle .titleN {
  font-size: clamp(28px, 5vw, 46px) !important;
  letter-spacing: .10em !important;
  color: #B196FF !important;
  transform: rotate(11deg) translateY(-1px) !important;
  transform-origin: center bottom !important;
  text-shadow:
    0 2px 0 #7353E8,
    0 4px 0 #7353E8,
    0 6px 0 #5D43CC !important;
}

.mainMenuTitle .titleDivider {
  width: min(250px, 62vw) !important;
  height: 10px !important;
  background:
    radial-gradient(circle, #8B6BFF 0 42%, transparent 43% 100%) center / 16px 10px repeat-x !important;
  opacity: .92 !important;
  transform: translateY(1px) !important;
}

.mainMenuTitle .titleBottomRow {
  font-size: clamp(50px, 9vw, 94px) !important;
  letter-spacing: .20em !important;
  padding-left: .18em !important;
  color: #6747EA !important;
  text-shadow:
    0 2px 0 #4F32C3,
    0 4px 0 #4F32C3,
    0 6px 0 #4F32C3,
    0 9px 0 #4027A7 !important;
}

.mainMenuShell {
  gap: 6px !important;
}

@media (max-width: 640px) {
  .mainMenuTitle {
    gap: 8px !important;
    margin-bottom: 20px !important;
    padding-bottom: 8px !important;
  }

  .mainMenuTitle .titleTopRow {
    gap: 9px !important;
  }

  .mainMenuTitle .titleCut {
    font-size: clamp(28px, 7vw, 40px) !important;
    letter-spacing: .14em !important;
  }

  .mainMenuTitle .titleN {
    font-size: clamp(24px, 5.8vw, 34px) !important;
  }

  .mainMenuTitle .titleDivider {
    width: min(190px, 58vw) !important;
    background-size: 13px 9px !important;
  }

  .mainMenuTitle .titleBottomRow {
    font-size: clamp(42px, 10vw, 64px) !important;
    letter-spacing: .15em !important;
  }
}


/* ===== shop portrait + 2x3 swatches + more pro spacing ===== */
.shopPanel .shopCard {
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: min(860px, calc(100dvh - 24px)) !important;
  padding: clamp(14px, 2.6vw, 22px) !important;
  border-radius: 32px !important;
  grid-template-rows: auto auto 1fr auto !important;
}

.shopPanel .paletteGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.5vw, 12px) !important;
}

.shopPanel .paletteCard {
  min-height: 148px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  gap: 7px !important;
  grid-template-rows: 78px 1fr auto !important;
}

.shopPanel .paletteSwatches {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  height: 78px !important;
}

.shopPanel .paletteSwatches i {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 10px !important;
}

.shopPanel .paletteCard strong {
  font-size: clamp(10px, 1.8vw, 13px) !important;
  line-height: 1.05 !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: center !important;
}

.shopPanel .paletteAction {
  min-height: 30px !important;
  border-radius: 13px !important;
  font-size: 10px !important;
  padding: 7px 8px !important;
}

.shopHint {
  text-align: center !important;
  margin-top: -2px !important;
}

.shopPageControls {
  grid-template-columns: 82px 1fr 82px !important;
  gap: 9px !important;
}

.shopPageControls button {
  min-height: 40px !important;
  border-radius: 15px !important;
}

@media (max-width: 520px) {
  .shopPanel.customPanel {
    padding: 8px !important;
  }

  .shopPanel .shopCard {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 12px !important;
    border-radius: 26px !important;
    gap: 9px !important;
  }

  .shopPanel .paletteGrid {
    gap: 7px !important;
  }

  .shopPanel .paletteCard {
    min-height: 126px !important;
    padding: 7px !important;
    border-radius: 16px !important;
    grid-template-rows: 62px 1fr auto !important;
  }

  .shopPanel .paletteSwatches {
    height: 62px !important;
    gap: 3px !important;
  }

  .shopPanel .paletteSwatches i {
    border-radius: 8px !important;
  }

  .shopPanel .paletteCard strong {
    font-size: 9px !important;
    min-height: 20px !important;
  }

  .shopPanel .paletteAction {
    min-height: 26px !important;
    font-size: 9px !important;
    border-radius: 10px !important;
  }

  .shopPageControls {
    grid-template-columns: 68px 1fr 68px !important;
  }
}


/* ===== title image webp refresh ===== */
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mainMenuTitle {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  transform: none !important;
  line-height: 1 !important;
}

.mainMenuTitleImage {
  display: block !important;
  width: min(100%, 440px) !important;
  max-width: 84vw !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 0 rgba(107, 72, 196, 0.28)) drop-shadow(0 16px 28px rgba(83, 64, 150, 0.14)) !important;
}

@media (max-width: 640px) {
  .mainMenuTitle {
    margin-bottom: 16px !important;
  }

  .mainMenuTitleImage {
    width: min(100%, 320px) !important;
    max-width: 82vw !important;
  }
}


/* ===== mobile interaction polish ===== */
.mainMenuTitleImage {
  filter: none !important;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
}

html,
body,
.app,
canvas,
button,
img,
.mainMenuOverlay,
.customPanel,
.comboOverlay,
.pauseOverlay {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html,
body {
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
}

#gameCanvas,
.stageWrap {
  touch-action: none !important;
}

button,
.mainMenuAction,
.comboAction,
.pauseAction,
.paletteCard,
.levelSelectBackBtn,
.levelPageControls button,
.shopPageControls button {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

button:focus,
button:active,
.mainMenuAction:focus,
.mainMenuAction:active,
.comboAction:focus,
.comboAction:active,
.pauseAction:focus,
.pauseAction:active,
.paletteCard:focus,
.paletteCard:active {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

::selection {
  background: transparent !important;
}


/* ===== distinct palette pattern polish ===== */
.shopPanel .paletteSwatches i {
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(34, 39, 66, .10) !important;
}

.shopPanel .paletteSwatches i[data-pattern="magma"],
.shopPanel .paletteSwatches i[data-pattern="ember"] {
  box-shadow:
    inset 0 2px 0 rgba(255,214,120,.30),
    inset 0 -3px 0 rgba(0,0,0,.18) !important;
}

.shopPanel .paletteSwatches i[data-pattern="ring"] {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(34, 39, 66, .12) !important;
}


/* ===== solid-only shop swatches ===== */
.shopPanel .paletteSwatches i {
  background-image: none !important;
  box-shadow: none !important;
}

.shopPanel .paletteSwatches i::before,
.shopPanel .paletteSwatches i::after {
  content: none !important;
  display: none !important;
}


/* ===== remove combo card brand pill ===== */
.comboCard::before {
  content: none !important;
  display: none !important;
}


/* ===== level select visibility hotfix ===== */
body.levelSelectOpen .mainMenuShell {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.levelSelectOpen .mainMenuTitle,
body.levelSelectOpen .mainMenuActions,
body.levelSelectOpen .mainMenuBrand {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.levelSelectOpen #levelSelectScreen,
body.levelSelectOpen .levelSelectScreen {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.levelSelectOpen .mainMenuOverlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* ===== level selector 3x5 grid ===== */
.levelSelectScreen .mainLevelGrid,
.mainLevelGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
}


/* ===== level select 3x5 page controls visible ===== */
body.levelSelectOpen .levelSelectScreen {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: clamp(10px, 1.7dvh, 16px) !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  padding:
    max(18px, env(safe-area-inset-top))
    clamp(16px, 4vw, 34px)
    max(18px, env(safe-area-inset-bottom)) !important;
}

body.levelSelectOpen .levelSelectTop {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 104px 1fr 104px !important;
  align-items: center !important;
  gap: 10px !important;
}

body.levelSelectOpen .levelSelectTop h2 {
  margin: 0 !important;
  font-size: clamp(30px, 5.2vw, 44px) !important;
  line-height: .95 !important;
  text-align: center !important;
}

body.levelSelectOpen .levelSelectBackBtn {
  min-height: 46px !important;
  padding: 0 18px !important;
  align-self: center !important;
}

body.levelSelectOpen .mainLevelGrid {
  min-height: 0 !important;
  height: 100% !important;
  width: min(640px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.8dvh, 14px) clamp(10px, 2.1vw, 16px) !important;
}

body.levelSelectOpen .mainLevelBtn {
  min-height: 0 !important;
  height: 100% !important;
  border-radius: clamp(18px, 3vw, 26px) !important;
  padding: clamp(8px, 1.1dvh, 14px) !important;
}

body.levelSelectOpen .mainLevelBtn b {
  font-size: clamp(22px, 3.4vw, 34px) !important;
  line-height: 1 !important;
}

body.levelSelectOpen .mainLevelBtn span {
  font-size: clamp(7px, 1.1vw, 10px) !important;
}

body.levelSelectOpen .levelPageControls {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: min(520px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 46px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.levelSelectOpen .levelPageControls button {
  min-height: 44px !important;
  border-radius: 16px !important;
  padding: 0 20px !important;
  font-size: 11px !important;
}

body.levelSelectOpen #levelPageText {
  min-width: 92px !important;
  text-align: center !important;
  font: 900 12px/1 "Fredoka", system-ui, sans-serif !important;
  color: rgba(72, 82, 111, .72) !important;
}

@media (max-height: 760px) {
  body.levelSelectOpen .levelSelectScreen {
    gap: 8px !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  body.levelSelectOpen .levelSelectTop {
    min-height: 42px !important;
  }

  body.levelSelectOpen .levelSelectTop h2 {
    font-size: clamp(24px, 4.5vw, 36px) !important;
  }

  body.levelSelectOpen .levelSelectBackBtn {
    min-height: 40px !important;
    padding: 0 14px !important;
  }

  body.levelSelectOpen .mainLevelGrid {
    gap: 8px 12px !important;
  }

  body.levelSelectOpen .mainLevelBtn {
    border-radius: 18px !important;
    padding: 7px !important;
  }

  body.levelSelectOpen .mainLevelBtn b {
    font-size: clamp(20px, 3vw, 30px) !important;
  }

  body.levelSelectOpen .levelPageControls,
  body.levelSelectOpen .levelPageControls button {
    min-height: 40px !important;
  }
}


/* ===== shop reward ad CTA ===== */
.shopPanel .shopRewardAdBtn {
  border: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, #7c5cff 0%, #ff6f91 100%) !important;
  box-shadow:
    0 10px 0 rgba(91, 61, 202, .22),
    0 16px 34px rgba(104, 79, 221, .20) !important;
  font-family: "Fredoka", system-ui, sans-serif !important;
  -webkit-tap-highlight-color: transparent !important;
}

.shopPanel .shopRewardAdBtn:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 6px 0 rgba(91, 61, 202, .22),
    0 10px 24px rgba(104, 79, 221, .16) !important;
}

.shopPanel .rewardAdBadge {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 34px !important;
  height: 28px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.92) !important;
  color: #7c5cff !important;
  font: 900 12px/1 "Fredoka", system-ui, sans-serif !important;
  box-shadow: inset 0 -2px 0 rgba(91, 61, 202, .10) !important;
}

.shopPanel .shopRewardAdBtn b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font: 900 16px/1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .03em !important;
  text-shadow: 0 2px 0 rgba(54, 42, 126, .20) !important;
}

.shopPanel .shopRewardAdBtn small {
  font: 900 9px/1 "Fredoka", system-ui, sans-serif !important;
  letter-spacing: .06em !important;
  opacity: .86 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px), (max-height: 760px) {
  .shopPanel .shopRewardAdBtn {
    min-height: 40px !important;
    border-radius: 15px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
  }

  .shopPanel .rewardAdBadge {
    min-width: 30px !important;
    height: 24px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }

  .shopPanel .shopRewardAdBtn b {
    font-size: 14px !important;
  }

  .shopPanel .shopRewardAdBtn small {
    font-size: 8px !important;
  }
}


/* ===== external font dependency cleanup ===== */
:root {
  --game-font: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
canvas {
  font-family: var(--game-font) !important;
}

/* ===== daily retention panel ===== */
body.dailyOpen .mainMenuBrand {
  opacity: 0 !important;
  pointer-events: none !important;
}

.dailyPanel.customPanel {
  z-index: 132 !important;
}

.dailyPanel .dailyCard {
  width: min(420px, calc(100vw - 24px)) !important;
  max-height: min(720px, calc(100dvh - 24px)) !important;
  gap: 14px !important;
}

.dailyRewardHero {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 18px 16px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(135deg, rgba(255, 122, 138, .20), rgba(98, 199, 255, .18)) !important;
  border: 1px solid rgba(139, 107, 255, .18) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.70) !important;
  overflow: hidden !important;
}

.dailyRewardHero small {
  font: 900 10px/1 var(--game-font) !important;
  letter-spacing: .08em !important;
  color: rgba(72, 82, 111, .62) !important;
}

.dailyRewardHero b {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 900 36px/.9 var(--game-font) !important;
  color: #6f45db !important;
  text-shadow: 0 3px 0 rgba(91, 61, 202, .16) !important;
}

.dailyRewardHero p {
  max-width: 260px !important;
  margin: 0 !important;
  color: rgba(72, 82, 111, .70) !important;
  font: 800 12px/1.25 var(--game-font) !important;
  text-align: center !important;
}

.dailyOrbBig {
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.90), transparent 22%),
    linear-gradient(145deg, #B79CFF, #7A56F0) !important;
  box-shadow:
    inset 0 -6px 0 rgba(64,39,167,.22),
    0 12px 24px rgba(100, 70, 210, .18) !important;
}

.dailyOrbBig i {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.36) !important;
}

.dailyInfoRow {
  min-height: 46px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(178, 189, 208, .22) !important;
}

.dailyInfoRow span {
  font: 900 10px/1 var(--game-font) !important;
  color: rgba(72, 82, 111, .48) !important;
  letter-spacing: .08em !important;
}

.dailyInfoRow b {
  font: 900 13px/1 var(--game-font) !important;
  color: #7457E6 !important;
}

.dailyClaimBtn {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #7C5CFF, #FF6F91) !important;
  color: #fff !important;
  font: 900 13px/1 var(--game-font) !important;
  letter-spacing: .04em !important;
  box-shadow:
    0 9px 0 rgba(91, 61, 202, .24),
    0 16px 30px rgba(104, 79, 221, .20) !important;
  cursor: pointer !important;
}

.dailyClaimBtn:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow:
    0 5px 0 rgba(91, 61, 202, .24),
    0 10px 22px rgba(104, 79, 221, .16) !important;
}

.dailyClaimBtn:disabled {
  opacity: .55 !important;
  filter: grayscale(.15) !important;
  cursor: default !important;
}

@media (max-width: 640px), (max-height: 760px) {
  .dailyPanel .dailyCard {
    width: min(390px, calc(100vw - 20px)) !important;
    gap: 10px !important;
  }

  .dailyRewardHero {
    padding: 14px 12px !important;
    border-radius: 20px !important;
  }

  .dailyOrbBig {
    width: 48px !important;
    height: 48px !important;
  }

  .dailyRewardHero b {
    font-size: 30px !important;
  }

  .dailyClaimBtn {
    min-height: 48px !important;
  }
}



/* ===== minimal daily reward modal ===== */
.dailyPanel .minimalDailyCard {
  width: min(340px, calc(100vw - 28px)) !important;
  max-height: min(560px, calc(100dvh - 28px)) !important;
  gap: 14px !important;
  padding: 16px !important;
}

.dailyPanel .minimalDailyHero {
  padding: 22px 14px 18px !important;
  gap: 9px !important;
  border-radius: 24px !important;
}

.dailyPanel .minimalDailyHero .dailyOrbBig {
  width: 54px !important;
  height: 54px !important;
}

.dailyPanel .minimalDailyHero small {
  font-size: 10px !important;
  letter-spacing: .09em !important;
}

.dailyPanel .minimalDailyHero b {
  font-size: 42px !important;
}

.dailyPanel .minimalDailyHero p {
  min-height: 18px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.dailyPanel .minimalDailyCard .dailyInfoRow {
  display: none !important;
}

.dailyPanel .minimalDailyCard .dailyClaimBtn {
  min-height: 52px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
}

@media (max-height: 680px), (max-width: 420px) {
  .dailyPanel .minimalDailyCard {
    width: min(318px, calc(100vw - 22px)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .dailyPanel .minimalDailyHero {
    padding: 16px 12px 14px !important;
  }

  .dailyPanel .minimalDailyHero .dailyOrbBig {
    width: 46px !important;
    height: 46px !important;
  }

  .dailyPanel .minimalDailyHero b {
    font-size: 34px !important;
  }

  .dailyPanel .minimalDailyCard .dailyClaimBtn {
    min-height: 46px !important;
  }
}


/* ===== daily claim full width ===== */
.dailyPanel .dailyClaimBtn,
.dailyPanel .dailyClaimBtn:disabled,
.dailyPanel .dailyClaimBtn[disabled],
.dailyPanel .minimalDailyCard .dailyClaimBtn,
.dailyPanel .minimalDailyCard .dailyClaimBtn:disabled,
.dailyPanel .minimalDailyCard .dailyClaimBtn[disabled] {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  text-align: center !important;
}


/* ===== reward ad popup must sit above shop/settings/daily ===== */
.rewardConfirmOverlay,
#adRewardConfirmOverlay,
#rewardConfirmOverlay,
.adCountdownOverlay,
#adCountdownOverlay,
body .comboOverlay.rewardConfirmOverlay,
body .comboOverlay.adCountdownOverlay {
  z-index: 260 !important;
}

body.rewardConfirmOpen .rewardConfirmOverlay,
body.rewardConfirmOpen #rewardConfirmOverlay,
body.adCountdownOpen .adCountdownOverlay,
body.adCountdownOpen #adCountdownOverlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.rewardConfirmOpen .shopPanel,
body.adCountdownOpen .shopPanel {
  pointer-events: none !important;
}

/* ===== Standalone responsive QA: no clipped / overlapping UI ===== */
:root {
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-right: max(10px, env(safe-area-inset-right));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(10px, env(safe-area-inset-left));
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.app,
.stageWrap,
.mainMenuOverlay,
.pauseOverlay,
.comboOverlay,
.customPanel,
.settingsPanel.customPanel,
.shopPanel.customPanel,
.dailyPanel.customPanel,
.splashOverlay {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box !important;
}

.mainMenuOverlay,
.pauseOverlay,
.comboOverlay,
.customPanel,
.settingsPanel.customPanel,
.shopPanel.customPanel,
.dailyPanel.customPanel {
  overflow: hidden !important;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;
}

/* Gameplay HUD uses independent safe zones so the side buttons cannot crush the center text. */
.hudIcon {
  top: calc(var(--safe-top) + 2px) !important;
  left: calc(var(--safe-left) + 2px) !important;
  width: clamp(44px, 7.4vw, 68px) !important;
  height: clamp(44px, 7.4vw, 68px) !important;
  border-radius: clamp(15px, 2vw, 24px) !important;
}

.movesCard {
  top: calc(var(--safe-top) + 2px) !important;
  right: calc(var(--safe-right) + 2px) !important;
  width: clamp(58px, 9vw, 96px) !important;
  min-height: clamp(44px, 7.4vw, 70px) !important;
  padding: clamp(6px, 1.1vw, 11px) !important;
  border-radius: clamp(15px, 2vw, 24px) !important;
}

.movesCard small {
  font-size: clamp(7px, 1.45vw, 11px) !important;
  letter-spacing: .055em !important;
}

.movesCard b {
  font-size: clamp(18px, 4.2vw, 30px) !important;
}

.levelPanel {
  top: calc(var(--safe-top) + 2px) !important;
  width: min(430px, calc(100vw - 176px)) !important;
  max-width: calc(100vw - 176px) !important;
  padding: clamp(7px, 1.4vw, 13px) clamp(8px, 1.8vw, 18px) !important;
  gap: clamp(3px, .8vw, 8px) !important;
  border-radius: clamp(18px, 3vw, 28px) !important;
}

.levelTitleRow {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) minmax(0, auto) auto !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: clamp(4px, 1vw, 10px) !important;
  row-gap: 2px !important;
  min-width: 0 !important;
}

.levelTitle,
.puzzleProgressText {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.levelTitle {
  font-size: clamp(12px, 2.2vw, 21px) !important;
  letter-spacing: .055em !important;
}

.puzzleProgressText {
  font-size: clamp(7px, 1.35vw, 11px) !important;
  margin-left: 0 !important;
  letter-spacing: .08em !important;
}

.stageProgress {
  width: min(220px, 100%) !important;
  height: clamp(6px, 1vw, 11px) !important;
  gap: clamp(3px, .7vw, 5px) !important;
}

.controls {
  bottom: calc(var(--safe-bottom) + 2px) !important;
  gap: clamp(6px, 2.5vw, 14px) !important;
  max-width: calc(100vw - 24px) !important;
}

.iconBtn {
  width: clamp(44px, 8.8vw, 66px) !important;
  height: clamp(44px, 8.8vw, 66px) !important;
  min-width: clamp(44px, 8.8vw, 66px) !important;
  border-radius: clamp(14px, 3vw, 20px) !important;
}

@media (max-width: 380px) {
  .levelPanel {
    width: calc(100vw - 132px) !important;
    max-width: calc(100vw - 132px) !important;
    padding-inline: 7px !important;
  }
  .levelDot { display: none !important; }
  .levelTitleRow {
    grid-template-columns: minmax(0, auto) minmax(0, auto) !important;
    column-gap: 5px !important;
  }
  .levelTitle { font-size: 11px !important; }
  .puzzleProgressText { font-size: 7px !important; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .hudIcon,
  .movesCard,
  .levelPanel {
    top: calc(var(--safe-top) + 1px) !important;
  }
  .hudIcon,
  .iconBtn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  .movesCard {
    width: 62px !important;
    min-height: 42px !important;
  }
  .levelPanel {
    width: min(360px, calc(100vw - 150px)) !important;
    padding: 6px 12px !important;
  }
  .controls { bottom: calc(var(--safe-bottom) + 1px) !important; }
}

/* Main menu is vertically fluid; the brand mark never overlaps the actionable column. */
.mainMenuOverlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mainMenuShell {
  width: min(360px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 8px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(6px, 1.4dvh, 14px) !important;
  overflow: visible !important;
}

.mainMenuTitle {
  flex: 0 0 auto !important;
  margin: 0 0 clamp(6px, 1.8dvh, 18px) !important;
  padding: 0 !important;
}

.mainMenuTitleImage {
  width: min(100%, 360px, 82vw) !important;
  max-height: clamp(72px, 20dvh, 188px) !important;
  object-fit: contain !important;
}

.mainMenuActions {
  width: min(330px, calc(100vw - 34px)) !important;
  gap: clamp(7px, 1.4dvh, 11px) !important;
  flex: 0 1 auto !important;
}

.mainMenuAction,
.mainMenuAction.primary {
  min-height: clamp(42px, 7.4dvh, 62px) !important;
  border-radius: clamp(16px, 3.5vw, 22px) !important;
  font-size: clamp(12px, 2.6vw, 17px) !important;
  padding: 0 12px !important;
}

.mainMenuBrand {
  width: min(148px, 28vw) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 560px), (max-height: 700px) {
  .mainMenuBrand {
    display: none !important;
  }
}

@media (max-height: 640px) {
  .mainMenuTitleImage {
    max-height: 84px !important;
  }
  .mainMenuActions { gap: 6px !important; }
  .mainMenuAction,
  .mainMenuAction.primary {
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

/* Level select: 15 cells + controls always fit inside the screen. */
body.levelSelectOpen .levelSelectScreen {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(6px, 1.6dvh, 14px) !important;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;
  overflow: hidden !important;
}

body.levelSelectOpen .levelSelectTop {
  width: min(600px, calc(100vw - 20px)) !important;
  min-height: clamp(36px, 7dvh, 50px) !important;
  grid-template-columns: clamp(64px, 18vw, 104px) 1fr clamp(64px, 18vw, 104px) !important;
  gap: clamp(5px, 1.5vw, 10px) !important;
}

body.levelSelectOpen .levelSelectTop h2 {
  font-size: clamp(20px, 6vw, 42px) !important;
  line-height: .92 !important;
  white-space: nowrap !important;
}

body.levelSelectOpen .levelSelectBackBtn,
body.levelSelectOpen .levelPageControls button {
  min-height: clamp(34px, 6.5dvh, 44px) !important;
  border-radius: clamp(12px, 3vw, 16px) !important;
  padding: 0 clamp(8px, 3vw, 18px) !important;
  font-size: clamp(9px, 2.2vw, 12px) !important;
}

body.levelSelectOpen .mainLevelGrid {
  width: min(620px, calc(100vw - 20px)) !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: clamp(5px, 1.5dvh, 12px) clamp(6px, 2vw, 14px) !important;
}

body.levelSelectOpen .mainLevelBtn {
  min-height: 0 !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: clamp(13px, 3vw, 24px) !important;
  padding: clamp(5px, 1dvh, 10px) !important;
}

body.levelSelectOpen .mainLevelBtn b {
  font-size: clamp(17px, 4.6vw, 32px) !important;
}

body.levelSelectOpen .mainLevelBtn span {
  font-size: clamp(6px, 1.8vw, 9px) !important;
  max-width: 100% !important;
}

body.levelSelectOpen .levelPageControls {
  width: min(480px, calc(100vw - 24px)) !important;
  min-height: clamp(34px, 6.5dvh, 44px) !important;
  grid-template-columns: minmax(66px, 1fr) auto minmax(66px, 1fr) !important;
  gap: clamp(6px, 2vw, 12px) !important;
}

body.levelSelectOpen #levelPageText {
  min-width: clamp(72px, 22vw, 94px) !important;
  font-size: clamp(9px, 2.2vw, 12px) !important;
}

/* Modals and panels: cards scroll internally if a tiny embed is used; no child is clipped by the viewport. */
.comboCard,
.pauseCard,
.customPanelCard,
.dailyPanel .dailyCard,
.dailyPanel .minimalDailyCard,
.shopPanel .shopCard {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 14px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.comboCard::-webkit-scrollbar,
.pauseCard::-webkit-scrollbar,
.customPanelCard::-webkit-scrollbar,
.shopPanel .shopCard::-webkit-scrollbar { display: none !important; }

.comboActions,
.comboActions.threeActions,
.pauseActions {
  grid-template-columns: 1fr !important;
}

.comboAction,
.pauseAction {
  min-height: clamp(42px, 7dvh, 52px) !important;
  font-size: clamp(11px, 2.5vw, 13px) !important;
}

.customPanelTop {
  min-height: clamp(34px, 6.5dvh, 42px) !important;
  margin-bottom: clamp(8px, 1.5dvh, 14px) !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}

.customPanelTop > span,
.shopHint {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(10px, 2.6vw, 14px) !important;
}

.customPanelClose {
  width: clamp(34px, 7.5vw, 38px) !important;
  height: clamp(34px, 7.5vw, 38px) !important;
  min-width: clamp(34px, 7.5vw, 38px) !important;
}

.customToggle {
  min-height: clamp(44px, 8dvh, 56px) !important;
  font-size: clamp(11px, 2.6vw, 14px) !important;
}

.customSliderRow {
  padding: clamp(10px, 2.6vw, 14px) clamp(12px, 3vw, 16px) !important;
}

/* Shop: the 3x3 page is fluid in portrait/desktop and never pushes footer controls off-screen. */
.shopPanel .shopCard {
  width: min(720px, calc(100vw - 20px)) !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: clamp(6px, 1.25dvh, 12px) !important;
  padding: clamp(10px, 2.3vw, 20px) !important;
  border-radius: clamp(22px, 5vw, 32px) !important;
}

.shopPanel .paletteGrid {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(5px, 1.3dvh, 10px) !important;
  overflow: hidden !important;
}

.shopPanel .paletteCard {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(28px, .86fr) minmax(16px, auto) minmax(24px, auto) !important;
  gap: clamp(3px, .8dvh, 7px) !important;
  padding: clamp(5px, 1.5vw, 10px) !important;
  border-radius: clamp(13px, 3vw, 20px) !important;
}

.shopPanel .paletteSwatches {
  height: auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(2px, .75vw, 4px) !important;
}

.shopPanel .paletteSwatches i {
  height: auto !important;
  min-height: 0 !important;
  border-radius: clamp(6px, 1.8vw, 10px) !important;
}

.shopPanel .paletteCard strong {
  min-height: 0 !important;
  line-height: 1.02 !important;
  font-size: clamp(8px, 2.1vw, 13px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.shopPanel .paletteAction {
  min-height: clamp(22px, 4.8dvh, 30px) !important;
  padding: 4px 6px !important;
  font-size: clamp(8px, 1.9vw, 11px) !important;
  border-radius: clamp(9px, 2.2vw, 13px) !important;
}

.shopPanel .shopRewardAdBtn {
  min-height: clamp(34px, 6.8dvh, 46px) !important;
  padding: 6px 10px !important;
  gap: clamp(5px, 2vw, 10px) !important;
}

.shopPanel .shopRewardAdBtn b {
  font-size: clamp(11px, 2.7vw, 16px) !important;
}

.shopPanel .shopRewardAdBtn small {
  font-size: clamp(7px, 1.8vw, 9px) !important;
}

.shopPageControls {
  grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr) !important;
  gap: clamp(5px, 2vw, 9px) !important;
}

.shopPageControls button {
  min-height: clamp(32px, 6.4dvh, 40px) !important;
  font-size: clamp(8px, 2vw, 11px) !important;
  padding: 0 8px !important;
}

.shopPageControls span {
  font-size: clamp(9px, 2.2vw, 12px) !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .shopPanel .shopCard {
    width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: 9px !important;
  }
  .orbsPill {
    min-width: 68px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
}

@media (max-height: 620px) {
  .shopPanel .shopCard,
  .customPanelCard,
  .dailyPanel .minimalDailyCard {
    gap: 6px !important;
    padding: 9px !important;
  }
  .shopHint { display: none !important; }
  .dailyPanel .minimalDailyHero { padding: 12px 10px !important; }
  .dailyPanel .minimalDailyHero .dailyOrbBig { width: 42px !important; height: 42px !important; }
  .dailyPanel .minimalDailyHero b { font-size: 30px !important; }
}

/* ===== Gameplay safe-area patch: canvas tanks never sit under HUD/controls ===== */
.stageWrap,
#gameCanvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  touch-action: none !important;
}

body.qaNarrowGameplay .controls {
  gap: 7px !important;
  bottom: calc(max(6px, env(safe-area-inset-bottom)) + 1px) !important;
}

body.qaNarrowGameplay .iconBtn {
  width: clamp(42px, 12vw, 48px) !important;
  height: clamp(42px, 12vw, 48px) !important;
  min-width: clamp(42px, 12vw, 48px) !important;
  border-radius: 16px !important;
}

body.qaNarrowGameplay .hintCount {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 11px !important;
  top: -9px !important;
  right: -8px !important;
}

@media (max-width: 390px) {
  .levelPanel {
    width: calc(100vw - 124px) !important;
    max-width: calc(100vw - 124px) !important;
  }
  .hudIcon,
  .movesCard {
    width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }
  .movesCard b { font-size: 18px !important; }
}


body.qaTinyGameplay .hud {
  top: calc(max(2px, env(safe-area-inset-top))) !important;
  width: calc(100vw - 8px) !important;
  grid-template-columns: 36px minmax(150px, 1fr) 46px !important;
  gap: 5px !important;
}
body.qaTinyGameplay .hudIcon { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 13px !important; }
body.qaTinyGameplay .movesCard { width: 46px !important; min-height: 36px !important; height: 36px !important; padding: 3px !important; border-radius: 13px !important; }
body.qaTinyGameplay .movesCard small { font-size: 6px !important; line-height: 1 !important; }
body.qaTinyGameplay .movesCard b { font-size: 15px !important; line-height: .95 !important; }
body.qaTinyGameplay .levelPanel { width: min(330px, calc(100vw - 100px)) !important; max-width: calc(100vw - 100px) !important; padding: 4px 8px !important; gap: 2px !important; border-radius: 15px !important; }
body.qaTinyGameplay .levelTitleRow { column-gap: 4px !important; }
body.qaTinyGameplay .levelDot { width: 5px !important; height: 5px !important; min-width: 5px !important; min-height: 5px !important; }
body.qaTinyGameplay .levelTitle { font-size: 11px !important; line-height: 1 !important; letter-spacing: .035em !important; }
body.qaTinyGameplay .puzzleProgressText { font-size: 6px !important; line-height: 1 !important; }
body.qaTinyGameplay .stageProgress { height: 4px !important; width: min(150px, 100%) !important; gap: 3px !important; }
body.qaTinyGameplay .controls { bottom: calc(max(2px, env(safe-area-inset-bottom))) !important; gap: 6px !important; }
body.qaTinyGameplay .iconBtn { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 12px !important; }
body.qaTinyGameplay .iconBtn img { width: 42% !important; height: 42% !important; }
body.qaTinyGameplay .hintCount { width: 17px !important; height: 17px !important; min-width: 17px !important; font-size: 9px !important; top: -7px !important; right: -6px !important; }

@media (orientation: landscape) and (max-height: 360px) {
  .hud {
    top: calc(max(2px, env(safe-area-inset-top))) !important;
    width: calc(100vw - 8px) !important;
    grid-template-columns: 36px minmax(150px, 1fr) 46px !important;
    gap: 5px !important;
  }
  .hudIcon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 13px !important;
  }
  .movesCard {
    width: 46px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 3px !important;
    border-radius: 13px !important;
  }
  .movesCard small {
    font-size: 6px !important;
    line-height: 1 !important;
  }
  .movesCard b {
    font-size: 15px !important;
    line-height: .95 !important;
  }
  .levelPanel {
    width: min(330px, calc(100vw - 100px)) !important;
    max-width: calc(100vw - 100px) !important;
    padding: 4px 8px !important;
    gap: 2px !important;
    border-radius: 15px !important;
  }
  .levelTitleRow {
    column-gap: 4px !important;
  }
  .levelDot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
  }
  .levelTitle {
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
  }
  .puzzleProgressText {
    font-size: 6px !important;
    line-height: 1 !important;
  }
  .stageProgress {
    height: 4px !important;
    width: min(150px, 100%) !important;
    gap: 3px !important;
  }
  .controls {
    bottom: calc(max(2px, env(safe-area-inset-bottom))) !important;
    gap: 6px !important;
  }
  .iconBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 12px !important;
  }
  .iconBtn img {
    width: 42% !important;
    height: 42% !important;
  }
  .hintCount {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    font-size: 9px !important;
    top: -7px !important;
    right: -6px !important;
  }
}

body.qaShortGameplay:not(.qaTinyGameplay) .hud {
  top: calc(max(6px, env(safe-area-inset-top))) !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .hudIcon,
body.qaShortGameplay:not(.qaTinyGameplay) .iconBtn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .movesCard {
  width: 58px !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 4px !important;
  border-radius: 14px !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .levelPanel {
  padding: 6px 12px !important;
  gap: 3px !important;
  border-radius: 17px !important;
  min-height: 0 !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .levelTitle {
  font-size: 13px !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .puzzleProgressText {
  font-size: 7px !important;
}

body.qaShortGameplay:not(.qaTinyGameplay) .stageProgress {
  height: 5px !important;
}

/* ===== Final gameplay HUD + separated grid/container layout ===== */
.controls,
#redoBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.hud.compactHud {
  position: fixed !important;
  inset: auto auto auto auto !important;
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(2px, 1.3vw, 10px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(94vw, 760px) !important;
  max-width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))) !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: auto minmax(150px, 1fr) auto !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: clamp(6px, 1.5vw, 14px) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
}

.hud.compactHud > * {
  pointer-events: auto !important;
}

.hudActionGroup {
  display: flex !important;
  align-items: stretch !important;
  gap: clamp(5px, 1.2vw, 10px) !important;
  min-width: 0 !important;
}

.hudLeftGroup { justify-self: start !important; }
.hudRightGroup { justify-self: end !important; }

.hud.compactHud .hudIcon,
.hud.compactHud .movesCard,
.hud.compactHud .levelPanel {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.hud.compactHud .hudIcon {
  width: clamp(42px, 8.8vw, 58px) !important;
  height: clamp(42px, 8.8vw, 58px) !important;
  min-width: clamp(42px, 8.8vw, 58px) !important;
  border-radius: clamp(14px, 2.8vw, 20px) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.hud.compactHud .hudIconImg {
  width: 44% !important;
  height: 44% !important;
  object-fit: contain !important;
}

.hud.compactHud .hintBtn {
  background: linear-gradient(180deg, #fff4bb, #ffd65f) !important;
  border-color: rgba(242, 181, 38, .58) !important;
  box-shadow: 0 13px 28px rgba(235,174,40,.18), inset 0 2px 0 rgba(255,255,255,.82) !important;
}

.hud.compactHud .undoBtn {
  background: linear-gradient(180deg, #f8f2ff, #dacaff) !important;
  border-color: rgba(139, 107, 255, .42) !important;
  box-shadow: 0 13px 28px rgba(112,78,226,.16), inset 0 2px 0 rgba(255,255,255,.82) !important;
}

.hud.compactHud .hintCount {
  position: absolute !important;
  top: -8px !important;
  right: -7px !important;
  width: clamp(18px, 4.6vw, 22px) !important;
  height: clamp(18px, 4.6vw, 22px) !important;
  min-width: clamp(18px, 4.6vw, 22px) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font: 900 clamp(10px, 2.8vw, 12px)/1 var(--game-font) !important;
  color: #fff !important;
  background: #8b64ff !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 5px 12px rgba(88,61,206,.25) !important;
}

.hud.compactHud .levelPanel.levelIsland {
  justify-self: center !important;
  align-self: stretch !important;
  width: min(430px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(7px, 1.7vw, 13px) clamp(9px, 2.2vw, 18px) !important;
  border-radius: clamp(18px, 4vw, 28px) !important;
  display: grid !important;
  gap: clamp(4px, 1vw, 8px) !important;
  align-content: center !important;
  background: rgba(255,255,255,.92) !important;
}

.hud.compactHud .levelTitleRow {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) minmax(0, auto) auto !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: clamp(4px, 1vw, 9px) !important;
  min-width: 0 !important;
}

.hud.compactHud .levelTitle {
  font-size: clamp(12px, 2.7vw, 21px) !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
}

.hud.compactHud .puzzleProgressText {
  font-size: clamp(7px, 1.55vw, 11px) !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: .075em !important;
}

.hud.compactHud .levelTitle,
.hud.compactHud .puzzleProgressText {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hud.compactHud .levelDot {
  width: clamp(5px, 1.5vw, 8px) !important;
  height: clamp(5px, 1.5vw, 8px) !important;
  min-width: clamp(5px, 1.5vw, 8px) !important;
  min-height: clamp(5px, 1.5vw, 8px) !important;
}

.hud.compactHud .stageProgress {
  width: min(220px, 100%) !important;
  height: clamp(5px, 1.25vw, 10px) !important;
  gap: clamp(3px, .9vw, 5px) !important;
}

.hud.compactHud .movesCard {
  width: clamp(48px, 10vw, 74px) !important;
  min-width: clamp(48px, 10vw, 74px) !important;
  min-height: clamp(42px, 8.8vw, 58px) !important;
  height: clamp(42px, 8.8vw, 58px) !important;
  padding: clamp(4px, 1vw, 8px) !important;
  border-radius: clamp(14px, 2.8vw, 20px) !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}

.hud.compactHud .movesCard small {
  font-size: clamp(6px, 1.65vw, 9px) !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
}

.hud.compactHud .movesCard b {
  font-size: clamp(17px, 4.8vw, 26px) !important;
  line-height: .95 !important;
  margin: 2px 0 0 !important;
}

@media (max-width: 430px) {
  .hud.compactHud {
    width: calc(100vw - 12px) !important;
    grid-template-columns: auto minmax(116px, 1fr) auto !important;
    gap: 5px !important;
  }
  .hudActionGroup { gap: 4px !important; }
  .hud.compactHud .hudIcon {
    width: clamp(36px, 10.8vw, 42px) !important;
    height: clamp(36px, 10.8vw, 42px) !important;
    min-width: clamp(36px, 10.8vw, 42px) !important;
    border-radius: 13px !important;
  }
  .hud.compactHud .movesCard {
    width: clamp(42px, 12vw, 48px) !important;
    min-width: clamp(42px, 12vw, 48px) !important;
    height: clamp(36px, 10.8vw, 42px) !important;
    min-height: clamp(36px, 10.8vw, 42px) !important;
    border-radius: 13px !important;
    padding: 3px !important;
  }
  .hud.compactHud .levelPanel.levelIsland {
    padding: 6px 7px !important;
    gap: 3px !important;
    border-radius: 18px !important;
  }
  .hud.compactHud .levelDot { display: none !important; }
  .hud.compactHud .levelTitleRow {
    grid-template-columns: minmax(0, auto) minmax(0, auto) !important;
    column-gap: 4px !important;
  }
  .hud.compactHud .levelTitle { font-size: clamp(11px, 3.4vw, 13px) !important; }
  .hud.compactHud .puzzleProgressText { font-size: clamp(6px, 1.95vw, 7px) !important; }
  .hud.compactHud .stageProgress { height: 5px !important; width: min(150px, 100%) !important; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .hud.compactHud {
    top: calc(max(3px, env(safe-area-inset-top)) + 1px) !important;
    width: min(92vw, 680px) !important;
  }
  .hud.compactHud .hudIcon,
  .hud.compactHud .movesCard {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
  }
  .hud.compactHud .movesCard small { font-size: 6px !important; }
  .hud.compactHud .movesCard b { font-size: 15px !important; }
  .hud.compactHud .levelPanel.levelIsland {
    padding: 4px 8px !important;
    border-radius: 15px !important;
    gap: 2px !important;
  }
  .hud.compactHud .levelTitle { font-size: 11px !important; }
  .hud.compactHud .puzzleProgressText { font-size: 6px !important; }
  .hud.compactHud .stageProgress { height: 4px !important; width: min(150px, 100%) !important; }
}

/* ===== Final 3-zone gameplay composition: HUD / centered grid / bottom containers ===== */
.app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.stageWrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  pointer-events: auto !important;
}

#gameCanvas {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: block !important;
}

.hud.compactHud {
  position: fixed !important;
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(2px, 1.1vw, 10px)) !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(112px, 1fr) minmax(0, auto) !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: clamp(6px, 1.5vw, 14px) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 32 !important;
  pointer-events: none !important;
}

.hud.compactHud > * { pointer-events: auto !important; }
.hud.compactHud .hudLeftGroup { justify-self: start !important; }
.hud.compactHud .hudRightGroup { justify-self: end !important; }

.hud.compactHud .levelPanel.levelIsland {
  justify-self: center !important;
  width: clamp(138px, 40vw, 430px) !important;
  max-width: 100% !important;
}

@media (max-width: 430px) {
  .hud.compactHud {
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    width: auto !important;
    grid-template-columns: auto minmax(106px, 1fr) auto !important;
    gap: 4px !important;
  }
  .hud.compactHud .levelPanel.levelIsland {
    width: clamp(112px, 42vw, 164px) !important;
  }
}

@media (orientation: landscape) and (max-height: 430px) {
  .hud.compactHud {
    top: calc(max(3px, env(safe-area-inset-top)) + 1px) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    width: auto !important;
  }
  .hud.compactHud .levelPanel.levelIsland {
    width: clamp(132px, 30vw, 320px) !important;
  }
}