/* Dune Character Portrait Sprite Sheet CSS */

.dune-portrait {
    background-image: url('/images/dune-portraits-sprite.png');
    background-repeat: no-repeat;
    display: inline-block;
    width: 64px;
    height: 64px;
}


/* Frame Effect Styles */

.portrait-frame {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
}

.portrait-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 8px;
    z-index: 1;
}


/* Energy Glow Frame */

.frame-energy {
    border: 2px solid #00ccff;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5), inset 0 0 10px rgba(0, 204, 255, 0.1);
    animation: energyPulse 2s infinite alternate;
}

.frame-energy::before {
    background: linear-gradient(45deg, transparent 30%, rgba(0, 204, 255, 0.1) 50%, transparent 70%);
    animation: energySweep 3s infinite;
}

@keyframes energyPulse {
    0% {
        box-shadow: 0 0 10px rgba(0, 204, 255, 0.5), inset 0 0 10px rgba(0, 204, 255, 0.1);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 204, 255, 0.8), inset 0 0 15px rgba(0, 204, 255, 0.2);
    }
}

@keyframes energySweep {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(200%) rotate(45deg);
    }
}


/* Metallic Frame */

.frame-metallic {
    border: 3px solid #b8860b;
    box-shadow: 0 0 0 1px #8b6914, 0 0 0 2px #daa520, 0 4px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #daa520, #b8860b, #8b6914);
    padding: 3px;
}

.frame-metallic::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.1) 100%);
}


/* Sand/Desert Frame */

.frame-sand {
    border: 3px solid #d2b48c;
    box-shadow: 0 0 0 1px #deb887, 0 0 0 2px #f4a460, 0 2px 4px rgba(139, 69, 19, 0.3);
    position: relative;
}

.frame-sand::before {
    background: radial-gradient(ellipse at center, rgba(244, 164, 96, 0.1) 0%, rgba(210, 180, 140, 0.2) 50%, rgba(139, 69, 19, 0.1) 100%);
}

.frame-sand::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><filter id="roughpaper"><feTurbulence baseFrequency="0.04" numOctaves="5" result="noise"/><feDiffuseLighting in="noise" lighting-color="white" surfaceScale="1"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting></filter></defs><rect width="100%" height="100%" filter="url(%23roughpaper)" opacity="0.1"/></svg>');
    pointer-events: none;
    border-radius: 8px;
    z-index: 1;
}


/* Spice Addiction Frame */

.frame-spice {
    border: 3px solid #ff6600;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6), inset 0 0 10px rgba(255, 102, 0, 0.2);
    animation: spiceGlow 3s infinite ease-in-out;
}

.frame-spice::before {
    background: radial-gradient(circle at 30% 30%, rgba(255, 102, 0, 0.3) 0%, rgba(255, 140, 0, 0.1) 40%, transparent 70%);
    animation: spiceSwirl 4s infinite;
}

@keyframes spiceGlow {
    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 102, 0, 0.6), inset 0 0 10px rgba(255, 102, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 102, 0, 0.9), inset 0 0 15px rgba(255, 102, 0, 0.4);
    }
}

@keyframes spiceSwirl {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}


/* House Atreides Frame */

.frame-atreides {
    border: 3px solid #4169e1;
    box-shadow: 0 0 0 1px #1e3a8a, 0 0 0 2px #3b82f6, 0 4px 12px rgba(65, 105, 225, 0.4);
    position: relative;
}

.frame-atreides::before {
    background: linear-gradient(45deg, rgba(65, 105, 225, 0.1) 0%, transparent 25%, rgba(59, 130, 246, 0.1) 50%, transparent 75%, rgba(30, 58, 138, 0.1) 100%);
}


/* House Harkonnen Frame */

.frame-harkonnen {
    border: 3px solid #dc2626;
    box-shadow: 0 0 0 1px #991b1b, 0 0 0 2px #ef4444, 0 4px 12px rgba(220, 38, 38, 0.4);
    position: relative;
}

