/* Every route occupies the same desktop window. Only its document scrolls. */
html,body{height:100%;overflow:hidden}
.stage{height:100dvh;min-height:0;padding:24px 20px 64px;overflow:hidden;grid-template-columns:minmax(0,1fr)}
.window-wrap,.window-wrap.genesis-open,.window-wrap.docs-open{width:min(940px,100%);height:min(900px,100%);min-height:0;min-width:0}
.window-wrap.expanded:not(.minimized){position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;filter:none;z-index:3}
.pixel-window{height:100%;display:flex;flex-direction:column;min-height:0}
.titlebar{flex:0 0 36px}
.window-content,.genesis-open .window-content,.docs-open .window-content{flex:1;min-height:0;padding:0;overflow:hidden;background:var(--dark)}
#home-panel,.genesis-browser{height:100%;min-height:0;display:flex;flex-direction:column}
.browser-toolbar{flex:0 0 48px;background:var(--toolbar);color:var(--toolbar-ink)}
.browser-toolbar .browser-history{flex-shrink:0;width:36px;height:34px;padding:0;font:22px/1 monospace}
.browser-toolbar .browser-history:disabled{opacity:.4;cursor:default;box-shadow:none}
.home-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 20px 14px;scrollbar-gutter:stable;scrollbar-color:#607258 #101d17}
#genesis-frame,#docs-frame,#ecosystem-frame{display:block;flex:1;width:100%;height:0;min-height:0;border:0;background:#101d17}
.browser-loading{position:absolute;inset:48px 0 0;z-index:1;display:grid;place-items:center;margin:0;background:#101d17;color:#ccff00;font:13px var(--pixel)}
.window-wrap.minimized{height:auto;max-width:410px}
.window-wrap.minimized .pixel-window{height:auto}
.motion-toggle{position:fixed}
@media(max-width:600px){.stage{padding:10px 8px 55px}.home-scroll{padding:12px 10px}.browser-toolbar{flex-basis:44px;padding:5px}.window-wrap{height:100%}.motion-toggle{bottom:10px;left:10px;padding:6px 9px}}
@media(max-height:500px){.stage{padding:6px 8px 6px}.motion-toggle{display:none}}

/* Desktop appearance is separate from the frame theme and game UI colors. */
body,#pond,#pond-motion-layer{background:var(--pond-background,#ccff00)}
html[data-pond-ducks=hidden] .pond-plane,html[data-pond-ducks=hidden] #pond{display:none}
.background-controls{position:fixed;bottom:14px;left:18px;z-index:2;display:flex;gap:8px;max-width:calc(100% - 36px)}
.background-controls button{position:static;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;background:#172010;color:#f5efd9;border:2px solid #f1efd5;box-shadow:3px 3px #111a0e;font:11px QuackPixel,monospace;white-space:nowrap}
.background-controls button:disabled{cursor:default;opacity:.55}
.background-swatch{width:13px;height:13px;flex-shrink:0;background:var(--pond-background,#ccff00);border:1px solid #f5efd9}
@media(max-width:600px){.background-controls{left:10px;bottom:10px;gap:6px;max-width:calc(100% - 20px)}.background-controls button{font-size:9px;padding:7px 6px;gap:5px}.background-swatch{width:11px;height:11px}}
@media(max-height:500px){.stage{padding-bottom:48px}.background-controls{bottom:6px}}
