* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif;
    background:
        radial-gradient(ellipse 90% 70% at 10% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 90% 80%, rgba(200, 230, 255, 0.42) 0%, transparent 45%),
        linear-gradient(165deg, #6ec0f0 0%, #9bb0ff 40%, #a8e0d8 72%, #ffe8a8 100%);
    min-height: 100vh;
    padding: 20px;
    color: #3a3558;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(180deg, #fffefb 0%, #f4f8ff 38%, #f0faf8 100%);
    border-radius: 28px;
    padding: 26px 28px 32px;
    border: 5px solid #fff;
    box-shadow:
        0 0 0 4px #8ec5e8,
        0 0 0 8px #a8e6cf,
        0 20px 50px rgba(60, 40, 100, 0.18);
}

header {
    text-align: center;
    margin-bottom: 22px;
    padding: 18px 16px 20px;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff9e6 0%, #e8f4fc 42%, #e8f0ff 100%);
    border: 4px dashed rgba(120, 185, 220, 0.75);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), 0 8px 22px rgba(120, 80, 160, 0.1);
}

h1 {
    font-size: clamp(1.85rem, 5vw, 2.85rem);
    color: #5b4fd4;
    margin-bottom: 12px;
    text-shadow: 2px 3px 0 rgba(255, 200, 230, 0.9), 3px 4px 0 rgba(168, 230, 207, 0.5);
    letter-spacing: 0.02em;
}

h2 {
    font-size: 1.65em;
    color: #3d5088;
    margin-bottom: 14px;
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 3px dotted rgba(120, 100, 200, 0.35);
}

h3 {
    font-size: 1.35em;
    color: #4a6fd4;
    margin-bottom: 10px;
    margin-top: 8px;
}

/* First heading in each main section sits flush with the card top */
main > section > h2:first-child {
    margin-top: 0;
}

.computer-keyboard-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fffef8 0%, #e8f2ff 50%, #e8f6f2 100%);
    border-radius: 16px;
    border: 3px solid #c5d8ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.computer-keyboard-row label {
    font-weight: 700;
    color: #3d3668;
    font-size: 0.98em;
}

.computer-keyboard-select {
    min-width: 220px;
    max-width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 2px solid #8d90d8;
    padding: 0 10px;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    color: #3d3668;
    background: #fff;
}

.transport-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, #5dade2 0%, #48c9b0 100%);
    color: white;
}

.btn-record {
    background: linear-gradient(135deg, #f39c12 0%, #fee140 100%);
    color: #3a3010;
}

.btn-record.recording {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    animation: pulse 1s infinite;
}

.btn-add {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    margin-top: 15px;
}

.recording-indicator {
    color: #ff0000;
    font-weight: bold;
    font-size: 1.2em;
}

.recording-indicator.hidden {
    display: none;
}

.app-status {
    margin-top: 10px;
    color: #4a3f78;
    font-size: 1.05em;
    font-weight: 800;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    border: 2px solid rgba(140, 195, 230, 0.55);
    display: inline-block;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes visualFade {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

@keyframes visualPulse {
    0% { opacity: 0.2; transform: scale(0.7); }
    35% { opacity: 0.8; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.25); }
}

@keyframes visualFlash {
    0% { opacity: 0.95; }
    100% { opacity: 0; }
}

@keyframes fireworkBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.1); opacity: 0; }
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

@keyframes sparkleTwinkle {
    0% { transform: scale(0.2); opacity: 0; }
    35% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.2); opacity: 0; }
}

@keyframes rainbowMove {
    0% { background-position: 0% 40%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 40%; }
}

@keyframes visualPulseLoop {
    0% { opacity: 0.35; transform: scale(0.92); }
    50% { opacity: 0.85; transform: scale(1.08); }
    100% { opacity: 0.35; transform: scale(0.92); }
}

@keyframes strobeFlash {
    0% { opacity: 0.92; }
    50% { opacity: 0.05; }
    100% { opacity: 0.92; }
}

.song-library-controls,
.accessibility-grid,
.recording-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.song-library-controls select {
    height: 44px;
    border-radius: 10px;
    border: 2px solid #8d90d8;
    padding: 0 10px;
    font-size: 1em;
}

.song-library-controls label,
.accessibility-grid label,
.recording-options-grid label {
    font-weight: bold;
    color: #4a3f72;
}

.song-library-section,
.settings-section {
    margin-bottom: 0;
}

/* —— Kid-friendly main sections: soft fills + playful borders —— */
.song-library-section {
    padding: 20px 22px 22px;
    margin-bottom: 22px;
    border-radius: 24px;
    background: linear-gradient(168deg, #f0fbff 0%, #e8f4ff 42%, #f2f6ff 100%);
    border: 4px solid #6ec8e8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 6px 0 rgba(110, 200, 232, 0.35),
        0 10px 24px rgba(40, 100, 140, 0.1);
}

.song-library-section > h2 {
    color: #1a7aad;
    border-bottom-color: rgba(26, 122, 173, 0.35);
}

.player-section {
    padding: 20px 22px 22px;
    margin-bottom: 22px;
    border-radius: 24px;
    background: linear-gradient(168deg, #f8fafc 0%, #eef6ff 42%, #e8f2f8 100%);
    border: 4px solid #6ba3d8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 6px 0 rgba(90, 150, 210, 0.32),
        0 10px 24px rgba(40, 90, 140, 0.1);
}

.player-section > h2 {
    color: #2a6aa8;
    border-bottom-color: rgba(42, 106, 168, 0.35);
}

.settings-section {
    margin-bottom: 18px;
}

.settings-menu {
    background: linear-gradient(135deg, #fffef8 0%, #eef6ff 48%, #e8f4f0 100%);
    border-radius: 18px;
    border: 3px solid #b8c8ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 6px 16px rgba(100, 80, 180, 0.12);
    overflow: hidden;
}

.settings-menu summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-size: 1.15em;
    font-weight: 700;
    color: #3d3668;
}

.settings-menu summary::-webkit-details-marker {
    display: none;
}

.settings-content {
    padding: 0 18px 18px;
}

.visual-effects-section {
    margin-bottom: 25px;
    text-align: center;
}

/* Visual pads: single centered row (scroll horizontally on narrow screens) */
#visualPads.drum-pads {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 8px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#visualPads .drum-pad {
    flex: 0 0 auto;
    width: 92px;
    max-width: 92px;
    min-width: 72px;
}

.player-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 55%, #e8eef8 100%);
    border-radius: 18px;
    padding: 18px;
    border: 3px dotted rgba(120, 160, 210, 0.45);
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(120, 60, 120, 0.1);
}

.now-playing {
    display: flex;
    gap: 8px;
    font-size: 1.05em;
    font-weight: bold;
    color: #2f2a4f;
    margin-bottom: 14px;
}

.player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.recording-help {
    margin-top: 10px;
    font-size: 0.92em;
    line-height: 1.5;
    color: #4a4470;
    max-width: 48rem;
}

.recording-indicator--portal {
    color: #ffb8b8;
    font-weight: 800;
    font-size: 1.05em;
}

.virtual-world-portal__actions .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.player-progress {
    display: grid;
    grid-template-columns: 55px 1fr 55px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

#seekBar {
    width: 100%;
}

.player-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.player-volume-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr 52px;
    gap: 10px;
    align-items: center;
}

.player-volume-row label {
    font-weight: 700;
    color: #3a3560;
    font-size: 0.95em;
}

.player-volume-row input[type="range"] {
    width: 100%;
}

.volume-pct {
    font-weight: 700;
    color: #5a4f8a;
    font-size: 0.95em;
    text-align: right;
}

.player-loop-row {
    font-weight: 700;
    color: #3a3560;
}

/* Tracks Section */
.tracks-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.track {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.track:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.track.active {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.track-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.track-toggle {
    width: 60px;
    height: 30px;
    background: #ccc;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    border: none;
}

.track-toggle.active {
    background: #4caf50;
}

.track-toggle::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.track-toggle.active::after {
    transform: translateX(30px);
}

.track-name {
    flex: 1;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.track-volume {
    width: 150px;
}

.volume-slider {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
}

/* Effects Section */
.effects-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.effect-panel {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.effect-control {
    margin-bottom: 10px;
}

.effect-control label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

.effect-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    -webkit-appearance: none;
}

.effect-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e17055;
    cursor: pointer;
}

/* Keyboard */
.keyboard-container {
    margin-bottom: 30px;
    overflow-x: auto;
    padding-bottom: 6px;
    text-align: center;
}

.piano-keyboard-help {
    max-width: 920px;
    margin: 0 auto 14px;
    text-align: left;
    border-radius: 14px;
    border: 2px dashed rgba(140, 160, 220, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 244, 255, 0.88) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.piano-keyboard-help__summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 0.98em;
    font-weight: 800;
    color: #3d3668;
    user-select: none;
}

.piano-keyboard-help__summary:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
    border-radius: 8px;
}

.piano-keyboard-help__summary::-webkit-details-marker {
    display: none;
}

.piano-keyboard-help__summary::after {
    content: ' ▼';
    font-size: 0.75em;
    opacity: 0.65;
}

.piano-keyboard-help[open] .piano-keyboard-help__summary::after {
    content: ' ▲';
}

.piano-keyboard-help[open] .piano-keyboard-help__summary {
    border-bottom: 1px solid rgba(140, 160, 220, 0.4);
}

.piano-keyboard-legend {
    padding: 12px 14px 14px;
    margin: 0;
    font-size: 0.88em;
    line-height: 1.45;
    color: #4a4470;
    background: transparent;
    border: none;
    border-radius: 0;
}

.piano-keyboard-legend p {
    margin: 0;
}

.piano-keyboard-legend code {
    font-size: 0.92em;
    word-break: break-word;
    background: rgba(102, 126, 234, 0.12);
    padding: 2px 6px;
    border-radius: 6px;
}

.keyboard {
    display: inline-flex;
    position: relative;
    margin: 20px auto;
    padding: 0;
    background: linear-gradient(135deg, #ffffff 0%, #e8eef8 45%, #dce8f5 100%);
    border-radius: 18px;
    border: 3px solid rgba(120, 150, 210, 0.35);
    box-shadow: 0 6px 18px rgba(60, 80, 140, 0.12);
    min-width: max-content;
}

.key {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
}

.white-key {
    width: 48px;
    height: 200px;
    background: white;
    border: 1px solid #b9b9b9;
    border-radius: 0 0 8px 8px;
    margin-right: 0;
    box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
}

.white-key:active, .white-key.pressed {
    background: #ececec;
    transform: translateY(2px);
}

.black-key {
    width: 32px;
    height: 124px;
    background: linear-gradient(135deg, #222 0%, #000 100%);
    border-radius: 0 0 5px 5px;
    position: absolute;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.black-key:active, .black-key.pressed {
    background: linear-gradient(135deg, #636e72 0%, #2d3436 100%);
    transform: translateY(2px);
}

.key-label {
    font-size: 0.72em;
    color: #626262;
    font-weight: 600;
    user-select: none;
}

.key-label-black {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.58em;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    user-select: none;
    line-height: 1.1;
}

.key-computer-hint {
    position: absolute;
    top: 6px;
    right: 4px;
    font-size: 0.62em;
    font-weight: 800;
    color: #5c5c8a;
    user-select: none;
    line-height: 1;
}

.key-computer-hint-white-solo {
    position: static;
    font-size: 1.05em;
    font-weight: 800;
    color: #3d3668;
    letter-spacing: -0.02em;
}

.key-computer-hint-black {
    top: auto;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.58em;
}

.key-computer-hint-solo.key-computer-hint-black {
    position: absolute;
    bottom: 10px;
    font-size: 0.78em;
    font-weight: 800;
}

/* Drum Pads */
.drums-container {
    margin-bottom: 30px;
}

.loops-container {
    margin-bottom: 30px;
}

/* Three loop pads: same cell size as drum/synth grid, row centered under left-aligned heading */
#loopPads.drum-pads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Match one column width from the 4-column drum layout (3 gaps × 15px) */
#loopPads .drum-pad {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: calc((100% - 45px) / 4);
    max-width: calc((600px - 45px) / 4);
    min-width: 0;
}

.drum-pads {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.drum-pad {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: center;
    justify-items: center;
    font-size: 1em;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
    font-weight: bold;
    border: none;
    font-family: inherit;
    padding: 10px 8px;
}

.drum-pad:hover {
    transform: scale(1.05);
}

.drum-pad:active, .drum-pad.pressed {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.drum-pad-image {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.drum-pad-label {
    font-size: 0.82em;
    line-height: 1.1;
}

.drum-pad-key {
    font-size: 0.78em;
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 2px 7px;
}

.visual-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /* Above .virtual-world-portal (10000) so lights / FX show in the playground */
    z-index: 10050;
    overflow: hidden;
}

.visual-rainbow {
    background: linear-gradient(120deg, rgba(255, 0, 76, 0.38), rgba(255, 145, 0, 0.32), rgba(255, 237, 0, 0.3), rgba(0, 255, 149, 0.32), rgba(0, 148, 255, 0.34), rgba(163, 0, 255, 0.35));
    background-size: 300% 300%;
}

.visual-rainbow:not(.visual-continuous) {
    animation: visualFade 2.2s ease-out forwards;
}

.visual-rainbow.visual-continuous {
    animation: rainbowMove 3.5s ease-in-out infinite;
    opacity: 0.55;
}

.visual-pulse {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.5), rgba(108, 62, 196, 0.36), transparent 70%);
}

.visual-pulse:not(.visual-continuous) {
    animation: visualPulse 2.2s ease-out forwards;
}

.visual-pulse.visual-continuous {
    animation: visualPulseLoop 1.9s ease-in-out infinite;
    opacity: 0.75;
}

.visual-flash {
    background: rgba(255, 255, 255, 0.92);
}

.visual-flash:not(.visual-continuous) {
    animation: visualFlash 0.4s ease-out forwards;
}

.visual-flash.visual-continuous {
    animation: strobeFlash 0.45s steps(2, end) infinite;
}

.visual-fireworks,
.visual-confetti,
.visual-sparkle {
    background: transparent;
}

.visual-fireworks:not(.visual-continuous),
.visual-confetti:not(.visual-continuous),
.visual-sparkle:not(.visual-continuous) {
    animation: visualFade 2.2s ease-out forwards;
}

.visual-fireworks.visual-continuous,
.visual-confetti.visual-continuous,
.visual-sparkle.visual-continuous {
    animation: none;
    opacity: 1;
}

.visual-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: fireworkBurst 1.1s ease-out forwards;
    box-shadow: 0 0 12px currentColor;
}

.visual-confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    animation: confettiFall 1.8s linear forwards;
}

.visual-sparkle-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.95);
    animation: sparkleTwinkle 1.3s ease-in-out forwards;
}