.frame-harkonnen::before {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(153, 27, 27, 0.2) 50%, rgba(239, 68, 68, 0.1) 100%);
}


/* Fremen Frame */

.frame-fremen {
    border: 3px solid #92400e;
    box-shadow: 0 0 0 1px #451a03, 0 0 0 2px #a16207, 0 4px 12px rgba(146, 64, 14, 0.4);
    position: relative;
}

.frame-fremen::before {
    background: linear-gradient(45deg, rgba(146, 64, 14, 0.1) 0%, rgba(69, 26, 3, 0.2) 25%, rgba(161, 98, 7, 0.1) 50%, rgba(69, 26, 3, 0.2) 75%, rgba(146, 64, 14, 0.1) 100%);
    background-size: 20px 20px;
    animation: fremenSand 5s infinite linear;
}

@keyframes fremenSand {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px;
    }
}


/* Technology Frame */

.frame-tech {
    border: 3px solid #10b981;
    box-shadow: 0 0 0 1px #065f46, 0 0 0 2px #34d399, 0 4px 12px rgba(16, 185, 129, 0.4);
    position: relative;
}

.frame-tech::before {
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.1) 50%, transparent 100%), linear-gradient(0deg, transparent 0%, rgba(16, 185, 129, 0.1) 50%, transparent 100%);
    animation: techScan 2s infinite ease-in-out;
}

@keyframes techScan {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}


/* Legendary Frame */

.frame-legendary {
    border: 3px solid #fbbf24;
    box-shadow: 0 0 0 1px #f59e0b, 0 0 0 2px #fcd34d, 0 0 20px rgba(251, 191, 36, 0.5), inset 0 0 20px rgba(251, 191, 36, 0.1);
    animation: legendaryShine 4s infinite;
    position: relative;
}

.frame-legendary::before {
    background: conic-gradient( from 0deg at 50% 50%, rgba(251, 191, 36, 0.2) 0deg, rgba(245, 158, 11, 0.3) 60deg, rgba(252, 211, 77, 0.2) 120deg, rgba(251, 191, 36, 0.3) 180deg, rgba(245, 158, 11, 0.2) 240deg, rgba(252, 211, 77, 0.3) 300deg, rgba(251, 191, 36, 0.2) 360deg);
    animation: legendaryRotate 6s infinite linear;
}

@keyframes legendaryShine {
    0%,
    100% {
        box-shadow: 0 0 0 1px #f59e0b, 0 0 0 2px #fcd34d, 0 0 20px rgba(251, 191, 36, 0.5), inset 0 0 20px rgba(251, 191, 36, 0.1);
    }
    50% {
        box-shadow: 0 0 0 1px #f59e0b, 0 0 0 2px #fcd34d, 0 0 30px rgba(251, 191, 36, 0.8), inset 0 0 30px rgba(251, 191, 36, 0.2);
    }
}

@keyframes legendaryRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Portrait Selection Interface Styles */

.portrait-selector {
    text-align: center;
    padding: 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #18243300;
}

