/* Superkids V1 -- Games 🎮 (9 brain games) */
.mg-root { overflow: hidden !important; padding: 4px 12px 14px !important; }
.mg {
  width: 100%; max-width: 1100px; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.mg-hubv, .mg-play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.mg-play { --gc: var(--grape); }

/* ---------- top row: back / bubble / 🔊 ---------- */
.mg-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex: none; }
.mg-bubble {
  flex: 0 1 680px; min-width: 0; min-height: 72px;
  background: #fff; border-radius: 26px; padding: 8px 20px;
  font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--ink);
  box-shadow: 0 7px 0 rgba(108,92,231,.22), 0 12px 22px rgba(0,0,0,.08);
}
.mg-bubble.pop { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }
.mg-say, .mg-back {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  font-size: 36px; line-height: 1;
  transition: transform .1s, box-shadow .1s;
}
.mg-say { background: var(--sun); box-shadow: 0 7px 0 var(--sun-d), 0 12px 20px rgba(0,0,0,.14); }
.mg-back {
  background: var(--gc); color: #fff;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--gc) 70%, #000), 0 12px 20px rgba(0,0,0,.14);
}
.mg-back span { display: inline-block; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.mg-say:active, .mg-back:active { transform: translateY(6px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }

/* ---------- fluent icon + emoji fallback ---------- */
.mg-ico { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; pointer-events: none; }
.mg-ico img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0,0,0,.18)); }
.mg-ico b {
  width: 100%; height: 100%; align-items: center; justify-content: center;
  font-size: calc(var(--cw, 90px) * .55); line-height: 1; font-weight: 400;
}

/* ---------- auto-fit grid ---------- */
.mg-fit {
  --cw: 100px; --ch: 100px; --g: 12px;
  flex: 1; min-height: 0; width: 100%;
  display: grid; justify-content: center; align-content: center; gap: var(--g);
  padding-bottom: 8px;
}
.mg-fit > * { width: var(--cw); height: var(--ch); }

