#game-root {
    --mc-accent: #10B981;
    --mc-accent-dark: #0c8d64;
    --mc-accent-light: #e3f9ef;
    --mc-accent-border: #a7f3d0;
    --mc-glass-bg: rgba(255, 255, 255, .72);
    --mc-glass-border: rgba(255, 255, 255, .5);
    --mc-text: var(--kw-text, #2D2A32);
    --mc-letter: #1d4ed8;
}

#game-root .kwi-muted { color: #cbd5e1; }

.mc-wrap {
    max-width: 960px;
    margin: 0 auto;
}

.mc-wrap-narrow {
    max-width: 560px;
}

.mc-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.mc-spacer {
    flex: 1 1 auto;
}

/* ---- loading / error ---- */

.mc-status {
    text-align: center;
    padding: 48px 16px;
}

.mc-status-icon {
    font-size: 44px;
    margin-bottom: 10px;
    color: #fff;
}

.mc-pulse {
    animation: mc-pulse 1.2s ease-in-out infinite;
}

.mc-status-text {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.mc-status-error {
    display: inline-block;
    background: #EF4444;
    padding: 6px 16px;
    border-radius: 999px;
    text-shadow: none;
}

/* ---- header / level picker ---- */

.mc-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mc-header-icon {
    display: flex;
    font-size: 32px;
    line-height: 1;
}

.mc-header-icon img {
    display: block;
    height: 38px;
    width: auto;
}

.mc-header-title {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.mc-levels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.mc-level-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mc-glass-border);
    border-radius: var(--kw-radius, 12px);
    background: var(--mc-glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

.mc-level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .14);
}

.mc-level-thumb {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-size: 38px;
    background: linear-gradient(135deg, var(--mc-accent-light), var(--mc-accent-border));
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center;
}

.mc-level-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 16px;
}

.mc-level-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--mc-text);
}

.mc-level-age {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc-accent-dark);
    background: var(--mc-accent-light);
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---- pills and buttons ---- */

.mc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--mc-accent-light);
    color: var(--mc-accent-dark);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.2;
}

.mc-pill-icon {
    display: inline-flex;
    line-height: 1;
}

.mc-pill-icon img {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: cover;
    border-radius: 50%;
}

.mc-pill-icon svg {
    width: 12px;
    height: 12px;
}

.mc-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: rgba(255, 255, 255, .85);
    color: var(--mc-accent-dark);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}

.mc-chip-btn:hover {
    background: #fff;
}

.mc-btn-primary,
.mc-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform .1s ease;
}

.mc-btn-primary:active,
.mc-btn-secondary:active {
    transform: translateY(2px);
}

.mc-btn-primary {
    background: var(--mc-accent);
    color: #fff;
    box-shadow: 0 3px 0 var(--mc-accent-dark);
}

.mc-btn-primary:hover {
    background: var(--mc-accent-dark);
}

.mc-btn-secondary {
    background: var(--mc-accent-light);
    color: var(--mc-accent-dark);
}

.mc-btn-secondary:hover {
    background: var(--mc-accent-border);
}

/* ---- the scene ---- */

