:root{
  --bg:#090814;
  --panel:rgba(18,17,38,.88);
  --text:#fbfbff;
  --muted:#aaa8c3;
  --line:rgba(255,255,255,.10);
  --pink:#ff3dc8;
  --cyan:#2ce8ff;
  --yellow:#ffe45e;
  --purple:#8f5cff;
  --gap:7px;
}

*{box-sizing:border-box}
html,body{
  margin:0;min-height:100%;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,61,200,.14),transparent 28%),
    radial-gradient(circle at 80% 0%,rgba(44,232,255,.14),transparent 28%),
    radial-gradient(circle at 50% 100%,rgba(143,92,255,.16),transparent 34%),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
body{display:flex;justify-content:center;padding:20px 12px 36px;overflow-x:hidden}
button{font:inherit;color:inherit}
.app{width:min(96vw,620px)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.eyebrow{font-size:.68rem;letter-spacing:.22em;font-weight:950;color:#7df5ff;text-shadow:0 0 18px rgba(44,232,255,.4)}
h1{
  font-size:clamp(2rem,7vw,3.55rem);
  line-height:.95;letter-spacing:-.06em;margin:.18rem 0 0;
  background:linear-gradient(90deg,#fff,#c7f9ff 35%,#ffd6f4 70%,#fff0a5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.08))
}

.icon-btn,.controls button,.subtle-btn,.primary-btn{
  border:1px solid var(--line);background:var(--panel);border-radius:14px;cursor:pointer
}
.icon-btn{width:46px;height:46px;backdrop-filter:blur(10px)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:9px}
.stat{
  padding:10px 12px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--panel);
  border:1px solid var(--line);border-radius:15px;backdrop-filter:blur(12px)
}
.stat span,.label{display:block;font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:850}
.stat strong{display:block;margin-top:3px;font-size:1.22rem}
.stat.accent{
  background:
    linear-gradient(135deg,rgba(255,61,200,.10),rgba(44,232,255,.07)),
    var(--panel)
}

.queue-strip{
  display:grid;grid-template-columns:80px 72px 1fr;gap:9px;align-items:stretch;margin-bottom:9px
}
.queue-card,.goal{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--panel);
  border:1px solid var(--line);border-radius:15px;backdrop-filter:blur(12px)
}
.queue-card{padding:9px 10px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.current-card{box-shadow:inset 0 0 24px rgba(44,232,255,.035)}
.preview-tile{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:11px;
  margin-top:6px;font-weight:1000;font-size:1rem;border:1px solid rgba(255,255,255,.18)
}
.preview-tile.small{width:35px;height:35px;font-size:.9rem}
.goal{padding:10px 12px}
.goal-head,.heat-row{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.72rem}
.goal-head{margin-bottom:6px}
.goal-track,.heat-track{height:7px;border-radius:99px;background:rgba(0,0,0,.32);overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.goal-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));transition:width .12s ease;box-shadow:0 0 14px rgba(44,232,255,.3)}
.heat-row{margin-top:9px;font-size:.64rem;letter-spacing:.08em}
.heat-row strong{color:#ffe992;text-shadow:0 0 12px rgba(255,228,94,.3)}
.heat-bar{height:100%;width:0;background:linear-gradient(90deg,#5b7cff,#25e5ff,#ff3dc8,#ffe45e);transition:width .11s ease;box-shadow:0 0 14px rgba(255,61,200,.25)}

.game-shell{position:relative}
.launcher{position:relative;height:56px;margin-bottom:2px}
.launcher-rail{
  position:absolute;left:10px;right:10px;top:24px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(44,232,255,.22),rgba(255,61,200,.22),transparent)
}
.launcher-tile{
  position:absolute;top:0;display:flex;align-items:center;justify-content:center;border-radius:11px;
  font-weight:1000;border:1px solid rgba(255,255,255,.19);
  box-shadow:0 7px 22px rgba(0,0,0,.27),0 0 22px rgba(255,255,255,.08);
  transition:left 45ms linear,transform 65ms ease;z-index:6
}
.launcher-tile.ready{animation:readyPulse .28s ease}
@keyframes readyPulse{0%{transform:scale(.90)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

.board{
  position:relative;display:grid;
  grid-template-columns:repeat(var(--board-cols,5),1fr);
  grid-template-rows:repeat(var(--board-rows,5),1fr);
  gap:var(--gap);
  width:100%;
  aspect-ratio:1/1;
  padding:10px;
  background:
    radial-gradient(circle at 20% 0%,rgba(44,232,255,.055),transparent 35%),
    radial-gradient(circle at 80% 100%,rgba(255,61,200,.045),transparent 34%),
    linear-gradient(180deg,rgba(19,20,39,.98),rgba(12,11,28,.98));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:0 26px 65px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;outline:none;touch-action:manipulation
}
.board.hot{
  box-shadow:0 0 0 1px rgba(255,61,200,.18),0 26px 65px rgba(0,0,0,.40),0 0 42px rgba(143,92,255,.10)
}
.grid-cell{border-radius:10px;background:rgba(255,255,255,.009)}
.tile{
  position:absolute;display:flex;align-items:center;justify-content:center;border-radius:10px;
  font-weight:1000;letter-spacing:-.05em;border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 10px rgba(0,0,0,.12),0 6px 16px rgba(0,0,0,.20);
  will-change:transform,left,top;transition:left 40ms linear,top 40ms cubic-bezier(.08,.9,.1,1);user-select:none
}
.tile::after{
  content:"";position:absolute;left:12%;right:12%;top:8%;height:24%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0));
  pointer-events:none
}
.tile.drop{animation:dropPop 62ms ease-out}
.tile.merge{animation:mergePop 92ms cubic-bezier(.2,.9,.2,1)}
.tile.supermerge{animation:superMerge 180ms cubic-bezier(.15,.9,.15,1)}
@keyframes dropPop{0%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes mergePop{0%{transform:scale(.78) rotate(-2deg)}48%{transform:scale(1.16) rotate(1deg)}100%{transform:scale(1)}}
@keyframes superMerge{0%{transform:scale(.72)}35%{transform:scale(1.23)}70%{transform:scale(.96)}100%{transform:scale(1)}}

.v2{background:linear-gradient(145deg,#246bff,#56a8ff);color:#fff;box-shadow:0 0 18px rgba(36,107,255,.20),inset 0 2px 0 rgba(255,255,255,.20)}
.v4{background:linear-gradient(145deg,#00b7ff,#4ff5ff);color:#062136;box-shadow:0 0 18px rgba(44,232,255,.22)}
.v8{background:linear-gradient(145deg,#00d18b,#65ffbd);color:#05261b;box-shadow:0 0 18px rgba(0,209,139,.20)}
.v16{background:linear-gradient(145deg,#b9e52b,#efff72);color:#253000;box-shadow:0 0 18px rgba(185,229,43,.20)}
.v32{background:linear-gradient(145deg,#ffb22c,#ffe55e);color:#3b2500;box-shadow:0 0 20px rgba(255,178,44,.22)}
.v64{background:linear-gradient(145deg,#ff6b35,#ff9c5b);color:#fff;box-shadow:0 0 22px rgba(255,107,53,.24)}
.v128{background:linear-gradient(145deg,#ff3b6b,#ff6fab);color:#fff;box-shadow:0 0 25px rgba(255,59,107,.26)}
.v256{background:linear-gradient(145deg,#e12cff,#ff62d6);color:#fff;box-shadow:0 0 28px rgba(225,44,255,.28)}
.v512{background:linear-gradient(145deg,#8a4dff,#c576ff);color:#fff;box-shadow:0 0 32px rgba(138,77,255,.32)}
.v1024{background:linear-gradient(145deg,#6336ff,#61a3ff);color:#fff;box-shadow:0 0 36px rgba(99,54,255,.34)}
.v2048{background:linear-gradient(145deg,#12d8fa,#a6ffcb);color:#042126;box-shadow:0 0 42px rgba(18,216,250,.38)}
.v4096{background:linear-gradient(145deg,#ffe259,#ffa751);color:#392100;box-shadow:0 0 46px rgba(255,226,89,.40)}
.v8192,.v16384{background:linear-gradient(145deg,#fff,#ffd6f5 34%,#bff9ff 68%,#fff0a5);color:#1c1230;box-shadow:0 0 55px rgba(255,255,255,.42)}

.drop-guide{
  position:absolute;top:59px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),#fff,var(--pink));
  box-shadow:0 0 18px rgba(44,232,255,.45);
  transition:left 40ms linear,width 40ms linear;z-index:5;pointer-events:none
}

.fx{
  position:absolute;left:0;right:0;top:58px;width:100%;height:auto;aspect-ratio:1/1;
  pointer-events:none;z-index:7;border-radius:20px
}
.combo-flash,.milestone{position:absolute;left:50%;z-index:8;pointer-events:none;opacity:0;text-align:center}
.combo-flash{
  top:49%;transform:translate(-50%,0);font-size:clamp(1.35rem,6vw,2.55rem);
  font-weight:1000;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.5),0 0 28px rgba(255,61,200,.5)
}
.combo-flash.show{animation:combo .38s ease}
.milestone{
  top:19%;transform:translate(-50%,0);padding:9px 15px;border-radius:999px;
  background:linear-gradient(90deg,rgba(44,232,255,.18),rgba(143,92,255,.18),rgba(255,61,200,.18)),rgba(8,8,20,.92);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:950;backdrop-filter:blur(12px)
}
.milestone.show{animation:milestone .66s ease}
@keyframes combo{0%{opacity:0;transform:translate(-50%,7px) scale(.72)}35%{opacity:1;transform:translate(-50%,-4px) scale(1.10)}100%{opacity:0;transform:translate(-50%,-13px) scale(1)}}
@keyframes milestone{0%{opacity:0;transform:translate(-50%,-5px) scale(.92)}20%,68%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px) scale(.98)}}

.overlay{position:absolute;inset:58px 0 0;display:grid;place-items:center;background:rgba(5,5,15,.72);backdrop-filter:blur(7px);border-radius:20px;z-index:10}
.overlay.hidden{display:none}
.dialog{width:min(84%,360px);padding:24px;text-align:center;border-radius:20px;background:rgba(18,17,38,.96);border:1px solid rgba(255,255,255,.12)}
.dialog h2{font-size:2rem;margin:.35rem 0 .55rem}
.dialog p{color:var(--muted);line-height:1.45}
.primary-btn{background:linear-gradient(90deg,#2ce8ff,#8f5cff,#ff3dc8)!important;color:#fff!important;border:0!important;font-weight:950;box-shadow:0 0 24px rgba(143,92,255,.22)}
.dialog .primary-btn{padding:11px 18px}
.controls{display:grid;grid-template-columns:58px 1fr 58px;gap:8px;margin-top:10px}
.controls button{min-height:46px;font-weight:900}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--muted);font-size:.72rem;line-height:1.35}
.subtle-btn{padding:8px 11px;white-space:nowrap}

.top-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.restart-top-btn{
  height:46px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid rgba(255,255,255,.13);border-radius:14px;cursor:pointer;color:#f8f6ff;
  background:linear-gradient(145deg,rgba(38,25,75,.90),rgba(18,12,43,.90));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.18);
  font-weight:900;font-size:.78rem;letter-spacing:.025em;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease
}
.restart-top-btn:hover,.restart-top-btn:focus-visible{
  transform:translateY(-1px);border-color:rgba(125,245,255,.48);outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 20px rgba(44,232,255,.13),0 9px 24px rgba(0,0,0,.22)
}
.restart-top-btn:active{transform:translateY(0) scale(.97)}
.restart-icon{font-size:1.15rem;color:#7df5ff;text-shadow:0 0 12px rgba(44,232,255,.55)}
.restart-top-btn[data-confirming="true"]{
  color:#20152b;border-color:rgba(255,240,154,.82);
  background:linear-gradient(135deg,#fff19a,#ffb75c);
  box-shadow:0 0 22px rgba(255,205,89,.34),inset 0 1px 0 rgba(255,255,255,.48);
  animation:restartConfirmPulse .72s ease-in-out infinite alternate
}
.restart-top-btn[data-confirming="true"] .restart-icon{color:#7b351f;text-shadow:none}
@keyframes restartConfirmPulse{from{filter:saturate(.92)}to{filter:saturate(1.14) brightness(1.05)}}
.footer-row{justify-content:center;text-align:center}

@media(max-width:430px){
  body{padding:14px 8px 26px}
  .queue-strip{grid-template-columns:70px 62px 1fr;gap:7px}
  .queue-card{padding:8px}
  .board{gap:5px;padding:7px;border-radius:16px}
  .grid-cell,.tile,.launcher-tile{border-radius:8px}
  .footer-row{align-items:flex-start}
  .topbar{gap:8px}
  .top-actions{gap:6px}
  .restart-top-btn{width:46px;padding:0}
  .restart-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

@media(prefers-reduced-motion:reduce){
  .restart-top-btn{transition:none}
  .restart-top-btn[data-confirming="true"]{animation:none}
}


.score-pop{
  position:absolute;
  z-index:12;
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  pointer-events:none;
  font-weight:1000;
  font-size:clamp(.82rem,2.5vw,1.18rem);
  color:#fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.85),
    0 0 18px rgba(44,232,255,.75),
    0 0 30px rgba(255,61,200,.55);
  white-space:nowrap;
}
.score-pop.show{
  animation:scoreRise .48s cubic-bezier(.15,.85,.2,1) forwards;
}
@keyframes scoreRise{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.65)}
  20%{opacity:1;transform:translate(-50%,-62%) scale(1.18)}
  65%{opacity:1;transform:translate(-50%,-105%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-145%) scale(.92)}
}

.board.impact{
  animation:boardImpact .18s cubic-bezier(.18,.8,.2,1);
}
@keyframes boardImpact{
  0%{transform:scale(1)}
  35%{transform:scale(var(--impact-scale,1.006))}
  100%{transform:scale(1)}
}

.tile.v65536,.launcher-tile.v65536,.preview-tile.v65536{
  background:linear-gradient(145deg,#00f5ff,#7b61ff 42%,#ff4fd8 72%,#ffe45e);
  color:#fff;
  box-shadow:0 0 50px rgba(123,97,255,.5);
}
.tile.v262144,.launcher-tile.v262144,.preview-tile.v262144,
.tile.v1048576,.launcher-tile.v1048576,.preview-tile.v1048576{
  background:linear-gradient(145deg,#ffffff,#80fff1 28%,#8f5cff 56%,#ff4fd8 78%,#ffe45e);
  color:#110b20;
  box-shadow:0 0 58px rgba(255,255,255,.5);
}

.score-pop.triple-pop{
  color:#8ff9ff;
  text-shadow:0 0 10px rgba(44,232,255,.9),0 0 26px rgba(143,92,255,.7);
}
.score-pop.quad-pop{
  font-size:clamp(1rem,3.2vw,1.45rem);
  color:#fff7a8;
  text-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,228,94,.95),
    0 0 34px rgba(255,61,200,.85),
    0 0 50px rgba(44,232,255,.55);
  animation-duration:.6s !important;
}


/* --- V13 Candy/Arcade reward layer --- */
.board{
  background:
    radial-gradient(circle at 18% 5%,rgba(0,229,255,.10),transparent 28%),
    radial-gradient(circle at 80% 92%,rgba(255,65,202,.11),transparent 30%),
    linear-gradient(180deg,#211c46 0%,#151334 46%,#100d28 100%);
  border:2px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.09),
    inset 0 -18px 45px rgba(0,0,0,.18),
    0 22px 50px rgba(0,0,0,.42);
}

.grid-cell{
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.006));
  border:1px solid rgba(255,255,255,.018);
}

.tile,.launcher-tile,.preview-tile{
  overflow:hidden;
  border:2px solid rgba(255,255,255,.32);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.40),
    inset 0 -7px 14px rgba(0,0,0,.18),
    0 5px 0 rgba(0,0,0,.12),
    0 9px 17px rgba(0,0,0,.24);
}

.tile::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,.08) 42%,
      rgba(255,255,255,.72) 49%,
      rgba(255,255,255,.10) 56%,
      transparent 64%);
  transform:translateX(-60%) rotate(8deg);
  pointer-events:none;
  animation:candyShine 2.4s ease-in-out infinite;
}

@keyframes candyShine{
  0%,62%{transform:translateX(-65%) rotate(8deg);opacity:0}
  68%{opacity:.9}
  82%{transform:translateX(62%) rotate(8deg);opacity:.65}
  88%,100%{transform:translateX(70%) rotate(8deg);opacity:0}
}

/* More saturated candy palette */
.v2{
  background:linear-gradient(145deg,#2877ff 0%,#37c8ff 58%,#8be7ff 100%);
  color:white;
  box-shadow:0 0 19px rgba(44,168,255,.42),inset 0 3px 0 rgba(255,255,255,.4),inset 0 -7px 14px rgba(0,0,0,.16);
}
.v4{
  background:linear-gradient(145deg,#00cfe8 0%,#42ffd2 58%,#a6ffe8 100%);
  color:#073b3b;
  box-shadow:0 0 21px rgba(41,255,210,.38),inset 0 3px 0 rgba(255,255,255,.44),inset 0 -7px 14px rgba(0,0,0,.14);
}
.v8{
  background:linear-gradient(145deg,#47d431 0%,#b5ff42 60%,#eeff83 100%);
  color:#153408;
  box-shadow:0 0 22px rgba(171,255,51,.38),inset 0 3px 0 rgba(255,255,255,.42),inset 0 -7px 14px rgba(0,0,0,.15);
}
.v16{
  background:linear-gradient(145deg,#ffd52e 0%,#ff9d21 58%,#ffd76b 100%);
  color:#4b2600;
  box-shadow:0 0 24px rgba(255,181,33,.44),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -7px 14px rgba(0,0,0,.16);
}
.v32{
  background:linear-gradient(145deg,#ff6c2f 0%,#ff356d 58%,#ff82a3 100%);
  color:white;
  box-shadow:0 0 26px rgba(255,53,109,.48),inset 0 3px 0 rgba(255,255,255,.42),inset 0 -7px 14px rgba(0,0,0,.16);
}
.v64{
  background:linear-gradient(145deg,#ff37be 0%,#d33bff 58%,#ed8dff 100%);
  color:white;
  box-shadow:0 0 29px rgba(223,57,255,.50),inset 0 3px 0 rgba(255,255,255,.42),inset 0 -7px 14px rgba(0,0,0,.16);
}
.v128{
  background:linear-gradient(145deg,#a83fff 0%,#6738ff 60%,#aa91ff 100%);
  color:white;
  box-shadow:0 0 31px rgba(112,64,255,.56),inset 0 3px 0 rgba(255,255,255,.44),inset 0 -7px 14px rgba(0,0,0,.17);
}
.v256{
  background:linear-gradient(145deg,#4a58ff 0%,#147eea 48%,#24e7ff 100%);
  color:white;
  box-shadow:0 0 35px rgba(36,212,255,.58),inset 0 3px 0 rgba(255,255,255,.46),inset 0 -7px 14px rgba(0,0,0,.18);
}
.v512{
  background:linear-gradient(145deg,#ffef54 0%,#ff7b2d 48%,#ff3cac 100%);
  color:#441200;
  box-shadow:0 0 38px rgba(255,100,69,.62),inset 0 3px 0 rgba(255,255,255,.50),inset 0 -7px 14px rgba(0,0,0,.18);
}
.v1024,.v2048,.v4096,.v8192,.v16384{
  background:
    linear-gradient(145deg,#fffbd2 0%,#56f6ff 22%,#9f6cff 50%,#ff53ce 72%,#ffe764 100%);
  color:#23103c;
  box-shadow:
    0 0 16px rgba(255,255,255,.72),
    0 0 44px rgba(255,74,211,.48),
    inset 0 4px 0 rgba(255,255,255,.72),
    inset 0 -8px 15px rgba(0,0,0,.16);
}

.reward-flash{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:11;
  opacity:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 58%,rgba(255,255,255,.66),rgba(255,255,255,.08) 26%,transparent 58%);
}
.reward-flash.show{
  animation:rewardFlash .24s ease-out forwards;
}
.reward-flash.max{
  background:
    radial-gradient(circle at 50% 58%,rgba(255,255,255,.90),rgba(255,237,94,.25) 23%,rgba(255,61,200,.14) 42%,transparent 66%);
}
@keyframes rewardFlash{
  0%{opacity:0}
  22%{opacity:1}
  100%{opacity:0}
}

.candy-star{
  position:absolute;
  z-index:14;
  pointer-events:none;
  font-weight:1000;
  color:white;
  font-size:18px;
  text-shadow:
    0 0 7px white,
    0 0 15px #2ce8ff,
    0 0 24px #ff3dc8;
  transform:translate(-50%,-50%) scale(.3);
  animation:candyStar .48s cubic-bezier(.12,.82,.18,1) forwards;
}
@keyframes candyStar{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}
  18%{opacity:1}
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.05) rotate(110deg);
  }
}

.combo-flash{
  padding:.15em .38em;
  border-radius:18px;
  background:linear-gradient(90deg,#fff,#fff3a2,#ffb3e8,#b9f7ff,#fff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9))
         drop-shadow(0 0 15px rgba(255,63,198,.72))
         drop-shadow(0 0 24px rgba(44,232,255,.62));
  letter-spacing:-.03em;
}

.combo-flash[data-power="10"]{
  font-size:clamp(1.8rem,7vw,3.2rem);
}

.milestone{
  background:
    linear-gradient(90deg,rgba(44,232,255,.28),rgba(255,255,255,.16),rgba(255,61,200,.28)),
    rgba(17,12,38,.94);
  border:2px solid rgba(255,255,255,.27);
  box-shadow:
    0 0 18px rgba(44,232,255,.25),
    0 0 26px rgba(255,61,200,.20),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.primary-btn{
  background:linear-gradient(90deg,#00dfff,#7556ff,#ff3fc8,#ffb82f)!important;
  background-size:180% 100%!important;
  animation:buttonCandy 3s ease infinite;
  box-shadow:0 5px 0 rgba(64,24,105,.52),0 0 24px rgba(143,92,255,.36)!important;
}
@keyframes buttonCandy{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* V16: keep CURRENT/NEXT previews clean; shine remains only on board tiles */
.launcher-tile::before,
.preview-tile::before{
  content:none !important;
  display:none !important;
  animation:none !important;
}


/* ==========================================================
   V18 — Flow-first UI
   Visual hierarchy: goal -> board -> next -> score/best.
   ========================================================== */

.stats{
  grid-template-columns:1fr 1fr 72px;
  gap:7px;
  margin-bottom:8px;
}
.stat{
  padding:8px 11px;
  border-radius:13px;
  background:rgba(18,17,38,.62);
}
.stat span{font-size:.56rem}
.stat strong{font-size:1.05rem}
.stat.accent{
  opacity:.72;
  background:rgba(18,17,38,.50);
}

.focus-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px;
  gap:8px;
  align-items:stretch;
  margin-bottom:7px;
}

.goal-primary{
  min-width:0;
  padding:9px 12px 8px;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(44,232,255,.07),rgba(143,92,255,.06),rgba(255,61,200,.05)),
    rgba(18,17,38,.72);
  border:1px solid rgba(255,255,255,.10);
}

.goal-head{
  align-items:center;
  font-size:.70rem;
  margin-bottom:7px;
}
.goal-head span{
  color:rgba(255,255,255,.78);
  font-weight:800;
}
.goal-head strong{
  color:#fff;
  font-size:.72rem;
}

.goal-track{
  height:8px;
  background:rgba(0,0,0,.32);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.goal-bar{
  background:linear-gradient(90deg,#2ce8ff,#8f5cff,#ff3dc8,#ffe45e);
  background-size:180% 100%;
  animation:goalFlow 2.8s linear infinite;
  box-shadow:0 0 13px rgba(143,92,255,.40);
}
@keyframes goalFlow{
  0%{background-position:0% 50%}
  100%{background-position:180% 50%}
}

.flow-line{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
  margin-bottom:4px;
  font-size:.57rem;
  letter-spacing:.12em;
  font-weight:900;
  color:rgba(255,255,255,.40);
}
.flow-line strong{
  color:#ffe98b;
  text-shadow:0 0 10px rgba(255,228,94,.22);
}

.heat-track{
  height:4px;
  opacity:.70;
}

.next-card{
  align-items:center;
  justify-content:center;
  padding:7px;
  text-align:center;
  background:rgba(18,17,38,.67);
}
.next-card .label{
  font-size:.56rem;
  margin-bottom:3px;
}
.next-card .preview-tile{
  margin-top:2px;
  width:43px;
  height:43px;
}

.hidden-current{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* More breathing room around the main decision surface */
.launcher{
  height:60px;
  margin-bottom:1px;
}
.launcher-rail{
  top:26px;
  opacity:.62;
}

/* The board is visually dominant. */
.board{
  border:2px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.07),
    inset 0 -24px 56px rgba(0,0,0,.17),
    0 22px 52px rgba(0,0,0,.48);
}

/* Earned chain escalation: increasingly vivid but temporary. */
.board.chain-surge{
  animation:chainBoardPulse .48s cubic-bezier(.16,.9,.2,1);
}
.board[data-chain="2"]{--chain-glow:.10;--chain-scale:1.003}
.board[data-chain="3"]{--chain-glow:.16;--chain-scale:1.005}
.board[data-chain="4"]{--chain-glow:.23;--chain-scale:1.007}
.board[data-chain="5"]{--chain-glow:.31;--chain-scale:1.009}
.board[data-chain="6"],
.board[data-chain="7"]{--chain-glow:.40;--chain-scale:1.011}

@keyframes chainBoardPulse{
  0%{
    transform:scale(1);
    filter:saturate(1) brightness(1);
  }
  30%{
    transform:scale(var(--chain-scale,1.004));
    filter:saturate(calc(1 + var(--chain-glow,.12))) brightness(1.07);
  }
  100%{
    transform:scale(1);
    filter:saturate(1) brightness(1);
  }
}

/* Reward text hangs around long enough to be read during slower chains. */
.combo-flash.show{
  animation:comboV18 .68s cubic-bezier(.15,.85,.2,1);
}
@keyframes comboV18{
  0%{opacity:0;transform:translate(-50%,8px) scale(.70)}
  18%{opacity:1;transform:translate(-50%,-3px) scale(1.12)}
  63%{opacity:1;transform:translate(-50%,-8px) scale(1.03)}
  100%{opacity:0;transform:translate(-50%,-18px) scale(.96)}
}

.combo-flash{
  width:max-content;
  max-width:90%;
  font-size:clamp(1.45rem,6.5vw,2.8rem);
  text-transform:uppercase;
  letter-spacing:-.035em;
}

.score-pop.show{
  animation:scoreRiseV18 .68s cubic-bezier(.15,.85,.2,1) forwards;
}
@keyframes scoreRiseV18{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.60)}
  18%{opacity:1;transform:translate(-50%,-60%) scale(1.22)}
  70%{opacity:1;transform:translate(-50%,-112%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-152%) scale(.91)}
}

/* Controls are quieter than the board so they don't compete for attention. */
.controls{
  margin-top:9px;
}
.controls button:not(.primary-btn),
.subtle-btn{
  background:rgba(18,17,38,.58);
}
.footer-row{
  opacity:.72;
}

@media(max-width:430px){
  .focus-strip{
    grid-template-columns:minmax(0,1fr) 68px;
    gap:6px;
  }
  .next-card .preview-tile{
    width:39px;
    height:39px;
  }
}


/* ==========================================================
   JUH1MERGE V19 — clearer merge copy + clean top background
   ========================================================== */

/* Remove any dull/grey cap feeling from the top of the page. */
html,body{
  background:
    radial-gradient(circle at 15% 0%,rgba(44,232,255,.14),transparent 30%),
    radial-gradient(circle at 85% 4%,rgba(255,61,200,.16),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(143,92,255,.17),transparent 35%),
    #090714 !important;
}
.topbar,.stats,.focus-strip{
  background:transparent !important;
  box-shadow:none !important;
}
.topbar{
  padding:2px 2px 0 !important;
}
.stat,.goal-primary,.next-card{
  background:
    linear-gradient(145deg,rgba(24,14,52,.91),rgba(10,8,28,.92)) !important;
  border-color:rgba(255,255,255,.10) !important;
}
.icon-btn{
  background:rgba(17,11,39,.84) !important;
}

/* JUH1MERGE branding. */
.topbar h1{
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  filter:none !important;
  letter-spacing:.025em !important;
  text-shadow:
    0 0 7px rgba(255,255,255,.48),
    0 0 18px rgba(44,232,255,.38),
    0 0 30px rgba(255,61,200,.30) !important;
}
.topbar .eyebrow{
  color:#ffe98b !important;
  text-shadow:0 0 12px rgba(255,228,94,.30) !important;
}

/* Merge copy: high contrast first, spectacle second. */
.combo-flash{
  z-index:60 !important;
  top:46% !important;
  width:max-content !important;
  max-width:88% !important;
  padding:.30em .62em .35em !important;
  border-radius:15px !important;
  background:
    linear-gradient(145deg,rgba(7,6,23,.97),rgba(31,14,60,.97)) !important;
  color:#fff !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  border:2px solid rgba(255,255,255,.94) !important;
  filter:none !important;
  box-shadow:
    0 0 0 2px rgba(143,92,255,.24),
    0 0 20px rgba(44,232,255,.32),
    0 0 34px rgba(255,61,200,.26),
    0 9px 22px rgba(0,0,0,.48) !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.98),
    0 0 8px rgba(255,255,255,.28) !important;
  font-size:clamp(1.22rem,5.5vw,2.35rem) !important;
  font-weight:1000 !important;
  line-height:1.06 !important;
  letter-spacing:.01em !important;
}

/* Bigger earned moments use a warm highlight. */
.combo-flash[data-power="7"],
.combo-flash[data-power="8"],
.combo-flash[data-power="9"],
.combo-flash[data-power="10"]{
  color:#fff6a5 !important;
  border-color:#fff0a0 !important;
  box-shadow:
    0 0 0 2px rgba(255,216,73,.22),
    0 0 24px rgba(255,222,87,.36),
    0 0 40px rgba(255,61,200,.28),
    0 10px 24px rgba(0,0,0,.50) !important;
}

/* Give the message enough dwell time to actually be read. */
.combo-flash.show{
  animation:comboV19 .94s cubic-bezier(.16,.84,.18,1) forwards !important;
}
@keyframes comboV19{
  0%{opacity:0;transform:translate(-50%,7px) scale(.80)}
  15%{opacity:1;transform:translate(-50%,-2px) scale(1.07)}
  72%{opacity:1;transform:translate(-50%,-7px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-15px) scale(.97)}
}

/* Score result stays readable over particles. */
.score-pop{
  z-index:54 !important;
  padding:.18em .42em !important;
  border-radius:9px !important;
  color:#fff !important;
  background:rgba(7,6,23,.93) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  font-weight:950 !important;
  text-shadow:0 2px 2px rgba(0,0,0,.95) !important;
  box-shadow:
    0 0 12px rgba(44,232,255,.24),
    0 5px 12px rgba(0,0,0,.34) !important;
}

/* FX stay below the information the player needs to read. */
.fx{z-index:7 !important}
.reward-flash{z-index:10 !important}
.candy-star{z-index:16 !important}


/* V20: CURRENT/NEXT should be clean — no pale oval/gloss highlight */
.launcher-tile::after,
.preview-tile::after,
.launcher-tile::before,
.preview-tile::before{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  animation:none !important;
}

/* Keep the top header itself completely clean. */
.topbar::before,
.topbar::after,
.topbar > div::before,
.topbar > div::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}


/* Long-chain praise gets the biggest, clearest reward treatment. */
.combo-flash[data-power="10"]{
  font-size:clamp(1.55rem,6.6vw,2.8rem) !important;
  color:#fff6a5 !important;
  border-color:#fff3b3 !important;
  box-shadow:
    0 0 0 2px rgba(255,220,90,.28),
    0 0 24px rgba(255,230,110,.44),
    0 0 46px rgba(255,61,200,.34),
    0 0 58px rgba(44,232,255,.24),
    0 11px 26px rgba(0,0,0,.52) !important;
}


/* ==========================================================
   JUH1MERGE V21 — extended high-value candy palette
   ========================================================== */

.v1024{
  background:linear-gradient(145deg,#3157ff 0%,#743cff 52%,#e449ff 100%) !important;
  color:#fff !important;
}
.v2048{
  background:linear-gradient(145deg,#00b8a9 0%,#36f1cd 52%,#bcffe8 100%) !important;
  color:#073b35 !important;
}
.v4096{
  background:linear-gradient(145deg,#ffb300 0%,#ffe45c 50%,#fff3b1 100%) !important;
  color:#4a2a00 !important;
}
.v8192{
  background:linear-gradient(145deg,#ff244f 0%,#ff5f87 48%,#ffb0c4 100%) !important;
  color:#fff !important;
}
.v16384{
  background:linear-gradient(145deg,#7b20e8 0%,#b24cff 52%,#ef9dff 100%) !important;
  color:#fff !important;
}
.v32768{
  background:linear-gradient(145deg,#087de8 0%,#27c7ff 52%,#b0f2ff 100%) !important;
  color:#fff !important;
}
.v65536{
  background:linear-gradient(145deg,#68cf13 0%,#c9f53b 52%,#f4ff9b 100%) !important;
  color:#263900 !important;
}
.v131072{
  background:linear-gradient(145deg,#ff5a16 0%,#ff873d 50%,#ffc26e 100%) !important;
  color:#fff !important;
}
.v262144{
  background:linear-gradient(145deg,#e40091 0%,#ff35bf 50%,#ff9de2 100%) !important;
  color:#fff !important;
}
.v524288{
  background:linear-gradient(145deg,#00d6e9 0%,#2678ff 50%,#7456ff 100%) !important;
  color:#fff !important;
}
.v1048576{
  background:
    linear-gradient(135deg,#fff9a8 0%,#5bf4ff 22%,#8b63ff 46%,#ff53c6 70%,#ffcf4d 100%) !important;
  color:#241137 !important;
}
.v2097152{
  background:linear-gradient(145deg,#fffdf3 0%,#ffe485 48%,#ff8dd8 100%) !important;
  color:#3b1630 !important;
}
.v4194304{
  background:linear-gradient(145deg,#140d3d 0%,#50248f 40%,#ff3ebf 72%,#ffe96b 100%) !important;
  color:#fff !important;
}

/* Make each new tier visibly distinct without stacking huge desktop shadows. */
.v1024,.v2048,.v4096,.v8192,.v16384,.v32768,
.v65536,.v131072,.v262144,.v524288,.v1048576,.v2097152,.v4194304{
  box-shadow:
    0 0 20px rgba(255,255,255,.18),
    inset 0 3px 0 rgba(255,255,255,.42),
    inset 0 -7px 14px rgba(0,0,0,.16) !important;
}

/* Mobile: keep the candy look, drop the most expensive continuous effects. */
@media (max-width:700px), (pointer:coarse){
  .board{
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.06),
      0 12px 28px rgba(0,0,0,.34) !important;
    touch-action:manipulation;
  }

  .tile{
    will-change:transform !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.25),
      inset 0 -4px 8px rgba(0,0,0,.12),
      0 3px 8px rgba(0,0,0,.18) !important;
  }

  /* Static gloss on mobile instead of a continuous sweep on every tile. */
  .tile::before{
    animation:none !important;
    opacity:.18 !important;
    transform:translateX(12%) rotate(8deg) !important;
  }

  .board.chain-surge{
    animation:chainMobilePulse .40s ease-out !important;
  }

  @keyframes chainMobilePulse{
    0%{transform:scale(1)}
    38%{transform:scale(1.004)}
    100%{transform:scale(1)}
  }

  .milestone,
  .overlay{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .combo-flash{
    box-shadow:
      0 0 12px rgba(44,232,255,.22),
      0 0 20px rgba(255,61,200,.18),
      0 6px 14px rgba(0,0,0,.38) !important;
  }

  .candy-star{
    text-shadow:
      0 0 5px rgba(255,255,255,.75),
      0 0 10px rgba(44,232,255,.42) !important;
  }
}


/* ==========================================================
   JUH1MERGE V22 — unique color for every 1024+ power-of-two
   ========================================================== */

.tile.high-tier,
.launcher-tile.high-tier,
.preview-tile.high-tier{
  background:
    linear-gradient(
      145deg,
      hsl(var(--tier-h1) 96% 58%) 0%,
      hsl(var(--tier-h2) 96% 62%) 52%,
      hsl(var(--tier-h3) 96% 74%) 100%
    ) !important;
  color:var(--tier-text,#fff) !important;
  border-color:rgba(255,255,255,.48) !important;
  box-shadow:
    0 0 17px var(--tier-glow),
    0 0 32px color-mix(in srgb,var(--tier-glow) 55%,transparent),
    inset 0 3px 0 rgba(255,255,255,.48),
    inset 0 -7px 14px rgba(0,0,0,.16) !important;
}

/* Extra visual distinction as values climb: alternating highlight geometry. */
.tile.high-tier:nth-child(3n+1){
  border-radius:18% 24% 18% 24% !important;
}
.tile.high-tier:nth-child(3n+2){
  border-radius:24% 18% 24% 18% !important;
}

/* Keep mobile cheaper while preserving the unique tier color. */
@media (max-width:700px), (pointer:coarse){
  .tile.high-tier{
    box-shadow:
      0 0 10px var(--tier-glow),
      inset 0 2px 0 rgba(255,255,255,.30),
      inset 0 -4px 8px rgba(0,0,0,.12) !important;
  }
}


/* V22 corrected UI:
   - keep the live launcher/current tile above the selected column
   - remove only the duplicate current-tile icon from the top/banner UI */
.hidden-current,
.current-card,
#currentPreview{
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

/* Explicitly restore the actual tile being dropped. */
.launcher-tile{
  display:grid !important;
}


/* V22 UI cleanup:
   remove the bottom arrow buttons + DROP button */
.controls{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
  min-height:0 !important;
}


/* ==========================================================
   V22 Smooth Merge Pass
   Gameplay unchanged; only merge motion is refined.
   ========================================================== */

.tile{
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
}

/* Tiles about to be consumed soften and shrink instead of disappearing abruptly. */
.tile.merge-source{
  animation:mergeSourceSmooth 90ms cubic-bezier(.34,.8,.36,1) forwards !important;
  z-index:7;
}
@keyframes mergeSourceSmooth{
  0%{
    transform:scale(1);
    opacity:1;
    filter:brightness(1);
  }
  55%{
    transform:scale(.92);
    opacity:.92;
    filter:brightness(1.18);
  }
  100%{
    transform:scale(.72);
    opacity:.18;
    filter:brightness(1.55);
  }
}

/* Active tile gives a tiny anticipatory pulse before absorption. */
.tile.merge-anchor{
  animation:mergeAnchorSmooth 90ms cubic-bezier(.2,.9,.25,1) forwards !important;
  z-index:8;
}
@keyframes mergeAnchorSmooth{
  0%{transform:scale(1);filter:brightness(1)}
  52%{transform:scale(1.08);filter:brightness(1.22)}
  100%{transform:scale(.94);filter:brightness(1.38)}
}

/* New merged tile appears with a softer spring instead of a hard pop. */
.tile.merge-soft{
  animation:mergeResultSmooth 165ms cubic-bezier(.17,.88,.28,1.08) both !important;
  z-index:10;
}
@keyframes mergeResultSmooth{
  0%{
    transform:scale(.68);
    opacity:.25;
    filter:brightness(1.8) saturate(1.2);
  }
  45%{
    transform:scale(1.13);
    opacity:1;
    filter:brightness(1.28) saturate(1.12);
  }
  72%{
    transform:scale(.98);
    filter:brightness(1.08);
  }
  100%{
    transform:scale(1);
    opacity:1;
    filter:brightness(1);
  }
}

/* Tiny settle beat after gravity/result placement. */
.tile.settle-soft{
  animation:mergeSettleSmooth 95ms cubic-bezier(.2,.8,.3,1) both !important;
}
@keyframes mergeSettleSmooth{
  0%{transform:translateY(-5px) scale(1.025)}
  65%{transform:translateY(1px) scale(.995)}
  100%{transform:translateY(0) scale(1)}
}

/* Mobile gets the same motion with cheaper filters. */
@media (max-width:700px), (pointer:coarse){
  .tile.merge-source,
  .tile.merge-anchor,
  .tile.merge-soft,
  .tile.settle-soft{
    filter:none !important;
  }

  .tile.merge-soft{
    animation-duration:150ms !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .tile.merge-source,
  .tile.merge-anchor,
  .tile.merge-soft,
  .tile.settle-soft{
    animation-duration:1ms !important;
  }
}


/* ==========================================================
   JUH1MERGE.V34 — unmistakable high-impact reward response
   ========================================================== */

/* Make the upgrade visible even between effects. */
.tile{
  border-radius:17px !important;
  border:2px solid rgba(255,255,255,.82) !important;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.67),
    inset 0 -11px 17px rgba(20,3,45,.24),
    inset 8px 0 14px rgba(255,255,255,.11),
    0 4px 0 rgba(8,2,27,.30),
    0 10px 17px rgba(2,1,12,.34),
    0 0 17px rgba(255,255,255,.14) !important;
}
.tile::after{
  opacity:1 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.38) 52%,transparent 100%) !important;
}

/* A landing should be readable without waiting for a merge. */
.drop-impact-v33{
  width:calc(var(--drop-impact-size)*1.38);
  height:calc(var(--drop-impact-size)*1.38);
  border-width:3px;
  background:
    radial-gradient(circle,rgba(255,255,255,.82) 0%,rgba(255,255,255,.18) 16%,hsla(var(--impact-hue) 100% 70%/.30) 34%,rgba(255,62,202,.18) 52%,transparent 72%);
  box-shadow:0 0 24px rgba(255,255,255,.52),0 0 42px hsla(var(--impact-hue) 100% 65%/.34),inset 0 0 22px rgba(255,255,255,.42)
}
.drop-impact-v33.show{animation:v34DropWave .48s cubic-bezier(.08,.72,.16,1) forwards}
@keyframes v34DropWave{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  14%{opacity:1}
  48%{opacity:.92;transform:translate(-50%,-50%) scale(.68)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
}
.board.drop-thump-v33{animation:v34BoardThump .31s cubic-bezier(.12,.82,.18,1)}
@keyframes v34BoardThump{
  0%{transform:translateY(0) scale(1)}
  22%{transform:translateY(3px) scale(1.004,.986)}
  50%{transform:translateY(-1.3px) scale(.998,1.006)}
  74%{transform:translateY(.5px) scale(1.001,.998)}
  100%{transform:translateY(0) scale(1)}
}

/* Matching tiles visibly inhale, glow, and then snap toward the result. */
.merge-charge-v33{
  border-width:4px;
  background:radial-gradient(circle,rgba(255,255,255,.72),rgba(255,236,107,.24) 24%,rgba(58,238,255,.22) 45%,rgba(255,62,201,.15) 61%,transparent 73%);
  box-shadow:0 0 24px rgba(255,255,255,.70),0 0 48px rgba(59,236,255,.38),0 0 64px rgba(255,61,202,.24),inset 0 0 22px rgba(255,255,255,.44)
}
.merge-charge-v33.show{animation:v34Charge .24s cubic-bezier(.12,.80,.16,1) forwards}
@keyframes v34Charge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.20)}
  24%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  68%{opacity:.96;transform:translate(-50%,-50%) scale(.62);filter:brightness(1.35)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.12);filter:brightness(2.5)}
}
.board.merge-charging-v33 .tile:not(.merge-source):not(.merge-anchor){filter:saturate(.62) brightness(.76) blur(.25px) !important}
.tile.merge-source{animation:v34CandyAbsorb 155ms cubic-bezier(.10,.78,.14,1) forwards !important}
.tile.merge-anchor{animation:v34CandyCharge 155ms cubic-bezier(.10,.82,.16,1) forwards !important}
@keyframes v34CandyAbsorb{
  0%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1) saturate(1)}
  30%{transform:translate(calc(var(--merge-dx,0px)*-.08),calc(var(--merge-dy,0px)*-.08)) scale(1.10,.90);opacity:1;filter:brightness(1.45) saturate(1.32)}
  58%{transform:translate(calc(var(--merge-dx,0px)*.42),calc(var(--merge-dy,0px)*.42)) scale(.82);opacity:.95;filter:brightness(1.75) saturate(1.42)}
  100%{transform:translate(var(--merge-dx,0px),var(--merge-dy,0px)) scale(.16);opacity:0;filter:brightness(3) saturate(1.55)}
}
@keyframes v34CandyCharge{
  0%{transform:scale(1);filter:brightness(1)}
  28%{transform:scale(1.14,.91);filter:brightness(1.42) saturate(1.25)}
  64%{transform:scale(.91,1.12);filter:brightness(1.72) saturate(1.38)}
  100%{transform:scale(.68);filter:brightness(2.6) saturate(1.55)}
}

.tile.merge-soft{
  animation:v34ResultBirth .36s cubic-bezier(.08,.80,.14,1.16) both !important
}
@keyframes v34ResultBirth{
  0%{transform:scale(.20) rotate(-5deg);opacity:0;filter:brightness(3.2) saturate(1.7)}
  28%{transform:scale(1.34,.84) rotate(2deg);opacity:1;filter:brightness(2) saturate(1.48)}
  48%{transform:scale(.89,1.18) rotate(-1deg);filter:brightness(1.42) saturate(1.30)}
  68%{transform:scale(1.12,.94);filter:brightness(1.20) saturate(1.16)}
  84%{transform:scale(.975,1.035)}
  100%{transform:scale(1);opacity:1;filter:brightness(1) saturate(1)}
}

/* Strong central flash and candy-ray release—the unmistakable V34 signature. */
.reward-core-v34,.reward-rays-v34{
  position:absolute;pointer-events:none;border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.10)
}
.reward-core-v34{
  z-index:16;width:var(--core-size);height:var(--core-size);
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,250,174,.92) 8%,rgba(72,239,255,.47) 24%,rgba(255,61,205,.30) 43%,rgba(139,79,255,.14) 58%,transparent 72%);
  mix-blend-mode:screen;filter:blur(.15px)
}
.reward-core-v34.show{animation:v34CoreBurst .56s cubic-bezier(.08,.72,.16,1) forwards}
.reward-core-v34.chain.show{animation-duration:.68s}
@keyframes v34CoreBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  12%{opacity:1}
  36%{opacity:.98;transform:translate(-50%,-50%) scale(.72)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}
}
.reward-rays-v34{
  z-index:15;width:var(--rays-size);height:var(--rays-size);
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.92) 0 2deg,transparent 2deg 18deg,rgba(255,230,104,.72) 18deg 21deg,transparent 21deg 40deg);
  mask-image:radial-gradient(circle,transparent 0 18%,#000 24% 64%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle,transparent 0 18%,#000 24% 64%,transparent 74%);
  mix-blend-mode:screen
}
.reward-rays-v34.show{animation:v34Rays .64s cubic-bezier(.08,.70,.18,1) forwards}
.reward-rays-v34.chain.show{animation-duration:.76s}
@keyframes v34Rays{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.20) rotate(-18deg)}
  18%{opacity:.95}
  66%{opacity:.60;transform:translate(-50%,-50%) scale(1) rotate(22deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(42deg)}
}

.board.reward-beat-v33{animation:v34RewardBeat .48s cubic-bezier(.10,.82,.16,1)}
@keyframes v34RewardBeat{
  0%{filter:brightness(1) saturate(1)}
  12%{filter:brightness(1.24) saturate(1.22)}
  38%{filter:brightness(1.10) saturate(1.14)}
  100%{filter:brightness(1) saturate(1)}
}
.combo-flash.show{
  animation:v34Praise .78s cubic-bezier(.10,.78,.16,1) forwards !important;
  padding:.42em .78em .48em !important;
  border:2px solid rgba(255,255,255,.82) !important;
  background:linear-gradient(135deg,rgba(255,250,176,.96),rgba(255,255,255,.97) 42%,rgba(255,211,242,.96)) !important;
  color:#321447 !important;text-shadow:0 1px 0 white,0 0 12px rgba(255,255,255,.8) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.38),0 0 26px rgba(255,229,91,.48),0 0 46px rgba(255,62,202,.34) !important
}
@keyframes v34Praise{
  0%{opacity:0;transform:translate(-50%,12px) scale(.38) rotate(-2deg)}
  20%{opacity:1;transform:translate(-50%,-4px) scale(1.16) rotate(1deg)}
  48%{opacity:1;transform:translate(-50%,-8px) scale(.98)}
  76%{opacity:1;transform:translate(-50%,-13px) scale(1.02)}
  100%{opacity:0;transform:translate(-50%,-25px) scale(.92)}
}

@media (max-width:700px), (pointer:coarse){
  body{
    padding:
      max(14px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(20px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left)) !important
  }
  .tile{border-radius:12px !important;border-width:2px !important}
  .drop-impact-v33{width:calc(var(--drop-impact-size)*1.20);height:calc(var(--drop-impact-size)*1.20);border-width:2px}
  .tile.merge-source,.tile.merge-anchor{animation-duration:145ms !important}
  .tile.merge-soft{animation-duration:.32s !important}
  .board.merge-charging-v33 .tile:not(.merge-source):not(.merge-anchor){
    opacity:.78 !important;filter:none !important
  }
  .board.reward-beat-v33{animation:v34MobileRewardBeat .34s cubic-bezier(.12,.8,.18,1)}
  .reward-core-v34{
    mix-blend-mode:normal;filter:none;
    background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(255,247,160,.72) 10%,rgba(69,236,255,.31) 28%,rgba(255,65,203,.18) 48%,transparent 70%)
  }
  .reward-rays-v34{filter:none;mix-blend-mode:normal;opacity:.86}
  .reward-orbit-v33{mix-blend-mode:normal}
  .combo-flash.show{animation-duration:.70s !important}
}

@keyframes v34MobileRewardBeat{
  0%{transform:translateZ(0) scale(1)}
  24%{transform:translateZ(0) scale(1.006)}
  100%{transform:translateZ(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .reward-core-v34,.reward-rays-v34{display:none !important}
  .board.reward-beat-v33{animation:none !important}
  .combo-flash.show{animation:combo .01ms linear forwards !important}
}

@media (max-width:390px){
  .topbar>div:first-child{min-width:0}
  .topbar h1{font-size:clamp(1.65rem,7.4vw,1.9rem) !important;letter-spacing:.012em !important;white-space:nowrap}
  .top-actions{gap:5px}
  .restart-top-btn,.icon-btn{width:42px;height:42px;min-width:42px}
}


/* ==========================================================
   JUH1MERGE — Candy Blast visual pass
   ========================================================== */

/* Board becomes richer and more arcade-like without changing layout. */
.board{
  background:
    radial-gradient(circle at 17% 7%,rgba(55,235,255,.13),transparent 28%),
    radial-gradient(circle at 83% 92%,rgba(255,59,205,.15),transparent 31%),
    radial-gradient(circle at 50% 48%,rgba(150,80,255,.05),transparent 38%),
    linear-gradient(180deg,#241c50 0%,#151034 48%,#0d0925 100%) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -26px 58px rgba(0,0,0,.20),
    0 18px 44px rgba(0,0,0,.42),
    0 0 24px rgba(110,72,255,.12) !important;
}

/* Tiles: thicker glass/candy edge and stronger glossy depth. */
.tile{
  border:2px solid rgba(255,255,255,.48) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.42),
    inset 0 -8px 14px rgba(0,0,0,.16),
    inset 7px 0 12px rgba(255,255,255,.08),
    0 4px 0 rgba(0,0,0,.10),
    0 8px 17px rgba(0,0,0,.24),
    0 0 12px rgba(255,255,255,.08) !important;
}

/* Glossy candy cap, board tiles only. */
.tile::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  left:9%;
  top:7%;
  width:64%;
  height:27%;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.27) 55%,
      rgba(255,255,255,0)
    ) !important;
  filter:blur(.15px);
  opacity:.82;
  transform:rotate(-7deg);
  pointer-events:none;
}

/* Secondary tiny specular highlight. */
.tile span{position:relative;z-index:2}
.tile::before{
  background:
    linear-gradient(
      112deg,
      transparent 31%,
      rgba(255,255,255,.05) 40%,
      rgba(255,255,255,.82) 49%,
      rgba(255,255,255,.11) 57%,
      transparent 68%
    ) !important;
}

/* Stronger result birth. */
.tile.merge-soft{
  animation:mergeResultCandy 190ms cubic-bezier(.13,.86,.23,1.12) both !important;
}
@keyframes mergeResultCandy{
  0%{
    transform:scale(.56);
    opacity:.18;
    filter:brightness(2.25) saturate(1.35);
  }
  38%{
    transform:scale(1.20);
    opacity:1;
    filter:brightness(1.55) saturate(1.28);
  }
  68%{
    transform:scale(.96);
    filter:brightness(1.14) saturate(1.12);
  }
  100%{
    transform:scale(1);
    filter:brightness(1) saturate(1);
  }
}

/* Bloom behind the merged tile. */
.candy-bloom{
  position:absolute;
  z-index:13;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.22);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,246,144,.72) 13%,
      rgba(255,69,211,.38) 31%,
      rgba(52,231,255,.22) 47%,
      transparent 68%);
  filter:blur(.2px);
}
.candy-bloom.mega{
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0%,
      rgba(255,248,150,.84) 12%,
      rgba(255,81,210,.55) 28%,
      rgba(66,235,255,.34) 45%,
      rgba(130,84,255,.14) 60%,
      transparent 74%);
}
.candy-bloom.show{
  animation:candyBloom .52s cubic-bezier(.12,.82,.18,1) forwards;
}
@keyframes candyBloom{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  18%{opacity:1}
  58%{opacity:.72;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}
}

/* Candy confetti chunks feel more substantial than only tiny particles. */
.candy-confetti{
  position:absolute;
  z-index:18;
  pointer-events:none;
  color:#fff;
  font-size:12px;
  line-height:1;
  transform:translate(-50%,-50%) scale(.4);
  animation:candyConfetti .66s cubic-bezier(.13,.72,.17,1) var(--delay) forwards;
  text-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 9px rgba(255,63,200,.45);
}
.candy-confetti:nth-child(4n+1){color:#ffe85e}
.candy-confetti:nth-child(4n+2){color:#42efff}
.candy-confetti:nth-child(4n+3){color:#ff51c8}
.candy-confetti:nth-child(4n){color:#9cff65}

@keyframes candyConfetti{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.3) rotate(0deg);
  }
  16%{opacity:1}
  100%{
    opacity:0;
    transform:
      translate(calc(-50% + var(--cx)),calc(-50% + var(--cy)))
      scale(.9)
      rotate(var(--cr));
  }
}

/* Whole-board impact is short and earned. */
.board.candy-impact{
  animation:candyImpact .31s cubic-bezier(.12,.86,.22,1);
}
@keyframes candyImpact{
  0%{
    transform:scale(1);
    filter:brightness(1) saturate(1);
  }
  28%{
    transform:scale(var(--candy-impact,1.008));
    filter:brightness(1.14) saturate(1.18);
  }
  100%{
    transform:scale(1);
    filter:brightness(1) saturate(1);
  }
}

/* More luxurious praise banner. */
.combo-flash{
  background:
    linear-gradient(145deg,rgba(9,6,25,.97),rgba(43,16,68,.97)) !important;
  border:2px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 2px rgba(146,86,255,.28),
    0 0 22px rgba(52,234,255,.34),
    0 0 38px rgba(255,65,204,.30),
    0 10px 24px rgba(0,0,0,.48) !important;
}

/* Higher chain = temporarily richer board saturation. */
.board[data-chain="3"]{filter:saturate(1.08)}
.board[data-chain="4"]{filter:saturate(1.14)}
.board[data-chain="5"]{filter:saturate(1.20)}
.board[data-chain="6"],
.board[data-chain="7"]{filter:saturate(1.28) brightness(1.04)}

/* Mobile preserves the candy feel but trims the expensive pieces. */
@media (max-width:700px), (pointer:coarse){
  .tile{
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.34),
      inset 0 -5px 9px rgba(0,0,0,.14),
      0 3px 8px rgba(0,0,0,.18) !important;
  }

  .tile::after{
    opacity:.55;
  }

  .candy-bloom{
    filter:none;
  }

  .candy-confetti{
    font-size:9px;
    text-shadow:0 0 4px rgba(255,255,255,.75);
  }

  .board.candy-impact{
    animation-duration:.24s;
  }
}


/* ==========================================================
   Candy Blast V2 — stronger shine without changing mechanics
   ========================================================== */

/* Richer glossy bevel. */
.tile{
  border-color:rgba(255,255,255,.62) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.55),
    inset 0 -9px 16px rgba(0,0,0,.18),
    inset 8px 0 14px rgba(255,255,255,.10),
    inset -5px 0 11px rgba(0,0,0,.07),
    0 4px 0 rgba(0,0,0,.10),
    0 8px 18px rgba(0,0,0,.24),
    0 0 14px rgba(255,255,255,.10) !important;
}

/* Brighter curved candy highlight. */
.tile::after{
  width:68% !important;
  height:30% !important;
  left:8% !important;
  top:5% !important;
  opacity:.92 !important;
  background:
    radial-gradient(
      ellipse at 45% 25%,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.52) 32%,
      rgba(255,255,255,.16) 62%,
      transparent 76%
    ) !important;
}

/* Shining sweep is brighter but still brief. */
.tile::before{
  background:
    linear-gradient(
      112deg,
      transparent 28%,
      rgba(255,255,255,.06) 37%,
      rgba(255,255,255,.95) 48%,
      rgba(255,255,255,.18) 57%,
      transparent 69%
    ) !important;
}

/* Merge result gets a flashier surface for its birth moment. */
.tile.merge-soft{
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.72),
    inset 0 -8px 14px rgba(0,0,0,.14),
    0 0 15px rgba(255,255,255,.62),
    0 0 31px rgba(255,74,211,.34),
    0 0 44px rgba(56,232,255,.24) !important;
}
.tile.merge-soft::before{
  animation:candyMergeSweep .34s ease-out 1 !important;
}
@keyframes candyMergeSweep{
  0%{transform:translateX(-72%) rotate(8deg);opacity:0}
  18%{opacity:1}
  74%{transform:translateX(58%) rotate(8deg);opacity:.92}
  100%{transform:translateX(72%) rotate(8deg);opacity:0}
}

/* Cross-shaped jewel glint. */
.candy-glint{
  position:absolute;
  z-index:19;
  pointer-events:none;
  width:var(--glint-size);
  height:var(--glint-size);
  transform:translate(-50%,-50%) scale(.25) rotate(-12deg);
  opacity:0;
}
.candy-glint::before,
.candy-glint::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      rgba(255,255,255,1),
      rgba(255,246,161,.92),
      rgba(255,255,255,1),
      rgba(255,255,255,.16),
      transparent
    );
  box-shadow:0 0 12px rgba(255,255,255,.82);
}
.candy-glint::before{
  width:100%;
  height:3px;
}
.candy-glint::after{
  width:3px;
  height:100%;
}
.candy-glint.mega::before{height:4px}
.candy-glint.mega::after{width:4px}

.candy-glint.show{
  animation:candyGlint .46s cubic-bezier(.12,.82,.18,1) forwards;
}
@keyframes candyGlint{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.18) rotate(-18deg);
  }
  24%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.05) rotate(0);
  }
  64%{opacity:.78}
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.32) rotate(10deg);
  }
}

/* Stronger but short board shimmer when a cascade grows. */
.board[data-chain="3"]{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    0 18px 44px rgba(0,0,0,.42),
    0 0 25px rgba(58,230,255,.15) !important;
}
.board[data-chain="4"]{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.11),
    0 18px 44px rgba(0,0,0,.42),
    0 0 29px rgba(255,62,201,.18) !important;
}
.board[data-chain="5"],
.board[data-chain="6"],
.board[data-chain="7"]{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.13),
    0 18px 44px rgba(0,0,0,.42),
    0 0 34px rgba(255,224,76,.20),
    0 0 46px rgba(255,62,201,.14) !important;
}

/* Keep mobile smooth: retain gloss, simplify the extra glint. */
@media (max-width:700px), (pointer:coarse){
  .tile{
    border-color:rgba(255,255,255,.46) !important;
  }

  .tile::after{
    opacity:.62 !important;
  }

  .candy-glint{
    width:calc(var(--glint-size) * .78);
    height:calc(var(--glint-size) * .78);
  }

  .candy-glint::before{
    height:2px;
    box-shadow:0 0 6px rgba(255,255,255,.66);
  }

  .candy-glint::after{
    width:2px;
    box-shadow:0 0 6px rgba(255,255,255,.66);
  }
}


/* ==========================================================
   JUH1MERGE — Mega Reward Pass
   ========================================================== */

/* More polished candy surface on every tile */
.tile{
  position:absolute;
  isolation:isolate;
  border:2px solid rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.58),
    inset 0 -9px 16px rgba(0,0,0,.18),
    inset 9px 0 14px rgba(255,255,255,.11),
    inset -5px 0 12px rgba(0,0,0,.08),
    0 4px 0 rgba(0,0,0,.10),
    0 8px 18px rgba(0,0,0,.24),
    0 0 15px rgba(255,255,255,.11) !important;
}

.tile::after{
  background:
    radial-gradient(
      ellipse at 42% 24%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.62) 28%,
      rgba(255,255,255,.20) 58%,
      transparent 76%
    ) !important;
  opacity:.94 !important;
}

/* ----------------------------------------------------------
   LEGENDARY 1024+ TILE SYSTEM
   ---------------------------------------------------------- */
.tile.high-tier,
.launcher-tile.high-tier,
.preview-tile.high-tier{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 26% 18%,rgba(255,255,255,.65),transparent 20%),
    linear-gradient(
      135deg,
      hsl(var(--tier-h1) 100% 58%) 0%,
      hsl(var(--tier-h2) 100% 61%) 36%,
      hsl(var(--tier-h3) 100% 70%) 68%,
      hsl(var(--tier-h1) 100% 62%) 100%
    ) !important;
  background-size:220% 220% !important;
  color:var(--tier-text,#fff) !important;
  border:2px solid rgba(255,255,255,.82) !important;
  text-shadow:
    0 2px 2px rgba(0,0,0,.36),
    0 0 7px rgba(255,255,255,.42);
  box-shadow:
    0 0 10px rgba(255,255,255,.35),
    0 0 calc(12px + var(--tier-index)*1.5px) var(--tier-glow),
    0 0 calc(24px + var(--tier-index)*2px) color-mix(in srgb,var(--tier-glow) 65%,transparent),
    inset 0 5px 0 rgba(255,255,255,.72),
    inset 0 -9px 15px rgba(0,0,0,.16) !important;
  animation:megaGradientShift 4.8s ease-in-out infinite;
}

@keyframes megaGradientShift{
  0%,100%{background-position:0% 45%}
  50%{background-position:100% 58%}
}

/* Faceted jewel overlay */
.tile.high-tier::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:7% 9% auto 9% !important;
  width:68% !important;
  height:31% !important;
  border-radius:999px 999px 58% 58% !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(255,255,255,.54) 38%,
      rgba(255,255,255,.12) 75%,
      transparent
    ) !important;
  transform:rotate(-6deg);
  opacity:.96 !important;
}

/* Fine prismatic sweep */
.tile.high-tier::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    linear-gradient(
      108deg,
      transparent 34%,
      rgba(255,255,255,.06) 41%,
      rgba(255,255,255,1) 49%,
      rgba(255,235,130,.55) 52%,
      rgba(90,240,255,.35) 55%,
      rgba(255,86,222,.28) 58%,
      transparent 66%
    ) !important;
  animation:legendarySweep 2.7s ease-in-out infinite !important;
  pointer-events:none;
}

@keyframes legendarySweep{
  0%,64%{transform:translateX(-68%) rotate(7deg);opacity:0}
  69%{opacity:1}
  84%{transform:translateX(66%) rotate(7deg);opacity:.95}
  90%,100%{transform:translateX(72%) rotate(7deg);opacity:0}
}

/* 8192+ gets a slightly different jewel silhouette */
.tile.high-tier[data-mega-tier="4"],
.tile.high-tier[data-mega-tier="5"],
.tile.high-tier[data-mega-tier="6"],
.tile.high-tier[data-mega-tier="7"],
.tile.high-tier[data-mega-tier="8"],
.tile.high-tier[data-mega-tier="9"],
.tile.high-tier[data-mega-tier="10"],
.tile.high-tier[data-mega-tier="11"],
.tile.high-tier[data-mega-tier="12"]{
  border-radius:25% 17% 25% 17% !important;
}

/* 65536+ becomes "mythic" */
.tile.high-tier[data-mega-tier="7"],
.tile.high-tier[data-mega-tier="8"],
.tile.high-tier[data-mega-tier="9"],
.tile.high-tier[data-mega-tier="10"],
.tile.high-tier[data-mega-tier="11"],
.tile.high-tier[data-mega-tier="12"]{
  box-shadow:
    0 0 11px rgba(255,255,255,.56),
    0 0 24px var(--tier-glow),
    0 0 44px color-mix(in srgb,var(--tier-glow) 72%,transparent),
    inset 0 5px 0 rgba(255,255,255,.82),
    inset 0 -10px 15px rgba(0,0,0,.15) !important;
}

/* Radial "candy rays" on impact */
.radial-candy-burst{
  position:absolute;
  z-index:15;
  pointer-events:none;
  width:var(--burst-size);
  height:var(--burst-size);
  transform:translate(-50%,-50%) scale(.18);
  border-radius:50%;
  opacity:0;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 8deg,
      rgba(255,255,255,.88) 9deg 12deg,
      transparent 13deg 28deg,
      rgba(255,229,93,.70) 29deg 32deg,
      transparent 33deg 48deg,
      rgba(57,232,255,.62) 49deg 52deg,
      transparent 53deg 68deg,
      rgba(255,70,207,.58) 69deg 72deg,
      transparent 73deg 88deg
    );
  filter:blur(.1px);
  mix-blend-mode:screen;
}

.radial-candy-burst.show{
  animation:radialBurst .54s cubic-bezier(.14,.82,.18,1) forwards;
}
.radial-candy-burst.mega{
  filter:drop-shadow(0 0 9px rgba(255,255,255,.70));
}
@keyframes radialBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.16) rotate(-12deg)}
  18%{opacity:1}
  64%{opacity:.68;transform:translate(-50%,-50%) scale(1) rotate(7deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18) rotate(13deg)}
}

