/* Scene-sized workspaces. Artwork shares one coordinate system; controls remain real HTML. */ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-scene{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .building-showcase{background:#126e8e} :root body#realm-ui[data-ui-theme] #workspace #content-page .showcase-plaque{z-index:2} :root body#realm-ui[data-ui-theme] #workspace #content-page .settlement-building .building-plaque{opacity:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-compare{display:block;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-levels{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a48755;padding-bottom:8px;margin-bottom:8px;font-size:15px;gap:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-levels b{display:inline-grid;place-items:center;min-width:30px;height:32px;margin-left:5px;background:#152c35;color:#ffe6ae;border:1px solid #a47c37;font-size:22px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects{margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects>div{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:3px 8px;min-height:42px;margin:5px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects dt{font-size:14px;color:#4b321d;line-height:1.25} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects>.painted-icon,:root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects .painted-icon{width:28px;height:28px;grid-row:span 2} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects dd{display:flex;align-items:center;gap:10px;grid-column:2;text-align:left;margin:0;font-size:18px;white-space:normal} :root body#realm-ui[data-ui-theme] #workspace #content-page .modifier-before{font-size:15px;color:#76552d} :root body#realm-ui[data-ui-theme] #workspace #content-page .modifier-gain{margin-left:auto;display:inline-block;padding:4px 9px;background:#d5e5b6;color:#24401b;border:1px solid #648249;font-size:17px;line-height:1.1;white-space:nowrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plans{min-width:0;margin:0;flex:1;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plans>summary{min-height:38px;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:#ffe7b5;cursor:pointer;list-style:none;padding:4px 8px;border-bottom:1px solid #94723e} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plans>summary::-webkit-details-marker{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plans[open]>summary>span{transform:rotate(180deg)} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plan-scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aa8546 #151d1c;min-height:0;max-height:220px;padding:4px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .queue-plan-scroll:focus-visible{outline:2px solid #e7c276;outline-offset:-2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog .fully-planned .catalog-art{filter:grayscale(1);opacity:.65} /* Desktop: a single framed action sheet beside the scene, with independent plan scrolling. */ @media(min-width:951px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen{height:calc(var(--game-height,100dvh) - var(--workspace-top,140px) - 12px);min-height:400px;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr);grid-template-rows:minmax(0,1fr) 155px;gap:10px;margin:0;padding:6px 0;align-items:stretch} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen :is(.building-showcase,.build-dossier,.construction-catalog,#construction-queue){min-height:0;height:auto;border-width:12px;border-image-width:15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-caption{padding:8px 12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-caption h1{font-size:25px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-caption>span{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier{overflow:auto;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier article>header{min-height:60px;padding:7px 10px;gap:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier article>header>img{width:42px;height:46px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier h2{font-size:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier header p{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .dossier-paper{padding:9px 11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects>div{grid-template-columns:26px minmax(100px,1fr) auto;min-height:32px;margin:3px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects .painted-icon{grid-row:auto;width:24px;height:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects dd{grid-column:3;font-size:17px;gap:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .modifier-gain{font-size:15px;padding:4px 6px;min-width:46px;text-align:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-payment{grid-template-columns:minmax(0,1fr) 142px;gap:8px;margin-top:8px;padding-top:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resources h3{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource strong{font-size:19px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource small{margin-top:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order{display:flex;flex-direction:column;gap:3px;padding:0 0 0 7px;border-left:1px solid #a47d4755;border-top:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>span{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>strong{font-size:18px;margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>button{min-height:40px;font-size:17px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>small{grid-column:1/-1;margin:3px 0 0;font-size:11px;text-align:right} :root body#realm-ui[data-ui-theme] #workspace #content-page .planned-notice,:root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-footnote{font-size:12px;line-height:1.2;margin:5px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog>header{padding:3px 5px;gap:5px;flex-wrap:nowrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog h2{font-size:16px;white-space:nowrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog nav button{font-size:12px;padding:3px 5px;min-height:30px} :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-scroll{padding:4px 0;height:calc(100% - 38px)} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon>button{min-height:0;flex-basis:101px;padding:2px;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-art{height:65px;flex:1;min-height:40px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon>button>span:not(.catalog-art){font-size:12px;margin:3px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon small{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue{display:flex;flex-direction:column;overflow:hidden} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue>header{min-height:36px;padding:3px 7px;flex-shrink:0;gap:5px;flex-wrap:nowrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue header h3{font-size:17px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-track{flex:1;min-height:0;overflow:auto;padding:5px;display:block} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .active-construction{min-height:48px;grid-template-columns:34px 1fr;padding:4px;gap:2px 6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .construction-art{width:34px;height:34px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .active-construction strong{font-size:15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .active-construction span{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-free-slots{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-plans>summary{min-height:28px;font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-plan-scroll{max-height:none;overflow:visible} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-obstruction{padding:5px 8px;max-height:95px;overflow:auto;flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-obstruction>strong{font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-shortage{margin:3px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-remedies>small{font-size:12px} } /* Mobile: scene, one action sheet, collapsible plan, then a thumb-friendly picture ribbon. */ @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen{grid-template-areas:'visual' 'details' 'queue' 'catalog';gap:0;margin:0 -10px 12px;padding:0;background:#122936} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .building-showcase{border-image:none;border-image-width:0;height:clamp(230px,34dvh,350px);min-height:0;border:0;box-shadow:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-caption{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .building-queue-jump{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .showcase-plaque{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .island-overview-button{bottom:8px;right:8px;min-height:40px;font-size:13px;padding:3px 7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen :is(.build-dossier,.construction-catalog,#construction-queue){width:auto;min-width:0;border-width:10px;border-image-width:13px;box-shadow:none;margin:0 5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier article>header{padding:5px 7px;min-height:54px;background:var(--cabin)} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier article>header>img{width:40px;height:42px} :root body#realm-ui[data-ui-theme] #workspace #content-page .build-dossier h2{font-size:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .dossier-paper{padding:9px;background:linear-gradient(#181b1bed,#181b1bed),var(--cabin);color:#fff0ce} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-levels{font-size:14px;padding-bottom:6px;margin-bottom:6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-levels b{height:28px;font-size:20px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects dt{color:#dfc7a1;font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-effects dd{color:#fff0ce;font-size:18px;gap:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .modifier-before{color:#c8b591;font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .modifier-gain{background:#213c27;color:#bce58e;border-color:#68834a;font-size:17px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource>span,:root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource small{color:#ddc69d;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource strong,:root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>strong{color:#fff0ce;font-size:20px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resource.short strong{color:#ffb18a} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-resources h3{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>small,:root body#realm-ui[data-ui-theme] #workspace #content-page .planned-notice,:root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-footnote{color:#dfc7a1;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .upgrade-order>button{background:linear-gradient(#11658c,#07334e);color:#fff0c9;border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 0 stretch;box-shadow:none;font-size:19px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue>header{padding:4px 6px;min-height:40px;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue header h3{font-size:18px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .construction-state{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-track{padding:5px;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .active-construction{min-height:56px;grid-template-columns:36px 1fr;padding:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .construction-art{width:36px;height:36px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .active-construction strong{font-size:15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-count{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-free-slots{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-plans{width:100%} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .queue-plans>summary{min-height:44px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .construction-orders>li{grid-template-columns:16px 1fr;gap:3px 6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .construction-orders .construction-art{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .order-copy{grid-column:2;grid-row:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen #construction-queue .order-controls{grid-column:2;grid-row:2;justify-content:flex-end} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog>header{padding:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog h2{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog nav button{font-size:12px;min-height:40px} :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-scroll>button{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-scroll{padding:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon>button{flex-basis:calc((100vw - 68px)/3);min-height:135px;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-art{height:83px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon>button>span:not(.catalog-art){font-size:12px;margin:4px 0 2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-catalog #building-ribbon small{font-size:12px} } :root body#realm-ui[data-ui-theme] #workspace #content-page :is(.recruitment-catalog>.locked img,.recruitment-portrait.locked>img){filter:grayscale(1);opacity:.55} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates{padding:8px;margin:8px 0;border:1px solid #ae8240;background:#302518;color:#ffe2a8} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates>strong{display:block;font-size:15px;font-weight:600} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:4px 0;color:#ffe2a8;font-size:14px;text-decoration:none;white-space:normal;text-align:left} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates button>span:last-child{white-space:nowrap} @media(min-width:951px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects>div{min-height:27px;margin:2px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-levels{padding-bottom:5px;margin-bottom:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-order>small{line-height:1.1} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .building-showcase{height:clamp(200px,26dvh,280px);min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects>div{grid-template-columns:22px minmax(90px,1fr) auto;gap:4px;min-height:32px;margin:4px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects .painted-icon{grid-row:1;width:22px;height:22px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects dd{grid-column:3;gap:4px;font-size:16px;display:grid;grid-template-columns:auto auto auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .modifier-before{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .modifier-gain{grid-column:1/-1;margin:0 0 0 auto;font-size:14px;padding:3px 7px} :root body#realm-ui[data-ui-theme] #workspace #activity-bar .guide-briefing{min-height:42px;padding:3px 5px} :root body#realm-ui[data-ui-theme] #workspace #activity-bar .guide-briefing h2{font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #activity-bar .guide-briefing button{min-height:36px;font-size:12px} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects dd{display:flex;gap:6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .modifier-before{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .upgrade-effects dd>span[aria-hidden]{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen .modifier-gain{font-size:14px;padding:4px 6px} :root body#realm-ui[data-ui-theme] #workspace #activity-bar .guide-briefing>img{width:30px;height:30px} } /* A single mobile supply rail leaves the scene and its next action in view. */ @media(max-width:950px){ :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:50px;height:62px;min-height:62px;gap:0 3px;padding:3px 6px 5px} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar::after{content:none;display:none} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-column:2;grid-row:1;gap:0;margin:0;min-width:0} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources .resource{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;padding:0 1px;min-width:0} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources .resource-icon{position:static;width:22px;height:22px;margin:0} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources .resource-icon .painted-icon{width:22px;height:22px} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources .resource-copy strong{font-size:15px;line-height:1.1} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #resources .resource-copy small{display:none} :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar #account{grid-column:3;grid-row:1;min-width:0;width:44px} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme][data-player=captain] #workspace .topbar .island-command-strip{display:contents!important} } :root body#realm-ui[data-ui-theme] #workspace #content-page .catalog-art.integrated-scene>img{object-fit:cover} /* The inspector already names the building; keep the landscape unobstructed. */ .research-tile-art,.research-tile-level,.research-selected-art>img,.research-level-picker{display:none} :root body#realm-ui[data-ui-theme][data-view=fleets] #workspace>.page-heading{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-stage{background:url('/art/caribbean/shipyard-scene.webp') center/cover;padding:12px;min-width:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board{background:linear-gradient(#141b1bed,#141b1bf5),var(--cabin);color:#fff0cc;padding:0;border-width:12px;border-image-width:16px;min-width:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--cabin);border-bottom:1px solid #ad8a48} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading>.painted-icon{width:38px;height:38px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading h1{font-size:27px;margin:0;color:#ffe5a8} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading .info-button{margin-left:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs{display:flex;gap:3px;padding:6px;border-bottom:1px solid #a68546;overflow-x:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs button{flex:1;min-width:95px;display:flex;gap:8px;align-items:center;justify-content:center;min-height:40px;padding:5px;color:#e9d6ad;background:#201c17;border:1px solid #a58852;border-image:none;box-shadow:none;font-size:14px;white-space:nowrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs button[aria-pressed=true]{background:#123f58;color:#fff0c5;border-color:#edc367} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs b{font-size:12px;color:#dabc82} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-list{padding:8px;min-height:0;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet{display:grid;grid-template-columns:100px minmax(0,1fr) 46px;gap:6px 10px;align-items:center;border:1px solid #9f7b42;background:linear-gradient(90deg,#103348,#151b1d);padding:6px;margin-bottom:8px;color:#f6e2b7} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-art{height:88px;background:url('/art/battle/sea.webp') center/cover;display:grid;place-items:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-art img{width:95px;height:83px;object-fit:contain} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet h3{font-size:20px;line-height:1.2;margin:0 0 5px;color:#ffe4ae} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet>div>span{font-size:13px;color:#e8d6b3} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet small{display:block;font-size:13px;color:#bade9f;margin-top:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet>button{padding:3px;min-height:46px;min-width:44px;font-size:26px;background:#13435b;color:#ffe3a4;border:1px solid #c29a56;border-image:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-manifest{grid-column:1/-1;border-top:1px solid #8b714e66} :root body#realm-ui[data-ui-theme] #workspace #content-page :is(.stationed-manifest,.fleet-manifest)>summary{cursor:pointer;padding:5px 2px;font-size:13px;min-height:30px;color:#e8cfa0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions{display:flex;gap:8px;padding:8px;border-top:1px solid #a28148;background:var(--cabin)} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;flex:1;font-size:17px;color:#ffe7b9;padding:5px;background:#103c55} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions .painted-icon{width:28px;height:28px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-empty{text-align:center;padding:24px 10px;color:#eddbb6} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-empty>.painted-icon{width:60px;height:60px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-empty h2{font-size:21px;color:#ffe8b8;margin:10px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-empty p{font-size:14px;margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-danger{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#5a231b;color:#fff0c9;font-size:14px;flex-wrap:wrap} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-danger>.painted-icon{width:28px;height:28px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-danger>span{margin-left:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .painted-fleet-row{background:linear-gradient(90deg,#122f3e,#171b1d);border:1px solid #9f7b42;box-shadow:none;border-image:none;color:#f5e3c0;margin:0 0 8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .painted-fleet-row :is(h3,.fleet-route-port b,.fleet-arrival strong,.fleet-captain){color:#ffebc1} :root body#realm-ui[data-ui-theme] #workspace #content-page .painted-fleet-row :is(.fleet-arrival small,.fleet-arrival time,.fleet-force-unknown){color:#dfc89f} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-painting{background:url('/art/battle/sea.webp') center/cover;border:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-manifest{display:block;margin-top:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin:6px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect>span{color:#ead8b2;font-size:14px;width:100%} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect>strong{font-size:24px;color:#c5ed97} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect>small{font-size:12px;color:#e0ccaa} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect .modifier-gain{margin:0;background:#29432c;color:#c7ed9c;font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-unlocks{display:grid;gap:4px;margin:6px 0;color:#c7ed9c;font-size:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-prerequisite{color:#ffca92;font-size:13px;padding:6px;background:#36291d;border:1px solid #b58749} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-prerequisite button{min-height:36px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity{grid-template-columns:auto 36px 52px 36px auto;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity input{width:52px;text-align:center;appearance:textfield;padding:3px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity input::-webkit-inner-spin-button{appearance:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity [data-recruit-step]{padding:0;min-width:36px;font-size:22px;color:#ffe2a3;background:#103c50;border:1px solid #b88c44;border-image:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-bonuses{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0;color:#e1cea9;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-bonuses b{color:#c5ed97;font-size:14px} @media(min-width:951px){ :root body#realm-ui[data-ui-theme] #workspace{padding-bottom:0} :root body#realm-ui[data-ui-theme] #workspace #content-page{min-height:0;padding-bottom:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-stage{height:calc(var(--game-height,100dvh) - var(--workspace-top,140px) - 62px);min-height:390px;margin:0 -14px;padding:8px 14px 8px 28px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board{margin-left:auto;width:min(1100px,85%);height:100%;display:flex;flex-direction:column} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-list{flex:1;overflow:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board>:not(.fleet-list){flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .painted-fleet-row{grid-template-columns:80px minmax(130px,1fr) minmax(130px,1fr) 140px;gap:8px;padding:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-painting{min-height:86px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-painting>img{width:75px;height:80px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-order h3{font-size:18px} :root body#realm-ui[data-ui-theme] #workspace #content-page .realm-islands{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));max-height:calc(var(--game-height,100dvh) - var(--workspace-top,200px) - 12px);overflow:auto;align-items:start} :root body#realm-ui[data-ui-theme] #workspace #content-page .realm-island-picture{height:150px} :root body#realm-ui[data-ui-theme] #workspace #content-page .realm-island-card{max-width:540px} :root body#realm-ui[data-ui-theme] #workspace #content-page .captains-desk{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;width:min(1050px,88%);max-height:calc(var(--game-height,100dvh) - var(--workspace-top,200px) - 68px);overflow:auto;min-height:0;padding:7px 10px;border-width:12px;border-image-width:16px;margin-bottom:0;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .captains-desk :is(.study-heading,.desk-metrics,.desk-latest,.desk-shortcuts){grid-column:1/-1} :root body#realm-ui[data-ui-theme] #workspace #content-page .study-heading{margin:-7px -10px 0;padding:7px 10px;gap:9px} :root body#realm-ui[data-ui-theme] #workspace #content-page .study-heading>img{width:44px;height:44px} :root body#realm-ui[data-ui-theme] #workspace #content-page .study-heading h1{font-size:23px} :root body#realm-ui[data-ui-theme] #workspace #content-page .desk-metrics{padding:6px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .desk-metrics strong{font-size:22px} :root body#realm-ui[data-ui-theme] #workspace #content-page .captains-desk h2{font-size:18px;padding:5px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .desk-shortcuts{margin:0} :root body#realm-ui[data-ui-theme][data-view=desk] #workspace #content-page .realm-section-tabs{width:min(1050px,88%);margin-bottom:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .council-board{width:min(1000px,80%);max-height:calc(var(--game-height,100dvh) - var(--workspace-top,200px) - 30px);overflow:auto;scrollbar-width:thin;margin-bottom:0;border-width:12px;border-image-width:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .report-journal{width:min(1050px,85%);max-height:calc(var(--game-height,100dvh) - var(--workspace-top,200px) - 68px);overflow:auto;scrollbar-width:thin;margin-bottom:0;border-width:12px;border-image-width:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .construction-screen :is(.construction-caption,.showcase-plaque){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene{height:calc(var(--game-height,100dvh) - var(--workspace-top,140px) - 12px);min-height:400px;padding-top:8px;padding-bottom:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-board{height:100%;width:min(1000px,78%);display:flex;flex-direction:column;overflow:auto;border-width:12px;border-image-width:16px;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title{padding:3px 10px;flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title h1{font-size:26px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title img{width:32px;height:32px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy{padding:5px 10px;flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy>span{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy>small{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-tree{flex:1;min-height:200px;padding:0 2px 3px;overflow:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch{min-width:76px;flex-basis:76px;display:flex;flex-direction:column} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch-title{min-height:59px;height:59px;font-size:13px;flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch-title .painted-icon{width:29px;height:29px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-ladder{min-height:0;flex:1;gap:3px;padding:4px 0;justify-content:space-around} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-node{height:clamp(30px,4.5dvh,54px);min-height:30px;min-width:38px;width:clamp(38px,4.5dvh,54px)} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-hex>.painted-icon{width:24px;height:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-node .node-lock{width:20px;height:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection{flex-shrink:0;padding:8px;gap:8px;grid-template-columns:48px minmax(0,1fr) 170px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selected-art .painted-icon{width:45px;height:45px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection h2{font-size:21px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-description{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-screen{height:calc(var(--game-height,100dvh) - var(--workspace-top,140px) - 12px);min-height:400px;grid-template-columns:minmax(0,1fr) minmax(400px,43%);grid-template-rows:minmax(0,1fr) 34px 130px;padding-top:8px;padding-bottom:8px;gap:8px 16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-workbench{grid-row:1/3;height:100%;min-height:0;display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:1fr;align-self:stretch;overflow:auto;border-width:12px;border-image-width:15px;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait{grid-column:1;grid-row:1;align-self:start;height:114px;min-height:0;margin-top:4px;z-index:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait>img{height:90px;width:100%;margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait>span{font-size:11px;left:3px;right:3px;bottom:0;text-align:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order{grid-column:1/-1;grid-row:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order>header{min-height:120px;padding:8px 8px 8px 118px;align-items:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order h2{font-size:25px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats>span{grid-template-columns:20px 1fr;font-size:16px;gap:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats>span small{grid-column:1/-1;font-size:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-description{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates{display:block;padding:5px 7px;margin:5px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates button{min-height:28px;padding:2px 0;font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order form{grid-template-columns:1fr auto;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog{height:130px;align-self:stretch;border-width:10px;border-image-width:13px;padding:2px;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog>button{min-height:0;flex-basis:108px;gap:1px;padding:1px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog img{height:56px;width:90px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog strong{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-status{min-height:80px;border-width:10px;border-image-width:13px;font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-status strong{font-size:16px} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-stage{margin:0 -10px;padding:clamp(155px,23dvh,230px) 6px 10px;background-position:center top;background-size:auto 340px;background-repeat:no-repeat;background-color:#162b2a} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board{border-width:8px;border-image-width:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading{padding:5px;gap:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-heading h1{font-size:25px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs{padding:5px 3px;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-tabs button{min-height:44px;min-width:96px;font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-list{padding:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet{grid-template-columns:78px minmax(0,1fr) 44px;gap:5px;padding:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-art{height:83px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-art img{width:76px;height:76px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet h3{font-size:18px} :root body#realm-ui[data-ui-theme] #workspace #content-page .stationed-fleet>div>span{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page :is(.stationed-manifest,.fleet-manifest)>summary{min-height:40px;padding:8px 2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions{padding:5px;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions button{font-size:14px;padding:4px;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-board-actions .painted-icon{width:24px;height:24px} :root body#realm-ui[data-ui-theme] #workspace #content-page .painted-fleet-row{grid-template-columns:76px minmax(0,1fr);gap:5px 8px;padding:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-painting{grid-column:1;grid-row:1;min-height:90px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-painting>img{width:75px;height:83px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-order{grid-column:2;grid-row:1;padding:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-order h3{font-size:19px;line-height:1.2;margin:0 0 4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-captain{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-route{grid-column:1/-1;grid-row:2;padding:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-time{grid-column:1/-1;grid-row:3;padding:0;display:flex;justify-content:space-between} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-arrival{display:flex;gap:6px;align-items:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-arrival strong{font-size:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-arrival time:not([data-end]){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .fleet-map-button{min-height:44px;min-width:44px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection{align-items:start;grid-auto-rows:min-content} :root body#realm-ui[data-ui-theme] #workspace #content-page :is(.research-scene,.recruitment-screen){margin:0 -10px;padding:clamp(180px,25dvh,280px) 6px 12px;width:auto;min-height:0;background-size:auto 430px;background-position:center top;background-color:#17241f;gap:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-board{width:100%;border-width:9px;border-image-width:12px;background:var(--cabin);overflow:visible} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title{padding:5px 8px;order:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title h1{font-size:25px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-scene-title img{width:30px;height:30px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy{order:1;padding:7px;font-size:12px;gap:3px 8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy>span{font-size:13px;width:100%} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-policy>small{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-project{order:2} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-tree{order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px;max-height:none;overflow:visible} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch{min-width:0;border:1px solid #a48349;box-shadow:none;background:var(--cabin);position:relative} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch.selected{outline:2px solid #e9c676;outline-offset:1px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch-title{position:relative;min-height:100px;height:100px;padding:0;border:0;background:none!important;display:flex;justify-content:flex-end;overflow:hidden;isolation:isolate} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-tile-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:-1} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch-title>.painted-icon{position:absolute;left:6px;top:7px;width:36px;height:36px;filter:drop-shadow(0 2px 2px #000)} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch-title>span:not(.painted-icon){width:100%;padding:5px 2px;background:#151715f2;font-size:16px;color:#ffebbd;text-shadow:0 1px #000} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-tile-level{display:grid;place-items:center;position:absolute;right:5px;top:5px;border:2px solid #d6ac5a;border-radius:50%;width:27px;height:27px;background:#16232a;color:#fff0bf;font-size:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch.locked .research-tile-art{filter:grayscale(1)} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-ladder,:root body#realm-ui[data-ui-theme] #workspace #content-page .research-branch>small{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection{order:4;grid-template-columns:70px minmax(0,1fr);padding:10px 8px;gap:8px;scroll-margin-top:75px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selected-art{width:70px;height:80px;border:1px solid #b38f4b;overflow:hidden} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selected-art>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selected-art .painted-icon{position:absolute;top:5px;left:5px;width:35px;height:35px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection h2{font-size:22px;line-height:1.15} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-description{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect{gap:4px 7px;margin:3px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-effect .modifier-gain{font-size:12px;padding:4px 5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-selection .text-button{font-size:13px;min-height:40px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-level-picker{display:flex;align-items:center;justify-content:space-between;gap:8px;grid-column:1/-1;color:#e7d1a6;font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-level-picker select{width:auto;min-width:0;max-width:65%;min-height:44px;background:#111e24;color:#fff0cf;border:1px solid #b99250;font-size:16px;margin:0;padding:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-start{grid-column:1/-1;padding-top:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .research-contribution{order:5} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-choice-label{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog-heading{order:0;padding:5px 8px;min-height:36px;background:var(--cabin);margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog-heading h3{display:block;font-size:19px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-capacity{margin-left:auto;font-size:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog{order:1;margin:0 0 6px;border-width:8px;border-image-width:11px;padding:3px;gap:5px;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog>button{flex-basis:calc((100vw - 60px)/3);min-height:112px;padding:2px;border-width:5px;border-image-width:7px;gap:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog img{width:100%;height:64px;object-fit:contain} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog strong{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-catalog span{font-size:10px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-workbench{order:2;display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-rows:110px auto;border-width:9px;border-image-width:12px;overflow:hidden} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait{grid-column:1;grid-row:1;min-height:0;height:110px;z-index:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait>img{width:110px;height:86px;margin:0 0 15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-portrait>span{font-size:11px;bottom:3px;left:4px;right:4px;padding:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order{display:contents} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order>header{grid-column:2;grid-row:1;padding:6px;min-width:0;gap:3px;background:var(--cabin)} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order h2{font-size:23px;overflow-wrap:anywhere} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-paper{grid-row:2;grid-column:1/-1;padding:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-description{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats>span{grid-template-columns:20px 1fr;font-size:17px;gap:3px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-stats small{grid-column:1/-1;font-size:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order form{display:grid;grid-template-columns:1fr;gap:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity{grid-template-columns:1fr 44px 50px 44px auto;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-quantity :is(input,button){min-height:44px;height:44px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-order .duration{font-size:14px;text-align:right} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-gates{display:block;padding:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-status{order:3;border-width:9px;border-image-width:12px;padding:6px;margin-top:6px;display:flex} :root body#realm-ui[data-ui-theme] #workspace #content-page .recruitment-status span{font-size:13px} } /* The island remains the main scene; its controls share the available viewport. */ :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure{display:none} @media(min-width:951px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .immersive-island{height:calc(var(--game-height,100dvh) - var(--workspace-top,140px) - 10px);min-height:440px} :root body#realm-ui[data-ui-theme] #workspace #content-page .immersive-island .island-viewport{height:100%;min-height:0;max-height:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-orders{max-height:calc(100% - 195px);overflow:auto;scrollbar-width:thin} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace:has(.immersive-island) .island-subnav{min-height:46px;padding-bottom:0} :root body#realm-ui[data-ui-theme] #workspace:has(.immersive-island) .island-subnav nav{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .immersive-island .island-viewport{height:clamp(330px,43dvh,480px);min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .immersive-island .island-panorama{width:calc(max(780px,100%)*var(--island-zoom))} :root body#realm-ui[data-ui-theme] #workspace #content-page .island-scene-toolbar{left:auto;right:8px;top:8px;gap:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .island-scene-toolbar button:is([data-scene-mode],[data-show-queue]){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-orders{order:1;margin:0 6px 6px;border-width:9px;border-image-width:12px;padding:2px 5px;max-height:165px;overflow:auto;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-orders header{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-orders-title{min-height:34px;font-size:17px;padding:2px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job{min-height:50px;padding:4px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job strong{font-size:16px;margin-bottom:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job small{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job-empty{min-height:44px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job-empty .painted-icon{width:30px;height:34px;flex-basis:30px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-job-empty strong{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell{order:3;display:flex;flex-wrap:wrap;margin:0 6px 8px;padding:0;border:0;border-image:none;background:none;box-shadow:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell>button{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell #building-ribbon{display:grid;grid-template-columns:1fr 1fr;gap:7px;flex:1 1 100%;overflow:visible;padding:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell #building-ribbon>button{min-width:0;max-width:none;width:100%;min-height:144px;padding:0 0 4px;border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 0 stretch;box-shadow:none;background:var(--cabin);font-size:16px;display:flex;flex-direction:column;gap:3px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell:not(:has(.scene-catalog-disclosure[open])) #building-ribbon>button:nth-child(n+5){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-tile-art{width:100%;height:90px;margin:0;display:block;overflow:hidden} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-tile-art img{width:100%;height:100%;object-fit:cover} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-ribbon-shell small{font-size:13px;margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure{display:block;width:100%;margin:6px 0 0;background:var(--cabin);border:1px solid #ac8241;color:#ffe4a1} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;font-size:15px;cursor:pointer;list-style:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure summary::-webkit-details-marker{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure .show-less,:root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure[open] .show-all{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure[open] .show-less{display:inline} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-catalog-disclosure[open] b{transform:rotate(180deg)} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-inspector{order:2;border-width:10px;border-image-width:13px;margin:0 6px 6px;padding:5px 7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-inspector h2{font-size:23px} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-chart{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .scene-dispatch{order:4;border-width:8px;border-image-width:10px;margin:0 6px 8px;font-size:15px;min-height:44px} } /* One battle table, with real server counts over an illustrated sea. */ :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-monitor{background:#111d23 url('/art/interface/cabin-timber.webp') center/450px;margin:4px 0 8px;min-width:0;position:relative} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-panorama{display:none;background:url('/art/battle/broadside-panorama.webp') center/cover} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-monitor[data-combat-phase=land] .combat-panorama{background-image:url('/art/building-scenes/fort.webp')} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-heading{border-width:7px;border-image-width:9px;padding:5px 8px;gap:6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-title{padding:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-title h2{font-size:23px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side-title strong{font-size:16px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-tabs{border:0;border-image:none;border-bottom:1px solid #ae8440;padding:4px 8px;min-height:42px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-arena{min-height:0;max-height:none;padding:8px;gap:8px;background:linear-gradient(#063b5533,#03253877),url('/art/battle/broadside-panorama.webp') center/cover;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side{grid-auto-rows:84px;gap:6px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad{border:1px solid #988351;border-image:none;padding:5px 7px;min-height:0;grid-template-columns:80px minmax(0,1fr);gap:6px;background:linear-gradient(100deg,#0a3148db,#081b28f5);box-shadow:inset 0 0 0 2px #0b1c28} :root body#realm-ui[data-ui-theme] #workspace #content-page .hostile .combat-squad{background:linear-gradient(100deg,#4a2229e5,#23151af5)} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad.selected{outline:2px solid #ffe0a0;outline-offset:-2px;box-shadow:0 0 6px #cda94966} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-art{height:62px;position:static;width:auto;grid-row:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-copy{gap:2px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-copy>strong{font-size:14px;line-height:1.15} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-count{font-size:18px;height:auto;padding:0;line-height:1.1;text-align:left} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-count small{display:inline;font-size:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-copy>small{font-size:10px;line-height:1.2} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-fort{min-height:30px;padding:4px 8px;gap:7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-fort>span:last-child:not(.combat-governor){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail{border-width:7px;border-image-width:9px;padding:4px 6px;min-width:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail>header{margin-bottom:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit{padding:3px;min-width:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit>img{height:42px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-notebook{min-width:0;min-height:0;background:#1c1b17 url('/art/interface/cabin-timber.webp') center/420px;border:1px solid #987640} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log{padding:8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log h3{font-size:16px;flex-wrap:wrap;gap:3px;margin-bottom:6px;color:#ffe5ae} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log h3 small{font-size:11px;color:#d6bf95} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log ol{background:#eddfbf;color:#30200e;max-height:none;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log li{grid-template-columns:40px 24px 1fr;font-size:13px;line-height:1.35;padding:6px;gap:4px;border-bottom:1px solid #a2814c55} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log li :is(time,small){color:#624522;font-size:11px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-replay{padding:6px 8px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-replay summary{min-height:40px;display:flex;align-items:center;font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions{padding:5px 8px;gap:7px;margin:0;background:var(--cabin)} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 10px;font-size:15px;border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 0 stretch;background:linear-gradient(#175e80,#0c3148);color:#ffebc2} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions .painted-icon{width:26px;height:26px;flex:0 0 26px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions .combat-retreat{background:linear-gradient(#823124,#4c2019)} @media(min-width:951px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-monitor:has(.combat-arena){display:grid;grid-template-columns:minmax(0,1fr) 265px;grid-template-rows:auto auto minmax(130px,1fr) auto auto auto auto;grid-template-areas:'heading heading' 'tabs notes' 'arena notes' 'fort notes' 'incoming notes' 'units notes' 'actions actions';height:calc(var(--game-height,100dvh) - var(--workspace-top,130px) - 62px);min-height:470px;gap:0 8px} :root body#realm-ui[data-ui-theme] #workspace #content-page:has(.combat-picker) .combat-monitor{height:calc(var(--game-height,100dvh) - var(--workspace-top,130px) - 116px);min-height:425px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-heading{grid-area:heading} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-tabs{grid-area:tabs} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-arena{grid-area:arena;overflow-y:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-fort{grid-area:fort} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-incoming{grid-area:incoming;padding:4px 8px;font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail{grid-area:units} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail .combat-unit{display:flex} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-notebook{grid-area:notes;overflow:auto;scrollbar-width:thin} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions{grid-area:actions;position:static} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-kicker{display:none} } @media(max-width:950px){ :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-monitor{display:flex;flex-direction:column;margin:0 -10px 10px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-panorama{display:block;height:clamp(195px,27dvh,290px);flex-shrink:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-heading{grid-template-columns:1fr 1fr;margin:-47px 5px 0;position:relative;z-index:1} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-title{grid-column:1/-1;grid-row:1;border-bottom:1px solid #b1904d66;padding:2px 0 5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-title h2{font-size:21px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-title p{font-size:13px;line-height:1.3;margin:3px 0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side-title>small{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side-title>strong{font-size:15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side-title>span{font-size:13px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side-title>span>b{font-size:22px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-tabs{margin:0 5px;padding:2px 4px;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-tabs>button{font-size:14px;min-height:44px;padding:3px 7px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-arena{max-height:340px;padding:5px;gap:5px;overflow:auto;background-image:url('/art/battle/sea.webp')} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-side{grid-auto-rows:76px;gap:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad{display:grid;grid-template-columns:48px minmax(0,1fr);padding:4px;gap:4px;border:1px solid #8d784c;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-art{position:static;width:48px;height:54px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-art img{width:100%;height:100%;margin:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-art img:not(:first-child){display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-copy>strong{font-size:12px;min-height:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-count{font-size:17px;height:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-count small{font-size:10px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-squad-copy>small{display:none} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-health{height:16px;min-width:0} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-health b{font-size:11px;line-height:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail{margin:0 5px;padding:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail h3{font-size:15px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-detail>header>span{font-size:12px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-units{grid-template-columns:32px minmax(0,1fr) 32px;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit-cards{display:flex;overflow:auto;gap:5px;scroll-snap-type:x mandatory} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit{flex:0 0 85px;display:block;text-align:center} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit>img{width:100%;height:40px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-unit small{font-size:10px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-notebook{margin:5px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-log ol{max-height:132px;overflow:auto} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions{order:10;position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:4;padding:4px;gap:4px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions button{padding:3px 4px;gap:3px;font-size:14px} :root body#realm-ui[data-ui-theme] #workspace #content-page .combat-actions .painted-icon{width:20px;height:22px;flex:0 0 20px} } /* The chart is a full-viewport sea, with a small timber field desk above it. */ :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page{isolation:isolate;overflow:hidden} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page .map-card{border:0;border-image:none;box-shadow:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page #island-detail{display:block;position:absolute;top:24px;right:22px;bottom:auto;left:auto;width:340px;max-height:calc(100% - 48px);padding:16px 12px 12px;border:0;border-image:none;border-radius:0;overflow:auto;background:url('/art/interface/cabin-timber.webp') center/600px;color:#fff0cd;box-shadow:0 7px 16px #0007;clip-path:polygon(1% 3%,19% 1%,48% 2%,76% 0,99% 3%,100% 31%,98% 68%,100% 97%,72% 99%,40% 98%,2% 100%,0 64%)} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page #island-detail::before{content:'';position:absolute;inset:3px;pointer-events:none;border:7px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 9px / 0 stretch} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page #island-detail[hidden]{display:none!important} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-island-heading{display:flex;align-items:center;gap:8px;padding:3px 23px 8px 0;border-bottom:1px solid #aa824b;background:none;text-align:left} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-island-heading>div{min-width:0} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-island-miniature{display:block;flex:0 0 76px;width:76px;height:76px;filter:drop-shadow(0 3px 3px #0008)} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #island-detail h2{margin:3px 0;font-size:23px;line-height:1.15;color:#fff0cd;text-shadow:0 2px 2px #000;padding:0;overflow-wrap:anywhere} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #island-detail :is(p,small){font-size:13px;line-height:1.3;margin:0;color:#ecd3a6} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #island-detail .chart-popup-close{top:7px;right:7px;width:44px;height:44px;min-width:44px;min-height:44px;z-index:2;border:0;background:none;box-shadow:none;color:#ffe3a5;font-size:28px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-popup-actions{display:flex;gap:4px;flex-wrap:nowrap;padding-top:8px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-popup-actions button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 3px;min-height:70px;border:0;border-image:none;box-shadow:none;background:url('/art/caribbean/menu-sign.webp') center/100% 100% no-repeat;color:#ffedc7;font-size:13px;line-height:1.2;text-shadow:0 1px 2px #000;filter:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-popup-actions .painted-icon{width:30px;height:30px;flex-basis:30px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-toolbar .segmented{border:0;border-image:none;background:none;box-shadow:none;gap:4px;padding:0} :root body#realm-ui[data-ui-theme][data-view=map] #workspace :is(.map-toolbar,.map-controls) button{border:0;border-image:none;background:url('/art/interface/wood-icon.webp') center/100% 100% no-repeat;box-shadow:none;color:#ffe9b5;width:44px;height:44px;min-height:44px;padding:10px;filter:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-toolbar button.active{color:#fff5d9;outline:1px solid #e9c06d;outline-offset:-7px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend{top:85px;bottom:auto;left:148px;right:auto;display:grid;grid-template-columns:1fr;gap:7px;max-width:230px;padding:15px 20px;background:#ead7ae url('/art/interface/parchment.webp') center/cover;border:0;border-image:none;box-shadow:0 5px 12px #0005;color:#362314;clip-path:polygon(2% 0,98% 2%,100% 95%,93% 99%,63% 97%,29% 100%,0 97%)} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend[hidden]{display:none!important} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend .legend-label{display:inline;font-size:14px;color:#362314} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend .legend-item{display:flex;gap:9px;align-items:center;min-height:22px;grid-column:auto} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend .legend-marker{box-shadow:0 0 0 1px #63462e} :root body#realm-ui[data-ui-theme] #toast{background:#302117 url('/art/interface/cabin-timber.webp') center/600px;color:#fff0d0;border:6px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 8px / 0 stretch;font-size:15px;line-height:1.35;padding:10px 15px;box-shadow:0 5px 15px #0007;max-width:min(420px,calc(100vw - 24px));width:max-content;clip-path:polygon(1% 3%,98% 0,100% 95%,2% 100%,0 40%)} :root body#realm-ui[data-ui-theme] #toast.error{color:#ffd3ba} @media(max-width:950px){ :root body#realm-ui[data-ui-theme][data-view=map]{overflow:hidden} :root body#realm-ui[data-ui-theme][data-view=map] #workspace{height:calc(var(--game-height,100dvh) - 64px - env(safe-area-inset-bottom));min-height:0;padding:0} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar{flex:0 0 62px;min-height:62px;height:62px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page{flex:1;min-height:0;margin:0} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page .map-card{inset:0;height:100%;width:100%;min-height:0;max-height:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-toolbar{top:12px;left:10px;right:auto;gap:4px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-legend{left:10px;top:65px;z-index:15} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-overview-wrap{display:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-controls{right:8px;top:78px;bottom:auto;gap:3px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-controls>span{display:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #map-page #island-detail{top:auto;bottom:8px;left:8px;right:8px;width:auto;max-height:45%;padding:12px 10px 8px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-island-miniature{width:62px;height:62px;flex-basis:62px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace #island-detail h2{font-size:22px} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-popup-actions button{min-height:66px;font-size:13px;padding:7px 2px} :root body#realm-ui[data-ui-theme] #toast{bottom:calc(76px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%)} } :root body#realm-ui[data-ui-theme][data-view=map] #workspace :is(.map-toolbar,.map-controls) button{background:url('/art/interface/cabin-timber.webp') center/240px;border:5px solid transparent;border-image:var(--carved-frame) 170 140 170 140 / 6px / 0 stretch;padding:6px;clip-path:polygon(3% 0,96% 3%,100% 94%,3% 100%,0 40%)} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-controls{display:flex;flex-direction:column} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .map-toolbar button.active{outline:0;color:#fff1bc;filter:brightness(1.3)} :root body#realm-ui[data-ui-theme][data-view=map] #toast{top:128px;bottom:auto;z-index:80} @media(max-width:950px){ :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar::after{content:'Die Karibische See';display:block;position:absolute;left:58px;right:60px;top:20px;font-size:17px;line-height:1.2;text-align:center;color:#ffe6b4;pointer-events:none} :root body#realm-ui[data-ui-theme][data-view=map] #toast{top:125px;bottom:auto} } :root body#realm-ui[data-ui-theme][data-view=map] #workspace .chart-popup-actions button:only-child{flex:0 1 190px;margin-inline:auto} @media(max-width:950px){ :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar #account:has([data-auth]){position:absolute;right:8px;top:8px;width:76px;display:block;margin:0} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar #account [data-auth=login]{display:block;width:76px;min-height:44px;padding:4px;font-size:12px;color:#ffe6b4} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar #account [data-auth=register]{display:none} :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar:has([data-auth])::after{right:88px;font-size:15px} } :root body#realm-ui[data-ui-theme][data-view=map] #workspace .topbar #account [data-auth=login]::after{content:none;display:none}