/* Mushi's Guide to Hackerwars.io — game-native skin
   Shared by every page in guides/wiki/. No web fonts (system stack only). */
:root{
  --green:#2f8e44; --green-d:#256e36;
  --blue:#2c6fbf; --red:#c0392b; --amber:#cf8a1a;
  --sidebar:#232b30; --sidebar-d:#1b2226; --sidebar-tx:#b3c0c7; --sidebar-hd:#7d8f99;
  --content:#eceff1; --panel:#ffffff; --line:#d4d9de; --ink:#2b343b; --ink-dim:#5a6a74;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--content);color:var(--ink);font-size:14px;line-height:1.55}
code,.mono{font-family:"SF Mono",ui-monospace,Consolas,Menlo,monospace}
a{color:var(--blue)}

/* brand (top of sidebar) */
.logo{display:flex;align-items:center;gap:9px;height:50px;padding:0 16px;background:var(--green-d);color:#fff;font-weight:700;letter-spacing:.2px;font-size:15px;text-decoration:none}
.logo .glyph{font-family:"SF Mono",monospace;opacity:.85}

/* sidebar — fixed full-height, scrolls independently of content */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:230px;background:var(--sidebar);overflow-y:auto}
.sidebar .cat{color:var(--sidebar-hd);font-size:11px;text-transform:uppercase;letter-spacing:.8px;padding:16px 16px 6px}
.navlink{display:flex;align-items:center;gap:11px;padding:9px 16px;color:var(--sidebar-tx);text-decoration:none;font-size:13.5px;border-left:3px solid transparent}
a.navlink:hover{background:var(--sidebar-d);color:#fff}
.navlink.active{background:var(--sidebar-d);color:#fff;border-left-color:var(--green)}
.navlink .ic{width:18px;text-align:center;opacity:.85;font-size:14px}
.navlink.soon{color:#6a787f;cursor:default}
.navlink.soon .tag{margin-left:auto;font-size:9.5px;letter-spacing:.5px;color:#8a979f;border:1px solid #3a464c;padding:1px 5px;border-radius:3px;text-transform:uppercase}

/* content shell */
.content{margin-left:230px;padding:0 22px 40px;max-width:980px}
.crumb{display:flex;align-items:center;gap:8px;padding:16px 2px 4px;color:var(--ink-dim);font-size:12.5px}
.crumb a{text-decoration:none}
.crumb .sep{opacity:.5}
.page-h{display:flex;align-items:baseline;gap:12px;padding:6px 2px 18px}
.page-h h1{font-size:23px;font-weight:600;letter-spacing:.2px}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:3px;margin-bottom:18px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.panel.blue{border-top-color:var(--blue)}
.panel-h{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid #eef1f3;font-weight:600;font-size:14.5px}
.panel-h .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.panel.blue .panel-h .dot{background:var(--blue)}
.panel-b{padding:15px 16px}
.panel-b p{margin-bottom:10px;color:#3a454d}
.panel-b p:last-child{margin-bottom:0}
.panel-b ul{margin:0 0 10px 18px;color:#3a454d}
.panel-b li{margin-bottom:5px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;background:#f6f8f9;color:var(--ink-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;border-bottom:2px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid #eef1f3;vertical-align:top}
tr:last-child td{border-bottom:none}

/* numbered steps */
ol.steps{list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:9px 0 9px 40px;border-bottom:1px solid #f0f2f4}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;background:var(--green);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
ol.steps b{color:var(--ink)}

/* callouts */
.callout{display:flex;gap:12px;padding:13px 15px;border-radius:3px;margin-bottom:18px;font-size:13.5px}
.callout.warn{background:#fef6e7;border:1px solid #f3dca6;color:#7a5908}
.callout.tip{background:#eef6f0;border:1px solid #c2e0cc;color:#2b5436}
.callout .ic{font-size:20px;line-height:1}
.callout b{display:block;margin-bottom:2px}
.callout a{color:inherit;text-decoration:underline}

/* hub: hero + onboarding track + topic index */
.hero{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:3px;padding:22px;margin-bottom:18px}
.hero h2{font-size:20px;font-weight:700;margin-bottom:6px}
.hero p{color:#3a454d;max-width:70ch}
.track{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:6px}
.track-step{display:flex;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:12px 14px;text-decoration:none;color:inherit}
a.track-step:hover{border-color:var(--green)}
.track-step .n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.track-step.soon .n{background:#aab4ba}
.track-step h4{font-size:14px;margin-bottom:2px}
.track-step p{font-size:12.5px;color:var(--ink-dim)}
.track-step.soon{opacity:.7}
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.index-cat h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-dim);padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.index-cat a{display:block;padding:4px 0;text-decoration:none}
.index-cat a:hover{text-decoration:underline}
.index-cat .soon{display:block;padding:4px 0;color:#9aa6ad}
.index-cat .soon .tag{font-size:9.5px;border:1px solid var(--line);color:#9aa6ad;padding:0 5px;border-radius:3px;margin-left:5px;text-transform:uppercase}

/* section label + footer */
.label{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-dim);margin:24px 2px 10px;font-weight:600}
.footer{color:var(--ink-dim);font-size:12px;padding:18px 2px 0;border-top:1px solid var(--line);margin-top:6px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer .mono{color:#8a979f}