/* 7Marvels kids' sticker cake designer (/kids-cake-designer/, kids.js), full screen (kids-page.php): the app fills the
   window, the cake on one side and big buttons on the other (stacked on phones in portrait). Rounded, pastel and chunky for
   small fingers. No extra font download: a rounded system face where there is one. */
@font-face { font-family: "Marvels Topper"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/dancing-script-700-latin.woff2) format("woff2"); }

body.marvels-kids-page { margin: 0; overflow: hidden; overscroll-behavior: none; background: #fdf3f7; }
body.marvels-kids-page .joinchat { display: none !important; }   /* the WhatsApp button: grown-ups find it on the designer */

#marvels-kids {
    --pink: #e86a93; --pink-dark: #c24d75; --ink: #4a3b5c; --line: #f0e4f2; --blush: #fde3ea; --lemon: #fff4c9; --lilac: #ece3fa; --sky: #e2eefa;
    --round: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
    position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr);
    font: 600 16px/1.35 var(--round); color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    background: radial-gradient(60% 50% at 20% 30%, #fff 0%, transparent 70%), radial-gradient(50% 50% at 85% 80%, var(--lilac) 0%, transparent 70%), linear-gradient(160deg, #fdf0f5, #eef4fc);
}
.admin-bar #marvels-kids { top: 32px; }
@media (max-width: 782px) { .admin-bar #marvels-kids { top: 46px; } }
#marvels-kids button { margin: 0; padding: 0; min-height: 0; border: 0; background: none; font: inherit; color: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; cursor: pointer; touch-action: manipulation; }
#marvels-kids button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
#marvels-kids button:disabled { opacity: .4; cursor: default; }
#marvels-kids [hidden] { display: none !important; }
#marvels-kids h2 { font: 800 clamp(24px, 3.4vw, 34px)/1.15 var(--round); color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; }
#marvels-kids h3 { font: 800 20px/1.2 var(--round); color: var(--ink); margin: 22px 0 10px; }

/* Top bar: logo, the four steps, full screen and the grown-ups' exit */
#marvels-kids .mk-top { display: flex; align-items: center; gap: 12px; padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); }
#marvels-kids .mk-logo { font: italic 400 24px/1 "Playfair Display", Georgia, serif; color: #806a3e; flex: 1 1 0; white-space: nowrap; }
#marvels-kids .mk-logo img { display: block; height: 46px; width: auto; }
#marvels-kids .mk-logo:has(img) { flex: 0 0 auto; margin-right: auto; padding: 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 4px 14px rgba(74, 59, 92, .08); }
/* The step tabs: a rail down the left on tablets and computers (on phones and portrait tablets they sit in the top bar,
   see below). Each keeps its picture and name; a gold star badge marks the steps done, pink the one open. */
#marvels-kids .mk-steps { position: absolute; z-index: 2; left: max(12px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 30px; background: rgba(255, 255, 255, .75); box-shadow: 0 6px 24px rgba(74, 59, 92, .1); }
#marvels-kids .mk-steps button { position: relative; width: 84px; padding: 10px 4px 8px; border-radius: 22px; background: #fff; border: 3px solid var(--line);
    display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s, border-color .15s, background .15s; }
#marvels-kids .mk-steps button:hover { transform: scale(1.05); }
#marvels-kids .mk-steps i { font-style: normal; font-size: 34px; line-height: 1; }
#marvels-kids .mk-steps span { font-size: 14px; font-weight: 800; }
#marvels-kids .mk-steps b { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center;
    background: #ffd84d; color: #fff; font-size: 16px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(74, 59, 92, .2); }
