.cn-rl { text-align:center; }
.cn-rl-title { margin: 0 0 12px; font-weight:600; }
.cn-rl .hud { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:12px; }

.cn-rl .row { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin: 10px 0; }
.cn-rl .tile, .cn-rl .slot {
  width: var(--tile-size); height: var(--tile-size);
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px; user-select:none;
  font-weight: 700; font-size: calc(var(--tile-size)*0.42);
}
.cn-rl .tile { cursor: grab; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.cn-rl .tile:active { cursor: grabbing; transform: scale(.96); }
.cn-rl .slot { border: 2px dashed rgba(0,0,0,.25); background: rgba(0,0,0,.06); }
.cn-rl .slot.filled { border-style: solid; background: rgba(0,0,0,.12); }
.cn-rl.correct .slot { /* color set from control via selectors */ }

.cn-rl .btns { display:flex; gap:10px; justify-content:center; margin-top:10px; }
.cn-rl button { padding:8px 14px; border-radius:10px; border:0; font-weight:600; cursor:pointer; }
.cn-rl .muted { opacity:.75; }

.cn-rl .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.cn-rl .confetti i {
  position: absolute; will-change: transform, opacity;
  width: 8px; height: 14px; border-radius: 2px; opacity: .9;
  animation: fall 1200ms linear forwards;
}
@keyframes fall {
  from { transform: translateY(-30px) rotate(0deg); }
  to   { transform: translateY(100vh) rotate(540deg); opacity:.2; }
}