.switch-scan-active {
    outline: 4px solid #ffbf47;
    outline-offset: 3px;
}

/* —— Playground modes + full-screen virtual world —— */
.playground-modes-section {
    margin: 0 0 22px;
    padding: 22px 22px 26px;
    background:
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(210, 240, 220, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 100% 0%, rgba(200, 230, 255, 0.4) 0%, transparent 50%),
        linear-gradient(160deg, #f8fbff 0%, #eef4ff 48%, #e8f2fa 100%);
    border-radius: 24px;
    border: 4px solid #9cb0e8;
    border-style: solid;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.65),
        0 6px 0 rgba(140, 170, 220, 0.42),
        0 12px 28px rgba(102, 126, 234, 0.14);
}

.playground-modes-section h2 {
    margin-top: 0;
    color: #3d5a9a;
    border-bottom-color: rgba(61, 90, 154, 0.3);
}

.playground-modes-steps {
    color: #4a4470;
    font-size: 1.02em;
    line-height: 1.65;
    margin: 0 0 14px 1.25rem;
    max-width: 48rem;
}

.playground-modes-hint {
    font-weight: 800;
    color: #764ba2;
    margin-bottom: 14px;
    font-size: 1.02em;
}

.studio-playground-dock {
    margin-bottom: 28px;
    padding: 22px 20px 26px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse 55% 40% at 15% 90%, rgba(168, 230, 207, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 50% 38% at 92% 15%, rgba(190, 215, 255, 0.45) 0%, transparent 50%),
        linear-gradient(168deg, #f4fff8 0%, #f5f9ff 42%, #f0f4ff 100%);
    border: 4px dashed #7dd3a8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 8px 26px rgba(60, 140, 100, 0.12);
}

.studio-playground-dock > h2 {
    color: #2d8a5c;
    border-bottom-color: rgba(45, 138, 92, 0.3);
}

.studio-dock-lead {
    color: #4a4470;
    margin-bottom: 18px;
    line-height: 1.55;
    max-width: 50rem;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    border: 2px solid rgba(125, 211, 168, 0.45);
}

/* Toy panels on the home page only (dock contains the bundle) */
#studioPlaygroundDock #playgroundPlayBundle .playground-panel--float {
    border-radius: 22px;
    padding: 16px 18px 20px;
    margin-bottom: 18px;
    border: 4px solid transparent;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 6px 18px rgba(80, 60, 120, 0.08);
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="visual"] {
    background: linear-gradient(155deg, #f5f8ff 0%, #eef2ff 50%, #f0f4ff 100%);
    border-color: #8b9ee8;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="track"] {
    background: linear-gradient(155deg, #fff9e8 0%, #ffefd0 50%, #fff5e6 100%);
    border-color: #ffc978;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="keys"] {
    background: linear-gradient(155deg, #f0f8ff 0%, #e4f0ff 50%, #eef6ff 100%);
    border-color: #7eb0ff;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="drums"] {
    background: linear-gradient(155deg, #f5f0ff 0%, #ebe4ff 50%, #f3eeff 100%);
    border-color: #b89cff;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="synth"] {
    background: linear-gradient(155deg, #e8fff8 0%, #d8fff0 50%, #ecfff6 100%);
    border-color: #5ed4a8;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="fx"] {
    background: linear-gradient(155deg, #fff5f0 0%, #ffe8e0 50%, #fff0ea 100%);
    border-color: #ff9a7a;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel[data-panel="loops"] {
    background: linear-gradient(155deg, #f0fbff 0%, #e0f5ff 50%, #eaf8ff 100%);
    border-color: #5cc8f0;
}

#studioPlaygroundDock #playgroundPlayBundle .playground-panel--float h2,
#studioPlaygroundDock #playgroundPlayBundle .playground-panel--float h3 {
    border-bottom: none;
    margin-top: 0;
}

.instruments-section {
    margin-top: 4px;
    padding: 16px 14px 6px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.42);
    border: 3px dotted rgba(90, 140, 200, 0.4);
}

.instruments-section > h2 {
    color: #3d6ab8;
    border-bottom: 3px dotted rgba(61, 106, 184, 0.35);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.scene-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.scene-card {
    border: 3px solid #c9d0f5;
    border-radius: 22px;
    padding: 16px 12px 18px;
    background: linear-gradient(165deg, #ffffff 0%, #f0f4ff 100%);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    box-shadow: 0 4px 14px rgba(80, 60, 140, 0.12);
}

.scene-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.22);
    border-color: #9fabf5;
}

.scene-card:focus-visible {
    outline: 4px solid #ffbf47;
    outline-offset: 3px;
}

.scene-card--active {
    border-color: #667eea;
    background: linear-gradient(165deg, #fff 0%, #e8ecff 100%);
    box-shadow: 0 10px 32px rgba(102, 126, 234, 0.35);
}

.scene-card__emoji {
    font-size: 2.4rem;
    line-height: 1;
    display: block;
}

.scene-card__title {
    font-weight: 800;
    color: #3d3668;
    display: block;
    margin-top: 8px;
    font-size: 1.05em;
}

.scene-card__blurb {
    font-size: 0.82em;
    color: #6b6394;
    display: block;
    margin-top: 4px;
}

.scene-card:disabled,
.scene-card.scene-card--disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.scene-card:disabled:hover,
.scene-card.scene-card--disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #c9d0f5;
}

.virtual-world-portal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: rgba(12, 8, 28, 0.55);
    backdrop-filter: blur(4px);
}

.virtual-world-portal[hidden] {
    display: none !important;
}

.virtual-world-portal__frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #12081f;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.45);
}

.virtual-world-portal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #2d2560 0%, #4a3d8a 100%);
    border-bottom: 3px solid rgba(255, 255, 255, 0.15);
}

.virtual-world-portal__heading {
    margin: 0;
    font-size: 1.45em;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.virtual-world-portal__now-playing {
    margin: 6px 0 0;
    font-size: 0.95em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}

.virtual-world-portal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.virtual-world-portal__scene {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: #0a0612;
}

/* Top half: animated scene only (horizontal split: scene above, toys below) */
.virtual-world-scene-viewport {
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid rgba(255, 255, 255, 0.12);
}

.virtual-world-stage__anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.stage-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.65s ease;
}

#virtualWorldScene[data-scene="stadium"] .stage-layer--stadium {
    opacity: 1;
}

#virtualWorldScene[data-scene="countryside"] .stage-layer--countryside {
    opacity: 1;
}

#virtualWorldScene[data-scene="fantasy"] .stage-layer--fantasy {
    opacity: 1;
}

#virtualWorldScene[data-scene="undersea"] .stage-layer--undersea {
    opacity: 1;
}

#virtualWorldScene[data-scene="space"] .stage-layer--space {
    opacity: 1;
}

#virtualWorldScene[data-scene="candy"] .stage-layer--candy {
    opacity: 1;
}

/* ═══ Virtual world scenes ═══ */

/* Big concert = animated pit: vivid LED tiles + beams, cartoon band facing you, crowd only at the lip */
.stage-layer--stadium.pit-scene {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 100% 80% at 50% 100%, #120818 0%, #050208 55%, #020105 100%);
    overflow: hidden;
}

.pit-atmos {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 65% at 0% 40%, rgba(255, 80, 200, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 50% 65% at 100% 42%, rgba(60, 220, 255, 0.2) 0%, transparent 52%),
        radial-gradient(ellipse 90% 50% at 50% 18%, #4a2068 0%, #140a28 50%, #060210 100%);
}

.pit-led {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 7%;
    height: 24%;
    z-index: 1;
    border-radius: 16px;
    pointer-events: none;
    overflow: hidden;
    box-shadow:
        0 0 0 4px #24183c,
        0 0 100px rgba(255, 60, 180, 0.5),
        0 0 120px rgba(0, 240, 255, 0.28),
        inset 0 0 50px rgba(0, 0, 0, 0.45);
}

.pit-led__chroma {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 85% 75% at 18% 48%, rgba(255, 0, 160, 0.65) 0%, transparent 48%),
        radial-gradient(ellipse 75% 70% at 82% 38%, rgba(0, 255, 230, 0.55) 0%, transparent 46%),
        radial-gradient(ellipse 55% 60% at 52% 88%, rgba(255, 240, 60, 0.45) 0%, transparent 52%),
        linear-gradient(188deg, #5a08a0 0%, #180848 38%, #08062a 100%);
    animation: pitLedChroma 3.8s ease-in-out infinite alternate;
}

.pit-led__burst {
    position: absolute;
    inset: -15%;
    border-radius: inherit;
    background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.2), transparent 28%, rgba(255, 120, 255, 0.25), transparent 62%, rgba(0, 255, 255, 0.18), transparent 88%);
    mix-blend-mode: screen;
    opacity: 0.45;
    animation: pitLedBurst 7s linear infinite;
}

.pit-led__grid {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.45) 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 11px);
    mix-blend-mode: overlay;
    opacity: 0.75;
    animation: pitLedScan 2.4s linear infinite;
}

.pit-beam {
    position: absolute;
    top: 0;
    width: 50%;
    height: 82%;
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: blur(10px);
    opacity: 0.68;
}

.pit-beam--l {
    left: -14%;
    background: conic-gradient(from 302deg at 100% 0%, transparent 0deg, rgba(255, 252, 220, 0.75) 18deg, transparent 44deg);
    animation: pitBeamSwayL 7.5s ease-in-out infinite;
}

.pit-beam--c {
    left: 25%;
    width: 50%;
    background: conic-gradient(from 268deg at 50% 0%, transparent 0deg, rgba(255, 180, 255, 0.55) 14deg, transparent 32deg);
    animation: pitBeamSwayC 9.5s ease-in-out infinite;
}

.pit-beam--r {
    right: -14%;
    background: conic-gradient(from 238deg at 0% 0%, transparent 0deg, rgba(180, 240, 255, 0.72) 18deg, transparent 44deg);
    animation: pitBeamSwayR 8.2s ease-in-out infinite;
}

