/* A pocket desktop: the same windows, icons and souvenirs share one stage. */
.desktop-window-body{display:contents}
@media(max-width:620px){
 html[data-theme] #world #home .portal-collage{padding:0;overflow:visible}
 html[data-theme] #world #home .portal-collage #web-desktop.mobile-desktop{
  display:block;position:relative;width:100%;height:100svh;min-height:0;padding:0!important;margin:0;
  overflow:hidden;box-sizing:border-box;--mobile-icons-top:146px;--mobile-window-height:360px;
 }
 html[data-theme] #world #home .mobile-desktop .portal-brand{top:12px;left:8px;right:8px;width:auto;padding:0;z-index:20;pointer-events:none}
 html[data-theme] #world #home .mobile-desktop .portal-brand :is(button,#home-uturns){pointer-events:auto}
 html[data-theme] #world #home .mobile-desktop .portal-brand h1{font-size:clamp(25px,7vw,36px);line-height:1.1}
 html[data-theme] #world #home .mobile-desktop .portal-brand>span:first-child{font-size:10px;letter-spacing:2px}
 html[data-theme] #world #home .mobile-desktop #home-uturns{margin-top:8px}
 html[data-theme] #world #home .mobile-desktop #home-uturns .uturn-odometer{padding:5px 7px;gap:7px}
 html[data-theme] #world #home .mobile-desktop #home-uturns .uturn-stat{min-width:35px}
 html[data-theme] #world #home .mobile-desktop .desktop-icons{
  position:absolute;left:5px;right:5px;top:var(--mobile-icons-top)!important;bottom:auto;width:auto;height:var(--mobile-icons-height,224px);
  display:grid;grid-template-columns:repeat(var(--mobile-icon-columns,5),minmax(0,1fr));grid-auto-rows:68px;
  align-items:start;align-content:start;justify-items:center;gap:8px 6px;padding:0 3px 4px;z-index:9;
  overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d4cbd8 #27212e50;
  overscroll-behavior-y:contain;touch-action:pan-y;box-sizing:border-box;
 }
 html[data-theme] #world #home .mobile-desktop .desktop-icons>button{display:grid;grid-template-rows:34px minmax(24px,auto);align-content:start;align-items:end;justify-items:center;width:100%;max-width:82px;height:68px;min-height:68px;padding:0;gap:4px;justify-content:normal;translate:none}
 html[data-theme] #world #home .mobile-desktop .desktop-icons>button>:is(img,svg,span){width:34px;height:34px;min-height:0;margin:0;object-fit:contain;flex:none}
 html[data-theme] #world #home .mobile-desktop .desktop-icons>button>.folder-art{height:24px}
 html[data-theme] #world #home .mobile-desktop .desktop-icons>button>b{align-self:start;margin:0;font:10px/12px var(--desktop-label-font);max-width:100%;padding:1px 3px;min-height:24px;box-sizing:border-box;text-wrap:balance}
 html[data-theme] #world #home .mobile-desktop .desktop-window{
  position:absolute;left:0;top:0;right:auto;bottom:auto;width:min(292px,calc(100% - 30px));max-width:calc(100% - 12px);
  max-height:var(--mobile-window-height);height:auto;min-height:0;margin:0;box-sizing:border-box;
  transform:translate(var(--wx,6px),var(--wy,232px))!important;rotate:0deg;overflow:hidden;touch-action:auto;
 }
 html[data-theme] #world #home .mobile-desktop .desktop-window:not([hidden]){display:flex;flex-direction:column}
 html[data-theme] #world #home .mobile-desktop .desktop-window-body{display:block;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;touch-action:pan-y pinch-zoom}
 html[data-theme] #world #home .mobile-desktop #desk-entry{width:min(332px,calc(100% - 26px))}
 html[data-theme] #world #home .mobile-desktop #desk-view{width:min(232px,calc(100% - 58px));overflow:hidden}
 html[data-theme] #world #home .mobile-desktop #desk-view:not([hidden]){display:flex;flex-direction:column}
 html[data-theme] #world #home .mobile-desktop #desk-view>:is(.desktop-titlebar,.desktop-photo-tools){flex:0 0 auto}
 html[data-theme] #world #home .mobile-desktop #desk-view .desktop-photo-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 html[data-theme] #world #home .mobile-desktop #desk-stickers{width:min(320px,calc(100% - 20px))}
 html[data-theme] #world #home .mobile-desktop .desktop-titlebar,html[data-theme] #world #home .mobile-desktop #desk-entry .desktop-titlebar{position:relative;top:auto;z-index:5;flex:0 0 auto;min-height:38px;height:38px;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
 html[data-theme] #world #home .mobile-desktop .window-grab{touch-action:none;cursor:grab;padding-inline:70px 12px;font-size:12px;min-height:36px}
 html[data-theme] #world #home .mobile-desktop .desktop-titlebar>div{left:5px;gap:3px;height:30px}
 html[data-theme] #world #home .mobile-desktop .desktop-titlebar>div>button{touch-action:manipulation;width:28px;height:28px;min-height:28px;font-size:16px!important}
 html[data-theme] #world #home .mobile-desktop #desk-entry .visual-entry{min-height:0;grid-template-columns:88px minmax(0,1fr);gap:6px;padding:8px 6px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .memory-mode-switch{grid-column:1/-1;justify-self:center;margin:0 0 5px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .shuffle-art{width:65px;height:65px;flex-basis:65px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .shuffle-art svg{width:65px;height:65px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .shuffle-object{gap:9px;padding:0 3px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .area-terminal{padding:3px 5px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .area-terminal>label{padding:0 0 6px;gap:4px}
 html[data-theme] #world #home .mobile-desktop .visual-entry .area-terminal>label svg{width:27px;height:25px}
 html[data-theme] #world #home .mobile-desktop #quick-area-results{max-height:100px}
 html[data-theme] #world #home .mobile-desktop .desktop-menu{gap:5px;padding:6px}
 html[data-theme] #world #home .mobile-desktop .desktop-menu button{min-width:0;min-height:32px;flex:1;padding:3px;font-size:10px}
 html[data-theme] #world #home .mobile-desktop .desk-recordings{padding:7px;gap:7px}
 html[data-theme] #world #home .mobile-desktop .desk-recordings img{height:90px}
 html[data-theme] #world #home .mobile-desktop .desktop-sky img{height:130px}
 html[data-theme] #world #home .mobile-desktop .desktop-contact-strip{padding:5px;gap:4px}
 html[data-theme] #world #home .mobile-desktop .desktop-contact-strip button{height:33px}
 html[data-theme] #world #home .mobile-desktop #desk-stickers .sticker-play{max-height:none}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar{
  position:absolute;left:50%;right:auto;bottom:calc(6px + env(safe-area-inset-bottom,0px));top:auto;
  width:max-content;max-width:calc(100% - 12px);height:56px;min-height:56px;translate:-50% 0;transform:none;display:flex;gap:3px;padding:3px;box-sizing:border-box;z-index:120;
 }
 html[data-theme] #world #home .mobile-desktop .desktop-tasks{display:flex;flex:0 1 auto;min-width:0;max-width:none;flex-wrap:nowrap;justify-content:flex-start;gap:2px;overflow-x:auto;overflow-y:hidden;height:48px;scrollbar-width:none;touch-action:pan-x}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar button{flex:0 0 40px;width:40px;min-width:40px;height:44px;padding:3px;margin:0;box-sizing:border-box}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar :is(svg,img){width:32px;height:32px;object-fit:contain}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar .folder-art{width:30px;height:24px;margin-top:8px}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar :is(.dock-label,.dock-group-start:before){display:none}
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar .desk-reset{flex-basis:30px;width:30px;min-width:30px;font-size:22px!important}
 html[data-theme] #world #home .mobile-desktop #desktop-personalise-open{flex-basis:34px;width:34px;min-width:34px;padding:2px}
 html[data-theme] #world #home .mobile-desktop>.hyd-cat-slot-home{left:auto;right:7px;bottom:83px;width:82px;height:82px;z-index:90}
 html[data-theme] #world #home .mobile-desktop .wallpaper-switch{top:4px;right:3px;width:25px;height:25px;z-index:45}
 html[data-theme] #world #home .mobile-desktop .desktop-sticker.illustrated-sticker:has(img[src*="hyd-"]){width:76px;height:76px}
}
@media(max-width:620px){
 /* Only the dock stays horizontal; desktop shortcuts form a compact grid. */
 html[data-theme] #world #home .mobile-desktop .desktop-icons:after{content:none}
 html[data-theme] #world #home .mobile-desktop .desktop-tasks{scrollbar-width:thin;scrollbar-color:#777b88 #d6d5da}
}

