/* ============================================================
   Empire 1805 — 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}
.diffs .btn.diff{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  gap:3px;padding:12px 14px;line-height:1.25}
.diffs .btn.diff.rec{border-color:var(--brass)}
.diffs .dtag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-lit)}
.diffs .dname{font-family:"Bodoni Moda",Georgia,serif;font-size:19px;color:var(--haze)}
.diffs .ddesc{font-size:12.5px;color:var(--smoke);opacity:.85}
@media (max-width:560px){.diffs{flex-direction:column}}

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}

/* ---- graphics panel ---- */
#gfxBtn{background:transparent;color:var(--smoke);border:1px solid rgba(168,133,60,.5);font:inherit;font-size:14px;width:28px;padding:2px 0;cursor:pointer;margin-left:4px}
#gfxBtn:hover{color:var(--brass-lit)}
#gfxPanel{position:fixed;inset:0;background:rgba(18,17,15,.72);display:none;align-items:center;justify-content:center;z-index:12}
#gfxPanel .gbox{width:min(640px,94vw);max-height:92vh;overflow-y:auto;background:#1c1a17;border:1px solid var(--brass);padding:16px 20px}
#gfxPanel .ghead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
#gfxPanel h2{margin:0;font-size:24px;flex:1}
#gfxPanel #gfxFps{color:var(--brass-lit);font-variant-numeric:tabular-nums}
#gfxPanel #gfxClose{background:transparent;color:var(--smoke);border:1px solid rgba(168,133,60,.5);font:inherit;font-size:16px;width:28px;cursor:pointer}
#gfxPanel .gpre{display:flex;gap:6px;margin-bottom:12px}
#gfxPanel .gpre button{flex:1;padding:9px 4px;background:transparent;color:var(--haze);border:1px solid rgba(168,133,60,.6);font:inherit;font-size:14px;cursor:pointer}
#gfxPanel .gk{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid rgba(168,133,60,.18)}
#gfxPanel .gn{width:150px;flex:none;color:var(--smoke);font-size:13px}
#gfxPanel .gn small{opacity:.7}
#gfxPanel .gopts{display:flex;gap:4px;flex-wrap:wrap}
#gfxPanel .gopts button{background:transparent;color:var(--smoke);border:1px solid rgba(168,133,60,.45);font:inherit;font-size:12px;padding:4px 9px;cursor:pointer}
#gfxPanel button.on{background:var(--brass);color:#17150f;font-weight:700}
#gfxPanel .gnote{font-size:12.5px;color:var(--smoke);line-height:1.45;margin:10px 0 6px}
#gfxPanel .gfoot{display:flex;align-items:center;gap:12px}
#gfxPanel #gfxReload{background:var(--brass);color:#17150f;border:0;font:inherit;font-size:13px;font-weight:700;padding:7px 14px;cursor:pointer}

/* ---- site nav (the home page and its subpages) ---- */
.topnav{display:flex;align-items:center;gap:18px;padding:12px 22px;border-bottom:1px solid rgba(168,133,60,.45);
  background:linear-gradient(180deg,rgba(28,26,23,.95),rgba(28,26,23,.7));position:sticky;top:0;z-index:5}
.topnav .brand{font-family:"Bodoni Moda",Georgia,serif;font-size:20px;color:var(--haze);text-decoration:none;margin-right:auto}
.topnav a.nl{color:var(--smoke);text-decoration:none;font-size:14px;letter-spacing:.04em;padding:4px 2px;border-bottom:2px solid transparent}
.topnav a.nl:hover{color:var(--haze)}
.topnav a.nl.on{color:var(--brass-lit);border-bottom-color:var(--brass)}
.topnav #gfxBtn{margin-left:2px}
@media (max-width:560px){.topnav{gap:10px;flex-wrap:wrap}.topnav .brand{width:100%}}

