/* Hangman — game-specific (rides on playful.css) */
body.playful { overflow-y:auto; }
.diff-seg { display:flex; gap:8px; }
.diff-seg button { flex:1; }

.game-shell { max-width:480px; }

.hm-stage { display:flex; justify-content:center; margin:6px 0 14px; }
.gallows { width:200px; height:225px; }
.gallows .part { opacity:0; transition:opacity 0.35s var(--bounce); }
.gallows .part.show { opacity:1; }

.word-row {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; min-height:54px;
}
.slot {
  width:34px; height:46px; display:flex; align-items:flex-end; justify-content:center;
  font-size:30px; font-weight:700; font-family:'Astalamet', serif;
  border-bottom:5px solid var(--stroke); color:var(--text);
}
.slot.filled { animation:popIn 0.3s var(--bounce) both; }

.keyboard {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; max-width:420px; margin:0 auto;
}
.key {
  font:inherit; font-size:18px; font-weight:700; color:var(--stroke); cursor:pointer;
  aspect-ratio:1; border:3px solid var(--stroke); border-radius:12px;
  background:var(--card); box-shadow:0 3px 0 var(--stroke);
  transition:transform 0.1s, box-shadow 0.1s, background 0.2s, color 0.2s;
  text-transform:uppercase;
}
.key:active { transform:translateY(3px); box-shadow:0 0 0 var(--stroke); }
.key.good { background:var(--green); pointer-events:none; }
.key.bad  { background:var(--stroke); color:#fff; pointer-events:none; opacity:0.55; }

@media (max-width:430px){ .keyboard{ grid-template-columns:repeat(6,1fr); } .key{ font-size:16px; } }