.pit-haze {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    height: 50%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(28px);
    opacity: 0.55;
    background:
        radial-gradient(ellipse 90% 55% at 30% 60%, rgba(255, 140, 255, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 70% 45%, rgba(120, 255, 255, 0.28) 0%, transparent 50%);
    animation: pitHazeDrift 10s ease-in-out infinite;
}

.pit-truss {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 4%;
    height: 9%;
    min-height: 28px;
    z-index: 4;
    pointer-events: none;
    border-radius: 8px 8px 0 0;
    background:
        repeating-linear-gradient(90deg, #080510 0 12px, #1c1430 12px 26px),
        linear-gradient(180deg, #120a1c 0%, #302050 100%);
    box-shadow:
        inset 0 -5px 0 rgba(255, 220, 120, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.8);
}

.pit-truss-lights {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 6.5%;
    height: 2.5%;
    z-index: 5;
    pointer-events: none;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, 0.95) 14px 17px, transparent 17px 32px);
    filter: blur(0.8px);
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: pitTrussTwinkle 1.4s ease-in-out infinite;
}

.pit-deck {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    height: 11%;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, #7a5090 0%, #301848 50%, #080410 100%);
    clip-path: polygon(0 100%, 0 30%, 6% 8%, 50% 0%, 94% 8%, 100% 30%, 100% 100%);
    box-shadow:
        0 -32px 80px rgba(255, 100, 200, 0.2),
        0 -18px 50px rgba(0, 255, 255, 0.12);
    animation: pitDeckGlow 2.6s ease-in-out infinite;
}

.pit-pa {
    position: absolute;
    bottom: 6%;
    width: 8%;
    max-width: 56px;
    height: 62%;
    z-index: 4;
    pointer-events: none;
    border-radius: 6px;
    background: repeating-linear-gradient(180deg, #221c34 0 14px, #0c0814 14px 28px);
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(255, 180, 80, 0.12);
}

.pit-pa--l {
    left: 0.5%;
}

.pit-pa--r {
    right: 0.5%;
}

.pit-fans-sides {
    position: absolute;
    bottom: 0;
    width: 18%;
    max-width: 160px;
    height: 62%;
    z-index: 6;
    pointer-events: none;
    opacity: 0.98;
    background:
        radial-gradient(ellipse 80% 50% at 50% 92%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
        repeating-linear-gradient(
            168deg,
            rgba(0, 0, 0, 0.45) 0 4px,
            rgba(36, 18, 58, 0.92) 4px 14px
        );
}

.pit-fans-sides--l {
    left: 0;
    mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
}

.pit-fans-sides--r {
    right: 0;
    mask-image: linear-gradient(to left, black 0%, black 70%, transparent 100%);
}

.pit-band {
    position: absolute;
    left: -3%;
    right: -3%;
    bottom: 1%;
    height: 80%;
    z-index: 7;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    pointer-events: none;
    overflow: visible;
}

.pit-band-scale {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: center bottom;
}

@media (min-width: 480px) {
    .pit-band-scale {
        transform: scale(1.1);
    }
}

@media (min-width: 720px) {
    .pit-band-scale {
        transform: scale(1.2);
    }
}

.pit-band-art {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    user-select: none;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 28px rgba(255, 100, 200, 0.12));
    animation: pitCartoonBob 2.4s ease-in-out infinite;
}

.pit-crowd {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    top: auto;
    z-index: 5;
    pointer-events: none;
    opacity: 0.92;
    background:
        radial-gradient(ellipse 8% 26% at 5% 48%, rgba(18, 10, 28, 0.55) 0%, transparent 72%),
        radial-gradient(ellipse 7% 24% at 12% 42%, rgba(18, 10, 28, 0.5) 0%, transparent 68%),
        radial-gradient(ellipse 8% 28% at 20% 50%, rgba(22, 12, 34, 0.52) 0%, transparent 74%),
        radial-gradient(ellipse 7% 22% at 28% 38%, rgba(18, 10, 28, 0.48) 0%, transparent 66%),
        radial-gradient(ellipse 9% 30% at 38% 46%, rgba(24, 14, 38, 0.5) 0%, transparent 76%),
        radial-gradient(ellipse 10% 32% at 50% 40%, rgba(22, 12, 34, 0.48) 0%, transparent 78%),
        radial-gradient(ellipse 9% 28% at 62% 46%, rgba(24, 14, 38, 0.5) 0%, transparent 76%),
        radial-gradient(ellipse 7% 24% at 72% 38%, rgba(18, 10, 28, 0.48) 0%, transparent 66%),
        radial-gradient(ellipse 8% 26% at 80% 50%, rgba(22, 12, 34, 0.52) 0%, transparent 74%),
        radial-gradient(ellipse 7% 24% at 88% 42%, rgba(18, 10, 28, 0.5) 0%, transparent 68%),
        radial-gradient(ellipse 8% 26% at 95% 48%, rgba(18, 10, 28, 0.55) 0%, transparent 72%),
        radial-gradient(ellipse 130% 45% at 50% 100%, rgba(255, 80, 120, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, transparent 0%, rgba(8, 4, 16, 0.18) 40%, rgba(4, 2, 10, 0.45) 82%, #050208 100%),
        repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.15) 0 2px, rgba(36, 20, 52, 0.55) 2px 8px);
    mask-image: linear-gradient(to top, black 0%, black 55%, transparent 100%);
    animation: pitCrowdWave 2.1s ease-in-out infinite;
}

.pit-fan-rail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    z-index: 8;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: pitFanRailSway 2.8s ease-in-out infinite;
}

.pit-fan-rail__svg {
    width: 104%;
    max-width: none;
    height: 100%;
    min-height: 120px;
    display: block;
    filter: drop-shadow(0 -4px 18px rgba(120, 80, 200, 0.25));
}

.pit-phones {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    top: auto;
    z-index: 9;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.48;
    background-image:
        radial-gradient(circle at 9% 88%, rgba(255, 255, 255, 0.75) 0%, transparent 0.24%),
        radial-gradient(circle at 22% 84%, rgba(255, 255, 255, 0.6) 0%, transparent 0.2%),
        radial-gradient(circle at 38% 90%, rgba(255, 255, 255, 0.68) 0%, transparent 0.22%),
        radial-gradient(circle at 52% 85%, rgba(255, 255, 255, 0.55) 0%, transparent 0.18%),
        radial-gradient(circle at 68% 88%, rgba(255, 255, 255, 0.7) 0%, transparent 0.21%),
        radial-gradient(circle at 84% 83%, rgba(255, 255, 255, 0.62) 0%, transparent 0.19%),
        radial-gradient(circle at 94% 90%, rgba(255, 255, 255, 0.65) 0%, transparent 0.2%);
    mask-image: linear-gradient(to top, black 0%, black 55%, transparent 100%);
    animation: pitPhones 3s ease-in-out infinite;
}

.pit-strobes {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(255, 200, 255, 0.5));
    opacity: 0;
    mix-blend-mode: overlay;
    animation: pitStrobes 5.2s ease-in-out infinite;
}

.pit-vignette {
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    box-shadow:
        inset 0 0 70px rgba(0, 0, 0, 0.42),
        inset 0 -30px 70px rgba(0, 0, 0, 0.45);
}

@keyframes pitLedChroma {
    0% { filter: hue-rotate(0deg) saturate(1.15); }
    100% { filter: hue-rotate(40deg) saturate(1.5); }
}

@keyframes pitLedBurst {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.06); }
}

@keyframes pitLedScan {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 28px, 20px 0; }
}

@keyframes pitHazeDrift {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.45; }
    50% { transform: translateX(3%) translateY(-2%); opacity: 0.62; }
}

@keyframes pitTrussTwinkle {
    0%, 100% { opacity: 0.65; filter: blur(0.8px); }
    50% { opacity: 1; filter: blur(1.2px); }
}

@keyframes pitDeckGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

@keyframes pitBeamSwayL {
    0%, 100% { transform: rotate(-3deg) scaleY(1); opacity: 0.5; }
    50% { transform: rotate(6deg) scaleY(1.08); opacity: 0.68; }
}

@keyframes pitBeamSwayC {
    0%, 100% { transform: translateX(0) scaleY(1); opacity: 0.42; }
    50% { transform: translateX(5%) scaleY(1.07); opacity: 0.62; }
}

@keyframes pitBeamSwayR {
    0%, 100% { transform: rotate(3deg) scaleY(1); opacity: 0.48; }
    50% { transform: rotate(-5deg) scaleY(1.09); opacity: 0.66; }
}

