:root {
  --bg1: #ffeef7;
  --bg2: #f3e8ff;
  --bg3: #e6f6ff;
  --card: rgba(255, 255, 255, 0.78);
  --ink: #5b2a86;
  --muted: #9a7fc0;
  --pink: #ff4d8d;
  --pink-light: #ff7eb3;
  --purple: #b56bff;
  --cyan: #2ee8d8;
  --yellow: #ffd166;
  --text: #5b2a86;
  --font: 'Nunito', system-ui, sans-serif;
  --display: 'Fredoka', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--text);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(160deg, var(--bg1), var(--bg2), var(--bg3), var(--bg1));
  background-size: 300% 300%;
  animation: bgShift 18s ease infinite;
}
@keyframes bgShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#app { min-height: 100%; position: relative; }
.screen { display: none; min-height: 100vh; position: relative; }
.screen.active { display: block; animation: screenIn 0.45s cubic-bezier(.34,1.56,.64,1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ===== Cute low-opacity floating background icons (NOS, Mascot, Match Candies) ===== */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-icon {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.20;
  filter: drop-shadow(0 6px 14px rgba(181,107,255,0.14));
  will-change: transform;
}

/* NOS point icons (mint candy) */
.bg-nos { background-image: url('../assets/candy-mint.png'); }
.bg-nos.n1 { top: 8%; left: 7%; width: 38px; height: 38px; animation: bgFloatCuteA 16s ease-in-out infinite; }
.bg-nos.n2 { bottom: 22%; left: 10%; width: 34px; height: 34px; animation: bgFloatCuteB 19s ease-in-out infinite -7s; }

/* Snosky Mascot token icons */
.bg-snosky { background-image: url('../assets/snosky-mascot.png?v=transparent-1'); }
.bg-snosky.s1 { top: 16%; right: 8%; width: 44px; height: 44px; animation: bgFloatCuteB 17s ease-in-out infinite -3s; }
.bg-snosky.s2 { bottom: 12%; right: 12%; width: 42px; height: 42px; animation: bgFloatCuteA 21s ease-in-out infinite -11s; }

/* Match candy icons */
.bg-candy.c-pink   { background-image: url('../assets/candy-pink.png');   top: 38%; left: 5%;  width: 32px; height: 38px; animation: bgFloatCuteA 15s ease-in-out infinite -5s; }
.bg-candy.c-orange { background-image: url('../assets/candy-orange.png'); top: 52%; right: 7%; width: 34px; height: 40px; animation: bgFloatCuteB 18s ease-in-out infinite -2s; }
.bg-candy.c-grape  { background-image: url('../assets/candy-grape.png');  top: 24%; left: 22%; width: 28px; height: 34px; animation: bgFloatCuteB 22s ease-in-out infinite -9s; opacity: 0.16; }
.bg-candy.c-bean   { background-image: url('../assets/candy-bean.png');   bottom: 30%; right: 24%; width: 28px; height: 34px; animation: bgFloatCuteA 20s ease-in-out infinite -13s; opacity: 0.16; }

/* Backward compatibility for .float-candy if used anywhere */
.float-candy {
  position: absolute;
  width: 44px; height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.22;
  filter: drop-shadow(0 6px 14px rgba(91,42,134,0.12));
  animation: bgFloatCuteA 16s ease-in-out infinite;
}
.float-candy.c1 { background-image: url('../assets/candy-bean.png');   top: 10%; left: 6%;  animation-duration: 16s; }
.float-candy.c2 { background-image: url('../assets/candy-mint.png');   top: 24%; right: 8%; animation-duration: 14s; animation-delay: -3s; }
.float-candy.c3 { background-image: url('../assets/candy-grape.png');  bottom: 24%; left: 12%; animation-duration: 18s; animation-delay: -6s; }
.float-candy.c4 { background-image: url('../assets/candy-orange.png'); top: 52%; right: 14%; animation-duration: 13s; animation-delay: -2s; }
.float-candy.c5 { background-image: url('../assets/candy-pink.png');   bottom: 10%; right: 6%; animation-duration: 15s; animation-delay: -8s; }
.float-candy.c6 { background-image: url('../assets/candy-bean.png');   top: 68%; left: 38%; animation-duration: 17s; animation-delay: -4s; }

/* Keep the board responsive on small CPUs and integrated GPUs. */
.low-power-mode body { animation: none; background: linear-gradient(160deg, var(--bg1), var(--bg2), var(--bg3)); }
.low-power-mode .bg-icon,
.low-power-mode .float-candy,
.low-power-mode .twinkle { animation: none; filter: none; }
.low-power-mode .screen.active { animation-duration: .18s; }
.low-power-mode #phaser-container::before { filter: none; }
.low-power-mode #phaser-container .snosky-special-overlay { animation: none !important; filter: none !important; mix-blend-mode: normal; }
.low-power-mode .candy-burst::before,
.low-power-mode .candy-burst i,
.low-power-mode .special-beam { filter: none; box-shadow: none; }
.low-power-mode .candy-burst i { width: 5px; height: 7px; }

@keyframes bgFloatCuteA {
  0%   { transform: translate(0, 0) rotate(-4deg) scale(1); }
  33%  { transform: translate(14px, -18px) rotate(4deg) scale(1.05); }
  66%  { transform: translate(-10px, -30px) rotate(-2deg) scale(0.97); }
  100% { transform: translate(0, 0) rotate(-4deg) scale(1); }
}

@keyframes bgFloatCuteB {
  0%   { transform: translate(0, 0) rotate(5deg) scale(1); }
  33%  { transform: translate(-16px, -22px) rotate(-3deg) scale(1.04); }
  66%  { transform: translate(12px, -34px) rotate(3deg) scale(0.96); }
  100% { transform: translate(0, 0) rotate(5deg) scale(1); }
}

/* Soft twinkling stars */
.twinkle {
  position: absolute;
  color: #cca4fa;
  font-size: 1.15rem;
  opacity: 0.35;
  animation: twinkleSoft 3.2s ease-in-out infinite;
  pointer-events: none;
}
.twinkle.tw1, .twinkle.s1 { top: 14%; left: 32%; }
.twinkle.tw2, .twinkle.s2 { top: 36%; right: 22%; animation-delay: -1.2s; font-size: 0.95rem; }
.twinkle.tw3, .twinkle.s3 { bottom: 28%; left: 26%; animation-delay: -2s; font-size: 0.85rem; }
.twinkle.tw4, .twinkle.s4 { bottom: 15%; right: 30%; animation-delay: -2.7s; }

@keyframes twinkleSoft {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50%      { opacity: 0.55; transform: scale(1.15); }
}

/* ===== Cute Low-Opacity Moving Candy Clouds at Top ===== */
.candy-clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.candy-cloud {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.candy-cloud svg {
  width: 100%;
  height: 100%;
  display: block;
}

.candy-cloud.cloud-1 {
  width: 180px;
  height: 80px;
  top: 8px;
  opacity: 0.38;
  filter: drop-shadow(0 6px 16px rgba(181, 107, 255, 0.12));
  animation: cloudDriftSlowA 52s linear infinite;
}

.candy-cloud.cloud-2 {
  width: 150px;
  height: 70px;
  top: 26px;
  opacity: 0.30;
  filter: drop-shadow(0 6px 14px rgba(255, 77, 141, 0.10));
  animation: cloudDriftSlowB 62s linear infinite -26s;
}

.candy-cloud.cloud-3 {
  width: 130px;
  height: 60px;
  top: 14px;
  opacity: 0.26;
  filter: drop-shadow(0 4px 12px rgba(91, 42, 134, 0.08));
  animation: cloudDriftSlowC 70s linear infinite -12s;
}

@keyframes cloudDriftSlowA {
  0%   { transform: translateX(-220px); }
  100% { transform: translateX(calc(100vw + 220px)); }
}

@keyframes cloudDriftSlowB {
  0%   { transform: translateX(-180px); }
  100% { transform: translateX(calc(100vw + 180px)); }
}

@keyframes cloudDriftSlowC {
  0%   { transform: translateX(-160px); }
  100% { transform: translateX(calc(100vw + 160px)); }
}

/* ===== Gentle Background Candy Rain (Very Low Opacity) ===== */
.candy-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.rain-candy {
  position: absolute;
  top: -30px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(91, 42, 134, 0.08));
}

.rain-candy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Rain candy tracks & staggered timing */
.rain-candy.r1 { left: 9%;  width: 15px; height: 15px; animation: candyRainFall 13s linear infinite 0s; }
.rain-candy.r2 { left: 23%; width: 17px; height: 17px; animation: candyRainFall 15s linear infinite -4.5s; }
.rain-candy.r3 { left: 37%; width: 14px; height: 14px; animation: candyRainFall 12s linear infinite -8s; }
.rain-candy.r4 { left: 51%; width: 16px; height: 16px; animation: candyRainFall 16s linear infinite -2s; }
.rain-candy.r5 { left: 65%; width: 17px; height: 17px; animation: candyRainFall 14s linear infinite -9.5s; }
.rain-candy.r6 { left: 77%; width: 15px; height: 15px; animation: candyRainFall 13s linear infinite -6s; }
.rain-candy.r7 { left: 88%; width: 16px; height: 16px; animation: candyRainFall 17s linear infinite -12s; }
.rain-candy.r8 { left: 96%; width: 14px; height: 14px; animation: candyRainFall 15s linear infinite -3.5s; }

@keyframes candyRainFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.15;
  }
  85% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) rotate(280deg);
    opacity: 0;
  }
}