/* Aura used only on 1024+ result tiles */
.mega-aura{
  position:absolute;
  z-index:12;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.18);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.82) 0%,
      rgba(255,244,142,.42) 14%,
      rgba(255,80,215,.22) 35%,
      rgba(64,231,255,.16) 52%,
      transparent 73%);
  box-shadow:
    0 0 18px rgba(255,255,255,.34),
    0 0 36px rgba(255,69,209,.20);
}
.mega-aura.show{
  animation:megaAura .68s ease-out forwards;
}
@keyframes megaAura{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  22%{opacity:.95}
  65%{opacity:.60;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
}

/* Body glow escalates for real chains */
body[data-chain-glow="3"] .app{
  filter:saturate(1.05);
}
body[data-chain-glow="4"] .app{
  filter:saturate(1.10) brightness(1.02);
}
body[data-chain-glow="5"] .app,
body[data-chain-glow="6"] .app,
body[data-chain-glow="7"] .app{
  filter:saturate(1.16) brightness(1.035);
}

/* Praise gets more pop without reducing readability */
.combo-flash{
  transform-origin:center;
}
.combo-flash.show{
  animation:megaPraise .94s cubic-bezier(.13,.84,.18,1) forwards !important;
}
@keyframes megaPraise{
  0%{opacity:0;transform:translate(-50%,8px) scale(.72)}
  16%{opacity:1;transform:translate(-50%,-3px) scale(1.13)}
  38%{opacity:1;transform:translate(-50%,-5px) scale(.98)}
  70%{opacity:1;transform:translate(-50%,-8px) scale(1.03)}
  100%{opacity:0;transform:translate(-50%,-17px) scale(.96)}
}

/* Mobile keeps the spectacle, trims the most expensive continuous effects */
@media (max-width:700px), (pointer:coarse){
  .tile.high-tier,
  .launcher-tile.high-tier,
  .preview-tile.high-tier{
    animation:none !important;
    background-size:100% 100% !important;
    box-shadow:
      0 0 9px rgba(255,255,255,.30),
      0 0 15px var(--tier-glow),
      inset 0 3px 0 rgba(255,255,255,.52),
      inset 0 -6px 10px rgba(0,0,0,.14) !important;
  }

  .tile.high-tier::before{
    animation:none !important;
    opacity:.20 !important;
    transform:translateX(12%) rotate(7deg) !important;
  }

  .mega-aura{
    box-shadow:0 0 18px rgba(255,255,255,.22);
  }

  .radial-candy-burst{
    filter:none;
  }
}


/* ==========================================================
   Stability fix — legendary visuals must not alter layout
   ========================================================== */
.tile.high-tier{
  position:absolute !important;
  display:flex !important;
  visibility:visible;
}

.launcher-tile.high-tier{
  position:absolute !important;
  display:flex !important;
  visibility:visible;
}

.preview-tile.high-tier{
  position:relative !important;
  display:flex !important;
  visibility:visible;
}

.candy-bloom,
.candy-glint,
.candy-confetti,
.radial-candy-burst,
.mega-aura,
.reward-flash,
.candy-star,
.score-pop{
  pointer-events:none !important;
}


/* ==========================================================
   V23 — Flame effect on high flow bar
   ========================================================== */
.heat-track{
  position:relative;
  overflow:visible !important;
  isolation:isolate;
}

.heat-bar{
  position:relative;
  overflow:visible;
  z-index:2;
  border-radius:999px;
}

/* Track glow grows as flow gets hotter */
.heat-track::before{
  content:"";
  position:absolute;
  inset:-5px -4px;
  border-radius:999px;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  background:
    radial-gradient(circle at 18% 50%,rgba(255,235,124,.26),transparent 23%),
    radial-gradient(circle at 52% 50%,rgba(255,86,35,.18),transparent 26%),
    radial-gradient(circle at 84% 50%,rgba(255,61,200,.14),transparent 24%);
  filter:blur(6px);
  z-index:0;
  pointer-events:none;
}

.heat-track[data-state="warm"]::before{
  opacity:.40;
}

.heat-track[data-state="fire"]::before,
.heat-track[data-state="blaze"]::before{
  opacity:.90;
}

/* The actual flame tongues */
.heat-bar::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:48%;
  height:18px;
  opacity:0;
  transform-origin:50% 100%;
  transform:scaleY(.58) translateY(2px);
  border-radius:999px;
  pointer-events:none;
  z-index:3;
  background:
    radial-gradient(12px 14px at 5% 100%, rgba(255,247,188,.98) 0 16%, rgba(255,212,92,.92) 17% 40%, rgba(255,104,31,.82) 41% 68%, transparent 69%),
    radial-gradient(15px 17px at 17% 100%, rgba(255,250,210,.98) 0 16%, rgba(255,223,99,.93) 17% 40%, rgba(255,82,28,.80) 41% 70%, transparent 71%),
    radial-gradient(14px 18px at 30% 100%, rgba(255,249,204,.98) 0 16%, rgba(255,214,86,.92) 17% 39%, rgba(255,83,24,.78) 40% 69%, transparent 70%),
    radial-gradient(17px 20px at 45% 100%, rgba(255,252,220,.98) 0 16%, rgba(255,228,92,.94) 17% 40%, rgba(255,80,34,.80) 41% 70%, transparent 71%),
    radial-gradient(13px 15px at 59% 100%, rgba(255,250,205,.98) 0 16%, rgba(255,213,84,.91) 17% 40%, rgba(255,87,28,.77) 41% 70%, transparent 71%),
    radial-gradient(16px 19px at 74% 100%, rgba(255,252,216,.98) 0 16%, rgba(255,223,92,.92) 17% 39%, rgba(255,82,36,.79) 40% 70%, transparent 71%),
    radial-gradient(12px 14px at 89% 100%, rgba(255,247,188,.96) 0 17%, rgba(255,194,78,.89) 18% 42%, rgba(255,74,18,.76) 43% 71%, transparent 72%);
  filter:drop-shadow(0 0 5px rgba(255,176,41,.48)) drop-shadow(0 0 14px rgba(255,82,28,.32));
}

