/* Lattice uses the same shell, typography, navigation and preferences as the club. */
:root { --green: #438d7b; --yellow: #f1ce74; --accent: var(--mint-dark); }
.lattice-shell .game-main { min-height: 0; padding: 20px 21px 30px; background: transparent; }
.lattice-shell .game-topbar { display: grid; gap: 0; }
.lattice-shell .intro { margin: 4px 0 22px; }
.lattice-shell h1 { font: 800 29px/1.08 var(--font-display); letter-spacing: -1.1px; }
.lattice-shell h2 { font-family: var(--font-display); }
.lattice-shell .intro > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.5; }
.lattice-shell .board-card { background: var(--card); border-color: var(--line); border-radius: 21px; box-shadow: 0 18px 45px rgba(54,65,62,.1); }
.lattice-shell .cell { border-color: #cddfd8; background: var(--mint-soft); }
.lattice-shell .cell.revealed { background: var(--green); border-color: var(--green); }
.lattice-shell .key { background: #e5eee9; }
.lattice-shell .key.absent { background: #bfc3bf; }
.lattice-shell .key.present { background: var(--yellow); }
.lattice-shell .key.found { background: var(--green); }
.lattice-shell .primary { border-radius: 14px; background: var(--ink); }
.lattice-shell footer { flex-wrap: wrap; }
.lattice-shell .keyboard-guide, .lattice-shell .legend { font-size: 14px; }
.lattice-shell input { font-size: 20px; }
html.large-text .lattice-shell #message, html.large-text .lattice-shell details { font-size: 18px; }
html.large-text .lattice-shell .key { font-size: 16px; }
#result .club-share { background: #386f60; color: #fff; }
#result .club-next { background: #fffdfa; color: #285346; }
@media(max-width:420px) { .lattice-shell .game-main { padding: 18px 16px 28px; } }