.mc-stage {
    position: relative;
    height: 560px;
    /* clip, not just hidden: focus/scrollIntoView must never scroll the scene
       sideways (drifting clouds and sparkles overflow it) */
    overflow: hidden;
    overflow: clip;
    border-radius: var(--kw-radius, 12px);
    background: linear-gradient(180deg, #38bdf8 0%, #7dd3fc 40%, #e0f2fe 72%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mc-cloud {
    position: absolute;
    left: 0;
    width: 120px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    animation: mc-drift 46s linear infinite;
}

.mc-cloud::before,
.mc-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.mc-cloud::before {
    width: 54px;
    height: 54px;
    left: 18px;
    top: -26px;
}

.mc-cloud::after {
    width: 40px;
    height: 40px;
    left: 62px;
    top: -18px;
}

.mc-cloud-1 { top: 205px; animation-delay: -8s; }
.mc-cloud-2 { top: 300px; transform: scale(.75); animation-duration: 60s; animation-delay: -30s; }
.mc-cloud-3 { top: 250px; transform: scale(1.15); animation-duration: 54s; animation-delay: -44s; }

.mc-ground {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 46%;
}

/* the cute scenery on the hills: everything moves a little, out of step */
.mc-sway,
.mc-bob,
.mc-peek,
.mc-ear {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.mc-sway { animation: mc-sway 3.2s ease-in-out infinite; }
.mc-sway-2 { animation-duration: 2.6s; }
.mc-bob { animation: mc-bob 2.8s ease-in-out infinite; }
.mc-peek { animation: mc-peek 4s ease-in-out infinite; }
.mc-ear { animation: mc-ear 2.4s ease-in-out infinite; }
.mc-ear-2 { animation-delay: -1.2s; }
.mc-scenery-1 .mc-sway, .mc-scenery-1 .mc-bob, .mc-scenery-1 .mc-peek { animation-delay: -1.1s; }
.mc-scenery-2 .mc-sway, .mc-scenery-2 .mc-bob, .mc-scenery-2 .mc-peek { animation-delay: -2.2s; }

/* ---- HUD and picture card ---- */

.mc-hud {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.mc-round,
.mc-score,
.mc-streak {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.mc-round {
    background: #1d4ed8;
    color: #fff;
}

.mc-score {
    background: #fff;
    color: #b45309;
}

.mc-score svg { color: #f59e0b; }

.mc-streak {
    background: #fff7ed;
    color: #ea580c;
    animation: mc-pop .3s ease;
}

.mc-streak[hidden] { display: none; }

.mc-card {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, .18);
    z-index: 2;
}

.mc-card-in {
    animation: mc-card-in .35s ease;
}

.mc-pic {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    line-height: 1;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mc-accent-light), #e0f2fe);
}

.mc-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-prompt {
    font-size: 21px;
    font-weight: 900;
    color: #1e3a8a;
    line-height: 1.25;
}

.mc-speak {
    flex: 0 0 auto;
    align-self: flex-start;
}

/* ---- word tiles ---- */

.mc-mid {
    position: absolute;
    top: 222px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* --mc-fs is set by sizeTiles(): the biggest font whose rows still fit
   between the picture card and the crossbow */
.mc-tiles {
    --mc-fs: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: calc(var(--mc-fs) * .38);
    max-width: calc(100% - 16px);
    padding-bottom: 4px;
}

.mc-tile {
    position: relative;
    flex: 0 0 auto;
    height: calc(var(--mc-fs) * 1.9);
    margin: 0 calc(var(--mc-fs) * .16);
    padding: 0 calc(var(--mc-fs) * .45);
    border: 3px solid #bfdbfe;
    border-radius: calc(var(--mc-fs) * .45);
    background: #fff;
    color: var(--mc-letter);
    font-family: inherit;
    font-size: var(--mc-fs);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 4px 0 #93c5fd, 0 6px 10px rgba(30, 64, 175, .18);
    cursor: crosshair;
    overflow: visible;
    transition: opacity .25s ease, background .2s ease, border-color .2s ease;
}

.mc-tile-new {
    animation: mc-tile-in .4s ease both;
    animation-delay: calc(var(--i) * 45ms);
}

.mc-tile:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

.mc-tile-aim {
    border-color: #f59e0b;
}

.mc-tile-hint {
    border-color: #f59e0b;
    background: #fef9c3;
    animation: mc-hint 1s ease-in-out infinite;
}

.mc-tile-shield {
    animation: mc-shake .45s ease;
}

.mc-tile-shield::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    border: 3px solid rgba(56, 189, 248, .9);
    background: radial-gradient(ellipse, rgba(186, 230, 253, .1) 40%, rgba(56, 189, 248, .45) 100%);
    box-shadow: 0 0 14px rgba(56, 189, 248, .8);
    animation: mc-shield .75s ease forwards;
    pointer-events: none;
}

.mc-tile-pop {
    animation: mc-tile-pop .32s ease forwards;
    pointer-events: none;
}

/* closeUp() slides the other tiles into place */
.mc-tile-gone {
    display: none;
}

.mc-tiles-solved .mc-tile {
    background: #dcfce7;
    border-color: #4ade80;
    color: #15803d;
    box-shadow: 0 4px 0 #86efac, 0 6px 12px rgba(21, 128, 61, .2);
    animation: mc-hop .5s ease both;
    animation-delay: calc(var(--i) * 60ms);
}

.mc-msg {
    margin-top: 12px;
    max-width: calc(100% - 24px);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    color: #1e3a8a;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.mc-msg:empty { visibility: hidden; }
.mc-msg-good { color: #047857; }
.mc-msg-bad { color: #b91c1c; background: #fff1f2; }
.mc-msg-hint { color: #92400e; background: #fef9c3; }

.mc-msg-win {
    color: #fff;
    background: var(--mc-accent);
    font-size: 18px;
    animation: mc-pop .35s ease;
}

/* ---- crossbow, arrow, reticle ---- */

.mc-bow {
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 180px;
    height: 198px;
    margin-left: -90px;
    transform-origin: 50% 72.7273%;
    transition: transform .2s ease-out;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(76, 29, 149, .35));
}

.mc-bow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mc-bow .mc-string-free { display: none; }
.mc-bow-fired .mc-string-free { display: inline; }
.mc-bow-fired .mc-string-loaded { display: none; }

.mc-bow-arrow {
    transition: opacity .2s ease, transform .25s ease;
}

.mc-bow-fired .mc-bow-arrow {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
}

.mc-bow-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: mc-glow 2.2s ease-in-out infinite;
}

.mc-twinkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: mc-twinkle 1.8s ease-in-out infinite;
}

.mc-twinkle-2 { animation-delay: -.6s; }
.mc-twinkle-3 { animation-delay: -1.2s; }

.mc-arrow {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(244, 114, 182, .9));
}

.mc-arrow[hidden] { display: none; }

.mc-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mc-reticle {
    --mc-ret: 60px;
    position: absolute;
    width: var(--mc-ret);
    height: var(--mc-ret);
    transform: translate(-50%, -50%);
    transition: left .15s ease-out, top .15s ease-out;
    z-index: 3;
    pointer-events: none;
}

.mc-reticle[hidden] { display: none; }

.mc-reticle svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: mc-spin 4s linear infinite;
}

/* ---- effects ---- */

.mc-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.mc-spark,
.mc-trail,
.mc-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--c);
}

