/* A hero's showcase on its sheet: the stage where it shows its moves on a training dummy, the bar to replay one, and
   a short clip of the reel to save or share. */
.showcase { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.showcase:empty { display: none; }
.sc-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.sc-head h3 { margin: 0; font-size: 20px; }
.sc-cap { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; flex-wrap: wrap; }
.sc-key { background: var(--ink); color: #fff; font-family: var(--display); font-weight: 400; font-size: 13px; line-height: 1; padding: 4px 6px 3px; align-self: center; }
.sc-name { font-family: var(--display); font-size: 16px; line-height: 1.2; }
.sc-desc { font-size: 13.5px; color: var(--graphite); line-height: 1.35; }
.sc-stage { position: relative; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--drop, var(--ink)); background: var(--board); overflow: hidden; }
.sc-stage canvas { display: block; width: 100%; aspect-ratio: 16 / 9; }
.sc-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-bar button { font: 700 13px var(--text); color: var(--ink); min-height: 38px; cursor: pointer; border-radius: 2px; }
.sc-reel { background: var(--ink); color: #fff !important; border: 2.5px solid var(--ink); padding: 0 14px; font-weight: 900 !important; }
.sc-mv { display: inline-flex; align-items: center; gap: 6px; border: 2.5px solid var(--ink); background: var(--board); padding: 3px 10px 3px 3px; max-width: 100%; }
.sc-mv:hover { background: #fffbe0; } .sc-mv:active { transform: translate(1px, 1px); }
.sc-mv:focus-visible, .sc-reel:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sc-mv b { font-family: var(--display); font-weight: 400; font-size: 12px; background: var(--ink); color: #fff; padding: 3px 5px 2px; line-height: 1; }
.sc-mv i { display: grid; place-items: center; width: 26px; height: 26px; background: var(--el); color: var(--gl, #fff); border: 2px solid var(--ink); font-style: normal; }
.sc-mv i .ic { width: 16px; height: 16px; }
.sc-mv i.pic { position: relative; width: 44px; height: 44px; overflow: hidden; } .sc-mv i.pic img { display: block; width: 100%; height: 100%; }   /* the hero doing the move */
.sc-mv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.sc-mv.plain { padding: 3px 12px; }
.sc-clip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sc-note { font-size: 13.5px; color: var(--graphite); }
.sc-out { display: flex; flex-direction: column; gap: 8px; } .sc-out video { width: 100%; border: 3px solid var(--ink); background: #fff; }
@media (max-width: 480px) { .sc-mv:not(.plain) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sc-mv:not(.plain) { padding-right: 3px; } .sc-desc { flex-basis: 100%; } }   /* on a phone the caption names the move */