/* 纯 CSS 图标 - 替代 Lucide Icons */

/* 基础图标样式 */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
}

/* 游戏手柄图标 */
.icon-gamepad::before {
    content: "🎮";
    font-style: normal;
}

/* 搜索图标 */
.icon-search {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}

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

/* 星星图标 */
.icon-star {
    position: relative;
    width: 1em;
    height: 1em;
}

.icon-star::before {
    content: "⭐";
    font-style: normal;
    font-size: 1em;
}

/* 用户图标 */
.icon-users::before {
    content: "👥";
    font-style: normal;
}

/* 播放按钮图标 */
.icon-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.5em 0 0.5em 0.8em;
    border-color: transparent transparent transparent currentColor;
}

/* 使用 SVG data URI 的更精确图标 */
.icon-search-svg {
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-star-svg {
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23facc15' stroke='%23facc15' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-users-svg {
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-play-svg {
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-gamepad-svg {
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 11h4'/%3E%3Cpath d='M8 9v4'/%3E%3Cline x1='15' y1='10' x2='15.01' y2='10'/%3E%3Cline x1='18' y1='13' x2='18.01' y2='13'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}