/* Native artwork and clearer website surfaces share the game's slate and gold palette. */
:root{--bg:#0e151f;--surface:#182430;--surface-2:#223343;--line:#3e5367;--muted:#acbdc9;--green:#a7cfbd}
body{background:radial-gradient(ellipse at 20% 0%,#25394d66,transparent 48%),radial-gradient(ellipse at 95% 38%,#172a3866,transparent 50%),var(--bg)}.siteHeader{background:#101a25ec;border-bottom-color:#7794ad20}.brandMark i{box-shadow:0 0 12px #efca8b20}.navLinks{color:#b5c4d0}.hero{gap:64px;padding:38px 0 34px}.hero h1{font-size:38px;text-shadow:0 2px 15px #0002}.hero p{color:#b3c2ce}.unionSnapshot{background:linear-gradient(125deg,#273c4c99,#1b293b99);border-color:#8298a54d;box-shadow:0 18px 60px #0002,inset 0 1px #ffffff08}.snapshotRank{font-size:19px}.snapshotStats{border-top-color:#9ab1c533}.savedPill,.autoSaved{color:#d2ddc2;background:#6f83612b;border-color:#a5b9832b}.plannerTop{border-top-color:#8ba0b51f}.plannerTitle p{font-size:11px;color:#a6bac9}.sectionSymbol{background:#2c405280;border-color:#73879955}.workspace{gap:24px}.gameViewport{border:1px solid #7890a04d;border-radius:12px;box-shadow:0 20px 60px #0004}.boardToolbar{min-height:44px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}.boardToolbarTitle{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.boardToolbarTitle strong{font-size:13px;letter-spacing:-.3px;font-weight:600;color:#d2dfeb}.boardToolbarDot{width:6px;height:6px;background:#e4c391;border-radius:2px}.boardToolbarActions{display:flex;align-items:center;gap:8px}.boardToolbarActions button{min-height:32px;font-size:11px;padding:6px 10px;background:#1d2c3a;border-color:#58728477;color:#c5d4df;display:flex;align-items:center;gap:6px}.boardToolbarActions .icon{width:15px;height:15px}.boardToolbarActions button[aria-pressed=true]{background:#344956;border-color:#dfc897;color:#f2dfb4}.areaLayoutBadge{font-size:9px;color:#dcceaa;padding:2px 7px;border:1px solid #bb986133;border-radius:12px;background:#b3955f18}.boardHint{color:#a3bbce;font-size:11px}.boardHint button{color:#cedce5}.areaEditMode #board button,.priorityMode #board button{cursor:pointer}
#gameAreaHighlight{position:absolute;inset:0;pointer-events:none;z-index:3;isolation:isolate}#board{z-index:2}#gameLabels{z-index:4}#gameLabels img,#areaChangePreviewLabels img{image-rendering:auto}.nativeAreaHighlight{image-rendering:auto;position:absolute;pointer-events:none;overflow:visible}#gameStage .originalFilter{position:absolute!important;border:0!important;background:transparent!important;padding:0;border-radius:2px;box-shadow:none!important;min-width:0;min-height:0;cursor:pointer}.originalFilter img{position:absolute;left:0;top:0;width:12px;height:12px;pointer-events:none;image-rendering:auto}.originalFilter:focus-visible{outline:1px solid #efcf96;outline-offset:3px}.nativeFilterCount{position:absolute;pointer-events:none;line-height:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#nativeFilterEmpty{position:absolute;left:637px;top:262px;width:311px;color:#c6d1db;text-align:center;font-size:12px;line-height:1.8;padding:18px 12px;background:#182a3699;border:1px solid #7a94ac33;border-radius:8px}
#settings{height:calc(var(--board-height,720px) + 94px);min-height:722px;background:linear-gradient(145deg,#243747,#192836);border-color:#7793a34d;border-radius:12px;box-shadow:0 20px 60px #0003}#settings>.settingsTitle{font-size:17px;padding:21px 22px 16px}.settingsTitle>span:first-child:before{color:#a2bccb;letter-spacing:2px}.settingsTabs{background:#172634;border-color:#7d98aa40}.settingsTabs button{font-size:12px;min-height:40px}.settingsTabs button[aria-selected=true]{background:#385569;color:#fff1d2}.overviewStat{color:#b6c8d5;font-size:11px}.overviewStat strong{font-size:19px}.capacityTrack{height:4px;background:#101f2c}.capacityTrack i{background:linear-gradient(90deg,#98b9bc,#d7cd9b)}.panel{padding:20px 21px 14px}.panel label{font-size:12px;color:#d2deea}.panel select,.panel input[type=number]{background:#142432;border-color:#64839866;color:#ecf2f4}.arrangementModes button{background:#1a2b39;border-color:#6b84945c;padding:12px 10px}.arrangementModes strong{font-size:12px}.arrangementModes span{font-size:10px;line-height:1.6;color:#9fb6c7}.arrangementModes button[aria-pressed=true]{background:#3a5060;border-color:#ceba90;box-shadow:inset 3px 0 #edcb96}.arrangementModes button[aria-pressed=true] span{color:#d0dbd8}.scopeSettings,.settingsGroup{background:#14273455;border-color:#6f8aa24a}.scopeSettings summary,.settingsGroup>summary{font-size:11px;color:#c1d2de}.scopeSettings>summary strong{color:#d9ddbf}.priorityHeading span{font-size:13px}.priorityHeading small{color:#b4c6cf}.priorityRow{background:linear-gradient(135deg,#334b5b99,#203a4d99);border-color:#6d8b9c55}.priorityRowHeader>span{font-size:13px;color:#e5edf4}.priorityIndex{background:#5f7267;color:#fce6bc}.priorityRowHeader button{background:#213846;border-color:#768d9844;color:#cbd9dd}.goalCounter{background:#172a36;border-color:#7593a466}.goalCounter button,.priorityRow .goalCounter button{background:#365363!important;color:#eef1d9!important}.goalCounter input,.priorityRow .goalCounter input{background:#152937!important;color:#ffe6be}.priorityTarget>label,.boostAllowance>label{color:#bdcfd9!important}.goalCapacity{color:#adc2ce}.goalAll,.priorityRow .goalAll{background:#374c58;border-color:#7894a055;color:#dce5db}.goalAll[aria-pressed=true],.priorityRow .goalAll[aria-pressed=true]{background:#5c6552;border-color:#c9bd8977;color:#f5ebcb}.goalRowHint{color:#aac1cf}.goalSummary{color:#e5ddc0;border-color:#bdac6b33;background:#b7a46419}.goalHelp{color:#b2c6d2!important}.selectionStrategyWrap{background:#324c5c55;border-color:#90adac55}.selectionStrategyWrap p{color:#bfd1dc}.boostOption>small{color:#c8d6c4}.boostExplanation{color:#b0c6d2}.quickRow{background:#28414e77;border-color:#7894a04a}.quickRow.hasBlocks{background:#3c56616b;border-color:#9cb29f44}.quickJob{color:#e1eaf0}.quickCounter button{background:#3b5967;border-color:#799aa255}.quickCounter input{color:#fce7c6}.settingsFooter{background:#122431e0;border-color:#8cabb033;padding-top:15px}#dockStatus{font-size:11px;color:#d6e4df;line-height:1.8}#setupNotice{line-height:1.7}#run{min-height:43px;background:linear-gradient(110deg,#f1cf9b,#ddca97);font-size:13px;color:#24313a;box-shadow:0 4px 15px #0002}#stop{min-height:40px;background:#233a49;border-color:#667f8f66}#export{border-color:#7994a033;color:#bbced9}.footerCopy{color:#89a2b3}.footerBrand{color:#c5d4d9}
.areaChangeDialog{width:min(820px,calc(100vw - 36px));max-height:calc(100dvh - 48px);overflow:auto;padding:0;border:1px solid #8ea5b265;border-radius:18px;background:linear-gradient(130deg,#22394b,#152735);color:#e7edf0;box-shadow:0 28px 100px #0008}.areaChangeDialog::backdrop{background:#070f18b8;backdrop-filter:blur(8px)}.areaChangeHeader{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:25px 28px 22px;border-bottom:1px solid #95adbf22}.areaChangeHeader .eyebrow{font-size:9px;letter-spacing:2px}.areaChangeHeader h2{font-size:23px;line-height:1.4;margin:9px 0 7px;letter-spacing:-.6px}.areaChangeHeader p{font-size:12px;color:#b5c9d8;word-break:keep-all}.areaChangeHeader>button{padding:7px;border-color:#8ba2b23d;background:#47607022;border-radius:8px}.areaChangeContent{display:grid;grid-template-columns:286px 1fr;gap:25px;padding:24px 28px}.areaChangeVisual{background:#0e2030;border:1px solid #8aa0b33a;border-radius:12px;padding:9px 0 20px;text-align:center;overflow:hidden}.areaChangePreviewViewport{width:284px;height:229px;position:relative;overflow:hidden;margin-bottom:16px}#areaChangePreview{position:relative;width:600px;height:482px;background-size:994px 720px;transform:scale(.474);transform-origin:top left}#areaChangePreviewLabels,#areaChangePreviewHighlight{position:absolute;inset:0;pointer-events:none}#areaChangePreviewLabels img{position:absolute}#areaChangeKind{display:block;font-size:10px;color:#abbecc}#areaChangeCurrent{display:block;font-size:17px;color:#f3dfb7;margin-top:4px}.areaChangeVisual>p{font-size:10px;color:#91aaba;margin-top:5px}.areaChangeFieldHeading{font-size:13px;font-weight:600;margin:0 0 12px;color:#d8e4e9}#areaChangeChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.areaChangeChoice{min-height:80px;text-align:left;padding:10px 12px;border-color:#718b9e4d;background:#2a435366;position:relative;border-radius:9px}.areaChangeChoice img{display:block;height:14px;width:auto;max-width:100%;opacity:.75;margin-bottom:6px;image-rendering:auto}.areaChangeChoice strong{display:block;font-size:12px;font-weight:600;color:#e6edf2}.areaChangeChoice small{display:block;font-size:9px;color:#a6becc;margin-top:3px}.areaChangeChoice:hover:not(:disabled){border-color:#d3bb89;background:#3c5460}.areaChangeChoice[aria-pressed=true]{background:#535946;border-color:#c7b689}.areaChangeChoice[aria-pressed=true]:after{content:'✓';position:absolute;right:10px;top:8px;color:#f2deaf;font-size:12px}.areaChangeNotice{padding:12px 15px;margin:0 28px 21px;background:#7e9c7b18;border:1px solid #96b68c28;border-radius:8px;font-size:11px;color:#c1d9c6;line-height:1.8;word-break:keep-all}.areaChangeNotice.simulationNotice{color:#edd9ba;background:#cda06014;border-color:#d9ac7633}.areaChangeFooter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 28px 21px;border-top:1px solid #95adbf22}.areaChangeFooter>span{font-size:10px;color:#9fb8c7}.areaChangeFooter button{min-width:85px;min-height:37px;background:#dccc9e;color:#243340;border-color:#dfd2aa;font-size:12px;font-weight:600}
@media(max-width:1120px){#settings{height:auto;min-height:0}.hero{gap:30px}.boardToolbar{padding:0 2px}.panel.activePanel{max-width:700px}.settingsFooter{padding-top:18px}}
@media(max-width:760px){.hero{padding:28px 0 26px}.hero h1{font-size:30px}.boardToolbar{min-height:38px;gap:8px;margin-bottom:9px}.boardToolbarTitle strong{font-size:12px}.boardToolbarActions{gap:5px}.boardToolbarActions button{font-size:9px;padding:5px 7px;min-height:32px}.boardToolbarActions .icon{width:12px;height:12px}.areaLayoutBadge{font-size:8px}.boardHint{font-size:10px;line-height:1.7}.boardHint>span{max-width:70%}.arrangementModes strong{font-size:11px}.arrangementModes span{font-size:9px}.areaChangeDialog{width:calc(100vw - 24px);max-height:calc(100dvh - 28px);border-radius:14px}.areaChangeHeader{padding:20px 19px 17px}.areaChangeHeader h2{font-size:20px}.areaChangeHeader p{font-size:11px}.areaChangeContent{grid-template-columns:1fr;gap:19px;padding:18px 19px}.areaChangeVisual{display:none}#areaChangeChoices{gap:8px}.areaChangeChoice{min-height:85px;padding:11px 12px}.areaChangeChoice strong{font-size:12px}.areaChangeChoice small{font-size:10px}.areaChangeNotice{margin:0 19px 17px;padding:11px 12px}.areaChangeFooter{padding:14px 19px 18px}.settingsFooter #dockStatus{font-size:11px}.heroStart{min-height:40px}}
@media(prefers-reduced-motion:no-preference){.areaChangeDialog[open]{animation:areaDialogIn .22s cubic-bezier(.2,.8,.2,1)}@keyframes areaDialogIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}}

/* Status sits in the native card's empty caption area, clear of its block and rank. */
.nativeCardBadges{position:absolute;left:170px;right:10px;bottom:12px;display:flex;gap:4px;align-items:center;pointer-events:none;white-space:nowrap}
.nativeCardBadge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border:1px solid transparent;border-radius:4px;font-size:10px;line-height:16px;font-weight:600;letter-spacing:-.3px;color:#afc0cc;background:#16232ed9}
/* Native inRaid animation: four unscaled PNG frames at the resource origin. */
.nativeRaidIndicator{position:absolute;inset:0;pointer-events:none}
.nativeRaidIndicator img{position:absolute;animation:nativeRaidFrame 840ms steps(1,end) infinite;image-rendering:auto}
@keyframes nativeRaidFrame{0%,24.999%{opacity:1}25%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.nativeRaidIndicator img{animation:none;opacity:0}.nativeRaidIndicator img[data-frame="0"]{opacity:1}}
.cardUnused{color:#9daeb9;border-color:#7284933d;background:#182530a6;font-weight:400}
.nativePlacementInfo{position:absolute;left:170px;right:10px;top:73px;display:flex;flex-direction:column;gap:1px;pointer-events:none;line-height:1.2;min-width:0}
.nativePlacementCaption{display:block;color:#9eafb7;font-size:8.5px;line-height:9px;letter-spacing:0;font-weight:400}
.nativePlacementHeading{display:flex;align-items:baseline;gap:5px;min-width:0;line-height:14px}
.nativePlacementHeading strong{min-width:0;flex:1;font-size:11px;font-weight:600;color:#f3e6c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px #15252c}
.nativePlacementHeading>span{flex:none;font-size:9px;color:#c6d6dc;font-weight:400;white-space:nowrap}
.nativePlacementDetails{display:block;color:#a9bbc4;font-size:9px;line-height:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardOwnedBoost{color:#dedac2;border-color:#aaa18455;background:#3c413be6}
.fixedScope{padding:11px 12px;border:1px solid #6f8aa24a;border-radius:8px;margin:12px 0 16px}.fixedScopeHeading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b5c9d7;margin-bottom:7px}.scopeFixedBadge{font-size:9px;line-height:16px;padding:0 6px;border:1px solid #99afa344;border-radius:4px;color:#bacebd;background:#3b504536}.fixedScope>strong{display:block;font-size:12px;line-height:1.7;letter-spacing:-.3px;color:#e1dcc1}.fixedScope .scopeHint{font-size:10px;line-height:1.7;margin:5px 0 0;color:#a8c0cd}

#gameAreaSelection{position:absolute;inset:0;pointer-events:none;z-index:3;isolation:isolate}
.areaQuickEditor{margin:0 0 18px;padding:15px 18px;border:1px solid #b3a87a60;border-radius:12px;background:linear-gradient(115deg,#263e4d,#1b303f);box-shadow:0 14px 38px #0002}
.areaQuickHeading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.areaQuickHeading>div:first-child{display:flex;align-items:center;gap:14px;min-width:0}.areaQuickEyebrow{flex:none;font-size:10px;color:#d5c397;border-right:1px solid #8197a33d;padding-right:14px}.areaQuickHeading strong{font-size:13px;font-weight:600;line-height:1.7;color:#f0e6c8}.areaQuickActions{display:flex;gap:6px;flex:none}.areaQuickActions button{font-size:11px;padding:5px 9px;background:#172c3a;border-color:#6e87934d;color:#d3dfe5;white-space:nowrap}.areaQuickActions #areaSwapDone{background:#e4cf9a;color:#21313c;border-color:#e4cf9a;font-weight:600}
.areaQuickControls{display:flex;align-items:flex-end;gap:10px}.areaQuickControls label{display:flex;flex-direction:column;gap:5px;flex:0 1 260px;min-width:0;font-size:10px;color:#b4cad7}.areaQuickControls select{width:100%;min-height:34px;font-size:12px;color:#e7edef;border-color:#7f9ba758;background:#132836;padding:6px 9px;border-radius:6px}.areaSwapArrow{align-self:flex-end;line-height:34px;color:#d6c79d;font-size:19px}.areaQuickControls>button{min-height:34px;padding:6px 13px;font-size:11px;white-space:nowrap}.areaQuickControls #areaSwapApply{background:#486275;border-color:#91aab377;color:#f6edce}.areaQuickControls p{margin:0 0 4px auto;max-width:330px;font-size:10px;color:#aac3d1;line-height:1.7}.areaSwapNotice{font-size:10px;color:#a9bfcc;line-height:1.7;margin-top:9px}.areaSwapNotice.simulationNotice{color:#e3c59c}.areaQuickEditor button:disabled{opacity:.4;cursor:default}
.priorityRowFooter{display:flex;gap:6px;align-items:center;justify-content:space-between}.priorityRowFooter .goalRowHint{flex:1;margin:8px 0 0}.priorityRow .priorityLocate{font-size:10px!important;white-space:nowrap;padding:4px 0 0!important;min-width:0;background:transparent!important;border:0!important;color:#cbd6be!important;align-self:flex-end}.priorityRow .priorityLocate:hover{color:#fff0c6!important;text-decoration:underline}
@media(max-width:900px){.areaQuickControls p{display:none}.areaQuickControls label{flex:1}.areaQuickHeading>div:first-child{display:block}.areaQuickEyebrow{display:block;border:0;padding:0;margin-bottom:3px}.areaQuickHeading strong{font-size:12px}}
@media(max-width:600px){.areaQuickEditor{padding:12px;margin-bottom:14px}.areaQuickHeading{align-items:flex-start;gap:8px}.areaQuickActions{gap:4px}.areaQuickActions button{padding:5px 7px}.areaQuickActions button>span{display:none}.areaQuickActions #areaSwapUndo,.areaQuickActions #areaSwapRedo{font-size:17px;line-height:17px}.areaQuickHeading strong{font-size:11px}.areaQuickControls{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:8px}.areaQuickControls select{font-size:11px;padding:6px}.areaQuickControls #areaSwapApply{grid-column:3;grid-row:2}.areaQuickControls #areaSwapCancel{grid-column:1;grid-row:2}.areaQuickControls label{min-width:0}.areaSwapArrow{text-align:center}.areaSwapNotice{font-size:9px}.boardToolbar{gap:6px}.boardToolbarActions{gap:5px}.boardToolbarActions button{font-size:10px;padding:6px 7px}.boardToolbarTitle strong{font-size:11px}}
@media(prefers-reduced-motion:no-preference){.areaQuickEditor{animation:areaEditorReveal .18s ease-out}@keyframes areaEditorReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}}

.areaQuickHeading strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.areaSwapNotice{min-height:17px}
@media(max-width:600px){.areaQuickHeading strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:3.4em;overflow:hidden}.areaSwapNotice{min-height:3.4em}}

.priorityRowFooter .goalRowHint{min-width:0}.priorityRow .priorityLocate{width:auto!important;flex:none;line-height:1.5!important}
@media(max-width:600px){.areaQuickActions button{min-height:44px}.areaQuickActions #areaSwapUndo,.areaQuickActions #areaSwapRedo{width:44px}.areaQuickControls select,.areaQuickControls>button{min-height:44px}.areaSwapArrow{line-height:44px}.areaQuickEditor button:focus-visible,.areaQuickEditor select:focus-visible{outline:2px solid #e4cf9a;outline-offset:2px}}

/* Level and limits stay above both tabs, so they never disappear in a panel. */
.unionLevelControl{margin:0 22px 14px;padding:11px 12px 10px;background:linear-gradient(115deg,#40576150,#1b303f75);border:1px solid #b6af8655;border-radius:9px;flex:none}
.unionLevelHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.unionLevelHeading label{font-size:11px!important;font-weight:600;color:#eee1bd!important;margin:0!important}
.unionLevelHeading>span{font-size:9px;color:#aebfc7}
.unionLevelPicker{display:flex;gap:5px;align-items:stretch}
.unionLevelPicker select{width:auto;flex:1;min-width:0;min-height:36px;font-size:12px;color:#f4e7c3;background:#132a39;border:1px solid #9cad9755;border-radius:6px;padding:6px 9px;font-variant-numeric:tabular-nums}
.unionLevelPicker button{width:34px;min-height:36px;flex:none;padding:0;background:#3c5360;border:1px solid #94a59044;border-radius:6px;color:#f2deb1;font-size:17px}
.unionLevelPicker button:hover:not(:disabled){background:#55696c;border-color:#dac99599}
.unionLevelPicker button:disabled{opacity:.35;cursor:default}
.unionLevelControl .unionLevelLimits{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0;font-size:9px;color:#afc3cd;white-space:nowrap}
.unionLevelLimits strong{color:#e2dec5;font-weight:600;margin-left:2px;font-variant-numeric:tabular-nums}
.unionLevelPicker select:focus-visible,.unionLevelPicker button:focus-visible{outline:2px solid #e4cf9a;outline-offset:2px}
@media(max-width:1120px){.unionLevelControl{max-width:680px;width:calc(100% - 40px);margin:0 auto 14px}.unionLevelPicker select{font-size:13px}.unionLevelControl .unionLevelLimits{justify-content:flex-start;gap:22px}}
@media(max-width:600px){.unionLevelControl{width:calc(100% - 32px);padding:10px 11px;margin-bottom:12px}.unionLevelHeading>span{font-size:8px}.unionLevelPicker button{width:42px;min-height:44px}.unionLevelPicker select{min-height:44px;font-size:12px;padding:6px 7px}.unionLevelControl .unionLevelLimits{gap:8px;justify-content:space-between}}

.unionLevelHeading .unionLevelLimits{margin:0;gap:9px;font-size:8px;justify-content:flex-end}.unionLevelHeading .unionLevelLimits strong{margin-left:1px}.unionLevelHeading{gap:7px}.unionLevelHeading label{white-space:nowrap}
@media(min-width:1121px){#settings{height:calc(var(--board-height,720px) + 148px);min-height:776px}#settings>.settingsTitle{padding-top:17px;padding-bottom:12px}.settingsTitle>span:first-child:before{display:none}}
@media(max-width:600px){.unionLevelHeading .unionLevelLimits{gap:6px;font-size:8px}.unionLevelHeading label{font-size:10px!important}}

/* Type 21 has native checked/unchecked art and no separate hover canvas. */
#nativeFilters{position:absolute;inset:0;pointer-events:none;z-index:5}
#nativeFilters .originalFilter{pointer-events:auto;overflow:visible;transition:none;outline-offset:1px}
#nativeFilters .originalFilter:before,#nativeFilters .originalFilter:after{content:none!important}
#nativeFilters .originalFilter:hover{background:transparent!important;box-shadow:none!important}