/* 1.3.2: keep the original studio design. layout.js selects the least dense
   of three spacing levels only when the actual content exceeds the viewport.
   Width breakpoints in style.css still control columns. Text is never scaled. */
.app-shell{padding-bottom:env(safe-area-inset-bottom)}
.mode-copy,.online-card>span:nth-child(2){min-width:0}
.online-main .answer>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.result-glow{height:100%;max-height:450px}
.prize-medallion{flex-shrink:0}
.feedback{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feedback .text-button{white-space:nowrap;color:var(--cream);font-size:11px;min-height:36px}
.feedback-note{display:block;font-size:11px;font-weight:400;margin-top:3px}
.online-hint{padding:0;margin:0;border:0;background:none;min-height:0}
.online-hint .text-button{justify-self:start;min-height:36px;color:var(--gold)}
body:not(.online-mode) #menu-online-connection{display:none}
/* Keep answer targets usable even when old width/height rules are active. */
.answer,.online-main .answer{min-height:44px}
.lifeline{min-height:44px}
.game-controls .btn,.online-controls .btn{min-height:44px}
@media(min-width:1500px){.app-shell{max-width:1600px;padding-left:clamp(45px,4vw,76px);padding-right:clamp(45px,4vw,76px)}}
@media(max-width:580px){.menu-toggle{width:44px;height:44px}.feedback{gap:8px}.feedback strong{font-size:12px}}

/* Level 1: remove surplus whitespace, retain original headings and graphics. */
html[data-fit]:where(:not([data-fit="0"])) .header{height:clamp(54px,9dvh,90px)}
html[data-fit]:where(:not([data-fit="0"])) .section-heading{margin:18px 0 14px}
html[data-fit]:where(:not([data-fit="0"])) .mode-card{min-height:148px;padding:22px}
html[data-fit]:where(:not([data-fit="0"])) .online-card{padding:18px 24px;margin-top:14px}
html[data-fit]:where(:not([data-fit="0"])) .home-footer{padding:16px 0 20px}
html[data-fit]:where(:not([data-fit="0"])) .bottom-bar{padding:16px 0}
html[data-fit]:where(:not([data-fit="0"])) .resume-panel{margin-top:12px;padding:8px}
html[data-fit]:where(:not([data-fit="0"])) .game-screen{padding:18px 0 22px;gap:28px}
html[data-fit]:where(:not([data-fit="0"])) .question-stage{padding-top:16px}
html[data-fit]:where(:not([data-fit="0"])) .lifelines{margin-top:12px;margin-bottom:16px}
html[data-fit]:where(:not([data-fit="0"])) .question-panel{padding:14px 22px 20px}
html[data-fit]:where(:not([data-fit="0"])) .question-panel h2{margin-top:12px}
html[data-fit]:where(:not([data-fit="0"])) .answers{margin-top:14px;gap:10px}
html[data-fit]:where(:not([data-fit="0"])) .answer{min-height:56px;padding:12px 15px}
html[data-fit]:where(:not([data-fit="0"])) .game-controls{margin-top:16px}
html[data-fit]:where(:not([data-fit="0"])) .ladder-panel{padding:16px 12px}
html[data-fit]:where(:not([data-fit="0"])) .prize-ladder li{padding:6px 10px}
html[data-fit]:where(:not([data-fit="0"])) .ladder-title{padding-bottom:14px}
html[data-fit]:where(:not([data-fit="0"])) .result-screen{padding:30px 0}
html[data-fit]:where(:not([data-fit="0"])) .result-trophy{margin-bottom:16px}
html[data-fit]:where(:not([data-fit="0"])) .score-form{margin-top:20px;margin-bottom:18px;padding:20px}
html[data-fit]:where(:not([data-fit="0"])) .online-screen{padding:18px 0}
html[data-fit]:where(:not([data-fit="0"])) .online-heading{margin-bottom:16px}
html[data-fit]:where(:not([data-fit="0"])) .online-entry{padding:26px;gap:28px}
html[data-fit]:where(:not([data-fit="0"])) .online-lobby{margin:20px auto}
html[data-fit]:where(:not([data-fit="0"])) .online-lobby h2{font-size:28px;margin:12px 0}
html[data-fit]:where(:not([data-fit="0"])) .lobby-players{margin:16px 0}
html[data-fit]:where(:not([data-fit="0"])) .lobby-player{padding:12px 8px}
html[data-fit]:where(:not([data-fit="0"])) .online-play{padding-top:14px;gap:25px}
html[data-fit]:where(:not([data-fit="0"])) .online-clock{margin:10px 0}
html[data-fit]:where(:not([data-fit="0"])) .online-controls{margin-top:12px}
html[data-fit]:where(:not([data-fit="0"])) .online-board{padding:16px}
html[data-fit]:where(:not([data-fit="0"])) .online-player{padding:10px 0}
html[data-fit]:where(:not([data-fit="0"])) .online-connection{margin-top:14px;padding-top:8px}
@media(min-width:581px){
  html[data-fit]:where(:not([data-fit="0"])) .hero{min-height:clamp(280px,38dvh,400px)}
  html[data-fit]:where(:not([data-fit="0"])) .studio-art{height:clamp(280px,38dvh,380px)}
}

/* Level 2: fluid spacing for a shorter window. The two solo cards and the
   separate online card remain in the same positions as the original design. */
html:is([data-fit="2"],[data-fit="3"]) .header{height:clamp(50px,9dvh,74px)}
html:is([data-fit="2"],[data-fit="3"]) .section-heading{margin:12px 0}
html:is([data-fit="2"],[data-fit="3"]) .mode-card{min-height:130px;padding:18px 22px}
html:is([data-fit="2"],[data-fit="3"]) .online-card{padding:14px 22px;margin-top:12px}
html:is([data-fit="2"],[data-fit="3"]) .online-card-icon{height:50px;width:50px;flex-shrink:0}
html:is([data-fit="2"],[data-fit="3"]) .home-footer{padding:10px 0 12px}
html:is([data-fit="2"],[data-fit="3"]) .bottom-bar{padding:12px 0}
html:is([data-fit="2"],[data-fit="3"]) .resume-panel{margin-top:10px;padding:4px 10px}
html:is([data-fit="2"],[data-fit="3"]) body.in-game .bottom-bar{display:none}
html:is([data-fit="2"],[data-fit="3"]) .game-screen{padding:12px 0}
html:is([data-fit="2"],[data-fit="3"]) .question-stage{padding-top:8px}
html:is([data-fit="2"],[data-fit="3"]) .question-stake{font-size:36px;margin-top:3px}
html:is([data-fit="2"],[data-fit="3"]) .stage-rule{margin:6px 0}
html:is([data-fit="2"],[data-fit="3"]) .lifelines{margin-top:8px;margin-bottom:12px}
html:is([data-fit="2"],[data-fit="3"]) .question-panel{padding:10px 20px 16px}
html:is([data-fit="2"],[data-fit="3"]) .question-panel h2{margin-top:8px}
html:is([data-fit="2"],[data-fit="3"]) .answers{margin-top:10px;gap:8px}
html:is([data-fit="2"],[data-fit="3"]) .answer{min-height:50px;padding:10px 14px}
html:is([data-fit="2"],[data-fit="3"]) .game-controls{margin-top:10px}
html:is([data-fit="2"],[data-fit="3"]) .feedback{margin-top:10px;padding:6px 14px}
html:is([data-fit="2"],[data-fit="3"]) .prize-ladder{gap:2px;padding:6px 0}
html:is([data-fit="2"],[data-fit="3"]) .prize-ladder li{padding:5px 10px}
html:is([data-fit="2"],[data-fit="3"]) .ladder-note{padding-top:10px}
html:is([data-fit="2"],[data-fit="3"]) .result-trophy{width:54px;height:54px;margin-bottom:10px}
html:is([data-fit="2"],[data-fit="3"]) .result-screen h1{font-size:28px;margin:10px 0}
html:is([data-fit="2"],[data-fit="3"]) .result-amount{font-size:48px}
html:is([data-fit="2"],[data-fit="3"]) .online-screen{padding:10px 0}
html:is([data-fit="2"],[data-fit="3"]) .online-heading{margin-bottom:10px}
html:is([data-fit="2"],[data-fit="3"]) .online-entry{padding:20px;gap:20px}
html:is([data-fit="2"],[data-fit="3"]) .online-intro .formula{display:none}
html:is([data-fit="2"],[data-fit="3"]) .online-emblem{width:50px;height:50px}
html:is([data-fit="2"],[data-fit="3"]) .online-intro h2{font-size:24px;margin:12px 0}
html:is([data-fit="2"],[data-fit="3"]) .online-form{gap:10px}
html:is([data-fit="2"],[data-fit="3"]) .online-divider{margin:0}
html:is([data-fit="2"],[data-fit="3"]) .online-lobby>.formula{display:none}
html:is([data-fit="2"],[data-fit="3"]) .online-connection{display:none}
html:is([data-fit="2"],[data-fit="3"]) .online-play{padding-top:8px}
html:is([data-fit="2"],[data-fit="3"]) .online-player{padding:8px 0}
html:is([data-fit="2"],[data-fit="3"]) body.online-mode .bottom-bar{display:none}
@media(min-width:581px){
  html:is([data-fit="2"],[data-fit="3"]) .hero{min-height:clamp(220px,34dvh,330px)}
  html:is([data-fit="2"],[data-fit="3"]) .studio-art{height:clamp(220px,34dvh,330px);transform:scale(.75)}
  html:is([data-fit="2"],[data-fit="3"]) .hero h1{font-size:clamp(38px,4.5vw,62px);margin:16px 0}
  html:is([data-fit="2"],[data-fit="3"]) .hero-proof{margin-top:14px}
  html:is([data-fit="2"],[data-fit="3"]) .art-caption{display:none}
  html[data-fit="3"] .hero h1{font-size:clamp(38px,4vw,56px)}
  html[data-fit="3"] .hero-description{line-height:1.55}
  html[data-fit="3"] .hero-proof{margin-top:10px}
  html[data-fit="3"] .hero{min-height:clamp(210px,31dvh,300px)}
  html[data-fit="3"] .studio-art{height:clamp(210px,31dvh,300px)}
}

@media(max-width:580px){
  html[data-fit]:where(:not([data-fit="0"])) .app-shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  html[data-fit]:where(:not([data-fit="0"])) .header{height:60px}
  html[data-fit]:where(:not([data-fit="0"])) .hero{padding:18px 0 12px}
  html[data-fit]:where(:not([data-fit="0"])) .hero h1{font-size:clamp(35px,10.5vw,44px);margin:14px 0}
  html[data-fit]:where(:not([data-fit="0"])) .hero-description{font-size:12px;line-height:1.55;margin:10px 0}
  html[data-fit]:where(:not([data-fit="0"])) .hero-proof{margin-top:10px}
  html[data-fit]:where(:not([data-fit="0"])) .section-heading{margin:10px 0}
  html[data-fit]:where(:not([data-fit="0"])) .mode-grid{gap:10px;margin-bottom:0}
  html[data-fit]:where(:not([data-fit="0"])) .mode-card{min-height:110px;padding:15px;gap:12px}
  html[data-fit]:where(:not([data-fit="0"])) .mode-meta{margin-top:9px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card{padding:15px;gap:12px}
  html[data-fit]:where(:not([data-fit="0"])) .home-footer{padding:10px 0 12px}
  html[data-fit]:where(:not([data-fit="0"])) .bottom-bar{padding:12px 0}
  html[data-fit]:where(:not([data-fit="0"])) .game-screen{padding:8px 0 12px}
  html[data-fit]:where(:not([data-fit="0"])) .question-stage{padding-top:10px}
  html[data-fit]:where(:not([data-fit="0"])) .question-stake{font-size:32px}
  html[data-fit]:where(:not([data-fit="0"])) .stage-rule{margin:6px 0}
  html[data-fit]:where(:not([data-fit="0"])) .lifelines{margin-top:6px;margin-bottom:10px}
  html[data-fit]:where(:not([data-fit="0"])) .question-panel{padding:9px 14px 14px}
  html[data-fit]:where(:not([data-fit="0"])) .question-panel h2{font-size:17px;line-height:1.35;margin-top:7px}
  html[data-fit]:where(:not([data-fit="0"])) .answer{min-height:46px;padding:10px 13px;font-size:13px;line-height:1.3}
  html[data-fit]:where(:not([data-fit="0"])) .answers{margin-top:10px;gap:7px}
  html[data-fit]:where(:not([data-fit="0"])) .game-controls{margin-top:10px}
  html[data-fit]:where(:not([data-fit="0"])) .online-intro h2{font-size:21px;margin:10px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-form input{padding:12px;font-size:16px}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby>p{font-size:12px;margin:8px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby h2{font-size:25px}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-player{padding:8px;gap:5px}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-player strong{font-size:12px}
  html[data-fit]:where(:not([data-fit="0"])) .player-avatar{width:32px;height:32px;font-size:18px}
  html:is([data-fit="2"],[data-fit="3"]) .header{height:52px}
  html:is([data-fit="2"],[data-fit="3"]) .hero{padding:12px 0 6px}
  html:is([data-fit="2"],[data-fit="3"]) .hero h1{font-size:36px;margin:10px 0}
  html:is([data-fit="2"],[data-fit="3"]) .hero-description{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .mode-card{min-height:100px;padding:12px}
  html:is([data-fit="2"],[data-fit="3"]) .mode-copy h3{font-size:19px}
  html:is([data-fit="2"],[data-fit="3"]) .mode-icon{width:36px;height:40px}
  html:is([data-fit="2"],[data-fit="3"]) .mode-meta{margin-top:7px;gap:12px}
  html:is([data-fit="2"],[data-fit="3"]) .online-card-icon{width:38px;height:38px}
  html:is([data-fit="2"],[data-fit="3"]) .online-card strong{font-size:19px}
  html:is([data-fit="2"],[data-fit="3"]) .home-footer{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .question-stage{padding-top:5px}
  html:is([data-fit="2"],[data-fit="3"]) .question-stake{font-size:28px}
  html:is([data-fit="2"],[data-fit="3"]) .stage-rule{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .lifelines{margin-top:6px;margin-bottom:8px}
  html:is([data-fit="2"],[data-fit="3"]) .question-panel{padding:7px 12px 11px}
  html:is([data-fit="2"],[data-fit="3"]) .question-panel h2{font-size:16px;margin-top:5px}
  html:is([data-fit="2"],[data-fit="3"]) .answers{gap:6px;margin-top:8px}
  html:is([data-fit="2"],[data-fit="3"]) .answer{min-height:44px;padding:9px 12px}
  html:is([data-fit="2"],[data-fit="3"]) .game-controls{margin-top:8px}
  html:is([data-fit="2"],[data-fit="3"]) .feedback{padding:4px 10px;margin-top:8px}
  html:is([data-fit="2"],[data-fit="3"]) .feedback strong{font-size:11px}
  html:is([data-fit="2"],[data-fit="3"]) .feedback .text-button{font-size:10px}
  html:is([data-fit="2"],[data-fit="3"]) [data-phase=reveal] .lifelines{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .online-screen[data-phase=reveal] .online-clock{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .result-screen{padding:18px 0}
  html:is([data-fit="2"],[data-fit="3"]) .result-screen h1{font-size:25px}
  html:is([data-fit="2"],[data-fit="3"]) .save-row{flex-direction:row;gap:8px}
  html:is([data-fit="2"],[data-fit="3"]) .score-form{padding:14px;margin:14px 0}
  html:is([data-fit="2"],[data-fit="3"]) .save-row .btn{font-size:11px;padding:10px}
  html:is([data-fit="2"],[data-fit="3"]) .online-heading h1{font-size:23px}
  html:is([data-fit="2"],[data-fit="3"]) .online-entry{padding:16px;gap:10px}
  html:is([data-fit="2"],[data-fit="3"]) .online-emblem{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .online-intro h2{font-size:19px;margin:0 0 8px}
  html:is([data-fit="2"],[data-fit="3"]) .online-intro p{margin:8px 0;line-height:1.5}
  html:is([data-fit="2"],[data-fit="3"]) .lobby-player .player-avatar{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .online-lobby{margin:10px auto}
  html:is([data-fit="2"],[data-fit="3"]) .lobby-players{margin:10px 0;gap:6px}
  html[data-fit="3"] .hero-proof{display:none}
  html[data-fit="3"] .hero h1{font-size:32px;margin:8px 0}
  html[data-fit="3"] .hero{padding-top:10px}
  html[data-fit="3"] .studio-art{top:0;height:160px}
  html[data-fit="3"] .mode-card{min-height:92px;padding:10px 12px}
  html[data-fit="3"] .mode-copy h3{font-size:18px;margin:3px 0}
  html[data-fit="3"] .mode-meta{margin-top:5px}
  html[data-fit="3"] .online-card{padding:12px;margin-top:10px}
  html[data-fit="3"] .online-card .eyebrow{font-size:6px;letter-spacing:.6px}
  html[data-fit="3"] .bottom-bar{display:none}
  html[data-fit="3"] .game-topline #game-mode{display:none}
  html[data-fit="3"] .game-screen{padding:4px 0 6px}
  html[data-fit="3"] .game-topline{min-height:24px}
  html[data-fit="3"] #mobile-ladder{margin-left:0;padding:4px 0;min-height:24px}
  html[data-fit="3"] .game-topline .safe-chip{margin-left:auto}
  html[data-fit="3"] .question-stage{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0}
  html[data-fit="3"] .question-stake{font-size:24px}
  html[data-fit="3"] .lifelines{margin:4px auto 6px}
  html[data-fit="3"] .lifelines.four .lifeline>span:last-child{min-height:10px}
  html[data-fit="3"] .online-clock{margin:5px 0}
  html[data-fit="3"] .online-controls{margin-top:6px}
  html[data-fit="3"] .online-screen{padding:6px 0 4px}
  html[data-fit="3"] .online-heading .eyebrow{display:none}
  html[data-fit="3"] .online-heading h1{font-size:21px;margin-top:4px}
  html[data-fit="3"] .online-form .menu-note{margin:0 0 4px}
  html[data-fit="3"] .online-intro p{font-size:11px;margin:6px 0}
  html[data-fit="3"] .online-lobby h2{font-size:22px;margin:8px 0}
  html[data-fit="3"] .lobby-player{padding:7px 8px}
  html[data-fit="3"] #on-pace{font-size:10px;margin:6px 0}
  html[data-fit="3"] .resume-panel{margin-top:6px;padding:2px 10px}
  html[data-fit="3"] .result-trophy{display:none}
}

/* A low, wide viewport retains the original two-card row and full-width
   online panel; the decorative header is shorter instead of moving cards. */
@media(min-width:581px) and (max-height:580px){
  html[data-fit]:where(:not([data-fit="0"])) .header{height:44px}
  html[data-fit]:where(:not([data-fit="0"])) .hero{min-height:90px;height:90px;padding:0;grid-template-columns:1fr 180px}
  html[data-fit]:where(:not([data-fit="0"])) .hero h1{font-size:32px;line-height:1.1;margin:6px 0}
  html[data-fit]:where(:not([data-fit="0"])) .hero h1 br{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .hero h1 em{margin-left:8px}
  html[data-fit]:where(:not([data-fit="0"])) .hero .eyebrow{font-size:7px;letter-spacing:1px}
  html[data-fit]:where(:not([data-fit="0"])) .hero-description,html[data-fit]:where(:not([data-fit="0"])) .hero-proof{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .studio-art{height:90px;transform:scale(.25);margin:0}
  html[data-fit]:where(:not([data-fit="0"])) .section-heading{margin:6px 0 8px}
  html[data-fit]:where(:not([data-fit="0"])) .section-heading h2{font-size:15px}
  html[data-fit]:where(:not([data-fit="0"])) .mode-grid{gap:12px}
  html[data-fit]:where(:not([data-fit="0"])) .mode-card{min-height:100px;padding:10px 14px;gap:12px}
  html[data-fit]:where(:not([data-fit="0"])) .mode-copy h3{font-size:20px;margin:4px 0}
  html[data-fit]:where(:not([data-fit="0"])) .mode-meta{margin-top:7px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card{min-height:64px;padding:10px 16px;margin-top:8px;gap:15px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card-icon{width:36px;height:36px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card strong{font-size:18px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card>span:nth-child(2){grid-template-columns:auto 1fr;gap:4px 18px;align-items:center}
  html[data-fit]:where(:not([data-fit="0"])) .online-card .eyebrow{grid-column:1/-1;font-size:7px}
  html[data-fit]:where(:not([data-fit="0"])) .online-card span>span:last-child{font-size:11px}
  html[data-fit]:where(:not([data-fit="0"])) .home-footer,html[data-fit]:where(:not([data-fit="0"])) .bottom-bar{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .resume-panel{margin:6px 0;padding:0 10px}
  html[data-fit="3"] .hero{height:66px;min-height:66px}
  html[data-fit="3"] .studio-art{height:66px}
  html[data-fit="3"] .resume-panel{margin-top:4px}
  html[data-fit="3"] .mode-card{min-height:90px}
  html[data-fit]:where(:not([data-fit="0"])) .game-screen{padding:4px 0}
  html[data-fit]:where(:not([data-fit="0"])) .game-topline{margin-bottom:0;min-height:24px}
  html[data-fit]:where(:not([data-fit="0"])) #mobile-ladder{padding:4px 0;min-height:24px}
  html[data-fit]:where(:not([data-fit="0"])) .question-stage{padding:2px 0}
  html[data-fit]:where(:not([data-fit="0"])) .question-stake{font-size:22px;line-height:1.1;margin:0}
  html[data-fit]:where(:not([data-fit="0"])) .lifelines{margin:0;gap:14px}
  html[data-fit]:where(:not([data-fit="0"])) .lifeline{min-height:40px}
  html[data-fit]:where(:not([data-fit="0"])) .lifeline>span:last-child{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .question-panel{padding:5px 14px 9px}
  html[data-fit]:where(:not([data-fit="0"])) .question-panel h2{font-size:16px;line-height:1.3;margin-top:3px}
  html[data-fit]:where(:not([data-fit="0"])) .read-button{padding:2px 5px}
  html[data-fit]:where(:not([data-fit="0"])) .answers{margin-top:6px;gap:6px}
  html[data-fit]:where(:not([data-fit="0"])) .answer{min-height:44px;padding:8px 12px;font-size:13px}
  html[data-fit]:where(:not([data-fit="0"])) .game-controls,html[data-fit]:where(:not([data-fit="0"])) .online-controls{margin-top:6px;min-height:44px}
  html[data-fit]:where(:not([data-fit="0"])) .feedback{padding:1px 12px;margin-top:6px}
  html[data-fit]:where(:not([data-fit="0"])) .feedback .text-button{min-height:32px;padding:4px 0}
  html:is([data-fit="2"],[data-fit="3"]) [data-phase=reveal] .lifelines{display:none}
  html:is([data-fit="2"],[data-fit="3"]) .online-screen[data-phase=reveal] .online-clock{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .online-hint .text-button{min-height:26px;padding:3px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-screen{padding:6px 0 10px}
  html[data-fit]:where(:not([data-fit="0"])) .online-heading{margin-bottom:8px}
  html[data-fit]:where(:not([data-fit="0"])) .online-heading .eyebrow{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .online-heading h1{font-size:22px;margin:0}
  html[data-fit]:where(:not([data-fit="0"])) .online-entry{grid-template-columns:1fr 1fr;padding:16px 22px;gap:28px}
  html[data-fit]:where(:not([data-fit="0"])) .online-emblem,html[data-fit]:where(:not([data-fit="0"])) .online-intro .formula{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .online-intro h2{font-size:20px;margin:0 0 8px}
  html[data-fit]:where(:not([data-fit="0"])) .online-intro p{font-size:12px;margin:8px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-form{gap:6px}
  html[data-fit]:where(:not([data-fit="0"])) .online-form .menu-note{margin:0}
  html[data-fit]:where(:not([data-fit="0"])) .online-form input{padding:10px 12px}
  html[data-fit]:where(:not([data-fit="0"])) .online-play{padding-top:0}
  html[data-fit]:where(:not([data-fit="0"])) .online-clock{margin:5px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby{margin:8px auto}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby h2{font-size:22px;margin:6px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby>p{font-size:11px;margin:6px 0}
  html[data-fit]:where(:not([data-fit="0"])) .online-lobby>.formula,html[data-fit]:where(:not([data-fit="0"])) .online-lobby>.live-dot{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-players{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-player{padding:6px 8px;gap:3px}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-player strong{font-size:12px}
  html[data-fit]:where(:not([data-fit="0"])) .lobby-player .player-avatar{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .online-screen[data-phase=lobby] .online-heading{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .online-screen[data-phase=lobby] .room-toolbar{padding-bottom:8px}
  html[data-fit]:where(:not([data-fit="0"])) .online-connection{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .result-screen{padding:12px 0;max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-items:center}
  html[data-fit]:where(:not([data-fit="0"])) .result-trophy{display:none}
  html[data-fit]:where(:not([data-fit="0"])) .result-screen .eyebrow,html[data-fit]:where(:not([data-fit="0"])) .result-screen h1,html[data-fit]:where(:not([data-fit="0"])) .result-amount,html[data-fit]:where(:not([data-fit="0"])) #result-stats{grid-column:1;margin:4px 0}
  html[data-fit]:where(:not([data-fit="0"])) .result-screen h1{font-size:26px}
  html[data-fit]:where(:not([data-fit="0"])) .result-amount{font-size:42px}
  html[data-fit]:where(:not([data-fit="0"])) .score-form,html[data-fit]:where(:not([data-fit="0"])) #score-saved{grid-column:2;grid-row:1/4;margin:0;width:100%}
  html[data-fit]:where(:not([data-fit="0"])) .result-buttons{grid-column:2;grid-row:4/6;gap:8px}
  html[data-fit]:where(:not([data-fit="0"])) .result-buttons .btn{padding:10px 12px;font-size:11px}
  .setup-dialog{width:min(780px,calc(100vw - 24px));max-width:none;padding:14px 20px;max-height:calc(100dvh - 16px)}
  .setup-dialog .dialog-heading{margin-bottom:8px}
  .setup-dialog .dialog-heading h2{font-size:19px;margin:4px 0}
  .setup-body{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;padding:0}
  .setup-body>label.setup-name-label{grid-column:1;margin:0}
  .setup-body>input{grid-column:1;padding:10px 12px}
  .setup-body>.menu-note{grid-column:1;margin:0}
  .setup-option{padding:7px 0}
  .setup-option strong{font-size:12px}
  .setup-option small{font-size:10px;margin-top:3px}
  .setup-body>.setup-option{grid-column:2;grid-row:1/4}
  .setup-body>#setup-next-row{grid-column:2;grid-row:4/6}
  .setup-warning{grid-column:1;grid-row:4/6;margin:0;font-size:10px;padding:8px 10px}
  .setup-dialog .modal-actions{margin-top:8px}
}