.quisty-pen-tools{display:flex;flex-wrap:wrap;gap:7px;padding:10px 0}.quisty-pen-tools button{flex:1;min-width:80px;background:#251532;color:#fff;border:1px solid #8962a5;border-radius:10px;padding:10px 8px;font:inherit;font-size:.85rem;font-weight:700;touch-action:manipulation}.quisty-pen-tools button[aria-pressed=true]{background:#20d9dc;color:#170d24;border-color:#20d9dc}.quisty-pen-tools button:disabled{opacity:.5}canvas[data-pen=eraser]{cursor:cell}canvas[data-pen=thin],canvas[data-pen=thick]{cursor:crosshair}.drawing-tools,.tekenstrijd-tools{flex-wrap:wrap}.drawing-tools button,.tekenstrijd-tools button{min-width:0;touch-action:manipulation}
@media(max-width:720px){body.in-game .game-panel>#drawingView:not([hidden]),body.in-game .game-panel>#tekenstrijdView:not([hidden]){overflow-y:auto!important;overflow-x:hidden!important}#drawingView>*,#tekenstrijdView>*{flex-shrink:0}}

.quisty-pen-colors{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 0}.quisty-pen-colors button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:2px solid #ffffff80;border-radius:50%;background:var(--pen-color);color:#fff;touch-action:manipulation}.quisty-pen-colors button span{visibility:hidden;font-size:23px;font-weight:900;text-shadow:0 1px 3px #000}.quisty-pen-colors button[aria-pressed=true]{outline:3px solid #37dbe3;outline-offset:2px}.quisty-pen-colors button[aria-pressed=true] span{visibility:visible}.quisty-pen-colors button:focus-visible{outline:3px solid #fff;outline-offset:3px}.quisty-pen-colors button:disabled{opacity:.5}

/* Reserve room for every control; only the square canvas shrinks. */
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])){height:100dvh;min-height:0;overflow:hidden}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .shell{display:flex;flex-direction:column;height:100dvh;padding:6px 8px max(8px,env(safe-area-inset-bottom))}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .topbar{flex:0 0 42px;min-height:42px;padding:0 4px}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .topbar img{width:34px;height:34px}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .game-panel{display:flex;flex:1;min-height:0;flex-direction:column;margin-top:5px;padding:8px 10px;border-width:2px;border-radius:17px;box-shadow:none;overflow:hidden}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .game-meta{flex:0 0 auto;margin-bottom:5px;padding-bottom:5px;font-size:11px}
body:has(:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden])) .error:empty{display:none}
body.in-game .game-panel>:is(#drawingView,#tekenstrijdView).is-drawing:not([hidden]),:is(#drawingView,#tekenstrijdView).is-drawing{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden!important}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-head,.tekenstrijd-head){flex:none}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-head,.tekenstrijd-head) .eyebrow{margin:0;font-size:10px;color:var(--cyan)}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-head,.tekenstrijd-head) h1,:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-head,.tekenstrijd-head) .lead,:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-icon,.tekenstrijd-icon),:is(#drawingView,#tekenstrijdView).is-drawing .tekenstrijd-prompt p,:is(#drawingView,#tekenstrijdView).is-drawing .tekenstrijd-prompt small{display:none}
:is(#drawingView,#tekenstrijdView).is-drawing .tekenstrijd-prompt{flex:none;margin:5px 0;padding:6px 10px;border-radius:12px}
:is(#drawingView,#tekenstrijdView).is-drawing .tekenstrijd-prompt h2{margin:0;font-size:clamp(16px,3vw,24px);line-height:1.15;overflow-wrap:anywhere}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-pad-wrap,.tekenstrijd-pad-wrap){flex:1;min-height:0;width:min(100%,720px);margin:0 auto;gap:6px;grid-template-rows:minmax(0,1fr) auto auto auto}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-canvas-space,.tekenstrijd-canvas-space){container-type:size;width:100%;min-height:0;display:grid;place-items:center}
:is(#drawingView,#tekenstrijdView).is-drawing :is(#drawingPad,#tekenstrijdPad){width:min(100cqw,100cqh);height:min(100cqw,100cqh);min-height:0;border-width:3px;border-radius:12px;box-shadow:none}
:is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-colors{flex-wrap:nowrap;gap:6px;padding:2px 0}
:is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-colors button{flex:0 0 36px;width:36px;height:36px;padding:0;box-shadow:none}
:is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-tools{width:100%;gap:6px;padding:0;flex-wrap:nowrap}
:is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-tools button,:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-tools,.tekenstrijd-tools) button{min-width:0;min-height:44px;padding:6px;font-size:13px;line-height:1.15;box-shadow:none}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-tools,.tekenstrijd-tools){grid-template-columns:1fr 1fr 1.5fr;gap:6px}
:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-tools,.tekenstrijd-tools) .primary{grid-column:auto}
:is(#drawingView,#tekenstrijdView).is-drawing :is(#drawingScores,#tekenstrijdScores),:is(#drawingView,#tekenstrijdView).is-drawing :is(#drawingActions,#tekenstrijdActions){display:none}
@media(min-width:600px) and (max-height:540px){
 :is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-pad-wrap,.tekenstrijd-pad-wrap){width:100%;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:repeat(3,minmax(44px,1fr));align-items:center}
 :is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-canvas-space,.tekenstrijd-canvas-space){grid-row:1/4;grid-column:1;height:100%}
 :is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-colors,:is(#drawingView,#tekenstrijdView).is-drawing .quisty-pen-tools,:is(#drawingView,#tekenstrijdView).is-drawing :is(.drawing-tools,.tekenstrijd-tools){grid-column:2}
}