:root {
    --bg-dark: #070814;
    --cosmic-blue: #141b36;
    --neon-cyan: #4deeea;
    --mystic-purple: #9d4edd;
    --celestial-gold: #f3c969;
    --oracle-blue: #1d3fb8;
    --oracle-deep: #080f30;
    --liquid-dark: #060a1f;
    --die-blue: #234ee0;
    --die-shadow: #0f1d6b;
    --text-glow: #7ef9ff;
    --surface-glass: rgba(18, 22, 45, 0.65);
    --border-glass: rgba(126, 249, 255, 0.18);
}

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

body {
    min-height: 100vh;
    background: radial-gradient(circle at 50% 20%, #151630 0%, #080914 60%, #030408 100%);
    color: #e8ecf8;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* Background Cosmic Canvas */
#cosmicCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

.nebula-glow {
    position: fixed;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(100, 60, 210, 0.22) 0%, rgba(30, 80, 200, 0.12) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    filter: blur(50px);
    animation: pulseNebula 10s ease-in-out infinite alternate;
}

@keyframes pulseNebula {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

/* App Container */
.app-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 680px;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

/* Header */
.header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--neon-cyan);
    text-shadow: 0 0 12px rgba(77, 238, 234, 0.6);
    background: rgba(77, 238, 234, 0.08);
    border: 1px solid rgba(77, 238, 234, 0.3);
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-shadow: 0 0 25px rgba(120, 160, 255, 0.4), 0 4px 10px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18em;
}

/* Realistic Mini 8-Ball in Title */
.title-8ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 0.08em;
    background: radial-gradient(circle at 35% 30%, 
                #3a3e52 0%, 
                #202434 25%, 
                #11131c 50%, 
                #08090e 80%, 
                #020204 100%);
    box-shadow: 
        inset -3px -3px 8px rgba(0, 0, 0, 0.95),
        inset 3px 3px 6px rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.75),
        0 0 20px rgba(77, 238, 234, 0.4);
    flex-shrink: 0;
}

/* Gloss highlight on mini 8-ball */
.title-8ball::before {
    content: '';
    position: absolute;
    top: 9%;
    left: 14%;
    width: 40%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%);
    transform: rotate(-35deg);
    pointer-events: none;
    filter: blur(0.5px);
}

/* White center circle with the '8' digit fully contained */
.title-8ball-inner {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f0f0 60%, #c4c4c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 0.36em;
    font-weight: 900;
    color: #111215;
    line-height: 1;
    box-shadow: 
        inset 0 1.5px 3px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 3px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.65);
    user-select: none;
    letter-spacing: 0;
    overflow: hidden;
}

.subtitle {
    font-size: clamp(0.72rem, 2.2vw, 0.95rem);
    color: #9ba7cb;
    max-width: none;
    white-space: nowrap;
    line-height: 1.4;
    font-weight: 300;
}

/* Action Button Section */
.action-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.primary-btn {
    background: linear-gradient(135deg, #2b3990 0%, #151a44 100%);
    border: 1px solid rgba(126, 249, 255, 0.4);
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 40px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
}

.primary-btn:hover {
    background: linear-gradient(135deg, #3d4fad 0%, #202766 100%);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 20px rgba(77, 238, 234, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transform: scale(1.03);
}

.primary-btn:active {
    transform: scale(0.97);
}

.btn-sparkle {
    color: var(--neon-cyan);
    font-size: 0.9rem;
    animation: sparkleGlow 2s infinite ease-in-out;
}

@keyframes sparkleGlow {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 5px var(--neon-cyan)); }
}

/* 3D Ball Stage */
.ball-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.ball-shadow {
    position: absolute;
    bottom: 30px;
    width: 260px;
    height: 45px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(3, 4, 15, 0.5) 45%, transparent 75%);
    filter: blur(12px);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, filter 0.45s ease;
    pointer-events: none;
}

.ball-shadow.flipping {
    transform: scale(0.8) translateY(12px);
    opacity: 0.45;
    filter: blur(18px);
}

/* 3D Wrapper & Perspective */
.ball-3d-wrapper {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    will-change: transform;
}

