/* =====================================================================
   Mascot mini-games (Living Mascot Plan step 3, switch Mascot:Games).
   wwwroot/js/mascot-games.js builds .mg-stage over the mascot's floor
   and the offer bubble; the mascot's game poses (data-act) are here too.
   Items move by transform only; reduced motion drops every animation and
   transition, and the script places items in place instead of flying them.
   ===================================================================== */

.mg-stage {
    position: absolute;
    z-index: 4;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mg-field { position: absolute; inset: 0; outline: none; }
.mg-field:focus-visible { border-radius: 1rem; box-shadow: inset 0 0 0 2px oklch(var(--a) / 0.6); }

.mg-hud {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.25rem 0.15rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
}
.mg-hud .mg-title { font-weight: 800; color: oklch(var(--a)); }
.mg-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
}
.mg-close:focus-visible { outline: 2px solid oklch(var(--a)); }

/* Tappable things: a 44 px target around a smaller drawing */
.mg-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    will-change: transform;
}
.mg-item svg { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.mg-item:disabled { cursor: default; }
.mg-item.is-popped svg { animation: mg-pop 0.35s ease-out forwards; }
.mg-item.is-missed { opacity: 0.25; transition: opacity 0.3s ease; }
.mg-plus {
    position: absolute;
    left: 50%;
    top: -4px;
    font-size: 0.8rem;
    font-weight: 800;
    color: oklch(var(--a));
    transform: translateX(-50%);
    animation: mg-plus 0.45s ease-out forwards;
}
.mg-ball { padding: 7px; }
.mg-ball.is-hit svg { animation: mg-pop-in 0.25s ease-out; }

/* Cups shuffle */
.mg-cup { width: 60px; height: 64px; margin: -10px 0 0 -8px; padding: 4px; }
.mg-cup.is-ready { transition: transform 0.36s ease-in-out; }
.mg-cup svg { transition: transform 0.3s ease; }
.mg-cup.is-up svg { transform: translateY(-30px) rotate(-6deg); }
.mg-cup:not(:disabled):hover svg,
.mg-cup:not(:disabled):focus-visible svg { transform: translateY(-4px); }
.mg-cup:focus-visible { outline: 2px solid oklch(var(--a)); outline-offset: 2px; }
.mg-cup.is-swapping svg { filter: drop-shadow(0 0 6px oklch(var(--a))); }
.mg-cup.is-right svg { filter: drop-shadow(0 0 8px #4ade80); }
.mg-cup.is-wrong svg { filter: drop-shadow(0 0 8px #f87171); }
.mg-under { opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.mg-under.is-shown { opacity: 1; }

/* Copy me */
.mg-moves {
    position: absolute;
    left: 50%;
    bottom: 2px;
    display: flex;
    gap: 0.3rem;
    transform: translateX(-50%);
}
.mg-move {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 3.1rem;
    min-height: 44px;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.mg-move:disabled { opacity: 0.45; cursor: default; }
.mg-move:not(:disabled):active { transform: scale(0.95); }
.mg-move:focus-visible { outline: 2px solid oklch(var(--a)); }
.mg-move kbd { position: absolute; top: 2px; right: 4px; font-size: 0.55rem; opacity: 0.6; }
.mg-caption {
    position: absolute;
    left: 50%;
    top: 2rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
    white-space: nowrap;
}

/* How it went */
.mg-result {
    position: absolute;
    left: 50%;
    top: 2.1rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    max-width: calc(100% - 1rem);
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.78rem;
    text-align: center;
    color: oklch(var(--bc));
    background: oklch(var(--b1) / 0.95);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%);
}
.mg-result-line { margin: 0; font-weight: 700; }
.mg-result-actions { display: flex; gap: 0.3rem; }
.mg-nudge { font-size: 0.72rem; font-weight: 700; color: oklch(var(--p)); }

/* The offer bubble above the bored mascot */
.mg-offer { position: absolute; z-index: 5; transform: translate(-50%, -100%); }
.mg-offer-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.35rem 0.8rem;
    border: 0;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    color: oklch(var(--ac));
    background: oklch(var(--a));
    box-shadow: 0 8px 18px -8px oklch(var(--a) / 0.9);
    cursor: pointer;
    animation: mg-offer 0.35s ease-out;
}
.mg-offer-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
.mg-offer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Screen-reader live region */
.mg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- The mascot's game poses ---- */
.mascot-walker[data-act="offer"] .pp-arm-l { animation: pp-wave-fast 0.55s ease-in-out infinite; }
.mascot-walker[data-act="offer"] .m-gaze { transform: translate(0, -3px) !important; }
.mascot-walker[data-act="toss"] .pp-arm-l { animation: mg-toss 0.32s ease-out; }
.mascot-walker[data-act="head"] .pp-float { animation: mg-head 0.45s ease-out; }
.mascot-walker[data-act="head"] .m-gaze,
.mascot-walker[data-act="toss"] .m-gaze { transform: translate(0, -4px) !important; }
.mascot-walker[data-act="oops-small"] .m-sweat { opacity: 1; }
.mascot-walker[data-act="oops-small"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="oops-small"] .m-mouth-o { opacity: 1; }
.mascot-walker[data-act="move-wave"] .pp-arm-l { animation: pp-wave-fast 0.36s ease-in-out 2; }
.mascot-walker[data-act="move-hop"] .pp-float { animation: mg-hop 0.7s ease-out; }
.mascot-walker[data-act="move-spin"] .mascot-puppet { transform-origin: 50% 60%; animation: mg-spin 0.7s ease-in-out; }
.mascot-walker[data-act="move-duck"] .pp-float { transform-origin: 250px 362px; animation: mg-duck 0.7s ease-in-out; }
.mascot-walker[data-act="move-duck"] .pp-arm-l { animation: none; rotate: 70deg; }
.mascot-walker[data-act="move-duck"] .pp-arm-r { animation: none; rotate: -90deg; }

@keyframes mg-pop { to { transform: scale(1.6); opacity: 0; } }
@keyframes mg-pop-in { from { transform: scale(0.7); } to { transform: scale(1); } }
@keyframes mg-plus { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -22px); opacity: 0; } }
@keyframes mg-offer { from { transform: translateY(6px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mg-toss { 0% { transform: rotate(0); } 45% { transform: rotate(48deg); } 100% { transform: rotate(0); } }
@keyframes mg-head { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-18px) rotate(-6deg); } }
@keyframes mg-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-34px); } 70% { transform: translateY(0); } 82% { transform: translateY(-6px); } }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@keyframes mg-duck { 0%, 100% { transform: scale(1); } 30%, 75% { transform: translateY(26px) scale(1.08, 0.82); } }

/* Reduced motion: still poses that tell the four moves apart, nothing flies or slides */
@media (prefers-reduced-motion: reduce) {
    .mg-stage *,
    .mg-offer * { animation: none !important; transition: none !important; }
    .mascot-walker[data-act="move-wave"] .pp-arm-l { rotate: 50deg; }
    .mascot-walker[data-act="move-hop"] .pp-float { translate: 0 -26px; }
    .mascot-walker[data-act="move-spin"] .pp-float { rotate: 28deg; }
    .mascot-walker[data-act="move-duck"] .pp-float { translate: 0 24px; }
    .mascot-walker[data-act="toss"] .pp-arm-l { rotate: 40deg; }
    .mascot-walker[data-act="head"] .pp-float { translate: 0 -14px; }
}

@media (max-width: 400px) {
    .mg-move { min-width: 2.7rem; }
    .mg-move span { font-size: 0.62rem; }
}