:root {
  color-scheme: dark;
  --paper: #090a0f;
  --surface: #111318;
  --surface-2: #1a1d26;
  --ink: #ededed;
  --muted: #71717a;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, 0.12);
  --olive: #34d399;
  --gold: #fbbf24;
  --good: #34d399;
  --bad: #f87171;
  --shadow: 0 16px 45px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; color: var(--ink); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(320px, 620px) auto;
  gap: 28px;
  align-items: center;
  min-height: 72px;
  padding: 12px max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(246, 242, 233, .94);
  backdrop-filter: blur(14px);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 850; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.brand-shield { display: grid; width: 34px; height: 38px; place-items: center; border: 1px solid #bdac91; border-radius: 9px 9px 13px 13px; color: #fff; background: var(--accent); font-family: Georgia, serif; font-size: 18px; box-shadow: inset 0 -4px rgba(74,29,13,.13); }
.header-search { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; overflow: hidden; border: 1px solid #cec4b4; border-radius: 11px; background: var(--surface); box-shadow: 0 5px 18px rgba(76,59,30,.05); }
.header-search select, .header-search input { min-width: 0; height: 43px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.header-search select { padding: 0 12px; border-right: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.header-search input { padding: 0 13px; text-transform: uppercase; }
.header-search input::placeholder { color: #a19a8c; text-transform: none; }
.header-search button, .search-box button { border: 0; padding: 0 18px; color: #fff; background: var(--accent); cursor: pointer; font-weight: 800; }
.header-nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.header-nav a { color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 750; }
.header-nav a:hover { color: var(--accent); }
.mobile-search-button { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); font-size: 24px; }
.mobile-search { padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
body.home-route .site-header { grid-template-columns: auto 1fr; }
body.home-route .site-header > .header-search { display: none; }
body.home-route .header-nav { justify-self: end; }
body.home-route .mobile-search { display: none; }

#app { width: min(1180px, calc(100% - 36px)); min-height: calc(100vh - 72px); margin: 0 auto; padding: 34px 0 80px; outline: none; }
.page-loading { display: flex; min-height: 48vh; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
.page-loading span { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.home { padding-top: 28px; }
.home-hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); min-height: 560px; overflow: hidden; border: 1px solid #d8cbbb; border-radius: 22px; background: #efe5d4; box-shadow: 0 24px 65px rgba(67, 50, 29, .1); }
.home-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 6vw, 72px); background: linear-gradient(140deg, #fffdf8 0%, #f8f1e6 100%); }
.eyebrow { margin-bottom: 16px; color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.home h1 { max-width: 560px; margin: 0; font: 700 clamp(44px, 5.3vw, 68px)/.96 Georgia, "Times New Roman", serif; letter-spacing: -.052em; }
.home-subtitle { max-width: 530px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.home-trust { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 27px; }
.home-trust span { padding: 7px 9px; border: 1px solid #ded3c5; border-radius: 999px; color: #625a4d; background: rgba(255,255,255,.58); font-size: 9px; font-weight: 750; }
.home-trust span::before { content: '✓'; margin-right: 5px; color: var(--good); font-weight: 900; }
.home-command-card { position: relative; display: grid; align-content: end; min-width: 0; padding: 26px; background: linear-gradient(155deg, #e7d5ba 0%, #cfa97d 100%); }
.home-art { position: absolute; inset: 8px 0 auto; height: 230px; overflow: hidden; pointer-events: none; }
.home-art-glow { position: absolute; width: 260px; height: 180px; left: 50%; top: 18px; transform: translateX(-50%); border-radius: 50%; background: rgba(255,247,222,.74); filter: blur(22px); }
.home-art img { position: absolute; z-index: 1; object-fit: contain; filter: drop-shadow(0 14px 13px rgba(60, 35, 14, .24)); }
.home-art-king { width: 174px; height: 192px; left: calc(50% - 84px); top: 4px; }
.home-art-dragon { width: 122px; height: 132px; left: calc(50% + 55px); top: 77px; transform: rotate(7deg); }
.home-art-spell { width: 88px; height: 88px; left: calc(50% - 152px); top: 103px; transform: rotate(-9deg); }
.home-search-content { position: relative; z-index: 2; padding: 24px; border: 1px solid rgba(112,77,38,.18); border-radius: 17px; background: rgba(255,253,248,.94); box-shadow: 0 18px 45px rgba(77, 45, 18, .16); backdrop-filter: blur(12px); }
.search-kicker { color: #9c603b; font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.home-search-content h2 { margin: 6px 0 5px; font: 700 25px Georgia, serif; }
.home-search-content > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.search-card { margin-top: 17px; }
.kind-switch { display: flex; gap: 4px; margin-bottom: 13px; padding: 4px; border-radius: 10px; background: var(--surface-2); }
.kind-switch button { flex: 1; min-height: 37px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.kind-switch button.active { color: #fffaf1; background: #76553c; box-shadow: 0 4px 12px rgba(84,56,36,.16); }
.home-tag-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.search-box { display: grid; grid-template-columns: minmax(0,1fr) auto; overflow: hidden; border: 1px solid #cdbda8; border-radius: 10px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }
.search-box:focus-within { border-color: #946f4d; box-shadow: 0 0 0 3px rgba(148,111,77,.12); }
.search-box input { min-width: 0; height: 52px; border: 0; outline: 0; padding: 0 14px; color: var(--ink); background: transparent; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.search-box input::placeholder { color: #aaa294; }
.search-box button { min-width: 112px; }
.search-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 9px; }
.search-hints > span { margin-right: 2px; font-weight: 750; }
.search-hints button { border: 1px solid #ded3c5; border-radius: 999px; padding: 5px 8px; color: #76553c; background: #faf5ed; cursor: pointer; font-size: 8px; font-weight: 750; }
.home-capabilities { padding: 62px 4px 10px; }
.feature-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.feature-heading span { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.feature-heading h2 { margin: 0; font: 700 27px Georgia, serif; letter-spacing: -.02em; }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 15px; min-height: 145px; padding: 24px 22px; border-right: 1px solid var(--line); }
.feature:last-child { border-right: 0; }
.feature-index { color: var(--gold); font: italic 17px Georgia, serif; }
.feature h3 { margin: 1px 0 7px; font-size: 14px; }
.feature p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

.entity-page { animation: fade .22s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } }
.entity-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.entity-badge { display: grid; width: 80px; height: 80px; place-items: center; border-radius: 15px; background: var(--surface-2); }
.entity-badge img { max-width: 74px; max-height: 74px; object-fit: contain; }
.entity-badge .fallback { color: var(--accent); font: 700 30px Georgia, serif; }
.entity-title { min-width: 0; }
.entity-title h1 { overflow: hidden; margin: 0 0 6px; font: 700 31px/1.05 Georgia, serif; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.entity-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 11px; }
.entity-meta a { color: var(--accent); font-weight: 700; text-decoration: none; }
.entity-score { min-width: 130px; text-align: right; }
.entity-score strong { display: block; font-size: 25px; }
.entity-score span { color: var(--muted); font-size: 10px; }
.entity-head-actions { display: flex; align-items: center; gap: 14px; }
.player-refresh { display: grid; justify-items: end; gap: 4px; }
.player-refresh button { min-height: 36px; border: 1px solid var(--accent); border-radius: 9px; padding: 0 13px; color: #fff; background: var(--accent); cursor: pointer; font-size: 10px; font-weight: 800; }
.player-refresh button:disabled { border-color: var(--line); color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
.player-refresh button.loading { opacity: .75; }
.player-refresh small { max-width: 210px; color: var(--muted); font-size: 9px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
.entity-nav { display: flex; gap: 5px; overflow-x: auto; margin: 15px 0 22px; padding-bottom: 2px; scrollbar-width: none; }
.entity-nav::-webkit-scrollbar { display: none; }
.entity-nav a { flex: 0 0 auto; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 750; }
.entity-nav a:hover { color: var(--ink); background: #f0eadf; }
.entity-nav a.active { color: #fff; border-color: #b65028; background: var(--accent); }

.section { margin-top: 14px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-head h2 { margin: 0; font-size: 16px; }
.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.section-actions { display: flex; gap: 7px; }
.small-button, .select-input { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; color: var(--ink); background: var(--surface); cursor: pointer; font-size: 10px; font-weight: 700; }
.small-button.primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.stat { min-width: 0; padding: 15px; border: 1px solid #e4ddd1; border-radius: 11px; background: #fbf8f1; }
.stat span { display: block; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stat strong { display: block; overflow: hidden; margin-top: 7px; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.stat small { display: block; margin-top: 3px; color: #9b9386; font-size: 9px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { padding: 13px 15px; border-left: 3px solid var(--gold); color: #655c4b; background: #f7efd9; font-size: 11px; line-height: 1.55; }
.description { margin: 0; color: #575248; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.labels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.label { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: #625d53; background: #fbf8f2; font-size: 10px; }

.army-page { display: grid; gap: 14px; }
.army-overview { display: grid; grid-template-columns: minmax(260px,1.25fr) auto minmax(300px,1fr); gap: 28px; align-items: center; padding: 26px 28px; border: 1px solid #d8cbbb; border-radius: 16px; background: linear-gradient(128deg, #fffdf7 0%, #f5ecdc 58%, #eadbc3 100%); box-shadow: var(--shadow); }
.army-intro { max-width: 430px; }
.army-eyebrow, .item-group-kicker { display: block; color: #9c603b; font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.army-intro h2 { margin: 7px 0 7px; font: 700 28px/1 Georgia, serif; letter-spacing: -.025em; }
.army-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.army-progress-ring { display: grid; width: 104px; height: 104px; padding: 8px; place-items: center; border-radius: 50%; background: conic-gradient(#9b7132 var(--army-progress), rgba(161, 130, 83, .18) 0); box-shadow: 0 9px 22px rgba(85, 61, 28, .12); }
.army-progress-ring > div { display: grid; width: 100%; height: 100%; place-content: center; border-radius: 50%; background: #fffaf0; text-align: center; }
.army-progress-ring strong { display: block; font-size: 21px; line-height: 1; }
.army-progress-ring span { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.army-quick-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.army-quick-stats > div { padding: 13px 12px; border: 1px solid rgba(130, 99, 58, .15); border-radius: 11px; background: rgba(255,253,248,.65); }
.army-quick-stats span { display: block; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.army-quick-stats strong { display: block; margin-top: 7px; font-size: 18px; }
.army-linear-progress { margin: 14px 0 17px; }
.army-linear-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.army-linear-meta strong { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.army-linear-track { overflow: hidden; height: 8px; border: 1px solid #d9cdbd; border-radius: 999px; background: #e9e1d5; }
.army-linear-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b6941 0%, #c69247 100%); }
.army-villages { display: grid; gap: 18px; }
.army-village { padding: 24px; border: 1px solid #d8cbbb; border-radius: 15px; background: #fffdf8; }
.army-village.builder-village { background: #f8f3e9; }
.army-village-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding-bottom: 4px; }
.army-village-head h2 { margin: 4px 0 0; font: 700 23px/1 Georgia, serif; letter-spacing: -.02em; }
.army-village-head > strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.village-level { display: grid; min-width: 58px; height: 58px; padding: 0 9px; place-items: center; border: 1px solid #bca47d; border-radius: 14px 14px 18px 18px; color: #fffaf1; background: linear-gradient(145deg, #9c7448, #684b31); box-shadow: inset 0 -5px rgba(51, 31, 15, .18), 0 8px 17px rgba(69, 45, 23, .13); font-family: Georgia, serif; font-size: 13px; font-weight: 800; white-space: nowrap; }
.builder-village .village-level { border-color: #998f74; background: linear-gradient(145deg, #77705b, #4f4a3d); }
.army-village > .army-linear-progress { margin-bottom: 28px; }
.army-collection { margin-top: 0; }
.army-collection-head { align-items: flex-end; }
.army-search { display: block; width: min(320px, 100%); }
.army-search span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.army-search input { width: 100%; height: 40px; border: 1px solid #d4c8b8; border-radius: 9px; outline: 0; padding: 0 12px; color: var(--ink); background: #fff; font-size: 11px; }
.army-search input:focus { border-color: #9f7b52; box-shadow: 0 0 0 3px rgba(159, 123, 82, .12); }
.army-toolbar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.army-toolbar::-webkit-scrollbar { display: none; }
.army-filter { flex: 0 0 auto; min-height: 34px; border: 1px solid #ded4c6; border-radius: 9px; padding: 0 12px; color: var(--muted); background: #fbf8f2; cursor: pointer; font-size: 9px; font-weight: 800; }
.army-filter:hover { color: var(--ink); border-color: #bfae98; }
.army-filter.active { color: #fffaf1; border-color: #76553c; background: #76553c; box-shadow: 0 4px 12px rgba(84, 56, 36, .16); }
.army-result-line { display: flex; justify-content: space-between; gap: 16px; margin: 11px 0 20px; color: var(--muted); font-size: 8px; }
.army-result-line span:first-child { color: var(--ink); font-weight: 800; }
.item-groups { display: grid; gap: 34px; }
.item-group + .item-group { padding-top: 26px; border-top: 1px solid #e7dfd2; }
.item-group-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 13px; }
.item-group-title h3 { margin: 4px 0 0; font: 700 18px Georgia, serif; letter-spacing: -.015em; }
.item-group-metrics { display: flex; align-items: flex-end; flex-direction: column; gap: 3px; }
.item-group-metrics strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.item-group-metrics span { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 750; }
.item-group > .army-linear-progress { margin-top: -4px; }
.unit-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.unit-card { position: relative; overflow: hidden; min-width: 0; border: 1px solid #ddd3c4; border-radius: 13px; background: #fbf8f2; box-shadow: 0 4px 14px rgba(72, 56, 32, .04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.unit-card:hover { transform: translateY(-2px); border-color: #c7b69d; box-shadow: 0 9px 24px rgba(72, 56, 32, .1); }
.unit-card.maxed { border-color: #c6aa68; background: #fffaf0; }
.unit-art { position: relative; display: grid; height: 112px; place-items: end center; overflow: hidden; background: radial-gradient(circle at 50% 70%, #fff 0, #f0e9dd 55%, #e6dccd 100%); }
.unit-art.spells { background: radial-gradient(circle at 50% 65%, #fff9ee 0, #efe2cd 58%, #dfcfb6 100%); }
.unit-art.equipment { background: radial-gradient(circle at 50% 65%, #fdfaf2 0, #e8e0d2 58%, #d7caba 100%); }
.unit-art.heroes { background: radial-gradient(circle at 50% 66%, #fff8e9 0, #eadcc5 58%, #d6c3a6 100%); }
.unit-art img { position: relative; z-index: 1; width: 100px; height: 104px; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(47, 34, 17, .22)); transition: transform .18s ease; }
.unit-card:hover .unit-art img { transform: scale(1.045); }
.unit-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #b4a58f; font: 700 34px Georgia, serif; }
.unit-card-body { padding: 12px 13px 13px; }
.unit-name { overflow: hidden; min-height: 30px; font-size: 11px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; }
.unit-level { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 9px; }
.unit-level strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.unit-level span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.unit-max-badge { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 4px 6px; border: 1px solid rgba(106, 78, 25, .18); border-radius: 999px; color: #6a521e; background: rgba(255, 247, 215, .9); box-shadow: 0 3px 10px rgba(75, 54, 17, .1); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.progress { overflow: hidden; height: 4px; margin-top: 8px; border-radius: 3px; background: #e5ded2; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--olive); }
.unit-note { overflow: hidden; margin-top: 8px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 11px; }
th { padding: 11px 12px; color: var(--muted); background: #f4efe5; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 12px; border-top: 1px solid #eee8dc; vertical-align: middle; }
tbody tr:hover { background: #fffcf7; }
.number { text-align: right; font-variant-numeric: tabular-nums; }
.name-cell { display: flex; min-width: 150px; align-items: center; gap: 9px; }
.name-cell img { width: 30px; height: 30px; object-fit: contain; }
.name-cell strong, .name-cell span { display: block; }
.name-cell span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.name-cell a { text-decoration: none; }
.result { display: inline-flex; min-width: 52px; justify-content: center; padding: 4px 6px; border-radius: 6px; font-size: 9px; font-weight: 800; }
.result.win { color: var(--good); background: #e3f0e7; }
.result.loss { color: var(--bad); background: #f6e1de; }
.result.tie { color: #7a672f; background: #f3ead0; }
.stars { color: var(--gold); font-weight: 800; }

.achievement-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.achievement { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fcf9f3; }
.achievement-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.achievement h3 { overflow: hidden; margin: 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.achievement-stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.achievement p { min-height: 30px; margin: 8px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.achievement-value { font-size: 10px; font-weight: 750; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-button { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 9px; font-weight: 750; }
.filter-button.active { border-color: #9e7d54; color: var(--ink); background: #efe3d3; }
.round-list { display: grid; gap: 8px; }
.round-card { display: grid; grid-template-columns: 54px minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fcf9f3; }
.round-no { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.round-clan { min-width: 0; }
.round-clan strong, .round-clan span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-clan strong { font-size: 11px; }
.round-clan span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.round-score { min-width: 100px; text-align: center; font-size: 13px; font-weight: 850; }
.round-score span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 600; }
.round-card .round-clan:last-child { text-align: right; }

.raid-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.raid-card { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fcf9f3; }
.raid-card h3 { margin: 0; font-size: 12px; }
.raid-card time { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.raid-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 13px; }
.raid-stats span { color: var(--muted); font-size: 8px; }
.raid-stats strong { display: block; margin-top: 3px; color: var(--ink); font-size: 13px; }

.raw-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
pre.raw { max-height: 720px; overflow: auto; margin: 0; padding: 17px; border: 1px solid #3f3c35; border-radius: 10px; color: #e9e5dc; background: #292824; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.empty, .error { padding: 34px 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }
.error { border-style: solid; border-color: #e2bab5; color: var(--bad); background: #fbefed; }

.explore-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 14px; }
.explore-menu, .explore-content { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.explore-menu h1 { margin: 0 0 13px; font: 700 23px Georgia, serif; }
.explore-menu button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 8px 9px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; font-size: 10px; }
.explore-menu button.active { color: var(--ink); background: #eee5d8; }
.explore-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.explore-form label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.explore-form input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 8px; outline: 0; padding: 0 10px; color: var(--ink); background: #fff; }
.explore-form button { grid-column: 1 / -1; min-height: 42px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); cursor: pointer; font-weight: 800; }
.explore-result { margin-top: 15px; }
.rankings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.ranking-card { padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.ranking-card h2 { margin: 0 0 8px; font-size: 15px; }
.ranking-card p { min-height: 38px; margin: 0 0 15px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ranking-card form { display: flex; gap: 7px; }
.ranking-card input { min-width: 0; flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; }
.ranking-card button { border: 0; border-radius: 8px; padding: 0 13px; color: #fff; background: var(--accent); font-size: 10px; font-weight: 800; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; transform: translateY(15px); padding: 11px 14px; border: 1px solid #b6a995; border-radius: 9px; color: #fff; background: #39362f; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .18s ease; font-size: 11px; }
.toast.visible { transform: translateY(0); opacity: 1; }

.vt-equipment-tabs{display:flex;gap:22px;overflow-x:auto;margin:4px 0 12px;border-bottom:1px solid var(--line)}
.vt-equipment-tabs button{min-height:42px;border:0;border-bottom:3px solid transparent;padding:0 3px;color:var(--muted);background:transparent;cursor:pointer;font-weight:800;white-space:nowrap}.vt-equipment-tabs button.active{border-color:var(--gold);color:var(--ink)}
.vt-ore-matrix{display:grid;grid-template-columns:minmax(90px,1fr) repeat(3,minmax(80px,1fr));margin:0 0 20px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.vt-ore-matrix>*{padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px}.vt-ore-matrix b{color:var(--muted);font-size:9px;text-transform:uppercase}.vt-ore-matrix span{text-align:right}.vt-ore-matrix>*:nth-last-child(-n+4){border-bottom:0}
.vt-ore-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0}.vt-ore-inputs label,.vt-single-select{display:grid;gap:5px;color:var(--muted);font-size:10px}.vt-ore-inputs input,.vt-single-select select{min-height:39px;border:1px solid var(--line);border-radius:8px;padding:8px;color:var(--ink);background:var(--surface)}

@media (max-width: 1000px) {
  .site-header { grid-template-columns: auto minmax(280px, 1fr); }
  .header-nav { display: none; }
  .unit-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(3,1fr); }
  .army-overview { grid-template-columns: minmax(240px,1fr) auto; }
  .army-quick-stats { grid-column: 1 / -1; }
  .home-hero { grid-template-columns: 1fr 1fr; }
  .home-copy { padding: 44px; }
}

@media (max-width: 720px) {
  .vt-ore-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-eq-card{grid-template-columns:44px 1fr}.vt-eq-card img{width:44px;height:44px}
  .site-header { grid-template-columns: 1fr auto; min-height: 64px; padding: 10px 14px; }
  .header-search { display: none; }
  .mobile-search-button { display: block; }
  .mobile-search .header-search { display: grid; }
  body.home-route .mobile-search-button { display: none; }
  #app { width: calc(100% - 22px); padding-top: 20px; }
  .home { padding-top: 0; }
  .home-hero { grid-template-columns: 1fr; }
  .home-copy { padding: 42px 30px; }
  .home h1 { font-size: 48px; }
  .home-command-card { min-height: 530px; }
  .home-capabilities { padding-top: 44px; }
  .feature-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .feature-row { grid-template-columns: 1fr; }
  .feature { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .feature:last-child { border-bottom: 0; }
  .entity-head { grid-template-columns: auto minmax(0,1fr); padding: 16px; }
  .entity-badge { width: 62px; height: 62px; }
  .entity-badge img { max-width: 58px; max-height: 58px; }
  .entity-score { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .entity-head-actions { grid-column: 1 / -1; justify-content: space-between; }
  .entity-head-actions .entity-score { grid-column: auto; }
  .entity-score strong { font-size: 19px; }
  .army-overview { grid-template-columns: 1fr auto; gap: 18px; padding: 21px; }
  .army-quick-stats { grid-column: 1 / -1; }
  .army-progress-ring { width: 88px; height: 88px; }
  .army-collection-head { align-items: stretch; }
  .army-search { width: 100%; }
  .army-village { padding: 19px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .unit-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .split, .raid-grid, .rankings-grid { grid-template-columns: 1fr; }
  .achievement-list { grid-template-columns: 1fr; }
  .round-card { grid-template-columns: 38px minmax(0,1fr) auto; }
  .round-card .round-clan:last-child { grid-column: 2 / -1; padding-top: 8px; border-top: 1px solid var(--line); text-align: left; }
  .explore-layout { grid-template-columns: 1fr; }
  .explore-menu { max-height: 230px; overflow: auto; }
}

@media (max-width: 440px) {
  .brand span:last-child { font-size: 15px; }
  .header-search { grid-template-columns: 82px minmax(0,1fr) auto; }
  .header-search button { padding-inline: 12px; }
  .home h1 { font-size: 41px; }
  .home-subtitle { font-size: 14px; }
  .home-copy { padding: 34px 23px; }
  .home-command-card { min-height: 510px; padding: 14px; }
  .home-search-content { padding: 18px; }
  .home-art { height: 220px; }
  .search-box { grid-template-columns: 1fr; }
  .search-box button { min-height: 45px; }
  .section { padding: 15px; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .army-overview { grid-template-columns: 1fr; }
  .army-progress-ring { grid-row: 2; width: 96px; height: 96px; }
  .army-quick-stats { grid-column: auto; grid-template-columns: repeat(3,1fr); width: 100%; }
  .army-quick-stats > div { padding: 11px 8px; }
  .army-result-line span:last-child { display: none; }
  .army-village { padding: 15px; }
  .army-village-head { grid-template-columns: auto minmax(0,1fr); }
  .army-village-head > strong { grid-column: 1 / -1; padding-top: 11px; border-top: 1px solid var(--line); font-size: 17px; }
  .village-level { min-width: 52px; height: 52px; }
  .unit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .unit-art { height: 102px; }
  .unit-art img { width: 88px; height: 95px; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .explore-form { grid-template-columns: 1fr; }
}

/* Calculator Styles */
.calculator-hero { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 20px; }
.calculator-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.calculator-head h2 { margin: 4px 0 6px; font-size: 22px; font-weight: 800; font-family: Georgia, serif; }
.calculator-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.calculator-th-badge { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 10px 16px; border: 1px solid #dcd1be; border-radius: 10px; background: var(--surface-2); min-width: 140px; }
.calculator-th-badge span { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.calculator-th-badge strong { font-size: 20px; font-weight: 900; color: var(--accent); }

.calculator-controls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.control-group { display: flex; flex-direction: column; gap: 6px; }
.control-group label { font-size: 11px; font-weight: 750; color: var(--muted); }
.control-group select { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; color: var(--ink); font-weight: 600; outline: none; transition: border-color 0.15s; }
.control-group select:focus { border-color: var(--accent); }

.calc-summary-banner { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid #e2d7c5; border-radius: 12px; background: linear-gradient(135deg, #fbf7ef 0%, #f4eee2 100%); margin-bottom: 20px; }
.calc-banner-info h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 800; }
.calc-banner-info p { margin: 0; color: var(--muted); font-size: 12px; }

.calc-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.calc-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.calc-card-icon { display: grid; width: 44px; height: 44px; place-items: center; font-size: 22px; border-radius: 10px; background: var(--surface-2); flex-shrink: 0; }
.calc-card-body { display: flex; flex-direction: column; gap: 2px; }
.calc-card-body span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.calc-card-body strong { font-size: 20px; font-weight: 850; color: var(--ink); }
.calc-card-body small { font-size: 11px; color: var(--muted); }

.card-gold { border-left: 4px solid var(--gold); }
.card-elixir { border-left: 4px solid #a855f7; }
.card-dark { border-left: 4px solid #334155; }
.card-ores { border-left: 4px solid #06b6d4; }
.card-builder-time { border-left: 4px solid var(--accent); }
.card-lab-time { border-left: 4px solid var(--good); }

.badge-needed { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 11px; }

@media (max-width: 850px) {
  .calculator-controls-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 550px) {
  .calculator-controls-grid { grid-template-columns: 1fr; }
  .calc-cards-grid { grid-template-columns: 1fr; }
  .calculator-head { flex-direction: column; }
  .calculator-th-badge { width: 100%; align-items: flex-start; }
}

/* Favorites UI Styles */
.fav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.fav-toggle-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: #fbf6ec;
}
.fav-toggle-btn.is-fav {
  border-color: #dcb356;
  background: #fdf6e7;
  color: #a17416;
}

.home-favorites-section {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e5dccf;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.95);
}
.fav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.fav-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.fav-count {
  font-size: 10px;
  color: var(--muted);
}
.fav-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fav-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: border-color 0.15s;
}
.fav-chip:hover {
  border-color: var(--gold);
}
.fav-chip-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  text-decoration: none;
}
.fav-chip-star {
  color: #dcb356;
  font-size: 13px;
}
.fav-chip-info {
  display: flex;
  flex-direction: column;
}
.fav-chip-info strong {
  font-size: 11px;
  font-weight: 750;
  color: var(--ink);
}
.fav-chip-info small {
  font-size: 9px;
  color: var(--muted);
}
.fav-chip-remove {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  border-left: 1px solid var(--line);
  border-radius: 0 9px 9px 0;
}
.fav-chip-remove:hover {
  color: var(--bad);
  background: #fdf2f1;
}

/* Defense Slider & Presets Styles */
.control-group-wide { grid-column: 1 / -1; }
.def-preset-buttons { display: flex; gap: 8px; margin: 6px 0 8px 0; flex-wrap: wrap; }
.def-btn {
  flex: 1;
  min-width: 80px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}
.def-btn:hover { border-color: var(--accent); color: var(--ink); }
.def-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.def-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Detailed Defense Building Editor Styles */
.def-details-accordion {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.def-details-accordion summary {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 750;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.def-details-accordion summary:hover {
  color: var(--ink);
}
.def-buildings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.def-building-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.def-building-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}
.def-building-card select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11px;
  background: #fff;
}

@media (max-width: 800px) {
  .def-buildings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .def-buildings-grid { grid-template-columns: 1fr; }
}

/* ─── CWL bonus draw · warm war-room direction ─────────────────────────── */
.cwl-raffle-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 24px;
  overflow: hidden;
  padding: 34px;
  border: 1px solid #c9ad83;
  border-radius: 18px;
  color: #38261a;
  background:
    radial-gradient(circle at 9% 8%, rgba(255,255,255,.82) 0 7%, transparent 28%),
    linear-gradient(125deg, #f8eedb 0%, #ead5ae 52%, #d4ad72 100%);
  box-shadow: 0 18px 45px rgba(83, 55, 26, .12);
}
.cwl-raffle-hero::before {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(112, 72, 34, .19);
  border-radius: 12px;
  content: '';
  pointer-events: none;
}
.cwl-raffle-copy, .cwl-raffle-machine { position: relative; z-index: 1; }
.cwl-raffle-kicker {
  display: block;
  margin-bottom: 12px;
  color: #8a5028;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
}
.cwl-raffle-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #332117;
  font: 700 clamp(34px, 4.8vw, 58px)/.98 Georgia, serif;
  letter-spacing: -.045em;
}
.cwl-raffle-copy p {
  max-width: 630px;
  margin: 19px 0 23px;
  color: #69513d;
  font-size: 13px;
  line-height: 1.7;
}
.cwl-raffle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cwl-raffle-meta span, .cwl-raffle-meta strong {
  padding: 8px 11px;
  border: 1px solid rgba(103, 62, 26, .2);
  border-radius: 999px;
  color: #65452e;
  background: rgba(255, 250, 238, .54);
  font-size: 10px;
}
.cwl-raffle-meta strong { color: #fff8ea; border-color: #8d512c; background: #8d512c; }
.cwl-raffle-machine {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
  padding: 20px;
  border: 1px solid rgba(78, 46, 21, .34);
  border-radius: 16px;
  background: rgba(255, 250, 240, .72);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 13px 35px rgba(75, 45, 19, .11);
}
.cwl-raffle-stage {
  display: grid;
  min-height: 105px;
  place-content: center;
  padding: 18px;
  border: 1px solid #c7a877;
  border-radius: 11px;
  text-align: center;
  background: repeating-linear-gradient(135deg, #fffaf0, #fffaf0 9px, #fbf0dc 9px, #fbf0dc 18px);
}
.cwl-raffle-stage span { color: #96633a; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.cwl-raffle-stage strong { display: block; margin-top: 9px; color: #3b291e; font: 700 19px Georgia, serif; }
.cwl-draw-button {
  display: grid;
  width: 100%;
  min-height: 62px;
  margin-top: 11px;
  place-content: center;
  border: 1px solid #713b21;
  border-radius: 11px;
  color: #fff9ee;
  background: linear-gradient(180deg, #a76036, #7b4024);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 7px 17px rgba(84,44,23,.2);
  cursor: pointer;
}
.cwl-draw-button span { font-size: 13px; font-weight: 900; }
.cwl-draw-button small { margin-top: 4px; color: #efd7c1; font-size: 9px; }
.cwl-draw-button:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(180deg, #b46b3d, #824326); }
.cwl-draw-button:disabled { color: #8a7562; border-color: #cbbbA5; background: #e7ddcf; box-shadow: none; cursor: not-allowed; }
.cwl-draw-button:disabled small { color: #9a8978; }
.cwl-draw-button.is-drawing { animation: cwl-draw-pulse .65s ease-in-out infinite alternate; }
.cwl-raffle-machine > p { margin: 10px 0 0; color: #7c6754; font-size: 9px; text-align: center; }
@keyframes cwl-draw-pulse { to { filter: brightness(1.16); transform: scale(.99); } }
.cwl-draw-locked {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 11px;
  padding: 13px;
  border: 1px solid #bca679;
  border-radius: 11px;
  background: #f1e5c9;
}
.cwl-draw-locked > span { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff8e9; background: #766139; }
.cwl-draw-locked strong, .cwl-draw-locked small { display: block; }
.cwl-draw-locked strong { color: #47351f; font-size: 11px; }
.cwl-draw-locked small { margin-top: 3px; color: #786952; font-size: 9px; }
.cwl-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.cwl-rule-card {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  min-height: 105px;
  padding: 15px;
  border: 1px solid #ddcfbc;
  border-radius: 12px;
  background: #fbf5eb;
}
.cwl-rule-card.weight-3 { border-color: #c69f5c; background: linear-gradient(140deg, #fff8e7, #f3e2ba); }
.cwl-rule-card.weight-2 { border-color: #bbb5a8; background: linear-gradient(140deg, #fbfaf7, #e9e5dc); }
.cwl-ticket-stack { position: relative; display: block; width: 48px; height: 58px; }
.cwl-ticket-stack i { position: absolute; display: block; width: 34px; height: 47px; border: 1px solid #a56b38; border-radius: 5px; background: #f4d9a3; box-shadow: 0 4px 8px rgba(87,51,22,.12); transform: rotate(-8deg); }
.cwl-ticket-stack i:nth-child(2) { left: 7px; transform: rotate(2deg); background: #f8e7c3; }
.cwl-ticket-stack i:nth-child(3) { left: 14px; transform: rotate(9deg); background: #fff3d9; }
.cwl-rule-card strong, .cwl-rule-card b, .cwl-rule-card small { display: block; }
.cwl-rule-card strong { color: #8a4d27; font: 700 17px Georgia, serif; }
.cwl-rule-card b { margin-top: 5px; color: #3f3328; font-size: 11px; }
.cwl-rule-card small { margin-top: 3px; color: #7c6e5e; font-size: 9px; }
.cwl-once-note { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; padding: 12px 14px; border-left: 3px solid #916037; color: #6d5947; background: #f7efe1; font-size: 10px; }
.cwl-once-note strong { flex: 0 0 auto; color: #493424; }
.cwl-weight-pill, .cwl-picked { display: inline-flex; min-width: 36px; min-height: 25px; align-items: center; justify-content: center; border-radius: 999px; font-size: 10px; font-weight: 900; }
.cwl-weight-pill.weight-1 { color: #635d53; background: #ece8e0; }
.cwl-weight-pill.weight-2 { color: #54514c; border: 1px solid #c5beb0; background: #f5f2eb; }
.cwl-weight-pill.weight-3 { color: #764716; border: 1px solid #d1ad6b; background: #f8e6bd; }
.cwl-picked { color: #fff9ea; background: #80622c; }
.cwl-winner-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.cwl-winner-card {
  display: grid;
  grid-template-columns: 30px 38px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d4ba86;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0, #f2e2bf);
}
.cwl-winner-card.is-fresh { opacity: 0; animation: cwl-winner-in .42s calc(var(--reveal-order) * 110ms) ease-out forwards; }
@keyframes cwl-winner-in { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
.cwl-winner-order { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #856033; border: 1px solid #c9ad79; font: 700 12px Georgia, serif; }
.cwl-winner-crown { color: #a56b18; font-size: 25px; text-align: center; }
.cwl-winner-card strong, .cwl-winner-card small, .cwl-winner-score b, .cwl-winner-score span { display: block; }
.cwl-winner-card strong { color: #33271d; font-size: 12px; }
.cwl-winner-card small { margin-top: 3px; color: #827462; font-size: 9px; }
.cwl-winner-score { text-align: right; }
.cwl-winner-score b { color: #744317; font: 700 15px Georgia, serif; }
.cwl-winner-score span { margin-top: 4px; color: #7b6d5b; font-size: 9px; }

/* CWL bonus readability: keep the public draw and its supporting data legible
   at wide resolutions without changing the rest of the site scale. */
.cwl-bonus-page .cwl-raffle-kicker { font-size: 12px; }
.cwl-bonus-page .cwl-raffle-copy p { font-size: 16px; }
.cwl-bonus-page .cwl-raffle-meta span,
.cwl-bonus-page .cwl-raffle-meta strong { font-size: 14px; }
.cwl-bonus-page .cwl-raffle-stage span { font-size: 12px; }
.cwl-bonus-page .cwl-raffle-stage strong { font-size: 24px; }
.cwl-bonus-page .cwl-draw-button span { font-size: 16px; }
.cwl-bonus-page .cwl-draw-button small { font-size: 12px; }
.cwl-bonus-page .cwl-winner-card strong { font-size: 22px; }
.cwl-bonus-page .cwl-winner-card small { font-size: 14px; }
.cwl-bonus-page .cwl-winner-score b { font-size: 22px; }
.cwl-bonus-page .cwl-winner-score span { font-size: 14px; }
.cwl-bonus-page .cwl-admin-summary { font-size: 14px; }
.cwl-bonus-page .cwl-admin-toggle { font-size: 14px; }
.cwl-bonus-page .cwl-admin-form select,
.cwl-bonus-page .cwl-admin-form button { min-height: 44px; font-size: 14px; }
.cwl-bonus-page .cwl-admin-in,
.cwl-bonus-page .cwl-admin-out,
.cwl-bonus-page .cwl-admin-auto-out { font-size: 12px; }
.cwl-bonus-page .cwl-weight-pill,
.cwl-bonus-page .cwl-picked { font-size: 14px; }
.cwl-bonus-page .cwl-once-note { font-size: 14px; }
.cwl-bonus-page .cwl-rule-card b { font-size: 14px; }
.cwl-bonus-page .cwl-rule-card small { font-size: 12px; }
.cwl-bonus-page .section-head h2 { font-size: 20px; }
.cwl-bonus-page .section-head p { font-size: 14px; }
.cwl-bonus-page .table-wrap table { font-size: 14px; }
.cwl-bonus-page .table-wrap th { font-size: 12px; }
.cwl-bonus-page .table-wrap td { padding: 13px 12px; }
.cwl-bonus-page .table-wrap .name-cell strong { font-size: 16px; }
.cwl-bonus-page .name-cell span { font-size: 12px; }
.cwl-bonus-page .cwl-demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cwl-bonus-page .cwl-demo-actions .small-button { min-height: 44px; font-size: 14px; }
.cwl-bonus-page .cwl-demo-clan-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.cwl-bonus-page .cwl-demo-clan-choices a { display: grid; min-width: 220px; min-height: 64px; align-content: center; gap: 5px; text-decoration: none; }
.cwl-bonus-page .cwl-demo-clan-choices strong { font-size: 18px; }
.cwl-bonus-page .cwl-demo-clan-choices span { color: var(--muted); font-size: 14px; }

@media (max-width: 820px) {
  .cwl-bonus-page .cwl-winner-card strong { font-size: 20px; }
  .cwl-bonus-page .cwl-winner-score b { font-size: 20px; }
}

@media (max-width: 500px) {
  .cwl-bonus-page .cwl-raffle-copy p { font-size: 14px; }
  .cwl-bonus-page .cwl-raffle-meta span,
  .cwl-bonus-page .cwl-raffle-meta strong { font-size: 12px; }
  .cwl-bonus-page .cwl-raffle-stage strong { font-size: 20px; }
  .cwl-bonus-page .cwl-winner-card strong { font-size: 18px; }
  .cwl-bonus-page .cwl-winner-card small { font-size: 12px; }
  .cwl-bonus-page .cwl-winner-score b { font-size: 18px; }
  .cwl-bonus-page .cwl-winner-score span { font-size: 14px; }
  .cwl-bonus-page .table-wrap .name-cell strong { font-size: 16px; }
  .cwl-bonus-page .cwl-admin-form { min-width: 0; width: 100%; flex-wrap: wrap; }
  .cwl-bonus-page .cwl-admin-form select,
  .cwl-bonus-page .cwl-admin-form button { flex: 1 1 140px; }
  .cwl-bonus-page .cwl-rule-card b { font-size: 16px; }
  .cwl-bonus-page .cwl-rule-card small { font-size: 14px; }
  .cwl-bonus-page .table-wrap table { min-width: 680px; }
}

@media (max-width: 820px) {
  .cwl-raffle-hero { grid-template-columns: 1fr; padding: 25px; }
  .cwl-rule-grid { grid-template-columns: 1fr; }
  .cwl-winner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .cwl-raffle-hero { padding: 19px; }
  .cwl-raffle-copy h2 { font-size: 38px; }
  .cwl-raffle-machine { min-height: 235px; padding: 13px; }
  .cwl-once-note { align-items: flex-start; flex-direction: column; }
  .cwl-winner-card { grid-template-columns: 28px 32px minmax(0,1fr); }
  .cwl-winner-score { grid-column: 3; text-align: left; }
}

/* Split Level Building Editor Styles */
.def-building-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.def-building-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.def-building-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}
.btn-add-split {
  border: 1px dashed var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.btn-add-split:hover {
  background: var(--accent-soft);
}
.def-building-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.def-b-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.def-b-row select {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px;
  background: #fff;
}
.def-b-count { width: 85px; }
.def-b-level { flex: 1; }
.btn-remove-row {
  border: 0;
  background: transparent;
  color: var(--bad);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 5px;
}

/* Clean Building Card UI */
.def-buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 14px;
}

.def-building-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.def-building-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #efe8db;
}

.def-building-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b-icon {
  font-size: 16px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  flex-shrink: 0;
}

.b-name-group {
  display: flex;
  flex-direction: column;
}

.b-name-group strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}

.b-name-group small {
  font-size: 10px;
  color: var(--muted);
}

.btn-add-split {
  border: 1px dashed var(--line);
  background: var(--paper);
  color: var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-add-split:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.def-building-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.def-b-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.row-arrow {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
}

.def-b-count {
  flex: 0 0 82px !important;
  width: 82px !important;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.def-b-level {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.btn-remove-row {
  flex-shrink: 0;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: #fdf2f1;
  color: var(--bad);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-remove-row:hover {
  background: #f8dbd7;
}


/* ─── Klanlarım Vitrin Sayfası ────────────────────────────────────────────── */

.mc-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.mc-hero-UNUSED {
  text-align: center;
  margin-bottom: 40px;
}

.mc-kicker-UNUSED {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 10px;
}

.mc-title {
  font: 700 42px/1.1 Georgia, 'Times New Roman', serif;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.mc-subtitle-UNUSED {
  font-size: 15px;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
}

.mc-clan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-clan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.mc-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.mc-badge-wrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8f4ec 0%, #efe8d8 100%);
  border-radius: 16px;
  border: 1px solid #e5dccf;
}

.mc-badge-wrap img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.mc-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mc-clan-name {
  font: 750 22px/1.2 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.3px;
}

.mc-clan-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.mc-level-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent);
  margin-top: 2px;
}

.mc-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  border-left: 3px solid var(--line);
}

.mc-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.mc-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.mc-label img {
  width: 16px;
  height: 16px;
}

.mc-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.mc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
}

.mc-stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.mc-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mc-actions-UNUSED {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mc-btn-UNUSED {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  flex: 1;
  justify-content: center;
  min-width: 120px;
}

.mc-btn-primary-UNUSED {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.mc-btn-primary-UNUSED:hover {
  background: #2a2520;
  transform: translateY(-1px);
}

.mc-btn-secondary-UNUSED {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.mc-btn-secondary-UNUSED:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.mc-btn-invite-UNUSED {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.mc-btn-invite-UNUSED:hover {
  background: #c8e6c9;
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .mc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .mc-title {
    font-size: 30px;
  }

  .mc-clan-card {
    padding: 20px;
  }

  .mc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mc-actions-UNUSED {
    flex-direction: column;
  }

  .mc-btn-UNUSED {
    min-width: unset;
  }

  .mc-badge-wrap {
    width: 64px;
    height: 64px;
  }

  .mc-badge-wrap img {
    width: 48px;
    height: 48px;
  }

  .mc-clan-name {
    font-size: 18px;
  }
}










/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL DARK THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Site Header ─────────────────────────────────────────────────────────── */
.site-header {
  background: rgba(9, 10, 15, 0.85) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
}

.site-header .logo {
  color: #ffffff !important;
}

.header-nav a {
  color: #a1a1aa !important;
}

.header-nav a:hover {
  color: #ffffff !important;
}

.header-nav a.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.mobile-search input,
.mobile-search button {
  background: #171922 !important;
  color: #ededed !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.mobile-search input::placeholder {
  color: #52525b !important;
}

/* ─── Entity Head (Player / Clan Profile Header) ──────────────────────────── */
.entity-head {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.entity-badge {
  background: #1a1d26 !important;
}

.entity-title h1 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.entity-meta {
  color: #71717a !important;
}

.entity-meta a {
  color: #60a5fa !important;
}

.entity-score strong {
  color: #e4e4e7 !important;
}

.entity-score span {
  color: #71717a !important;
}

/* ─── Entity Navigation Tabs ──────────────────────────────────────────────── */
.entity-nav a {
  color: #71717a !important;
  border-color: transparent !important;
}

.entity-nav a:hover {
  color: #d4d4d8 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.entity-nav a.active {
  color: #ffffff !important;
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

/* ─── Sections ────────────────────────────────────────────────────────────── */
.section {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.section-head h2 {
  color: #e4e4e7 !important;
}

.section-head p {
  color: #71717a !important;
}

/* ─── Stat Cards ──────────────────────────────────────────────────────────── */
.stat {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.stat span {
  color: #71717a !important;
}

.stat strong {
  color: #e4e4e7 !important;
}

.stat small {
  color: #52525b !important;
}

/* ─── Tables (Global) ─────────────────────────────────────────────────────── */
.table-wrap {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

table {
  background: #111318 !important;
  color: #ededed !important;
}

th {
  background: #151720 !important;
  color: #71717a !important;
}

td {
  border-top-color: rgba(255, 255, 255, 0.04) !important;
  color: #ededed !important;
}

tbody tr:hover {
  background: #1a1d26 !important;
}

.name-cell a {
  color: #e4e4e7 !important;
}

.name-cell a:hover strong {
  color: #60a5fa !important;
}

.name-cell span {
  color: #52525b !important;
}

.stars {
  color: #fbbf24 !important;
}

.result.win {
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.12) !important;
}

.result.loss {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
}

.result.tie {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.12) !important;
}

/* ─── Notes, Descriptions, Labels ─────────────────────────────────────────── */
.note {
  color: #d4d4d8 !important;
  background: rgba(251, 191, 36, 0.08) !important;
  border-left-color: #fbbf24 !important;
}

.description {
  color: #a1a1aa !important;
}

.label {
  color: #a1a1aa !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.empty, .error {
  color: #52525b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Split Panels ────────────────────────────────────────────────────────── */
.split .section {
  background: #111318 !important;
}

/* ─── Buttons & Inputs ────────────────────────────────────────────────────── */
.small-button, .select-input {
  background: #171922 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #d4d4d8 !important;
}

.small-button.primary {
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60a5fa !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TROOPS / ARMY PAGE DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Army Overview Panel ─────────────────────────────────────────────────── */
.army-overview {
  background: linear-gradient(128deg, #111318 0%, #151720 58%, #1a1d26 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.army-eyebrow, .item-group-kicker {
  color: #60a5fa !important;
}

.army-intro h2 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.army-intro p {
  color: #71717a !important;
}

/* ─── Progress Ring ───────────────────────────────────────────────────────── */
.army-progress-ring {
  background: conic-gradient(#60a5fa var(--army-progress), rgba(96, 165, 250, 0.12) 0) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.25) !important;
}

.army-progress-ring > div {
  background: #111318 !important;
}

.army-progress-ring strong {
  color: #ffffff !important;
}

.army-progress-ring span {
  color: #71717a !important;
}

/* ─── Quick Stats ─────────────────────────────────────────────────────────── */
.army-quick-stats > div {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.army-quick-stats span {
  color: #71717a !important;
}

.army-quick-stats strong {
  color: #e4e4e7 !important;
}

/* ─── Progress Bar ────────────────────────────────────────────────────────── */
.army-linear-meta {
  color: #71717a !important;
}

.army-linear-meta strong {
  color: #e4e4e7 !important;
}

.army-linear-track {
  background: #1a1d26 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.army-linear-track i {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%) !important;
}

.progress {
  background: #1a1d26 !important;
}

.progress i {
  background: #34d399 !important;
}

/* ─── Village Panels ──────────────────────────────────────────────────────── */
.army-village {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.army-village.builder-village {
  background: #111318 !important;
}

.army-village-head h2 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.army-village-head > strong {
  color: #e4e4e7 !important;
}

.village-level {
  background: linear-gradient(145deg, #1a1d26, #272935) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: inset 0 -5px rgba(0, 0, 0, 0.2), 0 8px 17px rgba(0, 0, 0, 0.2) !important;
}

.builder-village .village-level {
  background: linear-gradient(145deg, #1e2030, #2a2d3d) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ─── Item Group Titles ───────────────────────────────────────────────────── */
.item-group + .item-group {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.item-group-title h3 {
  color: #e4e4e7 !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 650 !important;
}

.item-group-metrics strong {
  color: #e4e4e7 !important;
}

.item-group-metrics span {
  color: #71717a !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ─── Collection Head ─────────────────────────────────────────────────────── */
.army-collection .section-head h2 {
  color: #e4e4e7 !important;
}

.army-collection .section-head p {
  color: #71717a !important;
}

/* ─── Army Search ─────────────────────────────────────────────────────────── */
.army-search span {
  color: #71717a !important;
}

.army-search input {
  background: #171922 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ededed !important;
}

.army-search input::placeholder {
  color: #52525b !important;
}

.army-search input:focus {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

/* ─── Army Filter Toolbar ─────────────────────────────────────────────────── */
.army-filter {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #71717a !important;
}

.army-filter:hover {
  color: #d4d4d8 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.army-filter.active {
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60a5fa !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1) !important;
}

/* ─── Result Line ─────────────────────────────────────────────────────────── */
.army-result-line {
  color: #52525b !important;
}

.army-result-line span:first-child {
  color: #d4d4d8 !important;
}

/* ─── Unit Cards ──────────────────────────────────────────────────────────── */
.unit-card {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.unit-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.25) !important;
}

.unit-card.maxed {
  border-color: rgba(251, 191, 36, 0.25) !important;
  background: #171922 !important;
}

/* ─── Unit Art Backgrounds ────────────────────────────────────────────────── */
.unit-art {
  background: radial-gradient(circle at 50% 70%, #1e2030 0%, #151720 55%, #111318 100%) !important;
}

.unit-art.spells {
  background: radial-gradient(circle at 50% 65%, #1c1a2e 0%, #16142a 58%, #111318 100%) !important;
}

.unit-art.equipment {
  background: radial-gradient(circle at 50% 65%, #1d1f2e 0%, #17192a 58%, #111318 100%) !important;
}

.unit-art.heroes {
  background: radial-gradient(circle at 50% 66%, #1e1c28 0%, #171520 58%, #111318 100%) !important;
}

.unit-art img {
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.4)) !important;
}

.unit-image-fallback {
  color: #3f3f46 !important;
}

/* ─── Unit Card Body ──────────────────────────────────────────────────────── */
.unit-name {
  color: #e4e4e7 !important;
}

.unit-level strong {
  color: #e4e4e7 !important;
}

.unit-level span {
  color: #71717a !important;
}

.unit-max-badge {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

.unit-note {
  color: #52525b !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.home-hero {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.home h1 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700 !important;
}

.home-subtitle {
  color: #71717a !important;
}

.home-trust span {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #a1a1aa !important;
}

.home-trust span::before {
  color: #34d399 !important;
}

.home-command-card {
  background: linear-gradient(155deg, #151720 0%, #1a1d26 100%) !important;
}

.home-art-glow {
  background: rgba(96, 165, 250, 0.08) !important;
}

.home-search-content {
  background: rgba(17, 19, 24, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4) !important;
}

.search-kicker {
  color: #60a5fa !important;
}

.home-search-content h2 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

.home-search-content > p {
  color: #71717a !important;
}

.kind-switch {
  background: #1a1d26 !important;
}

.kind-switch button {
  color: #71717a !important;
}

.kind-switch button.active {
  color: #ffffff !important;
  background: rgba(96, 165, 250, 0.15) !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1) !important;
}

.search-box {
  background: #171922 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.search-box:focus-within {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

.search-box input {
  color: #ededed !important;
  background: transparent !important;
}

.search-box input::placeholder {
  color: #52525b !important;
}

.search-hints {
  color: #52525b !important;
}

.search-hints > span {
  color: #71717a !important;
}

.search-hints button {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #a1a1aa !important;
}

.search-hints button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.home-capabilities {
  color: #ededed !important;
}

.feature-heading {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.feature-heading span {
  color: #60a5fa !important;
}

.feature-heading h2 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

.feature {
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

.feature-index {
  color: #fbbf24 !important;
}

.feature h3 {
  color: #e4e4e7 !important;
}

.feature p {
  color: #71717a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORE PAGE DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.explore-menu {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.explore-menu h1 {
  color: #ffffff !important;
}

.explore-menu button {
  color: #a1a1aa !important;
  background: transparent !important;
}

.explore-menu button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.explore-menu button.active {
  background: rgba(96, 165, 250, 0.12) !important;
  color: #60a5fa !important;
}

.explore-form label span {
  color: #71717a !important;
}

.explore-form input {
  background: #171922 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ededed !important;
}

.explore-form button[type="submit"] {
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60a5fa !important;
}

/* ─── War page / Round Cards ──────────────────────────────────────────────── */
.round-card {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.round-no {
  color: #60a5fa !important;
}

.round-clan strong {
  color: #e4e4e7 !important;
}

.round-clan span {
  color: #71717a !important;
}

.round-score {
  color: #e4e4e7 !important;
}

.round-score span:last-child {
  color: #71717a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATOR PAGE DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.calculator-page .section,
.calculator-hero {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.calculator-head h2 {
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

.calculator-head p {
  color: #71717a !important;
}

.calculator-th-badge {
  background: #1a1d26 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.calculator-th-badge span {
  color: #71717a !important;
}

.calculator-th-badge strong {
  color: #e4e4e7 !important;
}

.calculator-controls-grid .control-group label {
  color: #a1a1aa !important;
}

.calculator-controls-grid select {
  background: #171922 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ededed !important;
}

.calc-card {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.calc-card-body span {
  color: #a1a1aa !important;
}

.calc-card-body strong {
  color: #e4e4e7 !important;
}

.calc-card-body small {
  color: #52525b !important;
}

.def-details-accordion summary {
  color: #a1a1aa !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHIEVEMENTS PAGE DARK OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.achievement-card {
  background: #151720 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.achievement-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.achievement-card h4 {
  color: #e4e4e7 !important;
}

.achievement-card p {
  color: #71717a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST / PAGE LOADING
   ═══════════════════════════════════════════════════════════════════════════ */

.toast {
  background: #1a1d26 !important;
  color: #ededed !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.page-loading {
  color: #71717a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAVORITES / HOME EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */

.favorites-section {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.favorites-section h3 {
  color: #a1a1aa !important;
}

.fav-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #d4d4d8 !important;
}

.fav-chip:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.fav-remove {
  color: #52525b !important;
}

.fav-remove:hover {
  color: #f87171 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RANKED / LEAGUE HISTORY
   ═══════════════════════════════════════════════════════════════════════════ */

.ranked-card, .ranked-section {
  background: #111318 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Scrollbar Global ────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #272935;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}




/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT ICON GRID — Troops Page (ClashKing Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ic-page {
  padding: 0 4px;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.ic-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.ic-filter {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: transparent;
  color: #71717a;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ic-filter:hover {
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.15);
}

.ic-filter.active {
  color: #ffffff;
  background: #272935;
  border-color: rgba(255, 255, 255, 0.15);
}

.ic-search-label {
  margin-left: auto;
}

.ic-search-label input {
  height: 26px;
  width: 100px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: #151720;
  color: #ededed;
  font-size: 10px;
  outline: none;
  transition: all 0.12s ease;
}

.ic-search-label input::placeholder {
  color: #52525b;
}

.ic-search-label input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  width: 130px;
}

.ic-result-line {
  margin-bottom: 14px;
  font-size: 9px;
  color: #52525b;
}

.ic-result-line span:first-child {
  color: #71717a;
  font-weight: 600;
}

/* ─── Section Title ───────────────────────────────────────────────────────── */
.ic-section {
  margin-bottom: 16px;
}

.ic-section-title {
  margin: 0 0 8px 0;
  font-size: 10px;
  font-weight: 800;
  color: #a1a1aa;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ─── Icon Grid ───────────────────────────────────────────────────────────── */
.ic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ic-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  cursor: default;
}

.ic-unit.ic-maxed .ic-thumb {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4);
}

/* ─── Thumbnail ───────────────────────────────────────────────────────────── */
.ic-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1d26;
  display: grid;
  place-items: center;
  position: relative;
}

.ic-thumb img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.ic-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #3f3f46;
  font-weight: 700;
  font-size: 18px;
}

/* ─── Level Badge ─────────────────────────────────────────────────────────── */
.ic-badge-max,
.ic-badge-normal,
.ic-badge-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 15px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  line-height: 1;
}

.ic-badge-max {
  background: rgba(52, 211, 153, 0.25);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.ic-badge-normal {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.ic-badge-zero {
  background: rgba(113, 113, 122, 0.12);
  color: #52525b;
  border: 1px solid rgba(113, 113, 122, 0.15);
}

/* ─── Equipment Cards (grouped by hero) ───────────────────────────────────── */
.ic-equip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.ic-equip-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: #111318;
}

.ic-equip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.ic-equip-hero-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.ic-equip-hero-name {
  font-size: 11px;
  font-weight: 650;
  color: #d4d4d8;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ic-equip-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ic-unit {
    width: 42px;
  }

  .ic-thumb {
    width: 38px;
    height: 38px;
  }

  .ic-thumb img {
    width: 34px;
    height: 34px;
  }

  .ic-toolbar {
    gap: 4px;
  }

  .ic-filter {
    padding: 4px 7px;
    font-size: 9px;
  }

  .ic-search-label {
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
  }

  .ic-search-label input {
    width: 100% !important;
  }
}


/* ─── Minimal, Şık ve Sade /clan Tasarımı (Linear / Vercel Dark Style) ─────── */

body.clan-landing {
  background: #090a0f !important;
  color: #ededed !important;
  overflow-x: hidden;
  min-height: 100vh;
}

body.clan-landing .site-header { 
  display: none !important; 
}

body.clan-landing .mobile-search { 
  display: none !important; 
}

body.clan-landing #app {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 32px 20px 80px !important;
  background: transparent !important;
}

/* Force override global table styles for clan landing */
body.clan-landing table,
body.clan-landing .cl-table {
  background: #111318 !important;
  color: #ededed !important;
  border-collapse: collapse !important;
}

body.clan-landing th,
body.clan-landing .cl-table th {
  background: #151720 !important;
  color: #71717a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.clan-landing td,
body.clan-landing .cl-table td {
  background: transparent !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: #ededed !important;
}

body.clan-landing tbody tr,
body.clan-landing .cl-tr {
  background: #111318 !important;
}

body.clan-landing tbody tr:hover,
body.clan-landing .cl-tr:hover {
  background: #1a1d26 !important;
}

/* ─── Topbar ──────────────────────────────────────────────────────────────── */

.cl-view {
  width: 100%;
  margin: 0 auto;
}

.cl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cl-topbar-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cl-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cl-topbar-actions a.cl-btn-sync {
  text-decoration: none;
}

.cl-page-heading {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.4px;
  color: #ffffff;
  margin: 0;
}

.cl-page-sub {
  font-size: 13px;
  color: #71717a;
  font-weight: 450;
}

.cl-btn-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d4d4d8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cl-btn-sync:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.cl-btn-sync.loading {
  opacity: 0.5;
  pointer-events: none;
}

.cl-sync-icon {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.cl-btn-sync:hover .cl-sync-icon {
  transform: rotate(180deg);
}

/* ─── Mobile Switcher ─────────────────────────────────────────────────────── */

.cl-mobile-chips {
  display: none;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.cl-tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #12131a;
  color: #8e8e93;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  transition: all 0.15s ease;
}

.cl-tab-chip.active {
  background: #1c1e28;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.cl-tab-chip small {
  font-size: 10px;
  color: #71717a;
}

.cl-tab-chip.active small {
  color: #a1a1aa;
}

/* ─── Side-by-Side Clans Grid ─────────────────────────────────────────────── */

.cl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  align-items: start;
}

/* ─── Clan Card ───────────────────────────────────────────────────────────── */

.cl-card {
  display: flex;
  flex-direction: column;
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  transition: border-color 0.15s ease;
}

.cl-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

/* ─── Card Header ─────────────────────────────────────────────────────────── */

.cl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  gap: 12px;
  background: #111318;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cl-badge-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.cl-header-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cl-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cl-clan-name {
  font-size: 16px;
  font-weight: 650;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-pill-lvl {
  font-size: 10px;
  font-weight: 600;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #71717a;
}

.cl-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: #a1a1aa;
}

.cl-sep {
  opacity: 0.3;
}

.cl-league {
  color: #93c5fd;
  font-weight: 500;
}

.cl-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cl-link-action {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cl-btn-game {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.cl-btn-game:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
}

.cl-btn-detail {
  background: rgba(255, 255, 255, 0.04);
  color: #a1a1aa;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cl-btn-detail:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.cl-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #71717a;
  padding: 8px 18px 0;
  margin: 0;
  background: #111318;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Stats Bar ───────────────────────────────────────────────────────────── */

.cl-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #0d0f14;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 8px;
}

.cl-stat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cl-stat-lbl {
  font-size: 9px;
  font-weight: 600;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cl-stat-num {
  font-size: 12px;
  font-weight: 600;
  color: #e4e4e7;
  font-variant-numeric: tabular-nums;
}

.cl-stat-num small {
  font-size: 10px;
  color: #71717a;
  font-weight: 400;
}

/* ─── Live War Strip ──────────────────────────────────────────────────────── */

.cl-war-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: rgba(239, 68, 68, 0.08);
  border-bottom: 1px solid rgba(239, 68, 68, 0.18);
  font-size: 11px;
  gap: 10px;
}

.cl-war-strip-left {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cl-war-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

.cl-war-state-text {
  font-weight: 600;
  color: #f87171;
}

.cl-war-meta-sep {
  color: #3f3f46;
}

.cl-war-size {
  color: #71717a;
}

.cl-war-clock {
  color: #fbbf24;
  font-weight: 500;
}

.cl-war-strip-score {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d4d4d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cl-war-stars {
  color: #fbbf24;
}

.cl-war-strip-score small {
  color: #71717a;
  font-size: 10px;
}

.cl-war-vs {
  color: #52525b;
  font-size: 10px;
  font-weight: 600;
}

/* ─── Roster Toolbar ──────────────────────────────────────────────────────── */

.cl-roster-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #111318;
}

.cl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  gap: 8px;
  flex-wrap: wrap;
  background: #111318;
}

.cl-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cl-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #e4e4e7;
}

.cl-count-tag {
  font-size: 10px;
  font-weight: 600;
  color: #71717a;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.cl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cl-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.cl-search-wrapper input {
  height: 28px;
  width: 120px;
  padding: 0 20px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: #171922;
  font-size: 11px;
  color: #f4f4f5;
  outline: none;
  transition: all 0.15s ease;
}

.cl-search-wrapper input::placeholder {
  color: #52525b;
}

.cl-search-wrapper input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  width: 145px;
}

.cl-search-clear {
  position: absolute;
  right: 5px;
  border: 0;
  background: transparent;
  color: #71717a;
  font-size: 10px;
  cursor: pointer;
  padding: 2px;
}

.cl-seg-control {
  display: flex;
  gap: 2px;
  background: #171922;
  padding: 2px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.cl-seg-btn {
  border: 0;
  background: transparent;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  transition: all 0.12s ease;
}

.cl-seg-btn:hover {
  color: #d4d4d8;
}

.cl-seg-btn.active {
  background: #272935;
  color: #ffffff;
}

/* ─── Table ───────────────────────────────────────────────────────────────── */

.cl-table-outer {
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
  background: #111318 !important;
}

.cl-table-outer::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.cl-table-outer::-webkit-scrollbar-track {
  background: #111318;
}

.cl-table-outer::-webkit-scrollbar-thumb {
  background: #272935;
  border-radius: 3px;
}

.cl-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  background: #111318 !important;
}

.cl-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px !important;
  background: #151720 !important;
  color: #71717a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  white-space: nowrap !important;
  user-select: none;
}

.cl-th-sortable {
  cursor: pointer;
}

.cl-th-sortable:hover {
  color: #d4d4d8 !important;
}

.cl-table td {
  padding: 8px 12px !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
  vertical-align: middle !important;
  font-size: 11px !important;
  background: transparent !important;
  color: #ededed !important;
}

.cl-tr {
  background: #111318 !important;
  transition: background 0.1s ease;
}

.cl-tr:hover {
  background: #181a22 !important;
}

.cl-tr:last-child td {
  border-bottom: none !important;
}

/* ─── Table Columns ───────────────────────────────────────────────────────── */

.cl-td-rank, .cl-th-rank {
  width: 24px;
  text-align: center !important;
  color: #52525b !important;
  font-size: 10px !important;
}

.cl-td-player, .cl-th-player {
  min-width: 130px;
}

.cl-p-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cl-p-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.cl-p-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cl-p-name {
  font-size: 11.5px;
  font-weight: 550;
  color: #e4e4e7;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  transition: color 0.1s ease;
}

.cl-p-name:hover {
  color: #60a5fa;
}

.cl-p-tag {
  font-size: 9px;
  color: #52525b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cl-td-role, .cl-th-role {
  width: 70px;
}

.cl-role {
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}

.role-leader {
  color: #fbbf24;
}

.role-co {
  color: #c084fc;
}

.role-elder {
  color: #34d399;
}

.role-member {
  color: #71717a;
}

.cl-td-th, .cl-th-th {
  width: 50px;
}

.cl-th {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: #a1a1aa;
  font-weight: 500;
}

.cl-td-donations, .cl-th-donations {
  width: 100px;
}

.cl-td-alltime, .cl-th-alltime {
  width: 118px;
  text-align: right !important;
}

.cl-don-alltime .cl-don-up { color: #fbbf24; }
.cl-don-alltime .cl-don-down { color: #8c7b62; }

.cl-don {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cl-don-up {
  color: #34d399;
  font-weight: 550;
}

.cl-don-down {
  color: #52525b;
}

.cl-td-trophies, .cl-th-trophies {
  width: 70px;
  text-align: right !important;
}

.cl-trophy {
  font-size: 11px;
  font-weight: 600;
  color: #e4e4e7;
  font-variant-numeric: tabular-nums;
}

.cl-empty-state {
  padding: 30px 16px;
  text-align: center;
  color: #52525b;
  font-size: 11px;
  background: #111318;
}

/* ─── Donation Admin ─────────────────────────────────────────────────────── */

.cl-admin-view {
  overflow: hidden;
  border: 1px solid #d8cbb8;
  border-radius: 18px;
  color: #2c241b;
  background: #f5efe4;
  box-shadow: 0 24px 70px rgba(30, 22, 14, 0.2);
}

.cl-admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 32px;
  border-bottom: 1px solid #dacdbb;
  background: linear-gradient(135deg, #fffaf0, #eadbc4);
}

.cl-admin-kicker {
  color: #9b5c2e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cl-admin-head h1 {
  margin: 7px 0 5px;
  font: 700 32px/1.05 Georgia, serif;
  letter-spacing: -.03em;
}

.cl-admin-head p {
  max-width: 650px;
  margin: 0;
  color: #6f6252;
  font-size: 12px;
  line-height: 1.55;
}

.cl-admin-head a {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid #bca98e;
  border-radius: 7px;
  color: #5c4632;
  background: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.cl-admin-table-wrap { overflow-x: auto; }

.cl-admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf8;
}

.cl-admin-table th,
.cl-admin-table td {
  padding: 13px 18px;
  border-bottom: 1px solid #e6dccd;
  text-align: left;
  font-size: 12px;
}

.cl-admin-table th {
  color: #7d6c58;
  background: #eee4d5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cl-admin-table td:first-child strong,
.cl-admin-table td:first-child small {
  display: block;
}

.cl-admin-table td:first-child small,
.cl-admin-tag {
  margin-top: 2px;
  color: #887865;
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cl-admin-edit {
  display: flex;
  gap: 7px;
  align-items: center;
}

.cl-admin-edit label {
  display: grid;
  gap: 3px;
}

.cl-admin-edit label span {
  color: #887865;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cl-admin-edit input {
  width: 150px;
  height: 34px;
  border: 1px solid #cdbda8;
  border-radius: 7px;
  outline: 0;
  padding: 0 10px;
  color: #2c241b;
  background: #fff;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.cl-admin-edit input:focus {
  border-color: #956a45;
  box-shadow: 0 0 0 3px rgba(149, 106, 69, .12);
}

.cl-admin-edit button {
  height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  color: #fffaf2;
  background: #765138;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.cl-admin-edit button:disabled { cursor: wait; opacity: .65; }
.cl-admin-season { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-admin-empty { padding: 36px !important; color: #7d6c58; text-align: center !important; }

@media (max-width: 680px) {
  .cl-admin-head { align-items: flex-start; flex-direction: column; padding: 24px 20px; }
  .cl-admin-head h1 { font-size: 26px; }
  .cl-admin-table th, .cl-admin-table td { padding: 11px 12px; }
  .cl-admin-edit input { width: 120px; }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  body.clan-landing #app {
    padding: 16px 12px 60px !important;
  }

  .cl-mobile-chips {
    display: flex;
  }

  .cl-grid {
    grid-template-columns: 1fr;
  }

  .cl-card {
    display: none;
  }

  .cl-card.mobile-active {
    display: flex;
  }
}

@media (max-width: 600px) {
  .cl-stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .cl-war-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .cl-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .cl-toolbar-right {
    justify-content: space-between;
  }

  .cl-search-wrapper input {
    width: 100% !important;
  }

  .cl-td-th, .cl-th-th, .cl-td-role, .cl-th-role {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO EQUIPMENT DUAL-VIEW COMPONENT (ClashKing & ClashSpot Style)
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-section-wrapper {
  margin: 18px 0 24px;
}

.eq-wrapper {
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
  overflow: hidden;
}

/* ─── Topbar ──────────────────────────────────────────────────────────────── */
.eq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.eq-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eq-gem-icon {
  font-size: 16px;
  color: #f97316;
}

.eq-main-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

/* ─── View Picker (Görünüm Seç) ───────────────────────────────────────────── */
.eq-view-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.eq-picker-label {
  font-size: 8.5px;
  font-weight: 700;
  color: #71717a;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.eq-toggle-pills {
  display: flex;
  background: #181a22;
  padding: 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
}

.eq-pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #71717a;
  cursor: pointer;
  transition: all 0.15s ease;
}

.eq-pill-btn:hover {
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.05);
}

.eq-pill-btn.active {
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
}

/* ─── Circular Gauge ──────────────────────────────────────────────────────── */
.eq-overall-ring-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eq-overall-label {
  font-size: 8.5px;
  font-weight: 700;
  color: #71717a;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: right;
  max-width: 90px;
  line-height: 1.25;
}

.eq-gauge {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.eq-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.eq-gauge-bg {
  fill: none;
  stroke: #1c1e28;
  stroke-width: 4;
}

.eq-gauge-bar {
  fill: none;
  stroke: #f97316;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}

.eq-gauge-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 750;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.eq-gauge-val small {
  font-size: 8px;
  color: #a1a1aa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW MODE 1: GRID / COLUMN VIEW (Screenshots)
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 4px;
}

.eq-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 125px;
}

.eq-col-head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.eq-col-hero-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.eq-col-items {
  display: grid;
  grid-template-columns: repeat(2, 58px);
  gap: 6px;
  justify-content: center;
}

/* ─── Grid Item Box ───────────────────────────────────────────────────────── */
.eq-item-box {
  position: relative;
  width: 58px;
  height: 64px;
  background: #14161f;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.12s ease, border-color 0.12s ease;
  user-select: none;
}

.eq-item-box:hover {
  transform: translateY(-1.5px);
}

.eq-item-box.rarity-epic {
  border-color: rgba(192, 132, 252, 0.45);
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.12);
}

.eq-item-box.rarity-common {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.1);
}

.eq-item-box.is-equipped {
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.22);
}

.eq-item-box.is-locked {
  border-color: rgba(255, 255, 255, 0.05);
  background: #0f1015;
  opacity: 0.35;
  filter: grayscale(80%);
}

.eq-item-img-wrap {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.eq-item-img-wrap img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
}

.eq-star-badge {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  color: #fbbf24;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.eq-lock-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 8px;
  line-height: 1;
  opacity: 0.8;
}

.eq-item-meta {
  font-size: 9.5px;
  line-height: 1;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}

.eq-item-meta strong {
  color: #ffffff;
  font-weight: 750;
}

.eq-item-meta small {
  color: #71717a;
  font-size: 8.5px;
}

.eq-dash {
  color: #52525b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW MODE 2: DETAILED / ROW VIEW (Screenshots)
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-detail-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eq-hero-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eq-hero-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.eq-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eq-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eq-hero-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.eq-hero-name {
  font-size: 13px;
  font-weight: 700;
}

.eq-hero-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  color: #71717a;
}

.eq-hero-pct {
  color: #e4e4e7;
  font-size: 11px;
}

.eq-hero-bar-track {
  width: 100%;
  height: 3px;
  background: #1a1d26;
  border-radius: 999px;
  overflow: hidden;
}

.eq-hero-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.eq-detail-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ─── Detailed Card ───────────────────────────────────────────────────────── */
.eq-card {
  position: relative;
  width: 88px;
  height: 112px;
  background: #141620;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 5px;
  transition: transform 0.12s ease, border-color 0.12s ease;
  user-select: none;
}

.eq-card:hover {
  transform: translateY(-2px);
}

.eq-card.rarity-epic {
  border-color: rgba(192, 132, 252, 0.45);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.1);
}

.eq-card.rarity-common {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.08);
}

.eq-card.is-equipped {
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.eq-card.is-locked {
  border-color: rgba(255, 255, 255, 0.05);
  background: #0d0f14;
  opacity: 0.3;
  filter: grayscale(80%);
}

.eq-card-img-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-top: 4px;
}

.eq-card-img-wrap img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.eq-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.eq-card-lvl-row {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.eq-card-lvl-row strong {
  color: #ffffff;
  font-weight: 750;
}

.eq-card-lvl-row small {
  color: #71717a;
  font-size: 9px;
}

.eq-card-bar-track {
  width: 100%;
  height: 3px;
  background: #232634;
  border-radius: 999px;
  overflow: hidden;
  margin: 1px 0;
}

.eq-card-bar-fill {
  height: 100%;
  background: #f97316;
  border-radius: 999px;
}

.eq-card-pct-label {
  font-size: 8px;
  color: #71717a;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .eq-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .eq-view-picker {
    flex-direction: row;
    justify-content: space-between;
  }

  .eq-overall-ring-wrap {
    justify-content: space-between;
  }

  .eq-grid-view {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   EQUIPMENT DETAIL PAGE (/equipment/:slug)
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-detail-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 8px 60px;
}

.eq-back-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.eq-back-btn, .eq-catalog-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background: #171922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.eq-back-btn:hover, .eq-catalog-link:hover {
  background: #232634;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

/* ─── Banner ──────────────────────────────────────────────────────────────── */
.eq-page-banner {
  background: #111318;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.eq-page-banner.rarity-epic {
  border-color: rgba(192, 132, 252, 0.25);
  box-shadow: 0 4px 30px rgba(192, 132, 252, 0.08);
}

.eq-page-banner.rarity-common {
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow: 0 4px 30px rgba(56, 189, 248, 0.06);
}

.eq-banner-main {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.eq-banner-art-wrap {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: #171922;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.eq-banner-art-wrap.rarity-epic {
  border-color: rgba(192, 132, 252, 0.5);
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.2);
}

.eq-banner-art-wrap.rarity-common {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}

.eq-banner-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}

.eq-banner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.eq-banner-hero-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eq-banner-hero-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.eq-banner-title {
  margin: 0;
  font-size: 24px;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.4px;
}

.eq-banner-orig-name {
  font-size: 12px;
  color: #71717a;
  font-weight: 500;
}

.eq-banner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.eq-badge-rarity, .eq-badge-type, .eq-badge-max, .eq-badge-th {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.eq-badge-rarity.epic {
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.3);
}

.eq-badge-rarity.common {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.eq-badge-type, .eq-badge-max, .eq-badge-th {
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Player Status Card in Banner ────────────────────────────────────────── */
.eq-player-status-card {
  background: #171922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eq-player-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #71717a;
}

.eq-player-status-head strong {
  color: #ededed;
}

.eq-max-pill {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}

.eq-player-status-lvl {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.eq-player-status-lvl small {
  font-size: 10px;
  color: #71717a;
}

.eq-player-status-lvl strong {
  font-size: 16px;
  color: #ffffff;
}

.eq-player-status-lvl span {
  font-size: 12px;
  color: #71717a;
}

.eq-player-status-bar {
  width: 100%;
  height: 4px;
  background: #232634;
  border-radius: 999px;
  overflow: hidden;
}

.eq-player-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #fbbf24);
  border-radius: 999px;
}

/* ─── Ore Cost Summary Grid ───────────────────────────────────────────────── */
.eq-ores-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.eq-ore-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #151720;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.eq-ore-icon {
  font-size: 22px;
  line-height: 1;
}

.eq-ore-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eq-ore-body span {
  font-size: 9px;
  font-weight: 650;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.eq-ore-body strong {
  font-size: 15px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.eq-ore-body small {
  font-size: 9px;
  color: #52525b;
}

/* ─── Level Progression Table ─────────────────────────────────────────────── */
.eq-table-wrap {
  margin-top: 10px;
}

.eq-levels-table {
  width: 100%;
  font-size: 11px;
}

.eq-levels-table th {
  background: #171922 !important;
  color: #71717a !important;
  padding: 8px 12px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.eq-levels-table td {
  padding: 8px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
}

.eq-row-current {
  background: rgba(249, 115, 22, 0.12) !important;
  font-weight: 600;
}

.eq-row-current td {
  color: #fed7aa !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}

.eq-row-passed td {
  opacity: 0.6;
}

.eq-td-lvl {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eq-you-badge {
  background: #f97316;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.eq-tag-b, .eq-tag-th {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 9px;
  color: #a1a1aa;
}

/* ─── Siblings ────────────────────────────────────────────────────────────── */
.eq-siblings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.eq-sibling-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #171922;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.eq-sibling-chip:hover {
  background: #232634;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.eq-sibling-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.eq-sibling-chip.rarity-epic {
  border-color: rgba(192, 132, 252, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EQUIPMENT CATALOG PAGE (/equipment)
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-catalog-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 8px 60px;
}

.eq-catalog-hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eq-catalog-hero-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.eq-catalog-hero-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.eq-catalog-count {
  font-size: 10px;
  color: #71717a;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.eq-catalog-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.eq-catalog-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #151720;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.eq-catalog-card:hover {
  background: #1a1d28;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

.eq-catalog-card.rarity-epic {
  border-color: rgba(192, 132, 252, 0.3);
}

.eq-catalog-card.rarity-common {
  border-color: rgba(56, 189, 248, 0.25);
}

.eq-catalog-art {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #1c1e2a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.eq-catalog-art img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.eq-catalog-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.eq-catalog-rarity {
  font-size: 9px;
  font-weight: 700;
}

.eq-catalog-rarity.epic {
  color: #c084fc;
}

.eq-catalog-rarity.common {
  color: #38bdf8;
}

.eq-catalog-name {
  font-size: 13px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-catalog-sub {
  font-size: 10px;
  color: #71717a;
}

.eq-catalog-meta {
  font-size: 9.5px;
  color: #a1a1aa;
  margin-top: 2px;
}

.eq-catalog-guide {
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 5px;
  border: 1px solid rgba(218, 177, 83, .22);
  border-radius: 4px;
  background: rgba(218, 177, 83, .07);
  color: #cdb270;
  font-size: 8.5px;
  font-weight: 750;
}

/* ─── ClashSpot-style research view ─────────────────────────────────────── */
.cs-troops-page {
  color: #ddd;
  padding: 2px 0 38px;
  font-family: "Arial Narrow", Inter, Arial, sans-serif;
}

.cs-village-block + .cs-village-block {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.cs-village-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  color: #ddd;
  font-size: 20px;
  font-weight: 650;
  line-height: 40px;
}

.cs-village-heading > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(145deg, #b77b38, #70401d);
  box-shadow: inset 0 0 0 2px rgba(255, 223, 144, .2), 0 3px 8px rgba(0, 0, 0, .35);
  line-height: 1;
}

.cs-village-block.builder .cs-village-heading > span {
  background: linear-gradient(145deg, #6b8b83, #374c50);
}

.cs-village-heading b {
  font-size: 9px;
  color: #fff2cd;
  letter-spacing: .05em;
}

.cs-village-heading small {
  margin-top: 2px;
  font-size: 14px;
  color: #fff;
  font-weight: 850;
}

.cs-total-progress,
.cs-research-group {
  margin: 0 0 10px;
}

.cs-total-progress h3,
.cs-research-group h3 {
  display: flex;
  align-items: center;
  margin: 10px 0;
  color: #ddd;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  text-transform: uppercase;
}

.cs-total-progress h3 i,
.cs-research-group h3 i {
  width: 15px;
  height: 15px;
  margin-right: 10px;
  flex: 0 0 auto;
  background: #2e86ab;
}

.cs-research-content {
  width: min(100%, calc(var(--cs-width-count) * 54px - 4px));
}

.cs-research-progress {
  width: 100%;
  height: 15px;
  margin: 0 0 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cs-color) 50%, transparent);
  color: #ddd;
  font-size: 12.8px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

.cs-research-progress > span {
  display: block;
  height: 15px;
  min-width: max-content;
  padding: 0 5px;
  background: var(--cs-color);
  box-sizing: border-box;
  white-space: nowrap;
}

.cs-total-progress .cs-research-progress {
  width: 100%;
}

.cs-research-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.cs-research-icon {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 5px;
  background: #536271;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  transition: filter .12s ease, transform .12s ease, border-color .12s ease;
}

a.cs-research-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .85);
  filter: brightness(1.08);
}

.cs-research-icon > img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.cs-icon-fallback {
  width: 48px;
  height: 48px;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
  color: rgba(255, 255, 255, .7);
}

.cs-research-icon.is-unavailable {
  filter: grayscale(1);
  opacity: .42;
}

.cs-research-icon.is-equipped {
  background: #387e62;
  border-color: rgba(94, 224, 167, .78);
}

.cs-research-level {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  place-items: center;
  border-radius: 5px 0 4px 0;
  background: #f24236;
  color: #fff;
  font-size: 12.8px;
  font-weight: 850;
  line-height: 18px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.cs-research-icon.is-warning .cs-research-level {
  background: #efbc2e;
  color: #17120b;
  text-shadow: none;
}

.cs-research-icon.is-maxed .cs-research-level {
  background: #151719;
  color: #fff;
}

.cs-equipped-mark {
  position: absolute;
  top: 2px;
  left: 3px;
  color: #ffe275;
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 1px 3px #000;
}

/* ─── Equipment guide, target calculator and matchup lab ─────────────────── */
.eq-guide-kicker {
  display: block;
  color: #b68ae7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1.2;
}

.eq-banner-progress-copy {
  margin-top: 4px;
  color: #e8dcc8;
  font-size: 12px;
}

.eq-banner-progress-copy strong {
  color: #fff;
  font-size: 14px;
}

.eq-player-progress-label {
  color: #cfb7e7;
  font-size: 9px;
  font-weight: 700;
}

.eq-page-banner.rarity-epic {
  background: radial-gradient(circle at 11% 20%, rgba(141, 86, 177, .22), transparent 32%), linear-gradient(135deg, #17141c, #111318 62%);
  border-color: rgba(218, 175, 255, .32);
}

.eq-upgrade-plan {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #dacdad;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7f1e3, #ebe0c9);
  color: #2d251a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.eq-plan-copy h2 {
  margin: 4px 0 4px;
  color: #2d251a;
  font: 750 22px/1.15 Georgia, serif;
}

.eq-plan-copy p {
  margin: 0;
  color: #756a58;
  font-size: 11px;
}

.eq-upgrade-plan .eq-guide-kicker {
  color: #6f477c;
}

.eq-target-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.eq-target-buttons button {
  min-width: 44px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid #b9a98d;
  border-radius: 7px;
  background: rgba(255, 255, 255, .62);
  color: #4b4132;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.eq-target-buttons button:hover,
.eq-target-buttons button.active {
  border-color: #704878;
  background: #704878;
  color: #fff;
}

.eq-target-result {
  padding-top: 14px;
  border-top: 1px solid rgba(77, 62, 40, .16);
}

.eq-target-result h3 {
  margin: 0 0 12px;
  color: #4d4232;
  font-size: 12px;
  font-weight: 600;
}

.eq-target-result h3 strong {
  color: #2d251a;
  font-size: 17px;
}

.eq-target-ores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.eq-target-ore {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(80, 63, 38, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .57);
}

.eq-target-ore .eq-crystal-shape {
  font-size: 22px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18));
}

.eq-target-ore.shiny .eq-crystal-shape { color: #70a8cc; }
.eq-target-ore.glowy .eq-crystal-shape { color: #9b70b5; }
.eq-target-ore.starry .eq-crystal-shape { color: #d9a42a; }

.eq-target-ore div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.eq-target-ore small {
  color: #786d5b;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.eq-target-ore strong {
  color: #2b241b;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.eq-plan-maxed {
  margin-top: 14px;
  padding: 13px;
  border-radius: 7px;
  background: rgba(70, 120, 76, .12);
  color: #3b6841;
  font-weight: 750;
}

.eq-max-cost-title {
  margin: 18px 0 0;
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.eq-matchup-section {
  overflow: hidden;
  border-color: rgba(226, 192, 112, .25);
  background: linear-gradient(145deg, #181713, #111318 58%);
}

.eq-matchup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.eq-matchup-head h2 {
  margin: 5px 0 6px;
  color: #f5ead2;
  font: 750 21px/1.22 Georgia, serif;
}

.eq-matchup-head p {
  max-width: 700px;
  margin: 0;
  color: #9d9586;
  font-size: 11px;
  line-height: 1.55;
}

.eq-matchup-head p strong { color: #f0c85d; }

.eq-matchup-formula {
  min-width: 150px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 190, 86, .28);
  border-radius: 9px;
  background: rgba(232, 190, 86, .07);
  text-align: center;
}

.eq-matchup-formula strong,
.eq-matchup-formula span {
  display: block;
}

.eq-matchup-formula strong { color: #f0c85d; font-size: 13px; }
.eq-matchup-formula span { margin-top: 3px; color: #928a7c; font-size: 9px; }

.eq-matchup-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
  margin: 18px 0 12px;
}

.eq-matchup-summary span {
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
  color: #a7a092;
  font-size: 10px;
}

.eq-matchup-summary strong { display: block; margin-top: 2px; color: #f0c85d; font-size: 13px; }

.eq-matchup-summary small {
  display: block;
  margin-top: 3px;
  color: #79746b;
  font-size: 9px;
  line-height: 1.35;
}

.eq-matchup-mode-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 5px 8px;
  border: 1px solid rgba(218, 190, 122, .16);
  border-radius: 5px;
  background: rgba(218, 190, 122, .045);
  color: #777269;
  font-size: 9px;
}

.eq-matchup-mode-note strong { color: #cbb783; }

.eq-combo-explainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.eq-combo-explainer span {
  padding: 6px 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  color: #827d74;
  font-size: 9px;
}

.eq-combo-explainer strong { color: #bfb6a7; }

.eq-matchup-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-size: 11px;
}

.eq-matchup-table th,
.eq-matchup-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  text-align: left;
}

.eq-matchup-table th {
  color: #777269;
  font-size: 9px;
  text-transform: uppercase;
}

.eq-matchup-table td { color: #d2cdc2; }
.eq-matchup-table td.number, .eq-matchup-table th.number { text-align: right; }
.eq-matchup-table td:first-child strong { display: inline-block; min-width: 20px; color: #fff; }
.eq-matchup-table td:first-child small { display: block; margin-top: 2px; color: #777269; font-size: 9px; }
.eq-match-owned { background: rgba(96, 148, 92, .065); }
.eq-min-level { color: #f0c85d; font-weight: 800; }
.eq-min-level.impossible { color: #b68479; font-weight: 700; }

.eq-match-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
}

.eq-match-status.yes { background: rgba(85, 160, 89, .15); color: #8fd292; }
.eq-match-status.assist { background: rgba(205, 158, 63, .14); color: #dfbd72; }
.eq-match-status.no { background: rgba(172, 83, 70, .14); color: #d99689; }

.eq-matchup-caveat {
  margin: 11px 0 0;
  padding-left: 9px;
  border-left: 2px solid rgba(219, 184, 100, .24);
  color: #817b70;
  font-size: 9px;
  line-height: 1.5;
}

.eq-synergy-callout {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.3fr);
  gap: 18px;
  align-items: center;
  margin: 2px 0 13px;
  padding: 12px 14px;
  border: 1px solid rgba(221, 177, 77, .2);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(221, 177, 77, .08), rgba(122, 77, 45, .045));
}

.eq-synergy-callout > div > strong {
  display: block;
  margin-top: 3px;
  color: #e7d2a3;
  font-size: 13px;
}

.eq-synergy-callout p {
  margin: 0;
  color: #938b7e;
  font-size: 10px;
  line-height: 1.5;
}

.eq-synergy-callout p strong { color: #d4b875; }

.eq-data-note {
  margin: 11px 0 0;
  color: #68645d;
  font-size: 9px;
}

.eq-data-note a { color: #bda46b; }

.eq-table-verification {
  margin: 8px 0 12px;
  padding: 8px 10px;
  border-left: 3px solid #8d6b46;
  background: rgba(141, 107, 70, .08);
  color: #a89b89;
  font-size: 10px;
  line-height: 1.45;
}

.eq-table-verification.verified {
  border-left-color: #6f8c62;
  background: rgba(111, 140, 98, .08);
  color: #a8b9a0;
}

@media (max-width: 680px) {
  .cs-research-content { width: 100%; }
  .cs-research-icon { width: 46px; height: 46px; flex-basis: 46px; }
  .cs-research-icon > img, .cs-icon-fallback { width: 44px; height: 44px; }
  .cs-research-icons { gap: 4px; }
  .eq-target-ores, .eq-matchup-summary { grid-template-columns: 1fr; }
  .eq-matchup-head { flex-direction: column; }
  .eq-matchup-formula { width: 100%; box-sizing: border-box; }
  .eq-synergy-callout { grid-template-columns: 1fr; gap: 9px; }
  .eq-upgrade-plan { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEROES DETAILED VIEW (Dual-View in player troops)
   ═══════════════════════════════════════════════════════════════════════════ */

.ic-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.heroes-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.hero-card-detail {
  background: #141620;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s ease;
}

.hero-card-detail:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1.5px);
}

.hero-card-detail.is-maxed {
  border-color: rgba(251, 191, 36, 0.35);
}

.hero-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-card-art {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  background: #1c1e2a;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hero-card-art img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.hero-max-badge, .troop-max-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fbbf24;
  color: #1a1500;
  font-size: 7.5px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-card-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.hero-village-badge {
  font-size: 8.5px;
  font-weight: 700;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-card-name {
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-card-lvl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 2px;
}

.hero-card-lvl-text {
  color: #a1a1aa;
}

.hero-card-lvl-text strong {
  color: #ffffff;
}

.hero-card-lvl-text small {
  color: #71717a;
}

.hero-card-pct {
  font-size: 10px;
  color: #71717a;
  font-weight: 600;
}

.hero-card-bar-track {
  width: 100%;
  height: 3px;
  background: #232634;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

.hero-card-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.hero-card-equipped-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-equipped-label {
  font-size: 9.5px;
  color: #71717a;
}

.hero-equipped-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-equipped-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #1c1e2a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9px;
  color: #d4d4d8;
  text-decoration: none;
  transition: all 0.12s ease;
}

.hero-equipped-mini-badge:hover {
  background: #272a3b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.hero-equipped-mini-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TROOPS DETAILED VIEW (Dual-View in player troops)
   ═══════════════════════════════════════════════════════════════════════════ */

.troops-detail-section {
  margin-bottom: 18px;
}

.troops-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.troop-card-detail {
  background: #141620;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.12s ease;
  user-select: none;
}

.troop-card-detail:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1.5px);
}

.troop-card-detail.is-maxed {
  border-color: rgba(251, 191, 36, 0.3);
}

.troop-card-detail.is-super-active {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.15);
}

.troop-detail-art {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #1c1e2a;
  display: grid;
  place-items: center;
}

.troop-detail-art img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.troop-active-badge {
  position: absolute;
  bottom: -3px;
  background: #10b981;
  color: #ffffff;
  font-size: 6.5px;
  font-weight: 900;
  padding: 1px 3px;
  border-radius: 2px;
}

.troop-detail-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.troop-detail-name {
  font-size: 11px;
  color: #ededed;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.troop-detail-lvl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 9.5px;
  color: #a1a1aa;
}

.troop-detail-lvl-row strong {
  color: #ffffff;
}

.troop-detail-lvl-row small {
  color: #71717a;
}

.troop-detail-pct {
  font-size: 8.5px;
  color: #71717a;
}

.troop-detail-bar-track {
  width: 100%;
  height: 3px;
  background: #232634;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 1px;
}

.troop-detail-bar-fill {
  height: 100%;
  background: #38bdf8;
  border-radius: 999px;
}

.troop-card-detail.is-maxed .troop-detail-bar-fill {
  background: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-31 WARM CONTRAST PASS
   One coherent, readable palette for every application surface. Dark panels
   remain only where they carry meaning (research/meta laboratory views).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --paper: #f3eee5;
  --surface: #fffdf8;
  --surface-2: #f1e8da;
  --ink: #2b241c;
  --muted: #706558;
  --line: #ddd1c0;
  --accent: #96562f;
  --accent-soft: rgba(150, 86, 47, .12);
  --olive: #55785b;
  --gold: #a66f17;
  --good: #2f7551;
  --bad: #a4473e;
  --shadow: 0 18px 48px rgba(77, 58, 35, .1);
}

html,
body {
  color: var(--ink) !important;
  background: var(--paper) !important;
}

body {
  background-image:
    radial-gradient(circle at 8% 0%, rgba(173, 123, 67, .08), transparent 27rem),
    linear-gradient(180deg, #f7f2e9 0, #f1ebe1 100%) !important;
}

::selection { color: #fffaf3; background: #96562f; }

/* Shell and navigation */
.site-header {
  color: var(--ink) !important;
  background: rgba(255, 253, 248, .94) !important;
  border-bottom-color: #ded3c4 !important;
  box-shadow: 0 5px 24px rgba(73, 54, 32, .06) !important;
}

.brand,
.site-header .logo { color: #2d261e !important; }
.brand-shield { border-color: #a96943 !important; background: #96562f !important; }

.header-search {
  border-color: #cfc1ae !important;
  background: #fffaf3 !important;
  box-shadow: 0 4px 14px rgba(80, 58, 32, .055) !important;
}

.header-search select,
.header-search input {
  color: #2b241c !important;
  background: transparent !important;
}

.header-search select { border-right-color: #ddd1c0 !important; }
.header-search input::placeholder { color: #897e70 !important; opacity: 1; }
.header-search button,
.search-box button,
.explore-form button,
.ranking-card button { color: #fffaf4 !important; background: #96562f !important; }
.header-search button:hover,
.search-box button:hover { background: #7e4528 !important; }

.header-nav a { color: #6f6457 !important; }
.header-nav a:hover { color: #713f24 !important; }
.header-nav a.active {
  color: #713f24 !important;
  background: #eee2d2 !important;
  box-shadow: inset 0 -2px #b77a4e !important;
}

.mobile-search,
.mobile-search input,
.mobile-search button,
.mobile-search-button {
  color: #2b241c !important;
  border-color: #d7cabb !important;
  background: #fffaf3 !important;
}

/* Home — fixes the white title on the ivory hero panel */
.home-hero {
  border-color: #d1c1ab !important;
  background: #ead7bc !important;
  box-shadow: 0 26px 70px rgba(70, 48, 25, .13) !important;
}

.home-copy { background: linear-gradient(140deg, #fffdf8, #f7ecdb) !important; }
.home h1 {
  color: #2c241b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}
.home-subtitle { color: #62584c !important; }
.eyebrow,
.feature-heading span { color: #96562f !important; }
.home-trust span {
  color: #5f5548 !important;
  border-color: #d8c9b6 !important;
  background: rgba(255, 253, 247, .72) !important;
}
.home-trust span::before { color: #347455 !important; }
.home-command-card { background: linear-gradient(150deg, #dfc49f, #b98455) !important; }
.home-art-glow { background: rgba(255, 247, 220, .78) !important; }
.home-search-content {
  color: #2b241c !important;
  border-color: rgba(107, 70, 34, .24) !important;
  background: rgba(255, 252, 245, .96) !important;
  box-shadow: 0 18px 42px rgba(71, 43, 19, .2) !important;
}
.search-kicker { color: #96562f !important; }
.home-search-content h2 { color: #2c241b !important; font-family: Georgia, serif !important; }
.home-search-content > p,
.search-hints,
.search-hints > span { color: #706558 !important; }
.kind-switch { background: #eee4d6 !important; }
.kind-switch button { color: #6f6457 !important; }
.kind-switch button.active {
  color: #fffaf2 !important;
  background: #76513a !important;
  box-shadow: 0 4px 12px rgba(84, 56, 36, .16) !important;
}
.search-box {
  border-color: #cbbba5 !important;
  background: #ffffff !important;
}
.search-box:focus-within {
  border-color: #96562f !important;
  box-shadow: 0 0 0 3px rgba(150, 86, 47, .13) !important;
}
.search-box input { color: #2b241c !important; background: #fff !important; }
.search-box input::placeholder { color: #938779 !important; opacity: 1; }
.search-hints button {
  color: #70462d !important;
  border-color: #d7c9b7 !important;
  background: #f7efe4 !important;
}
.search-hints button:hover { color: #512f1d !important; background: #ecddca !important; }
.home-capabilities { color: #2b241c !important; }
.feature-heading { border-bottom-color: #d8ccbd !important; }
.feature-heading h2 { color: #2b241c !important; font-family: Georgia, serif !important; }
.feature { border-color: #ddd2c3 !important; }
.feature-index { color: #9f6a17 !important; }
.feature h3 { color: #342c23 !important; }
.feature p { color: #6b6054 !important; }

/* Shared pages, cards and navigation */
.entity-head,
.section,
.split .section,
.explore-menu,
.explore-content,
.ranking-card,
.calculator-hero,
.calc-card {
  color: #2b241c !important;
  border-color: #ddd1c1 !important;
  background: #fffdf8 !important;
  box-shadow: 0 9px 28px rgba(79, 58, 34, .055) !important;
}
.entity-head { background: linear-gradient(135deg, #fffdf8, #f6eddf) !important; }
.entity-badge { color: #2b241c !important; background: #eee4d7 !important; }
.entity-badge .fallback { color: #96562f !important; }
.entity-title h1,
.entity-score strong,
.section-head h2,
.calculator-head h2,
.ranking-card h2,
.explore-menu h1 { color: #2b241c !important; }
.entity-meta,
.entity-score span,
.section-head p,
.calculator-head p,
.ranking-card p { color: #706558 !important; }
.entity-meta a { color: #874923 !important; }
.entity-nav a { color: #6e6357 !important; }
.entity-nav a:hover { color: #4b392b !important; background: #eee4d7 !important; }
.entity-nav a.active {
  color: #5f361f !important;
  border-color: #c9a281 !important;
  background: #ead9c5 !important;
  box-shadow: inset 0 -2px #96562f !important;
}
.section-head p,
.stat span,
.stat small { color: #716659 !important; }
.stat {
  color: #2b241c !important;
  border-color: #e1d6c7 !important;
  background: #f8f2e9 !important;
}
.stat strong { color: #2d261e !important; }
.note { color: #5d513f !important; border-left-color: #a66f17 !important; background: #f6ecd2 !important; }
.description { color: #5e554a !important; }
.label {
  color: #5d544a !important;
  border-color: #d9cebe !important;
  background: #f7f1e8 !important;
}
.empty { color: #716659 !important; border-color: #cfc1af !important; background: rgba(255,253,248,.64) !important; }
.error { color: #963f38 !important; border-color: #deb7ae !important; background: #fbebe7 !important; }
.small-button,
.select-input,
.filter-button {
  color: #4f463d !important;
  border-color: #d5c8b8 !important;
  background: #fffaf3 !important;
}
.small-button.primary,
.filter-button.active {
  color: #fffaf3 !important;
  border-color: #96562f !important;
  background: #96562f !important;
}

/* Data tables */
.table-wrap { border-color: #d9cebe !important; background: #fffdf8 !important; }
table,
table:not(.eq-matchup-table) {
  color: #2b241c !important;
  background: #fffdf8 !important;
}
th,
table:not(.eq-matchup-table) th {
  color: #665b4e !important;
  border-color: #d9cebe !important;
  background: #eee5d8 !important;
}
td,
table:not(.eq-matchup-table) td {
  color: #342c23 !important;
  border-color: #e8dfd3 !important;
  background: transparent !important;
}
tbody tr:hover { background: #f5ede2 !important; }
.name-cell a { color: #352c23 !important; }
.name-cell a:hover strong { color: #7f4525 !important; }
.name-cell span { color: #74695c !important; }
.result.win { color: #246846 !important; background: #e3f0e7 !important; }
.result.loss { color: #963f38 !important; background: #f5e2de !important; }
.result.tie { color: #725b20 !important; background: #f3ead0 !important; }
.achievement,
.round-card,
.raid-card { color: #2b241c !important; border-color: #dfd4c5 !important; background: #fbf7f0 !important; }
.achievement p,
.round-no,
.round-clan span,
.round-score span,
.raid-card time,
.raid-stats span { color: #716659 !important; }

/* Forms — explicit foregrounds prevent native white-on-white controls */
input,
select,
textarea,
.explore-form input,
.ranking-card input,
.control-group select,
.army-search input,
.def-building-card select,
.def-b-row select {
  color: #2b241c !important;
  border-color: #cfc1af !important;
  background: #fffdf9 !important;
}
input::placeholder,
textarea::placeholder { color: #8d8275 !important; opacity: 1; }
input:focus,
select:focus,
textarea:focus {
  border-color: #96562f !important;
  box-shadow: 0 0 0 3px rgba(150, 86, 47, .12) !important;
  outline: 0;
}
.explore-menu button { color: #655b50 !important; }
.explore-menu button:hover { color: #3a3027 !important; background: #f1e8dc !important; }
.explore-menu button.active { color: #673a22 !important; background: #ead8c3 !important; }
.calculator-th-badge,
.calc-summary-banner,
.calc-card-icon { color: #2b241c !important; border-color: #ddd0bd !important; background: #f4ebdf !important; }
.calculator-th-badge strong { color: #874923 !important; }
.calc-card-body strong { color: #2b241c !important; }
.calc-card-body span,
.calc-card-body small,
.calc-banner-info p { color: #6d6255 !important; }

/* Army and legacy detailed cards */
.army-overview {
  color: #2b241c !important;
  border-color: #d5c6b1 !important;
  background: linear-gradient(128deg, #fffdf7, #f5ecdc 58%, #eadbc3) !important;
  box-shadow: var(--shadow) !important;
}
.army-eyebrow,
.item-group-kicker { color: #96562f !important; }
.army-intro h2,
.army-quick-stats strong,
.army-linear-meta strong,
.army-village-head h2,
.army-village-head > strong,
.item-group-title h3,
.item-group-metrics strong,
.army-result-line span:first-child { color: #2b241c !important; }
.army-intro p,
.army-quick-stats span,
.army-linear-meta,
.army-result-line { color: #706558 !important; }
.army-progress-ring { background: conic-gradient(#9b7132 var(--army-progress), rgba(161,130,83,.18) 0) !important; }
.army-progress-ring > div { background: #fffaf0 !important; }
.army-progress-ring strong { color: #2b241c !important; }
.army-quick-stats > div { border-color: rgba(130,99,58,.18) !important; background: rgba(255,253,248,.72) !important; }
.army-linear-track,
.progress { border-color: #d9cdbd !important; background: #e9e1d5 !important; }
.army-linear-track i,
.progress i { background: linear-gradient(90deg, #7b6244, #ba8541) !important; }
.army-village,
.army-village.builder-village { color: #2b241c !important; border-color: #d8cbbb !important; background: #fffdf8 !important; }
.army-filter { color: #675c50 !important; border-color: #d9cebf !important; background: #fbf7f0 !important; }
.army-filter.active { color: #fffaf1 !important; border-color: #76553c !important; background: #76553c !important; }
.item-group + .item-group { border-color: #e2d8ca !important; }
.item-group-metrics span { color: #665c50 !important; background: #eee5d8 !important; }
.unit-card,
.hero-card-detail,
.troop-card-detail {
  color: #2b241c !important;
  border-color: #ddd1c1 !important;
  background: #fbf7f0 !important;
  box-shadow: 0 5px 16px rgba(72, 56, 32, .06) !important;
}
.unit-card.maxed,
.hero-card-detail.is-maxed,
.troop-card-detail.is-maxed { border-color: #c6aa68 !important; background: #fff8e7 !important; }
.unit-art,
.unit-art.spells,
.unit-art.equipment,
.unit-art.heroes,
.hero-card-art,
.troop-detail-art { background: radial-gradient(circle at 50% 65%, #fffdf8, #eadfce) !important; }
.unit-name,
.unit-level strong,
.hero-card-name,
.hero-card-lvl-text strong,
.troop-detail-name,
.troop-detail-lvl-row strong { color: #30281f !important; }
.unit-level span,
.unit-note,
.hero-village-badge,
.hero-card-lvl-text,
.hero-card-lvl-text small,
.hero-card-pct,
.hero-equipped-label,
.troop-detail-lvl-row,
.troop-detail-lvl-row small,
.troop-detail-pct { color: #74695c !important; }
.hero-card-bar-track,
.troop-detail-bar-track { background: #e3d8c8 !important; }
.hero-card-equipped-row { border-color: #e2d8ca !important; }
.hero-equipped-mini-badge { color: #4c4238 !important; border-color: #d7cabb !important; background: #f2e9dc !important; }

/* Equipment catalog and detail pages */
.eq-detail-page,
.eq-catalog-page { color: #2b241c !important; }
.eq-back-btn,
.eq-catalog-link {
  color: #5f5145 !important;
  border-color: #d3c6b5 !important;
  background: #fffaf3 !important;
}
.eq-back-btn:hover,
.eq-catalog-link:hover { color: #60361f !important; border-color: #b99a7c !important; background: #efe3d4 !important; }
.eq-page-banner {
  color: #2b241c !important;
  border-color: #d5c7b5 !important;
  background: linear-gradient(135deg, #fffdf8, #f1e6d7) !important;
  box-shadow: 0 10px 30px rgba(70, 50, 29, .08) !important;
}
.eq-page-banner.rarity-epic { border-color: #c9acd8 !important; box-shadow: 0 10px 30px rgba(114,74,135,.09) !important; }
.eq-page-banner.rarity-common { border-color: #9fb9ad !important; box-shadow: 0 10px 30px rgba(74,112,95,.08) !important; }
.eq-banner-art-wrap { border-color: #d5c7b5 !important; background: #fffaf2 !important; }
.eq-banner-title,
.eq-player-status-head strong,
.eq-player-status-lvl strong,
.eq-ore-body strong,
.eq-catalog-name { color: #2b241c !important; }
.eq-banner-orig-name,
.eq-banner-progress-copy,
.eq-player-status-head,
.eq-player-status-lvl small,
.eq-player-status-lvl span,
.eq-ore-body span,
.eq-ore-body small,
.eq-catalog-sub,
.eq-catalog-meta,
.eq-catalog-count { color: #716659 !important; }
.eq-banner-progress-copy strong { color: #2b241c !important; }
.eq-banner-hero-tag { color: #765229 !important; }
.eq-guide-kicker { color: #704680 !important; }
.eq-badge-type,
.eq-badge-max,
.eq-badge-th,
.eq-tag-b,
.eq-tag-th { color: #5c5145 !important; border-color: #d5c8b8 !important; background: #f2e9dc !important; }
.eq-badge-rarity.common { color: #315f50 !important; border-color: #9fb9ad !important; background: #e5efe9 !important; }
.eq-badge-rarity.epic { color: #704387 !important; border-color: #c9acd8 !important; background: #f0e4f5 !important; }
.eq-player-status-card,
.eq-ore-card {
  color: #2b241c !important;
  border-color: #ddd1c1 !important;
  background: #f8f2e9 !important;
}
.eq-player-status-bar { background: #e2d6c6 !important; }
.eq-levels-table,
.eq-levels-table tbody { color: #2b241c !important; background: #fffdf8 !important; }
.eq-levels-table th { color: #665b4e !important; border-color: #d9cebe !important; background: #eee5d8 !important; }
.eq-levels-table td { color: #342c23 !important; border-color: #e7ddd0 !important; }
.eq-row-current { background: #fff0dc !important; }
.eq-row-current td { color: #673b22 !important; border-color: #d8a97d !important; }
.eq-sibling-chip {
  color: #4e4439 !important;
  border-color: #d7cabb !important;
  background: #f8f2e9 !important;
}
.eq-sibling-chip:hover { color: #5f351f !important; border-color: #bda085 !important; background: #eee2d3 !important; }
.eq-catalog-card {
  color: #2b241c !important;
  border-color: #ddd1c1 !important;
  background: #fffaf3 !important;
  box-shadow: 0 5px 16px rgba(72,56,32,.055) !important;
}
.eq-catalog-card:hover { border-color: #bda98f !important; background: #f7eee2 !important; }
.eq-catalog-card.rarity-epic { border-color: #ceb5da !important; }
.eq-catalog-card.rarity-common { border-color: #a9bfb5 !important; }
.eq-catalog-art { background: #f0e6d8 !important; }
.eq-catalog-rarity.epic { color: #74428c !important; }
.eq-catalog-rarity.common { color: #336453 !important; }
.eq-catalog-guide { color: #74551d !important; border-color: #c9ad73 !important; background: #f6ebce !important; }

/* The meta laboratory remains a deliberate dark analysis island. */
.eq-matchup-section {
  color: #ece6dc !important;
  border-color: rgba(171, 137, 76, .42) !important;
  background: linear-gradient(145deg, #1b1914, #121419 60%) !important;
  box-shadow: 0 16px 34px rgba(56, 42, 24, .14) !important;
}
.eq-matchup-head h2 { color: #fff2d7 !important; }
.eq-matchup-head p { color: #b8afa1 !important; }
.eq-matchup-head p strong { color: #f0ca70 !important; }
.eq-matchup-mode-note { color: #a9a194 !important; }
.eq-matchup-summary span { color: #bcb3a5 !important; background: rgba(255,255,255,.045) !important; }
.eq-matchup-summary strong,
.eq-min-level { color: #f0ca70 !important; }
.eq-matchup-summary small,
.eq-combo-explainer span,
.eq-matchup-caveat,
.eq-data-note { color: #9f978b !important; }
.eq-matchup-table-wrap { border-color: rgba(255,255,255,.1) !important; background: #111318 !important; }
.eq-matchup-table,
.eq-matchup-table tbody { color: #e9e3d9 !important; background: #111318 !important; }
.eq-matchup-table th { color: #aaa297 !important; border-color: rgba(255,255,255,.09) !important; background: #191b21 !important; }
.eq-matchup-table td { color: #ddd6ca !important; border-color: rgba(255,255,255,.07) !important; background: transparent !important; }
.eq-matchup-table td:first-child strong { color: #fffaf1 !important; }
.eq-matchup-table td:first-child small { color: #9d9589 !important; }
.eq-matchup-table tbody tr:hover { background: rgba(255,255,255,.045) !important; }
.eq-min-level.impossible { color: #dea298 !important; }
.eq-data-note a { color: #d9bd7c !important; }

/* Clan views use the same shell and theme tokens as the rest of the app. */
html[data-theme] body.clan-landing {
  color: var(--ink) !important;
  background: var(--paper) !important;
  background-image: none !important;
}
html[data-theme] body.clan-landing .site-header { display: grid !important; }
html[data-theme] body.clan-landing #app {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 24px 20px 72px !important;
  color: var(--ink) !important;
  background: transparent !important;
}
html[data-theme] .cl-view,
html[data-theme] .cl-admin-view { color: var(--ink) !important; }
html[data-theme] .cl-topbar { border-color: var(--line) !important; }
html[data-theme] .cl-page-heading,
html[data-theme] .cl-clan-name,
html[data-theme] .cl-stat-num,
html[data-theme] .cl-trophy,
html[data-theme] .cl-p-name,
html[data-theme] .cl-section-title,
html[data-theme] .cl-admin-head h1 { color: var(--ink) !important; }
html[data-theme] .cl-page-sub,
html[data-theme] .cl-tag,
html[data-theme] .cl-league,
html[data-theme] .cl-desc,
html[data-theme] .cl-stat-lbl,
html[data-theme] .cl-p-tag,
html[data-theme] .cl-th,
html[data-theme] .cl-td-rank,
html[data-theme] .cl-war-meta-sep,
html[data-theme] .cl-war-size,
html[data-theme] .cl-war-vs,
html[data-theme] .cl-war-strip-score,
html[data-theme] .cl-war-strip-score small,
html[data-theme] .cl-admin-head p { color: var(--muted) !important; }
html[data-theme] .cl-btn-sync,
html[data-theme] .cl-tab-chip,
html[data-theme] .cl-link-action,
html[data-theme] .cl-btn-detail,
html[data-theme] .cl-seg-control,
html[data-theme] .cl-admin-head a {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}
html[data-theme] .cl-btn-sync:hover,
html[data-theme] .cl-link-action:hover,
html[data-theme] .cl-btn-detail:hover { border-color: var(--accent) !important; background: var(--subtle) !important; }
html[data-theme] .cl-tab-chip.active,
html[data-theme] .cl-seg-btn.active { color: #fff !important; border-color: var(--accent) !important; background: var(--accent) !important; }
html[data-theme] .cl-tab-chip small { color: var(--muted) !important; }
html[data-theme] .cl-tab-chip.active small { color: #fff !important; }
html[data-theme] .cl-card,
html[data-theme] .cl-roster-wrap,
html[data-theme] .cl-table-outer,
html[data-theme] .cl-admin-view {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html[data-theme] .cl-card:hover { border-color: var(--accent) !important; }
html[data-theme] .cl-card-header,
html[data-theme] .cl-desc,
html[data-theme] .cl-stats-bar,
html[data-theme] .cl-war-strip,
html[data-theme] .cl-toolbar,
html[data-theme] .cl-admin-head { color: var(--ink) !important; border-color: var(--line) !important; background: var(--surface-2) !important; }
html[data-theme] .cl-pill-lvl,
html[data-theme] .cl-count-tag { color: var(--accent) !important; border-color: var(--line) !important; background: var(--accent-soft) !important; }
html[data-theme] .cl-war-state-text { color: var(--bad) !important; }
html[data-theme] .cl-war-clock,
html[data-theme] .cl-war-stars { color: var(--warn) !important; }
html[data-theme] .cl-search-wrapper input,
html[data-theme] .cl-admin-edit input { color: var(--ink) !important; border-color: var(--line) !important; background: var(--control) !important; }
html[data-theme] .cl-search-wrapper input::placeholder { color: var(--muted) !important; }
html[data-theme] .cl-seg-btn { color: var(--muted) !important; }
html[data-theme] .cl-seg-btn:hover { color: var(--ink) !important; }
html[data-theme] .cl-table,
html[data-theme] .cl-admin-table { color: var(--ink) !important; background: var(--surface) !important; }
html[data-theme] .cl-table th,
html[data-theme] .cl-admin-table th { color: var(--muted) !important; border-color: var(--line) !important; background: var(--surface-2) !important; }
html[data-theme] .cl-table td,
html[data-theme] .cl-admin-table td { color: var(--ink) !important; border-color: var(--line) !important; background: var(--surface) !important; }
html[data-theme] .cl-tr,
html[data-theme] .cl-admin-table tbody tr { background: var(--surface) !important; }
html[data-theme] .cl-tr:hover,
html[data-theme] .cl-admin-table tbody tr:hover td { background: var(--surface-2) !important; }
html[data-theme] body.clan-landing table,
html[data-theme] body.clan-landing .cl-table { color: var(--ink) !important; background: var(--surface) !important; }
html[data-theme] body.clan-landing th,
html[data-theme] body.clan-landing .cl-table th { color: var(--muted) !important; border-color: var(--line) !important; background: var(--surface-2) !important; }
html[data-theme] body.clan-landing td,
html[data-theme] body.clan-landing .cl-table td { color: var(--ink) !important; border-color: var(--line) !important; background: var(--surface) !important; }
html[data-theme] body.clan-landing tbody tr,
html[data-theme] body.clan-landing .cl-tr { background: var(--surface) !important; }
html[data-theme] body.clan-landing tbody tr:hover,
html[data-theme] body.clan-landing .cl-tr:hover { background: var(--surface-2) !important; }
html[data-theme] .cl-empty-state { color: var(--muted) !important; background: var(--surface-2) !important; }
html[data-theme] .cl-don-up { color: var(--good) !important; }
html[data-theme] .cl-don-down,
html[data-theme] .cl-don-alltime .cl-don-down,
html[data-theme] .cl-role-member { color: var(--muted) !important; }
html[data-theme] .cl-don-alltime .cl-don-up,
html[data-theme] .cl-war-clock,
html[data-theme] .cl-war-stars,
html[data-theme] .role-leader { color: var(--warn) !important; }
html[data-theme] .role-co { color: #ba96d5 !important; }
html[data-theme] .role-elder { color: var(--good) !important; }
html[data-theme] .cl-admin-edit button { color: #fff !important; border-color: var(--accent) !important; background: var(--accent) !important; }

/* Clan donation admin — protect its light table from global table rules */
.cl-admin-view { color: #2c241b !important; background: #f5efe4 !important; }
.cl-admin-head { color: #2c241b !important; border-color: #dacdbb !important; background: linear-gradient(135deg, #fffaf0, #eadbc4) !important; }
.cl-admin-head h1 { color: #2c241b !important; }
.cl-admin-head p { color: #6f6252 !important; }
.cl-admin-table { color: #2c241b !important; background: #fffdf8 !important; }
.cl-admin-table th { color: #6d5e4e !important; border-color: #ded2c1 !important; background: #eee4d5 !important; }
.cl-admin-table td { color: #2c241b !important; border-color: #e6dccd !important; background: #fffdf8 !important; }
.cl-admin-table tbody tr:hover td { background: #f8f0e4 !important; }
.cl-admin-edit input { color: #2c241b !important; border-color: #cdbda8 !important; background: #fff !important; }
.cl-admin-edit button { color: #fffaf1 !important; border-color: #76513a !important; background: #76513a !important; }

/* ClashSpot research view stays dark by design, but gets readable contrast. */
.cs-troops-page {
  margin: 0 -2px;
  padding: 22px 20px 42px;
  border: 1px solid #292b32;
  border-radius: 16px;
  color: #ececf0 !important;
  background: #101116 !important;
  box-shadow: 0 18px 44px rgba(64, 46, 29, .13);
}
.cs-troops-page .cs-research-group { border-color: #2a2c33 !important; background: #17181e !important; }
.cs-troops-page .cs-research-title,
.cs-troops-page .cs-research-label { color: #f4f1eb !important; }
.cs-troops-page .cs-research-meta,
.cs-troops-page .cs-research-progress-label { color: #aaa7a1 !important; }

@media (max-width: 680px) {
  .cs-troops-page { margin-inline: -4px; padding: 16px 10px 32px; border-radius: 12px; }
  .eq-page-banner { padding: 18px !important; }
  .eq-banner-main { align-items: flex-start; gap: 13px; }
  .eq-banner-art-wrap { width: 70px; height: 70px; }
  .eq-banner-img { width: 58px; height: 58px; }
  .eq-banner-title { font-size: 21px; }
  .cl-card { padding: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME AND CATALOG
   ═══════════════════════════════════════════════════════════════════════════ */

.home-database { padding-top: 4px; }

.db-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr);
  min-height: 610px;
  overflow: hidden;
  border: 1px solid #cfbfa9;
  border-radius: 24px;
  background: #fffdf8;
  box-shadow: 0 30px 76px rgba(72, 49, 25, .14);
}

.db-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5.5vw, 72px);
  background:
    linear-gradient(140deg, rgba(255,255,255,.55), transparent 58%),
    linear-gradient(145deg, #fffdf8, #f2e5d3);
}

.db-kicker {
  display: block;
  color: #96562f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.db-hero h1 {
  max-width: 610px;
  margin: 14px 0 0;
  color: #2b241c !important;
  font: 700 clamp(45px, 5vw, 66px)/.98 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.047em;
}

.db-hero-copy > p {
  max-width: 570px;
  margin: 22px 0 0;
  color: #62584c;
  font-size: 14px;
  line-height: 1.72;
}

.db-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.db-primary-link,
.db-secondary-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}
.db-primary-link { color: #fffaf3; border: 1px solid #7d4528; background: #96562f; box-shadow: 0 8px 20px rgba(113,61,32,.16); }
.db-primary-link:hover { background: #7d4528; }
.db-secondary-link { color: #633a24; border: 1px solid #cbb8a1; background: rgba(255,253,248,.72); }
.db-secondary-link:hover { background: #eddfcd; }

.db-universe-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #dbcebd;
}
.db-universe-stats span { color: #7a6f62; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.db-universe-stats strong { display: block; margin-bottom: 3px; color: #2b241c; font: 700 21px Georgia, serif; }

.db-search-stage {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: end;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,218,151,.26), transparent 16rem),
    linear-gradient(145deg, #4c3426, #251e1a 62%, #17171a);
}
.db-stage-art { position: absolute; inset: 5px 0 auto; height: 250px; overflow: hidden; pointer-events: none; }
.db-stage-art > span { position: absolute; width: 300px; height: 170px; left: 50%; top: 35px; transform: translateX(-50%); border-radius: 50%; background: rgba(255,226,171,.18); filter: blur(25px); }
.db-stage-art img { position: absolute; z-index: 1; object-fit: contain; filter: drop-shadow(0 15px 14px rgba(0,0,0,.33)); }
.db-stage-art .home-art-king { width: 185px; height: 205px; left: calc(50% - 89px); top: 7px; }
.db-stage-art .home-art-dragon { width: 132px; height: 145px; left: calc(50% + 59px); top: 78px; }
.db-stage-art .home-art-spell { width: 92px; height: 92px; left: calc(50% - 164px); top: 113px; }
.db-search-card { padding: 25px !important; }

.db-directory,
.db-intelligence,
.building-category-section,
.building-levels-section { padding: 66px 3px 6px; }

.db-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 21px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d8ccbc;
}
.db-section-heading h2 { margin: 5px 0 0; color: #2b241c; font: 700 27px Georgia, serif; letter-spacing: -.02em; }
.db-section-heading > p { max-width: 460px; margin: 0; color: #6e6357; font-size: 11px; line-height: 1.55; text-align: right; }

.db-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.db-module-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 13px;
  min-height: 195px;
  padding: 20px;
  border: 1px solid #ddd1c1;
  border-radius: 14px;
  color: #2b241c;
  background: #fffdf8;
  box-shadow: 0 7px 22px rgba(72,53,31,.055);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.db-module-card:hover { transform: translateY(-3px); border-color: #bca184; box-shadow: 0 15px 30px rgba(72,53,31,.11); }
.db-module-card.featured { background: linear-gradient(145deg, #fffdf8, #f4e8d6); }
.db-module-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #dacbb8; border-radius: 11px; background: #f2e7d7; font-size: 20px; }
.db-module-card small { color: #96562f; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.db-module-card h3 { margin: 6px 0 6px; color: #30281f; font-size: 15px; }
.db-module-card p { margin: 0; color: #6f6457; font-size: 10px; line-height: 1.55; }
.db-module-card > b { position: absolute; left: 75px; bottom: 18px; color: #7b4527; font-size: 9px; }

.db-intelligence { padding-bottom: 48px; }
.db-intelligence-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid #d9cebe; border-radius: 15px; overflow: hidden; background: #fffdf8; }
.db-intelligence-grid > a { display: grid; grid-template-columns: auto 1fr; gap: 15px; min-height: 150px; padding: 22px; color: #2b241c; border-right: 1px solid #e0d6c8; text-decoration: none; }
.db-intelligence-grid > a:last-child { border-right: 0; }
.db-intelligence-grid > a:hover { background: #f6ede1; }
.db-intelligence-grid > a > span { color: #a66f17; font: italic 18px Georgia, serif; }
.db-intelligence-grid small { color: #96562f; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.db-intelligence-grid h3 { margin: 6px 0 7px; font-size: 14px; }
.db-intelligence-grid p { margin: 0; color: #6f6457; font-size: 10px; line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUILDING DATABASE
   ═══════════════════════════════════════════════════════════════════════════ */

.building-catalog-page,
.building-detail-page { max-width: 1160px; margin: 0 auto; padding: 12px 4px 64px; color: #2b241c; }

.building-catalog-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 30px;
  align-items: end;
  padding: 34px;
  border: 1px solid #d4c5b1;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdf8, #eedfc9);
  box-shadow: 0 18px 48px rgba(73,51,27,.1);
}
.building-catalog-hero h1 { max-width: 680px; margin: 9px 0 8px; color: #2b241c; font: 700 39px/1.04 Georgia, serif; letter-spacing: -.035em; }
.building-catalog-hero p { max-width: 720px; margin: 0; color: #685d50; font-size: 12px; line-height: 1.65; }
.building-catalog-scope { min-width: 240px; padding: 13px 15px; border: 1px solid #cdb89b; border-radius: 10px; background: rgba(255,253,248,.68); }
.building-catalog-scope strong,
.building-catalog-scope span { display: block; }
.building-catalog-scope strong { color: #704127; font-size: 11px; }
.building-catalog-scope span { margin-top: 4px; color: #716659; font-size: 9px; line-height: 1.45; }

.building-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.building-catalog-card {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 190px;
  padding: 20px;
  border: 1px solid #d8ccbc;
  border-radius: 15px;
  color: #2b241c;
  background: #fffdf8;
  box-shadow: 0 8px 26px rgba(75,54,31,.06);
  text-decoration: none;
}
.building-catalog-card:hover { border-color: #af8d68; transform: translateY(-2px); box-shadow: 0 15px 32px rgba(75,54,31,.11); }
.building-catalog-art { display: grid; height: 145px; place-items: center; border-radius: 12px; background: radial-gradient(circle, #fffaf0, #eadcc7); }
.building-catalog-art img { width: 125px; height: 125px; object-fit: contain; filter: drop-shadow(0 9px 9px rgba(70,48,25,.22)); }
.building-catalog-copy > span { color: #96562f; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.building-catalog-copy h3 { margin: 6px 0 3px; font: 700 24px Georgia, serif; }
.building-catalog-copy p { margin: 0; color: #716659; font-size: 10px; }
.building-catalog-copy > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.building-catalog-copy b { padding: 4px 6px; border: 1px solid #ded1c0; border-radius: 5px; color: #5f5448; background: #f6eee2; font-size: 8px; }
.building-catalog-card > strong { align-self: end; color: #7b4527; font-size: 9px; white-space: nowrap; }

.building-catalog-hero-all { align-items: center; }
.building-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid #d9cebe;
  border-radius: 12px;
  background: #fffdf8;
}
.building-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.building-filter-chips button {
  padding: 7px 9px;
  border: 1px solid #d7cabb;
  border-radius: 7px;
  color: #665b4e;
  background: #f5ede1;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.building-filter-chips button:hover { color: #4d301f; border-color: #bda187; background: #eee1d1; }
.building-filter-chips button.active { color: #fffaf3; border-color: #76513a; background: #76513a; }
.building-filter-chips small { margin-left: 3px; opacity: .76; font-size: 8px; }
.building-catalog-search { display: grid; grid-template-columns: auto minmax(170px,230px); align-items: center; gap: 8px; flex: 0 0 auto; }
.building-catalog-search > span { color: #75695c; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.building-catalog-search input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cfc1af;
  border-radius: 7px;
  color: #2b241c;
  background: #fffdf9;
  font: inherit;
  font-size: 10px;
  outline: 0;
}
.building-catalog-search input:focus { border-color: #9b7558; box-shadow: 0 0 0 3px rgba(123,81,53,.09); }
.building-catalog-grid-all { grid-template-columns: repeat(3, minmax(0,1fr)); }
.building-catalog-card-all { grid-template-columns: 94px minmax(0,1fr); gap: 13px; min-height: 162px; padding: 14px; }
.building-catalog-card-all .building-catalog-art { height: 104px; }
.building-catalog-card-all .building-catalog-art img { width: 90px; height: 90px; }
.building-catalog-card-all .building-catalog-copy h3 { font-size: 17px; }
.building-catalog-card-all .building-catalog-copy > div { margin-top: 9px; }
.building-catalog-card-all > strong { grid-column: 1 / -1; justify-self: end; }
.building-catalog-card[hidden] { display: none !important; }
.building-catalog-source { margin-top: 18px; }

.building-back-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 15px; }
.building-back-row a { padding: 7px 10px; border: 1px solid #d3c6b5; border-radius: 7px; color: #5f5145; background: #fffaf3; font-size: 10px; font-weight: 750; text-decoration: none; }
.building-back-row a:hover { color: #60361f; border-color: #b99a7c; background: #efe3d4; }

.building-detail-hero {
  display: grid;
  grid-template-columns: 205px minmax(0,1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 1px solid #d3c4af;
  border-radius: 18px;
  background: linear-gradient(130deg, #fffdf8, #f0dfc6);
  box-shadow: 0 18px 48px rgba(73,51,27,.1);
}
.building-detail-art { display: grid; width: 205px; height: 190px; place-items: center; border: 1px solid #d8c5a8; border-radius: 15px; background: radial-gradient(circle, #fffaf0, #e4d1b4); }
.building-detail-art img { width: 165px; height: 165px; object-fit: contain; filter: drop-shadow(0 12px 11px rgba(67,44,22,.25)); }
.building-detail-copy h1 { margin: 7px 0 7px; color: #2b241c; font: 700 40px/1 Georgia, serif; letter-spacing: -.035em; }
.building-detail-copy p { max-width: 650px; margin: 0; color: #655b4e; font-size: 11px; line-height: 1.65; }
.building-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.building-traits span { padding: 5px 7px; border: 1px solid #d7c7b2; border-radius: 6px; color: #5f5448; background: rgba(255,253,248,.64); font-size: 8px; font-weight: 750; }
.building-detail-max { min-width: 126px; padding: 15px; border: 1px solid #b99972; border-radius: 11px; background: #7b5135; text-align: center; }
.building-detail-max span,
.building-detail-max strong,
.building-detail-max small { display: block; color: #fff7eb; }
.building-detail-max span { font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.building-detail-max strong { margin-top: 5px; font: 700 17px Georgia, serif; }
.building-detail-max small { margin-top: 3px; color: #e7cfb7; font-size: 9px; }

.building-total-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 9px;
  margin-top: 13px;
  padding: 15px;
  border: 1px solid #d8ccbc;
  border-radius: 13px;
  background: #fffdf8;
}
.building-total-strip > div { padding: 11px 13px; border: 1px solid #e0d5c5; border-radius: 8px; background: #f8f2e9; }
.building-total-strip small,
.building-total-strip strong { display: block; }
.building-total-strip small { color: #74695c; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.building-total-strip strong { margin-top: 5px; color: #2b241c; font-size: 15px; }
.building-total-strip p { grid-column: 1 / -1; margin: 2px 2px 0; color: #776c60; font-size: 9px; line-height: 1.5; }
.building-summary-grid { grid-template-columns: repeat(auto-fit, minmax(165px,1fr)); }

.building-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; }
.building-level-card { overflow: hidden; border: 1px solid #d9cebe; border-radius: 13px; background: #fffdf8; box-shadow: 0 6px 19px rgba(72,53,31,.055); }
.building-level-card:hover { border-color: #bca184; transform: translateY(-2px); box-shadow: 0 14px 27px rgba(72,53,31,.11); }
.building-level-art { position: relative; display: grid; height: 150px; place-items: center; background: radial-gradient(circle at 50% 55%, #fffaf0, #eadbc5 70%); }
.building-level-art img { width: 125px; height: 125px; object-fit: contain; filter: drop-shadow(0 9px 8px rgba(67,44,22,.22)); }
.building-level-art > span { position: absolute; top: 9px; right: 9px; padding: 3px 5px; border: 1px solid #cdb594; border-radius: 4px; color: #684128; background: rgba(255,250,240,.88); font-size: 8px; font-weight: 850; }
.building-level-head { display: flex; align-items: baseline; gap: 6px; padding: 12px 13px 7px; }
.building-level-head > span { color: #786d60; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.building-level-head > strong { color: #2b241c; font: 700 22px Georgia, serif; }
.building-level-head > b { margin-left: auto; padding: 2px 4px; border-radius: 3px; color: #76541a; background: #f3e4bd; font-size: 7px; }
.building-level-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 13px; }
.building-level-stats.is-single { grid-template-columns: 1fr; }
.building-level-stats > span { padding: 8px; border: 1px solid #e3d8c9; border-radius: 7px; background: #f8f2e9; }
.building-level-stats small,
.building-level-stats strong { display: block; }
.building-level-stats small { color: #776d61; font-size: 7px; font-weight: 850; }
.building-level-stats strong { margin-top: 3px; color: #2b241c; font-size: 14px; }
.building-level-arrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 9px 13px 0; padding: 7px 8px; border-left: 2px solid #9c623c; color: #6b5e50; background: #f5eadb; font-size: 8px; }
.building-level-arrow strong { color: #794425; }
.building-level-arrow { text-decoration: none; }
.building-level-upgrade { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; margin-top: 10px; padding: 10px 13px; border-top: 1px solid #e2d7c8; background: #f9f4ec; }
.building-level-upgrade small { grid-column: 1 / -1; color: #7c7165; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.building-level-upgrade strong { color: #725221; font-size: 10px; }
.building-level-upgrade span { color: #6f6457; font-size: 9px; text-align: right; }

.building-upgrade-table-section { margin-top: 55px !important; }
.building-upgrade-table td:first-child strong { display: inline-block; min-width: 20px; }
.building-upgrade-table td:first-child small { margin-left: 5px; padding: 2px 4px; border-radius: 3px; color: #74541d; background: #f2e2b9; font-size: 7px; }
.building-upgrade-table a { color: #7c4526; font-weight: 800; text-decoration: none; }
.building-source-note { margin: 11px 0 0; color: #776c60; font-size: 9px; }
.building-source-note a { color: #7b4527; }
.eq-catalog-page-title { margin: 4px 0 6px; color: #2b241c; font: 700 28px Georgia, serif; }

@media (max-width: 1000px) {
  .db-hero { grid-template-columns: 1fr 1fr; }
  .db-hero-copy { padding: 40px; }
  .db-universe-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .db-directory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .building-catalog-grid-all { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .building-level-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .building-detail-hero { grid-template-columns: 170px minmax(0,1fr); }
  .building-detail-art { width: 170px; height: 170px; }
  .building-detail-art img { width: 145px; height: 145px; }
  .building-detail-max { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
}

@media (max-width: 760px) {
  .db-hero { grid-template-columns: 1fr; }
  .db-search-stage { min-height: 560px; }
  .db-directory,
  .db-intelligence,
  .building-category-section,
  .building-levels-section { padding-top: 46px; }
  .db-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .db-section-heading > p { text-align: left; }
  .db-intelligence-grid { grid-template-columns: 1fr; }
  .db-intelligence-grid > a { border-right: 0; border-bottom: 1px solid #e0d6c8; }
  .db-intelligence-grid > a:last-child { border-bottom: 0; }
  .building-catalog-hero { grid-template-columns: 1fr; align-items: start; padding: 25px; }
  .building-catalog-grid { grid-template-columns: 1fr; }
  .building-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .building-catalog-search { grid-template-columns: auto minmax(0,1fr); }
  .building-catalog-card { grid-template-columns: 125px minmax(0,1fr); }
  .building-catalog-card > strong { grid-column: 2; }
  .building-catalog-art { height: 125px; }
  .building-catalog-art img { width: 108px; height: 108px; }
  .building-detail-hero { grid-template-columns: 130px minmax(0,1fr); gap: 18px; padding: 20px; }
  .building-detail-art { width: 130px; height: 140px; }
  .building-detail-art img { width: 118px; height: 118px; }
  .building-detail-copy h1 { font-size: 32px; }
  .building-level-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .building-total-strip { grid-template-columns: 1fr; }
  .building-total-strip p { grid-column: auto; }
}

@media (max-width: 500px) {
  .db-hero-copy { padding: 34px 23px; }
  .db-hero h1 { font-size: 42px !important; }
  .db-universe-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .db-directory-grid { grid-template-columns: 1fr; }
  .db-module-card { min-height: 180px; }
  .db-search-stage { min-height: 535px; padding: 14px; }
  .db-search-card { padding: 18px !important; }
  .building-catalog-card { grid-template-columns: 1fr; }
  .building-catalog-card > strong { grid-column: auto; }
  .building-catalog-card-all { grid-template-columns: 88px minmax(0,1fr); }
  .building-catalog-card-all > strong { grid-column: 1 / -1; }
  .building-detail-hero { grid-template-columns: 1fr; }
  .building-detail-art { width: 100%; }
  .building-detail-max { grid-column: auto; }
  .building-level-grid { grid-template-columns: 1fr; }
  .building-level-art { height: 175px; }
  .building-level-art img { width: 145px; height: 145px; }
}

.section-actions .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.cwl-public-wait {
  display: grid;
  min-height: 62px;
  margin-top: 11px;
  place-content: center;
  padding: 10px;
  border: 1px solid #c8b79e;
  border-radius: 11px;
  text-align: center;
  background: #eee5d8;
}
.cwl-public-wait strong { color: #5d4936; font-size: 11px; }
.cwl-public-wait small { margin-top: 4px; color: #867563; font-size: 9px; }
.cwl-admin-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 12px 14px;
  border: 1px solid #d7c6b0;
  border-radius: 10px;
  color: #6c5947;
  background: #f5ecdf;
  font-size: 10px;
}
.cwl-admin-summary strong { color: #38291f; }
.cwl-admin-summary a { margin-left: auto; color: #804826; font-weight: 800; text-decoration: none; }
.cwl-admin-form { display: flex; align-items: center; gap: 7px; min-width: 355px; }
.cwl-admin-toggle { display: inline-flex; align-items: center; gap: 5px; color: #5d5145; font-size: 9px; font-weight: 750; white-space: nowrap; }
.cwl-admin-toggle input { accent-color: #8d512c; }
.cwl-admin-form select, .cwl-admin-form button {
  min-height: 31px;
  border: 1px solid #d0c0ad;
  border-radius: 7px;
  color: #483b30;
  background: #fffaf2;
  font-size: 9px;
  font-weight: 750;
}
.cwl-admin-form select { min-width: 140px; padding: 0 7px; }
.cwl-admin-form button { padding: 0 11px; color: #fff8ef; border-color: #805039; background: #805039; cursor: pointer; }
.cwl-admin-form button:disabled { opacity: .48; cursor: not-allowed; }
.cwl-admin-in, .cwl-admin-out, .cwl-admin-auto-out {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.cwl-admin-in { color: #45603d; background: #e5eddf; }
.cwl-admin-out { color: #8c4034; background: #f4dfda; }
.cwl-admin-auto-out { color: #675e54; background: #e9e4dd; }

@media (max-width: 600px) {
  .cwl-admin-summary { align-items: flex-start; flex-direction: column; }
  .cwl-admin-summary a { margin-left: 0; }
}

.cwl-plinko-dialog {
  box-sizing: border-box;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: #edf3fb;
  background: #080d15;
}
.cwl-plinko-dialog[open] { display: flex; flex-direction: column; }
.cwl-plinko-dialog::backdrop { background: #020916; }
.cwl-plinko-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px;
  border-bottom: 1px solid #293344;
  background: #101722;
}
.cwl-plinko-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cwl-plinko-actions { display: flex; align-items: center; gap: 6px; }
.cwl-plinko-head h3 { margin: 0; color: #f3ead6; font: 650 18px/1 system-ui, sans-serif; letter-spacing: .08em; }
.cwl-plinko-test-badge { padding: 4px 8px; border: 1px solid #826b38; border-radius: 999px; color: #f0d481; background: #322b1d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cwl-plinko-dialog .cwl-plinko-head .small-button { appearance: none; min-height: 30px; padding: 0 12px; border: 1px solid #414b58 !important; border-radius: 6px !important; color: #d9cfba !important; background: rgba(24, 31, 42, .9) !important; box-shadow: none !important; font: 650 12px/1 system-ui, sans-serif; }
.cwl-plinko-dialog .cwl-plinko-head .small-button:hover { color: #f3ead6 !important; border-color: #6a7480 !important; background: #202936 !important; }
.cwl-plinko-dialog .cwl-plinko-head .small-button:focus-visible { outline: 2px solid #d2ae5d; outline-offset: 2px; }
.cwl-plinko-dialog [data-plinko-sound][aria-pressed="true"] { color: #f1d58d !important; border-color: #76633d !important; }
.cwl-plinko-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}
.cwl-plinko-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #080f1a;
  box-shadow: none;
}
.cwl-plinko-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 7px 10px;
  border-bottom: 1px solid #293344;
  background: linear-gradient(90deg, #111a27, #0d141f);
}
.cwl-plinko-score > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cwl-plinko-score [data-plinko-active] { overflow: hidden; color: #f1f3f5; font-size: 14px; font-weight: 650; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.cwl-plinko-score [data-plinko-round] { color: #8491a1; font-size: 10px; white-space: nowrap; }
.cwl-plinko-score [data-plinko-total] { color: #e6c477; font: 700 22px/1 Georgia, serif; text-shadow: 0 0 18px #c99b3d2e; white-space: nowrap; }
.cwl-plinko-ball-progress { height: 3px; overflow: hidden; border-radius: 99px; background: #252d39; }
.cwl-plinko-ball-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f6c2e, #e1bf70); transition: width .18s ease-out; }
.cwl-plinko-status { color: #8592a1; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cwl-plinko-canvas-wrap { display: flex; min-height: 0; align-items: center; justify-content: center; overflow: hidden; }
.cwl-plinko-dialog canvas {
  display: block;
  width: min(100%, calc((100dvh - 120px) * 1.52381));
  max-width: 100%;
  height: auto;
  aspect-ratio: 640 / 420;
}
.cwl-plinko-results {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 4px 8px 10px;
  border: 0;
  border-left: 1px solid #293344;
  border-radius: 0;
  color: #edf3fb;
  background: transparent;
  box-shadow: none;
}
.cwl-plinko-results h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; color: #e9e4da; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.cwl-plinko-results h4 span:last-child { color: #d6b869; font-variant-numeric: tabular-nums; }
.cwl-plinko-meter { height: 2px; margin: -2px 0 12px; overflow: hidden; border-radius: 9px; background: #252d39; }
.cwl-plinko-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: #d6b869; transition: width .25s ease-out; }
.cwl-plinko-winners { display: flex; min-height: 0; flex-direction: column; gap: 0; margin: 0; padding: 0 2px 4px 22px; overflow-y: auto; scrollbar-color: #405f7c transparent; }
.cwl-plinko-winners li { display: list-item; padding: 8px 2px; border: 0; border-bottom: 1px solid #242d3a; border-radius: 0; color: #dbe1e7; background: transparent; box-shadow: none; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; will-change: transform; }
.cwl-plinko-winners li::marker { color: #c7a95d; font-weight: 700; }
.cwl-plinko-winners li.is-bonus-recipient { color: #fff5d8; border-bottom-color: #6f5a30; background: linear-gradient(90deg, rgba(192, 148, 61, .16), transparent 78%); animation: cwl-plinko-bonus-in .42s cubic-bezier(.2,.75,.25,1) both; }
.cwl-plinko-winners li.is-bonus-recipient::marker { color: #f0cc72; }
.cwl-plinko-winners li.is-bonus-recipient .cwl-plinko-payout { color: #f6d77d; text-shadow: 0 0 16px rgba(225, 179, 76, .32); }
@keyframes cwl-plinko-bonus-in { from { opacity: .45; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.cwl-plinko-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; }
.cwl-plinko-player { min-width: 0; overflow-wrap: anywhere; }
.cwl-plinko-payout, .cwl-plinko-stars { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cwl-plinko-payout { min-width: 6ch; color: #e2c476; font-weight: 700; text-align: right; }
.cwl-plinko-stars { min-width: 27px; color: #8f9dac; text-align: right; }
.cwl-plinko-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.cwl-plinko-summary > div { display: grid; gap: 4px; padding: 12px; border: 1px solid #dfcdb2; border-radius: 10px; background: #fffbf4; }
.cwl-plinko-summary span { color: #806442; font-size: 11px; }
.cwl-plinko-summary strong { color: #47351f; font-size: 18px; }
@media (max-width: 520px) { .cwl-plinko-summary { grid-template-columns: 1fr; } }
@media (max-width: 720px) and (orientation: portrait) {
  .cwl-plinko-head { flex-basis: 42px; padding: 0 8px; }
  .cwl-plinko-head h3 { font-size: 16px; }
  .cwl-plinko-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(150px, 1fr); gap: 4px; padding: 4px; }
  .cwl-plinko-board { grid-template-rows: auto auto; }
  .cwl-plinko-canvas-wrap { align-items: flex-start; }
  .cwl-plinko-score { gap: 3px 8px; padding: 5px 6px; }
  .cwl-plinko-score > div:first-child { gap: 7px; }
  .cwl-plinko-score [data-plinko-active] { font-size: 13px; }
  .cwl-plinko-score [data-plinko-total] { font-size: 19px; }
  .cwl-plinko-results { padding: 5px 3px 3px; border-top: 1px solid #304b66; border-left: 0; }
  .cwl-plinko-results h4 { margin-bottom: 4px; }
  .cwl-plinko-meter { margin-bottom: 4px; }
  .cwl-plinko-winners li { padding: 5px 2px; }
  .cwl-plinko-row { gap: 6px; }
  .cwl-plinko-actions { gap: 4px; }
  .cwl-plinko-dialog .cwl-plinko-head .small-button { min-height: 28px; padding: 0 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .cwl-plinko-winners li.is-bonus-recipient { animation: none; } }

/* Plinko readability and sizing: the board keeps the available height while
   the results rail remains wide enough for names and payouts. */
.cwl-plinko-layout { grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 480px); }
.cwl-plinko-head { flex-basis: 58px; }
.cwl-plinko-head h3 { font-size: 24px; }
.cwl-plinko-dialog .cwl-plinko-head .small-button {
  min-height: 44px;
  padding: 0 16px;
  font-size: 16px;
}
.cwl-plinko-score [data-plinko-active] { font-size: 22px; }
.cwl-plinko-score [data-plinko-round] { font-size: 14px; }
.cwl-plinko-score [data-plinko-total] { font-size: 40px; }
.cwl-plinko-status { font-size: 14px; }
.cwl-plinko-canvas-wrap { min-height: 0; }
.cwl-plinko-dialog canvas {
  max-height: calc(100dvh - 120px);
  object-fit: contain;
}
.cwl-plinko-results { padding: 12px 8px 12px 16px; }
.cwl-plinko-results h4 { margin-bottom: 10px; font-size: 18px; }
.cwl-plinko-winners li { padding: 10px 4px; font-size: 20px; line-height: 1.35; }
.cwl-plinko-player { font-size: 20px; }
.cwl-plinko-row { gap: 10px; }
.cwl-plinko-payout { font-size: 20px; }
.cwl-plinko-stars { min-width: 34px; font-size: 16px; }
.cwl-plinko-summary span { font-size: 14px; }
.cwl-plinko-summary strong { font-size: 22px; }

@media (max-width: 720px) and (orientation: portrait) {
  .cwl-plinko-head { flex-basis: 52px; }
  .cwl-plinko-head h3 { font-size: 20px; }
  .cwl-plinko-layout { grid-template-columns: 1fr; }
  .cwl-plinko-score { padding: 8px 7px; }
  .cwl-plinko-score > div:first-child { flex-wrap: wrap; gap: 4px 8px; }
  .cwl-plinko-score [data-plinko-active] { font-size: 18px; }
  .cwl-plinko-score [data-plinko-round] { font-size: 12px; }
  .cwl-plinko-score [data-plinko-total] { font-size: 32px; }
  .cwl-plinko-status { font-size: 14px; }
  .cwl-plinko-results { max-height: 42vh; padding: 8px 5px 5px; }
  .cwl-plinko-results h4 { font-size: 16px; }
  .cwl-plinko-winners li { font-size: 16px; }
  .cwl-plinko-player { font-size: 16px; }
  .cwl-plinko-payout { font-size: 16px; }
  .cwl-plinko-stars { font-size: 14px; }
  .cwl-plinko-dialog .cwl-plinko-head .small-button { min-height: 44px; font-size: 14px; }
}

@media (max-width: 420px) {
  .cwl-plinko-actions { flex-wrap: wrap; justify-content: flex-end; }
  .cwl-plinko-head { gap: 8px; padding: 0 6px; }
  .cwl-plinko-head h3 { font-size: 18px; }
  .cwl-plinko-score [data-plinko-active] { font-size: 16px; }
  .cwl-plinko-score [data-plinko-total] { font-size: 28px; }
  .cwl-plinko-results { max-height: 46vh; }
}

/* Second village builder six · requirements and rush planner */
.second-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 4px 64px;
  color: #2b241c;
}
.second-page .second-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #d8c5a8;
  border-radius: 18px;
  background: linear-gradient(125deg, #fffdf8 0%, #f5ecdc 56%, #ead8ba 100%);
  box-shadow: 0 18px 45px rgba(83, 55, 26, .1);
}
.second-page .second-hero h2 { max-width: 700px; margin: 7px 0 9px; font: 700 clamp(30px, 4vw, 44px)/1.04 Georgia, serif; letter-spacing: -.035em; }
.second-page .second-hero > strong { align-self: center; justify-self: end; padding: 14px 18px; border-radius: 12px; color: #684a30; background: #fffaf1; }
.second-page .second-hero p { max-width: 700px; margin: 0; color: #685d50; font-size: 14px; line-height: 1.7; }
.second-page .second-summary { display: grid; align-content: center; gap: 10px; padding: 18px; border: 1px solid #d9c7aa; border-radius: 13px; background: rgba(255, 253, 248, .72); }
.second-page .second-summary > strong { font-size: 16px; }
.second-page .second-summary > span { color: #75695a; font-size: 10px; line-height: 1.5; }
.second-page .second-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.second-page .second-card { min-width: 0; padding: 21px; border: 1px solid #d9cebe; border-radius: 14px; background: #fffdf8; box-shadow: 0 7px 20px rgba(72, 53, 31, .055); }
.second-page > .second-card { margin-top: 16px; }
.second-page .second-card h2, .second-page .second-card h3 { margin: 0 0 8px; color: #2b241c; font-family: Georgia, serif; }
.second-page .second-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.second-page .second-card > strong { display: block; margin: 9px 0; font-size: 19px; overflow-wrap: anywhere; }
.second-page .second-card h2 { font-size: 20px; }
.second-page .second-card h3 { font-size: 15px; }
.second-page .second-card p { margin: 0; color: #685d50; font-size: 13px; line-height: 1.6; }
.second-page .second-status { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #6f6457; background: #f0e9df; font-size: 12px; }
.second-page .second-status.done { color: #276844; background: #e1f1e5; }
.second-page .second-status.pending { color: #8e4439; background: #fae8e3; }
.second-page .second-status strong { color: #392d20; font-size: 13px; }
.second-page .second-status [data-state="complete"], .second-page .second-status.is-complete { color: #39704e; }
.second-page .second-status [data-state="blocked"], .second-page .second-status.is-blocked { color: #9a493b; }
.second-page .second-progress { overflow: hidden; height: 8px; margin-top: 10px; border: 1px solid #d8c7ac; border-radius: 999px; background: #eee5d8; }
.second-page .second-progress > i, .second-page .second-progress > span, .second-page .second-progress > div { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b6941, #c69247); }
.second-page .second-progress[aria-valuenow="100"] > i, .second-page .second-progress[aria-valuenow="100"] > span, .second-page .second-progress[aria-valuenow="100"] > div { background: #4e9a69; }
.second-page .second-steps { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; counter-reset: second-step; }
.second-page .second-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid #e5dccf; border-radius: 10px; background: #fbf8f2; }
.second-page .second-step > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #76553c; background: #efe3d3; font-size: 10px; font-weight: 850; }
.second-page .second-step strong { display: block; font-size: 13px; }
.second-page .second-step p { margin-top: 3px; font-size: 13px; }
.second-page .second-step small { color: #8a7b6b; font-size: 9px; text-align: right; white-space: nowrap; }
.second-page .second-step.is-complete, .second-page .second-step[data-state="complete"] { border-color: #bad8c2; background: #f2f8f1; }
.second-page .second-step.is-complete::before, .second-page .second-step[data-state="complete"]::before { content: '✓'; color: #fff; background: #4e9a69; }
.second-page .second-controls { display: grid; gap: 10px; margin-top: 15px; }
.second-page .second-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid #e5dccf; border-radius: 9px; cursor: pointer; font-size: 12px; }
.second-page .second-controls label small { flex-basis: 100%; padding-left: 24px; color: #75695a; }
.second-page .second-controls input { accent-color: #76553c; width: 16px; height: 16px; }
.second-page .second-table-wrap { max-width: 100%; overflow-x: auto; margin-top: 14px; border: 1px solid #e5dccf; border-radius: 9px; }
.second-page .second-table { width: 100%; min-width: 470px; border-collapse: collapse; font-size: 13px; text-align: left; }
.second-page .second-table th, .second-page .second-table td { padding: 9px 11px; border-bottom: 1px solid #eee5da; white-space: nowrap; }
.second-page .second-table th { color: #6a5641; background: #f6efe4; font-weight: 750; }
.second-page .second-table tr:last-child td { border-bottom: 0; }
.second-page .second-breakdown { margin-top: 12px; }
.second-page .second-breakdown summary { width: fit-content; color: #684a30; font-size: 13px; font-weight: 750; cursor: pointer; }
.second-page .second-breakdown summary:focus-visible, .second-page .second-controls input:focus-visible { outline: 3px solid rgba(96, 165, 250, .55); outline-offset: 3px; }
.second-page .second-controls button, .second-page .second-controls a { min-height: 36px; border: 1px solid #cbb79a; border-radius: 8px; padding: 0 12px; color: #76553c; background: #faf5ed; cursor: pointer; font-size: 10px; font-weight: 800; text-decoration: none; }
.second-page .second-controls button:hover, .second-page .second-controls a:hover { border-color: #8f6847; background: #f2e5d4; }
.second-page .second-controls .primary { border-color: #76553c; color: #fffaf1; background: #76553c; }
.second-page .second-controls button:focus-visible, .second-page .second-controls a:focus-visible, .second-page a:focus-visible { outline: 3px solid rgba(96, 165, 250, .55); outline-offset: 2px; }
.second-page .second-note { margin-top: 14px; padding: 12px 14px; border-left: 3px solid #c69247; color: #655c4b; background: #f7efd9; font-size: 12px; line-height: 1.6; }
.second-page .second-priority-path { grid-column: 1 / -1; border-color: #cdb58c; background: linear-gradient(135deg, #fffaf0, #f5ead7); }
.second-page .second-priority-path > h2 { color: #694b2e; }
.second-page .second-priority-path ol, .second-page .second-priority-path ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: priority; }
.second-page .second-priority-path li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid #e1d2b8; border-radius: 9px; background: rgba(255, 253, 248, .7); counter-increment: priority; }
.second-page .second-priority-path ol li::before { content: counter(priority); display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #fffaf1; background: #9b7132; font-size: 10px; font-weight: 850; }
.second-page .second-priority-path li strong { font-size: 11px; }
.second-page .second-priority-path li p { margin-top: 3px; }
.second-page .second-sources { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 16px; color: #776c60; font-size: 12px; }
.second-page .second-sources a { color: #7b4527; font-weight: 750; }

@media (max-width: 760px) {
  .second-page .second-hero { grid-template-columns: 1fr; gap: 16px; }
  .second-page .second-hero > strong { justify-self: start; }
  .second-page .second-grid { grid-template-columns: 1fr; }
  .second-page .second-priority-path { grid-column: auto; }
}
@media (max-width: 500px) {
  .second-page { padding-top: 0; }
  .second-page .second-hero { padding: 22px 18px; border-radius: 14px; }
  .second-page .second-card { padding: 16px; }
  .second-page .second-step { grid-template-columns: 26px minmax(0, 1fr); }
  .second-page .second-step small { grid-column: 2; text-align: left; }
  .second-page .second-controls button, .second-page .second-controls a { flex: 1 1 130px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .second-page *, .second-page *::before, .second-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Rush progress dashboard */
.second-page {
  max-width: 1040px;
  padding: 8px 4px 56px;
}
.second-page .second-hero {
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 30px;
  padding: clamp(25px, 4vw, 38px);
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0, rgba(198, 146, 71, .2), transparent 38%),
    linear-gradient(135deg, #fffdf8, #f3e7d3);
}
.second-page .second-hero h2 { margin: 6px 0 8px; font-size: clamp(31px, 5vw, 46px); }
.second-page .second-summary {
  position: relative;
  gap: 4px;
  padding: 20px;
  border-color: #ccb691;
  background: rgba(255, 253, 248, .86);
  box-shadow: 0 10px 28px rgba(72, 53, 31, .08);
}
.second-page .second-summary > span { color: #806849; font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.second-page .second-summary > strong { color: #49341f; font: 750 34px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.second-page .second-summary > small { margin-top: 4px; color: #6c6154; font-size: 11px; line-height: 1.45; }
.second-page .second-next {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 14px;
  padding: 17px 20px;
  border: 1px solid #d4bd96;
  border-radius: 14px;
  background: #f7eddd;
}
.second-page .second-next span { color: #8b6330; font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.second-page .second-next h3 { margin: 4px 0 0; font: 700 17px/1.2 Georgia, serif; }
.second-page .second-next ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px 20px; margin: 0; padding-left: 22px; }
.second-page .second-next li { padding-left: 2px; color: #53483c; font-size: 12px; line-height: 1.45; }
.second-page .second-next li::marker { color: #95692d; font-weight: 850; }
.second-page .second-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.second-page .second-card { grid-column: span 2; padding: 17px; border-radius: 12px; box-shadow: 0 5px 16px rgba(72, 53, 31, .045); }
.second-page .second-card:nth-child(4), .second-page .second-card:nth-child(5) { grid-column: span 3; }
.second-page .second-card.is-done { border-color: #bdd5c2; background: #fbfdf9; }
.second-page .second-card.is-unknown { border-style: dashed; background: #fcfaf5; }
.second-page .second-card > strong { margin: 13px 0 5px; font-size: 17px; }
.second-page .second-card p { min-height: 39px; font-size: 11px; line-height: 1.5; }
.second-page .second-card-head { flex-wrap: wrap; }
.second-page .second-card h3 { margin: 1px 0; font-size: 13px; font-weight: 750; line-height: 1.3; }
.second-page .second-status { padding: 4px 7px; font-size: 10px; font-weight: 750; }
.second-page .second-status.unknown { color: #715f49; background: #eee7dc; }
.second-page .second-progress { height: 6px; margin-top: 13px; border: 0; background: #e9dfd1; }
.second-page .second-card.is-done .second-progress > i { background: #4e9064; }
.second-page .second-panel {
  margin-top: 10px;
  border: 1px solid #ded3c4;
  border-radius: 12px;
  background: #fffdf8;
}
.second-page .second-panel > summary {
  position: relative;
  padding: 15px 46px 15px 18px;
  color: #463b2e;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}
.second-page .second-panel > summary::-webkit-details-marker { display: none; }
.second-page .second-panel > summary::after { content: '+'; position: absolute; top: 50%; right: 18px; translate: 0 -50%; color: #89663c; font-size: 20px; font-weight: 400; }
.second-page .second-panel[open] > summary { border-bottom: 1px solid #e9dfd2; }
.second-page .second-panel[open] > summary::after { content: '−'; }
.second-page .second-panel-body { padding: 17px 18px 19px; }
.second-page .second-panel-body > p { margin: 0; color: #685d50; font-size: 12px; line-height: 1.6; }
.second-page .second-controls { margin-top: 10px; }
.second-page .second-panel-body.second-controls { display: grid; gap: 8px; margin-top: 0; }
.second-page .second-controls label { margin: 0; background: #fbf8f2; }
.second-page .second-data-note { margin-bottom: 12px !important; padding: 11px 13px; border-left: 3px solid #c69247; background: #f7efd9; }
.second-page .second-sources { margin-bottom: 0; }
.second-page .second-panel > summary:focus-visible { outline: 3px solid rgba(91, 128, 181, .55); outline-offset: 3px; border-radius: 10px; }
.second-page .second-storage { margin-top: 14px; padding: 18px; }
.second-page .second-storage-heading h3 { margin: 0 0 5px; font: 700 17px/1.25 Georgia, serif; }
.second-page .second-storage-heading p, .second-page .second-storage-note { margin: 0; color: #685d50; font-size: 12px; line-height: 1.55; }
.second-page .second-storage-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.second-page .second-storage-fields label { display: grid; gap: 6px; color: #493c2e; font-size: 12px; font-weight: 700; }
.second-page .second-storage-fields input { width: 100%; min-width: 0; min-height: 39px; padding: 8px 10px; border: 1px solid #cbb79a; border-radius: 8px; background: #fffdf8; color: #2b241c; font: inherit; }
.second-page .second-storage-fields input:focus-visible { outline: 3px solid rgba(91, 128, 181, .55); outline-offset: 2px; }
.second-page .second-capacity-status.enough { color: #276844; font-weight: 750; }
.second-page .second-capacity-status.short { color: #9a493b; font-weight: 750; }
.second-page .second-storage-note { margin-top: 12px; }
.second-page .second-storage .second-table { min-width: 0; table-layout: fixed; }
.second-page .second-storage .second-table th:first-child { width: 41%; }
.second-page .second-storage .second-table th:nth-child(2) { width: 27%; }
.second-page .second-storage .second-table th, .second-page .second-storage .second-table td { white-space: normal; overflow-wrap: anywhere; }
.second-page .second-storage .second-table td small { display: block; margin-top: 3px; color: #776c60; font-size: 10px; line-height: 1.35; }

@media (max-width: 760px) {
  .second-page .second-next { grid-template-columns: 1fr; gap: 10px; }
  .second-page .second-next ol { grid-template-columns: 1fr; }
  .second-page .second-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .second-page .second-card, .second-page .second-card:nth-child(4), .second-page .second-card:nth-child(5) { grid-column: span 1; }
  .second-page .second-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .second-page { padding-bottom: 38px; }
  .second-page .second-storage-fields { grid-template-columns: 1fr; }
  .second-page .second-storage { padding: 15px; }
  .second-page .second-storage .second-table-wrap { border: 0; overflow: visible; }
  .second-page .second-storage .second-table, .second-page .second-storage .second-table tbody { display: block; width: 100%; }
  .second-page .second-storage .second-table thead { display: none; }
  .second-page .second-storage .second-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; margin-bottom: 8px; padding: 10px; border: 1px solid #e5dccf; border-radius: 8px; }
  .second-page .second-storage .second-table td { display: block; padding: 0; border: 0; white-space: nowrap; overflow-wrap: normal; }
  .second-page .second-storage .second-table td:first-child { grid-column: 1 / -1; white-space: normal; font-weight: 700; }
  .second-page .second-storage .second-table td:nth-child(2)::before { content: 'Tek adım: '; color: #776c60; font-weight: 400; }
  .second-page .second-storage .second-table td:nth-child(3) { text-align: right; }
  .second-page .second-hero { grid-template-columns: 1fr; gap: 18px; padding: 21px 17px; }
  .second-page .second-summary { width: 100%; padding: 15px; }
  .second-page .second-summary > strong { font-size: 29px; }
  .second-page .second-next { padding: 15px 16px; }
  .second-page .second-grid { gap: 8px; }
  .second-page .second-card { padding: 14px; }
  .second-page .second-card-head { display: grid; gap: 7px; }
  .second-page .second-status { justify-self: start; }
  .second-page .second-card > strong { font-size: 15px; }
  .second-page .second-card p { min-height: 35px; }
  .second-page .second-panel > summary { min-height: 48px; padding-left: 15px; }
  .second-page .second-panel-body { padding: 15px; }
}

/* Copyable war bases */
.base-home-entry {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: center;
  margin: 24px 0 12px;
  padding: 25px 28px;
  border: 1px solid #dccdb8;
  border-radius: 16px;
  background: linear-gradient(120deg, #fffdf8, #f3e7d5);
  box-shadow: 0 14px 35px rgba(77, 58, 35, .06);
}
.base-home-copy h2 { margin: 6px 0 7px; color: #30261c; font: 700 24px/1.13 Georgia, serif; }
.base-home-copy p { max-width: 460px; margin: 0; color: #716557; font-size: 12px; line-height: 1.6; }
.base-home-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.base-home-levels a { display: grid; min-height: 62px; align-content: center; gap: 3px; padding: 9px 12px; border: 1px solid #e2d5c3; border-radius: 10px; color: #46372a; background: rgba(255,255,255,.72); text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.base-home-levels a:hover { transform: translateY(-2px); border-color: #bd9068; background: #fffdf8; }
.base-home-levels strong { font: 700 15px Georgia, serif; }
.base-home-levels span { color: #857969; font-size: 10px; }

.base-layout-page { padding: 0 0 42px; }
.base-layout-hero { padding: 10px 0 14px; }
.base-layout-hero h1 { margin: 0; color: #2d241b; font: 600 clamp(26px, 4vw, 36px)/1.2 var(--font-sans, sans-serif); letter-spacing: -.025em; }
.base-layout-hero p { margin: 0; color: #716557; font-size: 12px; line-height: 1.55; }
.base-layout-total { display: grid; min-width: 150px; justify-items: end; padding: 11px 0 11px 24px; border-left: 1px solid #d8c8b1; }
.base-layout-total strong { color: #734528; font: 700 32px/1 Georgia, serif; }
.base-layout-total span { margin-top: 6px; color: #776b5d; font-size: 10px; text-align: right; }
.base-level-nav { display: flex; gap: 7px; overflow-x: auto; margin: 16px 0 13px; padding: 2px 1px 5px; scrollbar-width: none; }
.base-level-nav::-webkit-scrollbar { display: none; }
.base-level-nav a { display: grid; min-width: 58px; min-height: 42px; place-items: center; padding: 0 10px; border: 1px solid #ded2c1; border-radius: 9px; color: #695a48; background: #fffdf8; font-size: 11px; font-weight: 800; text-decoration: none; }
.base-level-nav a:hover { border-color: #b98b61; color: #714728; }
.base-level-nav a.active { border-color: #96562f; color: #fffaf4; background: #96562f; box-shadow: 0 3px 9px rgba(112, 63, 37, .16); }
.base-layout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0 10px; border-top: 1px solid #e3d8ca; }
.base-kind-switch, .base-sort-switch { display: flex; gap: 5px; }
.base-kind-switch button, .base-sort-switch button { min-height: 36px; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; color: #706557; background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.base-kind-switch button span { margin-left: 4px; color: #9b8d7a; font-size: 10px; }
.base-kind-switch button.active, .base-sort-switch button.active { border-color: #d8c7b0; color: #714728; background: #f1e7d9; }
.base-layout-note { margin: 0 0 14px; color: #827769; font-size: 10px; line-height: 1.5; }
.base-layout-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.base-layout-card { overflow: hidden; min-width: 0; border: 1px solid #dfd4c5; border-radius: 12px; background: #fffdf8; box-shadow: 0 5px 15px rgba(72, 50, 28, .045); transition: transform .17s ease, box-shadow .17s ease; }
.base-layout-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(72, 50, 28, .09); }
.base-layout-image { position: relative; display: block; overflow: hidden; aspect-ratio: 1.42 / 1; background: #eee7dd; }
.base-layout-image.image-missing::after { content: 'Üs görseli yüklenemedi'; display: grid; height: 100%; place-items: center; color: #887c6d; font-size: 11px; }
.base-layout-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.base-level-badge, .base-pro-badge { position: absolute; top: 9px; display: grid; min-height: 24px; place-items: center; padding: 0 8px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; box-shadow: 0 2px 6px rgba(53, 35, 18, .18); font-size: 9px; font-weight: 850; }
.base-level-badge { left: 9px; color: #513d2b; background: rgba(255, 250, 241, .94); }
.base-pro-badge { right: 9px; color: #fffaf0; background: #8a6535; }
.base-layout-info { display: grid; gap: 8px; padding: 12px; }
.base-layout-info h3 { display: -webkit-box; overflow: hidden; min-height: 34px; margin: 0; color: #362b20; font-size: 12px; font-weight: 800; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.base-layout-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 8px; color: #857969; font-size: 9px; }
.base-layout-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.base-layout-tags span { padding: 3px 6px; border: 1px solid #e3d7c7; border-radius: 999px; color: #796a58; background: #faf5ed; font-size: 8px; font-weight: 750; }
.base-layout-source { display: flex; justify-content: space-between; gap: 8px; color: #8b7d6b; font-size: 9px; }
.base-layout-source a { overflow: hidden; color: #8a4f2c; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.base-layout-source a:hover { text-decoration: underline; }
.base-copy-link { display: flex; justify-content: space-between; align-items: center; min-height: 36px; margin-top: 2px; padding: 0 10px; border-radius: 8px; color: #fffaf3; background: #96562f; font-size: 10px; font-weight: 800; text-decoration: none; transition: background .15s ease; }
.base-copy-link:hover { color: #fffaf3; background: #7f4528; }
.base-copy-link span { font-size: 13px; }
.base-empty { padding: 28px; border: 1px dashed #d4c4ae; border-radius: 12px; color: #736555; background: #fffdf8; text-align: center; font-size: 12px; }
.base-layout-more { display: grid; justify-items: center; gap: 7px; margin: 20px 0 6px; }
.base-layout-more button { min-height: 40px; border: 1px solid #cdb89c; border-radius: 9px; padding: 0 15px; color: #754929; background: #fbf5ec; cursor: pointer; font-size: 11px; font-weight: 800; }
.base-layout-more button:hover { border-color: #a96e45; background: #f3e8d8; }
.base-layout-more button span { margin-left: 4px; color: #9a8062; font-size: 10px; }
.base-layout-more small { color: #8a7e6f; font-size: 9px; }
.base-layout-footer { margin-top: 22px; padding-top: 12px; border-top: 1px solid #e3d8ca; color: #8a7e6f; font-size: 9px; line-height: 1.5; }
.base-filter-row { display:flex; gap:10px; align-items:end; margin:0 0 14px; }
.base-filter-row label { display:grid; gap:5px; min-width:120px; flex:1; color:var(--muted); font-size:10px; }
.base-filter-row input, .tool-form input, .tool-form textarea, .compare-form input, .compare-form select { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--ink); background:var(--surface); }
.base-filter-row select { min-height:38px; border:1px solid var(--line); border-radius:8px; padding:0 9px; color:var(--ink); background:var(--surface); }
.base-filter-row button, .base-favorite, .tool-form button, .compare-form button { border:1px solid var(--line); border-radius:8px; padding:10px 13px; color:var(--ink); background:var(--surface-2); cursor:pointer; font-weight:750; }
.base-filter-row button.active, .base-favorite.active { color:var(--gold); border-color:rgba(251,191,36,.4); }
.base-favorite { width:100%; padding:7px; font-size:10px; }
.tool-page > h1, .compare-page > h1 { margin:0 0 22px; font:700 36px Georgia,serif; }
.tool-form { display:grid; gap:14px; }
.tool-form > label { display:grid; gap:6px; }
.tool-form textarea { resize:vertical; font:12px/1.5 ui-monospace,monospace; }
.tool-page .calc-data-note { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.json-copy-guide { display:grid; gap:4px; padding:12px 0; border-block:1px solid var(--line); color:var(--muted); font-size:11px; line-height:1.55; }
.json-copy-guide strong { color:var(--ink); font-size:12px; }
.tool-advanced { border-block:1px solid var(--line); }
.tool-advanced summary { min-height:46px; display:flex; align-items:center; gap:8px; color:var(--ink); cursor:pointer; font-weight:800; }
.tool-advanced summary::after { content:'+'; margin-left:auto; color:var(--muted); font-size:18px; }
.tool-advanced[open] summary::after { content:'−'; }
.tool-advanced > :not(summary) { margin-bottom:14px; }
.tool-advanced summary:focus-visible { outline:3px solid color-mix(in srgb, var(--gold) 35%, transparent); outline-offset:3px; }
.ore-balance, .compare-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end; }
.ore-balance label { display:grid; gap:5px; color:var(--muted); font-size:10px; }
.compare-form { grid-template-columns:120px 1fr auto 1fr auto; margin-bottom:22px; }
.tracked-villages { margin-top:18px; }
.tracked-villages ul { display:grid; gap:6px; margin:8px 0; padding:0; list-style:none; }
.tracked-villages li { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.tracked-villages li div { display:grid; gap:3px; }
.tracked-villages li span, .tracked-villages small { color:var(--muted); font-size:10px; }
.tracked-villages button { border:1px solid var(--line); border-radius:7px; padding:6px 9px; color:var(--ink); background:var(--surface-2); cursor:pointer; }

.zq-version-switch,.vt-tabs{display:flex;gap:4px;width:max-content;margin:18px auto 0;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.zq-version-switch button,.vt-tabs button{min-height:36px;border:0;border-radius:7px;padding:0 15px;color:var(--muted);background:transparent;cursor:pointer;font-weight:800}
.zq-version-switch button.active,.vt-tabs button.active{color:var(--ink);background:var(--surface);box-shadow:0 2px 8px rgba(32,24,16,.08)}
.village-tracker-page{padding-bottom:48px}.village-tracker-page .vt-tabs{margin:0 0 16px}.vt-hero{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:27px 30px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,var(--surface),var(--surface-2))}.vt-hero h1{margin:5px 0;font:700 clamp(28px,4vw,40px)/1.1 Georgia,serif}.vt-hero p,.vt-hero span{margin:0;color:var(--muted);font-size:11px}.vt-ring{width:118px;height:118px;display:grid;place-content:center;flex:0 0 auto;border-radius:50%;text-align:center;background:radial-gradient(circle closest-side,var(--surface) 78%,transparent 80% 100%),conic-gradient(var(--gold) var(--progress),var(--line) 0)}.vt-ring strong{font-size:24px}.vt-ring small{color:var(--muted);font-size:9px}.vt-stat-strip,.vt-ore-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.vt-progress-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.vt-progress-card{display:grid;grid-template-columns:1fr auto;gap:11px;padding:15px;border-bottom:1px solid var(--line);background:var(--surface)}.vt-progress-card div{display:grid;gap:3px}.vt-progress-card span{color:var(--muted);font-size:10px}.vt-progress-card i,.vt-eq-card i{grid-column:1/-1;height:5px;overflow:hidden;border-radius:9px;background:var(--line)}.vt-progress-card em,.vt-eq-card em{display:block;height:100%;background:var(--gold)}.vt-category{margin:0 0 22px}.vt-category>header{display:flex;justify-content:space-between;align-items:end;padding:13px 2px;border-bottom:2px solid var(--ink)}.vt-category h2{margin:0;font:700 22px Georgia,serif}.vt-category>header span{color:var(--muted);font-size:10px}.vt-ninja-row{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(220px,1fr);gap:15px;padding:15px 2px;border-bottom:1px solid var(--line)}.vt-item-level,.vt-upgrade-summary{display:grid;align-content:start;gap:4px}.vt-item-level span,.vt-upgrade-summary span{color:var(--muted);font-size:10px}.vt-active{width:max-content;padding:3px 6px;border-radius:5px;color:#276844!important;background:#e4f2e8}.vt-ninja-row ol{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.vt-ninja-row li{display:grid;gap:2px;min-width:120px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:10px}.vt-ninja-row li span{color:var(--muted)}.vt-ninja-row li.active{border-color:#70a985;background:#edf7ef}.vt-eq-group{margin:22px 0}.vt-eq-group h2{font:700 22px Georgia,serif}.vt-eq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.vt-eq-card{display:grid;grid-template-columns:58px 1fr;gap:13px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:var(--surface);text-decoration:none}.vt-eq-card img{width:58px;height:58px;object-fit:contain}.vt-eq-card>div{display:grid;gap:5px;min-width:0}.vt-eq-card span,.vt-eq-card small{color:var(--muted);font-size:9px;line-height:1.4}.vt-eq-card i{grid-column:auto}.vt-eq-card:hover{border-color:var(--gold)}

@media (max-width: 1000px) {
  .base-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .vt-stat-strip,.vt-ore-strip,.vt-progress-grid,.vt-eq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-ninja-row{grid-template-columns:1fr}.vt-hero{padding:20px}.vt-ring{width:92px;height:92px}.vt-tabs{width:100%;overflow-x:auto}.vt-tabs button{flex:1;white-space:nowrap}
  .compare-form, .ore-balance { grid-template-columns:1fr; }
  .base-filter-row { align-items:stretch; flex-direction:column; }
  .base-home-entry { grid-template-columns: 1fr; gap: 17px; margin-top: 18px; padding: 20px; }
  .base-home-copy h2 { font-size: 21px; }
  .base-home-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .base-layout-hero { padding: 10px 0 14px; }
  .base-layout-total { min-width: 100px; padding-left: 13px; }
  .base-layout-total strong { font-size: 27px; }
  .base-layout-total span { max-width: 100px; }
  .base-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .base-layout-info { gap: 7px; padding: 10px; }
  .base-layout-info h3 { min-height: 31px; font-size: 11px; }
  .base-layout-stats { font-size: 8px; }
  .base-layout-tags span { font-size: 7px; }
  .base-layout-source { font-size: 8px; }
  .base-copy-link { min-height: 34px; padding: 0 8px; font-size: 9px; }
  .base-layout-toolbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 400px) {
  .base-home-entry { padding: 17px; }
  .base-home-levels { gap: 6px; }
  .base-home-levels a { min-height: 56px; padding: 7px 9px; }
  .base-layout-grid { gap: 7px; }
  .base-layout-info { padding: 8px; }
}

/* Modern village tracker and combat tools */
.modern-tracker-route {
  --vt-bg: #0c0f12;
  --vt-panel: rgba(31, 32, 31, .92);
  --vt-panel-2: rgba(42, 40, 37, .92);
  --vt-panel-3: rgba(55, 49, 42, .78);
  --vt-line: rgba(239, 188, 128, .16);
  --vt-line-strong: rgba(225, 144, 75, .5);
  --vt-text: #f8f0e5;
  --vt-muted: #afa9a1;
  --vt-accent: #df8140;
  --vt-accent-2: #f4ae61;
  --vt-good: #b8c982;
  min-height: 100vh;
  color: var(--vt-text) !important;
  background:
    radial-gradient(circle at 28% -6%, rgba(137, 70, 21, .35), transparent 34rem),
    radial-gradient(circle at 93% 27%, rgba(75, 74, 56, .26), transparent 35rem),
    linear-gradient(145deg, #11120f 0%, #0a0d11 55%, #080a0e 100%) !important;
  background-attachment: fixed;
}
.modern-tracker-route .site-header {
  border-bottom: 1px solid rgba(241, 188, 121, .16);
  color: var(--vt-text) !important;
  border-bottom-color: rgba(241, 188, 121, .16) !important;
  background: rgba(11, 14, 15, .88) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(18px);
}
.modern-tracker-route .brand,
.modern-tracker-route .header-nav a { color: #ddd5ca !important; }
.modern-tracker-route .brand-shield { border-color: #bd7944 !important; color: #ffe1b8 !important; background: #6e3c20 !important; }
.modern-tracker-route .header-nav a:hover { color: #fff4e4; background: rgba(231, 144, 75, .11); }
.modern-tracker-route .header-nav a.active { color: #fff7ed; background: rgba(223, 129, 64, .2); box-shadow: inset 0 -2px #db8146; }
.modern-tracker-route .header-search { border-color: rgba(228, 174, 111, .17); background: rgba(255, 255, 255, .055); }
.modern-tracker-route .header-search input,
.modern-tracker-route .header-search select { color: var(--vt-text); background: transparent; }
.modern-tracker-route .header-search button { color: #24160e; background: #e29a59; }
.modern-tracker-route #app { width: min(1500px, calc(100% - 24px)) !important; max-width: none; padding: 16px 0 70px !important; }
.modern-tracker-route .entity-page { max-width: 1500px; margin: 0 auto; }
.modern-tracker-route .page-loading { color: var(--vt-muted); }

.village-tracker-page { color: var(--vt-text); }
.village-tracker-page button,
.village-tracker-page input,
.village-tracker-page select { font: inherit; }
.vt-profile-band {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(450px, 1.35fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.vt-profile-identity,
.vt-profile-kpis {
  border: 1px solid var(--vt-line);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(64, 48, 35, .9), rgba(27, 31, 32, .92));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 12px 34px rgba(0, 0, 0, .18);
}
.vt-profile-identity { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.vt-townhall-mark {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 206, 139, .42);
  border-radius: 16px 16px 21px 21px;
  color: #fff2df;
  background: linear-gradient(145deg, #b56732, #55301d);
  box-shadow: inset 0 -7px rgba(31, 14, 6, .24), 0 8px 18px rgba(0, 0, 0, .25);
  font-size: 16px;
  font-weight: 900;
}
.vt-profile-identity h1 { margin: 0 0 4px; color: #fff7ec; font-size: clamp(21px, 2.4vw, 30px); letter-spacing: -.025em; }
.vt-profile-identity p { margin: 0; color: var(--vt-muted); font-size: 11px; }
.vt-profile-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.vt-profile-links a { color: #efb274; font-size: 10px; font-weight: 750; text-decoration: none; }
.vt-profile-links a:hover { color: #fff0dc; text-decoration: underline; text-underline-offset: 3px; }
.vt-profile-kpis { display: grid; grid-template-columns: 1.5fr .65fr .65fr; overflow: hidden; }
.vt-profile-kpis > div { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 14px 18px; border-left: 1px solid var(--vt-line); }
.vt-profile-kpis > div:first-child { border-left: 0; }
.vt-profile-kpis small { color: #c7b6a4; font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.vt-profile-kpis strong { color: #fff3df; font-size: clamp(20px, 2.3vw, 29px); font-variant-numeric: tabular-nums; }
.vt-profile-kpis span { color: var(--vt-muted); font-size: 10px; }
.vt-profile-kpis i { height: 6px; overflow: hidden; margin-top: 3px; border-radius: 99px; background: rgba(255, 255, 255, .09); }
.vt-profile-kpis i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d07135, #f0ad5e); box-shadow: 0 0 16px rgba(240, 173, 94, .3); }
.vt-import-page { display: grid; max-width: 920px; gap: 18px; margin: 0 auto; padding: clamp(14px, 4vw, 42px) 0 48px; }
.vt-import-head { display: grid; gap: 6px; max-width: 680px; }
.vt-import-head h1 { margin: 0; color: #fff6e9; font-size: clamp(24px, 4vw, 36px); letter-spacing: -.025em; }
.vt-import-head p { margin: 0; color: var(--vt-muted); font-size: 12px; line-height: 1.6; }
.vt-import-form { display: grid; gap: 15px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--vt-line); border-radius: 14px; background: rgba(30, 32, 31, .88); }
.vt-import-form label { display: grid; gap: 7px; color: #e9d7c2; font-size: 11px; font-weight: 750; }
.vt-import-form input, .vt-import-form select { min-height: 42px; border: 1px solid var(--vt-line); border-radius: 8px; outline: 0; padding: 0 11px; color: var(--vt-text); background: rgba(8, 11, 12, .72); }
.vt-import-form input:focus, .vt-import-form select:focus { border-color: var(--vt-line-strong); box-shadow: 0 0 0 3px rgba(223, 129, 64, .1); }
.vt-import-form textarea { width: 100%; min-height: 255px; resize: vertical; border: 1px solid var(--vt-line); border-radius: 9px; outline: 0; padding: 13px; color: var(--vt-text); background: rgba(8, 11, 12, .72); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.vt-import-form textarea:focus { border-color: var(--vt-line-strong); box-shadow: 0 0 0 3px rgba(223, 129, 64, .1); }
.vt-import-settings { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-top: 2px; color: var(--vt-muted); font-size: 10px; }
.vt-import-settings label { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; color: var(--vt-muted); font-size: 10px; font-weight: 600; }
.vt-import-settings input { accent-color: var(--vt-accent); }
.vt-import-submit { min-height: 43px; border: 1px solid #d78143; border-radius: 8px; padding: 0 18px; color: #24150c; background: linear-gradient(100deg, #df8849, #efad69); cursor: pointer; font-size: 11px; font-weight: 850; }
.vt-import-submit:hover { filter: brightness(1.08); }
.vt-import-submit:disabled { cursor: wait; opacity: .6; }
.vt-import-result { min-width: 0; padding: 14px 16px; border-left: 3px solid var(--vt-accent); color: var(--vt-muted); background: rgba(223, 129, 64, .08); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.vt-import-result:empty { display: none; }
.village-tracker-link { color: #f0b272 !important; font-size: 10px; font-weight: 750; text-decoration: none; }
.village-tracker-link:hover { color: #fff0dd !important; text-decoration: underline; text-underline-offset: 3px; }

.village-tracker-page .vt-tabs {
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 4px;
  overflow-x: auto;
  border-color: var(--vt-line);
  background: rgba(28, 29, 28, .88);
}
.village-tracker-page .vt-tabs button { min-height: 40px; color: #aaa49d; border: 1px solid transparent; }
.village-tracker-page .vt-tabs button:hover { color: #f6e9d9; }
.village-tracker-page .vt-tabs button.active { border-color: rgba(244, 174, 97, .2); color: #fff5e9; background: linear-gradient(180deg, #5b3a27, #3c291f); box-shadow: inset 0 1px rgba(255, 255, 255, .08); }
#village-tracker-content { min-height: 420px; }

.vt-overview-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.vt-category-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; padding: 4px; border: 1px solid var(--vt-line); border-radius: 12px; background: rgba(27, 29, 29, .84); }
.vt-category-tabs button { min-height: 35px; border: 0; border-radius: 8px; padding: 0 12px; color: var(--vt-muted); background: transparent; cursor: pointer; white-space: nowrap; font-size: 11px; font-weight: 750; }
.vt-category-tabs button.active { color: #fff1df; background: #5b3b29; }
.vt-search { display: flex; align-items: center; gap: 8px; min-width: 220px; min-height: 43px; padding: 0 12px; border: 1px solid var(--vt-line); border-radius: 11px; color: var(--vt-muted); background: rgba(27, 29, 29, .84); }
.vt-search input { width: 100%; border: 0; outline: 0; color: var(--vt-text); background: transparent; }
.vt-search input::placeholder { color: #827d77; }
.vt-resource-ribbon { display: grid; grid-template-columns: 1.25fr .75fr 1fr; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--vt-line); border-radius: 13px; background: linear-gradient(100deg, rgba(53, 45, 36, .9), rgba(27, 31, 33, .9)); }
.vt-resource-ribbon > div { display: grid; gap: 6px; justify-content: center; padding: 13px 18px; border-left: 1px solid var(--vt-line); text-align: center; }
.vt-resource-ribbon > div:first-child { border-left: 0; }
.vt-resource-ribbon small { color: var(--vt-muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.vt-resource-ribbon strong { color: #ffd45f; font-size: 16px; }
.vt-resource-ribbon strong span { margin-left: 12px; color: #e74bd1; }
.vt-overview-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.vt-overview-item { position: relative; display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 70px; padding: 10px 11px 13px; overflow: hidden; border: 1px solid var(--vt-line); border-radius: 12px; background: linear-gradient(115deg, rgba(63, 52, 42, .75), rgba(38, 39, 39, .88)); box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.vt-overview-item[hidden] { display: none; }
.vt-overview-item.is-maxed { border-color: rgba(210, 135, 71, .38); background: linear-gradient(115deg, rgba(82, 49, 31, .82), rgba(53, 39, 31, .9)); }
.vt-item-art { position: relative; display: grid; width: 45px; height: 45px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.vt-item-art img, .vt-item-art b { grid-area: 1 / 1; }
.vt-item-art img { position: relative; z-index: 1; width: 42px; height: 42px; object-fit: contain; }
.vt-item-art b { color: #e2b47d; font-size: 12px; font-weight: 850; letter-spacing: .02em; line-height: 1; text-align: center; }
.vt-item-art em { position: absolute; right: -4px; bottom: -4px; min-width: 20px; padding: 2px 4px; border-radius: 6px; color: white; background: #171717; font-size: 9px; font-style: normal; font-weight: 900; text-align: center; }
.vt-overview-item > div { display: grid; gap: 4px; min-width: 0; }
.vt-overview-item strong { overflow: hidden; color: #fff7ed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.vt-overview-item span { color: var(--vt-muted); font-size: 9px; }
.vt-overview-item > i { position: absolute; right: 10px; bottom: 7px; left: 66px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, .3); }
.vt-overview-item > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f7357, #c3a177); }
.vt-overview-item.is-maxed > i em { background: linear-gradient(90deg, #b66534, #efa45e); }
.vt-overview-item > small { position: absolute; right: 11px; top: 9px; color: #cfc4b8; font-size: 8px; font-weight: 850; }
.vt-live-pill { position: absolute; right: 8px; bottom: 16px; z-index: 2; padding: 2px 5px; border-radius: 5px; color: #1e170d !important; background: #eeb05d; font-size: 7px !important; font-weight: 850; }

.vt-stats-top { display: grid; grid-template-columns: 1fr 1.35fr 1.35fr; gap: 12px; }
.vt-stats-top article { display: grid; align-content: start; gap: 8px; min-height: 155px; padding: 18px; border: 1px solid var(--vt-line); border-radius: 14px; background: linear-gradient(120deg, rgba(62, 48, 37, .82), rgba(31, 34, 35, .9)); }
.vt-stats-top article > small { color: var(--vt-muted); font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.vt-stats-top article > strong { color: #fff4e4; font-size: 42px; line-height: 1; }
.vt-stats-top article > span { color: var(--vt-muted); font-size: 10px; }
.vt-stats-top article > div { display: grid; gap: 8px; margin-top: 4px; }
.vt-stats-top article b { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--vt-line); color: #f5e7d5; font-size: 13px; font-weight: 700; }
.vt-section-title { margin: 20px 2px 10px; color: #f8eee2; font-size: 18px; }
.vt-breakdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vt-breakdown-card { padding: 14px; border: 1px solid var(--vt-line); border-radius: 12px; background: rgba(35, 36, 35, .9); }
.vt-breakdown-card header { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; }
.vt-breakdown-card header > span { font-size: 24px; }
.vt-breakdown-card header div { display: grid; gap: 3px; }
.vt-breakdown-card header strong { color: #fff4e8; font-size: 12px; }
.vt-breakdown-card header small { color: var(--vt-muted); font-size: 9px; }
.vt-breakdown-card header b { color: #fff6e8; font-size: 20px; }
.vt-breakdown-card > i { display: block; height: 6px; overflow: hidden; margin: 12px 0 8px; border-radius: 99px; background: rgba(0, 0, 0, .36); }
.vt-breakdown-card > i em { display: block; height: 100%; background: linear-gradient(90deg, #b36534, #e8a15d); }
.vt-breakdown-card footer { display: flex; justify-content: space-between; gap: 8px; color: var(--vt-muted); font-size: 9px; }

.vt-history-hero { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 22px; border: 1px solid var(--vt-line); border-radius: 14px; background: linear-gradient(110deg, rgba(67, 49, 35, .9), rgba(30, 34, 35, .9)); }
.vt-history-hero small { color: #d3b391; font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.vt-history-hero h2 { margin: 5px 0; color: #fff4e6; font-size: 25px; }
.vt-history-hero p { margin: 0; color: var(--vt-muted); font-size: 11px; }
.vt-history-hero > strong { color: #efb46f; font-size: 32px; text-align: right; }
.vt-history-hero > strong small { display: block; margin-top: 5px; }
.vt-history-chart { display: flex; min-height: 250px; gap: 10px; align-items: end; margin-top: 12px; padding: 22px 18px 12px; overflow-x: auto; border: 1px solid var(--vt-line); border-radius: 14px; background: rgba(24, 27, 28, .9); }
.vt-history-chart > div { display: grid; width: max(62px, calc(100% / 8)); height: 205px; flex: 1 0 62px; grid-template-rows: 1fr auto auto; justify-items: center; gap: 6px; }
.vt-history-chart i { width: 20px; height: var(--h); align-self: end; border-radius: 8px 8px 3px 3px; background: linear-gradient(#f0aa64, #8b4e2c); }
.vt-history-chart span { color: #fff1df; font-size: 10px; font-weight: 800; }
.vt-history-chart small { max-width: 80px; overflow: hidden; color: var(--vt-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vt-history-note { padding: 12px 14px; border-left: 3px solid var(--vt-accent); color: var(--vt-muted); background: rgba(223, 129, 64, .08); font-size: 10px; }
.vt-history-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vt-history-list article { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--vt-line); border-radius: 11px; background: rgba(34, 36, 36, .88); }
.vt-history-list article > span { font-size: 22px; }
.vt-history-list article div { display: grid; gap: 3px; }
.vt-history-list strong { color: #fff2e2; font-size: 11px; }
.vt-history-list small { color: var(--vt-muted); font-size: 8px; }
.vt-history-list b { color: #e8ad6e; }

.vt-upgrade-window { max-width: 790px; margin: 8px auto 0; overflow: hidden; border: 1px solid var(--vt-line-strong); border-radius: 16px; background: rgba(31, 31, 30, .96); box-shadow: 0 28px 85px rgba(0, 0, 0, .45); }
.vt-upgrade-window > header { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--vt-line); background: linear-gradient(90deg, rgba(91, 55, 33, .5), transparent); }
.vt-upgrade-window header small { color: #d6b697; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.vt-upgrade-window h2 { margin: 4px 0 0; color: #fff5e8; font-size: 22px; }
.vt-upgrade-window header > span { color: var(--vt-muted); font-size: 10px; }
.vt-upgrade-window > nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 7px 12px; }
.vt-upgrade-window nav button { min-height: 38px; border: 0; border-radius: 8px; color: var(--vt-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.vt-upgrade-window nav button.active { color: #fff4e7; background: rgba(143, 92, 55, .34); }
.vt-upgrade-sort { display: flex; gap: 5px; align-items: center; padding: 9px 15px; border-top: 1px solid var(--vt-line); border-bottom: 1px solid var(--vt-line); }
.vt-upgrade-sort span { margin-right: 4px; color: #918c86; font-size: 8px; font-weight: 850; }
.vt-upgrade-sort button { min-height: 29px; border: 0; border-radius: 7px; padding: 0 11px; color: var(--vt-muted); background: transparent; cursor: pointer; font-size: 9px; }
.vt-upgrade-sort button.active { color: #fff0df; background: #59402f; }
.vt-upgrade-list { max-height: min(62vh, 650px); overflow-y: auto; padding: 0 14px 12px; }
.vt-upgrade-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 72px; padding: 10px 2px; border-bottom: 1px solid var(--vt-line); }
.vt-upgrade-row > div { display: grid; gap: 3px; }
.vt-upgrade-row strong { color: #fff4e8; font-size: 12px; }
.vt-upgrade-row span,
.vt-upgrade-row small { color: var(--vt-muted); font-size: 9px; }
.vt-upgrade-row > b { color: #fff1df; font-size: 14px; white-space: nowrap; }
.vt-empty { grid-column: 1 / -1; padding: 30px; color: var(--vt-muted); text-align: center; }

.village-tracker-page .vt-equipment-tabs { gap: 5px; padding: 5px; border: 1px solid var(--vt-line); border-radius: 12px; background: rgba(28, 30, 30, .9); }
.village-tracker-page .vt-equipment-tabs button { min-height: 38px; border: 0; border-radius: 8px; padding: 0 14px; color: var(--vt-muted); }
.village-tracker-page .vt-equipment-tabs button.active { color: #fff3e5; background: #593b2b; }
.village-tracker-page .vt-ore-matrix { overflow: hidden; border-color: var(--vt-line); background: rgba(35, 36, 35, .9); }
.village-tracker-page .vt-ore-matrix > * { border-color: var(--vt-line); }
.village-tracker-page .vt-eq-group h2 { color: #f5e9dc; font-size: 17px; }
.village-tracker-page .vt-eq-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.village-tracker-page .vt-eq-card { border-color: var(--vt-line); color: var(--vt-text); background: linear-gradient(120deg, rgba(61, 55, 48, .75), rgba(37, 39, 39, .9)); }
.village-tracker-page .vt-eq-card:hover { border-color: var(--vt-accent); }
.village-tracker-page .vt-eq-card span,
.village-tracker-page .vt-eq-card small { color: var(--vt-muted); }
.village-tracker-page .vt-eq-card i { background: rgba(0, 0, 0, .35); }
.village-tracker-page .vt-eq-card em { background: linear-gradient(90deg, #b66837, #ecaa65); }
.vt-eq-level-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.vt-eq-level-card { display: grid; gap: 11px; min-width: 0; padding: 17px 0; border-bottom: 1px solid var(--vt-line); color: inherit; text-decoration: none; }
.vt-eq-level-art { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .055); }
.vt-eq-level-art img, .vt-eq-level-art > b { grid-area: 1 / 1; }
.vt-eq-level-art img { position: relative; z-index: 1; width: 62px; height: 62px; object-fit: contain; }
.vt-eq-level-art > b { color: #d3a06f; font-size: 14px; font-weight: 850; letter-spacing: .02em; line-height: 1; text-align: center; }
.vt-eq-level-main { display: grid; grid-template-columns: 68px minmax(0, 1fr); min-width: 0; gap: 14px; align-items: center; }
.vt-eq-level-copy { display: grid; min-width: 0; gap: 3px; }
.vt-eq-level-copy strong { overflow: hidden; color: var(--vt-text); font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.vt-eq-level-copy span { overflow: hidden; color: var(--vt-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.vt-eq-level-value { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.vt-eq-level-value b, .vt-eq-level-value strong { color: #fff1df; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-eq-level-value span, .vt-eq-level-value small { color: var(--vt-muted); font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; }
.vt-eq-level-progress { display: block; height: 6px; overflow: hidden; margin-top: 4px; border-radius: 99px; background: rgba(0, 0, 0, .38); }
.vt-eq-level-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b66837, #ecaa65); }
.vt-eq-level-progress > span { color: var(--vt-muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.vt-eq-level-ores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vt-eq-level-ore { display: grid; min-width: 0; gap: 2px; padding-top: 6px; border-top: 1px solid var(--vt-line); }
.vt-eq-level-ore span, .vt-eq-level-ore small { overflow: hidden; color: var(--vt-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.vt-eq-level-ore strong, .vt-eq-level-ore b { overflow: hidden; color: #f2c18c; font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.village-tracker-page .vt-eq-level-card { border-color: var(--vt-line); }
.village-tracker-page .vt-eq-level-ore { border-color: var(--vt-line); }
.village-tracker-page .table-wrap { border-color: var(--vt-line); background: rgba(29, 31, 31, .9); }
.village-tracker-page table { color: var(--vt-text); }
.village-tracker-page th,
.village-tracker-page td { border-color: var(--vt-line); }
.village-tracker-page .stat { border-color: var(--vt-line); color: var(--vt-text); background: rgba(36, 37, 36, .9); }
.village-tracker-page .vt-ore-inputs input,
.village-tracker-page .vt-single-select select { border-color: var(--vt-line); color: var(--vt-text); background: #272827; }

.modern-tracker-route .zq-version-switch { border-color: var(--vt-line); background: rgba(28, 30, 30, .9); }
.modern-tracker-route .zq-version-switch button { color: var(--vt-muted); }
.modern-tracker-route .zq-version-switch button.active { color: #fff3e5; background: #5b3c2b; box-shadow: none; }
.modern-tracker-route .zq-page { max-width: 1500px; color: var(--vt-text); }
.modern-tracker-route .zq-heading h1,
.modern-tracker-route .zq-card h2,
.modern-tracker-route .zq-best h3 { color: #fff4e6; }
.modern-tracker-route .zq-heading p,
.modern-tracker-route .zq-help p,
.modern-tracker-route .zq-hint,
.modern-tracker-route .zq-page small { color: var(--vt-muted); }
.modern-tracker-route .zq-card { border-color: var(--vt-line); background: linear-gradient(120deg, rgba(45, 42, 38, .95), rgba(27, 31, 32, .95)); box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.modern-tracker-route .zq-page button,
.modern-tracker-route .zq-page select,
.modern-tracker-route .zq-page input[type=number] { border-color: var(--vt-line); color: var(--vt-text); background: rgba(255, 255, 255, .06); }
.modern-tracker-route .zq-page .selected { border-color: var(--vt-accent); color: #fff1df; background: rgba(190, 101, 44, .25); }
.modern-tracker-route .zq-card h2 b { color: #fff3df; background: #764326; }
.modern-tracker-route .zq-check input,
.modern-tracker-route .zq-range { accent-color: var(--vt-accent); }
.modern-tracker-route .zq-page details,
.modern-tracker-route .zq-metrics > div { border-color: var(--vt-line); }
.modern-tracker-route .zq-spells > label,
.modern-tracker-route .zq-building-art { background: rgba(255, 255, 255, .055); }
.modern-tracker-route .zq-best { border-color: rgba(225, 131, 65, .46); background: linear-gradient(135deg, rgba(174, 84, 34, .26), rgba(122, 92, 50, .12)); }
.modern-tracker-route .zq-best > span,
.modern-tracker-route .zq-target > span { color: #f2a65e; }
.modern-tracker-route .zq-results { top: 86px; }

.modern-tracker-route #modernZapquake { color: #e8edf7; }
.modern-tracker-route #modernZapquake .mzq-header p,
.modern-tracker-route #modernZapquake .mzq-footnote,
.modern-tracker-route #modernZapquake .mzq-combo-card small { color: #a9b4c5; }
.modern-tracker-route #modernZapquake .mzq-groups .mzq-kicker,
.modern-tracker-route #modernZapquake .mzq-combo-card > span { color: #8cc2ff; }
.modern-tracker-route #modernZapquake .mzq-combo-card,
.modern-tracker-route #modernZapquake .mzq-combo-card li { border-color: #3a4451; }
.modern-tracker-route #modernZapquake .mzq-combo-card li strong { color: #e8edf7; }

@media (max-width: 1180px) {
  .vt-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-breakdown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .village-tracker-page .vt-eq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .modern-tracker-route main { padding-inline: 8px; }
  .vt-profile-band { grid-template-columns: 1fr; }
  .vt-profile-kpis { grid-template-columns: 1.25fr .75fr .75fr; }
  .vt-overview-toolbar { align-items: stretch; flex-direction: column; }
  .vt-search { min-width: 0; }
  .vt-resource-ribbon,
  .vt-stats-top { grid-template-columns: 1fr; }
  .vt-resource-ribbon > div { border-top: 1px solid var(--vt-line); border-left: 0; }
  .vt-resource-ribbon > div:first-child { border-top: 0; }
  .vt-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-breakdown-grid,
  .vt-history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-tracker-route .zq-results { position: static; }
}
@media (max-width: 560px) {
  .modern-tracker-route main { padding-top: 8px; }
  .vt-import-page { gap: 14px; padding: 10px 0 30px; }
  .vt-import-form { gap: 13px; padding: 15px; }
  .vt-import-form textarea { min-height: 220px; padding: 11px; font-size: 11px; }
  .vt-import-settings { align-items: flex-start; flex-direction: column; gap: 9px; }
  .vt-import-submit { width: 100%; }
  .vt-profile-identity { padding: 13px; }
  .vt-townhall-mark { width: 52px; height: 52px; border-radius: 13px 13px 17px 17px; font-size: 14px; }
  .vt-profile-kpis { grid-template-columns: 1fr 1fr; }
  .vt-profile-kpis > div:first-child { grid-column: 1 / -1; }
  .vt-profile-kpis > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--vt-line); }
  .vt-profile-kpis > div:nth-child(3) { border-top: 1px solid var(--vt-line); }
  .village-tracker-page .vt-tabs { width: 100%; }
  .village-tracker-page .vt-tabs button { flex: 0 0 auto; padding-inline: 12px; }
  .vt-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .vt-overview-item { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
  .vt-item-art { width: 38px; height: 38px; }
  .vt-item-art img { width: 36px; height: 36px; }
  .vt-overview-item > i { left: 54px; }
  .vt-breakdown-grid,
  .vt-history-list,
  .village-tracker-page .vt-eq-grid { grid-template-columns: 1fr; }
  .vt-eq-level-list { grid-template-columns: 1fr; }
  .vt-eq-level-card { gap: 10px; padding: 15px 0; }
  .vt-eq-level-main { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .vt-eq-level-art { width: 56px; height: 56px; }
  .vt-eq-level-art img { width: 52px; height: 52px; }
  .vt-eq-level-copy strong { font-size: 13px; }
  .vt-eq-level-ores { gap: 6px; }
  .vt-history-hero { align-items: flex-start; flex-direction: column; }
  .vt-history-hero > strong { text-align: left; }
  .vt-upgrade-window > nav { grid-template-columns: 1fr; }
  .vt-upgrade-row { grid-template-columns: 42px minmax(0, 1fr); }
  .vt-upgrade-row > b { grid-column: 2; }
}
.zq-profile-loader {
  max-width: 1180px;
  margin: 24px auto 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto 1fr;
  gap: 12px;
  align-items: end;
  border-bottom: 1px solid var(--line);
}
.zq-profile-loader label { display: grid; gap: 6px; font-weight: 700; }
.zq-profile-loader input { min-height: 44px; }
.zq-profile-loader button { min-height: 44px; white-space: nowrap; }
.zq-profile-loader span { align-self: center; color: var(--muted); font-size: .9rem; }
.entity-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.entity-actions a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; text-decoration: none; }
@media (max-width: 700px) {
  .zq-profile-loader { grid-template-columns: 1fr; margin-top: 12px; padding: 14px 16px; align-items: stretch; }
  .zq-profile-loader span { align-self: auto; }
  .entity-actions a { flex: 1 1 100%; justify-content: center; }
}

/* Shared Parzi CoC API visual system. Kept last to cover every SPA module. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f3ef;
  --surface: #ffffff;
  --surface-2: #efede8;
  --ink: #20242a;
  --muted: #69727d;
  --line: #ddd9d1;
  --accent: #995d38;
  --accent-soft: #f3e9e0;
  --olive: #497363;
  --gold: #a97014;
  --good: #197451;
  --bad: #b64242;
  --shadow: 0 10px 28px rgba(25, 39, 58, .08);
  --control: #ffffff;
  --subtle: #f0f4f7;
  --elevated: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1117;
  --surface: #151b23;
  --surface-2: #1d2631;
  --ink: #edf2f7;
  --muted: #9aa8b8;
  --line: #2c3745;
  --accent: #e3a06a;
  --accent-soft: #382719;
  --olive: #74c19b;
  --gold: #e0ad52;
  --good: #61c596;
  --bad: #ef7b7b;
  --shadow: 0 14px 34px rgba(0, 0, 0, .26);
  --control: #10161d;
  --subtle: #1a222c;
  --elevated: #18202a;
}

html, body { background: var(--paper); }
.site-header {
  grid-template-columns: auto minmax(240px, 520px) minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 68px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
body.home-route .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
.brand-shield { border: 0; border-radius: 8px; background: var(--accent); box-shadow: none; }
.theme-toggle { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface); cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-search, .search-box, .explore-form input, .ranking-card input, input, select, textarea { border-color: var(--line); color: var(--ink); background: var(--control); box-shadow: none; }
.header-search input::placeholder, .search-box input::placeholder { color: var(--muted); }

.section, .entity-head, .stat, .achievement, .round-card, .raid-card, .ranking-card,
.explore-menu, .explore-content, .unit-card, .army-village, .tool-card, .calc-card,
.cl-card, .vt-card, .vt-eq-card, .vt-upgrade-row, .base-layout-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
.section, .entity-head, .army-village { border-radius: 12px; }
.stat, .achievement, .round-card, .raid-card { border-radius: 8px; }
.note, .error { color: var(--ink); background: var(--subtle); border-color: var(--line); }
table, th, tbody tr:hover { color: var(--ink); background: var(--surface); }
th { background: var(--subtle); }
td { border-color: var(--line); }
.table-wrap { border-color: var(--line); }
.entity-nav a:hover, .filter-button.active, .explore-menu button.active { color: var(--ink); background: var(--subtle); }

.db-hero, .building-catalog-hero, .building-detail-hero, .army-overview {
  border-color: var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
.db-hero-copy { background: var(--surface); }
.db-hero h1, .db-section-heading h2, .db-module-card h3, .db-intelligence-grid h3,
.building-catalog-page, .building-detail-page, .building-catalog-hero h1,
.building-catalog-copy h3, .building-detail-copy h1, .building-level-head > strong,
.building-level-stats strong, .eq-catalog-page-title { color: var(--ink) !important; }
.db-hero-copy > p, .db-section-heading > p, .db-module-card p, .db-intelligence-grid p,
.building-catalog-hero p, .building-catalog-copy p, .building-detail-copy p,
.building-source-note, .building-total-strip p { color: var(--muted); }
.db-universe-stats { border-color: var(--line); }
.db-universe-stats span, .db-universe-stats strong { color: var(--ink); }
.db-search-stage { background: linear-gradient(145deg, #183450, #0c1825); }
.home-search-content, .db-search-card { border-color: color-mix(in srgb, var(--line) 60%, transparent); color: var(--ink); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: none; }
.db-directory, .db-intelligence { padding-top: 54px; }
.db-module-card, .db-module-card.featured, .db-intelligence-grid,
.building-catalog-card, .building-catalog-toolbar, .building-total-strip,
.building-level-card, .building-detail-art, .building-catalog-scope {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
.db-module-card, .building-catalog-card { border-radius: 10px; }
.db-module-card:hover, .building-catalog-card:hover, .building-level-card:hover { border-color: var(--accent); box-shadow: none; }
.db-module-icon, .building-catalog-art, .building-level-art,
.building-level-stats > span, .building-total-strip > div, .building-traits span,
.building-filter-chips button { border-color: var(--line); color: var(--ink); background: var(--subtle); }
.building-catalog-art, .building-level-art, .building-detail-art { position: relative; }
.catalog-art-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 22px; font-weight: 850; letter-spacing: .06em; }
.building-catalog-art img, .building-level-art img, .building-detail-art img { position: relative; z-index: 1; }
.image-missing::after { content: 'Görsel kullanılamıyor'; position: absolute; inset: auto 8px 8px; color: var(--muted); font-size: 8px; text-align: center; }
.db-intelligence-grid > a { color: var(--ink); border-color: var(--line); }
.db-intelligence-grid > a:hover { background: var(--subtle); }

.unit-art, .unit-art.spells, .unit-art.equipment, .unit-art.heroes { background: var(--subtle); }
.army-overview, .army-village.builder-village { background: var(--surface); }
.army-quick-stats > div, .home-trust span, .search-hints button { border-color: var(--line); color: var(--ink); background: var(--subtle); }
.army-progress-ring > div { background: var(--surface); }
.army-linear-track, .progress { border-color: var(--line); background: var(--surface-2); }
.army-filter { border-color: var(--line); color: var(--muted); background: var(--surface); }
.army-filter.active, .kind-switch button.active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: none; }
.kind-switch { background: var(--surface-2); }

:root[data-theme="dark"] .cs-troops-page,
:root[data-theme="light"] .cs-troops-page { border-color: var(--line); color: var(--ink) !important; background: var(--surface) !important; box-shadow: none; }
:root[data-theme="light"] .cs-troops-page .cs-research-group,
:root[data-theme="dark"] .cs-troops-page .cs-research-group { border-color: var(--line) !important; background: var(--subtle) !important; }
:root[data-theme="light"] .cs-troops-page .cs-research-title,
:root[data-theme="light"] .cs-troops-page .cs-research-label,
:root[data-theme="dark"] .cs-troops-page .cs-research-title,
:root[data-theme="dark"] .cs-troops-page .cs-research-label { color: var(--ink) !important; }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: auto minmax(0,1fr) auto; }
  .header-search { display: none; }
  .mobile-search-button { display: block; }
}
@media (max-width: 720px) {
  .site-header, body.home-route .site-header { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
  .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .db-hero { border-radius: 12px; }
  .db-hero-copy { padding: 32px 22px; }
  .db-hero h1 { font-size: 39px !important; }
  .db-search-stage { min-height: 520px; }
}

/* Final theme pass: bring legacy modules onto the shared light/dark palette. */
:root[data-theme="light"] .modern-tracker-route,
:root[data-theme="dark"] .modern-tracker-route {
  --vt-bg: var(--paper);
  --vt-panel: var(--surface);
  --vt-panel-2: var(--surface-2);
  --vt-panel-3: var(--subtle);
  --vt-line: var(--line);
  --vt-line-strong: var(--accent);
  --vt-text: var(--ink);
  --vt-muted: var(--muted);
  --vt-accent: var(--accent);
  --vt-accent-2: var(--accent);
  --vt-good: var(--good);
}

html[data-theme] body {
  color: var(--ink) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
}

html[data-theme] #app { color: var(--ink) !important; }
html[data-theme] .site-header {
  grid-template-columns: auto minmax(180px, 320px) minmax(0, 1fr) auto;
  gap: 12px;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}
html[data-theme] body.home-route .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
html[data-theme] .brand,
html[data-theme] .site-header .logo { color: var(--ink) !important; }
html[data-theme] .brand-shield { border: 0 !important; color: #fff !important; background: var(--accent) !important; }
html[data-theme] .header-nav { gap: 10px; }
html[data-theme] .header-nav a { color: var(--muted) !important; font-size: 10px; white-space: nowrap; }
html[data-theme] .header-nav a:hover,
html[data-theme] .header-nav a.active { color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
html[data-theme] .header-search,
html[data-theme] .theme-toggle,
html[data-theme] .mobile-search,
html[data-theme] .mobile-search-button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-theme] .header-search input,
html[data-theme] .header-search select,
html[data-theme] .mobile-search input,
html[data-theme] .mobile-search button { color: var(--ink) !important; background: transparent !important; }
html[data-theme] .header-search input::placeholder { color: var(--muted) !important; }

html[data-theme] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] select,
html[data-theme] textarea {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background-color: var(--control) !important;
}
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--muted) !important; opacity: 1; }

html[data-theme] .section,
html[data-theme] .entity-head,
html[data-theme] .split .section,
html[data-theme] .explore-menu,
html[data-theme] .explore-content,
html[data-theme] .ranking-card,
html[data-theme] .calculator-hero,
html[data-theme] .calc-card,
html[data-theme] .tool-card,
html[data-theme] .vt-card,
html[data-theme] .eq-catalog-hero-group {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html[data-theme] .entity-title h1,
html[data-theme] .tool-page > h1,
html[data-theme] .compare-page > h1,
html[data-theme] .compare-page > .eyebrow + h1,
html[data-theme] .ranking-card h2,
html[data-theme] .rankings-grid ~ h1,
html[data-theme] .explore-menu h1,
html[data-theme] .explore-content h2,
html[data-theme] .eq-catalog-page-title,
html[data-theme] .eq-catalog-hero-head h2,
html[data-theme] .section-head h2,
html[data-theme] .section-head h3,
html[data-theme] .section-head p,
html[data-theme] .calculator-head h2,
html[data-theme] .tool-page h2,
html[data-theme] .compare-page h2,
html[data-theme] .vt-import-head h1 { color: var(--ink) !important; }
html[data-theme] .entity-meta,
html[data-theme] .entity-score span,
html[data-theme] .ranking-card p,
html[data-theme] .explore-content p,
html[data-theme] .eq-catalog-sub,
html[data-theme] .eq-catalog-meta,
html[data-theme] .eq-catalog-count,
html[data-theme] .tool-page p,
html[data-theme] .compare-page p { color: var(--muted) !important; }
html[data-theme] .entity-nav a,
html[data-theme] .explore-menu button { color: var(--muted) !important; }
html[data-theme] .entity-nav a.active,
html[data-theme] .explore-menu button.active { border-color: var(--line) !important; color: var(--accent) !important; background: var(--accent-soft) !important; box-shadow: none !important; }
html[data-theme] .note,
html[data-theme] .label,
html[data-theme] .stat,
html[data-theme] .achievement,
html[data-theme] .round-card,
html[data-theme] .raid-card { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme] .table-wrap,
html[data-theme] table,
html[data-theme] table:not(.eq-matchup-table) { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; }
html[data-theme] th,
html[data-theme] table:not(.eq-matchup-table) th { border-color: var(--line) !important; color: var(--muted) !important; background: var(--surface-2) !important; }
html[data-theme] td,
html[data-theme] table:not(.eq-matchup-table) td { border-color: var(--line) !important; color: var(--ink) !important; background: transparent !important; }

/* The directory stays open and spacious instead of repeating nested cards. */
html[data-theme] .db-hero {
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
}
html[data-theme] .db-hero-copy { background: transparent; }
html[data-theme] .db-search-stage { background: var(--surface-2); }
html[data-theme] .db-search-card {
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
html[data-theme] .db-search-card h2 { color: var(--ink) !important; }
html[data-theme] .db-search-card > p,
html[data-theme] .db-search-card .search-hints,
html[data-theme] .db-search-card .search-hints > span { color: var(--muted) !important; }
html[data-theme] .db-search-card .search-kicker { color: var(--accent) !important; }
html[data-theme] .db-search-card .kind-switch { background: var(--surface) !important; }
html[data-theme] .db-search-card .kind-switch button { color: var(--muted) !important; }
html[data-theme] .db-search-card .kind-switch button.active { color: #fff !important; background: var(--accent) !important; box-shadow: none !important; }
html[data-theme] .db-search-card .search-box { border-color: var(--line) !important; background: var(--control) !important; box-shadow: none !important; }
html[data-theme] .db-search-card .search-box input { color: var(--ink) !important; background: transparent !important; }
html[data-theme] .db-search-card .search-box button,
html[data-theme] .header-search button,
html[data-theme] .ranking-card button { color: #fff !important; background: var(--accent) !important; }
html[data-theme] .db-search-card .search-hints button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; }
html[data-theme] .tool-form button,
html[data-theme] .compare-form button,
html[data-theme] .base-filter-row button,
html[data-theme] .tracked-villages button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme] .tool-form button:hover,
html[data-theme] .compare-form button:hover,
html[data-theme] .base-filter-row button:hover,
html[data-theme] .tracked-villages button:hover { border-color: var(--accent) !important; }
html[data-theme] .base-home-entry {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme] .base-home-copy h2,
html[data-theme] .base-home-levels a { color: var(--ink) !important; }
html[data-theme] .base-home-copy p,
html[data-theme] .base-home-levels span { color: var(--muted) !important; }
html[data-theme] .base-home-levels a { border-color: var(--line); border-radius: 0; background: transparent; }
html[data-theme] .db-section-heading { border-color: var(--line); }
html[data-theme] .db-section-heading h2 { color: var(--ink) !important; }
html[data-theme] .db-kicker { color: var(--accent); }
html[data-theme] .db-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
html[data-theme] .db-module-card,
html[data-theme] .db-module-card.featured {
  min-height: 145px;
  padding: 20px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .db-module-card:hover { transform: none; background: var(--subtle) !important; }
html[data-theme] .db-module-icon { border: 0; background: transparent; }
html[data-theme] .db-module-card h3,
html[data-theme] .db-intelligence-grid h3 { color: var(--ink) !important; }
html[data-theme] .db-module-card p,
html[data-theme] .db-intelligence-grid p { color: var(--muted) !important; }
html[data-theme] .db-module-card small,
html[data-theme] .db-module-card > b,
html[data-theme] .db-intelligence-grid small { color: var(--accent) !important; }
html[data-theme] .db-module-card > b { position: static; grid-column: 2; margin-top: 8px; }
html[data-theme] .db-intelligence-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent !important;
}
html[data-theme] .db-intelligence-grid > a { min-height: 0; padding: 20px 14px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink) !important; }
html[data-theme] .db-intelligence-grid > a:hover { background: var(--subtle) !important; }
.site-footer {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 16px 0 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}
html[data-theme] .site-footer { border-color: var(--line); color: var(--muted); }
html[data-theme] .site-footer a { color: var(--accent); text-underline-offset: 2px; }

html[data-theme] .eq-catalog-card {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html[data-theme] .eq-catalog-card:hover { border-color: var(--accent) !important; background: var(--surface-2) !important; }
html[data-theme] .eq-catalog-art { background: var(--surface-2) !important; }
html[data-theme] .eq-catalog-name { color: var(--ink) !important; }
html[data-theme] .eq-catalog-rarity.epic { color: #9b68b4 !important; }
html[data-theme] .eq-catalog-rarity.common { color: var(--olive) !important; }
html[data-theme] .eq-catalog-guide { border-color: var(--line) !important; color: var(--gold) !important; background: var(--surface-2) !important; }
html[data-theme] .explore-menu .item-group-title h3 { color: var(--ink) !important; }
html[data-theme] .explore-content button { border-color: var(--line) !important; color: var(--accent) !important; background: var(--accent-soft) !important; }

html[data-theme] body.modern-tracker-route {
  color: var(--ink) !important;
  background: var(--paper) !important;
  background-image: none !important;
  background-attachment: initial;
}
html[data-theme] body.modern-tracker-route .vt-import-form,
html[data-theme] body.modern-tracker-route .vt-profile-identity,
html[data-theme] body.modern-tracker-route .vt-profile-kpis,
html[data-theme] body.modern-tracker-route .vt-stats-top article,
html[data-theme] body.modern-tracker-route .vt-breakdown-card,
html[data-theme] body.modern-tracker-route .vt-upgrade-window,
html[data-theme] body.modern-tracker-route .vt-ore-matrix,
html[data-theme] body.modern-tracker-route .vt-overview-item,
html[data-theme] body.modern-tracker-route .vt-history-chart,
html[data-theme] body.modern-tracker-route .vt-history-list article,
html[data-theme] body.modern-tracker-route .vt-eq-card,
html[data-theme] body.modern-tracker-route .vt-tabs,
html[data-theme] body.modern-tracker-route .vt-category-tabs,
html[data-theme] body.modern-tracker-route .vt-search { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-theme] body.modern-tracker-route .vt-import-form label,
html[data-theme] body.modern-tracker-route .vt-import-head h1,
html[data-theme] body.modern-tracker-route .vt-profile-identity h1,
html[data-theme] body.modern-tracker-route .vt-profile-kpis strong,
html[data-theme] body.modern-tracker-route .vt-section-title,
html[data-theme] body.modern-tracker-route .vt-overview-item strong,
html[data-theme] body.modern-tracker-route .vt-breakdown-card header strong,
html[data-theme] body.modern-tracker-route .vt-history-hero h2,
html[data-theme] body.modern-tracker-route .vt-upgrade-window h2,
html[data-theme] body.modern-tracker-route .vt-upgrade-row strong,
html[data-theme] body.modern-tracker-route .vt-eq-level-value b,
html[data-theme] body.modern-tracker-route .vt-eq-level-value strong { color: var(--ink) !important; }
html[data-theme] body.modern-tracker-route .vt-import-head p,
html[data-theme] body.modern-tracker-route .vt-import-settings,
html[data-theme] body.modern-tracker-route .vt-import-settings label,
html[data-theme] body.modern-tracker-route .vt-overview-item span,
html[data-theme] body.modern-tracker-route .vt-breakdown-card header small,
html[data-theme] body.modern-tracker-route .vt-history-hero p,
html[data-theme] body.modern-tracker-route .vt-history-list small,
html[data-theme] body.modern-tracker-route .vt-upgrade-row span,
html[data-theme] body.modern-tracker-route .vt-upgrade-row small { color: var(--muted) !important; }
html[data-theme] body.modern-tracker-route .vt-import-form input,
html[data-theme] body.modern-tracker-route .vt-import-form select,
html[data-theme] body.modern-tracker-route .vt-import-form textarea,
html[data-theme] body.modern-tracker-route .vt-single-select select { color: var(--ink) !important; background: var(--control) !important; }

html[data-theme] body.modern-tracker-route .zq-profile-loader {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
html[data-theme] body.modern-tracker-route .zq-profile-loader label { color: var(--ink) !important; }
html[data-theme] body.modern-tracker-route .zq-profile-loader input { border-color: var(--line) !important; color: var(--ink) !important; background: var(--control) !important; }
html[data-theme] body.modern-tracker-route .zq-profile-loader input::placeholder { color: var(--muted) !important; }
html[data-theme] body.modern-tracker-route .zq-profile-loader button { border-color: var(--accent) !important; color: #fff !important; background: var(--accent) !important; }
html[data-theme] body.modern-tracker-route .zq-profile-loader span { color: var(--muted) !important; }
html[data-theme] body.modern-tracker-route .zq-version-switch { border-color: var(--line) !important; background: var(--surface-2) !important; }
html[data-theme] body.modern-tracker-route .zq-version-switch button { color: var(--muted) !important; }
html[data-theme] body.modern-tracker-route .zq-version-switch button.active { color: var(--accent) !important; background: var(--surface) !important; box-shadow: none !important; }

html[data-theme] body.modern-tracker-route .zq-page,
html[data-theme] body.modern-tracker-route .zq-card,
html[data-theme] body.modern-tracker-route .zq-results,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-combo-card { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-theme] body.modern-tracker-route .zq-page { border: 0 !important; color: var(--ink) !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] body.modern-tracker-route .zq-page h1,
html[data-theme] body.modern-tracker-route .zq-page h2,
html[data-theme] body.modern-tracker-route .zq-page h3,
html[data-theme] body.modern-tracker-route .zq-card h2,
html[data-theme] body.modern-tracker-route .zq-best h3 { color: var(--ink) !important; }
html[data-theme] body.modern-tracker-route .zq-page p,
html[data-theme] body.modern-tracker-route .zq-page small,
html[data-theme] body.modern-tracker-route .zq-hint { color: var(--muted) !important; }
html[data-theme] body.modern-tracker-route .zq-page button,
html[data-theme] body.modern-tracker-route .zq-page select,
html[data-theme] body.modern-tracker-route .zq-page input[type="number"] { border-color: var(--line) !important; color: var(--ink) !important; background: var(--control) !important; }
html[data-theme] body.modern-tracker-route .zq-page .selected { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; }

html[data-theme] body.modern-tracker-route #modernZapquake {
  --mzq-bg: var(--paper);
  --mzq-panel: var(--surface);
  --mzq-soft: var(--surface-2);
  --mzq-line: var(--line);
  --mzq-text: var(--ink);
  --mzq-muted: var(--muted);
  --mzq-orange: var(--accent);
  color: var(--ink) !important;
}
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-shell { background: var(--paper) !important; }
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-config,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-combo-card,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-modal { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; box-shadow: none !important; }
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-config > h2,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-ranked,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-toolbar label,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-source-tile,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-target-chips button,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-detail-combos > div { color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-ranked button.active,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-config-title button,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-toolbar button,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-modal header button,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-kind-tabs button { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface) !important; }
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-target-chips button > b,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-source-tile > b,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-combo-source > em { color: var(--ink) !important; border-color: var(--line) !important; background: var(--surface) !important; }
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-empty,
html[data-theme] body.modern-tracker-route #modernZapquake .mzq-error { color: var(--muted) !important; background: var(--surface-2) !important; }

@media (max-width: 1180px) {
  html[data-theme] .site-header { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  html[data-theme] .header-search { display: none; }
  html[data-theme] .mobile-search-button { display: block; }
  html[data-theme] body.home-route .mobile-search-button { display: none; }
}
@media (max-width: 720px) {
  html[data-theme] .site-footer { width: calc(100% - 22px); }
  html[data-theme] .db-directory-grid { grid-template-columns: 1fr; gap: 0; }
  html[data-theme] .db-module-card,
  html[data-theme] .db-module-card.featured { min-height: 132px; padding: 17px 4px; }
  html[data-theme] .db-intelligence-grid { grid-template-columns: 1fr; }
  html[data-theme] .db-intelligence-grid > a { border-bottom: 1px solid var(--line); }
  html[data-theme] .db-hero { border-radius: 0; }
}

/* Keep player and clan profiles readable in both shared themes. */
html[data-theme] .entity-page .entity-score strong,
html[data-theme] .entity-page .stat strong,
html[data-theme] .entity-page .name-cell a { color: var(--ink) !important; }
html[data-theme] .entity-page .entity-meta,
html[data-theme] .entity-page .entity-score span,
html[data-theme] .entity-page .stat span,
html[data-theme] .entity-page .stat small,
html[data-theme] .entity-page .name-cell span,
html[data-theme] .entity-page .description { color: var(--muted) !important; }
html[data-theme] .entity-page .entity-meta a { color: var(--accent) !important; }
html[data-theme] .entity-page .entity-badge { color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme] .entity-page .entity-badge .fallback { color: var(--accent) !important; }
html[data-theme] .entity-page .label { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme] .entity-page .empty { border-color: var(--line) !important; color: var(--muted) !important; background: var(--subtle) !important; }
html[data-theme] .entity-page .entity-actions a { border-color: var(--line) !important; color: var(--ink) !important; background: var(--surface-2) !important; }
html[data-theme="light"] .entity-page .entity-meta,
html[data-theme="light"] .entity-page .entity-score span,
html[data-theme="light"] .entity-page .stat span,
html[data-theme="light"] .entity-page .stat small,
html[data-theme="light"] .entity-page .name-cell span,
html[data-theme="light"] .entity-page .description { color: #626b75 !important; }

/* Keep the home player search and saved favorites readable in dark mode. */
html[data-theme] .db-search-card .home-tag-field > span {
  color: var(--muted) !important;
  font-size: 10px;
}
html[data-theme] .db-search-card .search-hints,
html[data-theme] .db-search-card .search-hints > span {
  font-size: 11px;
}
html[data-theme] .db-search-card .search-hints button {
  padding: 7px 10px;
  font-size: 10px;
}
html[data-theme] .db-search-card .home-favorites-section {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}
html[data-theme] .db-search-card .fav-title {
  color: var(--ink) !important;
  font-size: 14px;
}
html[data-theme] .db-search-card .fav-count {
  color: var(--muted) !important;
  font-size: 12px;
}
html[data-theme] .db-search-card .fav-chip {
  border-color: var(--line) !important;
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  box-shadow: none !important;
}
html[data-theme] .db-search-card .fav-chip-link,
html[data-theme] .db-search-card .fav-chip-info strong {
  color: var(--ink) !important;
}
html[data-theme] .db-search-card .fav-chip-info strong {
  font-size: 12px;
}
html[data-theme] .db-search-card .fav-chip-info small {
  color: var(--muted) !important;
  font-size: 11px;
}
html[data-theme] .db-search-card .fav-chip-remove {
  border-left-color: var(--line) !important;
  color: var(--muted) !important;
  font-size: 12px;
}
html[data-theme] .db-search-card .fav-chip-remove:hover {
  color: var(--bad) !important;
  background: color-mix(in srgb, var(--bad) 12%, var(--surface-2)) !important;
}
html[data-theme="dark"] .db-search-card .kind-switch button.active,
html[data-theme="dark"] .db-search-card .search-box button {
  color: #17202a !important;
}
html[data-theme="light"] .db-search-card .home-tag-field > span,
html[data-theme="light"] .db-search-card .search-hints,
html[data-theme="light"] .db-search-card .search-hints > span,
html[data-theme="light"] .db-search-card .fav-count,
html[data-theme="light"] .db-search-card .fav-chip-info small,
html[data-theme="light"] .db-search-card .fav-chip-remove {
  color: #59616b !important;
}
html[data-theme="light"] .db-search-card .fav-chip-star {
  color: #795411 !important;
}
html[data-theme="light"] .db-search-card .search-box input::placeholder {
  color: #66717e !important;
  opacity: 1;
}

/* Usability pass: keep the shared shell calm, measurable, and usable on small
   screens. The menu selectors also support the semantic header controls added
   by the application template without requiring layout changes here. */
html[data-theme] .site-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding-inline: max(16px, calc((100vw - 1180px) / 2));
}
html[data-theme] .site-header > .header-search { display: none; }
html[data-theme] .mobile-search-button { display: inline-grid; place-items: center; min-width: 44px; width: 44px; height: 44px; }
html[data-theme] .mobile-search-button span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-theme] .header-nav {
  min-width: 0;
  gap: clamp(8px, 1vw, 14px);
}
html[data-theme] .header-nav a {
  padding: 8px 2px;
  font-size: 11px;
}
html[data-theme] .header-nav a.active { box-shadow: inset 0 -2px var(--accent) !important; }
html[data-theme] .db-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
html[data-theme] .db-coverage div { display: flex; align-items: baseline; gap: 5px; }
html[data-theme] .db-coverage dt { color: var(--ink); font-size: 16px; font-weight: 850; }
html[data-theme] .db-coverage dd { margin: 0; color: var(--muted); font-size: 11px; }
html[data-theme] .nav-toggle {
  display: none;
  min-width: 76px;
  min-height: 40px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

html[data-theme] a:focus-visible,
html[data-theme] button:focus-visible,
html[data-theme] input:focus-visible,
html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible,
html[data-theme] summary:focus-visible {
  outline: 3px solid var(--accent) !important;
  outline-offset: 3px;
}

/* Home groups read as one directory with separators instead of nested cards. */
html[data-theme] .db-hero { min-height: 0; }
html[data-theme] .db-search-stage {
  min-height: 0;
  align-content: center;
  background: var(--surface-2);
}
html[data-theme] .db-directory-grid {
  gap: 0 34px;
}
html[data-theme] .db-module-card,
html[data-theme] .db-module-card.featured {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  align-items: center;
  padding: 18px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme] .db-module-card:hover {
  transform: none;
  border-color: var(--line);
  background: var(--subtle);
}
html[data-theme] .db-module-icon { border: 0; background: transparent; }
html[data-theme] .db-module-card > b { position: static; grid-column: 2; grid-row: 1; margin-top: 0; }
html[data-theme] .base-home-entry {
  margin-top: 34px;
  padding: 22px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme] .base-home-levels a { border-radius: 0; background: transparent; }
html[data-theme] .base-home-levels a:hover { background: var(--subtle); }

@media (max-width: 1120px) {
  html[data-theme] .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  html[data-theme] .site-header .header-search { display: none; }
  html[data-theme] .header-nav { display: none; }
  html[data-theme] .nav-toggle { display: inline-flex; }
  html[data-theme] .header-nav.is-open {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 8px 0 4px;
    border-top: 1px solid var(--line);
  }
  html[data-theme] .header-nav.is-open a {
    min-height: 44px;
    padding: 12px;
    border-radius: 7px;
    font-size: 12px;
    text-align: center;
  }
  html[data-theme] .mobile-search-button { display: inline-grid; place-items: center; }
}

@media (max-width: 720px) {
  html[data-theme] .site-header,
  html[data-theme] body.home-route .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    min-height: 60px;
    padding-block: 9px;
  }
  html[data-theme] .brand { min-width: 0; }
  html[data-theme] .brand span:last-child { overflow: hidden; text-overflow: ellipsis; }
  html[data-theme] #app { width: min(100% - 24px, 1180px); padding-top: 22px; }
  html[data-theme] .mobile-search { padding-inline: 12px; }
  html[data-theme] .mobile-search .header-search { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; }
  html[data-theme] .mobile-search .header-search button { min-width: 58px; padding-inline: 10px; }
  html[data-theme] .tool-form input,
  html[data-theme] .tool-form select,
  html[data-theme] .tool-form textarea,
  html[data-theme] .tool-form button { min-height: 44px; font-size: 16px; }
  html[data-theme] .ore-balance label { gap: 7px; font-size: 13px; }
  html[data-theme] .tool-form > label { font-size: 14px; }
  html[data-theme] .db-directory-grid { grid-template-columns: 1fr; gap: 0; }
  html[data-theme] .db-module-card,
  html[data-theme] .db-module-card.featured { min-height: 76px; padding: 14px 4px; }
  html[data-theme] .db-intelligence-grid { grid-template-columns: 1fr; }
  html[data-theme] .db-intelligence-grid > a { border-right: 0; border-bottom: 1px solid var(--line); }
  html[data-theme] .db-hero { border-radius: 0; }
  html[data-theme] .db-search-stage { min-height: 0; align-content: start; padding: 16px; }
}

@media (max-width: 400px) {
  html[data-theme] .site-header { padding-inline: 10px; }
  html[data-theme] .brand { font-size: 15px; }
  html[data-theme] .brand-shield,
  html[data-theme] .theme-toggle,
  html[data-theme] .mobile-search-button,
  html[data-theme] .nav-toggle { min-width: 44px; width: 44px; height: 44px; }
  html[data-theme] .nav-toggle span:last-child,
  html[data-theme] .mobile-search-button span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-theme] .header-nav.is-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] #app { width: calc(100% - 20px); }
  html[data-theme] .db-search-card { padding: 16px !important; }
  html[data-theme] .search-box { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .search-box button { min-height: 44px; }
}

/* Keep base titles and controls readable after shared dark cards take effect. */
:root[data-theme="dark"] .base-layout-page { color: var(--ink); }
:root[data-theme="dark"] .base-layout-hero { background: transparent; }
:root[data-theme="dark"] .base-layout-hero h1 { color: var(--ink); }
:root[data-theme="dark"] .base-layout-hero p,
:root[data-theme="dark"] .base-layout-total span { color: var(--muted); }
:root[data-theme="dark"] .base-layout-total { border-color: var(--line); }
:root[data-theme="dark"] .base-layout-total strong { color: var(--accent); }
:root[data-theme="dark"] .base-level-nav a {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}
:root[data-theme="dark"] .base-level-nav a:hover { border-color: var(--accent); color: var(--ink); }
:root[data-theme="dark"] .base-level-nav a.active {
  border-color: var(--accent);
  color: #1b140e;
  background: var(--accent);
  box-shadow: none;
}
:root[data-theme="dark"] .base-layout-toolbar { border-color: var(--line); }
:root[data-theme="dark"] .base-kind-switch button,
:root[data-theme="dark"] .base-sort-switch button { color: var(--muted); }
:root[data-theme="dark"] .base-kind-switch button span { color: var(--muted); }
:root[data-theme="dark"] .base-kind-switch button.active,
:root[data-theme="dark"] .base-sort-switch button.active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2);
}
:root[data-theme="dark"] .base-layout-note,
:root[data-theme="dark"] .base-layout-stats,
:root[data-theme="dark"] .base-layout-source,
:root[data-theme="dark"] .base-layout-more small,
:root[data-theme="dark"] .base-layout-footer { color: var(--muted); }
:root[data-theme="dark"] .base-layout-card {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
}
:root[data-theme="dark"] .base-layout-info h3 { color: var(--ink); }
:root[data-theme="dark"] .base-layout-tags span {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-2);
}
:root[data-theme="dark"] .base-layout-image.image-missing { background: var(--surface-2); }
:root[data-theme="dark"] .base-layout-image.image-missing::after { color: var(--muted); }
:root[data-theme="dark"] .base-empty {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface);
}
:root[data-theme="dark"] .base-layout-more button {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2);
}
:root[data-theme="dark"] .base-layout-more button:hover { border-color: var(--accent); }
:root[data-theme="dark"] .base-layout-more button span { color: var(--muted); }