/* Remove any browser blue focus ring or box around the ball */
.ball,
.ball:focus,
.ball:focus-visible,
.ball:focus-within,
.ball:active,
.ball-3d-wrapper,
.ball-3d-wrapper:focus,
.ball-3d-wrapper:focus-visible,
.ball-3d-wrapper:active,
.ball-stage:focus,
.ball-stage:focus-visible {
    outline: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}

/* The Realistic Obsidian 8 Ball */
.ball {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    /* Multi-stop realistic sphere shading with dark room studio highlights */
    background: radial-gradient(circle at 35% 30%, 
                #3a3e52 0%, 
                #202434 22%, 
                #11131c 45%, 
                #08090e 75%, 
                #020204 100%);
    box-shadow: 
        inset -18px -18px 40px rgba(0, 0, 0, 0.95),
        inset 12px 12px 25px rgba(255, 255, 255, 0.18),
        inset -2px -2px 15px rgba(50, 80, 180, 0.25),
        0 25px 50px rgba(0, 0, 0, 0.8),
        0 0 45px rgba(20, 30, 80, 0.35);
}

.ball:hover {
    box-shadow: 
        inset -18px -18px 40px rgba(0, 0, 0, 0.95),
        inset 12px 12px 25px rgba(255, 255, 255, 0.25),
        inset -2px -2px 15px rgba(77, 238, 234, 0.3),
        0 30px 60px rgba(0, 0, 0, 0.9),
        0 0 55px rgba(77, 238, 234, 0.3);
}

/* Gloss Curved Highlights for Photorealistic Finish */
.gloss-highlight {
    position: absolute;
    top: 25px;
    left: 45px;
    width: 110px;
    height: 65px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 45% 40%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 80%);
    transform: rotate(-35deg);
    pointer-events: none;
    filter: blur(1.5px);
    z-index: 5;
}

.rim-light {
    position: absolute;
    bottom: 25px;
    right: 35px;
    width: 140px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(77, 238, 234, 0.22) 0%, rgba(157, 78, 221, 0.1) 40%, transparent 75%);
    transform: rotate(45deg);
    pointer-events: none;
    filter: blur(6px);
    z-index: 5;
}

.ambient-reflection {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 4;
}

/* Ball Faces — full-surface hit-testing across entire 320px circle */
.ball-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.001); /* Ensures 100% full-surface hit-testing */
    cursor: pointer;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FRONT FACE (Iconic "8" Logo) */
.front-face {
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* BACK FACE (Liquid Chamber & Die) */
.back-face {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

/* When showing front ("8") side */
.ball.show-front .front-face {
    opacity: 1;
    pointer-events: auto;
}
.ball.show-front .back-face {
    opacity: 0;
    pointer-events: none;
}

.eight-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ffffff 0%, #ededed 55%, #c8c8c8 100%);
    box-shadow: 
        inset 0 3px 8px rgba(255, 255, 255, 0.8),
        inset 0 -6px 12px rgba(0, 0, 0, 0.25),
        0 8px 25px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.08);
}

.eight-digit {
    font-family: 'Cinzel', serif;
    font-size: 5rem;
    font-weight: 900;
    color: #121316;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
    line-height: 1;
}

/* Port Rim & Glass Bevel */
.port-rim {
    width: 194px;
    height: 194px;
    border-radius: 50%;
    background: radial-gradient(circle, #080a14 0%, #151829 75%, #2a304e 100%);
    box-shadow: 
        inset 0 4px 14px rgba(0, 0, 0, 0.95),
        inset 0 -3px 8px rgba(255, 255, 255, 0.22),
        0 0 18px rgba(0, 0, 0, 0.85),
        0 0 28px rgba(35, 78, 224, 0.35);
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 160, 255, 0.28);
    position: relative;
}

/* Liquid Chamber */
.liquid-chamber {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #0c163a 0%, #050a1d 60%, #02040c 100%);
    box-shadow: 
        inset 0 8px 20px rgba(0, 0, 0, 0.95),
        inset 0 -5px 15px rgba(10, 25, 80, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Real-Time Fluid & Caustic Canvas */
.fluid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Convex Glass Lens Reflection */
.glass-lens-reflection {
    position: absolute;
    top: 8px;
    left: 15px;
    width: 90px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 80%);
    transform: rotate(-30deg);
    pointer-events: none;
    filter: blur(1.5px);
    z-index: 6;
    will-change: transform, opacity;
}

/* Murky Fluid Vignette */
.liquid-murk {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 35%, rgba(2, 4, 12, 0.85) 90%);
    pointer-events: none;
    z-index: 3;
}