@keyframes pitCartoonBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes pitFanRailSway {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes pitCrowdWave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes pitPhones {
    0%, 100% { opacity: 0.35; }
    45% { opacity: 0.58; }
    72% { opacity: 0.38; }
}

@keyframes pitStrobes {
    0%, 93%, 100% { opacity: 0; }
    93.5% { opacity: 0.28; }
    93.8% { opacity: 0; }
    95.6% { opacity: 0.14; }
    95.9% { opacity: 0; }
}

/* —— Countryside (richer sky, sun, clouds, hills, trees, birds, meadow) —— */
.stage-layer--countryside {
    background:
        linear-gradient(180deg, #4a9fe8 0%, #7ec8ff 22%, #b8e8ff 42%, #d4f5c8 62%, #7ec96a 82%, #3d8a42 100%);
}

.country-deco {
    position: absolute;
    pointer-events: none;
}

.country-deco--sun-glow {
    top: 5%;
    right: 6%;
    width: clamp(72px, 18vw, 120px);
    height: clamp(72px, 18vw, 120px);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 38%, #ffffff 0%, #fff8d0 18%, #ffd040 45%, #ff9020 68%, transparent 72%);
    box-shadow:
        0 0 80px rgba(255, 230, 120, 0.9),
        0 0 160px rgba(255, 200, 80, 0.45),
        0 0 240px rgba(255, 180, 60, 0.2);
    animation: countrySunBob 7s ease-in-out infinite, countrySunPulse 4s ease-in-out infinite;
}

.country-deco--clouds-parallax {
    inset: 0;
    background:
        radial-gradient(ellipse 280px 90px at 10% 28%, rgba(255, 255, 255, 0.88) 0%, transparent 70%),
        radial-gradient(ellipse 320px 100px at 75% 22%, rgba(255, 255, 255, 0.85) 0%, transparent 72%);
    opacity: 0.55;
    animation: countryCloudParallax 48s linear infinite;
}

.country-deco--hills {
    left: -8%;
    right: -8%;
    bottom: 8%;
    height: 48%;
    background:
        radial-gradient(ellipse 60% 85% at 18% 100%, #3d8c48 0%, transparent 58%),
        radial-gradient(ellipse 55% 80% at 52% 100%, #52a85c 0%, transparent 52%),
        radial-gradient(ellipse 50% 78% at 88% 100%, #2f6a38 0%, transparent 55%);
    opacity: 0.98;
    animation: countryHillsRoll 20s ease-in-out infinite;
}

.country-deco--plants {
    bottom: 10%;
    left: 0;
    right: 0;
    height: 28%;
    background-image:
        radial-gradient(ellipse 14px 28px at 8% 88%, rgba(34, 110, 48, 0.95) 0%, rgba(18, 70, 32, 0.9) 55%, transparent 58%),
        radial-gradient(ellipse 12px 22px at 11% 92%, rgba(28, 95, 42, 0.9) 0%, transparent 60%),
        radial-gradient(ellipse 10px 18px at 22% 90%, rgba(45, 125, 58, 0.92) 0%, transparent 58%),
        radial-gradient(ellipse 8px 14px at 26% 94%, rgba(60, 140, 72, 0.85) 0%, transparent 55%),
        radial-gradient(ellipse 16px 30px at 88% 86%, rgba(30, 95, 42, 0.94) 0%, transparent 58%),
        radial-gradient(ellipse 11px 24px at 84% 91%, rgba(40, 115, 55, 0.88) 0%, transparent 58%),
        radial-gradient(ellipse 18px 14px at 48% 93%, rgba(255, 220, 100, 0.35) 0%, rgba(255, 180, 60, 0.15) 45%, transparent 55%),
        radial-gradient(ellipse 10px 10px at 52% 88%, rgba(255, 240, 200, 0.45) 0%, transparent 62%),
        radial-gradient(ellipse 9px 16px at 38% 91%, rgba(220, 100, 160, 0.35) 0%, transparent 58%),
        radial-gradient(ellipse 9px 16px at 62% 89%, rgba(160, 120, 220, 0.3) 0%, transparent 58%);
    filter: drop-shadow(0 2px 4px rgba(0, 40, 20, 0.25));
    animation: countryPlantsSway 7s ease-in-out infinite;
    opacity: 0.95;
}

.country-deco--trees {
    left: 0;
    right: 0;
    bottom: 8%;
    height: 32%;
    background:
        linear-gradient(102deg, transparent 0%, rgba(18, 52, 28, 0.96) 7%, rgba(18, 52, 28, 0.96) 9%, transparent 10%),
        linear-gradient(96deg, transparent 0%, rgba(14, 48, 24, 0.94) 21%, rgba(14, 48, 24, 0.94) 24%, transparent 25%),
        linear-gradient(99deg, transparent 0%, rgba(22, 58, 32, 0.92) 36%, rgba(22, 58, 32, 0.92) 40%, transparent 42%),
        linear-gradient(97deg, transparent 0%, rgba(16, 50, 26, 0.95) 70%, rgba(16, 50, 26, 0.95) 74%, transparent 76%),
        linear-gradient(180deg, transparent 38%, rgba(10, 38, 18, 0.99) 100%);
    clip-path: polygon(0% 100%, 0% 32%, 7% 18%, 14% 36%, 21% 12%, 29% 40%, 39% 10%, 47% 38%, 57% 6%, 67% 36%, 77% 16%, 86% 42%, 100% 22%, 100% 100%);
    animation: countryTreesSway 6s ease-in-out infinite;
}

.country-deco--clouds-far {
    inset: 0;
    background:
        radial-gradient(ellipse 220px 75px at 22% 20%, rgba(255, 255, 255, 0.92) 0%, transparent 72%),
        radial-gradient(ellipse 260px 85px at 68% 16%, rgba(255, 255, 255, 0.88) 0%, transparent 74%),
        radial-gradient(ellipse 180px 60px at 48% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 160px 52px at 90% 26%, rgba(255, 255, 255, 0.75) 0%, transparent 68%);
    animation: countryCloudsDrift 36s linear infinite reverse;
    opacity: 0.88;
}

.country-deco--birds {
    top: 18%;
    left: 0;
    right: 0;
    height: 22%;
    background:
        radial-gradient(ellipse 10px 4px at 22% 55%, #1a3040 0%, transparent 72%),
        radial-gradient(ellipse 10px 4px at 25% 52%, #1a3040 0%, transparent 72%),
        radial-gradient(ellipse 10px 4px at 62% 38%, #1a3040 0%, transparent 72%),
        radial-gradient(ellipse 10px 4px at 65% 35%, #1a3040 0%, transparent 72%),
        radial-gradient(ellipse 8px 3px at 84% 62%, #1a3040 0%, transparent 72%),
        radial-gradient(ellipse 8px 3px at 40% 72%, #1a3040 0%, transparent 72%);
    animation: countryBirdsFly 12s linear infinite;
    opacity: 0.6;
}

.country-deco--meadow {
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    background:
        radial-gradient(circle at 12% 75%, rgba(255, 255, 220, 0.2) 0%, transparent 28%),
        radial-gradient(circle at 38% 88%, rgba(255, 200, 255, 0.14) 0%, transparent 22%),
        radial-gradient(circle at 72% 80%, rgba(220, 255, 200, 0.16) 0%, transparent 24%),
        repeating-linear-gradient(
            92deg,
            transparent 0px,
            transparent 2px,
            rgba(255, 255, 255, 0.04) 2px,
            rgba(255, 255, 255, 0.04) 3px
        ),
        linear-gradient(180deg, transparent 0%, rgba(35, 110, 45, 0.45) 100%);
    animation: countryMeadowShimmer 5s ease-in-out infinite;
}

.country-deco--wind-grass {
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    background: repeating-linear-gradient(
        88deg,
        rgba(20, 80, 35, 0.15) 0px,
        rgba(20, 80, 35, 0.15) 1px,
        transparent 1px,
        transparent 5px
    );
    mask-image: linear-gradient(to top, black 0%, transparent 85%);
    animation: countryWindGrass 2.8s ease-in-out infinite;
    mix-blend-mode: multiply;
}

.country-deco--butterflies {
    inset: 0;
    background-image:
        radial-gradient(ellipse 6px 4px at 20% 72%, rgba(255, 140, 80, 0.85) 0%, transparent 80%),
        radial-gradient(ellipse 6px 4px at 22% 71%, rgba(80, 180, 255, 0.7) 0%, transparent 80%),
        radial-gradient(ellipse 5px 3px at 55% 68%, rgba(255, 200, 100, 0.8) 0%, transparent 80%),
        radial-gradient(ellipse 5px 3px at 57% 67%, rgba(100, 200, 255, 0.65) 0%, transparent 80%),
        radial-gradient(ellipse 6px 4px at 78% 76%, rgba(255, 160, 200, 0.75) 0%, transparent 80%),
        radial-gradient(ellipse 6px 4px at 80% 75%, rgba(180, 220, 255, 0.65) 0%, transparent 80%);
    animation: countryButterflies 10s ease-in-out infinite;
    opacity: 0.75;
}

.country-deco--mist {
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 35%;
    background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(255, 255, 255, 0.35) 0%, transparent 65%);
    animation: countryMistDrift 14s ease-in-out infinite;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

.country-deco--lens-flare {
    top: 4%;
    right: 2%;
    width: 45%;
    height: 40%;
    background:
        linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.12) 48%, transparent 52%),
        radial-gradient(ellipse 120px 40px at 85% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    animation: countryLensDrift 12s ease-in-out infinite;
    pointer-events: none;
}

@keyframes countrySunBob {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(12px) translateX(-4px); }
}

@keyframes countrySunPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

@keyframes countryCloudParallax {
    0% { transform: translateX(-6%) scale(1.02); }
    100% { transform: translateX(6%) scale(1.02); }
}

@keyframes countryHillsRoll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}

@keyframes countryTreesSway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(8px) rotate(0.4deg); }
}

@keyframes countryCloudsDrift {
    0% { transform: translateX(-5%); }
    100% { transform: translateX(5%); }
}

@keyframes countryBirdsFly {
    0% { transform: translateX(-12%) translateY(0); opacity: 0.45; }
    50% { opacity: 0.75; transform: translateX(0) translateY(-6px); }
    100% { transform: translateX(12%) translateY(0); opacity: 0.45; }
}

@keyframes countryPlantsSway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes countryMeadowShimmer {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.08) saturate(1.12); }
}

@keyframes countryWindGrass {
    0%, 100% { transform: skewX(0deg); opacity: 0.7; }
    50% { transform: skewX(-3deg); opacity: 0.95; }
}

@keyframes countryButterflies {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(8px, -14px) rotate(2deg); }
    50% { transform: translate(-4px, -8px) rotate(-1deg); }
    75% { transform: translate(12px, -20px) rotate(1deg); }
}

@keyframes countryMistDrift {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(20px); opacity: 0.6; }
}

@keyframes countryLensDrift {
    0%, 100% { opacity: 0.6; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(2deg); }
}

/* —— Fantasy: moon, starfield, aurora, sparkles, shooting stars —— */
.stage-layer--fantasy {
    background:
        radial-gradient(ellipse 120% 90% at 50% 110%, rgba(40, 20, 80, 0.6) 0%, transparent 55%),
        linear-gradient(168deg, #060018 0%, #14082e 28%, #1a0a42 55%, #0a0418 100%);
}

.fantasy-deco {
    position: absolute;
    pointer-events: none;
}

.fantasy-deco--sky {
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(100, 60, 180, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 80% 30%, rgba(40, 100, 160, 0.2) 0%, transparent 45%);
    animation: fantasySkyBreathe 12s ease-in-out infinite;
}

.fantasy-deco--nebula {
    inset: -20%;
    background:
        radial-gradient(ellipse 50% 40% at 30% 45%, rgba(180, 80, 200, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 45% 38% at 70% 55%, rgba(60, 200, 220, 0.28) 0%, transparent 48%),
        radial-gradient(ellipse 35% 30% at 55% 35%, rgba(255, 120, 180, 0.2) 0%, transparent 45%);
    filter: blur(28px);
    mix-blend-mode: screen;
    animation: fantasyNebulaDrift 22s ease-in-out infinite;
    opacity: 0.85;
}

.fantasy-deco--stars {
    inset: 0;
    background-image:
        radial-gradient(2.5px 2.5px at 6% 10%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 14% 22%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 28% 8%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 42% 16%, rgba(220, 240, 255, 0.95), transparent),
        radial-gradient(2.5px 2.5px at 58% 6%, #fff, transparent),
        radial-gradient(2px 2px at 72% 14%, rgba(255, 255, 255, 0.88), transparent),
        radial-gradient(1.5px 1.5px at 88% 20%, #fff, transparent),
        radial-gradient(2px 2px at 12% 42%, rgba(255, 220, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 38% 48%, #fff, transparent),
        radial-gradient(2.5px 2.5px at 62% 44%, rgba(200, 255, 255, 0.95), transparent),
        radial-gradient(2px 2px at 86% 52%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 24% 68%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 52% 72%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 78% 66%, rgba(240, 220, 255, 0.9), transparent);
    background-size: 100% 100%;
    animation: fantasyStarsTwinkle 2.8s ease-in-out infinite alternate;
}

.fantasy-deco--stars-slow {
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 18% 32%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 48% 28%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.2px 1.2px at 76% 38%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 92% 58%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 34% 78%, rgba(200, 230, 255, 0.65), transparent),
        radial-gradient(1px 1px at 8% 52%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1px 1px at 62% 18%, rgba(255, 240, 200, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 84% 44%, rgba(200, 255, 255, 0.58), transparent),
        radial-gradient(1px 1px at 40% 8%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.1px 1.1px at 22% 88%, rgba(255, 220, 255, 0.55), transparent);
    animation: fantasyStarsSlowDrift 18s linear infinite;
    opacity: 0.62;
}

.fantasy-deco--constellation {
    inset: 0;
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 1.5px, transparent 1.6px),
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 1.2px, transparent 1.3px),
        radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 1.3px, transparent 1.4px),
        linear-gradient(52deg, transparent calc(12% - 1px), rgba(200, 220, 255, 0.35) 12%, rgba(200, 220, 255, 0.35) calc(12% + 2px), transparent calc(12% + 3px)),
        linear-gradient(128deg, transparent calc(18% - 1px), rgba(200, 220, 255, 0.28) 18%, rgba(200, 220, 255, 0.28) calc(18% + 2px), transparent calc(18% + 3px)),
        radial-gradient(circle at 68% 16%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 1.4px, transparent 1.5px),
        radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 1.2px, transparent 1.3px),
        radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 1.3px, transparent 1.4px),
        linear-gradient(168deg, transparent calc(68% - 1px), rgba(220, 200, 255, 0.3) 68%, rgba(220, 200, 255, 0.3) calc(68% + 2px), transparent calc(68% + 3px)),
        radial-gradient(circle at 44% 12%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 1px, transparent 1.1px),
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 1px, transparent 1.1px);
    background-size: 100% 100%;
    animation: fantasyConstellationPulse 5s ease-in-out infinite alternate;
}

.fantasy-deco--moon {
    top: 8%;
    right: 10%;
    width: clamp(64px, 16vw, 112px);
    height: clamp(64px, 16vw, 112px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 32%, #fffef8 0%, #f0e8c0 28%, #c8b090 58%, #5a4838 100%),
        radial-gradient(circle at 70% 55%, rgba(0, 0, 0, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 40% 70%, rgba(0, 0, 0, 0.08) 0%, transparent 25%);
    box-shadow:
        0 0 50px rgba(255, 250, 230, 0.95),
        0 0 100px rgba(200, 180, 255, 0.5),
        0 0 160px rgba(120, 100, 200, 0.25),
        inset -14px -14px 28px rgba(0, 0, 0, 0.18);
    animation: fantasyMoonGlow 6s ease-in-out infinite;
}

.fantasy-deco--moon-sister {
    top: 22%;
    left: 8%;
    width: clamp(28px, 7vw, 44px);
    height: clamp(28px, 7vw, 44px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #e8e0f8 0%, #b8a8d8 45%, #504060 100%);
    box-shadow:
        0 0 24px rgba(200, 190, 255, 0.55),
        inset -6px -6px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.88;
    animation: fantasyMoonSisterFloat 10s ease-in-out infinite;
}

.fantasy-deco--mini-saturn {
    top: 14%;
    left: 28%;
    width: clamp(22px, 5.5vw, 36px);
    height: clamp(22px, 5.5vw, 36px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd8a8 0%, #e89850 55%, #804018 100%);
    box-shadow:
        0 0 0 2px rgba(255, 220, 180, 0.25),
        0 0 0 7px rgba(200, 160, 120, 0.12),
        0 0 20px rgba(255, 200, 120, 0.25);
    animation: fantasyMiniSaturnDrift 14s ease-in-out infinite;
}

.fantasy-deco--mini-saturn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 58%;
    width: 140%;
    height: 28%;
    margin-left: -70%;
    border-radius: 50%;
    border: 2px solid rgba(255, 210, 170, 0.35);
    transform: rotate(-8deg) scaleY(0.38);
    box-sizing: border-box;
}

.fantasy-deco--aurora {
    left: -35%;
    right: -35%;
    top: 12%;
    height: 55%;
    background: linear-gradient(
        102deg,
        transparent 0%,
        rgba(80, 255, 200, 0.18) 15%,
        rgba(200, 100, 255, 0.38) 38%,
        rgba(100, 220, 255, 0.32) 58%,
        rgba(255, 140, 220, 0.22) 78%,
        transparent 100%
    );
    background-size: 240% 120%;
    animation: fantasyAuroraWave 9s ease-in-out infinite;
    mix-blend-mode: screen;
    filter: blur(3px);
    opacity: 0.92;
}

.fantasy-deco--cloud-drift {
    left: -15%;
    right: -15%;
    top: 38%;
    height: 35%;
    background:
        radial-gradient(ellipse 45% 35% at 25% 50%, rgba(40, 30, 90, 0.45) 0%, transparent 70%),
        radial-gradient(ellipse 50% 38% at 70% 55%, rgba(30, 50, 100, 0.4) 0%, transparent 72%);
    filter: blur(20px);
    animation: fantasyCloudDrift 40s linear infinite;
    mix-blend-mode: soft-light;
    opacity: 0.65;
}

.fantasy-deco--cloud-puffs {
    inset: 0;
    background-image:
        radial-gradient(ellipse 22% 12% at 18% 62%, rgba(120, 100, 180, 0.35) 0%, transparent 72%),
        radial-gradient(ellipse 18% 10% at 55% 58%, rgba(80, 90, 160, 0.32) 0%, transparent 70%),
        radial-gradient(ellipse 20% 11% at 82% 66%, rgba(100, 80, 140, 0.3) 0%, transparent 68%),
        radial-gradient(ellipse 14% 8% at 38% 72%, rgba(60, 70, 130, 0.28) 0%, transparent 65%);
    filter: blur(14px);
    animation: fantasyCloudPuffs 28s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.55;
}

.fantasy-deco--sparkles {
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 65%, rgba(255, 255, 255, 0.5) 0%, transparent 0.45%),
        radial-gradient(circle at 42% 78%, rgba(200, 255, 255, 0.45) 0%, transparent 0.4%),
        radial-gradient(circle at 68% 62%, rgba(255, 220, 255, 0.5) 0%, transparent 0.42%),
        radial-gradient(circle at 88% 74%, rgba(255, 255, 255, 0.4) 0%, transparent 0.38%);
    background-size: 130% 130%;
    animation: fantasySparkleDrift 14s linear infinite;
    opacity: 0.75;
}

.fantasy-deco--motes {
    inset: 0;
    background-image:
        radial-gradient(ellipse 3px 5px at 10% 40%, rgba(255, 255, 255, 0.35) 0%, transparent 80%),
        radial-gradient(ellipse 3px 5px at 30% 55%, rgba(200, 255, 255, 0.3) 0%, transparent 80%),
        radial-gradient(ellipse 3px 5px at 55% 30%, rgba(255, 220, 255, 0.35) 0%, transparent 80%),
        radial-gradient(ellipse 3px 5px at 75% 48%, rgba(255, 255, 255, 0.3) 0%, transparent 80%),
        radial-gradient(ellipse 3px 5px at 90% 62%, rgba(220, 240, 255, 0.32) 0%, transparent 80%);
    animation: fantasyMotesFloat 16s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.5;
}

.fantasy-deco--orbs {
    inset: 0;
    background-image:
        radial-gradient(circle 14px at 20% 70%, rgba(255, 200, 255, 0.55) 0%, rgba(255, 120, 200, 0.15) 45%, transparent 55%),
        radial-gradient(circle 11px at 78% 64%, rgba(180, 255, 255, 0.5) 0%, rgba(80, 200, 255, 0.12) 45%, transparent 55%),
        radial-gradient(circle 10px at 48% 78%, rgba(255, 255, 200, 0.45) 0%, rgba(255, 220, 100, 0.1) 45%, transparent 55%),
        radial-gradient(circle 8px at 88% 42%, rgba(220, 200, 255, 0.4) 0%, transparent 50%);
    filter: blur(0.5px);
    animation: fantasyOrbsRise 20s ease-in-out infinite;
    mix-blend-mode: screen;
    opacity: 0.75;
}

.fantasy-deco--fairies {
    inset: 0;
    background-image:
        radial-gradient(ellipse 6px 3px at 25% 55%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 5px 2px at 25% 55%, rgba(200, 255, 255, 0.5) 20%, transparent 75%),
        radial-gradient(ellipse 5px 3px at 70% 48%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 4px 2px at 70% 48%, rgba(255, 200, 255, 0.45) 20%, transparent 75%),
        radial-gradient(ellipse 6px 3px at 42% 38%, rgba(255, 255, 255, 0.75) 0%, transparent 70%),
        radial-gradient(ellipse 8px 3px at 58% 72%, rgba(255, 255, 255, 0.7) 0%, transparent 70%);
    animation: fantasyFairiesWander 18s ease-in-out infinite;
    opacity: 0.65;
    mix-blend-mode: screen;
}

.fantasy-deco--birds {
    inset: 0;
    background-image:
        linear-gradient(-35deg, transparent 0%, transparent 46%, rgba(30, 20, 60, 0.5) 46%, rgba(30, 20, 60, 0.5) 47.2%, transparent 47.2%),
        linear-gradient(35deg, transparent 0%, transparent 46%, rgba(30, 20, 60, 0.5) 46%, rgba(30, 20, 60, 0.5) 47.2%, transparent 47.2%);
    background-size: 28px 14px, 28px 14px;
    background-position: 22% 28%, calc(22% + 12px) 28%;
    background-repeat: no-repeat;
    opacity: 0.35;
    animation: fantasyBirdsGlide 24s linear infinite;
}

.fantasy-deco--birds::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(-32deg, transparent 0%, transparent 47%, rgba(40, 30, 80, 0.4) 47%, rgba(40, 30, 80, 0.4) 48%, transparent 48%),
        linear-gradient(32deg, transparent 0%, transparent 47%, rgba(40, 30, 80, 0.4) 47%, rgba(40, 30, 80, 0.4) 48%, transparent 48%);
    background-size: 22px 11px, 22px 11px;
    background-position: 68% 22%, calc(68% + 9px) 22%;
    background-repeat: no-repeat;
    animation: fantasyBirdsGlideB 32s linear infinite reverse;
    opacity: 0.9;
}

.fantasy-deco--shooting {
    top: 22%;
    left: -25%;
    width: 140px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.98), rgba(180, 220, 255, 0.6), transparent);
    transform: rotate(-26deg);
    filter: blur(0.5px);
    box-shadow: 0 0 16px rgba(200, 230, 255, 1);
    animation: fantasyShootingStar 9s ease-in-out infinite;
    opacity: 0;
}

.fantasy-deco--shooting-b {
    top: 48%;
    left: -30%;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.95), transparent);
    transform: rotate(-18deg);
    box-shadow: 0 0 10px rgba(255, 220, 180, 0.9);
    animation: fantasyShootingStarB 11s ease-in-out infinite 2.5s;
    opacity: 0;
}

