: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);
    --ball-size: clamp(310px, min(88vw, 55vh), 490px);
}

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

html, body {
    height: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Absolute prevention of any scrolling on desktop and mobile */
}

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

/* 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 — centered, comfortable, with natural breathing room */
.app-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1060px;
    height: 100%;
    max-height: 100dvh;
    padding: clamp(10px, 2vh, 24px) clamp(14px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.5vh, 26px);
    box-sizing: border-box;
}

/* Header */
.header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(4px, 0.8vh, 8px);
    flex-shrink: 0;
}

.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.3rem, 5.2vh, 3.8rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-shadow: 0 0 35px rgba(120, 160, 255, 0.45), 0 4px 14px rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22em;
    line-height: 1.12;
}

/* Realistic Mini 8-Ball in Title */
.title-8ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.22em;
    height: 1.22em;
    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;
}

.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);
}

.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.95rem, 2vh, 1.25rem);
    color: #a6b3d8;
    max-width: 90vw;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.03em;
}

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

.primary-btn {
    background: linear-gradient(135deg, #2b3990 0%, #151a44 100%);
    border: 1px solid rgba(126, 249, 255, 0.4);
    color: #ffffff;
    padding: clamp(6px, 1vh, 10px) clamp(20px, 3.2vw, 28px);
    border-radius: 40px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(0.72rem, 1.1vh, 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 — Responsive flex container */
.ball-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 1;
    min-height: 0;
}

.ball-shadow {
    position: absolute;
    bottom: -15px;
    width: calc(var(--ball-size) * 0.82);
    height: calc(var(--ball-size) * 0.14);
    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: var(--ball-size);
    height: var(--ball-size);
    border-radius: 50%;
    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove default focus ring on mouse click, but provide clean glow on keyboard navigation */
.ball,
.ball:focus,
.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;
}

.ball:focus-visible {
    outline: 3px solid rgba(77, 238, 234, 0.7) !important;
    outline-offset: 6px !important;
}

/* The Realistic Obsidian 8 Ball */
.ball {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    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: 8%;
    left: 14%;
    width: 34%;
    height: 20%;
    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: 8%;
    right: 11%;
    width: 44%;
    height: 22%;
    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 */
.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);
    cursor: pointer;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FRONT FACE ("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;
}

.ball.show-front .front-face {
    opacity: 1;
    pointer-events: auto;
}
.ball.show-front .back-face {
    opacity: 0;
    pointer-events: none;
}

.eight-circle {
    width: 41%;
    height: 41%;
    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: clamp(3.2rem, calc(var(--ball-size) * 0.36), 6.2rem);
    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: 61%;
    height: 61%;
    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: 3.5%;
    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: 4%;
    left: 8%;
    width: 46%;
    height: 24%;
    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: 82%;
    height: 72%;
    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: 100%;
    height: 100%;
    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: 16%;
    border-radius: 8px;
    position: relative;
}

.die-face-inner {
    width: 80%;
    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: clamp(0.85rem, 1.8vh, 1.15rem);
    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;
}

/* Bubbles Container */
.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 50%;
    z-index: 5;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(126, 249, 255, 0.35) 40%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.9), 0 0 4px rgba(77, 238, 234, 0.3);
    animation: riseAndPop linear forwards;
}

@keyframes riseAndPop {
    0% {
        transform: translateY(0) scale(0.6);
        opacity: 0;
    }
    15% {
        opacity: 0.85;
    }
    85% {
        opacity: 0.75;
    }
    100% {
        transform: translateY(-90px) scale(1.15);
        opacity: 0;
    }
}

