:root{
                --btn-size: calc(.07 * var(--cur-width) * 1px );        /* Button size: 4% of current image width */
                --btn-top: calc(.9 * var(--cur-height) * 1px );        /* 1px has to be inside the calc for the unit to be assigned */
                --track-h: .5em;                                        /* Volume track height */
                --thumb: var(--btn-size);                                 /* Pause circle size */        
                --icon-size: calc(.75 * var(--btn-size) );              /* Icon: width and height */
                --icon-border: calc(.1 * var(--btn-size) );;                                    /* border around play circle */
                --slider-width: calc(.25 * var(--cur-width) * 1px );    /* Volume slider width */
                --slider-height: var(--btn-size);                       /* Volume slider height */
                --accent: rgb(221, 187, 51);
                --fg: #fff;
                --bg: #111;
                --muted: #666;
                --color-green: #39FF14;
                --color-shadow-green: rgba(57, 255, 20, 0.8);
        }

        /* Wrapper */
        .audio-mini{
                position: absolute;
                top: var(--btn-top);
                left: calc(.05 * var(--cur-width) * 1px);
                display: inline-flex;
                align-items: center;
                gap: 0.6rem;
                background: rgba(0, 0, 0, 0.6);
                padding: var(--icon-border) var(--icon-border);
                border-radius: 999px;
        }
        .audio-mini button{
                width: var(--btn-size);
                height: var(--btn-size);
                border: none;
                border-radius: 50%;
                display: grid;
                place-items: center;
                background: linear-gradient(#2a2a2a, #0f0f0f);
                cursor: pointer;
                position: relative;
                transition: box-shadow 0.3s ease-in-out;
                box-shadow: none; /* Ensure no default static shadow */
        }
        .audio-mini button:hover {
                box-shadow: 
                        0 0 5px var(--color-green),
                        0 0 10px var(--color-green),
                        0 0 20px var(--color-shadow-green),
                        0 0 40px var(--color-shadow-green),
                        0 0 80px var(--color-shadow-green);
        }
        .audio-mini button img {
                width: calc(.8 * var(--icon-size));
                height: calc(.8 * var(--icon-size));
                object-fit: contain;
        }


        .audio-mini button:focus-visible{ outline:var(--icon-border) solid var(--accent); outline-offset:var(--icon-border); }

        /* SVG icons inside the button */
        .icon{ width:var(--icon-size); height:var(--icon-size); fill:currentColor; }

        /* The volume group is hidden until playing */
        /* Restore semi-transparent background for volume area */
        .volume {
                display: none;
                align-items: center;
                gap: 0rem;
                background: rgba(0, 0, 0, 0.4); /* semi-transparent black background */
                padding: 0em 0.6em;
                border-radius: 999px;
        }

        .vol-readout {
                color: var(--fg); /* Use the white foreground color variable */
                font-size: 1rem;  /* Ensure it has a reasonable size */
                padding-left: 0.2rem; /* Add a little space from the slider */
        }


        /* Keep it visible only when playing */
        .audio-mini.playing .volume {
                display: inline-flex;
        }

        /* Range element stays within button height; track stays slim */
        .volume input[type="range"]{
                -webkit-appearance: none;
                appearance: none;
                width: var(--slider-width);
                height: var(--thumb);                        /* matches the (smaller) thumb */
                background: transparent;
        }
        /* Speaker icon thumb (unchanged logic, now sizes correctly due to --thumb) */
        .volume input[type="range"]::-webkit-slider-thumb{
                -webkit-appearance:none;
                appearance:none;
                width: var(--thumb); height: var(--thumb);
                border-radius:50%;
                border:0;
                background:
                center/60% 60% no-repeat
                url('data:image/svg+xml;utf8,\
                <svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"white\">\
                <path d=\"M3 9v6h4l5 4V5L7 9H3zm12.5 3a3.5 3.5 0 0 0-1.7-3.03v6.06A3.5 3.5 0 0 0 15.5 12zm2.9 0c0 2.37-1.33 4.43-3.3 5.43v-1.9a4.5 4.5 0 0 0 0-7.06v-1.9c1.97 1 3.3 3.06 3.3 5.43z\"/>\
                </svg>');
                background-color:#333;
                box-shadow:0 0 0 2px #000 inset, 0 1px 2px rgba(0,0,0,.6);
                cursor:grab;
        }

        /* (Optional) Mirror the same thumb sizing for Firefox */
        .volume input[type="range"]::-moz-range-thumb{
                width: var(--thumb); height: var(--thumb);
                border:0; border-radius:50%;
                background:#333 center/60% 60% no-repeat
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 4V5L7 9H3zm12.5 3a3.5 3.5 0 0 0-1.7-3.03v6.06A3.5 3.5 0 0 0 15.5 12zm2.9 0c0 2.37-1.33 4.43-3.3 5.43v-1.9a4.5 4.5 0 0 0 0-7.06v-1.9c1.97 1 3.3 3.06 3.3 5.43z"/></svg>');
                box-shadow:0 0 0 2px #000 inset, 0 1px 2px rgba(0,0,0,.6);
                cursor:grab;
        }

        /* Chrome / WebKit: show default accent fill even before JS updates --val */
        .volume input[type="range"]::-webkit-slider-runnable-track {
                background:
                        linear-gradient(90deg, var(--accent) calc(var(--val, 1) * 100%), #2a2a2a 0)
                        no-repeat;
                background-size: 100% 100%;
                border-radius: 999px;
        }


        /* ---------- Mobile: keep proportions tight too ---------- */