:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#f8f0da;background:#111e1a}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;transition:background .15s,opacity .15s}button:disabled{cursor:not-allowed;opacity:.43}main{max-width:1360px;margin:auto;padding:16px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 14px}h1,h2{font-family:Georgia,serif;font-weight:500}h1{font-size:27px;letter-spacing:-.02em;margin:0}h2{font-size:27px;margin:5px 0 8px}.muted{color:#b8c9b8;font-size:13px;line-height:1.5}.eyebrow{color:#dfbd82;text-transform:uppercase;font-size:11px;font-weight:720;letter-spacing:.12em}.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #516651;background:#2b4134;border-radius:999px;padding:6px 10px;font-size:12px;color:#e8dfc3}.layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:14px}.scene{position:relative;height:min(64vw,690px);min-height:390px;overflow:hidden;border:1px solid #647c65;border-radius:15px;background:#1d332b;touch-action:none;cursor:grab;box-shadow:0 14px 50px #080f0b77}.scene.dragging{cursor:grabbing}.world{position:absolute;top:0;left:0;width:1448px;height:1086px;transform-origin:0 0;will-change:transform}.world img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}.world svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hit{fill:#ffe6a1;fill-opacity:0;stroke:#ffda89;stroke-opacity:0;stroke-width:5;cursor:pointer;pointer-events:all;transition:fill-opacity .2s,stroke-opacity .2s}.hit:hover,.hit:focus,.hit.selected{fill-opacity:.14;stroke-opacity:.95;filter:drop-shadow(0 0 8px #f0bc58)}.hit:focus{outline:none}.zone{stroke-dasharray:16 10;stroke-width:6}.zone.selected{fill-opacity:.12}.badge-map{pointer-events:none}.map-tag rect{fill:#16291fe9;stroke:#c5ae7a;stroke-width:2}.map-tag text{fill:#ffefd0;font-size:24px;font-weight:650;paint-order:stroke}.map-tag{opacity:.93}.map-tag.visible{opacity:1}.topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}.topstack{display:flex;flex-direction:column;gap:8px;min-width:0}.hud-resources{display:flex;align-items:center;gap:14px;justify-content:flex-end;max-width:min(100%,920px);padding:7px 12px;background:linear-gradient(180deg,#172920f3,#12211ae8);border:1px solid #6e856eb8;border-radius:12px;box-shadow:0 4px 16px #0005;backdrop-filter:blur(4px)}.hud-resource{background:none;border:none;box-shadow:none;border-radius:0;padding:0;min-width:auto;display:flex;align-items:center;gap:6px;backdrop-filter:none;position:relative}.hud-glyph{width:20px;height:20px;border-radius:5px;background:#2b4336;display:grid;place-items:center;flex:0 0 auto;border:1px solid #8d9e7f40;box-shadow:inset 0 1px 0 #ffffff10}.hud-glyph svg{width:13px;height:13px;display:block}.hud-meta{display:flex;flex-direction:column;gap:1px;min-width:0}.hud-meta span{font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:#c7d2c0;line-height:1}.hud-meta strong{font-size:15px;line-height:1;color:#fff3d8}.hud-resource + .hud-resource::before{content:"";position:absolute;left:-7px;top:3px;bottom:3px;width:1px;background:#8ea08544}.hud-resource[role="button"]{cursor:pointer}.hud-resource[role="button"]:hover .hud-meta strong{color:#fff8e8}.hud-resource[role="button"]:focus-visible{outline:2px solid #d6c28a;outline-offset:4px;border-radius:6px}.map-pill{background:#162820de;border:1px solid #607058aa;box-shadow:0 3px 12px #0005;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:650}.cam{position:absolute;bottom:12px;right:12px;display:flex;gap:6px}.btn,.cam button{border:1px solid #657c61;border-radius:9px;background:#344b3b;color:#fbefda;padding:9px 12px;font-size:13px;font-weight:650}.btn:hover,.cam button:hover{background:#46614b}.btn.primary{background:#ab7545;border-color:#c99b66;color:#fff4dc}.btn.primary:hover{background:#be8756}.btn.ghost{background:#223629}.cam button{background:#192e26d9;min-width:39px}.side{display:flex;flex-direction:column;gap:13px}.panel{border:1px solid #576c56;background:#1b2b24;border-radius:13px;padding:17px}.panel p{font-size:13px;line-height:1.58;color:#cbd4c7;margin:0}.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.resource{border:1px solid #465c49;background:#263c30;border-radius:9px;padding:10px}.resource strong{font-size:22px;display:block}.resource span{font-size:11px;color:#c4cbb6}.card{border:1px solid #4b624c;background:#25392d;border-radius:10px;padding:12px;margin-top:12px}.divider{height:1px;background:#435a46;margin:13px 0}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.value{font-weight:760;font-size:20px;min-width:35px;text-align:center}.worker-bar{display:flex;justify-content:space-between;font-size:13px;margin-top:8px}.slots{display:flex;gap:5px;margin-top:9px}.slot{height:7px;border-radius:7px;flex:1;background:#425649}.slot.used{background:#dfb475}.progress{height:5px;background:#3b5741;border-radius:8px;overflow:hidden;margin-top:10px}.progress div{height:100%;background:#e3b66a;width:0%;transition:width .1s}.status{color:#eac992;font-size:12px;min-height:20px}.log{font-size:12px;color:#c5d2c0;min-height:48px;line-height:1.55}.bottom-note{font-size:12px;color:#aabdac;line-height:1.55;margin:10px 0}.help{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hinticon{font-size:15px}.mode{font-size:12px;color:#deca9e}#running{margin-top:8px;font-size:12px;color:#e5d0a6}.toast{position:absolute;left:12px;bottom:12px;max-width:66%;padding:10px 12px;background:#142b23ec;color:#f3e8ce;border:1px solid #b99d69;border-radius:10px;font-size:12px;pointer-events:none}.hidden{display:none!important}
@media(max-width:820px){main{padding:9px}.layout{grid-template-columns:1fr}.scene{height:min(69vw,540px);min-height:310px}.side{display:grid;grid-template-columns:1fr 1fr}.panel{padding:13px}.side .detail{grid-row:span 2}h2{font-size:22px}}@media(max-width:590px){h1{font-size:22px}.scene{height:68vw;min-height:295px}.side{display:flex}.resources{grid-template-columns:repeat(3,1fr)}.panel{padding:13px}.topbar{left:7px;right:7px;top:7px;gap:7px;flex-direction:column;align-items:stretch}.topstack{gap:6px}.hud-resources{justify-content:flex-start;max-width:none;overflow-x:auto;flex-wrap:nowrap;padding:6px 10px;gap:10px}.hud-resource{min-width:auto;padding:0;gap:5px;flex:0 0 auto}.hud-glyph{width:18px;height:18px}.hud-glyph svg{width:11px;height:11px}.hud-meta strong{font-size:13px}.hud-meta span{font-size:8px}.hud-meta small{font-size:8px}.map-pill{font-size:10px;padding:7px 8px}}

