/* Formas de magia (docs/FORMAS.md, docs/DESIGN.md): Perfil › Magia with the forms of the active spell, the Tibia
   spell icons, what each form gains (green) and loses (red), and the comparison in the Treino. Only the colours of the
   Bestiary Arena skin. */
.sf-pad{padding:6px}
.sf-icon{flex:none}
.sf-chip{display:inline-flex;align-items:center;gap:3px;color:#e4ca78;white-space:nowrap}
.sf-frags{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.sf-spell{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;padding:6px}
.sf-spell b{color:#fff;font-weight:normal}.sf-spell small{display:block;color:#a9a9a9;line-height:13px}
.sf-forms{display:grid;gap:4px;padding:6px}
.sf-form{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:2px 8px;align-items:center;width:100%;min-width:0;text-align:left;white-space:normal;line-height:13px;padding:5px 6px;
 border:1px solid #111;background:#1c1c1c;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#c0c0c0}
.sf-form>.sf-icon{grid-row:span 2}
.sf-form b{color:#fff;font-weight:normal;overflow-wrap:anywhere}.sf-form em{font-style:normal;color:#a9a9a9;text-align:right;white-space:nowrap}
.sf-form.is-sel{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}.sf-form.is-sel b,.sf-form.is-sel em{color:#e8c547}
.sf-form.is-locked{opacity:.65}
.sf-delta,.sf-req,.sf-list{display:flex;flex-wrap:wrap;gap:2px 8px}
.sf-delta,.sf-req{grid-column:2/-1}
.sf-good{color:#5fc85f}.sf-bad{color:#e8756c}
.sf-req span{color:#e8756c;display:inline-flex;align-items:center;gap:3px}.sf-req span.ok{color:#5fc85f}
.sf-bars{display:grid;gap:5px;margin-bottom:6px}
.sf-bars>div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:6px;align-items:center;color:#c0c0c0}
.sf-bars>div>span:nth-child(2){display:grid;gap:2px}
.sf-bars i{display:block;height:6px;background:#e8c547;border:1px solid #000}
.sf-bars i.is-group{background:#5fc85f}
.sf-bars>div>span:last-child{color:#fff;white-space:nowrap}
#sf-outcome .ba-outcome{position:fixed}
#sf-outcome .ba-outcome-window{width:min(340px,100%)}
#sf-outcome .ba-outcome-banner{text-align:center}
#sf-outcome .ba-outcome-banner strong{font-size:16px;line-height:18px}
#sf-outcome .ba-outcome-actions{flex-wrap:wrap}
#sf-outcome .ba-outcome-actions button{flex:1 1 auto;min-width:0;white-space:normal}
/* Profile tabs: six (Magia last), three and three on a phone. */
#detail .profile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:520px){
 #detail .profile-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 #detail .profile-nav button:nth-child(n){grid-column:auto}
}
#sf-tab .pf-head{display:flex;align-items:center;gap:6px}
#sf-tab .pf-head small{margin-left:auto;display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap}
/* 2.82: the active spell's effect over its icon; each change of a form as a chip (green better, red worse). */
.sf-spell-ic{position:relative;display:inline-grid;flex:none}
.sf-spell-ic .sf-fx{position:absolute;inset:0;width:38px;height:38px;pointer-events:none;image-rendering:pixelated}
.sf-delta{display:flex;flex-wrap:wrap;gap:2px}
.sf-delta>span{padding:0 4px;line-height:16px;background:#262626;border:1px solid #111}
/* 2.85.0: "Ver as formas em ação": the same fight with every form, side by side; fits a phone without scrolling. */
.sf-watch{width:min(440px,calc(100vw - 16px));max-height:calc(100dvh - 16px)}
#sf-watch-body{display:grid;gap:6px;padding:6px}
.sf-wnote{margin:0;color:#a9a9a9}
.sf-wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.sf-wcard{display:grid;gap:2px;align-content:start;min-height:0;padding:3px;text-align:left;white-space:normal;line-height:12px}
.sf-wcard canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;image-rendering:pixelated;background:#111}
.sf-wcard.is-sel{box-shadow:inset 0 0 0 2px #e8c547}
.sf-wname{display:flex;align-items:center;gap:3px;min-width:0}.sf-wname b{color:#fff;font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-wstate{color:#a9a9a9}.sf-wstate.is-on{color:#5fc85f}.sf-wstate.is-lock{color:#ff8b7e}
.sf-wdelta{display:flex;flex-wrap:wrap;gap:0 6px;color:#a9a9a9}
.sf-wacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px}.sf-wacts button{min-height:36px}
/* 2.85.0: the Magia tab on one screen: the forms in a grid of three; what each changes is in its confirmation. */
#sf-tab .sf-forms{grid-template-columns:repeat(3,minmax(0,1fr))}
#sf-tab .sf-form{grid-template-columns:none;justify-items:center;text-align:center;gap:2px;padding:4px 3px}
#sf-tab .sf-form>.sf-icon{grid-row:auto}
#sf-tab .sf-form b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sf-tab .sf-form em{text-align:center;white-space:normal}
#sf-tab .sf-form em.is-on{color:#5fc85f}#sf-tab .sf-form em.is-lock{color:#ff8b7e}
.sf-spell .sf-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-crow{display:flex;align-items:center;gap:6px}.sf-crow .pf-note{flex:1;margin:0}.sf-crow button{flex:none}