/* Neon Gaming Icons - CSS Only Icons for YallaLudoHub */

/* Base Icon Styles */
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    line-height: 1;
}

[class^="icon-"]::before,
[class*=" icon-"]::before {
    content: '';
    display: inline-block;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Sizes */
.icon-sm::before {
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
}

.icon-md::before {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
}

.icon-lg::before {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.icon-xl::before {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

/* Like Icon */
.icon-like::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #00ff88, #00d9ff);
    clip-path: polygon(50% 0%, 0% 100%, 50% 75%, 100% 100%);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
}

.icon-like:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 15px rgba(0, 255, 136, 0.6));
    transform: scale(1.1);
}

.icon-like.liked::before {
    background: linear-gradient(135deg, #ff00ff, #ff6600);
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
}

/* Comment Icon */
.icon-comment::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00d9ff;
    border-radius: 0.25rem;
    background: transparent;
    position: relative;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
}

.icon-comment::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #00d9ff;
    border-bottom: 2px solid #00d9ff;
    border-radius: 0 0 0.25rem 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.8));
}

.icon-comment:hover::before {
    border-color: #00ff88;
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
    transform: scale(1.1);
}

/* Views/Eye Icon */
.icon-views::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff00ff;
    border-radius: 50% 0;
    transform: rotate(-45deg);
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    position: relative;
}

.icon-views::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 0.5rem;
    height: 0.5rem;
    background: #ff00ff;
    border-radius: 50%;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8));
}

.icon-views:hover::before {
    border-color: #ff6600;
    filter: drop-shadow(0 0 5px rgba(255, 102, 0, 1)) drop-shadow(0 0 10px rgba(255, 102, 0, 0.8));
    transform: rotate(-45deg) scale(1.1);
}

/* Home Icon */
.icon-home::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #00ff88, #00d9ff);
    clip-path: polygon(50% 0%, 0% 50%, 20% 50%, 20% 100%, 80% 100%, 80% 50%, 100% 50%);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
}

.icon-home:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 15px rgba(0, 255, 136, 0.6));
    transform: scale(1.1) translateY(-2px);
}

/* Rooms Icon */
.icon-rooms::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #00d9ff, #b347ff);
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 80%, 0% 60%);
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
}

.icon-rooms:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: scale(1.1);
}

/* Challenges Icon */
.icon-challenges::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #ff00ff, #ff6600);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    animation: icon-pulse 2s ease-in-out infinite;
}

.icon-challenges:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 15px rgba(255, 0, 255, 0.6));
    transform: scale(1.15) rotate(5deg);
    animation: icon-pulse-fast 1s ease-in-out infinite;
}

/* Achievements Icon */
.icon-achievements::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #ff6600, #ffd700);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 102, 0, 0.6));
}

.icon-achievements:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 102, 0, 1)) drop-shadow(0 0 10px rgba(255, 102, 0, 0.8)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    transform: scale(1.15);
}

/* Search Icon */
.icon-search::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00ff88;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-search::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 2px;
    background: #00ff88;
    transform: rotate(45deg);
    border-radius: 2px;
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-search:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: scale(1.1);
}

/* Notifications Icon */
.icon-notifications::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff00ff;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), transparent);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
}

.icon-notifications:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 15px rgba(255, 0, 255, 0.6));
    transform: scale(1.1);
    animation: icon-shake 0.5s ease-in-out;
}

/* Profile Icon */
.icon-profile::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00d9ff;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
    position: relative;
}

.icon-profile::after {
    content: '';
    position: absolute;
    bottom: 0.125rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #00d9ff;
    border-top: none;
    border-radius: 0 0 50% 50%;
    filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.8));
}

.icon-profile:hover::before {
    border-color: #00ff88;
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
    transform: scale(1.1);
}

/* Settings Icon */
.icon-settings::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b347ff;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(179, 71, 255, 0.8)) drop-shadow(0 0 6px rgba(179, 71, 255, 0.6));
    position: relative;
}

.icon-settings::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    background: #b347ff;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(179, 71, 255, 0.8));
}

.icon-settings:hover::before {
    filter: drop-shadow(0 0 5px rgba(179, 71, 255, 1)) drop-shadow(0 0 10px rgba(179, 71, 255, 0.8));
    transform: scale(1.1) rotate(90deg);
    transition: transform 0.3s ease;
}

