:root{
    --bg:#111417;
    --panel:#191e23;
    --panel2:#20262c;
    --text:#eef2f4;
    --muted:#97a3ad;
    --accent:#f3b95f;
    --ok:#74d18b;
    --danger:#e98080;
    --border:#2c353d;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;
    background:var(--bg);
    color:var(--text);
  }
  button{
    font:inherit;
  }
  .app{
    max-width:1180px;
    margin:0 auto;
    padding:16px;
  }
  .topbar{
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
  }
  .title{
    font-weight:800;
    font-size:20px;
  }
  .sub{
    color:var(--muted);
    font-size:13px;
  }
  .grid{
    display:grid;
    grid-template-columns:260px 1fr 300px;
    gap:14px;
  }
  .card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
  }
  .section-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:10px;
    font-weight:800;
  }
  .stat{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .stat:last-child{border-bottom:0}
  .value{font-weight:700}
  .bar{
    height:8px;
    background:#0f1215;
    border-radius:999px;
    overflow:hidden;
    margin-top:5px;
  }
  .bar > span{
    display:block;height:100%;
    background:var(--accent);
  }
  .bar.hp > span{background:var(--ok)}
  .bar.hp{position:relative;height:12px}
  .bar.hp > span{position:absolute;inset:0 auto 0 0;width:0}
  .bar.hp > .damage-trail{background:#f5d547}
  .bar.hp.enemy-hp > .life-fill{background:var(--danger)}
  .bar.stamina > span{background:#72a7ff}
  .bar.xp > span{background:#c58cff}
  progress{
    display:block;
    width:100%;
    height:8px;
    margin:5px 0 10px;
    overflow:hidden;
    border:0;
    border-radius:999px;
    background:#0f1215;
    color:var(--accent);
    accent-color:var(--accent);
  }
  progress::-webkit-progress-bar{background:#0f1215;border-radius:999px}
  progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
  progress::-moz-progress-bar{background:var(--accent);border-radius:999px}
  .pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--border);
    background:var(--panel2);
    border-radius:999px;
    padding:7px 10px;
    font-size:13px;
  }
  .row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .btn{
    border:1px solid var(--border);
    background:var(--panel2);
    color:var(--text);
    border-radius:10px;
    padding:10px 12px;
    cursor:pointer;
    transition:.15s ease;
  }
  .btn:hover{transform:translateY(-1px);border-color:#46515c}
  .btn.primary{background:var(--accent);color:#1c160d;border-color:transparent;font-weight:800}
  .btn.good{background:#213a29;border-color:#2f5a3c}
  .btn.danger{background:#3a2222;border-color:#5c3232}
  .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
  .location{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
  }
  .location h2{
    margin:0;
    font-size:22px;
  }
  .location p{
    margin:4px 0 0;color:var(--muted)
  }
  .actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .resource-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .resource{
    background:var(--panel2);
    border:1px solid var(--border);
    padding:9px 10px;
    border-radius:10px;
    display:flex;
    justify-content:space-between;
  }
  .workers{
    display:grid;
    gap:8px;
  }
  .worker{
    padding:10px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:10px;
  }
  select{
    margin-top:8px;
    width:100%;
    background:#11161a;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px;
  }
  .log{
    max-height:250px;
    overflow:auto;
    font-size:13px;
    line-height:1.45;
  }
  .log div{
    padding:7px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .tabs{
    display:flex;
    gap:6px;
    margin-bottom:10px;
    flex-wrap:wrap;
  }
  .tab{
    padding:8px 10px;
    border-radius:8px;
    background:var(--panel2);
    border:1px solid var(--border);
    color:var(--text);
    cursor:pointer;
  }
  .tab.active{background:#2b333b}
  .hidden{display:none}
  .enemy{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
  }
  .enemy-head{
    display:flex;justify-content:space-between;gap:12px;
    font-weight:800;
  }
  .character-image{display:block;width:80px;height:80px;object-fit:contain;flex-shrink:0;background:var(--panel2);border:1px solid var(--border);border-radius:12px}
  .character-label{display:flex;align-items:center;gap:10px;min-width:0}
  .character-label .character-image{width:48px;height:48px}
  .combat-portraits{display:flex;justify-content:space-around;gap:12px;margin-bottom:14px;text-align:center}
  .combat-portraits figure{margin:0;min-width:0;flex:1}
  .combat-portraits .character-image{width:192px;height:auto;aspect-ratio:1;max-width:100%;margin:0 auto 6px}
  .recipe{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .recipe:last-child{border-bottom:0}
  .muted{color:var(--muted)}
  .ok{color:var(--ok)}
  .danger-text{color:var(--danger)}
  .notification{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;width:min(540px,calc(100% - 32px));background:var(--panel2);border:2px solid var(--accent);border-radius:12px;padding:14px;box-shadow:0 8px 32px #0008;display:flex;align-items:center;gap:12px}
  .notification.hidden{display:none}
  .food-control{min-width:0}
  .food-control .btn{width:100%}
  .food-life{margin-top:5px;font-size:13px;color:var(--ok)}
  .comparison{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px;table-layout:fixed}
  .comparison th,.comparison td{text-align:right;padding:8px 4px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
  .comparison th:first-child{text-align:left}
  details summary{cursor:pointer;margin-bottom:10px}
  .tracker-list{max-height:520px;overflow:auto;display:grid;gap:8px}
  .tracker-item{padding:10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px}
  .tracker-item.unknown{color:var(--muted);border-style:dashed}
  @media(max-width:900px){
    .grid{grid-template-columns:1fr}
  }

#idleVictoryDialog{background:var(--panel);color:var(--text);border:1px solid var(--muted);border-radius:14px;padding:24px;max-width:420px;width:calc(100% - 48px);box-sizing:border-box}
#idleVictoryDialog::backdrop{background:rgba(0,0,0,.7)}
#idleVictoryDialog h2{margin-top:0}
#combatArea{scroll-margin-top:16px}

  .pill.era{
    --era:var(--accent);
    font-size:16px;
    font-weight:800;
    padding:9px 16px;
    color:var(--era);
    border:2px solid var(--era);
    background:color-mix(in srgb,var(--era) 16%,var(--panel2));
    box-shadow:0 0 14px color-mix(in srgb,var(--era) 45%,transparent);
  }
  .pill.era[data-age="Wood Age"]{--era:#c99a5b}
  .pill.era[data-age="Copper Age"]{--era:#e58a4b}
  .pill.era[data-age="Iron Age"]{--era:#b8c4cc}
  .pill.era[data-age="Steel Age"]{--era:#6fb7e9}
  .pill.era[data-age="Platinum Age"]{--era:#b98cf0}
  .pill.era[data-age="Endgame"]{--era:#ffd24d}