/* Sweet Cascade — giao diện. Token màu/font ở :root, phần còn lại chia theo màn hình. */
:root {
  --font: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --ink: #3a1670;
  --panel-1: #8c4df2; --panel-2: #5a25bb; --panel-3: #43188f;
  --glass: rgba(50, 14, 105, 0.55);
  --glass-line: rgba(255, 255, 255, 0.35);
  --gold-1: #fff6b0; --gold-2: #ffd93b; --gold-3: #ff9a1f;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #3a1670; color: #fff;
  font-family: var(--font); font-weight: 700; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none; }
button { font-family: inherit; }
#bg { position: fixed; inset: 0; z-index: 0; }
#app { position: fixed; inset: 0; margin: 0 auto; max-width: 680px; z-index: 1; }

/* ---------- màn hình ---------- */
.screen { position: absolute; inset: 0; display: none; flex-direction: column;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
.screen.active { display: flex; animation: screen-in .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes screen-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.screen > *:not(canvas) { position: relative; z-index: 1; }

/* ---------- nút ---------- */
.btn { --c1: #ffd45e; --c2: #ff9b22; --c3: #ff8300; --edge: #b85400;
  font: 800 22px/1 var(--font); color: #fff; padding: .58em 1.35em .5em; border: 0; border-radius: 999px; cursor: pointer;
  position: relative; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); white-space: nowrap;
  background: linear-gradient(var(--c1), var(--c2) 55%, var(--c3));
  box-shadow: 0 .2em 0 var(--edge), 0 .38em .7em rgba(40, 8, 80, .5), inset 0 .1em 0 rgba(255, 255, 255, .7), inset 0 -.12em .2em rgba(0, 0, 0, .22);
  transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(.16em); box-shadow: 0 .04em 0 var(--edge), 0 .14em .3em rgba(40, 8, 80, .5), inset 0 .1em 0 rgba(255, 255, 255, .6); }
.btn:focus-visible, .icon-btn:focus-visible, .booster:focus-visible, .node:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn:disabled { filter: grayscale(1) brightness(.75); cursor: not-allowed; }
.btn.big { font-size: 36px; padding: .5em 1.6em .44em; }
.btn.small { font-size: 18px; }
.btn.green { --c1: #a6ff8a; --c2: #38d24d; --c3: #1ba83a; --edge: #0d7025; }
.btn.blue { --c1: #8fdcff; --c2: #3a95ff; --c3: #2069e0; --edge: #10409a; }
.btn.pink { --c1: #ff9fd4; --c2: #ff3d9a; --c3: #e01f7c; --edge: #8f0f4e; }
.btn.purple { --c1: #c99bff; --c2: #8f4df0; --c3: #6a2bd0; --edge: #3d1490; }
.btn .sub { font-size: .7em; opacity: .95; margin-left: .35em; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); cursor: pointer; padding: 0;
  display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(#8fdcff, #3a95ff 55%, #2069e0);
  box-shadow: 0 4px 0 #10409a, 0 8px 14px rgba(30, 5, 70, .45), inset 0 3px 0 rgba(255, 255, 255, .55);
  transition: transform .08s, filter .15s; }
.icon-btn:hover { filter: brightness(1.1); }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #10409a, 0 3px 8px rgba(30, 5, 70, .45), inset 0 3px 0 rgba(255, 255, 255, .5); }
.icon-btn svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.icon-btn.off { filter: grayscale(.9) brightness(.85); }
.lang-btn { font: 800 16px var(--font); }

.pill { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px;
  background: linear-gradient(rgba(60, 20, 120, .85), rgba(40, 10, 90, .85)); border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(20, 0, 50, .35); font-size: 20px; }
.ico-star, .ico-coin { display: inline-block; width: 26px; height: 26px; flex: none; }
.ico-star { background: linear-gradient(#fff6b0, #ffc21f); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ico-coin { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7b0, #ffd21f 45%, #e08a00); border: 2px solid #b86300;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3); }

/* ---------- màn chính ---------- */
.title-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; position: relative; }
/* logo + hoạt ảnh mở đầu: xem css/intro.css */
.tagline { margin: 6px 0 0; font-size: clamp(18px, 4.6vw, 26px); text-shadow: 0 2px 0 rgba(40, 8, 90, .55); opacity: .95; }
.title-candies { position: absolute; inset: 0; pointer-events: none; }
.title-candies img { position: absolute; width: var(--s); height: var(--s); animation: float var(--d) ease-in-out infinite alternate; filter: drop-shadow(0 8px 10px rgba(30, 0, 60, .35)); }
@keyframes float { from { transform: translateY(-12px) rotate(calc(var(--r) * -1)); } to { transform: translateY(12px) rotate(var(--r)); } }
#btn-play { margin-top: 26px; }
.title-foot { display: flex; justify-content: center; gap: 14px; padding: 18px; }

/* ---------- bản đồ ---------- */
.map-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.map-top .pill:first-of-type { margin-left: auto; }
.map-top .icon-btn:last-child { margin-left: 0; }
#map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1px;
  mask-image: linear-gradient(transparent 0, #000 22px); -webkit-mask-image: linear-gradient(transparent 0, #000 22px); }
#map-scroll::-webkit-scrollbar { display: none; }
#map-inner { position: relative; width: 100%; }
.world { position: absolute; left: 0; right: 0; overflow: hidden; }
.world svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-banner { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; padding: .2em 1.1em; border-radius: 14px; font-size: 20px; white-space: nowrap;
  background: linear-gradient(#8c4df2, #5a25bb); border: 3px solid #fff; box-shadow: 0 5px 0 #33107a, 0 10px 16px rgba(20, 0, 60, .4); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.node { position: absolute; z-index: 2; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; border: 4px solid #fff; cursor: pointer; padding: 0;
  font: 800 26px/1 var(--font); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  background: radial-gradient(circle at 35% 25%, #ffe38a, #ffa11f 55%, #ff7a00); box-shadow: 0 5px 0 #b34d00, 0 10px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .5);
  transition: transform .12s; }
.node:hover { transform: scale(1.08); }
.node:active { transform: scale(.96); }
.node.done { background: radial-gradient(circle at 35% 25%, #b9ff9a, #38d24d 55%, #1ba83a); box-shadow: 0 5px 0 #0d7025, 0 10px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .5); }
.node.locked { background: radial-gradient(circle at 35% 25%, #d0c4e8, #8f82ad 60%, #6d6088); border-color: rgba(255, 255, 255, .6); box-shadow: 0 5px 0 #453a60, 0 8px 12px rgba(20, 0, 50, .35); cursor: default; }
.node.locked span { opacity: .55; }
.node.current { animation: node-pulse 1.5s ease-in-out infinite; background: radial-gradient(circle at 35% 25%, #ffb3e0, #ff3d9a 55%, #d81b7a); box-shadow: 0 5px 0 #8f0f4e, 0 0 0 6px rgba(255, 255, 255, .35), 0 10px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .5); }
@keyframes node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.node-stars { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); display: flex; gap: 1px; filter: drop-shadow(0 2px 0 rgba(30, 0, 60, .55)); }
.node-stars i { width: 17px; height: 17px; background: #6d5a9a; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.node-stars i.on { background: linear-gradient(#fff6b0, #ffc21f); }
.node-stars i:nth-child(2) { margin-top: -5px; }

/* ---------- màn chơi: HUD ---------- */
#game-canvas { position: absolute; inset: 0; z-index: 0; }
#screen-game > * { pointer-events: none; }
#screen-game > #game-canvas, #screen-game button, #screen-game .g-boosters { pointer-events: auto; }
/* Ba hàng (lượt/màn, mục tiêu, thanh sao) gộp trong một khối kính để nhìn gọn, không chồng lên nhau */
.g-hud { margin: 0 8px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; border-radius: 0 0 26px 26px;
  background: linear-gradient(rgba(48, 14, 110, .7), rgba(48, 14, 110, .42)); border: 2px solid rgba(255, 255, 255, .3); border-top: 0;
  box-shadow: 0 8px 22px rgba(20, 0, 60, .4), inset 0 -2px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.g-top > :first-child { justify-self: start; }
.g-top > :last-child { justify-self: end; }
/* "Màn" và "Lượt" cùng khuôn: hộp bo tròn, nhãn nhỏ trên, số to dưới */
.g-level, .g-moves { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 88px; height: 54px; padding: 0 14px; border-radius: 16px; line-height: .95; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.g-level { background: linear-gradient(rgba(104, 48, 200, .95), rgba(62, 22, 138, .95)); border: 2px solid rgba(255, 255, 255, .7); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 4px 0 rgba(20, 0, 60, .45); }
.g-moves { background: linear-gradient(#ff8ac8, #f0348c 60%, #d81b7a); border: 2px solid #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #8f0f4e; }
.g-level small, .g-moves small { font-size: 11px; opacity: .92; letter-spacing: .08em; text-transform: uppercase; }
.g-level b, .g-moves b { font-size: 28px; }
.g-moves b { transition: transform .2s; }
.g-moves.low { animation: low-pulse .7s ease-in-out infinite; }
.g-moves.tick b { animation: tick .3s ease-out; }
@keyframes low-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes tick { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

.g-score { display: flex; flex-direction: column; gap: 2px; }
.score-track { position: relative; height: 14px; border-radius: 999px; background: rgba(30, 5, 70, .6); border: 2px solid rgba(255, 255, 255, .6); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); margin: 6px 12px 0; }
.score-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px; background: linear-gradient(#ffe98a, #ffb020 55%, #ff8a00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); transition: width .4s cubic-bezier(.2, .9, .3, 1); }
.star-mark { position: absolute; top: 50%; width: 26px; height: 26px; margin: -14px 0 0 -13px; background: #8a78b8;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background .3s; }
.star-mark.on { background: linear-gradient(#fff6b0, #ffc21f); animation: star-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes star-pop { 0% { transform: scale(.4) rotate(-40deg); } 60% { transform: scale(1.6) rotate(15deg); } 100% { transform: scale(1) rotate(0); } }
.score-num { text-align: center; font-size: 16px; text-shadow: 0 2px 0 rgba(30, 5, 70, .6); }
.score-num span { opacity: .8; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.score-num b { font-size: 22px; }

/* Chip mục tiêu: icon giống hệt thứ trên bàn + nhãn + số CÒN LẠI (chỉ giảm khi hoàn thành đúng mục tiêu đó) */
.g-goals { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.goal { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 14px 4px 5px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .55);
  background: linear-gradient(rgba(34, 8, 88, .8), rgba(22, 4, 64, .8)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 3px 0 rgba(15, 0, 45, .5); transition: background .3s; }
.goal .gicon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .13); }
.goal .gicon img { width: 36px; height: 36px; }
.goal .gicon .ico-star { width: 30px; height: 30px; }
.goal .gtxt { display: flex; flex-direction: column; justify-content: center; line-height: 1; min-width: 2.4em; }
.goal .lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .92; white-space: nowrap; }
.goal .lbl:empty { display: none; }
.goal .num { font-size: 24px; }
.gi-jelly { display: grid; place-items: center; background: rgba(30, 8, 80, .7); border-radius: 12px; }
.goal .gi-jelly { background: none; }
.goal.done { background: linear-gradient(#5be06a, #1ba83a); border-color: #fff; }
.goal.done .num::before { content: "✓ "; }
.goal.bump { animation: bump .28s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

#board-slot { flex: 1; min-height: 0; margin: 4px 6px 0; }
.g-boosters { display: flex; justify-content: center; gap: 14px; padding: 16px 12px 10px; }
.booster { position: relative; width: 78px; padding: 8px 4px 6px; border-radius: 20px; cursor: pointer; color: #fff; border: 3px solid rgba(255, 255, 255, .85);
  background: linear-gradient(#8c4df2, #5a25bb); box-shadow: 0 4px 0 #33107a, 0 8px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .3);
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s; }
.booster:hover { transform: translateY(-2px); }
.booster:active { transform: translateY(3px); }
.booster.active { background: linear-gradient(#ffd45e, #ff9b22); box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 4px 0 #b85400; animation: pulse 1s ease-in-out infinite; }
.booster svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.booster em { font-style: normal; font-size: 11px; line-height: 1; opacity: .95; text-align: center; }
.booster .count { position: absolute; top: -9px; right: -9px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; font-size: 16px;
  background: linear-gradient(#ff8fc7, #ff2e8f); border: 2px solid #fff; box-shadow: 0 2px 0 #8f0f4e; }
.booster .count.buy { background: linear-gradient(#ffd45e, #ff9b22); box-shadow: 0 2px 0 #b85400; font-size: 13px; gap: 3px; display: flex; align-items: center; }
.booster .count.buy .ico-coin { width: 14px; height: 14px; border-width: 1px; }

/* ---------- callout & banner ---------- */
#callout-layer { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.callout { position: absolute; left: 50%; top: 46%; font-size: clamp(46px, 14vw, 88px); font-weight: 800; white-space: nowrap; line-height: 1;
  transform: translate(-50%, -50%) scale(.2) rotate(-10deg); opacity: 0; animation: callout 1.25s cubic-bezier(.2, .9, .3, 1) forwards; pointer-events: none; }
.callout::before, .callout::after { content: attr(data-t); position: absolute; inset: 0; text-align: center; }
.callout::before { -webkit-text-stroke: .2em #7a1fa8; z-index: -1; filter: drop-shadow(0 .07em 0 #3d0f70) drop-shadow(0 .2em .25em rgba(20, 0, 60, .55)); }
.callout::after { background: linear-gradient(#fffbe0 5%, #ffe14d 45%, #ff9a1f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.callout { color: transparent; }
.callout.t2::after { background-image: linear-gradient(#e6ffe0 5%, #7dff8a 45%, #22c04a 90%); }
.callout.t2::before { -webkit-text-stroke-color: #0f6a2a; }
.callout.t3::after { background-image: linear-gradient(#e0f4ff 5%, #7dd3ff 45%, #2f8cff 90%); }
.callout.t3::before { -webkit-text-stroke-color: #12489f; }
.callout.t4::after { background-image: linear-gradient(#ffe0f4 5%, #ff8fd0 45%, #ff2e8f 90%); }
.callout.t4::before { -webkit-text-stroke-color: #8f0f4e; }
@keyframes callout {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-14deg); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(-4deg); }
  28% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  78% { opacity: 1; transform: translate(-50%, -54%) scale(1.02) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1.15) rotate(-3deg); }
}
.banner { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); padding: .3em 1.2em; font-size: clamp(20px, 5.4vw, 30px); border-radius: 18px; text-align: center; max-width: 92%;
  background: linear-gradient(rgba(90, 37, 187, .95), rgba(60, 20, 140, .95)); border: 3px solid #fff; box-shadow: 0 8px 20px rgba(20, 0, 60, .5); text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  animation: banner 2s ease forwards; pointer-events: none; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 20% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
.banner.sticky { animation: banner-in .3s ease-out forwards; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

#toast { position: absolute; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%) translateY(20px); opacity: 0; z-index: 80; padding: .45em 1.2em; border-radius: 999px; font-size: 18px; pointer-events: none;
  background: rgba(40, 10, 90, .92); border: 2px solid rgba(255, 255, 255, .7); transition: opacity .25s, transform .25s; white-space: nowrap; max-width: 94%; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- modal ---------- */
#modal-root { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.modal-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 34px 16px 16px; pointer-events: auto;
  background: rgba(22, 5, 50, .66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: fade .25s both; }
.modal-backdrop.closing { animation: fade .2s reverse both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { position: relative; width: min(430px, 100%); max-height: 100%; overflow: visible; border-radius: 30px; padding: 44px 20px 20px; text-align: center;
  background: linear-gradient(#9455f5 0, #6229c4 45%, #4a1c9f); border: 4px solid rgba(255, 255, 255, .92);
  box-shadow: 0 24px 60px rgba(10, 0, 30, .65), inset 0 4px 0 rgba(255, 255, 255, .35), inset 0 -10px 24px rgba(30, 0, 80, .4); animation: modal-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(.7); } to { opacity: 1; transform: none; } }
.modal-backdrop.closing .modal { animation: modal-out .2s ease-in both; }
@keyframes modal-out { to { opacity: 0; transform: translateY(20px) scale(.85); } }
.ribbon { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: .28em 1.5em .22em; font-size: 28px; line-height: 1.1; color: #fff; white-space: nowrap; max-width: 96%;
  background: linear-gradient(#ff8ac8, #ff2e8f); border-radius: 16px; border: 3px solid #fff; box-shadow: 0 5px 0 #a0175f, 0 10px 20px rgba(0, 0, 0, .35); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.ribbon.green { background: linear-gradient(#8dff7a, #2fd04a); box-shadow: 0 5px 0 #0d7025, 0 10px 20px rgba(0, 0, 0, .35); }
.modal-x { position: absolute; right: -10px; top: -14px; }
.modal-x.icon-btn { width: 40px; height: 40px; background: linear-gradient(#ff9fb0, #ff3d5c 55%, #d81b3e); box-shadow: 0 4px 0 #8a0f26, 0 8px 12px rgba(30, 5, 70, .45), inset 0 3px 0 rgba(255, 255, 255, .5); }
.modal-x svg { width: 18px; height: 18px; }
.modal-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.modal-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.modal-actions .btn { min-width: 132px; }
.card-goals { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.goal-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 10px 12px 8px; border-radius: 18px; background: rgba(30, 5, 80, .45); border: 2px solid rgba(255, 255, 255, .35); }
.goal-card img { width: 56px; height: 56px; }
.goal-card .gi-jelly { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; }
.goal-card .gi-jelly img { width: 56px; height: 56px; }
.goal-card b { font-size: 24px; }
.goal-card small { font-size: 12px; opacity: .9; line-height: 1.1; max-width: 110px; }
.tip { font-size: 16px; line-height: 1.25; background: rgba(255, 255, 255, .14); padding: 8px 14px; border-radius: 14px; max-width: 340px; }
.meta-row { display: flex; gap: 18px; align-items: center; justify-content: center; font-size: 18px; }
.meta-row b { font-size: 26px; }
.stars-row { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 96px; }
.bigstar { width: 74px; height: 74px; background: rgba(20, 0, 60, .5); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bigstar:nth-child(2) { width: 96px; height: 96px; margin-bottom: 8px; }
.bigstar.on { background: linear-gradient(#fff9c4, #ffd93b 50%, #ff9a1f); animation: bigstar .8s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes bigstar { 0% { transform: scale(0) rotate(-120deg); opacity: 0; } 60% { transform: scale(1.4) rotate(12deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.bigstar-wrap { filter: drop-shadow(0 4px 0 rgba(30, 0, 70, .5)); }
.score-big { font-size: 46px; line-height: 1; text-shadow: 0 3px 0 rgba(30, 5, 70, .6); }
.reward { display: flex; align-items: center; gap: 8px; font-size: 22px; padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
.newbest { color: #ffe14d; font-size: 18px; animation: pulse 1s ease-in-out infinite; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; font-size: 20px; padding: 6px 4px; }
.switch { position: relative; width: 62px; height: 34px; border-radius: 999px; border: 3px solid #fff; cursor: pointer; padding: 0; background: #7d6aa8; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35); transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.switch[aria-checked="true"] { background: #38d24d; }
.switch[aria-checked="true"]::after { transform: translateX(28px); }
.seg { display: flex; gap: 6px; }
.seg .btn { min-width: 0; padding: .4em .9em .34em; font-size: 16px; }

/* ---------- responsive ---------- */
@media (max-height: 640px) {
  .g-hud { padding: 6px 10px 8px; gap: 5px; }
  .g-level, .g-moves { height: 46px; min-width: 76px; } .g-level b, .g-moves b { font-size: 24px; }
  .booster { width: 68px; padding: 5px 3px 4px; } .booster svg { width: 30px; height: 30px; }
  .goal { min-height: 40px; padding-right: 10px; } .goal .gicon { width: 32px; height: 32px; } .goal .gicon img { width: 28px; height: 28px; } .goal .gicon .ico-star { width: 24px; height: 24px; } .goal .num { font-size: 20px; }
}
@media (min-width: 700px) { .g-hud { padding-top: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .logo, .pulse, .title-candies img, .node.current, .g-moves.low, .booster.active { animation: none; }
  .screen.active { animation-duration: .01s; }
}

.avatar { position: absolute; z-index: 3; width: 44px; height: 44px; margin: -88px 0 0 -22px; pointer-events: none; animation: hop 1s ease-in-out infinite; filter: drop-shadow(0 6px 4px rgba(30, 0, 60, .4)); }
@keyframes hop { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-12px) scaleY(1.06); } }
.soon { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; padding: .3em 1em; border-radius: 14px; font-size: 18px; background: rgba(40, 10, 90, .8); border: 2px solid rgba(255, 255, 255, .6); white-space: nowrap; }

/* =====================================================================================
   Thiết kế theo độ sáng: đọc rõ cả khi mất màu (thang xám / mù màu). Mở game với ?gray để xem thử.
   - Nút, chữ số, huy hiệu đều có viền tối + chữ viền tối, nên độ tương phản không phụ thuộc màu.
   - Thứ bậc nút theo độ sáng: chính = sáng, phụ = trung bình, thứ cấp = tối.
   - Trạng thái không chỉ dựa vào màu: level khóa có ổ khóa, xong có sao, hiện tại có vòng sáng + nhân vật,
     mục tiêu hoàn thành có dấu ✓, công tắc có vị trí núm.
   ===================================================================================== */
:root { --ring: #2a0f5c; }

.btn { --c1: #ffe89a; --c2: #ffb52e; --c3: #ff9410; --edge: #8f4200;
  -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: none;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .75), inset 0 -.12em .2em rgba(0, 0, 0, .2),
    0 .2em 0 var(--edge), 0 0 0 3px var(--ring), 0 .2em 0 3px var(--ring), 0 .55em .8em rgba(30, 5, 70, .5); }
.btn:active { box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .6), 0 .04em 0 var(--edge), 0 0 0 3px var(--ring), 0 .04em 0 3px var(--ring), 0 .15em .3em rgba(30, 5, 70, .5); }
.btn.small { -webkit-text-stroke-width: 4px; }
.btn.green { --c1: #d4ffb8; --c2: #66e46c; --c3: #2fc04c; --edge: #0d6a24; }
.btn.blue { --c1: #9fd0ff; --c2: #3f88f2; --c3: #2260d2; --edge: #0f3a94; }
.btn.purple { --c1: #b596f6; --c2: #6a3cd0; --c3: #4a22a4; --edge: #2a1068; }
.btn.pink { --c1: #ff9fcf; --c2: #f0348c; --c3: #c4166a; --edge: #6e0c3a; }

.icon-btn { background: linear-gradient(#8fcaff, #3a80ee 55%, #1f56c8);
  box-shadow: 0 0 0 2.5px var(--ring), 0 4px 0 2.5px var(--ring), 0 8px 14px rgba(30, 5, 70, .45), inset 0 3px 0 rgba(255, 255, 255, .55); }
.icon-btn:active { box-shadow: 0 0 0 2.5px var(--ring), 0 1px 0 2.5px var(--ring), inset 0 3px 0 rgba(255, 255, 255, .5); }
.modal-x.icon-btn { background: linear-gradient(#ffa3b3, #ff3d5c 55%, #c9183a); }

.g-level b, .score-num b, .g-moves, .ribbon, .world-banner, .booster .count, .goal .num, .node { -webkit-text-stroke: 3px var(--ring); paint-order: stroke fill; }
.ribbon { -webkit-text-stroke-width: 5px; box-shadow: 0 0 0 3px var(--ring), 0 6px 0 3px var(--ring), 0 10px 20px rgba(0, 0, 0, .35); }
.ribbon.green { box-shadow: 0 0 0 3px var(--ring), 0 6px 0 3px var(--ring), 0 10px 20px rgba(0, 0, 0, .35); }
.world-banner { -webkit-text-stroke-width: 4px; box-shadow: 0 0 0 3px var(--ring), 0 6px 0 3px var(--ring), 0 10px 16px rgba(20, 0, 60, .4); }
.g-moves { box-shadow: 0 0 0 2px var(--ring), 0 4px 0 2px var(--ring), inset 0 2px 0 rgba(255, 255, 255, .45); }
.g-moves small { -webkit-text-stroke-width: 2px; }
.g-level { box-shadow: 0 0 0 2px var(--ring), 0 4px 0 2px var(--ring), inset 0 2px 0 rgba(255, 255, 255, .2); }
.goal { box-shadow: 0 0 0 2px var(--ring), 0 3px 0 2px var(--ring), inset 0 2px 0 rgba(255, 255, 255, .14); }
.goal.done { background: linear-gradient(#b4f8ae, #3fc85a); }
.booster { box-shadow: 0 0 0 2.5px var(--ring), 0 5px 0 2.5px var(--ring), 0 9px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .3); }
.booster.active { box-shadow: 0 0 0 2.5px var(--ring), 0 0 0 7px rgba(255, 255, 255, .85), 0 0 0 9.5px var(--ring), 0 5px 0 9.5px var(--ring); }

/* bản đồ: khóa (tối + ổ khóa) < xong (sáng, có sao) < hiện tại (sáng nhất, vòng đôi, to hơn) */
.node { box-shadow: 0 0 0 3px var(--ring), 0 6px 0 3px var(--ring), 0 10px 14px rgba(20, 0, 50, .4), inset 0 3px 0 rgba(255, 255, 255, .5); }
.node.done { background: radial-gradient(circle at 35% 25%, #f4ffe6, #8ee88a 55%, #38c257); }
.node.locked { background: radial-gradient(circle at 35% 25%, #5b5280, #2f2952 60%, #1f1a3d); border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 0 0 3px var(--ring), 0 6px 0 3px var(--ring), 0 8px 12px rgba(20, 0, 50, .35); }
.node.locked span { opacity: 1; display: grid; place-items: center; }
.node.locked svg { width: 26px; height: 26px; color: #d7cff2; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)); }
.node.current { width: 70px; height: 70px; margin: -35px 0 0 -35px; font-size: 30px;
  background: radial-gradient(circle at 35% 25%, #fffbe0, #ffd23a 55%, #ff9f10);
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 9px rgba(255, 255, 255, .92), 0 0 0 12px var(--ring), 0 14px 18px rgba(20, 0, 50, .5); }
.node-stars { filter: drop-shadow(0 0 1px #12072e) drop-shadow(0 0 1px #12072e) drop-shadow(0 2px 0 rgba(20, 0, 50, .6)); }
.node-stars i { width: 18px; height: 18px; background: #2f2660; }
.node-stars i.on { background: linear-gradient(#fffbd0, #ffcf3a); }
.bigstar-wrap { filter: drop-shadow(0 0 1.5px #12072e) drop-shadow(0 0 1.5px #12072e) drop-shadow(0 4px 0 rgba(30, 0, 70, .5)); }
.bigstar { background: #2f2660; }

/* các mốc sao trên thanh điểm: viền tối bằng pseudo-element (clip-path không cho đổ bóng viền) */
.star-mark { background: none; clip-path: none; }
.star-mark::before, .star-mark::after { content: ""; position: absolute; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star-mark::before { inset: -3px; background: var(--ring); }
.star-mark::after { inset: 0; background: #9a8dd0; transition: background .3s; }
.star-mark.on { background: none; }
.star-mark.on::after { background: linear-gradient(#fffbd0, #ffc21f); }
.score-track { border-color: #fff; box-shadow: 0 0 0 2px var(--ring), inset 0 2px 4px rgba(0, 0, 0, .4); }

.switch { background: #3a3068; box-shadow: 0 0 0 2px var(--ring), inset 0 3px 6px rgba(0, 0, 0, .4); }
.switch[aria-checked="true"] { background: #7be27a; }
.switch::after { box-shadow: 0 0 0 2px var(--ring), 0 2px 4px rgba(0, 0, 0, .4); }