/* V6 — HUD de production, compact et consultable */
.hud-resources{max-width:740px;flex-wrap:nowrap;align-items:stretch;gap:5px}
.hud-resource{min-width:91px;padding:7px 8px;gap:6px;pointer-events:auto;cursor:pointer;position:relative;transition:border-color .18s,background .18s,transform .18s}
.hud-resource:hover,.hud-resource:focus-visible,.hud-resource.is-open{border-color:#e7c68b;background:linear-gradient(180deg,#304536f5,#1a3026ef);outline:none}
.hud-resource:focus-visible{box-shadow:0 0 0 2px #e1c68a}
.hud-glyph{width:27px;height:27px}
.hud-glyph svg{width:18px;height:18px}
.hud-meta strong{font-variant-numeric:tabular-nums;font-size:19px;white-space:nowrap}
.hud-meta small{color:#bed8b3;font-size:10px;white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums}
.hud-resource.pop{animation:hud-resource-pop .5s ease-out}
.hud-resource.loss{animation:hud-resource-loss .5s ease-out}
.hud-resource.warning{border-color:#ce9a5a}
@keyframes hud-resource-pop{0%{background:#48694acc;transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes hud-resource-loss{0%{background:#855744cc}100%{background:#162820e8}}
.hud-detail{position:absolute;top:71px;right:12px;width:min(320px,calc(100% - 24px));background:#172b22f7;border:1px solid #bca574;border-radius:12px;padding:14px;z-index:20;pointer-events:auto;box-shadow:0 10px 28px #0008;backdrop-filter:blur(6px)}
.hud-detail[hidden]{display:none!important}
.hud-detail-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hud-detail-title{font-family:Georgia,serif;font-size:19px;color:#fff3da}
.hud-detail-desc{color:#c9d7c6;font-size:12px;line-height:1.5}
.hud-detail-stat{color:#e9cf94;font-size:12px;margin-top:10px;font-weight:650}
.hud-detail-close{pointer-events:auto;background:#324b3a;border:1px solid #71866f;color:#f4e8d4;border-radius:7px;padding:4px 8px}
.hud-capacity{height:5px;background:#435746;border-radius:4px;overflow:hidden;margin-top:8px}
.hud-capacity-fill{height:100%;width:0;background:#b8cc8a;transition:width .2s}
@media(max-width:1180px){.topbar{flex-direction:column;align-items:stretch}.topstack{flex-direction:row}.hud-resources{max-width:100%;overflow-x:auto;scrollbar-width:thin;padding-bottom:3px;justify-content:flex-start;pointer-events:auto}.hud-resource{flex:0 0 100px}.hud-detail{top:111px}}
@media(max-width:590px){.topstack{flex-direction:row;align-items:center}.topstack .map-pill:last-child{display:none}.hud-resources{width:100%;gap:5px}.hud-resource{flex:0 0 89px;min-width:89px;padding:6px 7px;gap:5px}.hud-glyph{width:24px;height:24px}.hud-glyph svg{width:16px;height:16px}.hud-meta strong{font-size:17px}.hud-detail{top:102px}}

/* V8 — une seule barre, au plus deux rangées, glyphes et valeurs uniquement */
.topbar{align-items:flex-start}
.hud-resources{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;max-width:790px;width:min(100%,790px);padding:4px 8px;
  background:linear-gradient(180deg,#1b3025f6,#102219f5);
  border:1px solid #8b96766b;border-radius:11px;align-items:center;
  overflow:visible;box-shadow:0 5px 15px #0006
}
.hud-resource{display:flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;min-height:32px;padding:3px 8px;box-shadow:none;border:0!important;
  border-radius:5px;background:transparent!important;transform:none}
.hud-resource:hover,.hud-resource.is-open,.hud-resource:focus-visible{background:#ffffff0b!important}
.hud-resource + .hud-resource::before{left:0;top:7px;bottom:7px}
.hud-glyph{width:24px;height:24px;border:0;background:transparent;box-shadow:none}
.hud-glyph svg{width:20px;height:20px}
.hud-meta{display:flex;align-items:center;justify-content:center}
.hud-meta span,.hud-meta small{display:none!important}
.hud-meta strong{font-size:15px;line-height:1.15;font-weight:700;letter-spacing:.01em}
.hud-detail{top:58px;right:12px}
.hud-resource.warning .hud-meta strong{color:#e9b67e}
@media(max-width:1080px){
  .topbar{flex-direction:column;align-items:stretch}
  .topstack{flex-direction:row;align-items:center;gap:6px}
  .hud-resources{width:100%;max-width:none}
  .hud-detail{top:108px}
}
@media(max-width:590px){
  .topbar{top:7px;left:7px;right:7px;gap:6px}
  .topstack{flex-direction:row;justify-content:space-between}
  #liveWorkers{display:none}
  .hud-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
     overflow:visible;gap:0;justify-content:stretch;padding:4px 6px;max-width:none}
  .hud-resource{min-width:0;min-height:31px;padding:4px;gap:6px}
  .hud-glyph{width:21px;height:21px}.hud-glyph svg{width:18px;height:18px}
  .hud-meta strong{font-size:14px}
  .hud-resource:nth-child(4){border-left:0}
  .hud-resource:nth-child(n+4){border-top:1px solid #8ea08533!important}
  .hud-detail{top:110px;right:7px;width:min(315px,calc(100% - 14px))}
}

/* V9 — interface joueur distincte des outils de développement */
main{max-width:1460px;padding:12px}
.game-header{padding:0 2px 10px;align-items:center}
.game-header h1{font-size:24px}.game-header .muted{font-size:12px}
.dev-toggle{background:#24382e;color:#c5d0c4;border-color:#526b56;font-size:11px;padding:7px 10px;opacity:.8}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.layout.has-selection{grid-template-columns:minmax(0,1fr) 318px}
.layout .side{display:flex;flex-direction:column;min-width:0}
.layout .side.hidden{display:none!important}
.layout .side .panel{position:relative;background:linear-gradient(150deg,#24382d,#17271f);border:1px solid #687b5b}
.context-close{position:absolute;right:12px;top:12px;border:1px solid #647762;border-radius:7px;padding:2px 9px;background:#1a3026;color:#f5e9d2;font-size:19px;line-height:1.25}
.scene{height:min(72vh,740px);min-height:420px}
.game-topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:center;align-items:center;pointer-events:none}
.game-topbar .hud-resources{pointer-events:auto;width:min(100%,790px);max-width:790px;margin:auto}
.devtools{margin-top:14px;padding:14px;background:#13261edb;border:1px dashed #647a65;border-radius:12px}
.devtools[hidden]{display:none!important}
.dev-intro{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.dev-intro strong{font-family:Georgia,serif;font-size:19px;color:#e0cf9f}
.dev-intro span,.dev-stats{color:#afc3b1;font-size:12px}
.dev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dev-grid .panel{padding:12px}
.dev-grid #running{font-size:12px;line-height:1.5;margin-top:8px}
.dev-grid .log{margin-top:8px}
@media(max-width:1000px){.layout.has-selection{grid-template-columns:minmax(0,1fr)}.layout .side{display:flex}.scene{height:min(67vw,650px);min-height:330px}.dev-grid{grid-template-columns:1fr}}
@media(max-width:590px){main{padding:7px}.game-header h1{font-size:19px}.game-header .muted{font-size:11px}.scene{height:65vh;min-height:360px;max-height:650px}.game-topbar{top:6px;left:6px;right:6px}.game-topbar .hud-resources{width:100%}.context-close{top:9px;right:9px}.dev-toggle{font-size:10px}}
.worker-breakdown{margin-top:10px;padding:9px 10px;background:#304536;border:1px solid #5e7860;border-radius:8px;color:#f3e8cd;font-size:12px;line-height:1.65}.worker-task-list{font-size:11px;color:#c9d5c3;margin-top:7px}.hud-resource[data-hud="population"] .hud-meta strong{font-size:16px}.hud-resource[data-hud="population"]{min-width:94px}.hud-resource[data-hud="population"].warning .hud-meta strong{color:#eec38c}@media(max-width:590px){.hud-resource[data-hud="population"] .hud-meta strong{font-size:13px}}

/* V11 — file du superviseur : interface de jeu, outils de test isolés */
.supervisor-panel{position:absolute;left:12px;bottom:12px;width:min(342px,calc(100% - 110px));z-index:9;pointer-events:auto;background:linear-gradient(145deg,#203b2deF,#14271ff0);border:1px solid #9c9872a8;border-radius:12px;padding:11px 12px;box-shadow:0 9px 27px #07110caa;backdrop-filter:blur(5px)}
.supervisor-panel[hidden]{display:none!important}
.supervisor-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:13px;color:#f3e5c4;font-weight:700}
.supervisor-heading button{background:none;color:#dbcda9;border:0;padding:0 4px;font-size:17px}
.supervisor-inner[hidden]{display:none!important}
.supervisor-summary{font-size:11px;color:#d0d8ca;margin-top:5px;line-height:1.5}
.supervisor-list{margin-top:8px;display:flex;flex-direction:column;gap:5px;max-height:172px;overflow:auto}
.supervisor-task{display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 7px;border-radius:7px;background:#263e31b8;border:1px solid #66826965}
.supervisor-index{width:21px;flex:none;color:#dbc18e;font-size:12px;font-weight:750;text-align:center}
.supervisor-label{flex:1;min-width:0;color:#f2e9d6;font-size:11px;line-height:1.35}
.supervisor-task-controls{display:flex;align-items:center;gap:3px}
.supervisor-task-controls button{background:#344f3c;color:#f2e4ca;border:1px solid #68806a;border-radius:6px;font-size:12px;padding:4px 7px}
.supervisor-task-controls button:disabled{opacity:.3}
.supervisor-empty{color:#c0cfc0;font-size:11px;padding:5px 0}
.supervisor-tip{color:#c3cbb7;font-size:10px;line-height:1.5;margin-top:8px}
@media(max-width:590px){.supervisor-panel{bottom:56px;left:7px;width:min(312px,calc(100% - 14px));padding:9px 10px}.supervisor-list{max-height:115px}}