:root {
  --pink: #ff7eb9;
  --pink-soft: #ffd1e8;
  --purple: #9b6dff;
  --purple-deep: #6a3fd6;
  --mint: #7ef0d3;
  --yellow: #ffe66d;
  --sky-1: #fde2f3;
  --sky-2: #e7d8ff;
  --ink: #4a2f6b;
  --ok: #34c77b;
  --cross: #ff4d6d;
  --card: rgba(255, 255, 255, 0.86);
  --shadow: 0 14px 40px rgba(124, 77, 200, 0.25);
  --round: 26px;
  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 55%, #d9ecff 100%);
  position: relative;
}

/* ---------- Sky decorations ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.rainbow {
  position: absolute;
  left: 50%;
  bottom: -55vw;
  width: 130vw;
  height: 130vw;
  transform: translateX(-50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 14px rgba(255, 126, 185, 0.35),
    0 0 0 28px rgba(255, 209, 109, 0.35),
    0 0 0 42px rgba(126, 240, 211, 0.32),
    0 0 0 56px rgba(155, 109, 255, 0.28);
  opacity: 0.55;
}

.stars { position: absolute; inset: 0; }
.star {
  position: absolute;
  font-size: 18px;
  animation: twinkle 3s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.4); opacity: 1; }
}

.clouds .cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.75;
  filter: blur(0.3px);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.c1 { width: 120px; height: 38px; top: 12%; left: 8%; animation: drift 26s linear infinite; }
.c2 { width: 160px; height: 46px; top: 24%; right: 10%; animation: drift 34s linear infinite reverse; }
.c3 { width: 100px; height: 32px; top: 60%; left: 14%; animation: drift 30s linear infinite; }
.cloud::before { width: 55%; height: 160%; top: -55%; left: 12%; }
.cloud::after  { width: 45%; height: 150%; top: -45%; right: 14%; }
@keyframes drift {
  from { transform: translateX(-10px); }
  to   { transform: translateX(40px); }
}

/* Floating character buddies drifting in the background */
.floaties { position: absolute; inset: 0; }
.floatie {
  position: absolute;
  font-size: 30px;
  opacity: 0.55;
  animation: floatUp linear infinite;
  filter: drop-shadow(0 4px 6px rgba(106, 63, 214, 0.2));
}
@keyframes floatUp {
  0%   { transform: translateY(12vh) rotate(-6deg); }
  50%  { transform: translateY(-6vh) rotate(6deg); }
  100% { transform: translateY(12vh) rotate(-6deg); }
}

/* ---------- Layout ---------- */
.app {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 14px 24px;
}

.card {
  background: var(--card);
  backdrop-filter: blur(6px);
  border-radius: var(--round);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  border: 3px solid #fff;
}

.hidden { display: none !important; }

/* ---------- Home hub ---------- */
#screen-home { text-align: center; margin-top: 12px; }
.unicorn-big { width: 130px; height: 130px; margin: 0 auto 4px; }
.unicorn-big svg, .buddy svg { width: 100%; height: 100%; display: block; }

.title {
  font-size: clamp(32px, 7vw, 50px);
  margin: 4px 0 6px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}
.subtitle { font-size: 18px; margin: 4px 0 14px; }
.subtitle .name { color: var(--purple-deep); }

.progress-strip {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.ps-item {
  background: #fff; border: 3px solid #fff; border-radius: 16px;
  padding: 8px 16px; font-weight: bold; font-size: 17px; color: var(--purple-deep);
  box-shadow: 0 6px 16px rgba(155, 109, 255, 0.18);
}
.ps-btn { cursor: pointer; font-family: inherit; transition: transform 0.12s ease; }
.ps-btn:hover { transform: translateY(-2px) scale(1.04); }

.game-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 6px 0 18px; }

