/* color sequence recall */
#stage{min-height:240px}
.color-stage{max-width:460px;margin:0 auto;text-align:center}
.color-label{font-weight:800;font-size:.9rem;margin:0 0 .55rem;color:var(--play-ink,#101820);min-height:1.2em}
.swatch-row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;padding:.4rem}
.swatch-row.watching{pointer-events:none;opacity:.95}
.swatch{
  position:relative;width:72px;height:88px;border:2px solid #fff;
  background:var(--sw,#888)!important;cursor:pointer;overflow:hidden;padding:0;
  box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .12s,box-shadow .12s,filter .12s;
}
.swatch:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.swatch .sw-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,#fff8,#fff0 70%);opacity:0;transition:opacity .12s}
.swatch.on{filter:brightness(1.25);transform:scale(1.06);box-shadow:0 0 0 3px #fff,0 6px 16px rgba(0,0,0,.25)}
.swatch.on .sw-glow{opacity:1}
.sw-name{position:absolute;left:0;right:0;bottom:6px;font-size:.68rem;font-weight:800;color:#fff;
  text-shadow:0 1px 2px #000a}
@media (max-width:420px){.swatch{width:58px;height:74px}}