.liquid-vortex {
    position: absolute;
    width: 180%;
    height: 180%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(35, 78, 224, 0.25) 90deg, transparent 180deg, rgba(77, 238, 234, 0.2) 270deg, transparent 360deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.liquid-vortex.swirling {
    opacity: 1;
    animation: swirlLiquid 1.4s linear infinite;
}

@keyframes swirlLiquid {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Floating Oracle Die */
.oracle-die {
    position: relative;
    z-index: 4;
    width: 158px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.65) translateY(24px) rotate(-4deg);
    opacity: 0.15;
    filter: blur(2.5px);
    transition: opacity 1.1s ease, filter 1.1s ease;
    will-change: transform, filter, opacity;
}

.oracle-die.surfaced {
    opacity: 1;
    filter: blur(0px);
}

/* 3D Triangle Geometry */
.die-triangle {
    width: 156px;
    height: 136px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: linear-gradient(175deg, #2b55eb 0%, #152e96 55%, #0d1b5e 100%);
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.45),
                inset 0 -5px 12px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 22px;
    border-radius: 8px;
    position: relative;
}

.die-face-inner {
    width: 124px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
}

.oracle-text {
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.04em;
    color: #e3f2fd;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 10px rgba(126, 249, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.die-line {
    display: block;
    white-space: nowrap;
    margin: 0 auto;
    text-align: center;
}

/* Text Sentiment Styles */
.oracle-text.affirmative {
    color: #8affec;
    text-shadow: 0 0 10px rgba(77, 238, 234, 0.9), 0 2px 5px rgba(0, 0, 0, 0.9);
}

.oracle-text.neutral {
    color: #ffe89e;
    text-shadow: 0 0 10px rgba(243, 201, 105, 0.8), 0 2px 5px rgba(0, 0, 0, 0.9);
}

.oracle-text.negative {
    color: #ffa3bd;
    text-shadow: 0 0 10px rgba(255, 90, 130, 0.8), 0 2px 5px rgba(0, 0, 0, 0.9);
}

.die-ambient-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(77, 238, 234, 0.25) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.oracle-die.surfaced .die-ambient-glow {
    opacity: 1;
}

/* Micro Bubble particles */
.bubble-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(126, 249, 255, 0.4) 60%, rgba(77, 238, 234, 0.15) 100%);
    box-shadow: 0 0 4px rgba(126, 249, 255, 0.5);
    pointer-events: none;
    z-index: 5;
    will-change: transform, opacity;
}