.heat-bar::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(90deg,rgba(255,238,132,.16),rgba(255,104,31,.22),rgba(255,61,200,.16));
  filter:blur(5px);
}

.heat-bar[data-state="fire"]::before,
.heat-bar[data-state="blaze"]::before{
  opacity:.8;
}

.heat-bar[data-state="fire"]::after{
  opacity:.82;
  height:16px;
  animation:
    flowFlameFlicker .56s ease-in-out infinite alternate,
    flowFlameWave 1.6s linear infinite;
  transform:scaleY(.84) translateY(0);
}

.heat-bar[data-state="blaze"]::after{
  opacity:1;
  height:22px;
  animation:
    flowFlameFlicker .42s ease-in-out infinite alternate,
    flowFlameWave 1.0s linear infinite,
    flowFlameSurge .9s ease-in-out infinite;
  transform:scaleY(1) translateY(-1px);
  filter:
    drop-shadow(0 0 7px rgba(255,219,90,.72))
    drop-shadow(0 0 16px rgba(255,111,34,.45))
    drop-shadow(0 0 24px rgba(255,61,200,.20));
}

@keyframes flowFlameFlicker{
  0%{
    transform:scaleY(.82) translateY(1px);
    filter:brightness(.96) saturate(1);
  }
  100%{
    transform:scaleY(1.08) translateY(-1px);
    filter:brightness(1.12) saturate(1.12);
  }
}