/* Edit Icon */
.icon-edit::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00d9ff;
    border-top: none;
    border-right: none;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
    position: relative;
    transform: rotate(-45deg);
}

.icon-edit::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid #00d9ff;
    border-left: none;
    border-bottom: none;
    border-radius: 0 0.25rem 0 0;
    filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.8));
}

.icon-edit:hover::before {
    border-color: #00ff88;
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
    transform: rotate(-45deg) scale(1.1);
}

/* Delete Icon */
.icon-delete::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff4444;
    border-radius: 0.125rem;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.8)) drop-shadow(0 0 6px rgba(255, 68, 68, 0.6));
    position: relative;
}

.icon-delete::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 2px;
    background: #ff4444;
    border-radius: 2px;
    filter: drop-shadow(0 0 2px rgba(255, 68, 68, 0.8));
}

.icon-delete:hover::before {
    border-color: #ff0000;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 1)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
    transform: scale(1.1);
}

/* Coins Icon */
.icon-coins::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ffd700;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), transparent);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    position: relative;
}

.icon-coins::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid #ffd700;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.8));
}

.icon-coins:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 1)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    transform: scale(1.1) rotate(5deg);
}

/* Diamonds Icon */
.icon-diamonds::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #00d9ff, #b347ff);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(179, 71, 255, 0.6));
}

.icon-diamonds:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(179, 71, 255, 0.8)) drop-shadow(0 0 15px rgba(179, 71, 255, 0.6));
    transform: scale(1.1) rotate(45deg);
}

/* XP/Star Icon */
.icon-xp::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #00ff88, #ffd700);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.icon-xp:hover::before {
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    transform: scale(1.15) rotate(15deg);
    animation: icon-pulse 1s ease-in-out infinite;
}

/* Arrow Right Icon */
.icon-arrow-right::before {
    width: 1.25rem;
    height: 1.25rem;
    border-right: 2px solid #00ff88;
    border-top: 2px solid #00ff88;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-arrow-right::after {
    content: '';
    position: absolute;
    top: -0.125rem;
    right: -0.5rem;
    width: 0.75rem;
    height: 2px;
    background: #00ff88;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-arrow-right:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: rotate(-45deg) translateX(3px);
}

/* Arrow Left Icon */
.icon-arrow-left::before {
    width: 1.25rem;
    height: 1.25rem;
    border-left: 2px solid #00ff88;
    border-bottom: 2px solid #00ff88;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-arrow-left::after {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: -0.5rem;
    width: 0.75rem;
    height: 2px;
    background: #00ff88;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-arrow-left:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: rotate(-45deg) translateX(-3px);
}

/* Check Icon */
.icon-check::before {
    width: 1.25rem;
    height: 1.25rem;
    border-right: 3px solid #00ff88;
    border-bottom: 3px solid #00ff88;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-check::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: -0.125rem;
    width: 0.5rem;
    height: 0.25rem;
    background: #00ff88;
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-check:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: rotate(45deg) scale(1.1);
}

/* Logout Icon */
.icon-logout::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff4444;
    border-radius: 0.25rem;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.8)) drop-shadow(0 0 6px rgba(255, 68, 68, 0.6));
    position: relative;
}

.icon-logout::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.375rem;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #ff4444;
    border-top: 2px solid #ff4444;
    transform: translateY(-50%) rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(255, 68, 68, 0.8));
}

.icon-logout:hover::before {
    border-color: #ff0000;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 1)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
    transform: translateX(-2px);
}

/* Login Icon */
.icon-login::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00ff88;
    border-radius: 0.25rem;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-login::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.375rem;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-left: 2px solid #00ff88;
    border-bottom: 2px solid #00ff88;
    transform: translateY(-50%) rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-login:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: translateX(2px);
}

/* Register Icon */
.icon-register::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00ff88;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-register::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    background: #00ff88;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-register:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: scale(1.1);
}

/* Post Icon */
.icon-post::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff00ff;
    border-radius: 0.25rem;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), transparent);
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    position: relative;
}

.icon-post::after {
    content: '';
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 1px solid #ff00ff;
    border-left: 1px solid #ff00ff;
    filter: drop-shadow(0 0 1px rgba(255, 0, 255, 0.8));
}

