/* Main menu: one title and nine large buttons. */
.home-heading{flex:none;display:flex;align-items:end;justify-content:space-between;gap:14px;margin:clamp(12px,2cqh,22px) 0 clamp(9px,1.2cqh,16px)}
.home-kicker{font-size:clamp(11px,1.25cqh,16px);color:#f0c97d;font-weight:1000;letter-spacing:2px}
.home-heading h1{font:900 clamp(35px,5.3cqh,66px) Georgia,serif;color:#ffe4aa;text-shadow:0 3px 0 #512613;margin:3px 0 0;line-height:1}
.home-side{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.home-word-count{border:2px solid #bd965e;border-radius:13px;background:#5a3524;color:#ffe4a0;padding:8px 15px;font-size:clamp(16px,1.8cqh,23px);font-weight:1000;white-space:nowrap}
.home-heading .resume-current{min-height:43px;padding:6px 14px;font-size:clamp(12px,1.35cqh,17px);white-space:nowrap}
.cards{gap:clamp(9px,1.5cqh,19px)}
.card{min-width:0;justify-content:flex-start;padding:clamp(10px,1.4cqh,18px) clamp(13px,1.5cqw,23px);gap:clamp(10px,1.4cqw,22px);border-radius:18px}
.card .gem-icon{width:min(8.7cqh,105px);height:min(8.7cqh,105px);font-size:clamp(30px,4cqh,49px)}
.card strong{font-size:clamp(19px,2.5cqh,31px);line-height:1.05}
.card small,.card .go{display:none}
.card:hover,.card:focus-visible{transform:translateY(-2px)}
.footer{margin-top:clamp(6px,.8cqh,11px)}

/* Game setup: readable title, two timer choices, lengths, then primary action. */
.setup{max-width:1200px;grid-template-columns:clamp(90px,11cqh,135px) minmax(0,1fr);gap:clamp(16px,2cqw,28px);align-content:start;align-items:start;box-shadow:inset 0 0 0 4px #fbeac8,0 9px 0 #32190e}
.setup>.gem-icon{width:clamp(90px,11cqh,135px);height:clamp(90px,11cqh,135px);font-size:clamp(42px,6cqh,71px);margin-top:20px}
.setup>div:last-child{width:100%;max-width:850px;gap:0}
.setup #back{min-height:clamp(35px,4.5cqh,47px);padding:5px 13px;margin-bottom:clamp(7px,1cqh,11px)}
.setup h1{font-size:clamp(33px,5.2cqh,58px);line-height:1.04;margin:0 0 6px}
.setup h1+p{font-size:clamp(14px,1.7cqh,20px);margin:0 0 clamp(15px,2.6cqh,26px);color:#654a35;font-weight:750}
.setup-choices{width:100%;max-width:780px}
.choice-label{font-size:clamp(12px,1.4cqh,17px);font-weight:1000;color:#805333;letter-spacing:1.3px;margin-bottom:7px}
.timer-picker{width:100%;max-width:none;gap:10px;margin:0 0 clamp(10px,1.5cqh,18px)}
.timer-button{min-height:clamp(67px,9cqh,98px);padding:10px 15px;background:#f5e8cb;border-color:#b38a59;box-shadow:0 3px 0 #a98354}
.timer-button.active{background:#d6edb4;border-color:#588b3c;box-shadow:0 3px 0 #6c9447}
.timer-button b{font-size:clamp(17px,2.3cqh,26px)}
.timer-button small{font-size:clamp(12px,1.5cqh,17px);color:#70533a}
.length-picker{width:100%;max-width:none;gap:9px;margin:0 0 clamp(10px,1.5cqh,18px)}
.length-button{min-height:clamp(62px,8cqh,85px)}
.length-button b{font-size:clamp(16px,2.2cqh,25px)}
.length-button small{font-size:clamp(12px,1.5cqh,16px)}
.setup-actions{display:flex;align-items:center;gap:12px;margin:clamp(7px,1cqh,12px) 0 2px}
.setup-actions .setup-play{min-height:clamp(54px,7.5cqh,77px);min-width:clamp(180px,20cqw,280px);font-size:clamp(22px,2.9cqh,33px);margin:0}
.setup-board-button{min-height:clamp(45px,6cqh,58px);font-size:clamp(14px,1.75cqh,20px);padding:7px 19px}
.setup .setup-note{margin:8px 0 0!important;color:#72543d!important;font-size:clamp(12px,1.4cqh,16px)!important}

/* Empty leaderboard is an informative state, not a giant blank panel. */
.board-screen .leader:has(>p){justify-content:center;align-items:center;gap:12px}
.board-screen .leader:has(>p) h3{font-size:clamp(22px,3cqh,35px)}
.board-screen .leader:has(>p)>p{font-size:clamp(17px,2.2cqh,25px);color:#e6d6bf;text-align:center;margin:0}
.board-screen .leader:has(>p) .score-controls{margin-top:12px}

@container (max-height: 680px){
 .home-heading{margin:6px 0}.home-heading h1{font-size:clamp(30px,4.7cqh,44px)}
 .card{padding:6px 10px}.card .gem-icon{width:7.7cqh;height:7.7cqh}
 .card strong{font-size:clamp(16px,2.25cqh,24px)}
 .setup{padding:10px}.setup>.gem-icon{width:90px;height:90px;font-size:44px}
 .setup h1+p{margin-bottom:8px}.timer-button{min-height:58px;padding:6px 10px}
 .timer-picker,.length-picker{margin-bottom:7px}.length-button{min-height:50px}
 .setup-actions .setup-play{min-height:50px}
}
@container (max-height: 580px){
 .setup>.gem-icon{display:none}.setup{grid-template-columns:1fr}
 .setup h1{font-size:30px}.setup h1+p{font-size:12px}
 .timer-button{min-height:49px}.timer-button b{font-size:15px}
 .timer-button small{font-size:11px}.length-button{min-height:43px}
 .setup .setup-note{display:none}
}