/* Size every screen against the 16:9 game canvas, including letterboxed windows. */
.shell{container-type:size}
.wrap,.stagewrap{width:100%;max-width:none}
.top{min-height:clamp(46px,7cqh,72px)}
.hero{height:clamp(95px,16cqh,175px)}
.hero-chest{height:min(14cqh,145px)}
.section{margin:clamp(4px,.9cqh,10px) 0}
.bar{min-height:clamp(43px,6cqh,58px);padding:6px 14px}
.footer{margin-top:clamp(3px,.6cqh,9px)}
.card .gem-icon{width:min(8cqw,11cqh,115px);height:min(8cqw,11cqh,115px)}

.hud{flex-wrap:nowrap;margin:clamp(3px,.6cqh,7px) 0;gap:clamp(4px,.7cqw,12px)}
.hud .metric{padding:4px clamp(5px,.7cqw,12px);font-size:clamp(10px,.85cqw,14px)}
.hud .metric b{font-size:clamp(16px,1.5cqw,25px)}
.nav-games,.nav-pause{min-height:clamp(39px,5.5cqh,58px)!important;padding:5px clamp(9px,1.1cqw,19px)!important}
.gamehead{min-height:clamp(54px,7.5cqh,85px);padding:4px clamp(10px,1.5cqw,22px)}
.gamehead h1{font-size:clamp(22px,2.2cqw,36px)}
.arena{padding:clamp(8px,1.1cqh,18px) clamp(10px,1.4cqw,23px) clamp(50px,6.5cqh,68px)}
.prompt{font-size:clamp(27px,3cqw,52px);margin:clamp(5px,.9cqh,11px) auto clamp(8px,1.2cqh,16px);overflow-wrap:anywhere}
.option,.pair,.sentence,.chip,.tile,.clue{overflow-wrap:anywhere}
.options{margin:clamp(7px,1.2cqh,16px) auto;gap:clamp(6px,.8cqw,13px)}
.option{min-height:clamp(53px,8.5cqh,94px);padding:clamp(5px,.8cqw,13px);font-size:clamp(17px,1.8cqw,29px);line-height:1.12}
.pair{min-height:clamp(35px,5.4cqh,66px);font-size:clamp(15px,1.35cqw,23px);line-height:1.12}
.letter{width:min(4.8cqw,4.45cqh,56px)!important;height:min(4.8cqw,4.45cqh,56px)!important}
.ttt{grid-template-columns:repeat(3,minmax(70px,min(12cqh,130px)));margin:clamp(5px,.8cqh,12px) auto;gap:clamp(5px,.8cqh,10px)}
.ttt button{height:clamp(69px,12cqh,130px)}
.answerbar{min-height:clamp(49px,7cqh,70px);margin:clamp(5px,1cqh,13px) auto;padding:7px}
.tiles{margin:clamp(4px,.8cqh,10px) auto;gap:7px}
.tile{min-height:clamp(40px,5.5cqh,56px);padding:4px 10px}
.sentences{gap:clamp(5px,.8cqh,11px)}
.sentence{font-size:clamp(14px,1.2cqw,21px);line-height:1.16;padding:clamp(5px,.75cqw,12px)}
.slot{min-height:clamp(32px,4.6cqh,46px);font-size:clamp(13px,1.1cqw,19px)}