/* P2-2 / P3-3 / O5: usable chrome stays in the visible work area. */
html[data-theme] #world #home .desktop-taskbar{
 position:fixed;left:6px;right:6px;bottom:calc(6px + env(safe-area-inset-bottom,0px));top:auto;
 width:max-content;max-width:calc(100vw - 12px);height:56px;min-height:56px;margin-inline:auto;
 translate:none!important;transform:none!important;display:flex;flex-wrap:nowrap;box-sizing:border-box;z-index:120;
}
html[data-theme] #world #home .desktop-tasks{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;min-width:0}
html[data-theme] #world #home .desktop-window:not([hidden]){display:flex;flex-direction:column;max-height:min(calc(100dvh - 88px),var(--desktop-work-height,100dvh));max-width:calc(100vw - 20px);overflow:hidden;box-sizing:border-box}
html[data-theme] #world #home .desktop-titlebar{flex:0 0 auto;touch-action:none}
html[data-theme] #world #home .desktop-window-body{display:block;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
html[data-theme] #world #home #desk-view .desktop-photo-scroll{min-height:0;flex:1 1 auto;overflow:auto}
@media(min-width:621px) and (max-width:900px){
 html[data-theme] #world #home .portal-collage .web-desktop{height:max(950px,100dvh);padding-bottom:88px;box-sizing:border-box}
 html[data-theme] #world #home .desktop-icons{left:12px;top:64px;width:150px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:86px;gap:10px 8px}
 html[data-theme] #world #home .desktop-icons>button{width:100%;min-height:80px;height:80px;justify-content:start;gap:4px}
 html[data-theme] #world #home .desktop-icons>button>:is(svg,img,span){max-height:48px;max-width:50px;object-fit:contain}
 html[data-theme] #world #home .desktop-icons b{font-size:11px;line-height:13px}
 html[data-theme] #world #home #desk-photos{left:176px}
 html[data-theme] #world #home #desk-entry{left:180px}
}

