/* A small set of visible tools; details appear only when needed. */
.creative-dock{position:absolute;left:42px;top:48px;z-index:6;display:flex;flex-direction:column;gap:4px;padding:7px;background:#29292deF;border:1px solid #48484e;border-radius:16px;box-shadow:0 8px 30px #0003}.creative-dock button{display:grid;justify-items:center;gap:3px;min-width:58px;min-height:60px;background:none;border-radius:10px;font-size:11px}.creative-dock button>span{font:27px/1 sans-serif}.creative-dock button:hover,.creative-dock button[aria-pressed=true]{background:#44404f;color:#e3d3ff}.presence-status{position:absolute;top:40px;right:20px;z-index:5;background:#29292df0;border:1px solid #48484e;border-radius:30px;padding:9px 13px;font-size:11px;color:#c5b8e3;pointer-events:none}.draw-options{position:absolute;z-index:7;top:48px;left:120px;background:#29292df5;border:1px solid #4e485c;border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:510px;box-shadow:0 8px 30px #0003}.draw-options[hidden]{display:none}.draw-options label{display:flex;align-items:center;gap:6px;font-size:12px}.draw-options input[type=color]{width:34px;height:34px;padding:2px;border:0;background:none}.draw-options input[type=range]{width:65px;accent-color:#c6b4ef}.draw-options button{padding:10px 12px;border-radius:8px;background:#3b3942;font-size:12px;min-height:42px}.draw-options #draw-save{background:#c6b4ef;color:#25202d}.draw-options p{flex-basis:100%;margin:0;color:#c3bcca;font-size:11px;line-height:1.5}.draw-options button:disabled{opacity:.4;cursor:default}#drawing-preview{position:absolute;left:-10000px;top:-10000px;width:20000px;height:20000px;pointer-events:none;z-index:100000;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}#canvas.is-drawing{cursor:crosshair}#canvas.is-drawing .canvas-item{pointer-events:none}#canvas.is-drawing .canvas-selection{display:none}.vector-art{display:block;width:100%;height:100%;stroke:none}.vector-art path{stroke-linecap:round;stroke-linejoin:round}.drawing-art,.shape-art{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}.drawing-art .vector-art{fill:none}.shape-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}.shape-palette button{min-height:48px}.text-art-preview .vector-art{height:100%;min-height:180px;max-height:60vh}#guest-cursors{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.guest-cursor{position:absolute;left:0;top:0;transition:transform .09s linear;will-change:transform}.guest-cursor svg{width:20px;height:25px;fill:var(--cursor);stroke:#17171b;stroke-width:1.4;filter:drop-shadow(0 2px 3px #0004)}.guest-cursor span{display:block;margin:0 0 0 15px;border-radius:4px 8px 8px 8px;padding:4px 7px;background:var(--cursor);color:#17171b;font:11px sans-serif;white-space:nowrap}
#fruit-dialog{max-width:760px;width:calc(100% - 32px);padding:22px;background:#202624;color:#eff3e8;border:1px solid #435449;border-radius:24px}#fruit-dialog .dialog-bar{margin-bottom:14px}#fruit-dialog .dialog-bar h2{font-size:30px}#fruit-dialog button{min-height:44px}#fruit-dialog .dialog-bar button{font-size:12px;padding:8px 12px}.fruit-scorebar{display:flex;align-items:center;gap:24px;margin:14px 0;color:#c2cfc1;font:13px monospace}.fruit-scorebar b{color:#ecf8df;font-size:22px}.fruit-scorebar #fruit-clock{margin-left:auto;font-size:20px}.fruit-scorebar button{background:#3b4b41;border-radius:8px;padding:8px 12px}.fruit-stage{position:relative;height:min(56dvh,450px);min-height:260px;border-radius:17px;overflow:hidden;background:radial-gradient(ellipse at 50% 95%,#314e3d,#17231d 70%);border:1px solid #3c5143}#fruit-game{width:100%;height:100%;display:block;touch-action:none;outline-offset:-5px}#fruit-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px;background:#17231dbb}#fruit-overlay[hidden]{display:none}.fruit-emoji{font-size:56px}#fruit-overlay h3{font-size:28px;font-weight:500;margin:12px 0}#fruit-overlay p{font-size:13px;line-height:1.7;color:#b7cbb9;margin:0 0 20px}#fruit-overlay button{background:#d0e8a9;color:#23331b;padding:13px 28px;border-radius:30px;font-size:15px}#fruit-overlay .fruit-keys{font-size:10px;margin-top:20px;margin-bottom:0}#fruit-announcement{font-size:12px;color:#b7cbb9;min-height:16px;margin:10px 0 0}.light-canvas .creative-dock,.light-canvas .draw-options{color:#efefed}.light-canvas .presence-status{color:#e0d3fa}
@media(max-width:700px){.canvas-header{gap:10px}.canvas-header-actions{gap:4px}.creative-dock{top:42px;left:36px;flex-direction:row;padding:4px;gap:0}.creative-dock button{min-width:50px;min-height:51px;font-size:10px}.creative-dock button>span{font-size:22px}.presence-status{top:102px;left:36px;right:auto;padding:6px 10px;font-size:10px}.draw-options{top:137px;left:36px;right:12px;gap:8px;padding:10px;max-width:420px}.draw-options p{font-size:10px}.draw-options button{font-size:11px;padding:8px}.shape-palette{grid-template-columns:repeat(2,1fr)}.shape-tools{flex-wrap:wrap}.shape-tools .canvas-field{width:100%}.canvas-help{display:none}.canvas-connection{max-width:calc(100% - 45px);font-size:10px}#fruit-dialog{padding:16px;width:calc(100% - 18px)}#fruit-dialog .dialog-bar h2{font-size:25px}#fruit-dialog .dialog-bar p{font-size:10px}.fruit-scorebar{gap:15px}.fruit-stage{height:52dvh}.guest-cursor span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.guest-cursor{transition:none}}

.canvas-connection{top:auto;bottom:90px;left:44px;max-width:330px;line-height:1.5}
@media(max-width:700px){.canvas-connection{left:36px;bottom:92px;max-width:calc(100% - 58px)}#canvas:has(#selection:not([hidden])) .canvas-connection{bottom:170px}}