.portrait-selector .btn {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.portrait-selector .btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.portrait-selector .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.portrait-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portrait-preview .dune-portrait {
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.portrait-preview .dune-portrait:hover {
    transform: scale(1.6) !important;
}

.portrait-info {
    margin-top: 10px;
}

.portrait-info .badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}


/* Navigation Avatar Styles */

.avatar.dune-portrait {
    width: 32px;
    height: 32px;
    background-size: 263px 164px !important;
    /* Half size of sprite sheet (526x328 / 2) */
    border-radius: 4px !important;
    border: 2px solid var(--tblr-primary);
    transition: all 0.2s ease;
    display: inline-block;
    background-repeat: no-repeat;
}

.avatar.dune-portrait:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Navigation Frame Styles */

.nav-frame {
    transform: scale(0.8) !important;
    margin: 2px !important;
    display: inline-block;
}

.nav-frame .avatar {
    margin: 0 !important;
}


/* Toned down animations for navigation */

.nav-frame.frame-energy {
    animation: energyPulse 4s infinite alternate;
}

.nav-frame.frame-spice {
    animation: spiceGlow 6s infinite ease-in-out;
}

.nav-frame.frame-legendary {
    animation: legendaryShine 8s infinite;
}

.nav-frame.frame-glitch {
    animation: glitchShake 1s infinite;
}

.nav-frame.frame-sparkle::after {
    font-size: 8px;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
}

.nav-frame.frame-particle::after {
    font-size: 6px;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
}

.nav-frame.frame-rotating::after {
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-width: 1px;
}


/* Add missing nav-frame specific animations */

.nav-frame.frame-metallic {
    animation: none;
    /* No animation for nav */
}

.nav-frame.frame-sand {
    animation: none;
    /* No animation for nav */
}

.nav-frame.frame-atreides {
    animation: none;
    /* No animation for nav */
}

.nav-frame.frame-harkonnen {
    animation: none;
    /* No animation for nav */
}

.nav-frame.frame-fremen::before {
    animation: fremenSand 8s infinite linear;
    /* Slower for nav */
}

.nav-frame.frame-tech::before {
    animation: techScan 3s infinite;
    /* Slower for nav */
}

.nav-frame.frame-trail::before {
    animation: trailSweep 6s infinite linear;
    /* Slower for nav */
}

.nav-frame.frame-trail::after {
    animation: trailMove 3s infinite ease-in-out;
    /* Slower for nav */
}


/* Scale down all portrait positions for navigation avatars */

.avatar.dune-portrait-0 {
    background-position: 0px 0px !important;
}

.avatar.dune-portrait-1 {
    background-position: -33px 0px !important;
}

.avatar.dune-portrait-2 {
    background-position: -66px 0px !important;
}

.avatar.dune-portrait-3 {
    background-position: -99px 0px !important;
}

.avatar.dune-portrait-4 {
    background-position: -132px 0px !important;
}

.avatar.dune-portrait-5 {
    background-position: -165px 0px !important;
}

.avatar.dune-portrait-6 {
    background-position: -198px 0px !important;
}

.avatar.dune-portrait-7 {
    background-position: -231px 0px !important;
}

.avatar.dune-portrait-8 {
    background-position: 0px -33px !important;
}

.avatar.dune-portrait-9 {
    background-position: -33px -33px !important;
}

.avatar.dune-portrait-10 {
    background-position: -66px -33px !important;
}

.avatar.dune-portrait-11 {
    background-position: -99px -33px !important;
}

.avatar.dune-portrait-12 {
    background-position: -132px -33px !important;
}

.avatar.dune-portrait-13 {
    background-position: -165px -33px !important;
}

.avatar.dune-portrait-14 {
    background-position: -198px -33px !important;
}

.avatar.dune-portrait-15 {
    background-position: -231px -33px !important;
}

.avatar.dune-portrait-16 {
    background-position: 0px -66px !important;
}

.avatar.dune-portrait-17 {
    background-position: -33px -66px !important;
}

.avatar.dune-portrait-18 {
    background-position: -66px -66px !important;
}

.avatar.dune-portrait-19 {
    background-position: -99px -66px !important;
}

.avatar.dune-portrait-20 {
    background-position: -132px -66px !important;
}

.avatar.dune-portrait-21 {
    background-position: -165px -66px !important;
}

.avatar.dune-portrait-22 {
    background-position: -198px -66px !important;
}

.avatar.dune-portrait-23 {
    background-position: -231px -66px !important;
}

.avatar.dune-portrait-24 {
    background-position: 0px -99px !important;
}

.avatar.dune-portrait-25 {
    background-position: -33px -99px !important;
}

.avatar.dune-portrait-26 {
    background-position: -66px -99px !important;
}

.avatar.dune-portrait-27 {
    background-position: -99px -99px !important;
}

.avatar.dune-portrait-28 {
    background-position: -132px -99px !important;
}

.avatar.dune-portrait-29 {
    background-position: -165px -99px !important;
}

.avatar.dune-portrait-30 {
    background-position: -198px -99px !important;
}

.avatar.dune-portrait-31 {
    background-position: -231px -99px !important;
}

.avatar.dune-portrait-32 {
    background-position: 0px -132px !important;
}

.dune-portrait-0 {
    background-position: 0px -0px;
}

.dune-portrait-1 {
    background-position: -66px -0px;
}

.dune-portrait-2 {
    background-position: -132px -0px;
}

.dune-portrait-3 {
    background-position: -198px -0px;
}

.dune-portrait-4 {
    background-position: -264px -0px;
}

.dune-portrait-5 {
    background-position: -330px -0px;
}

.dune-portrait-6 {
    background-position: -396px -0px;
}

.dune-portrait-7 {
    background-position: -462px -0px;
}

.dune-portrait-8 {
    background-position: 0px -66px;
}

.dune-portrait-9 {
    background-position: -66px -66px;
}

.dune-portrait-10 {
    background-position: -132px -66px;
}

.dune-portrait-11 {
    background-position: -198px -66px;
}

.dune-portrait-12 {
    background-position: -264px -66px;
}

.dune-portrait-13 {
    background-position: -330px -66px;
}

.dune-portrait-14 {
    background-position: -396px -66px;
}

.dune-portrait-15 {
    background-position: -462px -66px;
}

.dune-portrait-16 {
    background-position: 0px -132px;
}

.dune-portrait-17 {
    background-position: -66px -132px;
}

.dune-portrait-18 {
    background-position: -132px -132px;
}

.dune-portrait-19 {
    background-position: -198px -132px;
}

.dune-portrait-20 {
    background-position: -264px -132px;
}

.dune-portrait-21 {
    background-position: -330px -132px;
}

.dune-portrait-22 {
    background-position: -396px -132px;
}

.dune-portrait-23 {
    background-position: -462px -132px;
}

.dune-portrait-24 {
    background-position: 0px -198px;
}

.dune-portrait-25 {
    background-position: -66px -198px;
}

.dune-portrait-26 {
    background-position: -132px -198px;
}

.dune-portrait-27 {
    background-position: -198px -198px;
}

.dune-portrait-28 {
    background-position: -264px -198px;
}

.dune-portrait-29 {
    background-position: -330px -198px;
}

.dune-portrait-30 {
    background-position: -396px -198px;
}

.dune-portrait-31 {
    background-position: -462px -198px;
}

.dune-portrait-32 {
    background-position: 0px -264px;
}

.dune-portrait-33 {
    background-position: -66px -264px;
}

.dune-portrait-34 {
    background-position: -132px -264px;
}

.dune-portrait-35 {
    background-position: -198px -264px;
}

.dune-portrait-36 {
    background-position: -264px -264px;
}

.dune-portrait-37 {
    background-position: -330px -264px;
}

.dune-portrait-38 {
    background-position: -396px -264px;
}

.dune-portrait-39 {
    background-position: -462px -264px;
}

.dune-portrait-40 {
    background-position: 0px -330px;
}

.dune-portrait-41 {
    background-position: -66px -330px;
}

.dune-portrait-42 {
    background-position: -132px -330px;
}

.dune-portrait-43 {
    background-position: -198px -330px;
}

.dune-portrait-44 {
    background-position: -264px -330px;
}

.dune-portrait-45 {
    background-position: -330px -330px;
}

.dune-portrait-46 {
    background-position: -396px -330px;
}

.dune-portrait-47 {
    background-position: -462px -330px;
}

.dune-portrait-48 {
    background-position: 0px -396px;
}

.dune-portrait-49 {
    background-position: -66px -396px;
}


/* Frame Selection Interface */

.frame-option {
    text-align: center;
    padding: 15px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #18243300;
    margin-bottom: 10px;
}

.frame-option:hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.frame-option.selected {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.15);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.4);
}

