.wordling-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}
.wordling-header h1{margin:0;font-family:"Lora","Times New Roman",serif;font-size:2.1rem}
.wordling-header p{margin:4px 0 0;color:#65566a;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}

.board{display:grid;grid-template-columns:repeat(5,62px);grid-auto-rows:62px;gap:10px;justify-content:center;margin:20px auto 28px}
.tile{border-radius:10px;border:2px solid #dacddf;display:flex;align-items:center;justify-content:center;font-family:"Lato","Open Sans",sans-serif;font-weight:700;font-size:1.8rem;color:#3a2d45;text-transform:uppercase;transition:transform .2s ease, background .2s ease, border-color .2s ease}
.tile.filled{border-color:#c5b2d0}
.tile.correct{background:#7a2d27;color:#fff;border-color:#7a2d27}
.tile.present{background:#f4a261;color:#fff;border-color:#f4a261}
.tile.absent{background:#cfc4d6;color:#635770;border-color:#cfc4d6}
.tile.flip{animation:flip .55s ease both}

@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

.keyboard{display:grid;grid-template-columns:repeat(10,minmax(28px,1fr));gap:8px;max-width:520px;margin:0 auto}
.key{padding:12px;border-radius:10px;background:#d8c7e2;border:none;font-family:"Lato","Open Sans",sans-serif;font-weight:600;color:#3a2d45;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .1s ease, background .2s ease}
.key:hover{transform:translateY(-1px)}
.key.wide{grid-column:span 2}
.key.correct{background:#7a2d27;color:#fff}
.key.present{background:#f4a261;color:#fff}
.key.absent{background:#cfc4d6;color:#635770}

@media (max-width:680px){
  .board{grid-template-columns:repeat(5,54px);grid-auto-rows:54px}
  .tile{font-size:1.6rem}
}