/* Sala de Treino do Admin and the monster editor (web/js/sala.js, web/js/mobedit.js): only the client's pieces of
   docs/DESIGN.md (pf-panel, pf-tabs, pf-chips, pf-table, an-kv, admin-rule) and its colours. The rule tiles are Admin's
   (css/bestiary/admin.css), repeated here for the game's page, which does not load Admin's sheet. */
dialog.window.sl-win{width:min(720px,calc(100vw - 16px))}
.sl-win .wb{display:grid;gap:6px;min-width:0}
.sl-win .pf-panel{margin:0;min-width:0}
.sl-tabs{display:flex;flex-wrap:wrap}.sl-tabs button{flex:1 1 auto;min-height:32px}
.sl-why{color:#ff8b7e}
.sl-acts{display:flex;flex-wrap:wrap;gap:3px;padding:6px}.sl-acts button{flex:1 1 auto;min-height:32px}
.sl-acts button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.sl-sticky{position:sticky;bottom:0;z-index:1;background:#3d3d3d;border-top:1px solid #111}
.sl-ver{padding:0 6px 6px}.sl-ver button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.sl-kpis{grid-template-columns:repeat(2,minmax(0,1fr) auto)}
.sl-kpis b.bad{color:#e8584c}
.sl-src,.sl-cmp,.sl-fights{width:100%;font-size:11px}
.sl-src td,.sl-src th,.sl-cmp td,.sl-cmp th,.sl-fights td,.sl-fights th{padding:2px 4px;text-align:left}
.sl-fights{display:block;overflow-x:auto}
.sl-fights tr.active td{color:#fff;box-shadow:inset 0 1px #c5b47c,inset 0 -1px #c5b47c}
.sl-cmp td.gold,.sl-vs b.gold{color:#e8c547}
.sl-vs{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 10px;padding:6px;font-size:11px;color:#c0c0c0}
.sl-log{display:grid;gap:1px;max-height:40vh;overflow-y:auto;padding:4px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.sl-line{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px;font-size:11px;color:#c0c0c0}
.sl-line.in b{color:#ff3333}.sl-line.out b{color:#5fc85f}
.sl-line span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-sub{margin:6px 6px 2px;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#e4ca78}
.sl-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px;padding:0 6px}
.sl-slot{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 4px;padding:3px 6px;font-size:11px;color:#c0c0c0;
  background:#262626;border:1px solid #111;cursor:pointer}
.sl-slot b{grid-column:1;color:#fff;font-weight:normal;overflow-wrap:anywhere}
.sl-slot button{grid-column:2;grid-row:1/3;min-width:24px;padding:0 4px}
.sl-slot.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.sl-gm>input[type=search]{display:block;width:calc(100% - 12px);margin:6px;min-height:30px}
.sl-found{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px;padding:0 6px;max-height:26vh;overflow-y:auto}
.sl-found button{min-height:30px;white-space:normal;text-align:left}
.sl-ic{width:32px;height:32px;image-rendering:pixelated}
/* the editor */
.me-edit{display:grid;gap:6px;min-width:0}
.me-sec{margin:0}.me-sec>summary{cursor:pointer;list-style:none}.me-sec>summary::-webkit-details-marker{display:none}
.me-sec>summary::before{content:'▸ ';color:#e4ca78}.me-sec[open]>summary::before{content:'▾ '}
.me-body{display:grid;gap:4px;padding-bottom:6px}
.me-row{margin:0 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.me-row>summary{padding:6px;font-size:11px;color:#c0c0c0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-row.is-changed{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}.me-row.is-changed>summary{color:#e8c547}
.me-acts{display:flex;gap:3px;padding:0 6px 6px}.me-acts button{flex:1 1 auto;min-height:30px}
.me-add{margin:0 6px;min-height:32px}
.me-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px;padding:6px}
.me-check{display:flex;align-items:center;gap:6px;padding:4px 6px;font-size:11px;color:#c0c0c0;background:#262626;border:1px solid #111}
.me-voices{display:block;width:calc(100% - 12px);margin:6px;resize:vertical}
.me-grid input,.me-grid select{width:100%;min-width:0;min-height:28px}
.me-grid .pv-adm-row{position:relative}
/* Admin's rule tiles (css/bestiary/admin.css) for the game's page */
.sl-win .admin-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;padding:6px}
.sl-win .admin-rule{display:grid;align-content:start;gap:2px;padding:4px 6px;font-size:11px;color:#c0c0c0;background:#262626;border:1px solid #111;
  box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.sl-win .admin-rule.is-changed{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.sl-win .admin-rule.is-changed>span:first-child{color:#e8c547}
.sl-win .admin-rule small{color:#a9a9a9;font-size:10px}
.pv-adm-rows{display:grid;gap:4px;padding:0 6px}
.me-edit .pv-adm-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px;padding:4px;background:#2b2b2b;border:1px solid #111}
.me-edit .pv-adm-row>button{align-self:end;min-height:28px}
@media (max-width:420px){.sl-win .admin-rules,.me-checks,.sl-slots,.sl-found{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-kpis{grid-template-columns:minmax(0,1fr) auto}}