.frame-option span {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #ffffff;
}

.frame-option.selected span {
    color: #0d6efd;
    font-weight: 600;
}

.small-preview {
    transform: scale(0.7) !important;
    margin: 0 auto !important;
    display: inline-block;
}

.small-preview .dune-portrait {
    margin: 0 !important;
}


/* Sparkle Frame */

.frame-sparkle {
    border: 3px solid #ffd700;
    box-shadow: 0 0 0 1px #ffdf00, 0 0 0 2px #ffe55c, 0 4px 12px rgba(255, 215, 0, 0.4);
    position: relative;
    overflow: visible;
}

.frame-sparkle::before {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 223, 0, 0.2) 50%, rgba(255, 229, 92, 0.1) 100%);
}

.frame-sparkle::after {
    content: '✦ ✧ ⋆ ✦ ⋆ ✧ ✦ ⋆ ✧ ✦ ⋆ ✧ ✦ ⋆ ✧ ✦';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    color: #ffd700;
    font-size: 12px;
    animation: sparkleRotate 8s infinite linear;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 2;
}

@keyframes sparkleRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.6;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0.8;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.6;
    }
}


/* Glitch Frame */

.frame-glitch {
    border: 3px solid #00ff41;
    box-shadow: 0 0 0 1px #00cc33, 0 0 0 2px #66ff66, 0 4px 12px rgba(0, 255, 65, 0.4);
    position: relative;
    animation: glitchShake 0.3s infinite;
}

