/* ═══ Global UI polish — focus ring behavior ═══
   Loaded last site-wide. Removes the browser focus outline after MOUSE clicks
   (the thin white ring the user sees when clicking menu items / tabs / buttons)
   while KEEPING the outline for keyboard navigation (:focus-visible), which is
   the accessible pattern — Tab users still see where they are. */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
label:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
li:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Keyboard users keep a subtle, theme-matching ring instead of the default.
   NOTE: text inputs are EXCLUDED on purpose - legacy stylesheets can paint an
   input's visible box smaller than its element box, so an outline around the
   element looks oversized/misaligned. Inputs use their own fitted :focus
   treatment (border color + glow) defined per page. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.75) !important;
    outline-offset: 1px;
}

/* Inputs: suppress the browser outline everywhere (mouse AND keyboard) -
   pages provide their own in-box focus styling instead */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none !important;
}

/* ═══ Site-themed alerts (game_alert helper) ═══
   Gold/brown EmpiresWar identity: dark parchment panels, gold borders,
   Georgia serif — same family as .btn/.payment buttons. Severity keeps a
   subtle tint so success/danger stay recognizable. RTL-safe via flex. */
.game-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 40px 14px 16px;
    margin-bottom: 18px;
    border-radius: 8px;
    font-family: Georgia, serif;
    font-size: 14px;
    line-height: 1.7;
    text-align: start;
    color: #f0e2c8;
    background: linear-gradient(145deg, rgba(42,23,10,0.95), rgba(36,22,8,0.92));
    border: 1px solid #8a6d1d;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(232,201,106,0.08);
    animation: gameAlertIn 0.3s ease-out;
}

[dir="rtl"] .game-alert,
html[dir="rtl"] .game-alert,
body.rtl .game-alert {
    padding: 14px 16px 14px 40px;
}

@keyframes gameAlertIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.game-alert-icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.4;
    color: #d0b88c;
}

.game-alert-text { flex: 1 1 auto; }

.game-alert-text a { color: #e8c96a; text-decoration: underline; }

.game-alert-close {
    position: absolute;
    top: 6px;
    inset-inline-end: 10px;
    background: none;
    border: none;
    color: #8c7a5e;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s ease;
}

.game-alert-close:hover { color: #e8c96a; }

/* Severity variants: tint + border + icon color */
.game-alert-success { border-color: #3f7d32; background: linear-gradient(145deg, rgba(30,50,20,0.92), rgba(36,22,8,0.92)); }
.game-alert-success .game-alert-icon { color: #ffd700; }
.game-alert-success .game-alert-text { color: #bfe3a0; }

.game-alert-danger { border-color: #a3313d; background: linear-gradient(145deg, rgba(70,15,18,0.92), rgba(36,22,8,0.92)); }
.game-alert-danger .game-alert-icon { color: #ff8a8a; }
.game-alert-danger .game-alert-text { color: #f3b8b8; }

.game-alert-warning { border-color: #c9a227; background: linear-gradient(145deg, rgba(74,55,10,0.92), rgba(36,22,8,0.92)); }
.game-alert-warning .game-alert-icon { color: #e8c96a; }
.game-alert-warning .game-alert-text { color: #ecd9a0; }

.game-alert-info { border-color: #8a6d1d; }
.game-alert-info .game-alert-icon { color: #d0b88c; }
.game-alert-info .game-alert-text { color: #f0e2c8; }

/* ── Pure Skill Duel homepage announcement (phosphor pulse) ───── */
.pvp-announce {
    display: block;
    text-decoration: none;
    margin: 0 auto 18px;
    max-width: 640px;
    background: linear-gradient(180deg, #120b06 0%, #1d1207 100%);
    border: 1px solid rgba(57, 255, 20, 0.4);
    border-bottom: 2px solid rgba(57, 255, 20, 0.6);
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 14px 18px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.pvp-announce:hover {
    border-color: rgba(57, 255, 20, 0.85);
    box-shadow: 0 0 26px rgba(57, 255, 20, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.pvp-announce-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}
.pvp-announce-title {
    color: #39ff14;
    font-size: 19px;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.55), 0 0 22px rgba(57, 255, 20, 0.3);
    animation: pvp-phosphor-pulse 2.8s ease-in-out infinite alternate;
}
.pvp-announce-sub {
    color: #d0c8a8;
    font-size: 13.5px;
    line-height: 1.5;
}
.pvp-announce-cta {
    color: #ffd700;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}
.pvp-announce:hover .pvp-announce-cta {
    text-decoration: underline;
}
@keyframes pvp-phosphor-pulse {
    from { text-shadow: 0 0 6px rgba(57, 255, 20, 0.4), 0 0 16px rgba(57, 255, 20, 0.2); }
    to   { text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 28px rgba(57, 255, 20, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
    .pvp-announce-title { animation: none; }
}