/* v0.7.11 — subtle board branding, visible equipment and keyboard space. */
.board-watermark{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;user-select:none}
.board-watermark text{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;font-size:110px;letter-spacing:-5px;fill:#5a4773;fill-opacity:.055}
.cosmetic-card{position:relative;isolation:isolate;background:var(--card-background)!important;border:1px solid var(--card-edge)!important;color:var(--card-text,#f7fbff)!important;border-radius:12px;padding:10px;overflow:hidden}
.cosmetic-card .online-player-name:not(.cosmetic-name),.cosmetic-card .game-player-name:not(.cosmetic-name),.cosmetic-card .presence-label,.cosmetic-card .online-player-score,.cosmetic-card .online-player-score small,.cosmetic-card .game-player-score,.cosmetic-card .game-player-score:after,.cosmetic-card .active-drawer-name:not(.cosmetic-name),.cosmetic-card>div>small,.cosmetic-card>strong:not(.cosmetic-name){color:var(--card-text,#f7fbff)!important}
.cosmetic-card .cosmetic-name>.name-text{filter:drop-shadow(0 1px 0 #ffffff70) drop-shadow(0 0 1px #ffffff80)}
.ranking-player.cosmetic-card .rank-score,.ranking-player.cosmetic-card .rank-score small{color:var(--card-text,#f7fbff)!important}
.cosmetic-card:not(.card-preview):after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 85% 10%,#ffffff10,transparent 55%)}
.cosmetic-card.card-epic:after{background:linear-gradient(110deg,transparent 32%,#ffffff12 49%,transparent 66%);background-size:300% 100%;animation:cardShimmer 12s linear var(--cosmetic-phase,0s) infinite}
.card-preview{display:grid!important;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:3px 8px;min-height:82px;padding:10px!important;text-align:left;box-shadow:inset 0 0 0 1px #ffffff40}
.card-preview .card-preview-avatar{grid-column:1;grid-row:1/3;width:42px;height:42px}
.card-preview>strong{grid-column:2;grid-row:1;font-size:13px!important;min-height:0!important;line-height:1.2;color:#f7fbff;align-self:end}
.card-preview>small{grid-column:2;grid-row:2;font-size:10px!important;margin:0!important;color:#e3efff!important;align-self:start}
.shop-dialog .shop-item-icon.card-preview{width:100%;height:90px;border-radius:12px}
body:not(.in-game) .shop-highlight .highlight-art.card-preview{width:100%;height:82px;gap:3px 5px;padding:7px!important}
body:not(.in-game) .online-card li.is-self{border:2px solid #ada5df;background:#eeebfb;box-shadow:inset 3px 0 0 #ada5df}
body:not(.in-game) .online-card li.is-self.cosmetic-card,body.in-game #players li.is-self.cosmetic-card{box-shadow:inset 0 0 0 2px #ffe3a1!important}
.cosmetics-paused .card-epic:after{animation-play-state:paused!important}
@keyframes cardShimmer{from{background-position:0% 50%}to{background-position:200% 50%}}


/* v0.10.0 — one responsive game layout. */
body.in-game{--purple:#f3b31d;--ink:#edf2f7;--muted:#9badc3;--panel:#192638;--edge:#304157;position:fixed;inset:auto 0 auto;top:var(--viewport-top,0);height:var(--viewport-height,100dvh);width:100%;overflow:hidden;background:#101a28;color:var(--ink)}
body.in-game>.site-header,body.in-game footer,body.in-game .site-information,body.in-game .home-main{display:none!important}
body.in-game main{display:block;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:12px;overflow:hidden}
body.in-game #game:not([hidden]){display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;overflow:hidden}
body.in-game .roomline{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;margin:0;height:40px;min-height:40px}
body.in-game .room-identity,body.in-game .room-actions{display:flex;align-items:center;gap:8px;min-width:0}
body.in-game .game-brand{display:grid;place-items:center;background:#f3b31d;color:#142033;border-radius:10px;width:34px;height:34px;font-size:28px}
body.in-game .room-category{color:#9badc3;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
body.in-game .roomline h2{display:flex;align-items:center;gap:7px;font-size:15px;margin:0;letter-spacing:1px}
body.in-game .room-code-caption{font-size:9px;color:#9badc3}
body.in-game button,body.in-game select,body.in-game input{font:inherit}
body.in-game button{border-radius:9px;min-height:34px;padding:7px 11px;font-size:12px;background:#f3b31d;color:#172133;border:1px solid transparent;box-shadow:none;font-weight:750}
body.in-game button.secondary,body.in-game .fill-tool{background:#23334a;border:1px solid #3a4e68;color:#edf2f7}
body.in-game button:hover:not(:disabled){filter:brightness(1.1)}
body.in-game button:disabled{opacity:.45;cursor:default}
body.in-game :is(button,input,select,summary):focus-visible{outline:3px solid #f3b31d;outline-offset:2px}
body.in-game .game-menu{position:relative}
body.in-game .game-menu>summary,body.in-game .reaction-menu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:36px;height:34px;background:#23334a;border:1px solid #3a4e68;border-radius:9px;color:#edf2f7}
body.in-game summary::-webkit-details-marker{display:none}
body.in-game .game-menu-panel{position:absolute;right:0;top:42px;width:220px;z-index:70;display:grid;gap:7px;padding:12px;background:#192638;border:1px solid #40536d;box-shadow:0 12px 32px #0008;border-radius:14px}
body.in-game .game-menu-panel label{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px}
body.in-game .game-menu-panel select{width:88px;color:#edf2f7;background:#23334a;border:1px solid #40536d;border-radius:7px;padding:7px}
body.in-game .game-menu-panel button{width:100%;text-align:left}
body.in-game .game-menu-panel .sound-toggle{display:flex;align-items:center;gap:10px}
body.in-game .game-menu-panel svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
body.in-game #game>.game-layout{display:grid!important;grid-template-columns:190px minmax(0,1fr) 285px!important;grid-template-rows:minmax(0,1fr)!important;gap:12px;flex:1;min-height:0;overflow:hidden}
body.in-game #game>.game-layout>.card{margin:0;border:1px solid #304157;border-radius:16px;background:#192638;color:#edf2f7;box-shadow:none;min-width:0;min-height:0}
body.in-game #game>.game-layout>.players,body.in-game #game>.game-layout>.players[open]{display:flex!important;flex-direction:column;grid-column:1;grid-row:1;position:static;width:auto;max-height:none;padding:12px;overflow:hidden}
body.in-game .players>summary{flex:none;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:13px;color:#bdcce0;padding:0 2px 10px;margin:0;border:0;background:none}
body.in-game .players .count{background:#2c3d55;color:#d9e3ef;border:0;font-size:11px;padding:3px 7px}
body.in-game #players{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;margin:0;padding:1px;scrollbar-width:thin;overscroll-behavior:contain}
body.in-game #players li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:2px 9px;flex:none;min-height:67px;padding:10px;border:1px solid #35475e;border-radius:11px;background:#213148;color:#edf2f7;text-align:left;overflow:hidden}
body.in-game #players .avatar{grid-column:1;grid-row:1/3;width:42px;height:42px;min-width:0;flex:none}
body.in-game #players .game-player-main{display:contents}
body.in-game #players .game-player-name{grid-column:2;grid-row:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end}
body.in-game #players .game-player-score{grid-column:2;grid-row:2;font-size:11px;color:#b7c7db;align-self:start}
body.in-game #players li[data-role="drawer"]{border-color:#efb623;box-shadow:inset 3px 0 #efb623}
body.in-game #players li[data-role="guessed"]{border-color:#5bc7a0;box-shadow:inset 3px 0 #5bc7a0}
body.in-game #players li.is-self:not(.is-drawer):not(.has-guessed){border-color:#8aabdc}
body.in-game #players .player-report-button{position:absolute;right:3px;top:2px;min-height:18px;width:18px;height:18px;padding:2px;opacity:.55;background:transparent;border:0}
body.in-game .player-report-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
body.in-game .players>.fine{font-size:10px;line-height:1.5;color:#94a8c1;margin:10px 1px 0}
body.in-game #game>.game-layout>.drawing{grid-column:2;grid-row:1;display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:10px;overflow:hidden}
body.in-game .canvas-header{flex:none;min-width:0;padding:0 2px 10px}
body.in-game .turnline{display:flex;align-items:center;gap:10px;min-height:58px;margin:0}
body.in-game #timer.game-timer{--timer-progress:100%;position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:2px;width:52px;height:52px;min-width:52px;padding:5px;background:conic-gradient(#f3b31d var(--timer-progress),#34445b 0);border:0;border-radius:50%;color:#f5f7fb;box-shadow:none;isolation:isolate}
body.in-game #timer.game-timer:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#192638;z-index:-1}
body.in-game #timer.game-timer span{font-size:20px;font-variant-numeric:tabular-nums;font-weight:850}
body.in-game #timer.game-timer small{font-size:8px;color:#a7b9d0;margin-top:8px}
body.in-game #timer.game-timer[data-urgent=true]{background:conic-gradient(#fb726d var(--timer-progress),#34445b 0);color:#ffaaa5}
body.in-game .turn-meta{display:flex;flex-direction:column;gap:4px;width:88px;flex:none;color:#b3c4da;font-size:11px;line-height:1.3}
body.in-game #status{display:block;font-size:11px;font-weight:700}
body.in-game .round-drawing{font-size:10px;color:#91a8c3}
body.in-game .game-word-block{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:4px;text-align:center;overflow:hidden}
body.in-game #wordCaption{font-size:9px;font-weight:800;letter-spacing:1.1px;color:#9badc3}
body.in-game #word{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:clamp(16px,1.8vw,25px);color:#f7f9fc;line-height:1.15;word-break:break-word}
body.in-game .guess-hint{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%;margin:0;padding:0;background:none;border:0;box-shadow:none}
body.in-game .hint-copy{min-width:0}
body.in-game #guessHintWord{font-size:clamp(15px,1.8vw,24px);letter-spacing:3px;color:#f7f9fc;overflow-wrap:anywhere;line-height:1.1}
body.in-game #buyHint{flex:none;font-size:9px;padding:5px 7px;min-height:27px;background:#293950;color:#ffd476;border:1px solid #6b5832}
body.in-game #hintHelp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
body.in-game .board-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;min-height:0;width:100%;padding:0;overflow:hidden;background:#111c2c;border-radius:10px}
body.in-game .board-surface{position:relative;display:block;flex:none;max-width:100%;max-height:100%;padding:0;background:#fffdf8;border:1px solid #c9d1d8;border-radius:8px;overflow:hidden;box-shadow:none;isolation:isolate}
body.in-game #board{display:block;max-width:100%;max-height:100%;border:0;border-radius:0;background:#fffdf8;touch-action:none}
body.in-game.drawer-view #board{cursor:crosshair}
body.in-game.drawer-view #board.eraser-mode{cursor:cell}
body.in-game.drawer-view #board.fill-mode{cursor:copy}
body.in-game .draw-cursor{position:absolute;z-index:8;pointer-events:none;font-size:25px;line-height:1;color:#efac15;text-shadow:1px 1px 0 #fff,-1px -1px 0 #fff;transform:translate(-4px,-19px) rotate(-15deg)}
body.in-game .turn-progress{position:static;flex:none;max-width:100%;height:5px;margin:0;overflow:hidden;border:0;border-radius:8px;background:#34445b}
body.in-game .turn-progress span{display:block;height:100%;background:#f3b31d;border-radius:8px;transition:width .2s linear}
body.in-game .turn-progress.is-urgent span{background:#fb726d}
body.in-game .drawing-report-button{position:absolute;right:8px;bottom:8px;z-index:15;width:30px;height:30px;min-height:30px;padding:6px;background:#ffffffd9;border:1px solid #c8cdd3;color:#687180}
body.in-game .drawing-report-button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
body.in-game .turn-prompt,body.in-game .round-result,body.in-game .match-results{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;padding:18px;background:#fffdf8f5;color:#24334a;overflow:auto}
body.in-game .turn-prompt-card,body.in-game .round-result-card{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;width:min(100%,440px);padding:12px}
body.in-game .turn-prompt-art{display:grid;place-items:center;width:66px;height:66px;background:#ffe6a1;border:1px solid #f3ca67;border-radius:22px;font-size:52px;line-height:1;color:#775018;transform:rotate(-9deg)}
body.in-game .turn-prompt h3,body.in-game .round-result h3{font-size:clamp(17px,2vw,25px);line-height:1.15;margin:4px 0 0;color:#203148}
body.in-game .turn-prompt p,body.in-game .round-result p{font-size:12px;line-height:1.5;color:#68768a;max-width:330px;margin:0}
body.in-game .turn-prompt[data-mode=waiting] .turn-prompt-card{padding-bottom:50px}
body.in-game .turn-prompt[data-mode=choose] .active-drawer{display:none!important}
body.in-game .turn-prompt:not([data-mode=waiting]) .turn-prompt-art{display:none}
body.in-game .active-drawer{position:static;display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:0;background:none;border:0;box-shadow:none}
body.in-game .active-drawer .avatar{width:56px;height:56px;flex:none}
body.in-game .active-drawer-name{font-size:14px;color:#203148}
body.in-game .active-drawer-label{font-size:11px;color:#68768a}
body.in-game #choices{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:8px 0 0}
body.in-game #choices button{padding:12px 18px;min-width:95px;background:#f3b31d;border:1px solid #daa017;color:#213047;font-size:15px;box-shadow:0 3px 0 #c99522}
body.in-game #start.game-start{position:absolute;z-index:12;bottom:18px;left:50%;transform:translateX(-50%);min-width:160px;max-width:90%;padding:11px 18px;font-size:14px;box-shadow:0 3px 0 #b88115;white-space:nowrap}
body.in-game .round-result small{font-size:10px;font-weight:800;letter-spacing:1px;color:#68768a}
body.in-game .round-result-word{font-size:clamp(23px,3vw,36px);line-height:1.15;overflow-wrap:anywhere;color:#203148}
body.in-game .round-winners{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-height:140px;overflow:auto;margin:4px 0}
body.in-game .round-winner{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 7px;align-items:center;text-align:left;padding:7px 10px;border:1px solid #bce3d4;border-radius:12px;background:#e9f6ed;max-width:180px}
body.in-game .round-winner .avatar{width:30px;height:30px;grid-row:1/3}
body.in-game .round-winner span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#203148}
body.in-game .round-winner b{font-size:10px;color:#237950}
body.in-game .round-announcement{position:absolute;inset:10px auto auto 50%;transform:translateX(-50%);z-index:9;white-space:nowrap;padding:5px 10px;border-radius:20px;background:#24344ae8;color:#fff;font-size:11px;pointer-events:none}
body.in-game .match-results{flex-direction:column;gap:10px;padding-bottom:64px}
body.in-game .results-title{font-size:12px;font-weight:900;letter-spacing:1px;color:#384d69}
body.in-game .results-subtitle{font-size:20px;font-weight:850;color:#203148}
body.in-game .podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;width:100%;margin-top:5px}
body.in-game .podium-player{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:150px;flex:1;padding:12px 8px;border:1px solid #d8dfe7;border-radius:14px;background:#f0f3f6;color:#203148}
body.in-game .podium-player .avatar{width:54px;height:54px}
body.in-game .podium-player:first-child{background:#fff0bc;border-color:#e5c46d}
body.in-game .podium-player strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:13px}
body.in-game .podium-player small{font-size:12px;color:#526784}
body.in-game #drawingTools.tools{flex:none;display:flex;flex-direction:column;gap:7px;padding:9px 0 0;margin:0;border:0;background:none}
body.in-game .tool-settings{display:flex;align-items:center;gap:6px;min-width:0;margin:0}
body.in-game .tool-settings button{height:30px;min-height:30px;padding:4px 9px;font-size:11px}
body.in-game #brush{font-size:21px;width:34px;padding:0}
body.in-game .tool-settings [aria-pressed=true],body.in-game .fill-tool:has(input:checked){background:#f3b31d;color:#172133;border-color:#f3b31d}
body.in-game .fill-tool{position:relative;display:grid;place-items:center;width:32px;height:30px;flex:none;padding:0;cursor:pointer;border-radius:8px}
body.in-game .fill-tool input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
body.in-game .fill-tool>span:not(.sr-only){font-size:20px}
body.in-game .color-picker{display:block;width:30px;height:30px;flex:none;margin:0}
body.in-game #color{display:block;width:30px;height:30px;border:1px solid #50647f;border-radius:7px;background:none;padding:2px}
body.in-game .brush-width{display:flex;align-items:center;gap:7px;color:#edf2f7;flex:1;min-width:45px;max-width:180px;margin:0}
body.in-game #width{min-width:30px;width:100%;height:22px;padding:0;accent-color:#f3b31d;background:none}
body.in-game #clear{margin-left:auto}
body.in-game .color-palette{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:0;padding:0}
body.in-game .color-palette .color-swatch{flex:none;width:25px;height:25px;min-height:25px;min-width:0;padding:0;border:2px solid #728096;border-radius:6px;background:var(--swatch);box-shadow:none}
body.in-game .color-palette .color-swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #f3b31d;transform:none}
body.in-game #instruction,body.in-game .drawing>.gallery-disclosure{display:none!important}
body.in-game #game>.game-layout>.game-chat{display:flex!important;flex-direction:column;grid-column:3;grid-row:1;padding:12px;overflow:hidden}
body.in-game .game-chat-heading{position:relative;display:flex;align-items:center;justify-content:space-between;flex:none;gap:6px;padding-bottom:8px;border-bottom:1px solid #304157}
body.in-game .game-chat h3{margin:0;font-size:13px;color:#c7d5e6}
body.in-game .reaction-menu{position:relative}
body.in-game .reaction-menu>summary{width:29px;height:27px;font-size:20px}
body.in-game .reaction-menu>div{position:absolute;right:0;top:33px;display:flex;gap:5px;padding:8px;border:1px solid #40536d;background:#23334a;border-radius:10px;z-index:20;box-shadow:0 8px 20px #0005}
body.in-game .reaction-menu button{font-size:21px;padding:4px 6px;background:#354861}
body.in-game #messages{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-height:0;height:auto;max-height:none;overflow:auto;padding:9px 0;margin:0;color:#dbe4ee;font-size:12px;scrollbar-width:thin;overscroll-behavior:contain;overflow-wrap:anywhere}
body.in-game #messages>div,body.in-game #messages>p{margin:0 0 6px;padding:5px 7px;border-radius:7px;line-height:1.4}
body.in-game #messages .system{color:#95aac4;background:#213147;font-size:11px}
body.in-game #messages .success{color:#8ee5b8;background:#203e39}
body.in-game #messages strong{color:#f8cf70;font-weight:750}
body.in-game .message-report-button{float:right;padding:0!important;min-height:18px!important;width:18px;background:transparent!important;color:#91a5bf!important;border:0!important}
body.in-game .message-report-button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
body.in-game .guess-status{flex:none;margin:0 0 7px;padding:6px 8px;background:#24364d;border:0;border-radius:7px;color:#aabdd5;font-size:10px;line-height:1.3}
body.in-game .message-form{display:flex;flex:none;gap:6px;margin:0;padding:0;min-width:0}
body.in-game #guess{flex:1;min-width:0;width:0;height:42px;min-height:42px;padding:9px 11px;border:1px solid #455d7c;border-radius:9px;background:#101c2d;color:#fff;font-size:14px;box-shadow:none}
body.in-game #guess::placeholder{color:#9dafc6}
body.in-game #chatForm button{width:41px;min-height:42px;padding:0;font-size:23px}
body.in-game #notice:empty{display:none}
body.in-game #notice:not(:empty){position:fixed;left:50%;bottom:15px;transform:translateX(-50%);z-index:90;max-width:90%;margin:0;padding:10px 15px;border-radius:10px;background:#30455f;color:#fff;font-size:12px}
body.in-game [hidden]{display:none!important}
@media(min-width:761px) and (max-width:1150px) and (min-height:521px){
body.in-game #game>.game-layout{grid-template-columns:150px minmax(0,1fr) 230px!important;gap:8px}
body.in-game #players li{grid-template-columns:34px minmax(0,1fr);padding:8px;gap:3px 6px}
body.in-game #players .avatar{width:34px;height:34px}
body.in-game .turn-meta{width:65px}
body.in-game .guess-hint{flex-wrap:wrap;gap:3px}
}
@media(max-width:760px){
body.in-game main{padding:6px}
body.in-game #game:not([hidden]){gap:6px}
body.in-game .roomline{height:32px;min-height:32px;gap:5px}
body.in-game .room-identity,body.in-game .room-actions{gap:5px}
body.in-game .game-brand{width:28px;height:28px;font-size:24px;border-radius:8px}
body.in-game .room-category,body.in-game .room-code-caption,body.in-game .game-back span{display:none}
body.in-game .roomline h2{font-size:13px}
body.in-game .roomline button{min-height:29px;height:29px;font-size:10px;padding:5px 8px}
body.in-game .game-menu>summary{height:29px;width:31px}
body.in-game #game>.game-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:62px minmax(0,1fr) clamp(125px,24dvh,190px)!important;gap:6px}
body.in-game #game>.game-layout>.players,body.in-game #game>.game-layout>.players[open]{grid-column:1;grid-row:1;padding:0;border:0;background:transparent;border-radius:0}
body.in-game .players>summary,body.in-game .players>.fine{display:none}
body.in-game #players{display:flex;flex-direction:row;gap:6px;padding:1px 1px 3px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none}
body.in-game #players li{width:122px;min-width:122px;min-height:56px;height:56px;grid-template-columns:32px minmax(0,1fr);gap:2px 6px;padding:7px;border-radius:10px}
body.in-game #players .avatar{width:32px;height:32px}
body.in-game #players .game-player-name{font-size:10px}
body.in-game #players .game-player-score{font-size:9px}
body.in-game #game>.game-layout>.drawing{grid-column:1;grid-row:2;padding:6px;border-radius:12px}
body.in-game .canvas-header{padding:0 0 6px}
body.in-game .turnline{gap:6px;min-height:44px}
body.in-game #timer.game-timer{width:40px;height:40px;min-width:40px}
body.in-game #timer.game-timer:before{inset:3px}
body.in-game #timer.game-timer span{font-size:15px}
body.in-game #timer.game-timer small{font-size:7px}
body.in-game .turn-meta{width:58px;gap:2px}
body.in-game #status{font-size:9px}
body.in-game .round-drawing{font-size:8px}
body.in-game #wordCaption{font-size:7px;letter-spacing:.7px}
body.in-game #word{font-size:14px}
body.in-game .game-word-block{gap:3px}
body.in-game .guess-hint{gap:4px;flex-wrap:wrap}
body.in-game #guessHintWord{font-size:16px;letter-spacing:2px}
body.in-game #buyHint{font-size:8px;min-height:21px;padding:3px 5px}
body.in-game .board-wrap{gap:4px;border-radius:7px}
body.in-game .board-surface{border-radius:6px}
body.in-game .turn-progress{height:4px}
body.in-game .turn-prompt,body.in-game .round-result,body.in-game .match-results{padding:8px}
body.in-game .turn-prompt-card,body.in-game .round-result-card{gap:5px;padding:4px}
body.in-game .turn-prompt-art{width:43px;height:43px;border-radius:14px;font-size:35px}
body.in-game .turn-prompt h3,body.in-game .round-result h3{font-size:16px;margin:2px 0}
body.in-game .turn-prompt p,body.in-game .round-result p{font-size:10px;line-height:1.35;max-width:250px}
body.in-game .turn-prompt[data-mode=waiting] .turn-prompt-card{padding-bottom:38px}
body.in-game #choices{gap:6px;margin:5px 0}
body.in-game #choices button{font-size:12px;min-width:75px;min-height:32px;padding:8px}
body.in-game .active-drawer .avatar{width:37px;height:37px}
body.in-game .active-drawer-name{font-size:11px}
body.in-game .active-drawer-label{font-size:9px}
body.in-game #start.game-start{bottom:10px;min-height:30px;min-width:130px;padding:7px 12px;font-size:11px}
body.in-game .round-result-word{font-size:24px}
body.in-game .round-result small{font-size:8px}
body.in-game .round-winners{max-height:74px;gap:4px;margin:0}
body.in-game .round-winner{padding:4px 6px;grid-template-columns:24px minmax(0,1fr)}
body.in-game .round-winner .avatar{width:24px;height:24px}
body.in-game .round-announcement{top:5px;font-size:9px;padding:4px 7px}
body.in-game .match-results{padding-bottom:43px;gap:4px}
body.in-game .results-title{font-size:8px}
body.in-game .results-subtitle{font-size:14px}
body.in-game .podium{gap:5px;margin:0}
body.in-game .podium-player{padding:6px 4px;gap:3px;border-radius:8px}
body.in-game .podium-player .avatar{width:31px;height:31px}
body.in-game .podium-player strong{font-size:10px}
body.in-game .podium-player small{font-size:9px}
body.in-game #drawingTools.tools{gap:5px;padding-top:6px}
body.in-game .tool-settings{gap:4px}
body.in-game .tool-settings button{height:27px;min-height:27px;padding:4px 6px;font-size:9px}
body.in-game #brush{width:28px;font-size:18px}
body.in-game .fill-tool{width:27px;height:27px}
body.in-game .color-picker,body.in-game #color{width:27px;height:27px}
body.in-game .brush-width{gap:4px;max-width:100px}
body.in-game .color-palette{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:4px;padding:2px;scrollbar-width:none}
body.in-game .color-palette .color-swatch{width:23px;height:23px;min-height:23px;border-radius:5px}
body.in-game #game>.game-layout>.game-chat{grid-column:1;grid-row:3;padding:7px;border-radius:12px}
body.in-game .game-chat-heading{padding:0 1px 4px;height:23px}
body.in-game .game-chat h3{font-size:10px}
body.in-game .reaction-menu>summary{height:21px;width:25px;font-size:17px;border-radius:6px}
body.in-game #messages{font-size:11px;padding:4px 0}
body.in-game #messages>div,body.in-game #messages>p{margin-bottom:3px;padding:3px 6px;line-height:1.3}
body.in-game #messages .system{font-size:10px}
body.in-game .guess-status{font-size:9px;line-height:1.2;padding:3px 5px;margin-bottom:4px}
body.in-game #guess{height:38px;min-height:38px;padding:8px 10px;font-size:16px}
body.in-game #chatForm button{min-height:38px;width:39px;font-size:21px}
body.in-game.keyboard-open .roomline,body.in-game.keyboard-open #game>.game-layout>.players{display:none!important}
body.in-game.keyboard-open #game>.game-layout{grid-template-rows:minmax(0,1fr) minmax(115px,.8fr)!important}
body.in-game.keyboard-open #game>.game-layout>.drawing{grid-row:1}
body.in-game.keyboard-open #game>.game-layout>.game-chat{grid-row:2}
body.in-game.keyboard-open .turnline{min-height:35px}
body.in-game.keyboard-open #timer.game-timer{width:32px;height:32px;min-width:32px}
body.in-game.keyboard-open #wordCaption{display:none}
}
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape){
body.in-game main{padding:5px}
body.in-game #game:not([hidden]){gap:5px}
body.in-game .roomline{height:28px;min-height:28px}
body.in-game #game>.game-layout{grid-template-columns:110px minmax(0,1fr) 200px!important;grid-template-rows:minmax(0,1fr)!important;gap:6px}
body.in-game #game>.game-layout>.players,body.in-game #game>.game-layout>.players[open]{display:flex!important;grid-column:1;grid-row:1;padding:5px}
body.in-game #players{flex-direction:column;overflow:auto;touch-action:pan-y}
body.in-game #players li{width:100%;min-width:0;grid-template-columns:28px minmax(0,1fr);padding:5px;min-height:48px;height:48px}
body.in-game #players .avatar{width:28px;height:28px}
body.in-game #game>.game-layout>.drawing{grid-column:2;grid-row:1;padding:5px}
body.in-game #game>.game-layout>.game-chat{grid-column:3;grid-row:1;padding:6px}
body.in-game .turnline{min-height:38px}
body.in-game #timer.game-timer{width:34px;height:34px;min-width:34px}
body.in-game .turn-meta{width:55px}
body.in-game .canvas-header{padding-bottom:4px}
body.in-game #drawingTools.tools{padding-top:4px;gap:3px}
body.in-game .tool-settings{gap:3px}
body.in-game .color-palette{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;padding:2px;scrollbar-width:none}
body.in-game .color-palette .color-swatch{width:20px;height:20px;min-height:20px}
body.in-game .turn-prompt-art{display:none!important}
body.in-game .turn-prompt h3{font-size:15px}
body.in-game .turn-prompt p{font-size:10px}
body.in-game .turn-prompt-card{gap:4px}
}
@media(prefers-reduced-motion:reduce){body.in-game *,body.in-game *:before,body.in-game *:after{animation:none!important;transition:none!important}}

body.in-game .podium-place{font-size:14px;font-weight:900;color:#9c741d}body.in-game .podium-score{font-size:12px;color:#526784}body.in-game .active-drawer>div{display:flex;flex-direction:column;gap:3px}body.in-game .active-drawer small{font-size:10px;color:#68768a}

/* Reset remaining legacy surfaces with explicit game ownership. */
body.in-game .canvas-header{background:none;border:0;border-radius:0;box-shadow:none;margin:0}
body.in-game .canvas-header .turnline{padding-bottom:0}
body.in-game #players li[data-role=drawer]{background:#3e392a}
body.in-game #players li[data-role=guessed]{background:#1f3d38}
body.in-game #players .game-player-score:after{color:#a7bad0}
body.in-game #chatForm.message-form{background:none;padding:0;border:0}
body.in-game #guess{background:#101c2d!important;border-color:#455d7c!important;color:#fff!important}
body.in-game #guess:disabled{background:#203047!important;color:#9bafc9!important;opacity:1}
body.in-game .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.in-game .turn-progress[data-urgent=true] span{background:#fb726d}
body.in-game #word{margin-top:0}
body.in-game .board-wrap{border:0}
@media(max-width:760px){
body.in-game:not(.keyboard-open) #game>.game-layout{grid-template-rows:62px minmax(0,calc((100vw - 28px)*.65 + 70px)) minmax(125px,1fr)!important}
body.in-game.drawer-view:not(.keyboard-open) #game>.game-layout{grid-template-rows:62px minmax(0,calc((100vw - 28px)*.65 + 137px)) minmax(125px,1fr)!important}
}
@media(max-width:1200px) and (max-height:600px) and (orientation:landscape){
body.in-game:not(.keyboard-open) #game>.game-layout,body.in-game.drawer-view:not(.keyboard-open) #game>.game-layout{grid-template-rows:minmax(0,1fr)!important}
}

body.in-game #game>.game-layout{display:grid!important}
body.in-game #game>.game-layout>.drawing{align-self:stretch;justify-self:stretch;height:100%;max-height:none;flex:none;width:auto}
body.in-game #game>.game-layout>.game-chat{align-self:stretch;height:100%;max-height:none}
body.in-game #start.game-start{background:#f3b31d;color:#172133;border-color:#dda51f}
body.in-game #messages b{color:#f8cf70}
body.in-game #messages p{border-bottom-color:#304157}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
body.in-game:is(.typing-guess,.keyboard-open) main{padding:5px;height:100%;width:100%}
body.in-game:is(.typing-guess,.keyboard-open) #game{gap:0}
body.in-game:is(.typing-guess,.keyboard-open) .roomline,
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.players,
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.players[open]{display:none!important}
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 50px!important;gap:5px;align-items:stretch}
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.drawing{grid-column:1!important;grid-row:1!important;padding:4px;align-self:stretch;height:100%;min-height:0}
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.game-chat{display:flex!important;grid-column:1!important;grid-row:2!important;height:50px;min-height:0;padding:4px;align-self:stretch}
body.in-game:is(.typing-guess,.keyboard-open) .game-chat-heading,
body.in-game:is(.typing-guess,.keyboard-open) #messages,
body.in-game:is(.typing-guess,.keyboard-open) #guessStatus{display:none!important}
body.in-game:is(.typing-guess,.keyboard-open) .canvas-header{padding:0 0 3px;margin:0}
body.in-game:is(.typing-guess,.keyboard-open) .turnline{display:flex!important;min-height:30px;height:30px;gap:7px}
body.in-game:is(.typing-guess,.keyboard-open) #timer.game-timer{width:28px;height:28px;min-width:28px;padding:3px}
body.in-game:is(.typing-guess,.keyboard-open) #timer.game-timer span{font-size:12px}
body.in-game:is(.typing-guess,.keyboard-open) #timer.game-timer small{font-size:6px}
body.in-game:is(.typing-guess,.keyboard-open) .turn-meta,
body.in-game:is(.typing-guess,.keyboard-open) #wordCaption,
body.in-game:is(.typing-guess,.keyboard-open) #buyHint{display:none!important}
body.in-game:is(.typing-guess,.keyboard-open) .game-word-block{flex:1;flex-direction:row;justify-content:center}
body.in-game:is(.typing-guess,.keyboard-open) #guessHint{margin:0;padding:0}
body.in-game:is(.typing-guess,.keyboard-open) #guessHintWord{font-size:17px;letter-spacing:2px}
body.in-game:is(.typing-guess,.keyboard-open) .board-wrap{flex:1;min-height:0}
body.in-game:is(.typing-guess,.keyboard-open) #chatForm{height:40px;min-height:40px;padding:0;gap:5px}
body.in-game:is(.typing-guess,.keyboard-open) #guess{height:40px;min-height:40px;font-size:16px}
body.in-game:is(.typing-guess,.keyboard-open) #chatForm button{height:40px;min-height:40px}
}

/* Chat rows keep their natural height even with the full 80-message history. */
body :is(#messages,#lobbyMessages)>p{flex:0 0 auto!important;height:auto;min-height:0;max-height:none;width:100%;margin:0 0 6px;line-height:1.5;overflow-wrap:anywhere;overflow:hidden;box-sizing:border-box}
body :is(#messages,#lobbyMessages) .chat-message-copy{display:block;min-width:0;line-height:1.45}
body :is(#messages,#lobbyMessages) .message-text{display:inline;position:static;visibility:visible;opacity:1;font-size:13px;line-height:1.45;color:#e1e9f4;white-space:pre-wrap;overflow-wrap:anywhere}
body :is(#messages,#lobbyMessages) .chat-player-name{display:inline;margin:0 6px 0 0;font-size:11px;line-height:1.45;vertical-align:baseline;color:#f4ca71}
body :is(#messages,#lobbyMessages) .system .message-text{font-size:11px;color:#a7bdd8}
body :is(#messages,#lobbyMessages) .has-avatar{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:start;padding-top:8px;padding-bottom:8px}
body :is(#messages,#lobbyMessages) .chat-avatar{width:30px;height:30px;min-width:30px;grid-column:1;grid-row:1;align-self:start;margin:0}
body :is(#messages,#lobbyMessages) .has-avatar .chat-message-copy{grid-column:2;grid-row:1}
body :is(#messages,#lobbyMessages) .cosmetic-card .message-text{color:var(--card-text,#e1e9f4)}
body :is(#messages,#lobbyMessages) .correct-message{border:1px solid #366151;background:#203d36;color:#b9e8cd}
body :is(#messages,#lobbyMessages) .correct-message .message-text{color:#b9e8cd;font-weight:700}
body :is(#messages,#lobbyMessages) .message-report{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:24px;min-height:24px;padding:3px;border:0;border-radius:5px;background:transparent;color:#93a9c5;box-shadow:none;opacity:.7}
body :is(#messages,#lobbyMessages) .message-report svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
body.in-game .chat-hint-controls{display:flex;flex:none;align-items:center;gap:8px;min-height:30px;margin:0 0 7px;padding:0}
body.in-game .chat-hint-controls #buyHint{display:block!important;flex:none;min-height:28px;padding:5px 8px;font-size:10px;background:#2a3b52;color:#ffd174;border:1px solid #806b3c;border-radius:8px}
body.in-game .chat-hint-controls #buyHint:disabled{opacity:.65}
body.in-game .chat-hint-controls #hintHelp{position:static;clip:auto;width:auto;height:auto;overflow:visible;font-size:9px;line-height:1.3;color:#b4c3d6}
body.in-game #timer.game-timer{display:grid;place-items:center;aspect-ratio:1;overflow:hidden;padding:0;font-variant-numeric:tabular-nums}
body.in-game #timer.game-timer>#timerSeconds{display:block;position:static;margin:0 0 7px;line-height:1;letter-spacing:-.5px;font-size:20px;font-weight:850;white-space:nowrap}
body.in-game #timer.game-timer>small{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);margin:0;font-size:7px;line-height:1;color:#b6c6dc}
body.in-game .board-wrap{gap:0}
@media(max-width:760px){
body.in-game #timer.game-timer>#timerSeconds{font-size:15px;margin-bottom:6px;letter-spacing:-.5px}
body.in-game #timer.game-timer>small{bottom:5px;font-size:6px}
body.in-game #messages .message-text{font-size:12px}
body.in-game #messages .chat-player-name{font-size:10px}
body.in-game .chat-hint-controls{margin-bottom:4px;gap:7px}
body.in-game .chat-hint-controls #buyHint{min-height:27px;font-size:10px}
}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout{grid-template-rows:minmax(0,1fr) auto!important}
body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.game-chat{height:auto;min-height:50px;max-height:108px;justify-content:flex-end}
body.in-game:is(.typing-guess,.keyboard-open) #timer.game-timer>#timerSeconds{font-size:11px;margin-bottom:4px;letter-spacing:-.4px}
body.in-game:is(.typing-guess,.keyboard-open) #timer.game-timer>small{bottom:3px;font-size:5px}
body.in-game:is(.typing-guess,.keyboard-open) .chat-hint-controls{margin:0 0 4px;min-height:25px}
body.in-game:is(.typing-guess,.keyboard-open) .chat-hint-controls #buyHint{display:block!important;min-height:25px;padding:3px 7px}
}

body.in-game .turnline .give-up{flex:none;min-height:29px;padding:5px 8px;font-size:10px;color:#ffc0b3;border-color:#89564f;background:#51352f}
body.in-game .brush-visibility{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.4;color:#d6e3f5}
body.in-game .brush-visibility input{width:20px;height:20px;min-width:20px;accent-color:#f3b31d}
body.in-game .drawing-like{position:absolute;left:10px;bottom:10px;z-index:20;min-height:32px;padding:7px 11px;border:1px solid #d3b1a9;border-radius:9px;background:#fff4ef;color:#9b4a4a;font-size:11px;box-shadow:0 2px 6px #0001}
body.in-game .drawing-like[aria-pressed=true]{background:#f9dce0;border-color:#d38a98;color:#9a2845}
body.in-game .drawing-report-button{right:9px;top:9px;bottom:auto;width:32px;height:32px;min-height:32px;opacity:.85}
body.in-game #players .player-report-button{right:3px;top:3px;min-height:22px;width:22px;height:22px;background:#23344ac9;color:#bdd1ea;opacity:.85}
body.in-game #players .game-player-name{padding-right:10px}
body.in-game .round-result-card{padding-bottom:40px}
@media(max-width:760px){
body.in-game .turnline .give-up{min-height:25px;font-size:9px;padding:4px 6px}
body.in-game .drawing-like{min-height:28px;left:6px;bottom:6px;padding:5px 9px;font-size:10px}
body.in-game .round-result-card{padding-bottom:30px}
}

/* Short landscape screens: players above the board, chat beside it.
   Every track is bounded by the visual viewport, including while typing. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1200px){
 body.in-game main{padding:5px max(5px,env(safe-area-inset-right)) 5px max(5px,env(safe-area-inset-left))}
 body.in-game #game:not([hidden]){gap:5px}
 body.in-game .roomline{height:29px;min-height:29px;gap:6px}
 body.in-game .room-category,body.in-game .room-code-caption{display:none}
 body.in-game .roomline h2{font-size:12px}
 body.in-game .roomline button{height:28px;min-height:28px;padding:4px 8px;font-size:10px}
 body.in-game .game-menu>summary{width:30px;height:28px}
 body.in-game:not(.typing-guess):not(.keyboard-open) #game>.game-layout{grid-template-columns:minmax(0,1fr) clamp(190px,27vw,240px)!important;grid-template-rows:48px minmax(0,1fr)!important;gap:5px}
 body.in-game:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.players,
 body.in-game:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.players[open]{grid-column:1!important;grid-row:1!important;display:flex!important;position:static;min-width:0;min-height:0;width:auto;height:auto;max-height:none;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden}
 body.in-game .players>summary,body.in-game .players>.fine{display:none}
 body.in-game #players{display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;width:100%;min-height:0;margin:0;padding:0 1px 2px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none}
 body.in-game #players li{flex:0 0 126px;width:126px;min-width:126px;height:45px;min-height:45px;grid-template-columns:27px minmax(0,1fr);gap:2px 6px;padding:5px;border-radius:8px}
 body.in-game #players .avatar{width:27px;height:27px}
 body.in-game #players .game-player-name{font-size:10px}
 body.in-game #players .game-player-score{font-size:9px}
 body.in-game:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.drawing{grid-column:1!important;grid-row:2!important;min-width:0;min-height:0;height:100%;padding:5px}
 body.in-game:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.game-chat{grid-column:2!important;grid-row:1/3!important;min-width:0;min-height:0;height:100%;padding:6px}
 body.in-game .canvas-header{flex:none;padding:0 0 4px}
 body.in-game .turnline{height:36px;min-height:36px;gap:6px}
 body.in-game #timer.game-timer{width:32px;height:32px;min-width:32px}
 body.in-game #timer.game-timer>#timerSeconds{font-size:12px;margin-bottom:5px}
 body.in-game #timer.game-timer>small{bottom:4px;font-size:5px}
 body.in-game .turn-meta{width:58px;font-size:9px}
 body.in-game #status{font-size:9px}
 body.in-game .round-drawing{font-size:8px}
 body.in-game #wordCaption{font-size:7px}
 body.in-game #word,body.in-game #guessHintWord{font-size:14px;letter-spacing:1px}
 body.in-game #drawingTools.tools{gap:3px;padding-top:4px}
 body.in-game .tool-settings{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-height:28px}
 body.in-game .tool-settings>button,body.in-game .tool-settings>.fill-tool,body.in-game .tool-settings>.color-picker{flex:none}
 body.in-game .brush-width{flex:1 0 55px;width:70px;min-width:55px;max-width:90px}
 body.in-game .color-palette{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:2px;scrollbar-width:none}
 body.in-game .color-palette .color-swatch{width:20px;height:20px;min-height:20px}
 body.in-game .game-chat-heading{height:25px;padding-bottom:4px}
 body.in-game .game-chat h3{font-size:10px}
 body.in-game #messages{font-size:11px;padding:4px 0;min-height:0}
 body.in-game #messages .message-text{font-size:11px}
 body.in-game #messages .chat-player-name{font-size:10px}
 body.in-game #guess{height:38px;min-height:38px;font-size:16px;padding:7px 9px}
 body.in-game #chatForm button{width:36px;min-height:38px}
 body.in-game .chat-hint-controls{min-height:26px;margin:0 0 4px;gap:5px}
 body.in-game .chat-hint-controls #buyHint{font-size:9px;min-height:25px;padding:3px 6px}
 body.in-game .chat-hint-controls #hintHelp{font-size:8px}
 body.in-game .turn-prompt h3,body.in-game .round-result h3{font-size:14px}
 body.in-game .turn-prompt p{font-size:10px}
 body.in-game .turn-prompt-art{display:none!important}
 body.in-game #choices{gap:5px;margin:4px 0}
 body.in-game #choices button{min-width:0;min-height:28px;padding:6px 9px;font-size:11px}
 body.in-game .game-menu-panel{max-height:calc(var(--viewport-height,100dvh) - 45px);overflow:auto}
 body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important}
 body.in-game:is(.typing-guess,.keyboard-open) .turn-meta{display:none}
}

/* Reactions stay above the guess field and submit button; no dropdown. */
body.in-game #chatForm.message-form{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:auto 40px;height:auto!important;min-height:0!important;flex:none;gap:6px;padding:0}
body.in-game #chatForm .reaction-bar{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;min-width:0}
body.in-game #chatForm .reaction-bar button{display:grid;place-items:center;width:100%;min-width:0;height:36px;min-height:36px;margin:0;padding:3px;border:1px solid #3c506b;border-radius:8px;background:#23344b;color:#edf2f7;font-size:22px;line-height:1;box-shadow:none;touch-action:manipulation}
body.in-game #chatForm .reaction-bar button:hover:enabled{background:#344b66;border-color:#d1a746}
body.in-game #chatForm .reaction-bar button:disabled{opacity:.4}
body.in-game #chatForm #guess{grid-column:1;grid-row:2;width:100%;min-width:0;height:40px;min-height:40px;margin:0}
body.in-game #chatForm>button[type=submit]{grid-column:2;grid-row:2;width:40px;min-width:40px;height:40px;min-height:40px;margin:0;padding:4px}
body.in-game .draw-cursor{display:block;position:absolute;width:var(--brush-size,32px);height:calc(var(--brush-size,32px) * 1.25);z-index:8;pointer-events:none;line-height:0;text-shadow:none;transform:translate(-12.5%,-90%);filter:drop-shadow(0 1px 1px #0007)}
body.in-game .draw-cursor[hidden]{display:none!important}
body.in-game .draw-cursor svg{display:block;width:100%;height:100%;overflow:visible}
body.in-game .brush-handle{fill:#e5aa41;stroke:#61422a;stroke-width:1.5;stroke-linejoin:round}
body.in-game .brush-ferrule{fill:#cad7e2;stroke:#4a6178;stroke-width:1.5;stroke-linejoin:round}
body.in-game .brush-bristles{fill:var(--brush-color,#efac15);stroke:#253344;stroke-width:1.2;stroke-linejoin:round}
body.in-game .brush-shine{fill:none;stroke:#fff8;stroke-width:2;stroke-linecap:round}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
 body.in-game #chatForm.message-form{gap:4px;grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:auto 38px}
 body.in-game #chatForm .reaction-bar{gap:4px}
 body.in-game #chatForm .reaction-bar button{height:32px;min-height:32px;font-size:21px}
 body.in-game #chatForm #guess{height:38px;min-height:38px}
 body.in-game #chatForm>button[type=submit]{width:38px;min-width:38px;height:38px;min-height:38px}
 body.in-game:is(.typing-guess,.keyboard-open) #game>.game-layout>.game-chat{max-height:142px;min-height:80px}
}

/* Keep the heart in the canvas header, above all drawing and round overlays. */
body.in-game .turnline .drawing-like{position:static;flex:none;display:flex;align-items:center;justify-content:center;min-width:52px;min-height:34px;margin:0;padding:5px 8px;border:1px solid #956674;border-radius:9px;background:#49313f;color:#ffcad7;font-size:17px;line-height:1;white-space:nowrap;box-shadow:none}
body.in-game .turnline .drawing-like[aria-pressed=true]{background:#693649;border-color:#cf849a;color:#ffe3eb}
body.in-game .turnline .drawing-like:disabled{opacity:.7}
body.in-game .turnline .drawing-like[hidden]{display:none!important}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){body.in-game .turnline .drawing-like{min-width:42px;min-height:28px;padding:4px 6px;font-size:15px}}

/* Correct guesses celebrate on the board without intercepting drawing input. */
body.in-game .board-celebrations{position:absolute;inset:0;z-index:7;overflow:hidden;pointer-events:none;user-select:none;border-radius:inherit}
body.in-game .board-celebrations .win-effect{pointer-events:none}
body.in-game .turnline #giveUp[hidden]{display:none!important}
body.in-game .turnline #giveUp:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-height:30px;white-space:nowrap}

/* Keep each correct guess visibly attached to the player who earned it. */
body.in-game .board-celebrations{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px}
body.in-game .board-celebration{position:static;display:flex;justify-content:center;flex:none;min-width:0;max-width:100%;pointer-events:none}
body.in-game .win-announcement{position:relative;z-index:1;display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:8px 12px;border:1px solid #d8ae58;border-radius:12px;background:#17293af2;color:#f6f8fa;box-shadow:0 3px 12px #0003;font-size:13px;line-height:1.2;white-space:nowrap}
body.in-game .win-player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#fff1c8;font-size:inherit;font-weight:850}
body.in-game .win-announcement>span{flex:none;color:#f6f8fa}
body.in-game .win-announcement>small{flex:none;padding:3px 6px;border-radius:6px;background:#f3b31d;color:#172133;font-size:11px;font-weight:850}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
 body.in-game .board-celebrations{gap:4px;padding:6px}
 body.in-game .win-announcement{gap:5px;padding:6px 8px;border-radius:9px;font-size:11px}
 body.in-game .win-announcement>small{font-size:9px;padding:2px 4px}
}

/* One readable notification style, including above open dialogs. */
body #notificationToast{position:fixed;inset:auto;top:max(14px,calc(env(safe-area-inset-top) + 8px));right:max(14px,env(safe-area-inset-right));left:auto;bottom:auto;z-index:20000;display:grid;grid-template-columns:32px minmax(0,1fr) 30px;align-items:center;gap:10px;width:max-content;max-width:min(440px,calc(100vw - 28px));max-height:min(240px,40dvh);overflow:auto;margin:0;padding:12px;border:1px solid #b58c38;border-radius:13px;background:#18293d;color:#f6f8fc;box-shadow:0 12px 38px #0005;font:600 14px/1.55 'Trebuchet MS',Arial,sans-serif;pointer-events:auto;white-space:normal;overflow-wrap:anywhere;transform:none;opacity:1}
body #notificationToast[hidden]{display:none!important}
body #notificationToast .notification-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f3b31d;color:#172133;font-size:19px;font-weight:900;line-height:1}
body #notificationToast .notification-copy{min-width:0;color:#f6f8fc;font-size:14px;line-height:1.55;white-space:pre-line}
body #notificationToast .notification-close{display:grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;margin:0;padding:0;border:1px solid #526b8b;border-radius:8px;background:#283d57;color:#fff;font-size:22px;line-height:1;box-shadow:none}
body #notificationToast[data-tone=error]{border-color:#e7958b}
body #notificationToast[data-tone=error] .notification-icon{background:#f3b7ad;color:#482622}
body #notificationToast[data-tone=success]{border-color:#73bf9b}
body #notificationToast[data-tone=success] .notification-icon{background:#b4e8cd;color:#173b2b}
body #notificationToast[data-tone=reward]{border-color:#e2bc5c}
body #notificationToast button:focus-visible,body #sessionNoticeModal button:focus-visible{outline:3px solid #ffda80;outline-offset:3px}
body #sessionNoticeModal{width:min(420px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);overflow:auto;margin:auto;padding:26px;border:1px solid #c09a48;border-radius:18px;background:#19293d;color:#f4f7fb;box-shadow:0 20px 70px #0007;text-align:center}
body #sessionNoticeModal::backdrop{background:#081221b3;backdrop-filter:blur(4px)}
body #sessionNoticeModal .session-notice-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border:1px solid #cfac5a;border-radius:15px;background:#403923;color:#ffdc81;font-size:29px;font-weight:900}
body #sessionNoticeModal h2{margin:0 0 12px;color:#fff4d9;font-size:23px;line-height:1.25;letter-spacing:-.4px}
body #sessionNoticeModal p{margin:0 0 22px;color:#e0e9f5;font-size:15px;line-height:1.65;overflow-wrap:anywhere}
body #sessionNoticeModal button{width:100%;min-height:44px;padding:11px 16px;border:1px solid #f3b31d;border-radius:10px;background:#f3b31d;color:#172133;box-shadow:none;font-size:14px;font-weight:850}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
 body #notificationToast{top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));max-width:calc(100vw - 20px);grid-template-columns:27px minmax(0,1fr) 28px;gap:8px;padding:10px}
 body #notificationToast .notification-icon{width:27px;height:27px;font-size:17px}
 body #notificationToast .notification-copy{font-size:13px;line-height:1.5}
 body #sessionNoticeModal{padding:22px;max-height:calc(100dvh - 20px)}
 body #sessionNoticeModal h2{font-size:21px}
 body #sessionNoticeModal p{font-size:14px}
}

/* Reserve the palette row so compact drawing layouts cannot clip it. */
body.in-game #drawingTools.tools{flex:0 0 auto;flex-wrap:nowrap;align-items:stretch;min-width:0;width:100%;height:auto;max-height:none;overflow:visible}
body.in-game #colorPalette.color-palette{display:grid!important;grid-template-columns:repeat(12,minmax(24px,1fr))!important;grid-auto-rows:28px;flex:0 0 auto;align-self:stretch;width:100%;max-width:none;min-height:60px;height:auto;gap:4px;padding:2px;margin:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x}
body.in-game #colorPalette .color-swatch{width:100%;height:28px;min-height:28px;min-width:24px;padding:0;background:var(--swatch)!important;border:2px solid #728096;border-radius:5px;box-shadow:none;transform:none}
body.in-game #colorPalette .color-swatch[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px #f3b31d}

/* The artist uses the full drawing area; chat returns after the drawing turn. */
body.in-game.drawer-view #game>.game-layout>.game-chat{display:none!important}
body.in-game.drawer-view #game>.game-layout>.drawing{grid-column:2/-1!important}
@media(max-width:760px),(max-width:1200px) and (max-height:600px){
 body.in-game.drawer-view:not(.typing-guess):not(.keyboard-open) #game>.game-layout,
 body.in-game.drawer-view:is(.typing-guess,.keyboard-open) #game>.game-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:54px minmax(0,1fr)!important}
 body.in-game.drawer-view:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.players,
 body.in-game.drawer-view:is(.typing-guess,.keyboard-open) #game>.game-layout>.players{grid-column:1!important;grid-row:1!important}
 body.in-game.drawer-view:not(.typing-guess):not(.keyboard-open) #game>.game-layout>.drawing,
 body.in-game.drawer-view:is(.typing-guess,.keyboard-open) #game>.game-layout>.drawing{grid-column:1!important;grid-row:2!important}
}