.frame-glitch::before {
    background: linear-gradient(90deg, rgba(0, 255, 65, 0.1) 0%, rgba(255, 0, 65, 0.05) 25%, rgba(0, 255, 65, 0.1) 50%, rgba(65, 255, 0, 0.05) 75%, rgba(0, 255, 65, 0.1) 100%);
    animation: glitchColor 0.1s infinite;
}

.frame-glitch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient( 90deg, transparent, transparent 2px, rgba(0, 255, 65, 0.1) 2px, rgba(0, 255, 65, 0.1) 4px);
    animation: glitchScan 0.2s infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes glitchShake {
    0%,
    100% {
        transform: translate(0);
    }
    10% {
        transform: translate(-1px, 1px);
    }
    20% {
        transform: translate(1px, -1px);
    }
    30% {
        transform: translate(-1px, -1px);
    }
    40% {
        transform: translate(1px, 1px);
    }
    50% {
        transform: translate(-1px, 1px);
    }
    60% {
        transform: translate(1px, -1px);
    }
    70% {
        transform: translate(-1px, -1px);
    }
    80% {
        transform: translate(1px, 1px);
    }
    90% {
        transform: translate(-1px, 1px);
    }
}

@keyframes glitchColor {
    0% {
        filter: hue-rotate(0deg);
    }
    25% {
        filter: hue-rotate(90deg);
    }
    50% {
        filter: hue-rotate(180deg);
    }
    75% {
        filter: hue-rotate(270deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

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


/* Particle Frame */

.frame-particle {
    border: 3px solid #8a2be2;
    box-shadow: 0 0 0 1px #7b1fa2, 0 0 0 2px #ab47bc, 0 4px 12px rgba(138, 43, 226, 0.4);
    position: relative;
    overflow: visible;
}

.frame-particle::before {
    background: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.1) 0%, rgba(123, 31, 162, 0.2) 30%, rgba(171, 71, 188, 0.1) 60%, transparent 100%);
    animation: particlePulse 2s infinite ease-in-out;
}

.frame-particle::after {
    content: '● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ●';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    color: #8a2be2;
    font-size: 8px;
    animation: particleOrbit 6s infinite linear;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    z-index: 2;
}

@keyframes particlePulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes particleOrbit {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(1.1);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    75% {
        transform: rotate(270deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}


/* Trail Frame */

.frame-trail {
    border: 3px solid #ff1493;
    box-shadow: 0 0 0 1px #e91e63, 0 0 0 2px #f48fb1, 0 4px 12px rgba(255, 20, 147, 0.4);
    position: relative;
}

.frame-trail::before {
    background: conic-gradient( from 0deg at 50% 50%, rgba(255, 20, 147, 0.3) 0deg, rgba(233, 30, 99, 0.1) 60deg, rgba(244, 143, 177, 0.2) 120deg, rgba(255, 20, 147, 0.3) 180deg, rgba(233, 30, 99, 0.1) 240deg, rgba(244, 143, 177, 0.2) 300deg, rgba(255, 20, 147, 0.3) 360deg);
    animation: trailSweep 3s infinite linear;
}

.frame-trail::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 8px;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 20, 147, 0.4) 20%, transparent 40%, transparent 60%, rgba(255, 20, 147, 0.4) 80%, transparent 100%);
    animation: trailMove 1.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

@keyframes trailSweep {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes trailMove {
    0%,
    100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(2px) translateY(-2px);
    }
    50% {
        transform: translateX(-1px) translateY(1px);
    }
    75% {
        transform: translateX(1px) translateY(2px);
    }
}


/* Rotating Frame */

.frame-rotating {
    border: 3px solid #00bcd4;
    box-shadow: 0 0 0 1px #0097a7, 0 0 0 2px #4dd0e1, 0 4px 12px rgba(0, 188, 212, 0.4);
    position: relative;
    overflow: visible;
}

.frame-rotating::before {
    background: linear-gradient(45deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 151, 167, 0.2) 25%, rgba(77, 208, 225, 0.1) 50%, rgba(0, 151, 167, 0.2) 75%, rgba(0, 188, 212, 0.1) 100%);
}

