html{overflow-x:clip}body{min-width:280px}#app{overflow-x:clip}
.home,.workspace,.center-page{width:100%}.hero-copy,.hero-art,.quiz-card,.quiz-body,.host-board,.live-ranking,.player-status,.player-game-layout>div,.form-columns>div{min-width:0}
.button,.nav-link,.text-button{min-height:44px}.icon-button{min-width:44px;min-height:44px}.avatar-option{min-height:72px}
.page-heading h1,.round-heading h1,.podium-section h1,.player-lobby h1{overflow-wrap:anywhere}
.player-game-layout{grid-template-columns:minmax(0,1.55fr) minmax(245px,1fr);gap:28px}
.player-workspace{max-width:1180px}.player-round-top{margin-bottom:20px}.room-top{margin-bottom:25px}
.board-caption{font-size:11px;letter-spacing:.8px;line-height:1.6;overflow-wrap:anywhere}
.player-identity{min-width:0}.player-identity>div{min-width:0}.player-identity b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-results{margin-top:22px}.player-results:empty{display:none}.exercise-row small{overflow-wrap:anywhere}
.promotion-picker{position:relative}.promotion-picker:empty{display:none}.promotion-picker>div{gap:12px}
@media(max-width:1100px){
 .home,.workspace{padding-left:28px;padding-right:28px}.header{padding:18px 28px}.school-tag{display:none}
 .hero{gap:35px}.hero h1{font-size:clamp(38px,5.2vw,60px)}.hero-art{min-height:300px}
 .quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-body p{min-height:0}
 .player-game-layout{gap:22px;grid-template-columns:minmax(0,1.45fr) minmax(220px,1fr)}.player-status{padding:23px}
 .player-status h2{font-size:27px}.status-piece{font-size:55px}.player-status .eyebrow{letter-spacing:.7px}
 .host-game-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.players-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
 .hero{grid-template-columns:1fr;max-width:640px;margin:auto;padding-top:40px}.hero-art{margin:0 22px;height:340px}
 .hero h1{font-size:clamp(42px,7.2vw,60px)}.hero-copy>p{font-size:16px}.feature-grid{gap:12px}.feature{padding:20px 17px}.feature h3{font-size:18px}
 .player-game-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch}.player-game-layout>div{width:100%;max-width:640px;margin:0 auto}
 .player-status{width:100%;max-width:640px;margin:0 auto}.player-status h2{font-size:23px;letter-spacing:-.6px;margin-bottom:10px}
 .player-status h2 br{display:none}.status-piece{float:right;margin:0 0 6px 15px;font-size:48px}
 .player-status .eyebrow{margin-bottom:9px}.player-status p{font-size:14px;margin-bottom:10px}.status-footer{margin-top:12px;padding-top:12px}
 .step-progress{margin-top:15px}.board-help{font-size:12px;margin:12px 0 0}.board-caption{margin-bottom:11px}
 .earned{font-size:35px;margin:8px 0}.host-game-layout{grid-template-columns:1fr}.host-board{max-width:640px;width:100%;margin:auto}
 .form-columns{grid-template-columns:1fr;gap:15px}.lobby-layout{grid-template-columns:1fr 260px;gap:25px}.lobby-layout h1{font-size:42px}
 .big-code{font-size:50px;letter-spacing:3px}.lobby-actions{flex-wrap:wrap;gap:8px}.page-heading h1{font-size:38px}
}
@media(max-width:600px){
 .header{padding:13px 16px;gap:5px}.header nav{width:100%;margin:0;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}.nav-link{font-size:12px}
 body:has(.player-game-layout) .header{padding:8px 16px}body:has(.player-game-layout) .header nav{display:none}
 .home,.workspace{padding-left:16px;padding-right:16px}.workspace{padding-top:23px}.center-page{padding:30px 16px}
 .center-page h1,.page-heading h1{font-size:36px;letter-spacing:-1.3px}.hero h1{font-size:44px}.hero{padding-top:30px;gap:30px}
 .hero-copy>p{font-size:15px}.hero-actions{gap:15px;flex-wrap:wrap}.hero-art{margin:0 12px;height:310px}.floating-pill{max-width:80%}
 .hero-detail{font-size:11px;gap:9px}.section-heading{gap:8px;flex-wrap:wrap}.feature-grid{grid-template-columns:1fr}.feature h3{font-size:20px}
 input,textarea,select{font-size:16px;min-height:46px}.code-input{font-size:29px;letter-spacing:7px}
 .join-panel{margin-top:22px}.avatar-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.avatar-option{padding:8px;flex-direction:row;gap:7px;min-height:61px}.avatar-option>span:last-child{font-size:11px}
 .avatar-option .avatar{width:39px;height:39px;font-size:30px}.quiz-grid{grid-template-columns:1fr}.admin-bar>div{justify-content:space-between;width:100%;gap:10px}
 .page-heading{gap:15px;margin-bottom:20px}.page-heading>.button{width:100%;justify-content:space-between}.teacher-note{padding:16px}
 .player-workspace .room-top{padding-bottom:11px;margin-bottom:17px;gap:10px}.room-top>.eyebrow{font-size:10px;letter-spacing:.7px;line-height:1.5}
 .room-code-small b{font-size:13px}.connection{font-size:10px}.player-round-top{gap:8px;flex-wrap:nowrap;margin-bottom:15px}
 .player-identity{gap:7px}.player-identity .avatar{width:35px;height:35px;font-size:27px}.player-identity b{font-size:13px}
 .player-identity span:not(.avatar){font-size:10px}.score-chip{font-size:13px;padding:10px;border-radius:10px;white-space:nowrap}.score-chip>span{display:none}
 .small-timer{font-size:19px;padding:9px 10px;border-radius:10px}.result-chip{font-size:10px;max-width:83px;text-align:center;line-height:1.4}
 .board-caption{font-size:10px;margin-bottom:9px}.arena-rank,.arena-file{font-size:10px}.player-status{padding:17px;margin-bottom:0}.player-status p{font-size:13px}
 .board-help{font-size:11px}.player-game-layout{gap:16px}.player-results{margin-top:16px}.player-results>.panel{padding:16px}
 .lobby-layout{grid-template-columns:1fr;text-align:center;gap:20px}.lobby-layout .eyebrow{justify-content:center}.lobby-actions{justify-content:center}
 .big-code{font-size:61px}.qr-panel{max-width:265px;margin:auto;width:100%;transform:none}.players-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .host-bottom{gap:13px;margin-top:22px}.form-actions{flex-wrap:wrap}.form-actions>.button{width:100%;justify-content:space-between}.exercise-row{align-items:flex-start}
 .exercise-row>div{gap:4px}.exercise-row label{gap:8px;flex:1;min-width:0}.exercise-row label>span{min-width:0}.exercise-row b{overflow-wrap:anywhere}
 footer{padding:20px 16px;font-size:10px;flex-wrap:wrap;gap:10px}.upload-zone{padding:20px 12px}.upload-zone input{width:100%;font-size:13px}
 .round-heading{flex-wrap:wrap;gap:12px}.round-heading h1{font-size:33px}.host-board{padding:13px}.board-credit{font-size:10px}
 .ranking-row{gap:8px}.ranking-row>div b{font-size:12px}.ranking-row>strong{font-size:14px}
 .podium-section h1{font-size:31px}.podium-player h3{font-size:13px}.podium-player>span:not(.avatar):not(.crown){font-size:11px}
}
@media(min-width:821px) and (orientation:landscape){
 body:has(.player-game-layout) .header{padding-top:14px;padding-bottom:14px}
 .player-workspace{padding-top:24px}.player-workspace .room-top{margin-bottom:18px;padding-bottom:16px}.player-round-top{margin-bottom:14px}
 .player-game-layout>div{width:100%;max-width:min(100%,calc(100svh - 270px));margin:0 auto}.board-caption{margin-bottom:12px}
}
@media(max-width:360px){.home,.workspace{padding-left:12px;padding-right:12px}.hero h1{font-size:39px}.score-chip{padding:9px 6px}.small-timer{font-size:18px;padding:9px 7px}.avatar-option{flex-direction:column}.hero-art{margin:0 8px}.podium{gap:6px}.podium-avatar{width:56px;height:56px;font-size:43px}}
@media(max-height:600px) and (orientation:landscape){
 body:has(.player-game-layout) .header{display:none}
 .player-workspace{padding-top:8px}.player-workspace .room-top{padding-bottom:8px;margin-bottom:8px}.player-round-top{margin-bottom:8px}
 .player-game-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);gap:20px;align-items:start}
 .player-game-layout>div{max-width:min(100%,calc(100svh - 140px));margin:0 auto}.player-status{padding:16px}.board-caption{font-size:9px;margin-bottom:7px}
 .player-status .status-piece{float:right;margin:0 0 5px 10px;font-size:40px}.player-status h2{font-size:21px;margin-bottom:10px}.player-status h2 br{display:none}
 .player-status p{font-size:12px;margin-bottom:10px}.player-status .eyebrow{margin-bottom:8px}.player-status .step-progress{margin-top:12px}.player-status .status-footer{margin-top:12px;padding-top:12px}
}
