.lockout-bar {
    height: 4px;
    background: linear-gradient(90deg, #ff4d4f, #ff7a45);
    border-radius: 0;
    transform-origin: left;
    transform: scaleX(1);
    transition: none;
  }

  @keyframes shrink {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
  }

  @keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-8px); }
    40%     { transform: translateX(8px); }
    60%     { transform: translateX(-5px); }
    80%     { transform: translateX(5px); }
  }
  .shake { animation: shake .5s ease; }

  .attempt-dots span {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #dee2e6;
    margin: 0 2px;
    transition: background .3s;
  }
  .attempt-dots span.used { background: #ff4d4f; }