/* Warfallen visual refresh.
   Loaded after legacy page styles to modernize the interface without changing
   the dashboard village canvas/image-map layout. */

:root {
    --wf-bg: #0f1412;
    --wf-bg-2: #151b18;
    --wf-surface: rgba(23, 29, 25, 0.94);
    --wf-surface-strong: rgba(14, 19, 17, 0.97);
    --wf-surface-soft: rgba(35, 48, 40, 0.78);
    --wf-border: rgba(184, 154, 94, 0.28);
    --wf-border-strong: rgba(203, 166, 91, 0.55);
    --wf-text: #eee8da;
    --wf-text-muted: #b9c0ae;
    --wf-text-dim: #7f8b7c;
    --wf-accent: #cba65b;
    --wf-accent-2: #78a083;
    --wf-accent-3: #b65b4f;
    --wf-info: #74a7b6;
    --wf-success: #6faf7d;
    --wf-warning: #d1a44f;
    --wf-danger: #d96459;
    --wf-radius: 8px;
    --wf-radius-sm: 6px;
    --wf-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    --wf-shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.24);
    --wf-line: linear-gradient(90deg, transparent, rgba(203, 166, 91, 0.58), transparent);

    --color-black: var(--wf-bg);
    --color-charcoal: var(--wf-bg-2);
    --color-dark: #1c251f;
    --color-rich-black: #111714;
    --color-blood: #7e302b;
    --color-crimson: var(--wf-danger);
    --color-deep-crimson: #4b1f1c;
    --color-ruby: #8f4239;
    --color-gold: var(--wf-accent);
    --color-antique-gold: #b89048;
    --color-brass: #9d814c;
    --color-bronze: #846a42;
    --color-stone: #576258;
    --color-light-stone: #879486;
    --color-steel: var(--wf-info);
    --color-dark-steel: #3f6067;
    --color-rust: #b8704d;
    --color-deep-rust: #8f4a35;
    --text-primary: var(--wf-text);
    --text-secondary: var(--wf-text-muted);
    --text-tertiary: var(--wf-text-dim);
    --text-gold: var(--wf-accent);
    --text-white: #ffffff;
}

*,
*::before,
*::after {
    letter-spacing: 0 !important;
}

html {
    color-scheme: dark;
}