@keyframes flowFlameWave{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:8px 0,-6px 0,7px 0,-8px 0,6px 0,-7px 0,8px 0}
}

@keyframes flowFlameSurge{
  0%,100%{opacity:.88}
  50%{opacity:1}
}

@media (max-width:700px), (pointer:coarse){
  .heat-bar[data-state="fire"]::after{height:13px}
  .heat-bar[data-state="blaze"]::after{height:18px}
}


/* ==========================================================
   V24 — Wind-fed flow flames + louder audio build
   ========================================================== */

/* Kill the flat V23 pseudo-flame; V24 uses individual flame tongues. */
.heat-bar::after{
  content:none !important;
  display:none !important;
}

/* Keep the warm underglow from V23 but let real flames sit above the track. */
.heat-track{
  overflow:visible !important;
}

.flow-flames{
  --heat-level:0;
  position:absolute;
  left:0;
  bottom:4px;
  width:0%;
  height:34px;
  z-index:5;
  pointer-events:none;
  overflow:visible;
  opacity:0;
  transition:
    width .11s ease,
    opacity .16s ease,
    filter .16s ease;
  filter:
    drop-shadow(0 0 3px rgba(255,225,120,.28))
    drop-shadow(0 0 8px rgba(255,88,25,.20));
}

/*
  Each flame is smallest at the left and progressively taller/wider
  toward the right. Its asymmetric teardrop is rotated rightward so
  the whole row looks like wind is feeding the flame from left -> right.
*/
.flow-flame{
  position:absolute;
  bottom:0;
  width:var(--flame-w);
  height:var(--flame-h);
  transform-origin:50% 100%;
  transform:
    translateX(-50%)
    rotate(var(--flame-lean))
    skewX(7deg);
  border-radius:74% 22% 68% 34%;
  background:
    radial-gradient(
      ellipse at 44% 76%,
      rgba(255,255,224,1) 0 16%,
      rgba(255,231,104,.98) 17% 38%,
      rgba(255,126,37,.93) 39% 66%,
      rgba(255,54,29,.75) 67% 82%,
      rgba(255,40,143,.22) 83% 91%,
      transparent 92%
    );
  opacity:0;
  will-change:transform,opacity,filter;
}

