/* Screen-sized layouts: allocate space to panels, never zoom the interface. */
body{padding:0 clamp(16px,2.5vw,48px) 70px;height:100dvh;min-height:0}
main{max-width:1800px;height:calc(100dvh - 76px);display:grid;grid-template-rows:82px minmax(0,1fr);gap:14px}
main>section{min-height:0;min-width:0}
.brandbar{min-height:0;padding:8px 0;gap:20px}.brand-logo{width:125px}.brandbar .nav-button{font-size:20px}
.page-drawing-tools{bottom:10px;padding:7px 12px;font-size:15px;max-width:calc(100vw - 20px)}.page-drawing-tools .b{font-size:15px;padding:5px 9px}
/* A balanced introduction and play sheet, with the feature notes as a footer. */
.land{width:100%;max-width:1480px;margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(390px,.95fr);grid-template-rows:minmax(0,1fr) 106px;gap:24px 6%;align-items:center;padding:8px 12px 4px}
.party-hero{height:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:12px}
.logo-paper{width:90%;max-width:510px;flex:none;margin:0;padding:0 10px 12px}.logo .hero-logo{width:min(100%,330px);max-height:21dvh;object-fit:contain}.logo-subtitle{font-size:24px}
.tag{font-size:clamp(22px,1.7vw,30px);margin:0;flex:none}.hero-art{flex:1;min-height:0;width:100%;max-height:260px;object-fit:contain;margin:0}
.play-stack{width:100%;max-width:660px;justify-self:center;align-self:center}.notebook{padding:26px 30px 22px 64px}.play-heading{font-size:40px;margin-bottom:14px}.nickname-row{margin-bottom:14px}.b.big{font-size:30px;padding:12px 16px}.notebook>.primary{margin-bottom:18px}.or-divider{margin:12px 0}.quick-link{margin-top:13px}
.feature-notes{grid-column:1/-1;width:min(100%,1000px);height:100%;margin:0 auto;gap:28px;padding:0 8px}.feature-note{min-height:0;font-size:22px;gap:6px;padding:12px}.feature-note .icon{width:28px;height:28px}
/* Lobby: compact player cards above a chat area that takes remaining height. */
.lob{width:100%;margin:0;grid-template-columns:minmax(0,1fr) 350px;gap:28px;padding:14px 8px 8px;align-items:stretch}
.lobby-wordmark{display:none}.lobby-social{min-height:0;grid-template-rows:auto minmax(0,1fr);gap:22px}.roster{min-height:0}.tape-title{font-size:28px;margin-bottom:20px}
#lpl{grid-template-columns:repeat(auto-fill,minmax(125px,155px));gap:16px;max-height:205px;overflow:auto;padding:12px 8px 8px;align-content:start}.pc,.invite-card{min-height:155px;font-size:20px}.pc img{width:65px;height:65px}
.lobby-chat{min-height:0;display:flex;flex-direction:column}.lobby-chat .body{min-height:0;flex:1;display:flex;flex-direction:column;padding:10px 16px}.lobby-chat .tb{flex:none}
#lchat{height:auto;flex:1;min-height:0}.chat-empty{height:100%;display:flex;flex-direction:column;justify-content:center}.chat-empty h3{font-size:28px}#lcf{flex:none}#lcstatus{flex:none}
.party-rules{align-self:stretch;min-height:0;padding:30px 20px 18px;display:flex;flex-direction:column;justify-content:center;margin:0}.party-rules h2{font-size:30px;margin-bottom:14px}.set{gap:12px}.set label{font-size:21px;padding:10px;gap:10px}.set select{width:94px;font-size:20px}.party-rules .primary{font-size:30px}.room-invite{margin-bottom:16px}.party-rules .quiet-link{margin-top:10px}
/* Game: aligned sidebars with a flexible, undistorted drawing surface. */
#game{height:100%}.gm{height:100%;margin:0;grid-template-columns:190px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) auto;gap:18px;align-items:stretch;padding:8px 0 4px}
.players-panel{grid-column:1;grid-row:1/3;min-height:0;display:flex;flex-direction:column}.players-panel .tape-title{margin:6px 0 18px;font-size:27px}#pls{overflow:auto;min-height:0;gap:12px;align-content:start;padding:12px 5px}.pr{min-height:72px;padding:8px}.pr img{width:34px;height:34px}.pr b{font-size:20px}
.drawing-panel{grid-column:2;grid-row:1;min-height:0;display:flex;flex-direction:column;padding:12px 12px 6px}.round-strip{flex:none}.canvas-paper{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center;background:#eee4f1}.canvas-paper canvas{flex:none;width:min(100cqw,160cqh);height:min(100cqh,62.5cqw);aspect-ratio:8/5;border-radius:3px}.sb{flex:none;font-size:14px}
.game-chat{grid-column:3;grid-row:1;margin:0;min-height:0;display:flex;flex-direction:column;padding:10px 12px 12px}.chat-tabs{margin:0 0 12px;flex:none}.chat-tab{font-size:20px;padding:9px 5px}#guess-panel{flex:1;min-height:0;display:flex;flex-direction:column}#chat{height:auto;flex:1;min-height:0}#gf{flex:none}#round-info{overflow:auto;min-height:0}
.game-toolbar{grid-row:2;grid-column:2/4;padding:10px 12px;gap:12px;justify-content:space-evenly}.game-toolbar .tl{gap:4px}.game-toolbar .pal{padding:0 10px;max-width:none;gap:7px}.tool-button{width:36px;height:38px}.color-swatch{width:24px;height:24px}.game-toolbar .ac{gap:6px}
.results-sheet,.avatar-editor{width:100%;margin:0 auto;overflow:auto;max-height:100%}.profile-popover{z-index:5;max-height:calc(100dvh - 150px);overflow:auto}
@media(min-width:1001px) and (max-height:800px){
 main{grid-template-rows:68px minmax(0,1fr);gap:8px}.brand-logo{width:110px}.land{grid-template-rows:minmax(0,1fr) 86px;gap:18px 5%}.logo .hero-logo{max-height:17dvh}.logo-subtitle{font-size:21px}.party-hero{gap:8px}.tag{font-size:23px}.notebook{padding:19px 26px 17px 56px}.play-heading{font-size:32px;margin-bottom:9px}.nickname-row{margin-bottom:10px}.b.big{font-size:26px;padding:9px}.notebook>.primary{margin-bottom:14px}.or-divider{margin:8px 0;font-size:21px}.practice-link,.quick-link{margin-top:9px;font-size:17px}.feature-note{font-size:19px;padding:9px}.feature-note .icon{width:23px;height:23px}
 .lob{padding-top:10px}.party-rules{padding:22px 16px 12px}.party-rules h2{font-size:26px;margin-bottom:8px}.set{gap:8px}.set label{padding:7px}.room-invite{margin-bottom:10px}.party-rules .primary{font-size:27px}.tape-title{margin-bottom:10px}.pc,.invite-card{min-height:132px}.pc img{width:50px;height:50px}#lpl{max-height:165px}.lobby-social{gap:14px}.chat-empty h3{font-size:24px}.quiet-cat{height:55px}.chat-starters .b{font-size:16px;padding:6px 9px}
}
@media(min-width:701px) and (max-width:1100px){
 .gm{grid-template-columns:150px minmax(0,1fr) 250px;gap:12px}.pr{gap:5px}.pr b{font-size:17px}.pr img{width:28px;height:28px}.chat-tab{font-size:17px}.round-badge{font-size:16px;padding:5px 7px}.timer-badge{font-size:20px;padding:5px}.hint{font-size:23px}.lob{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.set label{font-size:18px}.land{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.notebook{padding-left:43px;padding-right:18px}.b.big{font-size:25px}.play-heading{font-size:32px}.tag{font-size:22px}.logo-subtitle{font-size:20px}
}
@media(max-width:700px){
 body{padding:0 12px 64px}main{height:calc(100dvh - 68px);grid-template-rows:58px minmax(0,1fr);gap:8px}.brandbar{gap:7px}.brand-logo{width:92px}.brandbar .landing-nav .nav-button{font-size:0}.brandbar .room-nav .nav-button{font-size:0}.brandbar .room-nav .icon{display:block}.room-top{position:static;translate:none;flex:1}.room-label{font-size:15px;padding:5px 7px;gap:4px}.room-label .icon{display:none}.count-badge{font-size:15px;padding:6px;gap:3px}.count-badge .icon{display:none}.room-nav{gap:5px}.room-label b{letter-spacing:0}
 .land{padding:0 3px 4px;grid-template-columns:1fr;grid-template-rows:minmax(110px,1fr) auto 65px;gap:12px;max-width:460px}.party-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:5px 10px;width:100%}.logo-paper{width:100%;padding:0 3px 7px}.logo .hero-logo{width:100%;max-height:110px}.logo-subtitle{font-size:13px}.hero-art{grid-column:2;grid-row:1;width:100%;height:100%;max-height:140px}.tag{grid-row:2;grid-column:1/-1;font-size:18px;line-height:1.15}.tag br{display:none}.tag:after{height:3px;margin-top:3px}.play-stack{margin:0;padding-right:8px;padding-bottom:5px}.notebook{padding:17px 17px 14px 40px}.play-heading{font-size:28px;margin-bottom:8px}.nickname-row{font-size:16px;margin-bottom:10px}.nickname-row input{font-size:17px}.b.big{font-size:23px;padding:9px}.b.big .icon{width:23px;height:23px}.notebook>.primary{margin-bottom:13px}.or-divider{margin:7px 0;font-size:18px}.join-row input{font-size:17px;padding:7px}.join-row .b{font-size:19px;padding:7px 11px}.practice-link,.quick-link{font-size:15px;margin-top:8px}.feature-notes{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0}.feature-note{font-size:13px;gap:3px;padding:6px 2px;min-height:0}.feature-note .icon{width:19px;height:19px}
 .lob{padding:5px 2px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:13px}.lobby-social{grid-template-rows:auto minmax(0,1fr);gap:10px}.tape-title{font-size:20px;margin-bottom:2px}#lpl{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));max-height:115px;padding:10px 3px 4px;gap:9px}.pc,.invite-card{min-height:95px;padding:10px 4px 5px;font-size:15px}.pc img{width:33px;height:33px;margin-bottom:3px}.status-pill{font-size:12px}.invite-card .icon{width:25px;height:25px}.lobby-chat .tb{font-size:17px;margin:4px;padding:5px 8px}.lobby-chat .body{padding:5px 9px}.quiet-cat{height:35px}.chat-empty h3{font-size:18px}.chat-empty small{font-size:13px}.chat-starters{gap:5px;margin:5px 0}.chat-starters .b{font-size:12px;padding:4px}.chat-starters .b:first-child{flex-basis:auto}.chat-starters .icon{display:none}#lci{font-size:16px;padding:6px}#lcf{gap:6px}#lcf .b{font-size:16px;min-width:54px;padding:5px}#lcstatus{min-height:0;margin:0}
 .party-rules{padding:14px 12px 10px;margin:0;display:block}.party-rules h2{font-size:21px;margin:0 0 6px}.room-invite{display:none}.set{display:grid;grid-template-columns:1fr 1fr;gap:6px}.set label{font-size:14px;padding:5px;gap:4px}.set label>.icon,.aa-icon{display:none}.set select{font-size:14px;width:65px;padding:3px}.set label:last-child{grid-column:1/-1}.set label:last-child select{margin-left:auto}.party-rules .primary{font-size:22px;padding:8px;margin-top:10px}.party-rules .quiet-link{font-size:13px;margin:5px auto 0}.party-rules .u{font-size:12px;margin:6px 0 0}
 .gm{padding:3px 0;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto 55px minmax(100px,.45fr);gap:10px}.drawing-panel{grid-column:1;grid-row:1;padding:7px}.round-strip{gap:4px;padding-bottom:6px}.round-badge{font-size:14px;padding:4px 6px}.hint{font-size:19px;padding:5px}.timer-badge{font-size:18px;padding:4px}.timer-badge .icon{width:18px}.sb{font-size:11px;min-height:0;padding:4px 0 0}.practice-controls .b{font-size:13px;padding:3px 7px;margin-top:4px}.game-toolbar{grid-column:1;grid-row:2;padding:6px;gap:5px}.game-toolbar .tl{width:auto;gap:3px}.tool-button{width:28px;height:29px;padding:3px}.tool-button .icon{width:22px;height:22px}.game-toolbar .pal{width:auto;max-width:none;border:0;padding:4px;gap:7px}.color-swatch{width:20px;height:20px}.game-toolbar .ac{width:auto;gap:8px}.ac label{font-size:13px}.ac input{width:50px}.players-panel{grid-column:1;grid-row:3;display:block}.players-panel .tape-title{display:none}#pls{height:100%;padding:3px;gap:8px;display:flex}.pr{min-height:0;min-width:125px;padding:4px 7px;gap:5px}.pr img{width:26px;height:26px}.pr b{font-size:15px}.pr small{font-size:11px}.pr .score{font-size:17px}.game-chat{grid-column:1;grid-row:4;padding:5px 9px 8px}.chat-tabs{margin:0 0 4px}.chat-tab{font-size:16px;padding:5px}.game-chat #chat{padding:2px 0}.game-chat #chat p{font-size:15px;padding:3px}.game-chat #chat .s{font-size:13px}#gf{margin-top:4px}#gi{font-size:15px;padding:5px}#gf .b{padding:4px 8px}.page-drawing-tools{gap:5px;padding:6px;bottom:8px;flex-wrap:nowrap}.page-drawing-tools .b{font-size:13px;padding:5px 6px}.page-drawing-tools>span{display:none}.ink-color-label{font-size:12px}.ink-color-label input{width:22px;height:22px}
}
@media(max-width:700px){.party-rules .clip{display:none}.party-rules{rotate:0}.party-rules:before{rotate:0}.party-rules .primary{margin-bottom:6px}}
@media(min-width:701px){#lpl{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}.party-rules .clip{top:-7px;width:42px;height:22px}.party-rules .clip:before{top:-14px;height:19px;left:7px;right:7px;border-width:2px}}

/* The homepage illustration stands alone after removing the title sheet. */
.party-hero{display:flex;justify-content:center;align-items:center;gap:0}.party-hero .hero-art{flex:0 1 auto;height:auto;width:100%;max-height:420px}
@media(max-width:700px){.party-hero .hero-art{width:100%;height:100%;max-height:180px;object-fit:contain}}

/* Feature cards open as larger notes cut from the same colored paper. */
.sticky-dialog{background:#45245338;padding:30px 20px}
.sticky-dialog>.win{position:relative;background:var(--note);border:0;border-radius:3px 8px 5px 2px;padding:28px 12px 12px;max-width:560px;max-height:calc(100dvh - 70px);box-shadow:3px 12px 0 #4b226c12,0 20px 60px #35154540;rotate:-1deg;animation:note-open .2s ease-out}
.sticky-dialog>.win:before{content:'';position:absolute;top:4px;left:calc(50% - 48px);width:96px;height:28px;background:var(--tape);rotate:-7deg;opacity:.9;pointer-events:none}
.sticky-dialog .tb{background:transparent;color:var(--ink);padding:18px 18px 8px;font-size:32px;align-items:center;border:0;box-shadow:none}
.sticky-dialog .body{background:transparent;padding:16px 24px 22px;font-size:22px}
.sticky-dialog .dialog-close{color:var(--ink);background:#ffffff60;width:36px;height:36px;border-radius:50%;flex-shrink:0}
.sticky-dialog .score-grid{background:#ffffff40;padding:14px 5px;border-radius:8px}
.sticky-dialog .u{margin:18px 0 0;color:var(--ink);font-size:18px}
@keyframes note-open{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.sticky-dialog .tb{font-size:27px;padding:16px 10px 5px}.sticky-dialog .body{font-size:19px;padding:12px 14px 18px}}
@media(prefers-reduced-motion:reduce){.sticky-dialog>.win{animation:none}}
/* Compact roster, more room for conversation. */
.lobby-social{gap:16px}#lpl{grid-template-columns:repeat(auto-fill,minmax(105px,120px));max-height:142px;gap:12px;padding:10px 6px 6px}.pc,.invite-card{min-height:112px;font-size:18px;padding:12px 6px 7px}.pc img{width:42px;height:42px;margin-bottom:5px}.pc b{margin-bottom:4px}.status-pill{font-size:14px;padding:2px 8px}.invite-card .icon{width:30px;height:30px}.invite-card{gap:6px}.roster .tape-title{margin-bottom:6px}.lobby-chat .body{padding:12px 16px 14px}.chat-empty h3{font-size:25px}
/* The drawing board uses the classic Paint window: tools at left, colors below. */
.gm{grid-template-columns:166px minmax(0,1fr) 330px;grid-template-rows:minmax(0,1fr);gap:14px;padding:0 0 4px}
.players-panel{grid-row:1}.players-panel .tape-title{font-size:24px;margin:5px 0 10px}#pls{gap:9px;padding:10px 3px}.pr{min-height:56px;padding:6px 8px;gap:7px}.pr img{width:29px;height:29px}.pr b{font-size:17px}.pr small{font-size:12px}.pr .score{font-size:19px}
.drawing-panel{padding:3px;display:flex;flex-direction:column;gap:0;background:#ece9d8;border:1px solid #2867b0;border-radius:6px 6px 0 0;box-shadow:0 3px 10px #25476830;overflow:hidden}
.drawing-panel:before,.drawing-panel:after{display:none}
.paint-title{display:flex;align-items:center;gap:7px;flex:none;min-height:29px;padding:4px 8px;background:linear-gradient(#448ce5,#1667d4 48%,#0a51b9 50%,#287ce4);color:white;font:600 14px/1.2 'Segoe UI',Arial,sans-serif;border-radius:3px 3px 0 0;text-shadow:1px 1px #164d92}
.drawing-panel .round-strip{padding:5px 6px;gap:8px;background:#ece9d8;border-bottom:1px solid #aaa994}.drawing-panel .round-badge,.drawing-panel .timer-badge{background:transparent;border:0;border-radius:0;font-size:19px;padding:3px}.drawing-panel .hint{background:transparent;clip-path:none;rotate:0;font-size:25px;padding:3px;color:#342a3b}.drawing-panel .timer-badge .icon{width:21px;height:21px}
.paint-workspace{display:grid;grid-template-columns:65px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;flex:1;min-height:0;gap:0;background:#ece9d8}
#gtl{display:contents}#gtl:before{display:none}#gtl .tl{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(2,28px);grid-auto-rows:29px;align-content:start;justify-content:center;width:auto;padding:6px 2px;gap:3px;background:#ece9d8;border-right:1px solid #aca899}
#gtl .tool-button{width:28px;height:29px;min-width:0;padding:3px;color:#29363b;border:1px solid transparent;border-radius:0;box-shadow:none}#gtl .tool-button .icon{width:21px;height:21px}#gtl .tool-button.on{background:#d6e6f9;border:1px solid #376b9b;box-shadow:inset 1px 1px #fff}#gtl .tool-button:hover:enabled{background:#fff4c7;border-color:#b6a16c}
#gtl .pal{grid-column:1/3;grid-row:2;display:flex;align-items:center;justify-content:flex-start;gap:5px;max-width:none;width:auto;padding:7px 8px;background:#ece9d8;border:0;border-top:1px solid #aca899;min-height:36px}
#gtl .color-swatch{width:22px;height:22px;border-radius:0;border:1px solid #777;box-shadow:inset 1px 1px #ffffff70}#gtl .color-swatch.on{outline:2px solid #355e94;outline-offset:1px;box-shadow:inset 0 0 0 2px white}
#gtl .ac{grid-column:1;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:8px;width:auto;padding:6px 2px}#gtl .ac label{display:flex;flex-direction:column;gap:3px;font:11px/1.2 'Segoe UI',Arial,sans-serif;color:#343434}#gtl .ac input{width:52px;accent-color:#286cc1}#gtl .action-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.drawing-panel .canvas-paper{grid-column:2;grid-row:1;margin:0;flex:none;min-height:0;background:white;border:0;border-radius:0;box-shadow:none;align-items:center;justify-content:center;overflow:hidden}
.drawing-panel .canvas-paper canvas{border:0;border-radius:0;width:min(100cqw,160cqh);height:min(100cqh,62.5cqw);aspect-ratio:8/5}
#gtl.off .tl,#gtl.off .pal,#gtl.off .ac{opacity:.65}
.drawing-panel .sb{font:12px/1.3 'Segoe UI',Arial,sans-serif;color:#524f44;text-align:left;padding:5px 7px;min-height:0;background:#ece9d8;border-top:1px solid #aca899}
.practice-controls:has([hidden]){display:none}.practice-controls .b{font-size:15px;margin:4px 0;padding:4px 10px;border-radius:3px;background:#f7f6ed}
.game-chat{grid-row:1;grid-column:3;padding:9px 12px 12px}.game-chat #gi{font-size:20px;padding:11px 10px}.game-chat #gf{margin-top:8px;gap:8px}.game-chat #gf .b{min-width:48px}
@media(min-width:701px) and (max-width:1100px){.gm{grid-template-columns:130px minmax(0,1fr) 270px;gap:10px}.pr{gap:4px}.pr b{font-size:15px}.pr img{width:24px;height:24px}.drawing-panel .hint{font-size:21px}.drawing-panel .round-badge,.drawing-panel .timer-badge{font-size:16px}}
@media(max-width:700px){
 body{padding:0 8px max(6px,env(safe-area-inset-bottom))}main{height:calc(100dvh - max(8px,env(safe-area-inset-bottom)));grid-template-rows:54px minmax(0,1fr);gap:5px}
 .page-drawing-tools{display:none!important}#page-ink{display:none}.brand-logo{width:82px}.room-label{font-size:14px}.room-nav .nav-button{padding:6px}.room-nav{gap:4px}.count-badge{padding:5px}
 .lobby-social{gap:8px}#lpl{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));max-height:100px;padding:8px 3px 4px;gap:8px}.pc,.invite-card{min-height:82px;font-size:14px;padding:9px 4px 4px}.pc img{width:29px;height:29px;margin-bottom:2px}.status-pill{font-size:11px}.invite-card .icon{width:23px;height:23px}.lobby-chat .body{padding:6px 9px 9px}#lci{font-size:17px;padding:9px}#lcf .b{font-size:17px;padding:7px}.quiet-cat{height:37px}.chat-empty h3{font-size:19px}
 .party-rules{padding:10px 12px 7px}.party-rules h2{font-size:19px;margin-bottom:5px}.party-rules .primary{font-size:21px;padding:7px;margin:7px 0 4px}.party-rules .host-note{font-size:12px;margin:4px 0}.party-rules .quiet-link{margin-top:3px}.set{gap:5px}.set label{padding:4px}.lob{gap:10px;padding-top:4px}
 .gm{grid-template-columns:1fr;grid-template-rows:minmax(295px,1fr) 40px minmax(170px,.6fr);gap:8px;padding:0 0 2px}
 .drawing-panel{grid-column:1;grid-row:1;padding:2px;border-radius:4px 4px 0 0}.paint-title{min-height:23px;font-size:12px;padding:3px 6px}.drawing-panel .round-strip{padding:3px 4px;gap:4px}.drawing-panel .round-badge,.drawing-panel .timer-badge{font-size:14px;padding:2px}.drawing-panel .hint{font-size:19px;padding:2px}.drawing-panel .timer-badge .icon{width:17px;height:17px}
 .paint-workspace{grid-template-columns:33px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 33px}
 #gtl .tl{grid-template-columns:28px;grid-auto-rows:26px;gap:0;padding:3px 1px;align-content:start}#gtl .tool-button{width:28px;height:26px;padding:3px}#gtl .tool-button .icon{width:19px;height:19px}
 #gtl .pal{grid-column:2;grid-row:2;gap:6px;padding:5px 6px;min-height:0;justify-content:center}#gtl .color-swatch{width:22px;height:22px}
 #gtl .ac{grid-column:1;grid-row:2;position:relative;align-self:stretch;padding:0;gap:0}#gtl .ac label{display:none}#gtl .action-buttons{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:0;background:#ece9d8;border-right:1px solid #aca899}#gtl .action-buttons .tool-button{height:25px;width:31px}
 .drawing-panel .sb{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}.practice-controls .b{font-size:13px;padding:3px 8px;margin:3px 0}
 .players-panel{grid-column:1;grid-row:2;display:block}#pls{height:100%;padding:1px 2px;gap:7px}.pr{min-width:112px;min-height:0;padding:3px 6px;gap:5px}.pr img{width:25px;height:25px}.pr b{font-size:14px;line-height:1}.pr small{font-size:10px;line-height:1}.pr .score{font-size:16px}
 .game-chat{grid-column:1;grid-row:3;padding:6px 9px 9px;min-height:0}.chat-tabs{margin:0 0 6px}.chat-tab{font-size:17px;padding:6px}.game-chat #chat{min-height:0}.game-chat #chat p{font-size:16px;padding:4px}.game-chat #gi{font-size:17px;padding:10px;min-height:43px}.game-chat #gf{margin-top:6px;gap:7px}.game-chat #gf .b{min-width:45px;padding:6px 9px}#round-info{font-size:16px;padding:4px}
}
@media(max-width:380px){#gtl .pal{gap:4px}#gtl .color-swatch{width:20px;height:20px}}
@media(max-width:700px) and (max-height:700px){.gm{grid-template-rows:minmax(240px,1fr) 36px minmax(145px,.5fr)}.paint-title{min-height:21px}.game-chat .chat-tab{padding:4px}.game-chat #gi{min-height:38px;padding:7px}.game-chat #gf{margin-top:4px}}
/* Keep the 640x400 drawing coordinate system undistorted on every viewport. */
.drawing-panel .canvas-paper canvas{width:min(100cqw,160cqh);height:min(100cqh,62.5cqw);max-height:100%;aspect-ratio:8/5}
@media(max-width:700px){
 #gtl .pal{padding-right:63px;gap:4px}#gtl .color-swatch{width:20px;height:20px}
 #gtl .ac{display:contents}#gtl .ac label{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:center;justify-self:end;align-self:center;padding:0 5px;font-size:9px;gap:0}#gtl .ac input{width:45px}
 #gtl .action-buttons{position:static;grid-column:1;grid-row:1;align-self:end;justify-self:center;z-index:1}
 #gtl .tl{padding-bottom:78px}
 .pr small{display:none}.pr b{line-height:1.1}.pr{align-items:center}
}
@media(max-width:700px){
 .paint-workspace{grid-template-columns:59px minmax(0,1fr)}
 #gtl .tl{grid-template-columns:repeat(2,27px);grid-auto-rows:28px;padding:3px 1px;gap:1px}
 #gtl .tl .tool-button{width:27px;height:28px}
 #gtl .action-buttons{display:grid;grid-template-columns:repeat(2,27px);gap:1px;padding-bottom:3px;border:0}
 #gtl .action-buttons .tool-button{width:27px;height:26px}
 #gtl .pal{padding-left:4px;padding-right:59px;gap:3px}
}