/* Physical Shake Keyframe Animation */
.ball.shaking {
    animation: physicalShake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes physicalShake {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    10% { transform: translate3d(-14px, 6px, 0) rotate(-4deg); }
    20% { transform: translate3d(16px, -12px, 0) rotate(5deg); }
    30% { transform: translate3d(-18px, 12px, 0) rotate(-5deg); }
    40% { transform: translate3d(15px, -10px, 0) rotate(4deg); }
    50% { transform: translate3d(-12px, 8px, 0) rotate(-3deg); }
    60% { transform: translate3d(10px, -6px, 0) rotate(2.5deg); }
    70% { transform: translate3d(-8px, 4px, 0) rotate(-2deg); }
    80% { transform: translate3d(5px, -3px, 0) rotate(1deg); }
    90% { transform: translate3d(-2px, 1px, 0) rotate(-0.5deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* Fullscreen Mystic Flash Overlay */
.screen-flash {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #ffffff 0%, rgba(200, 245, 255, 0.9) 30%, rgba(77, 238, 234, 0.5) 60%, rgba(10, 15, 45, 0.8) 100%);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.75s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.screen-flash.flash-active {
    opacity: 0.92;
    transition: opacity 0.08s ease-in;
}

/* Ball Surge Glow during screen flash */
.ball.flash-surge {
    animation: flashSurgeGlow 0.75s ease-out forwards;
}

@keyframes flashSurgeGlow {
    0% {
        box-shadow: 
            inset -18px -18px 40px rgba(0, 0, 0, 0.95),
            inset 12px 12px 25px rgba(255, 255, 255, 0.18),
            0 25px 50px rgba(0, 0, 0, 0.8),
            0 0 100px rgba(255, 255, 255, 1),
            0 0 160px rgba(77, 238, 234, 0.9);
        transform: scale(1.04);
    }
    100% {
        box-shadow: 
            inset -18px -18px 40px rgba(0, 0, 0, 0.95),
            inset 12px 12px 25px rgba(255, 255, 255, 0.18),
            0 25px 50px rgba(0, 0, 0, 0.8),
            0 0 45px rgba(20, 30, 80, 0.35);
        transform: scale(1);
    }
}

/* Instruction Hint */
.instructions-hint {
    margin-top: clamp(8px, 1.5vh, 14px);
    font-size: clamp(0.85rem, 1.6vh, 1.02rem);
    color: #7b88b2;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    max-width: 92vw;
    box-sizing: border-box;
}

.instructions-hint span {
    text-align: center;
    line-height: 1.35;
}

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 {
    position: relative;
    z-index: 15;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.toolbar-content {
    background: rgba(10, 13, 28, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(126, 249, 255, 0.18);
    border-radius: 40px;
    padding: clamp(6px, 1.1vh, 9px) clamp(10px, 1.5vw, 18px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    max-width: 100%;
}

.theme-selector-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px);
}

.audio-controls-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(3px, 0.5vw, 6px);
}

.theme-pill {
    background: transparent;
    border: 1px solid transparent;
    color: #8c98c2;
    padding: clamp(5px, 0.9vh, 8px) clamp(7px, 0.8vw, 13px);
    border-radius: 24px;
    font-size: clamp(0.72rem, 1.3vh, 0.84rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    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.08);
}

.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: 8px;
    height: 8px;
    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: clamp(5px, 0.9vh, 8px) clamp(10px, 1.2vw, 15px);
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(126, 249, 255, 0.12);
    font-size: clamp(0.78rem, 1.4vh, 0.92rem);
}

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

.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 for mobile & small screens */
@media (max-width: 600px) {
    :root {
        --ball-size: clamp(240px, min(75vw, 36vh), 295px);
    }
    .app-container {
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden;
        padding: clamp(8px, 1.5vh, 14px) 12px;
        gap: clamp(8px, 1.6vh, 14px);
    }
    .header {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .title {
        font-size: clamp(1.45rem, 3.6vh, 1.95rem);
        gap: 0.12em;
        letter-spacing: 0.08em;
        max-width: 100%;
        justify-content: center;
    }
    .subtitle {
        font-size: clamp(0.78rem, 1.5vh, 0.88rem);
        line-height: 1.35;
        max-width: 92vw;
    }
    .ball-stage {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .instructions-hint {
        font-size: clamp(0.72rem, 1.3vh, 0.8rem);
        margin-top: 6px;
        max-width: 92vw;
        justify-content: center;
        text-align: center;
    }
    .instructions-hint span {
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }
    .toolbar {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 4px;
    }
    .toolbar-content {
        border-radius: 22px;
        padding: 6px 8px;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-direction: column;
    }
    .theme-selector-group {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 2px 2px;
        gap: 6px;
        justify-content: flex-start;
    }
    .theme-selector-group::-webkit-scrollbar {
        display: none;
    }
    .theme-pill {
        padding: 5px 11px;
        font-size: 0.74rem;
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: 18px;
        gap: 5px;
    }
    .audio-controls-group {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 8px;
        padding-top: 4px;
        border-top: 1px solid rgba(126, 249, 255, 0.1);
    }
    .audio-pill {
        padding: 4px 11px;
        font-size: 0.74rem;
    }
}