/**
 * External Link Indicators
 * Visual cues for links that navigate to external sites
 */

/* External link indicator */
.external-link-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.external-link-indicator::after {
    content: "↗";
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 2px;
}

/* For game cards with external links */
.game-card.external-game {
    position: relative;
}

.game-card.external-game::after {
    content: "External";
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgb(0 0 0 / 70%);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 10;
}

/* Real mode styling */
.real-mode .game-card.external-game::after {
    background: rgb(50 50 50 / 90%);
}

/* External link in buttons/links */
.jai-link.external-link {
    position: relative;
}

/* Arrow removed from external links on games page */

/* Hover states */
.game-card.external-game:hover::after {
    background: rgb(0 0 0 / 90%);
}

.real-mode .game-card.external-game:hover::after {
    background: rgb(30 30 30 / 95%);
}

/* Accessibility: ensure external indicators are announced */
.external-link-sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}