.screen--playing {
  flex-direction:  column;
  height:          100%;
  overflow:        hidden;
}

/* ─── Top bar ────────────────────────────────────────────────────────────────── */

.playing__topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-3) var(--sp-4);
  background:      var(--c-bg-card);
  border-bottom:   1px solid rgba(255,255,255,0.06);
  flex-shrink:     0;
}

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

/* Timer */
.playing__timer {
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  min-width:   48px;
  text-align:  center;
  transition:  color var(--t-fast);
}
.playing__timer.warn    { color: var(--c-gold); }
.playing__timer.danger  { color: var(--c-accent); animation: timer-pulse 500ms ease-in-out infinite; }

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ─── Game area ──────────────────────────────────────────────────────────────── */

.playing__game {
  flex:       1;
  overflow-y: auto;
  padding:    var(--sp-4);
}

/* ─── Waiting overlay (after submit) ────────────────────────────────────────── */

.playing__waiting {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,0.85);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-4);
  padding:         var(--sp-6);
  z-index:         10;
  animation:       fade-in var(--t-normal);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.playing__waiting__title {
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
}

.playing__waiting__list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  width:          100%;
  max-width:      280px;
}

.waiting-player {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-2) var(--sp-4);
  background:      var(--c-bg-elevated);
  border-radius:   var(--r-md);
  font-size:       var(--fs-sm);
}

.waiting-player__name { font-weight: var(--fw-bold); }
.waiting-player__icon { font-size: var(--fs-base); }

/* ─── HANGMAN ────────────────────────────────────────────────────────────────── */

.hangman {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-6);
  padding-top:    var(--sp-4);
}

/* Wrong guesses counter */
.hangman__lives {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  font-size:       var(--fs-sm);
  color:           var(--c-text-muted);
}

.hangman__hearts {
  display: flex;
  gap:     var(--sp-1);
}

.hangman__heart {
  font-size:  20px;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.hangman__heart.lost {
  filter:    grayscale(1) opacity(0.3);
  transform: scale(0.8);
}

/* Word display */
.hangman__word {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-2);
  flex-wrap:       wrap;
}

.hangman__letter {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          44px;
  border-bottom:   3px solid rgba(255,255,255,0.4);
  font-size:       var(--fs-xl);
  font-weight:     var(--fw-bold);
  text-transform:  uppercase;
  transition:      color var(--t-fast);
}

.hangman__letter.revealed   { color: var(--c-text); border-color: var(--c-primary); }
.hangman__letter.wrong-word { color: var(--c-accent); }

/* Letter grid */
.hangman__keyboard {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   var(--sp-1);
  width:                 100%;
  max-width:             320px;
}

.hangman__key {
  aspect-ratio: 1;
  background:   var(--c-bg-elevated);
  border:       none;
  border-radius: var(--r-sm);
  color:        var(--c-text);
  font-family:  var(--font);
  font-size:    var(--fs-sm);
  font-weight:  var(--fw-bold);
  text-transform: uppercase;
  cursor:       pointer;
  transition:   background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}

.hangman__key:hover:not(:disabled) { background: rgba(255,255,255,0.15); }
.hangman__key:active:not(:disabled) { transform: scale(0.9); }

.hangman__key.correct  { background: rgba(76,175,80,0.3);  color: var(--c-success); }
.hangman__key.wrong    { background: rgba(230,57,70,0.15); color: var(--c-text-dim); opacity: 0.5; }
.hangman__key:disabled { cursor: not-allowed; }

/* ─── TAP BATTLE ─────────────────────────────────────────────────────────────── */

.tap-battle {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  height:         100%;
  gap:            var(--sp-6);
}

.tap-battle__count {
  font-size:   var(--fs-3xl);
  font-weight: var(--fw-bold);
  color:       var(--c-primary);
  animation:   count-pop 100ms ease-out;
}

@keyframes count-pop {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.tap-battle__btn {
  width:           200px;
  height:          200px;
  border-radius:   50%;
  background:      var(--c-primary);
  border:          none;
  cursor:          pointer;
  box-shadow:      0 8px 32px rgba(255,107,53,0.5);
  transition:      transform var(--t-fast), box-shadow var(--t-fast);
  font-size:       64px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.tap-battle__btn:active {
  transform:  scale(0.92);
  box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}

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

/* ─── SHAKE CHALLENGE ────────────────────────────────────────────────────────── */

.shake-challenge {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  height:         100%;
  gap:            var(--sp-6);
}

.shake-challenge__phone {
  font-size:  80px;
  animation:  phone-idle 2s ease-in-out infinite;
}

.shake-challenge__phone.shaking {
  animation: phone-shake 100ms ease-in-out infinite;
}

@keyframes phone-idle {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}

@keyframes phone-shake {
  0%   { transform: rotate(-15deg) translateX(-4px); }
  25%  { transform: rotate(15deg)  translateX(4px); }
  50%  { transform: rotate(-10deg) translateX(-3px); }
  75%  { transform: rotate(10deg)  translateX(3px); }
  100% { transform: rotate(-15deg) translateX(-4px); }
}

.shake-challenge__count {
  font-size:   var(--fs-3xl);
  font-weight: var(--fw-bold);
  color:       var(--c-primary);
}

.shake-challenge__meter {
  width:         240px;
  height:        12px;
  background:    var(--c-bg-elevated);
  border-radius: var(--r-full);
  overflow:      hidden;
}

.shake-challenge__meter__fill {
  height:        100%;
  background:    linear-gradient(to right, var(--c-primary), var(--c-accent));
  border-radius: var(--r-full);
  width:         0%;
  transition:    width 100ms linear;
}

/* ─── Bottom submit bar ──────────────────────────────────────────────────────── */

.playing__submit {
  padding:     var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  background:  var(--c-bg-card);
  border-top:  1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}