/* Realistic Shake Keyframes */
.ball.shaking {
    animation: shakePhysical 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shakePhysical {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    12% { transform: translate3d(-14px, -12px, 0) rotate(-6deg) scale(1.02); }
    25% { transform: translate3d(16px, 10px, 0) rotate(5deg) scale(0.98); }
    38% { transform: translate3d(-16px, 8px, 0) rotate(-4deg); }
    50% { transform: translate3d(12px, -8px, 0) rotate(3deg); }
    65% { transform: translate3d(-8px, -4px, 0) rotate(-2deg); }
    80% { transform: translate3d(4px, 3px, 0) rotate(1deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

/* ============================================================
   MYSTIC SCREEN FLASH & REVELATION EFFECT
   Flashes the screen with celestial radiance when revealing
   the oracle die liquid chamber.
   ============================================================ */
.screen-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, 
                rgba(255, 255, 255, 0.98) 0%, 
                rgba(126, 249, 255, 0.85) 30%, 
                rgba(157, 78, 221, 0.5) 60%, 
                rgba(8, 12, 35, 0.8) 95%);
    mix-blend-mode: screen;
}

.screen-flash.flash-active {
    animation: cosmicScreenFlash 0.75s cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
}

@keyframes cosmicScreenFlash {
    0% {
        opacity: 0;
    }
    18% {
        opacity: 1;
        filter: brightness(1.6) contrast(1.2);
    }
    100% {
        opacity: 0;
        filter: brightness(1);
    }
}

/* Ball Cosmic Surge Glow during Revelation Flash */
.ball.flash-surge {
    animation: ballSurgeGlow 0.85s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes ballSurgeGlow {
    0% {
        box-shadow: 
            inset -18px -18px 40px rgba(0, 0, 0, 0.95),
            inset 12px 12px 25px rgba(255, 255, 255, 0.25),
            0 25px 50px rgba(0, 0, 0, 0.8);
    }
    25% {
        box-shadow: 
            inset 0 0 60px rgba(255, 255, 255, 0.9),
            0 0 90px rgba(77, 238, 234, 0.95),
            0 0 140px rgba(157, 78, 221, 0.8);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 
            inset -18px -18px 40px rgba(0, 0, 0, 0.95),
            inset 12px 12px 25px rgba(255, 255, 255, 0.18),
            inset -2px -2px 15px rgba(50, 80, 180, 0.25),
            0 25px 50px rgba(0, 0, 0, 0.8),
            0 0 45px rgba(20, 30, 80, 0.35);
        transform: scale(1);
    }
}

.instructions-hint {
    margin-top: 38px;
    font-size: 0.82rem;
    color: #6d789e;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 5;
}

kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.75rem;
    color: var(--neon-cyan);
    font-family: inherit;
}

/* Toolbar & Theme Selector Controls */
.toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.6rem;
}

.toolbar-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(13, 17, 38, 0.65);
    border: 1px solid rgba(126, 249, 255, 0.14);
    padding: 6px 10px;
    border-radius: 36px;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.theme-selector-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.audio-controls-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-pill {
    background: transparent;
    border: 1px solid transparent;
    color: #8c98c2;
    padding: 6px 13px;
    border-radius: 24px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
}

.theme-pill:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.theme-pill.active {
    background: rgba(43, 85, 235, 0.32);
    border-color: rgba(77, 238, 234, 0.55);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(77, 238, 234, 0.22);
}

.theme-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    transition: transform 0.25s ease;
}

.theme-pill.active .theme-dot {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 8px currentColor;
}

/* Category individual accents */
.theme-pill[data-theme="classic"] .theme-dot { background: #4deeea; }
.theme-pill[data-theme="parent"] .theme-dot { background: #f6bd60; }
.theme-pill[data-theme="corporate"] .theme-dot { background: #64b5f6; }
.theme-pill[data-theme="developer"] .theme-dot { background: #00f5d4; }
.theme-pill[data-theme="sarcastic"] .theme-dot { background: #ff70a6; }
.theme-pill[data-theme="ai"] .theme-dot { background: #b5179e; }
.theme-pill[data-theme="conspiracy"] .theme-dot { background: #38b000; }

/* Audio Controls Pill Specifics */
.audio-pill {
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(126, 249, 255, 0.12);
}

.audio-pill svg {
    stroke: currentColor;
    transition: all 0.22s ease;
}

.audio-pill.active {
    background: rgba(77, 238, 234, 0.12);
    border-color: rgba(77, 238, 234, 0.45);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(77, 238, 234, 0.18);
}

.audio-pill.active svg {
    stroke: var(--neon-cyan);
    filter: drop-shadow(0 0 4px rgba(77, 238, 234, 0.6));
}

.audio-pill:not(.active) {
    color: #5d6785;
    opacity: 0.65;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .toolbar-content {
        border-radius: 24px;
        gap: 6px;
        padding: 6px 8px;
    }
    .theme-selector-group {
        gap: 4px;
    }
    .audio-controls-group {
        gap: 4px;
    }
    .theme-pill {
        padding: 5px 8px;
        font-size: 0.70rem;
    }
    .audio-pill {
        padding: 5px 8px;
    }
    .ball {
        width: 270px;
        height: 270px;
    }
    .port-rim {
        width: 146px;
        height: 146px;
    }
    .oracle-die {
        width: 95px;
        height: 85px;
    }
    .die-triangle {
        width: 95px;
        height: 82px;
    }
    .oracle-text {
        font-size: 0.58rem;
    }
}