.hang-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}
.hang-header h1{margin:0;font-family:"Lora","Times New Roman",serif;font-size:2.1rem}
.hang-header p{margin:4px 0 0;color:#62566a;max-width:360px}

.scoreboard{display:flex;gap:12px}
.score-box{background:#f0e6d8;border-radius:16px;padding:12px 18px;min-width:88px;text-align:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.12)}
.score-box .label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#85778c}
.score-box span:last-child{display:block;font-size:1.4rem;font-weight:700;color:#2f2a30}

.hangman{display:flex;justify-content:center;margin:12px 0 24px}
.hangman svg{width:240px;height:auto;stroke:#7a2d27;stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hangman .part{opacity:0;transition:opacity .3s ease}
.hangman .part.visible{opacity:1}

.word{display:flex;gap:10px;justify-content:center;font-family:"Lato","Open Sans",sans-serif;font-size:2.4rem;color:#2f2a30;margin-bottom:24px;letter-spacing:.12em;text-transform:uppercase}
.word span{display:inline-block;min-width:32px;border-bottom:3px solid #d7cadf;text-align:center}
.word span.revealed{color:#7a2d27}

.alphabet{display:grid;grid-template-columns:repeat(9,minmax(30px,1fr));gap:8px;max-width:480px;margin:0 auto}
.alphabet button{padding:10px 0;border-radius:10px;border:2px solid #d6cada;background:#fff;color:#3a2d45;font-family:"Lato","Open Sans",sans-serif;font-weight:600;text-transform:uppercase;cursor:pointer;transition:transform .1s ease,background .2s ease,border-color .2s ease}
.alphabet button:hover{transform:translateY(-1px)}
.alphabet button.correct{background:#7a2d27;color:#fff;border-color:#7a2d27}
.alphabet button.wrong{background:#cfc4d6;color:#635770;border-color:#cfc4d6}
.alphabet button:disabled{opacity:.7;cursor:not-allowed}

@media (max-width:680px){
  .alphabet{grid-template-columns:repeat(7,minmax(30px,1fr))}
  .word{font-size:2rem}
}