.game-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 14px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: linear-gradient(160deg, #fff, var(--pink-soft));
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 22px rgba(155, 109, 255, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.game-card:nth-child(2) { background: linear-gradient(160deg, #fff, #d9f6ee); }
.game-card:nth-child(3) { background: linear-gradient(160deg, #fff, #e3e0ff); }
.game-card:nth-child(4) { background: linear-gradient(160deg, #fff, #fff0d0); }
.game-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 30px rgba(155, 109, 255, 0.32); }
.game-card:active { transform: translateY(0) scale(0.99); }
.gc-emoji { font-size: 42px; }
.gc-name { font-weight: bold; font-size: 21px; color: var(--purple-deep); }
.gc-desc { font-size: 13px; opacity: 0.8; }

.sound-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.sound-toggle input { width: 18px; height: 18px; accent-color: var(--purple); }

/* ---------- Game screens shared header ---------- */
#screen-game, #screen-quiz { display: flex; flex-direction: column; gap: 12px; }

.game-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-btn {
  font-size: 20px; width: 44px; height: 44px; border-radius: 14px;
  border: 3px solid #fff; background: var(--card); cursor: pointer;
  box-shadow: var(--shadow); transition: transform 0.12s ease;
}
.icon-btn:hover { transform: scale(1.08); }
.icon-btn.muted { opacity: 0.45; }

.hearts { display: flex; gap: 2px; font-size: 22px; line-height: 1; }
.hearts .heart { transition: transform 0.2s ease; }
.hearts .heart.lost { filter: grayscale(1); opacity: 0.5; transform: scale(0.85); }
.hearts .heart.ping { animation: heartPing 0.4s ease; }
@keyframes heartPing { 0% { transform: scale(1); } 50% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(0.85); } }

.progress-wrap { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 120px; }
.progress-bar {
  flex: 1; height: 15px; border-radius: 10px; background: #fff;
  border: 2px solid #fff; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--yellow), var(--pink));
  border-radius: 10px; transition: width 0.5s ease;
}
.star-count { font-weight: bold; font-size: 17px; color: var(--purple-deep); white-space: nowrap; }

/* ---------- Problem banner ---------- */
.problem-banner, .quiz-question {
  text-align: center;
  font-size: clamp(28px, 8vw, 48px);
  font-weight: bold;
  color: var(--purple-deep);
  background: var(--card);
  border: 3px solid #fff;
  border-radius: 20px;
  padding: 8px 14px;
  box-shadow: var(--shadow);
  letter-spacing: 1px;
}
.problem-banner .minus, .problem-banner .eq,
.quiz-question .minus, .quiz-question .eq { color: var(--pink); margin: 0 6px; }
.qmark { color: var(--mint); }
.problem-banner .solved { color: var(--ok); }
.problem-banner.solved-banner { animation: bannerPop 0.5s ease; }
@keyframes bannerPop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- Helper / buddy ---------- */
.helper { display: flex; align-items: center; gap: 10px; }
.buddy {
  width: 56px; height: 56px; flex-shrink: 0; font-size: 42px; line-height: 56px; text-align: center;
  filter: drop-shadow(0 4px 6px rgba(106, 63, 214, 0.25));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bubble {
  position: relative;
  background: #fff;
  border: 3px solid var(--purple);
  border-radius: 18px;
  padding: 11px 15px;
  font-size: 16px;
  flex: 1;
  min-height: 28px;
  box-shadow: 0 6px 16px rgba(155, 109, 255, 0.18);
}
.bubble::before {
  content: "";
  position: absolute; left: -14px; top: 18px;
  border: 8px solid transparent;
  border-right-color: var(--purple);
}
.bubble.cheer { border-color: var(--ok); animation: pop 0.4s ease; }
.bubble.cheer::before { border-right-color: var(--ok); }
.bubble.oops { border-color: var(--cross); animation: shake 0.4s ease; }
.bubble.oops::before { border-right-color: var(--cross); }
@keyframes pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Board ---------- */
.board-wrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }

.chart {
  flex: 1 1 320px;
  background: var(--card);
  border: 3px solid #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.chart-head { display: grid; grid-template-columns: 1fr 1.4fr; }
.col-head {
  text-align: center; font-weight: bold; font-size: 17px; padding: 7px;
  color: #fff;
}
.tens-head { background: var(--purple); }
.ones-head { background: var(--pink); }

.chart-body { display: grid; grid-template-columns: 1fr 1.4fr; min-height: 180px; }
.col { padding: 10px; }
.tens-col {
  border-right: 3px dashed var(--purple);
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 9px 11px;
}
.ones-col {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px;
}

.chart-foot {
  display: grid; grid-template-columns: 1fr 1.4fr;
  border-top: 3px solid var(--purple);
  background: linear-gradient(180deg, #fff, var(--pink-soft));
}
.foot-label { padding: 9px; font-weight: bold; text-align: center; border-right: 3px dashed var(--purple); }
.foot-answer { padding: 7px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 28px; font-weight: bold; }
.ans-tens, .ans-ones { min-width: 24px; text-align: center; color: var(--purple-deep); }
.ans-pop { animation: ansPop 0.5s ease; color: var(--ok) !important; }
@keyframes ansPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Tally (a "ten") */
.ten {
  position: relative;
  width: 10px; height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--purple), var(--purple-deep));
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.3s ease;
  box-shadow: 0 3px 8px rgba(106, 63, 214, 0.35);
}
.ten.live, .ten.tappable { cursor: pointer; }
.ten.live:hover, .ten.tappable:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 16px rgba(106, 63, 214, 0.5); }
.ten.tappable::after {
  content: ""; position: absolute; inset: -7px; border-radius: 10px;
  border: 3px dashed var(--yellow); animation: hintglow 1.1s ease-in-out infinite;
}
@keyframes hintglow { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

.ten.crossed { opacity: 0.5; }
.ten.crossed::before {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%;
  height: 5px; background: var(--cross); border-radius: 3px;
  transform: rotate(-32deg); transform-origin: center;
}
.ten.exchanged { background: linear-gradient(180deg, #c9b6ff, #a98fff); }
.ten.exchanged::before { background: var(--yellow); }
.ten.exchanging { animation: exchwiggle 0.6s ease; }
@keyframes exchwiggle {
  0%,100% { transform: none; }
  20% { transform: translateX(-3px) rotate(-8deg) scale(1.1); }
  60% { transform: translateX(4px) rotate(8deg) scale(1.1); }
}
.ten.wrong, .one.wrong { animation: wrongShake 0.4s ease; }
@keyframes wrongShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.ten.spawn { animation: spawn 0.35s ease; }
@keyframes spawn { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ten.group-break { margin-left: 12px; }

/* Ones (circles) */
.one {
  position: relative;
  width: 32px; height: 32px; border-radius: 50%;
  border: 4px solid var(--pink);
  background: radial-gradient(circle at 35% 30%, #fff, #ffe3f1);
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.3s ease;
  box-shadow: 0 3px 7px rgba(255, 126, 185, 0.3);
}
.one.live, .one.tappable { cursor: pointer; }
.one.live:hover, .one.tappable:hover { transform: scale(1.18); box-shadow: 0 6px 14px rgba(255, 126, 185, 0.55); }
.one.tappable::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 3px dashed var(--yellow); animation: hintglow 1.1s ease-in-out infinite;
}
.one.from-exchange { border-color: var(--purple); background: radial-gradient(circle at 35% 30%, #fff, #ece2ff); }
.one.crossed { opacity: 0.55; }
.one.crossed::before, .one.crossed::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 5px;
  background: var(--cross); border-radius: 3px; transform-origin: center;
}
.one.crossed::before { transform: translate(-50%, -50%) rotate(45deg); }
.one.crossed::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.one.spawn { animation: spawn 0.35s ease; }
.one.fly-in { animation: flyIn 0.5s ease; }
@keyframes flyIn { from { transform: translate(-46px, -10px) scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* Floating "+10" label during exchange */
.float-plus {
  position: fixed; z-index: 60; font-size: 30px; font-weight: bold; color: var(--yellow);
  text-shadow: 0 2px 0 var(--purple-deep); pointer-events: none;
  transition: transform 1s ease, opacity 1s ease;
}

/* Digit that flies from chart answer into the column form */
.fly-digit {
  position: fixed; z-index: 60; font-size: 30px; font-weight: bold; color: var(--ok);
  pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.5, -0.1, 0.3, 1.2), opacity 0.75s ease;
}

/* ---------- Column form ---------- */
.column-form {
  flex: 0 0 auto;
  background: var(--card);
  border: 3px solid #fff;
  border-radius: 20px;
  padding: 10px 14px 14px;
  box-shadow: var(--shadow);
  align-self: stretch;
}
.cf-title { text-align: center; font-weight: bold; color: var(--purple-deep); margin-bottom: 4px; font-size: 13px; }
.cf-table { border-collapse: collapse; margin: 0 auto; font-size: 32px; font-weight: bold; }
.cf-table td { width: 40px; height: 40px; text-align: center; color: var(--ink); }
.cf-sign { color: var(--pink); }
.cf-borrow td { height: 20px; font-size: 17px; color: var(--cross); }
.cf-bot td { border-bottom: 4px solid var(--purple); padding-bottom: 2px; }
.cf-result td { color: var(--ok); }
.cf-pop { animation: ansPop 0.5s ease; }
.cf-strike { position: relative; }
.cf-strike::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 4px; background: var(--cross); transform: rotate(-18deg); border-radius: 2px;
}

/* ---------- Controls (sticky so Next is always reachable on phones) ---------- */
.controls {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  position: sticky; bottom: 8px; z-index: 6;
  padding-top: 4px;
}
.big-btn {
  font-family: inherit;
  font-size: 19px; font-weight: bold;
  padding: 13px 26px; border-radius: 18px; border: 3px solid #fff;
  cursor: pointer; box-shadow: var(--shadow);
  transition: transform 0.12s ease;
}
.big-btn:hover { transform: translateY(-3px) scale(1.03); }
.big-btn:active { transform: translateY(0); }
.big-btn.primary { background: linear-gradient(160deg, var(--mint), #4fd6c0); color: #0c5b4d; }
.big-btn.ghost { background: #fff; color: var(--purple-deep); }

/* ---------- Quiz ---------- */
.quiz-progress { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.qdot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); opacity: 0.6; }
.qdot.done { background: var(--mint); opacity: 1; }
.qdot.miss { background: var(--cross); opacity: 1; }
.qdot.current { box-shadow: 0 0 0 3px var(--yellow); opacity: 1; }

.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.choice {
  font-family: inherit; font-size: 34px; font-weight: bold; color: var(--purple-deep);
  padding: 22px 10px; border-radius: 20px; border: 3px solid #fff;
  background: linear-gradient(160deg, #fff, var(--pink-soft));
  cursor: pointer; box-shadow: 0 8px 20px rgba(155, 109, 255, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.choice:hover { transform: translateY(-4px) scale(1.03); }
.choice:active { transform: translateY(0); }
.choice.right { background: linear-gradient(160deg, #d8ffe9, var(--mint)); color: var(--ok); animation: pop 0.4s ease; }
.choice.wrong { background: linear-gradient(160deg, #ffd9e1, #ff9bb0); color: #fff; animation: wrongShake 0.4s ease; }
.choice.dim { opacity: 0.45; }

/* ---------- Days of the week wheel ---------- */
.wk-banner { font-size: clamp(20px, 5.5vw, 34px); }
.wk-op { color: var(--pink); font-size: 0.62em; margin: 0 6px; }

.week-wheel {
  position: relative;
  width: min(84vw, 350px);
  height: min(84vw, 350px);
  margin: 2px auto;
}
.wheel-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34%; height: 34%; border-radius: 50%;
  background: var(--card); border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: bold; color: var(--purple-deep); font-size: 15px;
  box-shadow: var(--shadow); padding: 6px;
}
.day-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 16px; border: 3px solid #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(106, 63, 214, 0.2); cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-weight: bold; color: var(--ink);
}
.day-node .dn-emoji { font-size: 20px; line-height: 1.1; }
.day-node .dn-name { font-size: 13px; }
.day-node.live { cursor: pointer; }
.day-node.live:hover { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 10px 18px rgba(106, 63, 214, 0.32); }
.day-node.today { box-shadow: 0 0 0 3px var(--purple), 0 6px 14px rgba(106, 63, 214, 0.2); }
.day-node.next::after {
  content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 3px dashed var(--yellow); animation: hintglow 1.1s ease-in-out infinite;
}
.day-node.landed { background: linear-gradient(160deg, #d8ffe9, var(--mint)) !important; color: var(--ok); animation: pop 0.4s ease; }
.day-node.wrong { animation: wrongShake 0.4s ease; }
.week-token {
  position: absolute; transform: translate(-50%, -118%);
  font-size: 34px; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 4px 5px rgba(106, 63, 214, 0.3));
  transition: left 0.45s cubic-bezier(0.5, -0.2, 0.3, 1.3), top 0.45s cubic-bezier(0.5, -0.2, 0.3, 1.3);
}
@media (max-width: 400px) {
  .day-node { width: 56px; height: 56px; border-radius: 14px; }
  .day-node .dn-emoji { font-size: 18px; }
  .day-node .dn-name { font-size: 12px; }
  .week-token { font-size: 30px; }
}

/* ---------- Certificate / award ---------- */
#screen-award { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.certificate {
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #fffdf6, #fff1fa);
  border: 5px double var(--purple);
  border-radius: 24px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cert-shine {
  position: absolute; top: -60%; left: -30%; width: 60%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: rotate(18deg); animation: shine 3.5s ease-in-out infinite;
}
@keyframes shine { 0% { left: -40%; } 60%, 100% { left: 130%; } }
.cert-emoji { font-size: 76px; line-height: 1; animation: trophyBounce 1.6s ease-in-out infinite; }
@keyframes trophyBounce { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.cert-ribbon {
  display: inline-block; margin: 6px 0; padding: 4px 16px; border-radius: 12px;
  background: var(--purple); color: #fff; font-weight: bold; font-size: 14px; letter-spacing: 0.5px;
}
.cert-name {
  font-size: clamp(30px, 8vw, 44px); margin: 6px 0 2px; color: var(--purple-deep);
  text-decoration: underline wavy var(--pink);
}
.cert-headline { font-size: 19px; margin: 4px 0 10px; }
.cert-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cert-stat {
  background: #fff; border: 3px solid #fff; border-radius: 16px; padding: 8px 14px; min-width: 84px;
  box-shadow: 0 6px 14px rgba(155, 109, 255, 0.18);
}
.cert-stat b { display: block; font-size: 26px; color: var(--purple-deep); }
.cert-stat span { font-size: 12px; opacity: 0.8; }
.cert-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 10px; }
.cert-badge { font-size: 38px; animation: badgePop 0.6s ease backwards; }
.cert-badge .cb-name { display: block; font-size: 11px; color: var(--ink); }
@keyframes badgePop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cert-date { font-size: 13px; opacity: 0.7; margin: 8px 0 0; }

/* ---------- Badges modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(74, 47, 107, 0.45); padding: 18px; backdrop-filter: blur(3px);
}
.modal-card {
  position: relative; background: #fff; border: 4px solid var(--purple); border-radius: 24px;
  padding: 22px 20px; max-width: 460px; width: 100%; max-height: 84vh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 12px;
  border: 3px solid #fff; background: var(--pink-soft); cursor: pointer; font-size: 16px;
}
.modal-title { text-align: center; color: var(--purple-deep); margin: 0 0 14px; }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge {
  text-align: center; padding: 12px 8px; border-radius: 16px; border: 3px solid var(--pink-soft);
  background: linear-gradient(160deg, #fff, #fff6fb);
}
.badge.locked { filter: grayscale(1); opacity: 0.55; }
.badge .b-emoji { font-size: 36px; }
.badge .b-name { font-weight: bold; font-size: 14px; color: var(--purple-deep); margin-top: 2px; }
.badge .b-desc { font-size: 11.5px; opacity: 0.8; }

/* ---------- Name entry modal ---------- */
.name-modal-card { text-align: center; }
.unicorn-name { font-size: 52px; margin-bottom: 8px; }
.name-input {
  display: block; width: 100%; margin: 0 auto 18px; padding: 12px 16px;
  font-size: 22px; font-family: inherit; border: 3px solid var(--purple);
  border-radius: 16px; text-align: center; color: var(--ink); outline: none;
  background: #faf5ff;
}
.name-input:focus { border-color: var(--pink); background: #fff; }
.name-input.input-error { border-color: var(--cross); animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.name-edit-btn {
  background: none; border: none; cursor: pointer; font-size: 16px;
  padding: 0 0 0 6px; vertical-align: middle; opacity: 0.7;
}
.name-edit-btn:hover { opacity: 1; }

/* ---------- Confetti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti span {
  position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
}

/* ---------- Dot Arrays game ---------- */
#screen-arrays { display: flex; flex-direction: column; gap: 12px; }

.ar-equation {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: clamp(22px, 6vw, 36px); font-weight: bold;
  background: var(--card); border: 3px solid #fff; border-radius: 20px;
  padding: 10px 16px; box-shadow: var(--shadow);
}
.ar-label { color: var(--ink); font-size: 0.75em; }
.ar-given { color: var(--purple-deep); }
.ar-blank {
  color: var(--mint); min-width: 48px; text-align: center;
  background: #fff; border: 3px dashed var(--mint); border-radius: 12px; padding: 2px 10px;
}

.ar-grid-wrap {
  display: flex; justify-content: center; align-items: center;
  background: var(--card); border: 3px solid #fff; border-radius: 20px;
  padding: 16px 12px; box-shadow: var(--shadow);
}
.ar-dot-grid { display: grid; }
.ar-dot {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4b4ff, var(--purple-deep));
  box-shadow: 0 3px 7px rgba(106, 63, 214, 0.3);
  transition: background 0.3s ease, transform 0.2s ease;
}
.ar-dot.ar-hint-0 { background: radial-gradient(circle at 35% 30%, #ffb3d9, #ff7eb9); }
.ar-dot.ar-hint-1 { background: radial-gradient(circle at 35% 30%, #c9b8ff, #9b6dff); }
.ar-dot.ar-hint-2 { background: radial-gradient(circle at 35% 30%, #a8f5e3, #7ef0d3); }
.ar-dot.ar-hint-3 { background: radial-gradient(circle at 35% 30%, #ffe98a, #ffc107); }
.ar-dot.ar-hint-4 { background: radial-gradient(circle at 35% 30%, #a0d8ff, #3f9eeb); }
.ar-dot.ar-correct { background: radial-gradient(circle at 35% 30%, #b0ffd8, var(--ok)); transform: scale(1.1); }

/* ---------- Mobile compaction ---------- */
@media (max-width: 560px) {
  .app { padding: 12px 12px 18px; }
  .board-wrap { gap: 10px; }
  .column-form { flex: 1 1 100%; }
  .cf-table { font-size: 28px; }
  .cf-table td { width: 34px; height: 36px; }
  .chart-body { min-height: 150px; }
  .ten { height: 46px; }
  .one { width: 28px; height: 28px; }
  .helper .buddy { width: 48px; height: 48px; font-size: 34px; line-height: 48px; }
  .bubble { font-size: 15px; padding: 9px 12px; }
  .quiz-choices { gap: 10px; }
  .choice { font-size: 28px; padding: 18px 8px; }
}
@media (max-width: 380px) {
  .game-top { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .hearts { font-size: 18px; }
}