.desktop-tools { position:fixed; left:22px; bottom:18px; z-index:45; display:flex; gap:4px; padding:6px; background:var(--paper); border:1px solid var(--mac-line); box-shadow:3px 3px 0 #252f4320; }
.desktop-tools button { display:grid; justify-items:center; align-content:center; gap:2px; width:62px; min-height:58px; padding:4px; color:var(--mac-ink); font:12px var(--ui); border:1px solid transparent; }
.desktop-tools svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; }
.desktop-tools button:hover,.desktop-tools button[aria-pressed=true] { border-color:var(--phosphor); background:var(--wash); color:var(--phosphor); }
#desktopToolStatus { position:fixed; bottom:98px; left:22px; z-index:46; font:12px var(--ui); color:var(--ink); background:var(--paper); }
#desktopToolStatus:empty { display:none; }
#desktopPaint { position:absolute; top:0; left:0; z-index:0; pointer-events:none; }
#galleryDesktop { position:absolute; top:0; left:0; z-index:0; pointer-events:none; }
.gallery-preview #desktopPaint { visibility:hidden; }
.gallery-viewer { position:fixed; bottom:98px; left:22px; display:flex; align-items:center; gap:8px; padding:8px; max-width:calc(100vw - 44px); }
.gallery-viewer span { overflow-wrap:anywhere; min-width:0; }
.gallery-actions { display:flex; flex-wrap:wrap; gap:6px; padding:0 7px 7px; }
.gallery-actions button { font-size:12px; }
.gallery-grid canvas { cursor:pointer; }
.painting { touch-action:pinch-zoom; cursor:crosshair; }
.painting .desktop-balls,.painting .desktop-canvas { visibility:hidden; }
.paint-background-only .computer-stage,.gallery-background-only .computer-stage,
.gallery-background-only .desktop-balls,.gallery-background-only .desktop-canvas { visibility:hidden; }
.painting #desktopPaint { outline:1px dashed var(--line); outline-offset:-1px; }
.gallery-viewer { flex-wrap:wrap; }
.toy-window { z-index:50; background:var(--paper); color:var(--ink); border:1px solid var(--mac-line); box-shadow:4px 4px 0 #252f4330; padding:0; font:13px/1.5 var(--ui); touch-action:pan-y pinch-zoom; }
.toy-window button,.game-bar button,.game-foot button { min-height:38px; padding:6px 10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; }
.toy-window button:hover,.toy-window button[aria-pressed=true] { border-color:var(--phosphor); color:var(--phosphor); background:var(--wash); }
.toy-window button:disabled { opacity:.5; cursor:wait; }
.toy-title { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:0 6px 0 12px; gap:12px; border-bottom:1px solid var(--mac-line); background:var(--bezel); }
.toy-title strong { font-size:14px; font-weight:500; }
.toy-title button { min-width:38px; border:0; background:transparent; font-size:20px; }
.paint-tools { position:fixed; left:22px; bottom:98px; max-width:calc(100vw - 44px); width:510px; }
.paint-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; }
.paint-row label { display:flex; align-items:center; gap:5px; }
.paint-row input[type=range] { width:80px; accent-color:var(--phosphor); }
.paint-row .swatch { background:var(--swatch); width:36px; height:36px; min-height:36px; border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line); padding:0; }
.paint-row .swatch:hover,.paint-row .swatch[aria-pressed=true] { background:var(--swatch); outline:2px solid var(--phosphor); outline-offset:1px; }
.toy-status { min-height:18px; margin:0; padding:0 12px 10px; font-size:11px; color:var(--dim); }
.toy-status:empty { display:none; }
.toy-content { padding:16px; }
.toy-content p { margin:0 0 14px; }
.toy-content label { display:block; margin-bottom:14px; }
.toy-content input { display:block; width:100%; padding:9px; border:1px solid var(--mac-line); background:var(--paper); color:var(--ink); font:16px var(--ui); }
.share-window { width:min(380px,calc(100vw - 32px)); max-height:85dvh; }
.toy-window::backdrop { background:#17283955; }
.gallery-window { width:min(740px,calc(100vw - 28px)); max-height:85dvh; overflow:auto; }
.gallery-window .toy-title { position:sticky; top:0; z-index:1; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.gallery-grid figure { margin:0; border:1px solid var(--line); }
.gallery-grid canvas { display:block; width:100%; height:auto; background:#f3f0e8; }
.gallery-grid figcaption { padding:7px; overflow-wrap:anywhere; font-size:12px; }
.artwork-window { width:min(1100px,calc(100vw - 24px)); height:min(900px,calc(100dvh - 32px)); max-width:none; max-height:none; }
.artwork-window[open] { display:flex; flex-direction:column; }
.artwork-window .toy-title { flex-shrink:0; }
.artwork-window .toy-title strong { overflow-wrap:anywhere; }
.artwork-stage { position:relative; flex:1; min-height:0; background:#f4f0e5; }
.artwork-stage canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.gallery-receipts h2 { font-size:14px; margin-top:20px; }
.receipt { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:8px 0; }
.receipt span { overflow-wrap:anywhere; min-width:0; }
.desktop-cat { position:fixed; top:0; left:0; width:32px; height:32px; z-index:35; image-rendering:pixelated; pointer-events:none; }
.computer .screen.playing>.home-view,.computer .screen.playing>.screen-top { visibility:hidden; }
.breakout-panel { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; padding:clamp(14px,2.4cqw,30px) clamp(24px,3.8cqw,46px) clamp(16px,2.4cqw,28px); border-radius:inherit; background:#c5e8f2; color:#0753b8; text-shadow:none; }
.game-bar,.game-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; font:16px 'VT323',monospace; }
.game-bar strong { font-size:20px; font-weight:400; }
.game-bar button,.game-foot button { min-height:40px; min-width:44px; padding:4px 10px; color:#0753b8; background:#c5e8f2; font:14px 'VT323',monospace; }
.game-area { position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.game-area canvas { display:block; max-width:100%; max-height:100%; width:auto; height:auto; aspect-ratio:8 / 5; touch-action:none; }
.game-start { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-height:44px; padding:8px 20px; border:1px solid #0753b8; background:#d4edf5; color:#0753b8; font:22px 'VT323',monospace; box-shadow:3px 3px #0753b844; }
.game-records { position:absolute; inset:16px 24px; z-index:22; padding:12px; overflow:auto; border:1px solid #0753b8; background:#d4edf5; color:#0753b8; font:16px 'VT323',monospace; }
.game-records form { display:flex; flex-wrap:wrap; gap:8px; align-items:end; padding:10px 0; }
.game-records label { flex:1; min-width:100px; }
.game-records input { display:block; width:100%; max-width:240px; padding:6px; font:16px var(--ui); border:1px solid #0753b8; background:#f4f0e5; color:#252f43; }
.game-records button { min-height:38px; padding:6px 10px; border:1px solid #0753b8; color:inherit; background:#f4f0e5; font:inherit; }
.game-records ol { padding-left:24px; }
.game-records li { padding:6px 0; border-bottom:1px solid #0753b833; }
.game-records li span { display:inline-block; width:55%; overflow-wrap:anywhere; vertical-align:top; }
.game-records li strong { display:inline-block; width:15%; }
.game-records li time { font-size:14px; }
.game-foot { gap:6px; }
.game-message { min-width:0; }
.is-zoomed .desktop-tools { visibility:hidden; }
@media(max-width:700px) { .desktop-tools { left:50%; transform:translateX(-50%); bottom:max(12px,env(safe-area-inset-bottom)); }.paint-tools { left:12px; bottom:94px; width:calc(100vw - 24px); max-width:none; max-height:50dvh; overflow:auto; }.paint-row { padding:6px 10px; gap:5px; }.toy-window button { min-height:40px; }.paint-row .swatch { width:32px; min-height:32px; height:32px; }.toy-window { font-size:12px; }.gallery-grid { gap:8px; }#desktopToolStatus { bottom:88px; left:12px; }.breakout-panel { padding:18px 26px 20px; } }