/* Small white/yellow hot core inside each tongue. */
.flow-flame::after{
  content:"";
  position:absolute;
  left:34%;
  bottom:7%;
  width:38%;
  height:47%;
  border-radius:75% 24% 68% 35%;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.84),
      rgba(255,246,145,.92) 47%,
      rgba(255,174,58,.30) 78%,
      transparent
    );
  filter:blur(.15px);
}

/* At HOT we only hint at the coming flame. */
.flow-flames[data-state="warm"]{
  opacity:.20;
  filter:blur(.25px) drop-shadow(0 0 5px rgba(255,112,31,.18));
}
.flow-flames[data-state="warm"] .flow-flame{
  opacity:.25;
  animation:windFlameV24 var(--flame-speed) ease-in-out var(--flame-delay) infinite alternate;
}

/* RUSH: visible left->right flame ramp. */
.flow-flames[data-state="fire"]{
  opacity:.88;
}
.flow-flames[data-state="fire"] .flow-flame{
  opacity:.86;
  animation:windFlameV24 var(--flame-speed) ease-in-out var(--flame-delay) infinite alternate;
}

/* MAX: taller, brighter, faster, and visually pulled harder to the right. */
.flow-flames[data-state="blaze"]{
  opacity:1;
  filter:
    drop-shadow(0 0 4px rgba(255,246,168,.55))
    drop-shadow(0 0 10px rgba(255,111,27,.42))
    drop-shadow(0 0 18px rgba(255,55,125,.18));
}
.flow-flames[data-state="blaze"] .flow-flame{
  opacity:1;
  animation:
    windFlameV24 calc(var(--flame-speed) * .78) ease-in-out var(--flame-delay) infinite alternate,
    windFlamePulseV24 1.05s ease-in-out var(--flame-delay) infinite;
}

