/* One camera and one architectural scale; controls are mapped onto the artwork. */
:root body#realm-ui[data-ui-theme] #workspace .immersive-island .island-viewport{display:flex;align-items:flex-start;background:#07668d url('/art/caribbean/ocean-tile.webp') center/650px;overflow:auto}
:root body#realm-ui[data-ui-theme] #workspace .immersive-island .island-panorama{flex:none;width:calc(max(100%,(var(--game-height,100dvh) - 128px)*1.75)*var(--island-zoom));min-width:0;min-height:0;height:auto;aspect-ratio:7/4;margin:0;isolation:isolate}
:root body#realm-ui[data-ui-theme] #workspace .settlement-foundations{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building,:root body#realm-ui[data-ui-theme] #workspace .settlement-building:hover:not(:disabled){transform:none;aspect-ratio:auto;padding:0;min-width:0;min-height:0;display:block;background:none;box-shadow:none;border:0;border-image:none;filter:none;z-index:2;overflow:visible}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building .building-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building .building-outline polygon{fill:#ffdf7b12;stroke:#ffe4a1;stroke-width:1.8;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #482606)}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building:is(:hover,:focus-visible,.selected) .building-outline{opacity:1}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building .building-plaque{bottom:2px;z-index:3;font-size:14px;pointer-events:none}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building:is(:hover,:focus-visible,.selected){z-index:4;outline:0}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building:is(:hover,:focus-visible,.selected) .building-plaque{opacity:1}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building:focus-visible .building-plaque>span{display:block}
:root body#realm-ui[data-ui-theme] #workspace :is(.construction-pin,.foundation-pin){position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);display:grid;place-items:center;width:27px;height:27px;border:1px solid #d3ab57;border-radius:50%;background:#15232adf;color:#ffe6ac;box-shadow:0 2px 4px #0007;font-size:20px;line-height:1;pointer-events:none}
:root body#realm-ui[data-ui-theme] #workspace .construction-pin{background:#684317}
:root body#realm-ui[data-ui-theme] #workspace .settlement-building:is(:hover,:focus-visible,.selected) :is(.construction-pin,.foundation-pin){opacity:0}
@media(min-width:951px){
 :root body#realm-ui[data-ui-theme] #sidebar #navigation{gap:0;padding-top:0}
 :root body#realm-ui[data-ui-theme] #sidebar #navigation .nav-item{height:72px;min-height:72px;padding:7px 12px 6px 3px;font-size:16px;gap:0;line-height:1.05}
 :root body#realm-ui[data-ui-theme] #sidebar #navigation .nav-item>.painted-icon{height:34px;width:34px;flex-basis:34px}
 :root body#realm-ui[data-ui-theme] #sidebar .sidebar-bottom{margin-top:10px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-dispatch{bottom:28px;max-width:265px;font-size:15px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell{width:min(740px,calc(100% - 600px));left:50%;transform:translateX(-50%);bottom:18px;border-width:15px;border-image-width:17px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell #building-ribbon>button{flex-basis:100px;min-width:100px;min-height:116px;font-size:14px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-tile-art{height:74px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-orders{width:280px;border-width:16px;border-image-width:18px;font-size:15px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-chart{width:220px;border-width:14px;border-image-width:16px;bottom:18px}
}
@media(min-width:951px) and (max-width:1300px){
 :root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell{left:145px;transform:none;width:calc(100% - 400px)}
 :root body#realm-ui[data-ui-theme] #workspace .scene-dispatch{bottom:180px}
}
@media(max-width:950px){
 :root body#realm-ui[data-ui-theme] #sidebar #navigation{gap:4px}
 :root body#realm-ui[data-ui-theme] #sidebar #navigation .nav-item{height:94px;min-height:94px;padding:10px 8px;font-size:18px;gap:0}
 :root body#realm-ui[data-ui-theme] #sidebar #navigation .nav-item>.painted-icon{width:36px;height:36px;flex-basis:36px}
 :root body#realm-ui[data-ui-theme] #sidebar .sidebar-bottom{margin-top:14px}
 :root body#realm-ui[data-ui-theme] #workspace .immersive-island .island-panorama{width:calc(780px*var(--island-zoom));min-width:0;aspect-ratio:7/4;margin:0}
 :root body#realm-ui[data-ui-theme] #workspace .settlement-building .building-plaque{font-size:15px}
}

@media(max-width:950px){:root body#realm-ui[data-ui-theme] #sidebar #sidebar-close{z-index:70;position:absolute;right:8px;top:8px}:root body#realm-ui[data-ui-theme] #sidebar .brand{padding-right:42px;box-sizing:border-box}}


:root body#realm-ui[data-ui-theme] #workspace .scene-chart svg{background:#075578 url('/art/caribbean/ocean-tile.webp') center/cover}
