/* A single, compact Aqua window treatment for browsing and the desktop. */
:root{
 --finder-font:"Lucida Grande","Lucida Sans Unicode",Tahoma,Arial,sans-serif;
 --finder-chrome:linear-gradient(#f6f6f9 0%,#e2e2e9 44%,#c4c4ce 48%,#ececf2 100%);
 --finder-toolbar:repeating-linear-gradient(0deg,#e6e6ed 0 1px,#eeeef3 1px 3px);
 --finder-button:linear-gradient(#fff 0%,#f3f3f8 46%,#d8d9e3 50%,#ececf3 100%);
 --finder-ink:#292733;--finder-border:#8c899d;
}
html[data-theme] #world #places{padding:25px 24px 40px}
#world #places .places-browser{border:1px solid var(--finder-border);border-radius:10px;box-shadow:0 14px 32px #08030f60,inset 0 1px #fff9;overflow:hidden;background:var(--paper-glass)}
html[data-theme] :is(#world #places .places-heading,#world #roll .roll-heading){position:relative;display:flex;align-items:center;gap:10px;min-height:43px;padding:5px 12px;margin:0;border:0;border-bottom:1px solid var(--finder-border);border-radius:9px 9px 0 0;background:var(--finder-chrome);color:var(--finder-ink);box-shadow:inset 0 1px #fff}
html[data-theme] :is(#world #places .places-heading h1,#world #roll .roll-heading h1){display:flex;align-items:center;justify-content:center;gap:7px;flex:1;margin:0;font:600 14px/1.25 var(--finder-font);letter-spacing:0;color:var(--finder-ink);text-shadow:0 1px #fff}
.finder-heading h1 svg{width:24px;height:24px;flex:none}
.finder-close{width:16px;height:16px;min-height:0;flex:none;padding:0;display:grid;place-items:center;border:1px solid #9f666a;border-radius:50%;background:radial-gradient(ellipse at 40% 25%,#ffe5e2,#ef9b98 45%,#cf6c71 85%);box-shadow:inset 0 1px #fff9,0 1px #fff9;font:13px/1 Arial,sans-serif;color:#69383c;cursor:pointer}
.finder-close:hover{filter:brightness(1.08)}
.finder-close{position:relative}
.finder-close::after{content:"";position:absolute;inset:-6px}
.finder-close:focus-visible{outline:2px solid #4f79be;outline-offset:3px}
html[data-theme] :is(#world #places .heading-souvenir,#world #roll .heading-souvenir){position:relative;width:42px;height:32px;margin:0;flex:0 0 42px;padding:0;border:0;border-radius:4px;background:transparent;transform:none;overflow:visible;filter:drop-shadow(0 1px 1px #7775)}
html[data-theme] :is(#world #places .heading-souvenir img,#world #roll .heading-souvenir img){width:42px;height:38px;object-fit:contain;filter:none;transform:none}
.finder-heading .heading-souvenir>span{display:none}
html[data-theme] #world #places .map-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px 9px;background:var(--finder-toolbar);color:var(--finder-ink);border:0;border-bottom:1px solid #9996a8;box-shadow:inset 0 1px #fff}
html[data-theme] #world #places .map-tools label{display:flex;align-items:center;gap:5px;flex:1 1 230px;max-width:none;min-height:32px;border:1px solid #9794a4;border-radius:17px;background:#fff;color:var(--finder-ink);box-shadow:inset 0 1px 3px #24203324}
html[data-theme] #world #places .map-tools label>span{font-size:20px;color:#6c6879;padding-left:10px}
html[data-theme] #world #places .map-tools input{min-height:32px;padding:4px 10px 4px 2px;font:12px/1.3 var(--finder-font);color:var(--finder-ink);background:transparent}
html[data-theme] #world #places .map-tools input::placeholder{color:#797484;opacity:1}
html[data-theme] #world #places .map-tools>button,html[data-theme] #world #home :is(.desktop-menu button,.desktop-photo-tools button,.places-finder-tabs button,.places-finder-footer button){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:29px;padding:4px 11px;border:1px solid #9592a3;border-radius:5px;background:var(--finder-button);color:var(--finder-ink);font:12px/1.3 var(--finder-font);box-shadow:inset 0 1px #fff,0 1px #fff8;text-shadow:0 1px #fff;transform:none}
#world #places .map-tools>button svg{width:21px;height:21px}
#world #places .map-tools>button>span{font-size:17px}
html[data-theme] #world #places .map-tools>button:hover,html[data-theme] #world #home .desktop-menu button:hover{background:linear-gradient(#fff,#dae6fa);border-color:#6b83ad}
html[data-theme] #world #places .map-status{width:100%;margin:1px 0 0;padding:0;font:10px/1.3 var(--finder-font);color:#635e70}
#world #places .atlas-stage .map-wrap{margin:0;border:0;border-radius:0;box-shadow:none;height:clamp(390px,65vh,610px)}
html[data-theme] #world #places .atlas-window-bar{height:29px;padding:4px 12px;background:var(--finder-toolbar);color:#605b6e;border-bottom:1px solid #9691a5;font:10px var(--finder-font);box-shadow:none}
#world #places .atlas-window-bar>span:last-child{display:none}
#world #places .atlas-window-bar button{margin-left:auto;min-height:22px;padding:2px 7px;border-radius:4px;border:1px solid #9b96a9;background:var(--finder-button);color:#494455;font:10px var(--finder-font)}
#world #places .atlas-window-bar svg{width:17px;height:17px}
#world #places #area-map{top:29px;height:calc(100% - 29px)}
#world #places .atlas-legend{padding:10px 14px;background:var(--paper-inset)}
#world #places .discovery-results{padding:12px 14px}
html[data-theme] #world #places .area-directory-head{min-height:80px;margin:0;padding:14px 20px;background:var(--paper-surface);border-top:1px solid var(--paper-edge)}
#world #places .area-directory-head h2{font:600 15px var(--finder-font);letter-spacing:0;text-transform:none}
#world #places #area-directory{padding:0 20px 22px}
#world #places .area-directory-head .hyd-cat-slot{width:72px;height:72px;margin:0 0 0 auto;align-self:flex-end}
#world #places .area-directory-head .hyd-cat{width:72px;height:72px}
/* Desktop panels use the same neutral silver controls; the wallpaper stays personal. */
.hyd-landmarks:not([data-landmark=cyber]) .hyd-neighbourhood::before{display:none;animation:none}
.hyd-landmarks:not([data-landmark=cyber]) .hyd-neighbourhood img{opacity:1}
.portal-collage .hyd-landmarks[data-landmark=bridge]{width:185px;top:-7px}
.portal-collage .hyd-landmarks[data-landmark=bridge] .hyd-neighbourhood{margin-bottom:0}
@media(min-width:621px) and (max-width:900px){.portal-collage .hyd-landmarks[data-landmark=bridge]{width:150px;top:114px}}
@media(max-width:620px){.portal-collage .hyd-landmarks[data-landmark=bridge]{width:128px;top:236px}}
html[data-theme] #world #home .desktop-titlebar,html[data-theme] #world #home #desk-entry .desktop-titlebar{background:var(--finder-chrome)!important;border-color:var(--finder-border);color:var(--finder-ink)}
html[data-theme] #world #home .window-grab{font-family:var(--finder-font);font-size:12px;font-weight:400;color:var(--finder-ink);text-shadow:0 1px #fff}
html[data-theme] #world #home :is(.desktop-menu,.places-finder-toolbar,.places-finder-footer,.desktop-photo-tools){background:var(--finder-toolbar);color:var(--finder-ink);border-color:var(--finder-border);font-family:var(--finder-font)}
#world #home .desktop-menu{display:flex;gap:7px;padding:8px}
#world #home .desktop-render-icon{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 2px #0006);transition:transform .18s ease}
#world #home .desktop-icons button:hover .desktop-render-icon{transform:translateY(-3px)}
#world #home .desktop-menu svg{width:22px;height:22px}
html[data-theme] #world #home :is(.desk-recordings,.desktop-contact-strip){padding:9px;gap:9px;background:var(--paper-inset);border-color:var(--paper-edge)}
html[data-theme] #world #home .desk-recordings>button{padding:5px;border:1px solid var(--paper-edge);border-radius:5px;background:var(--paper-surface);box-shadow:inset 0 1px #fff2;transform:none;min-width:0}
#world #home .desk-video-cover{border:1px solid #050308;border-radius:2px;overflow:hidden}
#world #home .desk-video-label{padding:8px 3px 4px;font:12px/1.4 var(--finder-font);letter-spacing:0}
#world #home .desk-video-label small{margin-top:3px;font:10px/1.4 var(--finder-font);color:var(--paper-muted)}
#world #home .desk-video-cover i{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid #fff9;background:#111822b5;color:#fff;box-shadow:0 1px 3px #0005;font:11px Arial,sans-serif}
html[data-theme] #world #home .desktop-status{font:10px/1.4 var(--finder-font);background:var(--finder-toolbar);color:#615c6f;border-color:var(--finder-border);padding:5px 8px}
/* The player already has its own titlebar and window controls. */
#cinema-view>.cinema-nav{display:none}
#world #cinema .cinema-chrome{margin-top:15px}
.cinema-expanded #world #cinema .cinema-chrome{margin-top:5px}
#world #cinema .player-extras>.hyd-cat-slot{width:56px;height:45px;margin:0 0 0 auto;flex:none}
#world #cinema .player-extras .hyd-cat{width:56px;height:56px}
/* Photo collection uses the same compact window header. */
html[data-theme] #world #roll .roll-heading{margin-bottom:0;border:1px solid var(--finder-border)}
html[data-theme] #world #roll :is(.frame-shelf-bar,.frame-titlebar){background:var(--finder-chrome);color:var(--finder-ink);border-color:var(--finder-border);font-family:var(--finder-font)}
html[data-theme] #world #roll .frame-shelf-bar #roll-status{color:var(--finder-ink)}
#world #roll .collection-tools{padding:11px 12px;margin:0;border-inline:1px solid var(--finder-border);background:var(--finder-toolbar);gap:7px}
html[data-theme] #world #roll .collection-tools button{min-height:29px;padding:5px 11px;background:var(--finder-button);color:var(--finder-ink);border:1px solid #9692a4;border-radius:5px;font:12px var(--finder-font);box-shadow:inset 0 1px #fff;transform:none;text-shadow:0 1px #fff}
html[data-theme] #world #roll .collection-tools button[aria-pressed=true],html[data-theme] #world #home .places-finder-tabs button[aria-pressed=true]{background:linear-gradient(#e4edff,#aac2e7 46%,#93b1dc 50%,#cad9f1);color:#21344f;border-color:#778caf}
#world #roll .roll-caption{display:flex;align-items:center;gap:12px;min-height:70px;font:11px/1.5 var(--finder-font)}
#world #roll .roll-caption .hyd-cat-slot{flex:0 0 70px;height:70px;margin-left:auto}
#world #roll .roll-caption .hyd-cat{width:70px;height:70px}
@media(max-width:620px){
 html[data-theme] #world #places{padding:14px 10px 25px}
 html[data-theme] :is(#world #places .places-heading,#world #roll .roll-heading){min-height:40px;padding:4px 10px}
 html[data-theme] :is(#world #places .places-heading h1,#world #roll .roll-heading h1){font-size:13px;letter-spacing:0;line-height:1.3}
 html[data-theme] #world #places .map-tools{padding:10px;gap:7px}
 html[data-theme] #world #places .map-tools label{flex-basis:100%}
 html[data-theme] #world #places .map-tools>button{flex:1;padding:5px 7px;font-size:11px;min-height:32px;white-space:nowrap}
 #world #places .map-tools>button svg{width:18px;height:18px}
 #world #places .atlas-stage .map-wrap{height:440px}
 #world #places #area-directory{padding:0 12px 16px}
 #world #places .area-directory-head{padding-inline:12px}
 #world #places .discovery-results{padding:10px}
 #world #home .desktop-menu{padding:7px}
 html[data-theme] #world #home .desktop-menu button{font-size:11px;flex:1;padding:4px 6px}
 #world #home .desk-video-label{font-size:11px}
 #world #cinema .player-extras>.hyd-cat-slot{display:none}
 html[data-theme] #world #roll .collection-tools button{font-size:11px;padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){#world #home .desktop-render-icon{transition:none}#world #home .desktop-icons button:hover .desktop-render-icon{transform:none}}
.motion-off #world #home .desktop-render-icon{transition:none}
.motion-off #world #home .desktop-icons button:hover .desktop-render-icon{transform:none}

/* More readable silhouettes for the new object artwork. */
@media(min-width:621px) and (max-width:900px){.portal-collage .auto-souvenir{width:120px;top:164px}}

/* Desktop utilities are icons, with room for every shortcut above the dock. */
.desktop-corner.collage.portal-collage{height:auto;max-height:none}
#world #home .desktop-riyal-icon{display:block;width:53px;height:49px;object-fit:contain;filter:drop-shadow(0 3px 2px #0005)}
#world #home .desktop-icons [data-replay-startup] svg{filter:drop-shadow(0 3px 3px #0006)}
@media(min-width:621px){
 .portal-collage .web-desktop{height:900px}
 .portal-collage .desktop-icons{left:14px;top:36px;width:83px;display:grid;grid-template-columns:1fr;gap:15px}
 .portal-collage .desktop-icons>button{width:100%;min-height:66px;gap:3px}
 .portal-collage .desktop-icons b{white-space:normal;text-align:center;font-size:10px;line-height:1.25}
 .portal-collage #desk-photos{left:15%}
 .portal-collage .desktop-taskbar{bottom:24px}
}
@media(min-width:621px) and (max-width:900px){
 .portal-collage .web-desktop{height:1120px}
 .portal-collage #desk-photos{left:17%;width:270px}
 .portal-collage #desk-notes{left:19%;top:655px}
 .portal-collage #desk-view{top:595px}
 .portal-collage .auto-souvenir{left:62%;width:106px;top:175px}
 #web-desktop>.hyd-cat-slot-home{right:auto;left:24%}
}
@media(max-width:620px){
 #home .portal-collage .web-desktop{height:auto;padding-top:410px;padding-bottom:135px}
 .portal-collage .desktop-icons{grid-template-columns:repeat(4,minmax(0,1fr));top:126px;gap:14px 5px}
 .portal-collage .desktop-icons b{white-space:normal;text-align:center;font-size:10px}
 #world #home .desktop-riyal-icon{width:44px;height:39px}
 .portal-collage .hyd-landmarks,.portal-collage .hyd-landmarks[data-landmark=bridge]{top:255px;width:124px;right:24px}
}
/* The map belongs to the selected wallpaper, rather than a separate grey utility. */
html[data-theme] #world #places{
 --finder-chrome:linear-gradient(var(--paper-high),var(--paper-low) 52%,var(--paper-panel));
 --finder-toolbar:linear-gradient(var(--paper-panel),var(--paper-surface));
 --finder-button:linear-gradient(var(--paper-high),var(--paper-low) 52%,var(--paper-panel));
 --finder-ink:var(--paper-text);--finder-border:var(--paper-edge);
}
html[data-theme] #world #places .places-browser{box-shadow:0 15px 38px #05010960,inset 0 1px #ffffff25}
html[data-theme] #world #places .places-heading{box-shadow:inset 0 1px #ffffff30}
html[data-theme] #world #places .places-heading h1{color:var(--paper-text);text-shadow:0 1px #0005}
html[data-theme] #world #places .map-tools{border-color:var(--paper-edge);box-shadow:inset 0 1px #ffffff16}
html[data-theme] #world #places .map-tools label{background:var(--paper-inset);border-color:var(--paper-edge);box-shadow:inset 0 2px 3px #0004}
html[data-theme] #world #places .map-tools label>span,html[data-theme] #world #places .map-tools input{color:var(--paper-text)}
html[data-theme] #world #places .map-tools input::placeholder{color:var(--paper-muted)}
html[data-theme] #world #places .map-tools>button{border-color:var(--paper-edge);text-shadow:0 1px #0005;box-shadow:inset 0 1px #fff3,0 1px #0004}
html[data-theme] #world #places .map-tools>button:hover{background:linear-gradient(var(--paper-high),var(--paper-panel));border-color:var(--paper-accent)}
html[data-theme] #world #places .map-status,html[data-theme] #world #places .atlas-window-bar{color:var(--paper-muted)}
html[data-theme] #world #places .atlas-window-bar{border-color:var(--paper-edge)}
html[data-theme] #world #places .atlas-window-bar button{color:var(--paper-text);border-color:var(--paper-edge)}

#world #home .desktop-taskbar .desktop-riyal-icon{width:43px;height:43px}
.portal-collage .desktop-taskbar{height:auto;min-height:64px}
.portal-collage .desktop-tasks{max-width:calc(100vw - 148px);overflow:visible;flex-wrap:wrap;justify-content:center;align-items:center}
.portal-collage .desktop-taskbar button{flex-shrink:0}
@media(min-width:621px) and (max-width:900px){.portal-collage .desktop-tasks{gap:5px}.portal-collage .desktop-taskbar button{width:40px;height:45px}.portal-collage .desktop-taskbar svg{width:36px;height:36px}}
@media(max-width:620px){#world #home .desktop-taskbar .desktop-riyal-icon{width:35px;height:35px}}

