/**
 * Icon Library Styles
 * Styles for AI-generated icons replacing emojis
 */

/* ===================================
   ICON BASE STYLES
   =================================== */

.icon,
.icon-inline {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));
    transition: transform 0.2s ease, filter 0.2s ease;

.icon:hover,
.icon-inline:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4)) 
            drop-shadow(0 1px 2px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));

/* Icon sizes */
.icon-xs {
    width: var(--spacing-md);
    height: var(--spacing-md);

.icon-sm {
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);

.icon-md {
    width: var(--spacing-lg);
    height: var(--spacing-lg);

.icon-lg {
    width: var(--spacing-xl);
    height: var(--spacing-xl);

.icon-xl {
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);

.icon-2xl {
    width: var(--spacing-3xl);
    height: var(--spacing-3xl);

/* ===================================
   ICON CATEGORY COLORS
   =================================== */

/* UI Icons */
.icon-ui {
    filter: drop-shadow(0 0 4px rgba(var(--color-info-rgb, 91, 192, 222), 0.5));

/* Game Icons */
.icon-game {
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.5));

/* Stats Icons */
.icon-stats {
    filter: drop-shadow(0 0 4px rgba(74, 144, 226, 0.5));

/* Status Icons */
.icon-status {
    filter: drop-shadow(0 0 4px rgba(var(--color-warning-rgb, 255, 193, 7), 0.5));

.icon-status.danger {
    filter: drop-shadow(0 0 4px rgba(var(--color-failure-rgb, 217, 83, 79), 0.5));

.icon-status.success {
    filter: drop-shadow(0 0 4px rgba(var(--color-success-rgb, 92, 184, 92), 0.5));

/* Results Icons */
.icon-results.success {
    filter: drop-shadow(0 0 6px rgba(var(--color-success-rgb, 92, 184, 92), 0.6));

.icon-results.failure {
    filter: drop-shadow(0 0 6px rgba(var(--color-failure-rgb, 217, 83, 79), 0.6));

.icon-results.critical-success {
    filter: drop-shadow(0 0 8px rgba(var(--color-warning-rgb, 255, 193, 7), 0.7));

.icon-results.critical-failure {
    filter: drop-shadow(0 0 8px rgba(var(--color-failure-rgb, 217, 83, 79), 0.7));

/* Financial Icons */
.icon-financial {
    filter: drop-shadow(0 0 4px rgba(var(--color-warning-rgb, 255, 193, 7), 0.5));

/* Equipment Icons */
.icon-equipment {
    filter: drop-shadow(0 0 4px rgba(255, 152, 0, 0.5));

/* Location Icons */
.icon-location {
    filter: drop-shadow(0 0 4px rgba(var(--color-info-rgb, 91, 192, 222), 0.5));

/* Communication Icons */
.icon-communication {
    filter: drop-shadow(0 0 4px rgba(var(--color-info-rgb, 91, 192, 222), 0.5));

/* Action Icons */
.icon-actions {
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.5));

.icon-actions.danger {
    filter: drop-shadow(0 0 4px rgba(var(--color-failure-rgb, 217, 83, 79), 0.5));

/* Special Icons */
.icon-special {
    filter: drop-shadow(0 0 6px rgba(var(--color-warning-rgb, 255, 193, 7), 0.6));

/* ===================================
   INLINE ICONS
   =================================== */

.icon-inline {
    margin: 0 calc(var(--spacing-xs) / 2);
    vertical-align: text-bottom;

/* ===================================
   BUTTON ICONS
   =================================== */

.btn .icon,
button .icon {
    margin-right: 0.5rem;
    vertical-align: middle;

.btn .icon:last-child,
button .icon:last-child {
    margin-right: 0;
    margin-left: 0.5rem;

/* ===================================
   LOADING STATE
   =================================== */

.icon-loading {
    opacity: 0.5;
    animation: iconPulse 1.5s ease-in-out infinite;

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

    50% {
        opacity: 0.8;

/* Loading indicator for icon generation */
.icon-loading-indicator {
    display: inline-block;
    box-sizing: border-box;

@keyframes iconSpin {
    0% {
        transform: rotate(0deg);

    100% {
        transform: rotate(360deg);

/* Icon container for loading states */
.icon-container {
    position: relative;
    display: inline-block;

/* ===================================
   ICON CONTAINERS
   =================================== */

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

.icon-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

.icon-label .icon {
    flex-shrink: 0;

/* ===================================
   SPECIFIC ICON STYLES
   =================================== */

/* Roll result icons */
.roll-result-icon {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    margin: 0 var(--spacing-xs);
    vertical-align: middle;

/* Status effect icons */
.status-icon {
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    margin-right: var(--spacing-xs);

/* Navigation icons */
.nav-icon {
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    margin-right: var(--spacing-sm);

/* Toolbar icons */
.toolbar-icon {
    width: var(--spacing-lg);
    height: var(--spacing-lg);

/* Card icons */
.card-icon {
    width: var(--spacing-2xl);
    height: var(--spacing-2xl);
    margin-bottom: 1rem;

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .icon-lg {
        width: calc(var(--spacing-xl) * 1.167);
        height: calc(var(--spacing-xl) * 1.167);

    .icon-xl {
        width: calc(var(--spacing-2xl) * 1.25);
        height: calc(var(--spacing-2xl) * 1.25);

    .icon-2xl {
        width: calc(var(--spacing-3xl) * 1.167);
        height: calc(var(--spacing-3xl) * 1.167);

/* ===================================
   ANIMATIONS
   =================================== */

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

    to {
        transform: rotate(360deg);

.icon-spin {
    animation: iconSpin 2s linear infinite;

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);

    50% {
        transform: translateY(-4px);

.icon-bounce {
    animation: iconBounce 1s ease-in-out infinite;

/* ===================================
   UTILITY CLASSES
   =================================== */

.icon-glow {
    filter: drop-shadow(0 0 8px currentColor);

.icon-shadow {
    filter: drop-shadow(0 2px 4px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3));

.icon-no-glow {
    filter: none;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}