/* ===== Candy Scenery: 2 Cute Trees with Candy as Fruit ===== */
.candy-scenery {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.candy-tree {
  position: absolute;
  bottom: 0;
  width: 220px;
  height: 308px;
  will-change: transform;
  filter: drop-shadow(0 10px 22px rgba(91, 42, 134, 0.16));
}

.candy-tree.tree-left {
  left: calc(50% - 460px);
  transform-origin: 50% 95%;
  animation: treeSwayL 8s ease-in-out infinite;
}

.candy-tree.tree-right {
  right: calc(50% - 460px);
  transform-origin: 50% 95%;
  animation: treeSwayR 9s ease-in-out infinite -4s;
}

.tree-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Candy fruit styling */
.tree-fruit {
  position: absolute;
  width: 32px;
  height: 36px;
  transform-origin: 50% 0%;
  animation: candyFruitSway 3.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(91, 42, 134, 0.22));
}

.tree-fruit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Left tree fruit positions */
.fruit-l1 { left: 19%; top: 51%; animation-delay: -0.4s; }
.fruit-l2 { left: 50%; top: 54%; animation-delay: -1.8s; width: 34px; height: 38px; }
.fruit-l3 { left: 74%; top: 50%; animation-delay: -2.9s; }

/* Right tree fruit positions */
.fruit-r1 { left: 19%; top: 50%; animation-delay: -1.2s; }
.fruit-r2 { left: 44%; top: 54%; animation-delay: -2.4s; width: 34px; height: 38px; }
.fruit-r3 { left: 74%; top: 51%; animation-delay: -0.7s; }

/* Tree sway keyframes */
@keyframes treeSwayL {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.4deg) translateY(-2px); }
}

@keyframes treeSwayR {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-1.4deg) translateY(-2px); }
}

/* Fruit pendulum sway */
@keyframes candyFruitSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .candy-tree {
    width: 170px;
    height: 238px;
  }
  .candy-tree.tree-left  { left: -10px; }
  .candy-tree.tree-right { right: -10px; }
  .tree-fruit { width: 26px; height: 30px; }
  .fruit-l2, .fruit-r2 { width: 28px; height: 32px; }
}

@media (max-width: 640px) {
  .candy-tree {
    width: 125px;
    height: 175px;
    opacity: 0.92;
  }
  .candy-tree.tree-left  { left: -28px; bottom: 0; }
  .candy-tree.tree-right { right: -28px; bottom: 0; }
  .tree-fruit { width: 20px; height: 24px; }
  .fruit-l2, .fruit-r2 { width: 22px; height: 26px; }
}

/* Low power mode support */
.low-power-mode .candy-tree,
.low-power-mode .tree-fruit,
.low-power-mode .candy-clouds,
.low-power-mode .candy-rain,
.low-power-mode .rain-candy {
  animation: none !important;
  filter: none !important;
  display: none !important;
}

/* ===== Header ===== */
.home-header {
  position: relative; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1.1rem;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 6px 24px rgba(181,107,255,0.14);
}
.logo-wrap { display: flex; align-items: center; }
.logo-img {
  height: 52px;
  width: 52px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(91,42,134,0.25));
  animation: logoWiggle 4s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes logoWiggle {
  0%,100% { transform: rotate(-2.5deg) translateY(0); }
  50% { transform: rotate(2.5deg) translateY(-3px); }
}

.currency { display: flex; gap: 0.5rem; }
.pill {
  display: flex; align-items: center; gap: 0.3rem;
  background: #ffffff;
  border: 2px solid #f0dcff;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  font-weight: 800; font-size: 0.95rem;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(181,107,255,0.18);
  animation: pillBob 3s ease-in-out infinite;
}
.token-trigger { font: inherit; cursor: pointer; }
.token-trigger:hover { transform: translateY(-2px) scale(1.04); }
.token-trigger img { width: 24px; height: 24px; object-fit: contain; border-radius: 0; }
.pill:nth-child(2) { animation-delay: -1.5s; }
@keyframes pillBob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ===== Home body ===== */
.home-body {
  position: relative; z-index: 5;
  max-width: 420px; margin: 0 auto;
  padding: 1.25rem 1.25rem 3rem;
  text-align: center;
}
.hero-anim { margin: 0.25rem auto 0.5rem; display: flex; justify-content: center; }
.hero-logo {
  height: 210px;
  border-radius: 30px;
  transform: rotate(-3deg);
  box-shadow: 0 18px 40px rgba(181,107,255,0.35), 0 4px 10px rgba(255,77,141,0.2);
  animation: heroFloat 4.5s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}

.title {
  font-family: var(--display);
  font-size: 2rem; font-weight: 700;
  margin-bottom: 0.4rem;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--pink));
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: titleShimmer 4s linear infinite;
}
@keyframes titleShimmer {
  to { background-position: 200% 0; }
}
.subtitle { color: var(--muted); font-size: 1rem; font-weight: 700; margin-bottom: 1.5rem; }

.main-card {
  background: var(--card);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 30px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(181,107,255,0.22);
  backdrop-filter: blur(10px);
  animation: cardPulse 4s ease-in-out infinite;
}
@keyframes cardPulse {
  0%,100% { box-shadow: 0 20px 50px rgba(181,107,255,0.22); }
  50% { box-shadow: 0 24px 60px rgba(255,77,141,0.28); }
}

