/* ═══ BIOFORGE — le laboratoire ═══ */

#screen-lab{background:#070c0f}

.lab-top{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(180deg,#0e181d,#0a1216);
  border-bottom:1px solid var(--line);flex:none;
}
.name-in{
  background:var(--pan2);border:1px solid var(--line);border-radius:var(--r2);
  padding:7px 10px;color:var(--txt);font-weight:700;letter-spacing:1px;
  font-size:13px;width:170px;outline:none;
}
.name-in:focus{border-color:var(--green)}
.lab-gen{
  font-size:10px;letter-spacing:1.5px;color:var(--gold);
  border:1px solid #4a3a13;background:#1a1406;padding:5px 9px;border-radius:99px;
}

.layer-switch{display:flex;gap:2px;background:var(--pan2);padding:3px;border-radius:10px;border:1px solid var(--line)}
.layer-switch button{
  padding:6px 12px;border-radius:7px;font-size:10.5px;font-weight:800;
  letter-spacing:1.2px;color:var(--dim);transition:.14s;
}
.layer-switch button:hover{color:var(--txt);background:var(--line)}
.layer-switch button.on{background:var(--lc,var(--green));color:#04140a}
.layer-switch button[data-layer=peau]{--lc:var(--skin)}
.layer-switch button[data-layer=muscles]{--lc:var(--muscle)}
.layer-switch button[data-layer=squelette]{--lc:var(--bone)}
.layer-switch button[data-layer=nerfs]{--lc:var(--nerve)}
.layer-switch button[data-layer=organes]{--lc:var(--organ)}

.lab-body{flex:1;display:flex;min-height:0}

/* ─── colonnes ─── */
.lab-left,.lab-right{
  width:236px;flex:none;background:var(--pan);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:auto;
}
.lab-right{border-right:0;border-left:1px solid var(--line);width:262px}
.lab-center{flex:1;position:relative;min-width:0;background:#05090b}
#labView{position:absolute;inset:0}
#labView canvas{display:block}

/* ─── liste des pièces ─── */
.part-list{display:flex;flex-direction:column;gap:3px;padding:0 8px 10px}
.pitem{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r2);
  background:var(--pan2);border:1px solid transparent;font-size:12px;transition:.12s;
  cursor:pointer;text-align:left;width:100%;
}
.pitem:hover{background:var(--line);border-color:var(--line2)}
.pitem.sel{border-color:var(--cyan);background:#0d2830}
.pitem .pico{font-size:15px;flex:none;width:18px;text-align:center}
.pitem .pname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .pdot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line2)}
.pitem .pdot.nerve{background:var(--nerve);box-shadow:0 0 8px var(--nerve)}
.pitem .px{opacity:0;color:var(--red);font-size:13px;flex:none;padding:0 2px}
.pitem:hover .px{opacity:1}
.pitem .pmir{font-size:10px;color:var(--dim2);flex:none}

.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 8px 10px}
.tbtn{
  aspect-ratio:1;border-radius:var(--r2);background:var(--pan2);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:15px;transition:.12s;position:relative;
}
.tbtn small{font-size:7.5px;letter-spacing:.3px;color:var(--dim2);text-transform:uppercase}
.tbtn:hover{background:var(--line2);border-color:var(--green);transform:translateY(-1px)}
.tbtn:hover small{color:var(--txt)}
.tbtn.locked{opacity:.35;cursor:not-allowed}
.tbtn.locked:hover{transform:none;border-color:var(--line)}

.left-foot{margin-top:auto;padding:10px 8px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line)}

