@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Space+Mono:wght@400;700&display=swap');
  :root{
    --bg:#e7e7e1;
    --panel:#ffffff;
    --panel-2:#ffff00;
    --border:#000000;
    --text:#000000;
    --text-dim:#000000;
    --text-faint:#555555;
    --energy:#000000;
    --food:#ffcc00;
    --money:#00ffcc;
    --aggr:#ff5555;
    --social:#ff77bb;
    --intel:#33ccff;
    --fear:#999999;
    --mono: "Space Mono", monospace;
    --display: "Space Mono", monospace;
    --brut-sh: 4px 4px 0px #000000;
    --brut-sh-sm: 2px 2px 0px #000000;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; height:100%; background:var(--bg); color:var(--text);
    font-family:var(--mono); overflow:hidden;
    font-weight: 500;
  }
  .app{ display:grid; grid-template-rows:auto 1fr; height:100%;
    background: var(--bg);
  }

  header{
    display:flex; align-items:center; gap:20px;
    padding:16px 24px;
    background:var(--bg);
    border-bottom: 3px solid var(--border);
    flex-wrap:wrap;
    z-index: 10;
  }
  .brand{ display:flex; align-items:baseline; gap:12px; margin-right:8px;}
  .brand .mark{
    font-family:var(--display); color:var(--text); font-weight:900; letter-spacing:0px; font-size:22px;
    background: #00ffcc; padding: 4px 8px; border: 3px solid #000;
    box-shadow: var(--brut-sh-sm);
  }
  .brand .sub{ color:var(--text-dim); font-size:12px; letter-spacing:1px; text-transform:uppercase;}
  .ctl{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); text-transform:uppercase;}
  .ctl button{
    background:#ffffff; border:3px solid #000; color:#000;
    font-family:var(--mono); font-size:12px; padding:8px 16px; cursor:pointer;
    text-transform:uppercase; font-weight: 800;
    box-shadow: var(--brut-sh-sm);
    transition: all 0.1s;
    outline: none;
  }
  .ctl button:hover{ transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #000; background: #00ffcc; }
  .ctl button:active{ transform: translate(1px, 1px); box-shadow: 0px 0px 0px #000; }
  .ctl button.primary{ background: #ffff00; }
  .ctl button.danger{ background: #ff5555; }
  .ctl input[type=range]{
    width:90px; accent-color:#000;
    background: #fff;
    border: 2px solid #000;
    height: 10px;
    appearance: none;
  }
  .ctl input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 0;
    background: #00ffcc;
    border: 2px solid #000;
    cursor: pointer;
  }
  .tickcount{ margin-left:auto; color:var(--text-faint); font-size:11px; display:flex; gap:18px; text-transform:uppercase; letter-spacing:1px;}
  .tickcount b{ color:var(--text); font-weight:700; }

  .main{ display:grid; grid-template-columns:300px 1fr 320px; height:100%; min-height:0; transition:grid-template-columns 0.22s ease; }
  .main.hidden{ display: none; }
  .main.settings-closed{ grid-template-columns:300px 1fr 0px; }

  .page-info{
    display: none;
    padding: 40px;
    overflow-y: auto;
    height: 100%;
    background: var(--bg);
  }
  .page-info.active{ display: block; }
  .info-content{
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 4px solid #000;
    box-shadow: 10px 10px 0px #000;
    padding: 40px;
  }
  .info-content h1{ margin-top: 0; text-transform: uppercase; font-size: 32px; border-bottom: 4px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
  .info-content h2{ text-transform: uppercase; font-size: 20px; background: #ffff00; display: inline-block; padding: 4px 10px; border: 3px solid #000; margin-top: 30px; margin-bottom: 15px; box-shadow: 3px 3px 0px #000; }
  .info-content h3{ text-transform: uppercase; font-size: 16px; margin-top: 20px; color: #555; border-left: 4px solid #00ffcc; padding-left: 10px; }
  .info-content p{ line-height: 1.6; margin-bottom: 15px; font-size: 14px; }
  .info-content ul{ list-style: none; padding: 0; margin-bottom: 20px; }
  .info-content li{ margin-bottom: 10px; padding-left: 25px; position: relative; font-size: 14px; line-height: 1.5; }
  .info-content li::before{ content: "→"; position: absolute; left: 0; font-weight: bold; }
  .info-content .back-btn{
    margin-top: 30px;
    background: #00ffcc;
    border: 3px solid #000;
    padding: 12px 24px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 5px 5px 0px #000;
  }
  .info-content .back-btn:hover{ transform: translate(-2px, -2px); box-shadow: 7px 7px 0px #000; }

  .worldwrap{
    position:relative; overflow:hidden;
    background: #1a1a1a;
    margin: 10px;
    border: 3px solid #000;
    box-shadow: var(--brut-sh);
  }
  .hud-corner{ position:absolute; width:22px; height:22px; border:1px solid var(--border); opacity:1; z-index:6; pointer-events:none; }
  .hud-corner.tl{ top:10px; left:10px; border-right:none; border-bottom:none; }
  .hud-corner.tr{ top:10px; right:10px; border-left:none; border-bottom:none; }
  .hud-corner.bl{ bottom:10px; left:10px; border-right:none; border-top:none; }
  .hud-corner.br{ bottom:10px; right:10px; border-left:none; border-top:none; }
  canvas{ display:block; width:100%; height:100%; }
  .legend{
    position:absolute; left:20px; bottom:20px; background:#ffffff;
    border: 3px solid #000; box-shadow: var(--brut-sh-sm);
    padding:12px 18px; font-size:10px; font-weight: 800;
    color:#000; line-height:1.8; text-transform:uppercase;
  }
  .legend .row{ display:flex; align-items:center; gap:8px; }
  .dot{ width:8px; height:8px; display:inline-block; flex-shrink:0; background:var(--text); border:1px solid var(--bg); }
  .diamond{ width:8px; height:8px; background:var(--food); border:1px solid var(--text); display:inline-block; flex-shrink:0; }
  .paused-badge{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:6;
    background:var(--bg); border:1px solid var(--text); color:var(--text);
    font-family:var(--mono); font-size:12px; font-weight:bold; text-transform:uppercase; padding:8px 16px;
    display:none;
  }
  .paused-badge.show{ display:block; }

  .side{ display:flex; flex-direction:column; min-height:0; background:var(--bg); overflow:hidden; }
  .side.data{ padding: 10px; border-right: 3px solid #000; }
  .side.settings{ padding: 10px; overflow-y:auto; border-left: 3px solid #000; }
  .sec{
    background: #ffffff;
    margin: 10px;
    padding: 16px;
    border: 3px solid #000;
    box-shadow: var(--brut-sh);
  }
  .sec h2{
    margin:-16px -16px 15px -16px; font-size:12px; text-transform:uppercase;
    color:#000; font-weight:900; background: #ff77bb; padding: 8px 16px;
    border-bottom: 3px solid #000;
  }
  .gauge{ margin-bottom:12px; }
  .gauge .lbl{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.4px;}
  .gauge .bar{ height:12px; background:#fff; overflow:hidden; border: 2px solid #000; }
  .gauge .fill{ height:100%; border-radius:0; transition:width 0.3s; }

  #popchart{ width:100%; height:56px; display:block; margin-top:6px; }

  #log{ flex:1; overflow-y:auto; font-size:11px; line-height:1.7; min-height:80px; }
  #log div{ padding:6px 0; border-bottom:1px solid rgba(0,0,0,0.03); color:var(--text-dim); }
  #log div .t{ color:var(--text-faint); margin-right:6px; }
  #log::-webkit-scrollbar{ width:5px; }
  #log::-webkit-scrollbar-thumb{ background:#232e3b; border-radius:3px; }

  #inspector{ flex:1; overflow-y:auto; min-height:120px; }
  #inspector .empty{ color:var(--text-faint); font-size:11px; padding:8px 0; }
  .agent-id{ font-size:13px; color:var(--text); margin-bottom:2px; }
  .agent-goal{ font-size:10px; letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:10px; display:inline-block; margin-bottom:15px; box-shadow: var(--nm-btn);}
  .radar-wrap{ display:flex; justify-content:center; margin:6px 0 10px; }
  .stat-line{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-dim); padding:2px 0; }
  .stat-line b{ color:var(--text); }
  .mem-list{ margin-top:8px; font-size:10px; color:var(--text-dim); line-height:1.8; border-top:1px solid var(--border); padding-top:8px; }

  .footer-hint{ padding:8px 14px; font-size:10px; color:var(--text-faint); border-top:1px solid var(--border); }

  .side.settings .sd-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px; position:sticky; top:0; background:#00ffcc; z-index:2;
    border: 3px solid #000; box-shadow: var(--brut-sh-sm); margin-bottom: 20px;
  }
  .side.settings .sd-head h3{ margin:0; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
  .side.settings .sd-head button{ background:none; border:none; color:var(--text-faint); font-size:16px; cursor:pointer; }
  .sd-group{ padding:10px 16px 4px; }
  .sd-group-title{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:1px; margin:20px 0 12px; font-weight: 800; }
  .sd-row{ margin-bottom:12px; }
  .sd-row .sd-lbl{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:4px; }
  .sd-row .sd-lbl b{ color:var(--text); font-weight:600; }
  .sd-row input[type=range]{
    width:100%; accent-color:#000;
    background: #fff;
    border: 2px solid #000;
    height: 12px;
    appearance: none;
    margin: 10px 0;
  }
  .sd-row input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 20px; height: 20px;
    background: #ffff00;
    border: 2px solid #000;
    cursor: pointer;
  }
  .sd-reset{ font-size:9px; color:var(--money); }

  .overlay-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.8); opacity:0; pointer-events:none; z-index:60; display:flex; align-items:center; justify-content:center; }
  .overlay-scrim.open{ opacity:1; pointer-events:auto; }
  .welcome-card{
    width:min(600px, 88vw); max-height:82vh; overflow-y:auto;
    background:#ffffff; border: 4px solid #000; box-shadow: 10px 10px 0px #000;
    padding:40px;
  }
  .welcome-card h1{ margin:0 0 4px; font-size:18px; color:var(--text); font-weight:bold; }
  .welcome-card .kicker{ font-size:12px; text-transform:uppercase; color:var(--text-dim); margin-bottom:14px; }
  .welcome-card p{ font-size:12px; line-height:1.5; color:var(--text); margin:0 0 12px; }
  .welcome-card ul{ margin:0 0 14px; padding-left:18px; font-size:12px; line-height:1.5; color:var(--text); }
  .welcome-card li b{ color:var(--text); text-decoration:underline; }
  .welcome-card .go{
    margin-top:20px; background:#00ffcc; border:3px solid #000; color:#000;
    font-family:var(--mono); font-size:16px; padding:14px 28px; cursor:pointer; font-weight:900; text-transform:uppercase;
    box-shadow: var(--brut-sh); transition: all 0.1s;
  }
  .welcome-card .go:hover{ transform: translate(-3px, -3px); box-shadow: 13px 13px 0px #000; }
  .welcome-card .go:active{ transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }
@media (max-width: 900px) {
  header {
    padding: 10px;
    gap: 10px;
  }
  .ctl button {
    padding: 6px 10px;
    font-size: 10px;
  }
  .tickcount {
    margin-left: 0;
    gap: 10px;
    flex-wrap: wrap;
  }
  .main {
    grid-template-columns: 1fr !important;
  }
  .side.data {
    display: none;
  }
  .side.settings {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 100vw;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .main:not(.settings-closed) .side.settings {
    transform: translateX(0);
  }
  .worldwrap {
    height: 100%;
  }
}