.mc-spark {
    border-radius: 50%;
    box-shadow: 0 0 8px var(--c);
    animation: mc-burst .75s ease-out forwards;
}

.mc-trail {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    box-shadow: 0 0 6px var(--c);
    animation: mc-trail .6s ease-out forwards;
}

.mc-confetti {
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation: mc-confetti 1.1s ease-out forwards;
}

.mc-pop-points {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 900;
    color: #f59e0b;
    text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255, 255, 255, .9);
    animation: mc-float 1.3s ease-out forwards;
}

/* ---- results ---- */

.mc-done-card {
    text-align: center;
    background: var(--mc-glass-bg);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--mc-glass-border);
    border-radius: var(--kw-radius, 12px);
    padding: 20px 18px 22px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
    animation: mc-pop .3s ease;
}

.mc-done-hero {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
}

.mc-done-target {
    display: block;
    font-size: 84px;
    line-height: 1;
}

.mc-medal {
    position: absolute;
    right: -14px;
    bottom: -4px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.mc-medal svg {
    width: 18px;
    height: 18px;
}

.mc-medal-1 { background: #94a3b8; }
.mc-medal-2 { background: #c2703d; }
.mc-medal-3 { background: var(--mc-accent); }
.mc-medal-4 { background: #f59e0b; }

.mc-done-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--mc-text);
    margin: 6px 0;
}

.mc-done-stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    color: #f59e0b;
    margin-bottom: 8px;
}

.mc-star svg {
    width: 26px;
    height: 26px;
}

.mc-done-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--mc-text);
    margin-bottom: 12px;
}

.mc-done-score b {
    font-size: 22px;
    color: var(--mc-accent-dark);
}

.mc-done-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.mc-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--mc-accent-light);
    color: var(--mc-accent-dark);
    font-size: 13px;
    font-weight: 800;
}

