/* The island is the play surface. Ornament is real painted artwork, sliced so
   that content and hit targets remain semantic, responsive HTML. */
:root body#realm-ui{--carved-frame:url('/art/caribbean/ornate-frame.webp');--cabin:url('/art/interface/cabin-timber.webp');--sea-ink:#071b24}
:root body#realm-ui[data-ui-theme] :is(.carved-panel,.construction-catalog,.build-dossier,.building-showcase,.construction-screen #construction-queue){border:22px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 22px / 3px stretch;outline:0;border-radius:0;box-shadow:0 5px 13px #0007;background-color:#0a202a;background-clip:border-box}
:root body#realm-ui[data-ui-theme] .shell{grid-template-columns:128px minmax(0,1fr)}
:root body#realm-ui[data-ui-theme] .sidebar{width:128px;padding:90px 7px 10px;border:0;background:linear-gradient(#16130d25,#080d0a50),var(--cabin) center/380px;box-shadow:inset -6px 0 8px #0008,4px 0 8px #0008}
:root body#realm-ui[data-ui-theme] .sidebar::after{right:-8px;width:12px;background:var(--carved-frame) left center/auto 100%;opacity:1}
:root body#realm-ui[data-ui-theme] .brand{position:fixed;left:0;top:0;width:318px;height:82px;min-height:0;z-index:52;border:14px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 16px / 1px stretch;background:#17150fee;gap:3px;justify-content:center;padding:0;box-shadow:0 5px 10px #0008}
:root body#realm-ui[data-ui-theme] .brand-crest{width:58px;height:58px;filter:sepia(.5) saturate(.8)}
:root body#realm-ui[data-ui-theme] .brand>span{font-size:28px;line-height:.92;text-shadow:0 2px #000,1px 0 #5c3912;color:#ffe1a0;letter-spacing:.02em}
:root body#realm-ui[data-ui-theme] .brand small{font-size:11px;line-height:1.2;letter-spacing:.12em;margin-top:6px}
:root body#realm-ui[data-ui-theme] #navigation{gap:4px;padding:0}
:root body#realm-ui[data-ui-theme] #navigation .nav-item{min-height:88px;border:12px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 13px / 1px stretch;background:#111e21b0;box-shadow:0 3px 6px #0008;gap:0;padding:1px 0 3px;font-size:17px;line-height:1.1;font-weight:500;color:#fff0cf}
:root body#realm-ui[data-ui-theme] #navigation .nav-item.active{background:linear-gradient(110deg,#08304d,#0e5a76,#082b45);filter:drop-shadow(0 0 3px #2e9bcc);border-image:var(--carved-frame) 170 140 170 140 / 13px / 1px stretch;box-shadow:inset 0 0 12px #29a1d28a}
:root body#realm-ui[data-ui-theme] #navigation .nav-item>.painted-icon{width:43px;height:43px;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important}
:root body#realm-ui #navigation [data-view=realm]>.painted-icon{background-image:url('/art/interface/navigation-island.webp')}
:root body#realm-ui #navigation [data-view=research]>.painted-icon{background-image:url('/art/interface/navigation-research.webp')}
:root body#realm-ui #navigation [data-view=fleets]>.painted-icon{background-image:url('/art/interface/navigation-fleet.webp')}
:root body#realm-ui #navigation [data-view=map]>.painted-icon{background-image:url('/art/interface/navigation-map.webp')}
:root body#realm-ui #navigation [data-view=alliance]>.painted-icon{background-image:url('/art/interface/navigation-alliance.webp')}
:root body#realm-ui #navigation [data-view=desk]>.painted-icon{background-image:url('/art/interface/navigation-desk.webp')}
:root body#realm-ui[data-ui-theme] #workspace{padding:0 14px 20px;background:linear-gradient(#062633b8,#062633d9),url('/art/realm/port-royal-landscape.webp') center/cover fixed}
:root body#realm-ui[data-ui-theme] #workspace .topbar{height:82px;min-height:82px;margin:0 -14px;padding:8px 16px 8px 205px;border-bottom:12px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 0 0 13px / 0 0 3px stretch;gap:6px;background:linear-gradient(#1b170fa0,#0f120fd9),var(--cabin) center/800px;box-shadow:0 3px 8px #0008}
:root body#realm-ui[data-ui-theme] #workspace #resources .resource{gap:6px;min-height:44px;padding:2px 8px;justify-content:center}
:root body#realm-ui[data-ui-theme] #workspace .resource-icon,:root body#realm-ui[data-ui-theme] #workspace .resource-icon .painted-icon{width:34px;height:34px;flex-basis:34px}
:root body#realm-ui[data-ui-theme] #workspace .resource strong{font-size:22px;font-weight:500}
:root body#realm-ui[data-ui-theme] .captain-copy strong{font-size:17px}
:root body#realm-ui[data-ui-theme] .captain-portrait{width:46px;height:46px}
:root body#realm-ui[data-ui-theme] #workspace .island-subnav{height:46px;min-height:46px;margin:0 -14px;padding:0 14px;border-bottom:2px solid #977844;background:linear-gradient(#20180fe8,#15140feb),var(--cabin);gap:16px}
:root body#realm-ui[data-ui-theme] .island-switch>img{height:34px;width:44px;border:1px solid #ba914e}
:root body#realm-ui[data-ui-theme] .island-switch strong{font-size:18px;font-weight:500}
:root body#realm-ui[data-ui-theme] .island-switch small{font-size:11px}
:root body#realm-ui[data-ui-theme] .island-subnav nav button{min-height:42px;font-size:17px;padding:3px 14px}
:root body#realm-ui[data-ui-theme] .island-subnav .painted-icon{width:27px;height:27px}
:root body#realm-ui[data-ui-theme] #workspace .immersive-island{margin:0 -14px;height:calc(var(--game-height,100dvh) - 128px);min-height:600px;overflow:hidden;border:0;background:#095a79}
:root body#realm-ui[data-ui-theme] .immersive-island .island-viewport{height:100%;max-height:none;overflow:auto;scrollbar-width:none}
:root body#realm-ui[data-ui-theme] .immersive-island .island-panorama{min-width:1000px;width:calc(max(100%,(var(--game-height,100dvh) - 128px)*1.7778)*var(--island-zoom));aspect-ratio:16/9;min-height:100%;}
:root body#realm-ui[data-ui-theme] .immersive-island .island-terrain{position:absolute;inset:0;width:100%;height:100%}
:root body#realm-ui[data-ui-theme] .immersive-island .island-building{z-index:2;min-height:44px;min-width:44px}
:root body#realm-ui[data-ui-theme] .immersive-island .island-building>img{filter:drop-shadow(2px 7px 3px #32230c55)}
:root body#realm-ui[data-ui-theme] .immersive-island .building-plaque{background:#172126ed;border:1px solid #ddbc78;box-shadow:0 2px 4px #0008;bottom:0}
:root body#realm-ui[data-ui-theme] .immersive-island .island-building:not(:hover):not(.selected) .building-plaque{opacity:0;transition:opacity .15s}
:root body#realm-ui[data-ui-theme] .immersive-island .island-building:focus-visible .building-plaque{opacity:1}
:root body#realm-ui[data-ui-theme] .immersive-island .island-scene-toolbar{left:14px;top:14px;gap:3px}
:root body#realm-ui[data-ui-theme] .immersive-island .island-scene-toolbar button{border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 0 stretch;background:#162021dd;width:42px;height:42px;min-height:42px;box-shadow:0 2px 5px #0006;font-size:22px;}
:root body#realm-ui[data-ui-theme] .scene-orders,:root body#realm-ui[data-ui-theme] .scene-inspector{position:absolute;right:18px;top:20px;width:300px;z-index:8;padding:4px 8px 9px;background:linear-gradient(#171715ed,#161410f5),var(--cabin);color:#fff0d0}
:root body#realm-ui[data-ui-theme] .scene-orders header{padding:2px 0 10px;text-align:center;border-bottom:1px solid #a37c45}
:root body#realm-ui[data-ui-theme] .scene-orders h2{color:#fff0cf;font-size:25px;line-height:1.1;margin:4px 0;font-weight:500;text-shadow:0 2px 2px #000}
:root body#realm-ui[data-ui-theme] .scene-orders header small{font-size:12px;color:#dfbd7f;letter-spacing:.08em}
:root body#realm-ui[data-ui-theme] #workspace .scene-orders button{border-image:none;border:0;border-radius:0;box-shadow:none;background:none;color:#ffedcb;padding:6px 0;text-align:left}
:root body#realm-ui[data-ui-theme] .scene-orders-title{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:20px;border-bottom:1px solid #937039!important;min-height:38px}
:root body#realm-ui[data-ui-theme] .scene-orders-title b{font-size:27px;color:#efcf87;padding-left:8px}
:root body#realm-ui[data-ui-theme] #workspace .scene-job{display:flex;align-items:center;gap:7px;width:100%;min-height:62px;border-bottom:1px solid #9b7d3b55;font-size:15px}
:root body#realm-ui[data-ui-theme] .scene-job>img,:root body#realm-ui[data-ui-theme] .scene-job>.painted-icon{width:42px;height:46px;object-fit:contain;flex:0 0 42px}
:root body#realm-ui[data-ui-theme] .scene-job>span:nth-child(2){flex:1;min-width:0}
:root body#realm-ui[data-ui-theme] .scene-job strong{font-size:16px;font-weight:500;display:block;line-height:1.15;margin-bottom:7px}
:root body#realm-ui[data-ui-theme] .scene-job small{font-size:13px;color:#e8d1a5}
:root body#realm-ui[data-ui-theme] #workspace .scene-job progress{height:8px;width:100%;border:1px solid #ad8541;border-radius:3px;overflow:hidden;display:block;background:#020d15;accent-color:#28b8df}
:root body#realm-ui[data-ui-theme] .scene-job-time{max-width:62px;font-size:12px;text-align:right;line-height:1.15}
:root body#realm-ui[data-ui-theme] .scene-job-time b{font-size:23px;display:block;color:#ecc779;line-height:1}
:root body#realm-ui[data-ui-theme] .scene-pending{display:flex;justify-content:space-between;width:100%;font-size:14px;min-height:32px}
:root body#realm-ui[data-ui-theme] #workspace .scene-inspector{width:320px;outline:none;border:22px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 22px / 3px stretch;box-shadow:0 5px 15px #0009;padding:6px 8px}
:root body#realm-ui[data-ui-theme] .scene-inspector header>img{width:54px;height:54px}
:root body#realm-ui[data-ui-theme] .scene-inspector h2{font-size:24px}
:root body#realm-ui[data-ui-theme] #workspace .scene-close{border:0;border-image:none;background:none;box-shadow:none;font-size:28px;min-width:32px;min-height:36px;align-self:flex-start;padding:0;color:#efd092}
:root body#realm-ui[data-ui-theme] .scene-inspector-more{display:flex;align-items:center;justify-content:space-between;margin-top:8px;border-top:1px solid #997d414f;padding-top:4px}
:root body#realm-ui[data-ui-theme] .scene-inspector-more>button:first-child{background:none;border:0;border-image:none;box-shadow:none;color:#e7ce98;padding:3px 0;font-size:15px;min-height:32px}
:root body#realm-ui[data-ui-theme] .scene-ribbon-shell{position:absolute;bottom:20px;left:50%;transform:translateX(-62%);width:min(800px,calc(100% - 345px));display:flex;align-items:stretch;z-index:5;background:linear-gradient(#0b181af2,#141916f2),var(--cabin);padding:0 0 3px}
:root body#realm-ui[data-ui-theme] .scene-ribbon-shell>button{width:20px;min-width:20px;border:0;border-image:none;background:none;box-shadow:none;color:#e9c67c;font-size:30px;padding:0}
:root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell #building-ribbon{display:flex;justify-content:flex-start;gap:6px;flex:1;min-width:0;padding:0;background:none;border:0;scrollbar-width:thin}
:root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell #building-ribbon>button{flex:0 0 113px;min-width:113px;min-height:137px;border:1px solid #b49458;border-image:none;background:#0b1a21;padding:3px;box-shadow:inset 0 0 0 2px #000;font-size:15px;font-weight:500;line-height:1.1;color:#fff0cd}
:root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell #building-ribbon>button.selected{border-color:#fff2bb;box-shadow:inset 0 0 0 2px #258cb0,0 0 5px #39bde2;background:#12394c}
:root body#realm-ui[data-ui-theme] .scene-tile-art{display:block;width:100%;height:83px;margin-bottom:5px;background:url('/art/realm/construction-cove.webp') center/cover;border:1px solid #897443}
:root body#realm-ui[data-ui-theme] #workspace .scene-tile-art>img{height:100%;width:100%;object-fit:contain}
:root body#realm-ui[data-ui-theme] .scene-ribbon-shell small{font-size:13px;color:#e0cb9b;margin-top:4px}
:root body#realm-ui[data-ui-theme] .scene-ribbon-shell small b{position:static;background:none;border:0;display:inline;color:#eac05c;font-size:16px}
:root body#realm-ui[data-ui-theme] #workspace .scene-chart{position:absolute;right:18px;bottom:20px;width:250px;z-index:6;padding:0;background:radial-gradient(ellipse,#16728a,#073047);border:20px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 22px / 3px stretch;box-shadow:0 4px 12px #0009;color:#ffedbd;display:block}
:root body#realm-ui[data-ui-theme] .scene-chart svg{display:block;width:100%;height:138px;background:radial-gradient(ellipse at 60% 30%,#13788b,#092e42)}
:root body#realm-ui[data-ui-theme] .scene-chart>span{display:flex;align-items:center;justify-content:space-between;background:#111d20ed;padding:3px 6px;font-size:17px}
:root body#realm-ui[data-ui-theme] #workspace .scene-dispatch{position:absolute;left:18px;bottom:198px;display:flex;align-items:center;gap:8px;padding:0 8px;z-index:6;background:#151a17ed;color:#fff1d4;border:14px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 16px / 2px stretch;font-size:16px;box-shadow:0 3px 9px #0009;min-height:52px}
:root body#realm-ui[data-ui-theme] .scene-dispatch .painted-icon{width:27px;height:27px}
/* Build details use the same physical material and ornament as the scene. */
:root body#realm-ui #workspace .construction-screen{gap:12px;padding:12px 0 0}
:root body#realm-ui #workspace .construction-screen :is(.building-showcase,.build-dossier,.construction-catalog,#construction-queue){border:18px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 20px / 2px stretch;box-shadow:0 5px 12px #0009;background-clip:border-box}
:root body#realm-ui #workspace .construction-caption{background:linear-gradient(100deg,#f1dfb5,#e9d4aabf 80%,transparent);padding:10px 14px}
:root body#realm-ui #workspace .construction-caption h1{font-size:27px}
:root body#realm-ui #workspace .build-dossier>article>header{background:linear-gradient(#071c29db,#0a202bea),var(--cabin);padding:11px 13px}
:root body#realm-ui #workspace .build-dossier h2{font-size:26px;font-weight:500}
:root body#realm-ui #workspace .build-dossier header p{font-size:15px;line-height:1.25;color:#e6d8bb}
:root body#realm-ui #workspace .dossier-paper{background:linear-gradient(#f6e7c5ca,#e5cda2bb),url('/art/interface/ledger-paper.webp') center/cover;color:#26190e}
:root body#realm-ui #workspace :is(.upgrade-order .primary,.scene-inspector .primary){border:6px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 1px stretch;background:linear-gradient(#f4d989,#be862e);color:#2d1d09;box-shadow:inset 0 1px #fff2b8,0 2px 4px #0007;text-shadow:0 1px #f8d994}
:root body#realm-ui #workspace :is(.upgrade-compare h3,.upgrade-resources h3){font-size:18px}
:root body#realm-ui #workspace .upgrade-compare dl{font-size:16px}
:root body#realm-ui #workspace .construction-catalog #building-ribbon>button{border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 8px / 0 stretch;min-height:153px;flex-basis:124px;background:#10242c}
:root body#realm-ui #workspace .construction-catalog #building-ribbon>button.selected{background:#134259;border-image:var(--carved-frame) 170 140 170 140 / 8px / 0 stretch;box-shadow:0 0 7px #2bb6e5}
:root body#realm-ui #workspace .construction-screen #construction-queue .active-construction{background:#0b2430;border-color:#90743f}
:root body#realm-ui #workspace .construction-screen #construction-queue .construction-orders>li{background:#0b202a;border-color:#6e603f}
@media(min-width:951px) and (max-width:1250px){
 :root body#realm-ui[data-ui-theme] .brand{width:260px}
 :root body#realm-ui[data-ui-theme] .brand>span{font-size:24px}
 :root body#realm-ui[data-ui-theme] #workspace .topbar{padding-left:145px}
 :root body#realm-ui[data-ui-theme] .captain-copy{display:none}
 :root body#realm-ui[data-ui-theme] .scene-ribbon-shell{left:16px;transform:none;width:calc(100% - 300px)}
 :root body#realm-ui[data-ui-theme] #workspace .scene-chart{width:230px}
}
@media(max-width:950px){
 :root body#realm-ui[data-ui-theme] .shell{display:block}
 :root body#realm-ui[data-ui-theme] .sidebar{width:min(340px,90vw);padding:14px}
 :root body#realm-ui[data-ui-theme] .brand{position:relative;inset:auto;width:100%;height:76px;margin:0 0 16px}
 :root body#realm-ui[data-ui-theme] .sidebar::after{width:5px;right:0}
 :root body#realm-ui[data-ui-theme] #navigation{gap:10px}
 :root body#realm-ui[data-ui-theme] #navigation .nav-item{min-height:102px;font-size:19px}
 :root body#realm-ui[data-ui-theme] #workspace{padding:0 10px 72px}
 :root body#realm-ui[data-ui-theme] #workspace .topbar{height:104px;min-height:104px;margin:0 -10px;padding:3px 10px 7px;grid-template-rows:44px 46px;grid-template-columns:44px 1fr auto;gap:0 5px;border-bottom:6px solid transparent;border-image-width:0 0 8px}
 :root body#realm-ui[data-ui-theme] #workspace .topbar::after{font-size:21px;letter-spacing:.015em}
 :root body#realm-ui[data-ui-theme] #workspace #resources .resource{padding:2px;gap:3px;min-height:44px}
 :root body#realm-ui[data-ui-theme] #workspace .resource strong{font-size:19px}
 :root body#realm-ui[data-ui-theme] #workspace .resource-icon,:root body#realm-ui[data-ui-theme] #workspace .resource-icon .painted-icon{width:27px;height:27px;flex-basis:27px}
 :root body#realm-ui[data-ui-theme] #workspace .island-subnav{height:auto;min-height:84px;margin:0 -10px;padding:2px 8px 0;gap:0}
 :root body#realm-ui[data-ui-theme] .island-subnav nav button{min-height:42px;padding:2px 6px}
 :root body#realm-ui[data-ui-theme] #workspace .immersive-island{margin:0 -10px;min-height:0;height:auto;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
 :root body#realm-ui[data-ui-theme] .immersive-island .island-viewport{height:340px;max-height:none;min-height:340px;width:100%;overflow:auto;order:0}
 :root body#realm-ui[data-ui-theme] .immersive-island .island-panorama{width:calc(780px * var(--island-zoom));min-width:690px;min-height:0;aspect-ratio:16/9}
 :root body#realm-ui[data-ui-theme] .immersive-island .island-scene-toolbar{top:8px;left:8px}
 :root body#realm-ui[data-ui-theme] .immersive-island .island-scene-toolbar button{height:44px;width:44px;min-height:44px}
 :root body#realm-ui[data-ui-theme] .immersive-island .island-building .building-plaque{opacity:1!important;font-size:12px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-orders,:root body#realm-ui[data-ui-theme] #workspace .scene-inspector{position:relative;inset:auto;width:auto;margin:0 7px 10px;order:2;border-width:17px;border-image-width:19px;padding:4px 6px;z-index:3}
 :root body#realm-ui[data-ui-theme] .scene-orders h2{font-size:23px}
 :root body#realm-ui[data-ui-theme] .scene-orders header{padding:0 0 5px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-job{min-height:64px;font-size:17px}
 :root body#realm-ui[data-ui-theme] .scene-job strong{font-size:18px}
 :root body#realm-ui[data-ui-theme] .scene-job-time{font-size:14px;max-width:70px}
 :root body#realm-ui[data-ui-theme] .scene-inspector footer button{min-height:44px;font-size:18px}
 :root body#realm-ui[data-ui-theme] .scene-inspector-more>button:first-child{min-height:44px;font-size:17px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-close{min-width:44px;min-height:44px}
 :root body#realm-ui[data-ui-theme] .scene-ribbon-shell{position:relative;inset:auto;transform:none;width:auto;margin:-4px 6px 10px;order:1;border-width:15px;border-image-width:18px;padding:0;z-index:4}
 :root body#realm-ui[data-ui-theme] #workspace .scene-ribbon-shell #building-ribbon>button{flex-basis:101px;min-width:101px;min-height:125px;font-size:14px}
 :root body#realm-ui[data-ui-theme] .scene-tile-art{height:72px}
 :root body#realm-ui[data-ui-theme] .scene-ribbon-shell>button{width:24px;min-width:24px}
 :root body#realm-ui[data-ui-theme] #workspace .scene-chart{position:relative;inset:auto;order:4;width:calc(100% - 20px);margin:0 10px 12px;border-width:16px;border-image-width:18px;display:flex;align-items:center}
 :root body#realm-ui[data-ui-theme] .scene-chart svg{width:110px;height:76px}
 :root body#realm-ui[data-ui-theme] .scene-chart>span{font-size:20px;flex:1;gap:10px;padding:12px;background:none}
 :root body#realm-ui[data-ui-theme] #workspace .scene-dispatch{position:relative;inset:auto;order:3;margin:0 10px 10px;min-height:48px;font-size:17px;padding:0 5px;box-shadow:none}
 :root body#realm-ui #workspace .construction-screen{padding-top:8px;gap:10px}
 :root body#realm-ui #workspace .construction-screen :is(.building-showcase,.build-dossier,.construction-catalog,#construction-queue){border-width:13px;border-image-width:16px}
 :root body#realm-ui #workspace .construction-screen .building-showcase{min-height:230px}
 :root body#realm-ui #workspace .build-dossier>article>header{padding:7px}
 :root body#realm-ui #workspace .build-dossier h2{font-size:25px}
 :root body#realm-ui #workspace .build-dossier header p{font-size:16px}
 :root body#realm-ui #workspace .upgrade-compare h3{font-size:17px}
 :root body#realm-ui #workspace .upgrade-compare dl{font-size:16px}
 :root body#realm-ui #workspace .construction-caption h1{font-size:25px}
 :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar{padding:4px 10px;height:54px;min-height:54px;grid-template-rows:42px}
}
@media(prefers-reduced-motion:reduce){:root body#realm-ui .building-plaque{transition:none!important}}