/* showdown-move.css */
/* CLASSROOM SHOWDOWN — the teacher moves players (showdown-move.js): the
   banner across the top while a move or swap is on, and the targets lit
   up — team cards (move) or name chips (swap). The banner is fixed to the
   window, outside the zoomed stage, so it is the same size on any screen. */
.sm-bar{
  position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:950;
  display:flex;align-items:center;gap:10px;max-width:min(94vw,980px);padding:12px 14px 12px 22px;border-radius:999px;
  background:linear-gradient(180deg,#2F63D8,#244FB3);color:#fff;border:3px solid #fff;
  box-shadow:0 14px 34px rgba(23,24,78,.38);font-size:18px;font-weight:800;line-height:1.25;
  animation:sm-in .18s cubic-bezier(.2,.9,.3,1.2);
}
.sm-bar-swap{background:linear-gradient(180deg,#8E44AD,#6C3483)}
.sm-bar-what{font-family:var(--display);font-size:21px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.sm-bar-how{opacity:.92}
.sm-bar-cancel{
  margin-left:6px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:#244FB3;font-family:var(--display);font-size:17px;font-weight:700;
}
.sm-bar-swap .sm-bar-cancel{color:#6C3483}
.sm-bar-cancel:hover{filter:brightness(.95)}
/* The targets. A move lights every team card; a swap lights every chip. */
body.sm-moving [data-team-id]{outline:4px dashed #FFD66B;outline-offset:3px;cursor:pointer;transition:transform .12s}
body.sm-moving [data-team-id]:hover{transform:scale(1.02);outline-style:solid}
body.sm-swapping [data-player-id]{outline:3px dashed #D7A6F0;outline-offset:2px;cursor:pointer}
body.sm-swapping [data-player-id]:hover{outline-style:solid;background:#F6EBFF}
/* While a mode is on, the chips' own "remove" hover is quiet. */
body.sm-moving .sk-tap:hover,body.sm-swapping .sk-tap:hover{box-shadow:none;filter:none}
/* The card's move / swap buttons (showdown-kick.js) */
.sk-alt{display:flex;gap:8px;margin-top:10px}
.sk-move,.sk-swap{
  flex:1;padding:9px 10px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--display);font-size:16px;font-weight:700;line-height:1.1;
}
.sk-move{background:#EAF0FF;color:#244FB3}
.sk-swap{background:#F6EBFF;color:#6C3483}
.sk-move:hover,.sk-swap:hover{filter:brightness(.96)}
.sk-team{margin-top:3px;font-size:13.5px;font-weight:800;color:#5F6B8A}
@keyframes sm-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.sm-bar{animation:none}body.sm-moving [data-team-id]{transition:none}}