/* ===========================================================================
   CUBEHEAD WIKI — shared styles
   "Bone & Ash" palette, lifted from the game (styles.css :root) so the wiki
   reads as part of the CUBEHEAD brand. Vanilla CSS, no framework, mobile-first.
   =========================================================================== */
:root{
  --bg:#06080a; --bg2:#080b0e; --panel:#0d1014; --panel2:#10141a; --card:#0c0e09;
  --ink:#e8ece6; --dim:#8a938d; --dimmer:#5b635d;
  --acc:#9fb2b0; --acc2:#6fae9a; --good:#8fc7a6; --bad:#d6403a; --gold:#cdb27a;
  --pur:#9d8fc4; --energy:#6fc3d6; --danger:#ff5a3d;
  --line:#1e242a; --line2:#272f36;
  --maxw:1180px;
  --radius:10px;
  --mono:"Consolas",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(16,27,29,.55), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(111,174,154,.06), transparent 60%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); line-height:1.65; font-size:16px;
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--acc2); text-decoration:none; transition:color .15s;}
a:hover{color:var(--good);}
img{max-width:100%; display:block;}
h1,h2,h3,h4{line-height:1.2; font-weight:900; letter-spacing:.5px;}
.mono{font-family:var(--mono);}

/* ---- skip link (a11y) ---- */
.skip{position:absolute; left:-999px; top:0; background:var(--acc2); color:#06080a;
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0; font-weight:700;}
.skip:focus{left:0;}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:100; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(8,11,14,.96),rgba(8,11,14,.82));
  border-bottom:1px solid var(--line);}
.topbar-in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:14px;
  padding:10px 18px;}
.brand-link{display:flex; align-items:center; gap:11px; flex:none;}
.brand-link img{height:34px; width:auto; filter:drop-shadow(0 0 12px rgba(111,174,154,.35));}
.brand-link .wordmark{font-weight:900; letter-spacing:3px; font-size:18px; color:#eef2ec;}
.brand-link .wordmark .tag{display:block; font-size:9px; letter-spacing:3px; color:var(--dim);
  font-weight:700; margin-top:-2px;}
.topnav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap;}
.topnav a{color:var(--dim); font-size:13.5px; font-weight:700; letter-spacing:.5px;
  padding:7px 12px; border-radius:7px; text-transform:uppercase;}