.level-row { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 1.4rem; }
.lvl-info { text-align: center; }
.lvl-info .label { display: block; font-size: 0.7rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.lvl-info .num {
  font-family: var(--display); font-size: 1.9rem; font-weight: 700;
  background: linear-gradient(180deg, var(--pink), var(--purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.divider { width: 2px; height: 38px; background: #ecd9ff; border-radius: 2px; }

/* ===== Buttons ===== */
.play-btn {
  position: relative; overflow: hidden;
  width: 100%; padding: 1.05rem;
  border: none; border-radius: 22px;
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--pink-light), var(--pink) 45%, var(--purple));
  box-shadow: 0 10px 26px rgba(255,77,141,0.45), inset 0 2px 0 rgba(255,255,255,0.5);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s;
  animation: btnBreathe 2.6s ease-in-out infinite;
}
@keyframes btnBreathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.play-btn:hover { transform: scale(1.05) rotate(-0.5deg); box-shadow: 0 14px 34px rgba(255,77,141,0.55), inset 0 2px 0 rgba(255,255,255,0.5); }
.play-btn:active { transform: scale(0.96); }
.play-btn.small { width: auto; padding: 0.8rem 1.6rem; font-size: 1rem; animation: none; }

.btn-shine {
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine {
  0% { left: -80%; }
  55%,100% { left: 130%; }
}

.secondary-btn {
  width: 100%; margin-top: 0.7rem;
  padding: 0.9rem;
  border: 2px solid #e5c8ff;
  border-radius: 20px;
  background: #ffffff;
  color: var(--purple);
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(181,107,255,0.15);
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), background 0.15s;
}
.secondary-btn:hover { transform: scale(1.03); background: #faf3ff; }
.secondary-btn:active { transform: scale(0.97); }

/* ===== Game screen ===== */
.game-top {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(255,255,255,0.85);
}
.icon-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  border: 2px solid #e5c8ff; border-radius: 14px;
  background: #fff; color: var(--purple);
  font-size: 1.2rem; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(181,107,255,0.2);
  transition: transform 0.15s;
}
.icon-btn:hover { transform: scale(1.1) rotate(-4deg); }
.icon-btn:active { transform: scale(0.94); }

.objective-box {
  flex: 1; min-width: 0;
  background: #fff;
  border: 2px solid #f0dcff;
  border-radius: 16px;
  padding: 0.4rem 0.75rem;
  box-shadow: 0 4px 12px rgba(181,107,255,0.14);
}
.obj-title { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.obj-text { font-family: var(--display); font-weight: 600; font-size: 0.86rem; line-height: 1.2; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.obj-bar { height: 7px; background: #f3e6ff; border-radius: 99px; margin-top: 4px; overflow: hidden; }
.obj-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pink-light), var(--purple));
  border-radius: 99px;
  transition: width 0.4s cubic-bezier(.34,1.56,.64,1);
}
.candy-lock-badge { place-items:center; border:2px solid #fff; border-radius:50%; background:linear-gradient(145deg,#8551bc,#492d72); box-shadow:0 2px 8px rgba(35,18,55,.55); line-height:1; }
.candy-lock-badge.cracked { background:linear-gradient(145deg,#f2a53a,#b94d56); box-shadow:0 0 9px rgba(255,180,69,.8); }
.candy-lock-badge.cracked::after { content:""; position:absolute; width:2px; height:75%; background:#fff; transform:rotate(28deg); box-shadow:0 0 2px #432; }
.collector-pot { position:absolute; z-index:600; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:.35em; overflow:hidden; border:3px solid #b66c35; border-radius:10px 10px 20px 20px; background:linear-gradient(180deg,#ffe4a7,#d98642); color:#542b48; font:900 10px var(--font); box-shadow:inset 0 4px 0 rgba(255,255,255,.5),0 4px 12px rgba(64,39,42,.28); }
.collector-pot::before { content:""; position:absolute; inset:0 0 auto; height:20%; background:rgba(255,255,255,.36); }
.collector-pot img { position:relative; z-index:1; object-fit:contain; }
.collector-pot span,.collector-pot b { position:relative; z-index:1; white-space:nowrap; }

.hud-right { display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0; }
.hud-item {
  background: #fff; border: 2px solid #f0dcff;
  border-radius: 16px; padding: 0.3rem 0.7rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(181,107,255,0.14);
}
.hud-item small { display: block; font-size: 0.56rem; font-weight: 800; color: var(--muted); letter-spacing: 0.08em; }
.hud-item b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }

#phaser-container { display: flex; justify-content: center; padding: 0.8rem 0 2rem; position: relative; z-index: 5; }


/* Game board: keep the playfield visually stable. Candy movement happens only
   during actual game actions, never as an idle background animation. */
#game #phaser-container {
  overscroll-behavior: contain;
}

.combo-display {
  position: fixed; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--display); font-weight: 700; font-size: 2.6rem;
  pointer-events: none; opacity: 0; z-index: 60;
  background: linear-gradient(180deg, var(--yellow), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 18px rgba(255,77,141,0.4));
}
.combo-display.pop { animation: comboPop 0.9s cubic-bezier(.34,1.56,.64,1); }
@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-8deg); }
  35% { opacity: 1; transform: translate(-50%,-50%) scale(1.25) rotate(3deg); }
  60% { transform: translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-70%) scale(0.85); }
}

/* ===== Modals ===== */
.modal {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(91,42,134,0.35);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 1.25rem;
}
.modal.active { display: flex; }
.modal-panel {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: 84vh; overflow-y: auto;
  background: rgba(255,255,255,0.94);
  border: 2px solid #ffffff;
  border-radius: 30px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(91,42,134,0.4);
  animation: modalPop 0.5s cubic-bezier(.34,1.56,.64,1);
  overflow-x: hidden;
}
@keyframes modalPop {
  from { transform: scale(0.6) translateY(60px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-panel h2 { font-family: var(--display); font-size: 1.6rem; margin-bottom: 0.3rem; }
.modal-panel p { color: var(--muted); font-weight: 700; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-header h3 { font-family: var(--display); font-size: 1.25rem; }
.close-btn {
  width: 36px; height: 36px;
  border: none; border-radius: 12px;
  background: #f6e8ff; color: var(--purple);
  font-size: 1.3rem; font-weight: 800; cursor: pointer;
  transition: transform 0.15s;
}
.close-btn:hover { transform: scale(1.12) rotate(90deg); }

.win-logo {
  height: 130px; width: 130px; object-fit: contain; border-radius: 0; border: 0; background: transparent;
  transform: rotate(-3deg);
  box-shadow: 0 14px 34px rgba(181,107,255,0.35);
  animation: heroFloat 3.5s ease-in-out infinite;
  margin-bottom: 0.6rem;
}
.fail-candy { height: 90px; animation: heroFloat 3s ease-in-out infinite; margin-bottom: 0.4rem; }

.star-row {
  font-size: 2.2rem; letter-spacing: 0.15em;
  color: var(--yellow);
  text-shadow: 0 2px 0 #fff, 0 6px 16px rgba(255,209,102,0.6);
  margin: 0.4rem 0 0.8rem;
}
.star-row span { display: inline-block; animation: starPop 0.55s cubic-bezier(.34,1.56,.64,1) backwards; }
.star-row span:nth-child(1) { animation-delay: 0.15s; }
.star-row span:nth-child(2) { animation-delay: 0.35s; }
.star-row span:nth-child(3) { animation-delay: 0.55s; }
@keyframes starPop {
  from { transform: scale(0) rotate(-120deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.reward-row { display: flex; justify-content: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.reward {
  display: flex; align-items: center; gap: 0.35rem;
  background: #f6e8ff; border: 2px solid #ecd4ff;
  padding: 0.45rem 1rem; border-radius: 999px;
  font-family: var(--display); font-size: 1.05rem; color: var(--purple);
  animation: pillBob 2.4s ease-in-out infinite;
}
.reward:nth-child(2) { animation-delay: -1.2s; }
.btn-row { display: flex; gap: 0.7rem; }
.btn-row .secondary-btn { margin-top: 0; }

/* confetti */
.confetti {
  position: absolute; top: -12px;
  pointer-events: none; z-index: 5;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(460px) rotate(540deg); opacity: 0; }
}

/* ===== Level select ===== */
.levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem;
  scrollbar-width: thin;
}
.lvl-btn {
  aspect-ratio: 1;
  border: 2px solid #ecd4ff;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(181,107,255,0.12);
  transition: transform 0.12s cubic-bezier(.34,1.56,.64,1), background 0.12s;
}
.lvl-btn:hover:not(.locked) { transform: scale(1.12) rotate(-3deg); background: #f6e8ff; }
.lvl-btn:active:not(.locked) { transform: scale(0.94); }
.lvl-btn.done {
  background: linear-gradient(135deg, var(--pink-light), var(--purple));
  color: #fff; border-color: transparent;
}
.lvl-btn.locked { opacity: 0.35; cursor: not-allowed; background: #f6f0fb; }

/* screen shake for misses is handled by Phaser; add wiggle utility */
@media (max-width: 380px) {
  .hero-logo { height: 180px; }
  .title { font-size: 1.7rem; }
  
/* Game board: keep the playfield visually stable. Candy movement happens only
   during actual game actions, never as an idle background animation. */
#game #phaser-container {
  overscroll-behavior: contain;
}

.combo-display { font-size: 2rem; }
}

/* ===== Responsive mobile-first game layout ===== */
#game.screen.active {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.game-top { flex: 0 0 auto; }
#phaser-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 2px 2px max(4px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#phaser-container canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  touch-action: none;
  image-rendering: auto;
}
@media (max-width: 600px) {
  .game-top { gap: 0.35rem; padding: 0.3rem 0.45rem; }
  .icon-btn { width: 38px; height: 38px; border-radius: 12px; }
  .objective-box { padding: 0.3rem 0.45rem; border-radius: 12px; }
  .obj-title { display: none; }
  .obj-text { font-size: 0.78rem; }
  .hud-right { gap: 0.25rem; }
  .hud-item { padding: 0.22rem 0.4rem; border-radius: 12px; }
  .hud-item small { font-size: 0.48rem; }
  .hud-item b { font-size: 0.95rem; }
}
@media (max-height: 620px) {
  .game-top { padding-top: 0.3rem; padding-bottom: 0.3rem; }
}


/* ===== Candy factory game backdrop ===== */
#game { overflow: hidden; background: linear-gradient(180deg, #fff5fb 0%, #f7efff 52%, #eaf8ff 100%); }
.game-actions { display:flex; align-items:center; gap:.4rem; flex-shrink:0; min-width:0; }
.game-wallet-button { min-height:34px; max-width:116px; padding:.42rem .65rem; border:2px solid rgba(255,255,255,.9); border-radius:999px; background:rgba(91,42,134,.9); color:#fff; font:900 .68rem var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 5px 16px rgba(91,42,134,.2); cursor:pointer; }
.game-wallet-button:hover { background:var(--pink); transform:translateY(-1px); }
@media (max-width:600px) {
  .game-actions { gap:.25rem; }
  .game-wallet-button { min-height:31px; max-width:92px; padding:.35rem .48rem; font-size:.58rem; }
}
.booster-item { position:relative; flex:0 0 auto; padding-right:6px; }
.booster-item .booster-btn { width:100%; }
.booster-buy { position:absolute; top:-5px; right:-1px; width:21px; height:21px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:var(--pink); color:#fff; font:900 .95rem/1 var(--font); cursor:pointer; box-shadow:0 3px 8px rgba(255,77,141,.3); z-index:2; }
.booster-buy:hover { background:var(--purple); transform:scale(1.1); }
.factory-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; }
.factory-bg::before {
  content:""; position:absolute; left:-10%; right:-10%; bottom:0; height:27%;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.9) 0 8px, transparent 9px),
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.8) 0 7px, transparent 8px),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(211,184,238,.35));
  border-top:2px solid rgba(181,107,255,.18);
}
.factory-bg::after {
  content:""; position:absolute; left:4%; right:4%; bottom:7%; height:14%;
  border-radius:28px; background:rgba(255,255,255,.52);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 12px 30px rgba(112,76,145,.10);
}
.factory-pipe { position:absolute; width:18px; border:7px solid #cfa5f4; border-bottom:0; border-radius:18px 18px 0 0; opacity:.7; }
.pipe-a { left:7%; top:7%; height:30%; box-shadow:10px 0 0 #f8c2dc; }
.pipe-b { right:8%; top:13%; height:25%; border-color:#9de7e0; transform:scaleX(-1); }
.factory-tank { position:absolute; width:72px; height:92px; border-radius:18px 18px 24px 24px; background:linear-gradient(180deg,#fff,#f4e3ff); border:3px solid rgba(181,107,255,.3); box-shadow:0 8px 20px rgba(91,42,134,.12); display:grid; place-items:center; font-size:2rem; opacity:.72; }
.factory-tank::before { content:""; position:absolute; width:34px; height:9px; top:-10px; border-radius:8px; background:#d9b5f7; border:2px solid rgba(181,107,255,.25); }
.tank-a { left:3%; top:45%; }
.tank-b { right:3%; top:52%; }
.factory-window { position:absolute; top:17%; left:50%; transform:translateX(-50%); width:120px; height:74px; border-radius:50%; border:7px solid rgba(255,255,255,.82); background:linear-gradient(145deg,rgba(255,179,219,.28),rgba(120,224,219,.25)); box-shadow:0 8px 25px rgba(91,42,134,.08), inset 0 0 20px rgba(255,255,255,.65); display:flex; justify-content:space-around; align-items:center; color:#fff; font-size:1.4rem; }
.factory-belt { position:absolute; left:12%; right:12%; bottom:3%; height:28px; border-radius:18px; background:#c9b0df; border:4px solid rgba(255,255,255,.8); display:flex; justify-content:space-around; align-items:center; color:#fff; font-size:.65rem; opacity:.55; }

/* ===== Larger but breathable board ===== */
#phaser-container { padding: .35rem 0 1.25rem; z-index:5; }
#phaser-container canvas { display:block; }

@media (max-width:700px) {
  .game-top { padding:.5rem .55rem; gap:.4rem; }
  .objective-box { padding:.32rem .55rem; }
  .obj-text { font-size:.82rem; }
  .hud-item { padding:.26rem .5rem; }
  .hud-right { gap:.3rem; }
}

/* Browser-rendered candy layer: keeps the original high-resolution PNGs as crisp
   as the homepage artwork instead of resampling them through the Phaser canvas. */
#phaser-container .crisp-candy-layer { z-index: 20; }
#phaser-container .crisp-candy {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#phaser-container canvas { z-index: 1; position: relative; }


/* ===== Organic Snosky board: no square box ===== */
#phaser-container {
  position: relative;
  isolation: isolate;
}
#phaser-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 94%;
  transform: translate(-50%, -50%);
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.28), rgba(255,255,255,.04) 54%, transparent 72%),
    radial-gradient(circle at 18% 18%, rgba(255,225,112,.22), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(72,180,74,.18), transparent 32%);
  filter: blur(1px) drop-shadow(0 16px 22px rgba(34,105,38,.18));
}
#phaser-container canvas { border-radius: 0 !important; }

/* Powered candy = fiery energy, never a square badge. */
#phaser-container .snosky-special-overlay {
  pointer-events: none;
  transform-origin: center center;
  mix-blend-mode: screen;
  filter: none;
}
@keyframes snoskyFirePulse {
  0%   { opacity: .62; }
  100% { opacity: 1; }
}
@keyframes snoskyColorBomb {
  0% { opacity: .72; transform: scale(.88) rotate(-8deg); filter: drop-shadow(0 0 5px #ff70c8); }
  100% { opacity: 1; transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 14px #ffe45e); }
}

#phaser-container .snosky-fx-layer { overflow: visible; }
.candy-burst, .special-beam {
  position: absolute;
  pointer-events: none;
  z-index: 500;
}
.candy-burst {
  width: var(--burst-size);
  height: var(--burst-size);
  transform: translate(-50%, -50%);
  animation: candyBurstCore 520ms ease-out both;
}
.candy-burst::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid var(--burst-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--burst-color);
  animation: candyBurstRing 520ms ease-out both;
}
.candy-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 9px;
  border-radius: 3px;
  background: var(--burst-color);
  box-shadow: 0 0 5px var(--burst-color);
  animation: candySpark 520ms cubic-bezier(.12,.72,.25,1) both;
}
.super-burst::before { border-width: 3px; }
.super-burst i { width: 8px; height: 12px; }
.special-beam {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 35%, #fff4a6 50%, rgba(255,255,255,.9) 65%, transparent);
  filter: drop-shadow(0 0 8px #ffc83d);
  transform: translate(-50%, -50%) scaleX(.12);
  transform-origin: center;
  animation: specialBeam 520ms ease-out both;
}
.special-beam.vertical {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.95) 35%, #fff4a6 50%, rgba(255,255,255,.9) 65%, transparent);
  transform: translate(-50%, -50%) scaleY(.12);
  animation-name: specialBeamVertical;
}
.special-chain-ray {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ray-length);
  height: 5px;
  border-radius: 99px;
  pointer-events: none;
  z-index: 505;
  transform-origin: left center;
  transform: translateY(-50%) rotate(var(--ray-angle)) scaleX(.02);
  background: linear-gradient(90deg, transparent, #fff 12%, var(--ray-color) 48%, #fff 78%, transparent);
  box-shadow: 0 0 5px #fff, 0 0 13px var(--ray-color), 0 0 24px var(--ray-color);
  animation: specialChainRay 620ms cubic-bezier(.16,.8,.2,1) both;
}
@keyframes candyBurstCore {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.45); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}
@keyframes candyBurstRing {
  0% { opacity: 1; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes candySpark {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(.1); }
}
@keyframes specialBeam {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.12); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); }
}
@keyframes specialBeamVertical {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.12); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleY(1); }
}
@keyframes specialChainRay {
  0% { opacity: 0; transform: translateY(-50%) rotate(var(--ray-angle)) scaleX(.02); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: translateY(-50%) rotate(var(--ray-angle)) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) rotate(var(--ray-angle)) scaleX(1.04); }
}
.candy-score-pop, .candy-heart-pop {
  position: absolute;
  z-index: 510;
  pointer-events: none;
  white-space: nowrap;
  font-family: "Fredoka", var(--display), sans-serif;
  font-weight: 700;
  transform: translate(-50%, -50%);
  animation: candyScoreFloat 720ms cubic-bezier(.2,.7,.25,1) both;
}
.candy-score-pop {
  color: #ff3985;
  font-size: clamp(1.35rem, 5vw, 2.5rem);
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 white, 0 5px 14px rgba(255,57,133,.32);
}
.candy-heart-pop { font-size: clamp(1.4rem, 5vw, 2.3rem); }
@keyframes candyScoreFloat {
  0% { opacity: 0; transform: translate(-50%, -25%) scale(.55) rotate(-5deg); }
  24% { opacity: 1; transform: translate(-50%, -60%) scale(1.15) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.9); }
}