/* The results always reserve a visible row for actions. */
#arena:has(.finish){padding:clamp(5px,.7cqh,10px) clamp(10px,1.4cqw,22px)}
.finish{width:min(900px,100%);height:100%;max-height:none;overflow:visible;margin:0 auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;align-items:center;justify-items:center;gap:clamp(2px,.45cqh,7px)}
.finish .result-jewel{line-height:1;min-height:0;font-size:0}
.finish .result-jewel img{height:clamp(33px,5cqh,55px);width:auto}
.finish h2{font-size:clamp(30px,4.3cqh,52px);line-height:1.02;margin:0;white-space:nowrap}
.finish .score-tally{width:min(720px,100%);max-width:none;min-height:0;margin:0;padding:clamp(4px,.7cqh,10px) clamp(12px,1.5cqw,23px);display:grid;grid-template-rows:repeat(5,minmax(0,1fr))}
.finish .score-tally>div{min-height:0;padding:clamp(1px,.3cqh,5px) 0;font-size:clamp(13px,1.45cqh,19px);line-height:1.08}
.finish .score-tally .score-total{font-size:clamp(17px,2.1cqh,27px)}
.finish .result{width:min(850px,100%);margin:0;padding:clamp(3px,.65cqh,9px);font-size:clamp(21px,3cqh,36px);line-height:1.05}
.finish .result small{font-size:clamp(12px,1.65cqh,20px);line-height:1.15;margin-top:2px}
.finish .actions{width:100%;margin:0;display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:clamp(4px,.8cqw,12px)}
.finish .actions button{min-width:0;min-height:clamp(36px,5cqh,52px);padding:5px clamp(5px,.9cqw,14px);font-size:clamp(12px,1.1cqw,18px);white-space:nowrap}
.finish .save-panel{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(580px,94%);max-height:88%;margin:0;padding:clamp(12px,1.8cqh,22px);box-shadow:0 0 0 100vmax #180b0bb5,0 18px 50px #180b0b99}
.save-close{position:absolute;right:8px;top:6px;min-height:30px;width:35px;border:1px solid #e7c889;border-radius:8px;background:#795238;color:white;font-weight:900}

/* Setup and leaderboard use their available height rather than cutting controls. */
.setup{margin:clamp(5px,1cqh,14px) auto;gap:clamp(8px,1.2cqw,19px);padding:clamp(8px,1.3cqh,18px)}
.setup h1{font-size:clamp(27px,3.6cqh,43px);margin:2px 0}
.setup p{font-size:clamp(12px,1.6cqh,17px);margin-bottom:4px}
.setup-play{min-height:clamp(42px,6cqh,57px);margin:4px 0;padding:6px 30px;font-size:clamp(18px,2.1cqh,27px)}
.setup-note{margin:2px 0 3px!important;font-size:clamp(11px,1.4cqh,14px)!important}
.timer-picker{width:min(710px,100%);margin:2px 0 4px;gap:7px}
.timer-button{padding:clamp(4px,.7cqh,9px) 10px}
.timer-button b{font-size:clamp(13px,1.8cqh,19px)}
.timer-button small{font-size:clamp(10px,1.3cqh,13px)}
.length-picker{margin:3px 0;gap:6px}
.length-button{min-height:clamp(43px,5.5cqh,55px)}
.setup .leader{display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;overflow:hidden;padding:clamp(8px,1.2cqh,15px);margin:5px 0 0}
.setup .leader h3{flex:none;margin:0 0 4px;font-size:clamp(17px,2cqh,25px)}
.setup .leader .podium{flex:1;min-height:0;margin:2px 0 4px;gap:6px}
.setup .leader .podium-card{min-height:0;padding:3px;gap:1px;justify-content:center}
.setup .leader .podium-card .medal{width:clamp(24px,3.5cqh,35px);height:clamp(24px,3.5cqh,35px);font-size:clamp(14px,1.8cqh,20px)}
.setup .leader .podium-card strong{font-size:clamp(18px,2.3cqh,29px)}
.setup .leader>small{flex:none;font-size:clamp(10px,1.2cqh,13px)}
.setup .leader .score-controls{flex:none;margin-top:3px}
.score-controls button{min-height:clamp(27px,3.8cqh,38px);font-size:clamp(10px,1.35cqh,14px);padding:3px 9px}
.board-screen{margin:0 auto;padding:clamp(3px,.7cqh,10px) 0}
.board-screen h1{font-size:clamp(31px,4.4cqh,56px);margin:2px 0}
.board-screen>p{font-size:clamp(12px,1.9cqh,19px)}
.board-screen .leader{display:flex;flex-direction:column;min-height:0;padding:clamp(10px,1.4cqh,18px)}
.board-screen .podium{flex:none;margin:4px 0 7px}
.board-screen .podium-card{padding:3px}
.board-screen .leader-scroll{flex:1;min-height:0;overflow:hidden}
.board-screen .leader table{min-width:0;width:100%}
.board-screen .leader td{padding:clamp(2px,.5cqh,5px) 5px;font-size:clamp(11px,1.5cqh,16px)}
.board-screen .leader th{padding:2px 5px}
.board-screen .score-controls{flex:none}
.board-screen .actions{margin:5px auto}

@container (max-height: 640px){
 .brand{font-size:clamp(14px,1.7cqw,23px)}
 .topright button{padding:4px 8px;min-height:34px}
 .hero{height:13cqh}.hero h1{font-size:clamp(27px,3.1cqw,45px)}
 .card small,.card .go{display:none}.card strong{font-size:clamp(14px,1.5cqw,22px)}
 .setup>.gem-icon{display:none}.setup{grid-template-columns:1fr}
 .setup .leader .podium-card .medal{display:none}
 .board-screen .podium{display:none}
 .board-screen .leader td{font-size:11px;padding:2px 4px}
 .board-screen .leader th{font-size:10px;padding:1px 4px}
 .library-title{height:62px}.library-title p{display:none}
 .library-toolbar{min-height:48px}.library-bottom{min-height:37px}
 .library-list{gap:3px}.word-row{padding:2px 7px}
 .library-detail .fit-list{display:none}
}