section[btns] my-btn {
    position: relative;
    display: block;
    contain: layout size; /* Judge Woodward - prevent layout shifts */
    border: 0;
    border-radius: var(--btn-border-radius);
    width: 4rem; height: 4rem;
    cursor: pointer;
    transition: background-color var(--transition-duration), box-shadow 0.3s, backdrop-filter 0.3s;
    /* Charles Gratiot Jr. - Glassmorphism using global variables (dark mode defaults in index.css) */
    background-color: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

section[btns] my-btn {
    margin: 0 1rem 0 0;
}

section[btns][nav] my-btn {
    margin: 0 0 0 0.5rem; /* Charles Gratiot Jr. - Reduced from 1rem for tighter nav cluster spacing */
}

section[btns][mice] .mice-btn-wrapper {
    margin: 5px 0 5px 0; /* Charles Gratiot Jr. - px instead of rem to avoid clamp shift on animation */
    width: 4rem; height: 4rem;
    position: relative;
    display: block;
    contain: layout size; /* Peter H - Move containment to the stable wrapper */
    flex: 0 0 auto; /* Peter H - Prevent any flex shrinking/growing */
}

section[btns][mice] my-btn {
    margin: 0;
    position: absolute; top:0; left:0; width: 100%; height: 100%;
    contain: none; /* Peter H - Disable containment on the animating child */
    will-change: transform; /* Peter H - Hint for animation performance */
    
    /* Charles Gratiot Jr. - MICE buttons: solid black bg, white icons (no glassmorphism) */
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Charles Gratiot Jr. - MICE button icons (SVGs don't have .icon class) */
section[btns][mice] my-btn svg path,
section[btns][mice] my-btn svg rect {
    fill: #ffffff;
}

@media (pointer: coarse) {
    section[btns] my-btn {
        transition-delay: 0.3s;
    }
    section[btns] my-btn:active {
        transition-delay: 0s;
        transition: box-shadow 0.1s;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
    }
}

@media (hover: hover) and (pointer: fine) {
    /* Charles Gratiot Jr. - Glow only on hover, no appearance change */
    /* C Gratiot - Added hover: hover check to prevent sticky hover on touch devices */
    section[btns] my-btn:hover {
        box-shadow: var(--glass-shadow-hover);
    }
}

/* Charles Gratiot Jr. - Removed old CSS-generated icons (chevrons and "i" character)
   prev, next, and info buttons now use SVG icons via the icon attribute */

section[btns] my-tooltip  {
    bottom: 4.6rem;
}

/* John R - Caret at left edge for website button tooltip */
section[btns] my-tooltip.caret-left::before {
    left: 1.4rem;
    transform: none;
}

/* Charles Gratiot Jr. - Updated SVG styling for new button icons with built-in backgrounds */
section[btns] my-btn svg * { transition: fill calc(var(--transition-duration) / 2), opacity 0.3s; }

/* Charles Gratiot Jr. - Nav buttons are regular my-btn boxes (no ::before ring)
   Hide SVG .bg and .ring since glassmorphism background replaces them */
section[btns][nav] my-btn svg .bg,
section[btns][nav] my-btn svg .ring {
    opacity: 0;
}

/* Charles Gratiot Jr. - Common buttons use CSS background (rounded square), not SVG .bg circle */
/* Background color set in base rules above, light_mode.css overrides for light theme */

/* Charles Gratiot Jr. - Audio button visibility (only show when audio_guide enabled) */
section[btns][nav] my-btn.audio { display: none; }
body.audio_guide section[btns][nav] my-btn.audio { display: block; }

/* Charles Gratiot Jr. - Audio button state toggle (show/hide .on/.off in SVG based on body.audio_on) */
body:not(.audio_on) section[btns][nav] my-btn.audio svg .on { opacity: 0; }
body.audio_on section[btns][nav] my-btn.audio svg .off { opacity: 0; }

/* SVG icon classes - matching old main.css styling */
section[btns] my-btn svg .bg { fill: var(--btn-icon-bg); }
section[btns] my-btn svg .ring { fill: var(--btn-icon-bg); fill-opacity: 0.8; } /* Charles Gratiot Jr. - Opacity controlled in CSS only */
section[btns] my-btn svg .icon { fill: var(--btn-icon-color); }
section[btns] my-btn svg .icon2 { fill: var(--btn-icon-color); opacity: 0.8; }

/* Charles Gratiot Jr. - Removed SVG icon hover color inversion (buttons glow only, no appearance change) */

/* Charles Gratiot Jr. - Removed old audio path rules - now uses .icon/.bg/.ring classes like other nav buttons */

/* John R - Fix SVG icons scaling with clamp - keeps icons centered in button at all sizes */
section[btns] my-btn svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Charles Gratiot Jr. - Nav SVG icons are small within 40x40 viewBox (designed for circular ring) — scale up */
section[btns][nav] my-btn svg {
    width: 130%;
    height: 130%;
}


/* Charles Gratiot Jr. - Common SVG icons slightly too bold — scale down a touch */
section[btns][common] my-btn svg {
    width: 92%;
    height: 92%;
}

section[btns] my-btn.on,
section[btns] my-btn.off { display: none; }

section[btns] my-btn.on svg .off { opacity: 0; }
section[btns] my-btn.off svg .on { opacity: 0; }


body:not(.autorot) section[btns] my-btn.autorot.off,
body.autorot section[btns] my-btn.autorot.on { display: block; }

body:not(.fullscreen) section[btns] my-btn.fullscreen.off,
body.fullscreen section[btns] my-btn.fullscreen.on { display: block; }



section[btns][mice] my-btn.measure,
section[btns][mice] my-btn.floorplan,
section[btns][mice] my-btn.pdf {
    transition: opacity var(--transition-duration), transform var(--transition-duration), box-shadow 0.3s; /* Peter H - opacity/position + Charles Gratiot Jr. - hover glow */
    transform-origin: center;
}

/* Peter H - Hide buttons when not in correct MICE scene - use display: none to collapse space */
body.mice_scene:not(.btn_measure)  section[btns][mice] .mice-btn-wrapper.measure,
body.mice_scene:not(.btn_floorplan)  section[btns][mice] .mice-btn-wrapper.floorplan,
body.mice_scene:not(.btn_pdf)  section[btns][mice] .mice-btn-wrapper.pdf {
    display: none; /* Peter H - Completely collapse hidden buttons so they don't leave gaps in flexbox */
}

/* Peter H - Visible state for MICE buttons - ensures clean final position */
body.mice_scene.btn_measure section[btns][mice] my-btn.measure,
body.mice_scene.btn_floorplan section[btns][mice] my-btn.floorplan,
body.mice_scene.btn_pdf section[btns][mice] my-btn.pdf {
    opacity: 1;
    transform: translateX(0); /* Peter H - Final position */
}

/* Peter H - Add horizontal bounce animation to the CONTAINER group ONLY on first show */
/* This ensures all buttons move together as a single unit */
body.mice_scene.btn_measure_firstshow section[btns][mice] .mice-group-inner,
body.mice_scene.btn_floorplan_firstshow section[btns][mice] .mice-group-inner,
body.mice_scene.btn_pdf_firstshow section[btns][mice] .mice-group-inner {
    animation: mice_btn_bounce 0.8s ease-out; /* Peter H - Smooth easing, keyframes create bounce */
    transition: none; /* Peter H - Disable transition during animation to prevent conflict */
}

/* Peter H - Create pulsing ring behind MICE buttons */
body.mice_scene section[btns][mice] my-btn.measure::before,
body.mice_scene section[btns][mice] my-btn.floorplan::before,
body.mice_scene section[btns][mice] my-btn.pdf::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) scale(0.8);
    border-radius: 50%; /* Peter H - Make ring circular */
    border: 2px solid rgba(255, 255, 255, 1);
    pointer-events: none;
    z-index: -1;
    opacity: 0; /* Peter H - Start hidden */
    animation: mice_btn_ring_pulse 2s linear;
    animation-delay: var(--transition-duration);
    animation-fill-mode: forwards; /* Peter H - Keep final state (opacity 0) */
}

/* Peter H - Horizontal oscillating bounce animation - slides and bounces into position */
@keyframes mice_btn_bounce {
    0% {
        transform: translateX(100%) translateX(2rem); /* Peter H - Start from hidden state (matches index.css) */
        opacity: 0;
    }
    25% {
        transform: translateX(-50px); /* Peter H - Overshoot LEFT (gentler) */
        opacity: 1;
    }
    45% {
        transform: translateX(10px); /* Peter H - Bounce RIGHT (reduced) */
    }
    65% {
        transform: translateX(-3px); /* Peter H - Bounce LEFT */
    }
    85% {
        transform: translateX(1px); /* Peter H - Bounce RIGHT */
    }
    100% {
        transform: translateX(0); /* Peter H - Settle in final position */
    }
}

/* Peter H - Ring pulse animation - simple linear fade */
@keyframes mice_btn_ring_pulse {
    0% {
        opacity: 0; /* Peter H - Start invisible, matching base state */
        transform: translate(-50%, -50%) scale(0.8); /* Peter H - Start hidden behind button */
    }
    5% {
        opacity: 0.6; /* Peter H - Quick fade in */
    }
    100% {
        opacity: 0; /* Peter H - Fully faded out */
        transform: translate(-50%, -50%) scale(2); /* Peter H - Final size (how far it travels) */
    }
}