:root {
  --ds-bg: #080b12;
  --ds-surface: rgba(13, 17, 27, 0.88);
  --ds-surface-strong: rgba(9, 12, 20, 0.96);
  --ds-surface-soft: rgba(255, 255, 255, 0.055);
  --ds-text: #f7f3e9;
  --ds-text-muted: #c4bdaf;
  --ds-gold: #e1b85b;
  --ds-gold-bright: #f3d27f;
  --ds-green: #3fbd79;
  --ds-red: #d85d64;
  --ds-blue: #4c9fe8;
  --ds-border: rgba(225, 184, 91, 0.34);
  --ds-border-soft: rgba(255, 255, 255, 0.11);
  --ds-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  --ds-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.22);
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 18px;
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-content-width: 1180px;
  --page-accent: var(--ds-gold);
}

body[data-page-theme="war"] { --page-accent: #e66b61; }
body[data-page-theme="bank"] { --page-accent: #62aeea; }
body[data-page-theme="nature"] { --page-accent: #60c487; }
body[data-page-theme="hero"] { --page-accent: #a985e8; }
body[data-page-theme="shop"] { --page-accent: #e7b950; }
body[data-page-theme="training"] { --page-accent: #e69452; }
body[data-page-theme="development"] { --page-accent: #55c8c3; }
body[data-page-theme="history"] { --page-accent: #91a0b2; }
body[data-page-theme="messages"] { --page-accent: #6c9ee8; }

body[data-page-theme] .topbar,
body[data-page-theme] .content { border-color: color-mix(in srgb, var(--page-accent) 44%, transparent) !important; }
body[data-page-theme] .content > h1:first-child,
body[data-page-theme] .content > h2:first-child { color: color-mix(in srgb, var(--page-accent) 78%, white) !important; border-bottom-color: color-mix(in srgb, var(--page-accent) 38%, transparent) !important; }
body[data-page-theme] .sidebar a.ux-nav-active { border-inline-start-color: var(--page-accent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 25%, transparent), transparent) !important; }

.game-resource { gap: 7px; }
.game-resource::before,
.game-icon {
  content: '';
  display: inline-block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

[data-resource-icon="food"]::before, .game-icon[data-icon="food"] { background-image: url('icon-food.svg'); }
[data-resource-icon="wood"]::before, .game-icon[data-icon="wood"] { background-image: url('icon-wood.svg'); }
[data-resource-icon="iron"]::before, .game-icon[data-icon="iron"] { background-image: url('icon-iron.svg'); }
[data-resource-icon="gold"]::before, .game-icon[data-icon="gold"] { background-image: url('icon-gold.svg'); }
[data-resource-icon="mana"]::before, .game-icon[data-icon="mana"] { background-image: url('icon-mana.svg'); }
[data-resource-icon="turns"]::before, .game-icon[data-icon="turns"] { background-image: url('icon-turns.svg'); }
.game-icon[data-icon="base"] { background-image: url('icon-base.svg'); }
.game-icon[data-icon="attack"] { background-image: url('icon-attack.svg'); }
.game-icon[data-icon="training"] { background-image: url('icon-training.svg'); }
.game-icon[data-icon="shop"] { background-image: url('icon-shop.svg'); }
.game-icon[data-icon="logout"] { background-image: url('icon-logout.svg'); }
.game-icon[data-icon="soldier"] { background-image: url('icon-soldier.svg'); }
.game-icon[data-icon="slave"] { background-image: url('icon-slave.svg'); }
.game-icon[data-icon="spy"] { background-image: url('icon-spy.svg'); }
.game-icon[data-icon="scout"] { background-image: url('icon-scout.svg'); }
.game-icon[data-icon="defense"] { background-image: url('icon-defense.svg'); }
.game-icon[data-icon="citizen"] { background-image: url('icon-citizen.svg'); }
.game-icon[data-icon="world"] { background-image: url('icon-world.svg'); }
.game-icon[data-icon="city"] { background-image: url('icon-city.svg'); }
.game-icon[data-icon="message"] { background-image: url('icon-message.svg'); }
.game-icon[data-icon="rank"] { background-image: url('icon-rank.svg'); }
.game-icon[data-icon="time"] { background-image: url('icon-time.svg'); }
.game-icon[data-icon="fire"] { background-image: url('icon-fire.svg'); }
.game-icon[data-icon] { margin-inline: 3px; }

html { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Arial, sans-serif !important;
  color: var(--ds-text);
  background-color: var(--ds-bg);
  line-height: 1.55 !important;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.65rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ds-gold-bright); }
h3 { font-size: clamp(1.08rem, 2vw, 1.3rem); }
p { line-height: 1.65; }
a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }

.player-name-link {
  display: inline-block;
  color: var(--ds-gold-bright) !important;
  font-weight: 750;
  text-decoration: none;
  border-bottom: 1px dashed rgba(243, 210, 127, 0.62);
}

.player-name-link:hover {
  color: #fff !important;
  border-bottom-style: solid;
  transform: translateY(-1px);
}

.topbar {
  min-height: 64px !important;
  width: 100%;
  margin: 0 0 var(--ds-space-2) !important;
  padding: 10px 18px !important;
  align-items: center !important;
  gap: 12px 20px !important;
  color: var(--ds-text) !important;
  background: var(--ds-surface-strong) !important;
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-soft);
  backdrop-filter: blur(9px);
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
}

.topbar > div:first-child { width: auto !important; flex: 0 0 auto; color: var(--ds-gold-bright); }
.resources { width: auto !important; min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: nowrap !important; justify-content: center; gap: 7px 9px !important; }
.resources > div,
.topbar [id$="Res"],
.topbar [id$="Display"] {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  color: var(--ds-text);
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-sm);
  white-space: nowrap;
}

.main-layout { gap: var(--ds-space-2) !important; align-items: stretch; }
.sidebar {
  width: 200px !important;
  flex: 0 0 200px;
  padding: var(--ds-space-2) 10px !important;
  background: var(--ds-surface-strong) !important;
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-soft);
  backdrop-filter: blur(9px);
}

.sidebar .logo { max-width: 124px; height: auto; margin: 0 auto var(--ds-space-2); }
.sidebar a {
  margin: 3px 0;
  padding: 10px 12px !important;
  border-radius: var(--ds-radius-sm);
}
.sidebar a:hover { background: rgba(225, 184, 91, 0.13); transform: translateX(-2px); }

.content {
  width: min(100%, var(--ds-content-width)) !important;
  max-width: var(--ds-content-width) !important;
  margin-inline: auto !important;
  padding: clamp(16px, 2.5vw, 28px) !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(7px);
}

.content > h1:first-child,
.content > h2:first-child { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); }

button,
input,
select,
textarea { font: inherit; }

button:not(.mobile-toggle):not(.ux-quest-toggle):not(.ux-quest-close):not(.ux-logout-button) {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ds-radius-sm) !important;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

button:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(0, 0, 0, 0.27); }
button:not(:disabled):active { transform: translateY(0); }
button:disabled, button[aria-busy="true"] { opacity: .58; cursor: wait; transform: none; }

.buy-btn, .assign, button[class*="success"] { background-color: var(--ds-green) !important; }
.sell-btn, .return, button[class*="danger"] { background-color: var(--ds-red) !important; }
.attack-btn { background-color: #b64b42 !important; }

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: 42px;
  max-width: 100%;
  padding: 9px 11px !important;
  color: var(--ds-text) !important;
  background: rgba(5, 8, 14, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--ds-radius-sm) !important;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ds-gold) !important;
  box-shadow: 0 0 0 3px rgba(225, 184, 91, 0.18) !important;
}

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: rgba(7, 10, 16, 0.74) !important;
  border: 1px solid var(--ds-border-soft);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-soft);
}

