/* ============================================================
   Grand Battery — main.css
   Shared look for every page, plus the layout of the home page
   and the barracks. The battle page adds css/game.css on top.
   ============================================================ */
:root{
  --smoke:#cdc7ba; --haze:#e2ded4; --brass:#a8853c; --brass-lit:#d4b063;
  --blue:#2f4576; --red:#8e3227; --ink:#17150f; --panel:rgba(28,26,23,.84);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#0f0e0c}
body{font-family:"Archivo Narrow",system-ui,sans-serif;color:var(--haze);
     line-height:1.5}
h1,h2,h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;line-height:1.05}
a{color:var(--brass-lit)}
.rule{height:1px;background:var(--brass);opacity:.7;margin:10px 0}
b{color:var(--brass-lit);font-weight:600}

.btn{display:inline-block;padding:12px 18px;background:transparent;
  color:var(--haze);border:1px solid rgba(168,133,60,.6);font:inherit;
  font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:rgba(168,133,60,.18)}
.btn:active{background:rgba(168,133,60,.32)}
.btn.primary{background:var(--red);border-color:var(--red);color:#f4ece0;
  font-family:"Bodoni Moda",Georgia,serif;font-size:18px;letter-spacing:.05em}
.btn.primary:hover{background:#a53c2f}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ------------- home / barracks layout ------------- */
.wrap{max-width:780px;margin:0 auto;padding:34px 22px 60px}
.mast{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--brass);padding:14px 22px;
  background:linear-gradient(180deg,rgba(28,26,23,.9),rgba(28,26,23,.6))}
.mast h1{margin:0;font-size:26px}
.mast .stats{font-size:14px;color:var(--smoke)}
.mast .stats b{font-size:16px}

.hero h1{font-size:clamp(44px,10vw,72px);margin:0 0 6px}
.hero .tag{color:var(--smoke);font-size:16px;margin:0 0 18px;
  letter-spacing:.04em}
.prose p{color:var(--smoke);font-size:15px;max-width:64ch;margin:0 0 12px}

.diffs{display:flex;gap:10px;margin:14px 0}
.diffs .btn{flex:1}

section{margin:30px 0}
section h2{font-size:24px;margin:0 0 4px;color:var(--haze)}
section .sub{color:var(--smoke);opacity:.85;font-size:13.5px;margin:0 0 14px}

/* ------------- cards (roster & shop) ------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{border:1px solid rgba(168,133,60,.5);padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;background:rgba(28,26,23,.55)}
.card .cname{font-size:16px;font-weight:600;display:flex;
  justify-content:space-between;align-items:baseline;gap:8px}
.card .vet{color:var(--brass-lit);font-size:12px;letter-spacing:.12em;white-space:nowrap}
.card .cline{font-size:13px;color:var(--smoke)}
.card .cost{color:var(--brass-lit);font-variant-numeric:tabular-nums}
.card .btn{padding:8px 10px;font-size:13.5px;margin-top:2px}
.card.dim{opacity:.55}

.gunrow{display:flex;justify-content:space-between;align-items:center;
  border:1px solid rgba(168,133,60,.4);padding:9px 14px;margin-bottom:8px;
  font-size:14px;background:rgba(28,26,23,.55)}
.gunrow .n{color:var(--brass-lit);font-weight:600}

.actions{margin:34px 0 8px;display:flex;flex-direction:column;gap:10px}
.actions .btn.primary{width:100%;padding:15px}
.small{font-size:12.5px;color:var(--smoke);opacity:.7}
.small a{color:var(--smoke)}
.warn{color:#c9584a}