:root{
  --bg1:#0b0e2a;
  --bg2:#1c1450;
  --glass: rgba(255,255,255,0.06);
  --glass-brd: rgba(255,255,255,0.12);
  --text:#f1f2ff;
  --muted:#9092c4;
  --gold:#ffcf4d;
  --pink:#ff5da2;
  --danger:#ff4d5e;
  --good:#3ee6a8;
  --tier-accent:#3ee6a8;
  --ad-slot-height:50px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 15% 0%, #2a1f70 0%, transparent 45%),
    radial-gradient(circle at 100% 20%, #6a1f6e 0%, transparent 40%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 14px;
  /* Reserves space above the fixed #adSlot bar so nothing sits underneath it. */
  padding-bottom:calc(6px + var(--ad-slot-height));
}
body.shake{animation:shake 0.35s;}

/* Fixed strip reserved for a future banner ad — empty for now, but always
   present so wiring in a real ad later doesn't shift the whole layout. */
#adSlot{
  position:fixed;left:0;right:0;bottom:0;
  height:var(--ad-slot-height);
  background:var(--bg2);
  border-top:1px solid var(--glass-brd);
  z-index:5;
}
@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-5px);}
  40%,60%{transform:translateX(5px);}
}

.bg-fx{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  opacity:1;transition:opacity .4s ease;
}
body.is-playing .bg-fx{opacity:0;}
.bg-fx span{
  position:absolute;bottom:0;border-radius:50%;filter:blur(1px);
  animation-name:drift;animation-timing-function:linear;animation-iteration-count:infinite;
}
.bg-fx span:nth-child(1){left:4%;width:10px;height:10px;background:#ff4757;opacity:.35;animation-duration:18s;animation-delay:-2s;}
.bg-fx span:nth-child(2){left:12%;width:14px;height:14px;background:#ff9f1a;opacity:.3;animation-duration:22s;animation-delay:-9s;}
.bg-fx span:nth-child(3){left:22%;width:8px;height:8px;background:#ffe66d;opacity:.45;animation-duration:16s;animation-delay:-4s;}
.bg-fx span:nth-child(4){left:33%;width:16px;height:16px;background:#7bed9f;opacity:.25;animation-duration:26s;animation-delay:-14s;}
.bg-fx span:nth-child(5){left:44%;width:6px;height:6px;background:#12d6b3;opacity:.5;animation-duration:14s;animation-delay:-6s;}
.bg-fx span:nth-child(6){left:55%;width:18px;height:18px;background:#18dcff;opacity:.25;animation-duration:24s;animation-delay:-11s;}
.bg-fx span:nth-child(7){left:65%;width:11px;height:11px;background:#3a86ff;opacity:.35;animation-duration:19s;animation-delay:-3s;}
.bg-fx span:nth-child(8){left:75%;width:9px;height:9px;background:#8c5cff;opacity:.4;animation-duration:17s;animation-delay:-8s;}
.bg-fx span:nth-child(9){left:86%;width:13px;height:13px;background:#e64dff;opacity:.3;animation-duration:21s;animation-delay:-13s;}
.bg-fx span:nth-child(10){left:94%;width:7px;height:7px;background:#ff4da6;opacity:.45;animation-duration:15s;animation-delay:-5s;}
@keyframes drift{from{transform:translateY(110vh);}to{transform:translateY(-120vh);}}

body.is-playing .level-picker,
body.is-playing .level-hint{
  opacity:.35;pointer-events:none;
}

.top-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;margin-bottom:4px;}
.icon-btns{display:flex;gap:8px;align-items:center;}
.currency-pill{
  display:flex;align-items:center;gap:4px;height:36px;padding:0 12px;
  border-radius:18px;border:1px solid var(--glass-brd);background:var(--glass);
  backdrop-filter:blur(10px);font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;
  font-weight:700;font-size:13px;color:var(--gold);white-space:nowrap;
}
.icon-btn{
  width:36px;height:36px;padding:0;flex:none;
  border-radius:50%;border:1px solid var(--glass-brd);
  background:var(--glass);color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  backdrop-filter:blur(10px);
}
@media (max-width:400px){
  .icon-btns{gap:5px;}
  .icon-btn{width:30px;height:30px;font-size:14px;}
  .currency-pill{height:30px;padding:0 8px;font-size:11.5px;gap:3px;}
  .logo-mark{width:28px;}
  h1{font-size:21px;}
}

.daily-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;max-width:420px;margin-bottom:7px;
  background:linear-gradient(135deg, rgba(255,207,77,0.18), rgba(255,93,162,0.14));
  border:1px solid var(--glass-brd);border-radius:14px;padding:7px 12px;
  font-size:12px;line-height:1.4;
}
.daily-banner button{
  flex:none;padding:8px 14px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--gold),#ff9d4d);color:#3a1e00;
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;
  font-weight:700;font-size:12px;cursor:pointer;
}

.title-row{display:flex;align-items:center;gap:10px;margin-bottom:2px;}
.logo-mark{position:relative;width:34px;height:22px;flex:none;}
.logo-mark span{
  position:absolute;top:2px;width:18px;height:18px;border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.7);
  animation:logo-bob 2.4s ease-in-out infinite;
}
.logo-mark span:nth-child(1){
  left:0;background:radial-gradient(circle at 30% 24%, #ffffff 0%, #ffffff 10%, var(--good) 48%, var(--good) 78%, rgba(0,0,0,0.25) 100%);
  animation-delay:0s;
}
.logo-mark span:nth-child(2){
  left:8px;background:radial-gradient(circle at 30% 24%, #ffffff 0%, #ffffff 10%, var(--gold) 48%, var(--gold) 78%, rgba(0,0,0,0.25) 100%);
  animation-delay:.3s;z-index:2;
}
.logo-mark span:nth-child(3){
  left:16px;background:radial-gradient(circle at 30% 24%, #ffffff 0%, #ffffff 10%, var(--pink) 48%, var(--pink) 78%, rgba(0,0,0,0.25) 100%);
  animation-delay:.6s;
}
@keyframes logo-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
h1{
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;
  font-size:26px;
  font-weight:700;
  margin:0;
  letter-spacing:0.3px;
  background:linear-gradient(120deg,var(--gold),var(--pink) 45%,var(--good) 90%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:title-shimmer 5s linear infinite;
}
@keyframes title-shimmer{to{background-position:200% center;}}
.sub{color:var(--muted);font-size:12.5px;margin:4px 0 14px;text-align:center;max-width:340px;line-height:1.4;}
.sub b{color:var(--pink);}

.mode-row{
  display:flex;gap:8px;width:100%;max-width:420px;margin:0 0 7px;
}
.endless-card{
  display:block;flex:1;min-width:0;max-height:60px;
  padding:8px 10px;border-radius:14px;border:1px solid var(--glass-brd);
  background:linear-gradient(135deg, rgba(140,92,255,0.22), rgba(230,77,255,0.16));
  color:var(--text);text-align:center;
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-weight:700;font-size:13.5px;
  cursor:pointer;transition:filter .1s, transform .05s, opacity .3s ease, max-height .3s ease;
}
.endless-card:active{transform:scale(0.98);}
.endless-card span{color:var(--gold);}
body.is-playing .endless-card{opacity:.35;pointer-events:none;}
.puzzle-card{
  background:linear-gradient(135deg, rgba(58,134,255,0.26), rgba(168,85,247,0.2));
}
/* Puzzle Zen owns --tier-accent while it's active (PUZZLE_ZEN_ACCENT), so
   the card lights up in the same color the board glow and Time readout
   already take — Zen reads as its own mode, not a Puzzle level. */
body[data-mode="zen"] #endlessBtn{
  background:linear-gradient(135deg, rgba(45,212,191,0.3), rgba(58,134,255,0.18));
  border-color:var(--tier-accent);
  box-shadow:0 0 14px rgba(45,212,191,0.35);
}

.level-picker{
  display:flex;flex-direction:row;align-items:stretch;gap:8px;margin-bottom:5px;
  width:100%;max-width:420px;max-height:600px;min-height:64px;flex:none;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  padding:2px 2px 4px;
  transition:opacity .3s ease, max-height .3s ease;
}
.level-picker::-webkit-scrollbar{height:5px;}
.level-picker::-webkit-scrollbar-track{background:transparent;}
.level-picker::-webkit-scrollbar-thumb{background:var(--glass-brd);border-radius:3px;}
.level-btn{
  position:relative;flex:0 0 52px;scroll-snap-align:start;
  padding:5px 5px;border-radius:10px;border:1px solid var(--glass-brd);
  background:var(--glass);color:var(--muted);
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-weight:600;font-size:12px;cursor:pointer;
  transition:all 0.15s;
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1;
}
.level-btn.active{
  background:linear-gradient(135deg,var(--tier-accent),var(--gold));
  color:#141018;border-color:transparent;
  box-shadow:0 0 14px var(--tier-accent);
}
.level-btn.locked{opacity:0.45;}
.level-btn.locked::after{
  content:'🔒';position:absolute;top:-4px;right:-4px;
  font-size:9px;background:var(--bg2);border-radius:50%;
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-brd);
}
.level-btn.ad-gated::after{
  content:'📺';position:absolute;top:-4px;right:-4px;
  font-size:9px;background:var(--bg2);border-radius:50%;
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-brd);
}
.level-btn:disabled{cursor:default;}
.lvl-stars{font-size:8px;letter-spacing:-1px;}
/* The active tile's gold/tier-accent gradient background is close enough
   in hue to the filled-star ⭐ emoji's own color that it nearly disappears
   into it — a drop-shadow gives it just enough edge definition to read. */
.level-btn.active .lvl-stars{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.55));}
.level-hint{font-size:11.5px;color:var(--muted);margin-bottom:5px;text-align:center;line-height:1.4;max-height:100px;transition:opacity .3s ease, max-height .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.level-hint b{color:var(--gold);}

.hud{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  width:100%;
  max-width:420px;
  margin-bottom:5px;
}
.hud.hud4{grid-template-columns:repeat(4,1fr);}
.stat.timer .v{color:var(--tier-accent);}
.stat{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px);
  border-radius:14px;
  padding:5px 6px;
  text-align:center;
}
.stat .v{font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-size:17px;font-weight:700;}
.stat .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;margin-top:2px;}
.stat.combo .v{color:var(--pink);}

#boardWrap{position:relative;width:100%;max-width:420px;}
#board{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(6px);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px var(--tier-accent);
  touch-action:none;
  transition:box-shadow 0.3s;
}
#board.fever{
  box-shadow:0 0 0 3px var(--gold), 0 0 40px rgba(255,207,77,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:fever-pulse 1.1s ease-in-out infinite;
}
@keyframes fever-pulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.18) saturate(1.15);}}