.fantasy-deco--comet {
    top: 8%;
    left: -20%;
    width: 180px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 20%, rgba(200, 230, 255, 0.95) 55%, rgba(255, 200, 255, 0.5) 78%, transparent 100%);
    filter: blur(0.5px);
    box-shadow: 0 0 20px rgba(200, 240, 255, 0.9), 0 0 40px rgba(180, 200, 255, 0.5);
    transform: rotate(-12deg);
    animation: fantasyCometSweep 14s ease-in-out infinite 4s;
    opacity: 0;
}

.fantasy-deco--silhouette {
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(8, 4, 24, 0.15) 40%, rgba(4, 2, 18, 0.88) 100%),
        linear-gradient(95deg, transparent 0%, transparent 62%, rgba(12, 6, 35, 0.95) 62%, rgba(12, 6, 35, 0.95) 64.5%, transparent 64.5%),
        linear-gradient(88deg, transparent 0%, transparent 58%, rgba(10, 5, 30, 0.92) 58%, rgba(10, 5, 30, 0.92) 59.2%, transparent 59.2%),
        linear-gradient(92deg, transparent 0%, transparent 66.5%, rgba(10, 5, 30, 0.92) 66.5%, rgba(10, 5, 30, 0.92) 67.8%, transparent 67.8%),
        linear-gradient(90deg, transparent 0%, transparent 60%, rgba(8, 4, 26, 0.98) 60%, rgba(8, 4, 26, 0.98) 68%, transparent 68%),
        radial-gradient(ellipse 120% 90% at 50% 100%, rgba(6, 3, 20, 0.98) 0%, rgba(20, 10, 50, 0.55) 45%, transparent 72%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
    animation: fantasySilhouettePulse 16s ease-in-out infinite;
    opacity: 0.92;
}

@keyframes fantasySkyBreathe {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes fantasyNebulaDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(3%, -2%) scale(1.03); }
    66% { transform: translate(-2%, 2%) scale(0.98); }
}

@keyframes fantasyMoonGlow {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.1); transform: scale(1.04); }
}

@keyframes fantasyStarsTwinkle {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.03); }
}

@keyframes fantasyStarsSlowDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-4%, -3%); }
}

@keyframes fantasyAuroraWave {
    0%, 100% { background-position: 0% 40%; }
    50% { background-position: 100% 55%; }
}

@keyframes fantasyCloudDrift {
    0% { transform: translateX(-8%); }
    100% { transform: translateX(8%); }
}

@keyframes fantasySparkleDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-10%, -6%); }
}

@keyframes fantasyMotesFloat {
    0%, 100% { transform: translate(0, 0); opacity: 0.45; }
    50% { transform: translate(5%, -8%); opacity: 0.65; }
}

@keyframes fantasyShootingStar {
    0%, 14% { opacity: 0; transform: translate(0, 0) rotate(-26deg); }
    16% { opacity: 1; }
    24% { opacity: 0; transform: translate(200%, 90px) rotate(-26deg); }
    100% { opacity: 0; }
}

@keyframes fantasyShootingStarB {
    0%, 18% { opacity: 0; transform: translate(0, 0) rotate(-18deg); }
    20% { opacity: 0.95; }
    28% { opacity: 0; transform: translate(220%, 40px) rotate(-18deg); }
    100% { opacity: 0; }
}

@keyframes fantasyConstellationPulse {
    0% { opacity: 0.38; filter: brightness(0.95); }
    100% { opacity: 0.55; filter: brightness(1.1); }
}

@keyframes fantasyMoonSisterFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(6px, -8px); }
}

@keyframes fantasyMiniSaturnDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, 4px) rotate(8deg); }
}

@keyframes fantasyCloudPuffs {
    0%, 100% { transform: translateX(-4%) scale(1); }
    50% { transform: translateX(5%) scale(1.03); }
}

@keyframes fantasyOrbsRise {
    0%, 100% { transform: translate(0, 4px); opacity: 0.65; }
    50% { transform: translate(-8px, -12px); opacity: 0.9; }
}

@keyframes fantasyFairiesWander {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(3%, -2%); }
    66% { transform: translate(-2%, 1%); }
}

@keyframes fantasyBirdsGlide {
    0% { transform: translateX(-5%); }
    100% { transform: translateX(8%); }
}

@keyframes fantasyBirdsGlideB {
    0% { transform: translateX(4%); }
    100% { transform: translateX(-6%); }
}

@keyframes fantasyCometSweep {
    0%, 12% { opacity: 0; transform: translate(0, 0) rotate(-12deg); }
    14% { opacity: 1; }
    22% { opacity: 0; transform: translate(160%, 70px) rotate(-12deg); }
    100% { opacity: 0; }
}

@keyframes fantasySilhouettePulse {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 0.96; }
}

/* —— Under the sea: light rays, bubbles, fish, kelp, sand —— */
.stage-layer--undersea {
    background: linear-gradient(180deg, #1a8fc4 0%, #0a5f8a 38%, #043a5c 72%, #021830 100%);
}

.sea-deco {
    position: absolute;
    pointer-events: none;
}

.sea-deco--deep {
    inset: 0;
    background:
        radial-gradient(ellipse 100% 55% at 50% 0%, rgba(180, 240, 255, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse 80% 50% at 80% 100%, rgba(0, 40, 80, 0.45) 0%, transparent 50%);
}

.sea-deco--rays {
    inset: 0;
    background: repeating-conic-gradient(from -12deg at 50% -8%, transparent 0deg 7deg, rgba(255, 255, 255, 0.055) 7deg 8deg);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, transparent 58%);
    animation: seaRaysShift 16s ease-in-out infinite;
    opacity: 0.85;
}

.sea-deco--bubbles {
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 45%, transparent 50%),
        radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.26) 0%, transparent 42%),
        radial-gradient(circle at 55% 95%, rgba(200, 240, 255, 0.32) 0%, transparent 48%),
        radial-gradient(circle at 78% 80%, rgba(255, 255, 255, 0.24) 0%, transparent 45%),
        radial-gradient(circle at 90% 65%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 42% 82%, rgba(255, 255, 255, 0.18) 0%, transparent 38%),
        radial-gradient(circle at 65% 70%, rgba(220, 250, 255, 0.22) 0%, transparent 40%);
    background-size: 100% 100%;
    animation: seaBubblesFloat 10s ease-in-out infinite;
}

.sea-deco--bubbles-far {
    inset: 0;
    background-image:
        radial-gradient(circle at 8% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 88% 35%, rgba(255, 255, 255, 0.07) 0%, transparent 32%),
        radial-gradient(circle at 52% 22%, rgba(200, 240, 255, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 30% 55%, rgba(255, 255, 255, 0.06) 0%, transparent 28%);
    animation: seaBubblesFar 16s ease-in-out infinite reverse;
    opacity: 0.85;
}

.sea-deco--fish-svg {
    inset: 0;
    opacity: 0.92;
}

/* SVG fish span the full stage — scale down so silhouettes match “small fish” feel */
#virtualWorldScene[data-scene="undersea"] .sea-deco--fish-svg {
    transform: scale(0.44);
    transform-origin: center 58%;
}

.sea-fish-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0, 40, 80, 0.35));
}

.sea-fish-svg__school {
    animation: seaFishSvgSwimA 16s ease-in-out infinite;
}

.sea-fish-svg__solo {
    animation: seaFishSvgSwimB 14s ease-in-out infinite 1s;
}

.sea-fish-svg__rear {
    animation: seaFishSvgSwimC 18s ease-in-out infinite 0.5s;
}

@keyframes seaFishSvgSwimA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8%, -12px) scale(1.03); }
}

@keyframes seaFishSvgSwimB {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-6%, 10px); }
}

@keyframes seaFishSvgSwimC {
    0%, 100% { transform: translate(0, 0); }
    40% { transform: translate(14%, 6px); }
}