/* Give the original PNGs more presence while preserving their proportions. */
#phaser-container .crisp-candy {
  display: block;
  max-width: none !important;
  max-height: none !important;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ===== Green candy garden game atmosphere ===== */
#game {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.7) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 28%, rgba(255,255,255,.55) 0 26px, transparent 27px),
    linear-gradient(180deg, #dff7c9 0%, #c8efb1 45%, #9bd978 100%);
}
#game::before {
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at 8% 84%, rgba(49,125,47,.22) 0 7%, transparent 7.5%),
    radial-gradient(ellipse at 92% 78%, rgba(55,139,54,.20) 0 8%, transparent 8.5%),
    linear-gradient(180deg, transparent 0 72%, rgba(255,255,255,.12) 72% 72.5%, transparent 72.5%);
}
#game .factory-bg { opacity:0; }
#game .factory-bg::before {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.75) 0 8px, transparent 9px),
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.65) 0 7px, transparent 8px),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(74,150,63,.20));
  border-top-color: rgba(74,150,63,.18);
}
#game .factory-pipe, #game .factory-tank, #game .factory-window, #game .factory-belt { filter:saturate(.55); }

/* Delicate board cells: visible enough to align pieces, never visually heavy. */
#phaser-container canvas { border-radius:22px; }
#phaser-container .crisp-candy-layer { overflow:visible; }
#phaser-container .crisp-candy { transform-origin:center center; }

