/**
 * 长夜电竞 - 原创图标系统
 * 使用CSS绘制，不依赖emoji或外部字体
 */

/* ===== 基础图标样式 ===== */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* ===== 首页/导航 ===== */
.icon-home::before {
    content: '';
    width: 18px;
    height: 16px;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
}

.icon-menu::before {
    content: '';
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}

/* ===== 用户相关 ===== */
.icon-user::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
    top: 2px;
}

.icon-user::after {
    content: '';
    width: 18px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 10px 10px 0 0;
    position: absolute;
    bottom: 2px;
}

.icon-users::before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
}

.icon-users::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
}

/* ===== 游戏/娱乐 ===== */
.icon-game::before {
    content: '';
    width: 20px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: absolute;
}

.icon-game::after {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-trophy::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 0 0 8px 8px;
    position: absolute;
    top: 2px;
}

.icon-trophy::after {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    position: absolute;
    bottom: 2px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* ===== 订单/交易 ===== */
.icon-order::before {
    content: '';
    width: 16px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
}

.icon-order::after {
    content: '';
    width: 8px;
    height: 2px;
    background: currentColor;
    position: absolute;
    top: 6px;
}

.icon-cart::before {
    content: '';
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 0 0 4px 4px;
    position: absolute;
    top: 6px;
}

.icon-cart::after {
    content: '';
    width: 8px;
    height: 4px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    position: absolute;
    top: 0;
}

/* ===== 金钱/财务 ===== */
.icon-money::before {
    content: '';
    width: 20px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
}

.icon-money::after {
    content: '¥';
    font-size: 10px;
    font-weight: bold;
    position: absolute;
}

.icon-wallet::before {
    content: '';
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
}

.icon-wallet::after {
    content: '';
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    right: 4px;
}

/* ===== 消息/通知 ===== */
.icon-message::before {
    content: '';
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
    top: 2px;
}

.icon-message::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
    position: absolute;
    bottom: 2px;
    left: 4px;
}

.icon-bell::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 0 0;
    position: absolute;
    top: 2px;
}

.icon-bell::after {
    content: '';
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
}

/* ===== 设置/系统 ===== */
.icon-settings::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
}

.icon-settings::after {
    content: '';
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 2px;
    position: absolute;
    transform: rotate(45deg);
}

.icon-gear::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
}

.icon-gear::after {
    content: '';
    width: 20px;
    height: 4px;
    background: currentColor;
    position: absolute;
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px currentColor;
}

/* ===== 搜索 ===== */
.icon-search::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

.icon-search::after {
    content: '';
    width: 8px;
    height: 2px;
    background: currentColor;
    position: absolute;
    bottom: 4px;
    right: 2px;
    transform: rotate(45deg);
}

/* ===== 箭头 ===== */
.icon-arrow-right::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
}

.icon-arrow-left::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right: none;
    border-top: none;
    transform: rotate(45deg);
}

.icon-arrow-up::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: none;
    border-bottom: none;
    transform: rotate(-45deg);
}

.icon-arrow-down::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
}

/* ===== 状态 ===== */
.icon-check::before {
    content: '';
    width: 8px;
    height: 14px;
    border: 2px solid currentColor;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
}

.icon-close::before,
.icon-close::after {
    content: '';
    width: 16px;
    height: 2px;
    background: currentColor;
    position: absolute;
}

.icon-close::before {
    transform: rotate(45deg);
}

.icon-close::after {
    transform: rotate(-45deg);
}

.icon-star::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 标准心形 - 使用clip-path */
.icon-heart {
    width: 24px;
    height: 24px;
}

.icon-heart::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    display: block;
    clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
}

/* 空心心形 - 使用SVG背景图方式 */
.icon-heart-outline {
    width: 24px;
    height: 24px;
    position: relative;
}

.icon-heart-outline::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: transparent;
    /* 使用SVG绘制空心心形 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== 时间/日历 ===== */
.icon-calendar::before {
    content: '';
    width: 18px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
    top: 4px;
}

.icon-calendar::after {
    content: '';
    width: 10px;
    height: 4px;
    border: 2px solid currentColor;
    border-bottom: none;
    position: absolute;
    top: 0;
}

.icon-clock::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: absolute;
}

.icon-clock::after {
    content: '';
    width: 6px;
    height: 2px;
    background: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 -4px 0 currentColor;
}