#marvels-kids .mk-steps button.done b { display: grid; animation: mk-drop .4s cubic-bezier(.2, 1.6, .4, 1); }
#marvels-kids .mk-steps button.done { border-color: #f6dc8a; }
#marvels-kids .mk-steps button[aria-current="step"] { background: var(--blush); border-color: var(--pink); transform: scale(1.08); }
#marvels-kids .mk-steps button[aria-current="step"] span { color: var(--pink-dark); }
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
    #marvels-kids .mk-main { --rail: calc(118px + env(safe-area-inset-left)); }
}
#marvels-kids .mk-tools { flex: 1 1 0; display: flex; justify-content: flex-end; gap: 8px; }
#marvels-kids .mk-tool { height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font-weight: 800; font-size: 15px; white-space: nowrap; }
#marvels-kids .mk-full { width: 42px; padding: 0; font-size: 20px; }
#marvels-kids .mk-sound { width: 42px; padding: 0; font-size: 20px; }
#marvels-kids .mk-sound[aria-pressed="true"] { border-color: var(--pink); background: var(--blush); }
/* "Tap to hear Biscuit & Sparkle talk!": a pink bubble under the sound button, its tail pointing up at it */
#marvels-kids .mk-soundwrap { position: relative; display: inline-flex; }
#marvels-kids .mk-soundtip { position: absolute; z-index: 6; top: calc(100% + 14px); right: -60px; width: 236px; display: flex; align-items: center; gap: 6px;
    padding: 8px 8px 8px 14px; border-radius: 20px; background: var(--pink); color: #fff; box-shadow: 0 6px 20px rgba(194, 77, 117, .35);
    animation: mk-tip-in .45s cubic-bezier(.2, 1.6, .4, 1), mk-tip-bob 2.2s ease-in-out .45s infinite; }
#marvels-kids .mk-soundtip::before { content: ""; position: absolute; top: -7px; right: 73px; width: 16px; height: 16px; border-radius: 3px; background: var(--pink); transform: rotate(45deg); }
#marvels-kids .mk-soundtip-go { position: relative; flex: 1; text-align: left; font-size: 15px; font-weight: 800; line-height: 1.25; color: #fff; }
#marvels-kids .mk-soundtip-x { position: relative; flex: 0 0 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .25); color: #fff; font-size: 18px; line-height: 1; }
@keyframes mk-tip-in { from { opacity: 0; transform: translateY(-10px) scale(.8); } }
@keyframes mk-tip-bob { 50% { translate: 0 4px; } }
/* the character whose recording is playing talks: a quick little bounce in time with the voice */
#marvels-kids .mk-char.speaking svg { animation: mk-talk .32s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes mk-talk { from { transform: scale(1, 1); } to { transform: scale(1.04, .95) translateY(1px); } }

/* Main: the cake, and the choices in a drawer on the right (at the bottom on phones). Closing the drawer gives the cake and
   the background the whole screen; the cake area grows into the room as the drawer slides away. */
#marvels-kids .mk-main { position: relative; min-height: 0; --dw: clamp(340px, 45%, 560px); }
#marvels-kids .mk-stage { position: absolute; top: 0; bottom: 0; left: var(--rail, 0px); right: var(--dw); transition: right .4s ease, bottom .4s ease; }
#marvels-kids .mk-panel { position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; width: var(--dw); transition: transform .4s ease; }
#marvels-kids.mk-closed .mk-stage { right: 0; }
#marvels-kids.mk-closed .mk-panel { transform: translateX(100%); }
#marvels-kids .mk-drawer-tab { position: absolute; top: 50%; left: -46px; width: 48px; height: 96px; margin-top: -48px; border-radius: 26px 0 0 26px;
    background: #fff; box-shadow: -6px 0 16px rgba(74, 59, 92, .1); display: grid; place-items: center; }
