/* DRAW-003–007: viewport-sized room, square canvas and role-specific controls. */
body.painter-mode{overflow:hidden;overscroll-behavior:none}
body.painter-mode>.test-strip,body.painter-mode>#network-status{display:none}
body.painter-mode #app{padding:0;max-width:none;margin:0}
.painter-stage{position:fixed;left:var(--painter-left,0px);top:var(--painter-top,0px);width:var(--painter-vw,100vw);height:var(--painter-vh,100dvh);display:flex;flex-direction:column;gap:5px;background:#0c0e0a;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
.painter-top{display:flex;align-items:center;justify-content:space-between;flex:none;height:36px;margin:0;gap:8px}
.painter-top h2{font-size:20px;line-height:1.2;margin:0}.painter-top small{font-size:12px;color:#bdc8a9;font-weight:400}
.painter-top button{min-height:34px;padding:4px 12px;font-size:13px}
.painter-summary{display:flex;justify-content:space-between;align-items:center;flex:none;height:24px;font-size:12px;border-bottom:1px solid #424e32;gap:6px;white-space:nowrap}
#painter-mode{font-size:11px;color:#abb89c}#room-status{font-weight:700;color:var(--lime)}
.painter-members{display:flex;gap:5px;flex:none;height:32px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.painter-member{flex:1;min-width:48px;max-width:140px;background:#232c1a;border:1px solid #465334;display:flex;align-items:center;flex-direction:column;justify-content:center;font-size:10px;line-height:1.25;padding:1px 3px;overflow:hidden}
.painter-member b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.painter-member small{font-size:10px;white-space:nowrap}.painter-member.drawing{border-color:var(--lime);color:var(--lime)}
.painter-word{flex:none;min-height:30px;max-height:40px;padding:4px 8px;font-size:14px;line-height:20px;background:#29351e;color:#ebf4db;overflow:auto;overflow-wrap:anywhere}
.painter-workspace{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;min-width:0}
.painter-canvas-area{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden}
#board{display:block;background:#fff;border:1px solid #8b9b76;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
#painter-sync{position:absolute;bottom:2px;left:4px;right:4px;max-height:40px;overflow:hidden;padding:3px 6px;background:#171c15e8;color:#d9f3b9;font-size:11px;text-align:center;pointer-events:none}
.painter-sidebar{display:flex;flex:none;flex-direction:column;gap:4px;min-height:0;min-width:0}
.painter-tools{display:flex;flex-direction:column;gap:4px;flex:none}
.painter-palette,.painter-tool-actions{display:flex;align-items:center;gap:5px;min-width:0}
.painter-tools button,.painter-tools select{font-size:12px;min-height:36px;height:36px;padding:3px 10px}
.painter-palette [data-color]{width:36px;flex:none;padding:0;border:2px solid #79836c;background:var(--swatch);box-shadow:inset 0 0 0 2px #ffffff20}
.painter-tools [aria-pressed=true]{outline:2px solid var(--paper);outline-offset:-5px;border-color:var(--lime)}
.painter-palette [data-color][aria-pressed=true]::after{content:'✓';display:block;color:#fff;text-shadow:1px 1px #000,-1px -1px #000;font-size:20px}
.painter-tool-actions select{width:90px}.painter-tool-actions button{flex:1;background:#25301c;color:var(--paper);border:1px solid #7c8d63}
.painter-chat-panel{position:relative;min-height:0;flex:none}
.painter-chat{height:58px;overflow:auto;overscroll-behavior:contain;border:1px solid #455138;padding:3px 7px;font-size:12px;overflow-wrap:anywhere}
.painter-chat p{margin:1px 0;line-height:18px}.painter-chat b{font-weight:400;color:#b6c4a6}
#painter-new-chat{position:absolute;bottom:2px;right:5px;min-height:24px;padding:1px 8px;font-size:11px}
.painter-compose{flex:none}.painter-compose .guess-form{margin:0;gap:6px}.painter-compose .guess-form input{font-size:16px;height:44px;padding:8px;flex:1}.painter-compose .guess-form button{min-width:68px;font-size:13px;padding:4px 8px;height:44px}
#painter-input-status{font-size:11px;line-height:16px;margin:0;color:#c6d3b7;overflow-wrap:anywhere;max-height:32px;overflow:auto}
.painter-rule{font-size:10px;line-height:14px;color:#9fac90;margin:0;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.painter-stage[data-role=drawer] .painter-chat{height:38px}
.painter-stage[data-role=drawer] #painter-input-status{display:none}
#painter-result{font-size:12px;flex:none}#painter-result-detail{margin:0 0 4px;line-height:18px}#again{width:100%;min-height:36px;padding:4px}
.painter-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.painter-keyboard .painter-members,.painter-keyboard .painter-rule{display:none}.painter-keyboard .painter-top{height:30px}.painter-keyboard .painter-chat{height:36px}
@media(min-aspect-ratio:6/5){
 .painter-workspace{flex-direction:row;gap:12px}.painter-sidebar{width:260px;flex:none}.painter-chat-panel{flex:1}.painter-chat,.painter-stage[data-role=drawer] .painter-chat{height:100%}
 .painter-word{min-height:26px;max-height:32px;font-size:13px;padding:2px 8px}.painter-top{height:32px}.painter-members{height:28px}.painter-summary{height:20px}
 .painter-rule{display:none}.painter-stage{gap:4px}
}
@media(max-width:350px){.painter-top h2{font-size:17px}.painter-top small{font-size:10px}.painter-summary{font-size:11px}.painter-palette{gap:4px}.painter-palette [data-color]{width:34px}.painter-tools button{padding-inline:7px}}
@media(max-height:350px) and (min-aspect-ratio:6/5){.painter-stage{gap:3px;padding-block:4px}.painter-sidebar{width:236px}.painter-top{height:28px}.painter-members{height:25px}.painter-tools button,.painter-tools select{height:32px;min-height:32px}.painter-palette [data-color]{width:32px}.painter-compose .guess-form input,.painter-compose .guess-form button{height:40px;min-height:40px}}

/* DRAW-008–010: keep the square and tools together, give answers the remaining space. */
.painter-workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto minmax(64px,16%) auto auto;grid-template-areas:"word" "canvas" "tools" "chat" "compose" "result";gap:5px}
.painter-draw-panel,.painter-sidebar{display:contents}
.painter-canvas-area{grid-area:canvas;align-items:center;justify-content:center;min-height:0}
.painter-tools{grid-area:tools}.painter-chat-panel{grid-area:chat;min-height:0}.painter-compose{grid-area:compose}#painter-result{grid-area:result}
.painter-word{grid-area:word;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:5px 9px;min-height:42px;max-height:110px;overflow:auto}
.painter-word-label{font-size:12px;color:#bac8a8;flex:none}.painter-word-answer{font-size:24px;line-height:1.25;font-weight:850;overflow-wrap:anywhere;min-width:0}
.painter-word-explanation{width:100%;margin:2px 0 0;font-size:14px;line-height:1.45;color:#d8e3ce}
.painter-chat,.painter-stage[data-role=drawer] .painter-chat,.painter-keyboard .painter-chat{height:100%;padding:5px 8px;background:#141a11}
.painter-message{padding:5px 0;border-bottom:1px solid #34432a;overflow-wrap:anywhere}
.painter-message-author{display:block;width:fit-content;max-width:100%;font-size:12px;line-height:1.4;color:#c0cdb2;background:#303b26;padding:1px 6px;border-radius:3px;white-space:normal}
.painter-message .painter-message-answer{margin:4px 0 1px 6px;font-size:21px;line-height:1.4;font-weight:750;color:#f3f1e7;overflow-wrap:anywhere}
.painter-message.is-correct .painter-message-answer{color:var(--lime)}.painter-chat-empty{font-size:14px;color:#9eac91;margin:0}
.painter-compose .guess-form input{font-size:19px}.painter-compose .guess-form button{min-width:72px;font-size:15px}
.painter-choice{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:12px;background:#edede6f7;color:var(--ink);overflow:auto;gap:8px}
.painter-choice h3{margin:0;font-size:22px;line-height:1.25}.painter-choice>p{font-size:13px;line-height:1.4;margin:0}
#painter-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#painter-choices button{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;min-height:108px;padding:9px 5px;background:#fff;color:#121212;border:2px solid #99ad7b}
#painter-choices small{font-size:11px;color:#526044}#painter-choices strong{font-size:22px;line-height:1.3;overflow-wrap:anywhere}#painter-choices span{font-size:11px;line-height:1.4;color:#526044}
#painter-choices [aria-pressed=true]{background:var(--lime);border-color:#121212;opacity:1}
.painter-keyboard .painter-workspace{grid-template-rows:auto minmax(0,1fr) auto minmax(50px,16%) auto auto}
.painter-stage.painter-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1fr);grid-template-rows:30px 28px minmax(0,1fr);grid-template-areas:"top top" "summary members" "work work";gap:4px;padding-block:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-bottom))}
.painter-wide .painter-top{grid-area:top;height:30px}.painter-wide .painter-top h2{display:flex;align-items:baseline;gap:10px}.painter-wide .painter-top small{display:inline}
.painter-wide .painter-summary{grid-area:summary;height:28px;min-width:0;padding-right:8px}.painter-wide #room-status{overflow:hidden;text-overflow:ellipsis}
.painter-wide .painter-members{grid-area:members;height:28px}.painter-wide .painter-rule{display:none}
.painter-wide .painter-workspace{grid-area:work;display:grid;grid-template-columns:var(--painter-panel-width,minmax(0,1fr)) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:none;gap:12px}
.painter-wide .painter-draw-panel{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:4px;min-width:0;min-height:0}
.painter-wide .painter-canvas-area{grid-area:auto;min-width:0;min-height:0;align-items:start;justify-content:start}
.painter-wide .painter-tools{grid-area:auto;display:flex;justify-content:center;align-items:stretch;gap:8px;min-height:0}
.painter-wide .painter-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.painter-wide .painter-palette [data-color]{width:36px;height:36px}.painter-wide .painter-palette #eraser{font-size:11px;padding-inline:2px}
.painter-wide .painter-tool-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.painter-wide .painter-tool-actions select{grid-column:1/-1;width:80px}.painter-wide .painter-tool-actions button{padding:3px 1px;font-size:11px}
.painter-wide .painter-sidebar{display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0;width:auto}
.painter-wide .painter-word{flex:none;min-height:42px;max-height:96px}.painter-wide .painter-word-answer{font-size:26px}
.painter-wide .painter-chat-panel{flex:1;min-height:0}.painter-wide .painter-message .painter-message-answer{font-size:22px}
.painter-wide.painter-compact{padding-block:4px;grid-template-rows:28px 26px minmax(0,1fr);gap:3px}
.painter-compact .painter-top,.painter-compact .painter-summary{height:26px}.painter-compact .painter-members{height:26px}
.painter-compact .painter-word-answer{font-size:22px}.painter-compact .painter-word{min-height:36px;padding-block:3px;max-height:68px}
.painter-compact .painter-message .painter-message-answer{font-size:20px}.painter-compact .painter-tools button,.painter-compact .painter-tools select{min-height:32px;height:32px}.painter-compact .painter-palette [data-color]{height:32px}
.painter-compact #painter-choices strong{font-size:19px}.painter-compact .painter-choice{padding:7px;gap:5px}.painter-compact #painter-choices button{min-height:84px}