/* ===== Player card, clearer home, and in-game power-ups ===== */
#login.screen.active {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 15%, rgba(255,255,255,.8), transparent 36%), linear-gradient(145deg, #fff0f8, #eee5ff 58%, #e5f8ff);
}
.login-panel {
  width: min(100%, 440px);
  padding: clamp(1.35rem, 5vw, 2.2rem);
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 30px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 24px 70px rgba(91,42,134,.18);
  text-align: center;
  backdrop-filter: blur(14px);
}
.login-mark { font-size: 3.4rem; filter: drop-shadow(0 8px 10px rgba(255,77,141,.22)); }
.eyebrow { margin-top: .35rem; color: var(--pink); font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.login-panel h1 { margin: .25rem 0; color: var(--ink); font: 700 1.8rem var(--display); }
.login-copy, .privacy-note { color: var(--muted); font-size: .88rem; font-weight: 700; line-height: 1.45; }
.profile-form { display: grid; gap: .75rem; margin-top: 1.1rem; text-align: left; }
.profile-form label { display: grid; gap: .32rem; color: var(--ink); font-size: .78rem; font-weight: 900; }
.profile-form input, .profile-form select {
  width: 100%; min-height: 46px; border: 2px solid #ead9fa; border-radius: 13px;
  padding: .65rem .8rem; color: var(--ink); background: #fff; font: 700 .92rem var(--font);
  outline: none;
}
.profile-form input:focus, .profile-form select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(181,107,255,.14); }
.profile-form .play-btn { margin-top: .25rem; }
.form-note { min-height: 1.15rem; color: #a23b62; font-size: .78rem; font-weight: 800; }
.privacy-note { margin-top: .55rem; font-size: .74rem; }
.home-header .currency { align-items: center; }
.player-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: .82rem; font-weight: 900; }
.help-icon {
  width: 38px; height: 38px; border: 2px solid #e5c8ff; border-radius: 50%; background: #fff;
  color: var(--purple); font: 900 1.2rem var(--display); cursor: pointer; box-shadow: 0 4px 10px rgba(181,107,255,.18);
}
.help-icon:hover { transform: scale(1.08); }
.hero-earn { gap: .55rem; margin: .65rem auto 1.1rem; color: var(--ink); font: 900 clamp(1rem, 4.7vw, 1.35rem) var(--display); letter-spacing: .12em; animation: heroFloat 4.5s ease-in-out infinite; }
.hero-earn span { color: var(--pink); text-shadow: 0 2px 10px rgba(255,77,141,.3); }
.wallet-connect,.usdc-buy { min-height:38px; border:0; border-radius:12px; padding:.55rem .8rem; background:linear-gradient(100deg,var(--pink),var(--purple)); color:white; font:900 .76rem var(--font); cursor:pointer; }
.wallet-status { min-height:1.2rem; margin:.7rem 0; color:var(--muted); font-size:.74rem; font-weight:700; overflow-wrap:anywhere; }
.usdc-buy { width:100%; margin-top:.65rem; background:#d9d4df; color:#645b6b; cursor:not-allowed; }
.wallet-footnote { margin:.55rem 0 0; color:var(--muted); font-size:.65rem; line-height:1.4; }
.token-panel { max-width:390px; text-align:center; }
.token-panel .close-btn { position:absolute; top:14px; right:14px; }
.token-mark { width:76px; height:76px; object-fit:cover; border-radius:50%; margin:.4rem auto .6rem; box-shadow:0 8px 20px rgba(45,181,201,.25); }
.token-estimate-line { padding:.8rem; border-radius:15px; background:linear-gradient(110deg,#edfbff,#fbf1ff); color:var(--purple)!important; font:700 1.45rem var(--display); }
.booster-bar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: .55rem; flex: 0 0 auto; padding: .2rem .45rem; }
.booster-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; border: 2px solid #e9d5fb; border-radius: 14px; background: rgba(255,255,255,.94); min-width: 48px; height: 42px; padding: .25rem .5rem; color: var(--ink); font: 800 .8rem var(--font); box-shadow: 0 4px 12px rgba(91,42,134,.1); cursor: pointer; }
.booster-btn > span { font-size: 1.35rem; }
.booster-btn small { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; border: 2px solid #fff; background: var(--pink); color: #fff; font-size: .68rem; }
.booster-btn.armed { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,77,141,.18); transform: translateY(-2px); }
.booster-btn:disabled { opacity: .42; cursor: not-allowed; }
.shop-open-btn { border-color:#ffb3d0; background:linear-gradient(135deg,#fff,#fff0f7); color:#b93170; }
.booster-shop-panel { width:min(100%,560px); max-height:min(90vh,760px); overflow:auto; }
.shop-network { margin:.25rem 0 .7rem; padding:.5rem .7rem; border-radius:10px; background:#fff4dc; color:#805a13; font-size:.75rem; font-weight:900; }
.wallet-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.2rem 0 .65rem; }
.wallet-option { min-height:44px; display:flex; align-items:center; justify-content:center; gap:.45rem; border:2px solid #ead9fa; border-radius:12px; background:#fff; color:var(--ink); font:900 .82rem var(--font); cursor:pointer; }
.wallet-option:hover { border-color:var(--purple); background:#fbf6ff; }
.wallet-option span { font-size:1.1rem; }
.shop-retry { width:100%; margin:.2rem 0 .55rem; padding:.65rem; border:2px solid #f4ae42; border-radius:11px; background:#fff5df; color:#75500d; font:900 .78rem var(--font); cursor:pointer; }
.shop-inventory { margin:.7rem 0; padding:.7rem; border-radius:12px; background:#f7f0ff; color:var(--ink); font-size:.75rem; font-weight:800; line-height:1.6; }
.shop-select-label { display:block; margin:.6rem 0 .3rem; color:var(--ink); font-size:.78rem; font-weight:900; }
.shop-selected-booster { display:flex; align-items:center; gap:.45rem; margin:.7rem 0 .2rem; padding:.7rem .8rem; border:2px solid #ead9fa; border-radius:12px; background:#fff; color:var(--muted); font-size:.76rem; font-weight:800; }
.shop-selected-booster > span:first-child { font-size:1.35rem; }
.shop-selected-booster b { color:var(--ink); font-size:.9rem; }
.shop-packs { display:grid; gap:.65rem; margin:.75rem 0; }
.shop-pack { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; padding:.75rem; border:1px solid #eadcf5; border-radius:14px; background:#fffafd; }
.shop-pack b,.shop-pack span { grid-column:1/-1; color:var(--ink); }
.shop-pack span { color:var(--muted); font-size:.72rem; font-weight:700; }
.shop-pack button { min-height:36px; padding:.45rem; border:0; border-radius:10px; background:linear-gradient(100deg,var(--pink),var(--purple)); color:#fff; font:900 .7rem var(--font); cursor:pointer; }
.shop-pack button:disabled { opacity:.45; cursor:not-allowed; }
.shop-pack .shop-sol { background:linear-gradient(100deg,#7864e8,#4e9be8); }
.shop-note { color:var(--muted); font-size:.68rem; line-height:1.45; }
.booster-hint { color: #fff; font-size: .72rem; font-weight: 900; text-shadow: 0 1px 4px rgba(52,100,39,.6); }
.help-panel { max-width: 500px; text-align: left; }
.rules-list { display: grid; gap: .8rem; margin: .5rem 0 1.2rem; padding-left: 1.25rem; color: var(--ink); line-height: 1.45; }
.rules-list li::marker { color: var(--pink); }
.help-panel > .play-btn { text-align: center; }
.booster-bar { justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.booster-bar::-webkit-scrollbar { display: none; }
.booster-btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .home-header { padding: .55rem; }
  .logo-img { height: 42px; }
  .home-header .currency { gap: .25rem; }
  .player-name { display: none; }
  .pill { padding: .25rem .5rem; font-size: .8rem; }
  .help-icon { width: 34px; height: 34px; }
  .booster-bar { gap: .35rem; }
  .booster-btn { min-width: 43px; height: 39px; padding: .2rem .42rem; font-size: .72rem; }
  .booster-hint { display: none; }
}

/* Simple, consistent wallet controls across the homepage and game. */
.home-wallet-button,
.shop-wallet-connect {
  min-height: 34px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  padding: .42rem .68rem;
  background: rgba(91,42,134,.9);
  color: #fff;
  font: 900 .68rem var(--font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 16px rgba(91,42,134,.16);
  cursor: pointer;
}
.home-wallet-button { max-width: 116px; }
.home-wallet-button:hover,
.shop-wallet-connect:hover { background: var(--pink); transform: translateY(-1px); }
.shop-wallet-connect { display: block; width: 100%; margin: .35rem 0 .25rem; background: linear-gradient(100deg, var(--pink), var(--purple)); }
.shop-status { margin: .45rem 0; text-align: center; }
.booster-shop-panel { width: min(100%, 430px); }
.shop-network { margin-bottom: .45rem; text-align: center; background: #fff5fb; color: #9a4d78; }
.shop-inventory { margin: .55rem 0; padding: .55rem .65rem; text-align: center; font-size: .7rem; }
.shop-selected-booster { margin: .55rem 0 .35rem; padding: .55rem .7rem; }
.shop-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: .55rem 0; }
.shop-pack { grid-template-columns: 1fr; gap: .3rem; padding: .7rem; text-align: center; }
.shop-pack b,
.shop-pack span,
.shop-pack button { grid-column: 1; }
.shop-pack button { min-height: 38px; }
.shop-note { text-align: center; }
@media (max-width: 600px) {
  .home-wallet-button { max-width: 94px; padding: .35rem .48rem; font-size: .58rem; }
  .shop-packs { grid-template-columns: 1fr; }
}

.wallet-chooser-panel { width: min(100%, 360px); text-align: center; }
.wallet-chooser-copy { margin: .2rem 0 .9rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.wallet-phone-guide { display: none; }
.wallet-chooser-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.wallet-chooser-option {
  display: grid; justify-items: center; align-content: center; gap: .22rem; min-height: 120px; padding: .85rem .5rem;
  border: 2px solid #ead9fa; border-radius: 16px; background: #fff; color: var(--ink);
  font-family: var(--font); cursor: pointer; transition: transform .15s, border-color .15s, background .15s;
}
.wallet-chooser-option:hover { border-color: var(--purple); background: #fbf6ff; transform: translateY(-2px); }
.wallet-option-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: .2rem;
}
.walletconnect-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #43b6ff, #4f7cff);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(40,58,160,.25);
}
.metamask-mark {
  display: grid;
  place-items: center;
  background: #fff3e8;
  font-size: 30px;
}

.wallet-network-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: .15rem 0 1rem;
}
.wallet-network-option {
  min-height: 42px;
  border: 2px solid rgba(124,58,237,.14);
  border-radius: 14px;
  background: #fff;
  color: #5b3c75;
  font: 900 .82rem var(--font);
  cursor: pointer;
}
.wallet-network-option.active {
  border-color: #7c3aed;
  background: linear-gradient(135deg,#eef2ff,#fae8ff);
  color: #6025a8;
  box-shadow: 0 4px 14px rgba(124,58,237,.12);
}
@media (max-width: 520px) {
  .wallet-chooser-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-chooser-option:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  .wallet-phone-guide {
    display: grid;
    gap: .25rem;
    margin: 0 0 .8rem;
    padding: .65rem .75rem;
    border: 1px solid #d9c4f3;
    border-radius: 12px;
    background: #faf6ff;
    color: #54336f;
    text-align: left;
    font-size: .72rem;
    line-height: 1.4;
  }
  .wallet-phone-guide strong { font-size: .78rem; }
  .wallet-chooser-panel { max-height: calc(100dvh - 24px); overflow-y: auto; }
}
.wallet-chooser-option b { font-size: .88rem; }
.wallet-chooser-option small { color: var(--muted); font-size: .65rem; font-weight: 700; }
.wallet-chooser-status { min-height: 1.1rem; margin: .75rem 0 0; color: #a23b62; font-size: .75rem; font-weight: 800; overflow-wrap: anywhere; }

/* ===== Login wallet connect shortcut ===== */
.login-wallet-link-wrap {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(181, 107, 255, 0.35);
}
.login-wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid #e5ccff;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
}
.login-wallet-btn:hover {
  background: #fbf6ff;
  border-color: var(--purple);
  transform: translateY(-1px);
}
.mini-wallet-ico {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
  vertical-align: middle;
}

/* ===== Win modal wallet card ===== */
.win-wallet-card {
  margin: .65rem 0 .4rem;
  width: 100%;
}
.win-wallet-saved {
  display: inline-block;
  padding: .4rem .75rem;
  border-radius: 12px;
  background: #e8f9ed;
  color: #1e7e34;
  font-size: .75rem;
  font-weight: 800;
  border: 1px solid #c3e6cb;
}
.win-wallet-prompt-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .7rem;
  background: #fff8fc;
  border: 1.5px solid #fed6ea;
  border-radius: 14px;
  text-align: left;
}
.win-wallet-prompt-box .prompt-text {
  display: flex;
  flex-direction: column;
}
.win-wallet-prompt-box b {
  font-size: .75rem;
  color: var(--ink);
}
.win-wallet-prompt-box small {
  font-size: .65rem;
  color: var(--muted);
  font-weight: 700;
}
.prompt-connect-btn {
  padding: .35rem .75rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--pink), var(--purple));
  color: #fff;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(255, 77, 141, 0.3);
  transition: transform .15s;
}
.prompt-connect-btn:hover {
  transform: scale(1.05);
}

/* ===== Post-level floating alert popup ===== */
.wallet-save-alert {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 380px);
  z-index: 120;
  pointer-events: auto;
}
.wallet-save-alert.slide-up {
  animation: saveAlertSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.wallet-save-alert.slide-down {
  animation: saveAlertSlideDown 0.25s ease-in forwards;
}
@keyframes saveAlertSlideUp {
  from { opacity: 0; transform: translate(-50%, 40px) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes saveAlertSlideDown {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, 30px) scale(0.92); }
}
.save-alert-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #ffdeeb;
  border-radius: 24px;
  padding: 1.1rem 1.1rem .9rem;
  box-shadow: 0 18px 45px rgba(91, 42, 134, 0.35), 0 4px 12px rgba(255, 77, 141, 0.15);
  backdrop-filter: blur(14px);
  text-align: left;
}
.save-alert-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #f6e8ff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-alert-close:hover {
  transform: scale(1.1);
}
.save-alert-top {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.save-alert-icon {
  font-size: 1.8rem;
  line-height: 1;
  animation: iconPulse 2s infinite ease-in-out;
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(6deg); }
}
.save-alert-content {
  flex: 1;
}
.save-alert-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pink);
  background: #ffe8f2;
  padding: .15rem .45rem;
  border-radius: 8px;
  margin-bottom: .25rem;
}
.save-alert-title {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: .2rem;
}
.save-alert-desc {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.35;
}
.save-alert-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.save-alert-connect-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .65rem .8rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pink-light), var(--pink) 45%, var(--purple));
  color: #fff;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 77, 141, 0.35);
  transition: transform .15s;
}
.save-alert-connect-btn:hover {
  transform: scale(1.02);
}
.save-alert-skip-btn {
  padding: .65rem .9rem;
  border: 1px solid #eadcf5;
  border-radius: 14px;
  background: #fbf8fe;
  color: var(--muted);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
}
.save-alert-skip-btn:hover {
  background: #f1e6fa;
  color: var(--ink);
}

/* ===== Toast notification ===== */
.wallet-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -60px);
  background: rgba(91, 42, 134, 0.95);
  color: #fff;
  padding: .6rem 1.1rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 800;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  max-width: 90vw;
  text-align: center;
}
.wallet-toast.active {
  transform: translate(-50%, 0);
  opacity: 1;
}


/* ============================================================
   EARN-RATE PILL  (home screen, below hero)
   ============================================================ */
.earn-rate-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #ffffff;
  border: 2px solid #e1cbf9;
  border-radius: 50px;
  padding: .4rem .95rem .4rem .6rem;
  margin: .55rem auto .25rem;
  box-shadow: 0 4px 16px rgba(181,107,255,.22);
  font-family: var(--display);
}
.earn-rate-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(91,42,134,0.18));
}
.earn-rate-num {
  font-size: .92rem;
  font-weight: 800;
  color: #4a1e73;
}
.earn-rate-gold {
  color: #d97706;
  font-weight: 900;
  font-size: 1.05rem;
  text-shadow: 0 1px 4px rgba(217,119,6,0.22);
}
.earn-rate-arrow {
  font-size: 1rem;
  color: #a855f7;
  font-weight: 900;
  margin: 0 .08rem;
}
.earn-rate-label {
  font-size: .74rem;
  color: #7a50a3;
  font-weight: 700;
}

