/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* /Components/Layout/LobbyLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   LobbyLayout — Travian Classic Theme
   ═══════════════════════════════════════════════════════════════ */

:root[b-rwhh45oifo], [b-rwhh45oifo] :root, .lobby-layout[b-rwhh45oifo] {
    --bg-app: #fdfdfd;
    --bg-card: #FFFFFF;

    --green-main: #3b6b2a;
    --green-hover: #4e7d36;
    --green-dark: #224217;
    --green-light: #E5F3E6;
    --green-nav: #3b6b2a;
    --border-green: #2a4a23;

    --gray-dark: #333333;
    --gray-text: #555555;
    --gray-light: #f0f0f0;
    --gray-border: #cccccc;
    --gray-medium: #a0a0a0;

    --metal-light: #ffffff;
    --metal-mid: #e8e8e8;
    --metal-dark: #cccccc;

    --gold: #D4A843;
    --gold-bg: #FFF8E1;

    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.08);

    --radius-card: 6px;
    --radius-pill: 4px;
    --radius-btn: 4px;
}

.lobby-layout[b-rwhh45oifo] {
    background-color: #ffffff;
    background-image: url('/img/logolooby.png'), radial-gradient(circle at center, #ffffff 60%, #f7f7f7 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: cover, cover;
    color: var(--gray-dark);
    min-height: 100vh;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    direction: rtl;
    padding: 0;
    position: relative;
}

.lobby-layout[b-rwhh45oifo]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    z-index: 0;
    pointer-events: none;
}

.lobby-layout > *[b-rwhh45oifo] {
    position: relative;
    z-index: 1;
}

.lobby-layout *[b-rwhh45oifo], .lobby-layout *[b-rwhh45oifo]::before, .lobby-layout *[b-rwhh45oifo]::after {
    box-sizing: border-box;
}

.lobby-layout h1[b-rwhh45oifo], .lobby-layout h2[b-rwhh45oifo], .lobby-layout h3[b-rwhh45oifo], .lobby-layout p[b-rwhh45oifo] {
    margin: 0;
}

.container[b-rwhh45oifo] {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ─── Classic Travian Header Bar (Metallic) ─── */
.navbar[b-rwhh45oifo] {
    background: linear-gradient(to bottom, #e8e8e8 0%, #c4c4c4 40%, #a6a6a6 50%, #d1d1d1 100%);
    border-bottom: 1px solid #888;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-user[b-rwhh45oifo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 3px;
}

.nav-user:hover[b-rwhh45oifo] {
    background-color: rgba(255, 255, 255, 0.12);
}

.nav-user span[b-rwhh45oifo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-dark);
}

.nav-user i[b-rwhh45oifo] {
    color: #555 !important;
}

.logo-center[b-rwhh45oifo] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gray-dark);
}

.logo-icon[b-rwhh45oifo] {
    
    background-color: var(--green-main);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    border: 1px solid var(--border-green);
}

.logo-text[b-rwhh45oifo] {
    text-align: center;
}

.logo-text h1[b-rwhh45oifo] {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin: 0;
    color: var(--gray-dark);
}

.logo-text p[b-rwhh45oifo] {
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
}

.nav-actions[b-rwhh45oifo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-join[b-rwhh45oifo] {
    background: linear-gradient(to bottom, #6c9e50 0%, #4e7d36 100%);
    color: white;
    border: 1px solid #2a4a1c;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.1s ease;
    font-family: Tahoma, Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.btn-join:hover[b-rwhh45oifo] {
    background: linear-gradient(to bottom, #7aad5e 0%, #5c8b42 100%);
}

.btn-join:active[b-rwhh45oifo] {
    transform: translateY(2px);
    background: linear-gradient(to bottom, #4e7d36 0%, #5c8b42 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.logout-form[b-rwhh45oifo] {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.btn-logout[b-rwhh45oifo] {
    background: linear-gradient(to bottom, #b84040 0%, #8b2222 100%);
    color: white;
    border: 1px solid #5a1a1a;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.1s ease;
    font-family: Tahoma, Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.btn-logout:hover[b-rwhh45oifo] {
    background: linear-gradient(to bottom, #cc4c4c 0%, #a02e2e 100%);
}

.btn-logout:active[b-rwhh45oifo] {
    transform: translateY(2px);
    background: linear-gradient(to bottom, #8b2222 0%, #a02e2e 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.icon-btn[b-rwhh45oifo] {
    background: none;
    border: none;
    color: #666;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s;
}

.icon-btn:hover[b-rwhh45oifo] {
    color: #333;
}

/* ─── Content Area ─── */
.lobby-content[b-rwhh45oifo] {
    max-width: 100%;
    margin: 30px auto;
    padding: 0 40px;
    min-height: 500px;
}

@media (max-width: 768px) {
    .lobby-layout[b-rwhh45oifo] { padding: 0; }
    .logo-center[b-rwhh45oifo] { position: static; transform: none; }
    .btn-join[b-rwhh45oifo] { display: none; }
    .lobby-content[b-rwhh45oifo] { margin-top: 15px; padding: 0 12px; }
    .navbar[b-rwhh45oifo] { height: 50px; }
}

/* ─── Compact selector shell ─────────────────────────────────────────── */
.lobby-layout[b-rwhh45oifo] {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #fbfaf7;
    background-image: url('/img/logolooby.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow-x: hidden;
}

.lobby-layout[b-rwhh45oifo]::before {
    border-radius: inherit;
    background: rgba(255, 255, 255, .82);
}

.container[b-rwhh45oifo] {
    position: relative;
}

.navbar[b-rwhh45oifo] {
    direction: ltr;
    justify-content: flex-start;
    position: absolute;
    top: 20px;
    left: 20px;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.btn-logout[b-rwhh45oifo] {
    width: 136px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid #a52c29;
    border-radius: 7px;
    background: linear-gradient(to bottom, #d34d48, #b8322e);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.15);
    text-shadow: none;
}

.lobby-content[b-rwhh45oifo] {
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 768px) {
    .navbar[b-rwhh45oifo] {
        top: 12px;
        left: 12px;
    }

    .lobby-content[b-rwhh45oifo] {
        margin-top: 0;
        padding: 66px 0 0;
    }

    .btn-logout[b-rwhh45oifo] {
        width: auto;
        min-width: 108px;
        min-height: 38px;
        padding: 7px 11px;
        font-size: 13px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout.razor.css — CSS Grid 3-Column Layout
   ========================================================================== */

.main-layout-root[b-orqvuiw1w8] { display: contents; }

/* --- Main wrapper: Flex layout for 100% width header --- */
.wrapper[b-orqvuiw1w8] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    direction: rtl;
    background-color: var(--bg-page);
    overflow-x: clip;
}

/* --- Artwork header — animated King Tatar scene --- */
[b-orqvuiw1w8] #kingHeader,
[b-orqvuiw1w8] #dynamic_header {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--header-height, 100px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
    user-select: none;
    background-position: center top;
    background-size: cover;
}

[b-orqvuiw1w8] #kingShake {
    position: absolute;
    inset: 0;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-orqvuiw1w8] .king-layer {
    position: absolute;
    inset: -45px;
    will-change: transform;
}

/* Mobile: reduce layer padding so more of the scene is visible in the 100px header.
   Asymmetric (less top, more bottom) shifts the entire scene down to avoid it appearing raised. */
@media (max-width: 600px) {
    [b-orqvuiw1w8] .king-layer {
        inset: -5px -20px -35px -20px;
    }

    /* Nudge logo and sun down on mobile to match the shifted scene */
    [b-orqvuiw1w8] #kingShake {
        padding-top: 18px;
    }

    [b-orqvuiw1w8] .king-sun {
        top: 20%;
    }
}

[b-orqvuiw1w8] .king-layer svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

[b-orqvuiw1w8] #kingLayerBg {
    z-index: 1;
    background: linear-gradient(180deg, #8fd3f4 0%, #b8e6f5 45%, #e8f7e0 100%);
}

[b-orqvuiw1w8] #kingLayerMid { z-index: 2; }
[b-orqvuiw1w8] #kingLayerFg { z-index: 3; }

[b-orqvuiw1w8] #kingFx {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

[b-orqvuiw1w8] .king-war-tint {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.8s ease;
    background: linear-gradient(180deg, rgba(180, 40, 0, .30), rgba(90, 20, 0, .18) 60%, transparent);
}

[b-orqvuiw1w8] #kingHeader.king-war .king-war-tint {
    opacity: 1;
    transition: opacity .9s ease;
}

/* Sun & clouds */
[b-orqvuiw1w8] .king-sun {
    position: absolute;
    top: 9%;
    left: 66%;
    width: 9%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fffbe0 25%, #ffe98a 55%, rgba(255, 233, 138, 0) 72%);
    filter: drop-shadow(0 0 26px rgba(255, 240, 170, .9));
}

[b-orqvuiw1w8] .king-cloud {
    position: absolute;
    height: 8%;
    aspect-ratio: 3.2/1;
    background: #fff;
    border-radius: 100px;
    opacity: .9;
    filter: blur(1px);
}

[b-orqvuiw1w8] .king-cloud::before,
[b-orqvuiw1w8] .king-cloud::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

[b-orqvuiw1w8] .king-cloud::before { width: 45%; height: 130%; top: -60%; left: 15%; }
[b-orqvuiw1w8] .king-cloud::after { width: 38%; height: 105%; top: -40%; left: 48%; }

[b-orqvuiw1w8] .king-c1 { top: 14%; animation: kingDrift-b-orqvuiw1w8 70s linear infinite; }
[b-orqvuiw1w8] .king-c2 { top: 26%; height: 6%; opacity: .7; animation: kingDrift-b-orqvuiw1w8 105s linear infinite; animation-delay: -40s; }
[b-orqvuiw1w8] .king-c3 { top: 7%; height: 5%; opacity: .55; animation: kingDrift-b-orqvuiw1w8 88s linear infinite; animation-delay: -70s; }

@keyframes kingDrift-b-orqvuiw1w8 {
    from { left: -22%; }
    to { left: 112%; }
}

/* Village flag */
[b-orqvuiw1w8] .king-flag {
    position: absolute;
    left: 90%;
    top: 36%;
    width: 5.4%;
    height: 6.5%;
    min-width: 24px;
    min-height: 14px;
    background: linear-gradient(135deg, #d63a2f, #8e0e08);
    clip-path: polygon(0 0, 100% 10%, 86% 50%, 100% 90%, 0 100%);
    transform-origin: left center;
    animation: kingWave-b-orqvuiw1w8 1.7s ease-in-out infinite;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}

@keyframes kingWave-b-orqvuiw1w8 {
    0%, 100% { transform: skewY(4deg) scaleX(1); }
    50% { transform: skewY(-5deg) scaleX(.93); }
}

/* Central logo — centered by flexbox on #kingShake */
[b-orqvuiw1w8] .king-logo {
    position: relative;
    z-index: 6;
}

[b-orqvuiw1w8] .king-logo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: kingFloat-b-orqvuiw1w8 6s ease-in-out infinite;
}

@keyframes kingFloat-b-orqvuiw1w8 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

[b-orqvuiw1w8] .king-crown {
    width: 40px;
    max-width: 60px;
    min-width: 24px;
    margin-bottom: -4px;
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

[b-orqvuiw1w8] .king-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(80px, 12vw, 140px);
    height: clamp(28px, 4vw, 46px);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 30%, #96303f, #5c101f 68%, #38060f);
    border: 2px solid #d9a93c;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 0 10px rgba(0, 0, 0, .65), inset 0 1px 4px rgba(255, 215, 120, .4);
}

[b-orqvuiw1w8] .king-banner::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px double rgba(233, 196, 106, .9);
    pointer-events: none;
}

[b-orqvuiw1w8] .king-title {
    font-family: 'Lalezar', cursive;
    font-size: clamp(13px, 2.2vw, 24px);
    line-height: 1;
    padding-top: .12em;
    background: linear-gradient(180deg, #fff7c4 0%, #ffd75e 38%, #c98a12 62%, #ffe9a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 #5e3c00) drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
}

[b-orqvuiw1w8] #kingHeader.king-war .king-logo-inner {
    animation: kingWarPulse-b-orqvuiw1w8 1s ease-in-out infinite;
}

@keyframes kingWarPulse-b-orqvuiw1w8 {
    0%, 100% { transform: scale(1) translateY(0); filter: none; }
    50% { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 0 14px rgba(255, 180, 50, .95)) brightness(1.3) saturate(1.3); }
}

/* === Logo physics after catapult attack === */
/* When this class is present, JS drives the transform via inline style.
   The class disables the float animation so it doesn't conflict. */
[b-orqvuiw1w8] #kingHeader.king-logo-physics .king-logo-inner {
    animation: none;
    transform-origin: left center;
}

/* --- Resource bar (Flexbox) --- */
[b-orqvuiw1w8] #res {
    width: 100%;
    max-width: 980px;
    align-self: center;
    background-color: transparent;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 15px; /* Offset to lower resources slightly */
    z-index: 3;
    display: flex;
    justify-content: center;
}

[b-orqvuiw1w8] #resWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Spaces restored, slightly further apart */
    flex-wrap: nowrap;
}

[b-orqvuiw1w8] .res-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #5cb85c; /* Lighter green — unfilled track */
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 4px 14px;
    font-size: 14px;
    font-weight: bold;
    min-width: 120px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Progress fill — grows from the right (RTL) proportional to resource/capacity */
    [b-orqvuiw1w8] .res-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--fill, 0%);
        background-color: #208220; /* Darker green — filled portion */
        border-radius: inherit;
        transition: width 1s linear;
        z-index: 0;
    }

/* Keep icon and value text above the fill bar */
[b-orqvuiw1w8] .res-item img,
[b-orqvuiw1w8] .res-item .res_value {
    position: relative;
    z-index: 1;
}

/* Warehouse/granary near-full warning (>= 95% capacity — toggled by gameTicker.js) */
[b-orqvuiw1w8] .res-item.warehouse-full {
    background-color: #b85c5c;
}

    [b-orqvuiw1w8] .res-item.warehouse-full::before {
        background-color: #822020;
    }

[b-orqvuiw1w8] .res_value {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    direction: ltr; /* Keeps numbers reading correctly */
    display: inline-block;
}

/* --- 3-column mid area --- */
[b-orqvuiw1w8] #mid {
    width: 100%;
    max-width: 980px;
    align-self: center;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--village-panel);
    grid-template-rows: 1fr;
    grid-template-areas:
        "sidebar content villages";
    min-height: 450px;
}

/* --- Side navigation (left/right sidebar) --- */
[b-orqvuiw1w8] #side_navi {
    grid-area: sidebar;
    background-color: transparent;
    padding: 5px 10px; /* Tighter padding */
    border: none;
}

/* --- Center content --- */
[b-orqvuiw1w8] #content {
    grid-area: content;
    padding: 15px 15px; /* Adjust padding for center block */
    min-height: 450px;
    overflow: visible;
    background-color: #FFFFFF; /* Pure white center like original */
    /* Only left and right shadows by using horizontal offset and strict negative spread */
    box-shadow: 7px 0 5px -5px rgba(0,0,0,0.2), -7px 0 5px -5px rgba(0,0,0,0.2); 
    border-radius: 0; /* Remove rounded corners to match original */
    min-width: 0;
    max-width: 100%;
}

/* --- Village panel (right/left sidebar) --- */
[b-orqvuiw1w8] #side_info {
    grid-area: villages;
    padding: 5px 10px; /* Tighter padding */
    border: none;
    background-color: transparent;
    font-size: 11px;
}

[b-orqvuiw1w8] #vlist {
    width: 100%;
}

[b-orqvuiw1w8] .vlist-header {
    padding: 4px 0;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

[b-orqvuiw1w8] .vlist-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 2px;
    flex-wrap: nowrap; /* Keep on one line */
    white-space: nowrap; /* Prevent text wrapping */
}

[b-orqvuiw1w8] .vlist-row:hover {
    background-color: transparent;
}

[b-orqvuiw1w8] .vlist-row.hl .vlist-link {
    color: #FF8F00; /* Active village orange text */
}

[b-orqvuiw1w8] .vlist-row.hl .dot {
    color: #FF8F00 !important;
}

[b-orqvuiw1w8] .vlist-row.hl {
    background-color: transparent;
}

[b-orqvuiw1w8] .vlist-row .dot {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    color: #888;
}

[b-orqvuiw1w8] .vlist-link {
    color: #333; /* Dark text for non-active */
    font-weight: bold;
    font-size: 12px;
}

[b-orqvuiw1w8] .vlist-link:hover {
    color: #FF8F00;
}

[b-orqvuiw1w8] .capital-badge {
    color: #999;
    font-size: 9px;
}

[b-orqvuiw1w8] .coords {
    color: var(--text-secondary);
    font-size: 9px;
    margin-inline-start: auto;
    white-space: nowrap;
}

/* --- Footer --- */
[b-orqvuiw1w8] #footer {
    width: 100%;
    margin-top: 20px;
    background-color: var(--bg-footer);
    color: var(--text-light);
    text-align: center;
    padding: 12px 10px;
}

[b-orqvuiw1w8] #mfoot {
    font-size: 10px;
    line-height: 1.6;
}

[b-orqvuiw1w8] .copyright {
    opacity: 0.8;
}

[b-orqvuiw1w8] .mobile-pull-indicator {
    display: none;
}

/* --- Responsive (tablet 481–900px): NavMenu becomes top strip --- */
@media (max-width: 900px) {
    [b-orqvuiw1w8] #mid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "sidebar"
            "content";
        min-height: auto;
    }

    [b-orqvuiw1w8] #side_info {
        display: none;
    }

    [b-orqvuiw1w8] #content {
        padding: 10px;
        min-width: 0;
        max-width: 100%;
    }
}

/* --- Responsive (phone ≤600px): compact resource bar --- */
@media (max-width: 600px) {
    [b-orqvuiw1w8] .mobile-pull-indicator {
        position: sticky;
        top: 74px;
        z-index: 645;
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: fit-content;
        margin: 0 auto 6px;
        padding: 6px 12px;
        border: 1px solid #bbb;
        border-radius: 999px;
        background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        color: #333;
        font-size: 11px;
        font-weight: 700;
        transform: translateY(calc(-14px + var(--pull-offset, 0px)));
        opacity: 0;
        transition: transform 0.18s ease, opacity 0.18s ease;
        pointer-events: none;
    }

    [b-orqvuiw1w8] .mobile-pull-indicator.visible {
        display: inline-flex;
        opacity: 1;
    }

    [b-orqvuiw1w8] .mobile-pull-indicator.ready .mobile-pull-icon,
    [b-orqvuiw1w8] .mobile-pull-indicator.loading .mobile-pull-icon {
        color: #ff8f00;
    }

    [b-orqvuiw1w8] .mobile-pull-indicator.ready .mobile-pull-icon {
        transform: rotate(180deg);
    }

    [b-orqvuiw1w8] .mobile-pull-indicator.loading .mobile-pull-icon {
        animation: mobile-pull-spin-b-orqvuiw1w8 0.85s linear infinite;
    }

    [b-orqvuiw1w8] .mobile-pull-indicator.complete .mobile-pull-icon {
        color: #2d7d2d;
    }

    [b-orqvuiw1w8] #res,
    [b-orqvuiw1w8] #footer {
        display: none;
    }

    [b-orqvuiw1w8] #dynamic_header {
        margin-top: 10px;
    }

    [b-orqvuiw1w8] .wrapper {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    [b-orqvuiw1w8] .wrapper.mobile-nav-top {
        padding-top: 0;
        padding-bottom: 0;
    }

    [b-orqvuiw1w8] .wrapper.mobile-nav-bottom {
        padding-top: 0;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    [b-orqvuiw1w8] .wrapper.mobile-nav-top .mobile-pull-indicator {
        top: calc(153px + env(safe-area-inset-top, 0px));
    }

    [b-orqvuiw1w8] #mid {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
        min-height: auto;
    }

    [b-orqvuiw1w8] #res {
        margin-top: 6px;
        margin-bottom: 2px;
    }

    [b-orqvuiw1w8] #resWrap {
        gap: 4px;
        padding: 0 4px;
        width: 100%;
    }

    [b-orqvuiw1w8] .res-item {
        min-width: unset;
        flex: 1;
        padding: 3px 6px;
        font-size: 12px;
        gap: 3px;
        white-space: nowrap;
    }

    [b-orqvuiw1w8] .res_value {
        font-size: 14px;
    }

    [b-orqvuiw1w8] #content {
        padding: 8px;
        box-shadow: none;
        background: #fff;
        min-height: calc(100vh - 160px);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    [b-orqvuiw1w8] .wrapper.mobile-nav-bottom #content {
        padding-bottom: 84px;
    }

    [b-orqvuiw1w8] .wrapper.mobile-nav-top #content {
        padding-bottom: 8px;
    }

    @keyframes mobile-pull-spin-b-orqvuiw1w8 {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }
}

/* --- Responsive (phone ≤480px): NavMenu becomes fixed hamburger drawer, minimal padding --- */
@media (max-width: 480px) {
    [b-orqvuiw1w8] .wrapper {
        padding-top: 0;
    }

    [b-orqvuiw1w8] #mid {
        grid-template-areas: "content";
    }

    [b-orqvuiw1w8] #content {
        padding: 6px 8px;
        box-shadow: none;
        padding-bottom: 84px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    [b-orqvuiw1w8] .res-item {
        padding: 2px 4px;
        font-size: 10px;
        gap: 2px;
    }

    [b-orqvuiw1w8] #resWrap {
        gap: 2px;
    }

    [b-orqvuiw1w8] .res_value {
        font-size: 10px;
    }
}

/* --- Maintenance Page --- */
.maintenance-page[b-orqvuiw1w8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
    text-align: center;
}

.maintenance-content[b-orqvuiw1w8] {
    background: #fff;
    border: 1px solid #d4b67b;
    border-radius: 4px;
    padding: 40px 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.maintenance-content h1[b-orqvuiw1w8] {
    color: #5b3c11;
    margin-bottom: 12px;
    font-size: 1.5em;
}

.maintenance-content p[b-orqvuiw1w8] {
    color: #333;
    font-size: 1em;
}

/* --- Game-Won Shield Overlay (animated golden shield) --- */
.shield-overlay[b-orqvuiw1w8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.shield-popup[b-orqvuiw1w8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 28px 20px;
    direction: rtl;
}

.shield-close[b-orqvuiw1w8] {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 215, 120, .35);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    color: #ffd34d;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s, color .2s;
}

    .shield-close:hover[b-orqvuiw1w8] {
        background: rgba(255, 80, 80, .25);
        color: #fff;
    }

.shield-container[b-orqvuiw1w8] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shield-title[b-orqvuiw1w8] {
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: clamp(15px, 2.5vw, 20px);
    font-weight: 700;
    color: #ffe9a8;
    text-shadow: 0 2px 12px rgba(255, 200, 80, .3);
    margin: 0;
    text-align: center;
    letter-spacing: .5px;
}

.shield-winner-btn[b-orqvuiw1w8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 14px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Segoe UI", Tahoma, sans-serif;
    color: #4a2f04;
    cursor: pointer;
    background: linear-gradient(180deg, #ffe27a, #f0ac17 60%, #c9840c);
    box-shadow: 0 4px 0 #8a5c0d, 0 10px 22px rgba(0, 0, 0, .4);
    transition: transform .15s, box-shadow .15s;
}

    .shield-winner-btn:hover[b-orqvuiw1w8] {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #8a5c0d, 0 14px 28px rgba(0, 0, 0, .45);
    }

    .shield-winner-btn:active[b-orqvuiw1w8] {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #8a5c0d, 0 6px 14px rgba(0, 0, 0, .4);
    }

.shield-winner-icon[b-orqvuiw1w8] {
    font-size: 20px;
}

/* ─── Persistent Game-Won Banner ─── */
.game-won-banner[b-orqvuiw1w8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 16px;
    background: linear-gradient(to bottom, #fff3cd 0%, #ffe69c 100%);
    border-bottom: 2px solid #d4a017;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #856404;
    direction: rtl;
}

.game-won-banner-link[b-orqvuiw1w8] {
    color: #2A7A38;
    text-decoration: underline;
    font-weight: bold;
}

    .game-won-banner-link:hover[b-orqvuiw1w8] {
        color: #1F6B2C;
    }

/* ─── Sitter Banner ─── */
.sitter-banner[b-orqvuiw1w8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: linear-gradient(to bottom, #fff8e1, #ffecb3);
    border-bottom: 1px solid #d4a843;
    font-size: 11px;
    font-weight: bold;
    color: #7a5c00;
    direction: rtl;
}

.sitter-banner i[b-orqvuiw1w8] {
    font-size: 13px;
    color: #c4960e;
}

.sitter-exit-link[b-orqvuiw1w8] {
    margin-right: auto;
    margin-left: 0;
    color: #3b6b2a;
    text-decoration: underline;
    font-size: 11px;
    cursor: pointer;
}

.destroyed-banner[b-orqvuiw1w8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(to bottom, #ffd7c0, #f7b08a);
    border-bottom: 1px solid #b04522;
    font-size: 12px;
    color: #7a1b00;
    font-weight: bold;
    direction: rtl;
}

.destroyed-banner i[b-orqvuiw1w8] {
    font-size: 14px;
    color: #b04522;
}

.scattered-banner[b-orqvuiw1w8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(to bottom, #cce8f5, #7ec8e3);
    border-bottom: 1px solid #3b7a9a;
    font-size: 12px;
    color: #07395a;
    font-weight: bold;
    direction: rtl;
}

.scattered-banner i[b-orqvuiw1w8] {
    font-size: 14px;
    color: #3b7a9a;
}

/* ─── Village Quick-Action Icons (side_info) ─── */

.vil-actions[b-orqvuiw1w8] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 4px;
}

.vil-actions a[b-orqvuiw1w8] {
    display: inline-block;
}

.vil-action-icon[b-orqvuiw1w8] {
    width: 19px;
    height: 17px;
    vertical-align: middle;
}

.vil-action-trade[b-orqvuiw1w8] {
    margin-left: 5px;
    background-image: url('/img/gpack/img/a/report_icons.gif');
    background-position: 0 -653px;
    background-repeat: no-repeat;
}

.vil-action-attack[b-orqvuiw1w8] {
    margin-left: 2px;
}

.vil-attack-count[b-orqvuiw1w8] {
    color: #fff;
    background: #c00;
    font-size: 10px;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 7px;
    padding: 0 3px;
    margin-right: 2px;
    vertical-align: middle;
    display: inline-block;
}
/* /Components/Layout/MobileAttackAlert.razor.rz.scp.css */
.mobile-attack-alert[b-gmkzpcmb52] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-attack-alert[b-gmkzpcmb52] {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 6px 10px 0;
        padding: 8px 10px;
        border-radius: 10px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
        position: sticky;
        top: 74px;
        z-index: 650;
    }

    .alert-attack[b-gmkzpcmb52] {
        background: linear-gradient(to left, #cc0000, #8b0000);
    }

    .alert-reinforcement[b-gmkzpcmb52] {
        background: linear-gradient(to left, #3a8a3a, #1f6a1f);
    }

    .alert-trade[b-gmkzpcmb52] {
        background: linear-gradient(to left, #2f7db3, #15537b);
    }

    .mobile-attack-icon[b-gmkzpcmb52] {
        font-size: 16px;
        flex-shrink: 0;
    }

    .mobile-attack-text[b-gmkzpcmb52] {
        flex: 1;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-attack-timer[b-gmkzpcmb52] {
        direction: ltr;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
    }
}
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
.mbnav-root[b-55tgaqicmw] { display: contents; }
.mobile-bottom-nav[b-55tgaqicmw] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-bottom-nav[b-55tgaqicmw] {
        display: flex;
        inset-inline: 0;
        height: 48px;
        background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
        z-index: 800;
        direction: rtl;
    }

    .mobile-bottom-nav.bottom[b-55tgaqicmw] {
        position: fixed;
        bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 2px solid #999;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    }

    .mobile-bottom-nav.top[b-55tgaqicmw] {
        position: sticky;
        top: 0;
        margin-bottom: 7px;
        flex-shrink: 0;
        padding-top: env(safe-area-inset-top, 0px);
        border-bottom: 2px solid #999;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        /* Center items close together like the desktop TopBar */
        justify-content: center;
        gap: 0;
    }

    .mobile-bottom-nav.top[b-55tgaqicmw]::before {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: -7px;
        height: 7px;
        background: var(--bg-page, #f4efe5);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .bnav-item[b-55tgaqicmw] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #333;
        text-decoration: none;
        font-size: 17px;
        /* font-weight: 100; */
        padding: 4px 0;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.15s ease;
        font-weight: bold;
    }

    /* Top variant: fixed-width items centered close together (like desktop TopBar) */
    .mobile-bottom-nav.top .bnav-item[b-55tgaqicmw] {
        flex: 0 0 auto;
        width: 60px;
        height: 48px;
        padding: 0;
    }

    .bnav-item:active[b-55tgaqicmw] {
        transform: scale(0.96);
    }

    .bnav-item.active[b-55tgaqicmw] {
        color: #ff8f00;
    }

    .bnav-item.active[b-55tgaqicmw]::after {
        content: '';
        position: absolute;
        inset-inline: 20%;
        height: 2px;
        background: #ff8f00;
        border-radius: 1px;
    }

    .mobile-bottom-nav.bottom .bnav-item.active[b-55tgaqicmw]::after {
        bottom: 0;
    }

    .mobile-bottom-nav.top .bnav-item.active[b-55tgaqicmw]::after {
        top: 0;
    }

    .bnav-icon[b-55tgaqicmw] {
        width: 53px;
        height: 50px;

        object-fit: cover;

    }

    /* Top variant: icons fill the fixed-width item so items sit flush next to each other */
    .mobile-bottom-nav.top .bnav-icon[b-55tgaqicmw] {
        width: 60px;
        height: 54px;
        filter: grayscale(100%);
        opacity: 0.8;
        transition: filter 0.3s ease, opacity 0.3s ease;
    }

    /* Top variant: active item icon is colored (like desktop TopBar) */
    .mobile-bottom-nav.top .bnav-item.active .bnav-icon[b-55tgaqicmw] {
        filter: grayscale(0%);
        opacity: 1;
    }

    .bnav-icon-plain[b-55tgaqicmw] {
       
        padding: 3px;
        
    }

    .bnav-item.active .bnav-icon[b-55tgaqicmw] {
      
    }

    .bnav-badge[b-55tgaqicmw] {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 6px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        border-radius: 50%;
        background: #d90000;
        color: #fff;
        font-size: 8px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .bnav-dots[b-55tgaqicmw] {
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
    }

    /* ── Village selector indicator ── */
    .bnav-village[b-55tgaqicmw] {
        position: relative;
    }

    .bnav-chevron[b-55tgaqicmw] {
        position: absolute;
        top: 1px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 8px;
        color: #888;
        line-height: 1;
        transition: transform 0.25s ease, color 0.2s ease;
        animation: bnav-chevron-bounce-b-55tgaqicmw 2.4s ease-in-out infinite;
    }

    .bnav-chevron.open[b-55tgaqicmw] {
        transform: translateX(-50%) rotate(180deg);
        color: #ff8f00;
        animation: none;
    }

    .bnav-village.active .bnav-chevron[b-55tgaqicmw] {
        color: #ff8f00;
    }

    @keyframes bnav-chevron-bounce-b-55tgaqicmw {
        0%, 100% { top: 1px; }
        50%      { top: -2px; }
    }

    /* Village count badge */
    .bnav-village-count[b-55tgaqicmw] {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 6px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        border-radius: 50%;
        background: #ff8f00;
        color: #fff;
        font-size: 8px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    /* ── Messages / Reports (inbox) button ── */
    .bnav-inbox[b-55tgaqicmw] {
        position: relative;
    }

    .bnav-inbox-half[b-55tgaqicmw] {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        display: block;
        z-index: 10;
        text-decoration: none;
    }

    .bnav-inbox-right[b-55tgaqicmw] {
        right: 0;
    }

    .bnav-inbox-left[b-55tgaqicmw] {
        left: 0;
    }
}
/* /Components/Layout/MobileHeader.razor.rz.scp.css */
.mobile-header-shell[b-e0u85329dr] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-header-shell[b-e0u85329dr] {
        display: block;
        position: sticky;
        top: 0;
        z-index: 700;
        padding: 4px 6px;
      /*  background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
        border-bottom: 2px solid #999;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
        /*color: #333;*/
        direction: rtl;
        min-height: 34px;
        overflow: visible;
    }

    .mobile-hero-link[b-e0u85329dr] {
        width: 45px;
        height: 45px;
        position: absolute;
        top: calc(100% - -8px);
        right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 50%;
        border: 2px solid #999;
        background: linear-gradient(to bottom, #ffffff, #dadada);
        
        text-decoration: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        z-index: 3;
    }

    .mobile-hero-avatar[b-e0u85329dr] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-hero-level[b-e0u85329dr] {
        position: absolute;
        bottom: -2px;
        left: -4px;
        padding: 1px 5px;
        border-radius: 999px;
        background: #ffb400;
        color: #3b2a1b;
        font-size: 9px;
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .mobile-hero-points[b-e0u85329dr] {
        position: absolute;
        top: -4px;
        left: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #d90000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .mobile-hero-fallback[b-e0u85329dr] {
        font-size: 18px;
    }

    .hero-danger[b-e0u85329dr] {
        border-color: #ff5d5d;
        box-shadow: 0 0 0 2px rgba(255, 93, 93, 0.35);
    }

    .mobile-header-resources[b-e0u85329dr] {
        display: grid;
        /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
        gap: 3px;
        width: 100%;
        overflow: visible;
        scrollbar-width: none;
        grid-auto-flow: column;
    }

    .mobile-header-resources[b-e0u85329dr]::-webkit-scrollbar {
        display: none;
    }

    .mobile-resource-chip[b-e0u85329dr],
    .mobile-gold-chip[b-e0u85329dr] {
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-width: 0;
        padding: 3px 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid #b7b7b7;
        color: #333;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        isolation: isolate;
    }

    .mobile-resource-chip[b-e0u85329dr]::before {
        content: '';
        position: absolute;
        inset: 0;
        width: var(--fill, 0%);
        background: linear-gradient(to left, #208220, #2f9a2f);
        border-radius: inherit;
        z-index: -1;
        transition: width 0.3s ease;
    }

    .mobile-resource-chip.resource-full[b-e0u85329dr]::before {
        background: linear-gradient(to left, #822020, #b53a3a);
    }

    .mobile-resource-chip img[b-e0u85329dr],
    .mobile-resource-chip span[b-e0u85329dr],
    .mobile-gold-chip img[b-e0u85329dr],
    .mobile-gold-chip span[b-e0u85329dr] {
        position: relative;
        z-index: 1;
    }

    .mobile-resource-chip[b-e0u85329dr] {
        background: #5cb85c;
        border-color: #3c8a3c;
        color: #fff;
    }

    .mobile-resource-chip.resource-full[b-e0u85329dr] {
        background: #b85c5c;
        border-color: #9a3f3f;
    }

    .mobile-gold-chip[b-e0u85329dr] {
        text-decoration: none;
        background: linear-gradient(to bottom, #FFC000, #E39600);
        border-color: #D88900;
        color: #fff;
    }

    .mobile-gold-chip img[b-e0u85329dr] {
        width: 12px;
        height: 12px;
    }
}
/* /Components/Layout/MobileMoreSheet.razor.rz.scp.css */
.mobile-more-backdrop[b-rf1pl4kqo8] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-more-backdrop[b-rf1pl4kqo8] {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
        z-index: 850;
    }

    .mobile-more-sheet[b-rf1pl4kqo8] {
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        padding: 10px 14px calc(76px + env(safe-area-inset-bottom, 0px));
        background: #ffffffe0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
        direction: rtl;
        animation: mobile-more-slide-b-rf1pl4kqo8 0.22s ease-out;
    }

    .mobile-more-handle[b-rf1pl4kqo8] {
        width: 48px;
        height: 5px;
        background: #b7b7b7;
        border-radius: 999px;
        margin: 0 auto 10px;
    }

    .mobile-more-header[b-rf1pl4kqo8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .mobile-more-close[b-rf1pl4kqo8] {
        width: 34px;
        height: 34px;
        border: 1px solid #999;
        border-radius: 50%;
        background: linear-gradient(to bottom, #ffffff, #ececec);
        color: #333;
        font-size: 16px;
        cursor: pointer;
    }

    .mobile-more-grid[b-rf1pl4kqo8] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .mobile-more-settings[b-rf1pl4kqo8] {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid #d6d6d6;
    }

    .mobile-more-settings-title[b-rf1pl4kqo8] {
        margin-bottom: 8px;
        color: #333;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-more-position-toggle[b-rf1pl4kqo8] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-more-position-option[b-rf1pl4kqo8] {
        min-height: 42px;
        border: 1px solid #cfcfcf;
        border-radius: 999px;
        background: linear-gradient(to bottom, #ffffff, #ececec);
        color: #333;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-more-position-option.active[b-rf1pl4kqo8] {
        border-color: #ffb340;
        background: linear-gradient(to bottom, #fff4dc, #ffd27d);
        color: #7b4a00;
        box-shadow: inset 0 0 0 1px rgba(255, 143, 0, 0.25);
    }

    .mobile-more-link[b-rf1pl4kqo8] {
        min-height: 56px;
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #d6d6d6;
        color: #333;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .mobile-more-link img[b-rf1pl4kqo8] {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .mobile-more-building-icon[b-rf1pl4kqo8] {
        width: 24px !important;
        height: 24px !important;
        display: inline-block;
        flex-shrink: 0;
        border-radius: 0 !important;
        object-fit: contain !important;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .mobile-more-small-icon[b-rf1pl4kqo8] {
        border-radius: 0 !important;
        object-fit: contain !important;
    }

    .mobile-more-menu-icon[b-rf1pl4kqo8] {
        width: 26px !important;
        height: 26px !important;
        border-radius: 0 !important;
        object-fit: contain !important;
        background: transparent !important;
    }

    .mobile-more-emoji[b-rf1pl4kqo8] {
        width: 24px;
        text-align: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .mobile-more-badge[b-rf1pl4kqo8] {
        position: absolute;
        top: 6px;
        left: 8px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #d90000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    .mobile-more-villages[b-rf1pl4kqo8] {
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid #d6d6d6;
    }

    .mobile-more-villages-title[b-rf1pl4kqo8] {
        color: #333;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .mobile-more-villages-list[b-rf1pl4kqo8] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-more-village[b-rf1pl4kqo8] {
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #d6d6d6;
        color: #333;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
    }

    .mobile-more-village.active[b-rf1pl4kqo8] {
        background: #f7f7f7;
        color: #ff8f00;
        border-color: #bbb;
    }

    @keyframes mobile-more-slide-b-rf1pl4kqo8 {
        from {
            transform: translateY(18px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}
/* /Components/Layout/MobileVillageSheet.razor.rz.scp.css */
.mobile-village-backdrop[b-u2dj2cg1kr] {
    display: none;
}

@media (max-width: 600px) {
    .mobile-village-backdrop[b-u2dj2cg1kr] {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: rgba(0, 0, 0, 0.45);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 845;
    }

    .mobile-village-sheet[b-u2dj2cg1kr] {
        width: 100%;
        max-height: 62vh;
        overflow-y: auto;
        padding: 10px 14px calc(76px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28);
        direction: rtl;
    }

    .mobile-village-handle[b-u2dj2cg1kr] {
        width: 48px;
        height: 5px;
        background: #b7b7b7;
        border-radius: 999px;
        margin: 0 auto 10px;
    }

    .mobile-village-header[b-u2dj2cg1kr] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .mobile-village-close[b-u2dj2cg1kr] {
        width: 34px;
        height: 34px;
        border: 1px solid #999;
        border-radius: 50%;
        background: linear-gradient(to bottom, #ffffff, #ececec);
        color: #333;
        font-size: 16px;
        cursor: pointer;
    }

    .mobile-village-list[b-u2dj2cg1kr] {
        display: grid;
        gap: 10px;
    }

    .mobile-village-card[b-u2dj2cg1kr] {
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #d6d6d6;
        color: #333;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .mobile-village-main[b-u2dj2cg1kr] {
        display: grid;
        grid-template-columns: 32px 1fr auto;
        align-items: center;
        gap: 8px;
        color: inherit;
        text-decoration: none;
    }

    .mobile-village-card.active[b-u2dj2cg1kr] {
        border-color: #ffcf76;
        background: #fff8ec;
        color: #ff8f00;
    }

    .mobile-village-card-icon[b-u2dj2cg1kr] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #999;
    }

    .mobile-village-card-name[b-u2dj2cg1kr] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-village-card-capital[b-u2dj2cg1kr] {
        color: #8b6c32;
        font-size: 10px;
        white-space: nowrap;
    }

    .mobile-village-card-coords[b-u2dj2cg1kr] {
        grid-column: 2 / 4;
        color: #666;
        font-size: 11px;
        justify-self: start;
    }

    .mobile-village-actions[b-u2dj2cg1kr] {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 9px;
        padding-top: 8px;
        border-top: 1px solid #ececec;
    }

    .mobile-village-action[b-u2dj2cg1kr] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        min-height: 30px;
        padding: 4px 9px;
        border: 1px solid #cfcfcf;
        border-radius: 999px;
        background: linear-gradient(to bottom, #ffffff, #eeeeee);
        color: #333;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-village-action-icon[b-u2dj2cg1kr] {
        width: 19px;
        height: 17px;
        vertical-align: middle;
    }

    .mobile-village-action-trade[b-u2dj2cg1kr] {
        background-image: url('/img/gpack/img/a/report_icons.gif');
        background-position: 0 -653px;
        background-repeat: no-repeat;
    }

    .mobile-village-attack-icon[b-u2dj2cg1kr] {
        width: 18px;
        height: 14px;
        vertical-align: middle;
        flex-shrink: 0;
        justify-self: end;
    }

    .mobile-village-attack-count[b-u2dj2cg1kr] {
        color: #fff;
        background: #c00;
        font-size: 10px;
        font-weight: bold;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        border-radius: 8px;
        padding: 0 3px;
        margin-left: 1px;
        flex-shrink: 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu.razor.css — Sidebar Navigation (RTL)
   ========================================================================== */

#side_navi[b-wno7pj0ruv] {
    direction: rtl;
    font-size: 12px;
    display: flex;
    flex-direction: column;
}

/* --- Mobile top bar — hidden on desktop/tablet --- */
.mobile-top-bar[b-wno7pj0ruv] {
    display: none;
}

/* --- Hamburger trigger (inside mobile-top-bar on mobile) --- */
.nav-hamburger[b-wno7pj0ruv] {
    display: none;
    width: 30px;
    height: 28px;
    background: linear-gradient(to bottom, #e8e8e8, #c8c8c8);
    border: 1px solid #999;
    border-radius: 6px;
    color: #333;
    font-size: 15px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* --- Close button inside drawer --- */
.drawer-close[b-wno7pj0ruv] {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
    padding: 0;
    line-height: 1;
    margin-bottom: 10px;
}

/* --- Logo --- */
#logo[b-wno7pj0ruv] {
    display: block;
    text-align: center;
    margin-bottom: 16px;
}

#logo img[b-wno7pj0ruv] {
    max-width: 120px;
    height: auto;
}

/* --- Navigation lists --- */
.nav-primary[b-wno7pj0ruv],
.nav-secondary[b-wno7pj0ruv] {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    text-align: start; /* RTL: start = right */
}

.nav-primary li[b-wno7pj0ruv],
.nav-secondary li[b-wno7pj0ruv] {
    margin: 0;
}

.nav-primary a[b-wno7pj0ruv],
.nav-secondary a[b-wno7pj0ruv] {
    display: block;
    padding: 4px 10px;
    color: #333333; /* Dark gray */
    text-decoration: none;
    line-height: 20px;
    font-size: 13px;
    font-weight: normal;
    transition: background-color 0.15s;
}

.nav-primary a:hover[b-wno7pj0ruv],
.nav-secondary a:hover[b-wno7pj0ruv] {
    color: #FF8F00; /* Classic orange highlight on hover */
    text-decoration: underline;
}

/* --- Gold link --- */
.gold-link[b-wno7pj0ruv] {
    color: #FF8F00 !important; /* Orange */
    font-weight: bold !important;
}

.support-link[b-wno7pj0ruv] {
    color: #0000FF !important; /* Blue */
    font-weight: bold !important;
}

/* --- Chat badge --- */
.chat-badge[b-wno7pj0ruv] {
    display: inline-block;
    background-color: #CC0000;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 8px;
    margin-inline-start: 4px;
    min-width: 16px;
    text-align: center;
    line-height: 16px;
    vertical-align: middle;
}

/* --- Add shortcut --- */
.add-shortcut[b-wno7pj0ruv] {
    padding: 6px 10px;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    margin-top: 10px;
    text-align: start;
}

.add-shortcut:hover[b-wno7pj0ruv] {
    color: #FF8F00;
    text-decoration: underline;
}

.plus-icon[b-wno7pj0ruv] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    background-color: #8BC34A; /* Light green */
    border: 1px solid #689F38;
    color: #fff;
    border-radius: 50%; /* Circle icon */
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    margin-inline-end: 4px;
}

/* --- Beginner Protection Box (matches Rally Point / BuildingDetail style) --- */
.beginner-protection-box[b-wno7pj0ruv] {
  
    border: 1px solid #f0c040;
    border-radius: 4px;
    font-size: 11px;
    direction: rtl;
}

[b-wno7pj0ruv] .beginner-protection-box .protection-icon {
    font-size: 14px;
    flex-shrink: 0;
}

[b-wno7pj0ruv] .beginner-protection-box .protection-text {
    flex: 1;
    color: #5a4e00;
    font-weight: 600;
    line-height: 1.5;
}

[b-wno7pj0ruv] .beginner-protection-box .protection-text .countdown {
    direction: ltr;
    display: inline-block;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.cancel-protection-btn[b-wno7pj0ruv] {
    padding: 2px 8px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.cancel-protection-btn:hover[b-wno7pj0ruv] {
    background: #a93226;
}

/* --- Protection cancel confirmation overlay --- */
.protection-confirm-overlay[b-wno7pj0ruv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.protection-confirm-dialog[b-wno7pj0ruv] {
    background: #fff;
    border: 2px solid #e53e3e;
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    direction: rtl;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.protection-confirm-header[b-wno7pj0ruv] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c53030;
    margin-bottom: 10px;
}

.protection-confirm-text[b-wno7pj0ruv] {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.7;
    margin: 0 0 16px;
}

.protection-confirm-actions[b-wno7pj0ruv] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.protection-confirm-yes[b-wno7pj0ruv] {
    background: #e53e3e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.protection-confirm-yes:hover[b-wno7pj0ruv] {
    background: #c53030;
}

.protection-confirm-yes:disabled[b-wno7pj0ruv] {
    opacity: 0.6;
    cursor: not-allowed;
}

.protection-confirm-no[b-wno7pj0ruv] {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.protection-confirm-no:hover[b-wno7pj0ruv] {
    background: #e0e0e0;
}

/* ==========================================================================
   Responsive: Horizontal strip (481–900px)
   ========================================================================== */
@media (max-width: 900px) {
    #side_navi[b-wno7pj0ruv] {
        padding: 3px 8px;
        background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
        border-bottom: 1px solid #bbb;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    .nav-primary[b-wno7pj0ruv],
    .nav-secondary[b-wno7pj0ruv] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .nav-primary li[b-wno7pj0ruv],
    .nav-secondary li[b-wno7pj0ruv] {
        display: inline;
    }

    .nav-primary a[b-wno7pj0ruv],
    .nav-secondary a[b-wno7pj0ruv] {
        display: inline-block;
        padding: 3px 7px;
        font-size: 12px;
        line-height: 22px;
        border-inline-end: 1px solid #ccc;
    }

    .add-shortcut[b-wno7pj0ruv] {
        display: none;
    }

    .beginner-protection-box[b-wno7pj0ruv] {
        margin-top: 0;
        font-size: 10px;
        padding: 4px 8px;
        border-radius: 0;
        border: none;
        border-top: 1px solid #f0c040;
        border-bottom: 1px solid #f0c040;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .mobile-top-bar[b-wno7pj0ruv] {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
        border-bottom: 2px solid #999;
        height: 38px;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        direction: rtl;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .nav-hamburger[b-wno7pj0ruv] {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-links[b-wno7pj0ruv] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-villages-dropdown[b-wno7pj0ruv] {
        position: relative;
    }

    .mobile-nav-links a[b-wno7pj0ruv],
    .mobile-villages-btn[b-wno7pj0ruv] {
        color: #333;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .mobile-villages-btn[b-wno7pj0ruv] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .mobile-nav-links a:hover[b-wno7pj0ruv],
    .mobile-villages-btn:hover[b-wno7pj0ruv] {
        color: #FF8F00;
    }

    .mobile-villages-btn-attack-icon[b-wno7pj0ruv] {
        width: 18px;
        height: 14px;
        vertical-align: middle;
        margin-right: 2px;
        flex-shrink: 0;
    }

    .mobile-villages-btn-attack-count[b-wno7pj0ruv] {
        color: #fff;
        background: #c00;
        font-size: 10px;
        font-weight: bold;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        border-radius: 8px;
        padding: 0 3px;
        margin-left: 1px;
        flex-shrink: 0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }

    .mobile-village-badge[b-wno7pj0ruv] {
        margin-right: 2px;
        color: #FF8F00;
        font-size: 9px;
    }

    .villages-dropdown-panel[b-wno7pj0ruv] {
        position: fixed;
        top: 40px;
        right: 8px;
        left: 8px;
        max-height: min(60vh, 420px);
        overflow-y: auto;
        display: grid;
        gap: 8px;
        padding: 10px;
        background: #fff;
        border: 1px solid #bdbdbd;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
        direction: rtl;
        z-index: 1002;
    }

    .villages-dropdown-item[b-wno7pj0ruv] {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fafafa;
    }

    .villages-dropdown-item.active[b-wno7pj0ruv] {
        border-color: #ffcf76;
        background: #fff8ec;
    }

    .villages-dropdown-main[b-wno7pj0ruv] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2px 6px;
        min-width: 0;
        color: #333;
        text-decoration: none;
    }

    .villages-dropdown-item.active .villages-dropdown-name[b-wno7pj0ruv] {
        color: #FF8F00;
    }

    .villages-dropdown-name[b-wno7pj0ruv] {
        overflow: hidden;
        color: #333;
        font-size: 13px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .villages-dropdown-capital[b-wno7pj0ruv] {
        color: #8b6c32;
        font-size: 10px;
        white-space: nowrap;
    }

    .villages-dropdown-coords[b-wno7pj0ruv] {
        grid-column: 1 / 3;
        color: #666;
        font-size: 11px;
        justify-self: start;
    }

    .villages-dropdown-actions[b-wno7pj0ruv] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }

    .villages-dropdown-action[b-wno7pj0ruv] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 28px;
        border: 1px solid #cfcfcf;
        border-radius: 999px;
        background: linear-gradient(to bottom, #ffffff, #eeeeee);
    }

    .villages-dropdown-action-icon[b-wno7pj0ruv] {
        width: 19px;
        height: 17px;
        vertical-align: middle;
    }

    .villages-dropdown-action-trade[b-wno7pj0ruv] {
        background-image: url('/img/gpack/img/a/report_icons.gif');
        background-position: 0 -653px;
        background-repeat: no-repeat;
    }

    .villages-dropdown-attack-icon[b-wno7pj0ruv] {
        width: 18px;
        height: 14px;
        vertical-align: middle;
        flex-shrink: 0;
    }

    .villages-dropdown-attack-count[b-wno7pj0ruv] {
        color: #fff;
        background: #c00;
        font-size: 10px;
        font-weight: bold;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        border-radius: 8px;
        padding: 0 3px;
        margin-left: 1px;
        flex-shrink: 0;
        vertical-align: middle;
        display: inline-block;
    }

    .mobile-top-left[b-wno7pj0ruv] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-gold-pill[b-wno7pj0ruv] {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(to bottom, #FFC000, #E39600);
        border: 1px solid #D88900;
        border-radius: 12px;
        padding: 2px 8px;
        text-decoration: none;
        color: #FFF;
        font-weight: bold;
        font-size: 12px;
        gap: 4px;
        line-height: 1;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .gold-icon-small[b-wno7pj0ruv] {
        background-image: url("img/x.gif");
        background-position: -84px 0;
        background-repeat: no-repeat;
        width: 12px;
        height: 12px;
        display: block;
    }

    .mobile-power-btn[b-wno7pj0ruv] {
        color: #333;
        font-size: 16px;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .mobile-power-btn:hover[b-wno7pj0ruv] {
        color: #c0392b;
    }

    #side_navi[b-wno7pj0ruv],
    .nav-backdrop[b-wno7pj0ruv] {
        display: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* === ReconnectModal Scoped CSS === */

#components-reconnect-modal[b-faujt8paca] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    backdrop-filter: blur(3px);
}

#components-reconnect-modal[open][b-faujt8paca] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.components-reconnect-container[b-faujt8paca] {
    background: var(--bg-content, #FFFEF4);
    border: 2px solid var(--border-dark, #8B7D5E);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* --- Status Icon --- */
.components-reconnect-icon[b-faujt8paca] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1;
    transition: color 0.3s ease;
}

.components-reconnect-icon.state-connecting[b-faujt8paca] {
    color: #f0a020;
}

.components-reconnect-icon.state-offline[b-faujt8paca] {
    color: #e74c3c;
}

.components-reconnect-icon.state-server-down[b-faujt8paca] {
    color: #e74c3c;
}

.components-reconnect-icon.state-failed[b-faujt8paca] {
    color: #e74c3c;
}

.components-reconnect-icon.state-paused[b-faujt8paca] {
    color: #f39c12;
}

.components-reconnect-icon.state-success[b-faujt8paca] {
    color: #27ae60;
}

/* --- Spinner --- */
.components-rejoining-animation[b-faujt8paca] {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-light, #D4C9A8);
    border-top-color: var(--bg-nav, #4A7B3F);
    border-radius: 50%;
    animation: reconnect-spin-b-faujt8paca 0.8s linear infinite;
    margin-bottom: 0.75rem;
}

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

/* --- Title --- */
.components-reconnect-title[b-faujt8paca] {
    color: var(--text-primary, #5C3D1A);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

/* --- Description --- */
.components-reconnect-desc[b-faujt8paca] {
    color: var(--text-primary, #5C3D1A);
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Diagnostics Panel --- */
.components-reconnect-diagnostics[b-faujt8paca] {
    background: rgba(139, 125, 94, 0.08);
    border: 1px solid var(--border-light, #D4C9A8);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0.75rem 0;
    text-align: right;
}

.diag-row[b-faujt8paca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    font-size: 0.82rem;
}

.diag-label[b-faujt8paca] {
    color: var(--text-secondary, #8B7D5E);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.diag-label i[b-faujt8paca] {
    font-size: 0.75rem;
    width: 14px;
    text-align: center;
}

.diag-value[b-faujt8paca] {
    font-weight: 600;
    color: var(--text-primary, #5C3D1A);
}

.diag-value.status-ok[b-faujt8paca] {
    color: #27ae60;
}

.diag-value.status-bad[b-faujt8paca] {
    color: #e74c3c;
}

.diag-value.status-warn[b-faujt8paca] {
    color: #f39c12;
}

/* --- Countdown --- */
.components-reconnect-countdown[b-faujt8paca] {
    color: var(--text-secondary, #8B7D5E);
    font-size: 0.85rem;
    margin: 0.5rem 0;
}

/* --- Buttons --- */
.components-reconnect-buttons[b-faujt8paca] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}

.components-reconnect-btn[b-faujt8paca] {
    background: linear-gradient(to bottom, #7ab828, #5a9a18);
    color: #fff;
    border: 1px solid #4a8a08;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.components-reconnect-btn:hover[b-faujt8paca] {
    background: linear-gradient(to bottom, #8cc83a, #6aaa28);
    transform: translateY(-1px);
}

.components-reconnect-btn:active[b-faujt8paca] {
    transform: translateY(0);
}

.components-reconnect-btn-secondary[b-faujt8paca] {
    background: linear-gradient(to bottom, #8B7D5E, #6B5D3E);
    border-color: #5B4D2E;
}

.components-reconnect-btn-secondary:hover[b-faujt8paca] {
    background: linear-gradient(to bottom, #9B8D6E, #7B6D4E);
}

/* --- Tip --- */
.components-reconnect-tip[b-faujt8paca] {
    color: var(--text-secondary, #8B7D5E);
    font-size: 0.78rem;
    margin: 0.65rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-light, #D4C9A8);
    line-height: 1.5;
}

/* --- Pulse animation for offline icon --- */
@keyframes reconnect-pulse-b-faujt8paca {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.components-reconnect-icon.state-offline[b-faujt8paca],
.components-reconnect-icon.state-server-down[b-faujt8paca] {
    animation: reconnect-pulse-b-faujt8paca 1.5s ease-in-out infinite;
}

/* --- Signal Quality Bars (§3) --- */
.components-reconnect-signal[b-faujt8paca] {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-bottom: 0.75rem;
}

.signal-bar[b-faujt8paca] {
    width: 5px;
    border-radius: 2px;
    background: var(--border-light, #D4C9A8);
    transition: background 0.3s ease, height 0.3s ease;
}

.signal-bar[data-level="1"][b-faujt8paca] { height: 6px; }
.signal-bar[data-level="2"][b-faujt8paca] { height: 12px; }
.signal-bar[data-level="3"][b-faujt8paca] { height: 18px; }
.signal-bar[data-level="4"][b-faujt8paca] { height: 24px; }

/* Quality states */
.components-reconnect-signal.quality-excellent .signal-bar[b-faujt8paca] { background: #27ae60; }
.components-reconnect-signal.quality-excellent .signal-bar[data-level="4"][b-faujt8paca] { background: #27ae60; }

.components-reconnect-signal.quality-good .signal-bar[data-level="1"][b-faujt8paca],
.components-reconnect-signal.quality-good .signal-bar[data-level="2"][b-faujt8paca],
.components-reconnect-signal.quality-good .signal-bar[data-level="3"][b-faujt8paca] { background: #2ecc71; }
.components-reconnect-signal.quality-good .signal-bar[data-level="4"][b-faujt8paca] { background: var(--border-light, #D4C9A8); }

.components-reconnect-signal.quality-fair .signal-bar[data-level="1"][b-faujt8paca],
.components-reconnect-signal.quality-fair .signal-bar[data-level="2"][b-faujt8paca] { background: #f39c12; }
.components-reconnect-signal.quality-fair .signal-bar[data-level="3"][b-faujt8paca],
.components-reconnect-signal.quality-fair .signal-bar[data-level="4"][b-faujt8paca] { background: var(--border-light, #D4C9A8); }

.components-reconnect-signal.quality-poor .signal-bar[data-level="1"][b-faujt8paca] { background: #e74c3c; }
.components-reconnect-signal.quality-poor .signal-bar[data-level="2"][b-faujt8paca],
.components-reconnect-signal.quality-poor .signal-bar[data-level="3"][b-faujt8paca],
.components-reconnect-signal.quality-poor .signal-bar[data-level="4"][b-faujt8paca] { background: var(--border-light, #D4C9A8); }

.components-reconnect-signal.quality-offline .signal-bar[b-faujt8paca] { background: #e74c3c; }
/* /Components/Layout/TopBar.razor.rz.scp.css */
.topbar-root[b-elcna5epuh] { display: contents; }
/* ==========================================================================
   TopBar.razor.css � Navigation Bar (Flexbox mimicking original T3 layout)
   ========================================================================== */

#header[b-elcna5epuh] {
    background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
    border-bottom: 2px solid #999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    height: 38px; /* T3.6 header bar is thin */
    width: 100%;
    position: relative;
    z-index: 50;
    margin: 0;
}

.header-container[b-elcna5epuh] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    direction: rtl;
    padding: 0 10px;
    max-width: 980px; /* Keep items centered */
    margin: 0 auto;
    position: relative; /* Enable absolute positioning for sides */
}

/* ==========================================================================
   Right Block: Server Name & Time
   ========================================================================== */
.header-right[b-elcna5epuh] {
    position: absolute;
    right: 20px; /* Align to right edge */
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-info-text[b-elcna5epuh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.server-name[b-elcna5epuh] {
    color: #ffffff; /* Dark text */
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 2px;
}

.server-name span[b-elcna5epuh] {
    font-size: 10px;
    color: #1A5E9E; /* Blue touches on arrow */
}

.server-name:hover[b-elcna5epuh] {
    color: #000;
}

.server-time[b-elcna5epuh] {
    color: #ffffff; /* Dark text */
    font-size: 12px;
    font-weight: bold;
}

    .server-time span[b-elcna5epuh] {
        direction: ltr; /* Keeps time string left-to-right */
        display: inline-block;
        color: #ffffff; /* Blue touches on time */
    }

.server-info-icon .day[b-elcna5epuh] {
    background-image: url("img/gpack/img/l/day.gif");
    width: 18px;
    height: 18px;
    display: block;
}

.server-info-icon .night[b-elcna5epuh] {
    background-image: url("img/gpack/img/l/night.gif");
    width: 17px;
    height: 18px;
    display: block;
}

/* ==========================================================================
   Center Block: Main Navigation Icons
   ========================================================================== */
.header-center[b-elcna5epuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.header-center a[b-elcna5epuh],
.header-center div#n5[b-elcna5epuh] {
    display: block;
    width: 70px;
    height: 67px;
    position: relative;
}

.header-center img[b-elcna5epuh] {
    display: block;
    width: 70px;
    height: 67px;
    border: 0;
    border-radius: 50%;
    transition: filter 0.3s ease;
}

div#n5 .link-half-right[b-elcna5epuh] {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 67px;
    display: block;
    z-index: 10;
}

div#n5 .link-half-left[b-elcna5epuh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 67px;
    display: block;
    z-index: 10;
}

.inactive-nav[b-elcna5epuh] {
    filter: grayscale(100%);
    opacity: 0.8;
}

.active-nav[b-elcna5epuh] {
    filter: grayscale(0%);
    opacity: 1;
}

.header-center img:hover[b-elcna5epuh] {
    filter: grayscale(0%) brightness(1.1);
    opacity: 1;
}

/* ==========================================================================
   Left Block: Gold Box + Attack Alert
   ========================================================================== */
.header-left[b-elcna5epuh] {
    position: absolute;
    left: 20px; /* Align to left edge */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Attack alert icon in header � visible on desktop for players with many villages */
.header-attack-alert[b-elcna5epuh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    background: rgba(204, 0, 0, 0.85);
    border: 1px solid #990000;
    border-radius: 10px;
    padding: 2px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    animation: header-attack-pulse-b-elcna5epuh 1.5s ease-in-out infinite;
}

.header-attack-icon[b-elcna5epuh] {
    width: 18px;
    height: 14px;
    display: block;
}

.header-attack-count[b-elcna5epuh] {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

@keyframes header-attack-pulse-b-elcna5epuh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* The orange pill from the original design */
.gold-box[b-elcna5epuh] {
    display: inline-flex;
    align-items: center;
    background: #FFB400; /* Fallback */
    background: linear-gradient(to bottom, #FFC000, #E39600);
    border: 1px solid #D88900;
    border-radius: 12px;
    padding: 3px 10px;
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    font-size: 15px;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    gap: 5px;
    line-height: 16px;
    transition: filter 0.2s;
}

.gold-box:hover[b-elcna5epuh] {
    filter: brightness(1.1);
}

.gold-box span[b-elcna5epuh] {
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}

.gold-icon[b-elcna5epuh] {
    background-image: url("img/gpack/a/gold.gif");
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    display: block;
}

/* ==========================================================================
   Responsive: Mobile (?600px) � scale down nav icons
   ========================================================================== */
@media (max-width: 600px) {
    #header[b-elcna5epuh] {
        display: block !important;
        position: absolute;
        top: 38px;
        left: 0;
        right: 0;
        height: 100px;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 60;
    }

    .header-right[b-elcna5epuh] {
        display: flex !important;
        position: absolute;
        right: 15px;
        top: 12px;
        gap: 6px;
    }

    /* Mobile: dark rounded background behind server name & time */
    .server-info-text[b-elcna5epuh] {
        background: rgba(0, 0, 0, 0.45);
        border-radius: 12px;
        padding: 4px 10px;
    }

    .server-info-text .server-name[b-elcna5epuh] {
        color: #fff;
    }

    .server-info-text .server-time[b-elcna5epuh] {
        color: #fff;
    }

    .server-info-text .server-time span[b-elcna5epuh] {
        color: #fff;
    }

    .header-center[b-elcna5epuh],
    .header-left[b-elcna5epuh] {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive: Phone ?480px � hide gold box (shown in NavMenu mobile-top-bar instead)
   ========================================================================== */
@media (max-width: 480px) {
    .header-left[b-elcna5epuh] {
        display: none;
    }
}

/* ==========================================================================
   Responsive: Small phone (?400px) � further icon reduction
   ========================================================================== */
@media (max-width: 440px) {
    .header-center a[b-elcna5epuh],
    .header-center div#n5[b-elcna5epuh] {
        width: 58px;
        height: 55px;
    }

    .header-center img[b-elcna5epuh] {
        width: 58px;
        height: 55px;
    }

    div#n5 .link-half-right[b-elcna5epuh],
    div#n5 .link-half-left[b-elcna5epuh] {
        width: 29px;
        height: 55px;
    }

    .server-name[b-elcna5epuh] {
        font-size: 9px;
    }

    .server-time[b-elcna5epuh] {
        font-size: 9px;
    }

    .server-info-icon[b-elcna5epuh] {
        display: none;
    }

    .gold-box[b-elcna5epuh] {
        font-size: 10px;
        padding: 2px 5px;
    }
}

/* Unread badge (red circle on messages/reports) */
.unread-badge[b-elcna5epuh] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e00;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    z-index: 10;
}

/* /Components/Pages/Account/AccountOverview.razor.rz.scp.css */
/* ==========================================================================
   AccountOverview.razor.css — نظرة عامة على القرى — Complete UI/UX Redesign
   Modern card-based layout with cohesive design system
   ========================================================================== */

/* ─── Page Header ─── */
.overview-header[b-mpyu2xdq7e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.overview-header h1[b-mpyu2xdq7e] {
    margin: 0;
    font-size: 20px;
    color: var(--text-heading);
    font-weight: 700;
}

/* ─── Refresh Button ─── */
.btn-refresh[b-mpyu2xdq7e] {
    background: linear-gradient(to bottom, var(--plus-green), #4a8000);
    color: #fff;
    border: 1px solid #4a8000;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}

.btn-refresh:hover[b-mpyu2xdq7e] {
    background: linear-gradient(to bottom, #82E000, #5a9000);
}

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

.refresh-icon[b-mpyu2xdq7e] {
    font-size: 16px;
    line-height: 1;
}

/* ─── Summary Cards ─── */
.overview-cards[b-mpyu2xdq7e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.summary-card[b-mpyu2xdq7e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-content);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.summary-card:hover[b-mpyu2xdq7e] {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-color: var(--border-medium);
}

.summary-card--alert[b-mpyu2xdq7e] {
    border-color: #e8c5c5;
    background: linear-gradient(to bottom, #fff5f5, #fff);
}

.summary-card--alert:hover[b-mpyu2xdq7e] {
    border-color: #d99;
}

.summary-value[b-mpyu2xdq7e] {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.2;
}

.summary-card--alert .summary-value[b-mpyu2xdq7e] {
    color: #c62828;
}

.summary-label[b-mpyu2xdq7e] {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ─── Tab Bar ─── */
.overview-tabs[b-mpyu2xdq7e] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.overview-tab[b-mpyu2xdq7e] {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    font-size: 13px;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
}

.overview-tab:hover[b-mpyu2xdq7e] {
    color: var(--text-link);
}

.overview-tab.active[b-mpyu2xdq7e] {
    color: var(--text-heading);
    border-bottom-color: var(--plus-green);
    font-weight: 700;
}

.tab-icon[b-mpyu2xdq7e] {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* gpack icon overrides for tab icons */
.overview-tab .ico-buildings[b-mpyu2xdq7e] {
    width: 18px;
    height: 12px;
    background: url("/img/gpack/img/a/buildings.gif") no-repeat center / contain;
}

.overview-tab .ico-troops[b-mpyu2xdq7e] {
    width: 18px;
    height: 12px;
    background: url("/img/gpack/img/a/troops.gif") no-repeat center / contain;
}

.overview-tab .ico-g24[b-mpyu2xdq7e] {
    width: 14px;
    height: 18px;
    background: url("/img/gpack/img/g/g24.gif") no-repeat center / contain;
}

.tab-badge[b-mpyu2xdq7e] {
    background: var(--border-medium);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.tab-badge--alert[b-mpyu2xdq7e] {
    background: #c62828;
}

/* Deep variants for badges used inside child components */
.overview-content[b-mpyu2xdq7e]  .tab-badge {
    background: var(--border-medium);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

.overview-content[b-mpyu2xdq7e]  .tab-badge--alert {
    background: #c62828;
}

/* ─── Content Area ─── */
.overview-content[b-mpyu2xdq7e] {
    min-height: 200px;
}

/* ─── Section Headers ─── */
.overview-content[b-mpyu2xdq7e]  h4 {
    margin: 16px 0 8px;
    font-size: 14px;
    color: var(--text-heading);
    font-weight: 700;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}

.overview-content[b-mpyu2xdq7e]  h4:first-child {
    margin-top: 0;
}

.overview-content[b-mpyu2xdq7e]  h4 a {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 700;
}

.overview-content[b-mpyu2xdq7e]  h4 a:hover {
    text-decoration: underline;
}

/* ─── Empty State ─── */
.overview-content[b-mpyu2xdq7e]  .none {
    text-align: center;
    color: var(--text-secondary);
    padding: 30px 10px;
    font-size: 13px;
}

/* ─── Table Scroll Wrapper ─── */
.overview-content[b-mpyu2xdq7e]  .table-scroll-wrap {
    overflow-x: auto;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

/* ─── Statistics Tables (Travian original color scheme) ─── */
.overview-content[b-mpyu2xdq7e]  table.statistics {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
    background-color: #C0C0C0;
    margin-bottom: 12px;
}

.overview-content[b-mpyu2xdq7e]  table.statistics thead th {
    background-image: url("/img/gpack/img/a/c2.gif");
    background-repeat: repeat;
    padding: 4px 7px;
    font-weight: 700;
    color: var(--text-heading);
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
}

.overview-content[b-mpyu2xdq7e]  table.statistics tbody td {
    background-color: #FFFFFF;
    padding: 2px 7px;
    text-align: center;
    font-size: 12px;
    color: var(--text-primary);
}

.overview-content[b-mpyu2xdq7e]  table.statistics tbody tr:hover td {
    background-color: #F0FFF0;
}

.overview-content[b-mpyu2xdq7e]  table.statistics tbody td a {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 700;
}

.overview-content[b-mpyu2xdq7e]  table.statistics tbody td a:hover {
    text-decoration: underline;
}

.overview-content[b-mpyu2xdq7e]  table.statistics tfoot td {
    background-color: #F3F3F3;
    padding: 4px 7px;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-heading);
    text-align: center;
}

/* ─── Resources Table ─── */
.overview-content[b-mpyu2xdq7e]  .overview-resources-table tbody td {
    padding: 6px 4px !important;
}

.overview-content[b-mpyu2xdq7e]  .res-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.overview-content[b-mpyu2xdq7e]  .res-amount {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-heading);
}

.overview-content[b-mpyu2xdq7e]  .res-cap {
    font-size: 10px;
    color: var(--text-secondary);
}

.overview-content[b-mpyu2xdq7e]  .res-bar {
    height: 5px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
    width: 60px;
}

.overview-content[b-mpyu2xdq7e]  .res-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.overview-content[b-mpyu2xdq7e]  .res-bar-wood { background: var(--res-wood); }
.overview-content[b-mpyu2xdq7e]  .res-bar-clay { background: var(--res-clay); }
.overview-content[b-mpyu2xdq7e]  .res-bar-iron { background: var(--res-iron); }
.overview-content[b-mpyu2xdq7e]  .res-bar-crop { background: var(--res-crop); }

/* ─── Production Cells ─── */
.overview-content[b-mpyu2xdq7e]  .prod-wood { color: var(--res-wood); font-weight: 700; }
.overview-content[b-mpyu2xdq7e]  .prod-clay { color: var(--res-clay); font-weight: 700; }
.overview-content[b-mpyu2xdq7e]  .prod-iron { color: var(--res-iron); font-weight: 700; }
.overview-content[b-mpyu2xdq7e]  .prod-crop { color: var(--res-crop); font-weight: 700; }

/* ─── Capital Star ─── */
.overview-content[b-mpyu2xdq7e]  .capital-star {
    color: var(--text-gold);
    margin-right: 3px;
    font-size: 13px;
}

/* ─── Training Table ─── */
.overview-content[b-mpyu2xdq7e]  .overview-training-table tbody td {
    font-size: 12px;
}

.overview-content[b-mpyu2xdq7e]  .training-progress {
    height: 5px;
    background: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    width: 80px;
    margin: 2px auto;
}

.overview-content[b-mpyu2xdq7e]  .training-progress-fill {
    height: 100%;
    background: var(--plus-green);
    border-radius: 3px;
    transition: width 0.3s;
}

/* ─── Celebrations Table ─── */
.overview-content[b-mpyu2xdq7e]  .celebration-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.overview-content[b-mpyu2xdq7e]  .celebration-badge--small {
    background: #e3f2fd;
    color: #1565c0;
}

.overview-content[b-mpyu2xdq7e]  .celebration-badge--large {
    background: #fff8e1;
    color: #f57f17;
}

/* ─── Troop Details (Travian original color scheme) ─── */
.overview-content[b-mpyu2xdq7e]  .troop_details {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #C0C0C0;
    margin: 8px 0;
}

.overview-content[b-mpyu2xdq7e]  .troop_details th,
.overview-content[b-mpyu2xdq7e]  .troop_details td {
    padding: 2px 7px;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td {
    background-color: #F3F3F3;
    padding: 4px 7px;
    font-weight: 700;
    color: var(--text-heading);
    font-size: 12px;
    text-align: center;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td.role {
    width: 20%;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td a {
    color: var(--text-link);
    text-decoration: none;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td a:hover {
    text-decoration: underline;
}

.overview-content[b-mpyu2xdq7e]  .troop_details tbody.units td {
    background-color: #FFFFFF;
    padding: 2px;
    text-align: center;
    width: 7.2%;
}

.overview-content[b-mpyu2xdq7e]  .troop_details tbody.units th {
    background-color: #FFFFFF;
    width: 20%;
    text-align: right;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 11px;
    padding-right: 8px;
}

.overview-content[b-mpyu2xdq7e]  .troop_details tbody.units td.none {
    color: #bbb;
}

.overview-content[b-mpyu2xdq7e]  .troop_details tbody.units .count-full {
    display: none;
}

.overview-content[b-mpyu2xdq7e]  .troop_details tbody.units .count-short {
    display: inline;
}

/* ─── Troop Movement Cards (Attacks) ─── */
.troop-movement-table[b-mpyu2xdq7e] {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #fff;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.troop-movement-table .movement-header-row[b-mpyu2xdq7e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
}

.troop-movement-table.outgoing .movement-header-row[b-mpyu2xdq7e] {
    background: linear-gradient(to bottom, #fff9d6, #fcefa1);
}

.troop-movement-table.incoming .movement-header-row[b-mpyu2xdq7e] {
    background: linear-gradient(to bottom, #f0f7e0, #e8efd7);
}

.troop-movement-table.hostile .movement-header-row[b-mpyu2xdq7e] {
    background: linear-gradient(to bottom, #ffe0e0, #ffcccc);
}

.movement-header-row .attack-title[b-mpyu2xdq7e] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.movement-header-row .attack-title a[b-mpyu2xdq7e] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 700;
}

.movement-header-row .attack-title a:hover[b-mpyu2xdq7e] {
    text-decoration: underline;
}

.movement-header-row .movement-time[b-mpyu2xdq7e] {
    direction: ltr;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.movement-header-row .movement-time .exact-time[b-mpyu2xdq7e] {
    color: var(--text-secondary);
    font-weight: 400;
}

/* ─── Units Grid (Attacks) ─── */
.units-grid[b-mpyu2xdq7e] {
    display: flex;
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.unit-col[b-mpyu2xdq7e] {
    flex: 1;
    text-align: center;
    border-left: 1px solid #f0f0f0;
    padding: 3px 0;
}

.unit-col:last-child[b-mpyu2xdq7e] {
    border-left: none;
}

.unit-col .icon-wrap[b-mpyu2xdq7e] {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

.unit-col .count[b-mpyu2xdq7e] {
    padding: 2px 0;
    font-size: 12px;
}

.unit-col .count.zero[b-mpyu2xdq7e] {
    color: #bbb;
}

.unit-col .count.active[b-mpyu2xdq7e] {
    color: #000;
    font-weight: 700;
}

/* ─── Troop Details Header Themes (Attacks) ─── */
.overview-content[b-mpyu2xdq7e]  .troop_details thead td.role.hostile-header {
    background-color: #ffcccc;
    color: #c62828;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td.role.incoming-header {
    background-color: #e8efd7;
    color: #336600;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td.role.outgoing-header {
    background-color: #fcefa1;
    color: #8a6d00;
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td .countdown {
    font-weight: 700;
    color: var(--text-heading);
}

.overview-content[b-mpyu2xdq7e]  .troop_details thead td .exact-time {
    color: var(--text-secondary);
    font-weight: 400;
}

/* ─── Movements Section Header ─── */
.overview-content[b-mpyu2xdq7e]  .movements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border-light);
}

.overview-content[b-mpyu2xdq7e]  .movements-header h4 {
    margin: 0;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    border: none !important;
    padding: 0 !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .overview-cards[b-mpyu2xdq7e] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .summary-card[b-mpyu2xdq7e] {
        padding: 8px 6px;
    }

    .summary-value[b-mpyu2xdq7e] {
        font-size: 18px;
    }

    .overview-tab[b-mpyu2xdq7e] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .tab-icon[b-mpyu2xdq7e] {
        display: none;
    }

    .overview-content[b-mpyu2xdq7e]  .table-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .overview-content[b-mpyu2xdq7e]  .troop_details {
        min-width: 500px;
    }

    .overview-content[b-mpyu2xdq7e]  table.statistics {
        font-size: 11px;
    }

    .overview-content[b-mpyu2xdq7e]  table.statistics thead th {
        padding: 5px 3px;
    }

    .overview-content[b-mpyu2xdq7e]  table.statistics tbody td {
        padding: 4px 3px;
    }

    .overview-content[b-mpyu2xdq7e]  .overview-resources-table {
        min-width: 450px;
    }

    .overview-content[b-mpyu2xdq7e]  .overview-training-table {
        min-width: 500px;
    }

    .overview-content[b-mpyu2xdq7e]  .overview-celebrations-table {
        min-width: 350px;
    }

    .overview-header h1[b-mpyu2xdq7e] {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .overview-cards[b-mpyu2xdq7e] {
        grid-template-columns: 1fr 1fr;
    }

    .overview-tab[b-mpyu2xdq7e] {
        padding: 5px 8px;
        font-size: 11px;
    }

    .tab-badge[b-mpyu2xdq7e] {
        font-size: 9px;
        padding: 1px 4px;
    }
}
}
/* /Components/Pages/Account/TermsPage.razor.rz.scp.css */
/* ==========================================================================
   TermsPage.razor.css — Matches auth-card design language
   ========================================================================== */

.terms-page[b-z492d2makg] {
    direction: rtl;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #333333;
    line-height: 1.9;
}

.terms-title[b-z492d2makg] {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: bold;
    color: #3f3f3f;
    text-align: center;
}

.terms-updated[b-z492d2makg] {
    text-align: center;
    font-size: 11px;
    color: #999999;
    margin: 0 0 18px;
}

/* ─── Sections ─── */
.terms-section[b-z492d2makg] {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #d3d3d3;
}

.terms-section:last-of-type[b-z492d2makg] {
    border-bottom: none;
    margin-bottom: 10px;
}

.terms-section h2[b-z492d2makg] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: bold;
    color: #c62d2d;
}

.terms-section p[b-z492d2makg] {
    margin: 0 0 8px;
}

.terms-section ul[b-z492d2makg] {
    margin: 6px 0 0;
    padding: 0 22px 0 0;
    list-style: disc;
}

.terms-section li[b-z492d2makg] {
    margin-bottom: 5px;
}

.terms-section strong[b-z492d2makg] {
    color: #222222;
}

/* ─── Back link ─── */
.terms-back[b-z492d2makg] {
    text-align: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #d3d3d3;
}

.terms-back-link[b-z492d2makg] {
    display: inline-block;
    padding: 8px 24px;
    background: linear-gradient(to bottom, #232323, #050505);
    border-radius: 7px;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    transition: opacity 0.15s;
}

.terms-back-link:hover[b-z492d2makg] {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .terms-section h2[b-z492d2makg] {
        font-size: 13px;
    }

    .terms-title[b-z492d2makg] {
        font-size: 16px;
    }
}
/* /Components/Pages/Admin/AdminPanel.razor.rz.scp.css */
/* /Components/Pages/Admin/AdminSupport.razor.rz.scp.css */
/* AdminSupport.razor — scoped styles */

.admin-support[b-4gzelb9wke] {
    display: flex;
    gap: 0;
    height: calc(100vh - 120px);
    min-height: 500px;
    border: 1px solid var(--adm-border, #E2E8F0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* ─── Sidebar ─── */
.as-sidebar[b-4gzelb9wke] {
    width: 320px;
    min-width: 260px;
    border-left: 1px solid var(--adm-border, #E2E8F0);
    display: flex;
    flex-direction: column;
    background: #F7FAFC;
}

.as-sidebar-header[b-4gzelb9wke] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--adm-border, #E2E8F0);
}

    .as-sidebar-header h3[b-4gzelb9wke] {
        margin: 0 0 0.5rem;
        font-size: 1rem;
        color: #2D3748;
    }

.as-filters[b-4gzelb9wke] {
    display: flex;
    gap: 0.4rem;
}

    .as-filters .admin-select-sm[b-4gzelb9wke],
    .as-filters .admin-input-sm[b-4gzelb9wke] {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
        flex: 1;
    }

/* Ticket list */
.as-ticket-list[b-4gzelb9wke] {
    flex: 1;
    overflow-y: auto;
}

.as-ticket[b-4gzelb9wke] {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    border-bottom: 1px solid #EDF2F7;
    background: transparent;
    cursor: pointer;
    text-align: right;
    transition: background 0.15s;
}

    .as-ticket:hover[b-4gzelb9wke] {
        background: #EBF8FF;
    }

    .as-ticket.active[b-4gzelb9wke] {
        background: #BEE3F8;
        border-right: 3px solid #3182CE;
    }

    .as-ticket.st-closed[b-4gzelb9wke] {
        opacity: 0.6;
    }

.as-ticket-top[b-4gzelb9wke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.as-ticket-user[b-4gzelb9wke] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2D3748;
}

.as-ticket-unread[b-4gzelb9wke] {
    background: #E53E3E;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.as-ticket-bottom[b-4gzelb9wke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.as-ticket-preview[b-4gzelb9wke] {
    font-size: 0.78rem;
    color: #718096;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.as-ticket-time[b-4gzelb9wke] {
    font-size: 0.7rem;
    color: #A0AEC0;
    white-space: nowrap;
}

.as-loading[b-4gzelb9wke],
.as-empty[b-4gzelb9wke] {
    text-align: center;
    color: #A0AEC0;
    padding: 2rem 1rem;
    font-size: 0.85rem;
}

/* Push message section */
.as-push-section[b-4gzelb9wke] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--adm-border, #E2E8F0);
    background: #FFFBEB;
}

    .as-push-section h4[b-4gzelb9wke] {
        margin: 0 0 0.5rem;
        font-size: 0.82rem;
        color: #975A16;
    }

    .as-push-section .admin-select-sm[b-4gzelb9wke],
    .as-push-section .admin-input-sm[b-4gzelb9wke] {
        width: 100%;
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
        margin-bottom: 0.4rem;
    }

    .as-push-section .admin-btn[b-4gzelb9wke] {
        width: 100%;
        margin-top: 0.25rem;
    }

/* ─── Chat Area ─── */
.as-chat[b-4gzelb9wke] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.as-no-ticket[b-4gzelb9wke] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #A0AEC0;
}

    .as-no-ticket span[b-4gzelb9wke] {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .as-no-ticket p[b-4gzelb9wke] {
        font-size: 0.9rem;
    }

.as-chat-header[b-4gzelb9wke] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--adm-border, #E2E8F0);
    background: #fff;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.as-chat-info[b-4gzelb9wke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.as-chat-user[b-4gzelb9wke] {
    font-weight: 700;
    font-size: 0.92rem;
    color: #2D3748;
}

.as-chat-status[b-4gzelb9wke] {
    font-size: 0.72rem;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    font-weight: 600;
}

    .as-chat-status.st-open[b-4gzelb9wke] {
        background: #FEFCBF;
        color: #975A16;
    }

    .as-chat-status.st-progress[b-4gzelb9wke] {
        background: #BEE3F8;
        color: #2B6CB0;
    }

    .as-chat-status.st-closed[b-4gzelb9wke] {
        background: #E2E8F0;
        color: #718096;
    }

.status-dot[b-4gzelb9wke] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

    .status-dot.online[b-4gzelb9wke] {
        background: #48BB78;
        box-shadow: 0 0 5px #48BB78;
    }

.as-chat-actions[b-4gzelb9wke] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.as-redirect-row[b-4gzelb9wke] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

    .as-redirect-row .admin-input-sm[b-4gzelb9wke] {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

/* Messages */
.as-messages[b-4gzelb9wke] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #F7FAFC;
}

.msg[b-4gzelb9wke] {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.msg-player[b-4gzelb9wke] {
    align-self: flex-end;
}

.msg-admin[b-4gzelb9wke] {
    align-self: flex-start;
}

.msg-bubble[b-4gzelb9wke] {
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
    word-break: break-word;
}

.msg-player .msg-bubble[b-4gzelb9wke] {
    background: #EDF2F7;
    color: #2D3748;
}

.msg-admin .msg-bubble[b-4gzelb9wke] {
    background: #3182CE;
    color: #fff;
}

.msg-system .msg-bubble[b-4gzelb9wke] {
    background: #FFFBEB;
    color: #975A16;
    font-size: 0.78rem;
    text-align: center;
    border-radius: 6px;
}

.msg-system[b-4gzelb9wke] {
    align-self: center !important;
    max-width: 85%;
}

.msg-system-text[b-4gzelb9wke] {
    font-size: 0.78rem;
}

.msg-content[b-4gzelb9wke] {
    white-space: pre-wrap;
}

.msg-time[b-4gzelb9wke] {
    font-size: 0.66rem;
    color: #A0AEC0;
    margin-top: 0.12rem;
}

.msg-player .msg-time[b-4gzelb9wke] {
    text-align: left;
}

.msg-admin .msg-time[b-4gzelb9wke] {
    text-align: right;
}

.msg-redirect-tag[b-4gzelb9wke] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    opacity: 0.8;
    direction: ltr;
    text-align: left;
}

/* Input area */
.as-input-area[b-4gzelb9wke] {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--adm-border, #E2E8F0);
    background: #fff;
}

.as-input[b-4gzelb9wke] {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.86rem;
    resize: none;
    font-family: inherit;
    outline: none;
}

    .as-input:focus[b-4gzelb9wke] {
        border-color: #3182CE;
        box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
    }

.as-send-btn[b-4gzelb9wke] {
    padding: 0.45rem 1rem;
    background: #3182CE;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

    .as-send-btn:hover:not(:disabled)[b-4gzelb9wke] {
        background: #2B6CB0;
    }

    .as-send-btn:disabled[b-4gzelb9wke] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .admin-support[b-4gzelb9wke] {
        flex-direction: column;
        height: auto;
    }

    .as-sidebar[b-4gzelb9wke] {
        width: 100%;
        max-height: 260px;
        border-left: none;
        border-bottom: 1px solid var(--adm-border, #E2E8F0);
    }

    .as-chat[b-4gzelb9wke] {
        min-height: 400px;
    }
}
/* /Components/Pages/Admin/Bans.razor.rz.scp.css */
.ban-search-results[b-gjyoc8887f] {
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--adm-border-light, #EBEDF0);
    border-radius: 8px;
    background: var(--adm-bg, #fff);
}

    .ban-search-results .selected-row[b-gjyoc8887f] {
        background: var(--adm-success-bg, #E6F4EA);
    }

    .ban-search-results td[b-gjyoc8887f],
    .ban-search-results th[b-gjyoc8887f] {
        padding: 0.35rem 0.5rem;
    }
/* /Components/Pages/Admin/CredentialField.razor.rz.scp.css */
.payment-credential-field[b-42jgywg9gg] {
    margin-bottom: 16px;
}

.payment-credential-field label[b-42jgywg9gg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* /Components/Pages/Admin/DatabaseBackup.razor.rz.scp.css */
/* DatabaseBackup.razor — scoped styles */

.db-status-grid[b-68ja6bbtd8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.db-status-item[b-68ja6bbtd8] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    background: var(--adm-bg-muted, #F7F8FA);
    border-radius: 8px;
    border: 1px solid var(--adm-border-light, #EBEDF0);
}

.db-label[b-68ja6bbtd8] {
    font-size: 0.78rem;
    color: var(--adm-text-muted, #8C939E);
    font-weight: 500;
}

.db-value[b-68ja6bbtd8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--adm-text, #1C2024);
}

.db-value-ok[b-68ja6bbtd8] {
    color: var(--adm-success, #137333);
}

.db-value-warn[b-68ja6bbtd8] {
    color: #B45309;
}

.db-pending-list[b-68ja6bbtd8] {
    padding: 1rem;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
    margin-bottom: 1rem;
}

    .db-pending-list h4[b-68ja6bbtd8] {
        margin: 0 0 0.5rem;
        font-size: 0.9rem;
        color: #92400E;
    }

    .db-pending-list ul[b-68ja6bbtd8] {
        margin: 0 0 1rem;
        padding-right: 1.5rem;
        list-style: disc;
    }

        .db-pending-list ul li[b-68ja6bbtd8] {
            font-family: monospace;
            font-size: 0.82rem;
            padding: 0.15rem 0;
            color: #78350F;
        }

.db-hint[b-68ja6bbtd8] {
    font-size: 0.8rem;
    color: var(--adm-text-muted, #8C939E);
    margin-top: 0.5rem;
    line-height: 1.6;
}

.db-applied-details[b-68ja6bbtd8] {
    margin-top: 1rem;
    border: 1px solid var(--adm-border-light, #EBEDF0);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

    .db-applied-details summary[b-68ja6bbtd8] {
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--adm-text-sec, #5C6370);
        font-weight: 500;
    }

    .db-applied-details ul[b-68ja6bbtd8] {
        margin: 0.5rem 0 0;
        padding-right: 1.5rem;
        list-style: circle;
    }

        .db-applied-details ul li[b-68ja6bbtd8] {
            font-family: monospace;
            font-size: 0.78rem;
            padding: 0.1rem 0;
            color: var(--adm-text-sec, #5C6370);
        }

.db-backup-actions[b-68ja6bbtd8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.db-path-group[b-68ja6bbtd8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.db-path-label[b-68ja6bbtd8] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--adm-text, #1C2024);
}

.db-path-input-row[b-68ja6bbtd8] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.db-path-input[b-68ja6bbtd8] {
    flex: 1;
    direction: ltr;
    text-align: left;
    font-family: monospace;
    font-size: 0.82rem;
}

.db-path-hint[b-68ja6bbtd8] {
    font-size: 0.75rem;
    color: var(--adm-text-muted, #8C939E);
}

    .db-path-hint code[b-68ja6bbtd8] {
        background: var(--adm-bg-inset, #F0F2F5);
        padding: 0.1rem 0.35rem;
        border-radius: 3px;
        font-size: 0.78rem;
    }

.db-browse-section[b-68ja6bbtd8] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--adm-border-light, #EBEDF0);
}

.db-custom-restore-confirm[b-68ja6bbtd8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--adm-danger-bg, #FCECEA);
    border-radius: 6px;
}

.db-path-cell[b-68ja6bbtd8] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.db-actions-cell[b-68ja6bbtd8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.db-confirm-text[b-68ja6bbtd8] {
    font-size: 0.8rem;
    color: var(--adm-danger, #C5221F);
    font-weight: 500;
}

.db-guide[b-68ja6bbtd8] {
    line-height: 1.8;
}

    .db-guide h4[b-68ja6bbtd8] {
        font-size: 0.92rem;
        color: var(--adm-text-heading, #0D0F11);
        margin: 0 0 0.5rem;
    }

    .db-guide ol[b-68ja6bbtd8],
    .db-guide ul[b-68ja6bbtd8] {
        padding-right: 1.5rem;
        margin: 0 0 0.5rem;
    }

        .db-guide ol li[b-68ja6bbtd8],
        .db-guide ul li[b-68ja6bbtd8] {
            padding: 0.15rem 0;
            font-size: 0.85rem;
        }

    .db-guide code[b-68ja6bbtd8] {
        background: var(--adm-bg-inset, #F0F2F5);
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        font-size: 0.82rem;
    }

.db-warning[b-68ja6bbtd8] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--adm-danger-bg, #FCECEA);
    border: 1px solid var(--adm-danger-border, #F5C6C6);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--adm-danger, #C5221F);
}

.db-result[b-68ja6bbtd8] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
}

.db-result-ok[b-68ja6bbtd8] {
    background: var(--adm-success-bg, #E6F4EA);
    border: 1px solid var(--adm-success-border, #A8DAB5);
    color: var(--adm-success, #137333);
}

.db-result-err[b-68ja6bbtd8] {
    background: var(--adm-danger-bg, #FCECEA);
    border: 1px solid var(--adm-danger-border, #F5C6C6);
    color: var(--adm-danger, #C5221F);
}
/* /Components/Pages/Admin/GoldOrders.razor.rz.scp.css */
.payments-header[b-e98l2cno0v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-block-end: 24px;
}

.payments-header__eyebrow[b-e98l2cno0v] {
    display: block;
    margin-block-end: 5px;
    color: var(--adm-accent);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.payments-header h1[b-e98l2cno0v] {
    margin: 0;
    color: var(--adm-text-heading);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.25;
}

.payments-header p[b-e98l2cno0v] {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--adm-text-sec);
    line-height: 1.6;
}

.payments-header__actions[b-e98l2cno0v] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.payments-last-update[b-e98l2cno0v] {
    color: var(--adm-text-muted);
    font-size: .78rem;
    white-space: nowrap;
}

.alert-dismiss[b-e98l2cno0v] {
    width: 30px;
    height: 30px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: var(--adm-radius-xs);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
}

.alert-dismiss:hover[b-e98l2cno0v],
.alert-dismiss:focus-visible[b-e98l2cno0v] {
    background: rgba(0, 0, 0, .08);
    outline: none;
}

.payments-stats[b-e98l2cno0v] {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    margin-block-end: 24px;
}

.payment-stat[b-e98l2cno0v] {
    --stat-color: var(--adm-text-sec);
    position: relative;
    min-height: 128px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-bg-card);
    box-shadow: var(--adm-shadow-sm);
}

.payment-stat[b-e98l2cno0v]::before {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--stat-color);
    content: "";
}

.payment-stat--success[b-e98l2cno0v] { --stat-color: var(--adm-success); }
.payment-stat--warning[b-e98l2cno0v] { --stat-color: var(--adm-warning); }
.payment-stat--danger[b-e98l2cno0v] { --stat-color: var(--adm-danger); }
.payment-stat--purple[b-e98l2cno0v] { --stat-color: var(--adm-purple); }
.payment-stat--gold[b-e98l2cno0v],
.payment-stat--revenue[b-e98l2cno0v] { --stat-color: var(--adm-gold); }

.payment-stat--attention[b-e98l2cno0v] {
    border-color: var(--adm-warning-border);
    background: linear-gradient(135deg, var(--adm-warning-bg), var(--adm-bg-card) 72%);
}

.payment-stat--wide[b-e98l2cno0v] {
    grid-column: span 2;
}

.payment-stat__label[b-e98l2cno0v],
.payment-stat__hint[b-e98l2cno0v] {
    display: block;
}

.payment-stat__label[b-e98l2cno0v] {
    color: var(--adm-text-sec);
    font-size: .82rem;
    font-weight: 700;
}

.payment-stat__value[b-e98l2cno0v] {
    display: block;
    margin-block: 8px 5px;
    color: var(--stat-color);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
}

.payment-stat__value--compact[b-e98l2cno0v] {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.payment-stat__value small[b-e98l2cno0v] {
    font-size: .68rem;
    font-weight: 700;
}

.payment-stat__hint[b-e98l2cno0v] {
    color: var(--adm-text-muted);
    font-size: .74rem;
}

.orders-panel[b-e98l2cno0v] {
    overflow: hidden;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    background: var(--adm-bg-card);
    box-shadow: var(--adm-shadow-sm);
}

.orders-toolbar[b-e98l2cno0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-block-end: 1px solid var(--adm-border-light);
    background: linear-gradient(180deg, var(--adm-bg-muted), var(--adm-bg-card));
}

.orders-toolbar__heading[b-e98l2cno0v],
.orders-toolbar__controls[b-e98l2cno0v] {
    display: flex;
    align-items: center;
}

.orders-toolbar__heading[b-e98l2cno0v] {
    gap: 12px;
}

.orders-toolbar__icon[b-e98l2cno0v] {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-accent-light);
    color: var(--adm-accent);
    font-size: 1.25rem;
}

.orders-toolbar h2[b-e98l2cno0v] {
    margin: 0;
    color: var(--adm-text-heading);
    font-size: 1.15rem;
}

.orders-toolbar p[b-e98l2cno0v] {
    margin: 3px 0 0;
    color: var(--adm-text-muted);
    font-size: .78rem;
}

.orders-toolbar__controls[b-e98l2cno0v] {
    gap: 9px;
}

.orders-toolbar__controls label[b-e98l2cno0v] {
    color: var(--adm-text-sec);
    font-size: .82rem;
    font-weight: 700;
}

.orders-filter[b-e98l2cno0v] {
    width: 190px;
}

.orders-panel__body[b-e98l2cno0v] {
    min-height: 180px;
}

.orders-loading[b-e98l2cno0v],
.orders-empty[b-e98l2cno0v] {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    color: var(--adm-text-sec);
}

.orders-loading[b-e98l2cno0v] {
    gap: 14px;
}

.orders-loading strong[b-e98l2cno0v] {
    color: var(--adm-text-heading);
}

.orders-loading p[b-e98l2cno0v],
.orders-empty p[b-e98l2cno0v] {
    margin: 4px 0 0;
    color: var(--adm-text-muted);
    font-size: .86rem;
}

.orders-spinner[b-e98l2cno0v] {
    width: 30px;
    height: 30px;
    border: 3px solid var(--adm-border);
    border-block-start-color: var(--adm-accent);
    border-radius: 50%;
    animation: orders-spin-b-e98l2cno0v .7s linear infinite;
}

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

.orders-empty[b-e98l2cno0v] {
    flex-direction: column;
    padding: 32px;
    text-align: center;
}

.orders-empty__icon[b-e98l2cno0v] {
    display: grid;
    width: 56px;
    height: 56px;
    margin-block-end: 12px;
    place-items: center;
    border-radius: 50%;
    background: var(--adm-bg-inset);
    color: var(--adm-text-muted);
    font-size: 1.6rem;
}

.orders-empty h3[b-e98l2cno0v] {
    margin: 0;
    color: var(--adm-text-heading);
    font-size: 1.05rem;
}

.orders-empty .admin-btn[b-e98l2cno0v] {
    margin-block-start: 18px;
}

.orders-table-wrap[b-e98l2cno0v] {
    max-width: 100%;
    overflow-x: auto;
}

.orders-table[b-e98l2cno0v] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
}

.orders-table th[b-e98l2cno0v] {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 11px 14px;
    border-block-end: 2px solid var(--adm-border);
    background: var(--adm-bg-table-head);
    color: var(--adm-text-sec);
    text-align: start;
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.orders-table td[b-e98l2cno0v] {
    padding: 14px;
    border-block-end: 1px solid var(--adm-border-light);
    color: var(--adm-text);
    vertical-align: middle;
}

.orders-table tbody tr:last-child td[b-e98l2cno0v] {
    border-block-end: 0;
}

.orders-table tbody tr:hover td[b-e98l2cno0v] {
    background: var(--adm-bg-table-hover);
}

.orders-table .order-row--pending td[b-e98l2cno0v] {
    background: color-mix(in srgb, var(--adm-warning-bg) 42%, var(--adm-bg-card));
}

.orders-table .order-row--pending:hover td[b-e98l2cno0v] {
    background: color-mix(in srgb, var(--adm-warning-bg) 70%, var(--adm-bg-card));
}

.order-number[b-e98l2cno0v],
.order-player[b-e98l2cno0v],
.order-gold[b-e98l2cno0v],
.order-price[b-e98l2cno0v],
.order-gateway[b-e98l2cno0v],
.order-package[b-e98l2cno0v],
.order-bonus[b-e98l2cno0v],
.order-time[b-e98l2cno0v],
.provider-status[b-e98l2cno0v],
.tracking-label[b-e98l2cno0v],
.order-muted[b-e98l2cno0v] {
    display: block;
}

.order-number[b-e98l2cno0v] {
    color: var(--adm-text-heading);
    font-size: 1rem;
}

.order-gateway[b-e98l2cno0v],
.order-package[b-e98l2cno0v],
.order-time[b-e98l2cno0v],
.provider-status[b-e98l2cno0v],
.tracking-label[b-e98l2cno0v],
.order-muted[b-e98l2cno0v] {
    margin-block-start: 3px;
    color: var(--adm-text-muted);
    font-size: .72rem;
}

.order-player[b-e98l2cno0v] {
    max-width: 180px;
    overflow: hidden;
    color: var(--adm-text-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tracking[b-e98l2cno0v] {
    max-width: 250px;
}

.order-tracking code[b-e98l2cno0v] {
    display: block;
    max-width: 235px;
    overflow: hidden;
    color: var(--adm-info);
    direction: ltr;
    font-size: .7rem;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-tracking .tracking-label:not(:first-child)[b-e98l2cno0v] {
    margin-block-start: 7px;
}

.order-gold[b-e98l2cno0v] {
    color: var(--adm-gold);
}

.order-bonus[b-e98l2cno0v] {
    color: var(--adm-success);
    font-size: .74rem;
}

.order-price[b-e98l2cno0v] {
    margin-block-start: 6px;
    color: var(--adm-text-heading);
    font-weight: 700;
}

.provider-status[b-e98l2cno0v] {
    max-width: 150px;
    overflow-wrap: anywhere;
}

.order-actions[b-e98l2cno0v] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.order-action-complete[b-e98l2cno0v] {
    color: var(--adm-text-muted);
    font-size: .74rem;
    white-space: nowrap;
}

.refund-modal[b-e98l2cno0v] {
    width: min(470px, calc(100vw - 28px));
    background: var(--adm-bg-card);
}

.refund-warning[b-e98l2cno0v] {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    place-items: center;
    border: 1px solid var(--adm-danger-border);
    border-radius: 50%;
    background: var(--adm-danger-bg);
    color: var(--adm-danger);
    font-size: 1.5rem;
    font-weight: 900;
}

.refund-modal p[b-e98l2cno0v] {
    margin: 0;
    text-align: center;
}

.refund-summary[b-e98l2cno0v] {
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--adm-border-light);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-bg-muted);
}

.refund-summary div[b-e98l2cno0v] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 6px;
}

.refund-summary dt[b-e98l2cno0v] {
    color: var(--adm-text-muted);
}

.refund-summary dd[b-e98l2cno0v] {
    margin: 0;
    color: var(--adm-text-heading);
    font-weight: 700;
}

.refund-note[b-e98l2cno0v] {
    color: var(--adm-danger) !important;
    font-size: .8rem;
}

.admin-btn:focus-visible[b-e98l2cno0v],
.admin-select:focus-visible[b-e98l2cno0v],
.alert-dismiss:focus-visible[b-e98l2cno0v] {
    outline: 3px solid color-mix(in srgb, var(--adm-info) 30%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1200px) {
    .payments-stats[b-e98l2cno0v] {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .payment-stat--wide[b-e98l2cno0v] {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .payments-header[b-e98l2cno0v] {
        flex-direction: column;
        margin-block-end: 18px;
    }

    .payments-header__actions[b-e98l2cno0v],
    .payments-refresh[b-e98l2cno0v] {
        width: 100%;
    }

    .payments-header__actions[b-e98l2cno0v] {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .payments-last-update[b-e98l2cno0v] {
        text-align: center;
    }

    .payments-stats[b-e98l2cno0v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .payment-stat[b-e98l2cno0v] {
        min-height: 112px;
        padding: 14px;
    }

    .payment-stat--wide[b-e98l2cno0v] {
        grid-column: span 2;
    }

    .payment-stat__value[b-e98l2cno0v] {
        font-size: 1.45rem;
    }

    .orders-toolbar[b-e98l2cno0v] {
        align-items: stretch;
        flex-direction: column;
        padding: 15px;
    }

    .orders-toolbar__controls[b-e98l2cno0v] {
        align-items: stretch;
        flex-direction: column;
    }

    .orders-filter[b-e98l2cno0v] {
        width: 100%;
        min-height: 44px;
    }

    .orders-table-wrap[b-e98l2cno0v] {
        padding: 12px;
        overflow: visible;
        background: var(--adm-bg-muted);
    }

    .orders-table[b-e98l2cno0v],
    .orders-table tbody[b-e98l2cno0v],
    .orders-table tr[b-e98l2cno0v],
    .orders-table td[b-e98l2cno0v] {
        display: block;
        width: 100%;
    }

    .orders-table[b-e98l2cno0v] {
        min-width: 0;
    }

    .orders-table thead[b-e98l2cno0v] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .orders-table tbody[b-e98l2cno0v] {
        display: grid;
        gap: 12px;
    }

    .orders-table tr[b-e98l2cno0v] {
        overflow: hidden;
        border: 1px solid var(--adm-border);
        border-radius: var(--adm-radius);
        background: var(--adm-bg-card);
        box-shadow: var(--adm-shadow-xs);
    }

    .orders-table td[b-e98l2cno0v],
    .orders-table .order-row--pending td[b-e98l2cno0v] {
        display: grid;
        grid-template-columns: minmax(90px, .38fr) minmax(0, 1fr);
        gap: 10px;
        padding: 10px 13px;
        border-block-end: 1px solid var(--adm-border-light);
        background: transparent;
        text-align: start;
    }

    .orders-table .order-row--pending[b-e98l2cno0v] {
        border-color: var(--adm-warning-border);
        background: linear-gradient(135deg, var(--adm-warning-bg), var(--adm-bg-card) 48%);
    }

    .orders-table td[b-e98l2cno0v]::before {
        align-self: start;
        color: var(--adm-text-muted);
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 700;
    }

    .orders-table td:first-child[b-e98l2cno0v] {
        grid-template-columns: 1fr auto;
        padding-block: 13px;
        background: var(--adm-bg-table-head);
    }

    .orders-table td:first-child[b-e98l2cno0v]::before {
        display: none;
    }

    .orders-table td:last-child[b-e98l2cno0v] {
        display: block;
        border-block-end: 0;
        background: var(--adm-bg-muted);
    }

    .orders-table td:last-child[b-e98l2cno0v]::before {
        display: block;
        margin-block-end: 8px;
    }

    .order-player[b-e98l2cno0v],
    .order-tracking[b-e98l2cno0v],
    .order-tracking code[b-e98l2cno0v],
    .provider-status[b-e98l2cno0v] {
        max-width: none;
    }

    .order-tracking code[b-e98l2cno0v] {
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
        white-space: normal;
    }

    .order-actions[b-e98l2cno0v],
    .order-actions .admin-btn[b-e98l2cno0v] {
        width: 100%;
    }

    .order-actions .admin-btn[b-e98l2cno0v] {
        min-height: 44px;
    }

    .admin-modal-footer[b-e98l2cno0v] {
        flex-direction: column-reverse;
    }

    .admin-modal-footer .admin-btn[b-e98l2cno0v] {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .payments-stats[b-e98l2cno0v] {
        grid-template-columns: 1fr 1fr;
    }

    .payment-stat[b-e98l2cno0v] {
        min-height: 104px;
        padding: 12px;
    }

    .payment-stat__hint[b-e98l2cno0v] {
        display: none;
    }

    .payment-stat--wide[b-e98l2cno0v],
    .payment-stat--revenue[b-e98l2cno0v] {
        grid-column: span 2;
    }

    .orders-table-wrap[b-e98l2cno0v] {
        margin-inline: -1px;
        padding: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orders-spinner[b-e98l2cno0v] {
        animation-duration: 1.5s;
    }
}
/* /Components/Pages/Admin/OnlinePlayers.razor.rz.scp.css */
/* ─── Online Players Admin Page ─── */

.online-count-badge[b-7thkmr7vdn] {
    display: inline-flex;
    align-items: center;
    background: #dcfce7;
    color: #166534;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 20px;
    margin-inline-start: 8px;
}

.online-live-dot[b-7thkmr7vdn] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    margin-inline-start: 8px;
    animation: livePulse-b-7thkmr7vdn 1.5s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes livePulse-b-7thkmr7vdn {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.row-idle[b-7thkmr7vdn] {
    opacity: 0.55;
}

.current-page-cell[b-7thkmr7vdn] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #6b7280;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Server Distribution Grid ─── */

.server-dist-grid[b-7thkmr7vdn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.server-dist-item[b-7thkmr7vdn] {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    align-items: center;
    gap: 12px;
}

.server-dist-name[b-7thkmr7vdn] {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    text-align: right;
}

.server-dist-bar[b-7thkmr7vdn] {
    height: 22px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}

.server-dist-fill[b-7thkmr7vdn] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 6px;
    transition: width 0.5s ease;
    min-width: 4px;
}

.server-dist-count[b-7thkmr7vdn] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .server-dist-item[b-7thkmr7vdn] {
        grid-template-columns: 100px 1fr 60px;
    }
}
/* /Components/Pages/Admin/PaymentSettings.razor.rz.scp.css */
.payment-settings-intro p[b-zyhitzfgq5] {
    margin: 0;
    line-height: 1.8;
}

.payment-settings-warning[b-zyhitzfgq5] {
    margin-top: 8px !important;
    color: #b45309;
    font-weight: 700;
}

.payment-settings-grid[b-zyhitzfgq5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.payment-gateway-card[b-zyhitzfgq5] {
    margin: 0;
}

.payment-credential-field[b-zyhitzfgq5] {
    margin-bottom: 16px;
}

.payment-credential-field label[b-zyhitzfgq5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.payment-save-button[b-zyhitzfgq5] {
    width: 100%;
    margin-top: 8px;
}

.payment-paybar-actions[b-zyhitzfgq5] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.payment-paybar-actions .admin-btn[b-zyhitzfgq5] {
    flex: 1;
}

.payment-test-button[b-zyhitzfgq5] {
    background: transparent;
    border: 1px solid currentColor;
}

@media (max-width: 800px) {
    .payment-settings-grid[b-zyhitzfgq5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Performance.razor.rz.scp.css */
/* ==========================================================================
   Performance.razor.css — Server Performance Monitoring Page
   ========================================================================== */

/* ── Health Banner ── */
.perf-health-banner[b-wp2j3zhp26] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: var(--adm-radius);
    margin-bottom: 22px;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--adm-shadow-sm);
}

.health-good[b-wp2j3zhp26] {
    background: var(--adm-success-bg);
    border: 1px solid var(--adm-success-border);
    color: var(--adm-success);
}

.health-warning[b-wp2j3zhp26] {
    background: var(--adm-warning-bg);
    border: 1px solid var(--adm-warning-border);
    color: var(--adm-warning);
}

.health-critical[b-wp2j3zhp26] {
    background: var(--adm-danger-bg);
    border: 1px solid var(--adm-danger-border);
    color: var(--adm-danger);
}

.health-icon[b-wp2j3zhp26] {
    font-size: 1.4rem;
}

.health-text[b-wp2j3zhp26] {
    flex: 1;
}

.health-uptime[b-wp2j3zhp26] {
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* ── Stat sub-text ── */
.stat-sub[b-wp2j3zhp26] {
    display: block;
    font-size: 0.72rem;
    opacity: 0.7;
    margin-top: 2px;
    font-weight: 400;
}

/* ── Details Grid ── */
.perf-details-grid[b-wp2j3zhp26] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

.perf-details-grid .admin-card[b-wp2j3zhp26] {
    margin-bottom: 0;
}

/* ── Performance Table ── */
.perf-table td:first-child[b-wp2j3zhp26] {
    font-weight: 500;
    color: var(--adm-text-sec);
    width: 55%;
}

.perf-val[b-wp2j3zhp26] {
    font-weight: 700;
    color: var(--adm-text-heading);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

.perf-val-danger[b-wp2j3zhp26] {
    color: var(--adm-danger);
    font-weight: 700;
}

.perf-val-warning[b-wp2j3zhp26] {
    color: var(--adm-warning);
    font-weight: 700;
}

/* ── Capacity Bar ── */
.capacity-bar-container[b-wp2j3zhp26] {
    margin: 12px 0 8px;
}

.capacity-bar[b-wp2j3zhp26] {
    height: 28px;
    background: var(--adm-bg-inset);
    border-radius: var(--adm-radius-lg);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--adm-border-light);
}

.capacity-fill[b-wp2j3zhp26] {
    height: 100%;
    background: linear-gradient(90deg, var(--adm-accent), #2ea85f);
    border-radius: var(--adm-radius-lg);
    transition: width 0.6s var(--adm-ease);
    min-width: 4px;
}

.capacity-marker[b-wp2j3zhp26] {
    position: absolute;
    top: -6px;
    transform: translateX(50%);
}

.capacity-marker-label[b-wp2j3zhp26] {
    display: inline-block;
    background: var(--adm-text-heading);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--adm-radius-xs);
    white-space: nowrap;
    position: relative;
    top: -20px;
}

.capacity-labels[b-wp2j3zhp26] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--adm-text-muted);
    margin-top: 6px;
}

.capacity-current[b-wp2j3zhp26] {
    font-weight: 600;
    color: var(--adm-accent);
}

.capacity-note[b-wp2j3zhp26] {
    font-size: 0.78rem;
    color: var(--adm-text-muted);
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--adm-bg-muted);
    border-radius: var(--adm-radius-sm);
    border-right: 3px solid var(--adm-warning);
}

/* ── History Chart ── */
.history-chart[b-wp2j3zhp26] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    padding: 10px 0;
    overflow-x: auto;
}

.history-bar-group[b-wp2j3zhp26] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 28px;
    height: 100%;
    justify-content: flex-end;
}

.history-bar[b-wp2j3zhp26] {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    transition: height 0.3s var(--adm-ease);
}

.cpu-bar[b-wp2j3zhp26] {
    background: linear-gradient(to top, #1967D2, #5B9BF5);
    opacity: 0.85;
}

.mem-bar[b-wp2j3zhp26] {
    background: linear-gradient(to top, #7B2DCA, #B07FE8);
    opacity: 0.75;
}

.history-time[b-wp2j3zhp26] {
    font-size: 0.6rem;
    color: var(--adm-text-muted);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-top: 4px;
}

.history-legend[b-wp2j3zhp26] {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--adm-text-sec);
}

.legend-dot[b-wp2j3zhp26] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
}

.cpu-dot[b-wp2j3zhp26] {
    background: #1967D2;
}

.mem-dot[b-wp2j3zhp26] {
    background: #7B2DCA;
}

/* ── Copy for AI Button ── */
.perf-copy-btn[b-wp2j3zhp26] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--adm-primary-border, #1967D2);
    border-radius: 6px;
    background: var(--adm-primary-bg, rgba(25, 103, 210, 0.08));
    color: var(--adm-primary, #1967D2);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: auto;
}

.perf-copy-btn:hover[b-wp2j3zhp26] {
    background: var(--adm-primary, #1967D2);
    color: #fff;
}

.perf-copy-icon[b-wp2j3zhp26] {
    font-size: 0.95rem;
}

/* ── Copy Success Toast ── */
.perf-copy-toast[b-wp2j3zhp26] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 28px;
    background: #1e7e34;
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    animation: toast-fade-in 0.2s ease;
}

@@keyframes toast-fade-in {
    from[b-wp2j3zhp26] { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to[b-wp2j3zhp26] { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Lock Warning Note ── */
.perf-warning-note[b-wp2j3zhp26] {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--adm-warning-bg, rgba(255, 193, 7, 0.1));
    border: 1px solid var(--adm-warning-border, rgba(255, 193, 7, 0.3));
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--adm-warning, #856404);
    line-height: 1.5;
}

.perf-warning-note code[b-wp2j3zhp26] {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* ── Endpoint Path Cell ── */
.perf-endpoint-path[b-wp2j3zhp26] {
    font-family: monospace;
    font-size: 0.8rem;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

/* ── Latency/Danger/Warning Value Classes (if not already in admin.css) ── */
.perf-val-danger[b-wp2j3zhp26] {
    color: var(--adm-danger, #dc3545) !important;
    font-weight: 700;
}

.perf-val-warning[b-wp2j3zhp26] {
    color: var(--adm-warning, #856404) !important;
    font-weight: 600;
}

/* ── Badge Red/Green (if not already in admin.css) ── */
.badge-red[b-wp2j3zhp26] {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.badge-green[b-wp2j3zhp26] {
    background: rgba(40, 167, 69, 0.12);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}
/* /Components/Pages/Admin/Players.razor.rz.scp.css */
.players-table-scroll[b-pr0ddt4dgo] {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.players-table[b-pr0ddt4dgo] {
    min-width: 780px;
}

.players-table th:first-child[b-pr0ddt4dgo],
.players-table td:first-child[b-pr0ddt4dgo] {
    width: 64px;
}

.players-table th:last-child[b-pr0ddt4dgo],
.players-table td:last-child[b-pr0ddt4dgo] {
    width: 190px;
}

.player-account-name[b-pr0ddt4dgo] {
    display: block;
    margin-top: 3px;
    color: var(--adm-text-muted);
    font-weight: 400;
    direction: ltr;
    text-align: right;
}

.player-row-actions[b-pr0ddt4dgo] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.player-details-row > td[b-pr0ddt4dgo] {
    padding: 0 16px 16px !important;
    background: var(--adm-bg-muted) !important;
}

.player-expanded-details[b-pr0ddt4dgo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-border-light);
}

.player-expanded-details > div[b-pr0ddt4dgo] {
    min-width: 0;
    padding: 12px 14px;
    background: var(--adm-bg-card);
}

.player-expanded-details span[b-pr0ddt4dgo] {
    display: block;
    margin-bottom: 4px;
    color: var(--adm-text-muted);
    font-size: 0.78rem;
}

.player-expanded-details strong[b-pr0ddt4dgo] {
    display: block;
    overflow-wrap: anywhere;
    color: var(--adm-text);
    font-size: 0.9rem;
}

.membership-editor[b-pr0ddt4dgo] {
    align-items: end;
}

.membership-editor .admin-form-group[b-pr0ddt4dgo] {
    min-width: 220px;
}

.membership-editor small[b-pr0ddt4dgo] {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
}

.membership-editor > .admin-btn[b-pr0ddt4dgo] {
    margin-bottom: 1px;
}

.membership-summary[b-pr0ddt4dgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.membership-summary span[b-pr0ddt4dgo] {
    padding: 7px 10px;
    border: 1px solid var(--adm-border-light);
    border-radius: var(--adm-radius-xs);
    background: var(--adm-bg-muted);
    color: var(--adm-text-sec);
    font-size: 0.84rem;
}

@media (max-width: 900px) {
    .player-expanded-details[b-pr0ddt4dgo] {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .membership-editor > .admin-btn[b-pr0ddt4dgo] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .player-expanded-details[b-pr0ddt4dgo] {
        grid-template-columns: 1fr;
    }

    .membership-editor .admin-form-group[b-pr0ddt4dgo] {
        min-width: 100%;
    }

    .membership-summary[b-pr0ddt4dgo] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Admin/SeoAnalytics.razor.rz.scp.css */
/* ==========================================================================
   SeoAnalytics.razor.css — Admin SEO Analytics Page
   ========================================================================== */

h2[b-v8dfnb3766] { margin: 0 0 16px; font-size: 20px; }
h3[b-v8dfnb3766] { margin: 20px 0 8px; font-size: 16px; }

.seo-controls[b-v8dfnb3766] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.seo-controls label[b-v8dfnb3766] {
    font-size: 13px;
    font-weight: bold;
}

.admin-input[b-v8dfnb3766] {
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 13px;
}

.seo-stats-grid[b-v8dfnb3766] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card[b-v8dfnb3766] {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    text-align: center;
}

.stat-number[b-v8dfnb3766] {
    font-size: 24px;
    font-weight: bold;
    color: #2e7d32;
}

.stat-label[b-v8dfnb3766] {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.admin-table[b-v8dfnb3766] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

.admin-table th[b-v8dfnb3766] {
    background: #f0f0f0;
    padding: 6px 10px;
    text-align: right;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}

.admin-table td[b-v8dfnb3766] {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
}

.admin-table tr:hover td[b-v8dfnb3766] {
    background: #fafafa;
}

/* Link Generator */
.link-generator[b-v8dfnb3766] {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    margin-top: 8px;
}

.gen-row[b-v8dfnb3766] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.gen-row label[b-v8dfnb3766] {
    min-width: 160px;
    font-size: 13px;
    font-weight: bold;
}

.gen-row input[b-v8dfnb3766] {
    flex: 1;
    max-width: 300px;
}

.generated-link[b-v8dfnb3766] {
    margin-top: 12px;
    padding: 8px 12px;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 3px;
    font-size: 13px;
    word-break: break-all;
}

.generated-link code[b-v8dfnb3766] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #1b5e20;
}

.platform-link[b-v8dfnb3766] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #a5d6a7;
}

.platform-name[b-v8dfnb3766] {
    font-size: 12px;
    font-weight: bold;
    color: #2e7d32;
}

@media (max-width: 600px) {
    .seo-stats-grid[b-v8dfnb3766] {
        grid-template-columns: repeat(2, 1fr);
    }
    .gen-row[b-v8dfnb3766] {
        flex-direction: column;
        align-items: stretch;
    }
    .gen-row label[b-v8dfnb3766] {
        min-width: unset;
    }
    .gen-row input[b-v8dfnb3766] {
        max-width: unset;
    }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
/* ==========================================================================
   Settings.razor.css — Scoped styles for the modular admin settings page
   Responsive grid that collapses to single column on mobile

   NOTE: ::deep is required for all selectors that target elements rendered
   inside child components (BasicInfoSection, SpeedsSection, etc.) or shared
   components (SettingsSection, SettingsField, RangeField, ToggleField).
   Blazor scoped CSS only applies to elements directly in Settings.razor.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════
   1. PAGE SHELL (direct elements in Settings.razor)
   ════════════════════════════════════════════════════════════════════════ */

.admin-settings[b-9kqa471e2m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Status alert ── */
.admin-settings__alert[b-9kqa471e2m] {
    border-radius: var(--adm-radius-sm);
    padding: 10px 16px;
    font-size: .9rem;
    font-weight: 600;
    animation: adm-slide-in .25s var(--adm-ease);
}

.admin-settings__alert--error[b-9kqa471e2m] {
    background: var(--adm-danger-bg);
    color: var(--adm-danger);
    border: 1px solid var(--adm-danger-border);
}

.admin-settings__alert--success[b-9kqa471e2m] {
    background: var(--adm-success-bg);
    color: var(--adm-success);
    border: 1px solid var(--adm-success-border);
}

/* ── Server selector ── */
.admin-settings__server-selector[b-9kqa471e2m] {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 16px;
    box-shadow: var(--adm-shadow-sm);
}

.admin-settings__server-selector select[b-9kqa471e2m] {
    width: 100%;
    max-width: 400px;
}

/* ── Auto-balance bar ── */
.admin-settings__balance-bar[b-9kqa471e2m] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 1.5px solid #c4b5fd;
    border-radius: var(--adm-radius);
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-settings__balance-bar input[type="number"][b-9kqa471e2m] {
    width: 120px;
}

.admin-settings__balance-result[b-9kqa471e2m] {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: var(--adm-radius-sm);
    font-size: .85rem;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    width: 100%;
}

/* ── Button row ── */
.adm-button-row[b-9kqa471e2m] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 24px;
}

.adm-button-row--start[b-9kqa471e2m] {
    justify-content: flex-start;
}

/* ── Danger zone ── */
.admin-settings__danger[b-9kqa471e2m] {
    border: 1px solid #fca5a5;
    border-radius: var(--adm-radius);
    overflow: hidden;
}

.admin-settings__danger-header[b-9kqa471e2m] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    padding: 12px 16px;
    font-weight: 700;
    font-size: .95rem;
}

.admin-settings__danger-body[b-9kqa471e2m] {
    background: var(--adm-bg-card);
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ── Sticky save bar on mobile ── */
.admin-settings__sticky-save[b-9kqa471e2m] {
    position: sticky;
    bottom: 0;
    background: var(--adm-bg-card);
    border-top: 1px solid var(--adm-border);
    padding: 10px 16px;
    display: none;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .admin-settings__sticky-save[b-9kqa471e2m] {
        display: flex;
    }
    .admin-settings[b-9kqa471e2m] {
        padding: 8px;
        gap: 12px;
    }
    .adm-button-row[b-9kqa471e2m] {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   2. SHARED COMPONENT STYLES (via ::deep — applies to child components)
   ════════════════════════════════════════════════════════════════════════ */

/* ── SettingsSection (collapsible card) ── */
[b-9kqa471e2m] .adm-section {
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    overflow: visible;
    box-shadow: var(--adm-shadow-sm);
    transition: border-color var(--adm-duration) var(--adm-ease);
    margin-bottom: 16px;
}

[b-9kqa471e2m] .adm-section--open {
    border-color: var(--adm-border);
}

[b-9kqa471e2m] .adm-section--closed {
    border-color: var(--adm-border-light);
}

[b-9kqa471e2m] .adm-section__header {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: var(--adm-bg-muted);
    border-radius: var(--adm-radius) var(--adm-radius) 0 0;
    transition: background var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-section__header:hover {
    background: var(--adm-bg-hover);
}

[b-9kqa471e2m] .adm-section__toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--adm-text-heading);
    text-align: right;
}

[b-9kqa471e2m] .adm-section__icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

[b-9kqa471e2m] .adm-section__title {
    flex: 1;
}

[b-9kqa471e2m] .adm-section__badge {
    background: var(--adm-accent-light);
    color: var(--adm-accent);
    border-radius: var(--adm-radius-xs);
    padding: 2px 8px;
    font-size: .75rem;
    font-weight: 600;
}

[b-9kqa471e2m] .adm-section__chevron {
    color: var(--adm-text-muted);
    font-size: .85rem;
    flex-shrink: 0;
}

[b-9kqa471e2m] .adm-section__body {
    padding: 16px;
}

[b-9kqa471e2m] .adm-section__action {
    margin-bottom: 12px;
}

/* ── SectionHelp (clickable ❓ + popover guide) ── */
[b-9kqa471e2m] .adm-help {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex-shrink: 0;
}

/* Field-level variants: inline in a label, small icon, no extra padding */
[b-9kqa471e2m] .adm-help--field {
    display: inline-flex;
    padding: 0;
    margin-inline-start: 4px;
    vertical-align: middle;
}

[b-9kqa471e2m] .adm-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[b-9kqa471e2m] .adm-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--adm-border);
    background: var(--adm-bg-card);
    cursor: help;
    user-select: none;
    font-size: .8rem;
    line-height: 1;
    transition: background var(--adm-duration) var(--adm-ease), border-color var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-help__btn:hover {
    background: var(--adm-accent-light);
    border-color: var(--adm-accent);
}

[b-9kqa471e2m] .adm-help__btn--sm {
    width: 18px;
    height: 18px;
    font-size: .62rem;
}

[b-9kqa471e2m] .adm-help__popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 1080;
    width: 340px;
    max-width: min(340px, 90vw);
    background: var(--adm-bg-card);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    box-shadow: var(--adm-shadow-lg);
    padding: 10px 12px;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-help:hover .adm-help__popover,
[b-9kqa471e2m] .adm-help:focus-within .adm-help__popover {
    opacity: 1;
    visibility: visible;
}

[b-9kqa471e2m] .adm-help__body {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--adm-text-sec);
    white-space: normal;
}

/* ── SettingsField (labelled input wrapper) ── */
[b-9kqa471e2m] .adm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: var(--adm-field-max-width, 100%);
}

[b-9kqa471e2m] .adm-field__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--adm-text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-9kqa471e2m] .adm-field__input {
    display: flex;
    align-items: center;
}

[b-9kqa471e2m] .adm-field__input .adm-input,
[b-9kqa471e2m] .adm-field__input .adm-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    font-size: .85rem;
    background: var(--adm-bg-input);
    color: var(--adm-text);
    transition: border-color var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-field__input .adm-input:focus,
[b-9kqa471e2m] .adm-field__input .adm-select:focus {
    border-color: var(--adm-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--adm-accent-light);
}

[b-9kqa471e2m] .adm-field__hint {
    font-size: .75rem;
    color: var(--adm-text-muted);
    margin-top: 2px;
}

[b-9kqa471e2m] .adm-field__help {
    position: relative;
    display: inline-flex;
    cursor: help;
    font-size: .75rem;
}

[b-9kqa471e2m] .adm-field__tip {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--adm-text-heading);
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--adm-radius-xs);
    font-size: .75rem;
    font-weight: 400;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--adm-duration) var(--adm-ease);
    z-index: 10;
}

[b-9kqa471e2m] .adm-field__help:hover .adm-field__tip,
[b-9kqa471e2m] .adm-field__help:focus-within .adm-field__tip {
    opacity: 1;
}

/* ── ToggleField (styled switch) ── */
[b-9kqa471e2m] .adm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: .85rem;
    color: var(--adm-text);
}

[b-9kqa471e2m] .adm-toggle--inline {
    display: inline-flex;
}

[b-9kqa471e2m] .adm-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

[b-9kqa471e2m] .adm-toggle__track {
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: var(--adm-border-strong);
    position: relative;
    transition: background var(--adm-duration) var(--adm-ease);
    flex-shrink: 0;
}

[b-9kqa471e2m] .adm-toggle__thumb {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--adm-shadow-xs);
    transition: transform var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-toggle__input:checked + .adm-toggle__track {
    background: var(--adm-accent);
}

[b-9kqa471e2m] .adm-toggle__input:checked + .adm-toggle__track .adm-toggle__thumb {
    transform: translateX(-16px);
}

[b-9kqa471e2m] .adm-toggle__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── RangeField (dual range slider + numeric input) ── */
[b-9kqa471e2m] .adm-range {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-9kqa471e2m] .adm-range__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--adm-text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-9kqa471e2m] .adm-range__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-9kqa471e2m] .adm-range__slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: var(--adm-border);
    outline: none;
    cursor: pointer;
    min-width: 80px;
}

[b-9kqa471e2m] .adm-range__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--adm-accent);
    border: 2px solid #fff;
    box-shadow: var(--adm-shadow-xs);
    cursor: grab;
    transition: transform var(--adm-duration) var(--adm-ease);
}

[b-9kqa471e2m] .adm-range__slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

[b-9kqa471e2m] .adm-range__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--adm-accent);
    border: 2px solid #fff;
    box-shadow: var(--adm-shadow-xs);
    cursor: grab;
}

[b-9kqa471e2m] .adm-range__number {
    width: 72px;
    padding: 4px 6px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    font-size: .85rem;
    text-align: center;
    background: var(--adm-bg-input);
    color: var(--adm-text);
    flex-shrink: 0;
}

[b-9kqa471e2m] .adm-range__number:focus {
    border-color: var(--adm-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--adm-accent-light);
}

[b-9kqa471e2m] .adm-range__suffix {
    font-size: .78rem;
    color: var(--adm-text-muted);
    flex-shrink: 0;
}

[b-9kqa471e2m] .adm-range__hint {
    font-size: .75rem;
    color: var(--adm-text-muted);
    margin-top: 2px;
}

/* ── ResourceMultiplierGroup ── */
[b-9kqa471e2m] .adm-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    [b-9kqa471e2m] .adm-resource-grid {
        grid-template-columns: 1fr 1fr;
    }
}

[b-9kqa471e2m] .adm-resource-grid__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-9kqa471e2m] .adm-resource-grid__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--adm-text-sec);
}

[b-9kqa471e2m] .adm-resource-grid__control {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-9kqa471e2m] .adm-resource-grid__cell--wood .adm-resource-grid__label::before { content: "🪵 "; }
[b-9kqa471e2m] .adm-resource-grid__cell--clay .adm-resource-grid__label::before { content: "🧱 "; }
[b-9kqa471e2m] .adm-resource-grid__cell--iron .adm-resource-grid__label::before { content: "⛓️ "; }
[b-9kqa471e2m] .adm-resource-grid__cell--crop .adm-resource-grid__label::before { content: "🌾 "; }

/* ════════════════════════════════════════════════════════════════════════
   3. SECTION-SPECIFIC LAYOUTS (via ::deep — used inside child components)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Grid layouts (responsive) ── */
[b-9kqa471e2m] .adm-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

[b-9kqa471e2m] .adm-grid--2 { grid-template-columns: 1fr 1fr; }
[b-9kqa471e2m] .adm-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
[b-9kqa471e2m] .adm-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

@media (max-width: 768px) {
    [b-9kqa471e2m] .adm-grid--2,
    [b-9kqa471e2m] .adm-grid--3,
    [b-9kqa471e2m] .adm-grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    [b-9kqa471e2m] .adm-grid--4 {
        grid-template-columns: 1fr 1fr;
    }
    [b-9kqa471e2m] .adm-grid--3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Toggle row ── */
[b-9kqa471e2m] .adm-toggle-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 12px;
}

[b-9kqa471e2m] .adm-toggle-row--start {
    margin-top: 0;
    margin-bottom: 12px;
}

/* ── Subsection title ── */
[b-9kqa471e2m] .adm-subsection-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: .88rem;
    color: #374151;
    margin-top: 16px;
}

[b-9kqa471e2m] .adm-subsection-title:first-child {
    margin-top: 0;
}

/* ── Help text ── */
[b-9kqa471e2m] .adm-help-text {
    margin-top: 8px;
    font-size: .82rem;
    color: var(--adm-text-muted);
}

/* ── Manual phase trigger ── */
[b-9kqa471e2m] .adm-phase-trigger {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

[b-9kqa471e2m] .adm-phase-trigger__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ── Smart balance card ── */
[b-9kqa471e2m] .adm-smart-balance {
    background: linear-gradient(135deg, #fdf4ff, #ede9fe);
    border: 1.5px solid #c4b5fd;
    border-radius: var(--adm-radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}

[b-9kqa471e2m] .adm-smart-balance__title {
    font-weight: 700;
    font-size: .9rem;
    color: #5b21b6;
    margin-bottom: 10px;
}

[b-9kqa471e2m] .adm-smart-balance__desc {
    font-size: .82rem;
    color: #6b7280;
    margin-bottom: 10px;
}

[b-9kqa471e2m] .adm-smart-balance__result {
    margin-top: 10px;
    font-size: .82rem;
    color: #5b21b6;
    background: #ede9fe;
    padding: 8px 12px;
    border-radius: var(--adm-radius-sm);
}

/* ── Daily reward category card ── */
[b-9kqa471e2m] .adm-reward-cat {
    border: 1px solid #e5e7eb;
    border-radius: var(--adm-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
}

[b-9kqa471e2m] .adm-reward-cat__title {
    font-weight: 600;
    margin-bottom: 8px;
}

/* ── Wonder points subsection ── */
[b-9kqa471e2m] .adm-wonder-section {
    margin-bottom: 12px;
}

[b-9kqa471e2m] .adm-wonder-section-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: .88rem;
    color: #374151;
}

/* ════════════════════════════════════════════════════════════════════════
   4. ANIMATIONS
   ════════════════════════════════════════════════════════════════════════ */

@@keyframes adm-slide-in {
    from[b-9kqa471e2m] { opacity: 0; transform: translateY(-8px); }
    to[b-9kqa471e2m] { opacity: 1; transform: translateY(0); }
}
/* /Components/Pages/Gold/PlusPage.razor.rz.scp.css */
/* ==========================================================================
   PlusPage � Gold Store  (responsive � Travian-authentic � proper UI/UX)
   ========================================================================== */

/* ?? Page wrapper ?? */
#plus_page[b-0md15x1jr5] {
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    color: var(--text-primary);
    max-width: 720px;
    margin: 0 auto;
    padding: 0 6px 20px;
}

/* ??????????????????????????????????????
   Gold Balance Hero
   ?????????????????????????????????????? */
.gold-hero[b-0md15x1jr5] {
    text-align: center;
    padding: 16px 12px 12px;
    margin-bottom: 4px;
    background: linear-gradient(to bottom, #fffdf3, #fff8e1);
    border: 1px solid #e8d88c;
    border-radius: 6px;
}

.gold-hero-label[b-0md15x1jr5] {
    font-size: 13px;
    color: #8b7730;
    margin-bottom: 2px;
}

.gold-hero-amount[b-0md15x1jr5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gold-hero-amount b[b-0md15x1jr5] {
    font-size: 28px;
    font-weight: 900;
    color: #5a4a0a;
    letter-spacing: -0.5px;
}

.gold-hero-amount img[b-0md15x1jr5] {
    width: 20px;
    height: 20px;
}

.gold-hero-breakdown[b-0md15x1jr5] {
    margin-top: 6px;
    font-size: 12px;
    color: #8b7730;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.gold-hero-breakdown b[b-0md15x1jr5] {
    color: #5a4a0a;
    font-weight: 700;
}

.gold-hero-breakdown .gold-sep[b-0md15x1jr5] {
    color: #c0a850;
}

/* ??????????????????????????????????????
   Tab Navigation
   ?????????????????????????????????????? */
#plus_page nav#textmenu[b-0md15x1jr5] {
    text-align: center;
    margin: 10px 0 12px;
    font-size: 13px;
    line-height: 1.8;
}

#plus_page nav#textmenu a[b-0md15x1jr5] {
    color: var(--text-link);
    text-decoration: none;
    padding: 4px 10px;
    transition: color .15s;
}

#plus_page nav#textmenu a:hover[b-0md15x1jr5] {
    color: var(--text-link-hover);
}

#plus_page nav#textmenu a.selected[b-0md15x1jr5] {
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 2px solid var(--text-link);
}

#plus_page nav#textmenu .sep[b-0md15x1jr5] {
    color: #ccc;
    margin: 0 2px;
}

/* ??????????????????????????????????????
   Toast / Status Messages
   ?????????????????????????????????????? */
.gold-toast[b-0md15x1jr5] {
    padding: 8px 14px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.toast-ok[b-0md15x1jr5] {
    background: #e8f5e9;
    border: 1px solid #81c784;
    color: #2e7d32;
}

.toast-err[b-0md15x1jr5] {
    background: #fbe9e7;
    border: 1px solid #ef9a9a;
    color: #c62828;
}

/* ??????????????????????????????????????
   Main Store Table
   ?????????????????????????????????????? */
.plus-table[b-0md15x1jr5] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-light);
    background: var(--bg-content);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* ?? Head ?? */
.plus-table thead th[b-0md15x1jr5] {
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    color: #000;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 10px;
    height: 28px;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
}

.plus-table .col-desc[b-0md15x1jr5] { text-align: right; width: 46%; }
.plus-table .col-dur[b-0md15x1jr5]  { width: 18%; }
.plus-table .col-cost[b-0md15x1jr5] { width: 14%; }
.plus-table .col-act[b-0md15x1jr5]  { width: 22%; }

/* ?? Body cells ?? */
.plus-table tbody td[b-0md15x1jr5] {
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.plus-table tbody tr:nth-child(even):not(.row-sep) td[b-0md15x1jr5] {
    background: var(--bg-table-even);
}

.plus-table tbody tr:hover:not(.row-sep):not(.row-buy) td[b-0md15x1jr5] {
    background: #f5f5f0;
}

/* ?? Description cell ?? */
.td-desc[b-0md15x1jr5] {
    text-align: right;
}

.td-desc .item-main[b-0md15x1jr5] {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.5;
}

.td-desc .item-main img[b-0md15x1jr5] {
    vertical-align: middle;
    margin: 0 3px;
}

.td-desc .item-sub[b-0md15x1jr5] {
    font-size: 11px;
    font-weight: normal;
    color: var(--text-secondary);
    margin-top: 1px;
    line-height: 1.4;
}

/* ?? Duration cell ?? */
.td-dur[b-0md15x1jr5] {
    text-align: center;
    white-space: nowrap;
}

/* ?? Cost cell ?? */
.td-cost[b-0md15x1jr5] {
    text-align: center;
    white-space: nowrap;
}

.cost-num[b-0md15x1jr5] {
    font-weight: bold;
    color: var(--text-primary);
    margin-inline-end: 2px;
}

.cost-big[b-0md15x1jr5] {
    font-size: 15px;
    color: #b8860b;
}

.td-cost img.gold[b-0md15x1jr5] {
    vertical-align: middle;
}

/* ?? Action cell ?? */
.td-act[b-0md15x1jr5] {
    text-align: center;
}

/* ??????????????????????????????????????
   Action Button (green Travian button)
   ?????????????????????????????????????? */
.btn-gold[b-0md15x1jr5] {
    display: inline-block;
    padding: 4px 14px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background .15s;
    line-height: 1.6;
}

.btn-gold:hover[b-0md15x1jr5] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
    color: #fff;
    text-decoration: none;
}

.btn-gold:active[b-0md15x1jr5] {
    background: #3d7c1a;
}

a.btn-link[b-0md15x1jr5] {
    display: inline-block;
}

.act-done[b-0md15x1jr5] {
    color: #999;
    font-size: 12px;
    font-weight: normal;
}

/* ??????????????????????????????????????
   Badges (active / inactive / permanent)
   ?????????????????????????????????????? */
.badge-active[b-0md15x1jr5] {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #a5d6a7;
    white-space: nowrap;
}

.badge-off[b-0md15x1jr5] {
    display: inline-block;
    color: #aaa;
    font-size: 11px;
    font-weight: normal;
}

.badge-cooldown[b-0md15x1jr5] {
    display: inline-block;
    background: #fff3e0;
    color: #e65100;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #ffcc80;
    white-space: normal;
}

.badge-perm[b-0md15x1jr5] {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #90caf9;
}

.dur-instant[b-0md15x1jr5] {
    color: #e65100;
    font-weight: bold;
    font-size: 12px;
}

.dur-val[b-0md15x1jr5] {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ??????????????????????????????????????
   Highlighted row (Plus Account)
   ?????????????????????????????????????? */
.row-marked td[b-0md15x1jr5] {
    background: #fffff0 !important;
    border-bottom: 1px solid #e8e6c0;
}

.row-marked:hover td[b-0md15x1jr5] {
    background: #fffde6 !important;
}

/* ?? Plus colorful letters ?? */
.c-green[b-0md15x1jr5]  { color: var(--plus-green); }
.c-orange[b-0md15x1jr5] { color: var(--plus-orange); }

/* ??????????????????????????????????????
   Separator rows
   ?????????????????????????????????????? */
.row-sep td[b-0md15x1jr5] {
    height: 5px;
    padding: 0 !important;
    background: var(--bg-table-head) !important;
    border: none !important;
}

/* ??????????????????????????????????????
   Buy Resources row
   ?????????????????????????????????????? */
.buy-amount[b-0md15x1jr5] {
    color: #2e7d32;
    font-weight: bold;
}

.buy-gold-val[b-0md15x1jr5] {
    font-weight: bold;
    color: var(--text-primary);
}

.buy-row[b-0md15x1jr5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inp-gold[b-0md15x1jr5] {
    width: 50px;
    padding: 3px 4px;
    border: 1px solid var(--border-medium);
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
    font-weight: bold;
    font-family: inherit;
    text-align: center;
}

.inp-gold:focus[b-0md15x1jr5] {
    outline: none;
    border-color: var(--text-link);
    box-shadow: 0 0 0 2px rgba(42, 122, 56, .15);
}

/* ??????????????????????????????????????
   Section Title (Transactions)
   ?????????????????????????????????????? */
.section-title[b-0md15x1jr5] {
    font-size: 15px;
    font-weight: bold;
    color: var(--text-heading);
    margin: 18px 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--border-light);
}

/* ??????????????????????????????????????
   Transactions Table
   ?????????????????????????????????????? */
.tx-table tbody td[b-0md15x1jr5] {
    text-align: center;
    font-size: 12px;
    font-weight: normal;
}

.tx-plus[b-0md15x1jr5] {
    color: #2e7d32;
    font-weight: bold !important;
}

.tx-minus[b-0md15x1jr5] {
    color: #c62828;
    font-weight: bold !important;
}

/* ????????????????????????????????????????
   Transactions Pagination
   ???????????????????????????????????????? */
.tx-pagination[b-0md15x1jr5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    padding: 6px 0;
}

.btn-page[b-0md15x1jr5] {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    border: 1px solid #a0a0a0;
    border-radius: 3px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    line-height: 1.6;
}

.btn-page:hover:not(:disabled)[b-0md15x1jr5] {
    background: linear-gradient(to bottom, #fff 0%, #d8d8d8 100%);
}

.btn-page:disabled[b-0md15x1jr5] {
    opacity: 0.45;
    cursor: default;
}

.page-info[b-0md15x1jr5] {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    min-width: 50px;
    text-align: center;
}

/* ??????????????????????????????????????
   Responsive � Tablet (? 600px)
   ?????????????????????????????????????? */
@media (max-width: 600px) {
    #plus_page[b-0md15x1jr5] {
        padding: 0 4px 16px;
    }

    .gold-hero[b-0md15x1jr5] {
        padding: 12px 8px 10px;
    }

    .gold-hero-amount b[b-0md15x1jr5] {
        font-size: 22px;
    }

    /* Table ? card layout */
    .plus-table thead[b-0md15x1jr5] {
        display: none;
    }

    .plus-table[b-0md15x1jr5],
    .plus-table tbody[b-0md15x1jr5],
    .plus-table tr[b-0md15x1jr5],
    .plus-table td[b-0md15x1jr5] {
        display: block;
        width: 100%;
    }

    .plus-table tbody tr[b-0md15x1jr5] {
        border: 1px solid var(--border-light);
        border-radius: 6px;
        margin-bottom: 8px;
        padding: 10px;
        background: var(--bg-content);
    }

    .plus-table tbody tr:hover[b-0md15x1jr5] {
        background: #fafafa;
    }

    /* Separator rows become invisible */
    .plus-table .row-sep[b-0md15x1jr5] {
        display: none;
    }

    /* Show data-labels */
    .plus-table tbody td[b-0md15x1jr5] {
        text-align: right;
        padding: 4px 0;
        border: none;
        position: relative;
    }

    .plus-table tbody td[data-label][b-0md15x1jr5]::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: var(--text-secondary);
        font-size: 11px;
        margin-inline-end: 6px;
    }

    /* Description cell stays full width */
    .td-desc[b-0md15x1jr5] {
        padding-bottom: 6px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 4px;
    }

    .td-desc .item-sub[b-0md15x1jr5] {
        margin-top: 3px;
    }

    /* Dur / Cost / Act inline */
    .td-dur[b-0md15x1jr5], .td-cost[b-0md15x1jr5], .td-act[b-0md15x1jr5] {
        display: inline-block !important;
        width: auto !important;
    }

    .td-dur[b-0md15x1jr5] {
        margin-inline-end: 12px;
    }

    .td-act[b-0md15x1jr5] {
        margin-top: 6px;
        display: block !important;
        text-align: center;
    }

    .btn-gold[b-0md15x1jr5] {
        width: 100%;
        padding: 8px;
        font-size: 14px;
    }

    /* Buy row */
    .row-buy td[b-0md15x1jr5] {
        display: block !important;
    }

    .row-buy .td-desc[b-0md15x1jr5] {
        border-bottom: none !important;
    }

    .buy-row[b-0md15x1jr5] {
        justify-content: center;
        width: 100%;
    }

    .inp-gold[b-0md15x1jr5] {
        width: 60px;
        font-size: 14px;
        padding: 6px;
    }

    /* Marked row */
    .row-marked td[b-0md15x1jr5] {
        background: #fffff0 !important;
    }

    /* Transactions card */
    .tx-table tbody td[b-0md15x1jr5]::before {
        display: inline;
    }

    .tx-table tbody td[b-0md15x1jr5] {
        text-align: right;
        font-size: 12px;
    }
}

/* ??????????????????????????????????????
   Responsive � Very small (? 380px)
   ?????????????????????????????????????? */
@media (max-width: 380px) {
    .gold-hero-amount b[b-0md15x1jr5] {
        font-size: 18px;
    }

    .gold-hero-label[b-0md15x1jr5] {
        font-size: 11px;
    }

    .plus-table tbody tr[b-0md15x1jr5] {
        padding: 8px 6px;
    }

    .td-desc .item-main[b-0md15x1jr5] {
        font-size: 13px;
    }

    .btn-gold[b-0md15x1jr5] {
        font-size: 13px;
    }
}

/* ??????????????????????????????????????
   Buy Gold Section (Tab 0)
   ?????????????????????????????????????? */
.gold-buy-section[b-0md15x1jr5] {
    text-align: center;
    padding: 10px 0;
}

.gold-buy-desc[b-0md15x1jr5] {
    color: #8b7730;
    font-size: 13px;
    margin-bottom: 16px;
}

.gold-packages-grid[b-0md15x1jr5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.gold-pkg-card[b-0md15x1jr5] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #fffef8, #fff3d0);
    border: 1px solid #e8d88c;
    border-radius: 10px;
    padding: 20px 12px 14px;
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.gold-pkg-card:hover[b-0md15x1jr5] {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(120, 90, 10, .18);
    border-color: #d9be55;
}

.gold-pkg-card.pkg-featured[b-0md15x1jr5] {
    border: 2px solid #c9a700;
    background: linear-gradient(to bottom, #fffbe8, #ffedaa);
    box-shadow: 0 0 14px rgba(201, 167, 0, .3);
}

.pkg-badge[b-0md15x1jr5] {
    position: absolute;
    top: -11px;
    right: 50%;
    transform: translateX(50%);
    background: linear-gradient(to bottom, #e53935, #b71c1c);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(183, 28, 28, .35);
    white-space: nowrap;
}

.pkg-name[b-0md15x1jr5] {
    font-size: 14px;
    font-weight: bold;
    color: #6b5410;
    margin-bottom: 10px;
}

.pkg-gold[b-0md15x1jr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
}

.pkg-gold-amount[b-0md15x1jr5] {
    font-size: 28px;
    font-weight: 900;
    color: #4d3c06;
    line-height: 1;
}

.pkg-gold img[b-0md15x1jr5] {
    width: 20px;
    height: 20px;
}

.pkg-bonus[b-0md15x1jr5] {
    font-size: 12px;
    color: #2e7d32;
    font-weight: bold;
    margin-bottom: 10px;
}

.pkg-bonus-empty[b-0md15x1jr5] {
    color: #a08c50;
    font-weight: normal;
}

.pkg-price[b-0md15x1jr5] {
    font-size: 16px;
    font-weight: bold;
    color: #1565c0;
    margin-bottom: 2px;
}

.pkg-price-alt[b-0md15x1jr5] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
}

.pkg-payment-actions[b-0md15x1jr5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.pkg-buy-btn[b-0md15x1jr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    line-height: 1.5;
    transition: filter .15s, transform .1s, opacity .15s;
}

.pkg-buy-btn:hover:not(:disabled)[b-0md15x1jr5] {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.pkg-buy-btn:active:not(:disabled)[b-0md15x1jr5] {
    transform: translateY(0);
}

.pkg-buy-btn:disabled[b-0md15x1jr5] {
    opacity: .55;
    cursor: default;
}

.pkg-buy-provider[b-0md15x1jr5] {
    font-weight: bold;
    white-space: nowrap;
}

.pkg-buy-price[b-0md15x1jr5] {
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
}

.pkg-buy-card[b-0md15x1jr5] {
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border-color: #3d7c1a;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

.pkg-buy-paypal[b-0md15x1jr5] {
    background: linear-gradient(to bottom, #ffd55e, #f8b400);
    border-color: #c58e00;
    color: #1a2f7a;
    text-shadow: none;
}

.gold-buy-footer[b-0md15x1jr5] {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
}

.gold-buy-footer p[b-0md15x1jr5] {
    margin: 2px 0;
}

/* ??????????????????????????????????????
   Payment Result Pages
   ?????????????????????????????????????? */
.payment-result[b-0md15x1jr5] {
    text-align: center;
    padding: 32px 16px;
    margin: 16px 0;
    border-radius: 8px;
    border: 1px solid #e8d88c;
    background: #fffdf3;
}

.payment-icon[b-0md15x1jr5] {
    font-size: 48px;
    margin-bottom: 12px;
}

.payment-result h2[b-0md15x1jr5] {
    font-size: 18px;
    margin-bottom: 8px;
    color: #5a4a0a;
}

.payment-result p[b-0md15x1jr5] {
    font-size: 14px;
    color: #666;
    margin: 4px 0;
}

.payment-success[b-0md15x1jr5] {
    border-color: #81c784;
    background: #e8f5e9;
}

.payment-success h2[b-0md15x1jr5] {
    color: #2e7d32;
}

.payment-failed[b-0md15x1jr5] {
    border-color: #ef9a9a;
    background: #ffebee;
}

.payment-failed h2[b-0md15x1jr5] {
    color: #c62828;
}

.payment-cancelled[b-0md15x1jr5] {
    border-color: #e0e0e0;
    background: #fafafa;
}

.payment-cancelled h2[b-0md15x1jr5] {
    color: #616161;
}

/* ??????????????????????????????????????
   Payment Method Popup
   ?????????????????????????????????????? */
.popup-overlay[b-0md15x1jr5] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-0md15x1jr5 .15s ease;
}

.popup-box[b-0md15x1jr5] {
    position: relative;
    background: #fff;
    border: 1px solid #e8d88c;
    border-radius: 10px;
    padding: 28px 24px 22px;
    width: 360px;
    max-width: 92vw;
    direction: rtl;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    animation: popIn-b-0md15x1jr5 .2s ease;
}

@keyframes fadeIn-b-0md15x1jr5 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn-b-0md15x1jr5 {
    from { transform: scale(.9); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.popup-close[b-0md15x1jr5] {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.popup-close:hover[b-0md15x1jr5] {
    color: #c62828;
    background: #fbe9e7;
}

.popup-title[b-0md15x1jr5] {
    font-size: 16px;
    font-weight: bold;
    color: #5a4a0a;
    margin: 0 0 4px;
}

.popup-desc[b-0md15x1jr5] {
    font-size: 12px;
    color: #888;
    margin: 0 0 18px;
}

.popup-methods[b-0md15x1jr5] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pay-method-card[b-0md15x1jr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    flex: 1;
    transition: border-color .15s, background .15s, transform .15s;
    font-family: inherit;
}

.pay-method-card:hover:not(:disabled)[b-0md15x1jr5] {
    border-color: #8BC34A;
    background: #f1f8e9;
    transform: translateY(-2px);
}

.pay-method-card:disabled[b-0md15x1jr5] {
    opacity: .5;
    cursor: default;
}

.pay-icon[b-0md15x1jr5] {
    font-size: 32px;
    line-height: 1;
}

.pay-label[b-0md15x1jr5] {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.pay-sub[b-0md15x1jr5] {
    font-size: 11px;
    color: #888;
    font-weight: normal;
}

.popup-loading[b-0md15x1jr5] {
    margin-top: 14px;
    font-size: 13px;
    color: #b8860b;
    font-weight: bold;
    animation: pulse-b-0md15x1jr5 1s infinite;
}

@keyframes pulse-b-0md15x1jr5 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}

/* ?? Mobile grid: 2 cards per row ?? */
@media (max-width: 600px) {
    .gold-packages-grid[b-0md15x1jr5] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gold-pkg-card[b-0md15x1jr5] {
        padding: 14px 8px 10px;
    }

    .pkg-name[b-0md15x1jr5] {
        font-size: 12px;
    }

    .pkg-gold-amount[b-0md15x1jr5] {
        font-size: 20px;
    }

    .pkg-bonus[b-0md15x1jr5] {
        font-size: 10px;
    }

    .pkg-price[b-0md15x1jr5] {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .pkg-buy-btn[b-0md15x1jr5] {
        font-size: 11px;
        padding: 6px 6px;
        gap: 4px;
    }

    .pkg-buy-price[b-0md15x1jr5] {
        font-size: 11px;
    }

    .pkg-badge[b-0md15x1jr5] {
        font-size: 9px;
        padding: 2px 8px;
        top: -9px;
    }

    .popup-methods[b-0md15x1jr5] {
        flex-direction: column;
        gap: 10px;
    }

    .pay-method-card[b-0md15x1jr5] {
        flex-direction: row;
        gap: 10px;
        padding: 12px 14px;
    }

    .pay-icon[b-0md15x1jr5] {
        font-size: 26px;
    }
}

@media (max-width: 380px) {
    .gold-packages-grid[b-0md15x1jr5] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gold-pkg-card[b-0md15x1jr5] {
        padding: 14px 8px 10px;
    }

    .pkg-name[b-0md15x1jr5] {
        font-size: 12px;
    }

    .pkg-gold-amount[b-0md15x1jr5] {
        font-size: 20px;
    }
}
/* /Components/Pages/Guide/GameGuide.razor.rz.scp.css */
/* ==========================================================================
   GameGuide.razor.css — In-Game Guide popup overlay
   Matches game's classic white/green/gray Travian theme
   ========================================================================== */

/* --- Overlay --- */
.guide-overlay[b-882zuttya7] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-882zuttya7 0.2s ease;
}

@keyframes fadeIn-b-882zuttya7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Popup container --- */
.guide-popup[b-882zuttya7] {
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-medium, #CCCCCC);
    width: 95vw;
    max-width: 1100px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* --- Header --- */
.guide-header[b-882zuttya7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
    border-bottom: 2px solid #999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    height: 38px;
    color: #333;
}

.guide-header h2[b-882zuttya7] {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.guide-close[b-882zuttya7] {
    background: none;
    border: 1px solid #999;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.guide-close:hover[b-882zuttya7] {
    background: rgba(0, 0, 0, 0.1);
    color: #222;
}

/* --- Body layout --- */
.guide-body[b-882zuttya7] {
    display: flex;
    flex: 1;
    overflow: hidden;
    direction: rtl;
}

/* --- Right navigation (RTL: appears on right) --- */
.guide-nav[b-882zuttya7] {
    width: 200px;
    min-width: 200px;
    background: var(--bg-sidebar, #FFFFFF);
    border-left: 1px solid var(--border-light, #E0E0E0);
    overflow-y: auto;
    padding: 6px 0;
}

.guide-nav ul[b-882zuttya7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guide-nav li[b-882zuttya7] {
    margin: 0;
}

.guide-nav li.nav-header[b-882zuttya7] {
    padding: 8px 12px 3px;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-secondary, #555555);
    text-transform: uppercase;
    border-top: 1px solid var(--border-light, #E0E0E0);
    margin-top: 4px;
}

.guide-nav li.nav-header:first-child[b-882zuttya7] {
    border-top: none;
    margin-top: 0;
}

.guide-nav li a[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.guide-nav li a:hover[b-882zuttya7] {
    color: #FF8F00;
    text-decoration: underline;
}

.guide-nav li.active a[b-882zuttya7] {
    background: var(--bg-nav, #4A7B3F);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

.guide-nav .nav-icon[b-882zuttya7] {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* --- Content area --- */
.guide-content[b-882zuttya7] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    direction: rtl;
    background: var(--bg-content, #FFFFFF);
}

/* --- Guide section --- */
.guide-section h3[b-882zuttya7] {
    color: var(--text-heading, #111111);
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-light, #E0E0E0);
}

.guide-section h4[b-882zuttya7] {
    color: var(--text-heading, #111111);
    font-size: 15px;
    font-weight: bold;
    margin: 14px 0 6px;
}

.guide-intro[b-882zuttya7] {
    color: var(--text-secondary, #555555);
    font-size: 14px;
    margin-bottom: 16px;
}

.guide-subtitle[b-882zuttya7] {
    color: var(--text-secondary, #555555);
    font-size: 14px;
    margin-bottom: 12px;
}

/* --- Index grid --- */
.index-grid[b-882zuttya7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.index-card[b-882zuttya7] {
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.12s;
}

.index-card:hover[b-882zuttya7] {
    border-color: var(--border-green, #2E8B57);
    background: #F5FFF5;
}

.index-card img[b-882zuttya7] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 6px;
}

.index-card img.building-thumb[b-882zuttya7] {
    width: 56px;
    height: 56px;
}

.index-card h4[b-882zuttya7] {
    margin: 4px 0;
    color: var(--text-heading, #111111);
    font-size: 15px;
}

.index-card p[b-882zuttya7] {
    margin: 0;
    color: var(--text-secondary, #555555);
    font-size: 13px;
}

/* --- Tribe section --- */
.tribe-header[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
}

.tribe-banner[b-882zuttya7] {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.tribe-desc[b-882zuttya7] {
    color: var(--text-secondary, #555555);
    font-size: 14px;
    margin: 4px 0 0;
}

.tribe-features ul[b-882zuttya7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tribe-features li[b-882zuttya7] {
    padding: 5px 0;
    font-size: 14px;
    color: var(--text-primary, #222222);
    border-bottom: 1px solid var(--border-light, #E0E0E0);
}

.tribe-features li:last-child[b-882zuttya7] {
    border-bottom: none;
}

/* --- Units grid --- */
.units-grid[b-882zuttya7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.unit-card[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.unit-card:hover[b-882zuttya7] {
    border-color: var(--border-green, #2E8B57);
    background: #F5FFF5;
}

.unit-icon[b-882zuttya7] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.unit-info[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unit-name[b-882zuttya7] {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-heading, #111111);
}

.unit-stats[b-882zuttya7] {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #555555);
}

/* --- Buildings list --- */
.buildings-list[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.building-row[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.building-row:hover[b-882zuttya7] {
    border-color: var(--border-green, #2E8B57);
    background: #F5FFF5;
}

.building-icon[b-882zuttya7] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.building-info[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.building-name[b-882zuttya7] {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-heading, #111111);
}

.building-desc[b-882zuttya7] {
    font-size: 13px;
    color: var(--text-secondary, #555555);
    white-space: normal;
}

/* --- Detail view --- */
.back-btn[b-882zuttya7] {
    background: #2F9F2F;
    border: 1px solid #1B5E20;
    color: #fff;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.15s;
}

.back-btn:hover[b-882zuttya7] {
    background: #388E3C;
}

.detail-header[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
}

.detail-img[b-882zuttya7] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

.unit-detail-img[b-882zuttya7] {
    width: 56px;
    height: 56px;
}

.detail-header h3[b-882zuttya7] {
    border: none;
    padding: 0;
    margin: 0 0 4px;
}

.detail-header p[b-882zuttya7] {
    margin: 0;
    color: var(--text-secondary, #555555);
    font-size: 14px;
}

.detail-meta[b-882zuttya7] {
    font-size: 13px;
    color: var(--border-dark, #999999);
}

/* --- Cost table (matches .trav-table from game) --- */
.cost-table-wrap[b-882zuttya7] {
    overflow-x: auto;
}

.cost-table[b-882zuttya7] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-light, #E0E0E0);
    font-size: 14px;
    margin-bottom: 8px;
}

.cost-table th[b-882zuttya7] {
    background: var(--bg-table-head, #E5E7EA);
    color: var(--text-heading, #111111);
    padding: 4px 8px;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
    border-bottom: 1px solid var(--border-medium, #CCCCCC);
}

.cost-table td[b-882zuttya7] {
    padding: 3px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-light, #E0E0E0);
    color: var(--text-primary, #222222);
}

.cost-table tbody tr:nth-child(even)[b-882zuttya7] {
    background: var(--bg-table-even, #F9F9FB);
}

.cost-table tbody tr:nth-child(odd)[b-882zuttya7] {
    background: var(--bg-table-odd, #FCFCFC);
}

.cost-table tbody tr:hover[b-882zuttya7] {
    background: #F0F0F0;
}

.cost-table .r1[b-882zuttya7],
.cost-table .r2[b-882zuttya7],
.cost-table .r3[b-882zuttya7],
.cost-table .r4[b-882zuttya7] {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

/* --- Unit detail stats --- */
.unit-detail-stats .cost-table[b-882zuttya7] {
    max-width: 500px;
}

/* --- Guide text (info pages) --- */
.guide-text[b-882zuttya7] {
    line-height: 1.8;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #222222);
}

.guide-text ol[b-882zuttya7],
.guide-text ul[b-882zuttya7] {
    padding-right: 20px;
    margin: 8px 0;
}

.guide-text li[b-882zuttya7] {
    margin-bottom: 5px;
}

.guide-text p[b-882zuttya7] {
    margin: 6px 0;
}

/* --- Scrollbar styling --- */
.guide-nav[b-882zuttya7]::-webkit-scrollbar,
.guide-content[b-882zuttya7]::-webkit-scrollbar {
    width: 6px;
}

.guide-nav[b-882zuttya7]::-webkit-scrollbar-track,
.guide-content[b-882zuttya7]::-webkit-scrollbar-track {
    background: transparent;
}

.guide-nav[b-882zuttya7]::-webkit-scrollbar-thumb,
.guide-content[b-882zuttya7]::-webkit-scrollbar-thumb {
    background: var(--border-medium, #CCCCCC);
    border-radius: 3px;
}

.guide-nav[b-882zuttya7]::-webkit-scrollbar-thumb:hover,
.guide-content[b-882zuttya7]::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark, #999999);
}

/* --- Map Guide: Specs box --- */
.map-specs-box[b-882zuttya7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    background: #f0f7e6;
    border: 1px solid #b5d48a;
    border-radius: 4px;
    margin: 10px 0;
    font-size: 13px;
    color: #333;
}

.map-specs-box span[b-882zuttya7] {
    white-space: nowrap;
}

/* --- Map Guide: Tip box --- */
.map-tip[b-882zuttya7] {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-right: 4px solid #ffc107;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 13px;
    color: #5d4037;
    border-radius: 3px;
}

/* --- Map Guide: Tribe grid --- */
.map-tribe-grid[b-882zuttya7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.map-tribe-card[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
    text-align: center;
}

.map-tribe-card img[b-882zuttya7] {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.map-tribe-card strong[b-882zuttya7] {
    font-size: 14px;
    color: var(--text-heading, #111);
}

.map-tribe-card span[b-882zuttya7] {
    font-size: 12px;
    color: var(--text-secondary, #555);
}

/* --- Map Guide: Flags grid --- */
.map-flags-grid[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}

.map-flag-item[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
}

.map-flag-dot[b-882zuttya7] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.2);
}

.map-flag-item div[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.map-flag-item strong[b-882zuttya7] {
    font-size: 13px;
    color: var(--text-heading, #111);
}

.map-flag-item span[b-882zuttya7] {
    font-size: 12px;
    color: var(--text-secondary, #555);
}

/* --- Map Guide: Movements grid --- */
.map-movements-grid[b-882zuttya7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.map-move-item[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--bg-content, #FFFFFF);
    border: 1px solid var(--border-light, #E0E0E0);
    font-size: 13px;
}

.map-move-dot[b-882zuttya7] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid;
}

/* --- Map Guide: Button icons in tables --- */
.map-btn-icon[b-882zuttya7] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: 0 2px;
}

/* --- Map Guide: Layers stack --- */
.map-layers-stack[b-882zuttya7] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0;
    border: 1px solid var(--border-light, #E0E0E0);
    border-radius: 4px;
    overflow: hidden;
}

.map-layer-row[b-882zuttya7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-primary, #222);
    border-bottom: 1px solid var(--border-light, #E0E0E0);
    background: #fafafa;
}

.map-layer-row:last-child[b-882zuttya7] {
    border-bottom: none;
}

.map-layer-row.map-layer-bg[b-882zuttya7] {
    background: #c5de89;
    color: #3a5a0a;
    font-weight: bold;
}

.map-layer-num[b-882zuttya7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    background: var(--bg-nav, #4A7B3F);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
    flex-shrink: 0;
}

/* --- Map Guide: Index emoji placeholder --- */
.index-emoji[b-882zuttya7] {
    font-size: 42px;
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}

/* --- Mobile responsiveness --- */
@media (max-width: 768px) {
    .guide-popup[b-882zuttya7] {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        border: none;
    }

    .guide-body[b-882zuttya7] {
        flex-direction: column;
    }

    .guide-nav[b-882zuttya7] {
        width: 100%;
        min-width: unset;
        max-height: 180px;
        border-left: none;
        border-bottom: 1px solid var(--border-light, #E0E0E0);
    }

    .guide-nav ul[b-882zuttya7] {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        padding: 4px;
    }

    .guide-nav li.nav-header[b-882zuttya7] {
        display: none;
    }

    .guide-nav li a[b-882zuttya7] {
        padding: 4px 8px;
        font-size: 11px;
        border: 1px solid var(--border-light, #E0E0E0);
        white-space: nowrap;
    }

    .guide-nav li.active a[b-882zuttya7] {
        border-color: var(--border-green, #2E8B57);
    }

    .guide-content[b-882zuttya7] {
        padding: 12px;
    }

    .index-grid[b-882zuttya7] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .units-grid[b-882zuttya7] {
        grid-template-columns: 1fr;
    }

    .tribe-header[b-882zuttya7] {
        flex-direction: column;
        text-align: center;
    }

    .detail-header[b-882zuttya7] {
        flex-direction: column;
        text-align: center;
    }

    .map-tribe-grid[b-882zuttya7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-specs-box[b-882zuttya7] {
        flex-direction: column;
        gap: 6px;
    }

    .map-movements-grid[b-882zuttya7] {
        flex-direction: column;
    }
}
/* /Components/Pages/Hero/HeroPage.razor.rz.scp.css */
/* ==========================================================================
   HeroPage.razor.css — Hero Page (game-style design)
   Portrait · Distribution · Rename · Oases · Actions
   ========================================================================== */

h1[b-z9s9oye4jj] {
    margin: 0 0 14px;
    padding: 8px 12px;
    font-size: 26px;
    font-weight: bold;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
    background: linear-gradient(to left, #f0f0f0, transparent 70%);
    border-right: 3px solid #999;
    border-radius: 0 4px 4px 0;
}

/* --- Status Box (Training / Reviving) --- */
.hero-status-box[b-z9s9oye4jj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    background: #fefce8;
    border: 1px solid #d4b44a;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #7a6320;
}

.hero-status-box.reviving[b-z9s9oye4jj] {
    background: #fef2f2;
    border-color: #c87070;
    color: #8b3030;
}

/* --- Hero Profile Header --- */
.hero-profile-header[b-z9s9oye4jj] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px;
    margin-bottom: 14px;
    background: #f9f9f9;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 5px;
}

.hero-portrait-wrap[b-z9s9oye4jj] {
    position: relative;
    flex-shrink: 0;
}

.hero-portrait-img[b-z9s9oye4jj] {
    width: 96px;
    height: 96px;
    border-radius: 5px;
    border: 2px solid #c0c0c0;
    background: #f0f0f0;
    object-fit: cover;
}

.hero-dead-badge[b-z9s9oye4jj] {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: #b91c1c;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.hero-profile-info[b-z9s9oye4jj] {
    flex: 1;
    min-width: 0;
}

.hero-profile-name[b-z9s9oye4jj] {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.hero-profile-unit[b-z9s9oye4jj] {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.hero-profile-unit b[b-z9s9oye4jj] {
    color: #333;
}

/* Health Bar in header */
.hero-health-row[b-z9s9oye4jj],
.hero-xp-row[b-z9s9oye4jj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}

.hero-health-label[b-z9s9oye4jj],
.hero-xp-label[b-z9s9oye4jj] {
    width: 42px;
    font-weight: bold;
    color: #555;
    flex-shrink: 0;
}

.hero-health-track[b-z9s9oye4jj],
.hero-xp-track[b-z9s9oye4jj] {
    flex: 1;
    height: 12px;
    background: #e8e8e8;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    max-width: 200px;
}

.hero-health-fill[b-z9s9oye4jj] {
    height: 100%;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border-radius: 2px;
    transition: width 0.3s;
}

.hero-health-fill.low[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #ffb74d, #e65100);
}

.hero-health-fill.critical[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #ef5350, #b71c1c);
}

.hero-xp-fill[b-z9s9oye4jj] {
    height: 100%;
    background: linear-gradient(to bottom, #64b5f6, #1565c0);
    border-radius: 2px;
    transition: width 0.3s;
}

.hero-health-val[b-z9s9oye4jj] {
    font-weight: bold;
    color: #333;
    min-width: 36px;
}

.hero-xp-val[b-z9s9oye4jj] {
    color: #555;
    font-size: 12px;
    min-width: 50px;
}

/* --- Dead Hero Banner --- */
.hero-dead-banner[b-z9s9oye4jj] {
    padding: 8px 14px;
    margin-bottom: 12px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    color: #991b1b;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

/* --- Distribution Table --- */
#distribution[b-z9s9oye4jj] {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    margin-bottom: 12px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    table-layout: auto;
    box-sizing: border-box;
}

#distribution thead th[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 100%);
    padding: 4px 10px;
    font-size: 14px;
    border-bottom: 2px solid var(--border-medium, #b5b5b5);
    text-align: center;
    border-left: 1px solid var(--border-light, #d5d5d5);
    border-right: 1px solid var(--border-light, #d5d5d5);
    font-weight: bold;
    color: #333;
}

#distribution thead th .pts-available[b-z9s9oye4jj] {
    color: #c62828;
    font-size: 15px;
}

#distribution tbody th[b-z9s9oye4jj] {
    background: #f7f7f7;
    padding: 6px 10px;
    text-align: right;
    font-weight: bold;
    color: #444;
    width: 22%;
    border-bottom: 1px solid var(--border-light, #ddd);
    white-space: nowrap;
}

#distribution tbody th img[b-z9s9oye4jj] {
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    top: -1px;
}

#distribution tbody td[b-z9s9oye4jj] {
    padding: 6px 8px;
    border-bottom: 1px solid #e8e8e8;
}

#distribution tbody td.val[b-z9s9oye4jj] {
    text-align: center;
    font-weight: bold;
    color: #333;
    width: 12%;
    white-space: nowrap;
}

#distribution tbody td.xp[b-z9s9oye4jj] {
    width: 35%;
    padding: 6px 12px;
}

/* Progress bar track + fill */
.bar-track[b-z9s9oye4jj] {
    height: 12px;
    background: #e8e8e8;
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.bar-fill[b-z9s9oye4jj] {
    height: 100%;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border-radius: 2px;
    transition: width 0.3s;
    min-width: 1px;
}

.bar-fill.regen[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #66bb6a, #2e7d32);
}

.bar-fill.xp[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #64b5f6, #1565c0);
}

#distribution tbody td.po[b-z9s9oye4jj],
#distribution tbody td.rem[b-z9s9oye4jj] {
    text-align: center;
    color: #666;
    width: 44px;
    font-weight: bold;
}

#distribution tbody td.empty[b-z9s9oye4jj] {
    height: 4px;
    background: #f7f7f7;
    padding: 0;
}

#distribution tbody tr:nth-child(even)[b-z9s9oye4jj] {
    background: rgba(0, 0, 0, 0.015);
}

/* --- Add Point Button --- */
a.hero-add-btn[b-z9s9oye4jj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid #4a7522;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

a.hero-add-btn:hover[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

a.hero-add-btn:active[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #558B2F, #33691E);
}

span.hero-add-btn.disabled[b-z9s9oye4jj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    background: #ddd;
    border: 1px solid #bbb;
    border-radius: 3px;
    color: #999;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: default;
    user-select: none;
}

/* --- Action Buttons --- */
.hero-actions[b-z9s9oye4jj] {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.hero-action-btn[b-z9s9oye4jj] {
    display: inline-block;
    padding: 6px 20px;
    background: linear-gradient(to bottom, #ccc, #999);
    border: 1px solid #888;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
    transition: background 0.15s;
}

.hero-action-btn:hover[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #ddd, #aaa);
}

.hero-action-btn.primary[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border-color: #4a7522;
}

.hero-action-btn.primary:hover[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* --- Rename Table --- */
.hero-rename-table[b-z9s9oye4jj] {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-light, #d5d5d5);
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 12px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
}

.hero-rename-table thead th[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 100%);
    padding: 4px 10px;
    font-size: 14px;
    border-bottom: 2px solid var(--border-medium, #b5b5b5);
    text-align: center;
    border-left: 1px solid var(--border-light, #d5d5d5);
    border-right: 1px solid var(--border-light, #d5d5d5);
    font-weight: bold;
    color: #333;
}

.hero-rename-table tbody td[b-z9s9oye4jj] {
    padding: 8px 10px;
    border-bottom: 1px solid #e8e8e8;
}

.hero-rename-table tbody td.label[b-z9s9oye4jj] {
    background: #f7f7f7;
    font-weight: bold;
    color: #444;
    width: 35%;
}

.hero-rename-table tbody td.action[b-z9s9oye4jj] {
    text-align: center;
    padding: 12px;
}

.hero-rename-table input.text[b-z9s9oye4jj] {
    width: 100%;
    max-width: 200px;
    padding: 4px 8px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
}

/* --- Oases Table (build_details pattern) --- */
#oasis_list td.act[b-z9s9oye4jj] {
    text-align: center;
    width: 40px;
}

a.hero-release-btn[b-z9s9oye4jj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom, #ef5350, #c62828);
    border: 1px solid #b71c1c;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

a.hero-release-btn:hover[b-z9s9oye4jj] {
    background: linear-gradient(to bottom, #e57373, #d32f2f);
}

/* --- No Hero Panel --- */
.no-hero-panel[b-z9s9oye4jj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: #fefce8;
    border: 1px solid #d4b44a;
    border-radius: 5px;
    font-size: 14px;
    color: #666;
}

.no-hero-panel b[b-z9s9oye4jj] {
    color: #333;
}

/* --- Info Message --- */
.info-message[b-z9s9oye4jj] {
    background: #fef9e7;
    border: 1px solid #d4b44a;
    color: #7a6320;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
}

/* --- Range Slider (Hero Distribution) --- */
#distribution td.up[b-z9s9oye4jj] {
    text-align: center;
    vertical-align: middle;
    width: 30%;
    min-width: 70px;
    padding: 4px 6px;
}

#distribution input[type="range"][b-z9s9oye4jj] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 50px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    vertical-align: middle;
    direction: rtl; /* RTL: slider starts from the right and moves to the left */
}

/* Track */
#distribution input[type="range"][b-z9s9oye4jj]::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(to bottom, #d0d0d0, #b5b5b5);
    border: 1px solid #999;
    border-radius: 3px;
}

#distribution input[type="range"][b-z9s9oye4jj]::-moz-range-track {
    height: 6px;
    background: linear-gradient(to bottom, #d0d0d0, #b5b5b5);
    border: 1px solid #999;
    border-radius: 3px;
}

/* Thumb */
#distribution input[type="range"][b-z9s9oye4jj]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    background: linear-gradient(to bottom, #9CCC65, #558B2F);
    border: 1px solid #4a7522;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#distribution input[type="range"][b-z9s9oye4jj]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: linear-gradient(to bottom, #9CCC65, #558B2F);
    border: 1px solid #4a7522;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

#distribution input[type="range"]:focus[b-z9s9oye4jj] {
    outline: none;
}

#distribution input[type="range"]:focus[b-z9s9oye4jj]::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px rgba(139, 195, 74, 0.4);
}

/* --- Responsive Breakpoints --- */
@media (max-width: 600px) {
    #distribution[b-z9s9oye4jj] {
        font-size: 12px;
    }

    #distribution tbody th[b-z9s9oye4jj],
    #distribution tbody td[b-z9s9oye4jj] {
        padding: 4px 4px;
    }

    #distribution tbody th[b-z9s9oye4jj] {
        width: auto;
        font-size: 12px;
    }

    #distribution tbody th img[b-z9s9oye4jj] {
        display: none;
    }

    /* Hide progress bar column on small screens to give slider more room */
    #distribution tbody td.xp[b-z9s9oye4jj],
    #distribution thead th:nth-child(3)[b-z9s9oye4jj] {
        display: none;
    }

    #distribution td.up[b-z9s9oye4jj] {
        min-width: 50px;
    }

    #distribution input[type="range"][b-z9s9oye4jj] {
        min-width: 40px;
    }
}

@media (max-width: 400px) {
    #distribution tbody td.val[b-z9s9oye4jj] {
        font-size: 11px;
    }

    #distribution tbody th[b-z9s9oye4jj] {
        font-size: 11px;
        padding: 3px 2px;
    }

    #distribution tbody td.po[b-z9s9oye4jj] {
        font-size: 11px;
        padding: 3px 2px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home.razor.css — Mamluk War Gate · Landing Page
   Hero · Trust Bar · Gameplay Loop · Tribe Showcase · Screenshots · CTA
   ========================================================================== */

/* ─── Page root ─────────────────────────────────────────────────────────── */
.home-page[b-y4e3jwh467] {
    direction: rtl;
    width: 100%;
    overflow-x: clip;
}

/* ─── Shared section title ──────────────────────────────────────────────── */
.hp-section-title[b-y4e3jwh467] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 400;
    color: var(--pg-earth, #5C3B22);
    text-align: center;
    margin: 0 0 12px;
    text-shadow: 0 1px 2px rgba(197,154,74,.15);
    letter-spacing: .5px;
}

.hp-section-sub[b-y4e3jwh467] {
    text-align: center;
    color: var(--pg-text-light, #6B5D4A);
    font-size: 14px;
    margin: 0 0 28px;
}

/* ─── Hero ornament ─────────────────────────────────────────────────────── */
.hp-hero-ornament[b-y4e3jwh467] {
    color: var(--pg-bronze, #C59A4A);
    margin-bottom: 20px;
    opacity: .7;
    display: flex;
    justify-content: flex-start;
}

.hp-section-orn[b-y4e3jwh467] {
    color: var(--pg-bronze, #C59A4A);
    opacity: .5;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════════ */
.hp-hero[b-y4e3jwh467] {
    position: relative;
    min-height: clamp(420px, 70vh, 640px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 16px;
}

.hp-hero-bg[b-y4e3jwh467] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hp-hero-img[b-y4e3jwh467] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(.8) saturate(.9) sepia(.15);
}

.hp-hero-overlay[b-y4e3jwh467] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245,240,230,.4) 0%, transparent 30%, transparent 55%, rgba(245,240,230,.85) 100%), radial-gradient(ellipse 60% 80% at 70% 50%, transparent 0%, rgba(245,240,230,.5) 100%);
}

.hp-hero-content[b-y4e3jwh467] {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.hp-hero-copy[b-y4e3jwh467] {
    flex: 1 1 55%;
    min-width: 0;
}

.hp-hero-title[b-y4e3jwh467] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: clamp(28px, 5.5vw, 52px);
    font-weight: 400;
    color: var(--pg-earth, #5C3B22);
    line-height: 1.15;
    margin: 0 0 16px;
    text-shadow: 0 2px 6px rgba(255,255,255,.5);
    letter-spacing: .5px;
}

.hp-hero-sub[b-y4e3jwh467] {
    font-size: clamp(14px, 2vw, 18px);
    color: var(--pg-text, #3A2E22);
    line-height: 1.8;
    margin: 0 0 28px;
    max-width: 540px;
}

.hp-hero-cta[b-y4e3jwh467] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* ─── Hero tribe visual ─────────────────────────────────────────────────── */
.hp-hero-tribe[b-y4e3jwh467] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-hero-tribe-img[b-y4e3jwh467] {
    width: clamp(180px, 22vw, 300px);
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(197,154,74,.2)) drop-shadow(0 0 40px rgba(227,189,111,.1));
}

.hp-hero-emblem[b-y4e3jwh467] {
    position: absolute;
    bottom: -10px;
    inset-inline-end: -10px;
    width: clamp(60px, 7vw, 90px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(197,154,74,.2));
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.hp-btn-gold[b-y4e3jwh467] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--pg-earth, #5C3B22);
    text-decoration: none;
    background: linear-gradient(180deg, var(--pg-gold, #E3BD6F), #C99A3A);
    border: 1px solid #A67D2A;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.3);
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    transition: filter .15s, transform .1s;
    min-height: 48px;
}

    .hp-btn-gold:hover[b-y4e3jwh467] {
        filter: brightness(1.1);
        text-decoration: none;
        color: var(--pg-earth, #5C3B22);
    }

    .hp-btn-gold:active[b-y4e3jwh467] {
        transform: translateY(1px);
    }

    .hp-btn-gold:focus-visible[b-y4e3jwh467] {
        outline: 2px solid var(--pg-gold, #E3BD6F);
        outline-offset: 3px;
    }

.hp-btn-lg[b-y4e3jwh467] {
    padding: 16px 36px;
    font-size: 18px;
    min-height: 54px;
}

.hp-btn-ghost[b-y4e3jwh467] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: var(--pg-earth, #5C3B22);
    text-decoration: none;
    background: #FFFFFF;
    border: 1px solid rgba(197,154,74,.4);
    border-radius: 4px;
    transition: background .15s, border-color .15s;
    min-height: 48px;
}

    .hp-btn-ghost:hover[b-y4e3jwh467] {
        background: rgba(197,154,74,.08);
        border-color: var(--pg-bronze, #C59A4A);
        color: var(--pg-earth, #5C3B22);
        text-decoration: none;
    }

    .hp-btn-ghost:focus-visible[b-y4e3jwh467] {
        outline: 2px solid var(--pg-bronze, #C59A4A);
        outline-offset: 3px;
    }

/* ══════════════════════════════════════════════════════════════════════════
   Trust Bar
   ══════════════════════════════════════════════════════════════════════════ */
.hp-trust[b-y4e3jwh467] {
    padding: 20px 16px;
    background: linear-gradient(180deg, #FFFFFF, #F5F0E6);
    border-top: 1px solid rgba(197,154,74,.2);
    border-bottom: 1px solid rgba(197,154,74,.2);
}

.hp-trust-inner[b-y4e3jwh467] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
}

.hp-trust-item[b-y4e3jwh467] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-trust-icon[b-y4e3jwh467] {
    color: var(--pg-bronze, #C59A4A);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}

.hp-trust-sep[b-y4e3jwh467] {
    width: 1px;
    height: 24px;
    background: linear-gradient(180deg, transparent, rgba(197,154,74,.3), transparent);
    flex-shrink: 0;
}

.hp-trust-label[b-y4e3jwh467] {
    font-size: 14px;
    font-weight: bold;
    color: var(--pg-text, #3A2E22);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Gameplay Loop
   ══════════════════════════════════════════════════════════════════════════ */
.hp-loop[b-y4e3jwh467] {
    padding: 48px 16px 40px;
}

.hp-loop-grid[b-y4e3jwh467] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-loop-step[b-y4e3jwh467] {
    flex: 1 1 160px;
    min-width: 140px;
    max-width: 200px;
    text-align: center;
    padding: 20px 12px;
    background: linear-gradient(180deg, #FFFFFF, #F5F0E6);
    border: 1px solid rgba(197,154,74,.2);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(197,154,74,.08), inset 0 1px 0 rgba(255,255,255,.5);
}

.hp-loop-icon[b-y4e3jwh467] {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(227,189,111,.15), transparent 70%);
    border-radius: 50%;
}

    .hp-loop-icon img[b-y4e3jwh467] {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

.hp-loop-title[b-y4e3jwh467] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--pg-earth, #5C3B22);
    margin: 0 0 6px;
}

.hp-loop-desc[b-y4e3jwh467] {
    font-size: 12px;
    color: var(--pg-text-light, #6B5D4A);
    line-height: 1.6;
    margin: 0;
}

.hp-loop-arrow[b-y4e3jwh467] {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: var(--pg-bronze, #C59A4A);
    opacity: .4;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tribe Showcase
   ══════════════════════════════════════════════════════════════════════════ */
.hp-tribes[b-y4e3jwh467] {
    padding: 48px 16px 40px;
}

.hp-tribe-rail[b-y4e3jwh467] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hp-tribe-card[b-y4e3jwh467] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px 16px;
    background: linear-gradient(180deg, #FFFFFF, #FAF6EE);
    border: 1px solid rgba(197,154,74,.2);
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
}

    .hp-tribe-card:hover[b-y4e3jwh467] {
        border-color: var(--pg-bronze, #C59A4A);
        box-shadow: 0 8px 24px rgba(197,154,74,.15), 0 0 0 1px rgba(197,154,74,.1);
    }

.hp-tribe-emblem[b-y4e3jwh467] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: radial-gradient(circle, rgba(197,154,74,.08), transparent 70%);
    border-radius: 50%;
}

.hp-tribe-emblem-img[b-y4e3jwh467] {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.hp-tribe-name[b-y4e3jwh467] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--pg-earth, #5C3B22);
    margin: 0 0 4px;
}

.hp-tribe-tag[b-y4e3jwh467] {
    font-size: 11px;
    color: var(--pg-text-light, #6B5D4A);
    margin: 0 0 12px;
    line-height: 1.5;
}

.hp-tribe-units[b-y4e3jwh467] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.hp-tribe-unit[b-y4e3jwh467] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Screenshots
   ══════════════════════════════════════════════════════════════════════════ */
.hp-shots[b-y4e3jwh467] {
    padding: 48px 16px 40px;
}

.hp-shots-grid[b-y4e3jwh467] {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.hp-shot-card[b-y4e3jwh467] {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(197,154,74,.2);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
    aspect-ratio: 16 / 10;
}

    .hp-shot-card:hover[b-y4e3jwh467] {
        border-color: var(--pg-bronze, #C59A4A);
        box-shadow: 0 8px 24px rgba(197,154,74,.15);
        text-decoration: none;
    }

.hp-shot-img[b-y4e3jwh467] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}

.hp-shot-card:hover .hp-shot-img[b-y4e3jwh467] {
    transform: scale(1.03);
}

.hp-shot-label[b-y4e3jwh467] {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 8px 14px;
    background: linear-gradient(180deg, transparent, rgba(245,240,230,.92));
    color: var(--pg-earth, #5C3B22);
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   Final CTA
   ══════════════════════════════════════════════════════════════════════════ */
.hp-cta[b-y4e3jwh467] {
    padding: 56px 16px 64px;
}

.hp-cta-panel[b-y4e3jwh467] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 32px;
    background: linear-gradient(135deg, rgba(255,255,255,.4), transparent), linear-gradient(180deg, #FFFFFF, #F5F0E6);
    border: 1px solid var(--pg-bronze, #C59A4A);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(197,154,74,.1), 0 20px 60px rgba(197,154,74,.12);
}

.hp-cta-title[b-y4e3jwh467] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 400;
    color: var(--pg-earth, #5C3B22);
    margin: 0 0 12px;
}

.hp-cta-text[b-y4e3jwh467] {
    font-size: 15px;
    color: var(--pg-text-light, #6B5D4A);
    line-height: 1.8;
    margin: 0 0 28px;
}

.hp-cta-actions[b-y4e3jwh467] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */

/* Laptop */
@media (max-width: 1439px) {
    .hp-hero-content[b-y4e3jwh467] {
        max-width: 980px;
    }
}

/* Tablet / iPad landscape */
@media (max-width: 1023px) {
    .hp-tribe-rail[b-y4e3jwh467] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet / iPad portrait */
@media (max-width: 899px) {
    .hp-hero[b-y4e3jwh467] {
        min-height: clamp(360px, 55vh, 500px);
    }

    .hp-hero-content[b-y4e3jwh467] {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .hp-hero-copy[b-y4e3jwh467] {
        flex: 1 1 100%;
    }

    .hp-hero-cta[b-y4e3jwh467] {
        justify-content: center;
    }

    .hp-hero-sub[b-y4e3jwh467] {
        margin-inline: auto;
    }

    .hp-tribe-rail[b-y4e3jwh467] {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .hp-tribe-card[b-y4e3jwh467] {
        padding: 16px 10px 14px;
    }

    .hp-loop-grid[b-y4e3jwh467] {
        gap: 6px;
    }

    .hp-loop-step[b-y4e3jwh467] {
        flex: 1 1 120px;
        min-width: 110px;
    }

    .hp-loop-arrow[b-y4e3jwh467] {
        font-size: 22px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hp-hero[b-y4e3jwh467] {
        min-height: clamp(320px, 50vh, 440px);
        padding: 24px 12px;
    }

    .hp-hero-title[b-y4e3jwh467] {
        font-size: clamp(24px, 7vw, 36px);
    }

    .hp-hero-tribe-img[b-y4e3jwh467] {
        width: clamp(140px, 30vw, 200px);
    }

    .hp-trust-inner[b-y4e3jwh467] {
        gap: 16px;
    }

    .hp-trust-item[b-y4e3jwh467] {
        flex: 0 1 auto;
    }

    .hp-trust-label[b-y4e3jwh467] {
        font-size: 13px;
    }

    .hp-tribe-rail[b-y4e3jwh467] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 4px 8px;
        grid-template-columns: none;
    }

    .hp-tribe-card[b-y4e3jwh467] {
        flex: 0 0 160px;
        scroll-snap-align: center;
    }

    .hp-shots-grid[b-y4e3jwh467] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hp-loop-grid[b-y4e3jwh467] {
        flex-direction: column;
        align-items: center;
    }

    .hp-loop-step[b-y4e3jwh467] {
        flex: 0 1 auto;
        width: 100%;
        max-width: 320px;
    }

    .hp-loop-arrow[b-y4e3jwh467] {
        transform: rotate(90deg);
        font-size: 24px;
    }

    .hp-cta-panel[b-y4e3jwh467] {
        padding: 28px 20px;
    }
}

/* Narrow phones */
@media (max-width: 480px) {
    .hp-hero[b-y4e3jwh467] {
        min-height: clamp(300px, 45vh, 400px);
        padding: 16px 10px;
    }

    .hp-hero-title[b-y4e3jwh467] {
        font-size: clamp(22px, 8vw, 30px);
    }

    .hp-hero-sub[b-y4e3jwh467] {
        font-size: 13px;
    }

    .hp-hero-cta[b-y4e3jwh467] {
        flex-direction: column;
        width: 100%;
    }

    .hp-btn-gold[b-y4e3jwh467],
    .hp-btn-ghost[b-y4e3jwh467] {
        width: 100%;
        justify-content: center;
    }

    .hp-hero-tribe-img[b-y4e3jwh467] {
        width: clamp(120px, 35vw, 170px);
    }

    .hp-hero-emblem[b-y4e3jwh467] {
        width: 56px;
    }

    .hp-trust-inner[b-y4e3jwh467] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hp-tribe-card[b-y4e3jwh467] {
        flex: 0 0 140px;
        padding: 14px 10px 12px;
    }

    .hp-tribe-emblem[b-y4e3jwh467] {
        width: 64px;
        height: 64px;
    }

    .hp-tribe-emblem-img[b-y4e3jwh467] {
        width: 52px;
        height: 52px;
    }

    .hp-tribe-name[b-y4e3jwh467] {
        font-size: 18px;
    }

    .hp-tribe-unit[b-y4e3jwh467] {
        width: 28px;
        height: 28px;
    }

    .hp-cta-panel[b-y4e3jwh467] {
        padding: 24px 16px;
    }

    .hp-cta-title[b-y4e3jwh467] {
        font-size: 22px;
    }

    .hp-cta-text[b-y4e3jwh467] {
        font-size: 13px;
    }
}

/* Very narrow phones */
@media (max-width: 360px) {
    .hp-hero-title[b-y4e3jwh467] {
        font-size: 20px;
    }

    .hp-tribe-card[b-y4e3jwh467] {
        flex: 0 0 128px;
    }

    .hp-tribe-unit[b-y4e3jwh467] {
        width: 24px;
        height: 24px;
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hp-btn-gold[b-y4e3jwh467],
    .hp-btn-ghost[b-y4e3jwh467],
    .hp-shot-img[b-y4e3jwh467],
    .hp-tribe-card[b-y4e3jwh467] {
        transition: none;
    }

    .hp-shot-card:hover .hp-shot-img[b-y4e3jwh467] {
        transform: none;
    }
}

/* ========================================================================== 
   Shared public pages shell
   ========================================================================== */
.public-shell[b-y4e3jwh467] {
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    width: 100%;
    overflow-x: clip;
    background: var(--pg-bg);
    color: var(--pg-text);
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
}

.public-banner[b-y4e3jwh467] {
    width: 100%;
    height: clamp(110px, 15vw, 230px);
    overflow: hidden;
    background: var(--pg-surface);
}

.public-banner a[b-y4e3jwh467] {
    display: block;
    width: 100%;
    height: 100%;
}

.public-banner-img[b-y4e3jwh467] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
}

.public-tabs[b-y4e3jwh467] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 28px;
    min-height: 58px;
    margin-top: -58px;
    padding: 6px clamp(16px, 4vw, 56px) 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.public-tabs[b-y4e3jwh467]::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline-start: 50%;
    bottom: 0;
    width: min(560px, 92vw);
    height: 88px;
    transform: translateX(50%);
    pointer-events: none;
    background: radial-gradient(ellipse 58% 100% at 50% 100%, var(--pg-surface) 0%, var(--pg-surface) 58%, rgba(255,255,255,.86) 72%, transparent 86%);
}

.public-tabs[b-y4e3jwh467]::-webkit-scrollbar {
    display: none;
}

.public-tabs[b-y4e3jwh467]  .public-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0 4px;
    border-bottom: 3px solid transparent;
    color: var(--pg-text-light);
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.public-tabs[b-y4e3jwh467]  .public-tab:hover,
.public-tabs[b-y4e3jwh467]  .public-tab.is-active {
    color: var(--pg-green);
    text-decoration: none;
}

.public-tabs[b-y4e3jwh467]  .public-tab.is-active {
    border-bottom-color: var(--pg-green);
    font-weight: bold;
}

.public-body[b-y4e3jwh467] {
    display: flex;
    flex: 1;
    width: 100%;
}

.public-footer[b-y4e3jwh467] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 64px;
    padding: 16px 20px;
    border-top: 1px solid var(--pg-border);
    background: var(--pg-surface-alt);
    color: #000;
    font-size: 15px;
    font-weight: bold;
}

.public-footer a[b-y4e3jwh467] {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.public-footer a:hover[b-y4e3jwh467] {
    text-decoration: underline;
}

.public-body[b-y4e3jwh467]  .public-page {
    width: 100%;
    padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px);
    background: linear-gradient(180deg, #fff 0%, var(--pg-surface-alt) 100%);
}

.public-body[b-y4e3jwh467]  .public-page-inner {
    width: min(1080px, 100%);
    margin-inline: auto;
}

.public-body[b-y4e3jwh467]  .public-page-heading {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.public-body[b-y4e3jwh467]  .public-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--pg-green);
    font-size: 13px;
    font-weight: bold;
}

.public-body[b-y4e3jwh467]  .public-title {
    margin: 0 0 12px;
    color: var(--pg-earth);
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
}

.public-body[b-y4e3jwh467]  .public-intro {
    margin: 0;
    color: var(--pg-text-light);
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.9;
}

.public-body[b-y4e3jwh467]  .public-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-body[b-y4e3jwh467]  .public-card {
    padding: 22px;
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    background: var(--pg-surface);
    box-shadow: var(--pg-shadow);
}

.public-body[b-y4e3jwh467]  .public-card h2,
.public-body[b-y4e3jwh467]  .public-card h3 {
    margin: 0 0 10px;
    color: var(--pg-earth);
}

.public-body[b-y4e3jwh467]  .public-card p {
    margin: 0;
    color: var(--pg-text-light);
    line-height: 1.85;
}

.public-body[b-y4e3jwh467]  .public-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--pg-green-soft);
    color: var(--pg-green-dark);
    font-size: 22px;
}

.public-body[b-y4e3jwh467]  .tribe-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: start;
    gap: 16px;
}

.public-body[b-y4e3jwh467]  .tribe-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.public-body[b-y4e3jwh467]  .public-section {
    margin-top: 34px;
}

.public-body[b-y4e3jwh467]  .public-section-title {
    margin: 0 0 18px;
    color: var(--pg-earth);
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-size: clamp(23px, 3vw, 31px);
    font-weight: 400;
    text-align: center;
}

.public-body[b-y4e3jwh467]  .support-email {
    display: inline-flex;
    align-items: center;
    direction: ltr;
    margin-top: 14px;
    padding: 11px 18px;
    border-radius: var(--pg-radius-sm);
    background: var(--pg-green);
    color: #fff;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: bold;
    text-decoration: none;
}

.public-body[b-y4e3jwh467]  .support-email:hover {
    background: var(--pg-green-dark);
    color: #fff;
    text-decoration: none;
}

.public-body[b-y4e3jwh467]  .public-list {
    margin: 10px 0 0;
    padding-inline-start: 22px;
    color: var(--pg-text-light);
    line-height: 1.9;
}

@media (max-width: 800px) {
    .public-body[b-y4e3jwh467]  .public-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .public-banner[b-y4e3jwh467] {
        height: clamp(105px, 24vw, 160px);
    }

    .public-banner-img[b-y4e3jwh467] {
        object-position: 50% 5%;
    }

    .public-tabs[b-y4e3jwh467] {
        gap: 22px;
    }

    .public-body[b-y4e3jwh467]  .public-grid {
        grid-template-columns: 1fr;
    }

    .public-body[b-y4e3jwh467]  .public-card {
        padding: 18px;
    }

    .public-footer-separator[b-y4e3jwh467] {
        display: none;
    }
}

/* ==========================================================================
   Authentication card (login / register) rendered inside the public shell
   ========================================================================== */
.public-body[b-y4e3jwh467]  .auth-card {
    width: min(760px, calc(100% - clamp(32px, 22vw, 152px)));
    margin: clamp(28px, 5vh, 48px) auto;
    padding: clamp(14px, 2vw, 22px) clamp(20px, 4vw, 88px);
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-sm);
    box-shadow: var(--pg-shadow);
}

.public-body[b-y4e3jwh467]  .auth-card-wide {
    width: min(560px, calc(100% - 32px));
}

.public-body[b-y4e3jwh467]  .classic-panel {
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.public-body[b-y4e3jwh467]  .auth-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pg-border);
    padding-bottom: 0;
}

.public-body[b-y4e3jwh467]  .auth-tab {
    flex: 1;
    text-align: center;
    padding: 10px 14px;
    font-weight: bold;
    font-size: 14px;
    color: var(--pg-text);
    text-decoration: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.public-body[b-y4e3jwh467]  .auth-tab.active {
    color: var(--pg-text);
    border-bottom-color: var(--pg-red);
}

.public-body[b-y4e3jwh467]  .auth-tab:hover:not(.active) {
    color: #3f3f3f;
}

.public-body[b-y4e3jwh467]  .panel-body {
    padding: 0;
    line-height: 1.6;
}

.public-body[b-y4e3jwh467]  .auth-form-group {
    margin-bottom: 12px;
}

.public-body[b-y4e3jwh467]  .auth-label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 12px;
    color: var(--pg-text);
}

.public-body[b-y4e3jwh467]  .travian-input {
    width: 100%;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    border: 1px solid var(--pg-border);
    background-color: #F7F9FC;
    color: var(--pg-text);
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.public-body[b-y4e3jwh467]  .travian-input:focus {
    outline: none;
    border-color: var(--pg-green);
    background-color: var(--pg-surface);
    box-shadow: 0 0 0 3px var(--pg-green-soft);
}

.public-body[b-y4e3jwh467]  .password-field {
    position: relative;
}

.public-body[b-y4e3jwh467]  .password-field .travian-input {
    padding-inline-start: 38px;
}

.public-body[b-y4e3jwh467]  .password-eye {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pg-text-light);
    font-size: 12px;
    pointer-events: none;
}

.public-body[b-y4e3jwh467]  .travian-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--pg-green);
    flex-shrink: 0;
    vertical-align: middle;
}

.public-body[b-y4e3jwh467]  .remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6d6d6d;
    cursor: pointer;
    justify-content: flex-start;
    margin-top: 4px;
}

.public-body[b-y4e3jwh467]  .validation-error {
    color: #CC0000;
    font-size: 10px;
    display: block;
    margin-top: 4px;
}

.public-body[b-y4e3jwh467]  .auth-alert-error {
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #882222;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 16px;
    text-align: center;
}

.public-body[b-y4e3jwh467]  .btn-travian {
    display: block;
    width: 100%;
    padding: 12px 28px;
    background: linear-gradient(to bottom, #62AE45, var(--pg-green));
    border: 1px solid var(--pg-green-dark);
    color: var(--pg-surface);
    font-size: 16px;
    font-weight: bold;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    line-height: 1.6;
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 4px rgba(0,0,0,0.13);
    border-radius: 6px;
    transition: background 0.15s, box-shadow 0.15s;
}

.public-body[b-y4e3jwh467]  .btn-travian:hover {
    background: linear-gradient(to bottom, var(--pg-green), var(--pg-green-dark));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 6px rgba(0,0,0,0.16);
}

.public-body[b-y4e3jwh467]  .btn-travian:active {
    background: var(--pg-green-dark);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.public-body[b-y4e3jwh467]  .action-row {
    text-align: center;
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.public-body[b-y4e3jwh467]  .forgot-password {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    color: var(--pg-red);
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}

.public-body[b-y4e3jwh467]  .forgot-password:hover {
    text-decoration: underline;
}

.public-body[b-y4e3jwh467]  .terms-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 14px;
}

.public-body[b-y4e3jwh467]  .terms-body {
    text-align: center;
    font-size: 11px;
    color: #999999;
    padding: 0;
}

.public-body[b-y4e3jwh467]  .terms-body a {
    color: #c62d2d;
    text-decoration: none;
    font-weight: bold;
}

.public-body[b-y4e3jwh467]  .terms-body a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .public-body[b-y4e3jwh467]  .auth-card {
        width: calc(100% - 24px);
        margin-top: 16px;
        padding: 22px 18px 20px;
    }

    .public-body[b-y4e3jwh467]  .btn-travian {
        font-size: 14px;
    }
}

/* Terms page shares the auth-card chrome but reads as a wide document. */
.public-body[b-y4e3jwh467]  .terms-page {
    width: min(880px, calc(100% - clamp(32px, 22vw, 152px)));
    margin: clamp(28px, 5vh, 48px) auto;
    padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 64px);
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius-sm);
    box-shadow: var(--pg-shadow);
}

@media (max-width: 768px) {
    .public-body[b-y4e3jwh467]  .terms-page {
        width: calc(100% - 24px);
        margin-top: 16px;
        padding: 22px 18px 20px;
    }
}
/* /Components/Pages/Inventory/InventoryPage.razor.rz.scp.css */
/* ===================================================================
   InventoryPage — reworked bag layout inspired by the provided reference
   =================================================================== */

.inventory-page[b-moktglsmqe] {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 8px 18px;
}

.inventory-shell[b-moktglsmqe] {
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: #f8f8f8;
    border: 1px solid #bcbcbc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.inventory-titlebar[b-moktglsmqe] {
    padding: 14px 18px 12px;
    text-align: center;
    color: var(--text-primary);
    background: linear-gradient(to bottom, #eeeeee00 0%, #d2d2d23b 45%, #c1c1c14d 55%, #e4e4e4 100%);
    border-bottom: 1px solid #8f8f8f;
}

.inventory-titlebar h1[b-moktglsmqe] {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    color: #2b2b2b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.inventory-subtitle[b-moktglsmqe] {
    margin-top: 4px;
    font-size: 12px;
    color: #666666;
}

.inventory-tabs[b-moktglsmqe] {
    display: flex;
    gap: 6px;
    padding: 0 12px;
    background: #e9e9e9;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #bfbfbf;
}

.inventory-tab[b-moktglsmqe] {
    appearance: none;
    border: 1px solid #9f9f9f;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding: 9px 16px 8px;
    margin-top: 8px;
    background: linear-gradient(to bottom, #f5f5f5 0%, #d7d7d7 100%);
    color: #4a4a4a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: default;
}

.inventory-tab.active[b-moktglsmqe] {
    background: #ffffff;
    color: #2f2f2f;
    box-shadow: inset 0 2px 0 #d6d6d6;
}

.inventory-board[b-moktglsmqe] {
    padding: 12px;
    background: #efefef;
}

.inventory-board-inner[b-moktglsmqe] {
    min-height: 360px;
    padding: 18px;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.inventory-items-grid[b-moktglsmqe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 18px 16px;
    align-items: start;
}

.inventory-item-card[b-moktglsmqe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.inventory-item-frame[b-moktglsmqe] {
    position: relative;
    width: 100%;
    max-width: 132px;
    aspect-ratio: 1;
    border-radius: 6px;
    padding: 6px;
    background: linear-gradient(to bottom, #fafafa 0%, #e5e5e5 100%);
    box-shadow:
        inset 0 0 0 1px #cfcfcf,
        0 1px 4px rgba(0, 0, 0, 0.12);
}

.inventory-item-card.is-empty .inventory-item-frame[b-moktglsmqe] {
    filter: saturate(0.6);
    opacity: 0.82;
}

.inventory-item-badge[b-moktglsmqe],
.inventory-item-qty[b-moktglsmqe] {
    position: absolute;
    z-index: 1;
    min-width: 32px;
    height: 24px;
    padding: 0 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.22);
}

.inventory-item-badge[b-moktglsmqe] {
    top: -7px;
    right: -6px;
    background: linear-gradient(to bottom, #7d7d7d 0%, #575757 100%);
}

.inventory-item-qty[b-moktglsmqe] {
    bottom: -7px;
    left: -6px;
    background: linear-gradient(to bottom, #4b9a45 0%, #2f722c 100%);
}

.inventory-item-art[b-moktglsmqe] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.12) 40%),
        linear-gradient(to bottom, #fbfbfb 0%, #ececec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfcfcf;
}

.inventory-item-art[b-moktglsmqe]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.4), transparent 38%);
    pointer-events: none;
}

.inventory-item-art img[b-moktglsmqe] {
    width: 74%;
    height: 74%;
    object-fit: contain;
    display: block;
}

.inventory-item-art.is-muted img[b-moktglsmqe] {
    filter: grayscale(0.2);
    opacity: 0.72;
}

.inventory-item-meta[b-moktglsmqe] {
    width: 100%;
    text-align: center;
    min-width: 0;
}

.inventory-item-name[b-moktglsmqe] {
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    word-break: break-word;
}

.inventory-item-desc[b-moktglsmqe] {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: #666666;
    word-break: break-word;
}

.inventory-item-actions[b-moktglsmqe] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.inv-btn-use[b-moktglsmqe],
.inv-btn-claim[b-moktglsmqe],
.inv-btn-buy[b-moktglsmqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
    font-family: Tahoma, Arial, sans-serif;
}

.inv-btn-use[b-moktglsmqe] {
    border: 1px solid #a6a6a6;
    background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
    color: #444444;
    min-width: 88px;
}

.inv-btn-use:hover[b-moktglsmqe],
.inv-btn-claim:hover:not(:disabled)[b-moktglsmqe],
.inv-btn-buy:hover:not(:disabled)[b-moktglsmqe] {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.inv-btn-use.disabled[b-moktglsmqe] {
    pointer-events: none;
    opacity: 0.45;
}

.inventory-tools-grid[b-moktglsmqe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    padding: 0 12px 12px;
    background: #efefef;
}

.inventory-panel[b-moktglsmqe] {
    padding: 16px;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #d2d2d2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.inventory-panel h2[b-moktglsmqe] {
    margin: 0 0 8px;
    font-size: 17px;
    color: #222222;
}

.inventory-panel-note[b-moktglsmqe],
.inventory-inline-note[b-moktglsmqe],
.inv-purchase-info[b-moktglsmqe] {
    font-size: 13px;
    line-height: 1.7;
    color: #666666;
}

.inventory-inline-note[b-moktglsmqe] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 0;
    background: #f4f4f4;
    border: 1px solid #d7d7d7;
}

.inv-claim-section[b-moktglsmqe] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.inv-btn-claim[b-moktglsmqe] {
    border: 1px solid #9ea7ae;
    background: linear-gradient(to bottom, #ffffff 0%, #dfe3e6 100%);
    color: #3f3f3f;
}

.inv-purchase-info[b-moktglsmqe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.inv-btn-buy[b-moktglsmqe] {
    border: 1px solid #1b5e20;
    background: linear-gradient(to bottom, #63a74e 0%, #3f7e30 100%);
    color: #ffffff;
}

.inv-btn-claim:disabled[b-moktglsmqe],
.inv-btn-buy:disabled[b-moktglsmqe] {
    opacity: 0.55;
    cursor: not-allowed;
}

.inventory-empty[b-moktglsmqe] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666666;
    font-size: 16px;
    line-height: 1.8;
}

.inv-message[b-moktglsmqe] {
    margin: 0 12px 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.inv-success[b-moktglsmqe] {
    background: #dcf5df;
    color: #1f6a2f;
    border: 1px solid #8ad09a;
}

.inv-error[b-moktglsmqe] {
    background: #fde4e0;
    color: #8d2f27;
    border: 1px solid #efafa7;
}

@media (max-width: 700px) {
    .inventory-page[b-moktglsmqe] {
        padding: 8px 4px 16px;
    }

    .inventory-titlebar h1[b-moktglsmqe] {
        font-size: 24px;
    }

    .inventory-tabs[b-moktglsmqe] {
        flex-wrap: wrap;
        gap: 4px;
        padding: 0 8px 8px;
    }

    .inventory-tab[b-moktglsmqe] {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding-inline: 10px;
        text-align: center;
    }

    .inventory-board-inner[b-moktglsmqe] {
        padding: 14px;
        min-height: 300px;
    }

    .inventory-items-grid[b-moktglsmqe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }

    .inventory-item-frame[b-moktglsmqe] {
        max-width: 100%;
    }

    .inventory-tools-grid[b-moktglsmqe] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 8px 8px;
    }

    .inventory-panel[b-moktglsmqe] {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .inventory-page[b-moktglsmqe] {
        padding: 6px 0 14px;
    }

    .inventory-titlebar[b-moktglsmqe] {
        padding: 12px 10px 10px;
    }

    .inventory-subtitle[b-moktglsmqe] {
        font-size: 11px;
    }

    .inventory-board[b-moktglsmqe],
    .inventory-tools-grid[b-moktglsmqe] {
        padding-inline: 6px;
    }

    .inventory-board-inner[b-moktglsmqe] {
        padding: 10px;
    }

    .inventory-item-frame[b-moktglsmqe] {
        max-width: 100%;
    }

    .inventory-item-name[b-moktglsmqe] {
        font-size: 13px;
    }

    .inventory-item-desc[b-moktglsmqe] {
        font-size: 11px;
    }

    .inv-btn-use[b-moktglsmqe],
    .inv-btn-claim[b-moktglsmqe],
    .inv-btn-buy[b-moktglsmqe] {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .inventory-item-actions[b-moktglsmqe],
    .inv-claim-section[b-moktglsmqe] {
        width: 100%;
    }

    .inventory-tab[b-moktglsmqe] {
        flex-basis: calc(50% - 4px);
        font-size: 13px;
        padding: 8px 8px 7px;
    }
}

@media (max-width: 360px) {
    .inventory-tabs[b-moktglsmqe] {
        gap: 3px;
        padding-inline: 6px;
    }

    .inventory-tab[b-moktglsmqe] {
        flex-basis: 100%;
        margin-top: 6px;
    }

    .inventory-items-grid[b-moktglsmqe] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .inventory-titlebar h1[b-moktglsmqe] {
        font-size: 22px;
    }

    .inventory-panel[b-moktglsmqe],
    .inventory-board-inner[b-moktglsmqe] {
        padding: 10px 8px;
    }
}
/* /Components/Pages/Landing/LandingPage.razor.rz.scp.css */
/* ==========================================================================
   HomePage.razor.css — كنج تتار · Public Landing Page
   Full-bleed, responsive, RTL. Colors from --pg-* tokens defined in app.css.
   ========================================================================== */

.home-root[b-2tih29d5lo] {
    direction: rtl;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    overflow-x: clip;
    background: var(--pg-bg);
    color: var(--pg-text);
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
}

/* ─── Banner ─────────────────────────────────────────────────────────── */
.home-banner[b-2tih29d5lo] {
    position: relative;
    width: 100%;
    height: clamp(110px, 15vw, 230px);
    overflow: hidden;
    background: var(--pg-surface);
}

.home-banner-img[b-2tih29d5lo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
    display: block;
}

@media (max-width: 767px) {
    .home-banner[b-2tih29d5lo] {
        height: clamp(105px, 24vw, 160px);
    }

    .home-banner-img[b-2tih29d5lo] {
        object-position: 50% 5%;
    }
}

/* ─── Tabs ────────────────────────────────────────────────────────────── */
.home-tabs[b-2tih29d5lo] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 28px;
    min-height: 58px;
    margin-top: -58px;
    padding: 6px clamp(16px, 4vw, 56px) 0;
    background: transparent;
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .home-tabs[b-2tih29d5lo]::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset-inline-start: 50%;
        bottom: 0;
        width: min(560px, 92vw);
        height: 88px;
        transform: translateX(50%);
        pointer-events: none;
        background: radial-gradient(ellipse 58% 100% at 50% 100%, var(--pg-surface) 0%, var(--pg-surface) 58%, rgba(255, 255, 255, .86) 72%, rgb(255 255 255 / 0%) 86%, transparent 100%);
    }

    .home-tabs[b-2tih29d5lo]::-webkit-scrollbar {
        display: none;
    }

.home-tab[b-2tih29d5lo] {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--pg-text-light);
    text-decoration: none;
    padding: 6px 0 4px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
}

    .home-tab.is-active[b-2tih29d5lo] {
        color: var(--pg-green);
        font-weight: bold;
        border-bottom-color: var(--pg-green);
    }

@media (max-width: 767px) {
    .home-tabs[b-2tih29d5lo] {
        justify-content: center;
        scroll-snap-type: x proximity;
    }
}

/* ─── Hero body ───────────────────────────────────────────────────────── */
.home-hero[b-2tih29d5lo] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(400px, 1.12fr);
    gap: clamp(32px, 5vw, 72px);
    max-width: 1180px;
    width: 100%;
    margin-inline: auto;
    padding: clamp(18px, 3vh, 30px) clamp(16px, 3vw, 40px);
    align-items: center;
}

@media (max-width: 1279px) {
    .home-hero[b-2tih29d5lo] {
        grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr);
        gap: clamp(24px, 3vw, 38px);
    }
}

@media (max-width: 1023px) {
    .home-hero[b-2tih29d5lo] {
        grid-template-columns: 1fr;
    }

    .home-mapcard[b-2tih29d5lo] {
        order: 1;
    }

    .home-copy[b-2tih29d5lo] {
        order: 2;
    }
}

/* ─── Copy column ─────────────────────────────────────────────────────── */
.home-copy[b-2tih29d5lo] {
    text-align: right;
    display: flex;
    flex-direction: column;
    max-width: 460px;
}

.home-title[b-2tih29d5lo] {
    font-family: 'Lalezar', Tahoma, Arial, sans-serif;
    font-weight: 400;
    font-size: clamp(25px, 2.3vw, 34px);
    line-height: 1.25;
    color: var(--pg-earth);
    margin: 0 0 16px;
}

    .home-title .accent[b-2tih29d5lo] {
        color: var(--pg-red);
        font-weight: bold;
    }

.home-lead[b-2tih29d5lo] {
    color: var(--pg-text-light);
    line-height: 2;
    margin: 0 0 24px;
    max-width: 460px;
    margin-inline-start: auto;
}

.btn-primary[b-2tih29d5lo],
.btn-secondary[b-2tih29d5lo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-inline-start: auto;
    min-height: 46px;
    border-radius: var(--pg-radius-sm);
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    box-shadow: var(--pg-shadow);
}

.btn-primary[b-2tih29d5lo] {
    background: var(--pg-green);
    color: #fff;
    margin-bottom: 12px;
}

    .btn-primary:hover[b-2tih29d5lo] {
        background: var(--pg-green-dark);
    }

.button-icon[b-2tih29d5lo] {
    color: var(--pg-surface);
    font-size: 21px;
    line-height: 1;
}

.button-icon--account[b-2tih29d5lo] {
    color: var(--pg-green);
    font-size: 20px;
}

.btn-secondary[b-2tih29d5lo] {
    background: var(--pg-surface);
    color: var(--pg-text);
    border: 1px solid var(--pg-border);
}

@media (max-width: 1023px) {
    .home-copy[b-2tih29d5lo] {
        text-align: right;
        margin-top: 8px;
    }

    .home-lead[b-2tih29d5lo],
    .btn-primary[b-2tih29d5lo],
    .btn-secondary[b-2tih29d5lo] {
        margin-inline-start: auto;
        margin-inline-end: 0;
    }
}

/* ─── Map card ────────────────────────────────────────────────────────── */
.home-mapcard[b-2tih29d5lo] {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--pg-radius);
    box-shadow: var(--pg-shadow);
    padding: clamp(10px, 1.2vw, 14px);
    width: 100%;
    max-width: 580px;
    justify-self: start;
}

.res-chips[b-2tih29d5lo] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
}

.res-chip[b-2tih29d5lo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    justify-content: center;
    background: var(--pg-green);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 9px;
    border-radius: 6px;
    min-height: 26px;
}

.res-icon[b-2tih29d5lo] {
    font-size: 13px;
}

.res-chip--gold .res-icon[b-2tih29d5lo] {
    color: var(--pg-gold);
}

.res-chip--iron .res-icon[b-2tih29d5lo] {
    color: #C9CDD3;
}

.res-chip--crop .res-icon[b-2tih29d5lo] {
    color: var(--pg-gold);
}

.skeleton-text[b-2tih29d5lo] {
    display: inline-block;
    width: 40px;
    height: 12px;
    border-radius: 4px;
    background: rgba(255,255,255,.35);
}

.map-wrap[b-2tih29d5lo] {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.map-img[b-2tih29d5lo] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

.map-badge[b-2tih29d5lo] {
    position: absolute;
    width: clamp(24px, 3vw, 34px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--pg-green);
    border: 2px solid #fff;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.map-badge--top[b-2tih29d5lo] {
    top: 14%;
    inset-inline-start: 46%;
}

.map-badge--mid[b-2tih29d5lo] {
    top: 48%;
    inset-inline-start: 12%;
}

.map-badge--low[b-2tih29d5lo] {
    top: 52%;
    inset-inline-start: 62%;
}

.map-stats[b-2tih29d5lo] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 8px -10px -10px;
    padding: 8px 0;
    border-top: 1px solid var(--pg-border);
}

.map-stat[b-2tih29d5lo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-inline-start: 1px solid var(--pg-border);
}

    .map-stat:first-child[b-2tih29d5lo] {
        border-inline-start: none;
    }

.map-stat-label[b-2tih29d5lo] {
    font-size: 12px;
    color: var(--pg-text-light);
}

.map-stat-value[b-2tih29d5lo] {
    font-weight: bold;
    font-size: clamp(16px, 1.4vw, 21px);
    color: var(--pg-text);
}

@media (max-width: 479px) {
    .map-stats[b-2tih29d5lo] {
        font-size: 14px;
    }

    .map-stat-value[b-2tih29d5lo] {
        font-size: 16px;
    }
}

/* ─── News ticker ─────────────────────────────────────────────────────── */
.home-news[b-2tih29d5lo] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--pg-surface-alt);
    border-top: 1px solid var(--pg-border);
    padding: 10px clamp(16px, 4vw, 56px);
    overflow: hidden;
}

.news-label[b-2tih29d5lo] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pg-red);
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
}

.news-track[b-2tih29d5lo] {
    flex: 1;
    display: flex;
    gap: 32px;
    font-size: 12px;
    color: var(--pg-text-light);
    white-space: nowrap;
    overflow: hidden;
    animation: home-news-scroll-b-2tih29d5lo 22s linear infinite;
}

    .news-track:hover[b-2tih29d5lo] {
        animation-play-state: paused;
    }

@keyframes home-news-scroll-b-2tih29d5lo {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-track[b-2tih29d5lo] {
        animation: none;
        flex-wrap: wrap;
        overflow: visible;
        white-space: normal;
    }
}

@media (max-width: 479px) {
    .home-news[b-2tih29d5lo] {
        gap: 12px;
    }

    .news-track span:not(:first-child)[b-2tih29d5lo] {
        display: none;
    }
}
/* /Components/Pages/Lobby/Lobby.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Lobby Page — Travian Classic Server Selection
   ═══════════════════════════════════════════════════════════════ */

/* Small spinner for buttons */
.loading-spinner-sm[b-ncg18fu9cu] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-ncg18fu9cu 0.6s linear infinite;
}

/* ======================================================================
   Reference server selector — rebuilt structure
   ====================================================================== */
.lobby-page[b-ncg18fu9cu] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 8px;
    color: #242424;
    font-family: Tahoma, Arial, sans-serif;
}

.section-header[b-ncg18fu9cu] {
    display: flex;
    justify-content: center;
    margin: 11px 0 16px;
}

    .section-header h1[b-ncg18fu9cu] {
        direction: rtl;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 11px;
        margin: 0;
        color: #202020;
        font-size: clamp(24px, 2.2vw, 31px);
        font-weight: 800;
        line-height: 1.2;
        text-shadow: none;
    }

    .section-header h1 i[b-ncg18fu9cu] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        margin: 0;
        border-radius: 50%;
        background: #666;
        color: #fff;
        font-size: 12px;
        line-height: 1;
    }

.server-selector-panel[b-ncg18fu9cu] {
    position: relative;
    width: 100%;
    padding: 22px 8px 8px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 2px 7px rgba(0,0,0,.07);
}

.selector-section-title[b-ncg18fu9cu] {
    position: absolute;
    z-index: 2;
    top: 5px;
    left: 50%;
    width: max-content;
    margin: 0;
    padding: 0 18px;
    transform: translateX(-50%);
    background: rgb(255 255 255 / 51%);
    color: #3f3f3f;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
}

.featured-server[b-ncg18fu9cu] {
    direction: ltr;
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 163px;
    align-items: center;
    width: 100%;
    min-height: 115px;
    padding: 10px 14px 10px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.featured-server-image[b-ncg18fu9cu] {
    width: 145px;
    height: 92px;
    border: 1px solid #aaa58c;
    border-radius: 6px;
    object-fit: cover;
    object-position: center;
}

.featured-server-info[b-ncg18fu9cu] {
    direction: rtl;
    min-width: 0;
    padding-inline: 20px;
}

.featured-server-title[b-ncg18fu9cu] {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 4px 8px;
    border-bottom: 1px solid #dedede;
}

    .featured-server-title i[b-ncg18fu9cu] {
        flex: 0 0 auto;
        color: #e4ad0a;
        font-size: 22px;
    }

    .featured-server-title h3[b-ncg18fu9cu] {
        direction: rtl;
        min-width: 0;
        margin: 0;
        color: #262626;
        font-size: clamp(18px, 1.5vw, 22px);
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.featured-server-stats[b-ncg18fu9cu] {
    direction: ltr;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    min-height: 44px;
    align-items: center;
}

.featured-stat[b-ncg18fu9cu],
.featured-server-stats > .server-status[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 31px;
    padding-inline: 10px;
    border-inline-start: 1px solid #e4e4e4;
    color: #363636;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.featured-server-stats > :first-child[b-ncg18fu9cu] {
    border-inline-start: 0;
}

.featured-stat i[b-ncg18fu9cu] {
    color: #777c7b;
    font-size: 15px;
}

.server-status[b-ncg18fu9cu] {
    direction: ltr;
    color: #438d32;
    font-weight: 700;
}

.status-indicator[b-ncg18fu9cu] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a9a31;
}

.server-status.status-maintenance[b-ncg18fu9cu],
.server-status.status-full[b-ncg18fu9cu],
.server-status.status-ended[b-ncg18fu9cu] {
    color: #df8b10;
}

.server-status.status-maintenance .status-indicator[b-ncg18fu9cu],
.server-status.status-full .status-indicator[b-ncg18fu9cu],
.server-status.status-ended .status-indicator[b-ncg18fu9cu] {
    background: #ee9814;
}

.sitter-shortcut[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b8f8e;
    font-size: 11px;
    cursor: pointer;
}

.featured-server-action[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.other-title[b-ncg18fu9cu] {
    top: 139px;
}

.other-servers-table[b-ncg18fu9cu] {
    direction: ltr;
    width: 100%;
    margin-top: 42px;
    border: 1px solid #cfcfcf;
    border-radius: 7px;
    background: rgba(255,255,255,.86);
    overflow: hidden;
}

.server-table-head[b-ncg18fu9cu],
.server-table-row[b-ncg18fu9cu] {
    display: grid;
    grid-template-columns: 52px 60px minmax(150px, 1.35fr) 95px 110px 105px 90px;
    align-items: center;
    width: 100%;
}

.server-table-head[b-ncg18fu9cu] {
    min-height: 37px;
    border-bottom: 1px solid #cecece;
    background: rgba(249,249,249,.82);
    color: #484848;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

    .server-table-head > :nth-child(1)[b-ncg18fu9cu] { grid-column: 1; }
    .server-table-head > :nth-child(2)[b-ncg18fu9cu] { grid-column: 2 / span 2; }
    .server-table-head > :nth-child(3)[b-ncg18fu9cu] { grid-column: 4; }
    .server-table-head > :nth-child(4)[b-ncg18fu9cu] { grid-column: 5; }
    .server-table-head > :nth-child(5)[b-ncg18fu9cu] { grid-column: 6; }
    .server-table-head > :nth-child(6)[b-ncg18fu9cu] { grid-column: 7; }

.server-table-row[b-ncg18fu9cu] {
    min-height: 54px;
    border-bottom: 1px solid #ddd;
    color: #313131;
    font-size: 13px;
}

.server-table-row:last-child[b-ncg18fu9cu] {
    border-bottom: 0;
}

.server-info-button[b-ncg18fu9cu] {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #aeb1b0;
    border-radius: 50%;
    background: #888c8b;
    color: #fff;
    font-size: 12px;
    box-shadow: inset 0 1px rgba(255,255,255,.25);
    cursor: pointer;
}

.server-row-image[b-ncg18fu9cu] {
    justify-self: center;
    width: 60px;
    height: 38px;
    border: 1px solid #aaa58c;
    border-radius: 3px;
    object-fit: cover;
}

.server-row-name[b-ncg18fu9cu] {
    direction: rtl;
    padding-inline: 13px;
    color: #2e2e2e;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-row-speed[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #444;
    font-weight: 700;
}

.server-row-players[b-ncg18fu9cu] {
    justify-self: center;
    font-weight: 700;
}

.server-table-row > .server-status[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
}

.server-row-action[b-ncg18fu9cu] {
    display: flex;
    justify-content: center;
}

.lobby-tip[b-ncg18fu9cu] {
    direction: rtl;
    margin: 24px 0 14px;
    color: #464646;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 900px) {
    .featured-server[b-ncg18fu9cu] {
        grid-template-columns: 125px minmax(0, 1fr) 140px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        width: 125px;
        height: 84px;
    }

    .featured-server-stats[b-ncg18fu9cu] {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    }

    .featured-stat[b-ncg18fu9cu],
    .featured-server-stats > .server-status[b-ncg18fu9cu] {
        padding-inline: 5px;
        font-size: 12px;
    }

    .server-table-head[b-ncg18fu9cu],
    .server-table-row[b-ncg18fu9cu] {
        grid-template-columns: 46px 55px minmax(115px, 1fr) 75px 85px 85px 80px;
    }
}

@media (max-width: 700px) {
    .section-header[b-ncg18fu9cu] {
        margin-top: 16px;
    }

    .section-header h1[b-ncg18fu9cu] {
        font-size: 23px;
    }

    .featured-server[b-ncg18fu9cu] {
        grid-template-columns: 94px minmax(0, 1fr);
        grid-template-areas:
            "image info"
            "action action";
        gap: 8px;
        padding: 8px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        grid-area: image;
        width: 94px;
        height: 72px;
    }

    .featured-server-info[b-ncg18fu9cu] {
        grid-area: info;
        padding-inline: 5px;
    }

    .featured-server-title[b-ncg18fu9cu] {
        min-height: 34px;
    }

    .featured-server-title h3[b-ncg18fu9cu] {
        font-size: 17px;
    }

    .featured-server-stats[b-ncg18fu9cu] {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-server-action[b-ncg18fu9cu] {
        grid-area: action;
        justify-content: flex-end;
    }

    .other-title[b-ncg18fu9cu] {
        position: static;
        margin: 16px auto 5px;
        transform: none;
    }

    .other-servers-table[b-ncg18fu9cu] {
        margin-top: 0;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .server-table-head[b-ncg18fu9cu] {
        display: none;
    }

    .server-table-row[b-ncg18fu9cu] {
        grid-template-columns: 40px 60px 1fr 80px;
        grid-template-areas:
            "more image name action"
            "more image meta action";
        min-height: 76px;
        margin-bottom: 6px;
        border: 1px solid #d2d2d2;
        border-radius: 5px;
        background: rgba(255,255,255,.88);
    }

    .server-info-button[b-ncg18fu9cu] { grid-area: more; }
    .server-row-image[b-ncg18fu9cu] { grid-area: image; }
    .server-row-name[b-ncg18fu9cu] { grid-area: name; text-align: right; }
    .server-row-speed[b-ncg18fu9cu] { grid-area: meta; justify-content: flex-start; padding-inline: 12px; }
    .server-row-players[b-ncg18fu9cu] { grid-area: meta; justify-self: center; }
    .server-table-row > .server-status[b-ncg18fu9cu] { grid-area: meta; justify-self: flex-end; padding-inline-end: 6px; }
    .server-row-action[b-ncg18fu9cu] { grid-area: action; }
}

@media (max-width: 430px) {
    .server-selector-panel[b-ncg18fu9cu] {
        padding-inline: 5px;
    }

    .featured-server-stats[b-ncg18fu9cu] {
        grid-template-columns: 1fr 1fr;
    }

    .featured-stat[b-ncg18fu9cu],
    .featured-server-stats > .server-status[b-ncg18fu9cu] {
        font-size: 11px;
    }

    .server-table-row[b-ncg18fu9cu] {
        grid-template-columns: 34px 50px 1fr 74px;
    }

    .server-row-image[b-ncg18fu9cu] {
        width: 48px;
        height: 34px;
    }

    .server-row-name[b-ncg18fu9cu] {
        font-size: 12px;
    }
}

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

/* ─── Page Wrapper ─── */
.lobby-page[b-ncg18fu9cu] {
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    padding-bottom: 1rem;
}

/* ─── Section Header (metallic) ─── */
.section-header[b-ncg18fu9cu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    text-align: right;
}

    .section-header h2[b-ncg18fu9cu] {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        margin: 0;
    }

    .section-header span[b-ncg18fu9cu] {
        font-size: 11px;
        color: #777;
        font-weight: normal;
    }

.section-title[b-ncg18fu9cu] {
    font-size: 13px;
    font-weight: bold;
    color: #3a6322;
    margin: 0 0 6px;
}

.section-sub[b-ncg18fu9cu] {
    font-size: 11px;
    color: var(--gray-text);
    margin: 0;
}

/* ─── Loading State ─── */
.servers-loading[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--gray-text);
    font-size: 12px;
}

.loading-spinner[b-ncg18fu9cu] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-border);
    border-top-color: var(--green-main);
    border-radius: 50%;
    animation: lobby-spin-b-ncg18fu9cu 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

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

/* ─── Skeleton Loading (shimmer placeholder cards) ─── */
.skeleton-card[b-ncg18fu9cu] {
    pointer-events: none;
    user-select: none;
}

.skeleton[b-ncg18fu9cu] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-ncg18fu9cu 1.4s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer-b-ncg18fu9cu {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-timer[b-ncg18fu9cu] {
    width: 50px;
    height: 14px;
}

.skeleton-line[b-ncg18fu9cu] {
    height: 14px;
    margin-bottom: 6px;
}

.skeleton-name[b-ncg18fu9cu] {
    width: 70px;
}

.skeleton-server[b-ncg18fu9cu] {
    width: 100px;
    height: 18px;
}

.skeleton-circle[b-ncg18fu9cu] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.skeleton-btn[b-ncg18fu9cu] {
    width: 110px;
    height: 38px;
    border-radius: 6px;
}

/* ─── Empty State ─── */
.servers-empty[b-ncg18fu9cu] {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-card);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-card);
    color: var(--gray-text);
    font-size: 13px;
    font-weight: bold;
}

/* ─── Server Grid ─── */
.grid[b-ncg18fu9cu] {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── Server Card (Metallic) ─── */
.card[b-ncg18fu9cu] {
    width: 320px;
    background: linear-gradient(to bottom, var(--metal-light, #fff) 0%, var(--metal-mid, #e8e8e8) 100%);
    border: 2px solid var(--border-green, #2a4a23);
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px #a0a0a0, 0 8px 15px rgba(0,0,0,0.2);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s;
    min-height: auto;
}

    .card:hover[b-ncg18fu9cu] {
        box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px #a0a0a0, 0 10px 20px rgba(0,0,0,0.28);
    }

    /* Card corner decoration */
    .card[b-ncg18fu9cu]::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border: 1px solid rgba(42, 74, 35, 0.3);
        pointer-events: none;
        border-radius: 4px;
    }

    /* Status colors applied to card border */
    .card.status-full[b-ncg18fu9cu] {
        border-color: #c5960e;
    }

    .card.status-ended[b-ncg18fu9cu] {
        border-color: #888;
    }

    .card.status-maintenance[b-ncg18fu9cu] {
        border-color: #CC6600;
    }

    /* Maintenance overlay on card */
    .card.card-maintenance[b-ncg18fu9cu] {
        opacity: 0.85;
    }

        .card.card-maintenance .card-bg-shape[b-ncg18fu9cu] {
            display: block;
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(204, 102, 0, 0.04) 10px, rgba(204, 102, 0, 0.04) 20px );
            pointer-events: none;
            border-radius: 4px;
            z-index: 0;
        }

/* Maintenance banner inside card */
.maintenance-banner[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border: 1px solid #e65100;
    border-radius: 4px;
    color: #bf360c;
    font-size: 13px;
    font-weight: 700;
    margin: 4px 0;
    animation: maintenance-pulse-b-ncg18fu9cu 2s ease-in-out infinite;
}

    .maintenance-banner i[b-ncg18fu9cu] {
        font-size: 15px;
        animation: wrench-spin-b-ncg18fu9cu 3s ease-in-out infinite;
    }

@keyframes maintenance-pulse-b-ncg18fu9cu {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes wrench-spin-b-ncg18fu9cu {
    0%, 100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    40% {
        transform: rotate(15deg);
    }

    60% {
        transform: rotate(-10deg);
    }

    80% {
        transform: rotate(0deg);
    }
}

/* Maintenance disabled button */
.btn-play.btn-maintenance[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #e65100 0%, #bf360c 100%);
    border-color: #8d2407;
    cursor: not-allowed;
    color: #fff;
}

/* Registration closed button */
.btn-play.btn-reg-closed[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #9e9e9e 0%, #757575 100%);
    border-color: #616161;
    cursor: not-allowed;
    color: #eee;
}

.card-bg-shape[b-ncg18fu9cu] {
    display: none;
}

.card-content[b-ncg18fu9cu] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
}

.card-top[b-ncg18fu9cu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #aaa;
    padding-bottom: 8px;
    margin-bottom: 15px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.timer[b-ncg18fu9cu] {
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.server-info[b-ncg18fu9cu] {
    text-align: left;
}

    .server-info p[b-ncg18fu9cu] {
        font-size: 12px;
        color: #555;
        font-weight: 600;
        margin-bottom: 0;
    }

    .server-info h3[b-ncg18fu9cu] {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        letter-spacing: 0.3px;
    }

.card-bottom[b-ncg18fu9cu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    margin-top: 6px;
}

.action-group[b-ncg18fu9cu] {
    display: flex;
    gap: 6px;
}

.btn-circle[b-ncg18fu9cu] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #f0f0f0 0%, #c0c0c0 100%);
    border: 1px solid #888;
    color: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 white, 0 2px 4px rgba(0,0,0,0.3);
    font-size: 14px;
    transition: all 0.1s;
}

    .btn-circle:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #e0e0e0 0%, #b0b0b0 100%);
        color: #333;
    }

    .btn-circle:active[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #c0c0c0 0%, #e0e0e0 100%);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    }

.btn-play[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #6c9e50 0%, #4e7d36 100%);
    color: white;
    border: 1px solid #2a4a1c;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.1s ease;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

    .btn-play:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #7aad5e 0%, #5c8b42 100%);
    }

    .btn-play:active[b-ncg18fu9cu] {
        transform: translateY(2px);
        background: linear-gradient(to bottom, #4e7d36 0%, #5c8b42 100%);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .btn-play:disabled[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #b0b0b0 0%, #999 100%);
        border-color: #777;
        cursor: not-allowed;
        color: #eee;
        text-shadow: none;
        box-shadow: none;
    }

/* Ban indicator button */
.ban-indicator[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(to bottom, #dc2626 0%, #991b1b 100%);
    color: #fff;
    border: 2px solid #7f1d1d;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 6px rgba(220,38,38,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}

    .ban-indicator:hover[b-ncg18fu9cu] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(220,38,38,0.5);
    }

    .ban-indicator i[b-ncg18fu9cu] {
        font-size: 16px;
    }

/* بطاقة الإضافة (Add Card) */
.card-add[b-ncg18fu9cu] {
    background-color: var(--gray-light);
    border: 2px dashed var(--gray-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--gray-text);
    border-radius: var(--radius-card);
}

    .card-add:hover[b-ncg18fu9cu] {
        background-color: var(--green-light);
        border-color: var(--green-main);
        color: var(--green-main);
    }

.add-icon[b-ncg18fu9cu] {
    background-color: var(--bg-card);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border: 1px solid var(--gray-border);
}

.card-add:hover .add-icon[b-ncg18fu9cu] {
    background-color: var(--green-main);
    color: white;
    border-color: var(--green-dark, #1B5E20);
}

/* ─── Modal (Server Info) ─── */
.modal-overlay[b-ncg18fu9cu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 1rem;
    animation: fadeIn 0.15s ease-out;
}

    .modal-overlay.active[b-ncg18fu9cu] {
        display: flex;
    }

.modal-content[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    width: 100%;
    max-width: 500px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--border-green, #2a4a23);
    box-shadow: inset 0 0 0 2px #ffffff, 0 8px 20px rgba(0,0,0,0.15);
    animation: zoomIn 0.15s ease-out;
}

.modal-header[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 50%, #f0f0f0 100%);
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    height: 45px;
}

.modal-header-info h2[b-ncg18fu9cu] {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.modal-header-info p[b-ncg18fu9cu] {
    color: #777;
    font-weight: bold;
    font-size: 11px;
    margin-top: 1px;
}

.modal-body[b-ncg18fu9cu] {
    padding: 15px;
}

.stats-grid[b-ncg18fu9cu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

    /* خطوط فاصلة (Dividers) */
    .stats-grid[b-ncg18fu9cu]::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background-color: var(--gray-border);
        transform: translateX(-50%);
    }

    .stats-grid[b-ncg18fu9cu]::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        background-color: var(--gray-border);
        transform: translateY(-50%);
    }

.stat-item[b-ncg18fu9cu] {
    text-align: center;
    padding: 12px 8px;
    background-color: #fafafa;
}

    .stat-item:hover[b-ncg18fu9cu] {
        background-color: var(--green-light);
    }

.stat-icon[b-ncg18fu9cu] {
    background-color: var(--bg-card);
    color: var(--green-main);
    width: 34px;
    height: 34px;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 6px;
    border: 1px solid var(--gray-border);
}

.stat-label[b-ncg18fu9cu] {
    display: block;
    font-size: 11px;
    color: var(--gray-text);
    font-weight: bold;
    margin-bottom: 3px;
}

.stat-value[b-ncg18fu9cu] {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: var(--gray-dark);
}

/* --- Join Server Modal --- */
.join-modal-content[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    border: 2px solid var(--border-green, #2a4a23);
    border-radius: 6px;
    width: 100%;
    max-width: 580px;
    animation: zoomIn 0.15s ease-out;
    color: var(--gray-dark);
    overflow: hidden;
    box-shadow: inset 0 0 0 2px #ffffff, 0 8px 20px rgba(0,0,0,0.15);
}

.join-header[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 50%, #f0f0f0 100%);
    border-bottom: 1px solid #ccc;
    height: 45px;
    padding: 0 14px;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .join-header h2[b-ncg18fu9cu] {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }

.join-close[b-ncg18fu9cu] {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #c0c0c0 100%);
    border: 1px solid #888;
    color: #444;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: inset 0 1px 0 white, 0 2px 4px rgba(0,0,0,0.3);
}

    .join-close:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #e0e0e0 0%, #b0b0b0 100%);
        color: #333;
    }

    .join-close:active[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #c0c0c0 0%, #e0e0e0 100%);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
    }

.join-body[b-ncg18fu9cu] {
    padding: 15px 20px;
    text-align: center;
}

.join-desc[b-ncg18fu9cu] {
    font-size: 12px;
    color: var(--gray-text);
    margin-bottom: 14px;
    font-weight: normal;
    line-height: 1.7;
}

/* Step 1: Tribe Selection */
.tribe-selectors[b-ncg18fu9cu] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tribe-btn[b-ncg18fu9cu] {
    background-color: var(--bg-card);
    border: 2px solid var(--gray-border);
    width: 120px;
    height: 140px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 6px;
    color: var(--gray-text);
    transition: border-color 0.15s;
    position: relative;
    overflow: hidden;
}

    .tribe-btn img[b-ncg18fu9cu] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s;
    }

    .tribe-btn:hover img[b-ncg18fu9cu] {
        transform: scale(1.03);
    }

.tribe-btn-label[b-ncg18fu9cu] {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 10px;
    border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.tribe-btn:hover[b-ncg18fu9cu] {
    border-color: var(--green-main);
}

.tribe-btn.active[b-ncg18fu9cu] {
    border-color: var(--green-main);
    box-shadow: 0 0 0 1px var(--green-main);
}

    .tribe-btn.active[b-ncg18fu9cu]::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px 8px 0;
        border-style: solid;
        border-color: var(--green-main) transparent transparent transparent;
        z-index: 2;
    }

.tribe-details[b-ncg18fu9cu] {
    background-color: var(--gray-light);
    border: 1px solid var(--gray-border);
    padding: 12px;
    border-radius: var(--radius-btn);
    display: flex;
    gap: 10px;
    text-align: right;
    position: relative;
}

.recommended-badge[b-ncg18fu9cu] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--green-main);
    color: white;
    padding: 2px 10px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    border: 1px solid var(--green-dark, #1B5E20);
}

.tribe-details-icon[b-ncg18fu9cu] {
    font-size: 3.5rem;
    color: var(--gray-border);
    flex-shrink: 0;
    opacity: 0.5;
}

.tribe-details-text h3[b-ncg18fu9cu] {
    font-size: 14px;
    color: var(--green-main);
    margin-bottom: 4px;
    font-weight: bold;
}

.tribe-traits[b-ncg18fu9cu] {
    list-style: none;
    padding: 0;
    font-size: 12px;
    color: var(--gray-text);
}

    .tribe-traits li[b-ncg18fu9cu] {
        margin-bottom: 3px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .tribe-traits li i[b-ncg18fu9cu] {
            color: var(--green-main);
            font-size: 10px;
        }

/* Step 2: Map Selection */
.map-selector[b-ncg18fu9cu] {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    margin: 0 auto 14px;
    border: 1px solid var(--gray-border);
    max-width: 340px;
}

.map-selector-img[b-ncg18fu9cu] {
    display: block;
    width: 100%;
    height: auto;
}

.map-selector-overlay[b-ncg18fu9cu] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    direction: ltr;
}

.map-quadrant[b-ncg18fu9cu] {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.15s;
    border: 2px solid transparent;
}

    .map-quadrant:hover[b-ncg18fu9cu] {
        background-color: rgba(47, 159, 47, 0.12);
    }

    .map-quadrant.active[b-ncg18fu9cu] {
        background-color: rgba(47, 159, 47, 0.18);
        border-color: var(--green-main);
    }

.quadrant-label[b-ncg18fu9cu] {
    font-size: 11px;
    font-weight: bold;
    color: var(--gray-dark);
    background: rgba(255, 255, 255, 0.88);
    padding: 2px 8px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
    border: 1px solid var(--gray-border);
}

.map-quadrant.active .quadrant-label[b-ncg18fu9cu] {
    color: #fff;
    background: var(--green-main);
    border-color: var(--green-dark, #1B5E20);
}

.map-recommended[b-ncg18fu9cu] {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gold, #D4A843);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
}

/* Step 3: Confirmation */
.confirm-cards[b-ncg18fu9cu] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.confirm-card[b-ncg18fu9cu] {
    flex: 1;
    background-color: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-radius: var(--radius-btn);
    padding: 14px 8px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .confirm-card:hover[b-ncg18fu9cu] {
        border-color: var(--green-main);
        background-color: var(--green-light);
    }

    .confirm-card h4[b-ncg18fu9cu] {
        font-size: 14px;
        font-weight: bold;
        color: var(--gray-dark);
        margin: 0;
    }

.confirm-change[b-ncg18fu9cu] {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--green-main);
    font-size: 11px;
    font-weight: bold;
}

.input-group[b-ncg18fu9cu] {
    text-align: right;
    margin-bottom: 10px;
}

    .input-group label[b-ncg18fu9cu] {
        display: block;
        font-weight: bold;
        color: var(--gray-dark);
        margin-bottom: 4px;
        font-size: 12px;
    }

    .input-group input[b-ncg18fu9cu] {
        width: 100%;
        padding: 5px 8px;
        border: 1px solid var(--gray-medium, #CCCCCC);
        background-color: #fff;
        border-radius: var(--radius-btn);
        font-family: Tahoma, Arial, sans-serif;
        font-size: 14px;
        color: var(--gray-dark);
        outline: none;
        transition: border-color 0.15s;
    }

        .input-group input:focus[b-ncg18fu9cu] {
            border-color: var(--green-main);
            box-shadow: 0 0 3px rgba(85, 119, 34, 0.3);
        }

.info-alert[b-ncg18fu9cu] {
    background-color: var(--green-light);
    border: 1px solid var(--green-main);
    color: var(--green-dark, #1B5E20);
    padding: 6px 10px;
    border-radius: var(--radius-btn);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Classic Travian Button (Metallic Green) */
.btn-classic-game[b-ncg18fu9cu] {
    background: linear-gradient(to bottom, #6c9e50 0%, #4e7d36 100%);
    border: 1px solid #2a4a1c;
    color: white;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

    .btn-classic-game:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #7aad5e 0%, #5c8b42 100%);
    }

    .btn-classic-game:active[b-ncg18fu9cu] {
        transform: translateY(2px);
        background: linear-gradient(to bottom, #4e7d36 0%, #5c8b42 100%);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }

/* ─── Winner Banner (inside server card) ─── */
.winner-banner[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    margin: 4px 0;
    background: var(--gold-bg, #FFF8E1);
    border: 1px solid var(--gold, #D4A843);
    border-radius: var(--radius-card);
    font-size: 11px;
    color: #7a5c00;
}

    .winner-banner > i[b-ncg18fu9cu] {
        font-size: 14px;
        color: var(--gold, #D4A843);
        flex-shrink: 0;
    }

.winner-banner-text[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

    .winner-banner-text .winner-label[b-ncg18fu9cu] {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #8a6914;
    }

    .winner-banner-text strong[b-ncg18fu9cu] {
        font-size: 12px;
        color: #5a4000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .winner-banner-text .winner-alliance[b-ncg18fu9cu] {
        font-size: 10px;
        color: #8a6914;
    }

.winner-banner .winner-date[b-ncg18fu9cu] {
    font-size: 10px;
    color: #8a6914;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Responsive ─── */
@media (max-width: 420px) {
    .card[b-ncg18fu9cu] {
        width: 100%;
    }
}

/* ─── Sitter accounts panel (inside the featured card) ─── */
.sitter-accounts[b-ncg18fu9cu] {
    grid-area: sitter;
    margin-top: 4px;
    border: 1px solid rgba(211, 167, 51, .45);
    border-radius: 11px;
    background: rgba(253, 249, 238, .92);
    overflow: hidden;
}

.sitter-accounts-header[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    color: #6b5a24;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .sitter-accounts-header:hover[b-ncg18fu9cu] {
        background: rgba(211, 167, 51, .09);
    }

.sitter-accounts-title[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .sitter-accounts-title > i[b-ncg18fu9cu] {
        color: #d8a600;
        font-size: 16px;
    }

.sitter-accounts-count[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: linear-gradient(to bottom, #f4d67a, #e0b53c);
    border: 1px solid #cda532;
    color: #5b4a12;
    font-size: 13px;
    font-weight: 800;
}

.sitter-accounts-toggle[b-ncg18fu9cu] {
    color: #d8a600;
    font-size: 15px;
}

.sitter-accounts-body[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(211, 167, 51, .3);
}

.sitter-account-row[b-ncg18fu9cu] {
    direction: rtl;
    display: grid;
    grid-template-columns: 36% 26% 16% 22%;
    align-items: center;
    width: 100%;
    min-height: 62px;
    border-bottom: 1px solid rgba(211, 167, 51, .22);
}

    .sitter-account-row:last-child[b-ncg18fu9cu] {
        border-bottom: 0;
    }

.sitter-account-server[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 16px 8px 8px;
}

.sitter-account-image[b-ncg18fu9cu] {
    flex: 0 0 auto;
    width: 62px;
    height: 42px;
    border: 1px solid #bcb49d;
    border-radius: 7px;
    object-fit: cover;
}

.sitter-account-server-name[b-ncg18fu9cu] {
    min-width: 0;
    color: #302e2b;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sitter-account-owner[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    color: #b3870f;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .sitter-account-owner > i[b-ncg18fu9cu] {
        flex: 0 0 auto;
        font-size: 15px;
    }

.sitter-account-status[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #d8a600;
    font-size: 14px;
    font-weight: 700;
}

.sitter-account-status .status-indicator[b-ncg18fu9cu] {
    background: #d8a600;
}

.sitter-account-action[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sitter-account-play[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 18px;
    border: 1px solid #39772d;
    border-radius: 7px;
    background: linear-gradient(to bottom, #68ad4d, #438d34);
    color: #fff;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px rgba(0,0,0,.2);
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.13);
    cursor: pointer;
}

    .sitter-account-play:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #74b959, #4b963a);
    }

.sitter-account-remove[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #c07070;
    border-radius: 7px;
    background: linear-gradient(to bottom, #f0d0d0, #e0a0a0);
    color: #8b2020;
    font-size: 13px;
    cursor: pointer;
}

    .sitter-account-remove:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #e8b0b0, #d08080);
    }

/* ─── Sitter Modal ─── */
.sitter-list[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.sitter-row[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.sitter-label[b-ncg18fu9cu] {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    min-width: 90px;
    text-align: right;
}

.sitter-name[b-ncg18fu9cu] {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    color: #3b6b2a;
}

.sitter-input[b-ncg18fu9cu] {
    flex: 1;
    height: 28px;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 0 6px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.sitter-add-btn[b-ncg18fu9cu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #3b6b2a;
    background: linear-gradient(to bottom, #e8f5e9, #c8e6c9);
    color: #3b6b2a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.1s;
}

    .sitter-add-btn:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #c8e6c9, #a5d6a7);
    }

.sitter-remove-small[b-ncg18fu9cu] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #c07070;
    background: linear-gradient(to bottom, #f0d0d0, #e0a0a0);
    color: #8b2020;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.1s;
}

    .sitter-remove-small:hover[b-ncg18fu9cu] {
        background: linear-gradient(to bottom, #e8b0b0, #d08080);
    }

/* ======================================================================
   Compact RTL server selector — reference design overrides
   ====================================================================== */
.lobby-page[b-ncg18fu9cu] {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: 0 0 6px;
    color: #302923;
    font-size: 12px;
}

.section-header[b-ncg18fu9cu] {
    justify-content: center;
    margin: 0 0 9px;
    text-align: center;
}

    .section-header h1[b-ncg18fu9cu] {
        margin: 0;
        font-size: 21px;
        line-height: 1.25;
        color: #211d19;
        text-shadow: 0 1px 0 #fff;
    }

    .section-header h1 i[b-ncg18fu9cu] {
        margin-inline-start: 7px;
        color: #696969;
        font-size: 15px;
        vertical-align: middle;
    }

.featured-label[b-ncg18fu9cu],
.other-servers-label[b-ncg18fu9cu] {
    position: relative;
    z-index: 3;
    width: fit-content;
    margin: 0 auto -18px;
    padding: 0 16px;
    background: rgba(255,255,255,.94);
    color: #302923;
    font-size: 13px;
}

.grid.server-list[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    padding: 20px 7px 7px;
    background: rgba(255,255,255,.72);
    border: 1px solid #d6d6d6;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.server-list .card[b-ncg18fu9cu] {
    width: 100%;
    min-height: 55px;
    flex-direction: row;
    direction: ltr;
    align-items: stretch;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 2px rgba(0,0,0,.07);
    overflow: hidden;
    transition: background-color .15s;
}

    .server-list .card:hover[b-ncg18fu9cu] {
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
    }

    .server-list .card[b-ncg18fu9cu]::before {
        content: none;
    }

.server-thumbnail[b-ncg18fu9cu] {
    flex: 0 0 54px;
    width: 54px;
    height: 42px;
    margin: 6px;
    align-self: center;
    object-fit: cover;
    border: 1px solid #a9a48d;
    border-radius: 3px;
}

.server-list .card:first-child[b-ncg18fu9cu] {
    min-height: 92px;
    margin-bottom: 28px;
}

    .server-list .card:first-child .server-thumbnail[b-ncg18fu9cu] {
        flex-basis: 126px;
        width: 126px;
        height: 78px;
        margin: 7px;
        border-radius: 6px;
    }

.server-list .card-content[b-ncg18fu9cu] {
    direction: rtl;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.45fr) minmax(180px, 1fr);
    grid-template-areas: "action metrics info";
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 0;
}

.server-list .card:first-child .action-group[b-ncg18fu9cu] {
    display: none;
}

.server-list .card:not(:first-child) .action-group .btn-circle:nth-child(2)[b-ncg18fu9cu] {
    display: none;
}

.server-list .card-top[b-ncg18fu9cu] {
    grid-area: info;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    box-shadow: none;
}

.server-list .server-info[b-ncg18fu9cu] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3px 7px;
    min-width: 0;
    text-align: right;
}

    .server-list .server-info h3[b-ncg18fu9cu] {
        grid-column: 2;
        margin: 0;
        color: #2a2622;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .server-list .server-state[b-ncg18fu9cu] {
        grid-column: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        color: #438d32;
        font-size: 11px;
    }

.featured-crown[b-ncg18fu9cu] {
    grid-row: 1 / span 2;
    align-self: start;
    color: #e2ad12;
    font-size: 18px;
    line-height: 1;
}

.status-dot[b-ncg18fu9cu] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42a234;
}

.server-list .timer[b-ncg18fu9cu] {
    color: #4f4f4f;
    font-size: 11px;
    white-space: nowrap;
}

.server-metrics[b-ncg18fu9cu] {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    color: #555;
    font-size: 11px;
}

.server-metrics > span[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding-inline: 8px;
    border-inline-start: 1px solid #ececec;
    white-space: nowrap;
}

.server-metrics i[b-ncg18fu9cu] {
    color: #838786;
}

.server-list .card-bottom[b-ncg18fu9cu] {
    grid-area: action;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-inline-start: 1px solid #e0e0e0;
}

.server-list .action-group[b-ncg18fu9cu] {
    display: flex;
    gap: 5px;
}

.server-list .btn-circle[b-ncg18fu9cu] {
    width: 24px;
    height: 24px;
    border: 0;
    background: #8f9392;
    color: #fff;
    font-size: 10px;
    box-shadow: none;
}

.server-list .btn-play[b-ncg18fu9cu],
.server-list .ban-indicator[b-ncg18fu9cu] {
    min-width: 72px;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid #397d2c;
    border-radius: 4px;
    background: linear-gradient(to bottom, #66ad4b, #438f34);
    color: #fff;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px rgba(0,0,0,.2);
    box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.12);
}

.server-list .card:first-child .btn-play[b-ncg18fu9cu] {
    min-width: 126px;
    min-height: 38px;
    font-size: 12px;
}

.other-servers-label[b-ncg18fu9cu] {
    order: 0;
    margin-top: -21px;
    margin-bottom: 5px;
}

.server-table-header[b-ncg18fu9cu] {
    display: grid;
    direction: rtl;
    grid-template-columns: 1.25fr .75fr .75fr .7fr .55fr;
    padding: 4px 5%;
    color: #57514b;
    font-size: 10px;
    text-align: center;
}

.server-list .card:not(:first-child)[b-ncg18fu9cu] {
    margin-top: -1px;
    border-radius: 0;
    box-shadow: none;
}

.server-list .card:not(:first-child) .server-info h3[b-ncg18fu9cu] {
    font-size: 11px;
}

.server-list .card:not(:first-child) .server-state[b-ncg18fu9cu] {
    font-size: 10px;
}

.server-list .maintenance-banner[b-ncg18fu9cu],
.server-list .scheduled-open-banner[b-ncg18fu9cu],
.server-list .winner-banner[b-ncg18fu9cu] {
    grid-column: 1 / -1;
    margin: 4px 8px;
}

.lobby-tip[b-ncg18fu9cu] {
    margin: 18px 0 0;
    text-align: center;
    color: #4e4944;
    font-size: 11px;
}

@media (max-width: 700px) {
    .server-table-header[b-ncg18fu9cu] {
        display: none;
    }

    .server-list .card[b-ncg18fu9cu],
    .server-list .card:first-child[b-ncg18fu9cu] {
        min-height: 82px;
        margin-bottom: 0;
    }

    .other-servers-label[b-ncg18fu9cu] {
        margin-top: 10px;
    }

    .server-list .card-content[b-ncg18fu9cu] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info metrics"
            "action action";
    }

    .server-metrics[b-ncg18fu9cu] {
        grid-template-columns: repeat(3, auto);
    }

    .server-list .card-bottom[b-ncg18fu9cu] {
        padding: 5px 8px;
        border-inline-start: 0;
        border-top: 1px solid #e5e5e5;
    }

    .server-list .card:first-child .server-thumbnail[b-ncg18fu9cu] {
        flex-basis: 92px;
        width: 92px;
        height: 68px;
    }

    .server-list .card:first-child .btn-play[b-ncg18fu9cu] {
        min-width: 100px;
        min-height: 30px;
        font-size: 11px;
    }
}

@media (max-width: 430px) {
    .server-thumbnail[b-ncg18fu9cu],
    .server-list .card:first-child .server-thumbnail[b-ncg18fu9cu] {
        flex-basis: 68px;
        width: 68px;
        height: 54px;
        margin: 5px;
    }

    .server-list .card-top[b-ncg18fu9cu] {
        padding-inline: 5px;
    }

    .server-list .timer[b-ncg18fu9cu] {
        display: none;
    }

    .server-list .action-group .btn-circle:nth-child(2)[b-ncg18fu9cu] {
        display: none;
    }
}

/* ======================================================================
   Lobby server selection — final reference layout
   ====================================================================== */
.lobby-page[b-ncg18fu9cu] {
    direction: rtl;
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    padding: clamp(28px, 5vh, 56px) 24px 32px;
    color: #35322f;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
}

.section-header[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 24px;
    text-align: center;
}

.section-header h1[b-ncg18fu9cu] {
    margin: 0;
    color: #383633;
    font-size: clamp(28px, 2.25vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 0 #fff;
}

.section-header p[b-ncg18fu9cu] {
    margin: 4px 0 0;
    color: #89847f;
    font-size: 14px;
}

.title-ornament[b-ncg18fu9cu],
.title-rule[b-ncg18fu9cu] {
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-ornament[b-ncg18fu9cu] {
    gap: 8px;
    width: 190px;
    color: #dba900;
    font-size: 14px;
}

.title-ornament span[b-ncg18fu9cu] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddb31d);
}

.title-ornament span:last-child[b-ncg18fu9cu] {
    background: linear-gradient(90deg, #ddb31d, transparent);
}

.title-rule[b-ncg18fu9cu] {
    width: 230px;
    height: 7px;
    border-top: 1px solid #e0b62c;
}

.title-rule span[b-ncg18fu9cu] {
    width: 7px;
    height: 7px;
    margin-top: -1px;
    transform: rotate(45deg);
    border: 1px solid #e0b62c;
    background: #fff;
}

.server-selector-panel[b-ncg18fu9cu] {
    position: static;
    width: min(100%, 920px);
    margin-inline: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.featured-server[b-ncg18fu9cu] {
    direction: rtl;
    display: grid;
    grid-template-columns: minmax(210px, 26%) minmax(250px, 1fr) 172px;
    grid-template-areas:
        "image info action"
        "image stats stats"
        "sitter sitter sitter";
    gap: 11px 18px;
    align-items: center;
    width: 100%;
    min-height: 180px;
    padding: 11px;
    border: 1px solid rgba(211, 167, 51, .35);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 4px 12px rgba(77, 68, 54, .09);
}

.featured-server-sitter-only[b-ncg18fu9cu] {
    grid-template-areas: "sitter";
    grid-template-columns: 1fr;
    min-height: 0;
}

    .featured-server-sitter-only .sitter-accounts[b-ncg18fu9cu] {
        margin-top: 0;
    }

.featured-server-image[b-ncg18fu9cu] {
    grid-area: image;
    width: 100%;
    height: 158px;
    border: 1px solid rgba(195, 168, 95, .35);
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}

.featured-server-info[b-ncg18fu9cu] {
    grid-area: info;
    align-self: end;
    min-width: 0;
    padding: 0 6px;
    text-align: right;
}

.featured-label[b-ncg18fu9cu] {
    position: static;
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    margin: 0 0 7px;
    padding: 0;
    background: transparent;
    color: #d8a600;
    font-size: 13px;
    font-weight: 700;
}

.featured-label i[b-ncg18fu9cu] {
    font-size: 19px;
}

.featured-server-info h2[b-ncg18fu9cu] {
    margin: 0 0 8px;
    color: #302f2d;
    font-size: clamp(22px, 1.8vw, 27px);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-status[b-ncg18fu9cu] {
    direction: rtl;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #438d32;
    font-weight: 700;
}

.status-badge[b-ncg18fu9cu] {
    min-height: 26px;
    padding: 3px 11px;
    border: 1px solid #cfe5c8;
    border-radius: 8px;
    background: #eff8ec;
    font-size: 13px;
}

.status-indicator[b-ncg18fu9cu] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a9a31;
}

.server-status.status-maintenance[b-ncg18fu9cu],
.server-status.status-full[b-ncg18fu9cu],
.server-status.status-ended[b-ncg18fu9cu] {
    color: #c87d0c;
}

.server-status.status-maintenance .status-indicator[b-ncg18fu9cu],
.server-status.status-full .status-indicator[b-ncg18fu9cu],
.server-status.status-ended .status-indicator[b-ncg18fu9cu] {
    background: #e59014;
}

.server-status.status-pending[b-ncg18fu9cu] {
    color: #7c3aed;
}

.server-status.status-pending .status-indicator[b-ncg18fu9cu] {
    background: #8b5cf6;
}

.server-opens-in[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: 7px;
    padding: 2px 8px;
    border: 1px solid #ddd6fe;
    border-radius: 7px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 700;
}

.server-opens-in .countdown[b-ncg18fu9cu] {
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .server-opens-in[b-ncg18fu9cu] {
        margin-inline-start: 0;
        margin-top: 4px;
    }

    .server-table-row > .server-status[b-ncg18fu9cu] {
        flex-wrap: wrap;
    }
}

.featured-server-action[b-ncg18fu9cu] {
    grid-area: action;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
}

.featured-server-stats[b-ncg18fu9cu] {
    direction: rtl;
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    min-height: 62px;
    border: 1px solid #e2e1de;
    border-radius: 10px;
    background: rgba(252, 252, 251, .9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .04);
}

.featured-stat[b-ncg18fu9cu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 8px;
    border-inline-start: 1px solid #deddd9;
    color: #353535;
}

.featured-stat:last-child[b-ncg18fu9cu] {
    border-inline-start: 0;
}

.stat-label[b-ncg18fu9cu] {
    color: #595652;
    font-size: 12px;
    font-weight: 600;
}

.stat-value[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.stat-value i[b-ncg18fu9cu],
.server-row-players i[b-ncg18fu9cu],
.server-row-speed > i[b-ncg18fu9cu] {
    color: #8c908f;
}

.sitter-shortcut[b-ncg18fu9cu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8b8f8e;
    font-size: 11px;
    cursor: pointer;
}

.other-title[b-ncg18fu9cu] {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 20px 0 12px;
    transform: none;
}

.other-title h2[b-ncg18fu9cu] {
    margin: 0;
    color: #403d39;
    font-size: 18px;
    font-weight: 800;
}

.other-title > span[b-ncg18fu9cu] {
    width: 66px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d7a800);
}

.other-title > span:last-child[b-ncg18fu9cu] {
    background: linear-gradient(90deg, #d7a800, transparent);
}

.other-servers-table[b-ncg18fu9cu] {
    direction: rtl;
    width: 100%;
    margin: 0;
    border: 1px solid #deddd9;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 3px 10px rgba(63, 58, 50, .07);
    overflow: hidden;
}

.server-table-head[b-ncg18fu9cu],
.server-table-row[b-ncg18fu9cu] {
    direction: rtl;
    display: grid;
    grid-template-columns: 36% 17% 15% 17% 15%;
    align-items: center;
    width: 100%;
}

.server-table-head[b-ncg18fu9cu] {
    min-height: 38px;
    border-bottom: 1px solid #deddd9;
    background: rgba(251, 251, 250, .72);
    color: #514d48;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.server-table-head > :nth-child(n)[b-ncg18fu9cu] {
    grid-column: auto;
}

.server-table-head > :first-child[b-ncg18fu9cu] {
    padding-inline-start: 28px;
    text-align: right;
}

.server-table-row[b-ncg18fu9cu] {
    min-height: 66px;
    border-bottom: 1px solid #e6e5e2;
    color: #343230;
    font-size: 14px;
}

.server-table-row:last-child[b-ncg18fu9cu] {
    border-bottom: 0;
}

.server-identity[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 16px 8px 8px;
}

.server-row-image[b-ncg18fu9cu] {
    flex: 0 0 auto;
    width: 66px;
    height: 44px;
    border: 1px solid #bcb49d;
    border-radius: 7px;
    object-fit: cover;
}

.server-row-name[b-ncg18fu9cu] {
    min-width: 0;
    padding: 0;
    color: #302e2b;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-info-button[b-ncg18fu9cu] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #969998;
    color: #fff;
    font-size: 12px;
    box-shadow: none;
    cursor: pointer;
}

.server-table-row > .server-status[b-ncg18fu9cu] {
    justify-self: center;
    font-size: 14px;
}

.server-row-players[b-ncg18fu9cu],
.server-row-speed[b-ncg18fu9cu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 700;
}

.server-row-players[b-ncg18fu9cu] {
    justify-self: stretch;
}

.server-row-action[b-ncg18fu9cu] {
    display: flex;
    justify-content: center;
}

.lobby-tip[b-ncg18fu9cu] {
    direction: rtl;
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 10px 24px;
    border: 1px solid rgba(220, 218, 212, .75);
    border-radius: 9px;
    background: rgba(255, 255, 255, .7);
    color: #514d48;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

@media (max-width: 980px) {
    .featured-server[b-ncg18fu9cu] {
        grid-template-columns: minmax(180px, 27%) minmax(220px, 1fr) 155px;
        gap: 10px 14px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        height: 150px;
    }

    .server-row-image[b-ncg18fu9cu] {
        width: 62px;
        height: 42px;
    }
}

@media (max-width: 820px) {
    .lobby-page[b-ncg18fu9cu] {
        max-width: 720px;
        padding-inline: 18px;
    }

    .featured-server[b-ncg18fu9cu] {
        grid-template-columns: minmax(190px, 38%) minmax(0, 1fr);
        grid-template-areas:
            "image info"
            "stats stats"
            "action action"
            "sitter sitter";
        gap: 11px 16px;
        width: 100%;
        min-height: 0;
        padding: 12px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        justify-self: center;
        width: 100%;
        height: 142px;
    }

    .featured-server-info[b-ncg18fu9cu] {
        align-self: center;
        padding: 0 4px;
        text-align: center;
    }

    .featured-label[b-ncg18fu9cu] {
        justify-content: center;
        margin-bottom: 8px;
    }

    .featured-server-info h2[b-ncg18fu9cu] {
        margin-bottom: 9px;
        font-size: 23px;
    }

    .featured-server-stats[b-ncg18fu9cu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .featured-stat[b-ncg18fu9cu] {
        min-height: 62px;
        border-bottom: 1px solid #deddd9;
    }

    .featured-stat:nth-child(2)[b-ncg18fu9cu],
    .featured-stat:nth-child(4)[b-ncg18fu9cu] {
        border-inline-start: 0;
    }

    .featured-stat:nth-child(n + 3)[b-ncg18fu9cu] {
        border-bottom: 0;
    }

    .featured-server-action[b-ncg18fu9cu] {
        align-self: auto;
        padding: 0;
    }

    .other-title[b-ncg18fu9cu] {
        margin-top: 22px;
    }

    .server-table-head[b-ncg18fu9cu] {
        min-height: 38px;
    }

    .server-table-row[b-ncg18fu9cu] {
        min-height: 66px;
    }

    .server-identity[b-ncg18fu9cu] {
        gap: 8px;
        padding-inline-start: 12px;
    }

    .server-row-image[b-ncg18fu9cu] {
        width: 64px;
        height: 46px;
    }
}

@media (max-width: 700px) {
    .lobby-page[b-ncg18fu9cu] {
        padding: 8px 12px 22px;
    }

    .section-header[b-ncg18fu9cu] {
        gap: 4px;
        margin-bottom: 14px;
    }

    .section-header h1[b-ncg18fu9cu] {
        font-size: 26px;
    }

    .section-header p[b-ncg18fu9cu] {
        font-size: 12px;
    }

    .featured-server[b-ncg18fu9cu] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "info"
            "stats"
            "action"
            "sitter";
        gap: 10px;
        min-height: 0;
        padding: 10px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        justify-self: center;
        width: min(82%, 280px);
        height: 118px;
    }

    .featured-server-info[b-ncg18fu9cu] {
        align-self: auto;
        padding: 0 4px;
        text-align: center;
    }

    .featured-label[b-ncg18fu9cu] {
        justify-content: center;
        margin-bottom: 6px;
    }

    .featured-server-info h2[b-ncg18fu9cu] {
        margin-bottom: 7px;
        font-size: 22px;
    }

    .featured-server-stats[b-ncg18fu9cu] {
        grid-template-columns: repeat(2, 1fr);
        min-height: 0;
    }

    .featured-stat[b-ncg18fu9cu] {
        min-height: 58px;
        padding-block: 5px;
        border-bottom: 1px solid #deddd9;
    }

    .featured-stat:nth-child(2)[b-ncg18fu9cu],
    .featured-stat:nth-child(4)[b-ncg18fu9cu] {
        border-inline-start: 0;
    }

    .featured-stat:nth-child(n + 3)[b-ncg18fu9cu] {
        border-bottom: 0;
    }

    .featured-server-action[b-ncg18fu9cu] {
        align-self: auto;
        padding: 0;
    }

    .other-title[b-ncg18fu9cu] {
        margin: 22px 0 11px;
    }

    .other-title h2[b-ncg18fu9cu] {
        font-size: 19px;
    }

    .server-table-head[b-ncg18fu9cu] {
        display: none;
    }

    .other-servers-table[b-ncg18fu9cu] {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .server-table-row[b-ncg18fu9cu] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "identity identity"
            "status players"
            "speed action";
        gap: 7px 6px;
        min-height: 0;
        margin-bottom: 9px;
        padding: 9px;
        border: 1px solid #dddcd8;
        border-radius: 12px;
        background: rgba(255, 255, 255, .84);
        box-shadow: 0 2px 7px rgba(0, 0, 0, .05);
    }

    .server-identity[b-ncg18fu9cu] {
        grid-area: identity;
        padding: 0 0 8px;
        border-bottom: 1px solid #e7e5e1;
    }

    .server-table-row > .server-status[b-ncg18fu9cu] {
        grid-area: status;
    }

    .server-row-players[b-ncg18fu9cu] {
        grid-area: players;
    }

    .server-row-speed[b-ncg18fu9cu] {
        grid-area: speed;
    }

    .server-row-action[b-ncg18fu9cu] {
        grid-area: action;
    }

    .server-row-image[b-ncg18fu9cu] {
        width: 58px;
        height: 40px;
    }

    .server-row-name[b-ncg18fu9cu] {
        flex: 1;
        font-size: 15px;
    }

    .lobby-tip[b-ncg18fu9cu] {
        margin-top: 8px;
        padding-inline: 16px;
        font-size: 12px;
    }

    .sitter-accounts-header[b-ncg18fu9cu] {
        padding-inline: 12px;
        font-size: 13px;
    }

    .sitter-account-row[b-ncg18fu9cu] {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "server server"
            "status owner"
            "action action";
        gap: 8px 6px;
        min-height: 0;
        padding: 9px;
    }

    .sitter-account-server[b-ncg18fu9cu] {
        grid-area: server;
        padding: 0 0 8px;
        border-bottom: 1px solid rgba(211, 167, 51, .25);
    }

    .sitter-account-owner[b-ncg18fu9cu] {
        grid-area: owner;
        justify-content: flex-end;
        padding-inline-end: 4px;
    }

    .sitter-account-status[b-ncg18fu9cu] {
        grid-area: status;
        justify-content: flex-start;
        padding-inline-start: 4px;
    }

    .sitter-account-action[b-ncg18fu9cu] {
        grid-area: action;
        width: 100%;
    }

    .sitter-account-play[b-ncg18fu9cu] {
        flex: 1;
    }
}

@media (max-width: 410px) {
    .lobby-page[b-ncg18fu9cu] {
        padding-inline: 8px;
    }

    .title-ornament[b-ncg18fu9cu],
    .title-rule[b-ncg18fu9cu] {
        width: 170px;
    }

    .featured-stat[b-ncg18fu9cu] {
        padding-inline: 5px;
    }

    .featured-server-image[b-ncg18fu9cu] {
        width: min(80%, 250px);
        height: 106px;
    }

    .stat-value[b-ncg18fu9cu] {
        gap: 6px;
        font-size: 14px;
    }

    .other-title > span[b-ncg18fu9cu] {
        width: 35px;
    }
}
/* /Components/Pages/Lobby/ServerActionButton.razor.rz.scp.css */
.server-action[b-7mx1zpz2nu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 84px;
    min-height: 36px;
    padding: 6px 11px;
    border: 1px solid #39772d;
    border-radius: 7px;
    background: linear-gradient(to bottom, #68ad4d, #438d34);
    color: #fff;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px rgba(0,0,0,.2);
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.13);
    cursor: pointer;
}

.server-action.featured[b-7mx1zpz2nu] {
    width: 160px;
    min-height: 42px;
    font-size: 14px;
}

.server-action:hover:not(:disabled)[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #74b959, #4b963a);
}

.server-action:disabled[b-7mx1zpz2nu] {
    cursor: not-allowed;
    opacity: .72;
}

.server-action.maintenance[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #e58a3f, #bd5b20);
    border-color: #984617;
}

.server-action.banned[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #bd4d46, #8f2925);
    border-color: #74201d;
}

.server-action.pending[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #e1ad3f, #b77a13);
    border-color: #96620e;
    color: #fff;
}

.server-action.closed[b-7mx1zpz2nu],
.server-action.full[b-7mx1zpz2nu],
.server-action.ended[b-7mx1zpz2nu],
.server-action.unavailable[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #999, #737373);
    border-color: #646464;
}

.server-action.full[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #8d8d8d, #626262);
    border-color: #505050;
}

.server-action.ended[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #7e7e7e, #555);
    border-color: #454545;
}

.server-action.results[b-7mx1zpz2nu] {
    background: linear-gradient(to bottom, #c59b3e, #98701f);
    border-color: #795817;
}

.action-spinner[b-7mx1zpz2nu] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: action-spin-b-7mx1zpz2nu .7s linear infinite;
}

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

@media (max-width: 700px) {
    .server-action.featured[b-7mx1zpz2nu] {
        width: min(100%, 220px);
        min-height: 42px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-spinner[b-7mx1zpz2nu] { animation: none; }
}
/* /Components/Pages/Map/ClassicWorldMap.razor.rz.scp.css */
/* ===================================================================
   WorldMap scoped styles
   Map layout, tile positioning, and interaction rules
   (from original compact.css div.map variant, adapted for Blazor)
   =================================================================== */
.world-map-wrapper[b-3r2j53wno7] {
    container-type: inline-size; /* enable cqi units for dynamic zoom */
    overflow-x: clip;  /* safety net for rounding */
    overflow-y: visible; /* keep infobox at top:-7px visible */
    width: 100%;
    max-width: 100%;
}

[b-3r2j53wno7] #map_header {
    color: #5c8a00;
    margin-bottom: 10px;
}

[b-3r2j53wno7] .map-coordinate {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

[b-3r2j53wno7] h1 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
    color: #5c8a00;
}

/* --- Map container ---
   NOTE: No ::deep here! #map is a top-level element in this component.
   ::deep requires an ANCESTOR with the scope attribute, but #map has no
   such ancestor — only siblings (<h1>) carry the scope. Without this fix
   position:relative never applies, so all absolute children fly away. */
#map[b-3r2j53wno7] {
    position: relative;
    width: 552px;
    height: 375px;
    margin: 0 auto;
    zoom: clamp(0.5, calc(100cqi / 552px), 1);
    user-select: none;
    -webkit-user-select: none;
}

#map.map-drag-surface[b-3r2j53wno7] {
    cursor: grab;
    touch-action: none;
}

#map.map-drag-surface.is-pointer-down[b-3r2j53wno7],
#map.map-drag-surface.is-dragging[b-3r2j53wno7] {
    cursor: grabbing;
}

/* Large map container (Plus 13×13) is now rendered as a popup overlay — see below */

/* --- Map content (tile grid) --- */
[b-3r2j53wno7] #map_content {
    position: relative;
    width: 540px;
    height: 316px;
    left: 5px;
    top: 33px;
    background-image: url("../img/gpack/img/m/map.jpg");
    background-position: 2px 0;
}

/* --- Each tile div: 74×74 isometric diamond --- */
[b-3r2j53wno7] #map_content div {
    width: 74px;
    height: 74px;
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* --- Small map village tiles (b00-b35) --- */
[b-3r2j53wno7] #map_content div.b00 { background-image: url("../img/gpack/img/m/d00.gif"); }
[b-3r2j53wno7] #map_content div.b01 { background-image: url("../img/gpack/img/m/d01.gif"); }
[b-3r2j53wno7] #map_content div.b02 { background-image: url("../img/gpack/img/m/d02.gif"); }
[b-3r2j53wno7] #map_content div.b03 { background-image: url("../img/gpack/img/m/d03.gif"); }
[b-3r2j53wno7] #map_content div.b04 { background-image: url("../img/gpack/img/m/d04.gif"); }
[b-3r2j53wno7] #map_content div.b05 { background-image: url("../img/gpack/img/m/d05.gif"); }
[b-3r2j53wno7] #map_content div.b06 { background-image: url("../img/gpack/img/m/d06.gif"); }
[b-3r2j53wno7] #map_content div.b07 { background-image: url("../img/gpack/img/m/d07.gif"); }
[b-3r2j53wno7] #map_content div.b08 { background-image: url("../img/gpack/img/m/d08.gif"); }
[b-3r2j53wno7] #map_content div.b09 { background-image: url("../img/gpack/img/m/d09.gif"); }
[b-3r2j53wno7] #map_content div.b10 { background-image: url("../img/gpack/img/m/d10.gif"); }
[b-3r2j53wno7] #map_content div.b11 { background-image: url("../img/gpack/img/m/d11.gif"); }
[b-3r2j53wno7] #map_content div.b12 { background-image: url("../img/gpack/img/m/d12.gif"); }
[b-3r2j53wno7] #map_content div.b13 { background-image: url("../img/gpack/img/m/d13.gif"); }
[b-3r2j53wno7] #map_content div.b14 { background-image: url("../img/gpack/img/m/d14.gif"); }
[b-3r2j53wno7] #map_content div.b15 { background-image: url("../img/gpack/img/m/d15.gif"); }
[b-3r2j53wno7] #map_content div.b16 { background-image: url("../img/gpack/img/m/d16.gif"); }
[b-3r2j53wno7] #map_content div.b17 { background-image: url("../img/gpack/img/m/d17.gif"); }
[b-3r2j53wno7] #map_content div.b18 { background-image: url("../img/gpack/img/m/d18.gif"); }
[b-3r2j53wno7] #map_content div.b19 { background-image: url("../img/gpack/img/m/d19.gif"); }
[b-3r2j53wno7] #map_content div.b20 { background-image: url("../img/gpack/img/m/d20.gif"); }
[b-3r2j53wno7] #map_content div.b21 { background-image: url("../img/gpack/img/m/d21.gif"); }
[b-3r2j53wno7] #map_content div.b22 { background-image: url("../img/gpack/img/m/d22.gif"); }
[b-3r2j53wno7] #map_content div.b23 { background-image: url("../img/gpack/img/m/d23.gif"); }
[b-3r2j53wno7] #map_content div.b24 { background-image: url("../img/gpack/img/m/d24.gif"); }
[b-3r2j53wno7] #map_content div.b25 { background-image: url("../img/gpack/img/m/d25.gif"); }
[b-3r2j53wno7] #map_content div.b26 { background-image: url("../img/gpack/img/m/d26.gif"); }
[b-3r2j53wno7] #map_content div.b27 { background-image: url("../img/gpack/img/m/d27.gif"); }
[b-3r2j53wno7] #map_content div.b28 { background-image: url("../img/gpack/img/m/d28.gif"); }
[b-3r2j53wno7] #map_content div.b29 { background-image: url("../img/gpack/img/m/d29.gif"); }
[b-3r2j53wno7] #map_content div.b30 { background-image: url("../img/gpack/img/m/d30.gif"); }
[b-3r2j53wno7] #map_content div.b31 { background-image: url("../img/gpack/img/m/d31.gif"); }
[b-3r2j53wno7] #map_content div.b32 { background-image: url("../img/gpack/img/m/d32.gif"); }
[b-3r2j53wno7] #map_content div.b33 { background-image: url("../img/gpack/img/m/d33.gif"); }
[b-3r2j53wno7] #map_content div.b34 { background-image: url("../img/gpack/img/m/d34.gif"); }
[b-3r2j53wno7] #map_content div.b35 { background-image: url("../img/gpack/img/m/d35.gif"); }

/* --- Small map oasis tiles (o0-o12, o99) --- */
[b-3r2j53wno7] #map_content div.o0 { background-image: url("../img/gpack/img/m/o0.gif"); }
[b-3r2j53wno7] #map_content div.o1 { background-image: url("../img/gpack/img/m/o1.gif"); }
[b-3r2j53wno7] #map_content div.o2 { background-image: url("../img/gpack/img/m/o2.gif"); }
[b-3r2j53wno7] #map_content div.o3 { background-image: url("../img/gpack/img/m/o3.gif"); }
[b-3r2j53wno7] #map_content div.o4 { background-image: url("../img/gpack/img/m/o4.gif"); }
[b-3r2j53wno7] #map_content div.o5 { background-image: url("../img/gpack/img/m/o5.gif"); }
[b-3r2j53wno7] #map_content div.o6 { background-image: url("../img/gpack/img/m/o6.gif"); }
[b-3r2j53wno7] #map_content div.o7 { background-image: url("../img/gpack/img/m/o7.gif"); }
[b-3r2j53wno7] #map_content div.o8 { background-image: url("../img/gpack/img/m/o8.gif"); }
[b-3r2j53wno7] #map_content div.o9 { background-image: url("../img/gpack/img/m/o9.gif"); }
[b-3r2j53wno7] #map_content div.o10 { background-image: url("../img/gpack/img/m/o10.gif"); }
[b-3r2j53wno7] #map_content div.o11 { background-image: url("../img/gpack/img/m/o11.gif"); }
[b-3r2j53wno7] #map_content div.o12 { background-image: url("../img/gpack/img/m/o12.gif"); }
[b-3r2j53wno7] #map_content div.o99 { background-image: url("../img/gpack/img/m/o99.gif"); }

/* --- Small map terrain tiles (t0-t9) --- */
[b-3r2j53wno7] #map_content div.t0 { background-image: url("../img/gpack/img/m/t0.gif"); }
[b-3r2j53wno7] #map_content div.t1 { background-image: url("../img/gpack/img/m/t1.gif"); }
[b-3r2j53wno7] #map_content div.t2 { background-image: url("../img/gpack/img/m/t2.gif"); }
[b-3r2j53wno7] #map_content div.t3 { background-image: url("../img/gpack/img/m/t3.gif"); }
[b-3r2j53wno7] #map_content div.t4 { background-image: url("../img/gpack/img/m/t4.gif"); }
[b-3r2j53wno7] #map_content div.t5 { background-image: url("../img/gpack/img/m/t5.gif"); }
[b-3r2j53wno7] #map_content div.t6 { background-image: url("../img/gpack/img/m/t6.gif"); }
[b-3r2j53wno7] #map_content div.t7 { background-image: url("../img/gpack/img/m/t7.gif"); }
[b-3r2j53wno7] #map_content div.t8 { background-image: url("../img/gpack/img/m/t8.gif"); }
[b-3r2j53wno7] #map_content div.t9 { background-image: url("../img/gpack/img/m/t9.gif"); }

/* --- Transparent overlay for <area> hitboxes --- */
[b-3r2j53wno7] img#map_links {
    position: absolute;
    width: 540px;
    height: 316px;
    left: 5px;
    top: 33px;
    z-index: 50;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* --- Navibox sprite (moved to nav section below) --- */

/* --- Coordinate rulers container --- */
[b-3r2j53wno7] #map_rulers {
    position: absolute;
    width: 540px;
    height: 316px;
    left: 5px;
    top: 34px;
    z-index: 30;
}

[b-3r2j53wno7] #map_rulers div {
    height: 12px;
    position: absolute;
    text-align: center;
    width: 35px;
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

[b-3r2j53wno7] #map_rulers div.center-ruler {
    color: #d00000;
}

/* X-axis and Y-axis ruler labels now use inline styles for dynamic grid sizing */

/* ==========================================================================
   Large map (13×13) — popup overlay rebuilt from the original board geometry
   ========================================================================== */

[b-3r2j53wno7] .largemap-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    animation: largemap-fadein-b-3r2j53wno7 0.2s ease-out;
}

@keyframes largemap-fadein-b-3r2j53wno7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

[b-3r2j53wno7] .largemap-popup {
    width: fit-content;
    max-width: min(98vw, 1240px);
    max-height: calc(100dvh - 20px);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #7e7e7e;
    background: #f4f4f4;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    padding: 4px;
}

[b-3r2j53wno7] .largemap-stage {
    width: max-content;
    min-width: 0;
}

[b-3r2j53wno7] #map_large_board {
    position: relative;
    width: 971px;
    height: 550px;
    background: #efefef url("../img/gpack/img/m/mapl.gif") no-repeat center;
    zoom: 1;
    user-select: none;
    -webkit-user-select: none;
}

[b-3r2j53wno7] #map_large_board.map-drag-surface {
    cursor: grab;
    touch-action: none;
}

[b-3r2j53wno7] #map_large_board.map-drag-surface.is-pointer-down,
[b-3r2j53wno7] #map_large_board.map-drag-surface.is-dragging {
    cursor: grabbing;
}

[b-3r2j53wno7] .largemap-title {
    position: absolute;
    top: 12px;
    right: 24px;
    z-index: 80;
    margin: 0;
    color: #000;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

[b-3r2j53wno7] .largemap-title-coords {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

[b-3r2j53wno7] .largemap-close {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 85;
    width: 24px;
    height: 24px;
    border: 1px solid #8d8d8d;
    background: linear-gradient(180deg, #fafafa 0%, #d4d4d4 100%);
    color: #666;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

[b-3r2j53wno7] .largemap-close:hover {
    color: #2b2b2b;
    background: linear-gradient(180deg, #ffffff 0%, #cfcfcf 100%);
}

[b-3r2j53wno7] #map_content_large {
    position: absolute;
    inset: 0;
}

[b-3r2j53wno7] #map_content_large div {
    width: 74px;
    height: 74px;
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
}

[b-3r2j53wno7] #map_content_large div.b00 { background-image: url("../img/gpack/img/m/d00.gif"); }
[b-3r2j53wno7] #map_content_large div.b01 { background-image: url("../img/gpack/img/m/d01.gif"); }
[b-3r2j53wno7] #map_content_large div.b02 { background-image: url("../img/gpack/img/m/d02.gif"); }
[b-3r2j53wno7] #map_content_large div.b03 { background-image: url("../img/gpack/img/m/d03.gif"); }
[b-3r2j53wno7] #map_content_large div.b04 { background-image: url("../img/gpack/img/m/d04.gif"); }
[b-3r2j53wno7] #map_content_large div.b05 { background-image: url("../img/gpack/img/m/d05.gif"); }
[b-3r2j53wno7] #map_content_large div.b06 { background-image: url("../img/gpack/img/m/d06.gif"); }
[b-3r2j53wno7] #map_content_large div.b07 { background-image: url("../img/gpack/img/m/d07.gif"); }
[b-3r2j53wno7] #map_content_large div.b08 { background-image: url("../img/gpack/img/m/d08.gif"); }
[b-3r2j53wno7] #map_content_large div.b09 { background-image: url("../img/gpack/img/m/d09.gif"); }
[b-3r2j53wno7] #map_content_large div.b10 { background-image: url("../img/gpack/img/m/d10.gif"); }
[b-3r2j53wno7] #map_content_large div.b11 { background-image: url("../img/gpack/img/m/d11.gif"); }
[b-3r2j53wno7] #map_content_large div.b12 { background-image: url("../img/gpack/img/m/d12.gif"); }
[b-3r2j53wno7] #map_content_large div.b13 { background-image: url("../img/gpack/img/m/d13.gif"); }
[b-3r2j53wno7] #map_content_large div.b14 { background-image: url("../img/gpack/img/m/d14.gif"); }
[b-3r2j53wno7] #map_content_large div.b15 { background-image: url("../img/gpack/img/m/d15.gif"); }
[b-3r2j53wno7] #map_content_large div.b16 { background-image: url("../img/gpack/img/m/d16.gif"); }
[b-3r2j53wno7] #map_content_large div.b17 { background-image: url("../img/gpack/img/m/d17.gif"); }
[b-3r2j53wno7] #map_content_large div.b18 { background-image: url("../img/gpack/img/m/d18.gif"); }
[b-3r2j53wno7] #map_content_large div.b19 { background-image: url("../img/gpack/img/m/d19.gif"); }
[b-3r2j53wno7] #map_content_large div.b20 { background-image: url("../img/gpack/img/m/d20.gif"); }
[b-3r2j53wno7] #map_content_large div.b21 { background-image: url("../img/gpack/img/m/d21.gif"); }
[b-3r2j53wno7] #map_content_large div.b22 { background-image: url("../img/gpack/img/m/d22.gif"); }
[b-3r2j53wno7] #map_content_large div.b23 { background-image: url("../img/gpack/img/m/d23.gif"); }
[b-3r2j53wno7] #map_content_large div.b24 { background-image: url("../img/gpack/img/m/d24.gif"); }
[b-3r2j53wno7] #map_content_large div.b25 { background-image: url("../img/gpack/img/m/d25.gif"); }
[b-3r2j53wno7] #map_content_large div.b26 { background-image: url("../img/gpack/img/m/d26.gif"); }
[b-3r2j53wno7] #map_content_large div.b27 { background-image: url("../img/gpack/img/m/d27.gif"); }
[b-3r2j53wno7] #map_content_large div.b28 { background-image: url("../img/gpack/img/m/d28.gif"); }
[b-3r2j53wno7] #map_content_large div.b29 { background-image: url("../img/gpack/img/m/d29.gif"); }
[b-3r2j53wno7] #map_content_large div.b30 { background-image: url("../img/gpack/img/m/d30.gif"); }
[b-3r2j53wno7] #map_content_large div.b31 { background-image: url("../img/gpack/img/m/d31.gif"); }
[b-3r2j53wno7] #map_content_large div.b32 { background-image: url("../img/gpack/img/m/d32.gif"); }
[b-3r2j53wno7] #map_content_large div.b33 { background-image: url("../img/gpack/img/m/d33.gif"); }
[b-3r2j53wno7] #map_content_large div.b34 { background-image: url("../img/gpack/img/m/d34.gif"); }
[b-3r2j53wno7] #map_content_large div.b35 { background-image: url("../img/gpack/img/m/d35.gif"); }
[b-3r2j53wno7] #map_content_large div.o0 { background-image: url("../img/gpack/img/m/o0.gif"); }
[b-3r2j53wno7] #map_content_large div.o1 { background-image: url("../img/gpack/img/m/o1.gif"); }
[b-3r2j53wno7] #map_content_large div.o2 { background-image: url("../img/gpack/img/m/o2.gif"); }
[b-3r2j53wno7] #map_content_large div.o3 { background-image: url("../img/gpack/img/m/o3.gif"); }
[b-3r2j53wno7] #map_content_large div.o4 { background-image: url("../img/gpack/img/m/o4.gif"); }
[b-3r2j53wno7] #map_content_large div.o5 { background-image: url("../img/gpack/img/m/o5.gif"); }
[b-3r2j53wno7] #map_content_large div.o6 { background-image: url("../img/gpack/img/m/o6.gif"); }
[b-3r2j53wno7] #map_content_large div.o7 { background-image: url("../img/gpack/img/m/o7.gif"); }
[b-3r2j53wno7] #map_content_large div.o8 { background-image: url("../img/gpack/img/m/o8.gif"); }
[b-3r2j53wno7] #map_content_large div.o9 { background-image: url("../img/gpack/img/m/o9.gif"); }
[b-3r2j53wno7] #map_content_large div.o10 { background-image: url("../img/gpack/img/m/o10.gif"); }
[b-3r2j53wno7] #map_content_large div.o11 { background-image: url("../img/gpack/img/m/o11.gif"); }
[b-3r2j53wno7] #map_content_large div.o12 { background-image: url("../img/gpack/img/m/o12.gif"); }
[b-3r2j53wno7] #map_content_large div.o99 { background-image: url("../img/gpack/img/m/o99.gif"); }
[b-3r2j53wno7] #map_content_large div.t0 { background-image: url("../img/gpack/img/m/t0.gif"); }
[b-3r2j53wno7] #map_content_large div.t1 { background-image: url("../img/gpack/img/m/t1.gif"); }
[b-3r2j53wno7] #map_content_large div.t2 { background-image: url("../img/gpack/img/m/t2.gif"); }
[b-3r2j53wno7] #map_content_large div.t3 { background-image: url("../img/gpack/img/m/t3.gif"); }
[b-3r2j53wno7] #map_content_large div.t4 { background-image: url("../img/gpack/img/m/t4.gif"); }
[b-3r2j53wno7] #map_content_large div.t5 { background-image: url("../img/gpack/img/m/t5.gif"); }
[b-3r2j53wno7] #map_content_large div.t6 { background-image: url("../img/gpack/img/m/t6.gif"); }
[b-3r2j53wno7] #map_content_large div.t7 { background-image: url("../img/gpack/img/m/t7.gif"); }
[b-3r2j53wno7] #map_content_large div.t8 { background-image: url("../img/gpack/img/m/t8.gif"); }
[b-3r2j53wno7] #map_content_large div.t9 { background-image: url("../img/gpack/img/m/t9.gif"); }

[b-3r2j53wno7] #map_rulers_large {
    position: absolute;
    inset: 0;
    z-index: 35;
    pointer-events: none;
}

[b-3r2j53wno7] #map_rulers_large div {
    position: absolute;
    width: 35px;
    height: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #000;
}

[b-3r2j53wno7] #map_rulers_large div.center-ruler {
    color: #d00000;
}

[b-3r2j53wno7] img#map_links_large {
    position: absolute;
    inset: 0;
    width: 971px;
    height: 550px;
    z-index: 60;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Large map navibox is now styled via ::deep #map_navibox_large above */

[b-3r2j53wno7] #map_coords_large {
    position: absolute;
    right: 18px;
    bottom: 14px;
    z-index: 75;
}

[b-3r2j53wno7] #map_coords_large form {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    padding: 4px 8px;
    border: 1px solid #b9b9b9;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[b-3r2j53wno7] #map_coords_large label,
[b-3r2j53wno7] #map_coords_large span {
    color: #000;
    font-size: 13px;
    font-weight: 700;
}

[b-3r2j53wno7] #map_coords_large input.text {
    width: 42px;
    height: 24px;
    text-align: center;
    padding: 0 4px;
    font-size: 14px;
    border: 1px solid #a8a8a8;
    border-radius: 0;
    background: #fff;
    direction: ltr;
}

[b-3r2j53wno7] #map_coords_large button {
    height: 28px;
    padding: 0 16px;
    border: 1px solid #8ca567;
    border-radius: 6px;
    background: linear-gradient(180deg, #f8fbf3 0%, #ceddb5 100%);
    color: #55683b;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

[b-3r2j53wno7] #map_coords_large button:hover {
    background: linear-gradient(180deg, #ffffff 0%, #c4d6a3 100%);
}

@media (max-width: 700px) {
    [b-3r2j53wno7] .largemap-overlay {
        padding: 4px;
    }

    [b-3r2j53wno7] .largemap-popup {
        max-width: 100vw;
        max-height: 100dvh;
        padding: 2px;
    }

    [b-3r2j53wno7] .largemap-title {
        top: 10px;
        right: 18px;
        font-size: 22px;
    }
}

@media (max-width: 1180px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.92; }
}

@media (max-width: 1080px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.84; }
}

@media (max-width: 980px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.76; }
}

@media (max-width: 860px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.68; }
}

@media (max-width: 740px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.6; }
}

@media (max-width: 620px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.52; }
}

@media (max-width: 520px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.46; }
}

@media (max-width: 430px) {
    [b-3r2j53wno7] #map_large_board { zoom: 0.4; }
}

/* ==========================================================================
   Troop movement overlay indicators — Plus feature
   ========================================================================== */
[b-3r2j53wno7] .map-movement-marker {
    position: absolute;
    width: 74px;
    height: 74px;
    z-index: 45;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

[b-3r2j53wno7] .map-movement-marker.mv-attack { background-image: url("../img/gpack/img/a/att1.gif"); }
[b-3r2j53wno7] .map-movement-marker.mv-raid { background-image: url("../img/gpack/img/a/att2.gif"); }
[b-3r2j53wno7] .map-movement-marker.mv-reinf { background-image: url("../img/gpack/img/a/def1.gif"); }
[b-3r2j53wno7] .map-movement-marker.mv-scout { background-image: url("../img/gpack/img/a/att3.gif"); }
[b-3r2j53wno7] .map-movement-marker.mv-return { background-image: url("../img/gpack/img/a/def1.gif"); }
[b-3r2j53wno7] .map-movement-marker.mv-other { background-image: url("../img/gpack/img/a/att1.gif"); }

[b-3r2j53wno7] .map-movement-path-layer,
[b-3r2j53wno7] .map-movement-path-layer-lg {
    position: absolute;
    inset: 0;
    z-index: 44;
    pointer-events: none;
}

[b-3r2j53wno7] .map-movement-dot {
    position: absolute;
    width: var(--dot-size, 5.5px);
    height: var(--dot-size, 5.5px);
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--dot-opacity, 0.5);
    transform: scale(var(--dot-scale, 1));
    filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.22));
    animation-name: map-dot-reveal-b-3r2j53wno7;
    animation-duration: 0.16s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    --path-highlight: #ffb0b0;
    --path-core: #ff5757;
    --path-edge: #930d0d;
    background: radial-gradient(circle at 35% 35%, var(--path-highlight) 0 24%, var(--path-core) 28%, var(--path-edge) 100%);
    will-change: transform, opacity;
}

[b-3r2j53wno7] .map-movement-dot.path-attack,
[b-3r2j53wno7] .map-movement-dot.path-other {
    --path-highlight: #ffb0b0;
    --path-core: #ff5757;
    --path-edge: #930d0d;
}

[b-3r2j53wno7] .map-movement-dot.path-raid {
    --path-highlight: #ffd4a3;
    --path-core: #ff9b42;
    --path-edge: #b54b07;
}

[b-3r2j53wno7] .map-movement-dot.path-reinf {
    --path-highlight: #b9dcff;
    --path-core: #5da8ff;
    --path-edge: #184d99;
}

[b-3r2j53wno7] .map-movement-dot.path-scout {
    --path-highlight: #fff1ae;
    --path-core: #ffd95e;
    --path-edge: #a17709;
}

[b-3r2j53wno7] .map-movement-dot.path-return {
    --path-highlight: #c7ffd7;
    --path-core: #7be89b;
    --path-edge: #1a7d3c;
}

[b-3r2j53wno7] .map-movement-dot.is-head {
    --dot-opacity: 0.94;
    --dot-scale: 1.14;
    z-index: 46;
}

[b-3r2j53wno7] .map-movement-dot.is-neck {
    --dot-opacity: 0.76;
    --dot-scale: 0.98;
}

[b-3r2j53wno7] .map-movement-dot.is-mid {
    --dot-opacity: 0.6;
    --dot-scale: 0.9;
}

[b-3r2j53wno7] .map-movement-dot.is-tail {
    --dot-opacity: 0.44;
    --dot-scale: 0.8;
}

[b-3r2j53wno7] .map-movement-dot.is-tail-far {
    --dot-opacity: 0.3;
    --dot-scale: 0.72;
}

[b-3r2j53wno7] .map-movement-dot.is-head::after,
[b-3r2j53wno7] .map-movement-dot.is-neck::after {
    content: "";
    position: absolute;
    width: calc(var(--dot-size, 5.5px) * 0.88);
    height: calc(var(--dot-size, 5.5px) * 0.88);
    top: 50%;
    left: calc(100% - (var(--dot-size, 5.5px) * 0.08));
    border-radius: 1px;
    background: linear-gradient(135deg, var(--path-highlight), var(--path-edge));
    transform: translate(-8%, -50%) rotate(calc(var(--dot-angle, 0deg) + 45deg));
    opacity: 0.88;
}

[b-3r2j53wno7] .map-movement-dot.is-neck::after {
    width: calc(var(--dot-size, 5.5px) * 0.62);
    height: calc(var(--dot-size, 5.5px) * 0.62);
    opacity: 0.58;
}

@keyframes map-dot-reveal-b-3r2j53wno7 {
    from {
        opacity: 0;
        transform: scale(0.45);
    }

    to {
        opacity: var(--dot-opacity, 0.5);
        transform: scale(var(--dot-scale, 1));
    }
}

/* ==========================================================================
   Bottom-right toolbar (zoom + crop finder)
   ========================================================================== */
[b-3r2j53wno7] #map_toolbar {
    position: absolute;
    bottom: 0;
    right: 30px;
    z-index: 55;
    display: flex;
    direction: ltr;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

[b-3r2j53wno7] #map_cropfinder {
    display: inline-block;
    line-height: 0;
}

[b-3r2j53wno7] #map_cropfinder img {
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   Navigation arrows — isometric triangle zones matching diamond grid edges
   Each triangle covers the corner between the tile diamond and the map border
   ========================================================================== */

/* --- 1-step arrows (small 7×7 map) ---
   Diamond vertices in map_content (540×316):
     Left(16,141)  Top(269,-16)  Right(528,141)  Bottom(275,298)
   Triangles are the 4 corners outside the diamond but inside the rectangle.
   Positioned over #map_content area (left:5, top:33 in #map). */
[b-3r2j53wno7] .map-pan-zone {
    position: absolute;
    left: 5px;
    top: 33px;
    width: 540px;
    height: 316px;
    z-index: 55;
    cursor: pointer;
    pointer-events: auto;
}

/* Boundary indicator — light brown tint at world edge (small map) */
[b-3r2j53wno7] .map-boundary {
    position: absolute;
    left: 5px;
    top: 33px;
    width: 540px;
    height: 316px;
    z-index: 45;
    pointer-events: none;
    background: rgba(139, 90, 43, 0.18);
}

/* Top-left corner triangle: image top-left → diamond top → diamond left */
[b-3r2j53wno7] .map-pan-n {
    clip-path: polygon(4% 0%, 59% -6%, 5% 46%);
}
/* Top-right corner triangle: diamond top → image top-right → diamond right */
[b-3r2j53wno7] .map-pan-e {
    clip-path: polygon(56% 6%, 99% 0%, 99% 46%);
}
/* Bottom-right corner triangle: diamond right → image bottom-right → diamond bottom */
[b-3r2j53wno7] .map-pan-s {
    clip-path: polygon(102% 52%, 100% 100%, 58% 93%);
}
/* Bottom-left corner triangle: diamond left → diamond bottom → image bottom-left */
[b-3r2j53wno7] .map-pan-w {
    clip-path: polygon(5% 51%, 50% 95%, 0% 100%);
}

/* --- 1-step arrows (large 13×13 map) ---
   Diamond vertices in map_large_board (971×550):
     Left(11,257)  Top(480,-20)  Right(961,257)  Bottom(492,534)
   Triangles cover each corner of the rectangular board. */
[b-3r2j53wno7] .map-pan-zone-lg {
    position: absolute;
    inset: 0;
    width: 971px;
    height: 550px;
    z-index: 65;
    cursor: pointer;
    pointer-events: auto;
}

/* Boundary indicator — light brown tint at world edge (large map) */
[b-3r2j53wno7] .map-boundary-lg {
    position: absolute;
    inset: 0;
    width: 971px;
    height: 550px;
    z-index: 55;
    pointer-events: none;
    background: rgba(139, 90, 43, 0.18);
}

/* Top-left corner: image top-left → diamond top → diamond left */
[b-3r2j53wno7] .map-pan-lg-n { clip-path: polygon(0% 0%, 49% 0%, 1% 47%); }
/* Top-right corner: diamond top → image top-right → diamond right */
[b-3r2j53wno7] .map-pan-lg-e { clip-path: polygon(49% 0%, 100% 0%, 99% 47%); }
/* Bottom-right corner: diamond right → image bottom-right → diamond bottom */
[b-3r2j53wno7] .map-pan-lg-s { clip-path: polygon(99% 47%, 100% 100%, 51% 97%); }
/* Bottom-left corner: diamond left → diamond bottom → image bottom-left */
[b-3r2j53wno7] .map-pan-lg-w { clip-path: polygon(1% 47%, 51% 97%, 0% 100%); }

/* +7 step navibox — dir.gif sprite with clickable quadrant divs */
[b-3r2j53wno7] #map_navibox,
[b-3r2j53wno7] #map_navibox_large {
    position: absolute;
    z-index: 60;
    background-image: url("../img/gpack/img/m/dir.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 57px;
}

[b-3r2j53wno7] #map_navibox {
    bottom: 0;
    left: 20px;
}

[b-3r2j53wno7] #map_navibox_large {
    left: 18px;
    bottom: 16px;
    z-index: 70;
}

/* Navibox quadrant buttons — isometric direction quadrants */
[b-3r2j53wno7] .navi-arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    pointer-events: auto;
}

[b-3r2j53wno7] .navi-arrow:hover {
    background: rgba(92, 138, 0, 0.15);
}

[b-3r2j53wno7] .navi-arrow:active {
    background: rgba(92, 138, 0, 0.3);
}

/* Navibox quadrant buttons — isometric direction quadrants
   dir.gif arrows point in 4 diagonal directions matching the isometric grid:
     upper-left = North, upper-right = East,
     lower-right = South, lower-left = West */
[b-3r2j53wno7] .navi-n { clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%); }
[b-3r2j53wno7] .navi-e { clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 50%); }
[b-3r2j53wno7] .navi-s { clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); }
[b-3r2j53wno7] .navi-w { clip-path: polygon(0% 50%, 50% 50%, 50% 100%, 0% 100%); }

/* ==========================================================================
   Map info box (hover tooltip)
   ========================================================================== */
[b-3r2j53wno7] .map-tooltip {
    position: absolute;
    z-index: 70;
    pointer-events: none;
    animation: tooltip-fadein-b-3r2j53wno7 0.15s ease-out;
}

[b-3r2j53wno7] .map-tooltip-lg {
    z-index: 80;
}

@keyframes tooltip-fadein-b-3r2j53wno7 {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-3r2j53wno7] #map_infobox {
    width: 180px;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-content);
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

[b-3r2j53wno7] #map_infobox thead th {
    padding: 4px 8px;
    background-color: var(--bg-resource);
    font-weight: bold;
    font-size: 12px;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
    text-align: center;
}

[b-3r2j53wno7] #map_infobox tbody th {
    padding: 2px 8px;
    font-weight: bold;
    color: var(--text-primary);
    width: 50%;
    text-align: start;
}

[b-3r2j53wno7] #map_infobox tbody td {
    padding: 2px 8px;
    color: var(--text-secondary);
}

[b-3r2j53wno7] #map_infobox tbody tr {
    border-bottom: 1px solid var(--border-light);
}

[b-3r2j53wno7] #map_infobox.village thead th {
    background-color: #E8F5E9;
    color: #2E7D32;
}

[b-3r2j53wno7] #map_infobox.oasis thead th {
    background-color: #FFF8E1;
    color: #F57F17;
}

[b-3r2j53wno7] #map_infobox.empty thead th {
    background-color: #EFEBE9;
    color: var(--text-secondary);
}

[b-3r2j53wno7] #map_infobox .valley-resources {
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
}

[b-3r2j53wno7] #map_infobox .valley-resources .vr {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 3px;
    font-weight: bold;
    color: var(--text-primary);
}

[b-3r2j53wno7] #map_infobox .valley-resources .vr img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ==========================================================================
   Coordinate search form
   ========================================================================== */
[b-3r2j53wno7] #map_coords {
    position: absolute;
    bottom: 26px;
    right: 30px;
    z-index: 55;
    height: 30px;
    line-height: 20px;
    width: 180px;
    background-color: transparent;
    padding: 0;
    font-size: 14px;
}

[b-3r2j53wno7] #map_coords form {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: rtl;
    font-weight: bold;
    color: var(--text-heading);
}

[b-3r2j53wno7] #map_coords input.text {
    width: 32px;
    text-align: center;
    padding: 2px 4px;
    font-size: 11px;
    border: 1px solid var(--border-medium);
    border-radius: 2px;
    direction: ltr; /* keep negative numbers reading correctly */
}

[b-3r2j53wno7] #map_coords #btn_search {
    background-color: #5c8a00;
    color: #fff;
    border: 1px solid #4a7200;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    height: 20px;
    line-height: 14px;
    vertical-align: middle;
    margin-right: 5px;
}

[b-3r2j53wno7] #map_coords #btn_search:hover {
    background-color: #4a7200;
}

/* ==========================================================================
   Zoom / Fullscreen button (inside #map_toolbar)
   ========================================================================== */
[b-3r2j53wno7] #map_makelarge {
    display: inline-block;
    line-height: 0;
}

[b-3r2j53wno7] #map_makelarge img {
    background-image: url("../img/gpack/img/m/max.gif");
    width: 33px;
    height: 25px;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   Village / Tile detail view (vilview)
   Matches original Travian compact.css: div.map context
   ========================================================================== */
[b-3r2j53wno7] .detail-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px;
    margin-top: 15px;
}

[b-3r2j53wno7] #detailed_map {
    display: block;
    width: 300px;
    height: 264px;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 15px;
    background-repeat: no-repeat;
}

[b-3r2j53wno7] #detailed_map.f1 { background-image: url('../img/gpack/img/g/f1.jpg'); }
[b-3r2j53wno7] #detailed_map.f2 { background-image: url('../img/gpack/img/g/f2.jpg'); }
[b-3r2j53wno7] #detailed_map.f3 { background-image: url('../img/gpack/img/g/f3.jpg'); }
[b-3r2j53wno7] #detailed_map.f4 { background-image: url('../img/gpack/img/g/f4.jpg'); }
[b-3r2j53wno7] #detailed_map.f5 { background-image: url('../img/gpack/img/g/f5.jpg'); }
[b-3r2j53wno7] #detailed_map.f6 { background-image: url('../img/gpack/img/g/f6.jpg'); }
[b-3r2j53wno7] #detailed_map.f7 { background-image: url('../img/gpack/img/g/f7.jpg'); }
[b-3r2j53wno7] #detailed_map.f8 { background-image: url('../img/gpack/img/g/f8.jpg'); }
[b-3r2j53wno7] #detailed_map.f9 { background-image: url('../img/gpack/img/g/f9.jpg'); }
[b-3r2j53wno7] #detailed_map.f10 { background-image: url('../img/gpack/img/g/f10.jpg'); }
[b-3r2j53wno7] #detailed_map.f11 { background-image: url('../img/gpack/img/g/f11.jpg'); }
[b-3r2j53wno7] #detailed_map.f12 { background-image: url('../img/gpack/img/g/f12.jpg'); }
[b-3r2j53wno7] #detailed_map.f99 { background-image: url('../img/gpack/img/g/f99.jpg'); }

[b-3r2j53wno7] #detailed_map.w1 { background-image: url('../img/gpack/img/m/w1.jpg'); }
[b-3r2j53wno7] #detailed_map.w2 { background-image: url('../img/gpack/img/m/w2.jpg'); }
[b-3r2j53wno7] #detailed_map.w3 { background-image: url('../img/gpack/img/m/w3.jpg'); }
[b-3r2j53wno7] #detailed_map.w4 { background-image: url('../img/gpack/img/m/w4.jpg'); }
[b-3r2j53wno7] #detailed_map.w5 { background-image: url('../img/gpack/img/m/w5.jpg'); }
[b-3r2j53wno7] #detailed_map.w6 { background-image: url('../img/gpack/img/m/w6.jpg'); }
[b-3r2j53wno7] #detailed_map.w7 { background-image: url('../img/gpack/img/m/w7.jpg'); }
[b-3r2j53wno7] #detailed_map.w8 { background-image: url('../img/gpack/img/m/w8.jpg'); }
[b-3r2j53wno7] #detailed_map.w9 { background-image: url('../img/gpack/img/m/w9.jpg'); }
[b-3r2j53wno7] #detailed_map.w10 { background-image: url('../img/gpack/img/m/w10.jpg'); }
[b-3r2j53wno7] #detailed_map.w11 { background-image: url('../img/gpack/img/m/w11.jpg'); }
[b-3r2j53wno7] #detailed_map.w12 { background-image: url('../img/gpack/img/m/w12.jpg'); }

[b-3r2j53wno7] #map_details {
    flex: 1 1 227px;
    margin-top: 25px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 16px;
}

[b-3r2j53wno7] #map_details table {
    margin-bottom: 15px;
}

/* --- tableNone: white background, no header image (from compact.css) --- */
[b-3r2j53wno7] #village_info,
[b-3r2j53wno7] #troop_info {
    width: 227px;
    border: none;
    background-color: #FFFFFF;
}

[b-3r2j53wno7] #village_info thead th,
[b-3r2j53wno7] #troop_info thead th {
    text-align: right;
    font-weight: bold;
    background-color: #FFFFFF;
    background-image: none;
    padding: 1px 4px;
}

[b-3r2j53wno7] #village_info tbody th {
    text-align: right;
    padding: 1px 4px;
    width: 50%;
}

[b-3r2j53wno7] #village_info tbody td {
    padding: 1px 4px;
    font-weight: bold;
}

[b-3r2j53wno7] #troop_info tbody td,
[b-3r2j53wno7] #troop_info tbody th {
    padding: 1px 4px;
}

[b-3r2j53wno7] #troop_info td.val {
    font-weight: bold;
    text-align: right;
    padding-left: 10px;
    width: 10%;
}

[b-3r2j53wno7] #troop_info td.ico {
    width: 10%;
    text-align: center;
}

[b-3r2j53wno7] #troop_info.rep tbody {
    line-height: 16px;
}

[b-3r2j53wno7] #troop_info.rep img {
  
    margin-right: 5px;
}

/* --- Clear float between details and options --- */
[b-3r2j53wno7] .clear {
    clear: both;
    height: 0;
    overflow: hidden;
}

/* --- Options table (from compact.css div.map table#options) --- */
[b-3r2j53wno7] #options {
    clear: both;
    margin: 0;
    border: none;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 16px;
}

[b-3r2j53wno7] #options thead th {
    text-align: right;
    font-weight: bold;
    background-color: #FFFFFF;
    background-image: none;
    padding: 1px 4px;
    font-size: 11pt;
}

[b-3r2j53wno7] #options tbody td {
    padding: 1px 4px;
}

    [b-3r2j53wno7] #options tbody td a {
       
        text-decoration: none;
        font-weight: bold;
        
        font-size: 15px;
        text-decoration: none;
       
        color: #71D000;
        transition: all ease-in 200ms;
    }

[b-3r2j53wno7] #options tbody td a:hover {
    color: #4a7200;
    text-decoration: underline;
}

/* --- Back to map link --- */
[b-3r2j53wno7] p > a {
    color: #5c8a00;
    text-decoration: none;
}

[b-3r2j53wno7] p > a:hover {
    color: #4a7200;
    text-decoration: underline;
}

/* ==========================================================================
   Mobile styles
   ========================================================================== */
@media (max-width: 900px) {
    /* Break out of #content padding so the map uses full viewport width.
       #content padding is 10px at ≤900px, 8px at ≤480px (MainLayout.razor.css). */
    .world-map-wrapper[b-3r2j53wno7] {
        margin-inline: -10px;
        width: calc(100% + 20px);
    }
}
@media (max-width: 480px) {
    .world-map-wrapper[b-3r2j53wno7] {
        margin-inline: -8px;
        width: calc(100% + 16px);
    }
}

@media (max-width: 600px) {
    /* Header: prevent BiDi text wrapping (Arabic + parenthesized coords) */
    [b-3r2j53wno7] #map_header,
    [b-3r2j53wno7] h1 {
        font-size: 18px;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 14px;
    }

    /* Keep detail image and info side-by-side; scale image to fit */
    [b-3r2j53wno7] .detail-layout {
        flex-wrap: nowrap;
        gap: 5px;
    }

    [b-3r2j53wno7] #detailed_map {
        width: 206px;
        height: 191px;
        background-size: 195px 180px;
        margin: 0;
        flex-shrink: 0;
    }

    [b-3r2j53wno7] #map_details {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    [b-3r2j53wno7] #village_info,
    [b-3r2j53wno7] #troop_info {
        width: 100%;
    }

    [b-3r2j53wno7] #options {
        width: 100%;
    }
}

@media (max-width: 380px) {
    [b-3r2j53wno7] #detailed_map {
        width: 120px;
        height: 106px;
        background-size: 120px 106px;
    }
}

/* --- Scattered villages table (B1-inspired design) --- */
.scattered-villages-panel[b-3r2j53wno7] {
    margin: 15px auto 0;
    max-width: 600px;
    padding: 0 10px;
}

[b-3r2j53wno7] .scattered-villages-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background-color: #ffffff;
}

/* Silver metallic gradient header — title spans all columns */
[b-3r2j53wno7] .scattered-villages-table thead th {
    background: linear-gradient(to bottom, #f7f7f7 0%, #e8e8e8 45%, #d9d9d9 100%);
    border: 1px solid #d0d0d0;
    border-bottom: 1px solid #c0c0c0;
    padding: 8px 6px;
    text-align: center;
    font-weight: bold;
    color: #0d6e8e;
    text-shadow: 0 1px 0 #ffffff;
}

[b-3r2j53wno7] .sv-title-cell .sv-broken-heart {
    margin-left: 4px;
}

[b-3r2j53wno7] .scattered-villages-table tbody td {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    padding: 6px 8px;
    text-align: center;
    color: #1a1a1a;
}

[b-3r2j53wno7] .scattered-villages-table tbody tr:hover {
    background-color: #f5fbfd;
}

/* Column-specific alignment */
[b-3r2j53wno7] .sv-col-icon {
    width: 32px;
    text-align: center;
}

[b-3r2j53wno7] .sv-col-name {
    text-align: right;
}

[b-3r2j53wno7] .sv-col-troops {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

[b-3r2j53wno7] .sv-col-countdown {
    text-align: center;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    font-family: 'Courier New', monospace;
    color: #c0392b;
}

/* Broken heart icon */
[b-3r2j53wno7] .sv-broken-heart {
    font-size: 14px;
    color: #d65a7e;
    display: inline-block;
    line-height: 1;
}

/* Cyan link for village name */
[b-3r2j53wno7] .sv-village-link {
    color: #0d6e8e;
    text-decoration: none;
    font-weight: 500;
}

[b-3r2j53wno7] .sv-village-link:hover {
    text-decoration: underline;
    color: #094d66;
}
}
/* /Components/Pages/Map/CropFinder.razor.rz.scp.css */
/* ===================================================================
   CropFinder scoped styles
   Gold Club feature — search for 9c/15c cropper villages
   =================================================================== */
.crop-finder-wrapper[b-rsqodqtapl] {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.crop-finder-wrapper h1[b-rsqodqtapl] {
    font-size: 20px;
    color: #5c8a00;
    margin-bottom: 15px;
}

/* --- Locked state --- */
.cf-locked[b-rsqodqtapl] {
    text-align: center;
    padding: 40px 20px;
    background: #f9f9f9;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 6px;
}

.cf-locked h2[b-rsqodqtapl] {
    color: #888;
    font-size: 22px;
    margin-bottom: 10px;
}

.cf-locked p[b-rsqodqtapl] {
    color: #666;
    margin-bottom: 15px;
}

.cf-locked .btn-activate[b-rsqodqtapl] {
    display: inline-block;
    background: #5c8a00;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.cf-locked .btn-activate:hover[b-rsqodqtapl] {
    background: #4a7200;
}

/* --- Search form --- */
.cf-search-form[b-rsqodqtapl] {
    background: #f5f5f0;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

.cf-field[b-rsqodqtapl] {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cf-field label[b-rsqodqtapl] {
    min-width: 160px;
    font-weight: bold;
    font-size: 13px;
    color: var(--text-heading, #333);
}

.cf-field select[b-rsqodqtapl],
.cf-field input[b-rsqodqtapl] {
    padding: 4px 8px;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 3px;
    font-size: 12px;
}

.cf-coords[b-rsqodqtapl] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cf-coords input[b-rsqodqtapl] {
    width: 60px;
    text-align: center;
}

.cf-checkbox-field[b-rsqodqtapl] {
    margin-top: 5px;
}

.cf-checkbox-field label[b-rsqodqtapl] {
    min-width: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.cf-checkbox-field input[type="checkbox"][b-rsqodqtapl] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn-search[b-rsqodqtapl] {
    background: #5c8a00;
    color: #fff;
    border: 1px solid #4a7200;
    border-radius: 4px;
    padding: 6px 24px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    margin-top: 5px;
}

.btn-search:hover[b-rsqodqtapl] {
    background: #4a7200;
}

.btn-search:disabled[b-rsqodqtapl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Results --- */
.cf-results h3[b-rsqodqtapl] {
    font-size: 16px;
    color: var(--text-heading, #333);
    margin-bottom: 10px;
}

.cf-no-results[b-rsqodqtapl] {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* --- Classic Travian table --- */
.cf-table[b-rsqodqtapl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid #a4b060;
}

.cf-table thead th[b-rsqodqtapl] {
    background: #5d7e1e;
    color: #fff;
    padding: 7px 10px;
    text-align: right;
    font-weight: bold;
    font-size: 13px;
    border-left: 1px solid #7a9a3a;
}

.cf-table thead th:last-child[b-rsqodqtapl] {
    border-left: none;
}

.cf-table tbody td[b-rsqodqtapl] {
    padding: 5px 10px;
    border-bottom: 1px solid #d5d5c0;
    border-left: 1px solid #e0e0cc;
    text-align: right;
    color: #333;
}

.cf-table tbody td:last-child[b-rsqodqtapl] {
    border-left: none;
}

.cf-table tbody tr:nth-child(even)[b-rsqodqtapl] {
    background: #f5f5ec;
}

.cf-table tbody tr:nth-child(odd)[b-rsqodqtapl] {
    background: #fff;
}

.cf-table tbody tr:hover[b-rsqodqtapl] {
    background: #eef5d8;
}

[b-rsqodqtapl] .cf-village a {
    color: #5c8a00;
    text-decoration: none;
    font-weight: bold;
}

[b-rsqodqtapl] .cf-village a:hover {
    text-decoration: underline;
}

[b-rsqodqtapl] .cf-owner {
    font-weight: bold;
}

[b-rsqodqtapl] .cf-empty {
    color: #999;
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .cf-field[b-rsqodqtapl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cf-field label[b-rsqodqtapl] {
        min-width: auto;
    }

    .cf-table[b-rsqodqtapl] {
        font-size: 11px;
    }

    .cf-table thead th[b-rsqodqtapl],
    .cf-table tbody td[b-rsqodqtapl] {
        padding: 4px 5px;
    }
}
/* /Components/Pages/Map/MapContextMenu.razor.rz.scp.css */
/* ===================================================================
   MapContextMenu — Flat / Diegetic arc menu
   Semi-transparent buttons arcing ABOVE the tile, image icons
   =================================================================== */

/* Transparent backdrop to capture dismiss clicks */
.ctx-backdrop[b-qvgpkurilm] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: transparent;
}

/* Arc menu container — anchored at tile center, extends upward */
.ctx-arc-menu[b-qvgpkurilm] {
    position: fixed;
    z-index: 201;
    transform: translate(-50%, -100%);
    width: 220px;
    height: 130px;
    pointer-events: none;
    animation: arc-entrance-b-qvgpkurilm 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes arc-entrance-b-qvgpkurilm {
    from {
        opacity: 0;
        transform: translate(-50%, -100%) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
}

/* Subtle radial glow aura above the tile */
.ctx-glow-aura[b-qvgpkurilm] {
    position: absolute;
    inset: 10px -10px -20px -10px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 60% 50% at 50% 70%,
        rgba(220, 160, 60, 0.22) 0%,
        rgba(200, 140, 40, 0.08) 50%,
        transparent 100%
    );
    pointer-events: none;
    filter: blur(8px);
}

/* Button container — buttons anchor at bottom (near tile) and arc upward */
.ctx-arc-buttons[b-qvgpkurilm] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Individual circular button — anchored near bottom of container */
.ctx-arc-btn[b-qvgpkurilm] {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translate(calc(-50% + var(--btn-x, 0px)), var(--btn-y, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    animation: btn-pop-b-qvgpkurilm 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--btn-delay, 0ms);
    opacity: 0;
}

@keyframes btn-pop-b-qvgpkurilm {
    from {
        opacity: 0;
        transform: translate(calc(-50% + var(--btn-x, 0px)), calc(var(--btn-y, 0px) + 16px)) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translate(calc(-50% + var(--btn-x, 0px)), var(--btn-y, 0px)) scale(1);
    }
}

/* Semi-transparent frosted circle — earthy tone */
.ctx-arc-btn-ring[b-qvgpkurilm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(227, 144, 84, 0.55);
    border: 2.5px solid rgba(160, 91, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.ctx-arc-btn:hover .ctx-arc-btn-ring[b-qvgpkurilm] {
    transform: scale(1.12);
    background: rgba(227, 144, 84, 0.75);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

.ctx-arc-btn:active .ctx-arc-btn-ring[b-qvgpkurilm] {
    transform: scale(0.93);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Icon image — sized for compact circular buttons */
.ctx-icon[b-qvgpkurilm] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    user-select: none;
}

.ctx-icon-lg[b-qvgpkurilm] {
    width: 24px;
    height: 24px;
}

.ctx-icon-xl[b-qvgpkurilm] {
    width: 26px;
    height: 26px;
}

/* Label below the button — white text with black stroke for map readability */
.ctx-arc-btn-label[b-qvgpkurilm] {
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    -webkit-text-stroke: 1px #000;
    paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 600px) {
    .ctx-arc-menu[b-qvgpkurilm] {
        width: 200px;
        height: 115px;
    }

    .ctx-arc-btn-ring[b-qvgpkurilm] {
        width: 38px;
        height: 38px;
    }

    .ctx-icon[b-qvgpkurilm] {
        width: 18px;
        height: 18px;
    }

    .ctx-icon-lg[b-qvgpkurilm] {
        width: 22px;
        height: 22px;
    }

    .ctx-icon-xl[b-qvgpkurilm] {
        width: 23px;
        height: 23px;
    }

    .ctx-arc-btn-label[b-qvgpkurilm] {
        font-size: 10px;
    }
}

/* Distance label below context menu */
.ctx-distance-label[b-qvgpkurilm] {
    position: absolute;
       top: 101px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 25, 18, 0.85);
    color: #e8d9b0;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(180, 150, 90, 0.4);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* /Components/Pages/Map/MiniMap.razor.rz.scp.css */
.mini-map-panel[b-jmmudftk7t] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 30;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    background: rgba(30, 50, 15, 0.45);
    backdrop-filter: blur(4px);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.3s, border-color 0.3s;
}

.mini-map-panel:hover[b-jmmudftk7t] {
    opacity: 0.95;
    border-color: rgba(255, 255, 255, 0.45);
}

.mini-map-panel canvas[b-jmmudftk7t] {
    display: block;
}
/* /Components/Pages/Map/RelocateDialog.razor.rz.scp.css */
/* ===================================================================
   RelocateDialog — village relocation confirmation dialog
   =================================================================== */

.relocate-backdrop[b-p6fllb3d7p] {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.42);
}

.relocate-dialog[b-p6fllb3d7p] {
    position: fixed;
    z-index: 301;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    background: #f7f7f7;
    border: 1px solid #ababab;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    animation: relocate-slide-b-p6fllb3d7p 0.2s ease-out;
}

@keyframes relocate-slide-b-p6fllb3d7p {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.relocate-header[b-p6fllb3d7p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(to bottom, #efefef 0%, #d0d0d0 45%, #c2c2c2 55%, #e4e4e4 100%);
    border-bottom: 1px solid #8d8d8d;
    color: #333;
}

.relocate-header h3[b-p6fllb3d7p] {
    flex: 1;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.relocate-icon-image[b-p6fllb3d7p] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.relocate-close[b-p6fllb3d7p] {
    width: 28px;
    height: 28px;
    border: 1px solid #999;
    background: linear-gradient(to bottom, #ffffff, #e4e4e4);
    color: #444;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    border-radius: 0;
}

.relocate-close:hover[b-p6fllb3d7p] {
    background: linear-gradient(to bottom, #ffffff, #d8d8d8);
}

.relocate-body[b-p6fllb3d7p] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.relocate-loading[b-p6fllb3d7p],
.relocate-disabled[b-p6fllb3d7p] {
    padding: 24px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.relocate-summary[b-p6fllb3d7p] {
    background: #ffffff;
    border: 1px solid #d2d2d2;
    padding: 10px 12px;
}

.relocate-summary-row[b-p6fllb3d7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.relocate-summary-label[b-p6fllb3d7p] {
    font-size: 12px;
    font-weight: 700;
    color: #555;
}

.relocate-summary-note[b-p6fllb3d7p] {
    margin-top: 4px;
    font-size: 12px;
    color: #777;
}

.relocate-field[b-p6fllb3d7p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.relocate-field label[b-p6fllb3d7p] {
    font-size: 13px;
    font-weight: 700;
    color: #5c4a2a;
}

.relocate-coords[b-p6fllb3d7p] {
    font-weight: 700;
    color: #333;
    font-size: 14px;
    direction: ltr;
    display: inline-block;
}

.relocate-valley-type[b-p6fllb3d7p] {
    font-size: 12px;
    color: #888;
}

.relocate-select[b-p6fllb3d7p] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #bcbcbc;
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    color: #333;
}

.relocate-card-options[b-p6fllb3d7p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.relocate-card-option[b-p6fllb3d7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #c7c7c7;
    background: #fff;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    font-weight: 700;
}

.relocate-card-option.selected[b-p6fllb3d7p] {
    border-color: #6f9c5b;
    background: #f5f9f2;
}

.relocate-card-option input[type="radio"][b-p6fllb3d7p] {
    accent-color: #5c8a00;
    margin: 0;
}

.relocate-status[b-p6fllb3d7p] {
    background: #fff;
    border: 1px solid #d4d4d4;
    padding: 10px 12px;
}

.relocate-status.can-move[b-p6fllb3d7p] {
    border-color: #bcd8c0;
    background: #f7fbf7;
}

.relocate-status.cannot-move[b-p6fllb3d7p] {
    border-color: #e4b8b1;
    background: #fff9f8;
}

.relocate-status-main[b-p6fllb3d7p] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.relocate-status-meta[b-p6fllb3d7p] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.relocate-hint[b-p6fllb3d7p] {
    background: #f4f4f4;
    border: 1px solid #dbdbdb;
    padding: 8px 10px;
    font-size: 12px;
    color: #666;
}

.relocate-error[b-p6fllb3d7p] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 13px;
}

.relocate-success[b-p6fllb3d7p] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 13px;
}

.relocate-actions[b-p6fllb3d7p] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
}

.relocate-btn-cancel[b-p6fllb3d7p] {
    padding: 8px 20px;
    border: 1px solid #a6a6a6;
    border-radius: 0;
    background: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
    color: #555;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.relocate-btn-cancel:hover[b-p6fllb3d7p] {
    background: linear-gradient(to bottom, #ffffff 0%, #d4d4d4 100%);
}

.relocate-btn-confirm[b-p6fllb3d7p] {
    padding: 8px 24px;
    border: 1px solid #4a7a10;
    border-radius: 0;
    background: linear-gradient(to bottom, #7fb35e 0%, #5f8f41 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.relocate-btn-confirm:hover:not(:disabled)[b-p6fllb3d7p] {
    background: linear-gradient(to bottom, #8ec56b 0%, #689c48 100%);
}

.relocate-btn-confirm:disabled[b-p6fllb3d7p] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .relocate-dialog[b-p6fllb3d7p] {
        width: calc(100% - 20px);
        max-width: none;
    }

    .relocate-card-options[b-p6fllb3d7p] {
        grid-template-columns: 1fr;
    }

    .relocate-actions[b-p6fllb3d7p] {
        flex-direction: column-reverse;
    }

    .relocate-btn-cancel[b-p6fllb3d7p],
    .relocate-btn-confirm[b-p6fllb3d7p] {
        width: 100%;
    }
}
/* /Components/Pages/Map/TileDetailVillage.razor.rz.scp.css */
.tile-scattered-notice[b-4h8wckosx9] {
    background: linear-gradient(to bottom, #cce8f5, #7ec8e3);
    color: #07395a;
    border: 1px solid #3b7a9a;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    direction: rtl;
}

.tile-destroyed-notice[b-4h8wckosx9] {
    background: linear-gradient(to bottom, #ffd7c0, #f7b08a);
    color: #7a1b00;
    border: 1px solid #b04522;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    direction: rtl;
}
/* /Components/Pages/Map/WorldMap.razor.rz.scp.css */
.worldmap-root[b-7j7wmh1t1c] { display: contents; }
/* ===================================================================
   WorldMap scoped styles — Canvas-based map renderer
   =================================================================== */

/* --- Wrapper: fills the content area elegantly by negating parent padding --- */
.world-map-wrapper[b-7j7wmh1t1c] {
    display: block;
    width: auto;
    margin: 0; /* No negative margins on desktop — exposes the #content padding as a frame */
    position: relative;
    min-height: 0;
    overflow: hidden; 
}

[b-7j7wmh1t1c] .map-coordinate {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
}

[b-7j7wmh1t1c] h1 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: bold;
    color: #5c8a00;
}

/* ==========================================================================
   Canvas map container — fills the available viewport
   ========================================================================== */
.map-canvas-container[b-7j7wmh1t1c] {
    position: relative;
    width: 100%;
    height: calc(100vh - 180px); /* Leave room for top UI */
    min-height: 400px;
    overflow: hidden;
    background: #c5de89; /* Match JS background */
    border: 3px solid #5c8a00; /* Nice green frame */
    border-radius: 6px;
    box-sizing: border-box;
}

.map-canvas-container canvas[b-7j7wmh1t1c] {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.map-canvas-container canvas:active[b-7j7wmh1t1c] {
    cursor: grabbing;
}

/* ==========================================================================
   Progressive loading overlay — green shimmer while tiles load
   ========================================================================== */
.map-loading-overlay[b-7j7wmh1t1c] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #c5de89;
    transition: opacity 0.5s ease;
}

.map-loading-overlay.fade-out[b-7j7wmh1t1c] {
    opacity: 0;
    pointer-events: none;
}

.map-loading-overlay[b-7j7wmh1t1c]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.25) 45%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: map-shimmer-b-7j7wmh1t1c 1.8s ease-in-out infinite;
}

@keyframes map-shimmer-b-7j7wmh1t1c {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.map-loading-text[b-7j7wmh1t1c] {
    position: relative;
    z-index: 1;
    color: #5c8a00;
    font-size: 16px;
    font-weight: bold;
    direction: rtl;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.map-loading-dots[b-7j7wmh1t1c]::after {
    content: '';
    animation: map-dots-b-7j7wmh1t1c 1.4s steps(4) infinite;
}

@keyframes map-dots-b-7j7wmh1t1c {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}

/* ==========================================================================

   Overlays — positioned over the canvas
   ========================================================================== */

/* Current center coordinate display */
.map-overlay-coords[b-7j7wmh1t1c] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    pointer-events: none;
    direction: ltr;
    unicode-bidi: isolate;
    line-height: 1.4;
}

/* Coordinate search form */
.map-overlay-search[b-7j7wmh1t1c] {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 10;
}

.map-overlay-search form[b-7j7wmh1t1c] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    direction: ltr;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.map-overlay-search input.text[b-7j7wmh1t1c] {
    width: 42px;
    height: 24px;
    text-align: center;
    padding: 0 4px;
    font-size: 13px;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
    background: #fff;
    direction: ltr;
}

.map-overlay-search button[b-7j7wmh1t1c] {
    height: 26px;
    padding: 0 14px;
    border: 1px solid #8ca567;
    border-radius: 4px;
    background: linear-gradient(180deg, #f8fbf3 0%, #ceddb5 100%);
    color: #55683b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.map-overlay-search button:hover[b-7j7wmh1t1c] {
    background: linear-gradient(180deg, #ffffff 0%, #c4d6a3 100%);
}

/* Toolbar (crop finder, etc.) */
.map-overlay-toolbar[b-7j7wmh1t1c] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    gap: 6px;
    align-items: center;
}

.toolbar-btn[b-7j7wmh1t1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.toolbar-btn:hover[b-7j7wmh1t1c] {
    background: #fff;
    border-color: #8ca567;
}

.zoom-slider-container[b-7j7wmh1t1c] {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    padding: 0 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    height: 36px; /* Matches buttons approx */
}

.zoom-slider-container span[b-7j7wmh1t1c] {
    margin-right: 6px; /* Arabic layout, span on right or left is fine, just space it */
    margin-left: 6px;
    font-size: 16px;
    user-select: none;
}

.zoom-slider[b-7j7wmh1t1c] {
    width: 80px;
    cursor: pointer;
}

/* --- Toolbar feature lock overlay --- */
.toolbar-feature-wrapper[b-7j7wmh1t1c] {
    position: relative;
    display: inline-flex;
}

.toolbar-locked[b-7j7wmh1t1c] {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.6);
}

.toolbar-lock-overlay[b-7j7wmh1t1c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    z-index: 2;
    transition: background 0.15s;
}

.toolbar-lock-overlay:hover[b-7j7wmh1t1c] {
    background: rgba(0, 0, 0, 0.32);
}

.toolbar-lock-icon[b-7j7wmh1t1c] {
    font-size: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* ==========================================================================

   Floating tooltip (positioned with client coordinates — fixed)
   ========================================================================== */
[b-7j7wmh1t1c] .map-tooltip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    animation: tooltip-fadein-b-7j7wmh1t1c 0.12s ease-out;
    transform-origin: top left;
}

@keyframes tooltip-fadein-b-7j7wmh1t1c {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

[b-7j7wmh1t1c] #map_infobox {
    width: 180px;
    border: 1px solid var(--border-medium, #c8c8c8);
    background-color: var(--bg-content, #fff);
    font-size: 11px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

[b-7j7wmh1t1c] #map_infobox thead th {
    padding: 4px 8px;
    background-color: var(--bg-resource, #f5f5f5);
    font-weight: bold;
    font-size: 12px;
    color: var(--text-heading, #333);
    border-bottom: 1px solid var(--border-medium, #c8c8c8);
    text-align: center;
}

[b-7j7wmh1t1c] #map_infobox tbody th {
    padding: 2px 8px;
    font-weight: bold;
    color: var(--text-primary, #333);
    width: 50%;
    text-align: start;
}

[b-7j7wmh1t1c] #map_infobox tbody td {
    padding: 2px 8px;
    color: var(--text-secondary, #666);
}

[b-7j7wmh1t1c] #map_infobox tbody tr {
    border-bottom: 1px solid var(--border-light, #e8e8e8);
}

[b-7j7wmh1t1c] #map_infobox.village thead th {
    background-color: #E8F5E9;
    color: #2E7D32;
}

[b-7j7wmh1t1c] #map_infobox.oasis thead th {
    background-color: #FFF8E1;
    color: #F57F17;
}

[b-7j7wmh1t1c] #map_infobox.empty thead th {
    background-color: #EFEBE9;
    color: var(--text-secondary, #666);
}

/* ==========================================================================

   Village / Tile detail view (vilview)
   ========================================================================== */
[b-7j7wmh1t1c] #detailed_map {
    display: block;
    width: 300px;
    height: 264px;
    float: right;
    position: relative;
    right: 15px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
}

[b-7j7wmh1t1c] #detailed_map.f1 { background-image: url('../img/gpack/img/g/f1.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f2 { background-image: url('../img/gpack/img/g/f2.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f3 { background-image: url('../img/gpack/img/g/f3.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f4 { background-image: url('../img/gpack/img/g/f4.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f5 { background-image: url('../img/gpack/img/g/f5.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f6 { background-image: url('../img/gpack/img/g/f6.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f7 { background-image: url('../img/gpack/img/g/f7.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f8 { background-image: url('../img/gpack/img/g/f8.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f9 { background-image: url('../img/gpack/img/g/f9.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f10 { background-image: url('../img/gpack/img/g/f10.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f11 { background-image: url('../img/gpack/img/g/f11.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f12 { background-image: url('../img/gpack/img/g/f12.jpg'); }
[b-7j7wmh1t1c] #detailed_map.f99 { background-image: url('../img/gpack/img/g/f99.jpg'); }

[b-7j7wmh1t1c] #detailed_map.w1 { background-image: url('../img/gpack/img/m/w1.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w2 { background-image: url('../img/gpack/img/m/w2.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w3 { background-image: url('../img/gpack/img/m/w3.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w4 { background-image: url('../img/gpack/img/m/w4.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w5 { background-image: url('../img/gpack/img/m/w5.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w6 { background-image: url('../img/gpack/img/m/w6.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w7 { background-image: url('../img/gpack/img/m/w7.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w8 { background-image: url('../img/gpack/img/m/w8.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w9 { background-image: url('../img/gpack/img/m/w9.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w10 { background-image: url('../img/gpack/img/m/w10.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w11 { background-image: url('../img/gpack/img/m/w11.jpg'); }
[b-7j7wmh1t1c] #detailed_map.w12 { background-image: url('../img/gpack/img/m/w12.jpg'); }

[b-7j7wmh1t1c] #map_details {
    float: left;
    margin-left: 3px;
    margin-top: 25px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 16px;
}

[b-7j7wmh1t1c] #map_details table {
    margin-bottom: 15px;
}

[b-7j7wmh1t1c] #village_info,
[b-7j7wmh1t1c] #troop_info {
    width: 227px;
    border: none;
    background-color: #FFFFFF;
}

[b-7j7wmh1t1c] #village_info thead th,
[b-7j7wmh1t1c] #troop_info thead th {
    text-align: right;
    font-weight: bold;
    background-color: #FFFFFF;
    background-image: none;
    padding: 1px 4px;
}

[b-7j7wmh1t1c] #village_info tbody th {
    text-align: right;
    padding: 1px 4px;
    width: 50%;
}

[b-7j7wmh1t1c] #village_info tbody td {
    padding: 1px 4px;
    font-weight: bold;
}

[b-7j7wmh1t1c] #troop_info tbody td,
[b-7j7wmh1t1c] #troop_info tbody th {
    padding: 1px 4px;
}

[b-7j7wmh1t1c] #troop_info td.val {
    font-weight: bold;
    text-align: right;
    padding-left: 10px;
    width: 10%;
}

[b-7j7wmh1t1c] #troop_info td.ico {
    width: 10%;
    text-align: center;
}

[b-7j7wmh1t1c] #troop_info.rep tbody {
    line-height: 16px;
}

[b-7j7wmh1t1c] #troop_info.rep img {
    margin-right: 5px;
}

[b-7j7wmh1t1c] .clear {
    clear: both;
    height: 0;
    overflow: hidden;
}

/* Options table */
[b-7j7wmh1t1c] #options {
    clear: both;
    margin: 0;
    border: none;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 16px;
}

[b-7j7wmh1t1c] #options thead th {
    text-align: right;
    font-weight: bold;
    background-color: #FFFFFF;
    background-image: none;
    padding: 1px 4px;
    font-size: 11pt;
}

[b-7j7wmh1t1c] #options tbody td {
    padding: 1px 4px;
}

[b-7j7wmh1t1c] #options tbody td a {
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    color: #71D000;
    transition: all ease-in 200ms;
}

[b-7j7wmh1t1c] #options tbody td a:hover {
    color: #4a7200;
    text-decoration: underline;
}

/* Back to map link */
[b-7j7wmh1t1c] p > a {
    color: #5c8a00;
    text-decoration: none;
}

[b-7j7wmh1t1c] p > a:hover {
    color: #4a7200;
    text-decoration: underline;
}

/* ==========================================================================
   Quick Actions Toolbar — top-right action buttons (Home, Villages, Farm)
   ========================================================================== */
.map-quick-actions[b-7j7wmh1t1c] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 15;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    direction: rtl; /* RTL: first button on the right */
}

.qa-btn[b-7j7wmh1t1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid #b9b9b9;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.qa-btn:hover[b-7j7wmh1t1c] {
    background: #fff;
    border-color: #8ca567;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.qa-btn:active[b-7j7wmh1t1c] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.qa-icon[b-7j7wmh1t1c] {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

/* Sending animation for farm list button */
.qa-sending[b-7j7wmh1t1c] {
    animation: qa-pulse-b-7j7wmh1t1c 0.8s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.7;
}

@keyframes qa-pulse-b-7j7wmh1t1c {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.9); }
}

/* Village switcher dropdown */
.qa-village-switcher[b-7j7wmh1t1c] {
    position: relative;
    display: inline-flex;
}

.qa-village-dropdown[b-7j7wmh1t1c] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #b9b9b9;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    z-index: 25;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.qa-village-item[b-7j7wmh1t1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    text-align: right;
    direction: rtl;
    transition: background 0.12s;
    white-space: nowrap;
}

.qa-village-item:hover[b-7j7wmh1t1c] {
    background: #f0f7e4;
}

.qa-village-item.active[b-7j7wmh1t1c] {
    background: #e0efc7;
    font-weight: 700;
    color: #5c8a00;
}

.qa-village-name[b-7j7wmh1t1c] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-village-coords[b-7j7wmh1t1c] {
    font-size: 11px;
    color: #888;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Farm list dropdown switcher */
.qa-farmlist-switcher[b-7j7wmh1t1c] {
    position: relative;
    display: inline-flex;
}

.qa-farmlist-dropdown[b-7j7wmh1t1c] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 190px;
    max-height: 300px;
    overflow-y: auto;
    background: rgba(30, 28, 22, 0.96);
    border: 1px solid rgba(180, 155, 90, 0.6);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 25;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    pointer-events: auto;
}

.qa-farmlist-item[b-7j7wmh1t1c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #e8dfc4;
    text-align: right;
    direction: rtl;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.qa-farmlist-item:hover:not(:disabled)[b-7j7wmh1t1c] {
    background: rgba(180, 155, 90, 0.2);
    color: #fff;
}

.qa-farmlist-item:active:not(:disabled)[b-7j7wmh1t1c] {
    background: rgba(180, 155, 90, 0.35);
}

.qa-farmlist-item:disabled[b-7j7wmh1t1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.qa-farmlist-all[b-7j7wmh1t1c] {
    color: #f5c842;
    font-weight: 700;
}

.qa-farmlist-all:hover:not(:disabled)[b-7j7wmh1t1c] {
    background: rgba(245, 200, 66, 0.15);
    color: #ffe066;
}

.qa-farmlist-divider[b-7j7wmh1t1c] {
    height: 1px;
    margin: 2px 10px;
    background: rgba(180, 155, 90, 0.25);
}

.qa-farmlist-icon[b-7j7wmh1t1c] {
    font-size: 14px;
    flex-shrink: 0;
}

.qa-farmlist-name[b-7j7wmh1t1c] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qa-farmlist-count[b-7j7wmh1t1c] {
    font-size: 11px;
    color: #b4a070;
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.qa-farmlist-empty[b-7j7wmh1t1c] {
    padding: 12px 16px;
    color: #888;
    font-size: 12px;
    text-align: center;
    direction: rtl;
}

/* Farm list toast */
.map-farmlist-toast[b-7j7wmh1t1c] {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 200;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f0f7e4, #e0efc7);
    color: #3d5c0f;
    border: 1px solid rgba(92, 138, 0, 0.4);
    border-radius: 8px;
    font-weight: bold;
    font-size: 13px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    direction: rtl;
    white-space: nowrap;
    animation: farmlist-toast-b-7j7wmh1t1c 4s ease-in-out forwards;
}

@keyframes farmlist-toast-b-7j7wmh1t1c {
    0%   { opacity: 0; transform: translateY(-6px); }
    8%   { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================================

   Mobile styles
   ========================================================================== */
@media (max-width: 900px) {
    .map-canvas-container[b-7j7wmh1t1c] {
        height: calc(100vh - 130px);
        height: calc(100dvh - 130px);
    }

    .qa-btn[b-7j7wmh1t1c] {
        width: 36px;
        height: 36px;
    }

    .qa-icon[b-7j7wmh1t1c] {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    .world-map-wrapper[b-7j7wmh1t1c] {
        /* On mobile, we completely negate the padding to span edge-to-edge */
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: -10px;
    }

    .map-canvas-container[b-7j7wmh1t1c] {
        /* Expand canvas inside the content box to fill the white space completely. */
        /* Total height minus Header(44px) and Bottom Nav(56px) */
        height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
        min-height: unset;
        border: none; /* No border on mobile */
        border-radius: 0;
    }

    [b-7j7wmh1t1c] h1 {
        font-size: 18px;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 14px;
    }

    [b-7j7wmh1t1c] #detailed_map {
        float: none;
        right: auto;
        margin: 0 auto 10px;
        display: block;
        max-width: 100%;
    }

    [b-7j7wmh1t1c] #map_details {
        float: none;
        margin: 0;
        width: 100%;
    }

    [b-7j7wmh1t1c] #village_info,
    [b-7j7wmh1t1c] #troop_info {
        width: 100%;
    }

    [b-7j7wmh1t1c] #options {
        width: 100%;
    }

    /* Quick actions — compact for mobile */
    .map-quick-actions[b-7j7wmh1t1c] {
        top: 6px;
        right: 6px;
        gap: 5px;
    }

    .qa-btn[b-7j7wmh1t1c] {
        width: 34px;
        height: 34px;
        border-radius: 5px;
    }

    .qa-icon[b-7j7wmh1t1c] {
        font-size: 16px;
    }

    .qa-village-dropdown[b-7j7wmh1t1c] {
        min-width: 160px;
        max-height: 220px;
        right: 0;
    }

    .qa-village-item[b-7j7wmh1t1c] {
        padding: 7px 10px;
        font-size: 12px;
    }

    .map-farmlist-toast[b-7j7wmh1t1c] {
        top: 48px;
        right: 6px;
        font-size: 12px;
        padding: 6px 12px;
    }

    .qa-farmlist-dropdown[b-7j7wmh1t1c] {
        min-width: 170px;
        max-height: 240px;
    }

    .qa-farmlist-item[b-7j7wmh1t1c] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .qa-farmlist-count[b-7j7wmh1t1c] {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .world-map-wrapper[b-7j7wmh1t1c] {
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        margin-bottom: -10px;
    }

    .map-canvas-container[b-7j7wmh1t1c] {
        height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
        min-height: unset;
        border: none;
        border-radius: 0;
    }

    .map-overlay-coords[b-7j7wmh1t1c] {
        font-size: 12px;
        padding: 3px 7px;
    }

    .map-overlay-search form[b-7j7wmh1t1c] {
        font-size: 11px;
        padding: 3px 6px;
    }

    .map-overlay-search input.text[b-7j7wmh1t1c] {
        width: 36px;
        height: 22px;
        font-size: 12px;
    }

    .map-overlay-search button[b-7j7wmh1t1c] {
        height: 24px;
        padding: 0 10px;
        font-size: 12px;
    }

    /* Quick actions — smallest size for narrow phones */
    .map-quick-actions[b-7j7wmh1t1c] {
        top: 4px;
        right: 4px;
        gap: 4px;
    }

    .qa-btn[b-7j7wmh1t1c] {
        width: 32px;
        height: 32px;
    }

    .qa-icon[b-7j7wmh1t1c] {
        font-size: 15px;
    }

    .qa-village-dropdown[b-7j7wmh1t1c] {
        min-width: 150px;
        max-height: 180px;
        font-size: 12px;
    }

    .qa-village-item[b-7j7wmh1t1c] {
        padding: 6px 8px;
        font-size: 11px;
    }

    .qa-village-coords[b-7j7wmh1t1c] {
        font-size: 10px;
    }

    .map-farmlist-toast[b-7j7wmh1t1c] {
        top: 42px;
        right: 4px;
        font-size: 11px;
        padding: 5px 10px;
    }

    .qa-farmlist-dropdown[b-7j7wmh1t1c] {
        min-width: 155px;
        max-height: 200px;
    }

    .qa-farmlist-item[b-7j7wmh1t1c] {
        padding: 7px 8px;
        font-size: 11px;
        gap: 6px;
    }

    .qa-farmlist-icon[b-7j7wmh1t1c] {
        font-size: 12px;
    }

    .qa-farmlist-count[b-7j7wmh1t1c] {
        font-size: 9px;
        padding: 1px 5px;
    }
}

/* ==========================================================================
   Relocation Visual Effects — portal, sky beam, sparkles, toast
   Created as HTML overlays inside #overlayMarkersContainer by mapCanvas.js
   ========================================================================== */

/* Portal wrapper — handles position and lifecycle (scale + opacity) */
[b-7j7wmh1t1c] .reloc-portal-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 50;
    animation: reloc-lifecycle-b-7j7wmh1t1c 1.8s ease-in-out forwards;
}

/* Portal inner disc — conic gradient with isometric perspective + spin */
[b-7j7wmh1t1c] .reloc-portal {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, #fffbe6, #ffd700, #fff8dc, transparent);
    transform: rotateX(60deg);
    mix-blend-mode: screen;
    filter: blur(2px) drop-shadow(0 0 24px rgba(255, 215, 0, 0.8));
    animation: reloc-spin-b-7j7wmh1t1c 0.8s linear infinite;
}

@keyframes reloc-lifecycle-b-7j7wmh1t1c {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    75%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

@keyframes reloc-spin-b-7j7wmh1t1c {
    from { transform: rotateX(60deg) rotateZ(0deg); }
    to   { transform: rotateX(60deg) rotateZ(360deg); }
}

/* Sky beam — vertical light pillar descending from above */
[b-7j7wmh1t1c] .reloc-beam {
    position: absolute;
    width: 100px;
    height: 500px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 245, 200, 0.1) 15%,
        rgba(255, 223, 100, 0.5) 35%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 223, 100, 0.5) 65%,
        rgba(255, 245, 200, 0.1) 85%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 100%);
    mix-blend-mode: screen;
    filter: blur(4px);
    pointer-events: none;
    z-index: 49;
    animation: reloc-beam-strike-b-7j7wmh1t1c 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes reloc-beam-strike-b-7j7wmh1t1c {
    0%   { transform: translate(-50%, -100%) scaleY(0) scaleX(0.1); opacity: 0; }
    20%  { transform: translate(-50%, -100%) scaleY(1) scaleX(1.5); opacity: 1; filter: blur(3px) brightness(2); }
    50%  { transform: translate(-50%, -100%) scaleY(1) scaleX(0.8); opacity: 0.9; filter: blur(5px) brightness(1.6); }
    100% { transform: translate(-50%, -100%) scaleY(1) scaleX(0); opacity: 0; filter: blur(8px); }
}

/* Sparkle particle — small dot that bursts outward using CSS custom properties */
[b-7j7wmh1t1c] .reloc-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffe680 60%, transparent 100%);
    pointer-events: none;
    z-index: 51;
    opacity: 0;
    animation: reloc-sparkle-burst-b-7j7wmh1t1c 0.9s ease-out forwards;
}

@keyframes reloc-sparkle-burst-b-7j7wmh1t1c {
    0%   { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(0); opacity: 0; }
}

/* Ground flash — quick radial flash on the tile */
[b-7j7wmh1t1c] .reloc-ground-flash {
    position: absolute;
    width: 140px;
    height: 70px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 48;
    background: radial-gradient(ellipse, rgba(255, 255, 240, 0.8) 0%, rgba(255, 215, 0, 0.35) 40%, transparent 70%);
    animation: reloc-flash-b-7j7wmh1t1c 0.8s ease-out forwards;
}

@keyframes reloc-flash-b-7j7wmh1t1c {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* Status toast — floating notification during relocation */
[b-7j7wmh1t1c] .reloc-status-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 8px 24px;
    background: linear-gradient(135deg, #fffef5, #fff3cd);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    direction: rtl;
    animation: reloc-toast-b-7j7wmh1t1c 3.5s ease-in-out forwards;
}

@keyframes reloc-toast-b-7j7wmh1t1c {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    78%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Inline relocation status toast on the map --- */
.map-relocation-toast[b-7j7wmh1t1c] {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 10px 20px;
    background: linear-gradient(135deg, #fffef5, #fff3cd);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    direction: rtl;
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 32px);
    width: max-content;
    box-sizing: border-box;
    word-break: break-word;
    animation: map-reloc-toast-b-7j7wmh1t1c 4s ease-in-out forwards;
}

@keyframes map-reloc-toast-b-7j7wmh1t1c {
    0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
    8%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================================
   Alliance Beacon — floating directional indicator pointing to leader
   ========================================================================== */
.alliance-beacon[b-7j7wmh1t1c] {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        rgba(255, 255, 255, 0.97),
        rgba(230, 230, 230, 0.92) 60%,
        rgba(200, 200, 200, 0.85));
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25),
        0 0 10px rgba(255, 255, 255, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: beacon-pulse-b-7j7wmh1t1c 2.4s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.alliance-beacon:hover[b-7j7wmh1t1c] {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 14px rgba(255, 255, 255, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.alliance-beacon:active[b-7j7wmh1t1c] {
    transform: translate(-50%, -50%) scale(0.95);
}

@keyframes beacon-pulse-b-7j7wmh1t1c {
    0%   { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 255, 255, 0.4); }
    50%  { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 255, 255, 0.6); }
    100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 10px rgba(255, 255, 255, 0.4); }
}

/* Inner alliance icon */
.alliance-beacon-icon[b-7j7wmh1t1c] {
    font-size: 12px;
    line-height: 1;
    color: #444;
    text-shadow: none;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Directional arrow extending outward from the beacon */
.alliance-beacon-arrow[b-7j7wmh1t1c] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.alliance-beacon-arrow[b-7j7wmh1t1c]::after {
    content: '';
    position: absolute;
    /* Arrow pointing right (0deg), rotated by inline style */
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid rgba(100, 100, 100, 0.7);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .alliance-beacon[b-7j7wmh1t1c] {
        width: 24px;
        height: 24px;
    }

    .alliance-beacon-icon[b-7j7wmh1t1c] {
        font-size: 10px;
    }

    .alliance-beacon-arrow[b-7j7wmh1t1c]::after {
        right: -6px;
        border-top-width: 3px;
        border-bottom-width: 3px;
        border-left-width: 6px;
    }
}
/* /Components/Pages/Market/MarketPage.razor.rz.scp.css */
/* ==========================================================================
   MarketPage.razor.css — Market (gid17)
   Classic Travian layout: Send · Buy · Offer · NPC Trader tabs
   ========================================================================== */

/* --- Page heading --- */
h1[b-y6oru9rmn2] {
    font-size: 20px;
    margin: 0 0 6px;
    font-weight: bold;
    color: #5B9C00;
    font-family: inherit;
}

h1 .level[b-y6oru9rmn2] {
    font-size: 16px;
    font-weight: 600;
    color: #7ab83a;
    margin-right: 4px;
}

/* --- Build wrapper --- */
#build[b-y6oru9rmn2] {
    position: relative;
    min-height: 200px;
    font-family: Tahoma, Arial, sans-serif;
    color: #333;
    padding: 4px 0;
}

/* --- Building logo --- */
.build_logo[b-y6oru9rmn2] {
    float: left;
    margin: 0 15px 10px 0;
    display: block;
}

.build_logo img[b-y6oru9rmn2] {
    display: block;
    border-radius: 4px;
}

/* --- Description --- */
.build_desc[b-y6oru9rmn2] {
    min-height: 85px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    line-height: 1.7;
    font-family: inherit;
}

/* --- Tab menu clear float --- */
#textmenu[b-y6oru9rmn2] {
    clear: both;
}

/* ==========================================================================
   Shared input style
   ========================================================================== */
input.text[b-y6oru9rmn2] {
    text-align: center;
    padding: 3px 4px;
    font-size: 12px;
    border: 1px solid #b0b0b0;
    border-radius: 0;
    background: #fff;
    font-family: inherit;
}

input.text:focus[b-y6oru9rmn2] {
    border-color: #71b000;
    outline: none;
    box-shadow: 0 0 2px rgba(113, 176, 0, 0.3);
}

/* ==========================================================================
   Send Resources tab — two-column layout
   ========================================================================== */
.send-layout[b-y6oru9rmn2] {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    margin: 10px 0;
}

/* --- Resource inputs (right in RTL) --- */
.send-res-table[b-y6oru9rmn2] {
    border-collapse: collapse;
    flex-shrink: 0;
}

.send-res-table tr[b-y6oru9rmn2] {
    height: 38px;
}

.send-res-table td[b-y6oru9rmn2] {
    padding: 4px 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.send-res-table td.res-ico[b-y6oru9rmn2] {
    text-align: start;
    width: 22px;
    padding-inline-end: 6px;
}

.send-res-table td.res-ico img[b-y6oru9rmn2] {
    vertical-align: middle;
}

.send-res-table td.res-max[b-y6oru9rmn2] {
    font-size: 12px;
    color: #555;
    text-align: end;
    padding-inline-start: 6px;
}

.send-res-table td.res-max .fill-max[b-y6oru9rmn2] {
    color: #5B9C00;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

.send-res-table td.res-max .fill-max:hover[b-y6oru9rmn2] {
    text-decoration: underline;
    color: #4a8200;
}

.send-res-table td.res-input input.text[b-y6oru9rmn2] {
    width: 80px;
    height: 24px;
}

/* --- Target info (left in RTL) --- */
.send-target[b-y6oru9rmn2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    flex-shrink: 0;
}

.merchant-info[b-y6oru9rmn2] {
    font-size: 13px;
    color: #000;
    font-weight: bold;
    margin-bottom: 2px;
}

.target-village input.village-name[b-y6oru9rmn2] {
    width: 130px;
    height: 24px;
}

.target-or[b-y6oru9rmn2] {
    font-size: 12px;
    color: #666;
    font-weight: bold;
}

.target-coords[b-y6oru9rmn2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #000;
    font-weight: bold;
}

.target-coords .coord-input[b-y6oru9rmn2] {
    width: 55px;
    height: 24px;
}

/* --- Submit --- */
.send-submit[b-y6oru9rmn2] {
    text-align: center;
    margin: 14px 0;
}

.btn-send[b-y6oru9rmn2] {
    display: inline-block;
    padding: 7px 30px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid #4a7a2a;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
}

.btn-send:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* ==========================================================================
   Buy tab
   ========================================================================== */
.buy_select[b-y6oru9rmn2] {
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    margin-bottom: 8px;
    display: inline-table;
    vertical-align: top;
    margin-inline-end: 8px;
}

.buy_select thead td[b-y6oru9rmn2] {
    padding: 4px 8px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    font-weight: bold;
    font-size: 12px;
    color: #000;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
}

.buy_select tbody td[b-y6oru9rmn2] {
    padding: 6px 10px;
    text-align: center;
    vertical-align: middle;
}

.buy_select tbody td a[b-y6oru9rmn2] {
    display: inline-block;
    padding: 4px;
    border-radius: 3px;
    text-decoration: none;
    color: var(--text-link);
    font-weight: bold;
}

.buy_select tbody td a:hover[b-y6oru9rmn2] {
    background-color: #FFFDE0;
}

.buy_select tbody td a img[b-y6oru9rmn2] {
    vertical-align: middle;
}

.buy_select tbody td.hl[b-y6oru9rmn2] {
    background-color: #FFFDE0;
}

/* --- Offers range table --- */
#range[b-y6oru9rmn2] {
    width: 100%;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    margin-top: 10px;
}

#range thead th[b-y6oru9rmn2] {
    padding: 4px 8px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    font-weight: bold;
    font-size: 13px;
    color: #000;
    height: 28px;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
}

#range thead td[b-y6oru9rmn2] {
    padding: 4px 8px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    font-weight: bold;
    font-size: 11px;
    color: #000;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
}

#range tbody tr[b-y6oru9rmn2] {
    border-bottom: 1px solid var(--border-light);
}

#range tbody tr:hover[b-y6oru9rmn2] {
    background-color: #FFFDE0;
}

#range tbody td[b-y6oru9rmn2] {
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
}

#range tbody td.val img[b-y6oru9rmn2] {
    vertical-align: middle;
    margin-inline-start: 3px;
}

#range tbody td.pla a[b-y6oru9rmn2] {
    color: var(--text-link);
    text-decoration: none;
}

#range tbody td.pla a:hover[b-y6oru9rmn2] {
    text-decoration: underline;
}

#range tbody td.dur[b-y6oru9rmn2] {
    color: var(--text-secondary);
    font-size: 11px;
}

#range tbody td.act a[b-y6oru9rmn2] {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

#range tbody td.act a:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

#range tbody td.none[b-y6oru9rmn2] {
    color: var(--text-secondary);
    font-style: italic;
    padding: 12px;
}

/* ==========================================================================
   Offer tab (create offer)
   ========================================================================== */
#sell[b-y6oru9rmn2] {
    width: 100%;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    margin-bottom: 10px;
}

#sell th[b-y6oru9rmn2] {
    padding: 5px 8px;
    font-weight: bold;
    font-size: 12px;
    color: var(--text-heading);
    width: 80px;
    text-align: start;
    vertical-align: middle;
}

#sell td[b-y6oru9rmn2] {
    padding: 5px 8px;
    vertical-align: middle;
}

#sell td.val input.text[b-y6oru9rmn2] {
    width: 80px;
}

#sell td.res select.dropdown[b-y6oru9rmn2] {
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--border-medium);
    border-radius: 2px;
    background-color: #fff;
}

#sell td.tra[b-y6oru9rmn2],
#sell td.al[b-y6oru9rmn2] {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

#sell td.tra input.text[b-y6oru9rmn2] {
    width: 30px;
}

#sell td.tra input.check[b-y6oru9rmn2],
#sell td.al input.check[b-y6oru9rmn2] {
    margin-inline-end: 4px;
    cursor: pointer;
    vertical-align: middle;
}

#sell tr[b-y6oru9rmn2] {
    border-bottom: 1px solid var(--border-light);
}

/* ==========================================================================
   NPC Trader tab — classic 3-column layout
   ========================================================================== */
#npc[b-y6oru9rmn2] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    margin: 10px 0;
}

#npc thead th[b-y6oru9rmn2] {
    padding: 5px 8px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    font-weight: bold;
    font-size: 13px;
    color: #000;
    height: 28px;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
}

#npc tbody tr[b-y6oru9rmn2] {
    border-bottom: 1px solid #d5d5d5;
}

#npc tbody td[b-y6oru9rmn2] {
    padding: 8px 10px;
    vertical-align: middle;
    font-size: 13px;
}

/* Right column (first in markup): current value + icon */
#npc tbody td.npc-cur[b-y6oru9rmn2] {
    text-align: start;
    white-space: nowrap;
    font-weight: bold;
    color: #000;
    width: 35%;
}

#npc tbody td.npc-cur img[b-y6oru9rmn2] {
    vertical-align: middle;
    margin-inline-start: 4px;
}

/* Center column: input */
#npc tbody td.npc-input[b-y6oru9rmn2] {
    text-align: center;
    width: 30%;
}

#npc tbody td.npc-input input.text[b-y6oru9rmn2] {
    width: 100px;
    height: 24px;
}

/* Left column (last in markup): difference */
#npc tbody td.npc-diff[b-y6oru9rmn2] {
    text-align: center;
    width: 35%;
    color: #555;
    font-size: 13px;
}

/* --- Step info & description --- */
.npc-step-info[b-y6oru9rmn2] {
    text-align: center;
    margin: 16px 0 8px;
    font-size: 14px;
    color: #000;
}

.npc-desc[b-y6oru9rmn2] {
    text-align: center;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 12px;
}

/* --- NPC all-villages checkbox (capital only) --- */
.npc-all-villages[b-y6oru9rmn2] {
    text-align: center;
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: #f5f5e8;
    border: 1px solid #c0c0a0;
    border-radius: 4px;
}

.npc-all-villages label[b-y6oru9rmn2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: bold;
    color: #4a7c00;
    cursor: pointer;
}

.npc-all-villages input[type="checkbox"][b-y6oru9rmn2] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #5B9C00;
}

.npc-all-villages-hint[b-y6oru9rmn2] {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #777;
    line-height: 1.5;
}

/* --- NPC submit button --- */
#submitButton[b-y6oru9rmn2] {
    text-align: center;
    margin: 12px 0;
}

#submitButton .none[b-y6oru9rmn2] {
    font-size: 12px;
    color: var(--text-secondary);
}

#submitButton .none img[b-y6oru9rmn2] {
    vertical-align: middle;
    margin: 0 2px;
}

.btn-npc-trade[b-y6oru9rmn2] {
    display: inline-block;
    padding: 6px 20px;
    background: linear-gradient(to bottom, #FFF8E1, #FFE082);
    border: 1px solid #FFC107;
    border-radius: 3px;
    color: #E65100;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn-npc-trade:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #FFE082, #FFD54F);
    border-color: #FFB300;
}

.btn-npc-trade:disabled[b-y6oru9rmn2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-npc-trade img[b-y6oru9rmn2] {
    vertical-align: middle;
    margin: 0 2px;
}

.npc-distribute[b-y6oru9rmn2] {
    font-size: 12px;
    color: #5B9C00;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.npc-distribute:hover[b-y6oru9rmn2] {
    text-decoration: underline;
}

.npc-capacity-warning[b-y6oru9rmn2] {
    background: #fff3cd;
    border: 1px solid #e0c36a;
    color: #856404;
    padding: 6px 10px;
    margin: 6px 0;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.6;
}

.npc-capacity-warning span[b-y6oru9rmn2] {
    display: block;
}

#npc .pos[b-y6oru9rmn2] { color: #2E7D32; }
#npc .neg[b-y6oru9rmn2] { color: #C62828; }

/* --- Clear div hide --- */
.clear[b-y6oru9rmn2] {
    display: none;
}

/* --- Submit image button (offer tab) --- */
.dynamic_img[b-y6oru9rmn2],
input.dynamic_img[b-y6oru9rmn2] {
    display: inline-block;
    padding: 6px 24px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid #4a7a2a;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6px;
}

.dynamic_img:hover[b-y6oru9rmn2],
input.dynamic_img:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* ==========================================================================
   Send Confirmation step
   ========================================================================== */
.send-confirm[b-y6oru9rmn2] {
    margin: 10px 0;
}

.send-confirm h4[b-y6oru9rmn2] {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 0 0 8px;
}

.send-confirm-table[b-y6oru9rmn2] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    background-color: #fff;
    margin-bottom: 10px;
}

.send-confirm-table tr[b-y6oru9rmn2] {
    border-bottom: 1px solid #d5d5d5;
}

.send-confirm-table tr:last-child[b-y6oru9rmn2] {
    border-bottom: none;
}

.send-confirm-table td[b-y6oru9rmn2],
.send-confirm-table th[b-y6oru9rmn2] {
    padding: 5px 8px;
    vertical-align: middle;
    font-size: 12px;
}

.send-confirm-table th[b-y6oru9rmn2] {
    text-align: start;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    width: 60px;
}

.send-confirm-table td.res-val[b-y6oru9rmn2] {
    text-align: end;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    width: 80px;
}

.send-confirm-table td.res-ico[b-y6oru9rmn2] {
    width: 22px;
    padding-inline-start: 2px;
    padding-inline-end: 6px;
}

.send-confirm-table td.res-ico img[b-y6oru9rmn2] {
    vertical-align: middle;
}

.send-confirm-table td.confirm-val[b-y6oru9rmn2] {
    color: #000;
    font-size: 12px;
}

.send-confirm-table td.confirm-val b[b-y6oru9rmn2] {
    color: #5B9C00;
}

/* --- Cancel button --- */
.btn-cancel[b-y6oru9rmn2] {
    display: inline-block;
    padding: 7px 30px;
    background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    border: 1px solid #a0a0a0;
    border-radius: 3px;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    margin-inline-start: 8px;
}

.btn-cancel:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
}

/* ==========================================================================
   Traveling Merchants
   ========================================================================== */
.traveling-merchants[b-y6oru9rmn2] {
    margin-top: 18px;
}

.traveling-merchants h4[b-y6oru9rmn2] {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 0 0 6px;
    padding: 5px 8px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    border: 1px solid #b0b0b0;
    border-bottom: none;
}

.trade-movements-table[b-y6oru9rmn2] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    background-color: #fff;
    font-size: 12px;
}

.trade-movements-table thead tr[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #E8EFD7 0%, #D8E5C0 100%);
    border-bottom: 1px solid #b0b0b0;
}

.trade-movements-table thead td[b-y6oru9rmn2] {
    padding: 4px 8px;
    font-weight: bold;
    font-size: 11px;
    color: #000;
    text-align: center;
    vertical-align: middle;
}

.trade-movements-table thead td img[b-y6oru9rmn2] {
    vertical-align: middle;
}

.trade-movements-table tbody tr[b-y6oru9rmn2] {
    border-bottom: 1px solid #d5d5d5;
}

.trade-movements-table tbody tr:hover:not(.tm-total)[b-y6oru9rmn2] {
    background-color: #FFFDE0;
}

.trade-movements-table tbody td[b-y6oru9rmn2] {
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
}

.trade-movements-table td.tm-cancel[b-y6oru9rmn2] {
    width: 26px;
    text-align: center;
    cursor: pointer;
}

.trade-movements-table td.tm-cancel a[b-y6oru9rmn2] {
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
}

.trade-movements-table td.tm-cancel a:hover[b-y6oru9rmn2] {
    opacity: 0.7;
}

.trade-movements-table td.tm-target[b-y6oru9rmn2] {
    text-align: start;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
}

.trade-movements-table td.tm-res[b-y6oru9rmn2] {
    font-weight: bold;
    color: #000;
    white-space: nowrap;
}

.trade-movements-table td.tm-time[b-y6oru9rmn2] {
    white-space: nowrap;
    font-weight: bold;
    color: #000;
    direction: ltr;
    text-align: left;
}

.trade-movements-table tr.tm-total[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    border-top: 2px solid #b0b0b0;
}

.trade-movements-table tr.tm-total td[b-y6oru9rmn2] {
    font-weight: bold;
    color: #333;
    padding: 5px 8px;
}

/* ==========================================================================
   Incoming Merchants (شحنات واردة)
   ========================================================================== */
.incoming-merchants[b-y6oru9rmn2] {
    margin-top: 18px;
}

.incoming-merchants h4[b-y6oru9rmn2] {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 0 0 6px;
    padding: 5px 8px;
    background: linear-gradient(to bottom, #E3F2FD 0%, #BBDEFB 100%);
    border: 1px solid #90CAF9;
    border-bottom: none;
}

.trade-movements-table.incoming thead tr[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #E3F2FD 0%, #BBDEFB 100%);
    border-bottom: 1px solid #90CAF9;
}

.trade-movements-table.incoming[b-y6oru9rmn2] {
    border-color: #90CAF9;
}

/* --- Return-to-barracks button --- */
.btn-green[b-y6oru9rmn2] {
    display: inline-block;
    padding: 5px 16px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid #4a7a2a;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.btn-green:hover[b-y6oru9rmn2] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
    color: #fff;
}

/* ==========================================================================
   Info message
   ========================================================================== */
.info-message[b-y6oru9rmn2] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: 4px;
    color: #2E7D32;
    font-size: 12px;
}

/* ==========================================================================
   Pull Resources Tab � matches the NPC/send table look, mobile-friendly
   ========================================================================== */

.pull-header[b-y6oru9rmn2] {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 10px 0 8px;
}

.pull-target-name[b-y6oru9rmn2] {
    color: #79c000;
    font-weight: bold;
}

.pull-summary[b-y6oru9rmn2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 10px;
    margin: 8px 0;
    font-size: 14px;
    color: #000;
}

.pull-summary .pull-sum-item[b-y6oru9rmn2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pull-summary .pull-sum-item img[b-y6oru9rmn2] { vertical-align: middle; }
.pull-summary .pull-sep[b-y6oru9rmn2] { color: #999; }

.pull-action[b-y6oru9rmn2] {
    text-align: center;
    margin: 10px 0 12px;
}

#pull_table[b-y6oru9rmn2] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    margin: 10px 0;
    table-layout: fixed;
}

#pull_table thead th[b-y6oru9rmn2] {
    padding: 5px 4px;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    font-weight: bold;
    font-size: 13px;
    color: #000;
    height: 28px;
    border-bottom: 1px solid #a0a0a0;
    text-align: center;
    vertical-align: middle;
}

#pull_table tbody tr[b-y6oru9rmn2] { border-bottom: 1px solid #d5d5d5; }

#pull_table tbody td[b-y6oru9rmn2] {
    padding: 6px 4px;
    vertical-align: middle;
    font-size: 13px;
    text-align: center;
}

#pull_table th.pull-clock[b-y6oru9rmn2],
#pull_table td.pull-clock[b-y6oru9rmn2] {
    width: 52px;
    color: #555;
    white-space: nowrap;
}

#pull_table th.pull-res[b-y6oru9rmn2],
#pull_table td.pull-res[b-y6oru9rmn2] { width: 13%; }

#pull_table td.pull-res input.text[b-y6oru9rmn2] {
    width: 100%;
    max-width: 90px;
    height: 24px;
    text-align: center;
    padding: 2px 4px;
    box-sizing: border-box;
    font-size: 13px;
}

#pull_table th.pull-village[b-y6oru9rmn2],
#pull_table td.pull-village[b-y6oru9rmn2] {
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pull_table td.pull-village b[b-y6oru9rmn2] { color: #79c000; }

#pull_table th.pull-chk[b-y6oru9rmn2],
#pull_table td.pull-chk[b-y6oru9rmn2] { width: 34px; }

@media (max-width: 640px) {
    .pull-summary[b-y6oru9rmn2] { font-size: 12px; gap: 4px 6px; }
    #pull_table[b-y6oru9rmn2] { font-size: 11px; }
    #pull_table thead th[b-y6oru9rmn2],
    #pull_table tbody td[b-y6oru9rmn2] { padding: 4px 2px; font-size: 11px; }
    #pull_table th.pull-clock[b-y6oru9rmn2],
    #pull_table td.pull-clock[b-y6oru9rmn2] { width: 42px; font-size: 10px; }
    #pull_table td.pull-res input.text[b-y6oru9rmn2] {
        max-width: 100%;
        min-width: 0;
        height: 22px;
        padding: 1px 2px;
        font-size: 11px;
    }
    #pull_table th.pull-chk[b-y6oru9rmn2],
    #pull_table td.pull-chk[b-y6oru9rmn2] { width: 26px; }
}

@media (max-width: 420px) {
    #pull_table th.pull-clock[b-y6oru9rmn2],
    #pull_table td.pull-clock[b-y6oru9rmn2] { display: none; }
    #pull_table td.pull-village[b-y6oru9rmn2] { font-size: 10px; }
}
/* /Components/Pages/Military/Academy.razor.rz.scp.css */
/* ==========================================================================
   Academy.razor.css — Academy (gid22)
   Research table · Costs · Progress
   ========================================================================== */

/* --- Page heading --- */
h1[b-pk6zsqllv2] {
    font-size: 16px;
    margin: 8px 0 4px;
    color: var(--text-heading);
}

/* --- Build wrapper --- */
#build[b-pk6zsqllv2] {
    position: relative;
    min-height: 200px;
}

/* --- Header table --- */
#build_value[b-pk6zsqllv2] {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
}

#build_value th[b-pk6zsqllv2] {
    padding: 4px 8px;
    background-color: var(--bg-resource);
    font-weight: bold;
    font-size: 13px;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

/* --- No units message --- */
.text-muted[b-pk6zsqllv2] {
    padding: 12px 8px;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Research details table --- */
.build_details[b-pk6zsqllv2] {
    width: 100%;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    margin-bottom: 12px;
}

.build_details thead td[b-pk6zsqllv2] {
    padding: 4px 8px;
    background-color: var(--bg-resource);
    font-weight: bold;
    font-size: 11px;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

.build_details tbody tr[b-pk6zsqllv2] {
    border-bottom: 1px solid var(--border-light);
}

.build_details tbody tr:hover[b-pk6zsqllv2] {
    background-color: #FFFDE0;
}

/* --- Unit description column --- */
.build_details td.desc[b-pk6zsqllv2] {
    padding: 6px 8px;
    width: 25%;
}

.build_details td.desc .tit[b-pk6zsqllv2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.build_details td.desc .tit img[b-pk6zsqllv2] {
    vertical-align: middle;
    flex-shrink: 0;
}

.build_details td.desc .tit a[b-pk6zsqllv2] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: bold;
}

.build_details td.desc .tit a:hover[b-pk6zsqllv2] {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* --- Resource cost column --- */
.build_details td.res[b-pk6zsqllv2] {
    padding: 6px 8px;
    width: 40%;
}

.showCosts[b-pk6zsqllv2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
}

.showCosts .resources[b-pk6zsqllv2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    white-space: nowrap;
}

.showCosts .resources img[b-pk6zsqllv2] {
    vertical-align: middle;
}

/* --- Duration column --- */
.build_details td.dur[b-pk6zsqllv2] {
    padding: 6px 8px;
    width: 18%;
    white-space: nowrap;
}

.build_details td.dur .clock[b-pk6zsqllv2] {
    font-size: 11px;
    color: var(--text-secondary);
}

/* --- Action column --- */
.build_details td.act[b-pk6zsqllv2] {
    padding: 6px 8px;
    width: 17%;
    text-align: center;
}

.build_details td.act .none[b-pk6zsqllv2] {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: italic;
}

.build_details td.act a.research[b-pk6zsqllv2] {
    display: inline-block;
    padding: 3px 12px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.build_details td.act a.research:hover[b-pk6zsqllv2] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* --- Current research (under progress) --- */
.under_progress[b-pk6zsqllv2] {
    width: 100%;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    margin-top: 15px;
}

.under_progress thead td[b-pk6zsqllv2] {
    padding: 4px 8px;
    background-color: #E8F5E9;
    font-weight: bold;
    font-size: 11px;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

.under_progress tbody td[b-pk6zsqllv2] {
    padding: 6px 8px;
    vertical-align: middle;
}

.under_progress tbody td.desc[b-pk6zsqllv2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.under_progress tbody td.desc img[b-pk6zsqllv2] {
    vertical-align: middle;
    flex-shrink: 0;
}

.under_progress tbody td.dur[b-pk6zsqllv2] {
    white-space: nowrap;
}

.under_progress tbody td.fin[b-pk6zsqllv2] {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 11px;
}

/* --- Error state --- */
.text-danger[b-pk6zsqllv2] {
    color: var(--res-negative);
    font-weight: bold;
    padding: 10px;
}
/* /Components/Pages/Military/FarmListPage.razor.rz.scp.css */
/* ==========================================================================
   FarmListPage.razor.css — Redesigned Fast Raiding Interface (RTL & Tabbed)
   ========================================================================== */

.fl-container[b-fv572se9xd] {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px 24px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    color: #333;
    direction: rtl;
    text-align: right;
}

/* --- Header & Tab Navigation --- */
.fl-header[b-fv572se9xd] {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 12px;
}

.fl-main-title[b-fv572se9xd] {
    font-size: 24px;
    font-weight: bold;
    color: #2e7d32; /* Forest Green for main title */
    margin: 0 0 10px 0;
}

.fl-main-title .fl-capacity[b-fv572se9xd] {
    color: #76CB00; /* Lime Green for capacity counter */
}

.fl-tabs[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    user-select: none;
}

.fl-tab[b-fv572se9xd] {
    color: #000000; /* Black for inactive sub-tabs */
    font-weight: normal;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

.fl-tab:hover[b-fv572se9xd] {
    color: #76CB00;
}

.fl-tab.active[b-fv572se9xd] {
    color: #2e7d32; /* Dark Green for active tab */
    font-weight: bold;
    text-decoration: none;
}

.fl-tab-separator[b-fv572se9xd] {
    color: #d1d1d1;
    font-weight: normal;
}

/* --- Info Messages --- */
.fl-info-message[b-fv572se9xd] {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #e8f5e9;
    border: 1px solid #71D000;
    font-size: 13px;
    color: #2e7d32;
}

.fl-info-message.error[b-fv572se9xd] {
    background: #fdecea;
    border-color: #c62828;
    color: #b71c1c;
}

.fl-deficit-details[b-fv572se9xd] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

/* --- Collapsible/Inline forms --- */
.fl-create-form[b-fv572se9xd] {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    padding: 16px;
    margin: 12px 0;
}

.fl-create-form-title[b-fv572se9xd] {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 12px;
    color: #333;
}

.fl-form-row[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fl-form-row label[b-fv572se9xd] {
    min-width: 110px;
    font-weight: bold;
}

.fl-form-buttons[b-fv572se9xd] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* --- Common UI Inputs --- */
.fl-input-green[b-fv572se9xd] {
    border: 1px solid #76CB00; /* Light Green Border */
    border-radius: 3px;
    padding: 2px 3px;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    text-align: center; /* Centered Alignment */
    background-color: #ffffff;
}

.fl-input-green:focus[b-fv572se9xd] {
    box-shadow: 0 0 5px rgba(118, 203, 0, 0.4);
    border-color: #5B9C00;
}

.fl-input-grey[b-fv572se9xd] {
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 2px 3px;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    background-color: #ffffff;
}

.fl-label-bold[b-fv572se9xd] {
    font-weight: bold;
    color: #333;
}

/* --- Standard Design Buttons (Silver Gradient with Green Borders) --- */
.fl-design-btn[b-fv572se9xd] {
    background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
    border: 1px solid #76CB00; /* Light Green Border */
    color: #333333;
    border-radius: 4px; /* Slightly Rounded Corners */
    padding: 5px 18px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    min-width: 80px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fl-design-btn:hover[b-fv572se9xd] {
    background: linear-gradient(to bottom, #FFF 0%, #EEE 45%, #E0E0E0 55%, #F5F5F5 100%);
    border-color: #5B9C00;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.fl-design-btn:active[b-fv572se9xd] {
    background: linear-gradient(to bottom, #D6D6D6 0%, #E0E0E0 100%);
}

.fl-design-btn:disabled[b-fv572se9xd] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.fl-btn-save[b-fv572se9xd] {
    border-color: #76CB00;
}

.fl-btn-cancel[b-fv572se9xd] {
    background: #e0e0e0;
    border: 1px solid #b0b0b0;
    color: #333;
    border-radius: 0;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
}

.fl-btn-cancel:hover[b-fv572se9xd] {
    background: #d0d0d0;
}

/* Icons */
.fl-btn-icon[b-fv572se9xd] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    line-height: 1;
    border-radius: 3px;
}

.fl-btn-icon:hover[b-fv572se9xd] {
    background: #eeeeee;
}

.fl-btn-icon-danger[b-fv572se9xd] {
    color: #d9534f;
}

.fl-btn-icon-danger:hover[b-fv572se9xd] {
    background: #fdecea;
}

/* Delete cross button in table */
.fl-btn-delete-x[b-fv572se9xd] {
    background: none;
    border: none;
    color: #d9534f;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
}

.fl-btn-delete-x:hover[b-fv572se9xd] {
    background-color: #fdecea;
}

/* ==========================================================================
   TAB 1: ATTACK VIEW SPECIFIC STYLES
   ========================================================================== */

.fl-list-bar[b-fv572se9xd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    flex-wrap: wrap;
    gap: 12px;
}

.fl-list-selector-group[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fl-stats-line[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fl-resources-display[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 13px;
}

.fl-res-item[b-fv572se9xd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fl-troops-indicator[b-fv572se9xd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    font-size: 13px;
}

.fl-troops-indicator.deficit[b-fv572se9xd] {
    color: #d9534f; /* Red Alert */
}

.fl-troops-indicator.sufficient[b-fv572se9xd] {
    color: #71b831; /* Green Success */
}

.fl-troops-indicator img.unit[b-fv572se9xd] {
    width: 16px;
    height: 16px;
}

.fl-action-buttons[b-fv572se9xd] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* --- Tables (Clean White with Silver Gradient Header) --- */
.fl-table[b-fv572se9xd] {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    overflow: hidden;
}

.fl-table th[b-fv572se9xd] {
    background: linear-gradient(to bottom, #FAFAFA 0%, #E6E6E6 45%, #D6D6D6 55%, #F0F0F0 100%);
    padding: 6px 7px;
    text-align: center;
    font-weight: bold;
    color: #333333; /* Bold Dark Text */
    font-size: 12px;
    border-bottom: 1px solid #c0c0c0;
}

.fl-table td[b-fv572se9xd] {
    background-color: #FFFFFF; /* Solid White Background */
    padding: 3px 7px;
    text-align: center;
    border-bottom: 1px solid #e8e8e8; /* Thin soft gray borders */
}

.fl-table tbody tr:last-child td[b-fv572se9xd] {
    border-bottom: none;
}

.fl-table tbody tr:hover td[b-fv572se9xd] {
    background-color: #F8F8F8;
}

.fl-table tbody tr.selected td[b-fv572se9xd] {
    background-color: #F0FFF0;
}

.col-check[b-fv572se9xd] {
    width: 35px;
}

.col-duration[b-fv572se9xd] {
    width: 80px;
}

.col-troops[b-fv572se9xd] {
    width: auto;
}

.col-actions[b-fv572se9xd] {
    width: 45px;
}

/* Troop Badges in Tables */
.fl-troops-cell[b-fv572se9xd] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fl-unit-badge[b-fv572se9xd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
    color: #1b5e20;
    font-size: 12px;
}

.fl-unit-badge img[b-fv572se9xd] {
    vertical-align: middle;
}

.fl-village-link[b-fv572se9xd] {
    color: #2e7d32; /* Dark Green Text */
    font-weight: bold;
    text-decoration: none;
}

.fl-village-link:hover[b-fv572se9xd] {
    text-decoration: underline;
}

.fl-empty[b-fv572se9xd] {
    text-align: center;
    padding: 30px;
    color: #777;
    font-style: italic;
    border: 1px dashed #cccccc;
    margin: 10px 0;
}

.fl-empty-state[b-fv572se9xd] {
    text-align: center;
    padding: 40px;
    color: #666;
    border: 1px dashed #cccccc;
}

/* ==========================================================================
   TAB 2: ADD VILLAGE SPECIFIC STYLES
   ========================================================================== */

.fl-instruction-label[b-fv572se9xd] {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20px;
}

.fl-add-village-row[b-fv572se9xd] {
    display: flex;
    flex-direction: row; /* RTL: القوات على اليمين، الإحداثيات على اليسار */
    gap: 40px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.fl-add-village-col-left[b-fv572se9xd] {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fl-add-village-col-right[b-fv572se9xd] {
    flex-shrink: 0;
    width: 240px;
}

.fl-list-selector-simple[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Coordinates inputs bracket styling */
.fl-coords-add-group[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    direction: ltr; /* keep brackets as (X, Y) */
    justify-content: flex-end;
}

.fl-coord-input[b-fv572se9xd] {
    width: 70px;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    text-align: center; /* Centered Alignment */
    border: 1px solid #76CB00; /* Light Green Border */
    border-radius: 3px;
}

.fl-parenthesis[b-fv572se9xd],
.fl-comma[b-fv572se9xd] {
    font-size: 24px;
    color: #333;
}

.fl-target-info-design[b-fv572se9xd] {
    padding: 8px 12px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    font-size: 12px;
}

.fl-protection-warning[b-fv572se9xd] {
    display: block;
    color: #f0ad4e;
    font-weight: bold;
    margin-top: 4px;
}

.fl-invalid-target[b-fv572se9xd] {
    color: #d9534f;
    font-weight: bold;
}

/* Troops stack */
.fl-add-troops-stack[b-fv572se9xd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: transparent;
    padding: 0;
    border: none;
}

.fl-troop-stack-row[b-fv572se9xd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
    border-bottom: 1px solid #f0f0f0;
}

.fl-troop-available[b-fv572se9xd] {
    font-weight: bold;
    min-width: 20px;
    text-align: right;
    font-size: 13px;
    color: #333;
}

.fl-troop-input-large[b-fv572se9xd] {
    width: 120px;
    height: 28px;
    font-size: 13px;
    font-weight: bold;
    text-align: center; /* Centered Alignment */
    border: 1px solid #76CB00; /* Light Green Border */
    border-radius: 3px;
}

.fl-troop-stack-row img[b-fv572se9xd] {
    width: 20px;
    height: 20px;
}

.fl-form-submit-row[b-fv572se9xd] {
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 12px;
}

.fl-search-form-submit[b-fv572se9xd] {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* ==========================================================================
   TAB 3: SEARCH VILLAGE SPECIFIC STYLES
   ========================================================================== */

.fl-search-criteria-container[b-fv572se9xd] {
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fl-search-criteria-row[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fl-criteria-label[b-fv572se9xd] {
    min-width: 120px;
    font-weight: bold;
    color: #444;
}

.fl-criteria-text-inline[b-fv572se9xd] {
    font-weight: bold;
    color: #444;
}

.fl-search-checkboxes-stack[b-fv572se9xd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-inline-start: 120px;
}

.fl-search-checkbox-item[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: bold;
}

/* Search results top panel ABOVE the table */
.fl-search-results-header-actions[b-fv572se9xd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.fl-search-results-top-panel[b-fv572se9xd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 12px;
    gap: 20px;
}

.fl-search-results-top-left[b-fv572se9xd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.fl-search-results-top-right[b-fv572se9xd] {
    width: 250px;
    flex-shrink: 0;
}

/* Gold icon (classic detailed style from B1) */
.fl-gold-icon[b-fv572se9xd] {
    background-image: url("img/gpack/a/gold.gif");
    background-repeat: no-repeat;
    background-size: contain;
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
}

/* Checkbox style override */
input[type="checkbox"][b-fv572se9xd] {
    accent-color: #76CB00;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* --- Responsiveness --- */
@media (max-width: 768px) {
    .fl-container[b-fv572se9xd] {
        padding: 12px;
    }

    .fl-list-bar[b-fv572se9xd] {
        flex-direction: column;
        align-items: stretch;
    }

    .fl-stats-line[b-fv572se9xd] {
        justify-content: space-between;
    }

    .fl-add-village-row[b-fv572se9xd] {
        flex-direction: column;
        gap: 20px;
    }

    .fl-add-village-col-right[b-fv572se9xd] {
        width: 100%;
    }

    .fl-search-results-top-panel[b-fv572se9xd] {
        flex-direction: column;
        align-items: stretch;
    }

    .fl-search-results-top-right[b-fv572se9xd] {
        width: 100%;
    }

    .fl-search-checkboxes-stack[b-fv572se9xd] {
        padding-inline-start: 0;
    }
}

/* Search loading spinner animation */
@keyframes fl-search-spin-b-fv572se9xd {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fl-search-spin[b-fv572se9xd] {
    animation: fl-search-spin-b-fv572se9xd 1s linear infinite;
}

/* ─── Attacked-before flag indicator ─── */
.fl-attacked-flag[b-fv572se9xd] {
    display: inline-block;
    font-size: 14px;
    margin-inline-end: 4px;
    cursor: help;
    vertical-align: middle;
}

/* ─── Inline entry editing ─── */
.fl-inline-edit-troops[b-fv572se9xd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.fl-inline-edit-row[b-fv572se9xd] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ─── Action buttons in table cells ─── */
.fl-action-btns[b-fv572se9xd] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.fl-btn-edit-entry[b-fv572se9xd] {
    background: none;
    border: none;
    color: #1976d2;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

.fl-btn-edit-entry:hover[b-fv572se9xd] {
    color: #1565c0;
}

.fl-btn-save-edit[b-fv572se9xd] {
    background: none;
    border: none;
    color: #2e7d32;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    line-height: 1;
}

.fl-btn-cancel-edit[b-fv572se9xd] {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}

/* ─── Bulk edit panel ─── */
.fl-bulk-edit-panel[b-fv572se9xd] {
    border: 1px solid #76CB00;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #f9fff5;
}

.fl-bulk-edit-title[b-fv572se9xd] {
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 8px;
    font-size: 14px;
}

.fl-bulk-edit-troops[b-fv572se9xd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.fl-bulk-edit-actions[b-fv572se9xd] {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.fl-btn-edit[b-fv572se9xd] {
    background-color: #e3f2fd !important;
    color: #1565c0 !important;
}

.fl-btn-cancel[b-fv572se9xd] {
    background-color: #f5f5f5 !important;
    color: #666 !important;
}
/* /Components/Pages/Military/RallyPoint.razor.rz.scp.css */
/* ==========================================================================
   RallyPoint.razor.css — Rally Point (gid16)
   Overview · Troop Details · Send Form · Coords
   ========================================================================== */

/* --- Build wrapper --- */
#build[b-t2bzsr4ihm] {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    max-width: 100%;
}

/* --- Content wrapper: creates BFC that constrains all child tables/forms --- */
.rally-content-wrapper[b-t2bzsr4ihm] {
    min-width: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

#build h1[b-t2bzsr4ihm] {
    margin: 8px 0 4px;
    font-size: 16px;
}

#build h1 .level[b-t2bzsr4ihm] {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
}

/* --- Building Logo (top-left) --- */
#build a.build_logo img[b-t2bzsr4ihm] {
    position: absolute;
    left: 13px;
    top: 35px;
    margin-inline-start: 5px;
}

/* --- Description --- */
#build p.build_desc[b-t2bzsr4ihm] {
    padding-inline-start: 70px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* --- Section Headings --- */
h4[b-t2bzsr4ihm] {
    margin: 15px 0 8px;
    font-size: 13px;
    color: var(--text-heading);
}

/* --- Text Menu (Tab Navigation) --- */
#textmenu[b-t2bzsr4ihm] {
    padding: 6px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    direction: rtl;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
}

#textmenu a[b-t2bzsr4ihm] {
    color: #5B9C00;
    text-decoration: none;
    padding: 4px 8px;
    font-weight: 600;
    white-space: nowrap;
}

#textmenu a:hover[b-t2bzsr4ihm] {
    text-decoration: underline;
}

#textmenu a.selected[b-t2bzsr4ihm] {
    color: var(--text-heading);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

/* --- Troop Details Table --- */
.troop_details[b-t2bzsr4ihm] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #C0C0C0;
    margin: 8px 0;
}

.troop_details th[b-t2bzsr4ihm],
.troop_details td[b-t2bzsr4ihm] {
    padding: 2px 7px;
}

.troop_details thead td[b-t2bzsr4ihm] {
    background-color: #F3F3F3;
    padding: 4px 7px;
    font-weight: 700;
    color: var(--text-heading);
    font-size: 12px;
    text-align: center;
}

.troop_details thead td a[b-t2bzsr4ihm] {
    color: var(--text-link);
    text-decoration: none;
}

.troop_details thead td a:hover[b-t2bzsr4ihm] {
    text-decoration: underline;
}

.troop_details thead td.role[b-t2bzsr4ihm] {
    width: 20%;
}

.troop_details tbody.units td[b-t2bzsr4ihm] {
    background-color: #FFFFFF;
    padding: 2px;
    text-align: center;
    width: 7.2%;
}

.troop_details tbody.units td.none[b-t2bzsr4ihm] {
    color: #bbb;
}

.troop_details tbody.units th[b-t2bzsr4ihm] {
    background-color: #FFFFFF;
    width: 20%;
    text-align: right;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 11px;
    padding-right: 8px;
}

.troop_details tbody.units .count-full[b-t2bzsr4ihm] {
    display: none;
}

.troop_details tbody.units .count-short[b-t2bzsr4ihm] {
    display: inline;
}

.troop_details tbody.infos th[b-t2bzsr4ihm],
.troop_details tbody.infos td[b-t2bzsr4ihm] {
    background-color: #F3F3F3;
    border-top: 1px solid var(--border-light);
}

.troop_details tbody.infos td .in[b-t2bzsr4ihm] {
    display: inline;
}

.troop_details tbody.infos td .at[b-t2bzsr4ihm] {
    display: inline;
    margin-inline-start: 8px;
    color: var(--text-secondary);
}

.train-attack-panel[b-t2bzsr4ihm] {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid var(--border-light);
    background: #f8fbef;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
}

.train-attack-actions[b-t2bzsr4ihm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.train-note[b-t2bzsr4ihm] {
    color: var(--text-secondary);
}

.train-message[b-t2bzsr4ihm] {
    margin-top: 6px;
    color: #7a4c00;
    font-weight: 600;
}

.train-draft-table[b-t2bzsr4ihm] {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
}

.train-draft-table th[b-t2bzsr4ihm],
.train-draft-table td[b-t2bzsr4ihm] {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-light);
    text-align: center;
}

.train-draft-table th[b-t2bzsr4ihm] {
    background-color: var(--bg-table-head);
    color: var(--text-heading);
}

.train-summary[b-t2bzsr4ihm] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 4px 8px;
}

.train-submit[b-t2bzsr4ihm] {
    margin-top: 8px;
    text-align: center;
}

/* --- Send Form D1 --- */
.send-form-d1[b-t2bzsr4ihm] {
    margin: 15px 0;
    overflow: hidden;
}

/* --- New Troop Movement Tables Architecture --- */
.movements-header[b-t2bzsr4ihm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 15px;
}

.movements-header h4[b-t2bzsr4ihm] {
    margin: 0;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #000 !important;
}

.movements-header .premium-btn[b-t2bzsr4ihm] {
    font-size: 11px;
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: bold;
}

.movements-header .cancel-all-btn[b-t2bzsr4ihm] {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 3px;
}

.troop-movement-table[b-t2bzsr4ihm] {
    border: 1px solid #C0C0C0;
    margin-bottom: 10px;
    background-color: #FFF;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.troop-movement-table .movement-header-row[b-t2bzsr4ihm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    font-weight: bold;
    color: #000;
    border-bottom: 1px solid #C0C0C0;
    width: 100%;
    box-sizing: border-box;
}

.troop-movement-table.outgoing .movement-header-row[b-t2bzsr4ihm] {
    background-color: #FCEFA1;
}

.troop-movement-table.incoming .movement-header-row[b-t2bzsr4ihm] {
    background-color: #E8EFD7;
}

.troop-movement-table.hostile .movement-header-row[b-t2bzsr4ihm] {
    background-color: #FFCCCC;
    /* light red for incoming attacks */
}

.movement-header-row .attack-title[b-t2bzsr4ihm] {
    display: flex;
    align-items: center;
}

.movement-header-row .attack-title a[b-t2bzsr4ihm] {
    color: #5CAF00;
    text-decoration: none;
}

.movement-header-row .attack-title a:hover[b-t2bzsr4ihm] {
    text-decoration: underline;
}

.movement-header-row .attack-title .coords-tag[b-t2bzsr4ihm] {
    color: #999;
    font-size: 11px;
    margin-right: 4px;
    direction: ltr;
    display: inline-block;
}

.movement-header-row .movement-time[b-t2bzsr4ihm] {
    direction: ltr;
    /* Keeps time format 10:28:06 in LTR */
    text-align: left;
    font-weight: bold;
}

.units-grid[b-t2bzsr4ihm] {
    display: flex;
    background-color: #FFF;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.unit-col[b-t2bzsr4ihm] {
    flex: 1;
    text-align: center;
    border-left: 1px solid #E5E5E5;
    padding: 2px 0;
}

.unit-col:last-child[b-t2bzsr4ihm] {
    border-left: none;
}

.unit-col .icon-wrap[b-t2bzsr4ihm] {
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

.unit-col .count[b-t2bzsr4ihm] {
    padding: 2px 0;
}

.unit-col .count.zero[b-t2bzsr4ihm] {
    color: #999999;
}

.unit-col .count.active[b-t2bzsr4ihm] {
    color: #000000;
    font-weight: bold;
}


.send-form-d1-left[b-t2bzsr4ihm] {
    float: left;
    width: 60%;
}

.send-form-d1-right[b-t2bzsr4ihm] {
    float: right;
    width: 38%;
}

.send-form-d1-right h3[b-t2bzsr4ihm] {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #71D000;
    text-align: right;
    font-weight: normal;
}

#troops[b-t2bzsr4ihm] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-content);
}

#troops thead th[b-t2bzsr4ihm] {
    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 100%);
    padding: 4px;
    font-size: 14px;
    border-bottom: 2px solid var(--border-medium);
    text-align: center;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    font-weight: bold;
}

#troops th.c3[b-t2bzsr4ihm] {
    color: #8F8F00;
    width: 15%;
}

#troops th.c2[b-t2bzsr4ihm] {
    color: #71D000;
    width: 25%;
}

#troops th.c1[b-t2bzsr4ihm] {
    color: #000;
}

#troops tbody td[b-t2bzsr4ihm] {
    padding: 3px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    font-weight: bold;
    font-size: 14px;
}

#troops tbody tr:nth-child(even)[b-t2bzsr4ihm] {
    background-color: #F9F9F9;
}

#troops td.ico[b-t2bzsr4ihm] {
    width: 25px;
}

#troops td.val[b-t2bzsr4ihm] {
    width: 80px;
}

#troops td.val input.text[b-t2bzsr4ihm] {
    width: 90%;
    text-align: center;
    padding: 2px;
    border: 1px solid var(--border-medium);
    background-color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

#troops td.val input.text:disabled[b-t2bzsr4ihm] {
    background-color: #F5F5F5;
}

#troops td.max[b-t2bzsr4ihm] {
    font-weight: bold;
    border-inline-start: 1px solid var(--border-light);
    font-size: 14px;
}

#troops td.max a[b-t2bzsr4ihm] {
    color: #333;
    text-decoration: none;
}

#troops td.max a:hover[b-t2bzsr4ihm] {
    text-decoration: underline;
}

#troops td.other[b-t2bzsr4ihm] {
    font-weight: bold;
    color: #666;
    border-inline-start: 1px solid var(--border-light);
    font-size: 14px;
}

#mission[b-t2bzsr4ihm] {
    width: 100%;
    border: 1px solid var(--border-medium);
    margin-bottom: 10px;
    border-collapse: collapse;
    background-color: transparent;
}

.coords-box[b-t2bzsr4ihm] {
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent;
}

.coords-box input.text.name[b-t2bzsr4ihm] {
    width: 100%;
    padding: 4px;
    border: 1px solid #71D000;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    box-sizing: border-box;
    margin-bottom: 6px;
    border-radius: 2px;
}

.coords-box .coord-row[b-t2bzsr4ihm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coords-box input.text.coord[b-t2bzsr4ihm] {
    width: 46%;
    padding: 4px;
    border: 1px solid #71D000;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}

.coords-box .comma[b-t2bzsr4ihm] {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1;
    margin-top: -6px;
    padding: 0 4px;
}

.coords-box .target-info[b-t2bzsr4ihm] {
    margin-top: 6px;
    padding: 3px 6px;
    font-size: 11px;
    color: #555;
    background-color: #f5f5f0;
    border: 1px solid #ddd;
    border-radius: 2px;
    text-align: center;
}

.protection-warning[b-t2bzsr4ihm] {
    display: block;
    margin-top: 3px;
    color: #c00;
    font-weight: bold;
    font-size: 11px;
}

.protection-warning.self[b-t2bzsr4ihm] {
    margin-top: 6px;
    padding: 4px 6px;
    background-color: #fff3cd;
    border: 1px solid #e0c36e;
    border-radius: 2px;
    text-align: center;
}

#mission[b-t2bzsr4ihm] {
    width: 100%;
    border: 1px solid var(--border-medium);
    margin-bottom: 10px;
    border-collapse: collapse;
    background-color: transparent;
}

/* --- Hero row in send form --- */
[b-t2bzsr4ihm] tr.hero-row {
    border-top: 2px solid #c89b2a;
    background: #f7f0d4;
}

[b-t2bzsr4ihm] tr.hero-row td.ico .hero_icon {
    width: 16px;
    height: 16px;
    background-image: url('/img/gpack/img/a/hero_icon.gif');
    background-size: 16px 16px;
}

[b-t2bzsr4ihm] tr.hero-row td.val input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

[b-t2bzsr4ihm] .hero-status {
    font-size: 11px;
    font-weight: bold;
}

[b-t2bzsr4ihm] .hero-status.available {
    color: #007137;
}

[b-t2bzsr4ihm] .hero-status.dead,
[b-t2bzsr4ihm] .hero-status.away {
    color: #b00;
}

#mission td[b-t2bzsr4ihm] {
    padding: 6px;
    border-bottom: 1px solid var(--border-light);
    background-color: transparent;
}

#mission tr.selected td[b-t2bzsr4ihm] {
    background-color: #FFF8C6;
    font-weight: bold;
}

#mission td.sel[b-t2bzsr4ihm] {
    width: 30px;
    text-align: center;
}

#mission td.sel input.radio[b-t2bzsr4ihm] {
    margin: 0;
    vertical-align: middle;
}

#mission td.ms_text[b-t2bzsr4ihm] {
    text-align: right;
    font-size: 15px;
    font-weight: bold;
}

.clear[b-t2bzsr4ihm] {
    clear: both;
}

.submit_wrap[b-t2bzsr4ihm] {
    text-align: center;
    margin-top: 15px;
    clear: both;
}

    .submit_wrap > .btn_ok[b-t2bzsr4ihm] {
        margin-inline: 6px;
    }

    .submit_wrap > span[b-t2bzsr4ihm] {
        margin-inline: 6px;
    }

.btn_ok[b-t2bzsr4ihm] {
    display: inline-block;
    padding: 4px 20px;
    border-radius: 4px;
    border: 1px solid #71D000;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    background: #e6e6e6;
    background: linear-gradient(to bottom, #fdfdfd 0%, #dcdcdc 100%);
    color: #333;
}

.btn_ok:hover[b-t2bzsr4ihm] {
    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
}

.btn_ok:disabled[b-t2bzsr4ihm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Info Message --- */
.info-message[b-t2bzsr4ihm] {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: #FFF3C4;
    border: 1px solid var(--border-light);
    color: var(--text-heading);
    font-size: 11px;
}

/* --- Loading --- */
.loading-spinner[b-t2bzsr4ihm] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* --- Dismiss Section --- */
.dismiss-inputs-row td[b-t2bzsr4ihm] {
    padding: 2px !important;
}

.dismiss-input[b-t2bzsr4ihm] {
    width: 90%;
    max-width: 50px;
    text-align: center;
    padding: 2px;
    border: 1px solid var(--border-medium);
    background-color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
}

.dismiss-input:disabled[b-t2bzsr4ihm] {
    background-color: #F5F5F5;
}

.dismiss-max[b-t2bzsr4ihm] {
    color: #333;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

.dismiss-max:hover[b-t2bzsr4ihm] {
    text-decoration: underline;
    color: #5B9C00;
}

.troop_details tbody.units th[b-t2bzsr4ihm] {
    white-space: nowrap;
}

/* --- Scrollable wrapper for wide troop tables --- */
.table-scroll-wrap[b-t2bzsr4ihm] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.table-scroll-wrap .troop_details[b-t2bzsr4ihm] {
    margin: 0;
    width: max(100%, 580px);
}

/* --- Spy / Catapult options --- */
.spy-options[b-t2bzsr4ihm] {
    width: 100%;
    border: 1px solid var(--border-medium);
    margin-bottom: 10px;
    border-collapse: collapse;
}

.spy-options td.sel select.text[b-t2bzsr4ihm] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 12px;
}

/* ==========================================================================
   Responsive — Tablet (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {
    .send-form-d1-left[b-t2bzsr4ihm] {
        float: none;
        width: 100%;
    }

    .send-form-d1-right[b-t2bzsr4ihm] {
        float: none;
        width: 100%;
        margin-top: 15px;
    }

    #catapult_target td.sel select.text[b-t2bzsr4ihm],
    .spy-options td.sel select.text[b-t2bzsr4ihm] {
        width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Responsive — Phone (≤ 600px)
   ========================================================================== */
@media (max-width: 600px) {
    #textmenu[b-t2bzsr4ihm] {
        gap: 2px 0;
    }

    #textmenu a[b-t2bzsr4ihm] {
        font-size: 11px;
        padding: 3px 5px;
    }

    .troop_details th[b-t2bzsr4ihm],
    .troop_details td[b-t2bzsr4ihm] {
        padding: 2px 3px;
        font-size: 11px;
    }

    .troop_details tbody.units td[b-t2bzsr4ihm] {
        padding: 1px;
    }

    .troop_details thead td.role[b-t2bzsr4ihm] {
        width: auto;
    }

    .troop_details tbody.units th[b-t2bzsr4ihm] {
        width: auto;
    }

    .dismiss-input[b-t2bzsr4ihm] {
        width: 100%;
        max-width: 40px;
        font-size: 11px;
        padding: 1px;
    }

    .units-grid[b-t2bzsr4ihm] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .unit-col[b-t2bzsr4ihm] {
        min-width: 40px;
        flex: 0 0 auto;
    }

    .movement-header-row[b-t2bzsr4ihm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
        box-sizing: border-box;
    }

    #troops td.val input.text[b-t2bzsr4ihm] {
        width: 100%;
        font-size: 12px;
    }

    #troops td.val[b-t2bzsr4ihm] {
        width: 60px;
    }

    .coords-box input.text.name[b-t2bzsr4ihm] {
        font-size: 13px;
    }

    .coords-box input.text.coord[b-t2bzsr4ihm] {
        font-size: 13px;
    }

    #mission td.ms_text[b-t2bzsr4ihm] {
        font-size: 13px;
    }

    .btn_ok[b-t2bzsr4ihm] {
        font-size: 13px;
        padding: 4px 14px;
    }

    .count-short[b-t2bzsr4ihm] {
        display: inline !important;
    }
    .count-full[b-t2bzsr4ihm] {
        display: none !important;
    }
}

/* ==========================================================================
   Responsive — Small Phone (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    #textmenu a[b-t2bzsr4ihm] {
        font-size: 10px;
        padding: 2px 4px;
    }

    .troop_details th[b-t2bzsr4ihm],
    .troop_details td[b-t2bzsr4ihm] {
        padding: 1px 2px;
        font-size: 10px;
    }

    .dismiss-input[b-t2bzsr4ihm] {
        max-width: 34px;
        font-size: 10px;
    }

    .unit-col[b-t2bzsr4ihm] {
        min-width: 36px;
    }

    .unit-col .icon-wrap[b-t2bzsr4ihm] {
        height: 20px;
    }

    .unit-col .count[b-t2bzsr4ihm] {
        font-size: 10px;
    }

    .movements-header[b-t2bzsr4ihm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #build h1[b-t2bzsr4ihm] {
        font-size: 14px;
    }

    #build p.build_desc[b-t2bzsr4ihm] {
        padding-inline-start: 0;
        font-size: 11px;
    }

    #build a.build_logo img[b-t2bzsr4ihm] {
        display: none;
    }
}

/* --- Troop count toggles for mobile responsiveness --- */
.count-short[b-t2bzsr4ihm] {
    display: none;
}
.count-full[b-t2bzsr4ihm] {
    display: inline;
}

/* --- Ram target note (shown when rams are selected without catapults) --- */
.ram-target-note[b-t2bzsr4ihm] {
    padding: 6px 10px;
    margin: 6px 0;
    background: var(--bg-info, #e8f4fd);
    border: 1px solid var(--border-info, #b3d7f0);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
/* /Components/Pages/Military/ReportDetail.razor.rz.scp.css */
.report-container[b-sk7j952777] {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    padding: 0 4px;
    box-sizing: border-box;
}

.title[b-sk7j952777] {
    color: #71d000;
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 15px;
}

.nav-links[b-sk7j952777] {
    margin-bottom: 16px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-nav-arrows[b-sk7j952777] {
    display: flex;
    gap: 4px;
}

.report-nav-actions[b-sk7j952777] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-save-detail[b-sk7j952777] {
    padding: 4px 12px;
    border: 1px solid #c0b898;
    background: linear-gradient(to bottom, #f8f4e8 0%, #e8dfc8 100%);
    color: #5a4e30;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    font-family: Tahoma, Arial, sans-serif;
    white-space: nowrap;
}

.btn-save-detail:hover[b-sk7j952777] {
    background: linear-gradient(to bottom, #fffbe6 0%, #f0e6c0 100%);
    border-color: #a09060;
}

.btn-save-active[b-sk7j952777] {
    color: #c08020;
    border-color: #d0a050;
    background: linear-gradient(to bottom, #fff5e0 0%, #f0d8a0 100%);
}

.btn-save-active:hover[b-sk7j952777] {
    color: #a06010;
}

.report-nav-btn[b-sk7j952777] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #c0b898;
    background: linear-gradient(to bottom, #f8f4e8 0%, #e8dfc8 100%);
    color: #5a4e30;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
}

.report-nav-btn:hover:not(.disabled)[b-sk7j952777] {
    background: linear-gradient(to bottom, #fffbe6 0%, #f0e6c0 100%);
    border-color: #a09060;
    text-decoration: none;
}

.report-nav-btn.disabled[b-sk7j952777] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.nav-links a[b-sk7j952777] {
    color: #71d000;
    text-decoration: none;
    font-weight: bold;
}

.nav-links a.active[b-sk7j952777] {
    color: #000;
}

.nav-links .sep[b-sk7j952777] {
    color: #000;
    margin: 0 3px;
}

.pagination[b-sk7j952777] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: bold;
}

.pagination a[b-sk7j952777] {
    color: #71d000;
    text-decoration: none;
}

.report-table[b-sk7j952777] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    margin-bottom: 20px;
    background: #fff;
}

.report-table th[b-sk7j952777],
.report-table td[b-sk7j952777] {
    border: 1px solid #c0c0c0;
    text-align: center;
    padding: 3px;
    height: 22px;
}

.thead-header th[b-sk7j952777] {
    background: linear-gradient(to bottom, #f4f4f4, #d5d5d5);
    padding: 4px 5px;
    font-weight: bold;
    text-align: right;
}

.thead-header.center th[b-sk7j952777] {
    text-align: right;
    color: #666;
    font-size: 13px;
}

.role-label[b-sk7j952777] {
    color: #000;
    font-weight: bold;
    margin-left: 4px;
}

.row-label[b-sk7j952777] {
    text-align: right !important;
    font-weight: bold;
    font-size: 11px;
    color: #555;
    width: 50px;
    padding: 3px 5px !important;
    background-color: #f5f5f5 !important;
}

.loss-label[b-sk7j952777] {
    color: #c70000;
}

.header-content[b-sk7j952777] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time[b-sk7j952777] {
    direction: ltr;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.player-name[b-sk7j952777],
.village-name[b-sk7j952777] {
    color: #71d000;
}

/* Clickable attack links on player/village names */
[b-sk7j952777] .report-attack-link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

[b-sk7j952777] .report-attack-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

[b-sk7j952777] .report-attack-link:hover .player-name,
[b-sk7j952777] .report-attack-link:hover .village-name {
    text-decoration: underline;
}

.coords[b-sk7j952777] {
    color: #888;
    font-size: 10px;
    margin-right: 2px;
    font-weight: normal;
}

.sprite[b-sk7j952777] {
    width: 16px;
    height: 16px;
    border: 0;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}

.unit[b-sk7j952777] {
    background-repeat: no-repeat;
}

.u1[b-sk7j952777], .u2[b-sk7j952777], .u3[b-sk7j952777], .u4[b-sk7j952777], .u5[b-sk7j952777], .u6[b-sk7j952777], .u7[b-sk7j952777], .u8[b-sk7j952777], .u9[b-sk7j952777], .u10[b-sk7j952777] { background-image: url("/img/gpack/img/u/v1_romans2.gif"); }
.u11[b-sk7j952777], .u12[b-sk7j952777], .u13[b-sk7j952777], .u14[b-sk7j952777], .u15[b-sk7j952777], .u16[b-sk7j952777], .u17[b-sk7j952777], .u18[b-sk7j952777], .u19[b-sk7j952777], .u20[b-sk7j952777] { background-image: url("/img/gpack/img/u/v2_teutons2.gif"); }
.u21[b-sk7j952777], .u22[b-sk7j952777], .u23[b-sk7j952777], .u24[b-sk7j952777], .u25[b-sk7j952777], .u26[b-sk7j952777], .u27[b-sk7j952777], .u28[b-sk7j952777], .u29[b-sk7j952777], .u30[b-sk7j952777] { background-image: url("/img/gpack/img/u/v3_gauls2.gif"); }
.u31[b-sk7j952777], .u32[b-sk7j952777], .u33[b-sk7j952777], .u34[b-sk7j952777], .u35[b-sk7j952777], .u36[b-sk7j952777], .u37[b-sk7j952777], .u38[b-sk7j952777], .u39[b-sk7j952777], .u40[b-sk7j952777] { background-image: url("/img/gpack/img/u/v4_nature2.gif"); }
.u41[b-sk7j952777], .u42[b-sk7j952777], .u43[b-sk7j952777], .u44[b-sk7j952777], .u45[b-sk7j952777], .u46[b-sk7j952777], .u47[b-sk7j952777], .u48[b-sk7j952777], .u49[b-sk7j952777], .u50[b-sk7j952777] { background-image: url("/img/gpack/img/u/v5_natars2.gif"); }
.uhero[b-sk7j952777] { background-image: url("/img/gpack/img/u/specials.gif"); background-position: -133px 0; }

.u1[b-sk7j952777], .u11[b-sk7j952777], .u21[b-sk7j952777], .u31[b-sk7j952777], .u41[b-sk7j952777] { background-position: 0 0; }
.u2[b-sk7j952777], .u12[b-sk7j952777], .u22[b-sk7j952777], .u32[b-sk7j952777], .u42[b-sk7j952777] { background-position: -19px 0; }
.u3[b-sk7j952777], .u13[b-sk7j952777], .u23[b-sk7j952777], .u33[b-sk7j952777], .u43[b-sk7j952777] { background-position: -38px 0; }
.u4[b-sk7j952777], .u14[b-sk7j952777], .u24[b-sk7j952777], .u34[b-sk7j952777], .u44[b-sk7j952777] { background-position: -57px 0; }
.u5[b-sk7j952777], .u15[b-sk7j952777], .u25[b-sk7j952777], .u35[b-sk7j952777], .u45[b-sk7j952777] { background-position: -76px 0; }
.u6[b-sk7j952777], .u16[b-sk7j952777], .u26[b-sk7j952777], .u36[b-sk7j952777], .u46[b-sk7j952777] { background-position: -95px 0; }
.u7[b-sk7j952777], .u17[b-sk7j952777], .u27[b-sk7j952777], .u37[b-sk7j952777], .u47[b-sk7j952777] { background-position: -114px 0; }
.u8[b-sk7j952777], .u18[b-sk7j952777], .u28[b-sk7j952777], .u38[b-sk7j952777], .u48[b-sk7j952777] { background-position: -133px 0; }
.u9[b-sk7j952777], .u19[b-sk7j952777], .u29[b-sk7j952777], .u39[b-sk7j952777], .u49[b-sk7j952777] { background-position: -152px 0; }
.u10[b-sk7j952777], .u20[b-sk7j952777], .u30[b-sk7j952777], .u40[b-sk7j952777], .u50[b-sk7j952777] { background-position: -171px 0; }

.status-row td[b-sk7j952777] {
    text-align: right;
    padding: 5px;
    background-color: #fafafa;
}

.status-content[b-sk7j952777] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.i-skull[b-sk7j952777] {
    background-image: url("/img/gpack/img/a/del.gif");
    width: 12px;
    height: 12px;
}

.bounty-row td[b-sk7j952777] {
    padding: 4px 6px;
    background-color: #fafafa;
}

.bounty-container[b-sk7j952777] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bounty-label[b-sk7j952777] {
    font-weight: bold;
    font-size: 11px;
    color: #555;
}

.bounty-resources[b-sk7j952777] {
    display: flex;
    align-items: center;
}

.separator[b-sk7j952777] {
    margin: 0 4px;
    color: #999;
}

/* --- Carry Capacity --- */
.carry-capacity-section[b-sk7j952777] {
    margin-top: 6px;
    padding: 4px 0;
    border-top: 1px dashed #d0c8a8;
}

.carry-capacity-header[b-sk7j952777] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 3px;
}

.carry-capacity-label[b-sk7j952777] {
    font-weight: bold;
    color: #555;
}

.carry-capacity-values[b-sk7j952777] {
    color: #333;
    font-family: Consolas, monospace;
}

.carry-capacity-percent[b-sk7j952777] {
    font-weight: bold;
    font-size: 13px;
}

.carry-capacity-bar-container[b-sk7j952777] {
    width: 100%;
    height: 10px;
    background: #e8e2c5;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #c0b898;
}

.carry-capacity-bar-fill[b-sk7j952777] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.carry-capacity-detail[b-sk7j952777] {
    margin-top: 3px;
    font-size: 11px;
    text-align: center;
}

.carry-full[b-sk7j952777] {
    color: #2a6b10;
    font-weight: bold;
}

.carry-good[b-sk7j952777] {
    color: #4a8b20;
}

.carry-medium[b-sk7j952777] {
    color: #b08020;
}

.carry-low[b-sk7j952777] {
    color: #c05040;
}

.carry-empty[b-sk7j952777] {
    color: #c05040;
    font-weight: bold;
}

/* --- Settlement Report --- */
.settlement-report[b-sk7j952777] {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
}

.settlement-success[b-sk7j952777] {
    color: #2a6b10;
    background: linear-gradient(to bottom, #f0f9e8, #e4f3d6);
    border: 1px solid #b5d99c;
    border-radius: 5px;
    padding: 12px 14px;
    margin: 0;
}

.settlement-failure[b-sk7j952777] {
    color: #8B4513;
    background: linear-gradient(to bottom, #fef5ee, #fcebd8);
    border: 1px solid #e0c8a8;
    border-radius: 5px;
    padding: 12px 14px;
    margin: 0;
}
}

.res[b-sk7j952777] {
    width: 12px;
    height: 12px;
    margin: 0 2px;
    background-image: url("/img/gpack/img/a/res2.gif");
}

.r-wood[b-sk7j952777] { background-position: 0 0; }
.r-clay[b-sk7j952777] { background-position: -21px 0; }
.r-iron[b-sk7j952777] { background-position: -42px 0; }
.r-crop[b-sk7j952777] { background-position: -63px 0; }

.i-sack[b-sk7j952777] {
    width: 18px;
    height: 12px;
    background-image: url("/img/gpack/img/a/car.gif");
}

.loss[b-sk7j952777] {
    color: #c70000;
    font-weight: bold;
}

.scout-note[b-sk7j952777] {
    color: #666;
    text-align: center;
    margin-top: 8px;
}

/* ─── Scout Report ───────────────────── */
.scout-report[b-sk7j952777] {
    margin-top: 12px;
    border: 1px solid #d6c298;
    background: #f9f5e8;
    padding: 10px;
}

.scout-title[b-sk7j952777] {
    font-size: 14px;
    color: #4e3b1b;
    margin: 0 0 8px;
}

.scout-success-title[b-sk7j952777] {
    color: #3a8a00;
}

.scout-fail-title[b-sk7j952777] {
    color: #c70000;
}

.scout-def-win-title[b-sk7j952777] {
    color: #3a8a00;
}

.scout-def-lost-title[b-sk7j952777] {
    color: #c77e00;
}

.scout-battle-summary[b-sk7j952777] {
    margin-bottom: 10px;
    font-size: 12px;
}

.scout-section[b-sk7j952777] {
    margin-top: 10px;
    border-top: 1px solid #d6c298;
    padding-top: 8px;
}

.scout-section h4[b-sk7j952777] {
    font-size: 13px;
    color: #4e3b1b;
    margin: 0 0 6px;
}

.scout-resources-table td[b-sk7j952777],
.scout-defenses-table td[b-sk7j952777] {
    padding: 3px 8px;
    font-size: 12px;
}

.scout-resources-table .total-row td[b-sk7j952777] {
    border-top: 1px solid #d6c298;
    font-weight: bold;
}

.scout-resources-table td img[b-sk7j952777],
.scout-defenses-table td img[b-sk7j952777] {
    vertical-align: middle;
    margin-left: 4px;
}

.scout-none[b-sk7j952777] {
    color: #888;
    font-style: italic;
}

.scout-units-table th[b-sk7j952777],
.scout-units-table td[b-sk7j952777] {
    text-align: center;
    padding: 4px 8px;
}

.scout-defender-info[b-sk7j952777] {
    font-size: 13px;
    font-weight: bold;
    padding: 6px 0;
}

/* ─── Battle Result Sections ─────────── */
.report-section[b-sk7j952777] {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #d6c298;
    background: #f9f5e8;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.section-icon[b-sk7j952777] {
    font-size: 16px;
    flex-shrink: 0;
}

.section-content[b-sk7j952777] {
    flex: 1;
}

.section-header[b-sk7j952777] {
    font-weight: bold;
    font-size: 13px;
    color: #4e3b1b;
    margin-bottom: 6px;
    width: 100%;
}

/* Wall section */
.wall-section[b-sk7j952777] {
    background: #fdf6e3;
}

/* Catapult section */
.catapult-section[b-sk7j952777] {
    flex-direction: column;
}

.catapult-results-table[b-sk7j952777] {
    width: 100%;
    margin-top: 4px;
}

.catapult-results-table th[b-sk7j952777] {
    background: #e8ddc6;
    text-align: right;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
}

.catapult-results-table td[b-sk7j952777] {
    padding: 3px 8px;
    border-bottom: 1px solid #e8ddc6;
    text-align: right;
}

/* Loyalty section */
.loyalty-section[b-sk7j952777] {
    flex-wrap: wrap;
}

.conquest-message[b-sk7j952777] {
    width: 100%;
    margin-top: 6px;
    color: #3a8a00;
    font-size: 13px;
    font-weight: bold;
}

.conquest-blocked-message[b-sk7j952777] {
    width: 100%;
    margin-top: 6px;
    color: #c0392b;
    font-size: 13px;
    font-weight: bold;
}

/* Hero section */
.hero-section[b-sk7j952777] {
    background: #faf3dc;
    border-color: #c9b87b;
}

.hero-report-icon[b-sk7j952777] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hero-report-content[b-sk7j952777] {
    flex: 1;
}

.hero-report-content p[b-sk7j952777] {
    margin: 2px 0;
}

.hero-died[b-sk7j952777] {
    color: #c70000;
    font-weight: bold;
}

.hero-xp[b-sk7j952777] {
    color: #4e3b1b;
}

.artifact-success[b-sk7j952777] {
    color: #3a8a00;
    font-weight: bold;
}

.artifact-fail[b-sk7j952777] {
    color: #c77e00;
}

/* Village destroyed */
.village-destroyed-section[b-sk7j952777] {
    background: #fde8e8;
    border-color: #d88;
    text-align: center;
}

/* ─── Responsive Table Wrapper ─────────── */
.table-wrapper[b-sk7j952777] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 #f4f4f4;
    margin-bottom: 20px;
}

.table-wrapper .report-table[b-sk7j952777] {
    margin-bottom: 0;
    min-width: 100%;
    table-layout: auto;
    white-space: nowrap;
}

.table-wrapper .report-table th[b-sk7j952777],
.table-wrapper .report-table td[b-sk7j952777] {
    min-width: 22px;
    padding: 2px;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    .report-container[b-sk7j952777] {
        font-size: 10px;
        padding: 0 2px;
        max-width: 100%;
    }

    .table-wrapper .report-table[b-sk7j952777] {
        min-width: 100%;
        font-size: 10px;
    }

    .table-wrapper .report-table th[b-sk7j952777],
    .table-wrapper .report-table td[b-sk7j952777] {
        padding: 2px 1px;
        height: 18px;
    }

    .sprite[b-sk7j952777] {
        width: 12px;
        height: 12px;
    }

    .unit[b-sk7j952777] {
        background-size: auto;
    }

    .row-label[b-sk7j952777] {
        width: 32px;
        font-size: 9px;
        padding: 2px 3px !important;
    }

    .time[b-sk7j952777] {
        font-size: 10px;
    }

    .bounty-container[b-sk7j952777] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .bounty-label[b-sk7j952777],
    .bounty-resources[b-sk7j952777],
    .bounty-capacity[b-sk7j952777] {
        font-size: 10px;
    }

    .header-content[b-sk7j952777] {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ─── Trapped units section (Trapper) ─── */
.trapped-section[b-sk7j952777] {
    margin: 12px 0;
    border: 2px solid #c0a060;
    border-radius: 4px;
    background: #f5f0e0;
    padding: 8px;
}

.trapped-header[b-sk7j952777] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.trapped-title[b-sk7j952777] {
    font-weight: bold;
    color: #8b0000;
    font-size: 13px;
}

.trapped-table[b-sk7j952777] {
    margin: 0;
}

.trapped-table td[b-sk7j952777] {
    text-align: center;
    color: #8b0000;
    font-weight: bold;
}
/* /Components/Pages/Military/Reports.razor.rz.scp.css */
.reports-page[b-uud37fb3f4] {
    width: 100%;
}

.page-title[b-uud37fb3f4] {
    color: #71b300;
    font-size: 24px;
    font-weight: normal;
    text-align: right;
    margin: 0 0 5px;
}

.report-tabs[b-uud37fb3f4] {
    text-align: right;
    font-size: 13px;
    margin-bottom: 8px;
}

.report-tabs a[b-uud37fb3f4] {
    text-decoration: none;
    color: #71b300;
}

.report-tabs a.active[b-uud37fb3f4] {
    color: #164c00;
    font-weight: bold;
}

.report-tabs .separator[b-uud37fb3f4] {
    color: #333;
    margin: 0 3px;
}

.reports-table[b-uud37fb3f4] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #b3b3b3;
    font-size: 12px;
}

.reports-table th[b-uud37fb3f4],
.reports-table td[b-uud37fb3f4] {
    border: 1px solid #d4d4d4;
    padding: 5px 8px;
}

.reports-table th[b-uud37fb3f4] {
    background: linear-gradient(to bottom, #f8f8f8 0%, #e2e2e2 100%);
    color: #000;
    font-weight: bold;
    text-align: center;
    height: 28px;
    border-bottom: 1px solid #a0a0a0;
}

.reports-table td[b-uud37fb3f4] {
    background-color: #fff;
    height: 26px;
}

.col-checkbox[b-uud37fb3f4] {
    width: 25px;
    text-align: center;
}

.col-checkbox .check[b-uud37fb3f4] {
    margin: 0;
    vertical-align: middle;
}

.col-subject[b-uud37fb3f4] {
    text-align: right;
}

.subject-link[b-uud37fb3f4] {
    color: inherit;
    display: block;
}

.subject-link:hover[b-uud37fb3f4] {
    text-decoration: none;
}

.subject-container[b-uud37fb3f4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.subject-info[b-uud37fb3f4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

img.iReport[b-uud37fb3f4] {
    background-image: url("/img/gpack/img/a/report_icons.gif");
    width: 19px;
    height: 17px;
}

/* Reinforcement — row 0 */
img.iReport-reinforce[b-uud37fb3f4] {
    background-position: 0 -3px;
}

/* Attack won (green swords) — row 1 */
img.iReport-att[b-uud37fb3f4] {
    background-position: 0 -53px;
}

/* Attack lost (red swords) — row 3 */
img.iReport-att-loss[b-uud37fb3f4] {
    background-position: 0 -153px;
}

/* Defense won (green shield) — row 4 */
img.iReport-def[b-uud37fb3f4] {
    background-position: 0 -203px;
}

/* Defense lost (red shield) — row 6 */
img.iReport-def-loss[b-uud37fb3f4] {
    background-position: 0 -303px;
}

/* Scout success (green) — row 7 */
img.iReport-scout[b-uud37fb3f4] {
    background-position: 0 -353px;
}

/* Scout failed (red) — row 9 */
img.iReport-scout-loss[b-uud37fb3f4] {
    background-position: 0 -453px;
}

/* Settlement/founding — row 10 */
img.iReport-settlement[b-uud37fb3f4] {
    background-position: 0 -503px;
}

/* Other — row 11 */
img.iReport-other[b-uud37fb3f4] {
    background-position: 0 -553px;
}

.subject-text b[b-uud37fb3f4] {
    font-weight: bold;
}

.target-name[b-uud37fb3f4] {
    color: #777;
    font-weight: bold;
}

.text-green[b-uud37fb3f4] {
    color: #71b300;
}

.text-orange[b-uud37fb3f4] {
    color: #f28b00;
}

.text-red[b-uud37fb3f4] {
    color: #c70000;
}

.envelope-icon[b-uud37fb3f4] {
    width: 14px;
    height: 10px;
    border: 1px solid #877553;
    background: #cfc2a4;
    display: inline-block;
    position: relative;
    opacity: 0.85;
    flex-shrink: 0;
}

.envelope-icon[b-uud37fb3f4]::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    border-top: 1px solid #877553;
    transform: skewY(24deg);
    transform-origin: right top;
}

.col-time[b-uud37fb3f4] {
    width: 90px;
    text-align: center;
    font-family: Tahoma, sans-serif;
    white-space: nowrap;
}

.time-arrow[b-uud37fb3f4] {
    color: #d00000;
    font-size: 10px;
    margin-right: 2px;
    vertical-align: middle;
}

.none[b-uud37fb3f4] {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 16px 8px;
}

.footer-note[b-uud37fb3f4] {
    text-align: center;
    color: #a5a5a5;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}

/* Read/Unread styling */
.unread-row td[b-uud37fb3f4] {
    background-color: #fffbe6 !important;
    font-weight: bold;
}

.unread-row .subject-text[b-uud37fb3f4] {
    font-weight: bold;
}

.read-row .subject-text[b-uud37fb3f4] {
    font-weight: normal;
}

/* Envelope icons */
.envelope-closed[b-uud37fb3f4] {
    border-color: #6b5a2f;
    background: #d4b56a;
}

.envelope-open[b-uud37fb3f4] {
    border-color: #877553;
    background: #cfc2a4;
    opacity: 0.6;
}

.envelope-open[b-uud37fb3f4]::before {
    border-top-color: #a89770;
}

/* Pagination */
.pagination[b-uud37fb3f4] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 12px 0 4px;
    direction: ltr;
}

.page-btn[b-uud37fb3f4] {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #c0b898;
    background: linear-gradient(to bottom, #f8f4e8 0%, #e8dfc8 100%);
    color: #5a4e30;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
}

.page-btn:hover:not(:disabled):not(.active)[b-uud37fb3f4] {
    background: linear-gradient(to bottom, #fffbe6 0%, #f0e6c0 100%);
    border-color: #a09060;
}

.page-btn.active[b-uud37fb3f4] {
    background: #71b300;
    color: #fff;
    border-color: #5a8f00;
    font-weight: bold;
}

.page-btn:disabled[b-uud37fb3f4] {
    opacity: 0.4;
    cursor: default;
}

.page-info[b-uud37fb3f4] {
    color: #777;
    font-size: 11px;
    margin-right: 8px;
    direction: rtl;
}

.bulk-actions[b-uud37fb3f4] {
    display: flex;
    justify-content: flex-end;
    padding: 6px 0;
    gap: 6px;
}

.btn-delete[b-uud37fb3f4] {
    padding: 4px 14px;
    border: 1px solid #c0a060;
    background: linear-gradient(to bottom, #f8f4e8 0%, #e8dfc8 100%);
    color: #5a4e30;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
    font-family: Tahoma, Arial, sans-serif;
}

.btn-delete:hover:not(:disabled)[b-uud37fb3f4] {
    background: linear-gradient(to bottom, #fce8e8 0%, #f0c0c0 100%);
    border-color: #c06060;
    color: #8b0000;
}

.btn-delete:disabled[b-uud37fb3f4] {
    opacity: 0.4;
    cursor: default;
}

.col-save[b-uud37fb3f4] {
    width: 30px;
    text-align: center;
}

.btn-save[b-uud37fb3f4] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #c0b898;
    padding: 0;
    line-height: 1;
}

.btn-save:hover[b-uud37fb3f4] {
    color: #f0c020;
}

.btn-save-active[b-uud37fb3f4] {
    color: #f0a020;
}

.btn-save-active:hover[b-uud37fb3f4] {
    color: #e08010;
}
/* /Components/Pages/Military/ScatteredTroopsPage.razor.rz.scp.css */
.empty-state[b-czms5pc2v9] {
    text-align: center;
    color: #777;
    padding: 18px;
}

.info-box[b-czms5pc2v9] {
    background: linear-gradient(to bottom, #e8f5fb, #cce8f5);
    color: #07395a;
    border: 1px solid #3b7a9a;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    direction: rtl;
    font-size: 12px;
}

.info-box ul[b-czms5pc2v9] {
    margin: 6px 18px;
    padding: 0;
}

.scattered-table[b-czms5pc2v9] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.scattered-table th[b-czms5pc2v9],
.scattered-table td[b-czms5pc2v9] {
    padding: 5px 8px;
    border-bottom: 1px solid #d9c79c;
    font-size: 12px;
}

.scattered-table thead th[b-czms5pc2v9] {
    background: #d8a35a;
    color: #fff;
}
/* /Components/Pages/Military/SharedReport.razor.rz.scp.css */
.report-container[b-yy48f4j6aj] {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    padding: 0 4px;
    box-sizing: border-box;
}

.title[b-yy48f4j6aj] {
    color: #71d000;
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 15px;
}

.nav-links[b-yy48f4j6aj] {
    margin-bottom: 16px;
    font-size: 13px;
}

.nav-links a[b-yy48f4j6aj] {
    color: #71d000;
    text-decoration: none;
    font-weight: bold;
}

.nav-links a.active[b-yy48f4j6aj] {
    color: #000;
}

.nav-links .sep[b-yy48f4j6aj] {
    color: #000;
    margin: 0 3px;
}

.pagination[b-yy48f4j6aj] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: bold;
}

.pagination a[b-yy48f4j6aj] {
    color: #71d000;
    text-decoration: none;
}

.report-table[b-yy48f4j6aj] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    margin-bottom: 20px;
    background: #fff;
}

.report-table th[b-yy48f4j6aj],
.report-table td[b-yy48f4j6aj] {
    border: 1px solid #c0c0c0;
    text-align: center;
    padding: 3px;
    height: 22px;
}

.thead-header th[b-yy48f4j6aj] {
    background: linear-gradient(to bottom, #f4f4f4, #d5d5d5);
    padding: 4px 5px;
    font-weight: bold;
    text-align: right;
}

.thead-header.center th[b-yy48f4j6aj] {
    text-align: right;
    color: #666;
    font-size: 13px;
}

.role-label[b-yy48f4j6aj] {
    color: #000;
    font-weight: bold;
    margin-left: 4px;
}

.row-label[b-yy48f4j6aj] {
    text-align: right !important;
    font-weight: bold;
    font-size: 11px;
    color: #555;
    width: 50px;
    padding: 3px 5px !important;
    background-color: #f5f5f5 !important;
}

.loss-label[b-yy48f4j6aj] {
    color: #c70000;
}

.header-content[b-yy48f4j6aj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time[b-yy48f4j6aj] {
    direction: ltr;
    font-family: Consolas, monospace;
    font-size: 13px;
}

.player-name[b-yy48f4j6aj],
.village-name[b-yy48f4j6aj] {
    color: #71d000;
}

.coords[b-yy48f4j6aj] {
    color: #888;
    font-size: 10px;
    margin-right: 2px;
    font-weight: normal;
}

.sprite[b-yy48f4j6aj] {
    width: 16px;
    height: 16px;
    border: 0;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}

.unit[b-yy48f4j6aj] {
    background-repeat: no-repeat;
}

.u1[b-yy48f4j6aj], .u2[b-yy48f4j6aj], .u3[b-yy48f4j6aj], .u4[b-yy48f4j6aj], .u5[b-yy48f4j6aj], .u6[b-yy48f4j6aj], .u7[b-yy48f4j6aj], .u8[b-yy48f4j6aj], .u9[b-yy48f4j6aj], .u10[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/v1_romans2.gif"); }
.u11[b-yy48f4j6aj], .u12[b-yy48f4j6aj], .u13[b-yy48f4j6aj], .u14[b-yy48f4j6aj], .u15[b-yy48f4j6aj], .u16[b-yy48f4j6aj], .u17[b-yy48f4j6aj], .u18[b-yy48f4j6aj], .u19[b-yy48f4j6aj], .u20[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/v2_teutons2.gif"); }
.u21[b-yy48f4j6aj], .u22[b-yy48f4j6aj], .u23[b-yy48f4j6aj], .u24[b-yy48f4j6aj], .u25[b-yy48f4j6aj], .u26[b-yy48f4j6aj], .u27[b-yy48f4j6aj], .u28[b-yy48f4j6aj], .u29[b-yy48f4j6aj], .u30[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/v3_gauls2.gif"); }
.u31[b-yy48f4j6aj], .u32[b-yy48f4j6aj], .u33[b-yy48f4j6aj], .u34[b-yy48f4j6aj], .u35[b-yy48f4j6aj], .u36[b-yy48f4j6aj], .u37[b-yy48f4j6aj], .u38[b-yy48f4j6aj], .u39[b-yy48f4j6aj], .u40[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/v4_nature2.gif"); }
.u41[b-yy48f4j6aj], .u42[b-yy48f4j6aj], .u43[b-yy48f4j6aj], .u44[b-yy48f4j6aj], .u45[b-yy48f4j6aj], .u46[b-yy48f4j6aj], .u47[b-yy48f4j6aj], .u48[b-yy48f4j6aj], .u49[b-yy48f4j6aj], .u50[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/v5_natars2.gif"); }
.uhero[b-yy48f4j6aj] { background-image: url("/img/gpack/img/u/specials.gif"); background-position: -133px 0; }

.u1[b-yy48f4j6aj], .u11[b-yy48f4j6aj], .u21[b-yy48f4j6aj], .u31[b-yy48f4j6aj], .u41[b-yy48f4j6aj] { background-position: 0 0; }
.u2[b-yy48f4j6aj], .u12[b-yy48f4j6aj], .u22[b-yy48f4j6aj], .u32[b-yy48f4j6aj], .u42[b-yy48f4j6aj] { background-position: -19px 0; }
.u3[b-yy48f4j6aj], .u13[b-yy48f4j6aj], .u23[b-yy48f4j6aj], .u33[b-yy48f4j6aj], .u43[b-yy48f4j6aj] { background-position: -38px 0; }
.u4[b-yy48f4j6aj], .u14[b-yy48f4j6aj], .u24[b-yy48f4j6aj], .u34[b-yy48f4j6aj], .u44[b-yy48f4j6aj] { background-position: -57px 0; }
.u5[b-yy48f4j6aj], .u15[b-yy48f4j6aj], .u25[b-yy48f4j6aj], .u35[b-yy48f4j6aj], .u45[b-yy48f4j6aj] { background-position: -76px 0; }
.u6[b-yy48f4j6aj], .u16[b-yy48f4j6aj], .u26[b-yy48f4j6aj], .u36[b-yy48f4j6aj], .u46[b-yy48f4j6aj] { background-position: -95px 0; }
.u7[b-yy48f4j6aj], .u17[b-yy48f4j6aj], .u27[b-yy48f4j6aj], .u37[b-yy48f4j6aj], .u47[b-yy48f4j6aj] { background-position: -114px 0; }
.u8[b-yy48f4j6aj], .u18[b-yy48f4j6aj], .u28[b-yy48f4j6aj], .u38[b-yy48f4j6aj], .u48[b-yy48f4j6aj] { background-position: -133px 0; }
.u9[b-yy48f4j6aj], .u19[b-yy48f4j6aj], .u29[b-yy48f4j6aj], .u39[b-yy48f4j6aj], .u49[b-yy48f4j6aj] { background-position: -152px 0; }
.u10[b-yy48f4j6aj], .u20[b-yy48f4j6aj], .u30[b-yy48f4j6aj], .u40[b-yy48f4j6aj], .u50[b-yy48f4j6aj] { background-position: -171px 0; }

.status-row td[b-yy48f4j6aj] {
    text-align: right;
    padding: 5px;
    background-color: #fafafa;
}

.status-content[b-yy48f4j6aj] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.i-skull[b-yy48f4j6aj] {
    background-image: url("/img/gpack/img/a/del.gif");
    width: 12px;
    height: 12px;
}

.bounty-row td[b-yy48f4j6aj] {
    padding: 4px 6px;
    background-color: #fafafa;
}

.bounty-container[b-yy48f4j6aj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bounty-label[b-yy48f4j6aj] {
    font-weight: bold;
    font-size: 11px;
    color: #555;
}

.bounty-resources[b-yy48f4j6aj] {
    display: flex;
    align-items: center;
}

.separator[b-yy48f4j6aj] {
    margin: 0 4px;
    color: #999;
}

/* --- Carry Capacity --- */
.carry-capacity-section[b-yy48f4j6aj] {
    margin-top: 6px;
    padding: 4px 0;
    border-top: 1px dashed #d0c8a8;
}

.carry-capacity-header[b-yy48f4j6aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 3px;
}

.carry-capacity-label[b-yy48f4j6aj] {
    font-weight: bold;
    color: #555;
}

.carry-capacity-values[b-yy48f4j6aj] {
    color: #333;
    font-family: Consolas, monospace;
}

.carry-capacity-percent[b-yy48f4j6aj] {
    font-weight: bold;
    font-size: 13px;
}

.carry-capacity-bar-container[b-yy48f4j6aj] {
    width: 100%;
    height: 10px;
    background: #e8e2c5;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #c0b898;
}

.carry-capacity-bar-fill[b-yy48f4j6aj] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.carry-capacity-detail[b-yy48f4j6aj] {
    margin-top: 3px;
    font-size: 11px;
    text-align: center;
}

.carry-full[b-yy48f4j6aj] {
    color: #2a6b10;
    font-weight: bold;
}

.carry-good[b-yy48f4j6aj] {
    color: #4a8b20;
}

.carry-medium[b-yy48f4j6aj] {
    color: #b08020;
}

.carry-low[b-yy48f4j6aj] {
    color: #c05040;
}

.carry-empty[b-yy48f4j6aj] {
    color: #c05040;
    font-weight: bold;
}

/* --- Settlement Report --- */
.settlement-report[b-yy48f4j6aj] {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
}

.settlement-success[b-yy48f4j6aj] {
    color: #2a6b10;
    background: linear-gradient(to bottom, #f0f9e8, #e4f3d6);
    border: 1px solid #b5d99c;
    border-radius: 5px;
    padding: 12px 14px;
    margin: 0;
}

.settlement-failure[b-yy48f4j6aj] {
    color: #8B4513;
    background: linear-gradient(to bottom, #fef5ee, #fcebd8);
    border: 1px solid #e0c8a8;
    border-radius: 5px;
    padding: 12px 14px;
    margin: 0;
}

.res[b-yy48f4j6aj] {
    width: 12px;
    height: 12px;
    margin: 0 2px;
    background-image: url("/img/gpack/img/a/res2.gif");
}

.r-wood[b-yy48f4j6aj] { background-position: 0 0; }
.r-clay[b-yy48f4j6aj] { background-position: -21px 0; }
.r-iron[b-yy48f4j6aj] { background-position: -42px 0; }
.r-crop[b-yy48f4j6aj] { background-position: -63px 0; }

/* Resource icons using global r1–r5 classes — ensure they render inside scoped component */
img.r1[b-yy48f4j6aj], img.r2[b-yy48f4j6aj], img.r3[b-yy48f4j6aj], img.r4[b-yy48f4j6aj], img.r5[b-yy48f4j6aj] {
    background-image: url("/img/gpack/img/a/res2.gif");
    background-repeat: no-repeat;
    height: 12px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
}

img.r1[b-yy48f4j6aj] { background-position: 0 0; }
img.r2[b-yy48f4j6aj] { background-position: -21px 0; }
img.r3[b-yy48f4j6aj] { background-position: -42px 0; }
img.r4[b-yy48f4j6aj] { background-position: -63px 0; }
img.r5[b-yy48f4j6aj] { background-position: -84px 0; }

.i-sack[b-yy48f4j6aj] {
    width: 18px;
    height: 12px;
    background-image: url("/img/gpack/img/a/car.gif");
}

.loss[b-yy48f4j6aj] {
    color: #c70000;
    font-weight: bold;
}

.scout-note[b-yy48f4j6aj] {
    color: #666;
    text-align: center;
    margin-top: 8px;
}

/* ─── Scout Report ───────────────────── */
.scout-report[b-yy48f4j6aj] {
    margin-top: 12px;
    border: 1px solid #d6c298;
    background: #f9f5e8;
    padding: 10px;
}

.scout-title[b-yy48f4j6aj] {
    font-size: 14px;
    color: #4e3b1b;
    margin: 0 0 8px;
}

.scout-success-title[b-yy48f4j6aj] { color: #3a8a00; }
.scout-fail-title[b-yy48f4j6aj] { color: #c70000; }
.scout-def-win-title[b-yy48f4j6aj] { color: #3a8a00; }
.scout-def-lost-title[b-yy48f4j6aj] { color: #c77e00; }

.scout-battle-summary[b-yy48f4j6aj] {
    margin-bottom: 10px;
    font-size: 12px;
}

.scout-section[b-yy48f4j6aj] {
    margin-top: 10px;
    border-top: 1px solid #d6c298;
    padding-top: 8px;
}

.scout-section h4[b-yy48f4j6aj] {
    font-size: 13px;
    color: #4e3b1b;
    margin: 0 0 6px;
}

.scout-resources-table td[b-yy48f4j6aj],
.scout-defenses-table td[b-yy48f4j6aj] {
    padding: 3px 8px;
    font-size: 12px;
}

.scout-resources-table .total-row td[b-yy48f4j6aj] {
    border-top: 1px solid #d6c298;
    font-weight: bold;
}

.scout-resources-table td img[b-yy48f4j6aj],
.scout-defenses-table td img[b-yy48f4j6aj] {
    vertical-align: middle;
    margin-left: 4px;
}

.scout-none[b-yy48f4j6aj] {
    color: #888;
    font-style: italic;
}

.scout-units-table th[b-yy48f4j6aj],
.scout-units-table td[b-yy48f4j6aj] {
    text-align: center;
    padding: 4px 8px;
}

.scout-defender-info[b-yy48f4j6aj] {
    font-size: 13px;
    font-weight: bold;
    padding: 6px 0;
}

/* ─── Battle Result Sections ─────────── */
.report-section[b-yy48f4j6aj] {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #d6c298;
    background: #f9f5e8;
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.section-icon[b-yy48f4j6aj] {
    font-size: 16px;
    flex-shrink: 0;
}

.section-content[b-yy48f4j6aj] {
    flex: 1;
}

.section-header[b-yy48f4j6aj] {
    font-weight: bold;
    font-size: 13px;
    color: #4e3b1b;
    margin-bottom: 6px;
    width: 100%;
}

/* Wall section */
.wall-section[b-yy48f4j6aj] { background: #fdf6e3; }

/* Catapult section */
.catapult-section[b-yy48f4j6aj] { flex-direction: column; }

.catapult-results-table[b-yy48f4j6aj] {
    width: 100%;
    margin-top: 4px;
}

.catapult-results-table th[b-yy48f4j6aj] {
    background: #e8ddc6;
    text-align: right;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
}

.catapult-results-table td[b-yy48f4j6aj] {
    padding: 3px 8px;
    border-bottom: 1px solid #e8ddc6;
    text-align: right;
}

/* Loyalty section */
.loyalty-section[b-yy48f4j6aj] { flex-wrap: wrap; }

.conquest-message[b-yy48f4j6aj] {
    width: 100%;
    margin-top: 6px;
    color: #3a8a00;
    font-size: 13px;
    font-weight: bold;
}

/* Oasis conquest */
.oasis-conquest-section[b-yy48f4j6aj] { background: #f6fce8; }

/* Hero section */
.hero-section[b-yy48f4j6aj] {
    background: #faf3dc;
    border-color: #c9b87b;
}

.hero-report-icon[b-yy48f4j6aj] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hero-report-content[b-yy48f4j6aj] { flex: 1; }
.hero-report-content p[b-yy48f4j6aj] { margin: 2px 0; }

.hero-died[b-yy48f4j6aj] {
    color: #c70000;
    font-weight: bold;
}

.hero-xp[b-yy48f4j6aj] { color: #4e3b1b; }

.artifact-success[b-yy48f4j6aj] {
    color: #3a8a00;
    font-weight: bold;
}

.artifact-fail[b-yy48f4j6aj] { color: #c77e00; }

.village-destroyed-section[b-yy48f4j6aj] {
    background: #fde8e8;
    border-color: #d88;
    text-align: center;
}

/* ─── Share button ───────────────────── */
.col-share[b-yy48f4j6aj] {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

.btn-share[b-yy48f4j6aj] {
    background: #71b300;
    color: white;
    border: 1px solid #5c8a00;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
}

.btn-share:hover[b-yy48f4j6aj] {
    background: #84cc00;
}

.btn-share-active[b-yy48f4j6aj] {
    background: #4a90d9;
    border-color: #3670b0;
}

.btn-share-active:hover[b-yy48f4j6aj] {
    background: #5a9fe8;
}

.btn-share-revoke[b-yy48f4j6aj] {
    background: #c0392b;
    border-color: #a93226;
    margin-right: 2px;
}

.btn-share-revoke:hover[b-yy48f4j6aj] {
    background: #d94036;
}

/* ─── Shared report page ─────────────── */
.shared-notice[b-yy48f4j6aj] {
    color: #888;
    font-size: 11px;
    margin: -10px 0 15px;
}

.shared-report-not-found[b-yy48f4j6aj] {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.shared-report-not-found h2[b-yy48f4j6aj] {
    color: #c70000;
    font-size: 18px;
}

/* ─── Responsive Table Wrapper ─────────── */
.table-wrapper[b-yy48f4j6aj] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 #f4f4f4;
    margin-bottom: 20px;
}

.table-wrapper .report-table[b-yy48f4j6aj] {
    margin-bottom: 0;
    min-width: 100%;
    table-layout: auto;
    white-space: nowrap;
}

.table-wrapper .report-table th[b-yy48f4j6aj],
.table-wrapper .report-table td[b-yy48f4j6aj] {
    min-width: 22px;
    padding: 2px;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
    .report-container[b-yy48f4j6aj] {
        font-size: 10px;
        padding: 0 2px;
        max-width: 100%;
    }

    .table-wrapper .report-table[b-yy48f4j6aj] {
        min-width: 100%;
        font-size: 10px;
    }

    .table-wrapper .report-table th[b-yy48f4j6aj],
    .table-wrapper .report-table td[b-yy48f4j6aj] {
        padding: 2px 1px;
        height: 18px;
    }

    .sprite[b-yy48f4j6aj] {
        width: 12px;
        height: 12px;
    }

    .unit[b-yy48f4j6aj] {
        background-size: auto;
    }

    .row-label[b-yy48f4j6aj] {
        width: 32px;
        font-size: 9px;
        padding: 2px 3px !important;
    }

    .time[b-yy48f4j6aj] {
        font-size: 10px;
    }

    .bounty-container[b-yy48f4j6aj] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .bounty-label[b-yy48f4j6aj],
    .bounty-resources[b-yy48f4j6aj],
    .bounty-capacity[b-yy48f4j6aj] {
        font-size: 10px;
    }

    .header-content[b-yy48f4j6aj] {
        flex-wrap: wrap;
        gap: 4px;
    }

    .col-share[b-yy48f4j6aj] {
        width: 70px;
    }

    .btn-share[b-yy48f4j6aj] {
        padding: 1px 5px;
        font-size: 9px;
    }
}
/* /Components/Pages/Military/TrainAttackPage.razor.rz.scp.css */
/* Build header */
#build h1 .level[b-p4u55hz2ra] {
    margin-inline-start: 8px;
    font-size: 13px;
    font-weight: bold;
    color: #71D000;
}

#build a.build_logo img[b-p4u55hz2ra] {
    width: 70px;
    height: 70px;
    background-image: url('/img/gpack/img/g/g14.gif');
    background-size: 70px 70px;
}

#build p.build_desc[b-p4u55hz2ra] {
    margin: 6px 0 12px 0;
    line-height: 1.5;
    color: #333;
    font-size: 13px;
}

#textmenu[b-p4u55hz2ra] {
    margin: 8px 0 12px 0;
    font-size: 12px;
}

#textmenu a[b-p4u55hz2ra] { color: #5CAF00; text-decoration: none; }
#textmenu a:hover[b-p4u55hz2ra] { text-decoration: underline; }

/* Two-column form */
.send-form-d1[b-p4u55hz2ra] {
    margin: 15px 0;
    overflow: hidden;
}

.send-form-d1-left[b-p4u55hz2ra] {
    float: right;
    width: 60%;
}

.send-form-d1-right[b-p4u55hz2ra] {
    float: left;
    width: 38%;
}

.send-form-d1-right h3[b-p4u55hz2ra] {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #71D000;
    text-align: right;
    font-weight: normal;
}

/* Troops table — same look as RallyPoint */
#troops[b-p4u55hz2ra] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-content);
}

#troops thead th[b-p4u55hz2ra] {
    background: linear-gradient(to bottom, #fdfdfd 0%, #e4e4e4 100%);
    padding: 4px;
    font-size: 13px;
    border-bottom: 2px solid var(--border-medium);
    text-align: center;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    font-weight: bold;
}

#troops th.c1[b-p4u55hz2ra] { color: #000; }
#troops th.c2[b-p4u55hz2ra] { color: #71D000; width: 18%; }
#troops th.c3[b-p4u55hz2ra] { color: #8F8F00; width: 18%; }
#troops th.c4[b-p4u55hz2ra] { color: #b07b1d; width: 22%; }

#troops tbody td[b-p4u55hz2ra] {
    padding: 3px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    font-weight: bold;
    font-size: 13px;
}

#troops tbody tr:nth-child(even)[b-p4u55hz2ra] { background-color: #F9F9F9; }
#troops tbody tr.exceeded[b-p4u55hz2ra] { background-color: #ffd8cc !important; color: #a52a00; }
#troops tbody tr.exceeded td[b-p4u55hz2ra] { color: #a52a00; }

#troops td.ico[b-p4u55hz2ra] { width: 25px; }
#troops td.val[b-p4u55hz2ra] { width: 90px; }

#troops td.val input.text[b-p4u55hz2ra] {
    width: 90%;
    text-align: center;
    padding: 2px;
    border: 1px solid var(--border-medium);
    background-color: #FFF;
    font-weight: bold;
    font-size: 13px;
}

#troops td.val input.text:disabled[b-p4u55hz2ra] { background-color: #F5F5F5; }

#troops td.max[b-p4u55hz2ra] {
    border-inline-start: 1px solid var(--border-light);
}

#troops td.max a[b-p4u55hz2ra] {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

#troops td.max a:hover[b-p4u55hz2ra] { text-decoration: underline; }

#troops td.other[b-p4u55hz2ra] {
    color: #666;
    border-inline-start: 1px solid var(--border-light);
}

#troops td.none[b-p4u55hz2ra] {
    color: #999;
    font-weight: normal;
    font-style: italic;
    padding: 10px;
}

/* Catapult info row */
.cata-info[b-p4u55hz2ra] {
    margin-top: 8px;
    padding: 5px 8px;
    background-color: #fff3d9;
    border: 1px solid #c9a44d;
    border-radius: 2px;
    font-size: 12px;
    color: #5a4500;
}

.cata-info .ok[b-p4u55hz2ra] { color: #007137; margin-inline-start: 6px; font-weight: bold; }
.cata-info .warn[b-p4u55hz2ra] { color: #b00; margin-inline-start: 6px; font-weight: bold; }
.cata-info .legend[b-p4u55hz2ra] { float: left; color: #888; font-weight: normal; }

/* Coords box — same look as RallyPoint */
.coords-box[b-p4u55hz2ra] {
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent;
}

.coords-box .label[b-p4u55hz2ra] {
    display: block;
    font-size: 12px;
    color: #555;
    margin: 8px 0 3px 0;
    font-weight: bold;
}

.coords-box .text[b-p4u55hz2ra],
.coords-box select.text[b-p4u55hz2ra] {
    width: 100%;
    padding: 4px;
    border: 1px solid #71D000;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: #FFF;
}

.coords-box .coord-row[b-p4u55hz2ra] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coords-box input.text.coord[b-p4u55hz2ra] {
    width: 46%;
}

.coords-box .comma[b-p4u55hz2ra] {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1;
    padding: 0 4px;
}

.coords-box .count[b-p4u55hz2ra] { width: 100px; }
.coords-box .hint[b-p4u55hz2ra] { display: block; font-size: 11px; color: #888; margin-top: 3px; }

/* Mission table */
#mission[b-p4u55hz2ra] {
    width: 100%;
    border: 1px solid var(--border-medium);
    margin-bottom: 10px;
    border-collapse: collapse;
    background-color: transparent;
}

#mission td[b-p4u55hz2ra] {
    padding: 6px;
    border-bottom: 1px solid var(--border-light);
    background-color: transparent;
}

#mission tr.selected td[b-p4u55hz2ra] {
    background-color: #FFF8C6;
    font-weight: bold;
}

#mission td.sel[b-p4u55hz2ra] {
    width: 30px;
    text-align: center;
}

#mission td.sel input.radio[b-p4u55hz2ra] { margin: 0; vertical-align: middle; }

#mission td.ms_text[b-p4u55hz2ra] {
    text-align: right;
    font-size: 14px;
    font-weight: bold;
}

/* Cost */
.cost-box[b-p4u55hz2ra] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background-color: #f5f5f0;
    border: 1px solid #ddd;
    font-size: 13px;
    margin-top: 4px;
}

.cost-box.total[b-p4u55hz2ra] {
    background-color: #fff3d9;
    border-color: #c9a44d;
    font-size: 14px;
}

.cost-box .gold[b-p4u55hz2ra] {
    width: 16px;
    height: 16px;
    background-image: url('/img/gpack/img/a/gold.gif');
    background-size: 16px 16px;
}

/* Messages */
.error[b-p4u55hz2ra] {
    margin: 8px 0;
    padding: 6px 10px;
    background-color: #FFD8D8;
    border: 1px solid #C00;
    color: #800;
    font-size: 12px;
    border-radius: 2px;
    font-weight: bold;
}

.ok-msg[b-p4u55hz2ra] {
    margin: 8px 0;
    padding: 6px 10px;
    background-color: #DBF1B9;
    border: 1px solid #5CAF00;
    color: #2a5800;
    font-size: 12px;
    border-radius: 2px;
    font-weight: bold;
}

/* Action buttons */
.actions[b-p4u55hz2ra] {
    margin-top: 12px;
    text-align: center;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.btn[b-p4u55hz2ra] {
    padding: 6px 18px;
    border: 1px solid #71D000;
    background: linear-gradient(to bottom, #B5E061, #5CAF00);
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
}

.btn:hover[b-p4u55hz2ra] { background: linear-gradient(to bottom, #5CAF00, #4a9000); }
.btn:disabled[b-p4u55hz2ra] { background: #ccc; border-color: #999; cursor: not-allowed; }

.btn.cancel[b-p4u55hz2ra] {
    background: linear-gradient(to bottom, #fff, #ddd);
    color: #333;
    border-color: #aaa;
}

.btn.cancel:hover[b-p4u55hz2ra] { background: linear-gradient(to bottom, #ddd, #ccc); }

/* Responsive */
@media (max-width: 768px) {
    .send-form-d1-left[b-p4u55hz2ra],
    .send-form-d1-right[b-p4u55hz2ra] {
        float: none;
        width: 100%;
    }
    .send-form-d1-right[b-p4u55hz2ra] { margin-top: 15px; }
}
/* /Components/Pages/Profile/ProfilePage.razor.rz.scp.css */
/* === ProfilePage Scoped CSS (Travian profile design) === */

h1[b-jk83ukoma9] {
    color: var(--text-heading);
    font-size: 1.1rem;
    margin: 0.5rem 0;
    text-align: right;
}

/* --- Tab Menu --- */
#textmenu[b-jk83ukoma9] {
    margin: 0 0 5px;
    padding: 4px 0;
    font-size: 15px;
    font-weight: bold;
    direction: rtl;
    text-align: right;
    color: #333;
}

#textmenu a[b-jk83ukoma9] {
    color: #6da523;
    cursor: pointer;
    padding: 0 2px;
    text-decoration: none;
    font-weight: bold;
}

#textmenu a:hover[b-jk83ukoma9] { text-decoration: underline; }
#textmenu a.selected[b-jk83ukoma9] { color: #4a8000; text-decoration: none; cursor: default; }

/* --- Profile Table --- */
#profile[b-jk83ukoma9] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #b5b5b5;
    margin-bottom: 10px;
    direction: rtl;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* Header: gradient */
#profile > thead th[b-jk83ukoma9] {
    background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
    color: #000;
    padding: 6px 0;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    border-bottom: 1px solid #b5b5b5;
}

#profile > thead td[b-jk83ukoma9] {
    background: #f4f1eb;
    padding: 4px 8px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #b5b5b5;
}

/* --- Main two-column row --- */
.main-row > td[b-jk83ukoma9] {
    vertical-align: top;
    padding: 0 !important;
    border-bottom: none !important;
}

/* Right column: avatar + details + actions (first td in RTL) */
.right-col[b-jk83ukoma9] {
    padding: 0 !important;
    border-left: 1px solid #b5b5b5;
    width: 40%;
}

/* Right column expands to full width when left column is absent */
.main-row > td.right-col:only-child[b-jk83ukoma9] {
    width: 100%;
    border-left: none;
}

/* Left column: medal grid */
.left-col[b-jk83ukoma9] {
    vertical-align: top;
    text-align: center;
    padding: 10px !important;
    width: 60%;
}

/* --- Avatar container: fixed size, rounded rectangle --- */
.avatar-container[b-jk83ukoma9] {
    width: 160px;
    height: 160px;
    margin: 10px auto;
    border-radius: 16px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* When wonder trophy is active, allow laurel branches to overflow */
.avatar-container.has-wonder-trophy[b-jk83ukoma9] {
    overflow: visible;
}

/* Rotating gradient ring — only when user has a wonder trophy */
@property --wonder-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.avatar-container.has-wonder-trophy[b-jk83ukoma9]::before {
    content: "";
    position: absolute;
    inset: -5px;
    padding: 5px;
    background: conic-gradient(
        from var(--wonder-ring-angle),
        transparent 0deg,
        transparent 60deg,
        #c0a000 90deg,
        #ffd700 110deg,
        #fff8dc 120deg,
        #ffd700 130deg,
        #c0a000 150deg,
        transparent 180deg,
        transparent 240deg,
        #c0a000 270deg,
        #ffd700 290deg,
        #fff8dc 300deg,
        #ffd700 310deg,
        #c0a000 330deg,
        transparent 360deg
    );
    border-radius: 20px;
    animation: wonder-ring-flow-b-jk83ukoma9 5s linear infinite;
    z-index: -2;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

@keyframes wonder-ring-flow-b-jk83ukoma9 {
    to { --wonder-ring-angle: 360deg; }
}

/* Inner fill behind the avatar to show only the ring */
.avatar-container.has-wonder-trophy[b-jk83ukoma9]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fffbea, #f4f1eb);
    border-radius: 16px;
    z-index: -1;
}

.avatar-img[b-jk83ukoma9] {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: cover;
    border-radius: 12px;
    display: block;
    border-bottom: none;
    z-index: 1;
}

/* --- Medal Grid (matching reference image layout) --- */
.medal-grid[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    padding: 15px 0 0;
    min-height: 100px;
}

[b-jk83ukoma9] .medal-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

[b-jk83ukoma9] .medal-img {
    width: 45px;
    height: 62px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 4px;
    transition: transform 0.15s;
    object-fit: contain;
}

[b-jk83ukoma9] .medal-img:hover {
    transform: scale(1.15);
    z-index: 2;
}

[b-jk83ukoma9] .medal-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fffce0;
    border: 1px solid #c0a000;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    z-index: 999;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    border-radius: 3px;
    text-align: right;
    direction: rtl;
    line-height: 1.6;
    pointer-events: none;
    min-width: 120px;
}

[b-jk83ukoma9] .medal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #c0a000;
}

[b-jk83ukoma9] .medal-wrap:hover .medal-tooltip {
    display: block;
}

.no-medals[b-jk83ukoma9] {
    color: #999;
    font-size: 13px;
    padding: 15px;
    text-align: center;
}

/* --- Details section --- */
.details-section[b-jk83ukoma9] {
    padding: 0 !important;
    border-top: none;
}

/* --- Nested details table (inside right-col) — matches reference --- */
.details-table[b-jk83ukoma9] {
    width: 100%;
    border-collapse: collapse;
}

.details-table td[b-jk83ukoma9] {
    border-bottom: 1px solid #b5b5b5;
    padding: 5px 10px;
    font-size: 13px;
}

.details-table tr td:first-child[b-jk83ukoma9] {
    width: 30%;
    text-align: right;
    border-left: 1px solid #b5b5b5;
    font-weight: normal;
}

.details-table tr td:last-child[b-jk83ukoma9] {
    width: 70%;
    text-align: center;
}

.details-table td a[b-jk83ukoma9],
.details-table .text-green[b-jk83ukoma9] {
    color: #6da523;
    text-decoration: none;
    font-weight: bold;
}

/* --- Action links (inside right-col) — matches reference --- */
.action-links[b-jk83ukoma9] {
    text-align: right;
    padding: 0;
}

.action-links .action-row[b-jk83ukoma9] {
    border-bottom: 1px solid #b5b5b5;
    padding: 5px 10px;
}

.action-link[b-jk83ukoma9] {
    display: block;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    text-align: right;
}

.action-link.green[b-jk83ukoma9] {
    color: #6da523;
}

.action-link.red[b-jk83ukoma9] {
    color: #c00;
}

.action-link:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

/* --- Full-width cells (action links inside details-table) --- */
.details-table .full-width-cell[b-jk83ukoma9] {
    text-align: right !important;
    border-left: none !important;
    padding: 5px 10px;
}

/* --- Description section (bio-cell style from reference) --- */
.desc-section[b-jk83ukoma9] {
    padding: 10px !important;
    text-align: center;
    border-top: 1px solid #b5b5b5;
}

/* Description 1 rendered inside right-col (below action links) */
.desc-right[b-jk83ukoma9] {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #b5b5b5;
}

/* Description 2 rendered inside left-col (below medal grid) */
.desc-in-col[b-jk83ukoma9] {
    width: 100%;
    text-align: center;
    padding: 5px 0 0;
}

.desc1div[b-jk83ukoma9] {
    min-height: 20px;
    color: #333;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    line-height: 1.8;
}

.desc2div[b-jk83ukoma9] {
    padding: 4px 0;
    color: #555;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    line-height: 1.8;
}

/* Spanning rows in details table (legacy support) */
.span-row[b-jk83ukoma9] {
    text-align: center !important;
    border-left: none !important;
    border-right: none !important;
    line-height: 25px;
}

.edit-link[b-jk83ukoma9] {
    color: #6da523;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

.edit-link:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

/* --- Avatar edit (in edit tab) --- */
.avatar-edit-row[b-jk83ukoma9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.avatar-edit-preview[b-jk83ukoma9] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 2px solid #b5b5b5;
    border-radius: 4px;
    background: #eee;
}

.avatar-file-input[b-jk83ukoma9] {
    font-size: 12px;
    max-width: 220px;
}

.avatar-upload-status[b-jk83ukoma9] {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
}

/* --- Settings / Edit form rows --- */
#profile > tbody > tr > th.s7-label[b-jk83ukoma9] {
    background: #fafafa;
    padding: 6px 10px;
    text-align: right;
    font-weight: bold;
    color: #555;
    width: 40%;
    border-bottom: 1px solid #b5b5b5;
    font-size: 13px;
}

#profile > tbody > tr > th.det-label[b-jk83ukoma9] {
    background: #fafafa;
    padding: 3px 10px;
    text-align: right;
    font-weight: bold;
    color: #333;
    width: 30%;
    border-bottom: 1px solid #b5b5b5;
    font-size: 13px;
}

#profile > tbody > tr > td.det-value[b-jk83ukoma9] {
    padding: 3px 10px;
    border-bottom: 1px solid #b5b5b5;
    color: #333;
    font-size: 13px;
    text-align: left;
    width: 70%;
    border-right: 1px solid #b5b5b5;
}

#profile > tbody > tr > td.det-value a[b-jk83ukoma9] {
    color: #6da523;
    text-decoration: none;
}

#profile > tbody > tr > td[b-jk83ukoma9] {
    padding: 6px 10px;
    border-bottom: 1px solid #b5b5b5;
    font-size: 13px;
}

#profile input.text[b-jk83ukoma9],
#profile select.text[b-jk83ukoma9],
#profile textarea.text[b-jk83ukoma9] {
    border: 1px solid #bbb;
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
    border-radius: 2px;
    background: #fff;
    color: #333;
    width: 220px;
}

#profile input.text:focus[b-jk83ukoma9],
#profile select.text:focus[b-jk83ukoma9],
#profile textarea.text:focus[b-jk83ukoma9] {
    border-color: #7ab83a;
    outline: none;
}

.profile-textarea[b-jk83ukoma9] {
    width: 300px !important;
    height: 80px;
    resize: vertical;
}

.section-divider[b-jk83ukoma9] {
    height: 4px;
    background: #f4f1eb;
    padding: 0 !important;
}

.sitter-desc[b-jk83ukoma9] {
    font-size: 12px;
    color: #666;
    padding: 8px 10px !important;
    line-height: 1.6;
}

.deletion-warning[b-jk83ukoma9] {
    color: #c00;
    font-weight: bold;
    padding: 8px 10px !important;
}

.deletion-warning .btn-small[b-jk83ukoma9] {
    margin-right: 10px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
}

/* Checkbox labels in filters */
#profile label[b-jk83ukoma9] {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

#profile label input[type="checkbox"][b-jk83ukoma9] {
    margin-left: 6px;
    vertical-align: middle;
}

/* Edit link row (for non-overview tabs) */
.edit-link-row[b-jk83ukoma9] {
    text-align: center;
    padding: 6px !important;
    background: #fafafa;
    border-top: 1px solid #b5b5b5;
}

.edit-link-row a[b-jk83ukoma9] {
    color: #6da523;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.edit-link-row a:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

/* --- Save Row --- */
.save-row[b-jk83ukoma9] {
    text-align: center;
    padding: 10px 0 !important;
}

.btn-green[b-jk83ukoma9] {
    background: #5B9C00;
    color: #fff;
    border: 1px solid #4a8000;
    padding: 6px 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.btn-green:hover[b-jk83ukoma9] {
    background: #4a8000;
}

/* --- Message boxes --- */
.msg-box[b-jk83ukoma9] {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
}

.msg-ok[b-jk83ukoma9] {
    background: #e8f5e0;
    border: 1px solid #b5d89c;
    color: #3a7010;
}

.msg-err[b-jk83ukoma9] {
    background: #fde8e8;
    border: 1px solid #e0a0a0;
    color: #a02020;
}

/* --- Villages Table --- */
#villages[b-jk83ukoma9] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #b5b5b5;
    margin-top: 10px;
    margin-bottom: 1rem;
    direction: rtl;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

#villages thead th[b-jk83ukoma9] {
    background-color: #f0f0f0;
    border: 1px solid #b5b5b5;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    color: #333;
}

.vil-name-header[b-jk83ukoma9] {
    text-align: right !important;
    padding-right: 10px !important;
    width: 55%;
}

#villages thead td[b-jk83ukoma9] {
    background: #f4f1eb;
    padding: 4px 8px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #b5b5b5;
    text-align: center;
}

#villages tbody tr[b-jk83ukoma9] {
    border-bottom: 1px solid #b5b5b5;
}

#villages tbody td[b-jk83ukoma9] {
    border: 1px solid #b5b5b5;
    padding: 4px 3px;
    font-size: 13px;
    text-align: center;
}

/* Village name cell */
#villages td.nam[b-jk83ukoma9] {
    text-align: right;
    padding-right: 10px !important;
    word-break: break-all;
}

#villages td.nam a[b-jk83ukoma9] {
    color: #6da523;
    text-decoration: none;
    font-weight: bold;
}

#villages td.nam a:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

.capital-tag[b-jk83ukoma9] {
    font-size: 16px;
    color: #888;
    margin-right: 3px;
    min-height: 15px;
}

/* WW (Wonder) village row highlight */
#villages tbody tr.ww-village-row[b-jk83ukoma9] {
    background: linear-gradient(to left, #fff8e1, #fffbea);
}

#villages tbody tr.ww-village-row td.nam[b-jk83ukoma9] {
    border-right: 3px solid #d4a017;
}

.ww-village-tag[b-jk83ukoma9] {
    display: inline-block;
    background: #d4a017;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Artifact village row highlight */
#villages tbody tr.artifact-village-row[b-jk83ukoma9] {
    background: linear-gradient(to left, #e8f5e9, #f1f8e9);
}

#villages tbody tr.artifact-village-row td.nam[b-jk83ukoma9] {
    border-right: 3px solid #6a1b9a;
}

.artifact-village-tag[b-jk83ukoma9] {
    display: inline-block;
    color: #6a1b9a;
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    padding: 1px 6px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Village action buttons (floated left in RTL = left side) */
.vil-actions[b-jk83ukoma9] {
    float: left;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.vil-actions a[b-jk83ukoma9] {
    display: inline-block;
}

.vil-action-icon[b-jk83ukoma9] {
    width: 19px;
    height: 17px;
    vertical-align: middle;
}

.vil-action-trade[b-jk83ukoma9] {
    margin-left: 5px;
    background-image: url('/img/gpack/img/a/report_icons.gif');
    background-position: 0 -653px;
    background-repeat: no-repeat;
}

.vil-action-attack[b-jk83ukoma9] {
    margin-left: 2px;
}

/* Population cell */
#villages td.hab[b-jk83ukoma9] {
    text-align: center;
    color: #333;
    width: 5%;
}

/* Coordinates cell */
#villages td.coords[b-jk83ukoma9] {
    text-align: center;
    width: 15%;
}

#villages td.coords a[b-jk83ukoma9] {
    color: #6da523;
    font-weight: bold;
    text-decoration: none;
    direction: ltr;
    unicode-bidi: isolate;
}

#villages td.coords a:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

/* Distance cell */
#villages td.dist[b-jk83ukoma9] {
    text-align: center;
    width: 5%;
}

#villages td.dist a[b-jk83ukoma9] {
    color: #6da523;
    font-weight: bold;
    text-decoration: none;
}

#villages td.dist a:hover[b-jk83ukoma9] {
    text-decoration: underline;
}

/* --- Medal Images (description BB-code) --- */
[b-jk83ukoma9] .medal-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

[b-jk83ukoma9] .medal-img {
    width: 45px;
    height: 62px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 4px;
    object-fit: contain;
}

[b-jk83ukoma9] .medal-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fffce0;
    border: 1px solid #c0a000;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    z-index: 999;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    border-radius: 3px;
    text-align: right;
    direction: rtl;
    line-height: 1.6;
    pointer-events: none;
    min-width: 120px;
}

[b-jk83ukoma9] .medal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #c0a000;
}

[b-jk83ukoma9] .medal-wrap:hover .medal-tooltip {
    display: block;
}

/* --- BB-Code column in medals table --- */
.bb-code[b-jk83ukoma9] {
    text-align: center;
    font-family: monospace;
    font-size: 12px;
    color: #555;
    user-select: all;
}

.bb-code code[b-jk83ukoma9] {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* --- Status badges (inside right-col) --- */
.status-badge[b-jk83ukoma9] {
    padding: 5px 10px;
    font-size: 11px;
    text-align: right;
    font-weight: bold;
    border-bottom: 1px solid #b5b5b5;
}

.status-badge.vacation[b-jk83ukoma9] { color: #996600; background: #fff3cd; }
.status-badge.admin[b-jk83ukoma9] { color: #cc0000; background: #ffcccc; }
.status-badge.founder[b-jk83ukoma9] { color: #b8860b; background: #fff8e1; }

/* --- Copy profile link icon --- */
.copy-link[b-jk83ukoma9] {
    cursor: pointer;
    font-size: 14px;
    margin-right: 6px;
    opacity: 0.6;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.copy-link:hover[b-jk83ukoma9] { opacity: 1; }

/* --- Column headers in medal table --- */
[b-jk83ukoma9] .col-headers th {
    background: #f4f4f4;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 5px;
    border-bottom: 1px solid #ccc;
}

/* --- Sitter remove button --- */
.btn-remove-sitter[b-jk83ukoma9] {
    background: none;
    border: 1px solid #c07070;
    color: #8b2020;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
}
.btn-remove-sitter:hover[b-jk83ukoma9] {
    background: #fee2e2;
}

/* ─── Winner Medals & Wonder Trophies ─── */

/* Wonder trophies: centered, larger */
.wonder-trophies-row[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
    padding: 8px 0 10px;
}

.wonder-trophy-card[b-jk83ukoma9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wonder-trophy-img[b-jk83ukoma9] {
    width: 72px;
    height: 72px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    object-fit: contain;
    border: 3px solid #c0a000;
    background: linear-gradient(135deg, #fffbea, #f4f1eb);
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
}

.wonder-trophy-img:hover[b-jk83ukoma9] {
    transform: scale(1.12);
    z-index: 2;
    box-shadow: 0 0 12px rgba(192,160,0,0.6);
    border-color: #ffd700;
}

.wonder-trophy-caption[b-jk83ukoma9] {
    font-size: 11px;
    font-weight: bold;
    color: #7a5200;
    text-align: center;
}

/* ─── Large wonder card used inside the wonder trophies section ─── */
[b-jk83ukoma9] .wonder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fffbea, #f4f1eb);
    border: 3px solid #c0a000;
    border-radius: 12px;
    padding: 10px 12px 12px;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    min-width: 100px;
}

[b-jk83ukoma9] .wonder-card:hover {
    transform: scale(1.08);
    z-index: 2;
    box-shadow: 0 0 14px rgba(192,160,0,0.6);
    border-color: #ffd700;
}

[b-jk83ukoma9] .wonder-card-img-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

[b-jk83ukoma9] .wonder-card-img {
    width: 90px;
    height: 90px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 8px;
    object-fit: contain;
}

[b-jk83ukoma9] .wonder-card-img:hover {
    transform: scale(1.12);
    z-index: 2;
    box-shadow: 0 0 12px rgba(192,160,0,0.6);
    border-color: #ffd700;
}

[b-jk83ukoma9] .wonder-card-caption {
    font-size: 12px;
    font-weight: bold;
    color: #7a5200;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-jk83ukoma9] .wonder-card-img-wrap:hover .medal-tooltip {
    display: block;
}

.wonder-trophy-caption[b-jk83ukoma9] {
    font-size: 11px;
    font-weight: bold;
    color: #7a5200;
    text-align: center;
}

/* Winner medals: compact grid, side by side */
.winner-medals-grid[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0 10px;
}

.winner-medal-card[b-jk83ukoma9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.winner-medal-img[b-jk83ukoma9] {
    width: 52px;
    height: 52px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    object-fit: contain;
    border: 2px solid #c0a000;
    background: linear-gradient(135deg, #fffbea, #f4f1eb);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

.winner-medal-img:hover[b-jk83ukoma9] {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 0 8px rgba(192,160,0,0.5);
    border-color: #ffd700;
}

.winner-medal-caption[b-jk83ukoma9] {
    font-size: 10px;
    font-weight: bold;
    color: #7a5200;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Legacy Wonder Trophy Card (kept for backward compat) ─── */
.wonder-trophies-section[b-jk83ukoma9] {
    margin: 16px 0;
    direction: rtl;
}

.wonder-trophies-title[b-jk83ukoma9] {
    font-size: 14px;
    font-weight: bold;
    color: #7a5200;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #d4a017;
}

.wonder-trophies-grid[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wonder-trophy-card[b-jk83ukoma9] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fffbea, #fff8e1);
    border: 1px solid #d4a017;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 160px;
}

.trophy-shield-img[b-jk83ukoma9] {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}

.trophy-info[b-jk83ukoma9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.trophy-winner-badge[b-jk83ukoma9] {
    font-weight: bold;
    color: #b8860b;
    font-size: 11px;
}

.trophy-server[b-jk83ukoma9] {
    font-weight: bold;
    color: #444;
    font-size: 12px;
}

.trophy-gold[b-jk83ukoma9] {
    color: #b8860b;
    font-size: 11px;
}

.trophy-date[b-jk83ukoma9] {
    color: #888;
    font-size: 11px;
}

/* ─── Sitter Permissions Tab ─── */
.perm-row[b-jk83ukoma9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
    direction: rtl;
}

.perm-row input[type="checkbox"][b-jk83ukoma9] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.perm-row.perm-sensitive[b-jk83ukoma9] {
    color: #b8860b;
    font-weight: bold;
}

.perm-row.perm-financial[b-jk83ukoma9] {
    color: #2e7d32;
    font-weight: bold;
}

.perm-row.perm-private[b-jk83ukoma9] {
    color: #6a1b9a;
    font-weight: bold;
}

.perm-row.perm-disabled[b-jk83ukoma9] {
    color: #999;
    text-decoration: line-through;
    opacity: 0.7;
}

.perm-group-header[b-jk83ukoma9] {
    background: linear-gradient(90deg, #4a3000, #6b4500);
    color: #ffd700;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 10px;
    text-align: right;
    border-bottom: 2px solid #8b6914;
    margin-top: 4px;
}

/* ─── Daily Medals (inside left-col, below weekly medals) ─── */
.daily-medals-divider[b-jk83ukoma9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    direction: rtl;
}

.daily-medals-divider-line[b-jk83ukoma9] {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, #c0a000, transparent);
}

.daily-medals-divider-text[b-jk83ukoma9] {
    font-size: 13px;
    font-weight: bold;
    color: #6b4500;
    background: linear-gradient(to bottom, #fffbea, #f4f1eb);
    padding: 3px 14px;
    border-radius: 12px;
    white-space: nowrap;
    border: 1px solid #d4a017;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.daily-medals-grid[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0 10px;
}

.individual-medals-grid[b-jk83ukoma9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0 10px;
}

[b-jk83ukoma9] .daily-medal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

[b-jk83ukoma9] .daily-medal-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

[b-jk83ukoma9] .daily-medal-img {
    width: 52px;
    height: 52px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    object-fit: contain;
    border: 2px solid #c0a000;
    background: linear-gradient(135deg, #fffbea, #f4f1eb);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

.daily-medal-img:hover[b-jk83ukoma9] {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 0 8px rgba(192,160,0,0.5);
    border-color: #ffd700;
}

/* ─── Individual Medals (inside left-col) ─── */
[b-jk83ukoma9] .medal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 2px solid #c0a000;
    border-radius: 8px;
    padding: 6px 8px 8px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
    min-width: 60px;
}

[b-jk83ukoma9] .medal-card:hover {
    transform: scale(1.08);
    z-index: 2;
    box-shadow: 0 0 8px rgba(192,160,0,0.5);
    border-color: #ffd700;
}

[b-jk83ukoma9] .medal-card-img-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

[b-jk83ukoma9] .medal-card-img {
    width: 45px;
    height: 62px;
    margin: 2px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 4px;
    object-fit: contain;
}

[b-jk83ukoma9] .medal-card-caption {
    font-size: 10px;
    font-weight: bold;
    color: #7a5200;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-jk83ukoma9] .medal-card-img-wrap:hover .medal-tooltip {
    display: block;
}

[b-jk83ukoma9] .daily-medal-rank {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to bottom, #8b6914, #6b4500);
    padding: 1px 8px;
    border-radius: 8px;
    min-width: 28px;
    text-align: center;
    border: 1px solid #c0a000;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

[b-jk83ukoma9] .daily-medal-wrap:hover .medal-tooltip {
    display: block;
}

/* ═══════════════ Shimmer / Glow Effects for Wonder & Winner Medals ═══════════════ */

/* --- Keyframes: diagonal light streak sweeping across the image --- */
@keyframes shimmer-sweep-b-jk83ukoma9 {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* ─── Wonder Card: shimmer sweep on the image ─── */
[b-jk83ukoma9] .wonder-card {
    position: relative;
}

/* Light streak overlay on the whole wonder card */
[b-jk83ukoma9] .wonder-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 40%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,215,0,0.35) 55%,
        transparent 65%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: shimmer-sweep-b-jk83ukoma9 6s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
}

/* ─── Winner Medal Card: shimmer sweep on the image ─── */
.winner-medals-grid[b-jk83ukoma9]  .medal-card {
    position: relative;
}

/* Light streak overlay on each winner medal card */
.winner-medals-grid[b-jk83ukoma9]  .medal-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 40%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,215,0,0.35) 55%,
        transparent 65%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: shimmer-sweep-b-jk83ukoma9 7s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
}

/* ═══════════════ Rotating Border on Special Divider Texts ═══════════════ */

/* --- Keyframes: rotating gradient border for wonder divider --- */
@keyframes wonder-border-spin-b-jk83ukoma9 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Keyframes: rotating gradient border for winner divider --- */
@keyframes winner-border-spin-b-jk83ukoma9 {
    0%   { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* Shared base for wonder & winner divider labels */
.wonder-divider-text[b-jk83ukoma9],
.winner-divider-text[b-jk83ukoma9] {
    position: relative;
    border: none !important;
    padding: 6px 20px !important;
    isolation: isolate;
    border-radius: 14px;
    overflow: hidden;
    font-size: 13px;
    font-weight: bold;
    color: #6b4500;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* ─── Wonder divider: rotating golden-cream gradient ring ─── */
.wonder-divider-text[b-jk83ukoma9]::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 60deg,
        #c0a000 90deg,
        #ffd700 110deg,
        #fff8dc 120deg,
        #ffd700 130deg,
        #c0a000 150deg,
        transparent 180deg,
        transparent 240deg,
        #c0a000 270deg,
        #ffd700 290deg,
        #fff8dc 300deg,
        #ffd700 310deg,
        #c0a000 330deg,
        transparent 360deg
    );
    animation: wonder-border-spin-b-jk83ukoma9 5s linear infinite;
    z-index: -2;
}

/* Inner fill: keeps the label background solid, only the ring shows */
.wonder-divider-text[b-jk83ukoma9]::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(to bottom, #fffbea, #f4f1eb);
    border-radius: 12px;
    z-index: -1;
}

/* ─── Winner divider: rotating white-gold gradient ring (reverse direction) ─── */
.winner-divider-text[b-jk83ukoma9]::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 30deg,
        #ffd700 50deg,
        #ffffff 70deg,
        #fff8dc 80deg,
        #ffffff 90deg,
        #ffd700 110deg,
        transparent 130deg,
        transparent 210deg,
        #ffd700 230deg,
        #ffffff 250deg,
        #fff8dc 260deg,
        #ffffff 270deg,
        #ffd700 290deg,
        transparent 310deg,
        transparent 360deg
    );
    animation: winner-border-spin-b-jk83ukoma9 6s linear infinite;
    z-index: -2;
}

.winner-divider-text[b-jk83ukoma9]::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(to bottom, #fffbea, #f4f1eb);
    border-radius: 12px;
    z-index: -1;
}

/* ═══════════════ Wonder Laurel Animation ═══════════════ */
/* Elements are created dynamically by wonderLaurel.js, so use ::deep */

/* SVG overlay covering the avatar container */
[b-jk83ukoma9] .wl-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}

/* Stems start hidden, then grow via stroke-dashoffset */
[b-jk83ukoma9] .wl-stem {
    stroke-dashoffset: var(--wl-len, 1000);
    opacity: 0;
}

[b-jk83ukoma9] .wl-svg.play .wl-stem {
    animation: wl-grow-b-jk83ukoma9 1.2s cubic-bezier(.35, .1, .25, 1) forwards;
}

@keyframes wl-grow-b-jk83ukoma9 {
    from {
        stroke-dashoffset: var(--wl-len, 1000);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Leaves start hidden, then pop in */
[b-jk83ukoma9] .wl-leaf {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 2% 50%;
}

[b-jk83ukoma9] .wl-svg.play .wl-leaf {
    animation: wl-leaf-pop-b-jk83ukoma9 .55s cubic-bezier(.34, 1.7, .5, 1) forwards;
}

@keyframes wl-leaf-pop-b-jk83ukoma9 {
    0% {
        opacity: 0;
        transform: scale(.05) rotate(-22deg);
    }
    55% {
        opacity: 1;
        transform: scale(1.18) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Berries and buds */
[b-jk83ukoma9] .wl-berry {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

[b-jk83ukoma9] .wl-svg.play .wl-berry {
    animation: wl-berry-pop-b-jk83ukoma9 .45s cubic-bezier(.34, 1.7, .5, 1) forwards;
}

@keyframes wl-berry-pop-b-jk83ukoma9 {
    0% {
        opacity: 0;
        transform: scale(.05) rotate(-22deg);
    }
    55% {
        opacity: 1;
        transform: scale(1.18) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Sparkles twinkle infinitely after branches grow */
[b-jk83ukoma9] .wl-spark {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

[b-jk83ukoma9] .wl-svg.play .wl-spark {
    animation: wl-twinkle-b-jk83ukoma9 2.6s ease-in-out infinite;
}

@keyframes wl-twinkle-b-jk83ukoma9 {
    0%, 100% {
        opacity: 0;
        transform: scale(.3) rotate(0);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(45deg);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [b-jk83ukoma9] .wl-stem,
    [b-jk83ukoma9] .wl-leaf,
    [b-jk83ukoma9] .wl-berry,
    [b-jk83ukoma9] .wl-spark {
        animation-duration: .001s !important;
        opacity: 1 !important;
    }
}
/* /Components/Pages/Social/AlliancePage.razor.rz.scp.css */
/* ==========================================================================
   AlliancePage.razor.css — Alliance System UI (Redesigned)
   Modern card-based layout with clean hierarchy & smooth interactions
   Same game color palette preserved
   ========================================================================== */

/* ─── Game Icon (replaces emojis with native game sprites) ─── */
.ali-icon[b-cvn9mxu3u1] {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
}

.ali-icon--xl[b-cvn9mxu3u1] {
    width: 64px;
    height: 64px;
}

.ali-icon--lg[b-cvn9mxu3u1] {
    width: 48px;
    height: 48px;
}

.ali-icon--md[b-cvn9mxu3u1] {
    width: 32px;
    height: 32px;
}

.ali-icon--sm[b-cvn9mxu3u1] {
    width: 24px;
    height: 24px;
}

.ali-icon--xs[b-cvn9mxu3u1] {
    width: 20px;
    height: 20px;
}

/* ─── Toast notification ─── */
.ali-toast[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 12px;
    animation: ali-slideIn-b-cvn9mxu3u1 0.3s ease;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ali-toast--ok[b-cvn9mxu3u1] {
    background: #fef9e7;
    border: 1px solid #d4b44a;
    color: #7a6320;
}

.ali-toast--error[b-cvn9mxu3u1] {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #C62828;
}

.ali-toast__icon[b-cvn9mxu3u1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.ali-toast--ok .ali-toast__icon[b-cvn9mxu3u1] {
    background: #d4b44a;
    color: #fff;
}

.ali-toast--error .ali-toast__icon[b-cvn9mxu3u1] {
    background: #EF5350;
    color: #fff;
}

.ali-toast__text[b-cvn9mxu3u1] {
    flex: 1;
}

.ali-toast__close[b-cvn9mxu3u1] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
    transition: opacity 0.15s;
}

.ali-toast__close:hover[b-cvn9mxu3u1] {
    opacity: 1;
}

@keyframes ali-slideIn-b-cvn9mxu3u1 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Alliance Header ─── */
.ali-header[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fdfdfd 0%, #ececec 100%);
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    font-family: Tahoma, Arial, sans-serif;
}

.ali-header__main[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ali-header__shield[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    line-height: 1;
}

.ali-header__info[b-cvn9mxu3u1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ali-header__name[b-cvn9mxu3u1] {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.ali-header__tag[b-cvn9mxu3u1] {
    font-size: 14px;
    font-weight: 600;
    color: #777;
}

.ali-header__stats[b-cvn9mxu3u1] {
    display: flex;
    gap: 6px;
}

.ali-header__stat[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    min-width: 64px;
}

.ali-header__stat-icon[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ali-header__stat-value[b-cvn9mxu3u1] {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
}

.ali-header__stat-label[b-cvn9mxu3u1] {
    font-size: 11px;
    color: #888;
}

/* ─── Main Tabs ─── */
.ali-tabs[b-cvn9mxu3u1] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f0f0f0;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
}

.ali-tab[b-cvn9mxu3u1] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    padding: 9px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.ali-tab:hover[b-cvn9mxu3u1] {
    background: #fff;
    color: #444;
}

.ali-tab--active[b-cvn9mxu3u1] {
    background: #fff;
    color: var(--text-link);
    border-color: var(--border-light, #d5d5d5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ali-tab__icon[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    line-height: 1;
}

.ali-tab__label[b-cvn9mxu3u1] {
    white-space: nowrap;
}

/* ─── Overview Layout ─── */
.ali-overview[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.ali-overview__top[b-cvn9mxu3u1] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
}

/* ─── Generic Card ─── */
.ali-card[b-cvn9mxu3u1] {
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ali-card--grow[b-cvn9mxu3u1] {
    flex: 1;
    min-width: 0;
}

.ali-card__header[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(to bottom, #fdfdfd 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: bold;
    color: #444;
}

.ali-card__icon[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    line-height: 1;
}

.ali-card__title[b-cvn9mxu3u1] {
    font-size: 14px;
}

.ali-card__body[b-cvn9mxu3u1] {
    padding: 12px 14px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Roles */
.ali-roles[b-cvn9mxu3u1] {
    padding: 10px 14px;
}

.ali-role[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.ali-role:not(:last-child)[b-cvn9mxu3u1] {
    border-bottom: 1px solid #f0f0f0;
}

.ali-role__badge[b-cvn9mxu3u1] {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #8B6914, #B8860B);
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.ali-role__name[b-cvn9mxu3u1] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 600;
}

.ali-role__name:hover[b-cvn9mxu3u1] {
    text-decoration: underline;
}

/* Forum link */
.ali-forum-link[b-cvn9mxu3u1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-link);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 6px;
    transition: background 0.15s;
}

.ali-forum-link:hover[b-cvn9mxu3u1] {
    background: #f5f5f5;
    text-decoration: underline;
}

/* Internal notice */
.ali-notice[b-cvn9mxu3u1] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFEF5;
    border: 1px solid #FFE082;
    border-radius: 8px;
    border-inline-start: 4px solid #d4b44a;
}

.ali-notice__icon[b-cvn9mxu3u1] {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    line-height: 1.3;
}

.ali-notice__content[b-cvn9mxu3u1] {
    flex: 1;
    min-width: 0;
}

.ali-notice__title[b-cvn9mxu3u1] {
    font-size: 13px;
    font-weight: bold;
    color: #8B6914;
    margin-bottom: 4px;
}

.ali-notice__body[b-cvn9mxu3u1] {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ─── Members Card ─── */
.ali-members-card[b-cvn9mxu3u1] {
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 14px;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ali-members-card__header[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(to bottom, #fdfdfd 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
}

.ali-members-card__title[b-cvn9mxu3u1] {
    font-size: 14px;
    font-weight: bold;
    color: #444;
}

.ali-members-card__count[b-cvn9mxu3u1] {
    font-size: 12px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 10px;
    border-radius: 10px;
}

/* ─── Table ─── */
.ali-table-wrap[b-cvn9mxu3u1] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ali-table[b-cvn9mxu3u1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
}

.ali-table thead tr[b-cvn9mxu3u1] {
    background: #fafafa;
}

.ali-table thead th[b-cvn9mxu3u1] {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-align: start;
    border-bottom: 2px solid #e8e8e8;
    text-transform: none;
    letter-spacing: 0;
}

.ali-table tbody tr[b-cvn9mxu3u1] {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.ali-table tbody tr:hover[b-cvn9mxu3u1] {
    background: #fafafa;
}

.ali-table tbody tr:last-child[b-cvn9mxu3u1] {
    border-bottom: none;
}

.ali-table tbody td[b-cvn9mxu3u1] {
    padding: 8px 12px;
    font-size: 14px;
    vertical-align: middle;
}

.ali-table__num[b-cvn9mxu3u1] {
    width: 36px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

.ali-table__player a[b-cvn9mxu3u1] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 500;
}

.ali-table__player a:hover[b-cvn9mxu3u1] {
    text-decoration: underline;
}

.ali-table__rank[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-start: 6px;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #8B6914, #B8860B);
    padding: 1px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.ali-table__pop[b-cvn9mxu3u1],
.ali-table__vil[b-cvn9mxu3u1] {
    text-align: center;
    width: 80px;
}

.ali-table__status[b-cvn9mxu3u1] {
    text-align: center;
    width: 44px;
}

.ali-hero-icon[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-start: 4px;
    vertical-align: middle;
}

.ali-hero-alive[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-start: 4px;
    vertical-align: middle;
}

.ali-attack-warning[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-end: 5px;
    vertical-align: middle;
}

.ali-attack-icon[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-end: 5px;
    vertical-align: middle;
}

.ali-hero-dead[b-cvn9mxu3u1] {
    display: inline-block;
    margin-inline-start: 4px;
    vertical-align: middle;
}

.ali-table__date[b-cvn9mxu3u1] {
    width: 130px;
    white-space: nowrap;
    color: #999;
    font-size: 13px;
}

.ali-table__empty[b-cvn9mxu3u1] {
    text-align: center;
    color: #aaa;
    padding: 30px 10px !important;
    font-size: 14px;
}

/* Status dots */
.ali-dot[b-cvn9mxu3u1] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.st-online[b-cvn9mxu3u1] {
    background: #4CAF50;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 6px rgba(76, 175, 80, 0.4);
}

.st-away[b-cvn9mxu3u1] {
    background: #FFC107;
}

.st-idle[b-cvn9mxu3u1] {
    background: #FF9800;
}

.st-offline[b-cvn9mxu3u1] {
    background: #F44336;
}

.st-inactive[b-cvn9mxu3u1] {
    background: #BDBDBD;
}

/* Compact table variant */
.ali-table--compact thead th[b-cvn9mxu3u1] {
    font-size: 12px;
    padding: 6px 10px;
}

.ali-table--compact tbody td[b-cvn9mxu3u1] {
    font-size: 13px;
    padding: 6px 10px;
}

/* ─── Attack Filters ─── */
.ali-attack-filters[b-cvn9mxu3u1] {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.ali-filter-btn[b-cvn9mxu3u1] {
    padding: 6px 16px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: 500;
}

.ali-filter-btn:hover[b-cvn9mxu3u1] {
    background: #f5f5f5;
    border-color: #ccc;
}

.ali-filter-btn--active[b-cvn9mxu3u1] {
    background: var(--text-link);
    color: #fff;
    border-color: var(--text-link);
}

/* ─── Panel (generic content container) ─── */
.ali-panel[b-cvn9mxu3u1] {
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ali-panel__title[b-cvn9mxu3u1] {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    background: linear-gradient(to bottom, #fdfdfd 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
}

/* ─── Options Layout (sidebar + content) ─── */
.ali-options-layout[b-cvn9mxu3u1] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    min-height: 300px;
}

.ali-options-sidebar[b-cvn9mxu3u1] {
    background: #fff;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    overflow: hidden;
    align-self: start;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ali-options-sidebar__title[b-cvn9mxu3u1] {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    background: linear-gradient(to bottom, #fdfdfd 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
}

.ali-options-nav[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
}

.ali-options-link[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: all 0.15s;
}

.ali-options-link:last-child[b-cvn9mxu3u1] {
    border-bottom: none;
}

.ali-options-link:hover[b-cvn9mxu3u1] {
    background: #f8f8f8;
    color: #333;
}

.ali-options-link--active[b-cvn9mxu3u1] {
    background: #f0f4ff;
    color: var(--text-link);
    font-weight: 600;
    border-inline-start: 3px solid var(--text-link);
}

.ali-options-link--danger[b-cvn9mxu3u1] {
    color: #C62828;
}

.ali-options-link--danger:hover[b-cvn9mxu3u1] {
    background: #FFF5F5;
}

.ali-options-link--danger.ali-options-link--active[b-cvn9mxu3u1] {
    background: #FFF5F5;
    color: #C62828;
    border-inline-start-color: #C62828;
}

.ali-options-link__icon[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

.ali-options-content[b-cvn9mxu3u1] {
    min-width: 0;
}

.ali-options-placeholder[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 240px;
    color: #bbb;
    font-size: 14px;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 8px;
    font-family: Tahoma, Arial, sans-serif;
}

.ali-options-placeholder__icon[b-cvn9mxu3u1] {
    opacity: 0.4;
}

/* ─── Form Controls ─── */
.ali-form[b-cvn9mxu3u1] {
    padding: 16px;
}

.ali-form__group[b-cvn9mxu3u1] {
    margin-bottom: 16px;
}

.ali-form__label[b-cvn9mxu3u1] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

.ali-form__input[b-cvn9mxu3u1],
.ali-form__select[b-cvn9mxu3u1] {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #FAFAFA;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: Tahoma, Arial, sans-serif;
}

.ali-form__input:focus[b-cvn9mxu3u1],
.ali-form__select:focus[b-cvn9mxu3u1] {
    outline: none;
    border-color: var(--text-link);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.ali-form__textarea[b-cvn9mxu3u1] {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #FAFAFA;
    color: #333;
    resize: vertical;
    font-family: Tahoma, Arial, sans-serif;
    box-sizing: border-box;
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ali-form__textarea:focus[b-cvn9mxu3u1] {
    outline: none;
    border-color: var(--text-link);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.ali-form__hint[b-cvn9mxu3u1] {
    font-size: 13px;
    color: #999;
    padding: 0 0 10px;
}

.ali-form__warning[b-cvn9mxu3u1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #FFF3E0;
    border: 1px solid #FFE0B2;
    border-radius: 6px;
    font-size: 14px;
    color: #E65100;
    line-height: 1.5;
}

.ali-form__actions[b-cvn9mxu3u1] {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

/* Checkboxes & Radios */
.ali-checkboxes[b-cvn9mxu3u1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ali-checkbox[b-cvn9mxu3u1],
.ali-radio[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

.ali-checkbox:hover[b-cvn9mxu3u1],
.ali-radio:hover[b-cvn9mxu3u1] {
    background: #f8f8f8;
}

.ali-checkbox input[b-cvn9mxu3u1],
.ali-radio input[b-cvn9mxu3u1] {
    accent-color: var(--text-link);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ali-radio-group[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Buttons ─── */
.ali-btn[b-cvn9mxu3u1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    text-decoration: none;
    font-family: Tahoma, Arial, sans-serif;
}

.ali-btn--primary[b-cvn9mxu3u1] {
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    color: #fff;
    border-color: #4a7522;
}

.ali-btn--primary:hover[b-cvn9mxu3u1] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

.ali-btn--primary:active[b-cvn9mxu3u1] {
    transform: scale(0.98);
}

.ali-btn--secondary[b-cvn9mxu3u1] {
    background: #fff;
    color: #666;
    border-color: #ccc;
}

.ali-btn--secondary:hover[b-cvn9mxu3u1] {
    background: #f5f5f5;
}

.ali-btn--danger[b-cvn9mxu3u1] {
    background: linear-gradient(to bottom, #EF5350, #C62828);
    color: #fff;
    border-color: #B71C1C;
}

.ali-btn--danger:hover[b-cvn9mxu3u1] {
    background: linear-gradient(to bottom, #F44336, #D32F2F);
}

.ali-btn--danger:active[b-cvn9mxu3u1] {
    transform: scale(0.98);
}

.ali-btn--sm[b-cvn9mxu3u1] {
    padding: 5px 14px;
    font-size: 13px;
}

.ali-btn-icon[b-cvn9mxu3u1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    background: none;
    line-height: 1;
}

.ali-btn-icon--danger[b-cvn9mxu3u1] {
    color: #C62828;
    border-color: #FFCDD2;
}

.ali-btn-icon--danger:hover[b-cvn9mxu3u1] {
    background: #FFEBEE;
}

.ali-btn-icon--ok[b-cvn9mxu3u1] {
    color: #2E7D32;
    border-color: #C8E6C9;
}

.ali-btn-icon--ok:hover[b-cvn9mxu3u1] {
    background: #E8F5E9;
}

/* ─── Diplomacy ─── */
.ali-diplo-section[b-cvn9mxu3u1] {
    margin: 0 16px 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.ali-diplo-group[b-cvn9mxu3u1] {
    margin-bottom: 14px;
}

.ali-diplo-group__title[b-cvn9mxu3u1] {
    font-size: 13px;
    font-weight: 700;
    color: #555;
    padding: 0 0 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.ali-diplo-badge[b-cvn9mxu3u1] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.ali-diplo-badge--confederation[b-cvn9mxu3u1] {
    background: #E8F5E9;
    color: #2E7D32;
}

.ali-diplo-badge--nonaggressionpact[b-cvn9mxu3u1] {
    background: #E3F2FD;
    color: #1565C0;
}

.ali-diplo-badge--war[b-cvn9mxu3u1] {
    background: #FFEBEE;
    color: #C62828;
}

/* ─── Panel danger variant ─── */
.ali-panel--danger[b-cvn9mxu3u1] {
    border-color: #FFCDD2;
}

.ali-panel--danger .ali-panel__title[b-cvn9mxu3u1] {
    background: linear-gradient(to bottom, #fff5f5, #ffe0e0);
    color: #C62828;
    border-bottom: 1px solid #FFCDD2;
}

/* ─── No Alliance View ─── */
.ali-no-alliance[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

.ali-no-alliance__hero[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 16px 20px;
    background: linear-gradient(135deg, #fdfdfd 0%, #ececec 100%);
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
}

.ali-no-alliance__icon[b-cvn9mxu3u1] {
    margin-bottom: 8px;
}

.ali-no-alliance__title[b-cvn9mxu3u1] {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 6px;
}

.ali-no-alliance__desc[b-cvn9mxu3u1] {
    font-size: 14px;
    color: #777;
    margin: 0;
}

.ali-invite-list[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
}

.ali-invite-row[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.ali-invite-row:last-child[b-cvn9mxu3u1] {
    border-bottom: none;
}

.ali-invite-row:hover[b-cvn9mxu3u1] {
    background: #fafafa;
}

.ali-invite-row__name[b-cvn9mxu3u1] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.ali-invite-row__name:hover[b-cvn9mxu3u1] {
    text-decoration: underline;
}

.ali-invite-row__actions[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ali-hint[b-cvn9mxu3u1] {
    font-size: 14px;
    color: #666;
    padding: 14px;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 8px;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1.5;
}

/* ==========================================================================
   Chat Panel
   ========================================================================== */

.ali-chat-panel[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light, #d5d5d5);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    max-width: 700px;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ali-chat-panel__header[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(to bottom, #fdfdfd 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
}

.ali-chat-panel__title[b-cvn9mxu3u1] {
    font-weight: bold;
    font-size: 14px;
    color: #444;
}

.ali-chat-panel__online[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4CAF50;
    font-weight: 600;
}

.ali-chat-panel__online-dot[b-cvn9mxu3u1] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CAF50;
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.ali-chat-messages[b-cvn9mxu3u1] {
    height: 380px;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8f8f8;
}

.ali-chat-empty[b-cvn9mxu3u1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #bbb;
    font-size: 14px;
}

.ali-chat-msg[b-cvn9mxu3u1] {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    border: 1px solid #e8e8e8;
    align-self: flex-start;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ali-chat-msg--mine[b-cvn9mxu3u1] {
    align-self: flex-end;
    background: #eef3ff;
    border-color: #d0dcf0;
    border-radius: 12px 12px 4px 12px;
}

.ali-chat-msg__sender[b-cvn9mxu3u1] {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-link);
    margin-bottom: 2px;
}

.ali-chat-msg__text[b-cvn9mxu3u1] {
    word-break: break-word;
    line-height: 1.45;
}

.ali-chat-msg__time[b-cvn9mxu3u1] {
    font-size: 11px;
    color: #aaa;
    align-self: flex-end;
    margin-top: 3px;
}

.ali-chat-input[b-cvn9mxu3u1] {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

.ali-chat-input__field[b-cvn9mxu3u1] {
    flex: 1;
    min-width: 0;
}

.ali-chat-input__send[b-cvn9mxu3u1] {
    white-space: nowrap;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 6px;
}

/* ==========================================================================
   Responsive — Tablet / Mobile
   ========================================================================== */
@media (max-width: 900px) {
    .ali-overview__top[b-cvn9mxu3u1] {
        grid-template-columns: 1fr;
    }

    .ali-options-layout[b-cvn9mxu3u1] {
        grid-template-columns: 1fr;
    }

    .ali-options-sidebar[b-cvn9mxu3u1],
    .ali-options-content[b-cvn9mxu3u1],
    .ali-panel[b-cvn9mxu3u1],
    .ali-members-card[b-cvn9mxu3u1],
    .ali-chat-panel[b-cvn9mxu3u1] {
        min-width: 0;
        max-width: 100%;
    }

    .ali-header__stats[b-cvn9mxu3u1] {
        width: 100%;
        justify-content: center;
    }

    .ali-checkboxes[b-cvn9mxu3u1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ali-header[b-cvn9mxu3u1] {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        border-radius: 6px;
    }

    .ali-header__main[b-cvn9mxu3u1] {
        justify-content: center;
    }

    .ali-header__stats[b-cvn9mxu3u1] {
        justify-content: center;
    }

    .ali-header__stat[b-cvn9mxu3u1] {
        flex: 1;
        min-width: 0;
    }

    .ali-tabs[b-cvn9mxu3u1] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        border-radius: 6px;
    }

    .ali-tab[b-cvn9mxu3u1] {
        flex-direction: column;
        gap: 2px;
        padding: 8px 4px;
        font-size: 12px;
        border-radius: 4px;
    }

    .ali-tab__icon .ali-icon[b-cvn9mxu3u1] {
        width: 18px;
        height: 18px;
    }

    .ali-options-layout[b-cvn9mxu3u1] {
        gap: 10px;
        min-height: 0;
    }

    .ali-options-sidebar[b-cvn9mxu3u1] {
        width: 100%;
    }

    .ali-options-sidebar__title[b-cvn9mxu3u1],
    .ali-panel__title[b-cvn9mxu3u1],
    .ali-members-card__header[b-cvn9mxu3u1],
    .ali-card__header[b-cvn9mxu3u1] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .ali-options-link[b-cvn9mxu3u1] {
        padding: 10px 12px;
        font-size: 13px;
    }

    .ali-options-placeholder[b-cvn9mxu3u1] {
        min-height: 140px;
        height: auto;
        padding: 16px 10px;
        text-align: center;
    }

    .ali-form[b-cvn9mxu3u1] {
        padding: 12px;
    }

    .ali-form__actions[b-cvn9mxu3u1],
    .ali-chat-input[b-cvn9mxu3u1],
    .ali-attack-filters[b-cvn9mxu3u1] {
        flex-wrap: wrap;
    }

    .ali-btn[b-cvn9mxu3u1],
    .ali-filter-btn[b-cvn9mxu3u1],
    .ali-chat-input__send[b-cvn9mxu3u1] {
        width: 100%;
        box-sizing: border-box;
    }

    .ali-attack-filters[b-cvn9mxu3u1] {
        gap: 6px;
        padding: 10px 12px;
    }

    .ali-chat-panel[b-cvn9mxu3u1] {
        max-width: 100%;
    }

    .ali-chat-messages[b-cvn9mxu3u1] {
        height: 300px;
        padding: 10px 12px;
    }

    .ali-chat-msg[b-cvn9mxu3u1] {
        max-width: 90%;
    }

    .ali-no-alliance__hero[b-cvn9mxu3u1] {
        padding: 20px 12px 16px;
    }

    .ali-no-alliance__icon .ali-icon[b-cvn9mxu3u1] {
        width: 32px;
        height: 32px;
    }

    /* --- Responsive Tables --- */
    .ali-table__num[b-cvn9mxu3u1],
    .ali-table__vil[b-cvn9mxu3u1],
    th.ali-table__num[b-cvn9mxu3u1],
    th.ali-table__vil[b-cvn9mxu3u1] {
        display: none !important;
    }

    .ali-table tbody td[b-cvn9mxu3u1],
    .ali-table thead th[b-cvn9mxu3u1] {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }

    .ali-table--responsive thead[b-cvn9mxu3u1] {
        display: none !important;
    }
    .ali-table--responsive tbody tr[b-cvn9mxu3u1] {
        display: block !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        padding: 8px 12px !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    .ali-table--responsive tbody td[b-cvn9mxu3u1] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        text-align: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .ali-table--responsive tbody td:last-child[b-cvn9mxu3u1] {
        border-bottom: none !important;
    }
    .ali-table--responsive tbody td[b-cvn9mxu3u1]::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        font-size: 12px;
        margin-inline-end: 8px;
    }
}

@media (max-width: 480px) {
    .ali-tabs[b-cvn9mxu3u1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ali-header__stat-value[b-cvn9mxu3u1] {
        font-size: 13px;
    }

    .ali-header__stat[b-cvn9mxu3u1] {
        padding: 5px 8px;
    }
}

/* ─── Join request badge in options sidebar ─── */
.ali-options-badge[b-cvn9mxu3u1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e00;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-inline-start: auto;
}

/* ─── Alliance conflict warning badge ─── */
.ali-conflict-badge[b-cvn9mxu3u1] {
    color: #C62828;
    font-weight: bold;
    font-size: 12px;
}

/* ─── Chat Interactive Links ─── */
.chat-link[b-cvn9mxu3u1] {
    color: var(--text-link, #4285F4);
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}

.chat-link:hover[b-cvn9mxu3u1] {
    color: #1a73e8;
    text-decoration: none;
}
/* /Components/Pages/Social/GlobalChat.razor.rz.scp.css */
/* ==========================================================================
   GlobalChat.razor.css — Global Chat System UI
   3-column layout: Rooms | Messages | Players
   ========================================================================== */

/* ─── Toast ─── */
.gc-toast[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 10px;
    animation: gc-fadeIn-b-a81wpw4b97 0.2s ease;
}

.gc-toast--ok[b-a81wpw4b97] {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    color: #2E7D32;
}

.gc-toast--error[b-a81wpw4b97] {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
    color: #C62828;
}

.gc-toast__close[b-a81wpw4b97] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
    opacity: 0.6;
    padding: 0 0 0 12px;
}

.gc-toast__close:hover[b-a81wpw4b97] {
    opacity: 1;
}

@keyframes gc-fadeIn-b-a81wpw4b97 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Badge Circle System (colored circles + hover tooltip) ─── */

.gc-badge-system[b-a81wpw4b97] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

.gc-badge-system--sidebar[b-a81wpw4b97] {
    margin-inline-start: auto;
    gap: 2px;
}

.gc-badge-circle[b-a81wpw4b97] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    border: 1px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    cursor: help;
    transition: transform 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.gc-badge-circle:hover[b-a81wpw4b97] {
    transform: scale(1.15);
}

/* Color variants */
.gc-badge-circle--newbie[b-a81wpw4b97]      { background-color: #dcfce7; color: #16a34a; }
.gc-badge-circle--warrior[b-a81wpw4b97]     { background-color: #ffedd5; color: #c2410c; }
.gc-badge-circle--commander[b-a81wpw4b97]   { background-color: #e0e7ff; color: #4338ca; }
.gc-badge-circle--emperor[b-a81wpw4b97]     { background-color: #fef3c7; color: #ca8a04; }
.gc-badge-circle--legend[b-a81wpw4b97]      { background-color: #fef9c3; color: #a16207; box-shadow: 0 0 6px rgba(255,215,0,0.3); }
.gc-badge-circle--champion[b-a81wpw4b97]    { background-color: #fef3c7; color: #b45309; }
.gc-badge-circle--fighter[b-a81wpw4b97]     { background-color: #fee2e2; color: #dc2626; }
.gc-badge-circle--fortress[b-a81wpw4b97]    { background-color: #dbeafe; color: #2563eb; }
.gc-badge-circle--founder[b-a81wpw4b97]     { background-color: #d1fae5; color: #059669; }
.gc-badge-circle--vip[b-a81wpw4b97]         { background-color: #f3e8ff; color: #9333ea; }
.gc-badge-circle--default[b-a81wpw4b97]     { background-color: #f1f5f9; color: #475569; }

/* "+N more" counter circle */
.gc-badge-circle--more[b-a81wpw4b97] {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: bold;
    font-size: 10px;
    cursor: help;
}

/* Tooltip inside entrance card — slightly larger */
.gc-badge-circle--entrance[b-a81wpw4b97] {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* Tooltip circle — inside tooltip items, no pointer/hover effect */
.gc-badge-circle--tooltip[b-a81wpw4b97] {
    cursor: default;
    box-shadow: none;
    border: none;
    border-radius: 6px;
}

.gc-badge-circle--tooltip:hover[b-a81wpw4b97] {
    transform: none;
}

/* Tooltip dropdown */
.gc-badge-tooltip[b-a81wpw4b97] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    z-index: 100;
    width: max-content;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s ease;
    transform: translateY(-5px);
}

.gc-badge-system:hover .gc-badge-tooltip[b-a81wpw4b97] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.gc-badge-tooltip__header[b-a81wpw4b97] {
    font-size: 11px;
    color: #64748b;
    font-weight: bold;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 4px;
    margin-bottom: 2px;
    text-align: right;
}

.gc-badge-tooltip__item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #334155;
    padding: 4px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.gc-badge-tooltip__item:hover[b-a81wpw4b97] {
    background-color: #f8fafc;
}

/* ═══════════════════════════════════════════════════
   Main Layout — 3 Column Grid
   ═══════════════════════════════════════════════════ */

.gc-layout[b-a81wpw4b97] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100vh - 140px);
    min-height: 400px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.gc-layout > .gc-sidebar--rooms[b-a81wpw4b97],
.gc-layout > .gc-sidebar--players[b-a81wpw4b97],
.gc-layout > .gc-main[b-a81wpw4b97] {
    display: none;
}

.gc-layout[data-mobile-tab="0"] > .gc-sidebar--rooms[b-a81wpw4b97] {
    display: flex;
}

.gc-layout[data-mobile-tab="1"] > .gc-main[b-a81wpw4b97] {
    display: flex;
}

.gc-layout[data-mobile-tab="2"] > .gc-sidebar--players[b-a81wpw4b97] {
    display: flex;
}

/* ═══════════════════════════════════════════════════
   Sidebars (Rooms + Players)
   ═══════════════════════════════════════════════════ */

.gc-sidebar[b-a81wpw4b97] {
    flex-direction: column;
    background: var(--bg-table-head, #F7F7F7);
    border-inline-end: none;
    overflow: hidden;
    min-width: 0;
}

.gc-sidebar--players[b-a81wpw4b97] {
    border-inline-start: none;
    position: relative;
}

.gc-sidebar__header[b-a81wpw4b97] {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
    background: var(--bg-table-head);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    letter-spacing: 0.2px;
}

.gc-sidebar__footer[b-a81wpw4b97] {
    padding: 6px 8px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* ─── Room List ─── */

.gc-room-list[b-a81wpw4b97] {
    flex: 1;
    overflow-y: auto;
}

.gc-room-item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    color: var(--text-primary);
}

.gc-room-item:hover[b-a81wpw4b97] {
    background: #EAEAEA;
}

.gc-room-item--active[b-a81wpw4b97] {
    background: #EBF5E6;
    color: var(--text-link);
    font-weight: 600;
    border-inline-start: 3px solid var(--text-link);
}

.gc-room-item__icon[b-a81wpw4b97] {
    font-size: 14px;
    flex-shrink: 0;
}

.gc-room-item__name[b-a81wpw4b97] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.gc-room-item__unread[b-a81wpw4b97] {
    background: #E53935;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
    animation: gc-fadeIn-b-a81wpw4b97 0.2s ease;
}

/* Create room */
.gc-create-room[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.gc-create-room__type[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    padding: 2px 0;
}

.gc-create-room__type input[type="checkbox"][b-a81wpw4b97] {
    accent-color: #7B1FA2;
}

/* ─── Player List ─── */

.gc-player-list[b-a81wpw4b97] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.gc-player-group[b-a81wpw4b97] {
    margin-bottom: 4px;
}

.gc-player-group__title[b-a81wpw4b97] {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.gc-player-item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.gc-player-item:hover[b-a81wpw4b97] {
    background: #EAEAEA;
}

.gc-player-dot[b-a81wpw4b97] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gc-dot--online[b-a81wpw4b97] {
    background: #4CAF50;
}

.gc-dot--away[b-a81wpw4b97] {
    background: #FFC107;
}

.gc-dot--busy[b-a81wpw4b97] {
    background: #F44336;
}

.gc-dot--offline[b-a81wpw4b97] {
    background: #BDBDBD;
}

.gc-player-item__name[b-a81wpw4b97] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Player Profile Modal ─── */

.gc-modal-overlay[b-a81wpw4b97] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.gc-profile-modal[b-a81wpw4b97] {
    background-color: #ffffff;
    width: 550px;
    max-width: 95vw;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d1d5db;
    animation: gc-modalIn-b-a81wpw4b97 0.2s ease;
}

@keyframes gc-modalIn-b-a81wpw4b97 {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─ Modal Header ─ */
.gc-modal-header[b-a81wpw4b97] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 10px 20px;
}

.gc-modal-close[b-a81wpw4b97] {
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px;
}

.gc-modal-close:hover[b-a81wpw4b97] {
    color: #d32f2f;
}

.gc-modal-user-info[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.gc-modal-username[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.gc-modal-alliance[b-a81wpw4b97] {
    font-size: 12px;
    color: var(--text-link, #508D2E);
    font-weight: 600;
}

.gc-modal-status[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #3bca5b;
}

.gc-status-dot[b-a81wpw4b97] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.gc-status-dot--online[b-a81wpw4b97] {
    background-color: #3bca5b;
}

.gc-status-dot--offline[b-a81wpw4b97] {
    background-color: #999;
}

.gc-modal-badges[b-a81wpw4b97] {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* ─ Modal Tabs ─ */
.gc-modal-tabs[b-a81wpw4b97] {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
    margin-top: 10px;
}

.gc-modal-tab[b-a81wpw4b97] {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.gc-modal-tab:hover[b-a81wpw4b97] {
    color: #334155;
    background-color: #f1f5f9;
}

.gc-modal-tab--active[b-a81wpw4b97] {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: #ffffff;
}

.gc-modal-tab i[b-a81wpw4b97] {
    font-size: 14px;
}

/* ─ Modal Tab Content ─ */
.gc-modal-tab-content[b-a81wpw4b97] {
    animation: gc-tabFadeIn-b-a81wpw4b97 0.3s ease;
}

@keyframes gc-tabFadeIn-b-a81wpw4b97 {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─ Profile Tab: Stats ─ */
.gc-modal-stats[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 20px;
    gap: 5px;
    font-size: 13px;
    color: #555;
    margin-top: 15px;
}

.gc-stat-item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
}

.gc-stat-item i[b-a81wpw4b97] {
    width: 16px;
    text-align: center;
}

.gc-stat--rank i[b-a81wpw4b97] { color: #d98d4f; }
.gc-stat--pop i[b-a81wpw4b97] { color: #4a3b69; }
.gc-stat--villages i[b-a81wpw4b97] { color: #c0392b; }
.gc-stat--attack i[b-a81wpw4b97] { color: #7f8c8d; }
.gc-stat--defense i[b-a81wpw4b97] { color: #3498db; }

/* ─ Profile Tab: Meta ─ */
.gc-modal-meta[b-a81wpw4b97] {
    text-align: left;
    padding: 10px 20px;
    font-size: 11px;
    color: #888;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}

/* ─ Profile Tab: Action Buttons ─ */
.gc-modal-actions[b-a81wpw4b97] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
}

.gc-modal-btn[b-a81wpw4b97] {
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    transition: all 0.2s;
    text-decoration: none;
}

.gc-modal-btn:hover[b-a81wpw4b97] {
    background-color: #f4f5f7;
}

.gc-modal-btn--primary[b-a81wpw4b97] {
    background-color: #2e8b57;
    border-color: #2e8b57;
    color: white;
}

.gc-modal-btn--primary:hover[b-a81wpw4b97] {
    background-color: #246d44;
}

.gc-modal-btn i[b-a81wpw4b97] {
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════
   Admin Tab — Card-Based Admin Sections
   ═══════════════════════════════════════════════════ */

.gc-admin-section[b-a81wpw4b97] {
    background-color: #ffffff;
    padding: 15px 20px;
    max-height: 320px;
    overflow-y: auto;
}

.gc-admin-section[b-a81wpw4b97]::-webkit-scrollbar {
    width: 6px;
}

.gc-admin-section[b-a81wpw4b97]::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 10px;
}

.gc-admin-section[b-a81wpw4b97]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.gc-admin-section[b-a81wpw4b97]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.gc-admin-grid[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gc-admin-card[b-a81wpw4b97] {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.gc-admin-card--danger[b-a81wpw4b97] {
    border-color: #fca5a5;
    background-color: #fef2f2;
}

.gc-admin-card__title[b-a81wpw4b97] {
    font-size: 12px;
    font-weight: bold;
    color: #475569;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.gc-admin-card--danger .gc-admin-card__title[b-a81wpw4b97] {
    color: #dc2626;
    border-bottom-color: #fee2e2;
}

/* ─ Admin Form Layout ─ */
.gc-admin-form-row[b-a81wpw4b97] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.gc-admin-form-row:last-child[b-a81wpw4b97] {
    margin-bottom: 0;
}

.gc-admin-form-group[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.gc-admin-form-group--auto[b-a81wpw4b97] {
    flex: 0 0 auto;
}

.gc-admin-label[b-a81wpw4b97] {
    font-size: 11px;
    color: #64748b;
    font-weight: bold;
}

.gc-admin-danger-divider[b-a81wpw4b97] {
    border-right: 1px solid #fca5a5;
    padding-right: 10px;
    margin-right: 5px;
}

/* ─ Unified Form Controls ─ */
.gc-ui-input[b-a81wpw4b97],
.gc-ui-select[b-a81wpw4b97] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
    width: 100%;
    color: var(--text-primary, #333);
}

.gc-ui-input:focus[b-a81wpw4b97],
.gc-ui-select:focus[b-a81wpw4b97] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}

.gc-ui-input--icon[b-a81wpw4b97] {
    width: 50px;
    text-align: center;
    font-size: 16px;
}

.gc-ui-btn[b-a81wpw4b97] {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.gc-ui-btn:hover[b-a81wpw4b97] {
    filter: brightness(0.95);
}

.gc-ui-btn:active[b-a81wpw4b97] {
    transform: scale(0.98);
}

.gc-ui-btn--success[b-a81wpw4b97] { background-color: #10b981; color: white; }
.gc-ui-btn--danger[b-a81wpw4b97] { background-color: #ef4444; color: white; }
.gc-ui-btn--warning[b-a81wpw4b97] { background-color: #f59e0b; color: white; }
.gc-ui-btn--default[b-a81wpw4b97] { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.gc-ui-btn--icon[b-a81wpw4b97] { padding: 0; width: 34px; }

.gc-ui-btn--danger-outline[b-a81wpw4b97] {
    background-color: transparent;
    color: #ef4444;
    border: 1px solid #fca5a5;
}

.gc-ui-btn--danger-outline:hover[b-a81wpw4b97] {
    background-color: #fef2f2;
}

/* ═══════════════════════════════════════════════════
   Center — Messages
   ═══════════════════════════════════════════════════ */

.gc-main[b-a81wpw4b97] {
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.gc-main__header[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-table-head);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.gc-main__title[b-a81wpw4b97] {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-heading);
}

.gc-main__desc[b-a81wpw4b97] {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pinned bar */
.gc-pinned-bar[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #FFFDE7;
    border-bottom: 1px solid #FFE082;
    font-size: 11px;
    color: #8B6914;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
}

.gc-pinned-bar:hover[b-a81wpw4b97] {
    background: #FFF8E1;
}

.gc-pinned-bar__icon[b-a81wpw4b97] {
    font-size: 12px;
}

.gc-pinned-bar__text[b-a81wpw4b97] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-pinned-bar__count[b-a81wpw4b97] {
    font-weight: 600;
    font-size: 10px;
}

.gc-pinned-bar__toggle[b-a81wpw4b97] {
    font-size: 10px;
    opacity: 0.6;
}

/* Pinned overlay */
.gc-pinned-overlay[b-a81wpw4b97] {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    max-height: 50vh;
    background: #FFFDE7;
    border: 1px solid #FFE082;
    border-radius: 8px;
    z-index: 60;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: gc-fadeIn-b-a81wpw4b97 0.2s ease;
}

.gc-pinned-overlay__header[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #FFE082;
    font-size: 12px;
    font-weight: 600;
    color: #8B6914;
}

.gc-pinned-overlay__list[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gc-pinned-overlay__item[b-a81wpw4b97] {
    padding: 8px 12px;
    border-bottom: 1px solid #FFF3C4;
}

.gc-pinned-overlay__item:last-child[b-a81wpw4b97] {
    border-bottom: none;
}

.gc-pinned-overlay__sender[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-bottom: 4px;
}

.gc-pinned-overlay__time[b-a81wpw4b97] {
    margin-right: auto;
    font-size: 10px;
    color: #A0A0A0;
}

.gc-pinned-overlay__text[b-a81wpw4b97] {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* Messages area */
.gc-messages[b-a81wpw4b97] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #FAFAFA;
}

.gc-messages__empty[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   Message Bubble
   ═══════════════════════════════════════════════════ */

.gc-bubble[b-a81wpw4b97] {
    position: relative;
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    align-self: flex-start;
    font-size: 13px;
    animation: gc-slideIn-b-a81wpw4b97 0.2s ease;
    line-height: 1.5;
    overflow: visible;
}

.gc-bubble:not(.gc-bubble--system)[b-a81wpw4b97] {
    cursor: pointer;
}

.gc-bubble--mine[b-a81wpw4b97] {
    align-self: flex-end;
    background: #E8F5E9;
    border-color: #A5D6A7;
}

.gc-bubble--system[b-a81wpw4b97] {
    align-self: center;
    max-width: 90%;
    background: transparent;
    border: none;
    padding: 3px 0;
}

.gc-bubble__system-text[b-a81wpw4b97] {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    display: block;
}

@keyframes gc-slideIn-b-a81wpw4b97 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sender line */
.gc-bubble__sender[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.gc-bubble__name[b-a81wpw4b97] {
    font-weight: 600;
    font-size: 11px;
}

/* Role-based name colors */
.gc-name--owner[b-a81wpw4b97] { color: #DAA520; }
.gc-name--admin[b-a81wpw4b97] { color: #e74c3c; }
.gc-name--moderator[b-a81wpw4b97] { color: #3498db; }
.gc-name--vip[b-a81wpw4b97] { color: #9b59b6; }
.gc-name--member[b-a81wpw4b97] { color: var(--text-heading); }
.gc-name--muted[b-a81wpw4b97] { color: #999; }

/* Role badges */
.gc-badge[b-a81wpw4b97] {
    font-size: 12px;
    line-height: 1;
}

/* Owner: gold shimmer on bubble accent */
.gc-bubble--owner:not(.gc-bubble--mine)[b-a81wpw4b97] {
    border-inline-start: 3px solid #DAA520;
    box-shadow: -2px 0 8px rgba(218,165,32,0.15);
}

/* Reply quote */
.gc-bubble__reply-quote[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    margin-bottom: 4px;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    border-inline-start: 2px solid var(--text-link);
    font-size: 11px;
}

.gc-bubble__reply-name[b-a81wpw4b97] {
    font-weight: 600;
    color: var(--text-link);
    font-size: 10px;
}

.gc-bubble__reply-text[b-a81wpw4b97] {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message text */
.gc-bubble__text[b-a81wpw4b97] {
    word-break: break-word;
    line-height: 1.5;
}

/* Footer */
.gc-bubble__footer[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.gc-bubble__time[b-a81wpw4b97] {
    font-size: 10px;
    color: #999;
}

.gc-bubble__pin-icon[b-a81wpw4b97] {
    font-size: 10px;
}

/* Reactions */
.gc-reactions[b-a81wpw4b97] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.gc-reaction:hover[b-a81wpw4b97] {
    background: #EEEEEE;
    border-color: #BDBDBD;
}

.gc-reaction__count[b-a81wpw4b97] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Hover actions */
.gc-bubble__actions[b-a81wpw4b97] {
    display: none;
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    max-width: calc(100% - 12px);
    gap: 1px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    z-index: 5;
    flex-wrap: wrap;
}

.gc-bubble__actions--visible[b-a81wpw4b97] {
    display: flex;
}

.gc-action-btn[b-a81wpw4b97] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.15s;
    line-height: 1;
}

.gc-action-btn:hover[b-a81wpw4b97] {
    background: #F0F0F0;
}

.gc-action-btn--danger:hover[b-a81wpw4b97] {
    background: #FFEBEE;
}

/* ═══════════════════════════════════════════════════
   Reply Preview
   ═══════════════════════════════════════════════════ */

.gc-reply-preview[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #F3F4F6;
    border-top: 1px solid var(--border-light);
    font-size: 12px;
    flex-shrink: 0;
}

.gc-reply-preview__label[b-a81wpw4b97] {
    font-weight: 600;
    color: var(--text-link);
    white-space: nowrap;
}

.gc-reply-preview__text[b-a81wpw4b97] {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-reply-preview__close[b-a81wpw4b97] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0;
}

.gc-reply-preview__close:hover[b-a81wpw4b97] {
    color: #C62828;
}

/* ═══════════════════════════════════════════════════
   Input Bar
   ═══════════════════════════════════════════════════ */

.gc-input-bar[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-light);
    background: #fff;
    flex-shrink: 0;
}

.gc-input-bar__muted[b-a81wpw4b97] {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 6px 0;
}

.gc-input-bar__field[b-a81wpw4b97] {
    flex: 1;
}

.gc-input-bar__send[b-a81wpw4b97] {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   Shared: Inputs & Buttons
   ═══════════════════════════════════════════════════ */

.gc-input[b-a81wpw4b97] {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 6px;
    background: #FAFAFA;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.gc-input:focus[b-a81wpw4b97] {
    outline: none;
    border-color: var(--text-link);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(80,141,46,0.1);
}

.gc-input--sm[b-a81wpw4b97] {
    padding: 5px 8px;
    font-size: 11px;
}

.gc-btn[b-a81wpw4b97] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-primary);
    background: #fff;
    border-color: var(--border-medium, #ccc);
}

.gc-btn:hover[b-a81wpw4b97] {
    background: #f5f5f5;
}

.gc-btn--primary[b-a81wpw4b97] {
    background: linear-gradient(to bottom, #6BAF4A, #4A8C31);
    color: #fff;
    border-color: #3E7B27;
}

.gc-btn--primary:hover[b-a81wpw4b97] {
    background: linear-gradient(to bottom, #7CC45A, #55993A);
}

.gc-btn--danger[b-a81wpw4b97] {
    background: linear-gradient(to bottom, #EF5350, #C62828);
    color: #fff;
    border-color: #B71C1C;
}

.gc-btn--danger:hover[b-a81wpw4b97] {
    background: linear-gradient(to bottom, #F44336, #D32F2F);
}

.gc-btn--sm[b-a81wpw4b97] {
    padding: 4px 10px;
    font-size: 11px;
}

.gc-btn--full[b-a81wpw4b97] {
    width: 100%;
}

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

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .gc-layout[b-a81wpw4b97] {
        height: calc(100vh - 120px);
    }
}

@media (max-width: 900px) {
    .gc-layout[b-a81wpw4b97] {
        height: calc(100vh - 110px);
    }
}

/* ═══════════════════════════════════════════════════
   Phase 3+4 Enhancements
   ═══════════════════════════════════════════════════ */

/* ─── Badge Pills ─── */

.gc-badge-pill[b-a81wpw4b97] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: default;
}

.gc-badge-pill--sm[b-a81wpw4b97] {
    font-size: 11px;
}

.gc-badge-pill--xs[b-a81wpw4b97] {
    font-size: 10px;
}

/* ─── Player Card Legacy (kept for compatibility) ─── */

.gc-select[b-a81wpw4b97] {
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 3px;
    background: #FAFAFA;
    color: var(--text-primary);
    cursor: pointer;
}

.gc-select--sm[b-a81wpw4b97] {
    padding: 3px 6px;
    font-size: 10px;
}

/* ─── Header Actions ─── */

.gc-main__header-actions[b-a81wpw4b97] {
    display: flex;
    gap: 2px;
    margin-inline-start: auto;
}

.gc-main__online[b-a81wpw4b97] {
    font-size: 11px;
    color: #4CAF50;
    font-weight: 600;
    white-space: nowrap;
}

/* ─── Search Bar ─── */

.gc-search-bar[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: #F3F4F6;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.gc-search-bar__input[b-a81wpw4b97] {
    flex: 1;
}

.gc-search-results[b-a81wpw4b97] {
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.gc-search-result[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
    animation: gc-fadeIn-b-a81wpw4b97 0.15s ease;
}

.gc-search-result__name[b-a81wpw4b97] {
    font-weight: 600;
    color: var(--text-heading);
    font-size: 10px;
}

.gc-search-result__text[b-a81wpw4b97] {
    color: var(--text-primary);
    margin-top: 1px;
}

.gc-search-result__time[b-a81wpw4b97] {
    color: #999;
    font-size: 9px;
    margin-top: 2px;
}

/* ─── Overlay Panels (Mod Logs / Room Settings) ─── */

.gc-overlay-panel[b-a81wpw4b97] {
    position: absolute;
    top: 40px;
    left: 10px;
    right: 10px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 20;
    animation: gc-fadeIn-b-a81wpw4b97 0.2s ease;
    max-height: 60%;
    display: flex;
    flex-direction: column;
}

.gc-overlay-panel--mod[b-a81wpw4b97] {
    max-height: 50%;
}

.gc-overlay-panel__header[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    background: var(--bg-table-head);
    border-bottom: 1px solid var(--border-light);
    border-radius: 6px 6px 0 0;
    flex-shrink: 0;
}

.gc-overlay-panel__close[b-a81wpw4b97] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0;
}

.gc-overlay-panel__close:hover[b-a81wpw4b97] {
    color: #C62828;
}

.gc-overlay-panel__body[b-a81wpw4b97] {
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1;
}

.gc-overlay-panel__actions[b-a81wpw4b97] {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.gc-label[b-a81wpw4b97] {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 6px 0 3px;
}

/* ─── Moderation Logs ─── */

.gc-mod-logs__empty[b-a81wpw4b97] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 11px;
    font-style: italic;
    padding: 16px;
}

.gc-mod-log[b-a81wpw4b97] {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 11px;
}

.gc-mod-log__action[b-a81wpw4b97] {
    font-weight: 600;
}

.gc-mod-log__detail[b-a81wpw4b97] {
    color: var(--text-secondary);
    font-size: 10px;
}

.gc-mod-log__reason[b-a81wpw4b97] {
    color: #e67e22;
    font-size: 10px;
    font-style: italic;
}

.gc-mod-log__time[b-a81wpw4b97] {
    color: #bbb;
    font-size: 9px;
}

/* ─── Emoji Picker ─── */

.gc-emoji-picker[b-a81wpw4b97] {
    position: absolute;
    bottom: 50px;
    left: 10px;
    width: 280px;
    max-height: 260px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 25;
    display: flex;
    flex-direction: column;
    animation: gc-fadeIn-b-a81wpw4b97 0.15s ease;
}

.gc-emoji-picker__header[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.gc-emoji-picker__close[b-a81wpw4b97] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}

.gc-emoji-picker__grid[b-a81wpw4b97] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 6px;
    overflow-y: auto;
    flex: 1;
}

.gc-emoji-picker__item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 18px;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}

.gc-emoji-picker__item:hover[b-a81wpw4b97] {
    background: #F5F5F5;
    transform: scale(1.2);
}

/* ─── @Mention Popup ─── */

.gc-mention-popup[b-a81wpw4b97] {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 15;
    max-height: 160px;
    overflow-y: auto;
    animation: gc-fadeIn-b-a81wpw4b97 0.15s ease;
}

.gc-mention-item[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.1s;
}

.gc-mention-item:hover[b-a81wpw4b97] {
    background: #EBF5E6;
}

/* ─── Input Bar Wrapper ─── */

.gc-input-bar__wrapper[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}

.gc-input-bar__emoji-btn[b-a81wpw4b97] {
    font-size: 16px;
    flex-shrink: 0;
}

/* ─── Advanced Animations ─── */

/* Delete animation (shrinkOut) */
@keyframes gc-shrinkOut-b-a81wpw4b97 {
    from { opacity: 1; transform: scale(1); max-height: 200px; }
    to { opacity: 0; transform: scale(0.95); max-height: 0; padding: 0; margin: 0; }
}

/* Pin glow animation */
@keyframes gc-pinGlow-b-a81wpw4b97 {
    0% { box-shadow: 0 0 0 0 rgba(255,213,79,0.6); }
    50% { box-shadow: 0 0 8px 2px rgba(255,213,79,0.4); }
    100% { box-shadow: none; }
}

.gc-bubble--pinned[b-a81wpw4b97] {
    border-color: #FFD54F;
    background: #FFFDE7;
    animation: gc-pinGlow-b-a81wpw4b97 0.6s ease;
}

/* Mention highlight */
@keyframes gc-mentionShake-b-a81wpw4b97 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* ─── Role-specific visual effects ─── */

/* Owner: gold shimmer */
@keyframes gc-goldShimmer-b-a81wpw4b97 {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.gc-name--owner[b-a81wpw4b97] {
    color: #DAA520;
    background: linear-gradient(90deg, #DAA520 30%, #FFD700 50%, #DAA520 70%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gc-goldShimmer-b-a81wpw4b97 3s linear infinite;
}

/* Admin: subtle glow on bubble */
.gc-bubble--admin:not(.gc-bubble--mine)[b-a81wpw4b97] {
    border-inline-start: 3px solid #e74c3c;
    box-shadow: -2px 0 6px rgba(231,76,60,0.1);
}

/* Moderator accent */
.gc-bubble--moderator:not(.gc-bubble--mine)[b-a81wpw4b97] {
    border-inline-start: 3px solid #3498db;
}

/* VIP: gradient background */
.gc-bubble--vip:not(.gc-bubble--mine)[b-a81wpw4b97] {
    border-inline-start: 3px solid #9b59b6;
    background: linear-gradient(135deg, #fff 0%, #F3E5F5 100%);
}

/* ─── Reaction Animations ─── */

@keyframes gc-reactionPop-b-a81wpw4b97 {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes gc-heartPulse-b-a81wpw4b97 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes gc-laughShake-b-a81wpw4b97 {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.gc-reaction[b-a81wpw4b97] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 14px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    animation: gc-reactionPop-b-a81wpw4b97 0.25s ease;
}

.gc-reaction--mine[b-a81wpw4b97] {
    background: #E3F2FD;
    border-color: #90CAF9;
}

/* ═══════════════════════════════════════════════════
   Phase 5: Text Formatting, Load-more, Mobile Tabs
   ═══════════════════════════════════════════════════ */

/* ─── Text Formatting ─── */

.gc-fmt-bold[b-a81wpw4b97] {
    font-weight: 700;
}

.gc-fmt-italic[b-a81wpw4b97] {
    font-style: italic;
}

.gc-fmt-code[b-a81wpw4b97] {
    font-family: 'Consolas', 'Courier New', monospace;
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    color: #c7254e;
}

.gc-mention[b-a81wpw4b97] {
    color: var(--text-link, #508D2E);
    font-weight: 600;
    background: rgba(80,141,46,0.08);
    padding: 0 2px;
    border-radius: 2px;
    cursor: pointer;
}

/* ─── Load More Spinner ─── */

.gc-load-more[b-a81wpw4b97] {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    animation: gc-fadeIn-b-a81wpw4b97 0.2s ease;
}

.gc-load-more--end[b-a81wpw4b97] {
    font-style: italic;
    color: #bbb;
}

/* ─── Mobile Tab Bar ─── */

.gc-mobile-tabs[b-a81wpw4b97] {
    display: flex;
    grid-column: 1 / -1;
    background: var(--bg-table-head, #F7F7F7);
    border-top: 1px solid var(--border-light);
}

.gc-mobile-tab[b-a81wpw4b97] {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-bottom 0.15s;
    border-bottom: 2px solid transparent;
}

.gc-mobile-tab:hover[b-a81wpw4b97] {
    color: var(--text-heading);
}

.gc-mobile-tab--active[b-a81wpw4b97] {
    color: var(--text-link, #508D2E);
    border-bottom-color: var(--text-link, #508D2E);
}

/* ─── Mobile Responsive Override ─── */

@media (max-width: 768px) {
    .gc-layout[b-a81wpw4b97] {
        height: calc(100vh - 100px);
    }

    /* Full width for profile modal on mobile */
    .gc-profile-modal[b-a81wpw4b97] {
        width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Adjust emoji picker for mobile */
    .gc-emoji-picker[b-a81wpw4b97] {
        left: 4px;
        right: 4px;
        width: auto;
    }

    /* Bubbles take more width on mobile */
    .gc-bubble[b-a81wpw4b97] {
        max-width: 92%;
    }
}

/* ═══════════════════════════════════════════════════
   Typing Indicator
   ═══════════════════════════════════════════════════ */

.gc-typing-indicator[b-a81wpw4b97] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    font-size: 11px;
    color: #888;
    background: #F5F5F5;
    border-top: 1px solid var(--border-light, #e0e0e0);
    flex-shrink: 0;
}

.gc-typing-indicator__dots[b-a81wpw4b97] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.gc-typing-indicator__dots span[b-a81wpw4b97] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #aaa;
    animation: gc-typingDot-b-a81wpw4b97 1.2s infinite ease-in-out;
}

.gc-typing-indicator__dots span:nth-child(2)[b-a81wpw4b97] {
    animation-delay: 0.2s;
}

.gc-typing-indicator__dots span:nth-child(3)[b-a81wpw4b97] {
    animation-delay: 0.4s;
}

@keyframes gc-typingDot-b-a81wpw4b97 {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.2); }
}

.gc-typing-indicator__text[b-a81wpw4b97] {
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   Player Search
   ═══════════════════════════════════════════════════ */

.gc-player-search[b-a81wpw4b97] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.gc-player-search__input[b-a81wpw4b97] {
    width: 100%;
    background: #FAFAFA;
    border: 1px solid var(--border-medium, #ccc);
    border-radius: 4px;
    color: var(--text-primary, #333);
    padding: 4px 8px;
    font-size: 11px;
    outline: none;
    transition: border-color 0.2s;
}

.gc-player-search__input:focus[b-a81wpw4b97] {
    border-color: var(--text-link, #508D2E);
    background: #fff;
}

.gc-player-search__input[b-a81wpw4b97]::placeholder {
    color: #999;
}

/* ═══════════════════════════════════════════════════
   Report Button
   ═══════════════════════════════════════════════════ */

.gc-action-btn--report[b-a81wpw4b97] {
    color: #e67e22 !important;
    opacity: 0.7;
}

.gc-action-btn--report:hover[b-a81wpw4b97] {
    opacity: 1;
    color: #d35400 !important;
}

/* ═══════════════════════════════════════════════════
   Success Button (Unban)
   ═══════════════════════════════════════════════════ */

.gc-btn--success[b-a81wpw4b97] {
    background: #27ae60;
    border-color: #219a52;
    color: #fff;
}

.gc-btn--success:hover[b-a81wpw4b97] {
    background: #219a52;
}

/* ═══════════════════════════════════════════════════
   Extra Small Buttons / Inputs
   ═══════════════════════════════════════════════════ */

.gc-btn--xs[b-a81wpw4b97] {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    min-width: unset;
}

.gc-input--xs[b-a81wpw4b97] {
    font-size: 10px;
    padding: 3px 5px;
    border-radius: 3px;
    width: 60px;
}

.gc-input--emoji[b-a81wpw4b97] {
    width: 32px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════
   Badge Grant/Revoke Section (Legacy — moved to modal)
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   Player Card Status (Legacy — moved to modal)
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   Message Button (accent style)
   ═══════════════════════════════════════════════════ */

.gc-btn--accent[b-a81wpw4b97] {
    background: var(--text-link, #508D2E);
    color: #fff;
    border: none;
}

.gc-btn--accent:hover[b-a81wpw4b97] {
    background: #3E7B27;
}

/* ═══════════════════════════════════════════════════
   @Mention Highlight on Bubble
   ═══════════════════════════════════════════════════ */

.gc-bubble--mentioned[b-a81wpw4b97] {
    border-right: 3px solid #f1c40f;
    background: rgba(241, 196, 15, 0.08) !important;
    animation: mentionPulse-b-a81wpw4b97 2s ease-out 1;
}

@keyframes mentionPulse-b-a81wpw4b97 {
    0% { background: rgba(241, 196, 15, 0.25); }
    100% { background: rgba(241, 196, 15, 0.08); }
}

/* ═══════════════════════════════════════════════════
   Mod Panel — Tabs
   ═══════════════════════════════════════════════════ */

.gc-mod-tabs[b-a81wpw4b97] {
    display: flex;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.gc-mod-tab[b-a81wpw4b97] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary, #777);
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.gc-mod-tab:hover[b-a81wpw4b97] {
    background: #f5f5f5;
}

.gc-mod-tab--active[b-a81wpw4b97] {
    color: var(--text-link, #508D2E);
    border-bottom: 2px solid var(--text-link, #508D2E);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   Reports Panel
   ═══════════════════════════════════════════════════ */

.gc-mod-reports[b-a81wpw4b97] {
    overflow-y: auto;
}

.gc-report-item[b-a81wpw4b97] {
    padding: 8px;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    font-size: 12px;
}

.gc-report-item:last-child[b-a81wpw4b97] {
    border-bottom: none;
}

.gc-report-item__header[b-a81wpw4b97] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.gc-report-item__reporter[b-a81wpw4b97] {
    color: #e74c3c;
    font-weight: 600;
}

.gc-report-item__time[b-a81wpw4b97] {
    color: #999;
    font-size: 10px;
}

.gc-report-item__message[b-a81wpw4b97] {
    background: #F5F5F5;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 4px;
}

.gc-report-item__sender[b-a81wpw4b97] {
    font-weight: 600;
    color: var(--text-secondary, #777);
    margin-left: 4px;
}

.gc-report-item__text[b-a81wpw4b97] {
    color: var(--text-primary, #333);
}

.gc-report-item__reason[b-a81wpw4b97] {
    color: #e67e22;
    font-style: italic;
    font-size: 11px;
    margin-bottom: 4px;
}

.gc-report-item__actions[b-a81wpw4b97] {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   Confetti Animation for 🎉 Party Reaction
   ═══════════════════════════════════════════════════ */

@keyframes confettiBurst-b-a81wpw4b97 {
    0% { transform: scale(0.5) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.4) rotate(20deg); opacity: 1; }
    75% { transform: scale(1.1) rotate(-10deg); opacity: 0.7; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.gc-reaction:has(span:first-child:empty)[b-a81wpw4b97] { /* fallback — no :has support needed */ }

/* Party emoji reaction gets confetti burst animation */
.gc-reaction--party[b-a81wpw4b97] {
    animation: confettiBurst-b-a81wpw4b97 0.6s ease;
}

.gc-reaction:active[b-a81wpw4b97] {
    transform: scale(0.9);
}

/* ═══════════════════════════════════════════════════
   Cinematic Entrance Overlay
   ═══════════════════════════════════════════════════ */

[b-a81wpw4b97] .gc-entrance {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

[b-a81wpw4b97] .gc-entrance__backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

[b-a81wpw4b97] .gc-entrance__backdrop--standard { background: rgba(0,0,0,0.03); }
[b-a81wpw4b97] .gc-entrance__backdrop--advanced { background: rgba(0,0,0,0.05); }
[b-a81wpw4b97] .gc-entrance__backdrop--warrior { background: rgba(205,127,50,0.05); }
[b-a81wpw4b97] .gc-entrance__backdrop--commander { background: rgba(52,152,219,0.05); }
[b-a81wpw4b97] .gc-entrance__backdrop--emperor { background: rgba(218,165,32,0.08); }
[b-a81wpw4b97] .gc-entrance__backdrop--legend { background: rgba(255,215,0,0.1); }
[b-a81wpw4b97] .gc-entrance__backdrop--mythic { background: rgba(249,115,22,0.1); }
[b-a81wpw4b97] .gc-entrance__backdrop--moderator { background: rgba(52,152,219,0.06); }
[b-a81wpw4b97] .gc-entrance__backdrop--admin { background: rgba(231,76,60,0.06); }
[b-a81wpw4b97] .gc-entrance__backdrop--owner { background: rgba(168,85,247,0.1); }

[b-a81wpw4b97] .gc-entrance:not(.gc-entrance-phase--idle) .gc-entrance__backdrop { opacity: 1; }

/* ─── Entrance Card ─── */
[b-a81wpw4b97] .gc-entrance__card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    animation: gc-ent-cardReveal-b-a81wpw4b97 0.5s ease forwards;
    text-align: center;
}

@keyframes gc-ent-cardReveal-b-a81wpw4b97 {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

[b-a81wpw4b97] .gc-entrance__icon {
    font-size: 32px;
    line-height: 1;
}

[b-a81wpw4b97] .gc-entrance__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #777);
    letter-spacing: 1px;
}

[b-a81wpw4b97] .gc-entrance__username {
    font-size: 16px;
    font-weight: 800;
}

[b-a81wpw4b97] .gc-entrance__alliance {
    font-size: 12px;
    color: var(--text-link, #4A7F2E);
    font-weight: 600;
}

[b-a81wpw4b97] .gc-entrance__stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--text-secondary, #777);
}

[b-a81wpw4b97] .gc-entrance__name {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════
   Per-Type Card Styling
   ═══════════════════════════════════════════════════ */

[b-a81wpw4b97] .gc-entrance__card--warrior {
    border-color: #cd7f32;
    box-shadow: 0 4px 20px rgba(205,127,50,0.2);
}
[b-a81wpw4b97] .gc-entrance__card--warrior .gc-entrance__username { color: #cd7f32; }

[b-a81wpw4b97] .gc-entrance__card--commander {
    border-color: #3498db;
    box-shadow: 0 4px 20px rgba(52,152,219,0.2);
}
[b-a81wpw4b97] .gc-entrance__card--commander .gc-entrance__username { color: #2980b9; }

[b-a81wpw4b97] .gc-entrance__card--emperor {
    border-color: #daa520;
    box-shadow: 0 4px 25px rgba(218,165,32,0.3);
}
[b-a81wpw4b97] .gc-entrance__card--emperor .gc-entrance__username {
    color: #daa520;
    animation: gc-badge-shimmer-b-a81wpw4b97 2s ease infinite;
}

[b-a81wpw4b97] .gc-entrance__card--legend {
    border: 2px solid #ffd700;
    box-shadow: 0 0 30px rgba(255,215,0,0.3);
}
[b-a81wpw4b97] .gc-entrance__card--legend .gc-entrance__username {
    color: #daa520;
    background: linear-gradient(90deg, #DAA520 30%, #FFD700 50%, #DAA520 70%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gc-goldShimmer-b-a81wpw4b97 3s linear infinite;
}

[b-a81wpw4b97] .gc-entrance__card--mythic {
    border-color: #e74c3c;
    box-shadow: 0 0 30px rgba(231,76,60,0.3), 0 0 60px rgba(249,115,22,0.15);
}
[b-a81wpw4b97] .gc-entrance__card--mythic .gc-entrance__username { color: #e74c3c; }

[b-a81wpw4b97] .gc-entrance__card--moderator {
    border-color: #3498db;
    box-shadow: 0 0 15px rgba(52,152,219,0.2);
}
[b-a81wpw4b97] .gc-entrance__card--moderator .gc-entrance__username { color: #3498db; }

[b-a81wpw4b97] .gc-entrance__card--admin {
    border-color: #e74c3c;
    box-shadow: 0 0 20px rgba(231,76,60,0.25);
}
[b-a81wpw4b97] .gc-entrance__card--admin .gc-entrance__username { color: #e74c3c; }

[b-a81wpw4b97] .gc-entrance__card--owner {
    border: 2px solid #a855f7;
    box-shadow: 0 0 40px rgba(168,85,247,0.3), 0 0 80px rgba(168,85,247,0.1);
}
[b-a81wpw4b97] .gc-entrance__card--owner .gc-entrance__username {
    background: linear-gradient(90deg, #a855f7 30%, #ffd700 50%, #a855f7 70%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gc-goldShimmer-b-a81wpw4b97 2s linear infinite;
}

@keyframes gc-goldShimmer-b-a81wpw4b97 {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ═══════════════════════════════════════════════════
   Phase-Specific VFX Animations
   ═══════════════════════════════════════════════════ */

@keyframes gc-ent-flash-b-a81wpw4b97 {
    0% { opacity: 0; }
    20% { opacity: 0.3; }
    100% { opacity: 0; }
}

[b-a81wpw4b97] .gc-entrance-phase--flash .gc-entrance__backdrop {
    background: rgba(255,255,255,0.5) !important;
    animation: gc-ent-flash-b-a81wpw4b97 0.4s ease forwards;
}

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

[b-a81wpw4b97] .gc-entrance-phase--shake {
    animation: gc-ent-shake-b-a81wpw4b97 0.5s ease;
}

@keyframes gc-ent-shieldAppear-b-a81wpw4b97 {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

[b-a81wpw4b97] .gc-entrance-phase--shield .gc-entrance__icon {
    animation: gc-ent-shieldAppear-b-a81wpw4b97 0.6s ease forwards;
}

@keyframes gc-ent-rays-b-a81wpw4b97 {
    0% { opacity: 0; transform: scaleY(0); }
    50% { opacity: 0.5; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0); }
}

[b-a81wpw4b97] .gc-entrance-phase--rays .gc-entrance__backdrop {
    background: linear-gradient(180deg, rgba(218,165,32,0.2) 0%, transparent 100%) !important;
    animation: gc-ent-rays-b-a81wpw4b97 1s ease forwards;
}

[b-a81wpw4b97] .gc-entrance-phase--rays.gc-entrance--admin .gc-entrance__backdrop {
    background: linear-gradient(180deg, rgba(231,76,60,0.2) 0%, transparent 100%) !important;
}

@keyframes gc-ent-crownDrop-b-a81wpw4b97 {
    0% { transform: translateY(-60px) scale(0.5); opacity: 0; }
    60% { transform: translateY(5px) scale(1.1); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

[b-a81wpw4b97] .gc-entrance-phase--crown .gc-entrance__icon {
    animation: gc-ent-crownDrop-b-a81wpw4b97 0.7s ease forwards;
}

@keyframes gc-ent-shockwave-b-a81wpw4b97 {
    0% { transform: scale(0); opacity: 1; border-width: 4px; }
    100% { transform: scale(3); opacity: 0; border-width: 0; }
}

[b-a81wpw4b97] .gc-entrance-phase--shockwave::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255,215,0,0.5);
    animation: gc-ent-shockwave-b-a81wpw4b97 0.8s ease forwards;
}

@keyframes gc-ent-rift-b-a81wpw4b97 {
    0% { width: 0; height: 2px; opacity: 0; }
    50% { width: 200px; height: 2px; opacity: 1; box-shadow: 0 0 30px #a855f7; }
    100% { width: 200px; height: 60px; opacity: 1; box-shadow: 0 0 60px #a855f7; }
}

[b-a81wpw4b97] .gc-entrance-phase--rift .gc-entrance__backdrop {
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-a81wpw4b97] .gc-entrance-phase--rift .gc-entrance__backdrop::after {
    content: '';
    background: linear-gradient(90deg, transparent, #a855f7, transparent);
    animation: gc-ent-rift-b-a81wpw4b97 0.6s ease forwards;
}

@keyframes gc-ent-vortex-b-a81wpw4b97 {
    0% { transform: rotate(0deg) scale(0); }
    100% { transform: rotate(360deg) scale(1); }
}

[b-a81wpw4b97] .gc-entrance-phase--vortex .gc-entrance__icon {
    animation: gc-ent-vortex-b-a81wpw4b97 0.8s ease forwards;
}

[b-a81wpw4b97] .gc-entrance-phase--lightning .gc-entrance__backdrop {
    background: rgba(52,152,219,0.15) !important;
    animation: gc-ent-flash-b-a81wpw4b97 0.3s ease forwards;
}

[b-a81wpw4b97] .gc-entrance-phase--halo .gc-entrance__icon {
    animation: gc-ent-shieldAppear-b-a81wpw4b97 0.8s ease forwards;
    filter: drop-shadow(0 0 12px rgba(231,76,60,0.4));
}

[b-a81wpw4b97] .gc-entrance-phase--singularity .gc-entrance__card {
    box-shadow: 0 0 60px rgba(168,85,247,0.4), 0 0 120px rgba(168,85,247,0.15);
}

[b-a81wpw4b97] .gc-entrance-phase--expand .gc-entrance__backdrop {
    background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%) !important;
    animation: gc-ent-flash-b-a81wpw4b97 1s ease forwards;
}

[b-a81wpw4b97] .gc-entrance-phase--ignite .gc-entrance__backdrop {
    background: radial-gradient(circle, rgba(249,115,22,0.2) 0%, transparent 60%) !important;
    opacity: 1 !important;
}

[b-a81wpw4b97] .gc-entrance-phase--flames .gc-entrance__icon {
    animation: gc-ent-shieldAppear-b-a81wpw4b97 0.6s ease forwards;
    filter: drop-shadow(0 0 15px rgba(231,76,60,0.5));
}

[b-a81wpw4b97] .gc-entrance-phase--wings .gc-entrance__card {
    box-shadow: -20px 0 30px rgba(249,115,22,0.2), 20px 0 30px rgba(249,115,22,0.2);
}

[b-a81wpw4b97] .gc-entrance-phase--blaze .gc-entrance__card {
    box-shadow: 0 0 40px rgba(231,76,60,0.3), 0 0 80px rgba(249,115,22,0.15);
}

[b-a81wpw4b97] .gc-entrance-phase--glow .gc-entrance__card {
    box-shadow: 0 0 30px rgba(218,165,32,0.3);
}

[b-a81wpw4b97] .gc-entrance-phase--shimmer .gc-entrance__username {
    animation: gc-goldShimmer-b-a81wpw4b97 2s linear infinite;
}

[b-a81wpw4b97] .gc-entrance-phase--pulse .gc-entrance__card {
    animation: gc-badge-pulse-b-a81wpw4b97 1.5s ease infinite;
}

/* ═══════════════════════════════════════════════════
   Sidebar Glow — new entrance highlight
   ═══════════════════════════════════════════════════ */

@keyframes gc-sidebarGlow-b-a81wpw4b97 {
    0% {
        background: var(--entrance-glow-color, rgba(0,0,0,0.05));
        transform: translateX(-5px);
        box-shadow: inset 3px 0 10px var(--entrance-glow-color, rgba(0,0,0,0.05));
    }
    100% {
        background: transparent;
        transform: translateX(0);
        box-shadow: none;
    }
}

[b-a81wpw4b97] .gc-player-item--new-entrance {
    animation: gc-sidebarGlow-b-a81wpw4b97 2.5s ease forwards;
}

[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="warrior"] { --entrance-glow-color: rgba(205,127,50,0.15); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="commander"] { --entrance-glow-color: rgba(52,152,219,0.15); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="emperor"] { --entrance-glow-color: rgba(218,165,32,0.2); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="legend"] { --entrance-glow-color: rgba(255,215,0,0.25); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="mythic"] { --entrance-glow-color: rgba(231,76,60,0.2); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="admin"] { --entrance-glow-color: rgba(231,76,60,0.15); }
[b-a81wpw4b97] .gc-player-item--new-entrance[data-entrance="owner"] { --entrance-glow-color: rgba(168,85,247,0.2); }

/* ═══════════════════════════════════════════════════
   Badge Keyframes (reused by entrance animations)
   ═══════════════════════════════════════════════════ */

@keyframes gc-badge-shimmer-b-a81wpw4b97 {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

@keyframes gc-badge-pulse-b-a81wpw4b97 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ═══════════════════════════════════════════════════
   Filter Settings UI
   ═══════════════════════════════════════════════════ */

[b-a81wpw4b97] .gc-filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

[b-a81wpw4b97] .gc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary, #333);
    cursor: pointer;
}

[b-a81wpw4b97] .gc-checkbox-label input[type="checkbox"] {
    accent-color: var(--text-link, #4A7F2E);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

[b-a81wpw4b97] .gc-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 24px;
    padding: 4px 0;
}

[b-a81wpw4b97] .gc-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

[b-a81wpw4b97] .gc-filter-tag--word {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #EF9A9A;
}

[b-a81wpw4b97] .gc-filter-tag--domain {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

[b-a81wpw4b97] .gc-filter-tag__remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10px;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

[b-a81wpw4b97] .gc-filter-tag__remove:hover { opacity: 1; }

[b-a81wpw4b97] .gc-filter-add {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════
   Entrance Management (Legacy — moved to modal admin cards)
   ═══════════════════════════════════════════════════ */

/* ─── Chat Avatars ─── */

.gc-avatar[b-a81wpw4b97] {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    user-select: none;
}

.gc-avatar--sm[b-a81wpw4b97] {
    width: 22px;
    height: 22px;
    font-size: 10px;
}

.gc-avatar--xs[b-a81wpw4b97] {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.gc-avatar--initials[b-a81wpw4b97] {
    text-align: center;
}
/* /Components/Pages/Social/Messages.razor.rz.scp.css */
/* ==========================================================================
   Messages.razor.css — Messages (Travian notebook design)
   Inbox/Sent list · Compose · Notes
   ========================================================================== */

/* ---------- Container ---------- */
.messages-container[b-wju5q5g9ba] {
    max-width: 800px;
}

/* ---------- Title ---------- */
.messages-title[b-wju5q5g9ba] {
    color: var(--plus-green, #71d000);
    font-size: 18px;
    margin: 8px 0 5px;
}

/* ---------- Tab Navigation ---------- */
.nav-links[b-wju5q5g9ba] {
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 16px;
}

.nav-links a[b-wju5q5g9ba] {
    color: var(--text-link, #4a8d00);
    text-decoration: underline;
    cursor: pointer;
    padding: 2px 4px;
}

.nav-links a.active[b-wju5q5g9ba] {
    color: var(--plus-green, #71d000);
    text-decoration: none;
}

.nav-links a:hover[b-wju5q5g9ba] {
    color: var(--plus-green, #71d000);
}

.nav-links .separator[b-wju5q5g9ba] {
    color: var(--border-medium, #ccc);
    text-decoration: none;
    cursor: default;
    user-select: none;
}

/* ==========================================================================
   Message Table (Inbox / Sent)
   ========================================================================== */
.message-table[b-wju5q5g9ba] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border-medium, #ccc);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-table thead tr[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #f9f9f9, #d1d1d1);
    border-bottom: 1px solid #aaa;
}

.message-table th[b-wju5q5g9ba] {
    padding: 8px;
    text-align: right;
    border-left: 1px solid var(--border-medium, #ccc);
    font-size: 12px;
    color: var(--text-heading, #333);
}

.message-table th:last-child[b-wju5q5g9ba] {
    border-left: none;
}

.message-table th.col-date[b-wju5q5g9ba] {
    width: 120px;
}

.message-table th.col-sender[b-wju5q5g9ba] {
    width: 200px;
}

.message-table th.col-check[b-wju5q5g9ba] {
    width: 30px;
    text-align: center;
}

.message-table td[b-wju5q5g9ba] {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.message-table td.col-date[b-wju5q5g9ba] {
    color: var(--text-secondary, #555);
    white-space: nowrap;
}

.message-table td.col-check[b-wju5q5g9ba] {
    text-align: center;
    width: 30px;
}

.message-table .row-data[b-wju5q5g9ba] {
    background-color: #f7f7f1;
}

.message-table .row-data:hover[b-wju5q5g9ba] {
    background-color: #FFFDE0;
}

.message-table .empty-row[b-wju5q5g9ba] {
    text-align: center;
    color: var(--text-secondary, #999);
    font-style: italic;
    background-color: #fff;
    padding: 20px 8px;
}

.subject-link[b-wju5q5g9ba] {
    color: #ff9800;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.subject-link:hover[b-wju5q5g9ba] {
    text-decoration: underline;
}

.new-badge[b-wju5q5g9ba] {
    color: var(--res-negative, #CC0000);
    font-size: 10px;
    font-weight: bold;
    margin-inline-start: 4px;
}

.sort-arrow[b-wju5q5g9ba] {
    color: red;
    font-size: 10px;
    margin-right: 4px;
}

/* ==========================================================================
   Notebook Design (Compose / Notes)
   ========================================================================== */
.notebook[b-wju5q5g9ba] {
    position: relative;
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* ---------- Spiral Rings ---------- */
.spirals[b-wju5q5g9ba] {
    position: absolute;
    top: -12px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

.ring[b-wju5q5g9ba] {
    width: 8px;
    height: 24px;
    background: linear-gradient(to right, #666, #aaa, #666);
    border-radius: 4px;
    border: 1px solid #333;
}

/* ---------- Notebook Header ---------- */
.notebook-header[b-wju5q5g9ba] {
    padding: 25px 20px 10px;
    border-bottom: 1px solid #333;
}

.field-row[b-wju5q5g9ba] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.field-label[b-wju5q5g9ba] {
    width: 70px;
    color: var(--plus-green, #71d000);
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
}

.field-input[b-wju5q5g9ba] {
    flex: 1;
    border: none;
    border-bottom: 1px solid #eee;
    outline: none;
    padding: 4px;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
}

.field-input:focus[b-wju5q5g9ba] {
    border-bottom-color: var(--plus-green, #71d000);
}

/* ---------- Autocomplete Dropdown ---------- */
.autocomplete-wrapper[b-wju5q5g9ba] {
    flex: 1;
    position: relative;
}

.autocomplete-wrapper .field-input[b-wju5q5g9ba] {
    width: 100%;
}

.suggestions-dropdown[b-wju5q5g9ba] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-medium, #ccc);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.suggestion-item[b-wju5q5g9ba] {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary, #333);
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:last-child[b-wju5q5g9ba] {
    border-bottom: none;
}

.suggestion-item:hover[b-wju5q5g9ba] {
    background-color: #e8f5e9;
    color: var(--text-link, #2A7A38);
}

/* ---------- Notebook Body (lined) ---------- */
.notebook-body[b-wju5q5g9ba] {
    position: relative;
    min-height: 350px;
    padding: 10px 20px;
    background-image: repeating-linear-gradient(
        white 0px,
        white 23px,
        #e5e7eb 24px
    );
    line-height: 24px;
}

.notebook-textarea[b-wju5q5g9ba] {
    width: 100%;
    height: 350px;
    background: transparent;
    border: none;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 24px;
    color: var(--text-primary, #333);
}

/* ---------- Notebook Footer ---------- */
.notebook-footer[b-wju5q5g9ba] {
    padding: 15px;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}

.send-btn[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #ffffff, #dcdcdc);
    border: 1px solid #999;
    padding: 4px 25px;
    border-radius: 4px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

.send-btn:hover[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #f0f0f0, #c8c8c8);
}

.send-btn:active[b-wju5q5g9ba] {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---------- Info Message ---------- */
.info-message[b-wju5q5g9ba] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    color: #2e7d32;
    font-size: 12px;
}

/* ==========================================================================
   Message Detail View
   ========================================================================== */
.msg-detail[b-wju5q5g9ba] {
    margin-top: 4px;
}

.msg-detail-header[b-wju5q5g9ba] {
    margin-bottom: 8px;
}

.msg-nav-bar[b-wju5q5g9ba] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msg-nav-arrows[b-wju5q5g9ba] {
    display: flex;
    gap: 4px;
}

.msg-nav-btn[b-wju5q5g9ba] {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #c0b898;
    background: linear-gradient(to bottom, #f8f4e8 0%, #e8dfc8 100%);
    color: #5a4e30;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
}

.msg-nav-btn:hover:not(:disabled)[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #fffbe6 0%, #f0e6c0 100%);
    border-color: #a09060;
}

.msg-nav-btn:disabled[b-wju5q5g9ba] {
    opacity: 0.35;
    cursor: default;
}

.bulk-actions[b-wju5q5g9ba] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    align-items: center;
}

.msg-back[b-wju5q5g9ba] {
    color: var(--text-link, #4a8d00);
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.msg-back:hover[b-wju5q5g9ba] {
    text-decoration: underline;
    color: var(--plus-green, #71d000);
}

.field-value[b-wju5q5g9ba] {
    flex: 1;
    font-size: 13px;
    padding: 4px;
    color: var(--text-primary, #333);
}

.field-value.field-date[b-wju5q5g9ba] {
    color: var(--text-secondary, #555);
    font-size: 11px;
}

.msg-body-text[b-wju5q5g9ba] {
    font-size: 13px;
    line-height: 24px;
    min-height: 120px;
    padding: 4px 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary, #333);
}

.btn-delete[b-wju5q5g9ba] {
    margin-inline-start: 8px;
    background: linear-gradient(to bottom, #fff0f0, #f5c6c6);
    border-color: #cc9999;
    color: #993333;
}

.btn-delete:hover[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #ffe0e0, #f0b0b0);
}

/* ---------- Unread row ---------- */
.message-table .row-data.unread[b-wju5q5g9ba] {
    background-color: #fffde0;
    font-weight: bold;
}

#overview td.none[b-wju5q5g9ba] {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Footer --- */
#overview tfoot th[b-wju5q5g9ba] {
    padding: 4px 8px;
    background-color: var(--bg-resource);
    border-top: 1px solid var(--border-medium);
    vertical-align: middle;
}

#overview tfoot th:first-child[b-wju5q5g9ba] {
    width: 25px;
    text-align: center;
}

#overview tfoot th.buttons[b-wju5q5g9ba] {
    text-align: start;
}

#overview tfoot th.buttons input.dynamic_img[b-wju5q5g9ba] {
    display: inline-block;
    padding: 3px 12px;
    background: linear-gradient(to bottom, #EF5350, #C62828);
    border: 1px solid #B71C1C;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

#overview tfoot th.buttons input.dynamic_img:hover[b-wju5q5g9ba] {
    background: linear-gradient(to bottom, #E57373, #D32F2F);
}

#overview tfoot th.navi[b-wju5q5g9ba] {
    text-align: end;
    white-space: nowrap;
}

#overview tfoot th.navi a[b-wju5q5g9ba] {
    display: inline-block;
    padding: 2px 8px;
    margin-inline-start: 4px;
    color: var(--text-link);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

#overview tfoot th.navi a:hover[b-wju5q5g9ba] {
    color: var(--text-link-hover);
}

/* --- Info message --- */
.info-message[b-wju5q5g9ba] {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
    border-radius: 4px;
    color: #2E7D32;
    font-size: 12px;
}

/* ─── Message Interactive Links ─── */
.chat-link[b-wju5q5g9ba] {
    color: var(--text-link, #4a8d00);
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
}
.chat-link:hover[b-wju5q5g9ba] {
    color: var(--plus-green, #71d000);
    text-decoration: none;
}
/* /Components/Pages/Social/Rankings.razor.rz.scp.css */
/* ==========================================================================
   Rankings.razor.css — Rankings / Statistics (Travian reference design)
   ========================================================================== */

h1[b-osgses5610] {
    color: #5c9e24;
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 10px 0;
    text-align: right;
}

/* Sub-navigation */
.sub-nav[b-osgses5610] {
    text-align: right;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 14px;
}
.sub-nav a[b-osgses5610] {
    color: #71D000;
    text-decoration: none;
    cursor: pointer;
}
.sub-nav a:hover[b-osgses5610] {
    text-decoration: underline;
}
.sub-nav .active[b-osgses5610] {
    color: #333;
}
.sub-nav-sep[b-osgses5610] {
    color: #333;
    margin: 0 3px;
    font-weight: normal;
}

/* =======================================
   Toolbar / Filters Row
   ======================================= */
.filters-row[b-osgses5610] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.filters-group[b-osgses5610] {
    display: flex;
    gap: 2px;
}
.filter-box[b-osgses5610] {
    border: 1px solid #71D000;
    background: linear-gradient(to bottom, #ffffff, #e6e6e6);
    border-radius: 3px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}
.filter-box:hover[b-osgses5610] {
    background: #ffffff;
}
.filter-box.active[b-osgses5610] {
    border-color: #4a8000;
    background: #d0e5b0;
}

/* Active filter: sprite shifts to bottom half */
.filter-box.active img[b-osgses5610] {
    background-position: 0 bottom;
}

/* Filter sprite icons (x.gif + background-image) */
.filter-box img[b-osgses5610] {
    width: 30px;
    height: 30px;
    background-position: 0 top;
    background-repeat: no-repeat;
}
.filter-box img.btn_top10[b-osgses5610] {
    background-image: url('/img/gpack/s/top10.gif');
}
.filter-box img.btn_def[b-osgses5610] {
    background-image: url('/img/gpack/s/def.gif');
}
.filter-box img.btn_off[b-osgses5610] {
    background-image: url('/img/gpack/s/off.gif');
}
    .filter-box img.btn_pop[b-osgses5610] {
        background-image: url('/img/gpack/f/v_folder.gif');
    }
.filter-box img.btn_v1[b-osgses5610] {
    background-image: url('/img/gpack/s/v1.gif');
}
.filter-box img.btn_v2[b-osgses5610] {
    background-image: url('/img/gpack/s/v2.gif');
}
.filter-box img.btn_v3[b-osgses5610] {
    background-image: url('/img/gpack/s/v3.gif');
}

/* =======================================
   Top-10 Grid (4 side-by-side tables)
   ======================================= */
.top10-grid[b-osgses5610] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 5px;
    margin-bottom: 10px;
}

table.top10[b-osgses5610] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    table-layout: fixed;
}
table.top10 thead th[b-osgses5610] {
    background: linear-gradient(to bottom, #f9f9f9, #dcdcdc);
    border: 1px solid #c0c0c0;
    padding: 4px 6px;
    font-weight: bold;
    font-size: 13px;
    color: #000;
    text-align: center;
}
table.top10 tbody td[b-osgses5610] {
    border: 1px solid #e0e0e0;
    padding: 2px 5px;
    font-size: 12px;
}
table.top10 tbody td.pla[b-osgses5610] {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
    width: 70%;
}
table.top10 tbody td.pla a[b-osgses5610] {
    color: #5c9e24;
    text-decoration: none;
    font-weight: bold;
}
table.top10 tbody td.pla a:hover[b-osgses5610] {
    text-decoration: underline;
}
table.top10 tbody td.val[b-osgses5610] {
    text-align: left;
    white-space: nowrap;
    direction: ltr;
    width: 30%;
}
table.top10 tbody tr:nth-child(odd)[b-osgses5610] {
    background-color: #f5f5f5;
}
table.top10 tbody tr:nth-child(even)[b-osgses5610] {
    background-color: #ffffff;
}
table.top10 tbody tr:hover[b-osgses5610] {
    background-color: #ebebeb;
}
table.top10 tbody tr.own[b-osgses5610] {
    background-color: #fff9cc !important;
}
table.top10 tbody tr.own td[b-osgses5610] {
    border-top: 1px solid #f2c700;
    border-bottom: 1px solid #f2c700;
}

/* Unit sprite icon inside top10 player cell */
table.top10 img.unit[b-osgses5610] {
    width: 16px;
    height: 16px;
    margin-left: 3px;
    vertical-align: middle;
}

/* =======================================
   Main Statistics Table
   ======================================= */
table.statistics[b-osgses5610] {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border: 1px solid #c0c0c0;
}

table.statistics thead th[b-osgses5610] {
    background: linear-gradient(to bottom, #f9f9f9, #dcdcdc);
    border: 1px solid #c0c0c0;
    padding: 4px;
    font-weight: bold;
    color: #000;
}

table.statistics thead th.title-row[b-osgses5610] {
    font-size: 14px;
}

table.statistics thead tr.col-headers th[b-osgses5610] {
    background: linear-gradient(to bottom, #f9f9f9, #dcdcdc);
    border: 1px solid #c0c0c0;
    padding: 4px 2px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

table.statistics tbody td[b-osgses5610] {
    border: 1px solid #c0c0c0;
    padding: 4px 5px;
    text-align: center;
}

table.statistics tbody tr:nth-child(odd)[b-osgses5610] {
    background-color: #f5f5f5;
}
table.statistics tbody tr:nth-child(even)[b-osgses5610] {
    background-color: #ffffff;
}
table.statistics tbody tr:hover[b-osgses5610] {
    background-color: #ebebeb;
}

/* Highlighted row (current player) */
table.statistics tbody tr.hl[b-osgses5610] {
    background-color: #fff9cc !important;
}
table.statistics tbody tr.hl td[b-osgses5610] {
    border-top: 1.5px solid #f2c700;
    border-bottom: 1.5px solid #f2c700;
    border-color: #f2c700;
}

.col-player-width[b-osgses5610] {
    width: 40%;
}

/* =======================================
   Player cell
   ======================================= */
.player-cell[b-osgses5610] {
    display: flex;
    direction: rtl;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5px;
}

/* Tribe badge: span.tribe with background-image on the RIGHT side (RTL) */
span.tribe[b-osgses5610] {
    background-position: right center;
    background-repeat: no-repeat;
    height: 16px;
    padding-right: 20px;
    display: inline-flex;
    align-items: center;
    flex: 1;
    direction: rtl;
}
span.tribe1[b-osgses5610] {
    background-image: url('/img/gpack/img/u/9.gif');
}
span.tribe2[b-osgses5610] {
    background-image: url('/img/gpack/img/u/19.gif');
}
span.tribe3[b-osgses5610] {
    background-image: url('/img/gpack/img/u/29.gif');
}
span.tribe a[b-osgses5610] {
    color: #5c9e24;
    font-weight: bold;
    text-decoration: none;
}
span.tribe a:hover[b-osgses5610] {
    text-decoration: underline;
    cursor: pointer;
}

.player-rank[b-osgses5610] {
    color: #000;
    white-space: nowrap;
    direction: ltr;
}

/* Message icon: x.gif + .i1 background sprite */
img.i1[b-osgses5610] {
    background-image: url('/img/gpack/img/l/m1.gif');
    background-repeat: no-repeat;
    background-position: center;
    width: 18px;
    height: 14px;
    vertical-align: middle;
}

/* Protection icon: x.gif + peace.gif background */
img.peace[b-osgses5610] {
    background-image: url('/img/gpack/img/a/def_all.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-left: 3px;
}

td.none[b-osgses5610] {
    text-align: center !important;
    color: #666;
    font-style: italic;
    padding: 12px 8px;
}

/* General stats labels */
.general-label[b-osgses5610] {
    text-align: right;
    padding-right: 10px;
    background: transparent;
    border: none;
    font-weight: bold;
}
.general-value[b-osgses5610] {
    text-align: right;
    border-left: none;
}

/* =======================================
   Footer Search and Pagination
   ======================================= */
.footer-controls[b-osgses5610] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
}
.left-link[b-osgses5610] {
    font-size: 16px;
}
.left-link a[b-osgses5610] {
    color: #71D000;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}
.left-link a:hover[b-osgses5610] {
    text-decoration: underline;
}
.right-search[b-osgses5610] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: bold;
}
.text-input[b-osgses5610] {
    border: 1px solid #71D000;
    padding: 2px 4px;
    height: 22px;
    line-height: 18px;
    font-size: 13px;
    box-sizing: border-box;
}
.num-input[b-osgses5610] {
    width: 45px;
    text-align: center;
}
.name-input[b-osgses5610] {
    width: 120px;
}
.btn-search[b-osgses5610] {
    background: linear-gradient(to bottom, #f3f9ee, #d0e5b0);
    border: 1px solid #71D000;
    padding: 0 14px;
    height: 22px;
    cursor: pointer;
    border-radius: 2px;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-search:hover[b-osgses5610] {
    background: linear-gradient(to bottom, #d0e5b0, #c0d89e);
}

/* "Find Me" button in footer */
.btn-find-me[b-osgses5610] {
    background: linear-gradient(to bottom, #fff9cc, #f2c700);
    border: 1.5px solid #e0b800;
    padding: 1px 10px;
    height: 22px;
    cursor: pointer;
    border-radius: 3px;
    color: #5a4500;
    font-weight: bold;
    font-size: 12px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.btn-find-me:hover[b-osgses5610] {
    background: linear-gradient(to bottom, #ffe88a, #f2c700);
}

/* =======================================
   Server Specs 4-column table
   ======================================= */
table.server-specs th.spec-label[b-osgses5610] {
    text-align: right;
    padding-right: 10px;
    background: transparent;
    border: 1px solid #c0c0c0;
    font-weight: bold;
    width: 25%;
}
table.server-specs td.spec-value[b-osgses5610] {
    text-align: center;
    border: 1px solid #c0c0c0;
    width: 25%;
}

/* =======================================
   WW Tab — Showcase & Countdown
   ======================================= */
.ww-owner-link[b-osgses5610] {
    color: #5c9e24;
    font-weight: bold;
    text-decoration: none;
}
.ww-owner-link:hover[b-osgses5610] {
    text-decoration: underline;
}

.ww-natar-capital-tag[b-osgses5610] {
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

.ww-name-link[b-osgses5610] {
    color: #b8860b;
    font-weight: bold;
    text-decoration: none;
}
.ww-name-link:hover[b-osgses5610] {
    text-decoration: underline;
}

.ww-countdown-row[b-osgses5610] {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #5c9e24;
    margin: 12px 0 8px;
}

.ww-showcase[b-osgses5610] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px 0;
    gap: 8px;
}
.ww-icon[b-osgses5610] {
    width: 120px;
    height: auto;
}
.ww-total-pop[b-osgses5610] {
    font-size: 20px;
    font-weight: bold;
    color: #5c9e24;
}

/* Wonder shield panel inside ww-showcase */
.ww-wonder-panel[b-osgses5610] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fffbea, #fff8e1);
    border: 1px solid #d4a017;
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 4px;
}
.ww-shield-img[b-osgses5610] {
    width: 48px;
    height: auto;
}
.ww-wonder-info[b-osgses5610] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: bold;
    color: #7a5200;
}
.ww-wonder-points[b-osgses5610] { color: #b8860b; }
.ww-wonder-gold[b-osgses5610]   { color: #888; font-weight: normal; }

/* =======================================
   Events Tab — Travian-style News Feed
   ======================================= */
.events-feed[b-osgses5610] {
    border: 1px solid #c0c0c0;
    border-top: none;
}
.event-row[b-osgses5610] {
    display: flex;
    direction: rtl;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
}
.event-row:nth-child(odd)[b-osgses5610] {
    background-color: #f5f5f5;
}
.event-row:nth-child(even)[b-osgses5610] {
    background-color: #ffffff;
}
.event-row:hover[b-osgses5610] {
    background-color: #ebebeb;
}
.event-desc[b-osgses5610] {
    flex: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-desc a[b-osgses5610] {
    color: #5c9e24;
    font-weight: bold;
    text-decoration: none;
}
.event-desc a:hover[b-osgses5610] {
    text-decoration: underline;
}
.event-kills[b-osgses5610] {
    color: #c00;
    font-weight: bold;
    direction: ltr;
    margin: 0 4px;
}
.event-time-badge[b-osgses5610] {
    color: #888;
    white-space: nowrap;
    font-size: 11px;
    min-width: 40px;
    text-align: left;
    direction: ltr;
}
.event-oasis-tag[b-osgses5610] {
    color: #999;
    font-style: italic;
}
.event-icon[b-osgses5610] {
    margin: 0 2px;
}

/* =======================================
   Events Tab — Filter Bar
   ======================================= */
.events-filters-bar[b-osgses5610] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: bold;
    flex-wrap: wrap;
}
.event-filter-btn[b-osgses5610] {
    color: #71D000;
    text-decoration: none;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}
.event-filter-btn:hover[b-osgses5610] {
    text-decoration: underline;
    background: #f0f7e0;
}
.event-filter-btn.active[b-osgses5610] {
    color: #333;
    background: #d0e5b0;
    border: 1px solid #71D000;
}

/* =======================================
   Events Tab — Pagination
   ======================================= */
.events-pagination[b-osgses5610] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
    padding: 8px 0;
    font-size: 13px;
}
.page-nav-btn[b-osgses5610] {
    border: 1px solid #71D000;
    background: linear-gradient(to bottom, #ffffff, #e6e6e6);
    border-radius: 3px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5c9e24;
    font-weight: bold;
    text-decoration: none;
    padding: 0 6px;
}
.page-nav-btn:hover[b-osgses5610] {
    background: #d0e5b0;
}
.page-nav-btn.disabled[b-osgses5610] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.page-num-btn[b-osgses5610] {
    border: 1px solid #c0c0c0;
    background: #f5f5f5;
    border-radius: 3px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    padding: 0 6px;
}
.page-num-btn:hover[b-osgses5610] {
    background: #e8e8e8;
    border-color: #71D000;
}
.page-num-btn.active[b-osgses5610] {
    background: #71D000;
    color: #fff;
    border-color: #4a8000;
}
.page-info[b-osgses5610] {
    color: #888;
    font-size: 12px;
    margin-right: 8px;
    direction: ltr;
}

/* ==========================================================================
   Responsive — Tablet (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {
    .top10-grid[b-osgses5610] {
        grid-template-columns: 1fr;
    }

    .filters-row[b-osgses5610] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .footer-controls[b-osgses5610] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .right-search[b-osgses5610] {
        justify-content: center;
    }
}

/* ==========================================================================
   Responsive — Phone (≤ 600px)
   ========================================================================== */
@media (max-width: 600px) {
    table.top10[b-osgses5610] {
        font-size: 11px;
    }

    table.top10 thead th[b-osgses5610] {
        font-size: 11px;
        padding: 3px 4px;
    }

    table.top10 tbody td[b-osgses5610] {
        font-size: 11px;
        padding: 2px 3px;
    }

    table.top10 tbody td.pla[b-osgses5610] {
        white-space: normal;
        word-break: break-word;
    }

    table.statistics[b-osgses5610] {
        font-size: 11px;
    }

    table.statistics thead th[b-osgses5610] {
        padding: 3px 2px;
        font-size: 11px;
    }

    table.statistics tbody td[b-osgses5610] {
        padding: 3px 2px;
        font-size: 11px;
    }

    .player-cell[b-osgses5610] {
        padding: 0 2px;
    }

    .event-desc[b-osgses5610] {
        white-space: normal;
    }

    .events-filters-bar[b-osgses5610] {
        font-size: 11px;
    }

    .events-pagination[b-osgses5610] {
        flex-wrap: wrap;
        gap: 3px;
    }

    .page-num-btn[b-osgses5610],
    .page-nav-btn[b-osgses5610] {
        min-width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

/* ==========================================================================
   Responsive — Small Phone (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {
    h1[b-osgses5610] {
        font-size: 18px;
    }

    .sub-nav[b-osgses5610] {
        font-size: 12px;
    }

    .filter-box[b-osgses5610] {
        width: 28px;
        height: 28px;
    }

    .filter-box img[b-osgses5610] {
        width: 26px;
        height: 26px;
    }

    table.top10 thead th[b-osgses5610] {
        font-size: 10px;
        padding: 2px 3px;
    }

    table.top10 tbody td[b-osgses5610] {
        font-size: 10px;
        padding: 1px 2px;
    }

    table.statistics thead th[b-osgses5610],
    table.statistics tbody td[b-osgses5610] {
        font-size: 10px;
        padding: 2px 1px;
    }

    .col-player-width[b-osgses5610] {
        width: 35%;
    }

    span.tribe[b-osgses5610] {
        padding-right: 18px;
        background-size: 14px 14px;
    }

    .footer-controls[b-osgses5610] {
        font-size: 11px;
    }

    .name-input[b-osgses5610] {
        width: 80px;
    }

    .event-row[b-osgses5610] {
        font-size: 11px;
        padding: 3px 5px;
    }
}

/* ─── Toast notification (reused from AlliancePage) ─── */
.ali-toast[b-osgses5610] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    animation: fadeIn-b-osgses5610 0.2s ease;
    font-family: Tahoma, Arial, sans-serif;
}
.ali-toast--ok[b-osgses5610] { background: #fef9e7; border: 1px solid #d4b44a; color: #7a6320; }
.ali-toast--error[b-osgses5610] { background: #FFEBEE; border: 1px solid #EF9A9A; color: #C62828; }
.ali-toast__close[b-osgses5610] {
    background: none; border: none; cursor: pointer;
    font-size: 15px; color: inherit; opacity: 0.6;
    padding: 0 0 0 12px;
}
.ali-toast__close:hover[b-osgses5610] { opacity: 1; }

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

/* ─── Join request button ─── */
.ali-btn[b-osgses5610] { cursor: pointer; border: none; border-radius: 3px; font-family: Tahoma, Arial, sans-serif; }
.ali-btn--primary[b-osgses5610] { background: #71D000; color: #fff; }
.ali-btn--primary:hover[b-osgses5610] { background: #5bb300; }
.ali-btn--sm[b-osgses5610] { padding: 2px 8px; font-size: 11px; }

.join-pending[b-osgses5610] {
    font-size: 14px;
    opacity: 0.7;
    cursor: default;
}
/* /Components/Pages/Support/SupportPage.razor.rz.scp.css */
/* SupportPage.razor — scoped styles */

.support-page[b-hv2uz79pac] {
    max-width: 800px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.support-header[b-hv2uz79pac] {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .support-header h2[b-hv2uz79pac] {
        font-size: 1.4rem;
        color: #2D3748;
        margin: 0 0 0.25rem;
    }

.support-subtitle[b-hv2uz79pac] {
    font-size: 0.85rem;
    color: #718096;
    margin: 0;
}

.support-admin-status[b-hv2uz79pac] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #4A5568;
}

.status-dot[b-hv2uz79pac] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

    .status-dot.online[b-hv2uz79pac] {
        background: #48BB78;
        box-shadow: 0 0 6px #48BB78;
    }

    .status-dot.offline[b-hv2uz79pac] {
        background: #A0AEC0;
    }

/* Ticket history */
.support-history[b-hv2uz79pac] {
    margin-bottom: 1rem;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
}

    .support-history summary[b-hv2uz79pac] {
        padding: 0.6rem 1rem;
        background: #F7FAFC;
        font-size: 0.85rem;
        font-weight: 600;
        color: #4A5568;
        cursor: pointer;
    }

.support-ticket-list[b-hv2uz79pac] {
    max-height: 180px;
    overflow-y: auto;
}

.support-ticket-item[b-hv2uz79pac] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    border-top: 1px solid #EDF2F7;
    background: #fff;
    cursor: pointer;
    text-align: right;
    font-size: 0.82rem;
}

    .support-ticket-item:hover[b-hv2uz79pac] {
        background: #EBF8FF;
    }

    .support-ticket-item.active[b-hv2uz79pac] {
        background: #BEE3F8;
    }

.ticket-meta[b-hv2uz79pac] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ticket-status[b-hv2uz79pac] {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

    .ticket-status.status-open[b-hv2uz79pac] {
        background: #FEFCBF;
        color: #975A16;
    }

    .ticket-status.status-progress[b-hv2uz79pac] {
        background: #BEE3F8;
        color: #2B6CB0;
    }

    .ticket-status.status-closed[b-hv2uz79pac] {
        background: #E2E8F0;
        color: #718096;
    }

.ticket-unread[b-hv2uz79pac] {
    background: #E53E3E;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ticket-date[b-hv2uz79pac] {
    font-size: 0.72rem;
    color: #A0AEC0;
}

/* Chat area */
.support-chat[b-hv2uz79pac] {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.support-messages[b-hv2uz79pac] {
    min-height: 300px;
    max-height: 450px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #F7FAFC;
}

.support-loading[b-hv2uz79pac],
.support-empty[b-hv2uz79pac] {
    text-align: center;
    color: #A0AEC0;
    padding: 2rem;
}

    .support-empty span[b-hv2uz79pac] {
        font-size: 2rem;
        display: block;
        margin-bottom: 0.5rem;
    }

/* Messages */
.msg[b-hv2uz79pac] {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

.msg-player[b-hv2uz79pac] {
    align-self: flex-end;
}

.msg-admin[b-hv2uz79pac] {
    align-self: flex-start;
}

.msg-bubble[b-hv2uz79pac] {
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
}

.msg-player .msg-bubble[b-hv2uz79pac] {
    background: #3182CE;
    color: #fff;
    border-bottom-left: 4px;
}

.msg-admin .msg-bubble[b-hv2uz79pac] {
    background: #EDF2F7;
    color: #2D3748;
    border-bottom-right: 4px;
}

.msg-system .msg-bubble[b-hv2uz79pac] {
    background: #FFFBEB;
    color: #975A16;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 6px;
}

.msg-system[b-hv2uz79pac] {
    align-self: center !important;
    max-width: 90%;
}

.msg-system-text[b-hv2uz79pac] {
    font-size: 0.8rem;
}

.msg-time[b-hv2uz79pac] {
    font-size: 0.68rem;
    color: #A0AEC0;
    margin-top: 0.15rem;
}

.msg-player .msg-time[b-hv2uz79pac] {
    text-align: left;
}

.msg-admin .msg-time[b-hv2uz79pac] {
    text-align: right;
}

.msg-redirect-link[b-hv2uz79pac] {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: #3182CE;
    text-decoration: underline;
}

.msg-content[b-hv2uz79pac] {
    white-space: pre-wrap;
}

/* Input area */
.support-input-area[b-hv2uz79pac] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid #E2E8F0;
    background: #fff;
}

.support-input[b-hv2uz79pac] {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    resize: none;
    font-family: inherit;
    outline: none;
}

    .support-input:focus[b-hv2uz79pac] {
        border-color: #3182CE;
        box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.15);
    }

.support-send-btn[b-hv2uz79pac] {
    padding: 0.5rem 1.2rem;
    background: #3182CE;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

    .support-send-btn:hover:not(:disabled)[b-hv2uz79pac] {
        background: #2B6CB0;
    }

    .support-send-btn:disabled[b-hv2uz79pac] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Closed bar */
.support-closed-bar[b-hv2uz79pac] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #F7FAFC;
    border-top: 1px solid #E2E8F0;
    font-size: 0.85rem;
    color: #718096;
}

.support-new-btn[b-hv2uz79pac] {
    padding: 0.4rem 1rem;
    background: #48BB78;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

    .support-new-btn:hover[b-hv2uz79pac] {
        background: #38A169;
    }
/* /Components/Pages/Village/BuildingDetail.razor.rz.scp.css */
/* ==========================================================================
   BuildingDetail.razor.css — Building Detail Page
   Logo · Stats · Training · Upgrade · Demolish · Special Buildings
   ========================================================================== */

/* --- Storage info box (Warehouse / Granary detail) --- */
.storage-info-box[b-uhx8ik8bmi] {
    background: #f8f5ec;
    border: 1px solid #c8b88a;
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: 0.92em;
}

.storage-info-box p[b-uhx8ik8bmi] {
    margin: 4px 0;
}

/* --- Build wrapper --- */
#build[b-uhx8ik8bmi] {
    position: relative;
    min-height: 200px;
    font-family: Tahoma, Arial, sans-serif;
    color: #333;
    padding: 4px 0;
    overflow-x: hidden;
    max-width: 100%;
}

#build h1.titleInHeader[b-uhx8ik8bmi] {
    margin: 0 0 14px;
    padding: 8px 12px;
    font-size: 26px;
    font-weight: bold;
    color: #5B9C00;
    font-family: inherit;
    background: linear-gradient(to left, #f4fbe8, transparent 70%);
    border-right: 3px solid #5B9C00;
    border-radius: 0 4px 4px 0;
}

#build h1.titleInHeader .level[b-uhx8ik8bmi] {
    font-size: 18px;
    font-weight: bold;
    color: #7ab83a;
    margin-right: 4px;
}

/* --- Cross-village navigation arrows in building header --- */
#build h1.titleInHeader .village-nav-arrow[b-uhx8ik8bmi] {
    flex-shrink: 0;
    cursor: pointer;
    color: #555;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s;
    display: inline-block;
    padding: 0 4px;
}

#build h1.titleInHeader .village-nav-arrow:hover[b-uhx8ik8bmi] {
    color: #000;
}

#build h1.titleInHeader .village-nav-arrow.disabled[b-uhx8ik8bmi] {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}

#build h2[b-uhx8ik8bmi] {
    margin: 20px 0 8px;
    font-size: 19px;
    font-weight: bold;
    color: var(--text-heading);
    font-family: inherit;
}

/* --- Building Logo & Description --- */
#build .build_desc[b-uhx8ik8bmi] {
    min-height: 85px;
    margin-bottom: 18px;
    padding: 12px 14px;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    font-family: inherit;
    background: #fcfcfd;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
}

#build a.build_logo[b-uhx8ik8bmi] {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    display: block;
}

#build a.build_logo img.building[b-uhx8ik8bmi] {
    border-radius: 4px;
}


/* --- Build Value Table (stats) --- */
#build_value[b-uhx8ik8bmi] {
    background-color: #f8faf5;
    line-height: 1.6;
    width: 100%;
    max-width: 450px;
    border: 1px solid #d5e6c0;
    border-radius: 5px;
    margin: 14px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

#build_value tr[b-uhx8ik8bmi] {
    border-bottom: 1px solid #e8f0dc;
}

#build_value tr:last-child[b-uhx8ik8bmi] {
    border-bottom: none;
}

#build_value th[b-uhx8ik8bmi],
#build_value td[b-uhx8ik8bmi] {
    white-space: nowrap;
    padding: 7px 12px;
    border: none;
    font-weight: normal;
}

#build_value th[b-uhx8ik8bmi] {
    padding-inline-end: 20px;
    color: #4a7530;
    font-weight: bold;
    background-color: #eef5e5;
    width: 45%;
}

#build_value td[b-uhx8ik8bmi] {
    text-align: right;
    color: #333;
}

#build_value td b[b-uhx8ik8bmi] {
    color: #2a6b10;
    font-weight: bold;
    font-size: 15px;
}

/* --- Training Table (build_details — Barracks, Stable, etc.) --- */
[b-uhx8ik8bmi] .build_details {
    width: 100%;
    border: 1px solid var(--border-light);
    margin: 10px 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
}

[b-uhx8ik8bmi] .build_details thead td {
    background-color: var(--bg-table-head);
    padding: 5px 7px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
    font-size: 14px;
}

[b-uhx8ik8bmi] .build_details tbody tr {
    border-bottom: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] .build_details tbody tr:nth-child(even) {
    background-color: var(--bg-table-even);
}

[b-uhx8ik8bmi] .build_details td {
    padding: 2px 7px;
    vertical-align: middle;
}

/* Description cell — unit name + costs */
[b-uhx8ik8bmi] .build_details td.desc {
    line-height: 1.6;
}

[b-uhx8ik8bmi] .build_details td.desc .tit {
    margin-bottom: 3px;
}

[b-uhx8ik8bmi] .build_details td.desc .tit img {
    margin: 0 5px;
    position: relative;
    top: 3px;
}

[b-uhx8ik8bmi] .build_details td.desc .tit a {
    font-weight: bold;
    font-size: 15px;
}

[b-uhx8ik8bmi] .build_details td.desc .tit .info {
    color: var(--text-secondary);
    font-size: 14px;
    margin-inline-start: 4px;
    font-weight: normal;
}

[b-uhx8ik8bmi] .build_details td.desc .details {
    padding-inline-start: 30px;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: normal;
}

[b-uhx8ik8bmi] .build_details td.desc .details img {
    vertical-align: middle;
    margin: 0 1px;
}

/* Action cell (research/upgrade link) */
[b-uhx8ik8bmi] .build_details td.act {
    text-align: center;
    width: 29%;
    vertical-align: middle;
}

[b-uhx8ik8bmi] .build_details td.act a.research {
    display: inline-block;
    padding: 3px 12px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

[b-uhx8ik8bmi] .build_details td.act a.research:hover {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* Input cell (quantity) */
[b-uhx8ik8bmi] .build_details td.val {
    text-align: center;
    width: 12%;
    vertical-align: middle;
    white-space: nowrap;
}

[b-uhx8ik8bmi] .build_details td.val > span {
    display: inline;
    margin-inline-end: 6px;
}

[b-uhx8ik8bmi] .build_details td.val input.text {
    width: 35px;
    text-align: center;
    padding: 2px 4px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid var(--border-medium);
}

/* Max cell (max trainable) */
[b-uhx8ik8bmi] .build_details td.max {
    text-align: center;
    width: 12%;
    vertical-align: middle;
}

/* --- Train Button (replaces input type="image") --- */
[b-uhx8ik8bmi] #btn_train {
    display: inline-block;
    padding: 4px 16px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin: 8px 0;
}

[b-uhx8ik8bmi] #btn_train:hover {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* Dynamic image buttons (general — used as submit) */
[b-uhx8ik8bmi] .dynamic_img {
    display: inline-block;
    padding: 4px 16px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

[b-uhx8ik8bmi] .dynamic_img:hover {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

/* --- Upgrade / Contract Section --- */
#contract[b-uhx8ik8bmi] {
    line-height: 1.6;
    margin: 18px 0;
    font-size: 14px;
    font-weight: normal;
    font-family: inherit;
    color: #333;
    clear: both;
}

#contract .contractText[b-uhx8ik8bmi] {
    margin-bottom: 5px;
}

#contract .contractText b[b-uhx8ik8bmi] {
    color: #000;
}

#contract .contractCosts[b-uhx8ik8bmi] {
    margin-bottom: 8px;
}

#contract .showCosts[b-uhx8ik8bmi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#contract .showCosts span[b-uhx8ik8bmi] {
    display: inline-flex;
    align-items: center;
}

#contract .showCosts img[b-uhx8ik8bmi] {
    margin-left: 3px;
}

#contract .contractLink[b-uhx8ik8bmi] {
    margin-top: 8px;
}

.marketplace-actions[b-uhx8ik8bmi] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

#contract button.build[b-uhx8ik8bmi],
#demolish button.build[b-uhx8ik8bmi],
.new_building button.build[b-uhx8ik8bmi],
.marketplace-actions button.build[b-uhx8ik8bmi] {
    display: inline-flex;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

/* Standard T4 button styling simulation */
#contract button.build .button-container[b-uhx8ik8bmi],
#demolish button.build .button-container[b-uhx8ik8bmi],
.new_building button.build .button-container[b-uhx8ik8bmi],
.marketplace-actions button.build .button-container[b-uhx8ik8bmi] {
    background: #69a531;
    border: 1px solid #4a7522;
    border-radius: 4px;
    padding: 5px 12px;
    color: white;
    font-weight: bold;
    font-size: 13px;
}

#contract button.build .button-container:hover[b-uhx8ik8bmi],
#demolish button.build .button-container:hover[b-uhx8ik8bmi],
.new_building button.build .button-container:hover[b-uhx8ik8bmi],
.marketplace-actions button.build .button-container:hover[b-uhx8ik8bmi] {
    background: #78bb38;
}

#contract .none[b-uhx8ik8bmi] {
    color: #999;
    font-weight: bold;
}

[b-uhx8ik8bmi] .fully_upgraded {
    color: #999;
    font-size: 14px;
    font-weight: normal;
}

/* --- Demolish Section --- */
#demolish[b-uhx8ik8bmi] {
    margin: 20px 0;
    padding: 15px;
    background-color: #fbfbfc;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    clear: both;
}

#demolish h4.round[b-uhx8ik8bmi] {
    margin-top: 0;
    margin-bottom: 10px;
    color: #4A4A4A;
    font-size: 19px;
    font-weight: bold;
}

#demolish p[b-uhx8ik8bmi] {
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    line-height: 1.5;
}

#demolish .demolish-gold-option[b-uhx8ik8bmi] {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}

#demolish form.demolish_building[b-uhx8ik8bmi] {
    display: flex;
    align-items: center;
    gap: 15px;
}

#contract button.gold-btn .button-container[b-uhx8ik8bmi] {
    background: #e6b800; /* Gold button primary color */
    border: 1px solid #b38600;
}

#contract button.gold-btn .button-container:hover[b-uhx8ik8bmi] {
    background: #ffd11a;
}


#demolish select.dropdown[b-uhx8ik8bmi] {
    width: 250px;
    padding: 5px 8px;
    font-size: 14px;
    border: 1px solid #aaa;
    border-radius: 3px;
}

#demolish #btn_demolish[b-uhx8ik8bmi] {
    /* Basic button is already styled above */
}

/* --- New Building Selection (empty slot — gid0) --- */
#build.gid0 h1[b-uhx8ik8bmi] {
    margin-bottom: 20px;
    text-align: center;
    color: #5B9C00;
    font-size: 26px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
}

#build.gid0 h2[b-uhx8ik8bmi] {
    margin: 20px 0 6px;
    font-size: 19px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
    color: var(--text-heading);
}

#build.gid0 table.new_building[b-uhx8ik8bmi] {
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
}

#build.gid0 table.new_building:last-of-type[b-uhx8ik8bmi] {
    border-bottom: none;
}

#build.gid0 table.new_building .desc[b-uhx8ik8bmi] {
    vertical-align: top;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    font-family: Tahoma, Arial, sans-serif;
}

#build.gid0 table.new_building .bimg[b-uhx8ik8bmi] {
    vertical-align: top;
    width: 120px;
    text-align: center;
    padding-inline-start: 15px;
}

#build.gid0 table.new_building .bimg img.building[b-uhx8ik8bmi] {
    position: relative;
    display: inline-block;
}

#build.gid0 table.new_building .res[b-uhx8ik8bmi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma, Arial, sans-serif;
    color: #333;
    direction: rtl;
}

#build.gid0 table.new_building .res img[b-uhx8ik8bmi] {
    margin: 0 2px;
    vertical-align: middle;
}

#build.gid0 table.new_building .link[b-uhx8ik8bmi] {
    padding-top: 8px;
    vertical-align: bottom;
    text-align: right;
}

#build.gid0 table.new_building .link a.build[b-uhx8ik8bmi] {
    color: #5B9C00;
    font-weight: bold;
    font-size: 13px;
    font-family: Tahoma, Arial, sans-serif;
    text-decoration: none;
}

#build.gid0 table.new_building .link a.build:hover[b-uhx8ik8bmi] {
    color: #4A8200;
    text-decoration: underline;
}

/* --- Special Building Sections --- */

/* Treasury (#own table) */
[b-uhx8ik8bmi] #own {
    width: 100%;
    border: 1px solid var(--border-light);
    margin: 8px 0;
}

[b-uhx8ik8bmi] #own thead th {
    background-color: var(--bg-table-head);
    padding: 4px 6px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

[b-uhx8ik8bmi] #own thead td {
    background-color: var(--bg-table-even);
    padding: 3px 6px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] #own tbody td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] #own tbody td.none {
    text-align: center;
    color: #C0C0C0;
    padding: 12px;
}

/* Hero's Mansion — hero stats display (classic Travian style) */
[b-uhx8ik8bmi] .hero-stats-display {
    margin: 10px 0;
}

[b-uhx8ik8bmi] .hero-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: linear-gradient(to left, #f4fbe8, #fff);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

[b-uhx8ik8bmi] .hero-portrait {
    width: 80px;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f5f5f5;
}

[b-uhx8ik8bmi] .hero-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-uhx8ik8bmi] .hero-name {
    font-size: 15px;
    font-weight: bold;
    color: #5B9C00;
}

[b-uhx8ik8bmi] .hero-health {
    font-size: 14px;
    font-weight: bold;
    color: #c00;
}

/* Hero's Mansion — distribution table */
[b-uhx8ik8bmi] #distribution {
    width: 100%;
    border: 1px solid var(--border-light);
    margin: 8px 0;
}

[b-uhx8ik8bmi] #distribution thead th {
    background-color: var(--bg-table-head);
    padding: 4px 6px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

[b-uhx8ik8bmi] #distribution tbody td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] #distribution td.desc {
    text-align: right;
    font-weight: bold;
    background-color: var(--bg-table-even);
    white-space: nowrap;
}

[b-uhx8ik8bmi] #distribution td.val {
    text-align: center;
    font-weight: bold;
    padding: 3px 6px;
}

[b-uhx8ik8bmi] #distribution td.points {
    text-align: left;
    color: #888;
    font-size: 12px;
    padding: 3px 6px;
    white-space: nowrap;
}

[b-uhx8ik8bmi] .hero-exp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin-top: 4px;
    background: var(--bg-table-even);
    border: 1px solid var(--border-light);
    font-size: 13px;
}

[b-uhx8ik8bmi] .hero-redistribute {
    margin-right: auto;
}

[b-uhx8ik8bmi] .hero-redistribute a {
    color: #5B9C00;
    font-weight: bold;
    text-decoration: none;
}

[b-uhx8ik8bmi] .hero-redistribute a:hover {
    text-decoration: underline;
}

/* --- Under Progress Table (active training/research) --- */
[b-uhx8ik8bmi] .under_progress {
    margin-top: 15px;
    border: 1px solid var(--border-light);
    width: 100%;
}

[b-uhx8ik8bmi] .under_progress td {
    padding: 2px 7px;
    text-align: center;
}

[b-uhx8ik8bmi] .under_progress td.desc {
    text-align: right;
}

[b-uhx8ik8bmi] .under_progress td.desc img {
    margin: 0 5px;
    position: relative;
    top: 3px;
}

[b-uhx8ik8bmi] .under_progress td.dur {
    width: 20%;
}

[b-uhx8ik8bmi] .under_progress td.fin {
    width: 20%;
}

[b-uhx8ik8bmi] .under_progress tr.next td {
    background-color: #F5F5F5;
}

/* --- Build Queue (same as village pages) --- */
#building_contract[b-uhx8ik8bmi] {
    width: 100%;
    margin: 10px 0;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
}

#building_contract thead th[b-uhx8ik8bmi] {
    background-color: var(--bg-table-head);
    padding: 3px 6px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

#building_contract tbody td[b-uhx8ik8bmi] {
    padding: 2px 6px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    font-weight: normal;
}

#building_contract td.ico[b-uhx8ik8bmi] {
    width: 18px;
    padding-inline-start: 4px;
}

/* --- Info Message --- */
[b-uhx8ik8bmi] .info-message {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: #FFF3C4;
    border: 1px solid var(--border-light);
    color: var(--text-heading);
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
    font-weight: normal;
    line-height: 1.5;
}

/* --- Switches --- */
p.switch[b-uhx8ik8bmi] {
    text-align: left;
}

/* --- Loading --- */
.loading-spinner[b-uhx8ik8bmi] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Upcoming Buildings Toggle --- */
.upcoming-toggle[b-uhx8ik8bmi] {
    text-align: center;
    margin: 20px 0 8px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
}

.upcoming-toggle a[b-uhx8ik8bmi] {
    color: #5B9C00;
    font-weight: bold;
    font-size: 15px;
    font-family: Tahoma, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.upcoming-toggle a:hover[b-uhx8ik8bmi] {
    text-decoration: underline;
    color: #4A8200;
}

/* --- Upcoming Buildings Section --- */
.upcoming-section[b-uhx8ik8bmi] {
    margin-top: 12px;
    padding-top: 4px;
}

.upcoming-title[b-uhx8ik8bmi] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 16px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--border-light);
}

/* --- Upcoming Building Card --- */
.upcoming-building[b-uhx8ik8bmi] {
    display: flex;
    flex-direction: row-reverse;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-light);
}

.upcoming-building:last-child[b-uhx8ik8bmi] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.upcoming-img[b-uhx8ik8bmi] {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

.upcoming-img img[b-uhx8ik8bmi] {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.upcoming-details[b-uhx8ik8bmi] {
    flex: 1;
    min-width: 0;
    text-align: right;
    direction: rtl;
}

.upcoming-details h3[b-uhx8ik8bmi] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-heading);
    margin: 0 0 6px;
    padding: 0;
}

.upcoming-desc[b-uhx8ik8bmi] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    margin: 0 0 10px;
}

/* --- Requirements --- */
.upcoming-reqs[b-uhx8ik8bmi] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
}

.upcoming-reqs b[b-uhx8ik8bmi] {
    display: block;
    color: var(--text-heading);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.upcoming-req[b-uhx8ik8bmi] {
    font-size: 14px;
    font-weight: normal;
    padding-right: 4px;
}

.upcoming-req.met[b-uhx8ik8bmi] {
    color: #5B9C00;
}

.upcoming-req.unmet[b-uhx8ik8bmi] {
    color: #B3713F;
}

/* --- Training Card Layout (per-unit card matching original Travian) --- */
[b-uhx8ik8bmi] .train-card {
    display: flex;
    flex-direction: row-reverse;
    gap: 14px;
    margin-bottom: 16px;
    padding: 12px 10px;
    border: 1px solid var(--border-light);
    background-color: var(--bg-content);
    direction: rtl;
}

[b-uhx8ik8bmi] .train-card-img {
    flex-shrink: 0;
    width: 96px;
    text-align: center;
    align-self: flex-start;
}

[b-uhx8ik8bmi] .train-card-img img.unit {
    display: inline-block;
    transform: scale(2.5);
    transform-origin: center center;
    margin: 24px 0;
}

[b-uhx8ik8bmi] .train-card-body {
    flex: 1;
    min-width: 0;
    text-align: right;
}

[b-uhx8ik8bmi] .train-card-name {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #5B9C00;
    margin-bottom: 6px;
}

[b-uhx8ik8bmi] .train-card-name img.unit {
    vertical-align: middle;
    margin-left: 4px;
}

[b-uhx8ik8bmi] .train-card-available {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: normal;
    margin-right: 6px;
}

[b-uhx8ik8bmi] .train-card-res {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
    color: #333;
    margin-bottom: 4px;
    direction: rtl;
}

[b-uhx8ik8bmi] .train-card-res img {
    vertical-align: middle;
    margin: 0 2px;
}

[b-uhx8ik8bmi] .train-card-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    direction: rtl;
}

[b-uhx8ik8bmi] .train-card-label {
    color: var(--text-heading);
    font-weight: 600;
}

[b-uhx8ik8bmi] .train-card-input {
    width: 50px;
    text-align: center;
    padding: 3px 6px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid var(--border-medium);
    font-family: Tahoma, Arial, sans-serif;
}

[b-uhx8ik8bmi] .train-card-sep {
    color: var(--text-secondary);
}

[b-uhx8ik8bmi] .train-card-max {
    display: inline-block;
    padding: 1px 8px;
    background: linear-gradient(to bottom, #C8E6C9, #81C784);
    border: 1px solid #66BB6A;
    border-radius: 3px;
    color: #1B5E20;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

[b-uhx8ik8bmi] .train-card-max:hover {
    background: linear-gradient(to bottom, #A5D6A7, #66BB6A);
    border-color: #4CAF50;
    text-decoration: none;
}

/* --- Improved Military Train (Matching Original T3 UI) --- */
[b-uhx8ik8bmi] .build_action {
    margin-top: 15px;
}

[b-uhx8ik8bmi] table.military_train {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] table.military_train tr {
    border-bottom: 1px dotted #ccc;
}

[b-uhx8ik8bmi] table.military_train td {
    padding: 10px;
    vertical-align: middle;
}

[b-uhx8ik8bmi] table.military_train td.desc {
    text-align: right;
    line-height: 2;
    direction: rtl;
}

[b-uhx8ik8bmi] table.military_train td.bimg {
    text-align: center;
    width: 120px;
    vertical-align: top;
}

[b-uhx8ik8bmi] table.military_train td.bimg img {
    margin-right: 0;
    max-width: 100%;
}

[b-uhx8ik8bmi] table.military_train .tit {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    text-align: center;
}

[b-uhx8ik8bmi] table.military_train .tit a {
    color: #5B9C00;
    text-decoration: none;
}

[b-uhx8ik8bmi] table.military_train .tit .info {
    color: #777;
    font-weight: normal;
    font-size: 11px;
}

[b-uhx8ik8bmi] table.military_train .details {
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    direction: rtl;
    text-align: center;
    display: block;
}

[b-uhx8ik8bmi] table.military_train .details img {
    vertical-align: middle;
    margin: 0 2px 0 5px;
}

[b-uhx8ik8bmi] table.military_train .time_line {
    font-size: 12px;
    margin: 8px 0 0 0;
    color: #333;
    text-align: center;
}

[b-uhx8ik8bmi] table.military_train .cta {
    font-size: 13px;
    font-weight: bold;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

[b-uhx8ik8bmi] table.military_train .cta .text {
    width: 50px;
    text-align: center;
    border: 1px solid #71D000;
    padding: 3px;
    border-radius: 2px;
    font-weight: bold;
    font-size: 14px;
}

[b-uhx8ik8bmi] table.military_train .cta a {
    color: #71D000;
    font-weight: bold;
    text-decoration: none;
}

[b-uhx8ik8bmi] table.military_train .cta span {
    color: #000;
}

[b-uhx8ik8bmi] .action-btn {
    text-align: center;
    margin: 15px 0;
}

[b-uhx8ik8bmi] .btn-train {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
    border: 1px solid #71D000;
    padding: 5px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

[b-uhx8ik8bmi] .btn-train:hover {
    background: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
}

/* --- Town Hall — Celebration Section (matching original Travian) --- */
[b-uhx8ik8bmi] .cel_desc {
    margin: 8px 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    color: #333;
    text-align: right;
    direction: rtl;
}

[b-uhx8ik8bmi] .cel_desc p {
    margin: 4px 0;
}

[b-uhx8ik8bmi] .cel_desc .cp_count {
    color: #5B9C00;
    font-weight: 700;
    font-size: 13px;
    margin-top: 8px;
}

[b-uhx8ik8bmi] .cel_desc .cp_count b {
    color: #5B9C00;
}

/* Celebration table */
.cel_table thead td[b-uhx8ik8bmi] {
    background-color: #E8DCC8;
    font-weight: 700;
    color: #333;
}

.cel_table .res_wait[b-uhx8ik8bmi] {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    padding-inline-start: 30px;
}

.cel_table td.act .none[b-uhx8ik8bmi] {
    color: #999;
    font-size: 11px;
}

.cel_table td.act button.research[b-uhx8ik8bmi] {
    display: inline-block;
    padding: 3px 14px;
    background: linear-gradient(to bottom, #8BC34A, #558B2F);
    border: 1px solid var(--border-green);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.cel_table td.act button.research:hover[b-uhx8ik8bmi] {
    background: linear-gradient(to bottom, #9CCC65, #689F38);
}

.cel_table img.npc[b-uhx8ik8bmi] {
    vertical-align: middle;
    width: 16px;
    height: 16px;
}

/* Fully upgraded notice */
[b-uhx8ik8bmi] .fully_upgraded {
    text-align: center;
    margin: 12px 0;
    color: #5B9C00;
    font-size: 12px;
    font-weight: 700;
    font-family: Tahoma, Arial, sans-serif;
}

/* --- Residence / Palace CP Info --- */
.cp-info[b-uhx8ik8bmi] {
    margin: 8px 0;
}

.loyalty-info[b-uhx8ik8bmi] {
    margin: 8px 0;
    font-size: 12px;
}

.expansion-info[b-uhx8ik8bmi] {
    margin: 8px 0;
    font-size: 12px;
}

.expansion-info p[b-uhx8ik8bmi] {
    margin: 8px 0;
}

/* Text menu tabs (Residence/Palace) */
#textmenu[b-uhx8ik8bmi] {
    padding: 6px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    direction: rtl;
}

#textmenu a[b-uhx8ik8bmi] {
    color: #5B9C00;
    text-decoration: none;
    padding: 4px 8px;
    font-weight: 600;
}

#textmenu a:hover[b-uhx8ik8bmi] {
    text-decoration: underline;
}

#textmenu a.selected[b-uhx8ik8bmi] {
    color: var(--text-heading);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

/* --- Beginner Protection Box --- */
.beginner-protection-box[b-uhx8ik8bmi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fef9e7;
    border: 1px solid #f0c040;
    border-radius: 4px;
    font-size: 13px;
}

.beginner-protection-box .protection-icon[b-uhx8ik8bmi] {
    font-size: 16px;
}

.beginner-protection-box .protection-text[b-uhx8ik8bmi] {
    flex: 1;
    color: #5a4e00;
    font-weight: 600;
}

.beginner-protection-box .cancel-protection-btn[b-uhx8ik8bmi] {
    padding: 3px 10px;
    background: #c0392b;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}

.beginner-protection-box .cancel-protection-btn:hover[b-uhx8ik8bmi] {
    background: #a93226;
}

/* ??? Embassy info panel ??? */
.embassy-info[b-uhx8ik8bmi] {
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.embassy-info p[b-uhx8ik8bmi] {
    margin: 0 0 8px;
    line-height: 1.5;
}

.embassy-status[b-uhx8ik8bmi] {
    margin-bottom: 6px;
}

.embassy-actions[b-uhx8ik8bmi] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.embassy-actions .btn-green[b-uhx8ik8bmi] {
    display: inline-block;
    padding: 5px 14px;
    background: #3E7B27;
    color: #fff;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.embassy-actions .btn-green:hover[b-uhx8ik8bmi] { background: #4A8C31; }

.embassy-actions .btn-default[b-uhx8ik8bmi] {
    display: inline-block;
    padding: 5px 14px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.embassy-actions .btn-default:hover[b-uhx8ik8bmi] { background: #e8e8e8; }

.embassy-info .build_details[b-uhx8ik8bmi] {
    width: 100%;
    table-layout: fixed;
}

.embassy-info .build_details td[b-uhx8ik8bmi],
.embassy-info .build_details th[b-uhx8ik8bmi] {
    word-break: break-word;
}

.embassy-info .build_details input.text[b-uhx8ik8bmi] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.embassy-info .cancel-link[b-uhx8ik8bmi] {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(to bottom, #FFCDD2, #EF9A9A);
    border: 1px solid #E57373;
    border-radius: 3px;
    color: #B71C1C;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.embassy-info .cancel-link:hover[b-uhx8ik8bmi] {
    background: linear-gradient(to bottom, #EF9A9A, #E57373);
}

/* marketplace uses standard .green.build buttons */

/* ==========================================================================
   Responsive — Tablet (≤900px)
   ========================================================================== */
@media (max-width: 900px) {
    #build_value[b-uhx8ik8bmi] {
        max-width: 100%;
    }

    [b-uhx8ik8bmi] .build_details td.desc .details {
        white-space: normal;
        padding-inline-start: 0;
    }

    [b-uhx8ik8bmi] table.military_train td.bimg {
        width: 80px;
    }
}

/* ==========================================================================
   Responsive — Mobile (≤600px)
   ========================================================================== */
@media (max-width: 600px) {
    /* Title */
    #build h1.titleInHeader[b-uhx8ik8bmi] {
        font-size: 20px;
        padding: 6px 8px;
    }

    #build h1.titleInHeader .level[b-uhx8ik8bmi] {
        font-size: 15px;
    }

    /* Building description — stack logo above text */
    #build .build_desc[b-uhx8ik8bmi] {
        padding: 8px;
    }

    #build a.build_logo[b-uhx8ik8bmi] {
        float: none;
        text-align: center;
        margin: 0 auto 8px;
    }

    /* Build value stats table */
    #build_value[b-uhx8ik8bmi] {
        max-width: 100%;
        font-size: 13px;
    }

    #build_value th[b-uhx8ik8bmi],
    #build_value td[b-uhx8ik8bmi] {
        white-space: normal;
        padding: 5px 8px;
    }

    /* Training tables (build_details) */
    [b-uhx8ik8bmi] .build_details {
        font-size: 13px;
    }

    [b-uhx8ik8bmi] .build_details td {
        padding: 4px 5px;
    }

    [b-uhx8ik8bmi] .build_details td.desc .details {
        white-space: normal;
        padding-inline-start: 0;
        font-size: 12px;
    }

    [b-uhx8ik8bmi] .build_details td.act {
        width: auto;
        padding: 4px;
    }

    [b-uhx8ik8bmi] .build_details td.val {
        width: auto;
    }

    [b-uhx8ik8bmi] .build_details td.max {
        width: auto;
    }

    /* Military training table — stack image + details */
    [b-uhx8ik8bmi] table.military_train td.bimg {
        width: 60px;
        padding: 6px 4px;
    }

    [b-uhx8ik8bmi] table.military_train td.bimg img {
        width: 56px;
        height: auto;
    }

    [b-uhx8ik8bmi] table.military_train td {
        padding: 6px 4px;
    }

    [b-uhx8ik8bmi] table.military_train .details {
        font-size: 12px;
    }

    [b-uhx8ik8bmi] table.military_train .tit {
        font-size: 14px;
    }

    /* Contract / upgrade costs */
    #contract .showCosts[b-uhx8ik8bmi] {
        gap: 4px;
        font-size: 13px;
    }

    /* Demolish */
    #demolish form.demolish_building[b-uhx8ik8bmi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #demolish select.dropdown[b-uhx8ik8bmi] {
        width: 100%;
    }

    /* Textmenu tabs — allow wrapping */
    #textmenu[b-uhx8ik8bmi] {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 0;
    }

    #textmenu a[b-uhx8ik8bmi] {
        font-size: 13px;
        padding: 3px 5px;
    }

    /* Upcoming buildings — stack vertically */
    .upcoming-building[b-uhx8ik8bmi] {
        flex-direction: column;
        align-items: center;
    }

    .upcoming-img[b-uhx8ik8bmi] {
        width: 72px;
        height: 72px;
    }

    .upcoming-img img[b-uhx8ik8bmi] {
        width: 72px;
        height: 72px;
    }

    /* Celebration table */
    [b-uhx8ik8bmi] .cel_table .res_wait {
        padding-inline-start: 0;
    }

    /* Train cards */
    [b-uhx8ik8bmi] .train-card {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px;
    }

    [b-uhx8ik8bmi] .train-card-img {
        width: auto;
    }

    /* Beginner protection — stack on mobile */
    .beginner-protection-box[b-uhx8ik8bmi] {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }

    .embassy-info[b-uhx8ik8bmi] {
        overflow-x: hidden;
    }

    .embassy-actions[b-uhx8ik8bmi] {
        flex-direction: column;
        align-items: stretch;
    }

    .embassy-actions .btn-green[b-uhx8ik8bmi],
    .embassy-actions .btn-default[b-uhx8ik8bmi] {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .embassy-info .build_details[b-uhx8ik8bmi] {
        table-layout: auto;
    }

    .embassy-info .build_details td.desc[b-uhx8ik8bmi] {
        white-space: normal;
    }

    .embassy-info .build_details td.desc a[b-uhx8ik8bmi] {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .embassy-info .build_details td.act[b-uhx8ik8bmi] {
        width: 90px;
        white-space: nowrap;
    }

    .embassy-info .build_details td.act a[b-uhx8ik8bmi] {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Responsive — Small Phone (≤480px)
   ========================================================================== */
@media (max-width: 480px) {
    #build h1.titleInHeader[b-uhx8ik8bmi] {
        font-size: 17px;
        padding: 4px 6px;
    }

    #build h1.titleInHeader .level[b-uhx8ik8bmi] {
        font-size: 13px;
    }

    #build .build_desc[b-uhx8ik8bmi] {
        font-size: 13px;
        padding: 6px;
    }

    #build_value th[b-uhx8ik8bmi],
    #build_value td[b-uhx8ik8bmi] {
        padding: 4px 6px;
        font-size: 12px;
    }

    /* Training tables — make all columns flexible */
    [b-uhx8ik8bmi] .build_details {
        font-size: 12px;
        table-layout: auto;
    }

    [b-uhx8ik8bmi] .build_details thead td {
        font-size: 12px;
        padding: 3px 4px;
    }

    [b-uhx8ik8bmi] .build_details td.desc .tit a {
        font-size: 13px;
    }

    [b-uhx8ik8bmi] .build_details td.desc .details {
        font-size: 11px;
    }

    [b-uhx8ik8bmi] .build_details td.val input.text {
        width: 30px;
        font-size: 12px;
    }

    /* Military training */
    [b-uhx8ik8bmi] table.military_train td.bimg {
        width: 45px;
        padding: 4px 2px;
    }

    [b-uhx8ik8bmi] table.military_train td.bimg img {
        width: 42px;
    }

    [b-uhx8ik8bmi] table.military_train .tit {
        font-size: 13px;
    }

    [b-uhx8ik8bmi] table.military_train .details {
        font-size: 11px;
    }

    [b-uhx8ik8bmi] table.military_train .cta {
        font-size: 12px;
        gap: 4px;
    }

    [b-uhx8ik8bmi] table.military_train .cta .text {
        width: 40px;
        font-size: 12px;
    }

    /* Celebration table — stack desc + act vertically if needed */
    [b-uhx8ik8bmi] .cel_desc {
        font-size: 11px;
    }

    /* Contract section */
    #contract[b-uhx8ik8bmi] {
        font-size: 13px;
    }

    #contract button.build .button-container[b-uhx8ik8bmi] {
        font-size: 12px;
        padding: 4px 10px;
    }

    /* Textmenu */
    #textmenu a[b-uhx8ik8bmi] {
        font-size: 12px;
        padding: 2px 4px;
    }

    .embassy-info .build_details[b-uhx8ik8bmi],
    .embassy-info .build_details tbody[b-uhx8ik8bmi],
    .embassy-info .build_details tr[b-uhx8ik8bmi],
    .embassy-info .build_details td[b-uhx8ik8bmi] {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .embassy-info .build_details thead[b-uhx8ik8bmi] {
        display: none;
    }

    .embassy-info .build_details tr[b-uhx8ik8bmi] {
        padding: 8px;
        border-bottom: 1px solid #e8f0dc;
    }

    .embassy-info .build_details td[b-uhx8ik8bmi] {
        border: none;
        padding: 4px 0;
        text-align: right;
    }

    .embassy-info .build_details td.act[b-uhx8ik8bmi] {
        width: 100%;
    }

    .embassy-info .build_details td.act a[b-uhx8ik8bmi] {
        min-height: 34px;
    }
}

/* --- Oasis Tables (Hero's Mansion — owned & nearby) --- */
[b-uhx8ik8bmi] .oasis_table {
    width: 100%;
    border: 1px solid var(--border-light);
    margin: 8px 0;
    border-collapse: collapse;
}

[b-uhx8ik8bmi] .oasis_table thead td {
    background-color: var(--bg-table-head);
    padding: 5px 7px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
    font-size: 14px;
    text-align: center;
}

[b-uhx8ik8bmi] .oasis_table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

[b-uhx8ik8bmi] .oasis_table tbody tr:nth-child(even) {
    background-color: var(--bg-table-even);
}

[b-uhx8ik8bmi] .oasis_table td {
    padding: 4px 7px;
    vertical-align: middle;
    font-size: 14px;
}

[b-uhx8ik8bmi] .oasis_table td.desc {
    text-align: right;
    white-space: nowrap;
}

[b-uhx8ik8bmi] .oasis_table td.desc a {
    color: #5B9C00;
    font-weight: bold;
    text-decoration: none;
}

[b-uhx8ik8bmi] .oasis_table td.desc a:hover {
    text-decoration: underline;
}

[b-uhx8ik8bmi] .oasis_table td.val {
    text-align: center;
    white-space: nowrap;
}

[b-uhx8ik8bmi] .oasis_table td.val img {
    vertical-align: middle;
    margin: 0 2px;
}

[b-uhx8ik8bmi] .oasis_table td.act {
    text-align: center;
    width: 80px;
}

[b-uhx8ik8bmi] .oasis_table .cancel-link {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(to bottom, #FFCDD2, #EF9A9A);
    border: 1px solid #E57373;
    border-radius: 3px;
    color: #B71C1C;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

[b-uhx8ik8bmi] .oasis_table .cancel-link:hover {
    background: linear-gradient(to bottom, #EF9A9A, #E57373);
}

[b-uhx8ik8bmi] .oasis-troops {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

[b-uhx8ik8bmi] .oasis-troops img {
    vertical-align: middle;
    margin: 0 1px;
}

[b-uhx8ik8bmi] .oasis-free {
    color: #5B9C00;
    font-weight: bold;
}

/* ─── Gold-button stack on BuildingDetail ──────────────────────────────
   Three independent gold-action buttons (Upgrade-to-Max, Upgrade-All-Resource,
   Instant-Finish-Queue). Buttons size to their content (not full width) and
   align to the start of the line in RTL — same compact look as the rest of
   the game. The standalone variant (queue-finish button rendered outside
   the upgrade panel) gets a bit more vertical breathing room. */
[b-uhx8ik8bmi] .bd-gold-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* RTL: flex-start = right edge */
    gap: 6px;
    margin-top: 10px;
    padding: 0;
}

[b-uhx8ik8bmi] .bd-gold-stack-standalone {
    margin-top: 12px;
    margin-bottom: 6px;
}

/* Buttons stay at their natural content width; just give them a bit more
   horizontal padding than the default .btn-gold-finish so the Arabic text
   has room to breathe without forcing the button to 100%. */
[b-uhx8ik8bmi] .bd-gold-stack .btn-gold-finish {
    width: auto;
    max-width: 100%;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
}

/* ─── Oasis Troops Flex-Wrap (Hero's Mansion) ─── */
[b-uhx8ik8bmi] .oasis-troops {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    line-height: 1;
}

[b-uhx8ik8bmi] .oasis-unit-chip {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    white-space: nowrap;
  /*  background: #f0efe8;
    border: 1px solid #d5cda8;*/
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.92em;
}

[b-uhx8ik8bmi] .oasis-unit-chip .unit {
    display: inline-block;
    vertical-align: middle;
}

[b-uhx8ik8bmi] .oasis-unit-count {
    font-weight: bold;
    color: #333;
}

[b-uhx8ik8bmi] .oasis-free {
    color: #7a8a6a;
}

/* Phones: allow full-width wrap */
@media (max-width: 480px) {
    [b-uhx8ik8bmi] .build_details td.val {
        white-space: normal;
        word-break: break-word;
    }
}

/* --- Abandon Village confirmation dialog --- */
.confirm-overlay[b-uhx8ik8bmi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.confirm-dialog[b-uhx8ik8bmi] {
    background: var(--bg-content, #f8f5ec);
    border: 2px solid var(--border-dark, #c8b88a);
    border-radius: 6px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    direction: rtl;
    overflow: hidden;
}

.confirm-header[b-uhx8ik8bmi] {
    background: var(--bg-header, #5a9a18);
    color: #fff;
    padding: 10px 16px;
    font-weight: bold;
    font-size: 1rem;
}

.confirm-body[b-uhx8ik8bmi] {
    padding: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.confirm-actions[b-uhx8ik8bmi] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid #ddd;
}

.btn-confirm[b-uhx8ik8bmi] {
    color: #fff;
    border: 1px solid #8a0808;
    padding: 6px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-confirm:hover[b-uhx8ik8bmi] {
    opacity: 0.9;
}

.btn-cancel[b-uhx8ik8bmi] {
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    color: #333;
    border: 1px solid #aaa;
    padding: 6px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-cancel:hover[b-uhx8ik8bmi] {
    background: linear-gradient(to bottom, #eee, #d0d0d0);
}
/* /Components/Pages/Village/ResourceFields.razor.rz.scp.css */
/* ==========================================================================
   ResourceFields.razor.css — Village Resource Fields Overview
   Map · Level Sprites · Production Table · Troops · Build Queue
   ========================================================================== */

/* --- Page heading --- */
.village-title[b-veu9sfecob] {
    margin: 8px 0 15px 0;
    font-size: 26px;
    font-weight: bold;
    text-align: center; /* Centered above map */
    color: #000;
}

.village-title .village-subtitle[b-veu9sfecob] {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
}

/* --- Village navigation arrows --- */
.village-title[b-veu9sfecob] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

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

.village-nav-arrow[b-veu9sfecob] {
    flex-shrink: 0;
    cursor: pointer;
    color: #555;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s;
}

.village-nav-arrow:hover[b-veu9sfecob] {
    color: #000;
}

/* --- Resource Layout Container (map + details + queue) --- */
.resource-layout[b-veu9sfecob]::after {
    content: "";
    display: table;
    clear: both;
}

/* --- Village Map Container (300x264 — resource field background) --- */
#village_map[b-veu9sfecob] {
    position: relative;
    width: 300px;
    height: 264px;
    margin-bottom: 15px;
    float: right;
}

/* Resource field background image (x.gif with CSS background from travian-sprites) */
#village_map img#resfeld[b-veu9sfecob] {
    position: absolute;
    width: 300px;
    height: 264px;
    left: 0;
    top: 0;
    z-index: 20;
}

/* Resource level indicator (number inside glvl circle) */
#village_map .reslevel[b-veu9sfecob] {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    margin-top: -3px;
    margin-left: -1px;
    /*background: url("../img/gpack/img/g/s/glvl.gif") no-repeat;*/
    background-size: 100% 100%;
    z-index: 10;
    cursor: pointer;
}

/* --- Individual field positions (from Travian layout) --- */
#village_map .rf1[b-veu9sfecob]  { left: 93px;  top: 27px; }
#village_map .rf2[b-veu9sfecob]  { left: 156px; top: 26px; }
#village_map .rf3[b-veu9sfecob]  { left: 216px; top: 41px; }
#village_map .rf4[b-veu9sfecob]  { left: 38px;  top: 59px; }
#village_map .rf5[b-veu9sfecob]  { left: 130px; top: 67px; }
#village_map .rf6[b-veu9sfecob]  { left: 195px; top: 87px; }
#village_map .rf7[b-veu9sfecob]  { left: 253px; top: 81px; }
#village_map .rf8[b-veu9sfecob]  { left: 23px;  top: 111px; }
#village_map .rf9[b-veu9sfecob]  { left: 74px;  top: 104px; }
#village_map .rf10[b-veu9sfecob] { left: 205px; top: 136px; }
#village_map .rf11[b-veu9sfecob] { left: 260px; top: 139px; }
#village_map .rf12[b-veu9sfecob] { left: 33px;  top: 165px; }
#village_map .rf13[b-veu9sfecob] { left: 84px;  top: 158px; }
#village_map .rf14[b-veu9sfecob] { left: 151px; top: 178px; }
#village_map .rf15[b-veu9sfecob] { left: 230px; top: 192px; }
#village_map .rf16[b-veu9sfecob] { left: 79px;  top: 211px; }
#village_map .rf17[b-veu9sfecob] { left: 132px; top: 223px; }
#village_map .rf18[b-veu9sfecob] { left: 182px; top: 227px; }

/* Active (upgrading) level indicators */
#village_map .reslevel.active[b-veu9sfecob] {
    background: url("../img/gpack/img/g/s/glvlm.gif") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    animation: upgrade-pulse-b-veu9sfecob 1.2s ease-in-out infinite;
    z-index: 12;
}

/* Upgrade effect — animated ring above the level number circle */
#village_map .reslevel.active[b-veu9sfecob]::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 28px;
    height: 28px;
    border: 2px solid #00cc44;
    border-radius: 50%;
    pointer-events: none;
    animation: upgrade-ring-b-veu9sfecob 1.5s ease-out infinite;
}

/* Upgrade effect — pulsing glow behind the number */
#village_map .reslevel.active[b-veu9sfecob]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 204, 68, 0.5) 0%, rgba(0, 204, 68, 0) 70%);
    pointer-events: none;
    animation: upgrade-glow-b-veu9sfecob 1.2s ease-in-out infinite;
}

@keyframes upgrade-pulse-b-veu9sfecob {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.12);
        filter: brightness(1.4);
    }
}

@keyframes upgrade-ring-b-veu9sfecob {
    0% {
        opacity: 0.9;
        transform: scale(0.8);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes upgrade-glow-b-veu9sfecob {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* --- Map Details Panel (production, troops, queue) --- */
#map_details[b-veu9sfecob] {
    float: left;
    width: 229px;
    margin-inline-start: 1px;
    margin-top: -29px;
}

#map_details table[b-veu9sfecob] {
    margin-bottom: 14px;
}

/* --- Movements Table --- */
#movements[b-veu9sfecob] {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    border: none;
    background-color: transparent;
}

#movements thead tr[b-veu9sfecob] {
    background-color: transparent;
}

#movements thead th[b-veu9sfecob] {
    padding: 2px 6px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: right;
    border: none;
}

#movements tbody tr[b-veu9sfecob] {
    border: none;
    background-color: transparent;
}

#movements tbody td[b-veu9sfecob] {
    padding: 2px 2px;
    font-size: 13px;
    color: #000;
    border: none;
}

/* --- Production Table --- */
#production[b-veu9sfecob] {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    border: none;
    background-color: transparent;
}

#production thead tr[b-veu9sfecob] {
    background-color: transparent;
}

#production thead th[b-veu9sfecob] {
    padding: 2px 6px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: right;
    border: none;
}

#production tbody tr[b-veu9sfecob] {
    border: none;
}

#production tbody tr:nth-child(even)[b-veu9sfecob],
#production tbody tr:nth-child(odd)[b-veu9sfecob] {
    background-color: transparent;
}

#production td.ico[b-veu9sfecob] {
    text-align: right;
    padding: 2px 2px 2px 4px;
    width: 20px;
}

#production td.num[b-veu9sfecob] {
    text-align: right;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
    width: 25%;
}

#production td.res[b-veu9sfecob] {
    text-align: right;
    padding: 2px 6px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
}

/* --- Troops Section Table --- */
#troops[b-veu9sfecob] {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    border: none;
    background-color: transparent;
}

#troops thead tr[b-veu9sfecob] {
    background-color: transparent;
}

#troops thead th[b-veu9sfecob] {
    padding: 2px 6px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: right;
    border: none;
}

#troops tbody tr[b-veu9sfecob] {
    border: none;
    background-color: transparent;
}

#troops td.ico[b-veu9sfecob] {
    text-align: right;
    padding: 2px 2px 2px 4px;
    width: 20px;
}

#troops td.num[b-veu9sfecob] {
    text-align: right;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
    width: 25%;
}

#troops td.des[b-veu9sfecob] {
    text-align: right;
    padding: 2px 6px;
    color: #000;
    font-weight: bold;
    font-size: 13px;
}

/* --- Build Queue Section (outside map_details, full width) --- */
.build-queue-section[b-veu9sfecob] {
    clear: both;
    margin: 0;
    line-height: 19px;
}

#building_contract[b-veu9sfecob] {
    width: 100%;
    margin: 0;
    background: transparent;
}

#building_contract thead th[b-veu9sfecob] {
    background: transparent;
    text-align: right;
    padding: 3px 6px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

#building_contract tbody td[b-veu9sfecob] {
    background: transparent;
    padding: 1px 6px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    font-weight: normal;
}

#building_contract td.ico[b-veu9sfecob] {
    width: 18px;
    padding-inline-start: 4px;
}

/* --- Info Message --- */
.info-message[b-veu9sfecob] {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: #FFF3C4;
    border: 1px solid var(--border-light);
    color: var(--text-heading);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
}

/* --- Gold Finish Bar (instant finish button above build queue) --- */
.gold-finish-bar[b-veu9sfecob] {
    margin: 0 0 4px 0;
    text-align: right;
}

.btn-gold-finish[b-veu9sfecob] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(180deg, #fff5cc 0%, #f0d060 50%, #d4a017 100%);
    border: 1px solid #b8860b;
    border-radius: 3px;
    color: #5a3e00;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.btn-gold-finish:hover:not(:disabled)[b-veu9sfecob] {
    background: linear-gradient(180deg, #fffadd 0%, #f5dc70 50%, #daa520 100%);
}

.btn-gold-finish:disabled[b-veu9sfecob] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Loading spinner --- */
.loading-spinner[b-veu9sfecob] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Beginner Protection Table --- */
#beginner_protection[b-veu9sfecob] {
    width: 100%;
    margin-bottom: 8px;
    border-collapse: collapse;
    font-size: 14px;
}

#beginner_protection thead th[b-veu9sfecob] {
    background: #e8d44d;
    color: #5a4e00;
    text-align: right;
    padding: 4px 6px;
    font-weight: 700;
    font-size: 18px;
}

#beginner_protection tbody td[b-veu9sfecob] {
    padding: 4px 6px;
    background: #fef9e7;
    border-bottom: 1px solid #f0e68c;
    font-weight: normal;
}

#beginner_protection td.ico[b-veu9sfecob] {
    width: 24px;
    text-align: center;
    font-size: 14px;
}

#beginner_protection td.des[b-veu9sfecob] {
    color: #5a4e00;
    line-height: 1.5;
    font-weight: 600;
}

#beginner_protection td.num[b-veu9sfecob] {
    font-weight: 700;
    color: #b8860b;
    font-size: 13px;
}

/* ==========================================================================
   Responsive: Resource Fields — mobile stacked layout
   ========================================================================== */

/* ≤560px: float layout breaks (300+229=529px); stack vertically */
@media (max-width: 560px) {
    .resource-layout[b-veu9sfecob] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        direction: rtl;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #village_map[b-veu9sfecob] {
        float: none;
        order: 1;
        flex: 0 0 auto;
        width: 300px;
        height: 264px;
        transform: scale(0.75);
        transform-origin: top right;
        margin-left: -75px;
        margin-right: 0;
        margin-bottom: -66px;
    }

    .build-queue-section[b-veu9sfecob] {
        order: 3;
        clear: none;
        margin: 4px 0;
        width: 100%;
    }

    #map_details[b-veu9sfecob] {
        float: none;
        flex: 1;
        min-width: 90px;
        margin-inline-start: 0;
        margin-top: 0 !important;
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .village-title[b-veu9sfecob] {
        font-size: 16px;
        width: 100%;
        order: 0;
        text-align: center;
        margin: 8px 0;
    }

    .village-nav-arrow[b-veu9sfecob] {
        font-size: 18px;
    }

    .wrapper.troops-mode-auto #troops[b-veu9sfecob],
    .wrapper.troops-mode-auto #reinforcements[b-veu9sfecob],
    .wrapper.troops-mode-auto #movements[b-veu9sfecob] {
        display: none !important;
    }

    /* Optimize production/troops tables for side-by-side view */
    #production[b-veu9sfecob],
    #troops[b-veu9sfecob],
    #reinforcements[b-veu9sfecob],
    #movements[b-veu9sfecob] {
        width: 100%;
        max-width: 110px;
        margin-bottom: 6px;
    }

    #production thead th[b-veu9sfecob],
    #troops thead th[b-veu9sfecob],
    #reinforcements thead th[b-veu9sfecob],
    #movements thead th[b-veu9sfecob] {
        font-size: 13px;
        padding: 4px 0;
        text-align: right;
    }

    #movements tbody tr[b-veu9sfecob] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        border-bottom: 1px dotted #ccc !important;
        padding: 4px 0 !important;
    }

    #movements tbody td.typ[b-veu9sfecob] {
        display: inline-block !important;
        flex: 0 0 20px !important;
        width: 20px !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    #movements tbody td.mov[b-veu9sfecob] {
        display: inline-block !important;
        flex: 1 1 calc(100% - 20px) !important;
        text-align: right !important;
        white-space: normal !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
        padding-right: 4px !important;
    }

    #movements tbody td.div_time[b-veu9sfecob] {
        display: inline-block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        text-align: right !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        padding-right: 24px !important;
        margin-top: 2px !important;
        font-size: 11px !important;
    }

    #production tbody td[b-veu9sfecob],
    #troops tbody td[b-veu9sfecob],
    #reinforcements tbody td[b-veu9sfecob] {
        font-size: 11px;
        padding: 2px 4px;
    }

    #production td.num[b-veu9sfecob],
    #troops td.num[b-veu9sfecob],
    #reinforcements td.num[b-veu9sfecob] {
        width: auto;
        text-align: right;
    }

    #production td.res[b-veu9sfecob],
    #troops td.des[b-veu9sfecob],
    #reinforcements td.des[b-veu9sfecob] {
        display: none;
    }

    #production td.ico[b-veu9sfecob],
    #troops td.ico[b-veu9sfecob],
    #reinforcements td.ico[b-veu9sfecob] {
        width: 18px;
        min-width: 18px;
        padding: 2px;
    }

    #map_details br[b-veu9sfecob] {
        display: none;
    }

    .field-cap-badge[b-veu9sfecob] {
        font-size: 11px;
        padding: 4px;
        text-align: right;
        margin-top: 4px;
        max-width: 110px;
    }
}


/* Copy From Capital button */
.copy-from-capital[b-veu9sfecob] { text-align: center; margin: 14px auto 10px; }
.copy-btn[b-veu9sfecob] { display: inline-block; padding: 10px 18px; min-width: 260px; background: linear-gradient(to bottom, #e8f6d5 0%, #c7e49b 100%); border: 1px solid #6a9b2e; border-radius: 5px; color: #2e4d12; font-family: Tahoma, Arial, sans-serif; font-size: 13px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: background 0.15s; }
.copy-btn:hover:not(:disabled)[b-veu9sfecob] { background: linear-gradient(to bottom, #f0fbe0 0%, #d4ecac 100%); }
.copy-btn:disabled[b-veu9sfecob] { opacity: 0.55; cursor: default; }
.copy-btn-line[b-veu9sfecob] { line-height: 1.5; }
.copy-btn-village[b-veu9sfecob] { font-weight: bold; color: #2e6b0e; }
.copy-btn-versus[b-veu9sfecob] { color: #666; font-size: 12px; }
.copy-btn-cost[b-veu9sfecob] { font-weight: bold; font-size: 15px; color: #7a5a00; margin-top: 2px; }
.copy-btn-cost img[b-veu9sfecob] { vertical-align: middle; margin-inline-start: 4px; }
@media (max-width: 480px) { .copy-btn[b-veu9sfecob] { min-width: 220px; padding: 8px 12px; font-size: 12px; } .copy-btn-cost[b-veu9sfecob] { font-size: 14px; } }

/* /Components/Pages/Village/Treasury.razor.rz.scp.css */
/* ==========================================================================
   Treasury.razor.css — Treasury Artifact System (study §17)
   ========================================================================== */

/* ── Shared list table base (matching FileName.md) ── */
.artifact-list[b-n3vtwhzij9] {
    width: 100%;
    max-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d4d4d4;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    font-family: Tahoma, Arial, sans-serif;
    direction: rtl;
}

/* Gray gradient title header (th) */
.artifact-list th[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 45%, #d0d0d0 50%, #e0e0e0 100%);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: bold;
    color: #000;
    padding: 1px;
    border-bottom: 1px solid #d4d4d4;
    text-align: center;
}

/* Column header row */
.artifact-list tr.col-headers td[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 45%, #d0d0d0 50%, #e0e0e0 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
    font-weight: 700;
    color: #333;
    padding: 5px 8px;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
}

.artifact-list tr.col-headers td:last-child[b-n3vtwhzij9] {
    border-left: none;
}

/* Data cells */
.artifact-list td[b-n3vtwhzij9] {
    padding: 5px 8px;
    border-bottom: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}

.artifact-list td:last-child[b-n3vtwhzij9] {
    border-left: none;
}

.artifact-list tr:last-child td[b-n3vtwhzij9] {
    border-bottom: none;
}

/* Striped rows */
.artifact-list tr:nth-child(even)[b-n3vtwhzij9] {
    background-color: #f5f5f5;
}

.artifact-list tr:nth-child(odd)[b-n3vtwhzij9] {
    background-color: #ffffff;
}

/* Empty message row */
.artifact-list td.empty-msg[b-n3vtwhzij9] {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 10px;
}

/* Artifact icon cell */
td.icon[b-n3vtwhzij9] {
    width: 28px;
    text-align: center;
    padding: 2px;
}

td.icon img[b-n3vtwhzij9] {
    height: 16px;
    width: 16px;
    vertical-align: middle;
    background-image: url('img/gpack/img/misc/artefacts.gif');
    background-repeat: no-repeat;
}

/* Artifact icon sprite positions (artefacts.gif sprite sheet) */
td.icon img.artefact_icon_ww[b-n3vtwhzij9]  { background-position: 0 0; }
td.icon img.artefact_icon_1[b-n3vtwhzij9]   { background-position: -16px 0; }
td.icon img.artefact_icon_2[b-n3vtwhzij9]   { background-position: -32px 0; }
td.icon img.artefact_icon_3[b-n3vtwhzij9]   { background-position: -48px 0; }
td.icon img.artefact_icon_4[b-n3vtwhzij9]   { background-position: -64px 0; }
td.icon img.artefact_icon_5[b-n3vtwhzij9]   { background-position: -80px 0; }
td.icon img.artefact_icon_6[b-n3vtwhzij9]   { background-position: -96px 0; }
td.icon img.artefact_icon_7[b-n3vtwhzij9]   { background-position: -112px 0; }
td.icon img.artefact_icon_8[b-n3vtwhzij9]   { background-position: -128px 0; }

/* Artifact name cell */
td.nam a[b-n3vtwhzij9] {
    color: #61a106;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

td.nam a:hover[b-n3vtwhzij9] {
    text-decoration: underline;
}

td.nam .bon[b-n3vtwhzij9] {
    color: #888;
    font-size: 12px;
    margin-right: 4px;
}

td.nam .info[b-n3vtwhzij9] {
    font-size: 10px;
    color: #999;
}

td.nam .info b[b-n3vtwhzij9] {
    color: #666;
}

/* Player/village link cell */
td.pla a[b-n3vtwhzij9] {
    color: #61a106;
    text-decoration: none;
}

td.pla a:hover[b-n3vtwhzij9] {
    text-decoration: underline;
}

/* Alliance cell */
td.aly a[b-n3vtwhzij9] {
    color: #61a106;
    text-decoration: none;
}

/* Distance cell */
td.dist[b-n3vtwhzij9] {
    color: #666;
    font-size: 11px;
}

/* Type group separator row */
tr td.separator[b-n3vtwhzij9] {
    height: 8px;
    border: none;
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Artifact Detail Page — matching FileName.md reference design
   ═══════════════════════════════════════════════════════════════ */

.artefact[b-n3vtwhzij9] {
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 170px;
}

/* Artifact detail background images (type-X.gif) */
.artefact.image-1[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-1.gif'); }
.artefact.image-2[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-2.gif'); }
.artefact.image-4[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-4.gif'); }
.artefact.image-5[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-5.gif'); }
.artefact.image-6[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-6.gif'); }
.artefact.image-8[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-8.gif'); }
.artefact.image-9[b-n3vtwhzij9]    { background-image: url('img/gpack/img/artefact/type-9.gif'); }
.artefact.image-10[b-n3vtwhzij9]   { background-image: url('img/gpack/img/artefact/type-10.gif'); }
.artefact.image-fool[b-n3vtwhzij9] { background-image: url('img/gpack/img/artefact/type-fool.gif'); }

/* ── Shared table base (detail + chrono) ── */
.artifact-detail[b-n3vtwhzij9],
.artifact-chrono[b-n3vtwhzij9] {
    width: 100%;
    max-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d4d4d4;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    font-family: Tahoma, Arial, sans-serif;
    direction: rtl;
}

.artifact-detail td[b-n3vtwhzij9],
.artifact-detail th[b-n3vtwhzij9],
.artifact-chrono td[b-n3vtwhzij9],
.artifact-chrono th[b-n3vtwhzij9] {
    border-bottom: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    padding: 6px 10px;
    text-align: center;
    font-size: 14px;
}

.artifact-detail td:last-child[b-n3vtwhzij9],
.artifact-detail th:last-child[b-n3vtwhzij9],
.artifact-chrono td:last-child[b-n3vtwhzij9],
.artifact-chrono th:last-child[b-n3vtwhzij9] {
    border-left: none;
}

.artifact-detail tr:last-child td[b-n3vtwhzij9],
.artifact-chrono tr:last-child td[b-n3vtwhzij9] {
    border-bottom: none;
}

/* ── Glossy gray gradient header (th) ── */
.artifact-detail th[b-n3vtwhzij9],
.artifact-chrono th[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 45%, #d0d0d0 50%, #e0e0e0 100%);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: bold;
    color: #000;
    padding: 1px;
}

/* ── Subtitle (description) row ── */
.artifact-detail td.subtitle[b-n3vtwhzij9] {
    font-style: italic;
    font-size: 19px;
    font-weight: bold;
    padding: 10px;
    font-family: 'Times New Roman', Arial, serif;
}

/* ── Label column (right side in RTL) ── */
.artifact-detail td.col-label[b-n3vtwhzij9] {
    width: 35%;
    font-weight: normal;
    text-align: center;
}

/* ── Value column ── */
.artifact-detail td.col-value[b-n3vtwhzij9] {
    width: 65%;
    text-align: center;
}

/* ── Green links ── */
.artifact-detail td.col-value a[b-n3vtwhzij9],
.artifact-chrono td a[b-n3vtwhzij9] {
    color: #61a106;
    text-decoration: none;
    font-weight: bold;
}

.artifact-detail td.col-value a:hover[b-n3vtwhzij9],
.artifact-chrono td a:hover[b-n3vtwhzij9] {
    text-decoration: underline;
}

/* ── Bold text ── */
.artifact-detail .bold[b-n3vtwhzij9] {
    font-weight: bold;
}

/* ── Red required levels ── */
.artifact-detail .red[b-n3vtwhzij9] {
    color: #cc0000;
    font-weight: bold;
}

/* ── Chrono table: striped rows ── */
.artifact-chrono tr:nth-child(even)[b-n3vtwhzij9] {
    background-color: #f5f5f5;
}

.artifact-chrono tr:nth-child(odd)[b-n3vtwhzij9] {
    background-color: #ffffff;
}

/* Chrono village column — green links */
.artifact-chrono td.chrono-village a[b-n3vtwhzij9] {
    color: #61a106;
    font-weight: bold;
}

/* Chrono player column — green bold */
.artifact-chrono td.chrono-player a[b-n3vtwhzij9] {
    color: #61a106;
    font-weight: bold;
}

/* Chrono date column */
.artifact-chrono td.chrono-date[b-n3vtwhzij9] {
    white-space: nowrap;
    direction: ltr;
    text-align: center;
}

/* Tab menu */
#textmenu[b-n3vtwhzij9] {
    padding: 6px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 12px;
    direction: rtl;
}

#textmenu a[b-n3vtwhzij9] {
    color: #5B9C00;
    text-decoration: none;
    padding: 4px 8px;
    font-weight: 600;
}

#textmenu a:hover[b-n3vtwhzij9] {
    text-decoration: underline;
}

#textmenu a.selected[b-n3vtwhzij9] {
    color: var(--text-heading);
    font-weight: 700;
    text-decoration: none;
    cursor: default;
}

/* Back button */
.btn-default[b-n3vtwhzij9] {
    display: inline-block;
    padding: 5px 14px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-top: 8px;
}

.btn-default:hover[b-n3vtwhzij9] {
    background: #e8e8e8;
}

/* ── Actions column (transfer/delete buttons) ── */
.artifact-list td.actions[b-n3vtwhzij9] {
    text-align: center;
    white-space: nowrap;
    padding: 5px 4px;
}

.btn-transfer[b-n3vtwhzij9] {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(to bottom, #4a90d9, #357abd);
    color: #fff;
    border: 1px solid #2a6aad;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 2px;
}

.btn-transfer:hover[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #5aa0e9, #458acd);
}

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

.btn-delete-artifact[b-n3vtwhzij9] {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(to bottom, #d94a4a, #bd3535);
    color: #fff;
    border: 1px solid #a62a2a;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 2px;
}

.btn-delete-artifact:hover[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #e95a5a, #cd4545);
}

.btn-delete-artifact:disabled[b-n3vtwhzij9] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Transfer/Delete Dialog ── */
.artifact-dialog-overlay[b-n3vtwhzij9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.artifact-dialog[b-n3vtwhzij9] {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    direction: rtl;
    font-family: Tahoma, Arial, sans-serif;
}

.artifact-dialog h3[b-n3vtwhzij9] {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
    border-bottom: 2px solid #d4d4d4;
    padding-bottom: 8px;
}

.dialog-info[b-n3vtwhzij9] {
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}

.dialog-actions[b-n3vtwhzij9] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.transfer-target-list[b-n3vtwhzij9] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 12px;
}

.transfer-target-list th[b-n3vtwhzij9] {
    background: #e8e8e8;
    padding: 6px 8px;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #d4d4d4;
}

.transfer-target-list td[b-n3vtwhzij9] {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.btn-confirm-transfer[b-n3vtwhzij9] {
    display: inline-block;
    padding: 3px 12px;
    background: linear-gradient(to bottom, #4a90d9, #357abd);
    color: #fff;
    border: 1px solid #2a6aad;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.btn-confirm-transfer:hover[b-n3vtwhzij9] {
    background: linear-gradient(to bottom, #5aa0e9, #458acd);
}

.btn-confirm-transfer:disabled[b-n3vtwhzij9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-message[b-n3vtwhzij9] {
    padding: 8px 12px;
    margin: 10px 0;
    border-radius: 4px;
    font-size: 13px;
}

.dialog-message.True[b-n3vtwhzij9] {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.dialog-message.False[b-n3vtwhzij9] {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* /Components/Pages/Village/VillageCenter.razor.rz.scp.css */
.village-center-root[b-uuayou2pw5] { display: contents; }
/* ==========================================================================
   VillageCenter.razor.css � Village Center Building Map
   Map � Building Positions � Levels � Image Maps � Build Queue
   ========================================================================== */

/* --- Page heading --- */
h1[b-uuayou2pw5], .village-title[b-uuayou2pw5] {
    margin: 8px 0 15px 0;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #000;
}

.village-title[b-uuayou2pw5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

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

.village-nav-arrow[b-uuayou2pw5] {
    flex-shrink: 0;
    cursor: pointer;
    color: #555;
    font-size: 22px;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.15s;
}

.village-nav-arrow:hover[b-uuayou2pw5] {
    color: #000;
}

.village-subtitle[b-uuayou2pw5] {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
}

/* --- Village Map Container (540x448 � building layout) ---
   The wrapper uses aspect-ratio to reserve the correct height automatically,
   so the inner #village_map (fixed 540px) can be scaled without leaving a
   vertical gap. The wrapper's max-width caps the visual size on mobile.
   This is the cleanest, most predictable approach: no negative margins,
   no manual height math, no breakpoint-specific magic numbers. */
.village-map-wrap[b-uuayou2pw5] {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    aspect-ratio: 540 / 448;
    position: relative;
    overflow: hidden;
}

#village_map[b-uuayou2pw5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 540px;
    height: 448px;
    --map-zoom: 1;
    transform-origin: top left;
}

#village_map img[b-uuayou2pw5] {
    position: absolute;
    cursor: pointer;
}

/* Building images are purely visual � never intercept pointer events.
   All interaction goes through the unified .bldg-tap overlay. */
#village_map img.building[b-uuayou2pw5],
#village_map img.ww[b-uuayou2pw5],
#village_map img.map1[b-uuayou2pw5],
#village_map img.map2[b-uuayou2pw5] {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Outer map (wall + overall background � full size) --- */
#village_map img.map1[b-uuayou2pw5] {
    height: 448px;
    width: 540px;
    z-index: 98;
}

/* --- Inner map (buildings area) --- */
#village_map img.map2[b-uuayou2pw5] {
    height: 339px;
    width: 422px;
    left: 63px;
    top: 40px;
    z-index: 99;
}

/* --- Building slot positions (d1�d21, dx1) --- */
#village_map .dx1[b-uuayou2pw5] { left: 316px; top: 161px; z-index: 105; }
#village_map .d1[b-uuayou2pw5]  { left: 115px; top: 52px;  z-index: 106; }
#village_map .d2[b-uuayou2pw5]  { left: 198px; top: 27px;  z-index: 109; }
#village_map .d3[b-uuayou2pw5]  { left: 258px; top: 17px;  z-index: 108; }
#village_map .d4[b-uuayou2pw5]  { left: 332px; top: 32px;  z-index: 109; }
#village_map .d5[b-uuayou2pw5]  { left: 388px; top: 81px;  z-index: 110; }
#village_map .d6[b-uuayou2pw5]  { left: 80px;  top: 91px;  z-index: 111; }
#village_map .d7[b-uuayou2pw5]  { left: 161px; top: 98px;  z-index: 112; }
#village_map .d8[b-uuayou2pw5]  { left: 247px; top: 81px;  z-index: 113; }
#village_map .d9[b-uuayou2pw5]  { left: 395px; top: 122px; z-index: 114; }
#village_map .d10[b-uuayou2pw5] { left: 66px;  top: 161px; z-index: 115; }
#village_map .d11[b-uuayou2pw5] { left: 192px; top: 126px; z-index: 116; }
#village_map .d12[b-uuayou2pw5] { left: 155px; top: 152px; z-index: 117; }
#village_map .d13[b-uuayou2pw5] { left: 402px; top: 180px; z-index: 118; }
#village_map .d14[b-uuayou2pw5] { left: 84px;  top: 200px; z-index: 119; }
#village_map .d15[b-uuayou2pw5] { left: 227px; top: 196px; z-index: 120; }
#village_map .d16[b-uuayou2pw5] { left: 354px; top: 213px; z-index: 121; }
#village_map .d17[b-uuayou2pw5] { left: 158px; top: 236px; z-index: 122; }
#village_map .d18[b-uuayou2pw5] { left: 286px; top: 247px; z-index: 123; }
#village_map .d19[b-uuayou2pw5] { left: 144px; top: 267px; z-index: 124; }
#village_map .d20[b-uuayou2pw5] { left: 262px; top: 276px; z-index: 125; }

/* Wonder of the World (d40) � special building */
#village_map .d40[b-uuayou2pw5]   { left: 227px; top: 180px; z-index: 116; }
#village_map .g40[b-uuayou2pw5]   { top: 138px; }
#village_map .g40_1[b-uuayou2pw5] { top: 125px; }
#village_map .g40_2[b-uuayou2pw5] { top: 99px; }
#village_map .g40_3[b-uuayou2pw5] { top: 62px; }
#village_map .g40_4[b-uuayou2pw5] { top: 53px; }
#village_map .g40_5[b-uuayou2pw5] { top: -10px; }

/* WW building image � large central element spanning 5 removed slots (study �19.5) */
#village_map img.ww[b-uuayou2pw5] {
    left: 155px;
    z-index: 120;
}

/* --- Level Indicators Overlay --- */
/* Level indicator overlays never block clicks � the unified tap layer below
   sits above them for touch, and the hit on a level number is just visual. */
#levels[b-uuayou2pw5] {
    position: absolute;
    left: 23px;
    top: 40px;
    width: 494px;
    height: 370px;
    visibility: hidden;
    z-index: 200;
    pointer-events: none;
}

#levels div[b-uuayou2pw5] {
    position: absolute;
    width: 25px; /* Adjusting sizes slightly for better text rendering */
    height: 25px;
    line-height: 25px;
    text-align: center;
    visibility: hidden;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    margin-top: -4px; /* Offset to center text visually */
    margin-left: -4px;
    background: url("../img/gpack/img/g/s/glvl.gif") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    cursor: default;
}

#levels.on[b-uuayou2pw5] {
    visibility: visible;
}

#levels.on div[b-uuayou2pw5] {
    visibility: visible;
}

/* Active (upgrading) level indicators � buildings */
#levels div.active[b-uuayou2pw5] {
    background: url("../img/gpack/img/g/s/glvlm.gif") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    animation: upgrade-pulse-b-uuayou2pw5 1.2s ease-in-out infinite;
    z-index: 210;
}

/* Upgrade effect � animated ring above the level number circle */
#levels div.active[b-uuayou2pw5]::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 35px;
    height: 35px;
    border: 2px solid #00cc44;
    border-radius: 50%;
    pointer-events: none;
    animation: upgrade-ring-b-uuayou2pw5 1.5s ease-out infinite;
}

/* Upgrade effect � pulsing glow behind the number */
#levels div.active[b-uuayou2pw5]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 204, 68, 0.5) 0%, rgba(0, 204, 68, 0) 70%);
    pointer-events: none;
    animation: upgrade-glow-b-uuayou2pw5 1.2s ease-in-out infinite;
}

@keyframes upgrade-pulse-b-uuayou2pw5 {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.12);
        filter: brightness(1.4);
    }
}

@keyframes upgrade-ring-b-uuayou2pw5 {
    0% {
        opacity: 0.9;
        transform: scale(0.8);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes upgrade-glow-b-uuayou2pw5 {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* Level label positions match building slot positions (offset from #levels origin) */
/* The layout logic relies on .d1-.d20 classes sharing the base building coordinates */
/* Rally Point and Wall level labels */
/* dx1 is rally point, d40 is wall */
#levels .l39[b-uuayou2pw5] { left: 316px; top: 161px; } /* Same as dx1 */
#levels .l40[b-uuayou2pw5] { left: 240px; top: 350px; } /* Wall � at the front gate area */

/* --- Level Toggle Switch --- */
#lswitch[b-uuayou2pw5] {
    position: absolute;
    left: 500px;
    top: 443px;
    width: 18px;
    height: 17px;
    cursor: pointer;
    z-index: 500;
    background: url("../img/gpack/img/g/s/glvlp.gif") no-repeat;
}

#lswitch.on[b-uuayou2pw5] {
    background: url("../img/gpack/img/g/s/glvlm.gif") no-repeat;
}

/* --- Clear div (legacy � hidden) --- */
.clear[b-uuayou2pw5] {
    display: none;
}

/* --- Build Queue Table --- */
#building_contract[b-uuayou2pw5] {
    position: relative;
    z-index: 150;
    margin: -40px 19px 0;
    width: 502px;
    background: transparent;
    line-height: 19px;
}

#building_contract thead th[b-uuayou2pw5] {
    background: transparent;
    text-align: right;
    padding: 3px 6px;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-heading);
    border-bottom: 1px solid var(--border-medium);
}

#building_contract tbody td[b-uuayou2pw5] {
    background: transparent;
    padding: 1px 6px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
    font-weight: normal;
}

#building_contract td.ico[b-uuayou2pw5] {
    padding-inline-start: 4px;
    width: 18px;
}

/* --- Info Message --- */
.info-message[b-uuayou2pw5] {
    margin: 10px 0;
    padding: 8px 12px;
    background-color: #FFF3C4;
    border: 1px solid var(--border-light);
    color: var(--text-heading);
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
}

/* --- Gold Finish Bar (instant finish button above build queue) --- */
.gold-finish-bar[b-uuayou2pw5] {
    position: relative;
    z-index: 151;
    margin: -40px 19px 0;
    width: 502px;
    text-align: right;
}

/* When gold bar is present, the table below it flows naturally (no double negative margin) */
.gold-finish-bar + #building_contract[b-uuayou2pw5] {
    margin-top: 2px;
}

.btn-gold-finish[b-uuayou2pw5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(180deg, #fff5cc 0%, #f0d060 50%, #d4a017 100%);
    border: 1px solid #b8860b;
    border-radius: 3px;
    color: #5a3e00;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

.btn-gold-finish:hover:not(:disabled)[b-uuayou2pw5] {
    background: linear-gradient(180deg, #fffadd 0%, #f5dc70 50%, #daa520 100%);
}

.btn-gold-finish:disabled[b-uuayou2pw5] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Loading spinner --- */
.loading-spinner[b-uuayou2pw5] {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ==========================================================================
   Smart Building Hints � top-3 most-visited indicator (line + label)
   ========================================================================== */

/* Container: absolutely positioned at the building's computed center.
   transform centers the label horizontally and places the hint fully above the anchor. */
#village_map .smart-hint[b-uuayou2pw5] {
    position: absolute;
    z-index: 201;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%) translateY(-100%);
    pointer-events: all;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    animation: hint-appear-b-uuayou2pw5 0.35s ease-out forwards;
}

#village_map .smart-hint.hint-rank-2[b-uuayou2pw5] { animation-delay: 0.1s; }
#village_map .smart-hint.hint-rank-3[b-uuayou2pw5] { animation-delay: 0.2s; }

/* Label chip � dark Travian gold style */
#village_map .smart-hint .hint-label[b-uuayou2pw5] {
    background: rgba(15, 8, 0, 0.88);
    color: #f5c535;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid #b8840a;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
    direction: rtl;
    line-height: 16px;
}

#village_map .smart-hint:hover .hint-label[b-uuayou2pw5] {
    background: rgba(55, 28, 0, 0.95);
    border-color: #f5c535;
}

/* Vertical connector line � fades out toward the building */
#village_map .smart-hint .hint-line[b-uuayou2pw5] {
    width: 2px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #c8960a 0%, rgba(200, 150, 10, 0) 100%);
}

@keyframes hint-appear-b-uuayou2pw5 {
    from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 10px)); }
    to   { opacity: 1; transform: translateX(-50%) translateY(-100%); }
}

/* --- Hints visibility toggle (checkbox below map) --- */
.hints-toggle[b-uuayou2pw5] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    direction: rtl;
}

.hints-toggle input[type="checkbox"][b-uuayou2pw5] {
    cursor: pointer;
    accent-color: #c8960a;
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Responsive: Village Center � tablet/mobile layout
   ========================================================================== */

/* Tablet (?900px): responsive adjustments */
@media (max-width: 900px) {
    h1[b-uuayou2pw5] {
        font-size: 24px;
        margin: 4px 0 6px 0;
    }

    #building_contract[b-uuayou2pw5] {
        position: static;
        margin: 8px 0 0 0;
        width: 100%;
    }

    .gold-finish-bar[b-uuayou2pw5] {
        position: static;
        margin: 8px 0 4px 0;
        width: 100%;
    }

    .gold-finish-bar + #building_contract[b-uuayou2pw5] {
        margin-top: 0;
    }

    #lswitch[b-uuayou2pw5] {
        display: none;
    }
}

/* Mobile scaling � scale the fixed 540px map down to fit smaller viewports.
   With transform-origin:top-left, the inner element sits at (0,0) of the
   wrapper. The wrapper's aspect-ratio reserves the right height automatically.
   --map-zoom is also set so the .bldg-tap sizes can counter-scale. */
@media (max-width: 560px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.93); --map-zoom: 0.93; }
    .village-title[b-uuayou2pw5] { font-size: 16px; }
    .village-nav-arrow[b-uuayou2pw5] { font-size: 18px; }
}
@media (max-width: 500px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.85); --map-zoom: 0.85; }
}
@media (max-width: 460px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.78); --map-zoom: 0.78; }
}
@media (max-width: 420px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.72); --map-zoom: 0.72; }
}
@media (max-width: 380px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.65); --map-zoom: 0.65; }
}
@media (max-width: 340px) {
    #village_map[b-uuayou2pw5] { transform: scale(0.58); --map-zoom: 0.58; }
}

/* ==========================================================================
   Unified tap layer � the ONLY element that receives pointer/click events.
   Always present (desktop + mobile). Sized larger on touch devices.
   Counter-scales against the map transform so the physical touch target
   stays ?44px regardless of scale level (Apple/Google a11y guideline).
   ========================================================================== */

#village_map .bldg-tap[b-uuayou2pw5] {
    position: absolute;
    z-index: 210; /* above levels (200) and hints (201) */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    /* Block text selection on long-press which can swallow taps on iOS */
    -webkit-touch-callout: none;
    /* Render as block-level a element when applied to <a> */
    display: block;
    text-decoration: none;
}

/* Enlarge tap target on coarse pointers (touch screens) and counter-scale
   against the #village_map transform so the effective size stays large. */
@media (pointer: coarse), (max-width: 900px) {
    #village_map .bldg-tap[b-uuayou2pw5] {
        width: calc(56px / var(--map-zoom, 1));
        height: calc(56px / var(--map-zoom, 1));
    }
}

#village_map .wall-tap[b-uuayou2pw5] {
    position: absolute;
    z-index: 210;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    display: block;
    text-decoration: none;
}

#village_map .wall-tap:active[b-uuayou2pw5] {
    background: rgba(255, 200, 0, 0.22);
}

#village_map .bldg-tap:active[b-uuayou2pw5] {
    background: rgba(255, 200, 0, 0.22);
}

/* ==========================================================================
   Building quick-access grid � mobile fallback list below the map
   ========================================================================== */

.bldg-grid-wrap[b-uuayou2pw5] {
    display: none;
}

@media (max-width: 560px) {
    .bldg-grid-wrap[b-uuayou2pw5] {
        display: block;
        margin: 10px 0;
        direction: rtl;
    }

    .bldg-grid-toggle[b-uuayou2pw5] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: linear-gradient(180deg, #f8f4e8 0%, #e8dfc8 100%);
        border: 1px solid #c4b48a;
        border-radius: 4px;
        color: #5a4a20;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
        width: 100%;
        text-align: right;
    }

    .bldg-grid-toggle[b-uuayou2pw5]::before {
        content: '?';
        font-size: 10px;
        transition: transform 0.2s;
    }

    .bldg-grid-toggle.collapsed[b-uuayou2pw5]::before {
        transform: rotate(-90deg);
    }

    .bldg-grid[b-uuayou2pw5] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        margin-top: 6px;
        max-height: 300px;
        overflow-y: auto;
    }

    .bldg-grid.hidden[b-uuayou2pw5] {
        display: none;
    }

    .bldg-grid-item[b-uuayou2pw5] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 6px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        cursor: pointer;
        min-height: 44px;
        font-size: 12px;
        color: #333;
        text-align: right;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .bldg-grid-item:active[b-uuayou2pw5] {
        background: #FFF3D9;
        border-color: #d4a017;
    }

    .bldg-grid-item .bgi-name[b-uuayou2pw5] {
        flex: 1;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bldg-grid-item .bgi-level[b-uuayou2pw5] {
        color: #888;
        font-size: 11px;
        white-space: nowrap;
    }

    .bldg-grid-item .bgi-empty[b-uuayou2pw5] {
        color: #aaa;
        font-style: italic;
    }
}

/* /Components/Pages/Village/WinnerPage.razor.rz.scp.css */
/* ==========================================================================
   WinnerPage.razor.css — Classic Travian Winner Page
   ========================================================================== */

.winner-page[b-5sy5u1prdy] {
    max-width: 100%;
    padding: 10px 0;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #000;
    direction: rtl;
}

/* ─── Hero Section (Title + WW Image) ─── */
.winner-hero[b-5sy5u1prdy] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
}

.winner-hero-text[b-5sy5u1prdy] {
    flex: 1;
}

.winner-headline[b-5sy5u1prdy] {
    font-size: 22px;
    font-weight: bold;
    color: #2A7A38;
    margin: 0 0 12px;
    line-height: 1.5;
}

.winner-intro[b-5sy5u1prdy] {
    font-size: 16px;
    color: #333;
    margin: 0;
    line-height: 1.8;
}

.winner-hero-img[b-5sy5u1prdy] {
    flex-shrink: 0;
}

    .winner-hero-img img[b-5sy5u1prdy] {
        max-width: 200px;
        height: auto;
    }

/* ─── Highlighted text ─── */
.highlight-green[b-5sy5u1prdy] {
    color: #2A7A38;
    font-weight: bold;
}

.bold[b-5sy5u1prdy] {
    font-weight: bold;
}

/* ─── Story Section ─── */
.winner-story[b-5sy5u1prdy] {
    margin: 16px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

    .winner-story p[b-5sy5u1prdy] {
        margin: 0 0 10px;
    }

/* ─── Rankings ─── */
.winner-rankings[b-5sy5u1prdy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0;
    padding-top: 16px;
    border-top: 1px solid #E0E0E0;
}

.ranking-section[b-5sy5u1prdy] {
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    padding: 10px;
}

    .ranking-section h3[b-5sy5u1prdy] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 0 0 8px;
        padding-bottom: 6px;
        border-bottom: 1px solid #E0E0E0;
    }

.rank-icon[b-5sy5u1prdy] {
    width: 16px;
    height: 16px;
}

.ranking-table[b-5sy5u1prdy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

    .ranking-table th[b-5sy5u1prdy] {
        background: #E5E7EA;
        color: #333;
        font-weight: bold;
        padding: 4px 8px;
        text-align: right;
        border-bottom: 1px solid #CCC;
        font-size: 14px;
    }

    .ranking-table td[b-5sy5u1prdy] {
        padding: 4px 8px;
        text-align: right;
        border-bottom: 1px solid #F0F0F0;
        color: #333;
    }

    .ranking-table a[b-5sy5u1prdy] {
        color: #2A7A38;
        text-decoration: none;
    }

        .ranking-table a:hover[b-5sy5u1prdy] {
            text-decoration: underline;
        }

    .ranking-table .rank-first td[b-5sy5u1prdy] {
        color: #2A7A38;
        font-weight: bold;
    }

/* ─── Closing ─── */
.winner-closing[b-5sy5u1prdy] {
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid #E0E0E0;
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

    .winner-closing p[b-5sy5u1prdy] {
        margin: 0 0 8px;
    }

    .winner-closing strong[b-5sy5u1prdy] {
        color: #333;
    }

.grace-notice[b-5sy5u1prdy] {
    background: #FFF8E1;
    border: 1px solid #FFD54F;
    border-radius: 4px;
    padding: 8px 12px;
    color: #6D4C00;
    font-size: 15px;
}

/* ─── Footer Link ─── */
.winner-footer[b-5sy5u1prdy] {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid #E0E0E0;
    text-align: center;
}

    .winner-footer a[b-5sy5u1prdy] {
        color: #2A7A38;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
    }

        .winner-footer a:hover[b-5sy5u1prdy] {
            text-decoration: underline;
        }

/* ─── Loading & Not-Yet States ─── */
.winner-loading[b-5sy5u1prdy],
.winner-not-yet[b-5sy5u1prdy] {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 16px;
}

    .winner-not-yet h2[b-5sy5u1prdy] {
        color: #333;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .winner-not-yet a[b-5sy5u1prdy] {
        color: #2A7A38;
        text-decoration: none;
        font-weight: bold;
    }

        .winner-not-yet a:hover[b-5sy5u1prdy] {
            text-decoration: underline;
        }

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .winner-hero[b-5sy5u1prdy] {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
    }

    .winner-hero-img img[b-5sy5u1prdy] {
        max-width: 150px;
    }

    .winner-rankings[b-5sy5u1prdy] {
        grid-template-columns: 1fr;
    }
}

/* ─── Wonder Payout Panel ─── */
.winner-wonder-panel[b-5sy5u1prdy] {
    background: linear-gradient(135deg, #fffbea, #fff8e1);
    border: 2px solid #d4a017;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 20px 0;
}

.winner-wonder-header[b-5sy5u1prdy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.winner-wonder-header h3[b-5sy5u1prdy] {
    font-size: 18px;
    font-weight: bold;
    color: #7a5200;
    margin: 0;
}

.winner-shield-img[b-5sy5u1prdy] {
    width: 56px;
    height: auto;
}

.winner-wonder-stats[b-5sy5u1prdy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}

.winner-wonder-stats strong[b-5sy5u1prdy] { color: #b8860b; }

.winner-wonder-table[b-5sy5u1prdy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.winner-wonder-table th[b-5sy5u1prdy],
.winner-wonder-table td[b-5sy5u1prdy] {
    padding: 5px 10px;
    border: 1px solid #e0c060;
    text-align: right;
}

.winner-wonder-table thead th[b-5sy5u1prdy] {
    background: #fdf0c0;
    font-weight: bold;
    color: #7a5200;
}
/* /Components/Shared/BuildingCard.razor.rz.scp.css */
/* === BuildingCard Scoped CSS === */

.building-card[b-k5um5jev81] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 10px;
    background: var(--bg-content);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    direction: rtl;
}

.building-card:hover[b-k5um5jev81] {
    background: var(--bg-sidebar);
    border-color: var(--border-medium);
}

.building-card.selected[b-k5um5jev81] {
    background: #e8f5e9;
    border-color: var(--border-green);
    box-shadow: 0 0 0 2px rgba(113, 208, 0, 0.2);
}

.building-card.disabled[b-k5um5jev81] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.building-card-icon[b-k5um5jev81] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.building-card-info[b-k5um5jev81] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.building-card-name[b-k5um5jev81] {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.building-card-level[b-k5um5jev81] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: normal;
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* === ConfirmDialog Scoped CSS === */

.confirm-overlay[b-p5iwkamnuh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.confirm-dialog[b-p5iwkamnuh] {
    background: var(--bg-content);
    border: 2px solid var(--border-dark);
    border-radius: 6px;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    direction: rtl;
    overflow: hidden;
}

.confirm-header[b-p5iwkamnuh] {
    background: var(--bg-header);
    color: #fff;
    padding: 10px 16px;
    font-weight: bold;
    font-size: 1rem;
}

.confirm-body[b-p5iwkamnuh] {
    padding: 16px;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.confirm-actions[b-p5iwkamnuh] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 12px 16px;
    background: var(--bg-resource);
    border-top: 1px solid var(--border-light);
}

.btn-confirm[b-p5iwkamnuh] {
    background: linear-gradient(to bottom, #7ab828, #5a9a18);
    color: #fff;
    border: 1px solid #4a8a08;
    padding: 6px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-confirm:hover[b-p5iwkamnuh] {
    background: linear-gradient(to bottom, #8cc83a, #6aaa28);
}

.btn-cancel[b-p5iwkamnuh] {
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    color: var(--text-primary);
    border: 1px solid #aaa;
    padding: 6px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-cancel:hover[b-p5iwkamnuh] {
    background: linear-gradient(to bottom, #eee, #d0d0d0);
}
/* /Components/Shared/CountdownTimer.razor.rz.scp.css */
/* === CountdownTimer Scoped CSS === */

.countdown[b-z1tv5bzna7] {
    font-family: "Courier New", Consolas, monospace;
    font-size: 0.9rem;
    color: inherit;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.countdown.expired[b-z1tv5bzna7] {
    color: var(--res-negative);
    animation: blink-b-z1tv5bzna7 1s ease-in-out 3;
}

@keyframes blink-b-z1tv5bzna7 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
/* /Components/Shared/GoldTransferPanel.razor.rz.scp.css */
/* GoldTransferPanel.razor.css — Gold transfer UI styling */

.gold-transfer-panel[b-nr9de41sqa] {
    padding: 12px;
    max-width: 700px;
}

.gold-transfer-panel h4[b-nr9de41sqa] {
    font-size: 18px;
    color: #5B9C00;
    margin: 0 0 12px;
    font-weight: bold;
}

.gold-transfer-balance[b-nr9de41sqa] {
    background: #f4e4bc;
    border: 1px solid #c5a55a;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gold-balance-item[b-nr9de41sqa] {
    font-size: 14px;
    font-weight: 600;
}

.gold-balance-item img.gold[b-nr9de41sqa] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 4px;
}

.gold-balance-detail[b-nr9de41sqa] {
    font-size: 12px;
    color: #7b6a5f;
}

.gold-transfer-form[b-nr9de41sqa] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gold-transfer-field[b-nr9de41sqa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gold-transfer-field label[b-nr9de41sqa] {
    font-size: 13px;
    font-weight: 600;
    color: #5b4a3f;
}

.gold-transfer-field .text[b-nr9de41sqa],
.gold-transfer-field textarea[b-nr9de41sqa] {
    padding: 6px 8px;
    border: 1px solid #c5a55a;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
    color: #333;
}

.gold-receiver-input[b-nr9de41sqa] {
    max-width: 400px;
}

.gold-amount-input[b-nr9de41sqa] {
    max-width: 150px;
}

.gold-type-select[b-nr9de41sqa] {
    max-width: 200px;
}

.gold-message-input[b-nr9de41sqa] {
    max-width: 500px;
    resize: vertical;
}

.gold-transfer-hint[b-nr9de41sqa] {
    font-size: 11px;
    color: #998877;
    margin-right: 8px;
}

.gold-transfer-commission-info[b-nr9de41sqa] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    color: #856404;
}

.gold-transfer-actions[b-nr9de41sqa] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.gold-transfer-actions .btn-send[b-nr9de41sqa] {
    background: #5B9C00;
    color: #fff;
    border: 1px solid #4a7a00;
    border-radius: 3px;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
}

.gold-transfer-actions .btn-send:hover[b-nr9de41sqa] {
    background: #4a7a00;
}

.gold-transfer-actions .btn-send:disabled[b-nr9de41sqa] {
    opacity: .5;
    cursor: not-allowed;
}

.gold-transfer-actions .btn-cancel[b-nr9de41sqa] {
    background: #ddd;
    color: #333;
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}

.gold-transfer-confirm[b-nr9de41sqa] {
    background: #f9f4e8;
    border: 1px solid #c5a55a;
    border-radius: 4px;
    padding: 16px;
}

.gold-transfer-confirm h4[b-nr9de41sqa] {
    margin: 0 0 12px;
    color: #5B9C00;
}

.gold-confirm-table[b-nr9de41sqa] {
    width: 100%;
    margin-bottom: 12px;
}

.gold-confirm-table th[b-nr9de41sqa] {
    text-align: right;
    padding: 6px 10px;
    font-size: 13px;
    color: #5b4a3f;
    width: 30%;
}

.gold-confirm-table td[b-nr9de41sqa] {
    padding: 6px 10px;
    font-size: 13px;
}

.gold-transfer-error[b-nr9de41sqa] {
    background: #f8d7da;
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    color: #721c24;
    font-size: 13px;
}

.gold-transfer-success[b-nr9de41sqa] {
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 12px;
    color: #155724;
    font-size: 13px;
}

.gold-transfer-history[b-nr9de41sqa] {
    margin-top: 24px;
}

.gold-transfer-history h4[b-nr9de41sqa] {
    font-size: 15px;
    color: #5b4a3f;
    margin-bottom: 8px;
}

.gold-history-table[b-nr9de41sqa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.gold-history-table th[b-nr9de41sqa] {
    background: #e8dcc8;
    padding: 6px 8px;
    text-align: center;
    font-weight: 600;
    color: #5b4a3f;
    border: 1px solid #c5a55a;
}

.gold-history-table td[b-nr9de41sqa] {
    padding: 5px 8px;
    text-align: center;
    border: 1px solid #ddd;
}

.gold-history-sent[b-nr9de41sqa] {
    background: #fff5f5;
}

.gold-history-received[b-nr9de41sqa] {
    background: #f5fff5;
}

.gold-history-amount[b-nr9de41sqa] {
    font-weight: 600;
    color: #c44;
}

.gold-history-commission[b-nr9de41sqa] {
    color: #e88;
    font-size: 11px;
}

.gold-history-received[b-nr9de41sqa] {
    font-weight: 600;
    color: #28a745;
}

.gold-history-message[b-nr9de41sqa] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #777;
}

.gold-history-date[b-nr9de41sqa] {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.gold-transfer-history-more[b-nr9de41sqa] {
    text-align: center;
    margin-top: 8px;
}

.gold-transfer-history-more .btn-cancel[b-nr9de41sqa] {
    padding: 4px 16px;
    font-size: 12px;
}

.info-message[b-nr9de41sqa] {
    color: #c44;
    font-size: 14px;
    padding: 12px;
    text-align: center;
}
/* /Components/Shared/HeroLevelUpToast.razor.rz.scp.css */
/* ═══ Hero Level-Up Toast Notification ═══ */

.hero-levelup-toast-container[b-5zclfjcaay] {
    position: fixed;
    left: 50%;
    /* Hidden below screen */
    bottom: -320px;
    transform: translate(-50%, 50px) scale(0.7);
    opacity: 0;
    width: 280px;
    height: 280px;
    background: transparent;
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    transition:
        bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.6s ease;
}

/* Active state — toast slides up into view */
.hero-levelup-toast-container.active[b-5zclfjcaay] {
    bottom: 40px;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Exit state — toast slides back down */
.hero-levelup-toast-container.exit[b-5zclfjcaay] {
    bottom: -320px;
    transform: translate(-50%, 100px) scale(0.6);
    opacity: 0;
    transition:
        bottom 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045),
        transform 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045),
        opacity 0.5s ease;
}

/* ── Rotating sunburst rays ── */
.hero-levelup-rays[b-5zclfjcaay] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(245, 158, 11, 0.4) 0deg,
        rgba(245, 158, 11, 0.4) 12deg,
        transparent 12deg,
        transparent 24deg
    );
    border-radius: 50%;
    transform-origin: center center;
    animation: heroLevelUpSpin-b-5zclfjcaay 15s linear infinite;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 15%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 65%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 15%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 65%);
    will-change: transform;
    z-index: 1;
}

/* ── Central radial glow ── */
.hero-levelup-glow[b-5zclfjcaay] {
    position: absolute;
    width: 90%;
    height: 90%;
    background: radial-gradient(
        circle,
        rgba(251, 191, 36, 0.85) 0%,
        rgba(245, 158, 11, 0.3) 40%,
        transparent 70%
    );
    mix-blend-mode: screen;
    filter: blur(8px);
    z-index: 2;
}

@keyframes heroLevelUpSpin-b-5zclfjcaay {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Content wrapper ── */
.hero-levelup-content[b-5zclfjcaay] {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Warrior avatar (helmet + swords SVG) ── */
.hero-levelup-avatar[b-5zclfjcaay] {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: -10px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

.hero-levelup-plume[b-5zclfjcaay] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 8px #ef4444);
}

/* ── Blue ribbon with level text ── */
.hero-levelup-ribbon-container[b-5zclfjcaay] {
    position: relative;
    width: 100%;
    max-width: 210px;
    margin-top: 4px;
}

.hero-levelup-ribbon-body[b-5zclfjcaay] {
    position: relative;
    background: linear-gradient(to bottom, #1d4ed8, #1e40af);
    border: 1.5px solid #3b82f6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    border-radius: 6px;
    padding: 6px 16px;
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    z-index: 15;
    letter-spacing: 0.5px;
}

.hero-levelup-ribbon-ear[b-5zclfjcaay] {
    position: absolute;
    top: 4px;
    width: 15px;
    height: 100%;
    background: #172554;
    border: 1.5px solid #1d4ed8;
    z-index: -1;
}

.hero-levelup-ear-left[b-5zclfjcaay] {
    left: -10px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 30% 50%);
}

.hero-levelup-ear-right[b-5zclfjcaay] {
    right: -10px;
    clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%);
}

/* ── Mobile adjustments — position above bottom nav ── */
@media (max-width: 768px) {
    .hero-levelup-toast-container.active[b-5zclfjcaay] {
        bottom: 80px;
    }
}

@media (max-width: 480px) {
    .hero-levelup-toast-container[b-5zclfjcaay] {
        width: 240px;
        height: 240px;
    }

    .hero-levelup-toast-container.active[b-5zclfjcaay] {
        bottom: 90px;
    }

    .hero-levelup-avatar[b-5zclfjcaay] {
        width: 80px;
        height: 80px;
    }

    .hero-levelup-ribbon-body[b-5zclfjcaay] {
        font-size: 11px;
        padding: 5px 14px;
    }
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* === LoadingSpinner Scoped CSS === */

.loading-spinner[b-fn6ozqrnki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.spinner[b-fn6ozqrnki] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--bg-nav);
    border-radius: 50%;
    animation: spin-b-fn6ozqrnki 0.8s linear infinite;
}

@keyframes spin-b-fn6ozqrnki {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/MobileMovementsStrip.razor.rz.scp.css */
/* ==========================================================================
   MobileMovementsStrip.razor.css — Floating FAB icon + expanding panel
   Hidden on desktop, shown on mobile ≤560px
   ========================================================================== */

/* Default: hidden on desktop */
.mms-fab[b-xt4irg56x6],
.mms-panel[b-xt4irg56x6],
.mms-backdrop[b-xt4irg56x6] {
    display: none;
}

@media (max-width: 560px) {

    /* ── FAB button — segmented color ring ── */
    .mms-fab[b-xt4irg56x6] {
        position: fixed;
        left: 10px;
        bottom: calc(175px + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: conic-gradient(
            #ff5252 0% var(--s1, 25%),
            #ffab40 var(--s1, 25%) var(--s2, 50%),
            #40c4ff var(--s2, 50%) var(--s3, 75%),
            #69f0ae var(--s3, 75%) 100%
        );
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
        z-index: 800;
        cursor: pointer;
        overflow: visible;
    }

    /* White inner fill — original look, colored ring visible around edges */
    .mms-fab[b-xt4irg56x6]::before {
        content: '';
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: linear-gradient(to bottom, #ffffff, #dadada);
        pointer-events: none;
    }

    .mms-fab-img[b-xt4irg56x6] {
        width: 50px;
        height: 50px;
        object-fit: contain;
        pointer-events: none;
        position: relative;
        z-index: 1;
    }

    /* Badge — total movement count */
    .mms-badge[b-xt4irg56x6] {
        position: absolute;
        top: -5px;
        right: -26px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #f58c00;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 20px;
        text-align: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        pointer-events: none;
       
    }

    .mms-fab.has-attacks .mms-badge[b-xt4irg56x6] {
        background: #d00;
    }

    .mms-fab.active[b-xt4irg56x6] {
        box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    /* ── Expanding panel ── */
    .mms-panel[b-xt4irg56x6] {
        position: fixed;
        left: 66px;
        bottom: calc(175px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: calc(100vw - 82px);
        background: rgba(20, 20, 20, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        overflow: hidden;
        z-index: 799;

        /* Animation — slide out from the FAB */
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
        transform-origin: left center;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .mms-panel.open[b-xt4irg56x6] {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
    }

    /* ── Rows inside panel ── */
    .mms-row[b-xt4irg56x6] {
        display: flex;
        direction: ltr;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none;
        min-height: 34px;
        transition: background 0.15s;
        z-index: 11;
    }

    .mms-row:active[b-xt4irg56x6] {
        background: rgba(255, 255, 255, 0.08);
    }

    .mms-row + .mms-row[b-xt4irg56x6] {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mms-icon[b-xt4irg56x6] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .mms-count[b-xt4irg56x6] {
        font-size: 14px;
        font-weight: 800;
        flex-shrink: 0;
        min-width: 18px;
        text-align: center;
    }

    .mms-label[b-xt4irg56x6] {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .mms-timer[b-xt4irg56x6] {
        direction: ltr;
        font-size: 10px;
        font-weight: 600;
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.55);
        margin-inline-start: auto;
    }

    /* ── Color accents ── */
    .mms-attack .mms-count[b-xt4irg56x6],
    .mms-attack .mms-label[b-xt4irg56x6] {
        color: #ff6b6b;
    }

    .mms-outgoing .mms-count[b-xt4irg56x6],
    .mms-outgoing .mms-label[b-xt4irg56x6] {
        color: #ffb347;
    }

    .mms-reinforce .mms-count[b-xt4irg56x6],
    .mms-reinforce .mms-label[b-xt4irg56x6],
    .mms-incoming-other .mms-count[b-xt4irg56x6],
    .mms-incoming-other .mms-label[b-xt4irg56x6] {
        color: #69db7c;
    }

    .mms-returning .mms-count[b-xt4irg56x6],
    .mms-returning .mms-label[b-xt4irg56x6] {
        color: #74c0fc;
    }

    /* ── Backdrop — closes panel on tap outside ── */
    .mms-backdrop[b-xt4irg56x6] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 798;
        background: transparent;
    }
}

/* troops-mode-desktop: hide mobile movements FAB/panel even on small screens */
.wrapper.troops-mode-desktop .mms-fab[b-xt4irg56x6],
.wrapper.troops-mode-desktop .mms-panel[b-xt4irg56x6],
.wrapper.troops-mode-desktop .mms-backdrop[b-xt4irg56x6] {
    display: none !important;
}
/* /Components/Shared/MobileTroopsPanel.razor.rz.scp.css */
/* Default: hidden on desktop */
.mobile-hero-link[b-p8ljtob2mz],
.mtp-fab-wrapper[b-p8ljtob2mz],
.mtp-fab[b-p8ljtob2mz],
.mtp-panel[b-p8ljtob2mz],
.mtp-backdrop[b-p8ljtob2mz] {
    display: none;
}

/* ==========================================================================
   Phone ≤560px: show floating troops FAB and slide-out panel
   ========================================================================== */
@media (max-width: 560px) {

    /* ── Hero avatar (unchanged) ── */
    .mobile-hero-link[b-p8ljtob2mz] {
        position: fixed;
        left: 13px;
        bottom: calc(121px + env(safe-area-inset-bottom, 0px));
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid #999;
        background: linear-gradient(to bottom, #ffffff, #dadada);
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
        z-index: 700;
    }

    .mobile-hero-avatar[b-p8ljtob2mz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-hero-level[b-p8ljtob2mz] {
        position: absolute;
        bottom: -2px;
        left: 5px;
        padding: 1px 5px;
        border-radius: 999px;
        background: #ffb400;
        color: #3b2a1b;
        font-size: 9px;
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .mobile-hero-points[b-p8ljtob2mz] {
        position: absolute;
        top: -4px;
        left: 43px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: #d90000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .hero-danger[b-p8ljtob2mz] {
        border-color: #ff5d5d;
        box-shadow: 0 0 0 2px rgba(255, 93, 93, 0.35);
    }

    /* ── Troops FAB wrapper — positions the FAB + badge together ── */
    .mtp-fab-wrapper[b-p8ljtob2mz] {
        position: fixed;
        left: 10px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        z-index: 790;
        direction: ltr;
    }

    /* ── Troops FAB button ── */
    .mtp-fab[b-p8ljtob2mz] {
        position: static;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 2px solid #999;
        border-radius: 50%;
        background: linear-gradient(to bottom, #ffffff, #dadada);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
        z-index: 790;
        cursor: pointer;
        overflow: visible;
    }

    .mtp-fab-img[b-p8ljtob2mz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mtp-fab-fallback[b-p8ljtob2mz] {
        display: none;
        font-size: 20px;
    }

    .mtp-fab.active[b-p8ljtob2mz] {
        border-color: #ff8f00;
        box-shadow: 0 0 0 3px rgba(255, 143, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.28);
    }

    /* Badge — total troop count — sits to the right of the FAB */
    .mtp-badge[b-p8ljtob2mz] {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ff8f00;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        white-space: nowrap;
    }

    /* ── Expanding panel — dark translucent ── */
    .mtp-panel[b-p8ljtob2mz] {
        position: fixed;
        left: 66px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        width: fit-content;
        max-width: calc(100vw - 82px);
        max-height: 50vh;
        overflow-y: auto;
        background: rgba(20, 20, 20, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        z-index: 789;

        /* Animation — slide out from the FAB */
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
        transform-origin: left center;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

        .mtp-panel.open[b-p8ljtob2mz] {
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto;
            z-index: 799;
        }

    /* ── Section titles ── */
    .mtp-section-title[b-p8ljtob2mz] {
        direction: rtl;
        padding: 6px 14px 2px;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.45);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mtp-section-title.mtp-reinf[b-p8ljtob2mz] {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 8px;
        margin-top: 2px;
        color: rgba(105, 219, 124, 0.55);
    }

    /* ── Troop rows ── */
    .mtp-row[b-p8ljtob2mz] {
        display: flex;
        direction: ltr;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none;
        min-height: 32px;
        transition: background 0.15s;
    }

    .mtp-row:active[b-p8ljtob2mz] {
        background: rgba(255, 255, 255, 0.08);
    }

    .mtp-row + .mtp-row[b-p8ljtob2mz] {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mtp-icon[b-p8ljtob2mz] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .mtp-name[b-p8ljtob2mz] {
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .mtp-count[b-p8ljtob2mz] {
        margin-inline-start: auto;
        font-size: 13px;
        font-weight: 800;
        color: #ffb347;
        flex-shrink: 0;
    }

    /* Reinforcement rows — green accent */
    .mtp-reinf-row .mtp-count[b-p8ljtob2mz] {
        color: #69db7c;
    }

    /* ── Backdrop — closes panel on tap outside ── */
    .mtp-backdrop[b-p8ljtob2mz] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 788;
        background: transparent;
    }
}

/* troops-mode-desktop: hide mobile FAB/panel even on small screens */
.wrapper.troops-mode-desktop .mtp-fab-wrapper[b-p8ljtob2mz],
.wrapper.troops-mode-desktop .mtp-panel[b-p8ljtob2mz],
.wrapper.troops-mode-desktop .mtp-backdrop[b-p8ljtob2mz],
.wrapper.troops-mode-desktop .mobile-hero-link[b-p8ljtob2mz] {
    display: none !important;
}
/* /Components/Shared/MovementList.razor.rz.scp.css */
/* === MovementList Scoped CSS === */

.movement-list[b-icd5rxkyo5] {
    margin-bottom: 1rem;
}

.movement-title[b-icd5rxkyo5] {
    color: var(--text-heading);
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}

.movement-item[b-icd5rxkyo5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-content);
    direction: rtl;
}

.movement-item:last-child[b-icd5rxkyo5] {
    border-bottom: none;
}

.movement-icon[b-icd5rxkyo5] {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.movement-info[b-icd5rxkyo5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.movement-target[b-icd5rxkyo5] {
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Type-based colors --- */
.movement-attack[b-icd5rxkyo5] {
    border-inline-start: 3px solid #c62828;
}

.movement-reinforce[b-icd5rxkyo5] {
    border-inline-start: 3px solid #2e7d32;
}

.movement-trade[b-icd5rxkyo5] {
    border-inline-start: 3px solid var(--text-gold);
}

.movement-other[b-icd5rxkyo5] {
    border-inline-start: 3px solid var(--border-medium);
}
/* /Components/Shared/NotificationPanel.razor.rz.scp.css */
/* /Components/Shared/OperationProgressOverlay.razor.rz.scp.css */
/* === OperationProgressOverlay Scoped CSS === */

.op-overlay[b-ppva0wrkhw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: op-fade-in-b-ppva0wrkhw 0.2s ease-out;
}

@keyframes op-fade-in-b-ppva0wrkhw {
    from { opacity: 0; }
    to { opacity: 1; }
}

.op-overlay-card[b-ppva0wrkhw] {
    background: linear-gradient(to bottom, #f8f4ec 0%, #ede4d3 100%);
    border: 2px solid #c0a060;
    border-radius: 8px;
    padding: 20px 28px;
    min-width: 280px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: op-card-slide-b-ppva0wrkhw 0.3s ease-out;
}

@keyframes op-card-slide-b-ppva0wrkhw {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Spinner state */
.op-overlay-spinner[b-ppva0wrkhw] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.op-overlay-spinner .spinner[b-ppva0wrkhw] {
    width: 32px;
    height: 32px;
    border: 3px solid #c0a060;
    border-top-color: transparent;
    border-radius: 50%;
    animation: op-spin-b-ppva0wrkhw 0.8s linear infinite;
}

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

.op-overlay-text[b-ppva0wrkhw] {
    font-size: 14px;
    color: #4a3520;
    font-weight: 600;
}

/* Diagnostic state */
.op-overlay-diag[b-ppva0wrkhw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.diag-icon[b-ppva0wrkhw] {
    font-size: 28px;
    line-height: 1;
}

.diag-title[b-ppva0wrkhw] {
    font-size: 15px;
    font-weight: 700;
    color: #4a3520;
    border-bottom: 1px solid #d4c4a8;
    padding-bottom: 6px;
}

.diag-message[b-ppva0wrkhw] {
    font-size: 12.5px;
    color: #6b5a42;
    line-height: 1.6;
    text-align: start;
}

.diag-hint[b-ppva0wrkhw] {
    font-size: 11px;
    color: #8a7a60;
    font-style: italic;
    margin-top: 4px;
}

/* Severity variants */
.op-overlay.diag-busy[b-ppva0wrkhw] {
    background: rgba(80, 60, 20, 0.45);
}

.op-overlay.diag-busy .op-overlay-card[b-ppva0wrkhw] {
    border-color: #b8860b;
}

.op-overlay.diag-warning .op-overlay-card[b-ppva0wrkhw] {
    border-color: #cc8800;
    background: linear-gradient(to bottom, #fff9ec 0%, #f5e8c8 100%);
}

.op-overlay.diag-critical[b-ppva0wrkhw] {
    background: rgba(120, 20, 20, 0.5);
}

.op-overlay.diag-critical .op-overlay-card[b-ppva0wrkhw] {
    border-color: #b22222;
    background: linear-gradient(to bottom, #fff0f0 0%, #f5d8d8 100%);
}

.op-overlay.diag-critical .diag-title[b-ppva0wrkhw] {
    color: #8b0000;
}

.op-overlay.diag-critical .diag-message[b-ppva0wrkhw] {
    color: #6b2020;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .op-overlay-card[b-ppva0wrkhw] {
        min-width: 260px;
        max-width: 340px;
        padding: 16px 20px;
    }

    .diag-title[b-ppva0wrkhw] {
        font-size: 14px;
    }

    .diag-message[b-ppva0wrkhw] {
        font-size: 12px;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
/* /Components/Shared/ResourceCostDisplay.razor.rz.scp.css */
/* /Components/Shared/ResourceDisplay.razor.rz.scp.css */
/* /Components/Shared/SpawnNoticeBanner.razor.rz.scp.css */
/* ============================================================
   SpawnNoticeBanner — Floating Circular Bubble
   Placed in the bottom-left corner so it never covers the
   resource bar, navigation, or map. Dismisses for the session.
   ============================================================ */

.spawn-notice-bubble[b-pojrmobc0n] {
    position: fixed;
    bottom: 80px;
    left: 16px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 8px;
    border-radius: 40px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .30);
    max-width: 210px;
    min-width: 140px;
    direction: rtl;
    font-size: 11px;
    animation: spawn-notice-slide-in-b-pojrmobc0n .35s ease-out;
    cursor: default;
    user-select: none;
}

@keyframes spawn-notice-slide-in-b-pojrmobc0n {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Image circle ── */
.spawn-notice-img-wrap[b-pojrmobc0n] {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: visible;
}

.spawn-notice-img[b-pojrmobc0n] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(255,255,255,.5);
}

/* Pulse ring — countdown state only */
.spawn-notice-pulse[b-pojrmobc0n]::before,
.spawn-notice-pulse[b-pojrmobc0n]::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: spawn-pulse-b-pojrmobc0n 2s ease-out infinite;
    opacity: 0;
}
.spawn-notice-pulse[b-pojrmobc0n]::after { animation-delay: .9s; }

@keyframes spawn-pulse-b-pojrmobc0n {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Glow ring — spawned state */
.spawn-notice-glow[b-pojrmobc0n] {
    box-shadow: 0 0 14px 4px rgba(80, 220, 80, .55);
    border-radius: 50%;
}

/* ── Text body ── */
.spawn-notice-body[b-pojrmobc0n] {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.spawn-notice-title[b-pojrmobc0n] {
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spawn-notice-sub[b-pojrmobc0n] {
    font-size: 10px;
    opacity: .85;
    margin-top: 1px;
}

/* ── Countdown timer text ── */
.spawn-notice-timer[b-pojrmobc0n] {
    font-weight: 800;
    font-size: 11px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

[b-pojrmobc0n] .spawn-notice-timer .countdown {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── Close button ── */
.spawn-notice-close[b-pojrmobc0n] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(0, 0, 0, .18);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: inherit;
    line-height: 1;
    padding: 0;
    align-self: center;
    transition: background .15s;
}
.spawn-notice-close:hover[b-pojrmobc0n] {
    background: rgba(0, 0, 0, .40);
}

/* ── State colours ── */

/* Countdown — orange/amber */
.spawn-notice-countdown[b-pojrmobc0n] {
    background: linear-gradient(135deg, #ffe082, #ffb300);
    color: #5a3a00;
    border: 1px solid #c07d00;
}
.spawn-notice-countdown .spawn-notice-pulse[b-pojrmobc0n] { color: #c07d00; }

/* Spawning transition — blue */
.spawn-notice-spawning[b-pojrmobc0n] {
    background: linear-gradient(135deg, #bbdefb, #42a5f5);
    color: #0d2b50;
    border: 1px solid #1976d2;
}

/* Spawned — green */
.spawn-notice-spawned[b-pojrmobc0n] {
    background: linear-gradient(135deg, #c8e6c9, #66bb6a);
    color: #1b4d1e;
    border: 1px solid #388e3c;
}

/* ── Stack when both notices visible ── */
.spawn-notice-bubble + .spawn-notice-bubble[b-pojrmobc0n] {
    bottom: 132px; /* 80 + 36 height + 16 gap */
}

/* ── Mobile: slightly smaller, keep left-bottom ── */
@media (max-width: 768px) {
    .spawn-notice-bubble[b-pojrmobc0n] {
        bottom: 66px;
        left: 10px;
        max-width: 185px;
        font-size: 10px;
        padding: 5px 7px 5px 7px;
    }

    .spawn-notice-img[b-pojrmobc0n],
    .spawn-notice-img-wrap[b-pojrmobc0n] {
        width: 30px;
        height: 30px;
    }

    .spawn-notice-timer[b-pojrmobc0n] { font-size: 10px; }

    .spawn-notice-close[b-pojrmobc0n] {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .spawn-notice-bubble + .spawn-notice-bubble[b-pojrmobc0n] {
        bottom: 116px;
    }
}
/* /Components/Shared/StorageBar.razor.rz.scp.css */
/* /Components/Shared/SupportChatWidget.razor.rz.scp.css */
/* SupportChatWidget.razor — scoped styles (floating bottom-corner widget) */

.scw-container[b-r57pvzkdvd] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    direction: rtl;
}

/* ─── Toggle Button ─── */
.scw-toggle[b-r57pvzkdvd] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #3182CE, #2B6CB0);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(49, 130, 206, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .scw-toggle:hover[b-r57pvzkdvd] {
        transform: scale(1.08);
        box-shadow: 0 6px 18px rgba(49, 130, 206, 0.5);
    }

.scw-badge[b-r57pvzkdvd] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E53E3E;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    animation: scw-pulse-b-r57pvzkdvd 1.5s ease-in-out infinite;
}

@keyframes scw-pulse-b-r57pvzkdvd {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ─── Chat Panel ─── */
.scw-panel[b-r57pvzkdvd] {
    position: absolute;
    bottom: 62px;
    left: 0;
    width: 340px;
    max-height: 460px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scw-slideUp-b-r57pvzkdvd 0.25s ease-out;
}

@keyframes scw-slideUp-b-r57pvzkdvd {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scw-header[b-r57pvzkdvd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, #3182CE, #2B6CB0);
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
}

.scw-header-actions[b-r57pvzkdvd] {
    display: flex;
    gap: 0.3rem;
}

.scw-expand-btn[b-r57pvzkdvd],
.scw-close-btn[b-r57pvzkdvd] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    opacity: 0.8;
}

    .scw-expand-btn:hover[b-r57pvzkdvd],
    .scw-close-btn:hover[b-r57pvzkdvd] {
        opacity: 1;
        background: rgba(255,255,255,0.15);
    }

/* ─── Messages ─── */
.scw-messages[b-r57pvzkdvd] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #F7FAFC;
    min-height: 200px;
    max-height: 300px;
}

.scw-loading[b-r57pvzkdvd],
.scw-empty[b-r57pvzkdvd] {
    text-align: center;
    color: #A0AEC0;
    font-size: 0.82rem;
    padding: 1.5rem 0;
}

.scw-msg[b-r57pvzkdvd] {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.scw-msg-player[b-r57pvzkdvd] {
    align-self: flex-end;
}

.scw-msg-admin[b-r57pvzkdvd] {
    align-self: flex-start;
}

.scw-msg-system[b-r57pvzkdvd] {
    align-self: center !important;
    max-width: 90%;
}

.scw-msg-bubble[b-r57pvzkdvd] {
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

.scw-msg-player .scw-msg-bubble[b-r57pvzkdvd] {
    background: #3182CE;
    color: #fff;
}

.scw-msg-admin .scw-msg-bubble[b-r57pvzkdvd] {
    background: #EDF2F7;
    color: #2D3748;
}

.scw-msg-system .scw-msg-bubble[b-r57pvzkdvd] {
    background: #FFFBEB;
    color: #975A16;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 6px;
}

.scw-msg-time[b-r57pvzkdvd] {
    font-size: 0.62rem;
    color: #A0AEC0;
    margin-top: 0.1rem;
}

.scw-msg-player .scw-msg-time[b-r57pvzkdvd] {
    text-align: left;
}

.scw-msg-admin .scw-msg-time[b-r57pvzkdvd] {
    text-align: right;
}

.scw-redirect-link[b-r57pvzkdvd] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: #3182CE;
    text-decoration: underline;
}

.scw-msg-admin .scw-redirect-link[b-r57pvzkdvd] {
    color: #3182CE;
}

.scw-msg-player .scw-redirect-link[b-r57pvzkdvd] {
    color: #BEE3F8;
}

/* ─── Input Area ─── */
.scw-input-area[b-r57pvzkdvd] {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid #E2E8F0;
    background: #fff;
}

.scw-input[b-r57pvzkdvd] {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
}

    .scw-input:focus[b-r57pvzkdvd] {
        border-color: #3182CE;
        box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.12);
    }

.scw-send[b-r57pvzkdvd] {
    background: #3182CE;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
}

    .scw-send:hover:not(:disabled)[b-r57pvzkdvd] {
        background: #2B6CB0;
    }

    .scw-send:disabled[b-r57pvzkdvd] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ─── Closed bar ─── */
.scw-closed-bar[b-r57pvzkdvd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-top: 1px solid #E2E8F0;
    background: #F7FAFC;
    font-size: 0.78rem;
    color: #718096;
}

.scw-new-btn[b-r57pvzkdvd] {
    padding: 0.3rem 0.7rem;
    background: #48BB78;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

    .scw-new-btn:hover[b-r57pvzkdvd] {
        background: #38A169;
    }

/* ─── Mobile ─── */
@media (max-width: 480px) {
    .scw-panel[b-r57pvzkdvd] {
        width: calc(100vw - 40px);
        left: 0;
        right: 0;
    }

    .scw-container[b-r57pvzkdvd] {
        left: 10px;
    }
}
/* /Components/Shared/UnitIcon.razor.rz.scp.css */