/* ---- the home page ---- */
.home{max-width:900px}
.home .hero{text-align:center;padding:26px 0 18px}
.home .hero h1{font-size:clamp(40px,7vw,66px);margin:0}
.home .hero .tag{font-size:17px}
.home .choose{text-align:center;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lit);font-family:"Archivo Narrow",sans-serif;margin:0 0 12px}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:10px 0 26px}
.mode{border:1px solid rgba(168,133,60,.55);background:rgba(28,26,23,.6);padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;position:relative}
.mode .mi{font-size:34px;line-height:1}
.mode h2{margin:0;font-size:30px}
.mode p{margin:0;color:var(--smoke);font-size:14.5px;line-height:1.45;flex:1}
.mode .facts{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--smoke);opacity:.85}
.mode .facts span{border:1px solid rgba(168,133,60,.35);padding:2px 8px}
.mode .go{display:flex;gap:8px;align-items:center;margin-top:6px}
.mode .go .btn.primary{flex:1;padding:13px}
.mode .go .btn{padding:12px 14px;font-size:14px}
.mode .saved{font-size:13px;color:var(--brass-lit)}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:0 0 30px}
.links a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid rgba(168,133,60,.35);text-decoration:none;color:var(--haze);background:rgba(28,26,23,.4)}
.links a:hover{border-color:var(--brass)}
.links a .ln{font-family:"Bodoni Moda",Georgia,serif;font-size:19px}
.links a .ld{font-size:12.5px;color:var(--smoke)}
.foot{font-size:12.5px;color:var(--smoke);opacity:.6;text-align:center;margin-top:20px}

/* ---- subpages ---- */
.page h1{font-size:clamp(34px,6vw,52px);margin:0 0 4px}
.page .lead{color:var(--smoke);font-size:16px;max-width:66ch;margin:0 0 18px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:12px 0}
.step{border:1px solid rgba(168,133,60,.35);padding:12px 14px;background:rgba(28,26,23,.45)}
.step .si{font-size:24px}
.step .st{font-family:"Bodoni Moda",Georgia,serif;font-size:18px;margin:4px 0 2px}
.step .sd{font-size:13px;color:var(--smoke);line-height:1.4}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.bitem{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(168,133,60,.3);padding:9px 11px;background:rgba(28,26,23,.45)}
.bitem .bi{font-size:24px;line-height:1.1;width:28px;text-align:center;flex:none}
.bitem .bn{font-weight:600;font-size:14px}
.bitem .bc{font-size:11.5px;color:var(--brass-lit)}
.bitem .bd{font-size:12.5px;color:var(--smoke);line-height:1.35}
.resrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.resrow span{border:1px solid rgba(168,133,60,.35);padding:6px 10px;font-size:13px;color:var(--smoke)}
.resrow span b{margin-right:4px}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 22px;margin:10px 0}
.keys div{display:flex;gap:10px;font-size:13.5px;color:var(--smoke);line-height:1.35;padding:6px 0;border-bottom:1px solid rgba(168,133,60,.18)}
.keys kbd{font:inherit;font-size:12px;color:var(--brass-lit);border:1px solid rgba(168,133,60,.5);padding:1px 7px;white-space:nowrap;height:fit-content;min-width:64px;text-align:center}
.manual{display:grid;grid-template-columns:170px 1fr;gap:26px;align-items:start}
.manual .toc{position:sticky;top:64px;display:flex;flex-direction:column;gap:4px}
.manual .toc a{color:var(--smoke);text-decoration:none;font-size:14px;padding:4px 8px;border-left:2px solid transparent}
.manual .toc a:hover{color:var(--haze);border-left-color:var(--brass)}
.manual section{margin:0 0 28px}
.manual section p{color:var(--smoke);font-size:14.5px;max-width:66ch;margin:0 0 10px}
@media (max-width:700px){.manual{grid-template-columns:1fr}.manual .toc{position:static;flex-direction:row;flex-wrap:wrap}}
.wrap.wide{max-width:960px}
.wrap.page{max-width:900px}

/* ---- the Escape menu ---- */
#escMenu{position:fixed;inset:0;background:rgba(18,17,15,.72);display:none;align-items:center;justify-content:center;z-index:11}
#escMenu .mbox{width:min(380px,92vw);background:#1c1a17;border:1px solid var(--brass);padding:18px 22px}
#escMenu h2{margin:0 0 12px;font-size:26px}
#escMenu .mrows{display:flex;flex-direction:column;gap:7px}
#escMenu .btn{width:100%;padding:11px 14px;font-size:15px;display:flex;justify-content:space-between;align-items:baseline}
#escMenu .maudio{border:1px solid rgba(168,133,60,.4);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
#escMenu .arow{display:grid;grid-template-columns:1fr 130px 44px;align-items:center;gap:8px;font-size:13px;color:var(--smoke)}
#escMenu .arow input[type=range]{accent-color:#d4b063;width:100%}
#escMenu .arow b{color:var(--brass-lit);font-size:12px;text-align:right}
#escMenu .btn small{font-size:11.5px;color:var(--smoke);opacity:.8;font-family:"Archivo Narrow",sans-serif;letter-spacing:0}
#escMenu .btn.primary small{color:#f4ece0}
#escMenu .btn:disabled{opacity:.4}
#escMenu .mnote{margin:10px 0 0;min-height:1.2em}

