/* Classic header look + larger game board (header compacted) */
:root{
  --bg:#111;
  --fg:#eee;
  --muted:#bbb;
  --tile:#1f1f1f;
  --tile-border:#333;
  --absent:#3a3a3c;
  --misplaced:#b59f3b;
  --correct:#538d4e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display:flex; flex-direction:column; align-items:center;
}

.classic-header{
  width:100%;
  background:#222;
  padding:8px 10px;
  border-radius:12px;
}
.classic-header h1{
  margin:0 0 .25rem;
  text-align:center;
  color:#fff;
  font-size:1.25rem;
  line-height:1.15;
  font-weight:800;
}
.classic-header .intro{
  max-width:900px;
  margin:0 auto .4rem;
  text-align:center;
  color:#ddd;
  font-size:.90rem; 
  line-height:1.3; 
}
.classic-header .howto{
  max-width:900px;
  margin:0 auto;
  color:#ddd;
  font-size:.88rem; 
  line-height:1.3;  
}
.classic-header .howto h2{
  margin:.15rem 0 .3rem;
  color:#f7c948;
  text-align:center;
  font-size:.98rem;  
  font-weight:700;
}


.classic-header .howto ul{
  margin:.25rem 0 .35rem 1rem; 
  padding:0;
}
.legend{
  display:inline-block; width:12px; height:12px;
  border-radius:3px; margin-right:6px; vertical-align:middle;
}
.legend-correct{ background: var(--correct); }
.legend-misplaced{ background: var(--misplaced); }
.legend-absent{ background: var(--absent); }


.actions{display:flex; gap:8px; justify-content:center; margin-top:.4rem;}
.btn{
  background:#2a2a2a; color:#fff; border:1px solid #444;
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.88rem;
}
.btn:hover{filter:brightness(1.1)}

.board{
  max-width:640px;
  width:100%;
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.guess-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 78px;
  gap:10px;
  width:min(96vw, 560px);
}
.tile{
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--tile-border);
  background:var(--tile);
  font-size:2.1rem;
  font-weight:800;
  text-transform:uppercase;
  border-radius:10px;
}

.keyboard{
  display:grid;
  grid-template-columns: repeat(20, minmax(0,1fr));
  gap:8px;
  width:min(96vw, 640px);
}
.key{
  grid-column: span 2;
  padding:12px 0;
  background:#2b2b2b;
  color:#fff;
  border:none;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  font-size:1rem;
}
.key.large{grid-column: span 3;}
.space{grid-column: span 1;}

.alert-container{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:10;
}
.alert{
  background:#333; border:1px solid #555; padding:10px 14px; border-radius:10px; font-size:1rem;
}
.alert.hide{opacity:0; transition:opacity .2s ease;}

.flip{transform:rotateX(90deg); transition:transform .25s;}
.shake{animation:shake .2s ease-in-out 2;}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}100%{transform:translateX(0)}}
.dance{animation:dance .5s ease;}
@keyframes dance{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}

.tile[data-state="correct"]{background:var(--correct); border-color:var(--correct);}
.tile[data-state="wrong-location"]{background:var(--misplaced); border-color:var(--misplaced);}
.tile[data-state="wrong"]{background:var(--absent); border-color:var(--absent);}
.key.correct{background:var(--correct);}
.key.wrong-location{background:var(--misplaced);}
.key.wrong{background:var(--absent);}

.modal{border:none; border-radius:12px; padding:16px 18px; background:#1c1c1c; color:#fff; max-width:560px;}
.modal::backdrop{background:rgba(0,0,0,.5)}
.stats-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin:10px 0 12px;}
.stat-value{font-size:1.5rem; font-weight:800;}
.stat-label{color:#aaa; font-size:1rem;}

.classic-footer{color:#888; font-size:1rem; margin:18px 0 24px; text-align:center;}