@keyframes windFlameV24{
  0%{
    transform:
      translateX(calc(-50% + 0px))
      rotate(calc(var(--flame-lean) - 3deg))
      skewX(5deg)
      scaleY(.76)
      scaleX(.88);
    filter:brightness(.96) saturate(1.02);
  }
  45%{
    transform:
      translateX(calc(-50% + var(--flame-shift)))
      rotate(var(--flame-lean))
      skewX(9deg)
      scaleY(1.08)
      scaleX(.95);
    filter:brightness(1.12) saturate(1.13);
  }
  100%{
    transform:
      translateX(calc(-50% + var(--flame-shift) * .55))
      rotate(calc(var(--flame-lean) + 4deg))
      skewX(12deg)
      scaleY(.91)
      scaleX(1.04);
    filter:brightness(1.03) saturate(1.08);
  }
}

@keyframes windFlamePulseV24{
  0%,100%{filter:brightness(1) saturate(1.08)}
  50%{filter:brightness(1.18) saturate(1.22)}
}

/* Add a hot comet-like glow at the current end of the filled bar. */
.flow-flames::after{
  content:"";
  position:absolute;
  right:-5px;
  bottom:-1px;
  width:16px;
  height:16px;
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,225,.98) 0 15%,
      rgba(255,221,91,.90) 16% 36%,
      rgba(255,91,28,.60) 37% 62%,
      transparent 72%);
  filter:blur(.4px);
}
.flow-flames[data-state="fire"]::after{opacity:.52}
.flow-flames[data-state="blaze"]::after{
  opacity:.92;
  animation:flowTipGlowV24 .42s ease-in-out infinite alternate;
}
@keyframes flowTipGlowV24{
  from{transform:scale(.82);filter:brightness(.95) blur(.5px)}
  to{transform:scale(1.18);filter:brightness(1.2) blur(.2px)}
}

@media (max-width:700px), (pointer:coarse){
  .flow-flames{
    height:29px;
  }
  .flow-flame{
    height:calc(var(--flame-h) * .82);
    width:calc(var(--flame-w) * .90);
  }
}


/* ==========================================================
   V25 — Thick Hyper Flow Bar
   Flame system removed. High flow becomes a plasma/hyperdrive bar.
   ========================================================== */

/* Thicker track */
.heat-track{
  height:13px !important;
  border-radius:999px !important;
  overflow:visible !important;
  position:relative !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.24)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Base filled bar */
.heat-bar{
  height:100% !important;
  border-radius:999px !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:2 !important;
  background:
    linear-gradient(
      90deg,
      #5c74ff 0%,
      #21dcff 35%,
      #b754ff 64%,
      #ff43c7 82%,
      #ffe56d 100%
    ) !important;
  background-size:180% 100% !important;
  transition:width .11s ease, filter .18s ease, box-shadow .18s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 0 8px rgba(73,214,255,.12) !important;
}

/* Remove V23/V24 flame leftovers */
.flow-flames,
.flow-flame,
.heat-bar::after{
  display:none !important;
  content:none !important;
}

/* Calm states */
.heat-track[data-state="cool"]::before,
.heat-track[data-state="warm"]::before{
  opacity:.15 !important;
}

.heat-bar[data-state="warm"]{
  filter:saturate(1.08) brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 0 11px rgba(38,222,255,.24) !important;
}

/* Hyper overlay follows the exact filled width */
.hyper-flow{
  position:absolute;
  left:0;
  top:0;
  height:13px;
  width:0%;
  border-radius:999px;
  z-index:4;
  pointer-events:none;
  opacity:0;
  overflow:visible;
  transition:
    width .11s ease,
    opacity .18s ease,
    filter .18s ease;
}

/* Animated moving energy streak */
.hyper-flow::before{
  content:"";
  position:absolute;
  inset:1px 2px;
  border-radius:999px;
  opacity:0;
  background:
    repeating-linear-gradient(
      110deg,
      transparent 0 18px,
      rgba(255,255,255,.14) 19px 22px,
      rgba(255,255,255,.72) 23px 27px,
      rgba(255,255,255,.10) 28px 31px,
      transparent 32px 52px
    );
  background-size:110px 100%;
  mix-blend-mode:screen;
}

/* Bright hyper endpoint */
.hyper-flow::after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  width:19px;
  height:19px;
  border-radius:50%;
  transform:translateY(-50%) scale(.72);
  opacity:0;
  background:
    radial-gradient(circle,
      #fff 0% 13%,
      #fff8a5 14% 28%,
      #63f3ff 29% 46%,
      rgba(175,88,255,.86) 47% 61%,
      rgba(255,64,200,.32) 62% 72%,
      transparent 73%);
  box-shadow:
    0 0 8px rgba(255,255,255,.74),
    0 0 16px rgba(72,232,255,.58),
    0 0 28px rgba(182,78,255,.40);
}

/* High flow */
.heat-track[data-state="fire"]{
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.42),
    0 0 10px rgba(47,232,255,.18),
    0 0 22px rgba(167,76,255,.16) !important;
}

.heat-bar[data-state="fire"]{
  filter:saturate(1.22) brightness(1.08);
  animation:hyperBarShiftV25 1.2s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 3px rgba(0,0,0,.14),
    0 0 14px rgba(49,232,255,.42),
    0 0 23px rgba(180,76,255,.20) !important;
}

.hyper-flow[data-state="fire"]{
  opacity:.90;
  filter:drop-shadow(0 0 7px rgba(67,232,255,.38));
}
.hyper-flow[data-state="fire"]::before{
  opacity:.72;
  animation:hyperStreakV25 .72s linear infinite;
}
.hyper-flow[data-state="fire"]::after{
  opacity:.76;
  animation:hyperTipV25 .62s ease-in-out infinite alternate;
}

/* MAX = hyperdrive */
.heat-track[data-state="blaze"]{
  animation:hyperTrackPulseV25 .72s ease-in-out infinite;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.38),
    0 0 13px rgba(65,241,255,.42),
    0 0 28px rgba(174,77,255,.32),
    0 0 40px rgba(255,63,195,.19) !important;
}

.heat-bar[data-state="blaze"]{
  filter:saturate(1.42) brightness(1.18);
  animation:
    hyperBarShiftV25 .58s linear infinite,
    hyperBarPulseV25 .86s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -2px 3px rgba(0,0,0,.10),
    0 0 17px rgba(68,241,255,.65),
    0 0 31px rgba(174,77,255,.44),
    0 0 43px rgba(255,62,196,.26) !important;
}

.hyper-flow[data-state="blaze"]{
  opacity:1;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.40))
    drop-shadow(0 0 14px rgba(66,239,255,.44));
}

.hyper-flow[data-state="blaze"]::before{
  opacity:1;
  animation:hyperStreakV25 .36s linear infinite;
}

.hyper-flow[data-state="blaze"]::after{
  opacity:1;
  transform:translateY(-50%) scale(1);
  animation:hyperTipMaxV25 .44s ease-in-out infinite alternate;
}

/* Additional external streaks around the whole track at MAX */
.heat-track[data-state="blaze"]::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:-7px;
  height:27px;
  border-radius:999px;
  pointer-events:none;
  opacity:.70;
  background:
    linear-gradient(
      90deg,
      transparent 0 4%,
      rgba(70,231,255,.0) 10%,
      rgba(70,231,255,.42) 22%,
      transparent 38%,
      rgba(193,83,255,.42) 56%,
      transparent 72%,
      rgba(255,72,194,.36) 86%,
      transparent 100%
    );
  filter:blur(5px);
  animation:hyperAuraV25 .68s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes hyperBarShiftV25{
  from{background-position:0% 50%}
  to{background-position:180% 50%}
}

@keyframes hyperStreakV25{
  from{background-position:-110px 0}
  to{background-position:110px 0}
}

@keyframes hyperTipV25{
  from{transform:translateY(-50%) scale(.72);filter:brightness(.95)}
  to{transform:translateY(-50%) scale(1.03);filter:brightness(1.18)}
}

@keyframes hyperTipMaxV25{
  from{transform:translateY(-50%) scale(.88);filter:brightness(1)}
  to{transform:translateY(-50%) scale(1.20);filter:brightness(1.25)}
}

@keyframes hyperTrackPulseV25{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(1.08)}
}

@keyframes hyperBarPulseV25{
  0%,100%{filter:saturate(1.34) brightness(1.12)}
  50%{filter:saturate(1.58) brightness(1.24)}
}

@keyframes hyperAuraV25{
  from{opacity:.42;transform:scaleX(.98)}
  to{opacity:.86;transform:scaleX(1.02)}
}

/* Keep it performant on mobile */
@media (max-width:700px), (pointer:coarse){
  .heat-track,
  .hyper-flow{
    height:11px !important;
  }

  .hyper-flow::after{
    width:16px;
    height:16px;
  }

  .heat-track[data-state="blaze"]::after{
    filter:blur(4px);
    opacity:.55;
  }
}


/* ==========================================================
   V26 — 6x6 board + MEGA TURBO FLOW
   ========================================================== */

/* Square board; track counts come from the game-core dimensions. */
.board{
  grid-template-rows:repeat(var(--board-rows,5),1fr) !important;
  aspect-ratio:1/1 !important;
}
.fx{
  aspect-ratio:1/1 !important;
}

/* ----------------------------------------------------------
   Turbo housing: thicker, heavier, more engine-like.
   ---------------------------------------------------------- */
.heat-track{
  height:18px !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg,#08081a 0%,#11122d 46%,#050611 100%) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 0 rgba(255,255,255,.025) !important;
  overflow:visible !important;
}

/* Filled plasma itself */
.heat-bar{
  height:100% !important;
  border-radius:999px !important;
  background:
    linear-gradient(
      90deg,
      #4658ff 0%,
      #00bfff 20%,
      #35fff1 40%,
      #a957ff 61%,
      #ff3ca9 78%,
      #ff8b35 90%,
      #fff56b 100%
    ) !important;
  background-size:240% 100% !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.52),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 0 9px rgba(38,222,255,.18) !important;
}

/* Bright central lane makes the bar read like a plasma conduit */
.heat-bar::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:3px !important;
  right:3px !important;
  top:4px !important;
  height:5px !important;
  border-radius:999px !important;
  opacity:.55 !important;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.90),
      rgba(110,250,255,.82),
      rgba(255,255,255,.96),
      rgba(255,222,104,.66)
    ) !important;
  background-size:180% 100% !important;
  filter:blur(.15px) !important;
  pointer-events:none !important;
}

/* V25 generic endpoint is replaced by V26 turboCore */
.hyper-flow::after{
  content:none !important;
  display:none !important;
}

.hyper-flow{
  height:18px !important;
  top:0 !important;
  overflow:visible !important;
}

/* Multiple fast inner lanes */
.hyper-flow::before{
  inset:2px 3px !important;
  border-radius:999px !important;
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0 13px,
      rgba(255,255,255,.03) 14px 17px,
      rgba(255,255,255,.82) 18px 21px,
      rgba(51,242,255,.66) 22px 25px,
      transparent 26px 42px
    ) !important;
  background-size:126px 100% !important;
  mix-blend-mode:screen;
}

/* ----------------------------------------------------------
   White-hot turbine core at the front of the energy bar.
   ---------------------------------------------------------- */
.turbo-core{
  position:absolute;
  right:-10px;
  top:50%;
  width:26px;
  height:26px;
  transform:translateY(-50%) scale(.64);
  border-radius:50%;
  opacity:0;
  z-index:8;
  pointer-events:none;
  background:
    radial-gradient(circle,
      #ffffff 0 10%,
      #fffbe0 11% 19%,
      #91ffff 20% 31%,
      #29dfff 32% 43%,
      #ad51ff 44% 55%,
      #ff3faf 56% 66%,
      rgba(255,99,31,.40) 67% 74%,
      transparent 75%);
  box-shadow:
    0 0 5px #fff,
    0 0 11px rgba(100,250,255,.92),
    0 0 21px rgba(134,77,255,.68),
    0 0 31px rgba(255,53,176,.42);
}

/* Directional afterburner streak pointing backwards */
.turbo-core::before{
  content:"";
  position:absolute;
  right:58%;
  top:50%;
  width:38px;
  height:7px;
  transform:translateY(-50%);
  border-radius:999px 0 0 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,54,178,.10),
      rgba(99,81,255,.30),
      rgba(42,225,255,.72),
      rgba(255,255,255,.95)
    );
  filter:blur(.4px);
  opacity:.0;
}

/* Rotating turbine iris */
.turbo-core::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.72);
  box-shadow:inset 0 0 7px rgba(255,255,255,.40);
  opacity:.7;
}

/* ----------------------------------------------------------
   Expanding shock rings at the leading core.
   ---------------------------------------------------------- */
.turbo-rings{
  position:absolute;
  right:-10px;
  top:50%;
  width:26px;
  height:26px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:6;
}
.turbo-rings i{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(116,244,255,.82);
  opacity:0;
  box-shadow:
    0 0 8px rgba(73,235,255,.42),
    inset 0 0 5px rgba(255,255,255,.22);
}

/* ----------------------------------------------------------
   Sparks / speed particles shoot backward from the front core.
   ---------------------------------------------------------- */
.turbo-sparks{
  position:absolute;
  right:-5px;
  top:-8px;
  width:72px;
  height:34px;
  overflow:visible;
  pointer-events:none;
  z-index:7;
  opacity:0;
}
.turbo-sparks i{
  position:absolute;
  right:0;
  top:var(--spark-y);
  width:var(--spark-len);
  height:2px;
  border-radius:999px;
  opacity:0;
  background:
    linear-gradient(90deg,transparent,rgba(70,231,255,.72),#fff);
  box-shadow:0 0 6px rgba(92,239,255,.68);
  transform:translateX(0) rotate(-3deg);
}

/* ----------------------------------------------------------
   HOT / RUSH
   ---------------------------------------------------------- */
.heat-track[data-state="fire"]{
  border-color:rgba(89,235,255,.26) !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 11px rgba(35,232,255,.28),
    0 0 24px rgba(152,72,255,.18) !important;
}
.heat-bar[data-state="fire"]{
  animation:turboGradientV26 .72s linear infinite !important;
  filter:saturate(1.32) brightness(1.10) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.68),
    inset 0 -3px 5px rgba(0,0,0,.15),
    0 0 13px rgba(35,231,255,.48),
    0 0 23px rgba(173,79,255,.26) !important;
}
.heat-bar[data-state="fire"]::before{
  animation:turboCoreLaneV26 .55s linear infinite;
  opacity:.80 !important;
}
.hyper-flow[data-state="fire"]::before{
  opacity:.90 !important;
  animation:turboSpeedLinesV26 .39s linear infinite !important;
}
.hyper-flow[data-state="fire"] .turbo-core{
  opacity:.82;
  transform:translateY(-50%) scale(.82);
  animation:turboCorePulseV26 .52s ease-in-out infinite alternate;
}
.hyper-flow[data-state="fire"] .turbo-core::before{
  opacity:.62;
}
.hyper-flow[data-state="fire"] .turbo-core::after{
  animation:turboIrisV26 1.0s linear infinite;
}
.hyper-flow[data-state="fire"] .turbo-sparks{
  opacity:.72;
}
.hyper-flow[data-state="fire"] .turbo-sparks i{
  animation:turboSparkV26 var(--spark-speed) linear var(--spark-delay) infinite;
}