/* ------------- the Conquest set-up screen ------------- */
.setupwrap{max-width:1180px}
.setup{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.setup-left h1{margin:0 0 4px}
.setup-right{position:sticky;top:64px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(168,133,60,.45);padding:14px;background:rgba(28,26,23,.55)}
.setup .opt{margin:16px 0 0}
.setup .opt h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lit);margin:0 0 6px;font-family:"Archivo Narrow",system-ui,sans-serif;font-weight:600}
.setup .opt h3 b{font-size:12px;margin-left:6px;color:var(--haze)}
.setup .opt.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.setup .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.setup .tiles.three{grid-template-columns:repeat(3,1fr)}
.setup .tiles.four{grid-template-columns:repeat(4,1fr)}
.setup .tiles.styles{grid-template-columns:repeat(3,1fr)}
.setup .tiles+.tiles{margin-top:6px}
.setup .tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;background:rgba(28,26,23,.45);color:var(--smoke);border:1px solid rgba(168,133,60,.32);padding:9px 11px;font:inherit;cursor:pointer;min-height:54px}
.setup .tile:hover{background:rgba(168,133,60,.16)}
.setup .tile.on{border-color:var(--brass-lit);background:rgba(168,133,60,.22);box-shadow:inset 0 0 0 1px var(--brass-lit)}
.setup .tile .ti{font-size:22px;line-height:1}
.setup .tile .tn{font-family:"Bodoni Moda",Georgia,serif;font-size:17px;color:var(--haze)}
.setup .tile .tt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lit)}
.setup .tile .td{font-size:12px;color:var(--smoke);opacity:.85;line-height:1.3}
.setup .seedrow{display:flex;gap:6px}
.setup .seedrow input{flex:1;background:rgba(28,26,23,.6);color:var(--haze);border:1px solid rgba(168,133,60,.45);font:inherit;font-size:15px;padding:8px 10px;min-width:0}
.setup .btn.sm{padding:6px 12px;font-size:15px}
.setup .hint{font-size:12px;color:var(--smoke);opacity:.8;margin:6px 0 0;line-height:1.35}
.setup input[type=range]{width:100%;accent-color:var(--brass-lit)}
.setup .swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.setup .sw{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:1px solid transparent;padding:6px 2px;font:inherit;cursor:pointer;color:var(--smoke)}
.setup .sw .swc{width:34px;height:34px;border-radius:50%;border:3px solid;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.setup .sw .swn{font-size:10.5px;line-height:1.1;text-align:center}
.setup .sw.on{border-color:var(--brass-lit);background:rgba(168,133,60,.18)}
.setup .sw.taken{opacity:.35}
.setup .mapcard{border:1px solid rgba(168,133,60,.45);background:#e6dcc2;padding:0;line-height:0}
.setup .mapcard canvas{width:100%;height:auto;display:block}
.setup .mapcap{font-size:11.5px;color:#5a4a3a;background:#dccfb0;padding:5px 8px;line-height:1.3;font-style:italic}
.setup .summary{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.setup .summary .srow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted rgba(168,133,60,.3);padding:3px 0}
.setup .summary .srow span{color:var(--smoke);opacity:.8;letter-spacing:.08em;text-transform:uppercase;font-size:11px;padding-top:2px}
.setup .summary .srow b{text-align:right;color:var(--haze);font-weight:500}
.setup .summary .dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;border:1px solid rgba(0,0,0,.5)}
.setup .btn.big{font-size:22px;padding:14px}
@media (max-width:860px){.setup{grid-template-columns:1fr}.setup-right{position:static}.setup .tiles,.setup .tiles.four,.setup .tiles.styles{grid-template-columns:repeat(2,1fr)}.setup .opt.two{grid-template-columns:1fr}}