/* ============================================================
   AIRDROP CTA BUTTON  (home screen)
   ============================================================ */
.airdrop-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: calc(100% - 2rem);
  max-width: 340px;
  margin: 1rem auto 0;
  padding: .88rem 1.4rem;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 60%, #a855f7 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(239,68,68,.45);
  overflow: visible;
  transition: transform .15s, box-shadow .15s;
}
.airdrop-cta-btn:hover,
.airdrop-cta-btn:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 36px rgba(239,68,68,.6);
}
.airdrop-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 26px;
  border: 2.5px solid rgba(251,191,36,.8);
  animation: airdrop-ring 2s ease-out infinite;
  pointer-events: none;
}
@keyframes airdrop-ring {
  0%   { transform: scale(1);    opacity: .9; }
  70%  { transform: scale(1.07); opacity: 0;  }
  100% { transform: scale(1.07); opacity: 0;  }
}

/* ============================================================
   AIRDROP WIZARD MODAL  (.ad-*)
   ============================================================ */
.airdrop-wizard-panel {
  max-width: 380px;
  padding: 1.6rem 1.3rem 1.8rem;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* candy shimmer top strip */
.airdrop-wizard-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444, #a855f7, #3b82f6, #10b981);
  border-radius: 16px 16px 0 0;
}