@media(max-width:620px){
 html[data-theme] #world #home .mobile-desktop .desktop-taskbar{position:fixed;left:6px;right:6px;translate:none!important;margin-inline:auto}
 html[data-theme] #world #home .mobile-desktop>.hyd-cat-slot-home{z-index:90;bottom:74px}
}

/* Opening the road question temporarily reserves a band in the desktop.
   Closing it restores the visitor's existing collage and saved offsets. */
html[data-theme] #world #home .web-desktop.has-uturn-sheet{height:calc(max(950px,100dvh) + var(--uturn-sheet-offset,0px))!important}
html[data-theme] #world #home .has-uturn-sheet .desktop-window{transform:translate(var(--wx,0px),calc(var(--wy,0px) + var(--uturn-sheet-offset,0px)))!important}
@media(min-width:621px) and (max-width:900px){html[data-theme] #world #home .has-uturn-sheet .desktop-icons{translate:0 var(--uturn-sheet-offset,0px)}}
@media(max-width:620px){html[data-theme] #world #home .web-desktop.mobile-desktop.has-uturn-sheet{height:calc(100svh + var(--uturn-sheet-offset,0px))!important}}

/* The dock remains scrollable by trackpad, touch and keyboard without a trough. */
html[data-theme] #world #home .desktop-tasks{scrollbar-width:none}
html[data-theme] #world #home .desktop-tasks::-webkit-scrollbar{display:none;width:0;height:0}
html[data-theme] #world #home #desktop-reset{display:grid;place-items:center;flex:0 0 48px;width:48px;min-width:48px;padding:3px}
html[data-theme] #world #home #desktop-reset svg{display:block;width:40px;height:40px;filter:drop-shadow(0 2px 2px #1a283733)}
html[data-theme] #world #home .desktop-icons>[data-shortcut-id]{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
html[data-theme] #world #home #desktop-free-shortcuts{position:absolute;inset:0!important;width:100%;height:100%;display:block;padding:0;translate:none;transform:none;overflow:visible;pointer-events:none;z-index:9}
html[data-theme] #world #home #desktop-free-shortcuts>.desktop-free-shortcut{position:absolute;margin:0;max-width:calc(100vw - 16px);pointer-events:auto;translate:none;transform:none;z-index:1}
html[data-theme] #world #home #desktop-free-shortcuts>.is-shortcut-dragging{cursor:grabbing;z-index:2}
.desktop-shortcut-placeholder{display:block;visibility:hidden;pointer-events:none}
@media(max-width:620px){
 html[data-theme] #world #home .mobile-desktop .desktop-tasks{scrollbar-width:none}
 html[data-theme] #world #home .mobile-desktop #desktop-reset{flex-basis:40px;width:40px;min-width:40px}
 html[data-theme] #world #home .mobile-desktop #desktop-reset svg{width:32px;height:32px}
}

/* Match paired window controls and center marks independently of font metrics. */
html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>button,#hyd-pinball .pinball-close),
html[data-theme] #world #home .desktop-window .desktop-titlebar>div>button{
 position:relative;box-sizing:border-box;flex:none;display:block;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;margin:0;padding:0;border-radius:50%;font-size:0!important;line-height:0;appearance:none;-webkit-appearance:none;touch-action:manipulation;
}
html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>button,#hyd-pinball .pinball-close)::before,
html[data-theme] #world #home .desktop-window .desktop-titlebar>div>button::before{
 content:'';position:absolute;left:50%;top:50%;width:10px;height:2px;margin:0;transform:translate(-50%,-50%);background:currentColor;pointer-events:none;
}
html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>[data-sol-close],#hyd-pinball button.pinball-close)::before,
html[data-theme] #world #home .desktop-window .desktop-titlebar>div>[data-close-window]::before{
 width:10px;height:10px;background:linear-gradient(45deg,transparent 42%,currentColor 43% 57%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 43% 57%,transparent 58%);
}
html[data-theme] body #hyd-pinball .pinball-close::after{content:none}
html[data-theme] body #hyd-solitaire .solitaire-window-controls{align-items:center;width:54px;height:24px;gap:6px}
html[data-theme] body #hyd-solitaire .solitaire-title-spacer{width:54px}
html[data-theme] #world #home .desktop-window .desktop-titlebar>div{height:24px;align-items:center}
@media(max-width:620px),(any-pointer:coarse){
 html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>button,#hyd-pinball .pinball-close),
 html[data-theme] #world #home .desktop-window .desktop-titlebar>div>button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>button,#hyd-pinball .pinball-close)::before,
 html[data-theme] #world #home .desktop-window .desktop-titlebar>div>button::before{width:12px}
 html[data-theme] body :is(#hyd-solitaire .solitaire-window-controls>[data-sol-close],#hyd-pinball button.pinball-close)::before,
 html[data-theme] #world #home .desktop-window .desktop-titlebar>div>[data-close-window]::before{width:12px;height:12px}
 html[data-theme] body #hyd-solitaire .solitaire-window-controls{width:94px;height:44px}
 html[data-theme] body #hyd-solitaire .solitaire-titlebar{display:grid;grid-template-columns:94px minmax(0,1fr);min-height:52px;gap:8px}
 html[data-theme] body #hyd-solitaire .solitaire-titlebar h2{justify-content:center;min-width:0;text-align:center}
 html[data-theme] body #hyd-solitaire .solitaire-title-spacer{display:none}
 html[data-theme] body #hyd-pinball .pinball-titlebar{grid-template-columns:44px minmax(0,1fr) 24px;min-height:52px;gap:6px}
 html[data-theme] #world #home .desktop-window .desktop-titlebar,
 html[data-theme] #world #home #desk-entry .desktop-titlebar{height:52px!important;min-height:52px!important}
 html[data-theme] #world #home .desktop-window .desktop-titlebar>div{height:44px;gap:4px}
 html[data-theme] #world #home .desktop-window .window-grab{padding-inline:102px 12px}
}

/* Small viewports keep the question in its own bounded sheet. Opening it must
   never displace application windows beneath the fixed dock. */
html[data-theme] #world #home .compact-uturn-sheet #home-uturns .uturn-arrival{
 position:fixed;left:50%;right:auto;top:var(--uturn-popover-top,8px);bottom:auto;translate:-50% 0;margin:0;
 max-height:var(--uturn-popover-height,calc(100dvh - 80px));overflow:hidden;box-sizing:border-box;
}
html[data-theme] #world #home .compact-uturn-sheet #home-uturns .uturn-arrival:not([hidden]){display:flex;flex-direction:column}
html[data-theme] #world #home .compact-uturn-sheet #home-uturns .uturn-titlebar{position:relative;flex:0 0 auto;min-height:48px;box-sizing:border-box}
html[data-theme] #world #home .compact-uturn-sheet #home-uturns .uturn-form{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
html[data-theme] #world #home .compact-uturn-sheet #home-uturns .uturn-close{width:44px;height:44px;min-height:44px;flex:0 0 44px}
html[data-theme] #world #home .portal-brand:not(:has(.uturn-arrival:not([hidden]))){z-index:3!important}
html[data-theme] #world #home #desktop-free-shortcuts.is-shortcut-dragging{z-index:160}
@media(max-width:620px){
 html[data-theme] #world #home .mobile-desktop .desktop-window:not([hidden]){max-height:var(--mobile-window-height,300px)}
}

/* The pocket desktop has its own icon/window scrollers. Empty-wallpaper
   swipes must not move the root page or trigger Safari's rubber-band layout. */
@media(max-width:620px){
 html:has(#home.active),html:has(#home.active) body{overflow:hidden;overscroll-behavior-y:none}
}