.frame-rotating::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid transparent;
    border-top: 2px solid #00bcd4;
    border-right: 2px solid #4dd0e1;
    border-radius: 50%;
    animation: rotatingBorder 2s infinite linear;
    pointer-events: none;
    z-index: 2;
}

@keyframes rotatingBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Responsive frame selection */


/* Fix frame layering in tables and contain effects */

.table .portrait-frame {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    /* Contain effects within frame boundaries */
}

.table .portrait-frame .avatar {
    position: relative;
    z-index: 0;
}

.table .portrait-frame::before {
    z-index: 1;
}

.table .portrait-frame::after {
    z-index: 2;
}


/* Make sure frame effects are contained in table cells */

.table td {
    overflow: hidden;
    position: relative;
}


/* Specific containment for problematic frame effects in tables */

.table .frame-particle::after,
.table .frame-sparkle::after,
.table .frame-trail::after,
.table .frame-rotating::after {
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
}


/* Reduce effect size for table frames to prevent overflow */

.table .frame-glitch::after {
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
}


/* Additional containment for all contexts */

.portrait-frame {
    overflow: hidden !important;
    /* Force containment */
    box-sizing: border-box;
}


/* Ensure pseudo-elements don't extend beyond container */

.portrait-frame::before,
.portrait-frame::after {
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}


/* Specific fixes for overflowing effects */

.frame-sparkle::after {
    font-size: 6px !important;
    /* Reduce star size */
    transform: scale(0.8) !important;
}

.frame-particle::after {
    font-size: 6px !important;
    /* Reduce particle size */
    transform: scale(0.8) !important;
}

.frame-trail::after {
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
}

.frame-rotating::after {
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
}


/* Force containment for all frame effects in any context */

[class*="frame-"]::before,
[class*="frame-"]::after {
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .frame-option {
        padding: 10px;
    }
    .small-preview {
        transform: scale(0.6) !important;
    }
    .frame-option span {
        font-size: 0.7rem;
    }
}