:root {
  --enc-gold: #d8bb72;
  --enc-panel: rgba(25, 20, 31, .97);
  --enc-line: rgba(109, 88, 130, .62);
}
body.encounter-builder-page main { max-width: 1540px; }
.encounter-hero { display:grid; gap:1rem; }
.encounter-toolbar { display:grid; grid-template-columns:minmax(260px,1fr) repeat(2,minmax(160px,.45fr)); gap:.75rem; align-items:end; }
.encounter-layout { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(280px,360px); gap:1rem; align-items:start; }
.encounter-column { display:grid; gap:1rem; align-content:start; }
.encounter-column.sticky { position:sticky; top:6rem; max-height:calc(100vh - 7rem); overflow:auto; padding-right:.15rem; }
.panel-head { display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; margin-bottom:.8rem; }
.panel-head h2,.panel-head h3 { margin:0 0 .2rem; }
.panel-head p { margin:0; }
.monster-filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.monster-filter-grid .wide { grid-column:1/-1; }
.monster-results,.saved-encounters,.draft-combatants { display:grid; gap:.6rem; }
.monster-card,.saved-card,.combatant-card { border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:.75rem; background:rgba(0,0,0,.16); }
.monster-card-head,.saved-card-head,.combatant-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.65rem; }
.monster-card h3,.saved-card h3,.combatant-card h3 { margin:0; font-size:1rem; }
.monster-meta { display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0; }
.monster-actions,.saved-actions,.combatant-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.monster-actions button,.saved-actions button,.combatant-actions button { width:auto; margin:0; padding:.42rem .62rem; }
.draft-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.draft-grid .wide { grid-column:1/-1; }
.combatant-edit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(115px,1fr)); gap:.5rem; margin-top:.65rem; }
.combatant-edit-grid .wide { grid-column:1/-1; }
.combatant-edit-grid label { font-size:.78rem; }
.encounter-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.metric { border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.65rem; text-align:center; background:rgba(255,255,255,.025); }
.metric span { display:block; color:var(--muted); font-size:.75rem; }
.metric strong { display:block; font-size:1.15rem; margin-top:.15rem; }
.pressure-track { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.3rem; margin-top:.55rem; }
.pressure-track button { margin:0; padding:.4rem .2rem; font-size:.76rem; }
.pressure-track button.active { border-color:var(--enc-gold); color:var(--enc-gold); box-shadow:0 0 0 1px rgba(216,187,114,.2); }
.detail-drawer { position:fixed; inset:0 0 0 auto; width:min(560px,100%); transform:translateX(105%); transition:transform .2s ease; z-index:2200; background:#18131d; border-left:1px solid var(--enc-line); box-shadow:-20px 0 60px rgba(0,0,0,.55); overflow:auto; padding:1rem; }
.detail-drawer.open { transform:none; }
.detail-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.64); z-index:2190; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.detail-backdrop.open { opacity:1; pointer-events:auto; }
.stat-line { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:.7rem 0; }
.stat-line > div { border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:.5rem; text-align:center; }
.ability-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.35rem; margin:.7rem 0; }
.ability-grid div { border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:.4rem; text-align:center; font-size:.8rem; }
.monster-section { margin-top:1rem; }
.monster-section h3 { color:var(--enc-gold); border-bottom:1px solid rgba(216,187,114,.25); padding-bottom:.3rem; }
.monster-entry { margin:.55rem 0; line-height:1.45; }
.empty-card { border:1px dashed rgba(255,255,255,.14); border-radius:12px; padding:.85rem; color:var(--muted); }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.65rem; }
.pagination button { width:auto; margin:0; }
.message.good { color:#8ff0c2; }
.message.bad { color:#ff9c9c; }
@media(max-width:1250px){
  .encounter-layout { grid-template-columns:minmax(300px,380px) minmax(0,1fr); }
  .encounter-column.saved { grid-column:1/-1; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .encounter-column.sticky { position:static; max-height:none; overflow:visible; }
}
@media(max-width:820px){
  .encounter-toolbar,.encounter-layout,.draft-grid,.combatant-edit-grid,.encounter-summary { grid-template-columns:1fr; }
  .monster-filter-grid { grid-template-columns:1fr; }
  .monster-filter-grid .wide,.draft-grid .wide,.combatant-edit-grid .wide { grid-column:auto; }
  .pressure-track { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ability-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .encounter-column.saved { grid-template-columns:1fr; }
}