.mc-stat svg {
    width: 14px;
    height: 14px;
}

.mc-stat-miss {
    background: #fee2e2;
    color: #b91c1c;
}

.mc-stat-fire {
    background: #ffedd5;
    color: #c2410c;
}

.mc-practice {
    margin: 14px auto 0;
    padding: 10px 12px 12px;
    max-width: 460px;
    border-radius: var(--kw-radius, 12px);
    background: #fff7ed;
    box-shadow: inset 0 0 0 2px #fed7aa;
}

.mc-practice[hidden] { display: none; }

.mc-practice-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    color: #c2410c;
    margin-bottom: 8px;
}

.mc-practice-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* a whole sentence each, so a stacked list rather than pills */
.mc-practice-chip {
    padding: 6px 12px;
    border-radius: 10px;
    text-align: left;
    background: #fff;
    color: var(--mc-text);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.mc-done-share {
    justify-content: center;
    margin-top: 16px;
}

.mc-done-actions {
    justify-content: center;
    margin-top: 16px;
}

/* ---- phones ---- */

@media (max-width: 560px) {
    .mc-stage { height: 520px; }
    .mc-card { top: 48px; gap: 10px; padding: 8px 10px; }
    .mc-pic { width: 76px; height: 76px; font-size: 50px; }
    .mc-prompt { font-size: 17px; }
    .mc-mid { top: 190px; }
    .mc-msg { font-size: 14px; }
    .mc-bow { width: 144px; height: 158px; margin-left: -72px; bottom: -26px; }
    .mc-cloud-1 { top: 175px; }
    .mc-cloud-2 { top: 280px; }
    .mc-cloud-3 { top: 230px; }
    .mc-round, .mc-score, .mc-streak { font-size: 13px; padding: 4px 11px; }
    .mc-levels { gap: 10px; }
    .mc-header-title { font-size: 20px; }
}

/* ---- keyframes ---- */

@keyframes mc-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

@keyframes mc-pop {
    0% { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes mc-card-in {
    0% { opacity: 0; transform: translate(-50%, -10px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes mc-tile-in {
    0% { opacity: 0; transform: translateY(-24px) scale(.7); }
    100% { opacity: 1; transform: none; }
}

@keyframes mc-tile-pop {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.3) rotate(-8deg); opacity: 1; background: #fef9c3; }
    100% { transform: scale(.2) rotate(25deg); opacity: 0; }
}

@keyframes mc-hint {
    0%, 100% { box-shadow: 0 4px 0 #fcd34d, 0 0 0 0 rgba(250, 204, 21, .7); transform: none; }
    50% { box-shadow: 0 4px 0 #fcd34d, 0 0 18px 6px rgba(250, 204, 21, .75); transform: translateY(-3px); }
}

@keyframes mc-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes mc-shield {
    0% { opacity: 0; transform: scale(.6); }
    30% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.15); }
}

@keyframes mc-hop {
    0% { transform: translateY(0); }
    40% { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

@keyframes mc-burst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

@keyframes mc-trail {
    0% { transform: scale(1); opacity: .9; }
    100% { transform: translateY(8px) scale(.1); opacity: 0; }
}

@keyframes mc-confetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}

@keyframes mc-float {
    0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
    20% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -160%) scale(1); opacity: 0; }
}

@keyframes mc-glow {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes mc-twinkle {
    0%, 100% { opacity: .2; transform: scale(.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes mc-spin {
    to { transform: rotate(360deg); }
}

@keyframes mc-sway {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}

@keyframes mc-bob {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.04, .96); }
}

@keyframes mc-peek {
    0%, 55%, 100% { transform: translateY(0); }
    70%, 85% { transform: translateY(14px); }
}

@keyframes mc-ear {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(-12deg); }
    90% { transform: rotate(8deg); }
}

@keyframes mc-drift {
    from { margin-left: -160px; }
    to { margin-left: 120%; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-cloud, .mc-sway, .mc-bob, .mc-peek, .mc-ear, .mc-bow-glow, .mc-twinkle, .mc-reticle svg { animation: none; }
}