.icon-post:hover::before {
    border-color: #ff6600;
    filter: drop-shadow(0 0 5px rgba(255, 102, 0, 1)) drop-shadow(0 0 10px rgba(255, 102, 0, 0.8));
    transform: scale(1.05);
}

/* Heart Icon (for like when not liked) */
.icon-heart::before {
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    border: 2px solid #666;
    border-radius: 0 0 0 0.25rem;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 2px rgba(102, 102, 102, 0.5));
    position: relative;
}

.icon-heart::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    border-bottom: none;
    border-right: none;
    filter: drop-shadow(0 0 1px rgba(102, 102, 102, 0.5));
}

.icon-heart:hover::before {
    border-color: #ff00ff;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    transform: rotate(-45deg) scale(1.1);
}

/* Win Icon */
.icon-win::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #ffd700, #ff6600);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.icon-win:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 1)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    transform: scale(1.15);
}

/* Lose Icon */
.icon-lose::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #ff4444, #cc0000);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.8)) drop-shadow(0 0 6px rgba(255, 68, 68, 0.6));
    transform: rotate(180deg);
}

.icon-lose:hover::before {
    filter: drop-shadow(0 0 5px rgba(255, 68, 68, 1)) drop-shadow(0 0 10px rgba(255, 68, 68, 0.8));
    transform: rotate(180deg) scale(1.15);
}

/* Draw Icon */
.icon-draw::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00d9ff;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
    position: relative;
}

.icon-draw::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid #00d9ff;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.8));
}

.icon-draw:hover::before {
    border-color: #00ff88;
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
    transform: scale(1.1);
}

/* Reply Icon */
.icon-reply::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #b347ff;
    border-left: none;
    border-top: none;
    border-radius: 0 0.25rem 0 0;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(179, 71, 255, 0.8)) drop-shadow(0 0 6px rgba(179, 71, 255, 0.6));
    transform: rotate(180deg);
    position: relative;
}

.icon-reply::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #b347ff;
    border-top: 2px solid #b347ff;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 2px rgba(179, 71, 255, 0.8));
}

.icon-reply:hover::before {
    border-color: #ff00ff;
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8));
    transform: rotate(180deg) scale(1.1);
}

/* Share Icon */
.icon-share::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff6600;
    border-radius: 0.25rem;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 102, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 102, 0, 0.6));
    position: relative;
}

.icon-share::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #ff6600;
    border-top: 2px solid #ff6600;
    border-radius: 0 0.25rem 0 0;
    filter: drop-shadow(0 0 2px rgba(255, 102, 0, 0.8));
}

.icon-share:hover::before {
    border-color: #ff00ff;
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8));
    transform: scale(1.1);
}

/* Target Icon */
.icon-target::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff00ff;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    position: relative;
}

.icon-target::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid #ff00ff;
    border-radius: 50%;
    background: #ff00ff;
    filter: drop-shadow(0 0 2px rgba(255, 0, 255, 0.8));
}

.icon-target:hover::before {
    border-color: #ff6600;
    filter: drop-shadow(0 0 5px rgba(255, 102, 0, 1)) drop-shadow(0 0 10px rgba(255, 102, 0, 0.8));
    transform: scale(1.1);
}

/* Refresh Icon */
.icon-refresh::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00d9ff;
    border-radius: 50%;
    border-top: none;
    border-right: none;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
    transform: rotate(-45deg);
    position: relative;
}

.icon-refresh::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid #00d9ff;
    border-top: 2px solid #00d9ff;
    border-radius: 0 0.25rem 0 0;
    filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.8));
}

.icon-refresh:hover::before {
    border-color: #00ff88;
    filter: drop-shadow(0 0 5px rgba(0, 255, 136, 1)) drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
    transform: rotate(-45deg) scale(1.1);
    animation: icon-spin 1s linear infinite;
}

/* Lock Icon */
.icon-lock::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #666;
    border-radius: 0.25rem;
    background: transparent;
    filter: drop-shadow(0 0 2px rgba(102, 102, 102, 0.5));
    position: relative;
}

.icon-lock::after {
    content: '';
    position: absolute;
    top: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.75rem;
    height: 0.5rem;
    border: 2px solid #666;
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;
    filter: drop-shadow(0 0 1px rgba(102, 102, 102, 0.5));
}

