:root {
  --bg: #0a0c0f;
  --panel: #10141a;
  --panel2: #151a21;
  --panel3: #1b222b;
  --text: #edf1f5;
  --muted: #929ca8;
  --line: #29313b;
  --accent: #d6a642;
  --accent2: #f0c968;
  --danger: #dc6a6a;
  --radius: 12px;
  --shadow: 0 10px 35px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% -20%, rgba(214,166,66,.11), transparent 35rem),
    var(--bg);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.site-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1500px)/2));
  border-bottom: 1px solid var(--line);
  background: rgba(10,12,15,.93);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 40px; height: 40px; border: 1px solid #775d27; border-radius: 8px;
  display: grid; place-items: center; color: var(--accent2); font-weight: 900;
  background: linear-gradient(145deg,#2a2110,#111);
}
.brand strong { display: block; letter-spacing: .12em; }
.brand span { color: var(--muted); font-size: .82rem; }

main { max-width: 1500px; margin: 0 auto; padding: 30px 24px 60px; }
footer { text-align:center; padding: 28px; color:#69737e; border-top:1px solid var(--line); font-size:.8rem; }

.hero { padding: 18px 0 28px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing:-.04em; }
.hero p { margin: 0; color: var(--muted); max-width: 780px; line-height:1.6; }

.controls {
  background: rgba(16,20,26,.92); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; display:grid; grid-template-columns:minmax(240px,2fr) repeat(5,minmax(120px,1fr));
  gap:10px; position:sticky; top:88px; z-index:10; box-shadow:var(--shadow);
}
.control input, .control select {
  width:100%; height:42px; color:var(--text); background:#0b0f13; border:1px solid #303945;
  border-radius:8px; padding:0 12px; outline:none;
}
.control input:focus, .control select:focus { border-color:#8b6c2d; box-shadow:0 0 0 2px rgba(214,166,66,.12); }
.search { grid-column:auto; }

.result-line { margin:18px 2px 10px; color:var(--muted); font-size:.88rem; }
.tank-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px; }
.tank-card {
  border:1px solid var(--line); background:linear-gradient(160deg,var(--panel2),#0f1318);
  border-radius:var(--radius); overflow:hidden; transition:.15s ease; min-height:310px;
}
.tank-card:hover { transform:translateY(-2px); border-color:#5e4d2c; box-shadow:0 14px 28px rgba(0,0,0,.22); }
.tank-art {
  height:168px; display:flex; justify-content:center; align-items:center;
  background:radial-gradient(circle,#232933 0%,#0e1116 70%); overflow:hidden; position:relative;
}
.tank-art img { max-width:100%; max-height:100%; object-fit:contain; }
.tank-art .role-icon { position:absolute; right:10px; bottom:10px; width:45px; height:45px; object-fit:contain; }
.placeholder { color:#525c67; font-size:.8rem; }
.card-body { padding:15px; }
.card-title { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.card-title h2 { margin:0; font-size:1.15rem; }
.tier { color:var(--accent2); font-weight:800; white-space:nowrap; }
.meta { margin-top:6px; color:var(--muted); font-size:.86rem; text-transform:capitalize; }
.aliases { color:#737e89; font-size:.76rem; margin-top:4px; }
.ratings { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.rating {
  display:inline-flex; align-items:center; gap:7px; padding:5px 9px;
  border-radius:7px; background:#0b0f13; border:1px solid #2a323c; font-size:.78rem;
}
.rating strong { color:var(--accent2); font-size:.95rem; }

.back { color:var(--muted); display:inline-flex; gap:8px; align-items:center; margin-bottom:18px; }
.back:hover { color:var(--text); }

.detail-hero {
  display:grid; grid-template-columns:minmax(300px,1.2fr) minmax(300px,1fr); gap:22px;
  background:linear-gradient(145deg,#151a20,#0d1014); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}
.detail-art {
  min-height:320px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,#252d37,#0b0e12 72%); position:relative; padding:20px;
}
.detail-art > img:first-child { max-width:100%; max-height:390px; object-fit:contain; }
.detail-art .role-icon { position:absolute; right:22px; bottom:20px; width:70px; height:70px; object-fit:contain; }
.detail-info { padding:34px 32px 30px 8px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; }
.detail-info h1 { margin:8px 0 8px; font-size:clamp(2.2rem,5vw,4.5rem); line-height:.95; letter-spacing:-.05em; }
.detail-info .aliases { font-size:.9rem; margin-bottom:18px; }
.detail-meta { display:flex; gap:7px; flex-wrap:wrap; }
.pill { padding:6px 9px; border:1px solid #353e48; border-radius:999px; color:#c6ced6; font-size:.8rem; text-transform:capitalize; }
.detail-ratings { margin-top:20px; display:flex; gap:9px; }

.section { margin-top:30px; }
.section-head { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid var(--line); margin-bottom:14px; padding-bottom:9px; }
.section h2 { margin:0; font-size:1.3rem; }
.section-kicker { color:var(--muted); font-size:.78rem; }

.build-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:14px; }
.build {
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:16px;
}
.build h3 { margin:0 0 14px; color:var(--accent2); font-size:1rem; }
.subhead { margin:18px 0 8px; color:#aab3bd; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }

.icon-row { display:flex; gap:10px; flex-wrap:wrap; }
.icon-item {
  width:104px; background:#0b0f13; border:1px solid #2b333d; border-radius:9px;
  padding:9px 7px; text-align:center; min-height:105px;
}
.icon-item img { width:56px; height:56px; object-fit:contain; display:block; margin:0 auto 6px; }
.icon-item .name { font-size:.72rem; line-height:1.15; color:#d9dfe5; overflow-wrap:anywhere; }
.icon-item .qty { color:var(--accent2); font-weight:900; font-size:1rem; margin-top:4px; }
.icon-item.wide { width:145px; }

.crew-list { display:grid; gap:10px; }
.crew-member {
  display:grid; grid-template-columns:165px 1fr; gap:14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); padding:12px;
}
.crew-role { display:flex; align-items:center; gap:10px; }
.crew-role img { width:46px; height:46px; object-fit:contain; }
.crew-role strong { display:block; }
.crew-role span { display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }

.skills { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.skill {
  display:flex; align-items:center; gap:7px; background:#0b0f13; border:1px solid #2b333d;
  border-radius:8px; padding:5px 8px 5px 5px;
}
.skill img { width:34px; height:34px; object-fit:contain; }
.skill small { color:#737f8a; min-width:13px; }
.skill span { font-size:.76rem; }

.mods { display:flex; gap:10px; flex-wrap:wrap; }
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.note { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px; }
.note h3 { margin:0 0 8px; font-size:.9rem; color:var(--accent2); }
.note p { white-space:pre-wrap; margin:0; color:#b6bec7; font-size:.86rem; line-height:1.55; }

.empty { color:var(--muted); padding:22px; border:1px dashed #39424d; border-radius:var(--radius); }
.loading-screen { min-height:60vh; display:grid; place-items:center; align-content:center; color:var(--muted); }
.spinner { width:38px;height:38px;border:3px solid #28313a;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error { border:1px solid #663a3a; background:#291416; color:#ffb7b7; border-radius:12px; padding:18px; white-space:pre-wrap; }

@media(max-width:1050px) {
  .controls { grid-template-columns:repeat(3,1fr); position:static; }
  .search { grid-column:1/-1; }
}
@media(max-width:800px) {
  .site-header { padding:0 16px; }
  main { padding:20px 14px 45px; }
  .detail-hero { grid-template-columns:1fr; }
  .detail-info { padding:24px; }
  .crew-member { grid-template-columns:1fr; }
  .notes { grid-template-columns:1fr; }
  .build-grid { grid-template-columns:1fr; }
}
@media(max-width:560px) {
  .controls { grid-template-columns:1fr 1fr; }
  .search { grid-column:1/-1; }
  .tank-grid { grid-template-columns:1fr; }
  .icon-item { width:92px; }
}

/* v2 validation refinements */
:root {
  --rank-s:#b66cff;
  --rank-a:#58a6ff;
  --rank-b:#59cf83;
  --rank-c:#e6d15f;
  --rank-d:#f29b52;
  --rank-f:#ef6464;
}

.browser-toolbar { margin:18px 2px 10px;display:flex;justify-content:space-between;align-items:center;gap:12px; }
.result-line { margin:0;color:var(--muted);font-size:.88rem; }
.view-toggle { display:inline-flex;border:1px solid #303945;border-radius:8px;overflow:hidden;background:#0b0f13; }
.view-toggle button { border:0;border-right:1px solid #303945;background:transparent;color:var(--muted);padding:7px 12px;cursor:pointer; }
.view-toggle button:last-child { border-right:0; }
.view-toggle button.active { color:#111;background:var(--accent2);font-weight:800; }


.rating strong { color:inherit; }
.rating.rank-s strong { color:var(--rank-s); }
.rating.rank-a strong { color:var(--rank-a); }
.rating.rank-b strong { color:var(--rank-b); }
.rating.rank-c strong { color:var(--rank-c); }
.rating.rank-d strong { color:var(--rank-d); }
.rating.rank-f strong { color:var(--rank-f); }

.list-shell { overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#0d1116; }
.list-head,.tank-list-row { min-width:1050px;display:grid;grid-template-columns:330px 230px 230px 1fr;align-items:center;gap:14px;padding:7px 14px; }
.list-head { position:sticky;top:0;background:#12171d;color:#87929e;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line);z-index:2; }
.tank-list-row { border-bottom:1px solid #222a33;transition:.12s ease; }
.tank-list-row:last-child { border-bottom:0; }
.tank-list-row:hover { background:#151b22; }
.list-tank { display:grid;grid-template-columns:115px 1fr;align-items:center;gap:12px;min-width:0; }
.list-thumb { height:68px;width:122px;border-radius:6px;overflow:hidden;background:#0a0d11;position:relative;display:flex;align-items:center;justify-content:center; }
.list-thumb > img:not(.role-icon) { max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block; }
.list-thumb .role-icon { position:absolute;right:4px;bottom:4px;width:24px;height:24px;object-fit:contain; }
.list-name { font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.list-meta { color:var(--muted);font-size:.72rem;margin-top:3px;text-transform:capitalize; }
.list-ratings { display:flex;gap:5px;margin-top:6px; }
.list-ratings .rating { padding:3px 6px;font-size:.68rem; }
.list-ratings .rating strong { font-size:.76rem; }
.list-icons { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.mini-icon { width:60px;height:60px;border:1px solid #2c3540;border-radius:7px;background:#090c10;display:grid;place-items:center;overflow:hidden; }
.mini-icon img { max-width:56px;max-height:56px;object-fit:contain; }
.mini-icon.empty-slot { border-style:dashed;opacity:.45; }
.mini-icon.mod-icon { width:60px;height:60px; }

.icon-item.empty-equipment { display:flex;align-items:center;justify-content:center;min-height:105px;border-style:dashed;color:#515b66;background:#090c10; }
.empty-slot-label { font-size:.72rem; }

@media(max-width:560px) {
  .browser-toolbar { align-items:flex-start;flex-direction:column; }
}

/* v3: fixed tier marker before tank names */
.name-with-tier {
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.name-with-tier .tier {
  display:inline-block;
  min-width:24px;
  text-align:left;
  flex:0 0 auto;
}
.name-with-tier h2,
.name-with-tier .tank-name-text {
  min-width:0;
}

.icon-item.empty-directive {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:105px;
  width:145px;
  border-style:dashed;
  color:#515b66;
  background:#090c10;
}

/* v6 final tank-image rules: preserve the complete source image in browser views. */
.tank-art {
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
}
.tank-art > img:not(.role-icon) {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}
.list-thumb > img:not(.role-icon) {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* v7 branding */
.brand-mark {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: visible;
}
.brand-mark img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.site-header { height: 76px; }

/* v7: fixed-size, six-wide crew skill grid */
.skills {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.skill {
  display: grid;
  grid-template-columns: 18px 38px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 58px;
  min-width: 0;
  padding: 6px;
  background: #0b0f13;
  border: 1px solid #2b333d;
  border-radius: 8px;
}
.skill img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin: 0;
}
.skill small {
  min-width: 0;
  text-align: center;
  color: #737f8a;
  font-size: .68rem;
}
.skill span {
  min-width: 0;
  font-size: .72rem;
  line-height: 1.12;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* v7 nation identity: subtle flag stripe + miniature flag */
.tank-card,
.tank-list-row,
.detail-hero {
  position: relative;
}
.tank-card::before,
.tank-list-row::before,
.detail-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  z-index: 3;
  background: var(--nation-edge, linear-gradient(#49535e,#29313b));
  pointer-events: none;
}
.tank-card { padding-left: 5px; }
.tank-list-row { padding-left: 19px; }
.detail-hero { padding-left: 5px; }

.nation-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.meta-sep { color: #56616d; }

.nation-flag {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 13px;
  flex: 0 0 20px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  overflow: hidden;
  vertical-align: -2px;
}
.nation-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Nation edge palettes */
.nation-china { --nation-edge: linear-gradient(180deg,#de2910 0 78%,#ffde00 78% 100%); }
.nation-czechoslovakia { --nation-edge: linear-gradient(180deg,#fff 0 33%,#11457e 33% 66%,#d7141a 66% 100%); }
.nation-france { --nation-edge: linear-gradient(180deg,#0055a4 0 33%,#fff 33% 66%,#ef4135 66% 100%); }
.nation-germany { --nation-edge: linear-gradient(180deg,#191919 0 33%,#dd0000 33% 66%,#ffce00 66% 100%); }
.nation-italy { --nation-edge: linear-gradient(180deg,#009246 0 33%,#fff 33% 66%,#ce2b37 66% 100%); }
.nation-japan { --nation-edge: linear-gradient(180deg,#fff 0 38%,#bc002d 38% 62%,#fff 62% 100%); }
.nation-poland { --nation-edge: linear-gradient(180deg,#fff 0 50%,#dc143c 50% 100%); }
.nation-sweden { --nation-edge: linear-gradient(180deg,#006aa7 0 40%,#fecc00 40% 60%,#006aa7 60% 100%); }
.nation-uk { --nation-edge: linear-gradient(180deg,#012169 0 28%,#fff 28% 42%,#c8102e 42% 58%,#fff 58% 72%,#012169 72% 100%); }
.nation-usa { --nation-edge: linear-gradient(180deg,#3c3b6e 0 27%,#b22234 27% 45%,#fff 45% 63%,#b22234 63% 82%,#fff 82% 100%); }
.nation-ussr { --nation-edge: linear-gradient(180deg,#cc0000 0 78%,#ffcc00 78% 100%); }

/* Miniature CSS flags */
.nation-flag.nation-china {
  background:
    radial-gradient(circle at 24% 30%, #ffde00 0 12%, transparent 13%),
    #de2910;
}
.nation-flag.nation-czechoslovakia {
  background:
    linear-gradient(150deg, #11457e 0 36%, transparent 37%),
    linear-gradient(#fff 0 50%, #d7141a 50% 100%);
}
.nation-flag.nation-france {
  background: linear-gradient(90deg,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66% 100%);
}
.nation-flag.nation-germany {
  background: linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66% 100%);
}
.nation-flag.nation-italy {
  background: linear-gradient(90deg,#009246 0 33.33%,#fff 33.33% 66.66%,#ce2b37 66.66% 100%);
}
.nation-flag.nation-japan {
  background: radial-gradient(circle at 50% 50%,#bc002d 0 27%,transparent 29%),#fff;
}
.nation-flag.nation-poland {
  background: linear-gradient(#fff 0 50%,#dc143c 50% 100%);
}
.nation-flag.nation-sweden {
  background:
    linear-gradient(90deg,transparent 0 29%,#fecc00 29% 40%,transparent 40%),
    linear-gradient(transparent 0 42%,#fecc00 42% 58%,transparent 58%),
    #006aa7;
}
.nation-flag.nation-uk {
  background:
    linear-gradient(90deg,transparent 0 42%,#fff 42% 46%,#c8102e 46% 54%,#fff 54% 58%,transparent 58%),
    linear-gradient(0deg,transparent 0 38%,#fff 38% 44%,#c8102e 44% 56%,#fff 56% 62%,transparent 62%),
    linear-gradient(32deg,transparent 0 43%,#fff 43% 48%,#c8102e 48% 52%,#fff 52% 57%,transparent 57%),
    linear-gradient(-32deg,transparent 0 43%,#fff 43% 48%,#c8102e 48% 52%,#fff 52% 57%,transparent 57%),
    #012169;
}
.nation-flag.nation-usa {
  background:
    linear-gradient(90deg,#3c3b6e 0 42%,transparent 42% 100%),
    repeating-linear-gradient(#b22234 0 8%,#fff 8% 16%);
}
.nation-flag.nation-ussr {
  background:
    radial-gradient(circle at 25% 30%,#ffcc00 0 10%,transparent 11%),
    #cc0000;
}

/* Responsive skill grid */
@media(max-width:1250px) {
  .skills { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media(max-width:720px) {
  .skills { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width:460px) {
  .skills { grid-template-columns: 1fr; }
}


/* v10 nation cleanup: no generated flags, no nation-colored edge bars. */
.tank-card::before,
.tank-list-row::before,
.detail-hero::before {
  display: none !important;
}

.tank-card {
  padding-left: 0 !important;
}
.tank-list-row {
  padding-left: 14px !important;
}
.detail-hero {
  padding-left: 0 !important;
}

/* Reliable metadata layout: nation on line 1, class + role on line 2. */
.meta,
.list-meta {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: normal !important;
  overflow: visible !important;
}

.meta-primary,
.meta-secondary {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.meta-primary {
  gap: 7px;
}

.meta-secondary {
  gap: 6px;
  color: var(--muted);
}

.meta-secondary .meta-sep {
  color: #56616d;
}

.nation-flag-img {
  width: 20px;
  height: 13px;
  flex: 0 0 20px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.nation-text,
.class-text,
.role-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Detail-page nation pill */
.nation-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nation-pill .nation-flag-img {
  width: 22px;
  height: 14px;
  flex-basis: 22px;
}

/* Explicitly neutralize the old CSS-drawn flag box if any stale rule remains. */
.nation-flag {
  display: none !important;
}


/* v11: Lipis flag-icons integration */
.nation-flag-img {
  display: none !important;
}
.nation-flag-icon {
  display: inline-block;
  width: 20px;
  height: 15px;
  min-width: 20px;
  flex: 0 0 20px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  vertical-align: middle;
}
.meta-primary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.nation-pill .nation-flag-icon {
  width: 22px;
  height: 16.5px;
  min-width: 22px;
  flex-basis: 22px;
}

/* Do not apply any nation-derived card borders/backgrounds. */
.tank-card::before,
.tank-list-row::before,
.detail-hero::before {
  display: none !important;
}
.tank-card {
  padding-left: 0 !important;
}
.tank-list-row {
  padding-left: 14px !important;
}
.detail-hero {
  padding-left: 0 !important;
}


/* v12: local USSR flag exception */
.nation-flag-local {
  display: inline-block;
  width: 20px;
  height: 15px;
  min-width: 20px;
  flex: 0 0 20px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  vertical-align: middle;
}
.nation-pill .nation-flag-local {
  width: 22px;
  height: 16.5px;
  min-width: 22px;
  flex-basis: 22px;
}


/* v13: list-view rating stack.
   The tank cell uses the available width for the tank identity on the left,
   with Overall / 15v15 / 7v7 in three equal-height rows on the right. */
.rating.rank-missing strong {
  color: var(--muted);
}

.list-head,
.tank-list-row {
  min-width: 1180px;
  grid-template-columns: minmax(470px, 1.45fr) 220px 220px minmax(300px, 1fr);
  gap: 14px;
}

.tank-list-row {
  padding-top: 10px;
  padding-bottom: 10px;
}

.list-tank {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.list-thumb {
  width: 150px;
  height: 94px;
}

.list-thumb .role-icon {
  right: 5px;
  bottom: 5px;
  width: 29px;
  height: 29px;
}

.list-tank-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  min-height: 94px;
}

.list-tank-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.list-name {
  font-size: 1rem;
}

.list-meta {
  margin-top: 7px;
  gap: 5px;
  font-size: .76rem;
}

.list-ratings {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  min-width: 0;
  height: 100%;
}

.list-ratings .rating {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: .68rem;
}

.list-ratings .rating span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-ratings .rating strong {
  flex: 0 0 auto;
  font-size: .82rem;
}

/* v14: tighten list rows and keep field modifications on one line. */
.list-head,
.tank-list-row {
  min-width: 1310px;
  grid-template-columns: minmax(430px, 1.2fr) 205px 205px minmax(395px, 1fr);
}

.tank-list-row {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Configuration and field-mod icon groups should never wrap inside a list row. */
.tank-list-row > .list-icons {
  flex-wrap: nowrap;
}

/* v15: anchor tile-view ratings to the bottom of each card.
   This keeps Overall / 15v15 / 7v7 aligned whether or not a tank has aliases. */
.tank-card {
  display: flex;
  flex-direction: column;
}

.tank-card .tank-art {
  /* Keep the image area at its original natural height. The v15 fixed 168px
     flex-basis overrode the earlier full-image rule and cropped the artwork. */
  flex: 0 0 auto;
}

.tank-card .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.tank-card .ratings {
  margin-top: auto;
  padding-top: 14px;
}

/* v16: spreadsheet-style list column headings. */
.list-head {
  align-items: stretch;
  padding-top: 5px;
  padding-bottom: 5px;
}

.list-head-tank,
.list-head-title {
  color: #aab4bf;
  text-transform: none;
  letter-spacing: .035em;
}

.list-head-tank {
  display: flex;
  align-items: center;
}

.list-head-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.list-head-title {
  text-align: center;
  font-size: .72rem;
  line-height: 1;
}

.list-head-slots {
  display: grid;
  align-items: center;
  justify-content: start;
  gap: 7px;
  width: max-content;
  color: #73808d;
  font-size: .61rem;
  font-weight: 750;
  line-height: 1;
  text-transform: none;
  letter-spacing: .015em;
}

.list-head-slots span {
  display: block;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.list-head-slots-3 {
  grid-template-columns: repeat(3, 60px);
}

.list-head-slots-6 {
  grid-template-columns: repeat(6, 60px);
}


/* v17: match spreadsheet field-mod levels and include directives in list configs. */
.list-head,
.tank-list-row {
  min-width: 1460px;
  grid-template-columns: minmax(430px, 1.2fr) 272px 272px minmax(395px, 1fr);
}

.list-head-slots-4 {
  grid-template-columns: repeat(4, 60px);
}

.mini-icon.directive-icon {
  width: 60px;
  height: 60px;
}

/* v18: keep spreadsheet-style list headings visible below the sticky filters. */
.list-wrapper {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d1116;
  /* Do not make this wrapper a scroll container: that would prevent the
     column header from sticking to the browser viewport while the page scrolls. */
  overflow: visible;
}

.list-head-viewport {
  position: sticky;
  top: var(--list-head-top, 170px);
  z-index: 9;
  overflow: hidden;
  background: #12171d;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  box-shadow: 0 7px 16px rgba(0,0,0,.22);
}

.list-head-viewport .list-head {
  /* The viewport itself handles the vertical sticky behavior. JS only moves
     this inner grid horizontally to follow the list's scrollbar. */
  position: relative;
  top: auto;
  z-index: auto;
  will-change: transform;
}

.list-shell {
  overflow-x: auto;
  border: 0;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: transparent;
}

/* v14: feedback entry point and feedback page */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #6b5526;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(214,166,66,.14), rgba(214,166,66,.06));
  color: var(--accent2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: .15s ease;
}
.feedback-button:hover {
  border-color: #9a7835;
  background: rgba(214,166,66,.16);
  color: #ffe09b;
}

.feedback-page {
  max-width: 900px;
  margin: 0 auto;
}
.feedback-intro {
  margin-bottom: 18px;
}
.feedback-intro h1 {
  margin: 7px 0 10px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.04em;
}
.feedback-intro p {
  color: var(--muted);
  line-height: 1.65;
  max-width: 760px;
}
.feedback-context {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0f13;
  color: #aeb7c1;
  font-size: .78rem;
}
.feedback-context code {
  color: var(--accent2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.feedback-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, #12171d, #0d1116);
  box-shadow: var(--shadow);
}
.feedback-field {
  display: grid;
  gap: 7px;
}
.feedback-field-wide {
  grid-column: 1 / -1;
}
.feedback-field label {
  color: #cfd6dd;
  font-size: .78rem;
  font-weight: 800;
}
.feedback-field input,
.feedback-field select,
.feedback-field textarea {
  width: 100%;
  color: var(--text);
  background: #0b0f13;
  border: 1px solid #303945;
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  font: inherit;
}
.feedback-field input,
.feedback-field select {
  min-height: 42px;
}
.feedback-field textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}
.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
  border-color: #8b6c2d;
  box-shadow: 0 0 0 2px rgba(214,166,66,.12);
}
.feedback-help {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #737e89;
  font-size: .72rem;
}
.feedback-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
}
.feedback-submit {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #a47d2e;
  border-radius: 8px;
  background: var(--accent);
  color: #111;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.feedback-submit:hover:not(:disabled) { background: var(--accent2); }
.feedback-submit:disabled { opacity: .55; cursor: wait; }
.feedback-status { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.feedback-status.success { color: #76d59a; }
.feedback-status.error-text { color: #ff9f9f; }
.feedback-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media(max-width:700px) {
  .site-header { gap: 10px; }
  .brand span { display: none; }
  .feedback-button { padding: 0 10px; font-size: .7rem; }
  .feedback-form { grid-template-columns: 1fr; padding: 16px; }
  .feedback-field-wide, .feedback-actions { grid-column: 1; }
  .feedback-actions { align-items: flex-start; flex-direction: column; }
}