#marvels-kids .mk-drawer-tab .chev { width: 16px; height: 16px; border: solid var(--pink); border-width: 0 5px 5px 0; border-radius: 3px; transform: translateX(-3px) rotate(-45deg); transition: transform .3s; }
#marvels-kids.mk-closed .mk-drawer-tab { animation: mk-nudge 2.4s ease-in-out 1s infinite; }
#marvels-kids.mk-closed .mk-drawer-tab .chev { transform: translateX(3px) rotate(135deg); }
@keyframes mk-nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: -8px 0; } 90% { translate: 0 0; } }
#marvels-kids .mk-cakebox { position: absolute; inset: 8px 16px 16px; }
#marvels-kids .mk-cakebox svg { width: 100%; height: 100%; display: block; touch-action: none; overflow: visible; }
#marvels-kids .stk { cursor: grab; transition: opacity .15s; }
#marvels-kids .stk.lifted { cursor: grabbing; filter: drop-shadow(0 8px 6px rgba(74, 59, 92, .25)); }
#marvels-kids .stk.leaving { opacity: .4; }
#marvels-kids .stk.new > :first-child { animation: mk-drop .4s cubic-bezier(.2, 1.6, .4, 1); transform-box: fill-box; transform-origin: 50% 100%; }
#marvels-kids .flame { animation: mk-flicker 1.3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }

#marvels-kids .mk-panel { display: flex; flex-direction: column; min-height: 0; background: #fff; border-radius: 32px 0 0 0; box-shadow: -6px 0 30px rgba(74, 59, 92, .08); }
#marvels-kids .mk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 24px 16px; overscroll-behavior: contain; }
#marvels-kids .mk-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px max(14px, env(safe-area-inset-bottom)); border-top: 2px solid var(--line); }
/* Back and Next: the same raised pill, Back in lilac so Next (pink) stays the one to press */
#marvels-kids .mk-next, #marvels-kids .mk-back { min-height: 60px; padding: 0 34px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 5px 0 var(--pink-dark); }
#marvels-kids .mk-next:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--pink-dark); }
#marvels-kids .mk-back { padding: 0 26px; background: #b39ce6; box-shadow: 0 5px 0 #8a6fcb; }
#marvels-kids .mk-back:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6fcb; }

/* Biscuit & Sparkle */
#marvels-kids .mk-guide { display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; align-items: end; gap: 10px; padding: 14px 18px 8px; background: linear-gradient(180deg, var(--sky), #fff); border-radius: 32px 0 0 0; }
#marvels-kids .mk-char { text-align: center; opacity: .7; filter: saturate(.8); transform-origin: 50% 100%; transition: transform .25s, opacity .25s, filter .25s; }
#marvels-kids .mk-char svg { width: 100%; height: auto; display: block; animation: mk-bob 3.2s ease-in-out infinite; }
#marvels-kids .mk-char.unicorn svg { animation-delay: -1.6s; }
#marvels-kids .mk-char span { display: block; font-size: 13px; font-weight: 800; }
#marvels-kids .mk-char.is-talking { opacity: 1; filter: none; transform: scale(1.08); }
#marvels-kids .mk-char.hop { animation: mk-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
#marvels-kids .mk-char .eyes { animation: mk-blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }
#marvels-kids .mk-char.unicorn .eyes { animation-delay: -2s; }
#marvels-kids .mk-bubble { position: relative; align-self: center; margin: 0; background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 12px 16px; font-size: 17px; min-height: 70px; box-shadow: 0 4px 14px rgba(74, 59, 92, .08); }
#marvels-kids .mk-bubble .who { color: var(--pink); font-weight: 800; }
#marvels-kids .mk-bubble.from-unicorn .who { color: #8a63c9; }
#marvels-kids .mk-bubble::before { content: ""; position: absolute; bottom: 18px; width: 16px; height: 16px; background: #fff; border: 2px solid var(--line); border-width: 0 0 2px 2px; }
#marvels-kids .mk-bubble.from-bear::before { left: -9px; transform: rotate(45deg); }
#marvels-kids .mk-bubble.from-unicorn::before { right: -9px; transform: rotate(-135deg); }
#marvels-kids .mk-bubble.pop { animation: mk-bubble .35s cubic-bezier(.2, 1.4, .4, 1); }

