/* _content/aaaaarena/Components/CreateFlagPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CREATE FLAG PAGE - Tavern style flag creation
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TAVERN ATMOSPHERE - Same as lobby
   ───────────────────────────────────────────────────────────────── */
.tavern-page[b-3fefmy90k4] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    /* Dark oak wood table */
    background:
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

/* Vignette */
.tavern-page[b-3fefmy90k4]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   CANDLES
   ───────────────────────────────────────────────────────────────── */
.candle[b-3fefmy90k4] {
    position: fixed;
    width: 20px;
    height: 60px;
    z-index: 10;
}

.candle-left[b-3fefmy90k4] {
    left: clamp(20px, 5vw, 80px);
    top: clamp(60px, 15vh, 120px);
}

.candle-right[b-3fefmy90k4] {
    right: clamp(20px, 5vw, 80px);
    top: clamp(60px, 15vh, 120px);
}

.candle[b-3fefmy90k4]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4c4a0 50%, #c4a060 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.flame[b-3fefmy90k4] {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 25px;
    background: linear-gradient(180deg, #fff7e0 0%, #ffdd66 30%, #ff9900 60%, #ff5500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-3fefmy90k4 0.5s ease-in-out infinite alternate;
    box-shadow:
        0 0 20px #ff9900,
        0 0 40px #ff660088,
        0 0 60px #ff440044;
}

.glow[b-3fefmy90k4] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,150,50,0.15) 0%, transparent 70%);
    animation: glowPulse-b-3fefmy90k4 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker-b-3fefmy90k4 {
    0% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 0.9; }
}

@keyframes glowPulse-b-3fefmy90k4 {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-3fefmy90k4] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-3fefmy90k4] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-3fefmy90k4]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-3fefmy90k4] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-3fefmy90k4] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-3fefmy90k4] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────
   PARCHMENT BOARD
   ───────────────────────────────────────────────────────────────── */
.tavern-board[b-3fefmy90k4] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(700px, 92vw);
    margin: 20px auto;

    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    box-shadow:
        0 0 80px rgba(255, 150, 50, 0.1),
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

.tavern-board[b-3fefmy90k4]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow:
        inset 0 0 60px rgba(80, 50, 20, 0.5),
        inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BOARD CORNERS
   ───────────────────────────────────────────────────────────────── */
.board-corner[b-3fefmy90k4] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-3fefmy90k4]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-3fefmy90k4] { top: -8px; left: -8px; }
.corner-tr[b-3fefmy90k4] { top: -8px; right: -8px; }
.corner-bl[b-3fefmy90k4] { bottom: -8px; left: -8px; }
.corner-br[b-3fefmy90k4] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-3fefmy90k4] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 40px);
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */
.page-header[b-3fefmy90k4] {
    text-align: center;
    margin-bottom: clamp(20px, 4vh, 32px);
}