/* ---------- hub ---------- */
.mg-gtile {
  --c: var(--grape);
  position: relative; border-radius: 30px; padding: calc(var(--cw) * .08) calc(var(--cw) * .06) calc(var(--cw) * .06);
  background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 55%), var(--c);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  box-shadow: 0 9px 0 color-mix(in srgb, var(--c) 68%, #000), 0 16px 24px rgba(0,0,0,.16), inset 0 -6px 0 rgba(0,0,0,.08);
  animation: sk-rise .5s both cubic-bezier(.34,1.56,.64,1);
  transition: transform .1s, box-shadow .1s;
}
.mg-gtile:active { transform: translateY(8px) scale(.98); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 68%, #000); }
.mg-gico { flex: 1; min-height: 0; width: 72%; --cw: calc(var(--ch) * .5); animation: mg-bob 2.6s ease-in-out infinite; }
.mg-gtile:nth-child(3n+2) .mg-gico { animation-delay: -.8s; }
.mg-gtile:nth-child(3n) .mg-gico { animation-delay: -1.6s; }
.mg-gname {
  font-size: clamp(17px, calc(var(--cw) * .16), 30px); font-weight: 800; line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0,0,0,.22); white-space: nowrap;
}
.mg-gst { display: flex; gap: 2px; font-size: clamp(12px, calc(var(--cw) * .1), 20px); line-height: 1; }
.mg-gst i { font-style: normal; color: rgba(255,255,255,.35); }
.mg-gst i.on { color: #FFE066; text-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* ---------- progress dots ---------- */
.mg-dots { display: flex; justify-content: center; gap: 10px; flex: none; min-height: 46px; }
.mg-dot {
  width: 46px; height: 46px; border-radius: 50%; padding: 5px;
  background: rgba(255,255,255,.75); box-shadow: inset 0 4px 0 rgba(0,0,0,.08);
  display: grid; place-items: center; --cw: 36px;
}
.mg-dot.on { background: #c9f7e6; box-shadow: 0 0 0 4px var(--mint) inset; animation: mg-boing .55s cubic-bezier(.34,1.56,.64,1); }
.mg-dot.on:empty::after { content: '⭐'; font-size: 24px; line-height: 1; }

/* ---------- board ---------- */
.mg-board {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mg-board.watching button { pointer-events: none; }

/* white tile / option */
.mg-tile, .mg-opt, .mg-cell {
  background: #fff; border-radius: 24px; padding: calc(var(--cw, 100px) * .11);
  box-shadow: 0 6px 0 rgba(108,92,231,.2), 0 10px 18px rgba(0,0,0,.08);
}
.mg-opt, .mg-cell.btn { transition: transform .1s, box-shadow .1s, opacity .3s; }
.mg-opt:active, .mg-cell.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(108,92,231,.25); }
.mg-pop { animation: sk-pop .45s both cubic-bezier(.34,1.56,.64,1); }
.good { animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 0 0 6px var(--mint), 0 6px 0 6px #008f70 !important; background: #e6fff6 !important; }
.bad { animation: sk-shake .45s; }
.mg-opt:disabled, .mg-cell.btn:disabled { opacity: .35; filter: grayscale(.6); }

.mg-slot {
  background: rgba(255,255,255,.55); border: 5px dashed rgba(108,92,231,.5); box-shadow: none;
  display: grid; place-items: center;
}
.mg-slot .q { font-size: calc(var(--cw, 80px) * .5); font-weight: 800; color: var(--grape); line-height: 1; animation: mg-bob 1.4s ease-in-out infinite; }
.mg-slot.filled { background: #e6fff6; border: 5px solid var(--mint); animation: sk-pop .45s cubic-bezier(.34,1.56,.64,1); }

/* option row (missing-object) */
.mg-opts { flex: none; display: flex; justify-content: center; gap: 14px; width: 100%; padding-bottom: 10px; }
.mg-opts .mg-opt { width: min(21vw, 22vh, 130px); height: min(21vw, 22vh, 130px); min-width: 76px; min-height: 76px; --cw: min(21vw, 22vh, 130px); }

/* countdown */
.mg-clock {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  background: var(--sun); display: grid; place-items: center;
  font-size: 44px; font-weight: 800; color: var(--ink);
  box-shadow: 0 7px 0 var(--sun-d), 0 0 0 8px rgba(255,255,255,.6);
  margin-bottom: 10px;
}
.mg-clock.tick { animation: sk-bump .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------- memory match cards ---------- */
.mg-card { padding: 0; background: none; border-radius: 22px; perspective: 900px; animation: sk-rise .45s backwards cubic-bezier(.34,1.56,.64,1); }
.mg-card-in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.34,1.4,.64,1); }
.mg-card { position: relative; }
.mg-card.up .mg-card-in, .mg-card.done .mg-card-in { transform: rotateY(180deg); }
.mg-card.nope .mg-card-in { animation: mg-nope .3s ease-in-out; }
.mg-card-back, .mg-card-face {
  position: absolute; inset: 0; border-radius: 22px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mg-card-back {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 50%), linear-gradient(135deg, #8b7cf6, #6C5CE7 55%, #FF6B9D);
  color: #fff; font-size: calc(var(--cw) * .45); font-weight: 800;
  box-shadow: 0 7px 0 #4a3cc0, 0 12px 18px rgba(0,0,0,.14);
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.mg-card-face { background: #fff; padding: calc(var(--cw, 100px) * .12); transform: rotateY(180deg); box-shadow: 0 7px 0 #d8d4f0, 0 12px 18px rgba(0,0,0,.1); }
.mg-card.done .mg-card-face { box-shadow: 0 0 0 5px var(--mint), 0 7px 0 5px #008f70; background: #e6fff6; }
.mg-card:active:not(.up) { transform: translateY(5px) scale(.97); }

/* ---------- simon pads ---------- */
.mg-pad {
  position: relative; border-radius: 34px;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.5), transparent 48%), var(--pc);
  box-shadow: 0 10px 0 var(--pd), 0 16px 24px rgba(0,0,0,.18), inset 0 -8px 0 rgba(0,0,0,.1);
  color: #fff; font-size: calc(var(--cw) * .38); line-height: 1;
  display: grid; place-items: center;
  transition: transform .12s, filter .12s, box-shadow .12s, opacity .2s;
}
.mg-pad svg { width: 46%; height: 46%; fill: #fff; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.mg-board.watching .mg-pad:not(.lit) { opacity: .55; }
.mg-pad.lit {
  filter: brightness(1.3) saturate(1.2); transform: scale(1.07) translateY(-4px); opacity: 1;
  box-shadow: 0 0 0 8px #fff, 0 0 40px 14px var(--pc), 0 14px 0 var(--pd);
}
.mg-pad:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--pd); }
.blobs .mg-pad { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }
.blobs .mg-pad:nth-child(2n) { border-radius: 55% 45% 42% 58% / 48% 58% 42% 52%; }

/* ---------- spot the difference ---------- */
.mg-spot { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.mg-spot-p {
  min-height: 0; display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.55); border-radius: 28px; padding: 6px 10px 4px;
  box-shadow: 0 6px 0 rgba(108,92,231,.15);
}
.mg-spot-p.a { flex: 2; }
.mg-spot-p.b { flex: 3; background: rgba(255,255,255,.8); }
.mg-lab { flex: none; font-size: 20px; font-weight: 800; color: var(--ink); opacity: .75; }
.mg-cell { border-radius: 18px; padding: calc(var(--cw, 100px) * .1); }
.mg-spot-p.a .mg-cell { box-shadow: 0 4px 0 rgba(108,92,231,.15); background: #f7f6ff; }
.mg-cell.ring { box-shadow: 0 0 0 5px var(--mint); background: #e6fff6; }
@media (min-aspect-ratio: 1/1) {
  .mg-spot { flex-direction: row; }
  .mg-spot-p.a, .mg-spot-p.b { flex: 1; }
}

/* ---------- shadow / listen / pattern ---------- */
.mg-hero {
  flex: none; width: min(150px, 20vh); height: min(150px, 20vh); --cw: min(150px, 20vh);
  background: #fff; border-radius: 50%; padding: 18px;
  box-shadow: 0 8px 0 rgba(108,92,231,.22), 0 0 0 10px rgba(255,255,255,.5);
  animation: sk-pop .5s cubic-bezier(.34,1.56,.64,1), mg-bob 2.4s .5s ease-in-out infinite;
}
.mg-choices { flex: 1; }
.mg-opt.shadow img, .mg-opt.shadow b { filter: brightness(0); opacity: .82; }
.mg-opt.shadow.good img, .mg-opt.shadow.good b { filter: none; opacity: 1; }

.mg-ear {
  flex: none; position: relative; width: min(150px, 20vh); height: min(150px, 20vh);
  border-radius: 50%; background: radial-gradient(circle at 30% 22%, #ffd0e0, var(--pink) 60%);
  box-shadow: 0 9px 0 var(--pink-d), 0 0 0 10px rgba(255,255,255,.5);
  font-size: min(76px, 10vh); line-height: 1;
  animation: mg-pulse 1.8s ease-in-out infinite;
}
.mg-ear b {
  position: absolute; right: -6px; bottom: -6px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--sun); display: grid; place-items: center; font-size: 28px; box-shadow: 0 4px 0 var(--sun-d);
}
.mg-ear:active { transform: translateY(6px); }

.mg-row {
  flex: none; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;
  background: rgba(255,255,255,.6); border-radius: 28px; padding: 14px 10px;
  box-shadow: 0 6px 0 rgba(108,92,231,.15);
}
.mg-row { --n: 5; }
.mg-row.n6 { --n: 6; } .mg-row.n7 { --n: 7; }
.mg-row .mg-tile {
  --cw: min(120px, calc((min(100vw, 1100px) - 44px) / var(--n) - 6px), 16vh);
  flex: none; width: var(--cw); height: var(--cw); padding: calc(var(--cw) * .1); border-radius: 20px;
}

/* ---------- remember the path ---------- */
.mg-pcell {
  border-radius: 20px; background: #ece9ff;
  box-shadow: 0 6px 0 #d1cbf6, inset 0 -4px 0 rgba(0,0,0,.04);
  font-size: calc(var(--cw) * .42); line-height: 1; display: grid; place-items: center;
  transition: background .2s, transform .12s, box-shadow .2s;
}
.mg-pcell span { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.mg-pcell.glow { background: var(--grape); box-shadow: 0 6px 0 var(--grape-d), 0 0 22px 4px rgba(108,92,231,.6); transform: translateY(-3px); }
.mg-pcell.glow span, .mg-pcell.found span { opacity: 1; transform: none; }
.mg-pcell.found { background: var(--mint); box-shadow: 0 6px 0 var(--mint-d); }
.mg-pcell.hint { background: #ffe9a8; box-shadow: 0 6px 0 var(--sun-d), 0 0 0 4px var(--sun) inset; }
.mg-pcell:active { transform: translateY(5px); box-shadow: 0 1px 0 #d1cbf6; }

/* ---------- animations ---------- */
@keyframes mg-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes mg-boing { 0% { transform: scale(.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes mg-nope { 0%,100% { transform: rotateY(180deg) translateX(0); } 25% { transform: rotateY(180deg) translateX(-8px); } 75% { transform: rotateY(180deg) translateX(8px); } }
@keyframes mg-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (max-width: 600px) {
  .mg-root { padding: 2px 8px 10px !important; }
  .mg-bar { gap: 8px; }
  .mg-bubble { font-size: 18px; padding: 6px 12px; border-radius: 22px; }
  .mg-dot { width: 38px; height: 38px; --cw: 28px; }
  .mg-dots { min-height: 38px; gap: 8px; }
  .mg-lab { font-size: 16px; }
  .mg-row { padding: 10px 6px; gap: 5px; }
  .mg-row .mg-tile { border-radius: 14px; }
}
@media (max-height: 560px) {
  .mg-dots { min-height: 34px; }
  .mg-dot { width: 34px; height: 34px; }
}