/*
 * common.css
 * Shared teaching UI styles used by lesson pages and debug-render.
 * lesson.css already covers: .player-btn, .btn-step, .move-chip, cornerPing, .step-marker (base).
 * This file covers the classes lesson.css does not have.
 */

/* ── Step markers ── */
/* Base is also in lesson.css — included here so pages that don't link lesson.css still work. */
.step-marker {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: 2.5px solid #fff;
  animation: cornerPing 1.1s ease-in-out infinite;
  pointer-events: none; transform: translate(-50%,-50%);
}
@keyframes cornerPing {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1);   opacity: 0; }
}

/* ── Step marker colour variants ── */
.step-marker.partner {
  border-color: var(--blue);
  background: rgba(21,101,192,.24);
}
.step-marker.redpartner {
  border-color: var(--red);
  background: rgba(224,32,32,.24);
}
.step-marker.orangepartner {
  border-color: var(--orange);
  background: rgba(255,107,0,.24);
}
.step-marker.greenpartner {
  border-color: var(--green);
  background: rgba(46,125,50,.24);
}
.step-marker.bluepartner {
  border-color: var(--blue);
  background: rgba(21,101,192,.24);
}

/* ── Step visual layout ── */
.step-visual-wrap  { display: flex; justify-content: center; width: 100%; margin-top: 14px; }
.step-visual-stage { position: relative; width: 160px; height: 160px; }
.step-visual-cube  { width: 160px; height: 160px; }
.step-visual-label {
  width: 100%; text-align: center;
  font-size: .82rem; color: rgba(255,255,255,.52);
  font-weight: 800; margin-top: 8px; letter-spacing: .01em;
}

/* ── Step sequence rows ── */
.step-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: background .15s, opacity .15s; }
.step-row:hover      { background: rgba(255,255,255,.06); }
.step-row.chip-active { background: rgba(100,180,255,.12); box-shadow: inset 0 0 0 1px rgba(100,180,255,.25); }
.step-row.chip-done  { opacity: .4; }

.step-move-badge {
  font-family: 'Baloo 2', cursive; font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--blue), #42a5f5);
  color: #fff; padding: 4px 10px; border-radius: 8px;
  min-width: 36px; text-align: center; flex-shrink: 0; margin-top: 3px;
}
.step-label  { font-weight: 800; font-size: .95rem; color: rgba(255,255,255,.9); display: block; }
.step-helper { font-size: .82rem; color: rgba(255,255,255,.45); display: block; margin-top: 2px; }

/* ── Small icon player buttons (circle, 40×40) ── */
.btn-demo  {
  background: #1a3a5c; color: #7ab8f5; border: 1px solid #2a5a8c;
  width: 40px; height: 40px; padding: 0; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.btn-reset {
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.12);
  width: 40px; height: 40px; padding: 0; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.btn-loop-icon {
  background: rgba(255,215,0,.1); color: var(--yellow); border: 1px solid rgba(255,215,0,.3);
  width: 40px; height: 40px; padding: 0; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}