.page-header h1[b-3fefmy90k4] {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: #2a1a10;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    text-shadow:
        2px 2px 0 rgba(222, 200, 160, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.page-subtitle[b-3fefmy90k4] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: #5c4a3a;
    margin: 0;
    letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   EXISTING ACCOUNT BANNER
   ───────────────────────────────────────────────────────────────── */
.existing-account-banner[b-3fefmy90k4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: clamp(16px, 3vh, 24px);
    background: linear-gradient(180deg, rgba(255,250,240,0.6) 0%, rgba(240,230,210,0.4) 100%);
    border: 1px solid rgba(184, 134, 11, 0.4);
    border-radius: 6px;
    animation: fadeInUp-b-3fefmy90k4 0.6s ease-out 0.05s backwards;
}

.existing-account-banner .banner-icon[b-3fefmy90k4] {
    font-size: 1.1rem;
}

.existing-account-banner .banner-text[b-3fefmy90k4] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #5c4a3a;
}

.existing-account-banner .login-link[b-3fefmy90k4] {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #8b6508;
    text-decoration: none;
    padding: 4px 12px;
    background: linear-gradient(180deg, rgba(255,215,0,0.2) 0%, rgba(218,165,32,0.15) 100%);
    border: 1px solid rgba(139, 101, 8, 0.4);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.existing-account-banner .login-link:hover[b-3fefmy90k4] {
    color: #3d2b1f;
    background: linear-gradient(180deg, rgba(255,215,0,0.4) 0%, rgba(218,165,32,0.3) 100%);
    border-color: #8b6508;
}

/* ─────────────────────────────────────────────────────────────────
   LOADING STATE
   ───────────────────────────────────────────────────────────────── */
.loading-state[b-3fefmy90k4] {
    text-align: center;
    padding: 48px 0;
}

.loading-spinner[b-3fefmy90k4] {
    width: 40px;
    height: 40px;
    border: 4px solid #d4c090;
    border-top-color: #8b6508;
    border-radius: 50%;
    animation: spin-b-3fefmy90k4 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-3fefmy90k4 {
    to { transform: rotate(360deg); }
}

.loading-state p[b-3fefmy90k4] {
    font-family: var(--font-body);
    font-style: italic;
    color: #6b5a4a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   WARRIOR NAME INPUT
   ───────────────────────────────────────────────────────────────── */
.warrior-name-section[b-3fefmy90k4] {
    margin-bottom: clamp(20px, 4vh, 28px);
}

.warrior-name-section label[b-3fefmy90k4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #3d2b1f;
    margin-bottom: 10px;
}

.label-icon[b-3fefmy90k4] {
    color: #8b6508;
}

.name-input-wrapper[b-3fefmy90k4] {
    position: relative;
}

.name-input-wrapper input[b-3fefmy90k4] {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.name-input-wrapper input:focus[b-3fefmy90k4] {
    border-color: #daa520;
    background: rgba(255, 255, 250, 0.95);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(218, 165, 32, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

.name-input-wrapper input[b-3fefmy90k4]::placeholder {
    color: #a09078;
    font-style: italic;
}

.input-decoration[b-3fefmy90k4] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #daa520, #8b6508);
    border-radius: 50%;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────
   ACTION SECTION
   ───────────────────────────────────────────────────────────────── */
.action-section[b-3fefmy90k4] {
    margin-top: clamp(24px, 4vh, 36px);
}

.create-button[b-3fefmy90k4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;

    background: linear-gradient(180deg, #6b9d5f 0%, #4a7c40 30%, #3d6633 70%, #2d5027 100%);
    box-shadow:
        0 6px 20px rgba(45, 80, 39, 0.5),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #2d5027,
        0 0 0 4px rgba(45, 80, 39, 0.3);
}

.create-button[b-3fefmy90k4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.4s;
}

.create-button:hover:not(:disabled)[b-3fefmy90k4]::before {
    left: 100%;
}

.create-button:hover:not(:disabled)[b-3fefmy90k4] {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #7db86f 0%, #5a9450 30%, #4a7c40 70%, #3d6633 100%);
    box-shadow:
        0 10px 30px rgba(45, 80, 39, 0.6),
        0 5px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #3d6633,
        0 0 0 4px rgba(45, 80, 39, 0.4);
}

.create-button:disabled[b-3fefmy90k4] {
    opacity: 0.5;
    cursor: not-allowed;
}

.create-button:disabled[b-3fefmy90k4]::before {
    display: none;
}

.button-icon[b-3fefmy90k4] {
    font-size: 1.3rem;
}

.button-text[b-3fefmy90k4] {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.button-arrow[b-3fefmy90k4] {
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.create-button:hover:not(:disabled) .button-arrow[b-3fefmy90k4] {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────
   ERROR BANNER
   ───────────────────────────────────────────────────────────────── */
.error-banner[b-3fefmy90k4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #8b0000;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.05) 100%);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
    animation: shake-b-3fefmy90k4 0.4s ease;
}

@keyframes shake-b-3fefmy90k4 {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.error-icon[b-3fefmy90k4] {
    font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .candle[b-3fefmy90k4],
    .scattered-coins[b-3fefmy90k4] {
        display: none;
    }

    .existing-account-banner[b-3fefmy90k4] {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 14px;
    }

    .existing-account-banner .banner-text[b-3fefmy90k4] {
        font-size: 0.9rem;
    }

    .existing-account-banner .login-link[b-3fefmy90k4] {
        font-size: 0.9rem;
        padding: 4px 10px;
    }
}

@media (max-width: 420px) {
    .existing-account-banner[b-3fefmy90k4] {
        padding: 8px 12px;
    }

    .existing-account-banner .banner-icon[b-3fefmy90k4] {
        font-size: 1rem;
    }

    .existing-account-banner .banner-text[b-3fefmy90k4] {
        font-size: 0.85rem;
    }

    .existing-account-banner .login-link[b-3fefmy90k4] {
        font-size: 0.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.page-header[b-3fefmy90k4] {
    animation: fadeInUp-b-3fefmy90k4 0.6s ease-out;
}

.warrior-name-section[b-3fefmy90k4] {
    animation: fadeInUp-b-3fefmy90k4 0.6s ease-out 0.1s backwards;
}

.action-section[b-3fefmy90k4] {
    animation: fadeInUp-b-3fefmy90k4 0.6s ease-out 0.3s backwards;
}

@keyframes fadeInUp-b-3fefmy90k4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/aaaaarena/Components/FlagDisplay.razor.rz.scp.css */
.flag-display[b-x3og6cgoxw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flag-display :deep(svg)[b-x3og6cgoxw] {
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.flag-small[b-x3og6cgoxw] {
    width: 24px;
    height: 29px;
}

.flag-medium[b-x3og6cgoxw] {
    width: 48px;
    height: 58px;
}

.flag-large[b-x3og6cgoxw] {
    width: 96px;
    height: 115px;
}

.flag-xlarge[b-x3og6cgoxw] {
    width: 128px;
    height: 154px;
}
/* _content/aaaaarena/Components/FlagEditor.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FLAG EDITOR - Medieval style flag customization
   ═══════════════════════════════════════════════════════════════ */

.flag-editor[b-shw58cc3x8] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ─────────────────────────────────────────────────────────────────
   PREVIEW SECTION
   ───────────────────────────────────────────────────────────────── */
.flag-preview-section[b-shw58cc3x8] {
    text-align: center;
    padding: 24px;
    background: linear-gradient(180deg, rgba(255,250,240,0.5) 0%, rgba(240,230,210,0.3) 100%);
    border-radius: 8px;
    border: 2px solid #b8860b;
}

.flag-preview-section h3[b-shw58cc3x8] {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: #3d2b1f;
    margin: 0 0 16px 0;
}

.flag-preview-container[b-shw58cc3x8] {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle, rgba(255,250,240,0.8) 0%, rgba(220,200,160,0.4) 100%);
    border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────────
   EDITOR SECTIONS
   ───────────────────────────────────────────────────────────────── */
.editor-section[b-shw58cc3x8] {
    background: linear-gradient(180deg, rgba(255,252,245,0.4) 0%, rgba(245,238,220,0.2) 100%);
    border-radius: 6px;
    padding: 16px;
    border: 1px solid rgba(184, 134, 11, 0.3);
}

.editor-section h4[b-shw58cc3x8] {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #3d2b1f;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon[b-shw58cc3x8] {
    color: #8b6508;
}

/* ─────────────────────────────────────────────────────────────────
   SHAPE OPTIONS
   ───────────────────────────────────────────────────────────────── */
.shape-options[b-shw58cc3x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.shape-option[b-shw58cc3x8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(245,240,230,0.8) 100%);
    border: 2px solid #d4c090;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 70px;
}

.shape-option:hover[b-shw58cc3x8] {
    border-color: #daa520;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,250,240,0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.shape-option.selected[b-shw58cc3x8] {
    border-color: #8b6508;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.3);
}

.shape-option .option-label[b-shw58cc3x8] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: #3d2b1f;
}

/* ─────────────────────────────────────────────────────────────────
   PATTERN OPTIONS
   ───────────────────────────────────────────────────────────────── */
.pattern-options[b-shw58cc3x8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 100%;
}

.pattern-option[b-shw58cc3x8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(245,240,230,0.8) 100%);
    border: 2px solid #d4c090;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    aspect-ratio: 1;
    overflow: hidden;
}

.pattern-option svg[b-shw58cc3x8] {
    width: 100%;
    height: 100%;
}

.pattern-option:hover[b-shw58cc3x8] {
    border-color: #daa520;
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.pattern-option.selected[b-shw58cc3x8] {
    border-color: #8b6508;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.3);
}

/* ─────────────────────────────────────────────────────────────────
   COLOR OPTIONS
   ───────────────────────────────────────────────────────────────── */
.color-row[b-shw58cc3x8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.color-row:last-child[b-shw58cc3x8] {
    margin-bottom: 0;
}

.color-label[b-shw58cc3x8] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #5c4a3a;
}

.color-options[b-shw58cc3x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.color-option[b-shw58cc3x8] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid #3d2b1f;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 2px 4px rgba(0,0,0,0.2);
}

.color-option:hover[b-shw58cc3x8] {
    transform: scale(1.15);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 4px 8px rgba(0,0,0,0.3);
}

.color-option.selected[b-shw58cc3x8] {
    transform: scale(1.15);
    border-color: #ffd700;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.2),
        0 0 0 3px rgba(255, 215, 0, 0.5),
        0 4px 8px rgba(0,0,0,0.3);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE - Mobile optimizations
   ───────────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 600px) {
    .flag-editor[b-shw58cc3x8] {
        gap: 16px;
    }

    .flag-preview-section[b-shw58cc3x8] {
        padding: 16px;
    }

    .flag-preview-section h3[b-shw58cc3x8] {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .flag-preview-container[b-shw58cc3x8] {
        padding: 16px;
    }

    .editor-section[b-shw58cc3x8] {
        padding: 12px;
    }

    .editor-section h4[b-shw58cc3x8] {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .shape-options[b-shw58cc3x8] {
        gap: 8px;
    }

    .shape-option[b-shw58cc3x8] {
        min-width: 56px;
        padding: 8px;
    }

    .shape-option .option-label[b-shw58cc3x8] {
        font-size: 0.7rem;
    }

    .pattern-options[b-shw58cc3x8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .pattern-option[b-shw58cc3x8] {
        padding: 5px;
    }

    .color-row[b-shw58cc3x8] {
        margin-bottom: 10px;
    }

    .color-label[b-shw58cc3x8] {
        font-size: 0.85rem;
    }

    .color-options[b-shw58cc3x8] {
        gap: 5px;
    }

    .color-option[b-shw58cc3x8] {
        width: 36px;
        height: 36px;
    }
}

/* Mobile */
@media (max-width: 420px) {
    .flag-editor[b-shw58cc3x8] {
        gap: 12px;
    }

    .flag-preview-section[b-shw58cc3x8] {
        padding: 12px;
    }

    .flag-preview-section h3[b-shw58cc3x8] {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .flag-preview-container[b-shw58cc3x8] {
        padding: 12px;
    }

    .editor-section[b-shw58cc3x8] {
        padding: 10px;
    }

    .editor-section h4[b-shw58cc3x8] {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .shape-options[b-shw58cc3x8] {
        gap: 6px;
        justify-content: space-around;
    }

    .shape-option[b-shw58cc3x8] {
        min-width: 52px;
        padding: 6px;
    }

    .shape-option .option-label[b-shw58cc3x8] {
        font-size: 0.65rem;
    }

    .pattern-options[b-shw58cc3x8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .pattern-option[b-shw58cc3x8] {
        padding: 4px;
    }

    .color-row[b-shw58cc3x8] {
        gap: 6px;
        margin-bottom: 8px;
    }

    .color-label[b-shw58cc3x8] {
        font-size: 0.8rem;
    }

    .color-options[b-shw58cc3x8] {
        gap: 4px;
        justify-content: flex-start;
    }

    .color-option[b-shw58cc3x8] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border-width: 2px;
    }

    .color-option.selected[b-shw58cc3x8] {
        transform: scale(1.1);
    }

    .color-option:hover[b-shw58cc3x8] {
        transform: scale(1.1);
    }
}

/* Small mobile */
@media (max-width: 360px) {
    .shape-options[b-shw58cc3x8] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .shape-option[b-shw58cc3x8] {
        min-width: 48px;
        padding: 5px;
    }

    .shape-option .option-label[b-shw58cc3x8] {
        font-size: 0.6rem;
    }

    .pattern-options[b-shw58cc3x8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .color-option[b-shw58cc3x8] {
        width: 28px;
        height: 28px;
    }
}
/* _content/aaaaarena/Components/Landing.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TAVERN TABLE - Board Game Landing Page
   A dark oak table in a medieval tavern with candlelight ambiance
   Fonts imported via app.css
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   THE TAVERN TABLE - Dark wood background
   ───────────────────────────────────────────────────────────────── */
.tavern-table[b-8epm10l1uv] {
    min-height: 100vh;
    width: 100%;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* Dark oak wood table */
    background:
        /* Wood grain texture */
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        /* Subtle noise for texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        /* Base gradient */
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

/* Vignette effect for depth */
.tavern-table[b-8epm10l1uv]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────
   GAME BOARD - The main parchment map
   ───────────────────────────────────────────────────────────────── */
.game-board[b-8epm10l1uv] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(800px, 92vw);
    margin: 20px auto;

    /* Aged parchment with burned edges */
    background:
        /* Parchment texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    /* Layered border effect - leather binding */
    box-shadow:
        /* Outer glow from candles */
        0 0 80px rgba(255, 150, 50, 0.1),
        /* Deep shadow */
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        /* Leather frame */
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        /* Metal corner accents */
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

/* Inner burned edge effect */
.game-board[b-8epm10l1uv]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow:
        inset 0 0 60px rgba(80, 50, 20, 0.5),
        inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* Corner decorations - brass rivets */
.board-corner[b-8epm10l1uv] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;

    background:
        radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-8epm10l1uv]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-8epm10l1uv] { top: -8px; left: -8px; }
.corner-tr[b-8epm10l1uv] { top: -8px; right: -8px; }
.corner-bl[b-8epm10l1uv] { bottom: -8px; left: -8px; }
.corner-br[b-8epm10l1uv] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-8epm10l1uv] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 48px);
}

/* ─────────────────────────────────────────────────────────────────
   HEADER - Title Banner
   ───────────────────────────────────────────────────────────────── */
.board-header[b-8epm10l1uv] {
    text-align: center;
    margin-bottom: clamp(24px, 4vh, 40px);
}

.title-banner[b-8epm10l1uv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
}

.title-banner h1[b-8epm10l1uv] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3.5rem);
    color: #2a1a10;
    margin: 0;
    letter-spacing: 4px;
    text-shadow:
        2px 2px 0 rgba(222, 200, 160, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

.banner-ornament[b-8epm10l1uv] {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8b6508 30%, #daa520 50%, #8b6508 70%, transparent);
    position: relative;
}

.banner-ornament[b-8epm10l1uv]::before,
.banner-ornament[b-8epm10l1uv]::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #8b6508;
}

.banner-ornament.left[b-8epm10l1uv]::before { right: 100%; margin-right: 4px; }
.banner-ornament.right[b-8epm10l1uv]::after { left: 100%; margin-left: 4px; }

.tagline[b-8epm10l1uv] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: #5c4a3a;
    margin: 0;
    letter-spacing: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   RULES SECTION - Text-based explanation
   ───────────────────────────────────────────────────────────────── */
.rules-parchment[b-8epm10l1uv] {
    margin-bottom: clamp(24px, 4vh, 36px);
}

.rules-parchment h2[b-8epm10l1uv],
.tactics-section h2[b-8epm10l1uv] {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    color: #3d2b1f;
    text-align: center;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.section-icon[b-8epm10l1uv] {
    color: #8b6508;
    font-size: 0.8em;
}

.rules-text[b-8epm10l1uv] {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(255,250,240,0.6) 0%, rgba(240,230,210,0.4) 100%);
    border: 1px solid rgba(139, 101, 8, 0.3);
    border-radius: 4px;
}

.rules-text p[b-8epm10l1uv] {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.7;
    color: #3d2b1f;
    margin: 0 0 12px 0;
}

.rules-text p:last-child[b-8epm10l1uv] {
    margin-bottom: 0;
}

.rules-text strong[b-8epm10l1uv] {
    color: #2a1a10;
}

.rules-text em[b-8epm10l1uv] {
    color: #5c4a3a;
}

/* ─────────────────────────────────────────────────────────────────
   ACTIONS LIST - Compact horizontal list
   ───────────────────────────────────────────────────────────────── */
.tactics-section[b-8epm10l1uv] {
    margin-bottom: clamp(24px, 4vh, 36px);
}

.actions-list[b-8epm10l1uv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.action-item[b-8epm10l1uv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(255,250,245,0.7) 0%, rgba(240,230,215,0.5) 100%);
    border-radius: 6px;
    border-left: 4px solid;
    transition: transform 0.2s ease;
}

.action-item:hover[b-8epm10l1uv] {
    transform: translateX(4px);
}

.action-item.move-action[b-8epm10l1uv] {
    border-left-color: #4a7c40;
}

.action-item.attack-action.cross[b-8epm10l1uv] {
    border-left-color: #c62828;
}

.action-item.attack-action.diagonal[b-8epm10l1uv] {
    border-left-color: #b8860b;
}

.action-icon[b-8epm10l1uv] {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
    border: 1px solid rgba(139, 101, 8, 0.2);
}

.icon-grid[b-8epm10l1uv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    font-size: 11px;
    line-height: 1;
}

.icon-grid span[b-8epm10l1uv] {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-grid .dir[b-8epm10l1uv] {
    color: #4a7c40;
    font-weight: bold;
}

.icon-grid .atk[b-8epm10l1uv] {
    color: #c62828;
    font-weight: bold;
}

.icon-grid .atk-diag[b-8epm10l1uv] {
    color: #b8860b;
    font-weight: bold;
}

.icon-grid .center[b-8epm10l1uv] {
    color: #8b6508;
    font-size: 10px;
}

.action-info[b-8epm10l1uv] {
    flex: 1;
    min-width: 0;
}

.action-name[b-8epm10l1uv] {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: #3d2b1f;
    font-weight: 600;
    margin-bottom: 2px;
}

.action-desc[b-8epm10l1uv] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #5c4a3a;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
   BATTLE BUTTON - Call to action
   ───────────────────────────────────────────────────────────────── */
.battle-cta[b-8epm10l1uv] {
    text-align: center;
    margin-bottom: clamp(20px, 4vh, 32px);
}

.battle-button[b-8epm10l1uv] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 48px;
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    letter-spacing: 3px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* Forged metal button */
    background:
        linear-gradient(180deg, #6b9d5f 0%, #4a7c40 30%, #3d6633 70%, #2d5027 100%);
    color: #f0f8e8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    box-shadow:
        0 6px 20px rgba(45, 80, 39, 0.5),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 0 0 2px #2d5027,
        0 0 0 4px rgba(45, 80, 39, 0.3);
}

.battle-button[b-8epm10l1uv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.battle-button:hover[b-8epm10l1uv] {
    transform: translateY(-3px);
    background:
        linear-gradient(180deg, #7db86f 0%, #5a9450 30%, #4a7c40 70%, #3d6633 100%);
    box-shadow:
        0 10px 30px rgba(45, 80, 39, 0.6),
        0 5px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 0 0 2px #3d6633,
        0 0 0 4px rgba(45, 80, 39, 0.4);
}

.battle-button:hover[b-8epm10l1uv]::before {
    left: 100%;
}

.battle-button:active[b-8epm10l1uv] {
    transform: translateY(-1px);
}

.button-icon[b-8epm10l1uv] {
    font-size: 1.2em;
    opacity: 0.9;
}

.button-text[b-8epm10l1uv] {
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────── */
.board-footer[b-8epm10l1uv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(139, 101, 8, 0.3);
}

.footer-ornament[b-8epm10l1uv] {
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b6508, transparent);
}

.board-footer p[b-8epm10l1uv] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: #8b7a6a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS - Decorative elements
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-8epm10l1uv] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-8epm10l1uv] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-8epm10l1uv]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-8epm10l1uv] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-8epm10l1uv] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-8epm10l1uv] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }
.coin-4[b-8epm10l1uv] { top: 12%; left: 6%; transform: rotate(-30deg); width: 22px; height: 22px; opacity: 0.8; }
.coin-5[b-8epm10l1uv] { top: 18%; right: 7%; transform: rotate(25deg); width: 20px; height: 20px; opacity: 0.6; }
.coin-6[b-8epm10l1uv] { bottom: 35%; left: 4%; transform: rotate(60deg); width: 16px; height: 16px; opacity: 0.55; }
.coin-7[b-8epm10l1uv] { top: 40%; right: 5%; transform: rotate(-15deg); width: 22px; height: 22px; opacity: 0.75; }
.coin-8[b-8epm10l1uv] { bottom: 8%; right: 6%; transform: rotate(40deg); width: 18px; height: 18px; opacity: 0.65; }
.coin-9[b-8epm10l1uv] { top: 75%; left: 9%; transform: rotate(-45deg); width: 20px; height: 20px; opacity: 0.5; }
.coin-10[b-8epm10l1uv] { top: 30%; left: 3%; transform: rotate(10deg); width: 17px; height: 17px; opacity: 0.6; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .banner-ornament[b-8epm10l1uv] {
        display: none;
    }

    .scattered-coins[b-8epm10l1uv] {
        display: none;
    }

    .rules-text[b-8epm10l1uv] {
        padding: 16px;
    }

    .rules-text p[b-8epm10l1uv] {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .action-item[b-8epm10l1uv] {
        gap: 12px;
        padding: 10px 12px;
    }

    .action-icon[b-8epm10l1uv] {
        width: 48px;
        height: 48px;
    }

    .icon-grid[b-8epm10l1uv] {
        font-size: 10px;
    }

    .icon-grid span[b-8epm10l1uv] {
        width: 12px;
        height: 12px;
    }

    .action-name[b-8epm10l1uv] {
        font-size: 0.95rem;
    }

    .action-desc[b-8epm10l1uv] {
        font-size: 0.85rem;
    }
}

@media (max-width: 400px) {
    .rules-text p[b-8epm10l1uv] {
        font-size: 0.85rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeInUp-b-8epm10l1uv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.board-header[b-8epm10l1uv] {
    animation: fadeInUp-b-8epm10l1uv 0.6s ease-out;
}

.rules-parchment[b-8epm10l1uv] {
    animation: fadeInUp-b-8epm10l1uv 0.6s ease-out 0.1s backwards;
}

.tactics-section[b-8epm10l1uv] {
    animation: fadeInUp-b-8epm10l1uv 0.6s ease-out 0.2s backwards;
}

.battle-cta[b-8epm10l1uv] {
    animation: fadeInUp-b-8epm10l1uv 0.6s ease-out 0.3s backwards;
}
/* _content/aaaaarena/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-9d23gla8t6] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-9d23gla8t6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/aaaaarena/Components/LoginPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE - Tavern style authentication
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TAVERN ATMOSPHERE
   ───────────────────────────────────────────────────────────────── */
.tavern-page[b-fiky88izpy] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    background:
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

.tavern-page[b-fiky88izpy]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   CANDLES
   ───────────────────────────────────────────────────────────────── */
.candle[b-fiky88izpy] {
    position: fixed;
    width: 20px;
    height: 60px;
    z-index: 10;
}

.candle-left[b-fiky88izpy] { left: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }
.candle-right[b-fiky88izpy] { right: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }

.candle[b-fiky88izpy]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4c4a0 50%, #c4a060 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.flame[b-fiky88izpy] {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 25px;
    background: linear-gradient(180deg, #fff7e0 0%, #ffdd66 30%, #ff9900 60%, #ff5500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-fiky88izpy 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 20px #ff9900, 0 0 40px #ff660088, 0 0 60px #ff440044;
}

.glow[b-fiky88izpy] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,150,50,0.15) 0%, transparent 70%);
    animation: glowPulse-b-fiky88izpy 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker-b-fiky88izpy {
    0% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 0.9; }
}

@keyframes glowPulse-b-fiky88izpy {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-fiky88izpy] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-fiky88izpy] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-fiky88izpy]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-fiky88izpy] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-fiky88izpy] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-fiky88izpy] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────
   PARCHMENT BOARD
   ───────────────────────────────────────────────────────────────── */
.tavern-board[b-fiky88izpy] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(480px, 92vw);
    margin: 20px auto;

    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    box-shadow:
        0 0 80px rgba(255, 150, 50, 0.1),
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

.tavern-board[b-fiky88izpy]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow: inset 0 0 60px rgba(80, 50, 20, 0.5), inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BOARD CORNERS
   ───────────────────────────────────────────────────────────────── */
.board-corner[b-fiky88izpy] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-fiky88izpy]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-fiky88izpy] { top: -8px; left: -8px; }
.corner-tr[b-fiky88izpy] { top: -8px; right: -8px; }
.corner-bl[b-fiky88izpy] { bottom: -8px; left: -8px; }
.corner-br[b-fiky88izpy] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-fiky88izpy] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 40px);
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */
.page-header[b-fiky88izpy] {
    text-align: center;
    margin-bottom: clamp(24px, 4vh, 36px);
    position: relative;
}

.back-link[b-fiky88izpy] {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #8b6508;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-fiky88izpy] {
    color: #3d2b1f;
}

.page-header h1[b-fiky88izpy] {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: #2a1a10;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(222, 200, 160, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.page-subtitle[b-fiky88izpy] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: #5c4a3a;
    margin: 0;
    letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   AUTH FORM
   ───────────────────────────────────────────────────────────────── */
.auth-form[b-fiky88izpy] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-fiky88izpy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-fiky88izpy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #3d2b1f;
}

.label-icon[b-fiky88izpy] {
    color: #8b6508;
}

.form-group input[b-fiky88izpy] {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.form-group input:focus[b-fiky88izpy] {
    border-color: #daa520;
    background: rgba(255, 255, 250, 0.95);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(218, 165, 32, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

.form-group input[b-fiky88izpy]::placeholder {
    color: #a09078;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   SUBMIT BUTTON
   ───────────────────────────────────────────────────────────────── */
.submit-button[b-fiky88izpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #3d2b1f;
    border: 2px solid #6b4e08;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;

    background: linear-gradient(180deg, #ffd700 0%, #daa520 30%, #b8860b 70%, #8b6508 100%);
    box-shadow:
        0 4px 12px rgba(184, 134, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 0 rgba(255,215,0,0.3);
}

.submit-button[b-fiky88izpy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.4s;
}

.submit-button:hover:not(:disabled)[b-fiky88izpy]::before {
    left: 100%;
}

.submit-button:hover:not(:disabled)[b-fiky88izpy] {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #ffe44d 0%, #ffd700 30%, #daa520 70%, #b8860b 100%);
    box-shadow:
        0 6px 16px rgba(184, 134, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.submit-button:disabled[b-fiky88izpy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-icon[b-fiky88izpy] {
    font-size: 1.2rem;
}

.button-arrow[b-fiky88izpy] {
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.submit-button:hover:not(:disabled) .button-arrow[b-fiky88izpy] {
    transform: translateX(4px);
}

.loading-spinner-small[b-fiky88izpy] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(61, 43, 31, 0.3);
    border-top-color: #3d2b1f;
    border-radius: 50%;
    animation: spin-b-fiky88izpy 1s linear infinite;
}

@keyframes spin-b-fiky88izpy {
    to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────
   ERROR BANNER
   ───────────────────────────────────────────────────────────────── */
.error-banner[b-fiky88izpy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #8b0000;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.05) 100%);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
    animation: shake-b-fiky88izpy 0.4s ease;
}

@keyframes shake-b-fiky88izpy {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.error-icon[b-fiky88izpy] {
    font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────
   AUTH LINKS
   ───────────────────────────────────────────────────────────────── */
.auth-links[b-fiky88izpy] {
    text-align: center;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 134, 11, 0.3);
}

.auth-links p[b-fiky88izpy] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b5a4a;
    margin: 0 0 8px 0;
}

.register-link[b-fiky88izpy] {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #8b6508;
    text-decoration: none;
    transition: color 0.2s;
}

.register-link:hover[b-fiky88izpy] {
    color: #daa520;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .candle[b-fiky88izpy],
    .scattered-coins[b-fiky88izpy] {
        display: none;
    }

    .back-link[b-fiky88izpy] {
        position: static;
        display: block;
        margin-bottom: 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.page-header[b-fiky88izpy] {
    animation: fadeInUp-b-fiky88izpy 0.6s ease-out;
}

.auth-form[b-fiky88izpy] {
    animation: fadeInUp-b-fiky88izpy 0.6s ease-out 0.1s backwards;
}

@keyframes fadeInUp-b-fiky88izpy {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/aaaaarena/Components/MultiplayerLobby.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TAVERN LOBBY - Warrior's Inn
   Dark atmospheric medieval tavern matching the landing page style
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TAVERN ATMOSPHERE
   ───────────────────────────────────────────────────────────────── */
.tavern-lobby[b-jowfdckota] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    /* Dark oak wood table - same as landing */
    background:
        /* Wood grain texture */
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        /* Subtle noise for texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        /* Base gradient */
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

/* Vignette effect for depth */
.tavern-lobby[b-jowfdckota]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   CANDLES - Flickering light sources
   ───────────────────────────────────────────────────────────────── */
.candle[b-jowfdckota] {
    position: fixed;
    width: 20px;
    height: 60px;
    z-index: 10;
}

.candle-left[b-jowfdckota] {
    left: clamp(20px, 5vw, 80px);
    top: clamp(60px, 15vh, 120px);
}

.candle-right[b-jowfdckota] {
    right: clamp(20px, 5vw, 80px);
    top: clamp(60px, 15vh, 120px);
}

.candle[b-jowfdckota]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4c4a0 50%, #c4a060 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.flame[b-jowfdckota] {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 25px;
    background: linear-gradient(180deg, #fff7e0 0%, #ffdd66 30%, #ff9900 60%, #ff5500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-jowfdckota 0.5s ease-in-out infinite alternate;
    box-shadow:
        0 0 20px #ff9900,
        0 0 40px #ff660088,
        0 0 60px #ff440044;
}

.glow[b-jowfdckota] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,150,50,0.15) 0%, transparent 70%);
    animation: glowPulse-b-jowfdckota 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker-b-jowfdckota {
    0% {
        transform: translateX(-50%) scale(1) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scale(1.1) rotate(2deg);
        opacity: 0.9;
    }
}

@keyframes glowPulse-b-jowfdckota {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS - Decorative elements
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-jowfdckota] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-jowfdckota] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-jowfdckota]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-jowfdckota] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-jowfdckota] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-jowfdckota] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────
   PARCHMENT BOARD - Same style as landing page
   ───────────────────────────────────────────────────────────────── */
.lobby-board[b-jowfdckota] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(800px, 92vw);
    margin: 20px auto;

    /* Aged parchment with burned edges */
    background:
        /* Parchment texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    /* Layered border effect - leather binding */
    box-shadow:
        /* Outer glow from candles */
        0 0 80px rgba(255, 150, 50, 0.1),
        /* Deep shadow */
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        /* Leather frame */
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        /* Metal corner accents */
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

/* Inner burned edge effect */
.lobby-board[b-jowfdckota]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow:
        inset 0 0 60px rgba(80, 50, 20, 0.5),
        inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BOARD CORNERS - Brass rivets
   ───────────────────────────────────────────────────────────────── */
.board-corner[b-jowfdckota] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;

    background:
        radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-jowfdckota]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-jowfdckota] { top: -8px; left: -8px; }
.corner-tr[b-jowfdckota] { top: -8px; right: -8px; }
.corner-bl[b-jowfdckota] { bottom: -8px; left: -8px; }
.corner-br[b-jowfdckota] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-jowfdckota] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 48px);
}

/* ─────────────────────────────────────────────────────────────────
   LOBBY NAVIGATION
   ───────────────────────────────────────────────────────────────── */
.lobby-nav[b-jowfdckota] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(139, 101, 8, 0.15);
}

.back-link[b-jowfdckota],
.settings-link[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #8b6508;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

.back-link:hover[b-jowfdckota],
.settings-link:hover[b-jowfdckota] {
    color: #3d2b1f;
    background: rgba(139, 101, 8, 0.1);
}

/* ─────────────────────────────────────────────────────────────────
   WARRIOR PROFILE SECTION
   ───────────────────────────────────────────────────────────────── */
.warrior-profile[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(255, 252, 245, 0.6) 0%, rgba(240, 230, 210, 0.4) 100%);
    border: 2px solid rgba(139, 101, 8, 0.25);
    border-radius: 8px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.warrior-profile:hover[b-jowfdckota] {
    border-color: rgba(139, 101, 8, 0.4);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.warrior-identity[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.warrior-flag[b-jowfdckota] {
    flex-shrink: 0;
    width: 56px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.2s;
}

.warrior-flag:hover[b-jowfdckota] {
    transform: scale(1.05);
}

.flag-placeholder[b-jowfdckota] {
    width: 56px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #8b6508;
    background: rgba(139, 101, 8, 0.1);
    border: 2px dashed rgba(139, 101, 8, 0.3);
    border-radius: 4px;
}

.warrior-name-wrapper[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.warrior-name-display[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: #2a1a10;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.warrior-name-input[b-jowfdckota] {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: #2a1a10;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(139, 101, 8, 0.2);
    border-radius: 6px;
    transition: all 0.2s;
}

.warrior-name-input:hover[b-jowfdckota] {
    border-color: rgba(139, 101, 8, 0.4);
}

.warrior-name-input:focus[b-jowfdckota] {
    background: rgba(255, 255, 255, 0.9);
    border-color: #b8860b;
    outline: none;
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

.warrior-name-input[b-jowfdckota]::placeholder {
    color: #a09078;
    font-weight: 400;
}

.register-badge[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b8860b;
    background: rgba(184, 134, 11, 0.15);
    padding: 5px 8px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid rgba(184, 134, 11, 0.3);
    transition: all 0.2s;
    white-space: nowrap;
}

.register-badge:hover[b-jowfdckota] {
    background: rgba(184, 134, 11, 0.25);
    color: #8b6508;
}

.verified-badge[b-jowfdckota] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    color: #4a7c40;
    background: rgba(74, 124, 64, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Stats container with emoji icons */
.warrior-stats-container[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(139, 101, 8, 0.15);
}

.stats-row[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stats-row.today[b-jowfdckota] {
    opacity: 0.7;
}

.stats-period[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #6b5a4a;
    min-width: 70px;
}

.stat-item[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-item .stat-icon[b-jowfdckota] {
    font-size: 0.9rem;
}

.stat-item .stat-value[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #2a1a10;
}

/* Legacy stat-block styles for compatibility */
.warrior-stats[b-jowfdckota] {
    display: flex;
    gap: 24px;
}

.stat-block[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-block .stat-value[b-jowfdckota] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: #2a1a10;
    line-height: 1;
}

.stat-block.wins .stat-value[b-jowfdckota] {
    color: #4a7c40;
}

.stat-block .stat-label[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #6b5a4a;
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   REGISTER BANNER
   ───────────────────────────────────────────────────────────────── */
.register-banner[b-jowfdckota] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(184, 134, 11, 0.12) 0%, rgba(184, 134, 11, 0.06) 100%);
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-radius: 6px;
}

.banner-icon[b-jowfdckota] {
    font-size: 1.2rem;
}

.banner-text[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #5c4a3a;
}

.banner-text a[b-jowfdckota] {
    color: #8b6508;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}

.banner-text a:hover[b-jowfdckota] {
    color: #3d2b1f;
}

/* ─────────────────────────────────────────────────────────────────
   WARRIOR NAME INPUT
   ───────────────────────────────────────────────────────────────── */
.warrior-name-section[b-jowfdckota] {
    margin-bottom: clamp(24px, 4vh, 32px);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.warrior-name-section label[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #3d2b1f;
    margin-bottom: 10px;
}

.label-icon[b-jowfdckota] {
    color: #8b6508;
}

.name-input-wrapper[b-jowfdckota] {
    position: relative;
}

.name-input-wrapper input[b-jowfdckota] {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.name-input-wrapper input:focus[b-jowfdckota] {
    border-color: #daa520;
    background: rgba(255, 255, 250, 0.95);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(218, 165, 32, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

.name-input-wrapper input[b-jowfdckota]::placeholder {
    color: #a09078;
    font-style: italic;
}

.input-decoration[b-jowfdckota] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #daa520, #8b6508);
    border-radius: 50%;
    opacity: 0.6;
}

/* ─────────────────────────────────────────────────────────────────
   LOADING STATE
   ───────────────────────────────────────────────────────────────── */
.loading-state[b-jowfdckota] {
    text-align: center;
    padding: 32px 0;
}

.loading-spinner[b-jowfdckota] {
    width: 32px;
    height: 32px;
    border: 3px solid #d4c090;
    border-top-color: #8b6508;
    border-radius: 50%;
    animation: spin-b-jowfdckota 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin-b-jowfdckota {
    to { transform: rotate(360deg); }
}

.loading-state p[b-jowfdckota] {
    font-family: var(--font-body);
    font-style: italic;
    color: #6b5a4a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   ACTIVE BATTLES SECTION
   ───────────────────────────────────────────────────────────────── */
.active-battles[b-jowfdckota] {
    margin-bottom: clamp(28px, 5vh, 44px);
}

/* Section titles */
.section-title[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    color: #3d2b1f;
    text-align: center;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.title-icon[b-jowfdckota] {
    font-size: 1.2em;
}

.active-battles h2[b-jowfdckota],
.battle-options h2[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    color: #3d2b1f;
    text-align: center;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.section-decoration[b-jowfdckota] {
    color: #8b6508;
    font-size: 0.8em;
}

.battles-list[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ─────────────────────────────────────────────────────────────────
   CAROUSEL - Active battles carousel
   ───────────────────────────────────────────────────────────────── */
.carousel-container[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.carousel-viewport[b-jowfdckota] {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
}

.carousel-track[b-jowfdckota] {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide[b-jowfdckota] {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.carousel-arrow[b-jowfdckota] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 300;
    color: #3d2b1f;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 30%, #b8860b 70%, #8b6508 100%);
    border: 2px solid #6b4e08;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow:
        0 4px 12px rgba(184, 134, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.carousel-arrow:hover:not(:disabled)[b-jowfdckota] {
    background: linear-gradient(180deg, #ffe44d 0%, #ffd700 30%, #daa520 70%, #b8860b 100%);
    transform: scale(1.1);
    box-shadow:
        0 6px 16px rgba(184, 134, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.carousel-arrow:disabled[b-jowfdckota],
.carousel-arrow.disabled[b-jowfdckota] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.carousel-dots[b-jowfdckota] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.carousel-dot[b-jowfdckota] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #8b6508;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.carousel-dot:hover[b-jowfdckota] {
    background: rgba(184, 134, 11, 0.3);
}

.carousel-dot.active[b-jowfdckota] {
    background: linear-gradient(180deg, #ffd700, #b8860b);
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}

/* ─────────────────────────────────────────────────────────────────
   BATTLES GRID - Tile-based battle cards
   ───────────────────────────────────────────────────────────────── */
.battles-grid[b-jowfdckota] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.battle-tile[b-jowfdckota] {
    position: relative;
    padding: 0;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.7) 0%, rgba(240, 230, 215, 0.5) 100%);
    border: 2px solid rgba(139, 101, 8, 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.battle-tile:hover[b-jowfdckota] {
    transform: translateY(-4px);
    border-color: rgba(139, 101, 8, 0.4);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(218, 165, 32, 0.2);
}

.battle-tile.waiting[b-jowfdckota] {
    border-color: rgba(184, 134, 11, 0.35);
}

.battle-tile.active[b-jowfdckota] {
    border-color: rgba(74, 124, 64, 0.4);
}

.tile-header[b-jowfdckota] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(139, 101, 8, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(139, 101, 8, 0.1);
}

.game-code[b-jowfdckota] {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: #8b6508;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.game-time[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #8b7a6a;
}

.tile-players[b-jowfdckota] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    gap: 12px;
}

.player-side[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.player-side.me[b-jowfdckota] {
    align-items: flex-start;
}

.player-side.opponent[b-jowfdckota] {
    align-items: flex-end;
}

.player-side.waiting[b-jowfdckota] {
    opacity: 0.5;
}

.player-token[b-jowfdckota] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.player-token.gold[b-jowfdckota] {
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
}

.player-token.crimson[b-jowfdckota] {
    background: radial-gradient(circle at 30% 30%, #dc3545, #8b0000);
}

/* Player flag mini for battle tiles */
.player-flag-mini[b-jowfdckota] {
    width: 28px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-flag-mini[b-jowfdckota]  .flag-display {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.flag-placeholder-mini[b-jowfdckota] {
    width: 28px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #8b6508;
    background: rgba(139, 101, 8, 0.1);
    border: 1px dashed rgba(139, 101, 8, 0.3);
    border-radius: 3px;
}

.flag-placeholder-mini.waiting-icon[b-jowfdckota] {
    font-size: 0.8rem;
    animation: pulse-b-jowfdckota 1.5s ease-in-out infinite;
}

@keyframes pulse-b-jowfdckota {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.player-name[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #3d2b1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.player-hp[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #c41e3a;
}

.vs-divider[b-jowfdckota] {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #8b6508;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.3);
    padding: 0 8px;
}

.tile-footer[b-jowfdckota] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 101, 8, 0.05) 100%);
    border-top: 1px solid rgba(139, 101, 8, 0.1);
}

.tile-status[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 4px;
}

.tile-status.waiting[b-jowfdckota] {
    color: #8b6508;
    background: rgba(184, 134, 11, 0.12);
}

.tile-status.active[b-jowfdckota] {
    color: #2d5027;
    background: rgba(74, 124, 64, 0.12);
}

.tile-action[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: #8b6508;
    transition: transform 0.2s;
}

.battle-tile:hover .tile-action[b-jowfdckota] {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────
   BATTLE CARDS - Brass coin style tokens
   ───────────────────────────────────────────────────────────────── */
.battle-card[b-jowfdckota] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(255,250,245,0.5) 0%, rgba(240,230,215,0.3) 100%);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.battle-card:hover[b-jowfdckota] {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255,250,245,0.7) 0%, rgba(240,230,215,0.5) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.battle-card.active[b-jowfdckota] {
    border-left: 3px solid #4a7c40;
}

.battle-card.waiting[b-jowfdckota] {
    border-left: 3px solid #b8860b;
}

.card-glow[b-jowfdckota] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}

.battle-card:hover .card-glow[b-jowfdckota] {
    transform: translateX(100%);
}

/* Battle code - brass coin style */
.battle-code[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* Brass coin effect */
    background:
        radial-gradient(circle at 30% 30%, #ffd700 0%, #daa520 40%, #b8860b 70%, #8b6508 100%);
    box-shadow:
        inset 0 3px 6px rgba(255,255,255,0.4),
        inset 0 -3px 6px rgba(0,0,0,0.3),
        0 4px 12px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid #6b4e08;
}

.code-value[b-jowfdckota] {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: #3d2510;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
    letter-spacing: 0;
    line-height: 1;
}

.code-label[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.55rem;
    color: #5c3d2e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.battle-info[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.combatants[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.combatant[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #3d2b1f;
}

.combatant.waiting[b-jowfdckota] {
    opacity: 0.5;
    font-style: italic;
}

.combatant-token[b-jowfdckota] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3);
}

.combatant-token.gold[b-jowfdckota] {
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
}

.combatant-token.crimson[b-jowfdckota] {
    background: radial-gradient(circle at 30% 30%, #dc3545, #8b0000);
}

.combatant-name[b-jowfdckota] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.combatant-hp[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #4a7c40;
    background: rgba(74, 124, 64, 0.15);
    padding: 2px 8px;
    border-radius: 3px;
}

.battle-time[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #8b7a6a;
}

.battle-status[b-jowfdckota] {
    display: flex;
    align-items: center;
}

.status-badge[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 3px;
    white-space: nowrap;
}

.status-badge.active[b-jowfdckota] {
    background: linear-gradient(180deg, #6b9d5f, #4a7c40);
    color: #f0f8e8;
    box-shadow: 0 2px 4px rgba(74, 124, 64, 0.3);
}

.status-badge.waiting[b-jowfdckota] {
    background: linear-gradient(180deg, #daa520, #b8860b);
    color: #3d2b1f;
    box-shadow: 0 2px 4px rgba(184, 134, 11, 0.3);
}

.card-action[b-jowfdckota] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.action-arrow[b-jowfdckota] {
    font-size: 1.3rem;
    color: #8b6508;
    transition: transform 0.2s;
}

.battle-card:hover .action-arrow[b-jowfdckota] {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────
   NEW GAME SECTION - Game mode cards (Medieval parchment style)
   ───────────────────────────────────────────────────────────────── */
.new-game-section[b-jowfdckota] {
    margin-bottom: clamp(20px, 4vh, 32px);
}

.game-modes[b-jowfdckota] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.game-mode-card[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;

    /* Medieval parchment base */
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #ede0c8 0%, #e6d5b8 50%, #dcc8a0 100%);

    /* Leather frame border */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 20px rgba(139, 101, 8, 0.1);
    border: 3px solid;
}

/* Burned edge effect */
.game-mode-card[b-jowfdckota]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    box-shadow: inset 0 0 30px rgba(101, 67, 33, 0.3);
    pointer-events: none;
    transition: box-shadow 0.3s;
}

/* Shimmer effect on hover */
.game-mode-card[b-jowfdckota]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    transition: left 0.5s;
}

.game-mode-card:hover:not(:disabled)[b-jowfdckota]::after {
    left: 100%;
}

.game-mode-card:disabled[b-jowfdckota] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

.game-mode-card:disabled[b-jowfdckota]::after {
    display: none;
}

/* PvP game - Green wax seal style */
.game-mode-card.pvp[b-jowfdckota] {
    border-color: #4a7c40;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #e8f0e4 0%, #d8e8d0 50%, #c8d8b8 100%);
    box-shadow:
        0 8px 24px rgba(45, 80, 39, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 20px rgba(74, 124, 64, 0.15);
}

.game-mode-card.pvp:hover:not(:disabled)[b-jowfdckota] {
    transform: translateY(-4px);
    border-color: #5a9450;
    box-shadow:
        0 12px 32px rgba(45, 80, 39, 0.4),
        0 6px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 30px rgba(74, 124, 64, 0.2),
        0 0 0 1px rgba(255, 215, 0, 0.3);
}

.game-mode-card.pvp:hover:not(:disabled)[b-jowfdckota]::before {
    box-shadow: inset 0 0 40px rgba(74, 124, 64, 0.2);
}

/* Bot game - Purple wax seal style */
.game-mode-card.bot[b-jowfdckota] {
    border-color: #6b4a6b;
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #f0e8f0 0%, #e0d0e0 50%, #d0c0d0 100%);
    box-shadow:
        0 8px 24px rgba(90, 58, 90, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 20px rgba(107, 74, 107, 0.15);
}

.game-mode-card.bot:hover:not(:disabled)[b-jowfdckota] {
    transform: translateY(-4px);
    border-color: #7b5a7b;
    box-shadow:
        0 12px 32px rgba(90, 58, 90, 0.4),
        0 6px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 30px rgba(107, 74, 107, 0.2),
        0 0 0 1px rgba(255, 215, 0, 0.3);
}

.game-mode-card.bot:hover:not(:disabled)[b-jowfdckota]::before {
    box-shadow: inset 0 0 40px rgba(107, 74, 107, 0.2);
}

.mode-emblem[b-jowfdckota] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

/* PvP emblem - Green wax seal */
.game-mode-card.pvp .mode-emblem[b-jowfdckota] {
    background: radial-gradient(circle at 35% 35%, #7db86f 0%, #5a9450 40%, #4a7c40 70%, #3d6633 100%);
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(45, 80, 39, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #2d5027;
}

/* Bot emblem - Purple wax seal */
.game-mode-card.bot .mode-emblem[b-jowfdckota] {
    background: radial-gradient(circle at 35% 35%, #9b7a9b 0%, #7b5a7b 40%, #6b4a6b 70%, #5a3a5a 100%);
    box-shadow:
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(90, 58, 90, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid #4a2a4a;
}

/* No additional background needed - wax seal is the emblem */
.mode-emblem[b-jowfdckota]::before {
    display: none;
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.emblem-icon[b-jowfdckota] {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.mode-info[b-jowfdckota] {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.mode-info h3[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #3d2b1f;
    margin: 0 0 4px 0;
    text-shadow: none;
}

.mode-info p[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #6b5a4a;
    margin: 0;
    line-height: 1.3;
}

.mode-arrow[b-jowfdckota] {
    font-size: 1.5rem;
    color: #8b6508;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.game-mode-card:hover:not(:disabled) .mode-arrow[b-jowfdckota] {
    transform: translateX(6px);
    color: #b8860b;
}

/* ─────────────────────────────────────────────────────────────────
   JOIN GAME SECTION
   ───────────────────────────────────────────────────────────────── */
.join-game[b-jowfdckota] {
    max-width: 500px;
    margin: 0 auto;
}

.join-header[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.join-line[b-jowfdckota] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b6508 30%, #daa520 50%, #8b6508 70%, transparent);
}

.join-text[b-jowfdckota] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: #6b5a4a;
    white-space: nowrap;
}

.join-form[b-jowfdckota] {
    display: flex;
    gap: 12px;
}

.join-code-input[b-jowfdckota] {
    flex: 1;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.join-code-input:focus[b-jowfdckota] {
    border-color: #daa520;
    outline: none;
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.25);
}

.join-code-input[b-jowfdckota]::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #a09078;
}

.join-btn[b-jowfdckota] {
    padding: 14px 24px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #3d2b1f;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 30%, #b8860b 70%, #8b6508 100%);
    border: 2px solid #6b4e08;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.3);
    box-shadow:
        0 4px 12px rgba(184, 134, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.join-btn:hover:not(:disabled)[b-jowfdckota] {
    background: linear-gradient(180deg, #ffe44d 0%, #ffd700 30%, #daa520 70%, #b8860b 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(184, 134, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.join-btn:disabled[b-jowfdckota] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────
   BATTLE OPTIONS - Card style buttons (legacy, keeping for compatibility)
   ───────────────────────────────────────────────────────────────── */
.battle-options[b-jowfdckota] {
    margin-bottom: clamp(20px, 4vh, 32px);
}

.options-grid[b-jowfdckota] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.battle-option[b-jowfdckota] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.battle-option[b-jowfdckota]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.4s;
}

.battle-option:hover[b-jowfdckota]::before {
    left: 100%;
}

.battle-option:disabled[b-jowfdckota] {
    opacity: 0.5;
    cursor: not-allowed;
}

.battle-option:disabled[b-jowfdckota]::before {
    display: none;
}

/* Create game - Green forged metal */
.battle-option.create[b-jowfdckota] {
    background: linear-gradient(180deg, #6b9d5f 0%, #4a7c40 30%, #3d6633 70%, #2d5027 100%);
    box-shadow:
        0 6px 20px rgba(45, 80, 39, 0.5),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #2d5027,
        0 0 0 4px rgba(45, 80, 39, 0.3);
}

.battle-option.create:hover:not(:disabled)[b-jowfdckota] {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #7db86f 0%, #5a9450 30%, #4a7c40 70%, #3d6633 100%);
    box-shadow:
        0 10px 30px rgba(45, 80, 39, 0.6),
        0 5px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #3d6633,
        0 0 0 4px rgba(45, 80, 39, 0.4);
}

/* Bot game - Purple forged metal */
.battle-option.bot[b-jowfdckota] {
    background: linear-gradient(180deg, #8b6a8b 0%, #6b4a6b 30%, #5a3a5a 70%, #4a2a4a 100%);
    box-shadow:
        0 6px 20px rgba(90, 58, 90, 0.5),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #4a2a4a,
        0 0 0 4px rgba(90, 58, 90, 0.3);
}

.battle-option.bot:hover:not(:disabled)[b-jowfdckota] {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #9b7a9b 0%, #7b5a7b 30%, #6b4a6b 70%, #5a3a5a 100%);
    box-shadow:
        0 10px 30px rgba(90, 58, 90, 0.6),
        0 5px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #5a3a5a,
        0 0 0 4px rgba(90, 58, 90, 0.4);
}

.option-icon[b-jowfdckota] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.2);
}

.option-content[b-jowfdckota] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-title[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.option-desc[b-jowfdckota] {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.option-arrow[b-jowfdckota] {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.2s;
}

.battle-option:hover:not(:disabled) .option-arrow[b-jowfdckota] {
    transform: translateX(4px);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   JOIN SECTION
   ───────────────────────────────────────────────────────────────── */
.join-section[b-jowfdckota] {
    max-width: 500px;
    margin: 0 auto;
}

.join-divider[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.join-divider[b-jowfdckota]::before,
.join-divider[b-jowfdckota]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b6508 30%, #daa520 50%, #8b6508 70%, transparent);
}

.join-divider span[b-jowfdckota] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: #6b5a4a;
    white-space: nowrap;
}

.join-form[b-jowfdckota] {
    display: flex;
    gap: 12px;
}

.code-input[b-jowfdckota] {
    flex: 1;
    padding: 14px 16px;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.code-input:focus[b-jowfdckota] {
    border-color: #daa520;
    outline: none;
    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.25);
}

.code-input[b-jowfdckota]::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #a09078;
}

/* Join button - brass style */
.join-button[b-jowfdckota] {
    padding: 14px 24px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #3d2b1f;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 30%, #b8860b 70%, #8b6508 100%);
    border: 2px solid #6b4e08;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255,215,0,0.3);
    box-shadow:
        0 4px 12px rgba(184, 134, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.join-button:hover:not(:disabled)[b-jowfdckota] {
    background: linear-gradient(180deg, #ffe44d 0%, #ffd700 30%, #daa520 70%, #b8860b 100%);
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(184, 134, 11, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.join-button:disabled[b-jowfdckota] {
    opacity: 0.5;
    cursor: not-allowed;
}

.code-status[b-jowfdckota] {
    margin-top: 12px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-align: center;
    border-radius: 4px;
    animation: fadeIn-b-jowfdckota 0.2s ease;
}

@keyframes fadeIn-b-jowfdckota {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.code-status.found[b-jowfdckota] {
    color: #2d5027;
    background: rgba(74, 124, 64, 0.15);
    border: 1px solid rgba(74, 124, 64, 0.3);
}

.code-status.not-found[b-jowfdckota] {
    color: #8b6508;
    background: rgba(184, 134, 11, 0.1);
    border: 1px solid rgba(184, 134, 11, 0.3);
}

/* ─────────────────────────────────────────────────────────────────
   LEADERBOARD SECTION
   ───────────────────────────────────────────────────────────────── */
.leaderboard-section[b-jowfdckota] {
    margin-bottom: clamp(20px, 4vh, 32px);
    animation: fadeInUp-b-jowfdckota 0.5s ease-out 0.3s backwards;
}

.leaderboard-tabs[b-jowfdckota] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.leaderboard-tab[b-jowfdckota] {
    padding: 10px 20px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #6b5a4a;
    background: linear-gradient(180deg, rgba(255,250,245,0.5) 0%, rgba(240,230,215,0.3) 100%);
    border: 2px solid rgba(139, 101, 8, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leaderboard-tab:hover[b-jowfdckota] {
    border-color: rgba(139, 101, 8, 0.4);
    background: linear-gradient(180deg, rgba(255,250,245,0.7) 0%, rgba(240,230,215,0.5) 100%);
}

.leaderboard-tab.active[b-jowfdckota] {
    color: #3d2b1f;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
    border-color: #6b4e08;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

.leaderboard-content[b-jowfdckota] {
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.5) 0%, rgba(240, 230, 215, 0.3) 100%);
    border: 2px solid rgba(139, 101, 8, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.leaderboard-loading[b-jowfdckota] {
    display: flex;
    justify-content: center;
    padding: 32px;
}

.loading-spinner-small[b-jowfdckota] {
    width: 24px;
    height: 24px;
    border: 3px solid #d4c090;
    border-top-color: #8b6508;
    border-radius: 50%;
    animation: spin-b-jowfdckota 1s linear infinite;
}

.leaderboard-list[b-jowfdckota] {
    display: flex;
    flex-direction: column;
}

.leaderboard-row[b-jowfdckota] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(139, 101, 8, 0.1);
    transition: background 0.2s;
}

.leaderboard-row:last-child[b-jowfdckota] {
    border-bottom: none;
}

.leaderboard-row:hover[b-jowfdckota] {
    background: rgba(255, 215, 0, 0.1);
}

.leaderboard-row.is-me[b-jowfdckota] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.05) 100%);
}

.leaderboard-row.rank-1[b-jowfdckota] {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 100%);
}

.leaderboard-row.rank-2[b-jowfdckota] {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 100%);
}

.leaderboard-row.rank-3[b-jowfdckota] {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.12) 0%, transparent 100%);
}

.leaderboard-rank[b-jowfdckota] {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-rank .medal[b-jowfdckota] {
    font-size: 1.3rem;
}

.leaderboard-rank .rank-number[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: #6b5a4a;
}

.leaderboard-name[b-jowfdckota] {
    flex: 1;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #3d2b1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-row.is-me .leaderboard-name[b-jowfdckota] {
    font-weight: 600;
}

.leaderboard-wins[b-jowfdckota] {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #8b6508;
    white-space: nowrap;
}

.leaderboard-empty[b-jowfdckota] {
    padding: 32px;
    text-align: center;
}

.leaderboard-empty p[b-jowfdckota] {
    font-family: var(--font-body);
    font-style: italic;
    color: #8b7a6a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   ERROR BANNER
   ───────────────────────────────────────────────────────────────── */
.error-banner[b-jowfdckota] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #8b0000;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.05) 100%);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
    animation: shake-b-jowfdckota 0.4s ease;
}

@keyframes shake-b-jowfdckota {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.error-icon[b-jowfdckota] {
    font-size: 1.1rem;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .candle[b-jowfdckota] {
        display: none;
    }

    .scattered-coins[b-jowfdckota] {
        display: none;
    }

    /* Navigation */
    .lobby-nav[b-jowfdckota] {
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .back-link[b-jowfdckota],
    .settings-link[b-jowfdckota] {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    /* Warrior profile mobile */
    .warrior-profile[b-jowfdckota] {
        gap: 12px;
        padding: 14px;
    }

    .warrior-identity[b-jowfdckota] {
        gap: 12px;
    }

    .warrior-flag[b-jowfdckota] {
        width: 48px;
        height: 58px;
    }

    .flag-placeholder[b-jowfdckota] {
        width: 48px;
        height: 58px;
        font-size: 1.4rem;
    }

    .warrior-name-wrapper[b-jowfdckota] {
        gap: 8px;
    }

    .warrior-name-display[b-jowfdckota] {
        font-size: 1.1rem;
    }

    .warrior-name-input[b-jowfdckota] {
        font-size: 1rem;
        padding: 6px 10px;
    }

    .verified-badge[b-jowfdckota] {
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    /* Stats mobile */
    .warrior-stats-container[b-jowfdckota] {
        gap: 6px;
        padding-top: 10px;
    }

    .stats-row[b-jowfdckota] {
        gap: 10px;
    }

    .stats-period[b-jowfdckota] {
        font-size: 0.75rem;
        min-width: 60px;
    }

    .stat-item .stat-icon[b-jowfdckota] {
        font-size: 0.8rem;
    }

    .stat-item .stat-value[b-jowfdckota] {
        font-size: 0.9rem;
    }

    /* Legacy stat-block mobile */
    .warrior-stats[b-jowfdckota] {
        gap: 16px;
        width: 100%;
        justify-content: space-around;
    }

    .stat-block .stat-value[b-jowfdckota] {
        font-size: 1.3rem;
    }

    .stat-block .stat-label[b-jowfdckota] {
        font-size: 0.75rem;
    }

    .register-banner[b-jowfdckota] {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 10px 12px;
    }

    .banner-text[b-jowfdckota] {
        font-size: 0.9rem;
    }

    /* Leaderboard mobile */
    .leaderboard-tabs[b-jowfdckota] {
        gap: 6px;
    }

    .leaderboard-tab[b-jowfdckota] {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .leaderboard-row[b-jowfdckota] {
        gap: 10px;
        padding: 10px 12px;
    }

    .leaderboard-rank[b-jowfdckota] {
        width: 28px;
    }

    .leaderboard-rank .medal[b-jowfdckota] {
        font-size: 1.1rem;
    }

    .leaderboard-name[b-jowfdckota] {
        font-size: 0.9rem;
    }

    .leaderboard-wins[b-jowfdckota] {
        font-size: 0.85rem;
    }

    /* Carousel mobile */
    .carousel-container[b-jowfdckota] {
        gap: 8px;
    }

    .carousel-arrow[b-jowfdckota] {
        width: 32px;
        height: 32px;
        font-size: 1.4rem;
    }

    .carousel-dots[b-jowfdckota] {
        margin-top: 12px;
    }

    .carousel-dot[b-jowfdckota] {
        width: 8px;
        height: 8px;
    }

    /* Battle tiles mobile */
    .battles-grid[b-jowfdckota] {
        grid-template-columns: 1fr;
    }

    .tile-players[b-jowfdckota] {
        padding: 12px;
    }

    .player-token[b-jowfdckota] {
        width: 28px;
        height: 28px;
    }

    .player-flag-mini[b-jowfdckota] {
        width: 24px;
        height: 29px;
    }

    .flag-placeholder-mini[b-jowfdckota] {
        width: 24px;
        height: 29px;
        font-size: 0.75rem;
    }

    .player-name[b-jowfdckota] {
        font-size: 0.9rem;
    }

    /* Game modes mobile */
    .game-modes[b-jowfdckota] {
        grid-template-columns: 1fr;
    }

    .game-mode-card[b-jowfdckota] {
        padding: 16px 18px;
    }

    .mode-emblem[b-jowfdckota] {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .mode-info h3[b-jowfdckota] {
        font-size: 1.1rem;
    }

    .mode-info p[b-jowfdckota] {
        font-size: 0.85rem;
    }

    /* Join section mobile */
    .join-header[b-jowfdckota] {
        gap: 10px;
    }

    .join-text[b-jowfdckota] {
        font-size: 0.85rem;
    }

    .join-form[b-jowfdckota] {
        flex-direction: column;
    }

    .join-btn[b-jowfdckota] {
        width: 100%;
    }

    /* Legacy styles */
    .options-grid[b-jowfdckota] {
        grid-template-columns: 1fr;
    }

    .battle-card[b-jowfdckota] {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 14px 16px;
    }

    .battle-code[b-jowfdckota] {
        width: 52px;
        height: 52px;
    }

    .code-value[b-jowfdckota] {
        font-size: 0.65rem;
    }

    .battle-status[b-jowfdckota] {
        display: none;
    }

    .join-button[b-jowfdckota] {
        width: 100%;
    }

    .header-nav[b-jowfdckota] {
        flex-direction: column;
        gap: 8px;
    }

    .profile-link[b-jowfdckota] {
        order: -1;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.lobby-nav[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.4s ease-out;
}

.warrior-profile[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.5s ease-out 0.1s backwards;
}

.register-banner[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.5s ease-out 0.15s backwards;
}

.active-battles[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.5s ease-out 0.2s backwards;
}

.new-game-section[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.5s ease-out 0.25s backwards;
}

.scroll-header[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.6s ease-out;
}

.warrior-name-section[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.6s ease-out 0.1s backwards;
}

.battle-options[b-jowfdckota] {
    animation: fadeInUp-b-jowfdckota 0.6s ease-out 0.3s backwards;
}

@keyframes fadeInUp-b-jowfdckota {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/aaaaarena/Components/ProfilePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE - Warrior's profile and statistics
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TAVERN ATMOSPHERE
   ───────────────────────────────────────────────────────────────── */
.tavern-page[b-cnsvbkt4qk] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    background:
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

.tavern-page[b-cnsvbkt4qk]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   CANDLES
   ───────────────────────────────────────────────────────────────── */
.candle[b-cnsvbkt4qk] {
    position: fixed;
    width: 20px;
    height: 60px;
    z-index: 10;
}

.candle-left[b-cnsvbkt4qk] { left: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }
.candle-right[b-cnsvbkt4qk] { right: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }

.candle[b-cnsvbkt4qk]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4c4a0 50%, #c4a060 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.flame[b-cnsvbkt4qk] {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 25px;
    background: linear-gradient(180deg, #fff7e0 0%, #ffdd66 30%, #ff9900 60%, #ff5500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-cnsvbkt4qk 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 20px #ff9900, 0 0 40px #ff660088, 0 0 60px #ff440044;
}

.glow[b-cnsvbkt4qk] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,150,50,0.15) 0%, transparent 70%);
    animation: glowPulse-b-cnsvbkt4qk 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker-b-cnsvbkt4qk {
    0% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 0.9; }
}

@keyframes glowPulse-b-cnsvbkt4qk {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-cnsvbkt4qk] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-cnsvbkt4qk] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-cnsvbkt4qk]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-cnsvbkt4qk] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-cnsvbkt4qk] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-cnsvbkt4qk] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────
   PARCHMENT BOARD
   ───────────────────────────────────────────────────────────────── */
.tavern-board[b-cnsvbkt4qk] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(700px, 92vw);
    margin: 20px auto;

    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    box-shadow:
        0 0 80px rgba(255, 150, 50, 0.1),
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

.tavern-board[b-cnsvbkt4qk]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow: inset 0 0 60px rgba(80, 50, 20, 0.5), inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BOARD CORNERS
   ───────────────────────────────────────────────────────────────── */
.board-corner[b-cnsvbkt4qk] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-cnsvbkt4qk]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-cnsvbkt4qk] { top: -8px; left: -8px; }
.corner-tr[b-cnsvbkt4qk] { top: -8px; right: -8px; }
.corner-bl[b-cnsvbkt4qk] { bottom: -8px; left: -8px; }
.corner-br[b-cnsvbkt4qk] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-cnsvbkt4qk] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 40px);
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */
.page-header[b-cnsvbkt4qk] {
    text-align: center;
    margin-bottom: clamp(20px, 4vh, 32px);
    position: relative;
}

.back-link[b-cnsvbkt4qk] {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #8b6508;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-cnsvbkt4qk] {
    color: #3d2b1f;
}

.page-header h1[b-cnsvbkt4qk] {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: #2a1a10;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(222, 200, 160, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.1);
}

/* ─────────────────────────────────────────────────────────────────
   LOADING STATE
   ───────────────────────────────────────────────────────────────── */
.loading-state[b-cnsvbkt4qk] {
    text-align: center;
    padding: 48px 0;
}

.loading-spinner[b-cnsvbkt4qk] {
    width: 40px;
    height: 40px;
    border: 4px solid #d4c090;
    border-top-color: #8b6508;
    border-radius: 50%;
    animation: spin-b-cnsvbkt4qk 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-cnsvbkt4qk {
    to { transform: rotate(360deg); }
}

.loading-state p[b-cnsvbkt4qk] {
    font-family: var(--font-body);
    font-style: italic;
    color: #6b5a4a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   PROFILE HEADER
   ───────────────────────────────────────────────────────────────── */
.profile-header[b-cnsvbkt4qk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,250,240,0.5) 0%, rgba(240,230,210,0.3) 100%);
    border-radius: 8px;
    border: 2px solid rgba(184, 134, 11, 0.3);
    margin-bottom: 20px;
}

.flag-container[b-cnsvbkt4qk] {
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.flag-container:hover .flag-edit-overlay[b-cnsvbkt4qk] {
    opacity: 1;
}

.flag-edit-overlay[b-cnsvbkt4qk] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,240,230,0.95) 100%);
    border: 2px solid #b8860b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.flag-edit-overlay:hover[b-cnsvbkt4qk] {
    opacity: 1;
    transform: scale(1.1);
    background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
    border-color: #daa520;
}

.profile-info[b-cnsvbkt4qk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-info h2[b-cnsvbkt4qk] {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
    color: #2a1a10;
    margin: 0;
}

.registered-badge[b-cnsvbkt4qk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #2d5027;
    background: linear-gradient(180deg, rgba(74, 124, 64, 0.15) 0%, rgba(74, 124, 64, 0.08) 100%);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(74, 124, 64, 0.3);
    width: fit-content;
}

.anonymous-badge[b-cnsvbkt4qk] {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #8b6508;
    background: linear-gradient(180deg, rgba(184, 134, 11, 0.15) 0%, rgba(184, 134, 11, 0.08) 100%);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    width: fit-content;
}

.email-info[b-cnsvbkt4qk] {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #6b5a4a;
}

.register-cta[b-cnsvbkt4qk] {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: #4a7c40;
    text-decoration: none;
    transition: color 0.2s;
}

.register-cta:hover[b-cnsvbkt4qk] {
    color: #2d5027;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────
   EDIT FLAG SECTION
   ───────────────────────────────────────────────────────────────── */
.edit-flag-section[b-cnsvbkt4qk] {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,250,240,0.5) 0%, rgba(240,230,210,0.3) 100%);
    border-radius: 8px;
    border: 2px solid rgba(184, 134, 11, 0.3);
    margin-bottom: 24px;
}

.edit-flag-section h3[b-cnsvbkt4qk] {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #3d2b1f;
    margin: 0 0 16px 0;
}

.edit-actions[b-cnsvbkt4qk] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

.cancel-button[b-cnsvbkt4qk] {
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #6b5a4a;
    background: transparent;
    border: 2px solid #b8860b;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-button:hover[b-cnsvbkt4qk] {
    background: rgba(184, 134, 11, 0.1);
}

.save-button[b-cnsvbkt4qk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(180deg, #6b9d5f 0%, #4a7c40 50%, #3d6633 100%);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(45, 80, 39, 0.3);
}

.save-button:hover:not(:disabled)[b-cnsvbkt4qk] {
    background: linear-gradient(180deg, #7db86f 0%, #5a9450 50%, #4a7c40 100%);
    transform: translateY(-2px);
}

.save-button:disabled[b-cnsvbkt4qk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-spinner-small[b-cnsvbkt4qk] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-cnsvbkt4qk 1s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   STATS SECTION
   ───────────────────────────────────────────────────────────────── */
.stats-section[b-cnsvbkt4qk] {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,250,240,0.5) 0%, rgba(240,230,210,0.3) 100%);
    border-radius: 8px;
    border: 2px solid rgba(184, 134, 11, 0.3);
}

.stats-section h3[b-cnsvbkt4qk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #3d2b1f;
    margin: 0 0 16px 0;
}

.section-icon[b-cnsvbkt4qk] {
    color: #8b6508;
}

.stats-tabs[b-cnsvbkt4qk] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tab[b-cnsvbkt4qk] {
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #6b5a4a;
    background: transparent;
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-cnsvbkt4qk] {
    background: rgba(184, 134, 11, 0.1);
}

.tab.active[b-cnsvbkt4qk] {
    color: #3d2b1f;
    background: linear-gradient(180deg, #ffd700 0%, #daa520 100%);
    border-color: #b8860b;
    font-weight: 600;
}

.stats-grid[b-cnsvbkt4qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.stat-card[b-cnsvbkt4qk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(245,240,230,0.4) 100%);
    border-radius: 6px;
    border: 1px solid rgba(184, 134, 11, 0.2);
}

.stat-card.win[b-cnsvbkt4qk] {
    border-color: rgba(74, 124, 64, 0.4);
    background: linear-gradient(180deg, rgba(74, 124, 64, 0.1) 0%, rgba(74, 124, 64, 0.05) 100%);
}

.stat-card.lose[b-cnsvbkt4qk] {
    border-color: rgba(139, 0, 0, 0.2);
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.08) 0%, rgba(139, 0, 0, 0.03) 100%);
}

.stat-icon[b-cnsvbkt4qk] {
    font-size: 1.5rem;
}

.stat-value[b-cnsvbkt4qk] {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: #2a1a10;
}

.stat-label[b-cnsvbkt4qk] {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #6b5a4a;
    text-align: center;
}

.stats-coming-soon[b-cnsvbkt4qk] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: #8b7a6a;
    text-align: center;
    margin: 16px 0 0 0;
}

.stats-details[b-cnsvbkt4qk] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.detail-row[b-cnsvbkt4qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.detail-row:nth-child(odd)[b-cnsvbkt4qk] {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.detail-label[b-cnsvbkt4qk] {
    color: #6b5a4a;
}

.detail-value[b-cnsvbkt4qk] {
    color: #3d2b1f;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   ERROR & SUCCESS BANNERS
   ───────────────────────────────────────────────────────────────── */
.error-banner[b-cnsvbkt4qk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #8b0000;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.05) 100%);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
}

.error-icon[b-cnsvbkt4qk] {
    font-size: 1.1rem;
}

.success-banner[b-cnsvbkt4qk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #2d5027;
    background: linear-gradient(180deg, rgba(74, 124, 64, 0.15) 0%, rgba(74, 124, 64, 0.08) 100%);
    border: 1px solid rgba(74, 124, 64, 0.3);
    border-radius: 4px;
    animation: fadeIn-b-cnsvbkt4qk 0.3s ease;
}

@keyframes fadeIn-b-cnsvbkt4qk {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-icon[b-cnsvbkt4qk] {
    font-size: 1.1rem;
    color: #4a7c40;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .candle[b-cnsvbkt4qk],
    .scattered-coins[b-cnsvbkt4qk] {
        display: none;
    }

    .back-link[b-cnsvbkt4qk] {
        position: static;
        display: block;
        margin-bottom: 16px;
    }

    .profile-header[b-cnsvbkt4qk] {
        flex-direction: column;
        text-align: center;
    }

    .edit-actions[b-cnsvbkt4qk] {
        flex-direction: column;
    }

    .cancel-button[b-cnsvbkt4qk],
    .save-button[b-cnsvbkt4qk] {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.page-header[b-cnsvbkt4qk] {
    animation: fadeInUp-b-cnsvbkt4qk 0.6s ease-out;
}

.profile-header[b-cnsvbkt4qk] {
    animation: fadeInUp-b-cnsvbkt4qk 0.6s ease-out 0.1s backwards;
}

.stats-section[b-cnsvbkt4qk] {
    animation: fadeInUp-b-cnsvbkt4qk 0.6s ease-out 0.2s backwards;
}

@keyframes fadeInUp-b-cnsvbkt4qk {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/aaaaarena/Components/RegisterPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   REGISTER PAGE - Tavern style registration
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   TAVERN ATMOSPHERE
   ───────────────────────────────────────────────────────────────── */
.tavern-page[b-9nt2grxktv] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 60px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    background:
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='8' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4 Q25 2 50 4 T100 4' stroke='%23241a10' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23grain)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 30%, #3d2a1a 0%, #2a1c10 40%, #1a1008 100%);
    background-attachment: fixed;
}

.tavern-page[b-9nt2grxktv]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   CANDLES
   ───────────────────────────────────────────────────────────────── */
.candle[b-9nt2grxktv] {
    position: fixed;
    width: 20px;
    height: 60px;
    z-index: 10;
}

.candle-left[b-9nt2grxktv] { left: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }
.candle-right[b-9nt2grxktv] { right: clamp(20px, 5vw, 80px); top: clamp(60px, 15vh, 120px); }

.candle[b-9nt2grxktv]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 50px;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4c4a0 50%, #c4a060 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
}

.flame[b-9nt2grxktv] {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 25px;
    background: linear-gradient(180deg, #fff7e0 0%, #ffdd66 30%, #ff9900 60%, #ff5500 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker-b-9nt2grxktv 0.5s ease-in-out infinite alternate;
    box-shadow: 0 0 20px #ff9900, 0 0 40px #ff660088, 0 0 60px #ff440044;
}

.glow[b-9nt2grxktv] {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,150,50,0.15) 0%, transparent 70%);
    animation: glowPulse-b-9nt2grxktv 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker-b-9nt2grxktv {
    0% { transform: translateX(-50%) scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: translateX(-50%) scale(1.1) rotate(2deg); opacity: 0.9; }
}

@keyframes glowPulse-b-9nt2grxktv {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}

/* ─────────────────────────────────────────────────────────────────
   SCATTERED COINS
   ───────────────────────────────────────────────────────────────── */
.scattered-coins[b-9nt2grxktv] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.coin[b-9nt2grxktv] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 50%, #b8860b 100%);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.4);
    opacity: 0.7;
}

.coin[b-9nt2grxktv]::after {
    content: '★';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #5c3d2e;
}

.coin-1[b-9nt2grxktv] { bottom: 15%; left: 8%; transform: rotate(15deg); }
.coin-2[b-9nt2grxktv] { bottom: 25%; right: 10%; transform: rotate(-20deg); width: 20px; height: 20px; }
.coin-3[b-9nt2grxktv] { top: 60%; left: 5%; transform: rotate(45deg); width: 18px; height: 18px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────────
   PARCHMENT BOARD
   ───────────────────────────────────────────────────────────────── */
.tavern-board[b-9nt2grxktv] {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: min(500px, 92vw);
    margin: 20px auto;

    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.87 0 0 0 0 0.75 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
        linear-gradient(170deg, #ede0c8 0%, #e6d5b8 25%, #dcc8a0 50%, #d4bc90 75%, #c9ad80 100%);

    border-radius: 4px;
    padding: 4px;

    box-shadow:
        0 0 80px rgba(255, 150, 50, 0.1),
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 0 3px #5c3d2e,
        0 0 0 6px #3d2820,
        0 0 0 8px #2a1a14,
        inset 0 0 0 1px rgba(255,215,0,0.1);
}

.tavern-board[b-9nt2grxktv]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 2px;
    box-shadow: inset 0 0 60px rgba(80, 50, 20, 0.5), inset 0 0 120px rgba(60, 30, 10, 0.3);
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BOARD CORNERS
   ───────────────────────────────────────────────────────────────── */
.board-corner[b-9nt2grxktv] {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 10;
    background: radial-gradient(circle at 35% 35%, #ffd700 0%, #daa520 30%, #b8860b 60%, #8b6508 100%);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.5);
}

.board-corner[b-9nt2grxktv]::after {
    content: '✦';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5c3d2e;
    text-shadow: 0 1px 0 rgba(255,215,0,0.5);
}

.corner-tl[b-9nt2grxktv] { top: -8px; left: -8px; }
.corner-tr[b-9nt2grxktv] { top: -8px; right: -8px; }
.corner-bl[b-9nt2grxktv] { bottom: -8px; left: -8px; }
.corner-br[b-9nt2grxktv] { bottom: -8px; right: -8px; }

/* ─────────────────────────────────────────────────────────────────
   BOARD CONTENT
   ───────────────────────────────────────────────────────────────── */
.board-content[b-9nt2grxktv] {
    position: relative;
    z-index: 2;
    padding: clamp(24px, 5vw, 40px);
}

/* ─────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────── */
.page-header[b-9nt2grxktv] {
    text-align: center;
    margin-bottom: clamp(20px, 4vh, 32px);
    position: relative;
}

.back-link[b-9nt2grxktv] {
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #8b6508;
    text-decoration: none;
    transition: color 0.2s;
}

.back-link:hover[b-9nt2grxktv] {
    color: #3d2b1f;
}

.page-header h1[b-9nt2grxktv] {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: #2a1a10;
    margin: 0 0 8px 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(222, 200, 160, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.page-subtitle[b-9nt2grxktv] {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: #5c4a3a;
    margin: 0;
    letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   LOADING STATE
   ───────────────────────────────────────────────────────────────── */
.loading-state[b-9nt2grxktv] {
    text-align: center;
    padding: 48px 0;
}

.loading-spinner[b-9nt2grxktv] {
    width: 40px;
    height: 40px;
    border: 4px solid #d4c090;
    border-top-color: #8b6508;
    border-radius: 50%;
    animation: spin-b-9nt2grxktv 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-9nt2grxktv {
    to { transform: rotate(360deg); }
}

.loading-state p[b-9nt2grxktv] {
    font-family: var(--font-body);
    font-style: italic;
    color: #6b5a4a;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   CURRENT FLAG SECTION
   ───────────────────────────────────────────────────────────────── */
.current-flag-section[b-9nt2grxktv] {
    text-align: center;
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(180deg, rgba(255,250,240,0.5) 0%, rgba(240,230,210,0.3) 100%);
    border-radius: 8px;
    border: 2px solid rgba(184, 134, 11, 0.3);
}

.current-flag-section h3[b-9nt2grxktv] {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #5c4a3a;
    margin: 0 0 12px 0;
}

.flag-preview[b-9nt2grxktv] {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.flag-name[b-9nt2grxktv] {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #3d2b1f;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   AUTH FORM
   ───────────────────────────────────────────────────────────────── */
.auth-form[b-9nt2grxktv] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-9nt2grxktv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-9nt2grxktv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #3d2b1f;
}

.label-icon[b-9nt2grxktv] {
    color: #8b6508;
}

.form-group input[b-9nt2grxktv] {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #2a1a10;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(245, 238, 220, 0.9) 100%);
    border: 2px solid #b8860b;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.form-group input:focus[b-9nt2grxktv] {
    border-color: #daa520;
    background: rgba(255, 255, 250, 0.95);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(218, 165, 32, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
}

.form-group input[b-9nt2grxktv]::placeholder {
    color: #a09078;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   SUBMIT BUTTON
   ───────────────────────────────────────────────────────────────── */
.submit-button[b-9nt2grxktv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;

    background: linear-gradient(180deg, #6b9d5f 0%, #4a7c40 30%, #3d6633 70%, #2d5027 100%);
    box-shadow:
        0 6px 20px rgba(45, 80, 39, 0.5),
        0 3px 6px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #2d5027,
        0 0 0 4px rgba(45, 80, 39, 0.3);
}

.submit-button[b-9nt2grxktv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.4s;
}

.submit-button:hover:not(:disabled)[b-9nt2grxktv]::before {
    left: 100%;
}

.submit-button:hover:not(:disabled)[b-9nt2grxktv] {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #7db86f 0%, #5a9450 30%, #4a7c40 70%, #3d6633 100%);
    box-shadow:
        0 10px 30px rgba(45, 80, 39, 0.6),
        0 5px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 0 0 2px #3d6633,
        0 0 0 4px rgba(45, 80, 39, 0.4);
}

.submit-button:disabled[b-9nt2grxktv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-icon[b-9nt2grxktv] {
    font-size: 1.2rem;
}

.button-arrow[b-9nt2grxktv] {
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.submit-button:hover:not(:disabled) .button-arrow[b-9nt2grxktv] {
    transform: translateX(4px);
}

.loading-spinner-small[b-9nt2grxktv] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-9nt2grxktv 1s linear infinite;
}

/* ─────────────────────────────────────────────────────────────────
   ERROR & SUCCESS BANNERS
   ───────────────────────────────────────────────────────────────── */
.error-banner[b-9nt2grxktv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #8b0000;
    background: linear-gradient(180deg, rgba(139, 0, 0, 0.1) 0%, rgba(139, 0, 0, 0.05) 100%);
    border: 1px solid rgba(139, 0, 0, 0.3);
    border-radius: 4px;
    animation: shake-b-9nt2grxktv 0.4s ease;
}

@keyframes shake-b-9nt2grxktv {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.error-icon[b-9nt2grxktv] {
    font-size: 1.1rem;
}

.success-banner[b-9nt2grxktv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #2d5027;
    background: linear-gradient(180deg, rgba(74, 124, 64, 0.15) 0%, rgba(74, 124, 64, 0.08) 100%);
    border: 1px solid rgba(74, 124, 64, 0.3);
    border-radius: 4px;
    animation: fadeIn-b-9nt2grxktv 0.3s ease;
}

@keyframes fadeIn-b-9nt2grxktv {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-icon[b-9nt2grxktv] {
    font-size: 1.1rem;
    color: #4a7c40;
}

/* ─────────────────────────────────────────────────────────────────
   AUTH LINKS
   ───────────────────────────────────────────────────────────────── */
.auth-links[b-9nt2grxktv] {
    text-align: center;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 134, 11, 0.3);
}

.auth-links p[b-9nt2grxktv] {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b5a4a;
    margin: 0 0 8px 0;
}

.login-link[b-9nt2grxktv] {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: #8b6508;
    text-decoration: none;
    transition: color 0.2s;
}

.login-link:hover[b-9nt2grxktv] {
    color: #daa520;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .candle[b-9nt2grxktv],
    .scattered-coins[b-9nt2grxktv] {
        display: none;
    }

    .back-link[b-9nt2grxktv] {
        position: static;
        display: block;
        margin-bottom: 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
.page-header[b-9nt2grxktv] {
    animation: fadeInUp-b-9nt2grxktv 0.6s ease-out;
}

.current-flag-section[b-9nt2grxktv] {
    animation: fadeInUp-b-9nt2grxktv 0.6s ease-out 0.05s backwards;
}

.auth-form[b-9nt2grxktv] {
    animation: fadeInUp-b-9nt2grxktv 0.6s ease-out 0.1s backwards;
}

@keyframes fadeInUp-b-9nt2grxktv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}