th {
  padding: 12px 10px !important;
  color: var(--ds-gold-bright) !important;
  background: rgba(225, 184, 91, 0.12) !important;
  border-color: var(--ds-border-soft) !important;
}

td { padding: 11px 10px !important; border-color: var(--ds-border-soft) !important; }
tbody tr { transition: background-color 130ms ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.045); }

.card, .box, .bank-card, .spell-card, .message-card, .race, .shop-item {
  border: 1px solid var(--ds-border-soft) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-soft) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.card:hover, .box:hover, .bank-card:hover, .spell-card:hover, .race:hover, .shop-item:hover {
  border-color: var(--ds-border) !important;
  box-shadow: var(--ds-shadow) !important;
}

.grid, .cards, .shop-grid, .spells-grid { gap: var(--ds-space-2) !important; }

@media (max-width: 1180px) {
  .topbar { flex-direction: column !important; flex-wrap: wrap !important; }
  .resources { width: 100% !important; flex-wrap: wrap !important; }
}

@media (max-width: 900px) {
  .main-layout { gap: 10px !important; }
  .content { padding: var(--ds-space-2) !important; }
}

@media (max-width: 700px) {
  .mobile-toggle {
    display: block !important;
    position: fixed !important;
    top: 100px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 5px !important;
    margin: 0 !important;
    background: radial-gradient(circle, rgba(19,24,34,.94) 45%, rgba(5,8,14,.88) 100%) !important;
    border: 2px solid rgba(243,210,127,.88) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(225,184,91,.12), 0 0 16px rgba(225,184,91,.52), 0 7px 18px rgba(0,0,0,.42) !important;
    z-index: 1000 !important;
    animation: ux-menu-beacon 3.4s ease-in-out infinite !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
  }
  .mobile-toggle:hover,
  .mobile-toggle:focus-visible { transform: scale(1.06); border-color:#fff0b1 !important; outline:none; }
  .mobile-toggle:active { transform:scale(.96) !important; }
  .mobile-toggle.ux-menu-open {
    animation:none !important;
    transform:scale(1.05);
    border-color:#65d49a !important;
    box-shadow:0 0 0 4px rgba(63,189,121,.18),0 0 20px rgba(63,189,121,.68),0 7px 18px rgba(0,0,0,.45) !important;
  }
  .mobile-toggle img {
    display: block !important;
    width: 60px !important;
    height: auto !important;
    margin: 0 !important;
    filter: drop-shadow(0 0 6px #000) !important;
  }
  body { padding-inline: 8px !important; }
  .topbar { min-height: 56px !important; padding: 8px 10px !important; border-radius: 10px !important; }
  .topbar > div:first-child { width: 100%; text-align: center; }
  .resources { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resources > div, .topbar [id$="Res"], .topbar [id$="Display"] { justify-content: center; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; }
  .main-layout { display: block !important; }
  .content { width: 100% !important; border-radius: var(--ds-radius-md) !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { min-width: 92px; }
  table:not(.attack-player-table) th:first-child,
  table:not(.attack-player-table) td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #111722 !important;
    box-shadow: -7px 0 12px rgba(0, 0, 0, 0.24);
  }
  table:not(.attack-player-table) th:first-child { z-index: 3; background: #2b281f !important; }
  .attack-player-table {
    display: table;
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
    font-size: .72rem;
  }
  .attack-player-table thead { display: table-header-group; }
  .attack-player-table tbody { display: table-row-group; }
  .attack-player-table tr { display: table-row; }
  .attack-player-table th,
  .attack-player-table td {
    display: table-cell;
    min-width: 0;
    padding: 7px 3px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .attack-player-table td::before { display: none; }
  .attack-player-table th:nth-child(1), .attack-player-table td:nth-child(1) { width: 14%; }
  .attack-player-table th:nth-child(2), .attack-player-table td:nth-child(2) { width: 28%; }
  .attack-player-table th:nth-child(3), .attack-player-table td:nth-child(3) { width: 17%; }
  .attack-player-table th:nth-child(4), .attack-player-table td:nth-child(4) { width: 21%; }
  .attack-player-table th:nth-child(5), .attack-player-table td:nth-child(5) { width: 20%; }
  .attack-player-table .player-name-link { max-width: 100%; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .attack-player-table .attack-btn { width: 100%; min-height: 36px !important; padding: 5px 3px !important; font-size: .72rem; }
  .search-bar input { width: 100% !important; }
  #pagination.pagination {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    padding: 5px 2px 8px;
    scrollbar-width: thin;
  }
  #pagination.pagination button {
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }
  #pagination.pagination .page-gap { flex: 0 0 20px; min-width: 20px; }
  button { min-height: 44px; }
  .grid, .cards, .shop-grid, .spells-grid { grid-template-columns: 1fr !important; }
}

@keyframes ux-menu-beacon {
  0%,72%,100% { box-shadow:0 0 0 3px rgba(225,184,91,.12),0 0 13px rgba(225,184,91,.42),0 7px 18px rgba(0,0,0,.42); }
  82% { box-shadow:0 0 0 7px rgba(225,184,91,.06),0 0 24px rgba(243,210,127,.78),0 7px 18px rgba(0,0,0,.42); }
}

@media (min-width: 701px) {
  .mobile-toggle { display: none !important; }
}

@media (max-width: 420px) {
  .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}