.drawing-room{position:fixed;z-index:23;pointer-events:auto;background:#fff9e9;color:#213b42;border:3px solid #dab77c;border-radius:12px;box-shadow:0 8px 35px #112a3544;overflow:visible;display:flex;flex-direction:column;font:14px/1.35 system-ui,sans-serif}.drawing-room[hidden]{display:none!important}.draw-header{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#294e59;color:#fff1d3;border-radius:8px 8px 0 0;font-size:11px;letter-spacing:.06em}.draw-header strong{margin-right:auto}.drawing-room button{cursor:pointer;border:1px solid #cad9d4;border-radius:9px;padding:9px 13px;background:#fffdf6;color:#24454b;font:600 13px system-ui;touch-action:manipulation}.drawing-room button.primary{background:#c2e6b0}.drawing-room button:disabled{opacity:.5;cursor:default}.draw-layout{display:flex;min-height:0;flex:1}.draw-main{flex:1;min-width:0;display:flex;flex-direction:column}.draw-prompt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;min-height:34px;background:#f9eed5}.draw-prompt strong{font-size:17px}.draw-prompt small{flex-basis:100%}.draw-canvas-wrap{position:relative;flex:1;min-height:0;background:white;display:flex;align-items:center;justify-content:center}.draw-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;object-fit:contain;background:white}.draw-canvas-cover{position:absolute;inset:0;background:#dce9de;display:grid;place-items:center}.draw-canvas-cover[hidden]{display:none}.draw-controls,.draw-tools{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:#f9f1df}.draw-palette{display:flex;gap:4px;flex-wrap:wrap}.drawing-room .draw-swatch{width:27px;height:27px;border-radius:50%;padding:0;border:2px solid #b2beb8}.drawing-room [aria-pressed=true]{outline:2px solid #24454b;outline-offset:1px}.draw-guess{display:flex;gap:6px;padding:8px 10px;background:#dfecd9}.draw-guess[hidden]{display:none}.draw-guess input{flex:1;min-width:60px;border:1px solid #b3c7bc;border-radius:8px;font:16px system-ui;padding:10px;background:#fffdf5;color:#213b42}.draw-note{margin:0;padding:0 10px 5px;font-size:12px;color:#9a473e;min-height:0}.draw-note:empty{display:none}.draw-side{width:200px;flex-shrink:0;background:#f3e6c8;padding:12px;overflow:auto}.draw-side h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase}.draw-score{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #d9cba9}.draw-score strong{overflow:hidden;text-overflow:ellipsis}.draw-score.is-artist{color:#7959a1}.draw-log{font-size:13px;max-height:35vh;overflow:auto}.draw-log p{margin:8px 0;overflow-wrap:anywhere}.draw-success{color:#34704c;font-weight:600}.draw-mask{letter-spacing:.18em;font-size:19px;font-weight:bold}.drawing-room:not(.expanded) .draw-prompt,.drawing-room:not(.expanded) .draw-tools,.drawing-room:not(.expanded) .draw-side,.drawing-room:not(.expanded) .draw-guess,.drawing-room:not(.expanded) .draw-note{display:none}.drawing-room:not(.expanded) .draw-controls{position:absolute;top:100%;width:100%;box-sizing:border-box;justify-content:center;border-radius:0 0 10px 10px}.drawing-room.expanded{inset:64px 12px 74px!important;width:auto!important;height:auto!important;z-index:85;box-shadow:0 0 0 100vmax #163840aa;overflow:hidden}.drawing-room.expanded .draw-canvas-wrap{flex:none;aspect-ratio:8/5;max-height:calc(100dvh - 325px);min-height:100px}.drawing-room.expanded canvas{object-fit:fill}.drawing-room.expanded .draw-main{overflow:auto}.draw-word{background:#d8edcb!important;min-width:100px}.drawing-room:not(.expanded) .draw-canvas-wrap canvas{object-fit:fill}@media(min-width:1100px){.drawing-room.expanded{left:max(12px,calc((100vw - 1250px)/2))!important;right:max(12px,calc((100vw - 1250px)/2))!important}}@media(max-width:700px){.draw-side{width:115px;padding:8px}.drawing-room.expanded{inset:60px 5px 62px!important}.draw-header{flex-wrap:wrap;font-size:10px;gap:5px}.drawing-room button{padding:8px;font-size:12px}.draw-prompt strong{font-size:14px}.draw-mask{font-size:15px}.draw-side{display:none}.draw-palette{gap:5px}.draw-controls,.draw-tools{padding:6px}.drawing-room.expanded .draw-canvas-wrap{max-height:48dvh}.draw-log{max-height:110px}.draw-guess input{font-size:16px}}@media(max-height:500px){.drawing-room.expanded{inset:5px!important}.draw-header{padding:4px 8px}.draw-prompt{padding:4px 8px;min-height:20px}.drawing-room.expanded .draw-canvas-wrap{max-height:calc(100dvh - 165px)}.draw-tools,.draw-controls{padding:3px;gap:3px}.drawing-room button{padding:5px 8px}.draw-prompt small{display:none}}

.drawing-room .draw-score-toggle{display:none}.draw-canvas-wrap canvas{flex:none}.drawing-room.expanded .draw-canvas-wrap{overflow:hidden}@media(max-width:800px){.drawing-room.expanded .draw-layout{display:block;overflow:auto}.drawing-room.expanded .draw-side{display:none;width:auto;max-height:210px;overflow:auto}.drawing-room.expanded.show-scores .draw-side{display:block}.drawing-room .draw-score-toggle{display:inline-block}.drawing-room.expanded .draw-main{overflow:visible}.drawing-room.expanded .draw-canvas-wrap{height:min(48dvh,calc(100vw * .625));max-height:48dvh}}@media(max-height:500px){.drawing-room.expanded .draw-canvas-wrap{height:calc(100dvh - 170px);max-height:calc(100dvh - 170px)}}
/* In the room the board is only a board. The game has one contextual entry. */
.drawing-room:not(.expanded){border:0;border-radius:0;box-shadow:none;overflow:hidden;cursor:pointer}
.drawing-room:not(.expanded) .draw-header,.drawing-room:not(.expanded) .draw-controls{display:none!important}
.drawing-room:not(.expanded) .draw-layout,.drawing-room:not(.expanded) .draw-main{height:100%}
.drawing-room:not(.expanded) .draw-canvas-wrap{height:100%;width:100%}
.drawing-room.expanded .draw-expand{display:none!important}

/* The score list is already beside the canvas; on phones it follows below. */
@media(max-width:800px){#touch-ui .drawing-room.expanded .draw-side{display:block;max-height:none;width:auto}.drawing-room.expanded .draw-layout{overflow:auto}}