.ball{
  position:absolute;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;
  font-weight:700;
  color:rgba(10,10,20,0.75);
  cursor:pointer;
  user-select:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.4), inset 0 3px 7px rgba(255,255,255,0.7), inset 0 -6px 10px rgba(0,0,0,0.22);
  animation:pop-in 0.18s cubic-bezier(.34,1.56,.64,1);
  transition: top .28s cubic-bezier(.22,.61,.36,1), left .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes ball-idle{0%,100%{filter:brightness(1);}50%{filter:brightness(1.05);}}
.ball:not(.bomb):not(.rainbow):not(.ice):not(.trap):not(.ultra):not(.stripe):not(.holo){
  animation: pop-in .18s cubic-bezier(.34,1.56,.64,1), ball-idle 2.6s ease-in-out infinite;
}
.ball.bomb{box-shadow:0 4px 14px rgba(255,90,50,0.6), inset 0 3px 6px rgba(255,255,255,0.5);}
.ball.rainbow{box-shadow:0 4px 14px rgba(200,150,255,0.6), inset 0 3px 6px rgba(255,255,255,0.6);}
.ball.ice{box-shadow:0 4px 14px rgba(127,216,255,0.65), inset 0 3px 6px rgba(255,255,255,0.6);}
.ball.trap{box-shadow:0 4px 14px rgba(122,63,191,0.65), inset 0 3px 6px rgba(255,255,255,0.35);}
.ball.stripe{box-shadow:0 4px 14px rgba(255,255,255,0.4), inset 0 3px 6px rgba(255,255,255,0.5);}
/* Puzzle mode tap-tap fallback (see PuzzleGame's swap input) — the first
   tapped ball before its swap partner is chosen. */