.sea-deco--school {
    inset: 0;
    background-image:
        radial-gradient(ellipse 10px 5px at 8% 62%, rgba(255, 220, 140, 0.75) 0%, rgba(255, 160, 60, 0.8) 70%, transparent 72%),
        radial-gradient(ellipse 8px 4px at 11% 64%, rgba(255, 210, 130, 0.7) 0%, transparent 72%),
        radial-gradient(ellipse 9px 4px at 14% 60%, rgba(255, 215, 135, 0.72) 0%, transparent 72%),
        radial-gradient(ellipse 8px 4px at 17% 63%, rgba(255, 200, 120, 0.68) 0%, transparent 72%),
        radial-gradient(ellipse 7px 3px at 6% 58%, rgba(255, 230, 150, 0.65) 0%, transparent 72%),
        radial-gradient(ellipse 10px 5px at 72% 44%, rgba(180, 230, 255, 0.55) 0%, rgba(100, 180, 220, 0.65) 70%, transparent 72%),
        radial-gradient(ellipse 8px 4px at 76% 46%, rgba(170, 220, 250, 0.5) 0%, transparent 72%),
        radial-gradient(ellipse 9px 4px at 80% 43%, rgba(160, 210, 245, 0.55) 0%, transparent 72%);
    animation: seaSchoolSwim 14s ease-in-out infinite;
    opacity: 0.88;
}

.sea-deco--fish {
    inset: 0;
    background-image:
        radial-gradient(ellipse 44px 19px at 20% 46%, rgba(255, 200, 120, 0.88) 0%, rgba(255, 130, 50, 0.92) 44%, transparent 47%),
        radial-gradient(ellipse 9px 9px at 16.5% 46%, rgba(255, 255, 255, 0.55) 0%, transparent 72%),
        radial-gradient(ellipse 6px 10px at 23% 46%, rgba(255, 160, 80, 0.85) 0%, transparent 75%),
        radial-gradient(ellipse 38px 15px at 74% 56%, rgba(255, 170, 190, 0.82) 0%, rgba(220, 80, 120, 0.88) 44%, transparent 47%),
        radial-gradient(ellipse 8px 8px at 71% 56%, rgba(255, 255, 255, 0.5) 0%, transparent 72%),
        radial-gradient(ellipse 32px 13px at 46% 36%, rgba(160, 255, 180, 0.65) 0%, rgba(60, 180, 100, 0.75) 44%, transparent 47%),
        radial-gradient(ellipse 7px 7px at 43% 36%, rgba(255, 255, 255, 0.45) 0%, transparent 72%),
        radial-gradient(ellipse 36px 14px at 88% 38%, rgba(255, 220, 100, 0.7) 0%, rgba(255, 160, 40, 0.8) 44%, transparent 47%),
        radial-gradient(ellipse 26px 11px at 38% 68%, rgba(120, 200, 255, 0.55) 0%, rgba(40, 120, 200, 0.7) 44%, transparent 47%),
        radial-gradient(ellipse 6px 6px at 35.5% 68%, rgba(255, 255, 255, 0.4) 0%, transparent 72%),
        radial-gradient(ellipse 30px 12px at 58% 52%, rgba(255, 200, 160, 0.65) 0%, rgba(200, 100, 60, 0.72) 44%, transparent 47%),
        radial-gradient(ellipse 24px 10px at 12% 78%, rgba(200, 180, 255, 0.5) 0%, rgba(120, 80, 200, 0.65) 44%, transparent 47%);
    animation: seaFishSwim 18s ease-in-out infinite;
    opacity: 0.52;
}

.sea-deco--manta {
    top: 36%;
    left: -12%;
    width: 52%;
    height: 26%;
    opacity: 0.55;
    background: radial-gradient(ellipse 70% 50% at 55% 50%, rgba(35, 55, 85, 0.75) 0%, rgba(20, 35, 55, 0.5) 55%, transparent 70%);
    clip-path: polygon(4% 52%, 32% 12%, 96% 48%, 34% 88%);
    filter: blur(0.5px);
    animation: seaMantaGlide 24s ease-in-out infinite;
}

.sea-deco--jellyfish {
    top: 12%;
    right: 8%;
    width: clamp(52px, 13vw, 88px);
    height: clamp(72px, 18vw, 120px);
    animation: seaJellyPulse 5s ease-in-out infinite;
}

.sea-deco--jellyfish::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 32%;
    border-radius: 50% 50% 42% 42%;
    background:
        radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255, 180, 230, 0.55) 0%, rgba(200, 120, 220, 0.35) 55%, rgba(140, 80, 180, 0.25) 100%);
    box-shadow: inset 0 -6px 12px rgba(255, 255, 255, 0.25);
}

.sea-deco--jellyfish::after {
    content: '';
    position: absolute;
    top: 28%;
    left: 15%;
    right: 15%;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 5px,
        rgba(255, 200, 240, 0.35) 5px,
        rgba(255, 200, 240, 0.35) 7px,
        transparent 7px,
        transparent 12px
    );
    mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
    opacity: 0.85;
}

.sea-deco--jellyfish-b {
    top: 22%;
    right: 38%;
    width: clamp(40px, 10vw, 64px);
    height: clamp(56px, 14vw, 92px);
    transform: scaleX(-1);
    animation: seaJellyPulse 4.2s ease-in-out infinite 1.2s;
    opacity: 0.75;
}

.sea-deco--octopus {
    bottom: 22%;
    left: 6%;
    width: clamp(56px, 14vw, 96px);
    height: clamp(64px, 16vw, 104px);
    animation: seaOctopusBob 6s ease-in-out infinite;
}

.sea-deco--octopus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 48%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 160, 200, 0.5) 0%, rgba(180, 80, 140, 0.85) 45%, rgba(100, 40, 90, 0.95) 100%);
    box-shadow:
        inset -4px -4px 10px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 255, 255, 0.12);
}

.sea-deco--octopus::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62%;
    background: repeating-conic-gradient(
        from 0.5turn at 50% 0%,
        transparent 0deg,
        transparent 14deg,
        rgba(140, 60, 110, 0.55) 14deg,
        rgba(140, 60, 110, 0.55) 20deg
    );
    mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 0%, transparent 75%);
    opacity: 0.9;
}

.sea-deco--turtle {
    bottom: 28%;
    right: 18%;
    width: clamp(64px, 16vw, 104px);
    height: clamp(44px, 11vw, 72px);
    animation: seaTurtleSwim 20s ease-in-out infinite;
}

.sea-deco--turtle::before {
    content: '';
    position: absolute;
    left: 18%;
    top: 22%;
    width: 58%;
    height: 52%;
    border-radius: 45%;
    background:
        radial-gradient(circle at 40% 40%, rgba(120, 180, 100, 0.4) 0%, rgba(50, 110, 60, 0.9) 55%, rgba(30, 70, 40, 1) 100%);
    box-shadow:
        inset 0 0 0 3px rgba(80, 140, 70, 0.5),
        inset -6px -4px 10px rgba(0, 0, 0, 0.2);
}

.sea-deco--turtle::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 18% 12% at 12% 52%, rgba(50, 110, 65, 0.88) 0%, rgba(35, 80, 50, 0.95) 70%, transparent 72%),
        radial-gradient(ellipse 18% 12% at 88% 54%, rgba(50, 110, 65, 0.88) 0%, rgba(35, 80, 50, 0.95) 70%, transparent 72%),
        radial-gradient(ellipse 14% 10% at 22% 88%, rgba(45, 100, 60, 0.8) 0%, transparent 72%),
        radial-gradient(ellipse 14% 10% at 78% 88%, rgba(45, 100, 60, 0.8) 0%, transparent 72%);
    opacity: 0.95;
}

.sea-deco--seahorse {
    top: 42%;
    left: 10%;
    width: clamp(22px, 5.5vw, 36px);
    height: clamp(52px, 13vw, 84px);
    background:
        radial-gradient(ellipse 80% 22% at 50% 12%, rgba(255, 200, 120, 0.9) 0%, rgba(255, 140, 60, 0.85) 80%, transparent 82%),
        radial-gradient(ellipse 45% 70% at 55% 55%, rgba(255, 180, 100, 0.85) 0%, rgba(200, 100, 50, 0.9) 70%, transparent 72%);
    border-radius: 45% 45% 50% 50%;
    transform: rotate(-8deg);
    animation: seaSeahorseFloat 8s ease-in-out infinite;
    opacity: 0.88;
}

.sea-deco--starfish {
    bottom: 14%;
    left: 22%;
    width: clamp(28px, 7vw, 44px);
    height: clamp(28px, 7vw, 44px);
    background: radial-gradient(circle at 45% 45%, #ff9868 0%, #e86040 55%, #c04028 100%);
    clip-path: polygon(
        50% 0%,
        61% 38%,
        100% 38%,
        68% 62%,
        82% 100%,
        50% 76%,
        18% 100%,
        32% 62%,
        0% 38%,
        39% 38%
    );
    filter: drop-shadow(0 2px 4px rgba(0, 40, 60, 0.35));
    animation: seaStarfishTilt 10s ease-in-out infinite;
    opacity: 0.88;
}

.sea-deco--kelp {
    bottom: 0;
    left: 0;
    right: 0;
    height: 42%;
    background-image:
        linear-gradient(175deg, transparent 0%, transparent 40%, rgba(20, 90, 50, 0.85) 40%, rgba(10, 60, 35, 0.95) 100%),
        linear-gradient(182deg, transparent 0%, transparent 35%, rgba(30, 110, 60, 0.75) 35%, rgba(15, 70, 40, 0.92) 100%),
        linear-gradient(178deg, transparent 0%, transparent 45%, rgba(25, 95, 55, 0.8) 45%, rgba(12, 55, 32, 0.95) 100%);
    background-size: 18% 100%, 14% 100%, 16% 100%;
    background-position: 8% 100%, 52% 100%, 88% 100%;
    background-repeat: no-repeat;
    filter: blur(0.5px);
    animation: seaKelpSway 7s ease-in-out infinite;
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
}

.sea-deco--crab {
    bottom: 5%;
    right: 8%;
    width: clamp(52px, 13vw, 84px);
    height: clamp(32px, 8vw, 48px);
    animation: seaCrabScuttle 14s ease-in-out infinite;
}

.sea-deco--crab::before {
    content: '';
    position: absolute;
    left: 28%;
    top: 28%;
    width: 44%;
    height: 52%;
    border-radius: 50% 50% 42% 42%;
    background: radial-gradient(circle at 40% 35%, #f05050 0%, #b01818 70%, #701010 100%);
    box-shadow:
        inset 0 -4px 8px rgba(0, 0, 0, 0.25),
        -22px -4px 0 -6px rgba(220, 60, 50, 0.95),
        22px -4px 0 -6px rgba(220, 60, 50, 0.95);
}

.sea-deco--crab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 6px,
        rgba(180, 40, 35, 0.85) 6px,
        rgba(180, 40, 35, 0.85) 9px,
        transparent 9px,
        transparent 14px
    );
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    opacity: 0.75;
}

.sea-deco--sand {
    bottom: 0;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(180deg, rgba(200, 175, 130, 0.35) 0%, rgba(140, 115, 80, 0.55) 100%);
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
    box-shadow: inset 0 8px 24px rgba(0, 30, 50, 0.25);
}

@keyframes seaRaysShift {
    0%, 100% { opacity: 0.75; transform: translateX(-2%); }
    50% { opacity: 1; transform: translateX(2%); }
}

@keyframes seaBubblesFloat {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(-12px); opacity: 1; }
}

@keyframes seaFishSwim {
    0%, 100% { transform: translateX(0) scale(0.44); }
    50% { transform: translateX(4%) scale(0.44); }
}

@keyframes seaKelpSway {
    0%, 100% { transform: skewX(0deg); }
    50% { transform: skewX(2deg); }
}

@keyframes seaBubblesFar {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
    50% { transform: translateY(-20px) scale(1.02); opacity: 0.95; }
}

@keyframes seaSchoolSwim {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5%); }
}

@keyframes seaMantaGlide {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    50% { transform: translate(18%, 8px); opacity: 0.62; }
}

@keyframes seaJellyPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

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

@keyframes seaTurtleSwim {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-12px, 6px); }
}

@keyframes seaSeahorseFloat {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(-5deg) translateY(-10px); }
}

@keyframes seaStarfishTilt {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(12deg); }
}

@keyframes seaCrabScuttle {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(-16px); }
    60% { transform: translateX(8px); }
}

/* —— Space: nebula, stars, ringed planet, rocket —— */
.stage-layer--space {
    background: linear-gradient(168deg, #040010 0%, #0a0428 40%, #120838 70%, #060014 100%);
}

.space-deco {
    position: absolute;
    pointer-events: none;
}

.space-deco--void {
    inset: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(60, 30, 100, 0.35) 0%, transparent 55%);
}

.space-deco--nebula {
    inset: -15%;
    background:
        radial-gradient(ellipse 45% 40% at 25% 40%, rgba(120, 80, 200, 0.28) 0%, transparent 50%),
        radial-gradient(ellipse 40% 35% at 75% 55%, rgba(40, 160, 200, 0.22) 0%, transparent 48%);
    filter: blur(32px);
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: spaceNebulaPulse 20s ease-in-out infinite;
}