/* Big choices */
#marvels-kids .mk-grid { display: grid; gap: 12px; }
#marvels-kids .mk-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#marvels-kids .mk-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#marvels-kids .mk-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#marvels-kids .mk-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 22px; background: #fff; border: 3px solid var(--line); font-size: 18px; font-weight: 800; transition: transform .15s, border-color .15s; }
#marvels-kids .mk-opt:active { transform: scale(.96); }
#marvels-kids .mk-opt[aria-pressed="true"] { border-color: var(--pink); background: var(--blush); }
#marvels-kids .mk-opt svg { width: 100%; max-width: 130px; height: auto; }
#marvels-kids .mk-opt.size { padding: 8px 6px 12px; font-size: 20px; }
#marvels-kids .mk-opt.size svg { max-width: min(250px, 25vh); max-width: min(250px, 25dvh); filter: drop-shadow(0 4px 3px rgba(74, 59, 92, .15)); }
#marvels-kids .mk-opt.size[aria-pressed="true"] svg { animation: mk-wiggle .5s ease; }
@keyframes mk-wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
#marvels-kids .mk-opt i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-style: normal; font-size: 32px; box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .15); }
#marvels-kids .mk-opt.drip { font-size: 13px; padding: 10px 4px; border-radius: 18px; }
#marvels-kids .mk-opt.drip i { width: 44px; height: 44px; font-size: 18px; color: #b9a9c4; background: #f6f1f8; }
#marvels-kids .mk-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
#marvels-kids .mk-sw { width: 56px; height: 56px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--line), inset 0 -5px 10px rgba(0, 0, 0, .12); transition: transform .15s; }
#marvels-kids .mk-sw[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--pink); transform: scale(1.1); }