.ad-close {
  position: absolute;
  top: .8rem;
  right: .9rem;
}

/* Header */
.ad-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}
.ad-mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(168,85,247,.4));
}
.ad-eyebrow {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #f59e0b;
  margin: 0 0 .15rem;
}
.ad-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(90deg, #fbbf24, #f87171);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Step dots */
.ad-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.ad-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e4d3f8;
  cursor: pointer;
  transition: all .25s;
}
.ad-dot.active {
  background: #a855f7;
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(168,85,247,.6);
}
.ad-dot.done {
  background: #10b981;
}

/* Step panels (only .active shown) */
.ad-step {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: adFadeIn .3s ease;
}
.ad-step.active { display: flex; }
@keyframes adFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@media (max-width: 520px), (max-height: 720px) {
  #airdrop-modal {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }
  #airdrop-modal .airdrop-wizard-panel {
    width: min(100%, 440px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    margin: auto 0;
    padding: 1.25rem 1rem 1.2rem;
  }
  #airdrop-modal .ad-nav-row {
    padding-bottom: .15rem;
  }
}

/* Step icon circle */
.ad-step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f8f1ff;
  border: 2px solid #ebd5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: .7rem;
  box-shadow: 0 4px 14px rgba(181,107,255,0.14);
}
.ad-step-icon-x {
  font-size: 1.6rem;
  font-weight: 900;
  background: #000;
  color: #fff;
  border-color: #333;
}

.ad-step-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #4a1e73;
  margin: 0 0 .3rem;
  font-family: var(--display);
}
.ad-step-desc {
  font-size: .84rem;
  color: #7b53a2;
  font-weight: 700;
  margin: 0 0 .9rem;
  max-width: 260px;
}