.icon-lock:hover::before {
    border-color: #ff00ff;
    filter: drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 0, 255, 0.6));
    transform: scale(1.1);
}

/* Users Icon */
.icon-users::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00ff88;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-users::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    right: -0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #00ff88;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.8));
}

.icon-users:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: scale(1.1);
}

/* Report/Warning Icon */
.icon-report::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #ff4444;
    border-radius: 0.25rem;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(255, 68, 68, 0.8)) drop-shadow(0 0 6px rgba(255, 68, 68, 0.6));
    position: relative;
}

.icon-report::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.5rem;
    height: 0.5rem;
    background: #ff4444;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(255, 68, 68, 0.8));
}

.icon-report:hover::before {
    border-color: #ff0000;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 1)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
    transform: scale(1.1);
}

/* Chart/Statistics Icon */
.icon-chart::before {
    width: 1.25rem;
    height: 1.25rem;
    border-left: 2px solid #b347ff;
    border-bottom: 2px solid #b347ff;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(179, 71, 255, 0.8)) drop-shadow(0 0 6px rgba(179, 71, 255, 0.6));
    position: relative;
}

.icon-chart::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.25rem;
    width: 0.25rem;
    height: 0.5rem;
    background: #b347ff;
    filter: drop-shadow(0 0 2px rgba(179, 71, 255, 0.8));
}

.icon-chart:hover::before {
    border-color: #ff00ff;
    filter: drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8));
    transform: scale(1.1);
}

/* Key Icon */
.icon-key::before {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #00ff88;
    border-radius: 0.25rem 0.25rem 0 0;
    background: transparent;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 136, 0.6));
    position: relative;
}

.icon-key::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid #00ff88;
    border-radius: 50%;
    filter: drop-shadow(0 0 1px rgba(0, 255, 136, 0.8));
}

.icon-key:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 1)) drop-shadow(0 0 10px rgba(0, 217, 255, 0.8));
    transform: scale(1.1);
}

/* List Icon */
.icon-list::before {
    width: 1.25rem;
    height: 1.25rem;
    border-top: 2px solid #666;
    border-bottom: 2px solid #666;
    background: transparent;
    filter: drop-shadow(0 0 2px rgba(102, 102, 102, 0.5));
    position: relative;
}

.icon-list::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 2px;
    background: #666;
    filter: drop-shadow(0 0 1px rgba(102, 102, 102, 0.5));
}

.icon-list:hover::before {
    border-color: #00d9ff;
    filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 217, 255, 0.6));
    transform: scale(1.1);
}

/* My Room Icon */
.icon-my-room::before {
    width: 1.25rem;
    height: 1.25rem;
    background: linear-gradient(135deg, #b347ff, #ff00ff);
    clip-path: polygon(50% 0%, 0% 50%, 20% 50%, 20% 100%, 80% 100%, 80% 50%, 100% 50%);
    filter: drop-shadow(0 0 3px rgba(179, 71, 255, 0.8)) drop-shadow(0 0 6px rgba(179, 71, 255, 0.6));
}

.icon-my-room:hover::before {
    filter: drop-shadow(0 0 5px rgba(179, 71, 255, 1)) drop-shadow(0 0 10px rgba(255, 0, 255, 0.8));
    transform: scale(1.1) translateY(-2px);
}

/* Animations */
@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 6px currentColor);
    }
    50% {
        opacity: 0.8;
        filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
    }
}

@keyframes icon-pulse-fast {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor);
    }
    50% {
        opacity: 0.9;
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 15px currentColor);
    }
}

@keyframes icon-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px) rotate(-2deg);
    }
    75% {
        transform: translateX(2px) rotate(2deg);
    }
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* RTL Support */
[dir="rtl"] .icon-arrow-right::before {
    transform: rotate(135deg);
}

[dir="rtl"] .icon-arrow-right:hover::before {
    transform: rotate(135deg) translateX(-3px);
}

[dir="rtl"] .icon-arrow-left::before {
    transform: rotate(-135deg);
}

[dir="rtl"] .icon-arrow-left:hover::before {
    transform: rotate(-135deg) translateX(3px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    [class^="icon-"]::before,
    [class*=" icon-"]::before {
        filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 4px currentColor);
    }
}