/* ============ Sensory Spirals ============
 *
 * The one screen in the app that deliberately ignores the theme tokens: a
 * near-black canvas is the whole point of a sensory reel (Help Kidz Learn's
 * "big screen" activities work the same way), so --bg is not used here even
 * when a player has picked a light theme in Settings. Everything else —
 * the status pill, the back button — stays themed, so the chrome around the
 * stage still matches the rest of the app.
 */
.ss-stage {
    position: relative;
    display: grid; place-items: center;
    min-height: 0; min-width: 0;
    margin: 6px 0 clamp(10px, calc(2 * var(--vh)), 24px);
    overflow: hidden;
    border-radius: 28px;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow-lg);
    container-type: size;
}
.ss-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.ss-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* A soft bloom around every stroke/shape — the difference between a flat
   vector and something that reads as glowing light on black. `color` is
   deliberately left undeclared here: elements that want a tinted halo set
   their own SVG `color` presentation attribute (which currentColor then
   picks up); anything that doesn't just inherits the default ink and glows
   white. A CSS declaration here would win the cascade over that attribute
   and make every glow the same colour regardless of what the shape asked for. */
.ss-glow { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 12px currentColor); }

.ss-orb-wrap { position: absolute; inset: 0; }
.ss-orb {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 32%, color-mix(in srgb, var(--orb-color) 90%, #fff), var(--orb-color) 60%, transparent 78%);
    filter: blur(1.4cqmin);
    opacity: 0.9;
}

.ss-button {
    appearance: none; font-family: 'Fredoka', sans-serif;
    position: relative; z-index: 2;
    width: min(320px, 80%); height: min(150px, 70cqh); min-height: 76px;
    border: none; border-radius: 28px;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    color: #fff; cursor: pointer;
    display: grid; place-items: center; gap: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(255, 255, 255, 0.16);
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease, opacity .2s ease;
}
.ss-button:hover:not(:disabled) { transform: translateY(-4px); filter: saturate(1.08); }
.ss-button:active:not(:disabled) { transform: scale(.97); }
.ss-button.scan-current { border-radius: 28px; }
.ss-button-emoji { display: block; font-size: clamp(22px, min(9vw, 24cqh), 54px); line-height: 1; }
.ss-button-emoji .ico { width: 1.2em; height: 1.2em; }
.ss-button-text { font-size: clamp(15px, min(4vw, 12cqh), 26px); font-weight: 600; text-shadow: 0 3px 10px rgba(0,0,0,.4); }

/* Waiting out the clip: dim, still, and out of the switch/gaze scan (the game
   sets [disabled], which access.js already excludes from scanning). */
.ss-button:disabled {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    cursor: default;
    opacity: 0.85;
}

/* The invite back to play: a slow breathing scale, well under any flash
   threshold, and removed entirely by the app's reduced-motion rule. */
.ss-button.is-ready { animation: ssInvite 1.8s ease-in-out infinite; }
@keyframes ssInvite {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}