body,
.dashboard-body,
.dashboard-html,
.rankings-body,
.rankings-html,
.alliances-body,
.alliances-html,
.settings-body,
.settings-html,
.help-body,
.help-html,
.farm-body,
.farm-html,
.map-body,
.map-html {
    background-color: var(--wf-bg) !important;
    background-image:
        linear-gradient(180deg, rgba(15, 20, 18, 0.72), rgba(15, 20, 18, 0.94)),
        url("../../images/Dashboard_Background.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color: var(--wf-text) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.dashboard-body::before,
.dashboard-body::after,
.landing-body::before,
.landing-body::after,
.rankings-body::before,
.alliances-body::before,
.help-body::before,
.map-body::before,
.map-body::after {
    opacity: 0 !important;
}

.map-body,
.map-html {
    background-image:
        linear-gradient(180deg, rgba(15, 20, 18, 0.78), rgba(15, 20, 18, 0.94)),
        url("../../images/map/background.png") !important;
}

.farm-body,
.farm-html {
    background-image:
        linear-gradient(180deg, rgba(15, 20, 18, 0.72), rgba(15, 20, 18, 0.94)),
        url("../../images/Farm_Background.png") !important;
}

.dashboard-container,
.rankings-page-container,
.alliances-container,
.settings-container,
.help-container,
.map-page-container,
.farm-container,
.attack-container,
.reports-container,
.quests-container,
.rewards-container,
.admin-container .form-container {
    background: var(--wf-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
}

.dashboard-container {
    padding: 22px !important;
}

.dashboard-container::before,
.dashboard-container::after,
.card::before,
.card::after,
.guild-section::before,
.guild-section::after,
.map-panel::before,
.map-panel::after,
.hero::before,
.hero::after,
.settings-section::before,
.settings-container h1::before,
.settings-container h1::after,
.help-section::before {
    display: none !important;
}

.dashboard-header,
.admin-header,
.page-header,
.rankings-page-header,
.achievements-page-header,
.alliances-container .page-title,
.settings-container h1,
.help-container h1,
.map-header,
.events-page-header,
.quests-page-header,
.rewards-page-header {
    background: linear-gradient(135deg, rgba(24, 37, 30, 0.95), rgba(14, 19, 17, 0.95)) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    color: var(--wf-text) !important;
    overflow: hidden !important;
}

.dashboard-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    text-align: left !important;
}

.dashboard-header h1,
.dashboard-header .game-title,
.map-title,
.rankings-title,
.achievements-title,
.settings-container h1,
.help-container h1,
.alliances-container .page-title,
.hero h1,
.hero-title {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--wf-text) !important;
    filter: none !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.dashboard-header p,
.rankings-subtitle,
.achievements-subtitle,
.hero p,
.hero-subtitle,
.section-subtitle {
    color: var(--wf-text-muted) !important;
    font-size: 0.96rem !important;
    margin-top: 6px !important;
    text-transform: none !important;
}

.dashboard-navigation,
nav.dashboard-navigation {
    background: rgba(12, 17, 15, 0.86) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    gap: 10px !important;
    justify-content: space-between !important;
    padding: 10px !important;
}

.dashboard-navigation .nav-left,
.dashboard-navigation .nav-right {
    gap: 8px !important;
    justify-content: flex-start !important;
}

.dashboard-navigation a,
.nav-item,
.btn,
.action-btn,
.btn-recenter,
.btn-view-attacks,
.farm-button,
button,
input[type="submit"] {
    border-radius: var(--wf-radius-sm) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.dashboard-navigation a {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--wf-text-muted) !important;
    padding: 10px 14px !important;
}

.dashboard-navigation a:hover,
.dashboard-navigation a.active {
    background: rgba(120, 160, 131, 0.14) !important;
    border-color: rgba(120, 160, 131, 0.38) !important;
    color: var(--wf-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.dashboard-navigation a[href*="admin"] {
    background: rgba(182, 91, 79, 0.16) !important;
    border-color: rgba(182, 91, 79, 0.4) !important;
    color: #ffd9d3 !important;
    animation: none !important;
}

.card,
.guild-section,
.settings-section,
.help-section,
.achievement-card,
.achievement-stat-card,
.leaderboard-card,
.my-rank-card,
.alliance-card,
.stat-card,
.map-panel,
.leaderboard-item,
.preference-group,
.info-row,
.activity-item,
.section-card,
.form-section,
.marketplace-section,
.offer-card,
.report-card,
.attack-card,
.troop-card,
.building-card,
.quest-card,
.reward-card,
.event-card {
    background: linear-gradient(180deg, rgba(25, 35, 29, 0.94), rgba(16, 22, 19, 0.94)) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow-soft) !important;
}

.card:hover,
.guild-section:hover,
.settings-section:hover,
.help-section:hover,
.achievement-card:hover,
.leaderboard-card:hover,
.my-rank-card:hover,
.stat-card:hover,
.map-panel:hover,
.resource-buildings-card:hover {
    border-color: var(--wf-border-strong) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    transform: none !important;
}

.card-header,
.guild-section-header,
.settings-section h2,
.help-section h2,
.section-header,
.card-title,
.panel-title,
.leaderboard-title,
.category-title,
.preference-group h3,
.form-section h2,
.farm-header,
.map-panel h3 {
    background: transparent !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-accent) !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    padding-bottom: 12px !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.card-header::after,
.guild-section-header::after,
.section-header::after,
.category-divider,
.footer-divider {
    background: var(--wf-line) !important;
}

p,
span,
div,
label,
td,
th,
li,
small {
    color: inherit;
}

a {
    color: var(--wf-accent-2) !important;
}

a:hover {
    color: var(--wf-accent) !important;
}

.btn,
.btn-primary,
.btn-success,
.btn-save,
.btn-guild-primary,
.btn-claim-reward,
.btn-recenter,
.action-btn,
.btn-view-attacks,
.farm-button,
button[type="submit"] {
    background: linear-gradient(135deg, #cba65b, #9c7a3e) !important;
    border: 1px solid rgba(255, 238, 186, 0.26) !important;
    color: #111714 !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.26) !important;
    text-shadow: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-save:hover,
.btn-guild-primary:hover,
.btn-claim-reward:hover,
.btn-recenter:hover,
.action-btn:hover,
.btn-view-attacks:hover,
.farm-button:hover,
button[type="submit"]:hover {
    background: linear-gradient(135deg, #d8b66d, #a88748) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary,
.btn-guild-secondary,
.btn-danger,
.dir-btn,
.zoom-btn,
.overlay-btn {
    background: rgba(27, 38, 32, 0.9) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text) !important;
    box-shadow: none !important;
}

.btn-danger {
    border-color: rgba(217, 100, 89, 0.5) !important;
    color: #ffd8d4 !important;
}

input,
select,
textarea,
.form-control,
.form-select {
    background: rgba(8, 12, 10, 0.78) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--wf-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(120, 160, 131, 0.22) !important;
    outline: none !important;
}

select option {
    background: #101713 !important;
    color: var(--wf-text) !important;
}

table,
.reference-table {
    background: rgba(13, 18, 16, 0.74) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    overflow: hidden !important;
}

thead,
th,
.reference-table th {
    background: rgba(120, 160, 131, 0.14) !important;
    color: var(--wf-accent) !important;
}

td,
th,
.reference-table td {
    border-color: rgba(184, 154, 94, 0.14) !important;
}

tr:hover,
.reference-table tr:hover td {
    background: rgba(120, 160, 131, 0.08) !important;
}

.resources-list {
    background: rgba(8, 12, 10, 0.62) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    justify-content: flex-start !important;
    padding: 12px !important;
}

.resource-item {
    background: rgba(26, 38, 31, 0.88) !important;
    border: 1px solid rgba(120, 160, 131, 0.24) !important;
    border-radius: var(--wf-radius-sm) !important;
    color: var(--wf-text) !important;
}

.resource-item span,
.resource-item {
    color: var(--wf-text) !important;
}

.resource-item:hover {
    background: rgba(38, 54, 44, 0.92) !important;
    border-color: rgba(120, 160, 131, 0.52) !important;
    transform: none !important;
}

.resource-icon {
    filter: none !important;
}

.resource-capacity {
    color: var(--wf-text-dim) !important;
}

.action-grid,
.achievements-grid,
.rankings-grid,
.my-rankings-grid,
.alliance-stats-grid,
.stats-grid,
.settings-grid,
.features,
.features-grid {
    gap: 14px !important;
}

.actions-compact {
    padding: 16px !important;
}

.action-item {
    background: rgba(17, 24, 20, 0.9) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    color: var(--wf-text) !important;
    min-height: 72px !important;
    transition: border-color 0.18s ease, background 0.18s ease !important;
}

.action-item:hover {
    background: rgba(31, 45, 37, 0.96) !important;
    border-color: var(--wf-border-strong) !important;
    transform: none !important;
}

.action-icon,
.feature-icon,
.stat-icon,
.achievement-icon,
.empty-icon {
    filter: none !important;
    text-shadow: none !important;
}

.notification,
.alert,
.message,
.error-message,
.success-message,
.info-message,
.warning-message {
    background: rgba(18, 25, 21, 0.96) !important;
    border: 1px solid var(--wf-border) !important;
    border-left: 4px solid var(--wf-info) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    color: var(--wf-text) !important;
}

.notification.success,
.alert-success,
.success-message,
.info-message {
    border-left-color: var(--wf-success) !important;
    color: #d8f1dc !important;
}

.notification.error,
.alert-error,
.error-message {
    border-left-color: var(--wf-danger) !important;
    color: #ffd8d4 !important;
}

.notification.warning,
.alert-warning,
.warning-message {
    border-left-color: var(--wf-warning) !important;
    color: #ffe8b0 !important;
}

.incoming-attack-alert {
    animation: none !important;
}

.tooltip,
.village-tooltip {
    background: rgba(12, 17, 15, 0.96) !important;
    border: 1px solid var(--wf-border-strong) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow) !important;
}

.tooltip-title,
.tooltip-detail strong,
.tooltip-village-name {
    color: var(--wf-accent) !important;
}

.tooltip-text {
    background: rgba(0, 0, 0, 0.18) !important;
}

.resource-buildings-card {
    overflow: auto !important;
}

.resource-buildings-card .card-list {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
}

#villageImage {
    display: block !important;
    width: 1755px !important;
    height: 1024px !important;
    max-width: none !important;
}

/* World map refresh. */
.map-body {
    padding: 16px !important;
}

.map-layout {
    gap: 16px !important;
}

.map-header {
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.map-title::before,
.map-title::after,
.header-ornament-left,
.header-ornament-right {
    display: none !important;
}

.map-frame {
    background: rgba(12, 17, 15, 0.9) !important;
    border: 1px solid var(--wf-border-strong) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow) !important;
    padding: 18px !important;
}

.frame-corner {
    display: none !important;
}

.map-container {
    border: 1px solid rgba(120, 160, 131, 0.34) !important;
    border-radius: var(--wf-radius-sm) !important;
    box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.58) !important;
}

.coord-display,
.zoom-indicator,
.legend-item,
.village-detail {
    background: rgba(8, 12, 10, 0.54) !important;
    border-color: rgba(184, 154, 94, 0.2) !important;
}

/* Admin refresh. */
.admin-body {
    background: var(--wf-bg) !important;
    color: var(--wf-text) !important;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.admin-main,
.admin-content {
    background: transparent !important;
}

.admin-sidebar {
    background: rgba(12, 17, 15, 0.98) !important;
    border-right: 1px solid var(--wf-border) !important;
}

.admin-logo,
.admin-user-info,
.admin-header {
    background: rgba(18, 25, 21, 0.96) !important;
    border-color: var(--wf-border) !important;
}

.admin-logo i,
.admin-logo h2,
.admin-header h1,
.card-title,
.section-card h2 {
    color: var(--wf-text) !important;
}

.nav-item:hover,
.nav-item.active {
    background: rgba(120, 160, 131, 0.14) !important;
    border-left-color: var(--wf-accent-2) !important;
    color: var(--wf-text) !important;
}

.stat-card-icon.red,
.stat-card-icon.blue,
.stat-card-icon.green,
.stat-card-icon.yellow,
.stat-card-icon.purple {
    background: rgba(120, 160, 131, 0.13) !important;
    color: var(--wf-accent) !important;
}

.badge {
    border-radius: 999px !important;
}

.badge-success { background: rgba(111, 175, 125, 0.15) !important; color: #bde7c5 !important; }
.badge-danger { background: rgba(217, 100, 89, 0.16) !important; color: #ffd8d4 !important; }
.badge-warning { background: rgba(209, 164, 79, 0.16) !important; color: #ffe8b0 !important; }
.badge-info { background: rgba(116, 167, 182, 0.16) !important; color: #c8edf5 !important; }
.badge-secondary { background: rgba(185, 192, 174, 0.12) !important; color: var(--wf-text-muted) !important; }

/* Landing page refresh for index.php. */
body > .container {
    max-width: 1180px !important;
    padding: 18px !important;
}

body > .container > header {
    background: rgba(12, 17, 15, 0.78) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    margin-bottom: 18px !important;
}

.logo {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--wf-text) !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

body > .container nav a {
    border: 1px solid transparent !important;
    color: var(--wf-text-muted) !important;
}

body > .container nav a:hover {
    background: rgba(120, 160, 131, 0.14) !important;
    border-color: rgba(120, 160, 131, 0.36) !important;
    color: var(--wf-text) !important;
}

body > .container nav a.primary {
    background: linear-gradient(135deg, #cba65b, #9c7a3e) !important;
    color: #111714 !important;
}

body > .container .hero {
    min-height: min(62vh, 620px) !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    padding: 46px 28px !important;
    text-align: center !important;
}

body > .container .hero h1 {
    font-size: 5rem !important;
}

body > .container .features {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 18px auto !important;
}

body > .container .feature {
    background: rgba(18, 25, 21, 0.94) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
    box-shadow: var(--wf-shadow-soft) !important;
    transform: none !important;
}

body > .container footer {
    background: rgba(12, 17, 15, 0.76) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-radius) !important;
}

@media (max-width: 900px) {
    .dashboard-header {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    body > .container .features {
        grid-template-columns: 1fr !important;
    }

    body > .container .hero h1 {
        font-size: 3.5rem !important;
    }

    .map-frame {
        padding: 10px !important;
    }
}

@media (max-width: 520px) {
    .dashboard-container,
    .rankings-page-container,
    .alliances-container,
    .settings-container,
    .help-container,
    .map-page-container {
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .dashboard-header h1,
    .dashboard-header .game-title,
    .map-title,
    .rankings-title,
    .achievements-title,
    .settings-container h1,
    .help-container h1,
    .alliances-container .page-title,
    .hero h1,
    .hero-title {
        font-size: 1.75rem !important;
    }

    body > .container .hero h1 {
        font-size: 2.65rem !important;
    }
}