/**
 * MyPod AI Designer — Bubbles Games styles.
 *
 * Bubbles Tee palette: hot pink, electric blue, sunny yellow, coral, lime,
 * deep purple. Bouncy cubic-bezier easing, bold black outlines, POD print
 * aesthetic. The game frame replaces the skeleton loader in-place so no
 * layout shifts occur.
 *
 * @package MyPod_AI_Designer
 */

:root {
    --bg-ink: #1a1a2e;
    --bg-cream: #fff7e6;
    --bg-pink: #ff2d87;
    --bg-blue: #1fb6ff;
    --bg-yellow: #ffd13b;
    --bg-coral: #ff7a59;
    --bg-lime: #7ed957;
    --bg-purple: #7c3aed;
    --bg-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --bg-radius: 18px;
    --bg-frame-surface: linear-gradient(160deg, #fff7e6 0%, #ffe4f1 45%, #e0f4ff 100%);
    --bg-frame-bar: rgba(255, 255, 255, 0.9);
    --bg-frame-muted: rgba(26, 26, 46, 0.7);
    --bg-glow: rgba(124, 58, 237, 0.18);
}

body.admin-color-modern,
body.admin-color-blue,
body.admin-color-coffee,
body.admin-color-ectoplasm,
body.admin-color-midnight,
body.admin-color-ocean,
body.admin-color-sunrise {
    --bg-pink: var(--wp-admin-theme-color, #ff2d87);
    --bg-blue: var(--wp-admin-theme-color-darker-10, #1fb6ff);
}

[data-theme="dark"],
body.admin-color-midnight,
body.admin-color-ectoplasm {
    --bg-ink: #fff7e6;
    --bg-cream: #111124;
    --bg-pink: #ff4fa0;
    --bg-blue: #38c7ff;
    --bg-yellow: #ffe66d;
    --bg-coral: #ff8c72;
    --bg-lime: #9cff7b;
    --bg-purple: #a78bfa;
    --bg-frame-surface: radial-gradient(circle at 18% 20%, rgba(255,79,160,0.22), transparent 32%), linear-gradient(160deg, #111124 0%, #241037 48%, #06263d 100%);
    --bg-frame-bar: rgba(0, 0, 0, 0.38);
    --bg-frame-muted: rgba(255, 247, 230, 0.78);
    --bg-glow: rgba(56, 199, 255, 0.34);
}

/* ── Host: the original skeleton container once we take it over ───── */
/* Increase specificity (.x.x) so we override the cinema canvas's
   fixed 260x260 sizing without needing !important. */
.mypod-bg-host.mypod-bg-host {
    position: relative;
    overflow: hidden;
    background: transparent;
    animation: none;
    /* Landscape stage so the playfield reads naturally and any sibling
       info (phase title, progress bar, timer, checklist) sits below it
       instead of being squeezed. The host expands to fill the slot
       width and uses an aspect ratio for height. */
    width: 100%;
    height: auto;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 10;
    /* Fallback for very old browsers without aspect-ratio support. */
    min-height: 260px;
    max-height: none;
}

/* Window Size setting (admin) — switches the aspect ratio so admins see
   a clear difference between options. `auto` keeps the default landscape
   shape; small/medium/large widen the stage and grow it proportionally. */
.mypod-bg-host.mypod-bg-host--auto   { max-width: 560px; aspect-ratio: 16 / 10; }
.mypod-bg-host.mypod-bg-host--small  { max-width: 420px; aspect-ratio: 4 / 3; }
.mypod-bg-host.mypod-bg-host--medium { max-width: 560px; aspect-ratio: 16 / 10; }
.mypod-bg-host.mypod-bg-host--large  { max-width: 720px; aspect-ratio: 16 / 9; }

/* Transitions on mount (applied to the frame element) */
.mypod-bg-host--trans-fade  .mypod-bg-frame { animation: mypodBgFadeIn 260ms ease-out; }
.mypod-bg-host--trans-slide .mypod-bg-frame { animation: mypodBgSlideIn 340ms var(--bg-bounce); }
.mypod-bg-host--trans-pop   .mypod-bg-frame { animation: mypodBgPopIn 380ms var(--bg-bounce); }

@keyframes mypodBgFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mypodBgSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes mypodBgPopIn   { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Frame ────────────────────────────────────────────────────────── */
.mypod-bg-frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-frame-surface);
    border-radius: var(--bg-radius);
    border: 3px solid var(--bg-ink);
    box-shadow: 0 6px 0 color-mix(in srgb, var(--bg-ink) 18%, transparent), 0 10px 30px var(--bg-glow);
    overflow: hidden;
    z-index: 2;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--bg-ink);
}

.mypod-bg-frame::before,
.mypod-bg-frame::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--bg-blue) 40%, transparent) 0 3px, transparent 4px),
        radial-gradient(circle, color-mix(in srgb, var(--bg-pink) 35%, transparent) 0 2px, transparent 3px);
    background-size: 72px 72px, 52px 52px;
    opacity: 0.34;
    animation: mypodBgDrift 12s linear infinite;
}