/* Wallet chip */
.ad-wallet-chip {
  display: inline-block;
  padding: .35rem .95rem;
  border-radius: 30px;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: .75rem;
}
.ad-chip-empty {
  background: #f5f2f8;
  color: #7f748d;
  border: 1.5px dashed #d1c4e0;
}
.ad-chip-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1.5px solid #10b981;
}

/* Navigation rows & Small Arrow Button */
.ad-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  max-width: 280px;
  margin-top: .6rem;
}
.ad-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .68rem 1.4rem;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  color: #ffffff;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168,85,247,0.35);
  transition: all .18s ease;
}
.ad-arrow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168,85,247,0.5);
}
.ad-arrow-btn:active {
  transform: scale(0.98);
}
.ad-arrow-btn .ad-arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  font-size: .78rem;
  transition: transform .18s;
}
.ad-arrow-btn:hover .ad-arrow-icon {
  transform: translateX(3px);
}
.ad-arrow-active {
  animation: pulseArrow 1.4s infinite alternate;
}
@keyframes pulseArrow {
  0% { box-shadow: 0 4px 14px rgba(168,85,247,0.35); }
  100% { box-shadow: 0 6px 22px rgba(168,85,247,0.65); transform: translateY(-1px); }
}

.ad-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #e4d3f8;
  background: #ffffff;
  color: #6b21a8;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .18s;
}
.ad-back-btn:hover {
  background: #f5ebff;
  border-color: #a855f7;
  transform: scale(1.05);
}

/* Action Buttons inside modal */
.ad-btn {
  width: 100%;
  max-width: 260px;
  padding: .68rem 1rem;
  border: none;
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-bottom: .5rem;
}
.ad-btn:hover  { opacity: .9; transform: translateY(-1px); }
.ad-btn:active { opacity: .75; transform: scale(.98); }
.ad-btn-primary {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  box-shadow: 0 4px 18px rgba(168,85,247,.35);
}
.ad-btn-ghost {
  background: #f8f2ff;
  color: #6b21a8;
  border: 1.5px solid #d8b4fe;
}
.ad-btn-x {
  background: #000;
  color: #fff;
  border: 1.5px solid #222;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

/* Tweet preview card */
.ad-tweet-preview {
  display: flex;
  gap: .65rem;
  text-align: left;
  background: #fbf7ff;
  border: 1.5px solid #ebd5ff;
  border-radius: 14px;
  padding: .75rem .85rem;
  margin-bottom: .7rem;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
}
.ad-tweet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ad-tweet-body { flex: 1; }
.ad-tweet-name {
  font-weight: 800;
  font-size: .84rem;
  color: #4a1e73;
  margin-right: .3rem;
}
.ad-tweet-handle {
  font-size: .75rem;
  color: #8c72a8;
}
.ad-tweet-body p {
  font-size: .82rem;
  color: #4a1e73;
  font-weight: 700;
  margin: .3rem 0 0;
  line-height: 1.4;
}

/* URL input */
.ad-input {
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
  padding: .6rem .85rem;
  border-radius: 12px;
  border: 2px solid #e1cbf9;
  background: #ffffff;
  color: #4a1e73;
  font-size: .84rem;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  margin-bottom: .65rem;
  text-align: center;
  transition: border-color .18s;
}
.ad-input::placeholder { color: #a491ba; font-weight: 600; }
.ad-input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,0.15); }

/* Level progress */
.ad-progress-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 280px;
  margin-bottom: .85rem;
}
.ad-progress-track {
  flex: 1;
  height: 12px;
  border-radius: 8px;
  background: #ece0fa;
  overflow: hidden;
}
.ad-progress-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #a855f7, #10b981);
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}
.ad-progress-label {
  font-size: .84rem;
  font-weight: 800;
  color: #5b2a86;
  white-space: nowrap;
}

.ad-tip {
  font-size: .82rem;
  color: #7b53a2;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.ad-ready-tag {
  font-size: 1.05rem;
  font-weight: 800;
  color: #059669;
  margin: 0 0 .8rem;
  text-shadow: 0 0 12px rgba(16,185,129,.3);
}
.ad-hold-box {
  margin:.65rem 0;
  padding:.75rem;
  border-radius:14px;
  border:2px solid rgba(124,58,237,.16);
  background:rgba(255,255,255,.7);
  text-align:left;
}
.ad-hold-box p { margin:.35rem 0 .55rem; font-size:.78rem; }
.ad-hold-box small { display:block; min-height:1rem; margin-top:.45rem; color:#6b4a82; font-weight:800; }

/* Ticket (success screen) */
.ad-ticket {
  background: #fbf7ff;
  border: 1.5px solid #ebd5ff;
  border-radius: 14px;
  padding: .75rem 1rem;
  margin: .3rem 0 .9rem;
  width: 100%;
  max-width: 280px;
}
.ad-ticket-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #8c72a8;
  margin-bottom: .25rem;
}
.ad-ticket-code {
  font-size: .8rem;
  color: #6d28d9;
  font-weight: 800;
  word-break: break-all;
  display: block;
}

.objective-box { min-height: 74px; }
.obj-text { height: 42px; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.obj-copy, .obj-text { text-overflow: ellipsis; }
.obj-candy-icons { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.obj-candy-icons:empty { display: none; }
.obj-candy-icons img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(80,45,100,.18)); }
.objective-task {
  width: 58px;
  min-height: 58px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 3px 8px rgba(62,42,97,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
.objective-task img { width: 32px; height: 32px; }
.objective-task b { color: #42395b; font-size: 12px; line-height: 16px; white-space: nowrap; }
.objective-copy-hidden { display: none !important; }
.obj-text { white-space: nowrap; overflow: hidden; }
.obj-copy {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.68rem, 2vw, .86rem);
}
@media (max-width: 700px) {
  .objective-box { min-height: 68px; }
  .obj-text { height: 38px; gap: 4px; }
  .obj-candy-icons img { width: 24px; height: 24px; }
}

/* Candy themed board boot state, shown only while Phaser creates the level. */
.candy-game-loader {
  position: absolute;
  inset: 2px 2px max(4px, env(safe-area-inset-bottom));
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 35%, #fff 0, #fff8fc 37%, #f6eaff 100%);
  box-shadow: inset 0 0 50px rgba(255, 126, 179, .14), 0 12px 34px rgba(111, 67, 147, .12);
  color: #713c9b;
  font-family: var(--display);
  transition: opacity .24s ease, transform .24s ease;
}
.candy-game-loader.is-ready { opacity: 0; transform: scale(.98); pointer-events: none; }
.candy-game-loader-mascot { width: clamp(92px, 22vw, 150px); height: clamp(92px, 22vw, 150px); object-fit: contain; filter: drop-shadow(0 9px 12px rgba(166, 77, 189, .2)); animation: loader-mascot-bob 1.15s ease-in-out infinite; }
.candy-game-loader-candies { display: flex; align-items: center; gap: 12px; height: 30px; }
.candy-game-loader-candies i { font-style: normal; font-size: 22px; animation: loader-candy-hop .72s ease-in-out infinite alternate; }
.candy-game-loader-candies i:nth-child(2) { animation-delay: .16s; }
.candy-game-loader-candies i:nth-child(3) { animation-delay: .32s; }
.candy-game-loader>b { font-size: clamp(1.15rem, 4vw, 1.55rem); }
.candy-game-loader>span { color: #9b7bb5; font: 700 .86rem var(--font); }
@keyframes loader-mascot-bob { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes loader-candy-hop { to { transform: translateY(-7px) rotate(12deg); } }
.low-power-mode .candy-game-loader-mascot,.low-power-mode .candy-game-loader-candies i { animation-duration: 1.4s; }
@media(prefers-reduced-motion:reduce) { .candy-game-loader-mascot,.candy-game-loader-candies i { animation:none; } }