/* Slots. Layout, toggles and charts come from battleship.css. */


.sl-machines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .sl-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sl-machine {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.sl-machine.last { border-color: var(--ink); }
.sl-name { display: flex; justify-content: space-between; align-items: baseline; }
.sl-name b { font-size: 26px; line-height: 1; }
.sl-name span { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }

.sl-best { font-size: 12px; color: var(--ink-dim); }
.sl-best .track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: 3px; }
.sl-best .fill { height: 100%; border-radius: 4px; background: var(--s-likelihood); transition: width .35s ease; }
.sl-best b { color: var(--ink); font-family: var(--mono); }

.sl-curve svg { display: block; width: 100%; height: auto; }
.sl-curve .area { fill: rgba(217, 89, 38, .22); }
.sl-curve .line { fill: none; stroke: var(--s-posterior); stroke-width: 2; stroke-linejoin: round; }
.sl-curve .base { stroke: rgba(255, 255, 255, .15); stroke-width: 1; }
.sl-curve .truth { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }
.sl-stat { font-size: 12px; color: var(--ink-dim); min-height: 2.6em; line-height: 1.3; }
.sl-stat b { color: var(--ink); font-family: var(--mono); }

.sl-pull { width: 100%; padding: 12px 8px; font-size: 16px; }
.sl-flash { font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: center; min-height: 1.3em; }
.sl-flash.win { color: var(--posterior); }
.sl-flash.loss { color: var(--ink-dim); }

.sl-small { font-size: 13px; margin: 6px 0 10px; line-height: 1.45; }
.sl-cpu { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 12px; align-items: center; font-size: 14px; }
.sl-cpu .h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); font-weight: 700; }
.sl-cpu .mono { text-align: right; }
.sl-cpu .bar { height: 8px; border-radius: 4px; background: var(--ink-dim); min-width: 2px; }
.sl-cpu .picked { color: var(--gold); font-weight: 700; }