.space-deco--stars {
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 8% 12%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 22% 8%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 44% 18%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 62% 6%, rgba(220, 240, 255, 0.95), transparent),
        radial-gradient(2px 2px at 88% 14%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 16% 42%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(2px 2px at 52% 38%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 78% 48%, rgba(255, 220, 255, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 34% 72%, rgba(200, 230, 255, 0.8), transparent),
        radial-gradient(2px 2px at 92% 68%, #fff, transparent);
    background-size: 100% 100%;
    animation: spaceStarsTwinkle 3s ease-in-out infinite alternate;
}

.space-deco--stars-dense {
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 5% 28%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 12% 52%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 38% 8%, rgba(220, 240, 255, 0.8), transparent),
        radial-gradient(1px 1px at 48% 62%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.2px 1.2px at 72% 28%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 82% 58%, rgba(200, 255, 255, 0.7), transparent),
        radial-gradient(1.2px 1.2px at 95% 38%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 28% 88%, rgba(255, 240, 220, 0.65), transparent),
        radial-gradient(1.1px 1.1px at 58% 78%, rgba(255, 255, 255, 0.72), transparent);
    animation: spaceStarsDenseDrift 22s linear infinite;
    opacity: 0.55;
}

.space-deco--planet-gas {
    bottom: 8%;
    left: 4%;
    width: clamp(72px, 18vw, 130px);
    height: clamp(72px, 18vw, 130px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, #f4c090 0%, #d08050 35%, #804020 72%, #301008 100%),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.2) 0%, transparent 40%);
    box-shadow:
        0 0 0 5px rgba(200, 170, 140, 0.22),
        0 0 0 16px rgba(160, 130, 110, 0.12),
        0 0 40px rgba(255, 180, 120, 0.15);
    transform: rotate(-12deg);
    animation: spacePlanetGasBob 8s ease-in-out infinite;
}

.space-deco--planet-gas::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 52%;
    width: 155%;
    height: 32%;
    margin-left: -77.5%;
    border-radius: 50%;
    border: 3px solid rgba(220, 200, 180, 0.38);
    transform: rotate(-10deg) scaleY(0.42);
    box-sizing: border-box;
    pointer-events: none;
}

.space-deco--planet-ice {
    top: 12%;
    right: 6%;
    width: clamp(48px, 12vw, 88px);
    height: clamp(48px, 12vw, 88px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #e8f8ff 0%, #88c8e8 40%, #3068a0 78%, #102848 100%),
        radial-gradient(circle at 65% 55%, rgba(0, 0, 0, 0.15) 0%, transparent 38%);
    box-shadow:
        0 0 30px rgba(120, 200, 255, 0.35),
        inset -8px -6px 16px rgba(0, 40, 80, 0.25);
    animation: spacePlanetIceBob 10s ease-in-out infinite 0.5s;
}

.space-deco--planet-rock {
    top: 42%;
    left: 38%;
    width: clamp(28px, 7vw, 48px);
    height: clamp(28px, 7vw, 48px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 35%, #d89878 0%, #a04030 50%, #481810 100%);
    box-shadow:
        0 0 16px rgba(255, 120, 80, 0.2),
        inset -4px -4px 8px rgba(0, 0, 0, 0.35);
    animation: spacePlanetRockBob 7s ease-in-out infinite 1s;
}

.space-deco--moon-rocky {
    top: 18%;
    left: 22%;
    width: clamp(36px, 9vw, 58px);
    height: clamp(36px, 9vw, 58px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%, #e8e8e8 0%, #b8b8c8 35%, #707080 72%, #303038 100%),
        radial-gradient(circle at 72% 58%, rgba(0, 0, 0, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 30% 70%, rgba(0, 0, 0, 0.08) 0%, transparent 25%);
    box-shadow:
        0 0 20px rgba(220, 220, 240, 0.25),
        inset -6px -6px 12px rgba(0, 0, 0, 0.2);
    animation: spaceMoonRockyBob 9s ease-in-out infinite;
}

/* SVG rockets (readable capsule + fins + flame — not arrow clip-paths) */
.space-deco--rocket-svg {
    pointer-events: none;
}

.space-rocket-art {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

.space-deco--rocket-primary {
    top: 6%;
    right: 5%;
    width: clamp(52px, 13vw, 76px);
    height: clamp(110px, 22vw, 150px);
    animation: spaceRocketSvgBob 5s ease-in-out infinite;
}

.space-deco--rocket-secondary {
    top: 48%;
    left: 4%;
    width: clamp(40px, 10vw, 58px);
    height: clamp(88px, 18vw, 118px);
    transform: rotate(22deg);
    animation: spaceRocketSvgBobAlt 6s ease-in-out infinite 0.6s;
}

.space-rocket-art__flame ellipse:first-child {
    animation: spaceRocketFlamePulse 0.45s ease-in-out infinite alternate;
    transform-origin: 60px 190px;
}

.space-rocket-art--blue .space-rocket-art__flame ellipse:first-child {
    animation: spaceRocketFlamePulse 0.5s ease-in-out infinite alternate;
}

@keyframes spaceRocketSvgBob {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4px, 12px); }
}

@keyframes spaceRocketSvgBobAlt {
    0%, 100% { transform: rotate(22deg) translate(0, 0); }
    50% { transform: rotate(24deg) translate(6px, -8px); }
}

@keyframes spaceRocketFlamePulse {
    0% { opacity: 0.85; transform: scaleY(0.92); }
    100% { opacity: 1; transform: scaleY(1.06); }
}

.space-deco--satellite {
    top: 28%;
    right: 22%;
    width: clamp(52px, 13vw, 80px);
    height: clamp(18px, 4.5vw, 26px);
    animation: spaceSatelliteTumble 12s ease-in-out infinite;
}

.space-deco--satellite::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22%;
    height: 36%;
    margin: -18% 0 0 -11%;
    border-radius: 4px;
    background: linear-gradient(180deg, #c0c8d8 0%, #788898 100%);
    box-shadow: 0 0 6px rgba(200, 220, 255, 0.5);
}

.space-deco--satellite::after {
    content: '';
    position: absolute;
    inset: 10% 0;
    background:
        linear-gradient(90deg, transparent 0%, transparent 8%, rgba(80, 200, 120, 0.55) 8%, rgba(80, 200, 120, 0.55) 28%, transparent 28%, transparent 72%, rgba(80, 200, 120, 0.55) 72%, rgba(80, 200, 120, 0.55) 92%, transparent 92%);
    border-radius: 3px;
    opacity: 0.9;
}

.space-deco--ufo {
    bottom: 38%;
    right: 12%;
    width: clamp(56px, 14vw, 90px);
    height: clamp(28px, 7vw, 44px);
    animation: spaceUfoHover 8s ease-in-out infinite 2s;
}

.space-deco--ufo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 38%;
    border-radius: 50% 50% 40% 40%;
    background: radial-gradient(ellipse 100% 100% at 50% 100%, #a0e8ff 0%, #5090c8 55%, #204060 100%);
    box-shadow: 0 -2px 12px rgba(180, 255, 255, 0.5);
}

.space-deco--ufo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(200, 240, 255, 0.5) 0%, rgba(80, 140, 200, 0.75) 40%, rgba(40, 80, 120, 0.9) 100%);
    box-shadow: 0 6px 20px rgba(100, 200, 255, 0.35);
}

.space-deco--asteroid-belt {
    inset: 0;
    background-image:
        radial-gradient(ellipse 3px 2px at 10% 35%, rgba(180, 160, 140, 0.7), transparent),
        radial-gradient(ellipse 4px 2px at 22% 32%, rgba(160, 150, 130, 0.65), transparent),
        radial-gradient(ellipse 2px 2px at 35% 38%, rgba(200, 180, 160, 0.55), transparent),
        radial-gradient(ellipse 3px 2px at 48% 30%, rgba(170, 155, 135, 0.6), transparent),
        radial-gradient(ellipse 2px 1.5px at 62% 36%, rgba(190, 175, 155, 0.55), transparent),
        radial-gradient(ellipse 4px 2px at 75% 33%, rgba(165, 150, 130, 0.65), transparent),
        radial-gradient(ellipse 2px 2px at 88% 37%, rgba(185, 170, 150, 0.58), transparent),
        radial-gradient(ellipse 3px 2px at 15% 40%, rgba(175, 160, 140, 0.5), transparent),
        radial-gradient(ellipse 2px 2px at 92% 34%, rgba(180, 165, 145, 0.55), transparent);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 48%, transparent 52%);
    animation: spaceAsteroidDrift 40s linear infinite;
    opacity: 0.65;
}

.space-deco--twinkle {
    inset: 0;
    background-image:
        radial-gradient(3px 3px at 70% 22%, rgba(255, 255, 200, 0.9), transparent),
        radial-gradient(2px 2px at 40% 55%, rgba(180, 255, 255, 0.85), transparent),
        radial-gradient(2.5px 2.5px at 85% 42%, rgba(255, 200, 255, 0.8), transparent),
        radial-gradient(2px 2px at 18% 18%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(2.5px 2.5px at 55% 12%, rgba(200, 255, 255, 0.7), transparent);
    animation: spaceTwinkle 2.2s ease-in-out infinite alternate;
    opacity: 0.72;
}

@keyframes spaceNebulaPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

@keyframes spaceStarsTwinkle {
    0% { opacity: 0.75; }
    100% { opacity: 1; }
}

@keyframes spacePlanetGasBob {
    0%, 100% { transform: rotate(-12deg) translateY(0); }
    50% { transform: rotate(-10deg) translateY(-6px); }
}

@keyframes spacePlanetIceBob {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-6px, 8px); }
}

@keyframes spacePlanetRockBob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4px, -4px) scale(1.05); }
}

@keyframes spaceMoonRockyBob {
    0%, 100% { transform: translate(0, 0); opacity: 0.95; }
    50% { transform: translate(5px, -5px); opacity: 1; }
}

@keyframes spaceStarsDenseDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-3%, -2%); }
}

@keyframes spaceSatelliteTumble {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(6px); }
}

@keyframes spaceUfoHover {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50% { transform: translateY(-12px); opacity: 1; }
}

@keyframes spaceAsteroidDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-8%); }
}

@keyframes spaceTwinkle {
    0% { opacity: 0.4; transform: scale(0.95); }
    100% { opacity: 0.95; transform: scale(1.05); }
}