/* ─── stats ─── */
.stats{padding:0 12px 8px;display:flex;flex-direction:column;gap:7px}
.srow{display:grid;grid-template-columns:15px 1fr 30px;gap:7px;align-items:center;font-size:11px}
.srow .sn{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .sv{font-family:var(--mono);font-size:11px;text-align:right;color:var(--txt)}
.srow .sb{grid-column:2/4;height:5px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:-3px}
.srow .sb i{display:block;height:100%;border-radius:3px;transition:width .45s cubic-bezier(.2,.9,.3,1)}

.phys{
  padding:8px 12px 12px;font-size:11px;color:var(--dim);line-height:1.75;
  border-top:1px solid var(--line);margin:4px 8px 0;
}
.phys b{color:var(--txt);font-family:var(--mono)}
.phys .warn{color:var(--gold)}
.phys .bad{color:var(--red)}
.phys .good{color:var(--green)}

.behav{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 12px 10px}
.bbtn{
  padding:7px 3px;border-radius:6px;background:var(--pan2);border:1px solid var(--line);
  font-size:9.5px;letter-spacing:.4px;font-weight:700;color:var(--dim);transition:.12s;
}
.bbtn:hover{border-color:var(--line2);color:var(--txt)}
.bbtn.on{background:var(--violet);border-color:var(--violet);color:#12061f}

/* ─── édition d'une pièce ─── */
.part-edit{padding:0 12px 14px;display:flex;flex-direction:column;gap:8px}
.pe-row{display:flex;flex-direction:column;gap:3px}
.pe-row label{font-size:10px;letter-spacing:1px;color:var(--dim2);display:flex;justify-content:space-between}
.pe-row label b{color:var(--txt);font-family:var(--mono);font-weight:500}
.pe-btns{display:flex;gap:5px;flex-wrap:wrap}
.pe-btns .sbtn{flex:1;padding:6px 4px;font-size:10.5px;min-width:60px}

/* ─── contrôles de vue ─── */
.view-ctl{
  position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:5px;z-index:5;
}
.view-ctl button{
  width:30px;height:30px;border-radius:7px;background:rgba(13,21,25,.82);
  border:1px solid var(--line);color:var(--dim);font-size:13px;
  display:grid;place-items:center;backdrop-filter:blur(4px);
}
.view-ctl button:hover{color:var(--txt);border-color:var(--line2)}
.view-ctl button.on{color:var(--green);border-color:#2a6b42}

.lab-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:rgba(13,21,25,.86);border:1px solid var(--line);border-radius:99px;
  padding:7px 16px;font-size:11.5px;color:var(--dim);backdrop-filter:blur(4px);
  max-width:80%;text-align:center;pointer-events:none;z-index:5;
}
.lab-hint b{color:var(--green)}

/* ─── outils de couche (muscles / nerfs / organes) ─── */
.layer-tools{
  position:absolute;left:12px;bottom:12px;z-index:5;display:flex;flex-direction:column;gap:6px;
  background:rgba(13,21,25,.9);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;backdrop-filter:blur(6px);max-width:290px;
}
.layer-tools:empty{display:none}
.lt-head{font-size:10px;letter-spacing:1.6px;color:var(--dim2);font-weight:700}
.lt-txt{font-size:11px;color:var(--dim);line-height:1.6;max-width:265px}
.lt-txt b{color:var(--txt)}
.lt-btns{display:flex;gap:5px;flex-wrap:wrap}
.lt-btns .sbtn{padding:6px 9px;font-size:10.5px}
.organ-tray{display:flex;gap:5px;flex-wrap:wrap;max-width:265px}
.otag{
  display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:99px;
  background:var(--pan2);border:1px solid var(--line);font-size:10.5px;transition:.12s;
}
.otag:hover{border-color:var(--organ);color:#fff}
.otag.has{border-color:var(--organ);background:#2a1220;color:#ffc6de}
.otag.locked{opacity:.32;cursor:not-allowed}

.mini-bar{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--dim)}
.mini-bar .bar{flex:1;min-width:80px}

@media (max-width:1180px){
  .lab-left{width:198px}.lab-right{width:216px}
  .type-grid{grid-template-columns:repeat(4,1fr)}
  .layer-switch button{padding:6px 9px;font-size:10px;letter-spacing:.8px}
}
@media (max-width:960px){
  .lab-left{width:158px}.lab-right{width:176px}
  .type-grid{grid-template-columns:repeat(3,1fr)}
  .tbtn{font-size:13px}
  .tbtn small{font-size:6.5px}
  .lab-top{flex-wrap:wrap;gap:7px}
  .name-in{width:130px}
  .layer-switch{order:9;width:100%;justify-content:space-between}
  .layer-switch button{flex:1;padding:6px 2px;font-size:9.5px;letter-spacing:.4px}
  .layer-tools{max-width:220px}
}
/* écran vraiment étroit : on empile, mais la créature reste en haut */
@media (max-width:720px){
  .lab-body{flex-direction:column;overflow:auto}
  .lab-left,.lab-right{width:100%;border:0;border-top:1px solid var(--line);max-height:none}
  .lab-center{height:46vh;min-height:240px;flex:none;order:-1}
  .type-grid{grid-template-columns:repeat(6,1fr)}
  .tbtn{aspect-ratio:auto;height:46px}
  /* les outils restent posés en bas de la vue, sans manger la créature */
  .layer-tools{
    left:8px;right:8px;bottom:8px;max-width:none;padding:8px 10px;
    max-height:44%;overflow:auto;
  }
  .lt-txt,.organ-tray{max-width:none}
  .lab-hint{display:none}
  .part-list{max-height:150px;overflow:auto}
}