/* ==========================================================================
   Achtung Panzer - WW2 Steel / OD Green / Khaki Theme
   Drop-in stylesheet for existing classes:
   .card, .card-header, .btn, .pill, .grid, .field, .muted, .alert, tables, etc.
   ========================================================================== */

:root{
  --bg-0:#0b0d0f;         /* deep */
  --bg-1:#14181c;         /* gunmetal */
  --steel-0:#1f2429;      /* dark steel */
  --steel-1:#2a3137;      /* steel */
  --steel-2:#3a444d;      /* lighter steel */
  --edge:#66707a;         /* metal edge */
  --khaki:#b7aa82;        /* US khaki */
  --khaki-2:#9c916f;
  --od:#3b4a2a;           /* OD green */
  --od-2:#2f3c21;
  --ink:#e9e3d0;          /* warm off-white */
  --muted:#b2ab97;
  --rust:#6b2f22;
  --warn:#c6a64a;
  --ok:#3f7d5a;
  --bad:#a03b34;

  --radius:10px;
  --radius-sm:8px;

  --shadow-1: 0 10px 30px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(255,255,255,.05) inset, 0 -2px 0 rgba(0,0,0,.35) inset;
  --shadow-plate: 0 1px 0 rgba(255,255,255,.06) inset,
                  0 -1px 0 rgba(0,0,0,.45) inset,
                  0 10px 25px rgba(0,0,0,.55);
}

/* --- Global background: “concrete + grime” --- */
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;

  /* layered grunge using only gradients */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 600px at 70% 40%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 600px at 20% 70%, rgba(255,255,255,.04), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 2px, transparent 2px, transparent 6px),
    radial-gradient(900px 900px at 50% 60%, #1b1f24 0%, #0c0f12 55%, #07090b 100%);
}

/* Optional “vignette” like the screenshot */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 50% 45%, transparent 55%, rgba(0,0,0,.65) 100%);
  mix-blend-mode:multiply;
  opacity:.9;
}

/* --- Make a centered “metal frame” page area --- */
main, .container, #content, .page, .wrap{
  max-width: 1120px;
  margin: 22px auto;
  padding: 18px 18px 26px;
  border-radius: 14px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.22)),
    linear-gradient(180deg, #2a2f35 0%, #1a1f24 100%);
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-1);
  position:relative;
}

/* Rivet dots on the page “frame” */
main:before, .container:before, #content:before, .page:before, .wrap:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 10px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.9) 3px 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.9) 3px 4px, transparent 5px),
    radial-gradient(circle at 12px calc(100% - 12px), rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.9) 3px 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), rgba(255,255,255,.35) 0 2px, rgba(0,0,0,.9) 3px 4px, transparent 5px);
  opacity:.55;
}

/* --- Headings: bold, “military poster-ish” --- */
h1,h2,h3{
  font-family: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  letter-spacing:.8px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 8px 0 10px;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
h1{ font-size: 30px; }
h2{ font-size: 20px; }
h3{ font-size: 16px; }

/* --- Nav bar styling (works with many simple nav outputs) --- */
nav, .nav, .navbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    linear-gradient(180deg, #262c32, #1b2026);
  box-shadow: var(--shadow-2);
}
nav a, .nav a, .navbar a{
  text-decoration:none;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    linear-gradient(180deg, #2b333b, #1f262d);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
nav a:hover, .nav a:hover, .navbar a:hover{
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}
nav a.active, .nav a.active, .navbar a.active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
    linear-gradient(180deg, var(--od), var(--od-2));
  border-color: rgba(255,255,255,.20);
}

/* --- Cards become “metal plates” --- */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    linear-gradient(180deg, #2a3138, #1b2127);
  box-shadow: var(--shadow-plate);
  padding: 14px;
  margin: 14px 0;
  position:relative;
}

/* Subtle grime on cards */
.card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  pointer-events:none;
  background:
    radial-gradient(300px 220px at 20% 30%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(340px 240px at 80% 70%, rgba(0,0,0,.22), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
  opacity:.55;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* --- Pills look like tags/plates --- */
.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing:.5px;
  text-transform: uppercase;
  color: #f0ead6;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22)),
    linear-gradient(180deg, #2a3137, #1c2228);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

/* --- Buttons: khaki embossed --- */
.btn, button.btn, button, input[type="submit"]{
  appearance:none;
  cursor:pointer;
  font-weight: 800;
  letter-spacing:.6px;
  text-transform: uppercase;

  color: #1a1a1a;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.55);

  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.10)),
    linear-gradient(180deg, var(--khaki), var(--khaki-2));
  box-shadow:
    0 2px 0 rgba(255,255,255,.25) inset,
    0 -2px 0 rgba(0,0,0,.25) inset,
    0 10px 20px rgba(0,0,0,.35);
}
.btn:hover, button:hover, input[type="submit"]:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.btn:active, button:active, input[type="submit"]:active{
  transform: translateY(0px);
  filter: brightness(.98);
}

/* --- Inputs: “field kit” khaki --- */
.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing:.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

input, select, textarea{
  width:100%;
  box-sizing:border-box;
  color:#161616;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.06)),
    linear-gradient(180deg, #d3c7a3, #bbaa82);
  border: 1px solid rgba(0,0,0,.55);
  border-radius: 10px;
  padding: 10px 10px;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  box-shadow: 0 0 0 3px rgba(198,166,74,.25);
}

/* --- Grid helpers (if you already use them) --- */
.grid{ display:block; }
.grid.cols-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.grid.cols-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.grid.cols-4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }

@media (max-width: 980px){
  .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .grid.cols-4, .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr; }
}

/* --- Tables: steel panel with khaki rows --- */
table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20)),
    linear-gradient(180deg, #2a3137, #1b2127);
  box-shadow: var(--shadow-2);
}
th, td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: top;
}
th{
  font-size: 12px;
  color: #efe6cc;
  text-transform: uppercase;
  letter-spacing:.7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22)),
    linear-gradient(180deg, var(--od), var(--od-2));
}
tbody tr:nth-child(odd) td{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)),
    linear-gradient(180deg, #cdbf98, #b6a97f);
  color:#151515;
}
tbody tr:nth-child(even) td{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.08)),
    linear-gradient(180deg, #c5b88f, #aea27a);
  color:#151515;
}
tbody tr:last-child td{ border-bottom:none; }