/* ----------------------------------------------------------
   MAX = full MEGA TURBO mode.
   ---------------------------------------------------------- */
.heat-track[data-state="blaze"]{
  border-color:rgba(255,255,255,.31) !important;
  animation:turboHousingV26 .54s ease-in-out infinite !important;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 13px rgba(62,245,255,.52),
    0 0 28px rgba(153,70,255,.40),
    0 0 42px rgba(255,54,178,.24),
    0 0 58px rgba(255,194,54,.12) !important;
}
.heat-bar[data-state="blaze"]{
  animation:
    turboGradientV26 .31s linear infinite,
    turboChargeV26 .62s ease-in-out infinite !important;
  filter:saturate(1.62) brightness(1.22) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.92),
    inset 0 -3px 5px rgba(0,0,0,.09),
    0 0 17px rgba(64,246,255,.78),
    0 0 32px rgba(165,71,255,.55),
    0 0 48px rgba(255,56,181,.36) !important;
}
.heat-bar[data-state="blaze"]::before{
  height:6px !important;
  top:3px !important;
  opacity:1 !important;
  filter:brightness(1.35) blur(.1px) !important;
  animation:turboCoreLaneV26 .27s linear infinite;
}
.hyper-flow[data-state="blaze"]::before{
  opacity:1 !important;
  animation:turboSpeedLinesV26 .19s linear infinite !important;
}
.hyper-flow[data-state="blaze"] .turbo-core{
  opacity:1;
  transform:translateY(-50%) scale(1);
  animation:turboCoreMaxV26 .32s ease-in-out infinite alternate;
}
.hyper-flow[data-state="blaze"] .turbo-core::before{
  opacity:1;
  width:52px;
  height:9px;
}
.hyper-flow[data-state="blaze"] .turbo-core::after{
  animation:turboIrisV26 .38s linear infinite;
  border-width:2.5px;
}
.hyper-flow[data-state="blaze"] .turbo-rings i{
  animation:turboShockRingV26 .72s cubic-bezier(.1,.6,.15,1) var(--ring-delay) infinite;
}
.hyper-flow[data-state="blaze"] .turbo-sparks{
  opacity:1;
}
.hyper-flow[data-state="blaze"] .turbo-sparks i{
  height:2.4px;
  animation:turboSparkMaxV26 calc(var(--spark-speed) * .58) linear var(--spark-delay) infinite;
}

/* Whole goal card gets a subtle energy hit only at MAX */
.goal-primary:has(.heat-track[data-state="blaze"]){
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 18px rgba(52,232,255,.10),
    0 0 32px rgba(167,72,255,.08) !important;
}

/* ----------------------------------------------------------
   Animations
   ---------------------------------------------------------- */
@keyframes turboGradientV26{
  from{background-position:0% 50%}
  to{background-position:240% 50%}
}

@keyframes turboCoreLaneV26{
  from{background-position:-100% 0}
  to{background-position:180% 0}
}

@keyframes turboSpeedLinesV26{
  from{background-position:-126px 0}
  to{background-position:126px 0}
}

@keyframes turboCorePulseV26{
  from{filter:brightness(.98);transform:translateY(-50%) scale(.76)}
  to{filter:brightness(1.22);transform:translateY(-50%) scale(.90)}
}

@keyframes turboCoreMaxV26{
  from{
    filter:brightness(1) saturate(1.1);
    transform:translateY(-50%) scale(.90);
  }
  to{
    filter:brightness(1.36) saturate(1.34);
    transform:translateY(-50%) scale(1.14);
  }
}

@keyframes turboIrisV26{
  to{transform:rotate(360deg)}
}

@keyframes turboShockRingV26{
  0%{opacity:.86;transform:scale(.58)}
  65%{opacity:.28}
  100%{opacity:0;transform:scale(2.35)}
}

@keyframes turboSparkV26{
  0%{opacity:0;transform:translateX(2px) scaleX(.5)}
  18%{opacity:.9}
  100%{opacity:0;transform:translateX(-58px) scaleX(1.5)}
}

@keyframes turboSparkMaxV26{
  0%{opacity:0;transform:translateX(4px) scaleX(.7)}
  14%{opacity:1}
  100%{opacity:0;transform:translateX(-76px) scaleX(2)}
}

@keyframes turboHousingV26{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(1.075)}
}

@keyframes turboChargeV26{
  0%,100%{filter:saturate(1.50) brightness(1.15)}
  50%{filter:saturate(1.78) brightness(1.29)}
}

@media (max-width:700px), (pointer:coarse){
  .heat-track,
  .hyper-flow{
    height:15px !important;
  }
  .turbo-core,
  .turbo-rings{
    width:22px;
    height:22px;
  }
  .turbo-sparks{
    width:58px;
    height:28px;
  }
  .hyper-flow[data-state="blaze"] .turbo-rings i{
    animation-duration:.86s;
  }
}


/* ==========================================================
   JUH1MERGE.V27b — smooth physics + reward polish
   ========================================================== */

.falling-tile{
  z-index:20 !important;
  will-change:top,transform,filter;
  transform:translateZ(0) scale(.985);
  filter:brightness(1.08);
}

.falling-tile.falling{
  transform:translateZ(0) scale(1.018);
  filter:brightness(1.14);
}

.falling-tile.landing,
.landing-soft{
  animation:v27Landing .16s cubic-bezier(.18,.88,.25,1.14) both !important;
}

@keyframes v27Landing{
  0%{transform:translateY(-3px) scale(1.035)}
  45%{transform:translateY(1.5px) scale(.975)}
  76%{transform:translateY(-.6px) scale(1.008)}
  100%{transform:translateY(0) scale(1)}
}

/* Merge sources now visibly flow toward the causal tile instead of fading
   in place. */
.tile.merge-source{
  animation:v27Absorb 110ms cubic-bezier(.25,.74,.22,1) forwards !important;
}

@keyframes v27Absorb{
  0%{
    transform:translate(0,0) scale(1);
    opacity:1;
    filter:brightness(1);
  }
  52%{
    transform:translate(
      calc(var(--merge-dx,0px) * .45),
      calc(var(--merge-dy,0px) * .45)
    ) scale(.88);
    opacity:.88;
    filter:brightness(1.25);
  }
  100%{
    transform:translate(var(--merge-dx,0px),var(--merge-dy,0px)) scale(.42);
    opacity:.05;
    filter:brightness(1.85);
  }
}

.tile.merge-anchor{
  animation:v27AnchorCharge 112ms cubic-bezier(.18,.86,.24,1) forwards !important;
}
@keyframes v27AnchorCharge{
  0%{transform:scale(1);filter:brightness(1)}
  58%{transform:scale(1.10);filter:brightness(1.32) saturate(1.15)}
  100%{transform:scale(.91);filter:brightness(1.62) saturate(1.25)}
}

/* Physical gravity during cascades */
.tile.gravity-moving{
  z-index:9 !important;
  will-change:transform;
}

/* Result tiles in a real chain get a second halo beat. */
.tile.reward-result{
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.72),
    inset 0 -9px 15px rgba(0,0,0,.14),
    0 0 12px rgba(255,255,255,.70),
    0 0 26px rgba(55,232,255,.45),
    0 0 42px rgba(255,62,202,.32) !important;
}

.tile.reward-result::after{
  opacity:1 !important;
}

.overflow-drop{
  z-index:24 !important;
}

.overflow-drop.overflow-impact{
  animation:v27OverflowImpact .13s cubic-bezier(.16,.85,.2,1.16) forwards !important;
}

@keyframes v27OverflowImpact{
  0%{transform:scale(1);filter:brightness(1.1)}
  50%{transform:scale(1.16);filter:brightness(1.8) saturate(1.3)}
  100%{transform:scale(.72);opacity:.15;filter:brightness(2)}
}

.tile.overflow-result{
  animation:v27OverflowResult .25s cubic-bezier(.12,.86,.18,1.18) both !important;
}
@keyframes v27OverflowResult{
  0%{transform:scale(.55);opacity:.2;filter:brightness(2.3)}
  42%{transform:scale(1.22);opacity:1;filter:brightness(1.5)}
  72%{transform:scale(.95)}
  100%{transform:scale(1);filter:none}
}

@media (max-width:700px), (pointer:coarse){
  .tile.merge-source{animation-duration:96ms !important}
  .tile.merge-anchor{animation-duration:98ms !important}
  .tile.reward-result{
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.50),
      inset 0 -6px 10px rgba(0,0,0,.12),
      0 0 12px rgba(58,232,255,.32),
      0 0 22px rgba(255,62,202,.22) !important;
  }
}


/* ==========================================================
   JUH1MERGE.V28b — Mobile Pop Pass
   Richer iOS/coarse-pointer presentation without desktop-level load.
   ========================================================== */

/* Bright radial reward flash used only on mobile/coarse pointers. */
.mobile-reward-flash{
  display:none;
}

@media (max-width:700px), (pointer:coarse){

  /* Board itself gets more depth on phone screens. */
  .board{
    border-color:rgba(255,255,255,.24) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.12),
      inset 0 -22px 44px rgba(0,0,0,.18),
      0 16px 38px rgba(0,0,0,.40),
      0 0 25px rgba(103,69,255,.16) !important;
  }

  /* Restore richer candy depth on ordinary mobile tiles. */
  .tile{
    border-color:rgba(255,255,255,.58) !important;
    box-shadow:
      inset 0 4px 0 rgba(255,255,255,.48),
      inset 0 -7px 12px rgba(0,0,0,.15),
      0 5px 10px rgba(0,0,0,.20),
      0 0 9px rgba(255,255,255,.09) !important;
  }

  .tile::after{
    opacity:.78 !important;
  }

  /* High tiers were previously almost static on mobile.
     V28b restores a slower/cheaper jewel animation. */
  .tile.high-tier,
  .launcher-tile.high-tier,
  .preview-tile.high-tier{
    animation:megaGradientShift 5.4s ease-in-out infinite !important;
    background-size:180% 180% !important;
    box-shadow:
      0 0 10px rgba(255,255,255,.45),
      0 0 19px var(--tier-glow),
      0 0 30px color-mix(in srgb,var(--tier-glow) 48%,transparent),
      inset 0 4px 0 rgba(255,255,255,.64),
      inset 0 -7px 11px rgba(0,0,0,.14) !important;
  }

  .tile.high-tier::before{
    animation:legendarySweep 3.25s ease-in-out infinite !important;
    opacity:.70 !important;
  }

  .tile.high-tier::after{
    opacity:.88 !important;
  }

  /* Results should visibly punch through the smaller phone display. */
  .tile.merge-soft{
    animation-duration:190ms !important;
  }

  .tile.reward-result{
    box-shadow:
      inset 0 4px 0 rgba(255,255,255,.72),
      inset 0 -7px 11px rgba(0,0,0,.13),
      0 0 13px rgba(255,255,255,.75),
      0 0 28px rgba(58,232,255,.55),
      0 0 42px rgba(255,62,202,.40) !important;
  }

  /* Stronger mobile bloom / ring visibility. */
  .candy-bloom{
    opacity:1;
    filter:none !important;
  }

  .mega-aura{
    box-shadow:
      0 0 17px rgba(255,255,255,.42),
      0 0 30px rgba(255,68,207,.25) !important;
  }

  .radial-candy-burst{
    filter:drop-shadow(0 0 5px rgba(255,255,255,.32)) !important;
  }

  .candy-confetti{
    font-size:10px !important;
    text-shadow:
      0 0 5px rgba(255,255,255,.85),
      0 0 9px rgba(255,63,200,.34) !important;
  }

  /* Clear, short-lived phone-sized light burst for every real merge. */
  .mobile-reward-flash{
    display:block;
    position:absolute;
    z-index:14;
    pointer-events:none;
    width:var(--mobile-flash-size);
    height:var(--mobile-flash-size);
    transform:translate(-50%,-50%) scale(.12);
    opacity:0;
    border-radius:50%;
    background:
      radial-gradient(circle,
        rgba(255,255,255,.95) 0%,
        rgba(255,248,151,.68) 10%,
        rgba(64,237,255,.28) 28%,
        rgba(255,64,202,.20) 47%,
        transparent 70%);
    mix-blend-mode:screen;
  }

  .mobile-reward-flash.mega{
    background:
      radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(255,251,173,.88) 10%,
        rgba(60,240,255,.42) 27%,
        rgba(255,63,203,.36) 45%,
        rgba(139,80,255,.18) 59%,
        transparent 73%);
  }

  .mobile-reward-flash.show{
    animation:v28MobileFlash .34s cubic-bezier(.12,.78,.18,1) forwards;
  }

  .mobile-reward-flash.mega.show{
    animation-duration:.46s;
  }

  @keyframes v28MobileFlash{
    0%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.12);
    }
    17%{opacity:1}
    62%{
      opacity:.66;
      transform:translate(-50%,-50%) scale(1);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(1.18);
    }
  }

  /* Chain text needs more presence on a phone-sized display. */
  .combo-flash{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.15),
      0 0 22px rgba(52,234,255,.38),
      0 0 36px rgba(255,65,204,.34),
      0 9px 22px rgba(0,0,0,.42) !important;
  }

  /* Turbo FLOW should remain vivid on iOS too. */
  .heat-track[data-state="fire"],
  .heat-track[data-state="blaze"]{
    filter:saturate(1.12) brightness(1.04);
  }

  .heat-bar[data-state="blaze"]{
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.94),
      inset 0 -3px 5px rgba(0,0,0,.08),
      0 0 18px rgba(64,246,255,.82),
      0 0 34px rgba(165,71,255,.58),
      0 0 46px rgba(255,56,181,.40) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-reward-flash{
    display:none !important;
  }
}


/* JUH1MERGE.V29b — Hold / Aim / Release input */
.board{
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  overscroll-behavior:contain;
}

.board.is-aiming{cursor:grabbing;}

.launcher-tile.aiming{
  transform:translateY(-3px) scale(1.09) !important;
  filter:brightness(1.18) saturate(1.12) !important;
  box-shadow:
    0 7px 17px rgba(0,0,0,.28),
    0 0 12px rgba(255,255,255,.32),
    0 0 24px rgba(58,236,255,.34),
    0 0 36px rgba(181,77,255,.20) !important;
  transition:left 48ms linear,transform 85ms ease,filter 85ms ease !important;
  will-change:left,transform;
}