.mypod-bg-frame::after {
    animation-duration: 18s;
    animation-direction: reverse;
    opacity: 0.2;
}

@keyframes mypodBgDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(48px, -36px, 0); }
}

.mypod-bg-frame__brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-frame-bar);
    border-bottom: 2px dashed var(--bg-ink);
    font-weight: 800;
    font-size: 13px;
}

.mypod-bg-frame__brand-emoji {
    font-size: 18px;
    animation: mypodBgBubbleFloat 3s ease-in-out infinite;
}

@keyframes mypodBgBubbleFloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-3px) rotate(4deg); }
}

.mypod-bg-frame__brand-name {
    letter-spacing: 0;
    flex: 1;
    min-width: 0;
    background: linear-gradient(90deg, var(--bg-pink), var(--bg-blue), var(--bg-lime));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--bg-ink) 18%, transparent);
}

.mypod-bg-frame__auto {
    background: var(--bg-yellow);
    border: 2px solid var(--bg-ink);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mypod-bg-frame__auto.is-player {
    background: var(--bg-lime);
}

.mypod-bg-frame__score {
    background: var(--bg-pink);
    color: #fff;
    border: 2px solid var(--bg-ink);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 800;
    min-height: 18px;
    line-height: 1.3;
    white-space: nowrap;
}
.mypod-bg-frame__score:empty { display: none; }
.mypod-bg-frame__score.is-pop { animation: mypodBgScorePop 240ms var(--bg-bounce); }

@keyframes mypodBgScorePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.mypod-bg-frame__skip,
.mypod-bg-frame__sound {
    background: #fff;
    border: 2px solid var(--bg-ink);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms var(--bg-bounce), background 160ms ease;
}
.mypod-bg-frame__sound {
    width: 30px;
    height: 26px;
    padding: 0;
}
.mypod-bg-frame__skip:hover,
.mypod-bg-frame__sound:hover { background: var(--bg-yellow); transform: scale(1.05); }
.mypod-bg-frame__skip:active,
.mypod-bg-frame__sound:active { transform: scale(0.95); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bg-pink) 24%, transparent); }

.mypod-bg-frame__toast {
    position: absolute;
    left: 50%;
    top: 48px;
    z-index: 5;
    transform: translateX(-50%) translateY(-8px) scale(0.94);
    opacity: 0;
    pointer-events: none;
    background: var(--bg-ink);
    color: var(--bg-cream);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 20px var(--bg-glow);
    transition: opacity 180ms ease, transform 180ms var(--bg-bounce);
}
.mypod-bg-frame__toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

.mypod-bg-frame__stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    outline: none;
    /* Let stage grow to fill available space */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1;
}

.mypod-bg-frame__hint {
    position: relative;
    z-index: 2;
    padding: 6px 12px 10px;
    font-size: 12px;
    text-align: center;
    color: var(--bg-frame-muted);
    min-height: 18px;
}

.mypod-bg-frame__gameover {
    position: absolute;
    inset: 42px 10px 34px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-cream) 78%, transparent);
    backdrop-filter: blur(8px);
}
.mypod-bg-frame__gameover[hidden] { display: none; }
.mypod-bg-gameover__panel {
    width: min(320px, calc(100% - 20px));
    border: 3px solid var(--bg-ink);
    border-radius: 16px;
    background: var(--bg-frame-bar);
    padding: 16px;
    text-align: center;
    box-shadow: 0 12px 30px var(--bg-glow);
    animation: mypodBgPopIn 280ms var(--bg-bounce);
}
.mypod-bg-gameover__title {
    font-weight: 900;
    font-size: 24px;
}
.mypod-bg-gameover__score {
    margin-top: 6px;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: var(--bg-pink);
}
.mypod-bg-gameover__best,
.mypod-bg-gameover__msg {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}
.mypod-bg-gameover__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.mypod-bg-gameover__actions button {
    border: 2px solid var(--bg-ink);
    border-radius: 999px;
    background: var(--bg-yellow);
    color: var(--bg-ink);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    cursor: pointer;
}

