.screen--instruction {
  flex-direction:  column;
  justify-content: space-between;
  padding:         var(--sp-6);
  gap:             var(--sp-4);
}

.instruction__topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.instruction__round {
  font-size: var(--fs-sm);
  color:     var(--c-text-muted);
}

.instruction__skips {
  font-size:     var(--fs-sm);
  color:         var(--c-text-muted);
  background:    var(--c-bg-elevated);
  padding:       var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
}

.instruction__hero {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-3);
  text-align:     center;
}

.instruction__next-label {
  font-size:      var(--fs-xs);
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.instruction__game-icon {
  font-size:  72px;
  line-height: 1;
  animation:  icon-bounce 1s ease-in-out infinite alternate;
}

@keyframes icon-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.instruction__game-name {
  font-size:   var(--fs-2xl);
  font-weight: var(--fw-bold);
}

.instruction__game-desc {
  font-size:   var(--fs-base);
  color:       var(--c-text-muted);
  max-width:   280px;
  line-height: 1.5;
}

.instruction__players { display: flex; flex-direction: column; gap: var(--sp-2); }

.instruction__players-label {
  font-size:      var(--fs-xs);
  color:          var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom:  var(--sp-1);
}

.instruction__player {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-2) var(--sp-4);
  background:    var(--c-bg-elevated);
  border-radius: var(--r-md);
  transition:    background var(--t-fast);
}

.instruction__player[data-vote="ready"] { background: rgba(76,175,80,0.12); }
.instruction__player[data-vote="skip"]  { background: rgba(230,57,70,0.10); }

.instruction__player__name   { flex: 1; font-size: var(--fs-sm); }
.instruction__player__vote   { font-size: var(--fs-base); min-width: 24px; text-align: center; }
.instruction__player__status { font-size: var(--fs-xs); color: var(--c-text-muted); min-width: 48px; text-align: right; }

.instruction__footer { display: flex; flex-direction: column; gap: var(--sp-3); }

.instruction__footer-row        { display: flex; gap: var(--sp-3); }
.instruction__footer-row .btn   { flex: 1; }

.btn--skip {
  background: var(--c-bg-elevated);
  color:      var(--c-text-muted);
  border:     2px solid rgba(255,255,255,0.1);
}
.btn--skip:hover:not(:disabled) { border-color: var(--c-accent); color: var(--c-accent); }

.instruction__auto-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: var(--r-full); overflow: hidden; }
.instruction__auto-bar__fill { height: 100%; background: var(--c-primary); width: 0%; transition: width 1s linear; }