/* ===== 文件/文档 ===== */
.icon-file::before {
    content: '';
    width: 14px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 0 4px 0 0;
    position: absolute;
}

.icon-file::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-left: none;
    position: absolute;
    top: 0;
    right: 4px;
    transform: rotate(45deg);
}

.icon-folder::before {
    content: '';
    width: 20px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 0 2px 2px 2px;
    position: absolute;
    top: 6px;
}

.icon-folder::after {
    content: '';
    width: 10px;
    height: 4px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: 0;
    left: 2px;
}

/* ===== 安全/锁 ===== */
.icon-lock::before {
    content: '';
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
    bottom: 2px;
}

.icon-lock::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    position: absolute;
    top: 2px;
}

.icon-unlock::before {
    content: '';
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
    position: absolute;
    bottom: 2px;
}

.icon-unlock::after {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    position: absolute;
    top: 2px;
    left: -2px;
}

/* ===== 图表/数据 ===== */
.icon-chart::before {
    content: '';
    width: 18px;
    height: 14px;
    border: 2px solid currentColor;
    border-top: none;
    border-right: none;
    position: absolute;
    bottom: 4px;
    right: 2px;
}

.icon-chart::after {
    content: '';
    width: 4px;
    height: 10px;
    background: currentColor;
    position: absolute;
    bottom: 4px;
    left: 4px;
}

.icon-chart-bar::before {
    content: '';
    width: 4px;
    height: 14px;
    background: currentColor;
    position: absolute;
    bottom: 4px;
    left: 2px;
    box-shadow: 6px -4px 0 currentColor, 12px -8px 0 currentColor;
}

/* ===== 电源/退出 ===== */
.icon-power::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top: none;
    border-radius: 0 0 50% 50%;
    position: absolute;
    bottom: 2px;
}

.icon-power::after {
    content: '';
    width: 2px;
    height: 8px;
    background: currentColor;
    position: absolute;
    top: 2px;
}

.icon-logout::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-left: none;
    border-radius: 0 50% 50% 0;
    position: absolute;
    left: 2px;
}

.icon-logout::after {
    content: '';
    width: 8px;
    height: 2px;
    background: currentColor;
    position: absolute;
    right: 2px;
    box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}

/* ===== 长夜电竞专属图标 ===== */
.icon-crown::before {
    content: '';
    width: 20px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
    position: absolute;
    top: 2px;
}

.icon-crown::after {
    content: '';
    width: 20px;
    height: 4px;
    background: currentColor;
    position: absolute;
    bottom: 4px;
}

.icon-sword::before {
    content: '';
    width: 4px;
    height: 18px;
    background: currentColor;
    position: absolute;
    transform: rotate(45deg);
    border-radius: 2px;
}

.icon-sword::after {
    content: '';
    width: 10px;
    height: 4px;
    background: currentColor;
    position: absolute;
    transform: rotate(45deg);
    top: 2px;
    border-radius: 2px;
}

.icon-shield::before {
    content: '';
    width: 18px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 20%, 100% 60%, 50% 100%, 0% 60%, 0% 20%);
}

.icon-diamond::before {
    content: '';
    width: 20px;
    height: 16px;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 40%, 50% 100%, 0% 40%);
}

.icon-fire::before {
    content: '';
    width: 16px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(50% 0%, 80% 40%, 100% 30%, 80% 100%, 20% 100%, 0% 30%, 20% 40%);
}

.icon-bolt::before {
    content: '';
    width: 14px;
    height: 20px;
    background: currentColor;
    clip-path: polygon(60% 0%, 100% 0%, 40% 50%, 80% 50%, 20% 100%, 40% 50%, 0% 50%);
}

/* ===== 图标颜色变体 ===== */
.icon-primary { color: #3b82f6; }
.icon-success { color: #22c55e; }
.icon-warning { color: #f59e0b; }
.icon-danger { color: #ef4444; }
.icon-info { color: #06b6d4; }
.icon-gold { color: #fbbf24; }
.icon-purple { color: #8b5cf6; }

/* ===== 图标动画 ===== */
.icon-spin {
    animation: iconSpin 2s linear infinite;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== 图标按钮 ===== */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    background: transparent;
    color: inherit;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.1);
}

.icon-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
}

.icon-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}