.board.is-aiming .drop-guide{
  opacity:.95 !important;
  filter:
    brightness(1.22)
    drop-shadow(0 0 8px rgba(67,235,255,.48))
    drop-shadow(0 0 14px rgba(181,77,255,.24)) !important;
}


/* ==========================================================
   JUH1MERGE.V33 — Premium Candy Reward preview
   Coherent tactile feedback layered over the existing effects.
   ========================================================== */

/* Premium candy bodies: more dimensional, still clean enough for small text. */
.tile{
  border-radius:clamp(10px,2.2vw,15px) !important;
  border-color:rgba(255,255,255,.64) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.20),
    0 2px 4px rgba(26,8,48,.30),
    0 0 12px rgba(255,255,255,.14);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.55),
    inset 0 -9px 15px rgba(25,5,50,.20),
    inset 7px 0 12px rgba(255,255,255,.09),
    0 3px 0 rgba(12,5,30,.25),
    0 8px 14px rgba(4,2,15,.30),
    0 0 13px rgba(255,255,255,.10) !important;
}

.tile::after{
  left:10% !important;
  top:7% !important;
  width:62% !important;
  height:25% !important;
  opacity:.88 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.30) 54%,transparent) !important;
  filter:blur(.2px) drop-shadow(0 1px 1px rgba(255,255,255,.22)) !important;
}

.grid-cell{
  border-radius:clamp(9px,2vw,13px) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.027),rgba(255,255,255,.005)) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}

.launcher-tile{
  border-radius:clamp(11px,2.2vw,15px) !important;
  border:2px solid rgba(255,255,255,.62) !important;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.52),
    inset 0 -8px 13px rgba(15,3,36,.18),
    0 6px 0 rgba(10,4,28,.18),
    0 13px 25px rgba(0,0,0,.28),
    0 0 22px rgba(255,255,255,.16) !important;
}

/* Landing: localized sugar wave plus a tiny physical board compression. */
.drop-impact-v33{
  position:absolute;z-index:13;pointer-events:none;
  width:var(--drop-impact-size);height:var(--drop-impact-size);
  border-radius:50%;opacity:0;
  transform:translate(-50%,-50%) scale(.18);
  border:2px solid rgba(255,255,255,.92);
  background:radial-gradient(circle,rgba(255,255,255,.46),rgba(75,231,255,.20) 28%,rgba(255,65,203,.13) 48%,transparent 68%);
  box-shadow:0 0 18px rgba(78,232,255,.42),inset 0 0 16px rgba(255,255,255,.30);
  mix-blend-mode:screen
}
.drop-impact-v33.overflow{border-color:#fff1a1;box-shadow:0 0 22px rgba(255,224,94,.52),0 0 34px rgba(255,67,202,.30)}
.drop-impact-v33.show{animation:v33DropWave .36s cubic-bezier(.12,.78,.18,1) forwards}
@keyframes v33DropWave{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  18%{opacity:1}
  72%{opacity:.48;transform:translate(-50%,-50%) scale(.92)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.16)}
}
.board.drop-thump-v33{animation:v33BoardThump .22s cubic-bezier(.18,.86,.2,1)}
@keyframes v33BoardThump{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(1.5px) scale(1.002,.997)}
  68%{transform:translateY(-.5px) scale(.999,1.001)}
  100%{transform:translateY(0) scale(1)}
}

/* A short inhale before absorption makes the result feel earned, not random. */
.merge-charge-v33{
  position:absolute;z-index:12;pointer-events:none;
  width:var(--charge-size);height:var(--charge-size);border-radius:50%;
  transform:translate(-50%,-50%) scale(.62);opacity:0;
  border:2px solid rgba(255,255,255,.78);
  background:radial-gradient(circle,rgba(255,255,255,.38),rgba(255,235,113,.12) 26%,rgba(59,236,255,.12) 48%,transparent 70%);
  box-shadow:0 0 18px rgba(255,255,255,.42),0 0 30px rgba(73,232,255,.24),inset 0 0 16px rgba(255,255,255,.24)
}
.merge-charge-v33.show{animation:v33Charge .19s cubic-bezier(.22,.8,.2,1) forwards}
@keyframes v33Charge{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}
  40%{opacity:.92}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.28);filter:brightness(1.8)}
}
.board.merge-charging-v33 .tile:not(.merge-source):not(.merge-anchor){filter:saturate(.88) brightness(.93)}
.tile.merge-source{animation:v33CandyAbsorb 118ms cubic-bezier(.2,.76,.18,1) forwards !important}
.tile.merge-anchor{animation:v33CandyCharge 118ms cubic-bezier(.16,.84,.18,1) forwards !important}
@keyframes v33CandyAbsorb{
  0%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1) saturate(1)}
  42%{transform:translate(calc(var(--merge-dx,0px)*.28),calc(var(--merge-dy,0px)*.28)) scale(.93);opacity:1;filter:brightness(1.22) saturate(1.16)}
  100%{transform:translate(var(--merge-dx,0px),var(--merge-dy,0px)) scale(.34);opacity:.05;filter:brightness(2.2) saturate(1.32)}
}
@keyframes v33CandyCharge{
  0%{transform:scale(1);filter:brightness(1)}
  46%{transform:scale(1.10,.96);filter:brightness(1.32) saturate(1.18)}
  100%{transform:scale(.84);filter:brightness(1.92) saturate(1.32)}
}

/* The result gets a juicy overshoot with a clean premium settle. */
.tile.merge-soft{
  z-index:18 !important;
  animation:v33ResultBirth .28s cubic-bezier(.12,.84,.18,1.13) both !important
}
@keyframes v33ResultBirth{
  0%{transform:scale(.38) rotate(-2deg);opacity:.10;filter:brightness(2.65) saturate(1.45)}
  35%{transform:scale(1.24,.92) rotate(1deg);opacity:1;filter:brightness(1.68) saturate(1.34)}
  58%{transform:scale(.96,1.08);filter:brightness(1.22) saturate(1.16)}
  78%{transform:scale(1.045,.985)}
  100%{transform:scale(1);opacity:1;filter:brightness(1) saturate(1)}
}
.tile.reward-result{
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.76),
    inset 0 -9px 15px rgba(12,2,34,.16),
    0 3px 0 rgba(10,3,28,.18),
    0 0 13px rgba(255,255,255,.88),
    0 0 30px rgba(58,235,255,.56),
    0 0 48px rgba(255,61,203,.38) !important
}

/* Merge release: one coherent orbit and a bounded handful of candy gems. */
.reward-orbit-v33{
  position:absolute;z-index:17;pointer-events:none;
  width:var(--orbit-size);height:var(--orbit-size);border-radius:50%;
  transform:translate(-50%,-50%) scale(.18) rotate(-18deg);opacity:0;
  border:3px solid rgba(255,255,255,.90);
  box-shadow:0 0 12px rgba(255,255,255,.76),0 0 26px rgba(49,237,255,.46),inset 0 0 18px rgba(255,65,204,.20);
  mix-blend-mode:screen
}
.reward-orbit-v33::before,.reward-orbit-v33::after{
  content:"";position:absolute;border-radius:50%;inset:9%;
  border:2px dashed rgba(255,236,121,.74);transform:rotate(26deg)
}
.reward-orbit-v33::after{inset:-14%;border-color:rgba(255,72,207,.44);transform:rotate(-31deg)}
.reward-orbit-v33.show{animation:v33OrbitRelease .50s cubic-bezier(.10,.76,.18,1) forwards}
.reward-orbit-v33.chain.show{animation-duration:.62s}
@keyframes v33OrbitRelease{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.16) rotate(-18deg)}
  18%{opacity:1}
  62%{opacity:.72;transform:translate(-50%,-50%) scale(1) rotate(24deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.30) rotate(52deg)}
}
.reward-gem-v33{
  position:absolute;z-index:19;pointer-events:none;display:block;
  width:8px;height:11px;border-radius:60% 40% 55% 45%;
  transform:translate(-50%,-50%) scale(.25);opacity:0;
  background:linear-gradient(145deg,#fff 0%,hsl(var(--gem-hue) 100% 72%) 36%,hsl(var(--gem-hue) 92% 52%) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 0 8px hsl(var(--gem-hue) 100% 65%);
  animation:v33GemPop .58s cubic-bezier(.12,.72,.16,1) var(--gem-delay) forwards
}
@keyframes v33GemPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  18%{opacity:1}
  76%{opacity:.90}
  100%{opacity:0;transform:translate(calc(-50% + var(--gem-x)),calc(-50% + var(--gem-y))) scale(.78) rotate(var(--gem-rot))}
}

.board.reward-beat-v33{animation:v33RewardBeat .30s cubic-bezier(.12,.84,.18,1)}
@keyframes v33RewardBeat{
  0%{filter:brightness(1) saturate(1)}
  24%{filter:brightness(1.10) saturate(1.11)}
  100%{filter:brightness(1) saturate(1)}
}
.board.chain-rush-v33{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -25px 55px rgba(0,0,0,.16),
    0 18px 44px rgba(0,0,0,.42),
    0 0 26px rgba(46,236,255,.28),
    0 0 52px rgba(255,59,204,.18) !important
}

.score-pop.reward-score-v33{
  z-index:42 !important;
  padding:.25em .52em .30em;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(208,252,255,.94) 45%,rgba(255,228,248,.94));
  color:#291345 !important;
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 5px 18px rgba(0,0,0,.28),0 0 18px rgba(54,235,255,.36),0 0 28px rgba(255,62,202,.22);
  text-shadow:0 1px 0 white !important;
  animation:v33ScoreRise .72s cubic-bezier(.12,.78,.18,1) forwards !important
}
.score-pop.reward-score-v33.multi{font-size:clamp(.98rem,3vw,1.34rem)}
.score-pop.reward-score-v33.chain{background:linear-gradient(135deg,#fffbd0,#fff 38%,#ffd8f4);box-shadow:0 6px 20px rgba(0,0,0,.30),0 0 22px rgba(255,229,93,.44),0 0 34px rgba(255,62,202,.30)}
@keyframes v33ScoreRise{
  0%{opacity:0;transform:translate(-50%,-36%) scale(.48)}
  18%{opacity:1;transform:translate(-50%,-64%) scale(1.15)}
  62%{opacity:1;transform:translate(-50%,-118%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-168%) scale(.92)}
}

@media (max-width:700px), (pointer:coarse){
  .tile{border-width:1.5px !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.52),inset 0 -7px 12px rgba(20,3,42,.18),0 3px 0 rgba(8,3,24,.18),0 6px 11px rgba(0,0,0,.25),0 0 8px rgba(255,255,255,.08) !important}
  .tile.merge-source,.tile.merge-anchor{filter:brightness(1.25) saturate(1.10) !important}
  .tile.merge-soft{animation-duration:.25s !important}
  .reward-gem-v33{width:6px;height:9px}
  .reward-orbit-v33{border-width:2px}
  .board.reward-beat-v33{animation-duration:.25s}
}

@media (prefers-reduced-motion:reduce){
  .drop-impact-v33,.merge-charge-v33,.reward-orbit-v33,.reward-gem-v33{display:none !important}
  .board.drop-thump-v33,.board.reward-beat-v33{animation:none !important}
  .board.merge-charging-v33 .tile{filter:none !important}
  .tile.merge-source,.tile.merge-anchor,.tile.merge-soft{animation-duration:1ms !important}
  .score-pop.reward-score-v33{animation:scoreRiseV18 .01ms linear forwards !important}
}


/* V34 final cascade layer: keep this last so legacy version overrides cannot
   dilute the preview's signature motion or iPhone-specific performance path. */
.tile{
  border-radius:17px !important;
  border:2px solid rgba(255,255,255,.82) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.22),0 2px 5px rgba(20,4,42,.34),0 0 13px rgba(255,255,255,.16) !important;
  box-shadow:inset 0 5px 0 rgba(255,255,255,.67),inset 0 -11px 17px rgba(20,3,45,.24),inset 8px 0 14px rgba(255,255,255,.11),0 4px 0 rgba(8,2,27,.30),0 10px 17px rgba(2,1,12,.34),0 0 17px rgba(255,255,255,.14) !important
}
.tile::after{
  left:10% !important;top:7% !important;width:62% !important;height:25% !important;
  opacity:1 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.38) 52%,transparent 100%) !important
}
.tile.merge-source{animation:v34CandyAbsorb 155ms cubic-bezier(.10,.78,.14,1) forwards !important}
.tile.merge-anchor{animation:v34CandyCharge 155ms cubic-bezier(.10,.82,.16,1) forwards !important}
.tile.merge-soft{animation:v34ResultBirth .36s cubic-bezier(.08,.80,.14,1.16) both !important;z-index:18 !important}
.tile.reward-result{
  box-shadow:inset 0 5px 0 rgba(255,255,255,.80),inset 0 -10px 16px rgba(12,2,34,.18),0 4px 0 rgba(8,2,25,.22),0 0 16px rgba(255,255,255,.96),0 0 36px rgba(58,235,255,.68),0 0 58px rgba(255,61,203,.46) !important
}
.combo-flash.show{
  animation:v34Praise .78s cubic-bezier(.10,.78,.16,1) forwards !important;
  padding:.42em .78em .48em !important;border:2px solid rgba(255,255,255,.82) !important;
  background:linear-gradient(135deg,rgba(255,250,176,.96),rgba(255,255,255,.97) 42%,rgba(255,211,242,.96)) !important;
  color:#321447 !important;text-shadow:0 1px 0 white,0 0 12px rgba(255,255,255,.8) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.38),0 0 26px rgba(255,229,91,.48),0 0 46px rgba(255,62,202,.34) !important
}

@media (max-width:700px), (pointer:coarse){
  body{padding:max(14px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important}
  .tile{border-radius:12px !important;border-width:2px !important;box-shadow:inset 0 4px 0 rgba(255,255,255,.62),inset 0 -8px 13px rgba(20,3,42,.20),0 3px 0 rgba(8,3,24,.22),0 7px 12px rgba(0,0,0,.28),0 0 10px rgba(255,255,255,.10) !important}
  .tile.merge-source{animation:v34CandyAbsorb 145ms cubic-bezier(.10,.78,.14,1) forwards !important;filter:none !important}
  .tile.merge-anchor{animation:v34CandyCharge 145ms cubic-bezier(.10,.82,.16,1) forwards !important;filter:none !important}
  .tile.merge-soft{animation:v34ResultBirth .32s cubic-bezier(.08,.80,.14,1.16) both !important}
  .board.merge-charging-v33 .tile:not(.merge-source):not(.merge-anchor){opacity:.78 !important;filter:none !important}
  .board.reward-beat-v33{animation:v34MobileRewardBeat .34s cubic-bezier(.12,.8,.18,1) !important}
  .reward-core-v34{mix-blend-mode:normal !important;filter:none !important}
  .reward-rays-v34,.reward-orbit-v33{mix-blend-mode:normal !important;filter:none !important}
  .combo-flash.show{animation:v34Praise .70s cubic-bezier(.10,.78,.16,1) forwards !important}
}

@media (prefers-reduced-motion:reduce){
  .reward-core-v34,.reward-rays-v34,.drop-impact-v33,.merge-charge-v33,.reward-orbit-v33,.reward-gem-v33{display:none !important}
  .board.drop-thump-v33,.board.reward-beat-v33{animation:none !important}
  .board.merge-charging-v33 .tile{opacity:1 !important;filter:none !important}
  .tile.merge-source,.tile.merge-anchor,.tile.merge-soft{animation-duration:1ms !important}
  .combo-flash.show{animation:combo .01ms linear forwards !important}
}