.ball.selected{
  box-shadow:0 0 0 3px var(--gold), 0 0 16px rgba(255,207,77,0.7);
  transform:scale(1.08);
  z-index:3;
}
.ball.ultra{box-shadow:0 0 22px rgba(255,214,10,0.75), 0 4px 14px rgba(255,47,176,0.5), inset 0 3px 6px rgba(255,255,255,0.6);animation:pop-in 0.18s cubic-bezier(.34,1.56,.64,1), ultra-pulse 1s ease-in-out infinite;}
@keyframes ultra-pulse{50%{filter:brightness(1.25);}}
#board.frozen{background:linear-gradient(rgba(127,216,255,0.14), rgba(127,216,255,0.14)), var(--glass);}
#board.frozen::after{
  content:'🧊 Freeze';
  position:absolute;top:8px;right:12px;
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-size:11px;color:#7fd8ff;
  text-shadow:0 2px 4px rgba(0,0,0,0.5);pointer-events:none;
}
.ball:active{transform:scale(0.82);}
.ball.dying{animation:pop-out 0.22s ease-in forwards;}
@keyframes pop-in{from{transform:scale(0.15);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes pop-out{to{transform:scale(0.05);opacity:0;}}

/* Retro Arcade skin — chunky flat look instead of the glossy shine, applied
   to every ball kind (including bomb/rainbow/ice/trap/ultra) so boosters
   don't visually clash with the rest of the flat board. */
body[data-skin="retro"] .ball:not(.selected){
  border:3px solid #1a1a2e;
  box-shadow:0 3px 0 rgba(0,0,0,0.4);
}

/* Prism (premium) skin — the only one that visibly animates at idle: a slow
   hue-shift over the ball's own gradient gives it a holographic shimmer. */
.ball.holo:not(.dying){ animation: pop-in .18s cubic-bezier(.34,1.56,.64,1), holo-shift 2.6s linear infinite; }
@keyframes holo-shift{0%{filter:hue-rotate(0deg) saturate(1.3);}100%{filter:hue-rotate(360deg) saturate(1.3);}}

.ring{position:absolute;border-radius:50%;border:3px solid;pointer-events:none;animation:ring-expand 0.5s ease-out forwards;}
@keyframes ring-expand{from{transform:scale(0.3);opacity:0.9;}to{transform:scale(2.2);opacity:0;}}

.particle{position:absolute;border-radius:50%;pointer-events:none;z-index:5;}

.combo-float{
  position:absolute;font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-weight:700;color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,0.5);pointer-events:none;
  animation:combo-float 0.7s ease-out forwards;white-space:nowrap;
}
@keyframes combo-float{
  0%{transform:translateY(0) scale(0.7);opacity:0;}
  15%{transform:translateY(-6px) scale(1.15);opacity:1;}
  100%{transform:translateY(-38px) scale(1);opacity:0;}
}

.overlay{
  position:absolute;inset:0;background:rgba(11,14,42,0.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  text-align:center;padding:24px;z-index:10;
  opacity:0;pointer-events:none;transform:scale(.95);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.overlay.show{opacity:1;pointer-events:auto;transform:scale(1);}
.overlay h2{font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;margin:0;font-size:24px;}
.overlay .win{color:var(--good);}
.overlay .lose{color:var(--danger);}
.overlay .warn{color:var(--gold);}
.overlay p{color:var(--muted);margin:0 0 6px;font-size:13px;}
/* Briefly non-interactive after appearing, so a level-complete overlay
   can't be tapped through by reflex before the player has read it. */
#overlayBtns.arming button{opacity:.35;pointer-events:none;}
#overlayBtns button{transition:opacity .2s ease;}

.controls{
  width:100%;max-width:420px;margin-top:9px;
  background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px);
  border-radius:18px;padding:8px;
}
.btn-row{display:flex;gap:8px;}
.btn-row button{padding:10px 8px;font-size:12.5px;}
button{
  flex:1;padding:12px 8px;border-radius:12px;border:none;
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-weight:600;font-size:13.5px;cursor:pointer;
  transition:filter 0.1s, transform 0.05s;
}
button:active{transform:scale(0.96);}
.btn-start{background:linear-gradient(135deg,var(--good),#1fb583);color:#04241a;}
.btn-stop{background:linear-gradient(135deg,var(--danger),#c8323f);color:#2a0407;}
.btn-pause{background:rgba(255,255,255,0.08);color:var(--text);border:1px solid var(--glass-brd);}
button:disabled{opacity:0.3;cursor:default;}

.speed-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px;}
.speed-label b{color:var(--text);}
input[type=range]{width:100%;accent-color:var(--pink);}

.legend-list{display:flex;flex-direction:column;gap:2px;}
.legend-item{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);font-size:13px;color:var(--text);
}
.legend-item:last-child{border-bottom:none;}
.legend-icon{font-size:20px;width:28px;text-align:center;flex:none;}

/* --- Settings / Achievements modals --- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(5,6,20,0.72);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
  opacity:0;pointer-events:none;transform:scale(.95);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-backdrop.show{opacity:1;pointer-events:auto;transform:scale(1);}
.modal-card{
  background:linear-gradient(160deg, #1c1450, #12103a);
  border:1px solid var(--glass-brd);border-radius:20px;padding:20px;
  width:100%;max-width:360px;max-height:80vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-card h2{
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;
  margin:0 0 14px;font-size:20px;
}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.08);font-size:14px;
}
.toggle-row:last-of-type{border-bottom:none;}

.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .slider{position:absolute;inset:0;cursor:pointer;background:rgba(255,255,255,0.15);border-radius:24px;transition:0.2s;}
.switch .slider:before{
  content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:0.2s;
}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--good),#1fb583);}
.switch input:checked + .slider:before{transform:translateX(18px);}

.ad-countdown{font-size:48px;font-weight:800;text-align:center;margin:16px 0;color:var(--gold);font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;}

.speed-choice{display:flex;gap:6px;}
.speed-btn{
  flex:1;padding:9px 6px;border-radius:10px;border:1px solid var(--glass-brd);
  background:var(--glass);color:var(--muted);
  font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;font-weight:600;font-size:12.5px;
  cursor:pointer;transition:all 0.15s;
}
.speed-btn.active{
  background:linear-gradient(135deg,var(--good),#1fb583);color:#04241a;border-color:transparent;
  box-shadow:0 0 14px rgba(62,230,168,0.55);font-weight:700;
}

.daily-card{text-align:center;}
.gift-box{
  font-size:56px;line-height:1;text-align:center;margin:6px 0 10px;
  animation: gift-idle 1.8s ease-in-out infinite;
}
@keyframes gift-idle{0%,100%{transform:rotate(0);}25%{transform:rotate(-6deg);}75%{transform:rotate(6deg);}}
.gift-box.opened{animation: gift-open .5s ease forwards;}
@keyframes gift-open{
  0%{transform:scale(1) rotate(0);}
  20%{transform:scale(1) rotate(-10deg);}
  40%{transform:scale(1) rotate(10deg);}
  60%{transform:scale(1) rotate(-6deg);}
  75%{transform:scale(1.3) rotate(0);}
  100%{transform:scale(1) rotate(0);}
}

.challenges-divider{
  font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  margin:14px 0 4px;text-align:left;font-weight:700;
}
.challenge-item{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);text-align:left;
}
.challenge-item:last-child{border-bottom:none;}
.challenge-item.done{opacity:.55;}
.challenge-icon{font-size:18px;width:26px;text-align:center;flex:none;}
.challenge-info{flex:1;min-width:0;}
.challenge-desc{font-size:12.5px;font-weight:600;}
.challenge-bar{height:5px;border-radius:3px;background:rgba(255,255,255,0.1);margin-top:5px;overflow:hidden;}
.challenge-bar-fill{height:100%;background:linear-gradient(90deg,var(--good),var(--gold));border-radius:3px;transition:width .3s ease;}
.challenge-reward{font-size:11px;color:var(--muted);flex:none;white-space:nowrap;}

.shop-item{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.shop-item:last-child{border-bottom:none;}
.shop-item .btn-pause{flex:none;padding:8px 14px;font-size:12px;}
.shop-swatch{display:flex;flex:none;}
.shop-swatch span{width:14px;height:14px;border-radius:50%;margin-left:-5px;border:1px solid rgba(0,0,0,0.3);}
.shop-swatch span:first-child{margin-left:0;}
.shop-info{flex:1;min-width:0;}
.shop-name{font-weight:700;font-size:13.5px;}
.shop-price{font-size:11px;color:var(--muted);margin-top:1px;}
.shop-item-premium{
  background:linear-gradient(90deg, rgba(255,214,10,0.1), rgba(255,47,176,0.08));
  border-radius:10px;margin:2px 0;padding-left:6px;padding-right:6px;
}
.premium-tag{filter:drop-shadow(0 0 3px rgba(255,214,10,0.7));}
.premium-badge{
  font-size:15px;margin-left:-4px;filter:drop-shadow(0 0 3px rgba(255,214,10,0.8));
  animation: ball-idle 2.6s ease-in-out infinite;
}

.ach-item{
  display:flex;gap:10px;align-items:center;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);opacity:0.45;
}
.ach-item:last-child{border-bottom:none;}
.ach-item.unlocked{opacity:1;}
.ach-icon{font-size:22px;width:32px;text-align:center;flex:none;}
.ach-name{font-weight:700;font-size:13.5px;}
.ach-desc{font-size:11px;color:var(--muted);margin-top:1px;}

.ach-toast{
  position:fixed;top:14px;left:50%;
  transform:translateX(-50%) translateY(-160%);
  background:linear-gradient(135deg,#2a1f70,#6a1f6e);
  border:1px solid var(--gold);border-radius:14px;
  padding:10px 18px;text-align:center;font-size:12.5px;line-height:1.4;
  z-index:200;box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transition:transform 0.35s ease;pointer-events:none;max-width:88vw;
}
.ach-toast.show{transform:translateX(-50%) translateY(0);}
.ach-toast b{color:var(--gold);font-family:'Fredoka','Segoe UI Rounded','Nunito',system-ui,sans-serif;}