.topnav a:hover,.topnav a.active{color:var(--ink); background:#141a1f;}
.topnav a.cta{color:#06080a; background:linear-gradient(180deg,#cfd6cf,#9aa6a0);
  box-shadow:0 0 16px rgba(111,174,154,.35);}
.topnav a.cta:hover{color:#06080a; filter:brightness(1.08);}
.navtoggle{display:none; margin-left:auto; background:#141a1f; border:1px solid var(--line);
  color:var(--ink); width:42px; height:38px; border-radius:8px; cursor:pointer; font-size:18px;}

/* ---------- search ---------- */
.wikisearch{position:relative; flex:none;}
.wikisearch input{background:#0a0e11; border:1px solid var(--line); color:var(--ink);
  padding:8px 12px; border-radius:8px; font-family:var(--sans); font-size:13.5px; width:180px;
  transition:border-color .15s, width .2s;}
.wikisearch input:focus{outline:none; border-color:var(--acc2); width:220px;}
.search-results{position:absolute; top:44px; right:0; width:300px; max-height:60vh; overflow:auto;
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.7); display:none; z-index:120;}
.search-results.show{display:block;}
.search-results a{display:block; padding:9px 11px; border-radius:7px; color:var(--ink); font-size:14px;}
.search-results a:hover,.search-results a.sel{background:#172026;}
.search-results a small{display:block; color:var(--dim); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.5px;}
.search-results .nores{padding:12px; color:var(--dim); font-size:13px; text-align:center;}

/* ---------- layout shell ---------- */
.shell{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:232px 1fr;
  gap:30px; padding:26px 18px 80px;}
.sidebar{position:sticky; top:74px; align-self:start; max-height:calc(100vh - 90px); overflow:auto;
  padding-right:4px;}
.sidebar h4{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dimmer);
  margin:18px 0 7px; padding-left:10px;}
.sidebar h4:first-child{margin-top:0;}
.sidebar a{display:block; color:var(--dim); font-size:14px; padding:7px 10px; border-radius:7px;
  border-left:2px solid transparent;}
.sidebar a:hover{color:var(--ink); background:#10151a;}
.sidebar a.active{color:var(--good); background:#101a18; border-left-color:var(--acc2); font-weight:700;}
.content{min-width:0;}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:12.5px; color:var(--dim); margin-bottom:14px; letter-spacing:.5px;}
.crumbs a{color:var(--dim);} .crumbs a:hover{color:var(--acc2);}
.crumbs span{color:var(--ink);}

/* ---------- page heads ---------- */
.pagehead{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px;}
.pagehead .kicker{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--acc2);
  font-weight:800; margin-bottom:8px;}
.pagehead h1{font-size:clamp(30px,5vw,46px); letter-spacing:3px; color:#eef2ec;
  text-shadow:0 0 26px rgba(159,178,176,.28);}
.pagehead p{color:var(--dim); margin-top:10px; max-width:70ch; font-size:16px;}

h2.sec{font-size:24px; letter-spacing:1px; margin:42px 0 16px; padding-bottom:8px;
  border-bottom:1px solid var(--line); color:#eef2ec;}
h2.sec:first-of-type{margin-top:8px;}
h3.sub{font-size:18px; margin:26px 0 10px; color:var(--acc);}
.content p{margin:12px 0; color:#cdd3cd;}
.content ul,.content ol{margin:12px 0 12px 22px; color:#cdd3cd;}
.content li{margin:6px 0;}
strong{color:var(--ink);}

/* ---------- callouts ---------- */
.note{border:1px solid var(--line2); border-left:3px solid var(--acc2); background:#0b1316;
  border-radius:8px; padding:13px 16px; margin:18px 0; font-size:14.5px; color:#c3cbc5;}
.note.warn{border-left-color:var(--danger); background:#160d0b;}
.note.gold{border-left-color:var(--gold); background:#15120a;}
.note b{color:var(--ink);}

/* ---------- generic cards / grids ---------- */
.cardgrid{display:grid; gap:14px; margin:18px 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.tile{background:linear-gradient(180deg,var(--panel),var(--card)); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; transition:transform .12s, border-color .15s, box-shadow .15s;
  display:block; color:inherit;}
a.tile:hover{transform:translateY(-3px); border-color:var(--acc2);
  box-shadow:0 14px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(111,174,154,.15);}
.tile .ic{width:34px; height:34px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-weight:900; font-size:18px; margin-bottom:12px;
  background:#101820; color:var(--acc2); border:1px solid var(--line2);}
.tile h3{font-size:17px; margin-bottom:5px; letter-spacing:.5px;}
.tile p{font-size:13.5px; color:var(--dim); margin:0;}

/* ---------- stat tables ---------- */
.tablewrap{overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:10px;}
table.data{width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
table.data caption{text-align:left; padding:12px 14px; color:var(--dim); font-size:13px;
  background:var(--panel2); border-bottom:1px solid var(--line);}
table.data th,table.data td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--line);}
table.data thead th{background:#0a0f13; color:var(--acc); font-size:12px; letter-spacing:1px;
  text-transform:uppercase; position:sticky; top:0;}
table.data tbody tr:hover{background:#0c1216;}
table.data td.num,table.data th.num{font-family:var(--mono); text-align:right;}
table.data tbody tr:last-child td{border-bottom:none;}
.pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; padding:2px 8px;
  border-radius:20px; border:1px solid var(--line2); color:var(--dim); white-space:nowrap;}
.pill.melee{color:#e8d6b0; border-color:#4a4330;}
.pill.gun{color:var(--energy); border-color:#244049;}
.pill.gear{color:var(--gold); border-color:#4a3f25;}
.pill.boss{color:var(--bad); border-color:#4a1f1d;}
.pill.secret{color:var(--pur); border-color:#3a3158;}
.pill.rng{color:var(--acc2); border-color:#244038;}

/* ---------- entity cards (weapons / enemies / bosses) ---------- */
.entity{background:linear-gradient(180deg,var(--panel),var(--card)); border:1px solid var(--line);
  border-radius:12px; padding:20px 22px; margin:18px 0; scroll-margin-top:84px;}
.entity-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.entity-swatch{width:46px; height:46px; border-radius:10px; flex:none; border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 18px rgba(0,0,0,.4);}
.entity-head h3{font-size:20px; letter-spacing:1px;}
.entity-head .roleline{color:var(--dim); font-size:13px; margin-top:3px;}
.entity-head .tags{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap;}
.entity .flavor{color:#c3cbc5; font-style:italic; margin:12px 0; font-size:14.5px;}
.statbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:8px; margin-top:14px;}
.stat{background:#090d10; border:1px solid var(--line); border-radius:8px; padding:9px 11px;}
.stat .k{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--dimmer);}
.stat .v{font-family:var(--mono); font-size:17px; color:var(--ink); margin-top:2px;}
.stat .v small{font-size:11px; color:var(--dim);}

/* ---------- hero (home) ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-in{max-width:var(--maxw); margin:0 auto; padding:64px 18px 54px; text-align:center;}
.hero img.logo{height:120px; width:auto; margin:0 auto 22px;
  filter:drop-shadow(0 0 40px rgba(111,174,154,.4));}
.hero h1{font-size:clamp(34px,7vw,68px); letter-spacing:8px; color:#eef2ec;
  text-shadow:0 0 30px rgba(159,178,176,.45), 0 4px 0 #11161a;}
.hero .lede{color:var(--dim); max-width:62ch; margin:16px auto 0; font-size:clamp(15px,2.4vw,19px);
  letter-spacing:.5px;}
.hero .herobtns{display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-weight:700;
  letter-spacing:1px; padding:13px 24px; border-radius:9px; border:1px solid var(--line2);
  background:#141a1f; color:var(--ink); font-size:15px; transition:transform .08s, box-shadow .15s, background .15s;}
.btn:hover{transform:translateY(-2px); color:var(--ink);}
.btn.primary{background:linear-gradient(180deg,#cfd6cf,#9aa6a0); color:#10141a; border-color:var(--acc2);
  box-shadow:0 0 22px rgba(111,174,154,.4);}
.hero .fog{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 320px at 50% 0%, rgba(111,174,154,.08), transparent 70%);}

.statstrip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.statstrip div{background:var(--bg2); padding:20px 12px; text-align:center;}
.statstrip b{display:block; font-family:var(--mono); font-size:30px; color:var(--acc2);}
.statstrip span{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);}

.homewrap{max-width:var(--maxw); margin:0 auto; padding:46px 18px 80px;}
.homewrap h2{font-size:26px; letter-spacing:1px; margin:14px 0 6px; text-align:center;}
.homewrap .sub{color:var(--dim); text-align:center; margin-bottom:26px; letter-spacing:1px;
  text-transform:uppercase; font-size:12px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:var(--bg2); margin-top:40px;}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:36px 18px; display:grid;
  grid-template-columns:1.4fr 1fr 1fr; gap:30px;}
.foot h5{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--acc);
  margin-bottom:12px;}
.foot a{display:block; color:var(--dim); font-size:14px; padding:4px 0;}
.foot a:hover{color:var(--ink);}
.foot p{color:var(--dimmer); font-size:13px; margin-top:8px;}
.foot .brandcol img{height:30px; margin-bottom:12px;}
.foot-bottom{border-top:1px solid var(--line); text-align:center; padding:16px; color:var(--dimmer);
  font-size:12.5px;}
.foot-bottom a{color:var(--dim);}

/* ---------- on-page TOC (mobile jump) ---------- */
.toc{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:14px 18px;
  margin:0 0 26px;}
.toc h4{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dimmer); margin-bottom:8px;}
.toc ul{list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:6px 14px;}
.toc li{margin:0;}
.toc a{font-size:13.5px; color:var(--acc2);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr; gap:0;}
  .sidebar{position:static; max-height:none; display:none; margin-bottom:20px;
    border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--panel2);}
  .sidebar.open{display:block;}
  .foot-in{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .topnav{display:none; position:absolute; top:59px; left:0; right:0; flex-direction:column;
    background:var(--panel2); border-bottom:1px solid var(--line); padding:10px 14px; gap:2px;}
  .topnav.open{display:flex;}
  .topnav a{padding:11px 12px;}
  .navtoggle{display:block;}
  .wikisearch{order:3; flex:1 1 100%; margin-top:8px;}
  .wikisearch input,.wikisearch input:focus{width:100%;}
  .topbar-in{flex-wrap:wrap;}
  .statstrip{grid-template-columns:repeat(2,1fr);}
  .foot-in{grid-template-columns:1fr;}
  .entity-head .tags{margin-left:0; width:100%;}
}
@media (max-width:480px){
  .hero-in{padding:42px 16px 38px;}
  .brand-link .wordmark{font-size:15px;}
}
/* sidebar mobile open button */
.mobilesidebtn{display:none;}
@media (max-width:900px){
  .mobilesidebtn{display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
    background:#141a1f; border:1px solid var(--line); color:var(--ink); padding:10px 14px;
    border-radius:8px; cursor:pointer; font-weight:700; font-size:14px; width:100%;
    justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important; animation:none!important; transition:none!important;}
}