/* --- Alerts: stamped panels --- */
.alert{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    linear-gradient(180deg, #2b333b, #1e252c);
  box-shadow: var(--shadow-2);
}
.alert.ok{
  border-color: rgba(63,125,90,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(63,125,90,.65), rgba(33,67,49,.75));
}
.alert.err{
  border-color: rgba(160,59,52,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(160,59,52,.70), rgba(79,24,21,.78));
}

/* --- Muted text, small text, code --- */
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
code{
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:#f3edd9;
}

/* --- Links --- */
a{ color: #e8ddba; }
a:hover{ color: #fff1c9; }

/* --- Details / summary --- */
details{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)),
    linear-gradient(180deg, #272e35, #1b2127);
}
summary{
  cursor:pointer;
  font-weight: 900;
  letter-spacing:.6px;
  text-transform: uppercase;
}

/* --- Footer spacing if you output one --- */
footer, .footer{
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}
/* =========================
   Players Dashboard Cards
   ========================= */

.cards-wrap{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  align-items:start;
}

.tank-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background: rgba(0,0,0,.30);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

.tank-card__header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.tank-card__label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.72;
}

.tank-card__name{
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  margin-top:2px;
}

.tank-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  font-size:11px;
  letter-spacing:.06em;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.muted{ opacity:.72; }
.mt8{ margin-top:8px; }
.mt10{ margin-top:10px; }

.tank-card__id{
  min-width:110px;
  text-align:right;
}

.tank-card__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:12px 14px 10px;
}

.tank-card__box{
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 10px 9px;
  background: rgba(0,0,0,.18);
}

.tank-card__box--wide{
  grid-column: 1 / -1;
}

.tank-card__boxhead{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.80;
  margin-bottom:8px;
}

.armour-grid{
  display:grid;
  gap:6px;
}

.armour-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.armour-label{ opacity:.8; }
.armour-val{ font-weight:700; }

.kv{ display:grid; gap:6px; }
.kv-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
.kv-k{ opacity:.8; }
.kv-v{ font-weight:700; text-align:right; }

.traits{
  margin:0;
  padding-left:16px;
  display:grid;
  gap:4px;
  font-size:13px;
}

.notes{
  font-size:13px;
  line-height:1.35;
}

.crew-costs{
  display:grid;
  gap:6px;
  margin-top:6px;
  font-size:13px;
}

.tank-card__footer{
  padding:10px 14px 12px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:12px;
}

.panel{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.22);
  padding:14px;
}

.panel.warn{
  border-color: rgba(255,180,0,.35);
}

.page-head h1{ margin:0 0 6px; }
.page-head p{ margin:0 0 12px; }

@media (max-width: 420px){
  .tank-card__grid{ grid-template-columns: 1fr; }
  .tank-card__id{ text-align:left; min-width:auto; }
}
@media print{
  .navbar, .footer, .btn { display:none !important; }
  .tank-card{ break-inside: avoid; page-break-inside: avoid; }
}