/* —— Candy land: sherbet horizon, soft gumdrop hills, sprinkle foreground —— */
.stage-layer--candy {
    background:
        radial-gradient(ellipse 110% 65% at 50% -12%, rgba(255, 255, 255, 0.92) 0%, transparent 50%),
        radial-gradient(ellipse 90% 45% at 20% 15%, rgba(255, 230, 250, 0.55) 0%, transparent 52%),
        radial-gradient(ellipse 70% 40% at 82% 22%, rgba(220, 245, 255, 0.45) 0%, transparent 48%),
        linear-gradient(188deg, #fff8fd 0%, #ffeef8 18%, #f5e8ff 42%, #e8f4ff 72%, #d4ecff 100%);
}

.candy-deco {
    position: absolute;
    pointer-events: none;
}

.candy-deco--sky {
    inset: 0;
    background:
        radial-gradient(ellipse 75% 48% at 24% 28%, rgba(255, 255, 255, 0.62) 0%, transparent 52%),
        radial-gradient(ellipse 55% 38% at 88% 20%, rgba(255, 248, 230, 0.42) 0%, transparent 46%),
        radial-gradient(ellipse 60% 35% at 52% 8%, rgba(255, 255, 255, 0.38) 0%, transparent 48%);
    animation: candySkyGlow 14s ease-in-out infinite;
}

.candy-deco--hills {
    bottom: 0;
    left: -16%;
    right: -16%;
    height: 56%;
    background:
        radial-gradient(ellipse 36% 48% at 16% 112%, rgba(255, 210, 235, 0.98) 0%, rgba(255, 140, 190, 0.45) 46%, transparent 58%),
        radial-gradient(ellipse 40% 52% at 84% 114%, rgba(200, 255, 220, 0.95) 0%, rgba(100, 210, 160, 0.42) 48%, transparent 58%),
        radial-gradient(ellipse 44% 56% at 48% 106%, rgba(235, 215, 255, 0.96) 0%, rgba(190, 150, 240, 0.38) 50%, transparent 58%),
        radial-gradient(ellipse 52% 38% at 52% 118%, rgba(255, 255, 255, 0.28) 0%, transparent 55%);
    filter: saturate(1.06);
    animation: candyHillsBreathe 12s ease-in-out infinite;
}

.candy-deco--ground {
    bottom: 0;
    left: 0;
    right: 0;
    height: 22%;
    border-radius: 52% 52% 0 0 / 38% 38% 0 0;
    background:
        radial-gradient(ellipse 130% 100% at 50% 110%, rgba(255, 252, 255, 0.55) 0%, transparent 46%),
        radial-gradient(circle at 22% 38%, rgba(255, 255, 255, 0.55) 0%, transparent 36%),
        radial-gradient(circle at 78% 42%, rgba(255, 245, 255, 0.48) 0%, transparent 38%),
        radial-gradient(ellipse 4px 5px at 12% 58%, rgba(255, 140, 200, 0.55) 0%, transparent 72%),
        radial-gradient(ellipse 4px 4px at 35% 72%, rgba(120, 220, 255, 0.45) 0%, transparent 72%),
        radial-gradient(ellipse 4px 5px at 58% 64%, rgba(255, 220, 120, 0.5) 0%, transparent 72%),
        radial-gradient(ellipse 4px 4px at 82% 70%, rgba(180, 255, 160, 0.45) 0%, transparent 72%),
        radial-gradient(ellipse 5px 5px at 92% 52%, rgba(255, 160, 220, 0.45) 0%, transparent 72%),
        linear-gradient(180deg, #fff5fb 0%, #ffe8f5 38%, #f0ecff 72%, #e2f2ff 100%);
    box-shadow:
        inset 0 12px 28px rgba(255, 255, 255, 0.55),
        inset 0 -6px 18px rgba(160, 120, 200, 0.12);
    opacity: 0.97;
}

.candy-deco--gumdrops {
    inset: 0;
    background-image:
        radial-gradient(ellipse 14px 18px at 8% 58%, #ff7090 0%, #c02050 88%, transparent 90%),
        radial-gradient(ellipse 12px 16px at 92% 52%, #70e8ff 0%, #2090c8 88%, transparent 90%),
        radial-gradient(ellipse 11px 14px at 72% 68%, #ffd060 0%, #e09010 88%, transparent 90%),
        radial-gradient(ellipse 13px 17px at 28% 72%, #b8ff70 0%, #58b020 88%, transparent 90%),
        radial-gradient(ellipse 10px 13px at 48% 82%, #d8a0ff 0%, #8840d0 88%, transparent 90%),
        radial-gradient(ellipse 12px 15px at 88% 78%, #ff98c8 0%, #e04090 88%, transparent 90%);
    filter: drop-shadow(0 2px 4px rgba(120, 60, 120, 0.2));
    animation: candyGumdropsBounce 5s ease-in-out infinite;
    opacity: 0.92;
}

.candy-deco--donuts {
    bottom: 12%;
    left: 0;
    right: 0;
    height: 35%;
    background-image:
        radial-gradient(circle 22px at 12% 55%, transparent 42%, rgba(200, 130, 80, 0.95) 43%, rgba(160, 90, 50, 0.98) 52%, rgba(120, 60, 35, 1) 58%, transparent 59%),
        radial-gradient(circle 8px at 12% 55%, rgba(255, 220, 200, 0.35) 0%, transparent 70%),
        radial-gradient(circle 18px at 88% 62%, transparent 40%, rgba(255, 150, 200, 0.55) 41%, rgba(220, 80, 140, 0.85) 50%, rgba(140, 40, 80, 0.95) 56%, transparent 57%),
        radial-gradient(circle 6px at 88% 62%, rgba(255, 255, 255, 0.4) 0%, transparent 65%),
        radial-gradient(circle 16px at 38% 78%, transparent 38%, rgba(255, 200, 120, 0.5) 39%, rgba(220, 140, 60, 0.9) 48%, rgba(160, 90, 40, 1) 54%, transparent 55%);
    background-repeat: no-repeat;
    animation: candyDonutsWiggle 7s ease-in-out infinite;
    opacity: 0.88;
}

.candy-deco--canes {
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
}

.candy-deco--canes::before {
    content: '';
    position: absolute;
    bottom: 2%;
    left: 3%;
    width: 12px;
    height: 52%;
    max-height: 140px;
    border-radius: 8px 8px 4px 4px;
    background: repeating-linear-gradient(-58deg, #fff 0px, #fff 4px, #e83838 4px, #e83838 8px);
    background-size: 12px 100%;
    transform: rotate(-10deg);
    transform-origin: bottom center;
    box-shadow: 2px 2px 8px rgba(200, 40, 40, 0.25);
    animation: candyCaneSway 6s ease-in-out infinite;
}

.candy-deco--canes::after {
    content: '';
    position: absolute;
    bottom: 2%;
    right: 4%;
    width: 11px;
    height: 46%;
    max-height: 120px;
    border-radius: 8px 8px 4px 4px;
    background: repeating-linear-gradient(58deg, #fff 0px, #fff 4px, #38a838 4px, #38a838 8px);
    background-size: 12px 100%;
    transform: rotate(12deg);
    transform-origin: bottom center;
    box-shadow: -2px 2px 8px rgba(40, 140, 60, 0.2);
    animation: candyCaneSwayRight 7s ease-in-out infinite 0.5s;
}

.candy-deco--cupcakes {
    bottom: 10%;
    left: 0;
    right: 0;
    height: 32%;
    background-image:
        radial-gradient(ellipse 28px 14px at 22% 72%, #fff8f0 0%, #f0d8c8 45%, #c8a090 100%),
        radial-gradient(ellipse 32px 18px at 22% 78%, #ffb8e8 0%, #ff80c8 40%, #e040a0 100%),
        radial-gradient(ellipse 6px 6px at 19% 68%, #ff60a0 0%, transparent 70%),
        radial-gradient(ellipse 6px 6px at 25% 68%, #ff60a0 0%, transparent 70%),
        radial-gradient(ellipse 24px 12px at 78% 76%, #fff8f0 0%, #f0e0d0 45%, #d0b8a8 100%),
        radial-gradient(ellipse 28px 16px at 78% 82%, #c8f0ff 0%, #80c8ff 42%, #4090e0 100%),
        radial-gradient(ellipse 5px 5px at 74% 72%, #60c0ff 0%, transparent 70%),
        radial-gradient(ellipse 5px 5px at 82% 72%, #60c0ff 0%, transparent 70%);
    background-repeat: no-repeat;
    animation: candyCupcakesBob 8s ease-in-out infinite;
    opacity: 0.9;
}

.candy-deco--chocolates {
    bottom: 22%;
    left: 0;
    right: 0;
    height: 28%;
    background-image:
        linear-gradient(135deg, #5a3020 0%, #3a1810 50%, #5a3020 100%),
        linear-gradient(135deg, #4a2818 0%, #2a1008 50%, #4a2818 100%),
        linear-gradient(145deg, #6a4030 0%, #402018 50%, #6a4030 100%);
    background-size: 22px 16px, 18px 14px, 20px 15px;
    background-position: 52% 88%, 62% 92%, 44% 95%;
    background-repeat: no-repeat;
    border-radius: 3px;
    filter: drop-shadow(0 3px 5px rgba(60, 30, 20, 0.35));
    animation: candyChocolatesShift 10s ease-in-out infinite;
    opacity: 0.85;
}

.candy-deco--lollipops {
    bottom: 16%;
    left: 0;
    right: 0;
    height: 42%;
    background-image:
        repeating-conic-gradient(from 0deg at 18% 28%, rgba(255, 255, 255, 0.22) 0deg 14deg, transparent 14deg 28deg),
        radial-gradient(circle 26px at 18% 28%, #ff6b9d 0%, #e04070 72%, transparent 73%),
        radial-gradient(circle 9px at 16% 25%, rgba(255, 255, 255, 0.55) 0%, transparent 72%),
        linear-gradient(180deg, #fff 0%, #f5f5f5 100%),
        repeating-conic-gradient(from 12deg at 50% 24%, rgba(255, 255, 255, 0.2) 0deg 16deg, transparent 16deg 32deg),
        radial-gradient(circle 24px at 50% 24%, #6be0c8 0%, #38b8a0 72%, transparent 73%),
        radial-gradient(circle 8px at 48% 21%, rgba(255, 255, 255, 0.5) 0%, transparent 70%),
        linear-gradient(180deg, #fff 0%, #f5f5f5 100%),
        repeating-conic-gradient(from -8deg at 82% 30%, rgba(255, 255, 255, 0.25) 0deg 12deg, transparent 12deg 24deg),
        radial-gradient(circle 22px at 82% 30%, #ffd54f 0%, #f0a020 72%, transparent 73%),
        radial-gradient(circle 7px at 80% 27%, rgba(255, 255, 255, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #fff 0%, #f5f5f5 100%),
        radial-gradient(circle 18px at 36% 38%, #c8a0ff 0%, #8860e0 72%, transparent 73%),
        radial-gradient(circle 6px at 34% 35%, rgba(255, 255, 255, 0.45) 0%, transparent 72%),
        linear-gradient(180deg, #fff 0%, #f0f0ff 100%),
        radial-gradient(circle 16px at 68% 40%, #ff9ec8 0%, #ff5090 72%, transparent 73%),
        linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        9px 58%,
        100% 100%,
        100% 100%,
        100% 100%,
        8px 54%,
        100% 100%,
        100% 100%,
        100% 100%,
        8px 56%,
        100% 100%,
        100% 100%,
        7px 48%,
        100% 100%,
        7px 44%;
    background-position:
        0 0,
        0 0,
        0 0,
        calc(18% - 4.5px) 100%,
        0 0,
        0 0,
        0 0,
        calc(50% - 4px) 100%,
        0 0,
        0 0,
        0 0,
        calc(82% - 4px) 100%,
        0 0,
        0 0,
        calc(36% - 3.5px) 100%,
        0 0,
        calc(68% - 3.5px) 100%;
    background-repeat: no-repeat;
    animation: candyLolliWiggle 6s ease-in-out infinite;
}

.candy-deco--clouds {
    inset: 0;
    background-image:
        radial-gradient(ellipse 120px 48px at 22% 28%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.4) 45%, transparent 55%),
        radial-gradient(ellipse 100px 40px at 72% 22%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.35) 42%, transparent 52%),
        radial-gradient(ellipse 90px 36px at 48% 12%, rgba(255, 255, 255, 0.75) 0%, transparent 50%);
    animation: candyCloudDrift 22s linear infinite;
    opacity: 0.95;
}

.candy-deco--sparkles {
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 30% 40%, #fff, transparent),
        radial-gradient(2px 2px at 60% 35%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 15% 65%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 88% 72%, rgba(255, 255, 255, 0.85), transparent);
    animation: candySparkle 2.5s ease-in-out infinite alternate;
    opacity: 0.85;
}

@keyframes candyGumdropsBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes candyDonutsWiggle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-1deg); }
}

@keyframes candyCaneSway {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-6deg); }
}

@keyframes candyCaneSwayRight {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(16deg); }
}

@keyframes candyCupcakesBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes candyChocolatesShift {
    0%, 100% { transform: translateX(0); opacity: 0.82; }
    50% { transform: translateX(4px); opacity: 0.9; }
}

@keyframes candySkyGlow {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

@keyframes candyHillsBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes candyLolliWiggle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.5deg); }
}

@keyframes candyCloudDrift {
    0% { transform: translateX(-3%); }
    100% { transform: translateX(3%); }
}

@keyframes candySparkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.virtual-world-portal__body {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(14, 12, 28, 0.92) 0%, rgba(22, 18, 40, 0.98) 100%);
}

.virtual-world-toolbar {
    flex: 0 0 auto;
    padding: 12px 14px 10px;
    background: rgba(0, 0, 0, 0.38);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.virtual-world-toolbar__label {
    display: block;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.94);
    margin-bottom: 8px;
    font-size: 0.9em;
    line-height: 1.35;
}

.virtual-world-toolbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.virtual-world-add-btn {
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.virtual-world-add-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
}

.virtual-world-add-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.45);
}

.virtual-world-panels-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 14px 18px;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 14px;
    align-items: stretch;
}

body.virtual-world-open {
    overflow: hidden;
}

body.virtual-world-open #virtualWorldPanelsHost .portal-panel-hidden {
    display: none !important;
}

body.virtual-world-open #virtualWorldPanelsHost .playground-panel--float:not(.portal-panel-hidden) {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 14px 16px 16px;
    border: 2px solid rgba(200, 200, 230, 0.55);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
    animation: playgroundPanelPop 0.38s cubic-bezier(0.33, 1.4, 0.64, 1) both;
}

/* Several panels open: cap each block so the column scrolls; controls stay normal size inside */
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="3"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="4"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="5"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="6"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="7"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="8"] .playground-panel--float:not(.portal-panel-hidden),
body.virtual-world-open #virtualWorldPanelsHost[data-open-panels="9"] .playground-panel--float:not(.portal-panel-hidden) {
    max-height: min(48vh, 520px);
    overflow: auto;
}

body.virtual-world-open #virtualWorldPanelsHost .instruments-section {
    display: contents;
}

body.virtual-world-open #virtualWorldPanelsHost .instruments-section > h2 {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
    font-size: 1em;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

body.virtual-world-open #virtualWorldPanelsHost .effects-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

@keyframes playgroundPanelPop {
    0% { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Narrow width: give the toy strip a bit more vertical room */
@media (max-width: 640px) {
    .virtual-world-scene-viewport {
        flex: 1 1 42%;
    }

    .virtual-world-portal__body {
        flex: 1 1 58%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 16px 14px 20px;
        border-radius: 22px;
    }

    .song-library-section,
    .player-section,
    .playground-modes-section,
    .studio-playground-dock {
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 {
        font-size: 2em;
    }

    .scene-card__emoji {
        font-size: 2rem;
    }

    .drum-pads {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Same pad width as 2-column drum grid; three pads wrap, row(s) centered */
    #loopPads .drum-pad {
        width: calc((100% - 15px) / 2);
        max-width: calc((600px - 15px) / 2);
    }

    .track {
        flex-direction: column;
        align-items: flex-start;
    }

    .white-key {
        width: 35px;
        height: 150px;
    }

    .black-key {
        width: 25px;
        height: 90px;
    }
}