/* Bubble Candy Arena */
.candy-body { margin: 0; background: #EEEBFF; font-family: "Baloo 2", system-ui, sans-serif; }
.candy-app { --ink: #3B1150; position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--ink);
  background: url('/static/games/candy/tex/bg.webp') center / cover no-repeat, linear-gradient(180deg, #FCD9E6 0%, #F7C7D6 45%, #F3D7C2 78%, #E9C9B5 100%); overflow: hidden; user-select: none; -webkit-user-select: none; }

.cbtn { font: 700 1rem "Baloo 2", system-ui, sans-serif; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cbtn.primary { background: #FFD23F; } .cbtn.big { font-size: 1.3rem; padding: 10px 28px; }
.cbtn.ghost { background: #fff8; box-shadow: none; border-width: 2px; padding: 4px 12px; }
.cbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* map */
.map-mode { height: 100vh; height: 100dvh; overflow: hidden; background: #F7D9DF; }
.cmap-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: #7B5CFFcc; backdrop-filter: blur(6px); }
.cmap-title { flex: 1; margin: 0; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 var(--ink); text-align: center; }
.cmap-stars { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 800; color: #E8A400; }
.cmap-note { margin: 10px auto 0; padding: 6px 12px; background: #fffc; border-radius: 12px; font-size: .9rem; text-align: center; max-width: 420px; }
.cmap-path { display: flex; flex-direction: column-reverse; align-items: center; gap: 18px; padding: 24px 0 40px; }
.lvl { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff 0 12%, #FF8CC6 13% 100%); box-shadow: 0 6px 0 var(--ink); cursor: pointer; transform: translateX(calc(var(--off) * 46px)); font: inherit; color: var(--ink); }
.lvl.locked { background: #d6d0ea; cursor: default; box-shadow: 0 4px 0 #8a83a8; border-color: #8a83a8; }
.lvl.current { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #FFD23F 13% 100%); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translateX(calc(var(--off) * 46px)) scale(1.08); } }
.lvl-n { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.lvl-stars { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: .95rem; letter-spacing: -1px; white-space: nowrap; }
.lvl-stars i { color: #ffffff99; font-style: normal; text-shadow: 0 1px 0 var(--ink); } .lvl-stars i.on { color: #FFD23F; }
.lvl-me { position: absolute; width: 54px; left: 72px; top: -8px; pointer-events: none; }
.cmap-more { color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.cmap-ad { background: #fff; margin: 0 12px 24px; padding: 8px; border-radius: 12px; }

/* level */
.level-mode { height: 100vh; height: 100dvh; }
.chud { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 4px; }
.chud-goal { display: flex; gap: 6px; flex-wrap: wrap; background: #ffffffd9; border: 3px solid var(--ink); border-radius: 16px; padding: 4px 8px; justify-self: start; }
.goal-item { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.goal-item.done .goal-count { color: #0E7A70; } .goal-item.done .goal-count::after { content: ' ✓'; }
.goal-ico { font-size: 1.2rem; } .goal-ico.big { font-size: 2rem; }
.chud-moves { display: grid; justify-items: center; background: #fff; border: 4px solid var(--ink); border-radius: 50%; width: 76px; height: 76px; place-content: center; box-shadow: 0 5px 0 var(--ink); }
.chud-moves small { font-size: .7rem; font-weight: 700; line-height: 1; } .chud-moves b { font-size: 2rem; line-height: 1; }
.chud-moves.low { background: #FFD6DE; animation: shake .5s ease-in-out infinite; }
@keyframes shake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.chud-score { justify-self: end; background: #ffffffd9; border: 3px solid var(--ink); border-radius: 16px; padding: 4px 10px; min-width: 110px; text-align: right; }
.chud-score b { font-size: 1.15rem; }
.star-bar { position: relative; height: 10px; background: #eadff7; border-radius: 6px; margin: 4px 0 6px; }
.star-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #FFD23F, #FF9F1C); border-radius: 6px; transition: width .3s; }
.star-mark { position: absolute; top: -9px; transform: translateX(-50%); color: #cfc6e2; font-size: 1.1rem; text-shadow: 0 1px 0 var(--ink); }
.star-mark.on { color: #FFD23F; }
.chud-level { position: relative; z-index: 2; text-align: center; color: #fff; font-weight: 800; text-shadow: 0 2px 0 var(--ink); margin-top: -4px; }
.cstage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
.cboard { background: #3B115055; border: 4px solid #fff; border-radius: 18px; box-shadow: 0 0 0 4px var(--ink), 0 10px 0 #3B115066; touch-action: none; }
.cfoot { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
.cmascot { width: 92px; margin-bottom: -6px; filter: drop-shadow(0 4px 0 #3B115055); }
.cboosters { display: flex; gap: 8px; align-items: flex-end; }
.booster { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff 0 14%, #9BE7C4 15% 100%); box-shadow: 0 4px 0 var(--ink); font-size: 1.5rem; cursor: pointer; padding: 0; }
.booster em { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font: 700 .65rem "Baloo 2", sans-serif; font-style: normal; background: var(--ink); color: #fff; border-radius: 8px; padding: 0 6px; }
.booster.gear { width: 46px; height: 46px; font-size: 1.4rem; background: #FFD23F; }

/* modals */
.cmodal-back { position: absolute; inset: 0; z-index: 10; background: #2a103866; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cmodal { width: min(360px, 100%); background: #fff; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--ink); padding: 18px; text-align: center; display: grid; gap: 10px; animation: pop .25s ease-out; max-height: 90%; overflow-y: auto; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.cmodal h2 { margin: 0; font-size: 1.7rem; } .lvl-name { margin: -8px 0 0; font-weight: 700; color: #8a5aa8; }
.intro-goals { display: flex; justify-content: center; gap: 18px; } .intro-goal { display: grid; justify-items: center; font-size: 1.3rem; }
.intro-text { margin: 0; }
.big-stars { font-size: 3rem; letter-spacing: 4px; } .big-stars span { color: #e6def3; display: inline-block; }
.big-stars span.on { color: #FFD23F; text-shadow: 0 3px 0 var(--ink); animation: starIn .4s backwards; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.final-score { font-size: 1.3rem; font-weight: 800; margin: 0; }
.cmodal-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cmodal.menu .cbtn { width: 100%; }
.sad { width: 90px; margin: 0 auto; filter: grayscale(.3); }
.cmodal-ad { margin-top: 6px; }
.ctoast { position: absolute; z-index: 20; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 12px; font-weight: 700; }

/* text for search engines below the game */
.candy-seo { background: #fff; }
@media (prefers-reduced-motion: reduce) { .lvl.current, .chud-moves.low { animation: none; } }
@media (max-width: 380px) { .chud-moves { width: 64px; height: 64px; } .chud-moves b { font-size: 1.6rem; } .cmascot { width: 70px; } .booster { width: 48px; height: 48px; font-size: 1.25rem; } }

/* ---------- painted candy-land look ---------- */
.cmap-top { background: #ffffffb3; }
.cmap-title { color: #7a3f12; text-shadow: 0 2px 0 #fff; }
.cmap-more { color: #7a3f12; text-shadow: 0 2px 0 #fff; }
.lvl { background: radial-gradient(circle at 40% 32%, #FFF2B0 0 10%, #FFD04A 35%, #E59A12 100%); border: 4px solid #FFF3C4; box-shadow: 0 0 0 3px #B8770A, 0 6px 0 #8A5400; color: #5A3200; }
.lvl.current { background: radial-gradient(circle at 40% 32%, #fff 0 10%, #FF9AC4 40%, #E2457F 100%); color: #fff; text-shadow: 0 2px 0 #9c1d4d; }
.lvl.locked { background: radial-gradient(circle at 40% 32%, #f4f6fb 0 10%, #c9d3e3 60%, #9aa8c0 100%); border-color: #eef2f8; box-shadow: 0 0 0 3px #7d8aa3, 0 5px 0 #5f6b82; color: #5f6b82; }
.lvl-me { width: 60px; left: 76px; top: -14px; }
.chud { align-items: start; }
.chud-goal { background: linear-gradient(180deg, #DDF4FF, #8FD0F3); border: 3px solid #fff; box-shadow: 0 0 0 2px #5AA8D6, inset 0 2px 0 #fff, 0 4px 0 #3f86b5; border-radius: 16px; padding: 6px 10px; }
.goal-item { color: #fff; text-shadow: 0 2px 0 #2a6e9a, 0 0 4px #2a6e9a; font-size: 1.25rem; gap: 6px; }
.goal-tex { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 1px #0003); }
.goal-item.done .goal-count { color: #fff; } .goal-item.done { filter: saturate(1.2); }
.chud-moves { width: 90px; height: 90px; background: radial-gradient(circle at 40% 32%, #FFF2B0 0 8%, #FFD04A 38%, #E59A12 100%); border: 4px solid #FFF3C4; box-shadow: 0 0 0 3px #B8770A, 0 6px 0 #8A5400; }
.chud-moves small { color: #6B3F00; font-size: .8rem; font-weight: 800; } .chud-moves b { color: #5A3200; font-size: 2.4rem; text-shadow: 0 1px 0 #fff6; }
.chud-moves.low { background: radial-gradient(circle at 40% 32%, #fff 0 8%, #FF8FA3 40%, #D7263D 100%); }
.chud-moves.low small, .chud-moves.low b { color: #fff; }
.chud-score { background: linear-gradient(180deg, #FFFDF6, #F6E7CC); border: 4px solid #E2B25B; box-shadow: inset 0 0 0 2px #fff, 0 4px 0 #B9893C; border-radius: 16px; color: #5A3A10; padding: 6px 12px; min-width: 120px; }
.chud-score b { font-size: 1.35rem; }
.star-bar { background: #EAD9B8; height: 12px; } .star-fill { background: linear-gradient(90deg, #FFE066, #F5A300); }
.star-mark { color: #C9B48C; font-size: 1.35rem; top: -10px; text-shadow: 0 1px 0 #fff; } .star-mark.on { color: #FFC400; text-shadow: 0 1px 0 #8A5400; }
.chud-level { color: #fff; text-shadow: 0 2px 0 #7A4A12, 0 0 6px #7A4A12; font-size: 1.15rem; margin-top: 2px; }
.cboard { background: rgba(150, 182, 214, .5); border: 3px solid rgba(255, 255, 255, .9); border-radius: 20px; box-shadow: 0 0 0 2px rgba(110, 155, 200, .55), 0 14px 30px rgba(70, 40, 80, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cmascot { width: 104px; filter: drop-shadow(0 6px 4px #0003); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.booster { width: 66px; height: 72px; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.booster img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 3px #0003); }
.booster:active img { transform: translateY(2px) scale(.97); }
.booster.gear { width: 56px; height: 56px; background: none; }
.cmodal { background: linear-gradient(180deg, #FFFDF6, #F6E7CC); border-color: #E2B25B; box-shadow: inset 0 0 0 3px #fff, 0 8px 0 #B9893C; color: #5A3A10; }
.cmodal h2 { color: #7A3F12; } .lvl-name { color: #B06A1C; }
.intro-goal .goal-tex { width: 46px; height: 46px; }
.cbtn.primary { background: linear-gradient(180deg, #FFE066, #F5A300); border-color: #8A5400; box-shadow: 0 4px 0 #8A5400; color: #5A3200; }
@media (prefers-reduced-motion: reduce) { .cmascot { animation: none; } }
@media (max-width: 380px) { .chud-moves { width: 74px; height: 74px; } .chud-moves b { font-size: 1.9rem; } .booster { width: 54px; height: 60px; } .booster.gear { width: 46px; height: 46px; } .cmascot { width: 84px; } }

/* ---------- painted level map ---------- */
.map-mode .cmap-top { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #FFF8F0; border-bottom: 2px solid #F0D9C0; backdrop-filter: none; }
.cmap-gear { width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.cmap-gear img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #0002); }
.map-mode .cmap-title { color: #6B3A16; text-shadow: none; font-size: clamp(1rem, 4.6vw, 1.5rem); }
.cmap-score { display: grid; text-align: center; font-weight: 800; font-size: clamp(.72rem, 3vw, .95rem); color: #5A3A10; line-height: 1.2; background: #fff; border: 2px solid #6B3A16; border-radius: 14px; padding: 4px 10px; }
.cmap-strip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #FFF8F0e6; border-bottom: 2px solid #F0D9C0; }
.cmap-me { flex: 1; min-width: 0; display: grid; line-height: 1.15; color: #5A3A10; }
.cmap-me b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmap-me small { font-weight: 700; color: #B06A1C; }
.cmap-me .linkish { border: 0; background: none; padding: 0; font: 700 .9rem "Baloo 2", sans-serif; color: #B06A1C; text-align: left; cursor: pointer; text-decoration: underline; }
.cmap-strip .social-bar { margin: 0; padding: 0; max-width: none; flex: none; }
.cmap-strip .sb-actions { margin: 0; width: auto; }
.cmap-strip .sb-btn, .cmap-strip .sb-acct { width: 38px; height: 38px; min-width: 38px; }
.cmap-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cmap-world { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 798 / 1256; background: url('/static/games/candy/tex/map.webp') center / 100% 100% no-repeat; container-type: inline-size; }
.coin { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 38% 30%, #FFF6C8 0 10%, #FFD54A 36%, #F2A51C 78%, #C77C0A 100%);
  border: max(2px, .35cqw) solid #FFF3C4; box-shadow: 0 0 0 max(1.5px, .3cqw) #B8770A, 0 .8cqw 0 #8A5400, 0 1.2cqw 1.6cqw #0004;
  color: #5A3200; font: 800 var(--fs) / 1 "Baloo 2", sans-serif; display: grid; place-items: center; }
.coin-n { text-shadow: 0 1px 0 #fff8; }
.coin-stars { position: absolute; left: 50%; bottom: -.42em; transform: translateX(-50%); font-size: .42em; white-space: nowrap; letter-spacing: -.05em; }
.coin-stars i { font-style: normal; color: #E9DFC7; text-shadow: 0 1px 0 #6B3A16; } .coin-stars i.on { color: #FFC400; }
.coin.locked { filter: saturate(.55) brightness(.92); }
.coin.locked .coin-n { opacity: .75; }
.coin.soon { filter: saturate(.35) brightness(.9); opacity: .82; }
.coin.current { background: radial-gradient(circle at 38% 30%, #fff 0 10%, #FF9AC4 40%, #E2457F 100%); color: #fff; animation: coinPulse 1.3s ease-in-out infinite; z-index: 2; }
.coin.current .coin-n { text-shadow: 0 2px 0 #9c1d4d; }
@keyframes coinPulse { 50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 .3cqw #B8770A, 0 0 3cqw #FF7EB6, 0 .8cqw 0 #8A5400; } }
.map-me { position: absolute; transform: translate(-15%, -78%); pointer-events: none; filter: drop-shadow(0 1cqw 1cqw #0004); animation: bob 2.4s ease-in-out infinite; z-index: 3; }
.map-mode .cmap-note { position: absolute; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; margin: 0; z-index: 4; }
.cmodal.quit p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .coin.current, .map-me { animation: none; } }

.cmap-scroll { overflow-x: hidden; }
.map-mode .cmap-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.95rem, 4.2vw, 1.45rem); }
.cmap-strip .sb-acct:has(.loginlbl) { width: auto; padding: 0 4px; }
.cmap-strip .sb-acct .loginlbl { padding: 0 10px; font-size: .9rem; }