/* Shared canvas for canvas-based games */
.mypod-bg-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none; /* stop scroll/zoom so swipes are captured */
}

/* ───────────── Memory Match ───────────── */
.mypod-bg-mem {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    box-sizing: border-box;
}
.mypod-bg-mem__card {
    position: relative;
    border: 2px solid var(--bg-ink);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    min-height: 36px;
    touch-action: manipulation;
}
.mypod-bg-mem__card .mypod-bg-mem__back,
.mypod-bg-mem__card .mypod-bg-mem__front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 8px;
    transition: transform 260ms var(--bg-bounce), opacity 260ms ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.mypod-bg-mem__card .mypod-bg-mem__back {
    background: linear-gradient(135deg, var(--bg-purple), var(--bg-blue));
    color: #fff;
    transform: rotateY(0);
}
.mypod-bg-mem__card .mypod-bg-mem__front {
    transform: rotateY(180deg);
}
.mypod-bg-mem__card.is-flipped .mypod-bg-mem__back  { transform: rotateY(180deg); }
.mypod-bg-mem__card.is-flipped .mypod-bg-mem__front { transform: rotateY(0); }
.mypod-bg-mem__card.is-matched { box-shadow: 0 0 0 3px var(--bg-yellow); animation: mypodBgMatchPulse 420ms var(--bg-bounce); }
@keyframes mypodBgMatchPulse { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ───────────── 2048 Prints ───────────── */
.mypod-bg-2048 {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    box-sizing: border-box;
    touch-action: none;
}
.mypod-bg-2048__cell {
    background: rgba(26, 26, 46, 0.06);
    border-radius: 10px;
    border: 2px solid rgba(26, 26, 46, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(14px, 3vw, 26px);
    color: var(--bg-ink);
}
.mypod-bg-2048__cell.has-val {
    border-color: var(--bg-ink);
    animation: mypodBg2048Pop 220ms var(--bg-bounce);
}
@keyframes mypodBg2048Pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

/* ───────────── Whack-a-Mole ───────────── */
.mypod-bg-wam {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    box-sizing: border-box;
}
.mypod-bg-wam__hole {
    position: relative;
    background: rgba(26, 26, 46, 0.14);
    border: 2px solid var(--bg-ink);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    touch-action: manipulation;
}
.mypod-bg-wam__blob {
    position: absolute;
    left: 10%;
    bottom: -70%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--bg-ink);
    background: var(--bg-pink);
    transition: bottom 260ms var(--bg-bounce), transform 220ms var(--bg-bounce);
}
.mypod-bg-wam__hole.is-up .mypod-bg-wam__blob { bottom: 10%; }
.mypod-bg-wam__hole.is-splat .mypod-bg-wam__blob { transform: scale(1.3); opacity: 0; }

/* ───────────── Tic-Tac-Toe ───────────── */
.mypod-bg-ttt {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    box-sizing: border-box;
}
.mypod-bg-ttt__cell {
    background: #fff;
    border: 3px solid var(--bg-ink);
    border-radius: 12px;
    font-size: clamp(22px, 7vw, 44px);
    font-weight: 900;
    color: var(--bg-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    touch-action: manipulation;
    transition: transform 180ms var(--bg-bounce);
}
.mypod-bg-ttt__cell:hover { transform: scale(1.03); }
.mypod-bg-ttt__cell[data-value="X"] { color: var(--bg-pink); }
.mypod-bg-ttt__cell[data-value="O"] { color: var(--bg-blue); }

/* ───────────── Rock-Paper-Scissors ───────────── */
.mypod-bg-rps {
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}
.mypod-bg-rps__log {
    background: #fff;
    border: 2px solid var(--bg-ink);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.mypod-bg-rps__hands {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mypod-bg-rps__hand {
    background: #fff;
    border: 3px solid var(--bg-ink);
    border-radius: 14px;
    padding: 10px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 180ms var(--bg-bounce), background 180ms ease;
    touch-action: manipulation;
}
.mypod-bg-rps__hand:hover { transform: translateY(-3px); background: var(--bg-yellow); }
.mypod-bg-rps__hand:active { transform: translateY(0); }
.mypod-bg-rps__emoji { font-size: clamp(24px, 5vw, 36px); }
.mypod-bg-rps__label { font-weight: 800; font-size: 11px; }

/* ───────────── Reaction Timer ───────────── */
.mypod-bg-reaction {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: none;
    cursor: pointer;
    background: #bcbcc6;
    font-weight: 800;
    font-size: 15px;
    color: var(--bg-ink);
    transition: background 260ms ease;
    touch-action: manipulation;
}
.mypod-bg-reaction__tee {
    font-size: clamp(50px, 14vw, 82px);
    filter: grayscale(1);
    transition: filter 200ms ease, transform 220ms var(--bg-bounce);
}
.mypod-bg-reaction.is-wait      { background: #cfcfd8; }
.mypod-bg-reaction.is-ready     { background: linear-gradient(135deg, var(--bg-lime), var(--bg-yellow)); }
.mypod-bg-reaction.is-ready .mypod-bg-reaction__tee { filter: none; transform: scale(1.08); }
.mypod-bg-reaction.is-too-soon  { background: var(--bg-coral); }
.mypod-bg-reaction.is-result    { background: linear-gradient(135deg, var(--bg-blue), var(--bg-purple)); color: #fff; }
.mypod-bg-reaction.is-result .mypod-bg-reaction__tee { filter: none; }

/* ───────────── Simon Says ───────────── */
.mypod-bg-simon {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    box-sizing: border-box;
}
.mypod-bg-simon__pad {
    border: 3px solid var(--bg-ink);
    border-radius: 14px;
    cursor: pointer;
    padding: 0;
    transition: opacity 160ms ease, transform 180ms var(--bg-bounce);
    opacity: 0.6;
    touch-action: manipulation;
}
.mypod-bg-simon__pad:hover { opacity: 0.85; }
.mypod-bg-simon__pad.is-lit { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 4px #fff7e6 inset, 0 0 30px currentColor; }

/* ── Responsive: mobile-first tweaks ──────────────────────────────── */
@media (max-width: 480px) {
    .mypod-bg-frame__brand { padding: 6px 10px; font-size: 12px; gap: 6px; }
    .mypod-bg-frame__brand-name { display: none; } /* keep emoji to save space */
    .mypod-bg-frame__hint { font-size: 11px; padding: 4px 8px 8px; }
    .mypod-bg-frame__auto, .mypod-bg-frame__score { font-size: 10px; padding: 2px 8px; }
    .mypod-bg-mem, .mypod-bg-2048, .mypod-bg-wam, .mypod-bg-ttt, .mypod-bg-simon { padding: 6px; gap: 5px; }
}

/* Dark-mode friendly (the theme toggles [data-theme="dark"]) */
[data-theme="dark"] .mypod-bg-frame,
body.admin-color-midnight .mypod-bg-frame,
body.admin-color-ectoplasm .mypod-bg-frame {
    background: var(--bg-frame-surface);
    color: var(--bg-ink);
    border-color: var(--bg-ink);
}
[data-theme="dark"] .mypod-bg-frame__brand,
body.admin-color-midnight .mypod-bg-frame__brand,
body.admin-color-ectoplasm .mypod-bg-frame__brand { background: var(--bg-frame-bar); border-bottom-color: var(--bg-ink); color: var(--bg-ink); }
[data-theme="dark"] .mypod-bg-frame__skip,
[data-theme="dark"] .mypod-bg-frame__sound,
body.admin-color-midnight .mypod-bg-frame__skip,
body.admin-color-midnight .mypod-bg-frame__sound,
body.admin-color-ectoplasm .mypod-bg-frame__skip,
body.admin-color-ectoplasm .mypod-bg-frame__sound { background: rgba(255, 247, 230, 0.1); color: var(--bg-ink); border-color: var(--bg-ink); }
[data-theme="dark"] .mypod-bg-2048__cell { color: var(--bg-ink); background: rgba(255, 247, 230, 0.08); border-color: rgba(255, 247, 230, 0.2); }
[data-theme="dark"] .mypod-bg-rps__log,
[data-theme="dark"] .mypod-bg-rps__hand,
[data-theme="dark"] .mypod-bg-ttt__cell { background: rgba(255, 247, 230, 0.08); color: var(--bg-ink); }

/* Accessibility: honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mypod-bg-frame,
    .mypod-bg-frame__brand-emoji,
    .mypod-bg-wam__blob,
    .mypod-bg-2048__cell.has-val,
    .mypod-bg-mem__card.is-matched {
        animation: none !important;
        transition: none !important;
    }
}