.game { max-width:520px; margin:0 auto; padding:36px 16px 64px; text-align:center; }
.game h1 { font-family:var(--serif); font-weight:600; font-size:clamp(40px, 7vw, 56px); color:var(--granate); margin:0; }
.game .game-sub { color:var(--muted); margin:6px 0 4px; }
.game .game-num { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 24px; }
.board { display:grid; grid-template-rows:repeat(6, 1fr); gap:6px; width:min(330px, 100%); margin:0 auto 20px; }
.row { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.tile { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:2px solid #D9BFC3; background:#FFF8F7;
  font-family:var(--sans); font-weight:700; font-size:clamp(22px, 6vw, 30px); color:var(--ink); border-radius:4px; text-transform:uppercase; }
.tile.filled { border-color:#8A6A70; }
.tile.hit { background:var(--granate); border-color:var(--granate); color:#fff; }
.tile.near { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.tile.miss { background:#8C8A90; border-color:#8C8A90; color:#fff; }
.row.shake { animation:shake .35s; }
@keyframes shake { 0%,100% { transform:translateX(0) } 25% { transform:translateX(-6px) } 75% { transform:translateX(6px) } }
.keys { display:flex; flex-direction:column; gap:7px; width:100%; max-width:500px; margin:0 auto; }
.keyrow { display:flex; gap:5px; justify-content:center; }
.key { flex:1 1 0; min-width:0; height:54px; border:0; border-radius:6px; background:#E8D3D1; color:var(--ink); font:inherit;
  font-weight:700; font-size:14px; cursor:pointer; text-transform:uppercase; }
.key.wide { flex:1.6 1 0; font-size:12px; }
.key.hit { background:var(--granate); color:#fff; }
.key.near { background:var(--gold); }
.key.miss { background:#8C8A90; color:#fff; }
.game-msg { min-height:28px; font-weight:600; color:var(--granate); margin:0 0 12px; }
.reveal { display:none; margin:24px auto 0; padding:24px; background:#fff; border-radius:6px; text-align:left; border-top:4px solid var(--granate); }
.reveal.show { display:block; }
.reveal h2 { margin:0 0 8px; font-family:var(--serif); font-size:30px; color:var(--granate); letter-spacing:.06em; }
.reveal p { margin:0 0 12px; }
.stats { display:flex; gap:20px; margin:12px 0 16px; }
.stats div { display:flex; flex-direction:column; }
.stats b { font-size:26px; font-family:var(--serif); color:var(--granate); }
.stats span { font-size:12px; color:var(--muted); }
.share { display:inline-flex; gap:8px; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; border:0;
  background:var(--granate); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.share:hover { background:var(--ink); }
.how { margin:28px auto 0; text-align:left; font-size:14px; color:var(--muted); }
.how summary { cursor:pointer; font-weight:600; color:var(--ink); }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:18px; height:18px; border-radius:3px; display:inline-block; }