/* Stickers */
#marvels-kids .mk-hint { margin: -6px 0 12px; font-size: 15px; font-weight: 600; color: #7a6c88; }
#marvels-kids .mk-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
#marvels-kids .mk-sticker { aspect-ratio: 1; border-radius: 18px; background: #fff; border: 3px dashed #e8d6ec; display: grid; place-items: center; padding: 6px; touch-action: none; transition: transform .15s, border-color .15s; }
#marvels-kids .mk-sticker:hover { border-color: var(--pink); transform: rotate(-4deg) scale(1.05); }
#marvels-kids .mk-sticker svg { width: 100%; height: auto; aspect-ratio: 1; pointer-events: none; }
#marvels-kids .mk-sticker { overflow: hidden; }
#marvels-kids .mk-name { display: block; margin-top: 16px; font-size: 17px; font-weight: 800; }
#marvels-kids .mk-name input { display: block; width: 100%; max-width: 320px; margin-top: 6px; height: 54px; padding: 0 16px; border: 3px solid var(--line); border-radius: 16px; font: 700 22px var(--round); color: var(--ink); background: #fff; box-shadow: none; -webkit-user-select: text; user-select: text; }
#marvels-kids .mk-name input:focus { border-color: var(--pink); outline: 0; }
#marvels-kids .mk-row { display: flex; gap: 10px; margin-top: 16px; }
#marvels-kids .mk-small { height: 44px; padding: 0 18px; border-radius: 999px; background: var(--sky); font-weight: 800; }
#marvels-kids .mk-row { flex-wrap: wrap; }
#marvels-kids .mk-eraser[aria-pressed="true"] { background: var(--pink); color: #fff; box-shadow: 0 0 0 4px var(--blush); }
/* eraser on: the stickers on the cake wobble, ready to be rubbed off */
/* eraser on: the pointer is a rubber (its tip at the bottom left does the rubbing); on touch screens one follows the finger */
#marvels-kids.mk-erasing .mk-cakebox svg, #marvels-kids.mk-erasing .mk-cakebox svg * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g transform='rotate(-40 22 22)' stroke='%234a3b5c' stroke-width='2.2' stroke-linejoin='round'><rect x='5' y='14' width='34' height='16' rx='4' fill='%23ff9ec4'/><path d='M22,14 h13 a4,4 0 0 1 4,4 v8 a4,4 0 0 1 -4,4 h-13 Z' fill='%237ec8f2'/><path d='M9,18 v8' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/></g></svg>") 7 34, crosshair; }
#marvels-kids .mk-rub-ico { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g transform='rotate(-40 22 22)' stroke='%234a3b5c' stroke-width='2.2' stroke-linejoin='round'><rect x='5' y='14' width='34' height='16' rx='4' fill='%23ff9ec4'/><path d='M22,14 h13 a4,4 0 0 1 4,4 v8 a4,4 0 0 1 -4,4 h-13 Z' fill='%237ec8f2'/><path d='M9,18 v8' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/></g></svg>") center / contain no-repeat; }
.mk-rubber { position: fixed; left: 0; top: 0; width: 66px; height: 66px; margin: -51px 0 0 -10px; z-index: 2000; pointer-events: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g transform='rotate(-40 22 22)' stroke='%234a3b5c' stroke-width='2.2' stroke-linejoin='round'><rect x='5' y='14' width='34' height='16' rx='4' fill='%23ff9ec4'/><path d='M22,14 h13 a4,4 0 0 1 4,4 v8 a4,4 0 0 1 -4,4 h-13 Z' fill='%237ec8f2'/><path d='M9,18 v8' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.7'/></g></svg>") center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(74, 59, 92, .3)); }
#marvels-kids.mk-erasing .stk > :first-child { animation: mk-shake .6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes mk-shake { 25% { rotate: -5deg; } 75% { rotate: 5deg; } }

.mk-ghost { position: fixed; left: -36px; top: -36px; width: 72px; height: 72px; z-index: 2000; pointer-events: none; opacity: .85; filter: drop-shadow(0 8px 8px rgba(74, 59, 92, .3)); }
.mk-ghost.ok { opacity: 1; }
.mk-ghost svg { width: 100%; height: 100%; overflow: visible; }

/* All done */
#marvels-kids .mk-done { text-align: center; padding: 20px 0; }
#marvels-kids .mk-done h2 { font-size: clamp(30px, 4vw, 44px); }
#marvels-kids .mk-done .mk-stars { font-size: 46px; color: #f2b632; letter-spacing: 6px; margin: 0 0 10px; text-shadow: 0 2px 0 #c98f16; animation: mk-star .8s cubic-bezier(.2, 1.6, .4, 1); }
#marvels-kids .mk-done p { font-size: 18px; max-width: 26em; margin: 0 auto 22px; }
#marvels-kids .mk-big { display: block; width: 100%; max-width: 420px; margin: 0 auto 14px; min-height: 64px; padding: 10px 24px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 5px 0 #2e2440; }
#marvels-kids .mk-link { font-size: 17px; font-weight: 800; color: var(--pink); text-decoration: underline; text-underline-offset: 4px; padding: 8px; }

/* Sparkles, poofs and confetti: a fixed layer on <body> */
.mk-fx { position: fixed; inset: 0; pointer-events: none; z-index: 2000; overflow: hidden; }
.mk-spark { position: fixed; font-size: 16px; line-height: 1; transform: translate(-50%, -50%); animation: mk-spark .75s ease-out forwards; }
.mk-confetto { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: mk-fall 2.4s cubic-bezier(.25, .6, .5, 1) forwards; }

@keyframes mk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mk-hop { 0% { transform: scale(1.08) translateY(0); } 40% { transform: scale(1.12) translateY(-12px); } 100% { transform: scale(1.08) translateY(0); } }
@keyframes mk-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes mk-bubble { from { transform: scale(.92); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes mk-star { 0% { transform: scale(.3) rotate(-20deg); } 70% { transform: scale(1.2) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mk-drop { 0% { transform: scale(1.5) translateY(-20px); opacity: .5; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes mk-flicker { 0% { transform: scale(1, 1) skewX(0deg); } 40% { transform: scale(.92, 1.08) skewX(3deg); } 100% { transform: scale(1.04, .95) skewX(-3deg); } }
@keyframes mk-spark { from { opacity: 1; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); } }
@keyframes mk-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }

/* Phones and portrait tablets: the cake on top, the choices underneath */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    #marvels-kids .mk-steps { position: static; transform: none; flex-direction: row; padding: 0; background: none; box-shadow: none; border-radius: 0; }
    #marvels-kids .mk-steps button { width: auto; flex-direction: row; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 999px; }
    #marvels-kids .mk-steps i { font-size: 24px; }
    #marvels-kids .mk-steps span { font-size: 15px; }
    #marvels-kids .mk-main { --dh: 58%; }
    #marvels-kids .mk-stage { right: 0; bottom: var(--dh); }
    #marvels-kids .mk-panel { top: auto; left: 0; width: auto; height: var(--dh); }
    #marvels-kids.mk-closed .mk-stage { bottom: 0; }
    #marvels-kids.mk-closed .mk-panel { transform: translateY(100%); }
    #marvels-kids .mk-drawer-tab { top: -38px; left: 50%; width: 96px; height: 40px; margin: 0 0 0 -48px; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 16px rgba(74, 59, 92, .08); }
    #marvels-kids .mk-drawer-tab .chev { transform: translateY(-3px) rotate(45deg); }
    #marvels-kids.mk-closed .mk-drawer-tab .chev { transform: translateY(4px) rotate(-135deg); }
    #marvels-kids.mk-closed .mk-drawer-tab { animation-name: mk-nudge-up; }
    @keyframes mk-nudge-up { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -8px; } 90% { translate: 0 0; } }
    #marvels-kids .mk-cakebox { inset: 0 10px 6px; }
    #marvels-kids .mk-panel, #marvels-kids .mk-guide { border-radius: 28px 28px 0 0; }
    #marvels-kids .mk-panel { box-shadow: 0 -6px 30px rgba(74, 59, 92, .08); }
}
@media (max-width: 760px) {
    #marvels-kids .mk-logo { display: none; }
    #marvels-kids .mk-steps { gap: 6px; }
    #marvels-kids .mk-steps button { width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
    #marvels-kids .mk-steps i { font-size: 22px; }
    #marvels-kids .mk-steps span { display: none; }
    #marvels-kids .mk-steps b { width: 20px; height: 20px; font-size: 12px; top: -5px; right: -6px; }
    #marvels-kids .mk-tools { flex: 0 0 auto; }
    #marvels-kids .mk-tool { height: 38px; padding: 0 12px; font-size: 14px; }
    #marvels-kids .mk-guide { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; padding: 10px 10px 6px; }
    #marvels-kids .mk-char span { font-size: 10px; }
    #marvels-kids .mk-bubble { font-size: 14px; padding: 8px 12px; min-height: 0; }
    #marvels-kids .mk-body { padding: 4px 14px 12px; }
    #marvels-kids h2 { font-size: 22px; margin-bottom: 10px; }
    #marvels-kids .mk-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    #marvels-kids .mk-grid.five { gap: 5px; }
    #marvels-kids .mk-opt { font-size: 14px; padding: 8px 4px; border-radius: 16px; }
    #marvels-kids .mk-opt i { width: 50px; height: 50px; font-size: 26px; }
    #marvels-kids .mk-opt.size { font-size: 15px; padding: 6px 2px 10px; }
    #marvels-kids .mk-small { height: 40px; padding: 0 12px; font-size: 14px; }
    #marvels-kids .mk-row { gap: 6px; margin-top: 10px; }
    #marvels-kids .mk-opt.drip { font-size: 11px; }
    #marvels-kids .mk-opt.drip i { width: 34px; height: 34px; }
    #marvels-kids .mk-sw { width: 46px; height: 46px; }
    #marvels-kids .mk-hint { display: none; }   /* Biscuit says it; the whole sticker sheet fits without scrolling */
    #marvels-kids .mk-tray { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    #marvels-kids .mk-sticker { border-radius: 14px; padding: 4px; }
    #marvels-kids .mk-bar { padding: 8px 14px max(10px, env(safe-area-inset-bottom)); }
    #marvels-kids .mk-next, #marvels-kids .mk-back { min-height: 52px; font-size: 19px; padding: 0 26px; }
    #marvels-kids .mk-back { padding: 0 20px; }
}
/* Backgrounds to play with (kids.js BGS): the scene behind everything, its scattered bits, and the picker */
#marvels-kids .mk-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transition: background .4s; }
#marvels-kids .mk-scene i { position: absolute; transform: translate(-50%, -50%); opacity: .9; animation: mk-float 5s ease-in-out infinite; }
#marvels-kids .mk-scene svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes mk-float { 50% { translate: 0 -8px; } }
@keyframes mk-drift { from { translate: -14px 0; } to { translate: 14px 0; } }
@keyframes mk-twinkle { 50% { opacity: .3; scale: .8; } }
@keyframes mk-spin { to { rotate: 360deg; } }
#marvels-kids[data-bg="candy"] .mk-scene { background: linear-gradient(180deg, #f6cad9 0%, #f9dbe5 40%, #fce8ef 70%, #fef3f6 100%); }
#marvels-kids[data-bg="candy"] .mk-land { opacity: .62; }
/* the candy land's clouds drift and its hearts bob (kids.js CANDYLAND) */
#marvels-kids .mk-land .cl-drift { animation: cl-drift 16s ease-in-out infinite alternate; }
#marvels-kids .mk-land .cl-bob { animation: cl-bob 3.6s ease-in-out infinite; }
@keyframes cl-drift { from { translate: -70px 0; } to { translate: 70px 0; } }
@keyframes cl-bob { 50% { translate: 0 -22px; } }
#marvels-kids[data-bg="sky"] .mk-scene { background: linear-gradient(180deg, #8ccbff 0%, #c4e5ff 55%, #eef8ff 100%); }
#marvels-kids[data-bg="sky"] .mk-scene i { animation: mk-drift 9s ease-in-out infinite alternate; opacity: .95; }
#marvels-kids[data-bg="rainbow"] .mk-scene { background: linear-gradient(180deg, #ffe6f1 0%, #fff6dd 50%, #e3f2ff 100%); }
#marvels-kids[data-bg="unicorn"] .mk-scene { background: radial-gradient(45% 40% at 50% 45%, #fff 0%, transparent 100%), linear-gradient(160deg, #e6cfff 0%, #ffd0e4 35%, #fff0c4 60%, #cdeeff 100%); }
#marvels-kids[data-bg="unicorn"] .mk-scene i { opacity: .45; }
#marvels-kids[data-bg="balloons"] .mk-scene { background: linear-gradient(180deg, #fff3cf 0%, #ffe3ee 100%); }
#marvels-kids[data-bg="balloons"] .mk-scene i { animation-duration: 4s; }
#marvels-kids[data-bg="night"] .mk-scene { background: radial-gradient(60% 50% at 30% 30%, #4b3f8f 0%, transparent 70%), linear-gradient(180deg, #1b2050 0%, #34296a 65%, #523a7f 100%); }
#marvels-kids[data-bg="night"] .mk-scene i { animation: mk-twinkle 2.6s ease-in-out infinite; }
#marvels-kids[data-bg="night"] .mk-logo { color: #f3d98a; }
#marvels-kids[data-bg="night"] .mk-logo img { filter: brightness(1.9) saturate(.8); }
#marvels-kids .mk-sun { animation: mk-spin 40s linear infinite; }

#marvels-kids .mk-bgpick { position: absolute; z-index: 3; left: 16px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#marvels-kids .mk-bgbtn { height: 46px; padding: 0 18px 0 12px; border-radius: 999px; background: #fff; border: 3px solid var(--line); font-weight: 800; font-size: 16px; box-shadow: 0 4px 14px rgba(74, 59, 92, .12); }
#marvels-kids .mk-bgbtn[aria-expanded="true"] { border-color: var(--pink); }
#marvels-kids .mk-bgbtn span { font-size: 20px; vertical-align: -2px; margin-right: 4px; }
#marvels-kids .mk-bglist { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; max-width: calc(100vw - 32px); border-radius: 30px; background: #fff; box-shadow: 0 6px 24px rgba(74, 59, 92, .18); animation: mk-enter .25s ease-out; }
#marvels-kids .mk-bgopt { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); font-size: 26px; display: grid; place-items: center; transition: transform .15s; }
#marvels-kids .mk-bgopt:hover { transform: scale(1.08); }
#marvels-kids .mk-bgopt[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--pink); }
#marvels-kids .mk-bgopt.bg-candy { background: linear-gradient(180deg, #f9c9dc 0 55%, #fff1ea 55% 70%, #ffc4d6 70%); }
#marvels-kids .mk-bgopt.bg-sky { background: linear-gradient(180deg, #8ccbff, #eef8ff); }
#marvels-kids .mk-bgopt.bg-rainbow { background: conic-gradient(from 270deg at 50% 100%, #ff8f8f, #ffb86b, #ffe36b, #8fe39a, #7cc8ff, #9a9cff, #d39bff 50%, #fff6dd 50%); }
#marvels-kids .mk-bgopt.bg-unicorn { background: linear-gradient(160deg, #e6cfff, #ffd0e4 45%, #fff0c4 70%, #cdeeff); }
#marvels-kids .mk-bgopt.bg-balloons { background: linear-gradient(180deg, #fff3cf, #ffe3ee); }
#marvels-kids .mk-bgopt.bg-night { background: linear-gradient(180deg, #1b2050, #523a7f); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
    #marvels-kids .mk-bgpick { left: 10px; bottom: 8px; }
    #marvels-kids .mk-bgbtn { height: 38px; font-size: 14px; padding: 0 12px 0 8px; }
    #marvels-kids .mk-bgopt { width: 44px; height: 44px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    #marvels-kids *, #marvels-kids *::before { animation: none !important; transition: none !important; }
}
/* the flavour slice in front of the cake: it hops when the flavour changes */
#marvels-kids .mk-slice-cake { transform-box: fill-box; transform-origin: 50% 100%; }
#marvels-kids .mk-slice-cake.pop { animation: mk-slice-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes mk-slice-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } }
/* the chosen sticker's resize handle */
#marvels-kids .mk-handle { cursor: nwse-resize; }
#marvels-kids .mk-handle circle + circle { filter: drop-shadow(0 2px 3px rgba(74, 59, 92, .3)); }
#marvels-kids .mk-resize { position: absolute; top: 12px; left: 16px; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 16px rgba(74, 59, 92, .15); animation: mk-enter .25s ease-out; }
#marvels-kids .mk-resize[hidden] { display: none; }
#marvels-kids .mk-resize > span { font-weight: 800; padding: 0 4px 0 10px; }
#marvels-kids .mk-resize button { height: 44px; padding: 0 16px; border-radius: 999px; background: var(--blush); font-weight: 800; }
@media (max-width: 760px) {
    #marvels-kids .mk-resize { top: 4px; left: 10px; }
    #marvels-kids .mk-resize > span { display: none; }
    #marvels-kids .mk-resize button { height: 38px; padding: 0 12px; font-size: 14px; }
}
/* a new step's panel fades in; the cake bounces when its size changes */
#marvels-kids .mk-body.enter { animation: mk-enter .35s ease-out; }
@keyframes mk-enter { from { opacity: 0; transform: translateY(10px); } }
#marvels-kids .mk-cake.grow { transform-box: fill-box; transform-origin: 50% 100%; animation: mk-grow .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes mk-grow { 0% { transform: scale(.85, .8); } 60% { transform: scale(1.04, 1.06); } }
/* the flavour picture: moved and resized like a sticker; it hops when the flavour changes */
#marvels-kids .mk-flav { cursor: grab; }
#marvels-kids .mk-flav.lifted { cursor: grabbing; filter: drop-shadow(0 8px 6px rgba(74, 59, 92, .25)); }
#marvels-kids .mk-flav-in { transform-box: fill-box; transform-origin: 50% 100%; }
#marvels-kids .mk-flav-in.pop { animation: mk-slice-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
/* the selection's cross */
#marvels-kids .mk-del { cursor: pointer; }
#marvels-kids .mk-del circle + circle { filter: drop-shadow(0 2px 3px rgba(74, 59, 92, .3)); }