:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: #10172a;
  --panel-2: #151f36;
  --line: #293858;
  --text: #edf3ff;
  --muted: #91a3c5;
  --cyan: #55d4cf;
  --gold: #f2c96d;
  --violet: #aa84ff;
  --danger: #ff7d84;
  --good: #7ae39d;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
}

/* Slice 23: category silhouettes and tier color language shared by scene, recipes and inventory. */
.appearance-primary { --item-accent: #70e59a; --item-soft: #173d2a; --item-ink: #d9ffe5; }
.appearance-secondary { --item-accent: #5ee0ef; --item-soft: #153945; --item-ink: #ddfbff; }
.appearance-equipment { --item-accent: #d39aff; --item-soft: #39224e; --item-ink: #f4ddff; }
.appearance-facility-primary { --item-accent: #e7d55f; --item-soft: #344624; --item-ink: #fff5aa; }
.appearance-facility-secondary { --item-accent: #ff9d55; --item-soft: #4c2d1c; --item-ink: #ffe4c7; }
.appearance-material { --item-accent: #aeb8c7; --item-soft: #29313c; --item-ink: #eef3fb; }
.tier-1 { --tier-accent: #aeb8c7; --tier-soft: #37414e; }
.tier-2 { --tier-accent: #c99563; --tier-soft: #5c3d28; }
.tier-3 { --tier-accent: #72d783; --tier-soft: #235234; }
.tier-4 { --tier-accent: #5dd9d1; --tier-soft: #1d5554; }
.tier-5 { --tier-accent: #5fa8ff; --tier-soft: #214675; }
.tier-6 { --tier-accent: #a481ff; --tier-soft: #443278; }
.tier-7 { --tier-accent: #ef76cf; --tier-soft: #712a62; }
.tier-8 { --tier-accent: #ff9556; --tier-soft: #763b20; }
.tier-9 { --tier-accent: #fff08a; --tier-soft: #756523; }

.camp-native-tier-mark {
  position: absolute; z-index: 5; top: 4px; right: 4px; min-width: 24px; height: 17px; display: grid; place-items: center;
  margin: 0; padding: 0 4px; border: 1px solid color-mix(in srgb, var(--tier-accent, #aeb8c7) 80%, white);
  border-radius: 5px 9px 5px 9px; background: var(--tier-soft, #29313c); box-shadow: 0 0 11px color-mix(in srgb, var(--tier-accent, #aeb8c7) 38%, transparent);
  color: var(--tier-accent, #eef3fb); font-size: 8px; font-style: normal; font-weight: 1000; line-height: 1;
}
.recipe-icon-card.production-project-card,
.camp-native-project-grid > button,
.camp-native-inventory-grid > button,
.inventory-card,
.camp-native-order-product { position: relative; border-color: color-mix(in srgb, var(--item-accent, #73819a) 68%, #1a2330); background: linear-gradient(145deg, var(--item-soft, #17202c), #0d161d); }
.recipe-icon-card.production-project-card .recipe-product-icon,
.camp-native-project-grid > button > span,
.camp-native-inventory-grid > button > span,
.inventory-card .inventory-icon,
.camp-native-order-product > span { border: 1px solid color-mix(in srgb, var(--item-accent, #73819a) 70%, transparent); background: var(--item-soft, #26323b); color: var(--item-ink, #eef3fb); }
.appearance-primary .recipe-product-icon,
.camp-native-project-grid > .appearance-primary > span,
.camp-native-inventory-grid > .appearance-primary > span { border-radius: 50% 50% 42% 42%; }
.appearance-secondary .recipe-product-icon,
.camp-native-project-grid > .appearance-secondary > span,
.camp-native-inventory-grid > .appearance-secondary > span { border-radius: 4px; transform: rotate(2deg); }
.appearance-equipment .recipe-product-icon,
.camp-native-project-grid > .appearance-equipment > span,
.camp-native-inventory-grid > .appearance-equipment > span,
.inventory-card.appearance-equipment .inventory-icon,
.camp-native-order-product.appearance-equipment > span { clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%); border-radius: 0; }
.camp-native-radial-choice.is-recipe { border-color: color-mix(in srgb, var(--item-accent, #c3bc71) 75%, #223126); background: linear-gradient(145deg, var(--item-soft, #24362b), #101b16); }
.camp-native-radial-choice.is-recipe > span { border-color: var(--item-accent, #f1e9a8); background: var(--item-soft, #273d31); color: var(--item-ink, #fff2a7); }
.camp-native-radial-choice.is-recipe.appearance-primary > span { border-radius: 50% 50% 42% 42%; }
.camp-native-radial-choice.is-recipe.appearance-secondary > span { border-radius: 4px; transform: rotate(2deg); }
.camp-native-radial-choice.is-recipe.appearance-equipment > span { clip-path: polygon(50% 0, 92% 18%, 82% 76%, 50% 100%, 18% 76%, 8% 18%); border-radius: 0; }
.camp-native-radial-choice .camp-native-tier-mark { top: -7px; right: -7px; min-width: 22px; height: 15px; font-size: 7px; }

.camp-native-ground-drop { border-color: color-mix(in srgb, var(--item-accent, #e7cf72) 72%, transparent); background: linear-gradient(145deg, var(--item-soft, #585135), #12201b); color: var(--item-ink, #fff2b4); }
.camp-native-ground-drop > span { background: var(--item-soft, #816d35); color: var(--item-accent, #fff2b4); }
.camp-native-ground-drop.appearance-primary { border-radius: 16px 16px 10px 10px; }
.camp-native-ground-drop.appearance-secondary { border-radius: 5px; }
.camp-native-ground-drop.appearance-equipment { border-width: 2px; transform: translate(-50%, -50%) rotate(-1deg) scale(var(--camp-zoom, 1)); }
.camp-native-ground-drop .camp-native-tier-mark { top: -7px; right: -6px; }
.camp-native-facility-card.appearance-facility-primary { border-color: #ddea74; background: linear-gradient(145deg, #526d38f5, #172b20fa); border-radius: 18px 18px 8px 8px; }
.camp-native-facility-card.appearance-facility-secondary { border-color: #ff9d62; background: linear-gradient(145deg, #754128f5, #2b1b18fa); border-radius: 6px; }

.camp-native-facility.facility-layer-primary .camp-native-facility-art { border-color: #79df91; border-radius: 26px 26px 10px 10px; background: linear-gradient(145deg, #667c46, #294b36 58%, #153229); box-shadow: inset 0 8px 0 #9bd16918, 0 13px 20px #0007; }
.camp-native-facility.facility-layer-secondary .camp-native-facility-art { border: 2px solid #f09a5e; border-radius: 5px; background: repeating-linear-gradient(135deg, #6b4934 0 9px, #3e3029 9px 18px); box-shadow: inset 0 0 0 4px #151d19b0, 0 13px 20px #0008; }
.camp-native-facility-kind { position: absolute; top: 8px; left: 8px; padding: 2px 5px; border-radius: 7px; background: #102017e8; color: #8fe1a5; font-size: 8px; font-weight: 900; }
.camp-native-facility.facility-layer-secondary .camp-native-facility-kind { background: #351f16ed; color: #ffc18f; }

.camp-native-radial-back {
  width: 104px; height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 9px; border: 0; border-radius: 0;
  clip-path: polygon(0 50%, 20% 0, 100% 0, 100% 100%, 20% 100%);
  background: linear-gradient(105deg, #ffea43, #ff7b32 56%, #e83b79); box-shadow: 0 0 25px #ff983b8c;
  color: #251109; text-shadow: 0 1px #fff7a1; cursor: pointer;
}
.camp-native-radial-back > span { font-size: 24px; font-weight: 1000; line-height: 1; }
.camp-native-radial-back > b { font-size: 10px; font-weight: 1000; white-space: nowrap; }
.camp-native-radial-back:hover, .camp-native-radial-back:focus-visible { filter: brightness(1.15) saturate(1.15); }

.camp-equipment-crafting-hint {
  position: fixed; z-index: 78; right: 18px; bottom: 18px; width: min(360px, calc(100vw - 36px)); display: grid; gap: 7px; padding: 14px;
  border: 1px solid #c990ff; border-radius: 15px; background: linear-gradient(145deg, #38254bed, #171d2df5); box-shadow: 0 18px 52px #000b, 0 0 28px #b36dff38;
  color: #f8ecff; pointer-events: auto;
}
.camp-equipment-crafting-hint > span { color: #e3b6ff; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.camp-equipment-crafting-hint > strong { font-size: 15px; }
.camp-equipment-crafting-hint > p { margin: 0; color: #cfc4da; font-size: 11px; line-height: 1.5; }
.camp-equipment-crafting-hint > div { display: flex; justify-content: flex-end; gap: 7px; }
.camp-equipment-crafting-hint button { min-height: 32px; padding: 5px 10px; border: 1px solid #8e75a7; border-radius: 8px; background: #2b273b; color: #eee6f7; }
.camp-equipment-crafting-hint button.is-primary { border-color: #d59bff; background: #754697; color: white; }

@media (max-width: 680px) {
  .camp-native-radial-back { left: -152px; top: -140px; width: 86px; height: 34px; padding-right: 11px; }
  .camp-native-radial-palette.callouts-right .camp-native-radial-back { left: 74px; }
  .camp-native-radial-back > span { font-size: 19px; }
  .camp-native-radial-back > b { font-size: 8px; }
  .camp-native-tier-mark { min-width: 20px; height: 14px; font-size: 7px; }
  .camp-equipment-crafting-hint { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
}

/* Camp candidate: code-native scene presentation; no audio or authority rules live here. */
html[data-camp-candidate="true"] body {
  background:
    radial-gradient(circle at 48% 18%, rgba(80, 137, 102, .18), transparent 38%),
    linear-gradient(145deg, #0c1516 0%, #111a1e 48%, #081012 100%);
}
.camp-candidate-mode .content-frame { min-width: 0; }
.camp-candidate-mode .camp-return-sidebar { background: linear-gradient(180deg, rgba(18, 34, 31, .96), rgba(9, 18, 21, .98)); }
.camp-candidate-mode .primary-nav { --nav-count: 1; }
.camp-candidate-mode .primary-nav button { border-color: rgba(117, 200, 145, .22); }
.camp-readonly-chip { cursor: default; }
.camp-candidate-mode .context-bar .camp-readonly-chip { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #0d1425; color: var(--text); }
.camp-page { display: grid; gap: 14px; min-width: 0; }
.camp-page-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 18px 20px; border: 1px solid rgba(134, 203, 158, .2); border-radius: 18px;
  background: linear-gradient(135deg, rgba(27, 48, 39, .92), rgba(16, 30, 34, .94));
  box-shadow: 0 18px 42px rgba(1, 7, 8, .25);
}
.camp-page-heading h2 { margin: 3px 0 4px; font-size: clamp(24px, 3vw, 36px); }
.camp-page-heading p { margin: 0; max-width: 720px; color: var(--muted); }
.camp-heading-tools { display: grid; justify-items: end; gap: 8px; }
.camp-camera-controls { display: flex; gap: 5px; }
.camp-camera-controls button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(132, 194, 146, .24); border-radius: 8px; background: rgba(5, 15, 16, .5); color: #cfe8d1; cursor: pointer; }
.camp-summary { display: grid; grid-template-columns: repeat(4, minmax(58px, 1fr)); gap: 8px; flex: 0 0 auto; }
.camp-summary span { display: grid; justify-items: center; gap: 1px; padding: 9px 10px; border-radius: 12px; background: rgba(5, 15, 16, .48); color: var(--muted); font-size: 12px; }
.camp-summary b { color: #b6efbd; font-size: 19px; }
.camp-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 14px; align-items: start; min-width: 0; }
.camp-ground {
  position: relative; min-height: 760px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(136, 199, 143, .25); border-radius: 22px;
  background:
    radial-gradient(ellipse at 52% 44%, rgba(70, 107, 63, .36), transparent 56%),
    linear-gradient(160deg, #1b2e2a 0%, #162622 38%, #101d20 100%);
  box-shadow: inset 0 0 90px rgba(3, 9, 10, .72), 0 24px 55px rgba(0, 5, 8, .25);
}
.camp-ground-texture { position: absolute; inset: 0; z-index: -4; opacity: .35; background-image: radial-gradient(circle, rgba(204, 232, 174, .16) 0 1px, transparent 1.5px); background-size: 31px 27px; transform: rotate(-4deg) scale(1.1); }
.camp-ground::before, .camp-ground::after { content: ""; position: absolute; z-index: -3; border-radius: 50%; filter: blur(1px); }
.camp-ground::before { width: 34%; height: 16%; left: 31%; top: 34%; background: rgba(76, 111, 72, .22); border: 1px solid rgba(132, 176, 113, .12); }
.camp-ground::after { width: 18%; height: 12%; right: 3%; bottom: 6%; background: rgba(19, 61, 68, .45); border: 1px solid rgba(85, 155, 165, .2); }
.camp-path { position: absolute; z-index: -2; height: 32px; border-radius: 50%; border-top: 9px solid rgba(168, 145, 102, .14); transform-origin: center; }
.camp-path-a { width: 74%; left: 8%; top: 31%; transform: rotate(7deg); }
.camp-path-b { width: 58%; left: 24%; top: 67%; transform: rotate(-13deg); }
.camp-scene-object, .camp-character-object, .camp-activity-board {
  position: absolute; left: var(--camp-x); top: var(--camp-y); transform: translate(-50%, -50%) scale(var(--camp-zoom, 1));
  transform-origin: center;
  appearance: none; border: 0; color: var(--text); cursor: pointer; z-index: 2;
}
.camp-scene-object.dragging, .camp-character-object.dragging { opacity: .45; filter: saturate(.6); }
.camp-scene-object { width: 118px; min-height: 104px; display: grid; justify-items: center; align-content: end; gap: 2px; padding: 7px; border-radius: 15px; background: transparent; }
.camp-scene-object::before, .camp-character-object::before, .camp-activity-board::before { content: ""; position: absolute; inset: -5px; border: 1px solid transparent; border-radius: inherit; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.camp-scene-object:hover::before, .camp-scene-object:focus-visible::before, .camp-character-object:hover::before, .camp-character-object:focus-visible::before, .camp-activity-board:hover::before, .camp-activity-board:focus-visible::before { border-color: rgba(174, 238, 184, .66); background: rgba(116, 191, 139, .08); box-shadow: 0 0 0 3px rgba(116, 191, 139, .08); transform: translateY(-2px); }
.camp-scene-object.selected::before, .camp-character-object.selected::before, .camp-activity-board.selected::before { border-color: #d4f5a7; background: rgba(153, 217, 137, .12); box-shadow: 0 0 24px rgba(143, 217, 139, .2); }
.camp-facility-art { position: relative; display: grid; place-items: center; width: 62px; height: 50px; border: 1px solid #526b58; border-radius: 15px 15px 9px 9px; background: linear-gradient(145deg, #53624c, #293f37 60%, #172a27); box-shadow: 0 13px 20px rgba(0, 0, 0, .25); }
.camp-facility-art::before { content: ""; position: absolute; width: 72px; height: 17px; bottom: -8px; border-radius: 50%; background: rgba(2, 8, 8, .45); z-index: -1; }
.camp-facility-art i { position: relative; z-index: 2; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #172a28; border: 1px solid rgba(202, 233, 171, .2); color: #d7f1ba; font-style: normal; font-weight: 900; }
.camp-facility-art b { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #778278; box-shadow: 0 0 0 3px rgba(119, 130, 120, .12); }
.camp-facility-object.status-running .camp-facility-art { border-color: #78cf91; box-shadow: 0 0 22px rgba(81, 206, 128, .18), 0 13px 20px rgba(0, 0, 0, .25); }
.camp-facility-object.status-running .camp-facility-art b { background: #7ee69d; box-shadow: 0 0 10px #6fe392; }
.camp-facility-object.status-queued .camp-facility-art b { background: #e4bf6a; box-shadow: 0 0 10px #e4bf6a; }
.camp-scene-label { display: grid; width: 100%; justify-items: center; padding: 5px 6px; border: 1px solid rgba(158, 207, 166, .12); border-radius: 9px; background: rgba(5, 14, 14, .75); backdrop-filter: blur(5px); }
.camp-scene-label strong { font-size: 13px; }
.camp-scene-label small, .camp-fixed-object small, .camp-character-object small, .camp-activity-board small { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a6b9af; font-size: 10px; }
.camp-scene-progress { width: 86px; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, .55); }
.camp-scene-progress i { display: block; height: 100%; background: linear-gradient(90deg, #66c98a, #d9e77e); transition: width .25s linear; }
.camp-facility-object em { position: absolute; right: 1px; top: 32px; padding: 2px 5px; border-radius: 8px; background: #c49245; color: #111; font-size: 9px; font-style: normal; font-weight: 900; }
.camp-fixed-object { width: 104px; min-height: 90px; }
.camp-object-glyph { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(207, 225, 177, .28); border-radius: 14px 14px 8px 8px; background: linear-gradient(145deg, #5b6549, #273b35); color: #eff6d0; font-size: 18px; font-weight: 900; box-shadow: 0 10px 20px rgba(0, 0, 0, .28); }
.camp-fixed-object strong { padding: 3px 6px; border-radius: 7px; background: rgba(5, 14, 14, .75); font-size: 12px; }
.camp-fixed-object.locked { filter: grayscale(.8); opacity: .58; }
.camp-character-object { width: 84px; display: grid; justify-items: center; gap: 2px; padding: 5px; border-radius: 14px; background: transparent; }
.camp-character-object > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 42% 42%; background: linear-gradient(145deg, #b99a68, #4a5a50); border: 2px solid #d8d3a0; box-shadow: 0 9px 17px rgba(0, 0, 0, .28); font-weight: 900; color: #17201e; }
.camp-character-object.activity-battle > span { border-color: #a88cff; box-shadow: 0 0 18px rgba(160, 125, 255, .45); }
.camp-character-object.activity-working > span { border-color: #76e5a1; box-shadow: 0 0 15px rgba(86, 221, 139, .36); }
.camp-character-object.at-facility { z-index: 4; width: 58px; }
.camp-character-object.at-facility > span { width: 29px; height: 29px; font-size: 11px; }
.camp-character-object.at-facility strong { font-size: 9px; }
.camp-character-object.at-facility small { display: none; }
.camp-character-object strong { font-size: 11px; padding: 2px 5px; border-radius: 7px; background: rgba(5, 14, 14, .78); }
.camp-battle-orb { position: absolute; left: var(--camp-x); top: var(--camp-y); transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); transform-origin: center; width: 190px; height: 156px; z-index: 3; border: 1px solid rgba(161, 131, 255, .55); border-radius: 48% 48% 44% 44%; background: radial-gradient(circle, rgba(59, 60, 109, .9), rgba(12, 16, 35, .96)); box-shadow: inset 0 0 24px rgba(137, 103, 255, .3), 0 0 30px rgba(117, 83, 220, .18), 0 18px 28px rgba(0, 0, 0, .34); overflow: hidden; }
.camp-battle-orb::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: -12px; height: 23px; border-radius: 6px 6px 13px 13px; background: #455148; border: 1px solid #71806d; z-index: 4; }
.camp-battle-orb.active { border-color: rgba(189, 158, 255, .85); box-shadow: inset 0 0 26px rgba(139, 91, 255, .4), 0 0 38px rgba(127, 77, 255, .32), 0 18px 28px rgba(0, 0, 0, .34); }
.camp-battle-orb.selected { outline: 3px solid rgba(218, 201, 255, .6); outline-offset: 4px; }
#camp-orb-canvas { display: block; width: 100%; height: 112px; pointer-events: none; }
.camp-battle-orb > button { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; gap: 1px; padding: 0 8px 10px; border: 0; background: linear-gradient(transparent 45%, rgba(6, 8, 20, .93) 76%); color: var(--text); cursor: pointer; }
.camp-battle-orb > button span { font-size: 9px; letter-spacing: .08em; color: #cabaff; }
.camp-battle-orb > button strong { font-size: 12px; }
.camp-battle-orb > button small { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a8afc9; font-size: 9px; }
.camp-activity-board { width: 86px; min-height: 82px; display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 13px; background: transparent; }
.camp-activity-board > span { display: grid; place-items: center; width: 42px; height: 34px; border: 1px solid #8d7953; border-radius: 5px; background: #514a34; color: #f0dda9; font-weight: 900; transform: rotate(2deg); }
.camp-activity-board strong { font-size: 11px; }
.camp-scene-legend { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 10px; padding: 7px 9px; border-radius: 10px; background: rgba(6, 16, 16, .78); color: var(--muted); font-size: 10px; }
.camp-scene-legend span { display: flex; align-items: center; gap: 4px; }
.camp-scene-legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-running { background: #76df9a; }.legend-idle { background: #7c8b83; }.legend-battle { background: #a98bff; }
.camp-ground-result { position: absolute; left: var(--camp-x); top: var(--camp-y); z-index: 6; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 4px; align-items: center; width: 68px; padding: 4px; border: 1px solid rgba(226, 211, 118, .58); border-radius: 10px; background: linear-gradient(145deg, rgba(55, 52, 31, .96), rgba(15, 27, 25, .97)); color: #f1ecc0; text-align: left; cursor: grab; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); transform-origin: center; box-shadow: 0 12px 25px rgba(0, 0, 0, .35), 0 0 18px rgba(224, 205, 100, .12); animation: camp-result-land .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.camp-ground-result > span { grid-row: 1 / 3; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: #7c6a35; color: #fff5bd; font-size: 9px; font-weight: 900; }
.camp-ground-result strong, .camp-ground-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-ground-result strong { font-size: 10px; }.camp-ground-result small { color: #c0baa0; font-size: 8px; }
.camp-ground-result.grade-high { border-color: #c397ff; box-shadow: 0 12px 25px rgba(0, 0, 0, .35), 0 0 20px rgba(170, 119, 255, .2); }
.camp-ground-result.dragging { opacity: .45; }.camp-ground-result.claiming { pointer-events: none; animation: camp-result-claim .24s ease-in forwards; }
.camp-primary-projects { display: grid; gap: 6px; padding: 9px; border: 1px solid rgba(129, 191, 143, .16); border-radius: 11px; background: rgba(5, 15, 16, .35); }
.camp-primary-projects > div { display: grid; gap: 2px; }.camp-primary-projects > div small { color: var(--muted); line-height: 1.35; }
.camp-primary-projects > button { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid rgba(128, 181, 139, .16); border-radius: 8px; background: rgba(17, 34, 29, .8); color: var(--text); text-align: left; cursor: pointer; }
.camp-primary-projects > button.selected { border-color: #76df9a; background: rgba(68, 125, 82, .22); }.camp-primary-projects > button small { color: #9fc1a6; }
.camp-assignment-menu { display: grid; gap: 7px; }.camp-assignment-menu > small { color: var(--muted); }
.camp-assignment-menu > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.camp-assignment-menu button { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 6px 3px; border: 1px solid rgba(128, 181, 139, .16); border-radius: 8px; background: rgba(5, 15, 16, .42); color: var(--text); font-size: 9px; cursor: pointer; }
.camp-assignment-menu button > span { font-weight: 900; color: #dff3bc; }.camp-assignment-menu button > small { color: var(--muted); }
.camp-inspector-card .camp-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.camp-side-panel { display: grid; gap: 12px; min-width: 0; }
.camp-activity-rail, .camp-inspector-card, .camp-activity-collapsed { border: 1px solid rgba(128, 190, 144, .2); border-radius: 17px; background: linear-gradient(155deg, rgba(20, 37, 32, .96), rgba(13, 25, 28, .97)); box-shadow: 0 16px 36px rgba(1, 7, 8, .22); }
.camp-activity-rail { display: grid; gap: 10px; padding: 14px; }
.camp-activity-rail h3 { margin: 2px 0 0; }
.camp-activity-list { display: grid; gap: 6px; max-height: 278px; overflow: auto; padding-right: 2px; }
.camp-activity-list button { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: 8px; width: 100%; padding: 8px 9px; border: 1px solid rgba(136, 190, 148, .12); border-radius: 10px; background: rgba(5, 15, 16, .38); color: var(--text); text-align: left; cursor: pointer; }
.camp-activity-list button:hover, .camp-activity-list button:focus-visible { border-color: rgba(161, 224, 173, .5); background: rgba(81, 139, 96, .12); }
.camp-activity-list button i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #7d8a82; }
.camp-activity-list .activity-running i { background: #75df99; box-shadow: 0 0 8px rgba(105, 224, 147, .6); }
.camp-activity-list .activity-battle i { background: #aa8cff; box-shadow: 0 0 8px rgba(166, 130, 255, .6); }
.camp-activity-list .activity-queued i { background: #e2bd6a; }
.camp-activity-list span { overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; }
.camp-activity-collapsed { padding: 12px; color: #cfe8d1; cursor: pointer; }
.camp-inspector-card { display: grid; gap: 12px; padding: 16px; }
.camp-inspector-card h2 { margin: 0; font-size: 21px; }
.camp-inspector-card p { margin: 2px 0 0; color: var(--muted); }
.camp-inspector-card > small { color: var(--muted); line-height: 1.5; }
.camp-inspector-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.camp-character-portrait { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #d8d3a0; background: linear-gradient(145deg, #b99a68, #4a5a50); color: #17201e; font-size: 20px; font-weight: 900; }
.camp-inspector-card dl { display: grid; gap: 7px; margin: 0; }
.camp-inspector-card dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(135, 185, 146, .1); }
.camp-inspector-card dt { color: var(--muted); }.camp-inspector-card dd { margin: 0; text-align: right; }
.camp-inspector-progress { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 12px; }
.camp-inspector-progress > i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, .45); }
.camp-inspector-progress b { display: block; height: 100%; background: linear-gradient(90deg, #62ca88, #dce67e); }
.camp-inspector-empty { min-height: 180px; align-content: center; }
.camp-source-locator { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(224, 202, 103, .42); border-radius: 11px; background: rgba(83, 68, 28, .22); }
.camp-source-locator span { color: #f0dfa0; }
.camp-unified-production-workspace { width: min(1260px, 100%); grid-template-columns: 280px minmax(0, 1fr); }
.camp-production-catalog { display: grid; gap: 10px; }
.camp-production-toolbar { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid #314763; border-radius: 11px; background: #0b1425f5; backdrop-filter: blur(9px); }
.camp-production-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.camp-production-toolbar input, .camp-production-toolbar select { min-width: 0; min-height: 38px; }
.camp-production-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: center; }
.camp-production-toolbar-actions > span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.camp-production-family-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.camp-production-family-filters button { min-height: 32px; padding: 5px 9px; border: 1px solid #30425f; border-radius: 999px; background: #0b1425; color: #b7c7df; }
.camp-production-family-filters button.selected { border-color: var(--cyan); background: #123038; color: #e3fffb; }
.camp-production-catalog [data-camp-production-scroll] { max-height: min(58vh, 720px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; }
.camp-production-catalog .production-family-caption { width: 100%; border: 0; color: var(--text); text-align: left; cursor: pointer; }
.camp-production-catalog .production-family-caption:hover, .camp-production-catalog .production-family-caption:focus-visible { color: #dfffe9; }
.production-project-card.located { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 18px rgba(242, 201, 109, .26); }
.camp-role-policy-strip { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 7px; align-items: stretch; padding: 9px; border: 1px solid #334b44; border-radius: 11px; background: #0b1818; }
.camp-role-policy-strip > strong { align-self: center; color: #cde6d0; }
.camp-role-policy-strip span { display: grid; gap: 2px; padding: 7px; border-radius: 8px; background: #102521; color: #afc9b5; font-size: 10px; }
.camp-role-policy-strip b { color: #e5f5d5; }
.camp-equipment-group-counts, .camp-recycle-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.camp-equipment-group-counts span, .camp-recycle-summary > div { display: grid; gap: 3px; padding: 9px; border: 1px solid #30415f; border-radius: 8px; background: #0a1221; color: var(--muted); font-size: 10px; }
.camp-equipment-group-counts b, .camp-recycle-summary strong { color: var(--text); font-size: 15px; }
.camp-recycle-task { max-width: 900px; margin-inline: auto; }
.camp-candidate-mode .task-layer[data-task-layer-kind="production-batch"], .camp-candidate-mode .task-layer[data-task-layer-kind="camp-instant-recycle"] { width: min(1280px, 100%); max-height: calc(100vh - 48px); }
.camp-overdrive-badge, .camp-autonomy-badge, .camp-resonance-badge { position: absolute; z-index: 3; padding: 2px 5px; border-radius: 999px; font-size: 8px; font-weight: 900; line-height: 1.2; }
.camp-overdrive-badge { left: 4px; top: 18px; background: #b85cff; color: #fff; box-shadow: 0 0 12px #a347ff99; }
.camp-autonomy-badge { left: 4px; top: 18px; background: #42cbb6; color: #08211d; }
.camp-resonance-badge { left: 4px; top: 36px; background: #d7bd64; color: #201903; }
.camp-facility-object.mode-staffed_overdrive .camp-facility-art, .camp-facility-object.mode-unattended_overdrive .camp-facility-art { border-color: #c279ff; box-shadow: 0 0 28px #9a48ff55, 0 13px 20px #0005; }
.camp-facility-object.mode-autonomy .camp-facility-art { border-color: #5de1cd; box-shadow: 0 0 24px #40cbb744, 0 13px 20px #0005; }
.camp-facility-growth, .camp-facility-reserves { display: grid; gap: 8px; padding: 10px; border: 1px solid #314d42; border-radius: 11px; background: #091a18aa; }
.camp-facility-growth small, .camp-facility-reserves small { display: block; color: var(--muted); }
.camp-card-count, .camp-runtime-rate { align-self: start; padding: 3px 6px; border-radius: 999px; background: #233a2f; color: #d9efc7; font-size: 10px; font-weight: 900; }
.camp-resonance-track { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.camp-resonance-track i { height: 5px; border-radius: 99px; background: #263a35; }.camp-resonance-track i.filled { background: linear-gradient(90deg, #65d499, #e4d16c); box-shadow: 0 0 7px #8bd9a555; }
.camp-affix-summary, .camp-affix-pending { display: grid; gap: 2px; }.camp-affix-summary span, .camp-affix-pending strong { font-weight: 800; }
.camp-affix-pending { padding: 7px; border: 1px solid #b080e866; border-radius: 8px; background: #402d5a55; }
.camp-reserve-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.camp-reserve-row button { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 7px; border: 1px solid #31504a; border-radius: 9px; background: #0c2220; color: var(--text); text-align: left; }
.camp-reserve-row button small { grid-column: 2; }.reserve-ring { grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(#57dbc5 calc(var(--reserve) * 1turn), #213a36 0); box-shadow: inset 0 0 0 6px #0c2220; }.reserve-ring.overdrive { background: conic-gradient(#bc76ff calc(var(--reserve) * 1turn), #38284c 0); }
.camp-growth-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.camp-growth-summary > div { display: grid; gap: 3px; padding: 9px; border: 1px solid #30465d; border-radius: 9px; background: #0b1423; }.camp-growth-summary span { color: var(--muted); font-size: 10px; }
.camp-affix-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: stretch; }.camp-affix-comparison article { display: grid; gap: 5px; padding: 13px; border: 1px solid #405169; border-radius: 11px; background: #0b1423; }.camp-affix-comparison article.candidate { border-color: #a978e0; background: #211934; }.camp-affix-comparison > i { align-self: center; color: var(--muted); font-size: 10px; font-style: normal; }
.camp-departure-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.camp-departure-list article { display: grid; gap: 4px; padding: 11px; border: 1px solid #40516a; border-radius: 10px; background: #0b1423; }.camp-departure-list span, .camp-departure-list small { color: var(--muted); }.camp-return-toggle { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid #43624d; border-radius: 10px; background: #10231c; }.camp-return-toggle span { display: grid; gap: 3px; }.camp-return-toggle small { color: var(--muted); }
.camp-report-page { display: grid; gap: 14px; min-width: 0; }.camp-report-page-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; padding: 18px 20px; border: 1px solid #4c416c; border-radius: 17px; background: linear-gradient(135deg, #201a35, #111b28); }.camp-report-page-heading h1 { margin: 3px 0; }.camp-report-page-heading p { margin: 0; color: var(--muted); }
.camp-report-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }.camp-report-list { display: grid; gap: 7px; padding: 12px; border: 1px solid #33445e; border-radius: 15px; background: #0d1524; }.camp-report-list > div { display: flex; justify-content: space-between; }.camp-report-list-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 7px; padding: 9px; border: 1px solid #2d3c54; border-radius: 9px; background: #101a2b; color: var(--text); text-align: left; }.camp-report-list-item span { grid-row: 1 / 3; align-self: center; padding: 3px 5px; border-radius: 6px; background: #274a36; color: #a9f0bd; font-size: 9px; }.camp-report-list-item .result-defeat, .camp-report-list-item .result-cancelled { background: #4b2932; color: #ffb8bd; }.camp-report-list-item small { color: var(--muted); }.camp-report-list-item.selected { border-color: #a98bff; background: #251e3b; }
.camp-report-detail { display: grid; gap: 14px; min-width: 0; }.camp-report-detail > header { display: flex; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid #3b4b65; border-radius: 14px; background: #111a2a; }.camp-report-detail h2 { margin: 3px 0; }.camp-report-detail header p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.camp-report-section { display: grid; gap: 10px; padding: 15px; border: 1px solid #30415a; border-radius: 14px; background: #0d1524; }.section-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }.section-heading > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #2b2444; color: #cdbbff; font-weight: 900; }.section-heading h3, .section-heading p { margin: 0; }.section-heading p { color: var(--muted); font-size: 11px; }
.camp-report-drop-grid, .camp-report-performance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.camp-report-drop { display: grid; gap: 4px; padding: 11px; border: 1px solid #46516a; border-radius: 10px; background: #111c2d; }.camp-report-drop > span, .camp-report-drop small { color: var(--muted); font-size: 10px; }.camp-report-drop button { justify-self: start; }.camp-report-empty-drop { padding: 16px; border: 1px dashed #53627a; border-radius: 10px; text-align: center; }.camp-report-empty-drop p { margin-bottom: 0; color: var(--muted); }
.camp-report-performance > article { display: grid; gap: 10px; padding: 11px; border: 1px solid #36465f; border-radius: 10px; background: #101a2b; }.camp-report-character { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }.camp-report-character > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #685b45; font-weight: 900; }.camp-report-character div { display: grid; }.camp-report-character small { color: var(--muted); }.camp-report-performance dl { display: grid; gap: 4px; margin: 0; }.camp-report-performance dl div { display: flex; justify-content: space-between; gap: 8px; }.camp-report-performance dt { color: var(--muted); }.camp-report-performance dd { margin: 0; }
.camp-report-events { display: grid; gap: 5px; max-height: 360px; overflow: auto; margin: 0; padding: 0; list-style: none; }.camp-report-events li { display: grid; grid-template-columns: 52px 120px minmax(0, 1fr); gap: 7px; padding: 7px 9px; border-radius: 7px; background: #111c2d; }.camp-report-events span { color: #a9b8cd; }.camp-report-events p { margin: 0; }.camp-report-empty { min-height: 420px; place-items: center; align-content: center; padding: 30px; border: 1px dashed #46516b; border-radius: 15px; text-align: center; }.camp-report-empty > span { font-size: 40px; }
.encounter-card.tutorial { border-color: #bd9d4d; background: linear-gradient(120deg, #2c2515, #151b2d); }
.camp-placement-preview { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px; border: 1px solid #b59b56; border-radius: 14px; background: linear-gradient(135deg, #252718, #101a27); }
.camp-placement-preview > span { width: 84px; height: 84px; display: grid; place-items: center; border: 1px solid #dcc06c; border-radius: 20px; background: radial-gradient(circle at 45% 35%, #74652e, #212719 70%); color: #fff0a5; font-size: 30px; font-weight: 900; }
.camp-placement-preview strong { font-size: 18px; }.camp-placement-preview p { margin-bottom: 0; color: var(--muted); }
.camp-tutorial-current { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #b99a4d; border-radius: 10px; background: #292317; }.camp-tutorial-current > span { color: var(--gold); font-size: 10px; font-weight: 900; }.camp-tutorial-current > small { color: var(--muted); }
.camp-tutorial-chapter-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.camp-tutorial-chapter-list article { min-width: 0; min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 7px 8px; }
.camp-tutorial-chapter-list article > span { grid-row: 1 / 3; color: var(--gold); font-weight: 900; }.camp-tutorial-chapter-list article > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-tutorial-chapter-list article > b { color: var(--muted); font-size: 9px; }.camp-tutorial-chapter-list article.completed > b { color: #78e8c8; }.camp-tutorial-chapter-list article.current { border-color: #d5b95e; background: #2b2518; }
#camp-tutorial-spotlight-root:empty { display: none; }
#camp-tutorial-spotlight-root { position: fixed; z-index: 74; inset: 0; pointer-events: none; }
.camp-tutorial-target { position: relative; z-index: 73 !important; outline: 3px solid #ffe081 !important; outline-offset: 6px; filter: brightness(1.16) drop-shadow(0 0 10px rgba(255, 224, 129, .86)); animation: camp-tutorial-pulse 1.1s ease-in-out infinite alternate; }
.camp-tutorial-drag-target { position: relative; z-index: 73 !important; outline: 4px solid #75f0d0 !important; outline-offset: 10px; filter: brightness(1.22) drop-shadow(0 0 18px rgba(117, 240, 208, .95)); animation: camp-tutorial-drag-pulse .7s ease-in-out infinite alternate; }
.camp-native-ground.camp-tutorial-drag-target { outline-offset: -9px; filter: none; box-shadow: inset 0 0 0 5px #75f0d0cc, inset 0 0 55px #75f0d028; }
.camp-tutorial-callout, .camp-tutorial-recovery { position: fixed; z-index: 75; right: 22px; bottom: 22px; width: min(460px, calc(100vw - 44px)); padding: 16px; border: 1px solid #d4b758; border-radius: 15px; background: #11182bf5; box-shadow: 0 20px 70px #000c; pointer-events: auto; }
.camp-tutorial-callout.place-top { top: max(40px, calc(var(--test-build-warning-height, 28px) + 12px)); bottom: auto; }
.camp-tutorial-callout.place-bottom { top: auto; bottom: 22px; }
.camp-tutorial-callout > span, .camp-tutorial-recovery > span { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .08em; }.camp-tutorial-callout > strong, .camp-tutorial-recovery > strong { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; }.camp-tutorial-callout > p, .camp-tutorial-recovery > p { margin: 7px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }.camp-tutorial-callout > p b, .camp-tutorial-recovery > p b { color: #ffe081; }.camp-tutorial-callout > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.camp-save-danger { border-color: rgba(255, 125, 132, .52) !important; background: rgba(78, 26, 35, .7) !important; }
.camp-save-recovery-page { min-height: calc(100vh - 210px); display: grid; place-items: center; padding: 18px; }
.camp-save-recovery-card { width: min(820px, 100%); display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 16px; padding: clamp(20px, 4vw, 38px); border: 1px solid rgba(255, 125, 132, .48); border-radius: 20px; background: linear-gradient(145deg, #241722, #111927); box-shadow: 0 24px 70px rgba(0, 0, 0, .38); }
.camp-save-recovery-mark { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #ff8d95; border-radius: 18px; background: #542533; color: #ffd8db; font-size: 24px; font-weight: 900; }
.camp-save-recovery-card h1 { margin: 4px 0 7px; }.camp-save-recovery-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.camp-save-recovery-card ul { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; padding: 10px; border: 1px solid #463544; border-radius: 11px; background: #0d1420; list-style: none; }
.camp-save-recovery-card li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-bottom: 1px solid #293345; }.camp-save-recovery-card li:last-child { border-bottom: 0; }.camp-save-recovery-card li span { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.camp-save-recovery-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }.camp-save-recovery-note { grid-column: 1 / -1; font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .camp-facility-object.status-running .camp-facility-art b { animation: camp-running-pulse 1.6s ease-in-out infinite; }
  .camp-battle-orb.active { animation: camp-orb-glow 2.4s ease-in-out infinite; }
}
@keyframes camp-running-pulse { 50% { transform: scale(1.3); opacity: .72; } }
@keyframes camp-orb-glow { 50% { box-shadow: inset 0 0 32px rgba(139, 91, 255, .5), 0 0 48px rgba(127, 77, 255, .4), 0 18px 28px rgba(0, 0, 0, .34); } }
@keyframes camp-result-land { from { opacity: 0; transform: translate(-50%, -110%) scale(.72); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); } }
@keyframes camp-result-claim { to { opacity: 0; transform: translate(-50%, -110%) scale(.65); filter: brightness(1.8); } }
@keyframes camp-tutorial-pulse { to { outline-color: #fff6c9; outline-offset: 10px; filter: brightness(1.24) drop-shadow(0 0 16px rgba(255, 224, 129, .96)); } }
@keyframes camp-tutorial-drag-pulse { to { outline-color: #d7fff4; outline-offset: 14px; filter: brightness(1.32) drop-shadow(0 0 26px rgba(117, 240, 208, 1)); } }

@media (max-width: 1040px) {
  .camp-workspace { grid-template-columns: 1fr; }
  .camp-side-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .camp-ground { min-height: 760px; }
}
@media (max-width: 680px) {
  .camp-save-recovery-page { min-height: 0; padding: 8px 0; }
  .camp-save-recovery-card { grid-template-columns: 1fr; padding: 17px; }
  .camp-save-recovery-card ul, .camp-save-recovery-actions, .camp-save-recovery-note { grid-column: 1; }
  .camp-save-recovery-actions { display: grid; }
  .camp-save-recovery-card li { display: grid; }.camp-save-recovery-card li span { text-align: left; }
  .camp-page-heading { align-items: stretch; flex-direction: column; padding: 14px; }
  .camp-summary { width: 100%; }
  .camp-workspace, .camp-side-panel { grid-template-columns: 1fr; }
  .camp-ground { min-height: 1100px; border-radius: 16px; }
  .camp-scene-object { width: 88px; min-height: 90px; padding: 4px; }
  .camp-facility-art { width: 49px; height: 42px; }
  .camp-facility-art::before { width: 56px; }
  .camp-scene-label { padding: 3px 4px; }
  .camp-scene-label strong { font-size: 11px; }
  .camp-scene-label small { max-width: 80px; font-size: 8px; }
  .camp-scene-progress { width: 64px; }
  .camp-fixed-object { width: 78px; }
  .camp-object-glyph { width: 39px; height: 39px; }
  .camp-fixed-object small, .camp-character-object small { max-width: 74px; font-size: 8px; }
  .camp-character-object { width: 68px; }
  .camp-battle-orb { width: 148px; height: 132px; }
  #camp-orb-canvas { height: 92px; }
  .camp-battle-orb > button small { max-width: 130px; }
  .camp-scene-legend { display: none; }
  .camp-facility-object[data-id="facility.mining_site"] { --camp-x: 12% !important; --camp-y: 8% !important; }
  .camp-facility-object[data-id="facility.foraging_route"] { --camp-x: 37% !important; --camp-y: 8% !important; }
  .camp-facility-object[data-id="facility.farming_plot"] { --camp-x: 62% !important; --camp-y: 8% !important; }
  .camp-facility-object[data-id="facility.forge"] { --camp-x: 87% !important; --camp-y: 8% !important; }
  .camp-facility-object[data-id="facility.crafting_workshop"] { --camp-x: 12% !important; --camp-y: 20% !important; }
  .camp-facility-object[data-id="facility.jewelcrafting_bench"] { --camp-x: 37% !important; --camp-y: 20% !important; }
  .camp-facility-object[data-id="facility.tailor_station"] { --camp-x: 62% !important; --camp-y: 20% !important; }
  .camp-facility-object[data-id="facility.alchemy_lab"] { --camp-x: 87% !important; --camp-y: 20% !important; }
  .camp-facility-object[data-id="facility.kitchen"] { --camp-x: 12% !important; --camp-y: 32% !important; }
  .camp-character-object:not(.at-facility)[data-id="p1"] { --camp-x: 37% !important; --camp-y: 32% !important; }
  .camp-character-object:not(.at-facility)[data-id="p2"] { --camp-x: 60% !important; --camp-y: 32% !important; }
  .camp-character-object:not(.at-facility)[data-id="p3"] { --camp-x: 83% !important; --camp-y: 32% !important; }
  .camp-character-object.at-facility[data-camp-worker-index="0"] { --camp-worker-offset: -5%; }
  .camp-character-object.at-facility[data-camp-worker-index="1"] { --camp-worker-offset: 0%; }
  .camp-character-object.at-facility[data-camp-worker-index="2"] { --camp-worker-offset: 5%; }
  .camp-character-object.at-facility[data-camp-facility="facility.mining_site"] { --camp-x: calc(12% + var(--camp-worker-offset)) !important; --camp-y: 13% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.foraging_route"] { --camp-x: calc(37% + var(--camp-worker-offset)) !important; --camp-y: 13% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.farming_plot"] { --camp-x: calc(62% + var(--camp-worker-offset)) !important; --camp-y: 13% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.forge"] { --camp-x: calc(87% + var(--camp-worker-offset)) !important; --camp-y: 13% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.crafting_workshop"] { --camp-x: calc(12% + var(--camp-worker-offset)) !important; --camp-y: 25% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.jewelcrafting_bench"] { --camp-x: calc(37% + var(--camp-worker-offset)) !important; --camp-y: 25% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.tailor_station"] { --camp-x: calc(62% + var(--camp-worker-offset)) !important; --camp-y: 25% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.alchemy_lab"] { --camp-x: calc(87% + var(--camp-worker-offset)) !important; --camp-y: 25% !important; }
  .camp-character-object.at-facility[data-camp-facility="facility.kitchen"] { --camp-x: calc(12% + var(--camp-worker-offset)) !important; --camp-y: 37% !important; }
  .camp-ground-result[data-camp-result-facility="facility.mining_site"] { --camp-x: 27% !important; --camp-y: 14% !important; }
  .camp-ground-result[data-camp-result-facility="facility.foraging_route"] { --camp-x: 52% !important; --camp-y: 14% !important; }
  .camp-ground-result[data-camp-result-facility="facility.farming_plot"] { --camp-x: 77% !important; --camp-y: 14% !important; }
  .camp-ground-result[data-camp-result-facility="facility.forge"] { --camp-x: 72% !important; --camp-y: 14% !important; }
  .camp-ground-result[data-camp-result-facility="facility.crafting_workshop"] { --camp-x: 24% !important; --camp-y: 26% !important; }
  .camp-ground-result[data-camp-result-facility="facility.jewelcrafting_bench"] { --camp-x: 49% !important; --camp-y: 26% !important; }
  .camp-ground-result[data-camp-result-facility="facility.tailor_station"] { --camp-x: 74% !important; --camp-y: 26% !important; }
  .camp-ground-result[data-camp-result-facility="facility.alchemy_lab"] { --camp-x: 75% !important; --camp-y: 26% !important; }
  .camp-ground-result[data-camp-result-facility="facility.kitchen"] { --camp-x: 24% !important; --camp-y: 38% !important; }
  .camp-battle-orb[data-camp-object-id="camp.object.battle_orb"] { --camp-x: 50% !important; --camp-y: 48% !important; }
  .camp-fixed-object[data-id="camp.object.warehouse"] { --camp-x: 17% !important; --camp-y: 66% !important; }
  .camp-fixed-object[data-id="camp.object.roster"] { --camp-x: 50% !important; --camp-y: 66% !important; }
  .camp-fixed-object[data-id="camp.object.rally"] { --camp-x: 83% !important; --camp-y: 66% !important; }
  .camp-fixed-object[data-id="camp.object.expedition"] { --camp-x: 32% !important; --camp-y: 78% !important; }
  .camp-fixed-object[data-id="camp.object.report"] { --camp-x: 64% !important; --camp-y: 78% !important; }
  .camp-activity-board[data-id="camp.object.activity"] { --camp-x: 90% !important; --camp-y: 78% !important; }
  .camp-character-object:not(.at-facility)[data-id="c1"] { --camp-x: 25% !important; --camp-y: 92% !important; }
  .camp-character-object:not(.at-facility)[data-id="c2"] { --camp-x: 50% !important; --camp-y: 92% !important; }
  .camp-character-object:not(.at-facility)[data-id="c3"] { --camp-x: 75% !important; --camp-y: 92% !important; }
  .camp-heading-tools { width: 100%; justify-items: stretch; }
  .camp-camera-controls { justify-content: center; }
  .camp-ground-result { width: 76px; padding: 4px; }
  .camp-tutorial-callout, .camp-tutorial-recovery { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 12px; }
  .camp-tutorial-callout.place-top { top: max(34px, calc(var(--test-build-warning-height, 28px) + 6px)); bottom: auto; }
  .camp-tutorial-callout.place-bottom { top: auto; bottom: 10px; }
  .camp-tutorial-callout > div { display: grid; grid-template-columns: 1fr 1fr; }.camp-tutorial-callout > div .primary { grid-column: 1 / -1; }
  .camp-placement-preview { grid-template-columns: 58px minmax(0, 1fr); padding: 12px; }.camp-placement-preview > span { width: 58px; height: 58px; border-radius: 14px; font-size: 22px; }
  .camp-tutorial-chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-production-toolbar { position: static; grid-template-columns: 1fr; }
  .camp-production-toolbar-actions { grid-template-columns: 1fr 1fr; }
  .camp-production-catalog [data-camp-production-scroll] { max-height: none; overflow: visible; }
  .camp-role-policy-strip { grid-template-columns: 1fr; }
  .camp-equipment-group-counts, .camp-recycle-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-growth-summary, .camp-departure-list, .camp-report-drop-grid, .camp-report-performance { grid-template-columns: 1fr; }
  .camp-affix-comparison { grid-template-columns: 1fr; }.camp-affix-comparison > i { justify-self: center; }
  .camp-report-page-heading { align-items: stretch; flex-direction: column; }
  .camp-report-workspace { grid-template-columns: 1fr; }.camp-report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.camp-report-list > div { grid-column: 1 / -1; }
  .camp-report-detail > header { flex-direction: column; }.camp-report-events li { grid-template-columns: 48px minmax(0, 1fr); }.camp-report-events li p { grid-column: 1 / -1; }
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; padding-top: 28px; background: radial-gradient(circle at 15% 0, #17213d 0, transparent 34rem), var(--bg); color: var(--text); }
body.task-layer-open { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.test-build-warning { position: fixed; z-index: 100; top: 0; right: 0; left: 0; min-height: 28px; display: flex; align-items: center; justify-content: center; padding: 4px 88px 4px 12px; border-bottom: 1px solid #ff9a9f; background: #7d2028f2; color: #fff4f4; box-shadow: 0 5px 18px #0007; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-align: center; }
.test-build-warning #clear-save { position: absolute; right: 7px; min-height: 22px; padding: 2px 9px; border: 1px solid #ffd1d4; border-radius: 999px; background: #431117; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0; }
.app-shell { width: min(1460px, 100%); margin: 0 auto; padding: 20px; }
.topbar { display: flex; align-items: center; gap: 18px; min-height: 80px; }
.topbar h1 { margin: 0; font-size: 28px; letter-spacing: .08em; }
.eyebrow { margin: 0 0 4px; color: var(--cyan); font-size: 11px; letter-spacing: .16em; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.save-status { color: var(--muted); font-size: 13px; }
.guide-button { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #5f5390; border-radius: 9px; background: #251f3d; color: #e3d9ff; }
.guide-button span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #aa84ff33; font-weight: 900; }
.guidance { width: min(1120px, 100%); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 15px 18px; border: 1px solid #3e4c71; border-radius: 14px; background: linear-gradient(100deg, #18223a, #10172a); box-shadow: 0 15px 40px #0005; }
.guidance strong { color: var(--gold); }
.guidance p { margin: 2px 0; color: var(--muted); }
.primary-nav { width: min(1120px, 100%); display: grid; grid-template-columns: repeat(var(--nav-count, 6), 1fr); gap: 8px; margin: 18px auto; }
.primary-nav button { padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: #0d1425; color: var(--muted); }
.primary-nav button span, .primary-nav button small { display: block; }
.primary-nav button small { margin-top: 3px; color: #637495; font-size: 10px; }
.primary-nav button.active { border-color: var(--cyan); color: white; background: #163039; box-shadow: inset 0 -2px var(--cyan); }
main { min-height: 600px; }
.workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; gap: 14px; }
.character-workspace { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
.character-workspace.character-overview-only { grid-template-columns: 190px minmax(0, 1fr); justify-content: stretch; }
.character-detail-column { min-width: 0; display: grid; gap: 14px; }
.character-workspace.character-operation-open .character-roster { grid-row: auto; }
.character-workspace.character-operation-open .character-stage,
.character-workspace.character-operation-open .character-operation { grid-column: auto; }
.character-workspace.character-operation-open .character-operation { min-height: 0; }
.character-workspace.talent-operation-open .operation-body { padding: 16px; }
.party-workspace { width: min(980px, 100%); margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.production-workspace { grid-template-columns: 270px minmax(350px, .9fr) minmax(420px, 1.1fr); }
.production-workspace.production-browse-only { grid-template-columns: 270px minmax(420px, 1fr); }
.formal-production-workspace { grid-template-columns: 290px minmax(0, 1fr); width: min(1120px, 100%); margin-inline: auto; }
.warehouse-workspace { grid-template-columns: 190px minmax(0, 1fr) 360px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 16px; }
.panel-head.inset { padding: 9px 0; background: transparent; }
.panel-body { padding: 14px; }
.stack { display: grid; gap: 9px; }
.stack.compact { gap: 5px; }
.card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.card.selected { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
.card h3, .card h4, .card p { margin: 0; }
.card p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.good { color: var(--good); }
.danger-text { color: var(--danger); }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid #3c4b70; border-radius: 999px; color: #b9c8e5; background: #0c1323; font-size: 11px; }
.tag.gold { border-color: #806b38; color: var(--gold); }
.tag.cyan { border-color: #326c70; color: #79e6df; }
.step-label { display: block; margin-bottom: 3px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compact-metrics .metric strong { font-size: 14px; }
.metric { padding: 10px; border-radius: 9px; background: #0b1221; }
.metric span { display: block; color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin-top: 4px; font-size: 17px; }
.tabs { display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto; }
.tabs button { white-space: nowrap; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.tabs button.active { color: white; border-color: var(--violet); }
button.primary, button.secondary, button.ghost { min-height: 36px; padding: 7px 12px; border-radius: 8px; }
button.primary { border: 1px solid #62e8df; background: #1a746f; color: white; }
button.secondary { border: 1px solid #596b96; background: #263657; color: white; }
button.ghost { border: 1px solid var(--line); background: transparent; color: var(--muted); }
button.danger { border-color: #70404b; color: #ff9ca1; }
button:disabled { cursor: not-allowed; opacity: .42; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #aefaf3; outline-offset: 2px; }
input, select { min-height: 36px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #080e1b; color: white; padding: 6px 9px; }
.attribute-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; }
.bar { height: 7px; overflow: hidden; border-radius: 999px; background: #090f1c; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mod-slot { min-height: 92px; padding: 9px; border: 1px dashed #485777; border-radius: 9px; background: #0b1120; }
.tuning-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #33425f; border-radius: 9px; background: #0b1120; }
.tuning-chip.selected { border-color: #4dbfc3; background: #10252c; }
.battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
.battle-stage { position: relative; min-height: 530px; background: #050914; }
.battle-stage canvas { width: 100%; height: 530px; display: block; touch-action: none; }
.battle-hud { position: absolute; inset: 12px 12px auto; display: flex; justify-content: space-between; pointer-events: none; }
.battle-hud span { padding: 6px 10px; border-radius: 7px; background: #050a16cc; color: #d9e5ff; }
.battle-inspector { max-height: 530px; overflow: auto; }
.live-party-card p { display: flex; flex-wrap: wrap; gap: 4px; }
.live-ap-row { margin: 9px 0 5px; color: var(--muted); font-size: 12px; }
.live-ap-row strong { color: var(--cyan); }
.live-ap-progress { height: 6px; margin-bottom: 9px; border: 1px solid #315064; }
.live-ap-progress i { background: linear-gradient(90deg, #45bfc4, #8bf4e9); transition: width .08s linear; }
.equipment-card > .row:first-child { align-items: flex-start; }
.equipment-owner-badge { flex: 0 0 auto; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-card-actions { justify-content: flex-end; margin-top: 9px; }
.character-roster-card { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; text-align: left; color: var(--text); }
.character-roster-card span:nth-child(2), .party-candidate span:nth-child(2), .worker-card span:nth-child(2), .facility-card span:nth-child(2) { min-width: 0; }
.character-roster-card strong, .character-roster-card small, .party-candidate strong, .party-candidate small, .worker-card strong, .worker-card small, .facility-card strong, .facility-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-roster-card strong { font-size: 13px; }
.character-roster-card small, .party-candidate small, .worker-card small, .facility-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.character-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3f567d; border-radius: 50%; background: linear-gradient(145deg, #223252, #0b1222); color: var(--cyan); font-style: normal; font-weight: 800; }
.character-hero { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 42%, #273a5d 0, #10172a 44%, #0b1120 100%); border-bottom: 1px solid var(--line); }
.character-hero h2 { margin: 12px 0 2px; font-size: 23px; }
.character-hero p { margin: 0; color: var(--muted); }
.character-portrait, .inspector-portrait { width: 108px; height: 108px; display: grid; place-items: center; margin: 9px 0 13px; border: 1px solid #4c6b93; border-radius: 42% 58% 48% 52%; background: linear-gradient(145deg, #31506b, #101a31 72%); box-shadow: 0 18px 45px #0008, inset 0 0 32px #55d4cf1c; color: #b8fff7; font-size: 42px; font-weight: 900; }
.result-banner { padding: 11px 12px; border-left: 3px solid var(--cyan); border-radius: 8px; background: #0b1725; }
.result-banner.frozen { border-color: var(--gold); background: #1a1720; }
.result-banner span { font-weight: 800; }
.result-banner p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.section-caption strong { display: block; color: var(--text); font-size: 14px; }
.loadout-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.loadout-slot { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #0b1221; color: var(--text); text-align: left; }
.loadout-slot span, .loadout-slot strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loadout-slot span { color: var(--muted); font-size: 10px; }
.loadout-slot strong { margin-top: 3px; font-size: 11px; }
.loadout-slot.selected { border-color: var(--cyan); }
.loadout-chip { padding: 6px 8px; border: 1px solid #394b6e; border-radius: 7px; background: #0b1221; color: #c9d8ef; font-size: 11px; }
.character-task-launcher { display: grid; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.character-task-group { display: grid; grid-template-columns: 42px repeat(3, minmax(0, 1fr)); gap: 5px; align-items: center; }
.character-task-group > span { color: #7184a7; font-size: 10px; font-weight: 800; }
.character-task-group button { min-width: 0; min-height: 32px; padding: 5px 7px; font-size: 11px; }
.stage-actions, .inspector-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-actions > *, .inspector-actions > * { flex: 1 1 auto; }
.task-tabs { display: flex; align-items: stretch; gap: 12px; padding: 10px 14px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.task-tab-group { display: flex; align-items: end; gap: 3px; }
.task-tab-group > span { padding: 0 5px 9px 0; color: #617495; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.task-tab-group button, .inspector-tabs button { white-space: nowrap; padding: 8px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.task-tab-group button.active, .inspector-tabs button.active { border-color: var(--violet); color: white; }
.operation-body { min-height: 500px; }
.slot-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.slot-selector-button { min-width: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 9px; background: #0b1221; color: var(--text); text-align: left; }
.slot-selector-button span, .slot-selector-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-selector-button small { display: block; min-height: 32px; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.5; }
.slot-selector-button span { color: var(--muted); font-size: 10px; }
.slot-selector-button strong { margin-top: 4px; font-size: 11px; }
.slot-selector-button.selected { border-color: var(--cyan); background: #10252c; box-shadow: inset 0 -2px var(--cyan); }
.current-selection strong { display: block; margin-top: 4px; }
.candidate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.candidate-delta { margin-top: 9px; padding: 8px; border-radius: 7px; background: #0b1221; }
.candidate-delta span, .candidate-delta strong { display: block; font-size: 11px; }
.candidate-delta span { color: var(--muted); }
.candidate-delta strong { margin-top: 3px; color: var(--gold); }
.formation-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 270px; align-items: end; padding: 18px 8px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #20334f 0, #0b1221 68%); }
.formation-slot { min-width: 0; text-align: center; }
.formation-slot > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.formation-slot button, .formation-slot > div { width: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 5px; border: 1px dashed #465776; border-radius: 50% 50% 12px 12px; background: #0a1120aa; color: var(--text); }
.formation-slot button:disabled { cursor: not-allowed; filter: saturate(.3); }
.formation-slot.filled button { border-style: solid; border-color: #4d7d83; background: linear-gradient(180deg, #1d4650, #111a2d); }
.formation-slot b { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 50%; background: #263956; color: var(--cyan); font-size: 22px; }
.formation-slot strong, .formation-slot small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formation-slot small { margin-top: 4px; color: var(--muted); }
.party-candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.party-candidate { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; color: var(--text); text-align: left; }
.party-candidate em { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-style: normal; text-align: right; }
.party-candidate.selected em { color: var(--cyan); }
.inspector-portrait { width: 132px; height: 132px; margin: 10px auto; }
.battle-readout-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.battle-feed, .battle-damage { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.battle-damage li { display: flex; justify-content: space-between; gap: 8px; }
.battle-damage strong { color: var(--gold); }
.facility-overview { display: grid; gap: 8px; }
.overview-summary button { margin-top: 9px; }
.queue-overview-row { width: 100%; text-align: left; color: var(--text); }
.queue-overview-row .progress { margin-top: 8px; }
.skill-loadout-card { width: 100%; text-align: left; color: var(--text); }
.signature-actions { margin-top: 10px; }
.production-catalog-filters { display: grid; gap: 7px; padding-bottom: 4px; }
.production-filter-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.production-filter-row > span { flex: 0 0 34px; color: var(--muted); font-size: 12px; }
.production-filter-row button { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; white-space: nowrap; }
.production-option-card { width: 100%; text-align: left; color: var(--text); }
.work-order-summary { border-color: #405b78; background: linear-gradient(135deg, #17243b, #111a2e); }
.facility-card { width: 100%; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; align-items: center; text-align: left; color: var(--text); }
.facility-state { width: 8px; height: 8px; border-radius: 50%; background: #50617e; }
.facility-state.busy { background: var(--good); box-shadow: 0 0 10px #7ae39d88; }
.production-formula { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 12px; }
.production-formula > div { min-width: 0; padding: 9px; border-radius: 8px; background: #0a1221; }
.production-formula span, .production-formula strong { display: block; }
.production-formula span { color: var(--muted); font-size: 10px; }
.production-formula strong { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.production-formula i { align-self: center; color: var(--cyan); font-style: normal; }
.worker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.worker-card-wrap { min-width: 0; }
.worker-card-wrap .worker-card { width: 100%; height: 100%; }
.worker-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #0b1221; color: var(--text); text-align: left; }
.worker-card.selected { border-color: var(--cyan); background: #10252c; box-shadow: inset 3px 0 var(--cyan); }
.worker-card.reassignment { opacity: .62; filter: saturate(.45); }
.worker-card.reassignment.selected { opacity: .82; border-color: var(--gold); background: #211d1c; box-shadow: inset 3px 0 var(--gold); }
.worker-card.in-battle { order: 99; }
.warning-card { border-color: #8d6738; background: #271c18; }
.reassignment-row small { display: block; margin-top: 4px; color: var(--muted); }
.reassignment-rule { margin: 0; padding: 10px 12px; border-left: 3px solid var(--gold); color: var(--muted); background: #171725; font-size: 12px; line-height: 1.6; }
.danger-confirm { border-color: #ff9ca1 !important; background: #8a3943 !important; }
.batch-controls { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #0b1221; }
.production-commit { min-height: 46px !important; font-weight: 800; }
.production-configure { min-height: 48px !important; font-weight: 800; }
.workbench-actions { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: 9px; }
.foldout, .recipe-group { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0b1221; }
.foldout > summary, .recipe-group > summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; color: #c7d5ec; font-size: 12px; font-weight: 800; list-style: none; }
.foldout > summary::-webkit-details-marker, .recipe-group > summary::-webkit-details-marker { display: none; }
.foldout > summary::before, .recipe-group > summary::before { content: '›'; color: var(--cyan); transition: transform .16s ease; }
.foldout[open] > summary::before, .recipe-group[open] > summary::before { transform: rotate(90deg); }
.foldout-body, .recipe-group-body { display: grid; gap: 8px; padding: 0 10px 10px; }
.inventory-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inventory-summary-grid .card { min-width: 0; max-height: 260px; overflow: auto; }
.recipe-accordion { display: grid; align-content: start; gap: 8px; }
.recipe-group > summary span { color: var(--muted); font-weight: 500; }
.recipe-group-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-recipe-task { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); }
.task-entry-hint { margin: -2px 4px 3px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.queue-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.progress { height: 9px; overflow: hidden; border-radius: 999px; background: #070c16; }
.progress i { display: block; height: 100%; background: var(--cyan); }
.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.category-card { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #0b1221; color: var(--text); text-align: left; }
.category-card b { color: var(--muted); }
.category-card.selected { border-color: var(--cyan); background: #10252c; box-shadow: inset 3px 0 var(--cyan); }
.inventory-card { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--text); text-align: left; }
.inventory-card strong, .inventory-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-card small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.inventory-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #465b80; border-radius: 10px 4px 10px 4px; background: linear-gradient(145deg, #243b5b, #0b1425); color: var(--gold); font-weight: 900; }
.inspector-tabs { display: flex; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.inspector-empty b { display: block; color: var(--text); font-size: 16px; }
.inspector-empty p { margin: 7px 0 0; line-height: 1.5; }
.item-hero { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border-radius: 11px; background: radial-gradient(circle at 10% 20%, #253d5e, #10182b 58%); }
.item-hero .inventory-icon { width: 58px; height: 58px; font-size: 19px; }
.item-hero h3 { margin: 7px 0 0; }
.item-hero p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.empty { padding: 34px 18px; text-align: center; color: var(--muted); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; translate: -50% 20px; max-width: min(560px, calc(100% - 30px)); padding: 11px 16px; border: 1px solid #53668e; border-radius: 9px; background: #111a2dee; opacity: 0; pointer-events: none; transition: .18s ease; }
.toast.show { translate: -50% 0; opacity: 1; }

#task-layer-root:empty { display: none; }
.task-layer-backdrop { position: fixed; z-index: 50; inset: 28px 0 0; display: grid; place-items: center; padding: 24px; background: #02050dcc; backdrop-filter: blur(8px); }
.task-layer { width: min(1040px, 100%); max-height: min(860px, calc(100vh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #52678e; border-radius: 16px; background: #0d1425; box-shadow: 0 28px 90px #000c; }
.task-layer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, #18233c, #0f1729); }
.task-layer-head h2 { margin: 0; font-size: 19px; }
.task-layer-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-layer-close { flex: 0 0 auto; }
.task-layer-body { min-height: 0; overflow: auto; padding: 16px; overscroll-behavior: contain; }
.task-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 14px; }
.task-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.task-character-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; color: var(--text); text-align: left; }
.task-character-card strong, .task-character-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-character-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.task-inspector { align-content: start; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #10182b; }
.task-character-mark { width: 58px; height: 58px; font-size: 22px; }
.task-layer-actions { position: sticky; z-index: 4; bottom: -16px; display: grid; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); gap: 9px; margin: 0 -16px -16px; padding: 12px 16px 16px; border-top: 1px solid #2d3b59; background: linear-gradient(180deg, #0d1425e8, #0d1425 28%); backdrop-filter: blur(10px); }
.task-layer-actions > button { min-height: 46px; }
.party-stage-actions > * { flex: 1 1 220px; }

/* Player-readable help and stronger action affordance. */
.term-link, .metric-help, .attribute-help { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 0; border: 0; border-bottom: 1px dashed #6e80a7; background: transparent; color: var(--text); text-align: left; }
.term-link i, .metric-help i, .attribute-help i { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #667ba4; border-radius: 50%; color: #b9c9e7; font-size: 10px; font-style: normal; font-weight: 900; }
.metric-help { color: var(--muted); font-size: 11px; }
.attribute-help { font-weight: 800; }
.help-chip { min-height: 30px; cursor: help; }
.help-chip i { width: 15px; height: 15px; font-size: 9px; }
.compact-explanation { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; border: 1px solid #273753; border-radius: 9px; background: #0a1020; }
.central-commit { width: min(340px, 100%); min-height: 48px !important; justify-self: center; font-weight: 800; }

/* The character's main decisions now sit in the visual center as large task tiles. */
.character-hero { min-height: 220px; padding: 18px; }
.character-portrait { width: 84px; height: 84px; font-size: 34px; }
.character-task-center { margin-top: 4px; padding: 16px; border: 1px solid #3d5071; border-radius: 13px; background: radial-gradient(circle at 50% 0, #223653, #10182b 70%); text-align: center; }
.character-task-center h3 { margin: 5px 0 14px; font-size: 17px; }
.character-task-launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.character-task-tile { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; gap: 9px; align-items: center; padding: 10px; border: 1px solid #405474; border-radius: 11px; background: linear-gradient(145deg, #182640, #0c1426); color: var(--text); text-align: left; box-shadow: 0 8px 18px #0003; transition: translate .14s ease, border-color .14s ease, background .14s ease; }
.character-task-tile:hover { translate: 0 -2px; border-color: #70dcd5; background: linear-gradient(145deg, #1c3d4b, #0d1829); }
.character-task-tile.selected { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan), 0 8px 22px #0005; }
.character-task-tile > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #263b5a; color: var(--cyan); }
.character-task-tile strong, .character-task-tile small { display: block; }
.character-task-tile small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.character-task-tile > i { color: var(--cyan); font-size: 22px; font-style: normal; }

/* Compact, wrapped collections avoid full-width rows for each item. */
.slot-selector { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.slot-selector-button { position: relative; min-height: 105px; padding-right: 24px; transition: translate .14s ease, border-color .14s ease; }
.slot-selector-button:hover { translate: 0 -2px; border-color: var(--cyan); }
.slot-selector-button > i, .encounter-card > i, .production-option-card > i, .tutorial-replay-card > i { position: absolute; right: 9px; bottom: 8px; color: var(--cyan); font-size: 20px; font-style: normal; }
.always-skill-grid, .skill-card-grid, .talent-choice-grid, .talent-evolution-grid, .production-option-grid, .production-active-grid, .encounter-grid, .tutorial-replay-grid, .guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.skill-explanation, .skill-loadout-card { display: grid; align-content: start; gap: 8px; }
.skill-explanation > strong { margin-top: 3px; }
.skill-loadout-card small { color: #7185aa; font-size: 11px; line-height: 1.45; }
.skill-loadout-card button { margin-top: auto; }
.talent-choice { display: grid; gap: 7px; }
.talent-choice button { margin-top: auto; }
.talent-branch { display: grid; gap: 10px; }
.talent-path-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.talent-evolution { padding: 10px; border: 1px solid #334461; border-radius: 9px; background: #0c1425; }
.talent-evolution.selected { border-color: var(--violet); }
.talent-evolution p { min-height: 38px; }
.talent-evolution button { width: 100%; margin-top: 6px; }
.c1-talent-graph-shell { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; align-items: start; }
.c1-talent-graph-scroll { min-width: 0; overflow: auto; border: 1px solid #2d3c5d; border-radius: 12px; background: radial-gradient(circle at 50% 50%, #17243b, #080e1b 66%); scrollbar-color: #3f587e #0a1020; }
.c1-talent-graph { position: relative; width: 100%; min-width: 620px; aspect-ratio: 1120 / 720; overflow: hidden; }
.c1-talent-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c1-talent-graph line { stroke: #3a4867; stroke-width: 3; opacity: .72; transition: stroke .16s ease, opacity .16s ease; }
.c1-talent-graph line.active { stroke: #80dcd8; opacity: 1; filter: drop-shadow(0 0 4px #55d4cf66); }
.c1-talent-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; translate: -50% -50%; padding: 0; border: 2px solid #4a5874; border-radius: 50%; background: #0b1221; color: #8d9ab2; box-shadow: 0 0 0 3px #080e1bcf; font-size: 9px; font-weight: 900; }
.c1-talent-node:hover:not(:disabled), .c1-talent-node.focused { border-color: var(--gold); color: white; scale: 1.12; }
.c1-talent-node.available { border-color: #69d4ce; color: #dffffd; background: #12303a; }
.c1-talent-node.active { border-color: #83e4df; color: white; background: #1d5f65; box-shadow: 0 0 0 3px #080e1bcf, 0 0 13px #55d4cf66; }
.c1-talent-node.interface { width: 38px; height: 38px; border-color: var(--gold); color: var(--gold); }
.c1-talent-node.interface.active { color: #071013; background: var(--gold); }
.c1-talent-node.core { width: 46px; height: 46px; border-color: #c9f8f4; background: #266870; color: white; font-size: 13px; }
.c1-talent-node.notable, .c1-talent-node.hub { width: 34px; height: 34px; }
.c1-talent-node.core-gated:not(.active) { border-style: dashed; opacity: .56; }
.c1-talent-node:disabled { cursor: not-allowed; opacity: .32; }
.c1-graph-region { position: absolute; z-index: 1; color: #8ea7d2; font-size: 10px; letter-spacing: .08em; pointer-events: none; }
.c1-graph-region.gravity { left: 7%; top: 48%; }
.c1-graph-region.charge { right: 11%; top: 12%; }
.c1-graph-region.bulwark { right: 11%; bottom: 12%; }
.c1-talent-inspector { min-width: 0; position: sticky; top: 10px; display: grid; gap: 10px; }
.c1-talent-inspector h3 { margin: 0; font-size: 17px; }
.c1-talent-inspector .row > span:last-child { color: var(--muted); font-size: 10px; text-align: right; }
.warning-copy { color: var(--gold) !important; }
.mod-slot small { display: block; margin: 6px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.mod-inventory-card { display: grid; gap: 7px; }
.mod-inventory-card .row:last-child { justify-content: flex-end; }
.signature-hero { padding: 18px; background: radial-gradient(circle at 0 0, #47385e, #151c31 60%); }
.signature-hero h3 { margin-top: 9px; font-size: 20px; }
.signature-hero > .row { margin-top: 14px; }
.production-option-card, .encounter-card, .tutorial-replay-card { position: relative; width: 100%; text-align: left; color: var(--text); transition: translate .14s ease, border-color .14s ease; }
.production-option-card:hover, .encounter-card:hover, .tutorial-replay-card:hover { translate: 0 -2px; border-color: #62cec9; }
.production-option-card { min-height: 112px; padding-right: 24px; }
.encounter-card { min-height: 122px; padding-right: 25px; }
.encounter-card > span { display: block; margin-top: 8px; color: var(--gold); font-size: 11px; }
.production-active-card { min-width: 0; display: grid; gap: 6px; padding: 10px; border: 1px solid #32425f; border-radius: 9px; background: #0a1221; }
.production-active-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.production-active-card button { margin-top: auto; }

/* Guide and tutorial task layers. */
.guide-index section { min-width: 0; }
.guide-category { border: 1px solid var(--line); border-radius: 11px; background: #10182b; overflow: hidden; }
.guide-category summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; color: var(--text); }
.guide-category summary span { color: var(--muted); font-size: 12px; }
.guide-category[open] summary { border-bottom: 1px solid var(--line); }
.guide-card-grid { padding: 10px; }
.guide-card { min-width: 0; padding: 10px; border-radius: 8px; background: #0a1221; }
.guide-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.tutorial-replay-card { min-height: 72px; }
.tutorial-replay-card strong, .tutorial-replay-card small { display: block; }
.tutorial-replay-card small { margin-top: 5px; color: var(--muted); }
.guide-detail { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 720px; margin: 30px auto; padding: 24px; border: 1px solid #4b5d83; border-radius: 15px; background: radial-gradient(circle at 0 0, #2b3f62, #11192c 60%); }
.guide-detail-mark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid #7c6fbd; border-radius: 50%; background: #aa84ff22; color: #ded2ff; font-size: 34px; font-weight: 900; }
.guide-detail h3 { margin: 0; font-size: 22px; }
.guide-detail p { margin: 8px 0 0; color: #bdcbe4; line-height: 1.7; }
.tutorial-backdrop { background: radial-gradient(circle at 50% 35%, #1b3154cc, #02050df2 62%); }
.tutorial-layer { width: min(650px, 100%); grid-template-rows: auto minmax(0, 1fr); border-color: #7668a8; }
.tutorial-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.tutorial-body { overflow: auto; padding: 28px clamp(20px, 6vw, 54px) 34px; text-align: center; }
.tutorial-orbit { width: 94px; height: 94px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid #64d5d0; border-radius: 50%; background: radial-gradient(circle, #315b70, #121a31 65%); box-shadow: 0 0 0 9px #55d4cf0c, 0 18px 40px #0007; }
.tutorial-orbit span { color: #bafff9; font-size: 36px; font-weight: 900; }
.tutorial-body h2 { margin: 6px 0 12px; font-size: 26px; }
.tutorial-body > p:not(.eyebrow) { margin: 0 auto; max-width: 520px; color: #c0cee5; font-size: 15px; line-height: 1.75; }
.tutorial-focus { display: grid; gap: 6px; margin: 22px 0; padding: 14px; border-left: 3px solid var(--gold); border-radius: 8px; background: #1b1926; text-align: left; }
.tutorial-focus strong { color: var(--gold); }
.tutorial-focus span { color: #c3cee2; line-height: 1.55; }
.tutorial-progress { display: flex; justify-content: center; gap: 7px; margin: 18px 0; }
.tutorial-progress i { width: 26px; height: 4px; border-radius: 99px; background: #35425d; }
.tutorial-progress i.active { background: var(--cyan); }
.tutorial-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tutorial-actions button { min-height: 46px; }

@media (max-width: 1180px) and (min-width: 981px) {
  .character-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .character-workspace.character-overview-only { grid-template-columns: 220px minmax(0, 1fr); }
  .character-workspace.character-operation-open .character-operation { grid-column: 2; }
  .production-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .production-workspace.production-browse-only { grid-template-columns: 260px minmax(0, 1fr); }
  .production-workbench { grid-column: 1 / -1; }
  .warehouse-workspace { grid-template-columns: 180px minmax(0, 1fr); }
  .warehouse-inspector { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .workspace, .battle-layout { grid-template-columns: 1fr; }
  .formal-production-workspace { grid-template-columns: 1fr; }
  .character-workspace.character-overview-only, .production-workspace.production-browse-only { grid-template-columns: 1fr; }
  .character-workspace.character-operation-open .character-roster { grid-row: auto; }
  .character-workspace.character-operation-open .character-stage,
  .character-workspace.character-operation-open .character-operation { grid-column: 1; }
  .character-workspace.character-operation-open .character-stage { display: block; }
  .character-workspace.character-operation-open .character-hero { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .character-roster .panel-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .production-facilities .panel-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .production-facilities .facility-overview, .production-facilities .panel-head.inset { grid-column: 1 / -1; }
  .warehouse-categories .panel-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-split { grid-template-columns: 1fr; }
  .c1-talent-graph-shell { grid-template-columns: minmax(0, 1fr) 230px; }
}

@media (max-width: 600px) {
  .app-shell { padding: 10px; }
  .topbar { flex-wrap: wrap; }
  .topbar .save-status { margin-left: 0; }
  .guidance { grid-template-columns: 1fr; }
  .primary-nav { grid-template-columns: repeat(3, 1fr); }
  .character-roster .panel-body, .production-facilities .panel-body, .warehouse-categories .panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics, .slot-grid, .inventory-grid { grid-template-columns: 1fr 1fr; }
  .mod-grid { grid-template-columns: 1fr 1fr; }
  .character-hero { min-height: 230px; }
  .task-tabs { display: grid; gap: 0; overflow: visible; }
  .task-tab-group { display: grid; grid-template-columns: 48px repeat(3, minmax(0, 1fr)); align-items: center; }
  .task-tab-group > span { padding: 8px 4px; }
  .task-tab-group button { padding-inline: 5px; }
  .slot-selector { grid-template-columns: 1fr 1fr; }
  .candidate-list { grid-template-columns: 1fr; }
  .formation-stage { min-height: 220px; padding-inline: 4px; }
  .formation-slot button, .formation-slot > div { min-height: 128px; }
  .formation-slot b { width: 44px; height: 44px; margin-bottom: 8px; }
  .party-candidate-grid, .worker-grid { grid-template-columns: 1fr 1fr; }
  .workbench-actions, .inventory-summary-grid, .recipe-group-body { grid-template-columns: 1fr; }
  .production-formula { grid-template-columns: 1fr; }
  .production-formula i { transform: rotate(90deg); justify-self: center; }
  .attribute-row { grid-template-columns: 70px 1fr auto; }
  .attribute-row .bar { grid-column: 1 / -1; }
  .battle-stage, .battle-stage canvas { min-height: 390px; height: 390px; }
  .battle-inspector { max-height: none; }
  .task-layer-backdrop { place-items: stretch; padding: 0; }
  .task-layer { width: 100%; height: calc(100vh - 28px); min-height: calc(100vh - 28px); max-height: calc(100vh - 28px); border: 0; border-radius: 0; }
  .task-layer-head { position: sticky; top: 0; z-index: 2; padding: 13px 12px; }
  .task-layer-head h2 { font-size: 17px; }
  .task-layer-head p { max-width: 250px; }
  .task-layer-body { padding: 12px; }
  .task-character-grid { grid-template-columns: 1fr; }
  .task-layer-actions { bottom: -12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -12px -12px; padding: 10px 12px 12px; }
  .production-order-task { gap: 6px; }
  .production-order-task > .work-order-summary { padding: 9px; }
  .production-order-task > .work-order-summary p { margin: 4px 0 0; }
  .production-order-task .recipe-unlock-requirements.unlocked, .production-order-task .production-material-requirements.empty, .production-order-task > .stack > p.muted { display: none; }
  .production-order-task > .stack { gap: 6px; }
  .production-quantity-controls { gap: 5px; padding: 7px; }
  .topbar-actions { width: 100%; margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .topbar-actions .save-status { grid-column: 1 / -1; }
  .guide-button, #reset-save { width: 100%; justify-content: center; }
  .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-nav button { min-height: 52px; }
  .character-task-launcher, .always-skill-grid, .skill-card-grid, .talent-choice-grid, .talent-evolution-grid, .production-option-grid, .production-active-grid, .encounter-grid, .tutorial-replay-grid, .guide-card-grid { grid-template-columns: 1fr; }
  .c1-talent-graph-shell { grid-template-columns: 1fr; }
  .c1-talent-graph-scroll { width: 100%; }
  .c1-talent-graph { width: 680px; min-width: 680px; }
  .c1-talent-inspector { position: static; }
  .character-task-tile { min-height: 70px; }
  .character-task-center { padding: 12px; }
  .slot-selector { grid-template-columns: 1fr 1fr; }
  .guide-detail { grid-template-columns: 1fr; margin: 8px auto 20px; padding: 18px; text-align: center; }
  .guide-detail-mark { margin-inline: auto; }
  .tutorial-head { align-items: center; }
  .tutorial-head .ghost { min-height: 34px; padding: 5px 8px; }
  .tutorial-body { padding: 22px 16px 28px; }
  .tutorial-body h2 { font-size: 22px; }
  .tutorial-orbit { width: 76px; height: 76px; }
  .tutorial-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent, #0d1425 22%); }
}

/* UI-001～UI-007 root shell and page hierarchy. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-shell { width: min(1660px, 100%); padding: 0 18px 24px; }
.topbar { min-height: 88px; padding: 12px 4px; border-bottom: 1px solid #263653; }
.brand-lockup h1 { font-size: 30px; }
.player-identity { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 140px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #0d1425; }
.player-identity span:last-child, .player-identity b, .player-identity small { min-width: 0; display: block; }
.player-identity b { font-size: 12px; }
.player-identity small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.player-avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #4f6b92; border-radius: 50%; background: linear-gradient(145deg, #29415f, #10182b); color: var(--cyan); font-weight: 900; }
.settings-menu { position: relative; }
.settings-menu summary { min-height: 38px; display: grid; place-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); cursor: pointer; list-style: none; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-popover { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; width: 190px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #10182b; box-shadow: 0 16px 42px #000b; }
.settings-popover button { width: 100%; }
.app-frame { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; padding-top: 16px; }
.global-sidebar { min-width: 0; }
.primary-nav { position: sticky; top: 14px; width: 100%; display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; }
.primary-nav button { min-height: 58px; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 9px; align-items: center; padding: 8px 10px; text-align: left; }
.primary-nav button .nav-icon { grid-row: 1 / span 2; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #344766; border-radius: 8px; color: #a7bbdc; }
.primary-nav button > span:not(.nav-icon) { align-self: end; color: #dbe7fb; font-weight: 800; }
.primary-nav button small { align-self: start; margin: 0; }
.primary-nav button.active { box-shadow: inset 3px 0 var(--cyan); }
.content-frame { min-width: 0; }
.context-bar { min-height: 58px; display: grid; grid-template-columns: minmax(250px, 1.25fr) minmax(200px, .8fr) minmax(180px, .65fr); gap: 8px; margin-bottom: 12px; }
.context-bar button, .context-activity > summary { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #0d1425; color: var(--text); text-align: left; }
.context-bar small, .context-bar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-bar small { color: var(--muted); font-size: 9px; }
.context-bar strong { margin-top: 2px; font-size: 12px; }
.context-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #1d2d4a; color: var(--cyan); font-weight: 900; }
.context-activity { position: relative; }
.context-activity > summary { cursor: pointer; list-style: none; }
.context-activity > summary::-webkit-details-marker { display: none; }
.context-menu { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; width: min(340px, 85vw); padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #10182b; box-shadow: 0 18px 44px #000b; }
.context-menu button { width: 100%; min-height: 38px; display: block; margin-top: 6px; }
.context-menu p { margin: 4px; color: var(--muted); font-size: 11px; }
.guidance { width: 100%; margin: 0 0 12px; }
.guidance[hidden] { display: none; }
main { min-height: 660px; }

/* Home */
.home-switcher { width: min(1120px, 100%); min-height: 590px; margin-inline: auto; }
.home-panel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.home-panel-tabs button { min-height: 58px; border: 0; border-bottom: 3px solid transparent; background: #0b1221; color: var(--muted); font-weight: 800; }
.home-panel-tabs button.active { border-color: var(--cyan); background: #14243a; color: white; }
.home-panel-tabs i { margin-left: 7px; color: var(--gold); font-size: 9px; font-style: normal; }
.home-panel-body { min-height: 520px; display: grid; align-content: start; gap: 18px; padding: clamp(18px, 4vw, 42px); }
.home-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.home-panel-heading h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 34px); }
.home-queue-list, .home-character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-queue-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.home-character-card { min-width: 0; min-height: 94px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #111a2d; color: var(--text); text-align: left; }
.home-character-card strong, .home-character-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-character-card small { margin-top: 4px; color: var(--muted); }
.home-battle-summary { min-height: 300px; display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 28px; place-items: center start; padding: 34px; border: 1px solid #344a6d; border-radius: 16px; background: radial-gradient(circle at 18% 45%, #2d5164, #0b1221 60%); }
.home-battle-emblem { width: 126px; height: 126px; display: grid; place-items: center; border: 1px solid #5d7f9f; border-radius: 50%; color: var(--cyan); font-size: 44px; font-weight: 900; }
.home-battle-summary strong { font-size: 21px; }
.home-battle-summary p { max-width: 580px; color: var(--muted); line-height: 1.7; }

/* UI-002 Character */
.character-workspace, .character-workspace.character-overview-only { width: min(1240px, 100%); grid-template-columns: 190px minmax(0, 1fr); justify-content: stretch; margin-inline: auto; }
.character-directory-cover { min-height: 620px; }
.character-directory-cover .panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.roster-head { align-items: flex-start; }
.compact-button { min-height: 30px !important; padding: 4px 7px !important; font-size: 10px; }
.character-stage { display: block; }
.character-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.character-stage-head h2 { margin: 2px 0 3px; font-size: 22px; }
.character-stage-head p { margin: 0; color: var(--muted); font-size: 12px; }
.character-stage-portrait { min-height: 390px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 28px 20px 76px; background: radial-gradient(circle at 50% 38%, #2a4464, #11192c 62%); }
.character-portrait-caption { display: grid; gap: 3px; color: var(--muted); font-size: 11px; text-align: center; }
.character-portrait-caption strong { color: var(--text); font-size: 14px; }
.character-portrait-ring { width: 150px; height: 150px; display: grid; place-items: center; border: 1px solid #5d7e9f; border-radius: 42% 58% 48% 52%; background: linear-gradient(145deg, #335877, #10182d); box-shadow: 0 22px 55px #0009, inset 0 0 38px #55d4cf22; }
.character-portrait-ring span { color: #c8fffa; font-size: 62px; font-weight: 900; }
.character-stage-content { position: relative; z-index: 2; min-width: 0; display: grid; gap: 16px; margin-top: -58px; padding: 0 20px 20px; }
.character-stage.operation-open .character-stage-portrait { min-height: 300px; padding-bottom: 68px; }
.character-stage.operation-open .character-stage-content { margin-top: -52px; }
.character-fact-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.character-fact-strip > div { min-width: 0; padding: 9px; border: 1px solid #263958; border-radius: 8px; background: #0a1221; }
.character-fact-strip span, .character-fact-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-fact-strip span { color: var(--muted); font-size: 9px; }
.character-fact-strip strong { margin-top: 4px; font-size: 12px; }
.character-thumbnail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.character-thumbnail { min-width: 0; min-height: 118px; display: grid; grid-template-rows: 54px auto; gap: 7px; place-items: center; padding: 10px; border: 1px solid #3b4e70; border-radius: 12px; background: linear-gradient(155deg, #192843, #0b1324); color: var(--text); text-align: center; transition: translate .14s ease, border-color .14s ease; }
.character-thumbnail:hover { translate: 0 -2px; border-color: var(--cyan); }
.character-thumbnail.selected { border-color: var(--cyan); box-shadow: inset 0 -3px var(--cyan), 0 8px 24px #0005; }
.character-thumbnail > b { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: #263d5e; color: var(--cyan); font-size: 20px; }
.character-thumbnail strong, .character-thumbnail small { display: block; }
.character-thumbnail small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.character-attribute-entry { min-height: 44px; display: grid; grid-template-columns: 1fr auto 18px; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: #0b1324; color: var(--text); text-align: left; }
.character-attribute-entry i { color: var(--cyan); font-style: normal; }
.character-stage.portrait-expanded .character-stage-portrait { min-height: 620px; padding-bottom: 28px; }
.character-stage.portrait-expanded .character-portrait-ring { width: min(360px, 60vw); height: min(420px, 60vh); border-radius: 42% 58% 52% 48%; }
.character-stage.portrait-expanded .character-stage-content { display: none; }
.character-operation { min-height: 0; }
.character-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.directory-toolbar { display: flex; justify-content: flex-end; gap: 8px; }
.directory-character-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--text); text-align: left; }
.directory-character-card em { display: block; margin-top: 5px; color: var(--cyan); font-size: 10px; font-style: normal; }

/* UI-003 Party */
.party-workspace { width: min(1260px, 100%); grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
.party-list { padding-bottom: 10px; }
.party-list-card { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin: 10px; padding: 11px; border: 1px solid var(--cyan); border-radius: 9px; background: #12282f; }
.party-list-card strong, .party-list-card small { display: block; }
.party-list-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #0b1323; color: var(--cyan); }
.party-list-note { margin: 10px 12px 0; font-size: 10px; line-height: 1.5; }
.party-stage .formation-stage { min-height: 310px; }
.formation-slot.selected button { border-color: var(--gold); box-shadow: 0 0 0 2px #f2c96d2b; }
.formation-slot em { display: block; margin-top: 8px; color: var(--gold); font-size: 10px; font-style: normal; }
.party-stage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.formation-slot[draggable="true"] { cursor: grab; }
.formation-slot[draggable="true"]:active { cursor: grabbing; }
.party-member-operation { min-width: 0; align-self: start; display: grid; gap: 12px; padding: 13px; border: 1px solid #405273; border-radius: 11px; background: #10182b; }
.party-member-operation h3, .party-pool-toolbar h3 { margin: 2px 0 0; }
.party-member-operation .character-fact-strip { grid-template-columns: 1fr 1fr; }
.party-inspector-avatar { min-height: 132px; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 10px; background: radial-gradient(circle, #294866, #0b1324 68%); }
.party-inspector-avatar > span { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid #5b7f9e; border-radius: 50%; color: var(--cyan); font-size: 25px; font-weight: 900; }
.party-inspector-avatar small { color: var(--muted); }
.party-inspector-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.party-pool { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.party-pool-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.party-lower-workspace { display: grid; gap: 10px; }
.party-lower-workspace.inspector-open { grid-template-columns: minmax(0, 1fr) 300px; }
.party-pool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.party-pool-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: #111a2d; overflow: hidden; }
.party-pool-card > button { width: 100%; min-height: 92px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border: 0; background: transparent; color: var(--text); text-align: left; }
.party-pool-card strong, .party-pool-card small, .party-pool-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-pool-card small, .party-pool-card em { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: normal; }
.party-pool-card.in-party { border-color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
.party-pool-card.selected { border-color: var(--gold); box-shadow: inset 0 -3px var(--gold); }
.party-pool-card.disabled { opacity: .68; filter: saturate(.45); }
.party-pool-card.dragging { opacity: .2; }
[data-party-drop-slot], [data-party-drop-pool] { transition: outline-color .12s ease, background .12s ease; }

/* UI-004 Adventure */
.adventure-catalog-page { width: min(1180px, 100%); margin-inline: auto; }
.adventure-filter-bar { display: flex; gap: 7px; padding: 11px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.adventure-filter-bar button { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #0b1324; color: var(--muted); }
.adventure-filter-bar button.active { border-color: var(--cyan); color: white; background: #123039; }
.adventure-catalog .encounter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.encounter-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) 18px; gap: 12px; align-items: center; }
.encounter-card-art { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 15px; background: radial-gradient(circle, #35536c, #11182a 68%); color: var(--cyan); font-weight: 900; }
.encounter-card.pinnacle .encounter-card-art { color: var(--gold); background: radial-gradient(circle, #5a4732, #171527 68%); }
.encounter-detail-layout { width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-inline: auto; }
.encounter-detail-banner { padding: 18px; border: 1px solid #3f5577; border-radius: 12px; background: radial-gradient(circle at 0 0, #2b4664, #11192c 65%); }
.encounter-detail-banner h2 { margin: 8px 0 6px; font-size: 24px; }
.encounter-detail-banner p { margin: 0; color: #bac9df; line-height: 1.6; }
.encounter-detail-metrics, .enemy-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.encounter-detail-metrics > div, .enemy-stat-grid > div { padding: 9px; border: 1px solid #293b5a; border-radius: 8px; background: #0a1221; }
.encounter-detail-metrics span, .encounter-detail-metrics strong, .enemy-stat-grid span, .enemy-stat-grid strong { display: block; }
.encounter-detail-metrics span, .enemy-stat-grid span { color: var(--muted); font-size: 9px; }
.encounter-detail-metrics strong, .enemy-stat-grid strong { margin-top: 4px; font-size: 12px; }
.enemy-group-list { display: grid; gap: 9px; }
.enemy-group-list > div > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.enemy-chip { min-height: 34px; padding: 6px 10px; border: 1px solid #405578; border-radius: 999px; background: #111a2d; color: #dbe8fb; }
.enemy-chip.selected { border-color: var(--gold); color: var(--gold); }
.enemy-detail-inspector { min-width: 0; align-self: start; display: grid; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #10182b; }
.enemy-detail-inspector.popup { width: min(560px, 100%); margin-inline: auto; }
.enemy-detail-inspector.popup h3 { margin: 8px 0 0; }
.enemy-detail-inspector.popup p { color: var(--muted); }
.enemy-detail-inspector.empty { min-height: 280px; place-content: center; }
.enemy-portrait { width: 112px; height: 112px; display: grid; place-items: center; margin: 10px auto 0; border: 1px solid #8a5365; border-radius: 50%; background: radial-gradient(circle, #663848, #1a1322 67%); color: #ffbac4; font-size: 38px; font-weight: 900; }
.enemy-detail-inspector > h3, .enemy-detail-inspector > p { margin: 0; text-align: center; }
.enemy-detail-inspector > p { color: var(--muted); }
.encounter-party-summary { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0d1527; }
.encounter-party-thumbnails { display: flex; gap: 8px; margin-top: 10px; }
.encounter-party-thumbnails span { display: grid; gap: 2px; place-items: center; }
.encounter-party-thumbnails b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #263b59; color: var(--cyan); }
.encounter-party-thumbnails small { color: var(--muted); font-size: 8px; }
.encounter-supply-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.encounter-supply-slots button { min-height: 74px; display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #111a2d; color: var(--text); text-align: left; }
.encounter-supply-slots span, .encounter-supply-slots small { color: var(--muted); font-size: 9px; }
.repeat-checkbox { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #0b1324; }
.repeat-checkbox input { width: 18px; height: 18px; }
.repeat-checkbox strong, .repeat-checkbox small { display: block; }
.repeat-checkbox small { margin-top: 3px; color: var(--muted); font-size: 10px; }

/* UI-005 Battle */
.battle-page { min-width: 0; }
.battle-topbar { min-height: 58px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(260px, 1.3fr) minmax(120px, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: #0d1425; }
.battle-supply-toolbar { display: flex; gap: 7px; }
.battle-supply-thumb { width: 46px; height: 42px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 5px; border: 1px solid #394966; border-radius: 8px; background: #0a1120; }
.battle-supply-thumb.filled { border-color: #7e6d3d; }
.battle-supply-thumb b { color: var(--gold); }
.battle-supply-thumb small { color: var(--muted); font-size: 9px; }
.battle-title { min-width: 0; text-align: center; }
.battle-title strong, .battle-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-title span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.battle-abort { justify-self: end; }
.battle-layout { grid-template-columns: 260px minmax(420px, 1fr) 260px; gap: 10px; align-items: start; }
.battle-unit-column { display: grid; gap: 8px; max-height: 680px; overflow: auto; padding-right: 3px; }
.column-title { display: flex; justify-content: space-between; padding: 8px 10px; color: var(--muted); font-size: 11px; }
.battle-unit-card { position: relative; display: grid; gap: 7px; padding: 10px; border: 1px solid #344867; border-radius: 10px; background: #111a2d; }
.battle-unit-card.enemy { border-color: #57394e; background: #1a1424; }
.battle-unit-card.downed { border-color: #626a78; background: #171b23; filter: grayscale(1); color: #aeb4bf; }
.battle-unit-card.downed .battle-health-bar i, .battle-unit-card.downed .progress i { background: #747c88; }
.battle-unit-head { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; align-items: center; }
.battle-unit-avatar { width: 42px; height: 42px; border: 1px solid #4a668c; border-radius: 50%; background: #213554; color: var(--cyan); font-weight: 900; }
.battle-unit-card.enemy .battle-unit-avatar { border-color: #8c5164; background: #4b2635; color: #ffb7c1; }
.battle-live-inspector { position: absolute; z-index: 30; top: 48px; left: 0; width: min(290px, 100%); display: none; gap: 9px; padding: 12px; border: 1px solid #5b7197; border-radius: 10px; background: #08101ff5; color: var(--text); box-shadow: 0 18px 46px #000c; }
.battle-unit-card.enemy .battle-live-inspector { right: 0; left: auto; border-color: #805266; }
.battle-unit-avatar:hover + .battle-live-inspector, .battle-unit-avatar:focus + .battle-live-inspector { display: grid; }
.battle-live-inspector-title { display: flex; justify-content: space-between; gap: 8px; }
.battle-live-inspector-title span { color: var(--cyan); font-size: 9px; }
.battle-live-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.battle-live-stat-grid > div { padding: 6px; border-radius: 6px; background: #101a2d; }
.battle-live-stat-grid span, .battle-live-stat-grid strong { display: block; font-size: 9px; }
.battle-live-stat-grid span { color: var(--muted); }
.battle-live-stat-grid strong { margin-top: 2px; }
.battle-live-inspector ul { display: grid; gap: 4px; max-height: 120px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.battle-live-inspector li { display: grid; gap: 2px; padding-top: 5px; border-top: 1px solid #253654; font-size: 9px; }
.battle-live-inspector li span { color: var(--muted); line-height: 1.4; }
.battle-unit-head strong, .battle-unit-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-unit-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.battle-health-row, .battle-ap-item > div:first-child { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.battle-health-row strong, .battle-ap-item strong { color: #dfeaff; }
.battle-health-bar { position: relative; height: 9px; overflow: hidden; border: 1px solid #2a3d59; border-radius: 999px; background: #050b15; }
.battle-health-bar i, .battle-health-bar b { position: absolute; inset: 0 auto 0 0; display: block; }
.battle-health-bar i { background: linear-gradient(90deg, #4ba678, #7ae39d); }
.battle-health-bar b { z-index: 2; background: linear-gradient(90deg, #6e9cff66, #b28cff88); mix-blend-mode: screen; }
.battle-shield-row { color: #9ebcff; font-size: 9px; }
.battle-revive-row { padding: 6px 8px; border: 1px solid #747c88; border-radius: 7px; background: #252a33; color: #e0e3e8; font-size: 10px; text-align: center; }
.battle-revive-row strong { color: white; font-size: 12px; }
.battle-status-row { position: relative; display: flex; flex-wrap: wrap; gap: 4px; min-height: 23px; overflow: visible; }
.battle-status-detail { position: static; }
.battle-status-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.battle-status-glyph { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #5cbdb5; border-radius: 5px; background: #0c2528; color: #b7fff8; font-size: 10px; cursor: help; }
.battle-status-detail.debuff .battle-status-glyph { border-color: #c85e70; background: #2c101b; color: #ffc0c8; }
.battle-status-toggle:focus-visible + .battle-status-glyph { outline: 2px solid #fff0a8; outline-offset: 2px; }
.battle-status-popover { position: absolute; z-index: 35; top: calc(100% + 5px); right: 0; left: 0; display: none; gap: 5px; padding: 9px; border: 1px solid #5b7197; border-radius: 8px; background: #08101ff5; color: var(--text); box-shadow: 0 15px 38px #000d; }
.battle-status-detail:hover .battle-status-popover, .battle-status-detail:focus-within .battle-status-popover, .battle-status-detail:has(.battle-status-toggle:checked) .battle-status-popover { display: grid; }
.battle-status-popover > div { display: flex; justify-content: space-between; gap: 8px; }
.battle-status-popover span { color: var(--muted); font-size: 8px; }
.battle-status-popover p { margin: 0; color: #b9c7dc; font-size: 9px; line-height: 1.45; }
.battle-ap-item { display: grid; gap: 4px; }
.battle-ap-item .progress { height: 6px; }
.battle-ap-item .progress i { background: linear-gradient(90deg, var(--cyan), #97fff7); transition: width .08s linear; }
.battle-ap-item.skill .progress i { background: linear-gradient(90deg, #7f6fe3, #c6a5ff); }
.battle-ap-item.skill em { display: inline-flex; min-width: 0; margin-left: 3px; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--skill-color, #9b88ff) 70%, transparent); border-radius: 999px; color: var(--skill-color, #c6a5ff); font-size: 7px; font-style: normal; font-weight: 900; vertical-align: 1px; }
.battle-ap-item.skill em:empty { display: none; }
.battle-ap-item.skill em[data-phase="announce"] { animation: battle-skill-phase-pulse .36s ease-in-out infinite alternate; }
@keyframes battle-skill-phase-pulse { to { filter: brightness(1.5); box-shadow: 0 0 8px var(--skill-color, #9b88ff); } }
.battle-stage { min-height: 600px; }
.battle-stage canvas { height: 600px; }
.battle-hud { inset: auto 10px 10px; align-items: center; pointer-events: auto; }
.battle-hud button, .battle-hud label { padding: 6px 8px; border-radius: 7px; background: #050a16dd; }
.battle-repeat-inline { color: var(--muted); font-size: 10px; }
.battle-repeat-inline input { min-height: 0; vertical-align: middle; }
.battle-readout-drawer { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 50px; }
.battle-readout-drawer details { border: 1px solid #344560; border-radius: 8px; background: #07101fea; }
.battle-readout-drawer summary { padding: 7px 9px; color: var(--muted); font-size: 10px; cursor: pointer; }
.battle-readout-drawer .battle-readout-grid { grid-template-columns: 1fr 1fr; max-height: 190px; overflow: auto; padding: 9px; }

/* UI-006 Production */
.facility-garrison-summary { display: grid; gap: 10px; padding: 12px; border: 1px solid #334869; border-radius: 12px; background: linear-gradient(135deg, #101a30, #0a1222); }
.facility-garrison-summary h3 { margin: 3px 0 0; }
.facility-garrison-summary > p { margin: 0; color: var(--muted); font-size: 10px; }
.facility-garrison-slots, .production-garrison-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.facility-garrison-slot, .facility-order-workers > span { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px dashed #384764; border-radius: 9px; background: #09111f; }
.facility-garrison-slot.filled { border-style: solid; border-color: #4a7083; background: #102132; }
.facility-garrison-slot > b, .facility-order-workers > span > b { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #5d8da2; border-radius: 50%; color: var(--cyan); }
.facility-garrison-slot strong, .facility-garrison-slot small, .facility-order-workers strong, .facility-order-workers small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facility-garrison-slot small, .facility-order-workers small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.production-project-directory { display: grid; gap: 18px; }
.production-project-group { display: grid; gap: 9px; }
.production-family-caption { position: sticky; z-index: 2; top: 0; padding: 5px 0; background: #0b1324ee; backdrop-filter: blur(8px); }
.production-project-subgroups { display: grid; gap: 10px; }
.production-project-subgroup { display: grid; gap: 5px; }
.production-project-subgroup-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 24px; padding: 0 2px; color: #b7c7df; }
.production-project-subgroup-title strong { font-size: 10px; }
.production-project-subgroup-title span { color: var(--muted); font-size: 8px; }
.recipe-icon-grid.production-project-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.recipe-icon-card.production-project-card { min-height: 82px; gap: 3px; padding: 5px 4px; border-radius: 9px; }
.recipe-icon-card.production-project-card .recipe-product-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.recipe-icon-card.production-project-card strong { font-size: 9px; }
.recipe-icon-card.production-project-card small { font-size: 8px; }
.production-project-card.locked { border-style: dashed; filter: grayscale(1); opacity: .43; cursor: pointer; }
.production-project-card.locked:hover, .production-project-card.locked:focus-visible { border-color: #8090aa; filter: grayscale(.65); opacity: .72; }
.recipe-lock-mark { color: #c4cedd !important; font-size: 7px !important; font-style: normal; letter-spacing: .04em; }
.production-project-card em { max-width: 100%; overflow: hidden; color: #8da4c7; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.production-garrison-task { display: grid; gap: 16px; }
.production-garrison-stage-slot { min-width: 0; min-height: 168px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 10px; border: 1px dashed #3b4b69; border-radius: 12px; background: #09111f; text-align: center; }
.production-garrison-stage-slot.filled { border-style: solid; border-color: var(--cyan); background: #102132; }
.production-garrison-stage-slot > span { color: var(--muted); font-size: 9px; }
.production-garrison-stage-slot > b { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #5f91a5; border-radius: 50%; color: var(--cyan); font-size: 18px; }
.production-garrison-stage-slot > strong, .production-garrison-stage-slot > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.production-garrison-stage-slot > small { color: var(--muted); font-size: 9px; }
.production-garrison-stage-slot[draggable="true"] { cursor: grab; }
.production-garrison-pool { padding: 10px; border: 1px solid #263653; border-radius: 12px; background: #080f1d; }
.production-garrison-pool .party-pool-card { min-width: 0; }
.facility-order-workers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.work-order-summary.locked { border-color: #6b7180; background: #171923; }
.recipe-unlock-requirements { display: grid; gap: 9px; }
.recipe-requirement-list { display: grid; gap: 6px; }
.recipe-requirement-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px; border: 1px solid #2e405d; border-radius: 8px; background: #09111f; }
.recipe-requirement-list > div > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.recipe-requirement-list > div.met > b { background: #153c38; color: #8ff5e9; }
.recipe-requirement-list > div.missing { border-color: #6d3e4b; background: #1b1119; }
.recipe-requirement-list > div.missing > b { background: #552938; color: #ffc0cb; }
.recipe-requirement-list strong, .recipe-requirement-list small { display: block; }
.recipe-requirement-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.production-material-requirements { display: grid; gap: 5px; }
.production-material-requirements > .row > span, .production-material-requirements > small { color: var(--muted); font-size: 9px; }
.production-material-requirements > p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 6px 0; border-top: 1px solid #263754; font-size: 10px; }
.production-material-requirements > p b { text-align: right; }
.production-material-requirements > p.missing b { color: #ffadb9; }
.recipe-type-tabs, .order-task-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.recipe-type-tabs button, .order-task-tabs button { flex: 0 0 auto; min-height: 38px; padding: 7px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.recipe-type-tabs button.active, .order-task-tabs button.active { border-color: var(--cyan); color: white; }
.recipe-type-tabs small { margin-left: 5px; color: #687da2; }
.recipe-icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.recipe-icon-card { min-width: 0; min-height: 112px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: #10192d; color: var(--text); text-align: center; }
.recipe-icon-card.selected { border-color: var(--cyan); box-shadow: inset 0 -3px var(--cyan); }
.recipe-product-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #29425f, #11192c); color: var(--gold); font-size: 20px; font-weight: 900; }
.recipe-icon-card strong, .recipe-icon-card small { max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-icon-card strong { font-size: 11px; }
.recipe-icon-card small { color: var(--muted); font-size: 9px; }
.work-order-field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.work-order-field-grid > div { padding: 9px; border: 1px solid #30415f; border-radius: 8px; background: #0a1221; }
.work-order-field-grid span, .work-order-field-grid strong { display: block; }
.work-order-field-grid span { color: var(--muted); font-size: 9px; }
.work-order-field-grid strong { margin-top: 4px; font-size: 11px; }
.production-quantity-controls { display: grid; gap: 8px; }
.production-quantity-controls label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.quantity-stepper, .time-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.quantity-stepper button, .time-shortcuts button { min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #10192c; color: #d9e6fa; }
.time-shortcuts { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.time-shortcuts > span { align-self: center; color: var(--muted); font-size: 10px; }
.production-total-time { display: flex; justify-content: center; gap: 7px; padding: 12px; border-radius: 8px; background: #0b1324; }
.production-total-time span { color: var(--muted); }
.production-total-time strong { color: var(--cyan); }

/* UI-007 Warehouse */
.warehouse-workspace { width: min(1200px, 100%); grid-template-columns: 190px minmax(0, 1fr); margin-inline: auto; }
.warehouse-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 180px 150px; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.inventory-card { position: relative; }
.inventory-owner-avatar { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; background: #2b2518; color: var(--gold); font-size: 9px; font-weight: 900; }
.warehouse-detail-task { max-width: 780px; margin-inline: auto; }
.warehouse-equip-task .task-character-grid { grid-template-columns: 1fr; }
.task-character-card.incompatible { opacity: .48; }
.warehouse-five-slot-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.warehouse-five-slot-bar > div { min-width: 0; padding: 7px; border: 1px solid #2e3f5e; border-radius: 7px; background: #0a1221; }
.warehouse-five-slot-bar > div.target { border-color: var(--gold); box-shadow: inset 0 -2px var(--gold); }
.warehouse-five-slot-bar span, .warehouse-five-slot-bar strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-five-slot-bar span { color: var(--muted); font-size: 8px; }
.warehouse-five-slot-bar strong { margin-top: 3px; font-size: 9px; }
.replacement-preview > strong { display: block; margin: 5px 0 8px; }
.replacement-preview > i { display: block; color: var(--cyan); font-style: normal; text-align: center; }

@media (max-width: 1280px) {
  .battle-layout { grid-template-columns: 220px minmax(380px, 1fr) 220px; }
  .battle-unit-card { padding: 8px; }
  .party-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adventure-catalog .encounter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-frame { grid-template-columns: 1fr; }
  .global-sidebar { position: sticky; z-index: 18; top: 0; margin: 0 -18px; padding: 8px 18px; background: #070b16f2; backdrop-filter: blur(12px); }
  .primary-nav { position: static; grid-template-columns: repeat(var(--nav-count, 7), minmax(92px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav button { min-height: 48px; grid-template-columns: 24px minmax(0, 1fr); padding: 6px 8px; }
  .primary-nav button .nav-icon { width: 24px; height: 24px; }
  .context-bar { grid-template-columns: minmax(220px, 1.2fr) minmax(170px, .8fr) minmax(160px, .7fr); overflow-x: auto; scrollbar-width: none; }
  .context-bar::-webkit-scrollbar { display: none; }
  .home-queue-list, .home-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party-workspace, .warehouse-workspace { grid-template-columns: 170px minmax(0, 1fr); }
  .battle-layout { grid-template-columns: 1fr; }
  .battle-stage { grid-row: 1; }
  .friendly-column { grid-row: 2; }
  .enemy-column { grid-row: 3; }
  .battle-unit-column { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .column-title { grid-column: 1 / -1; }
  .encounter-detail-layout { grid-template-columns: 1fr; }
  .enemy-detail-inspector { position: static; }
}

@media (max-width: 600px) {
  .app-shell { padding: 0 10px 18px; }
  .topbar { min-height: 70px; flex-wrap: nowrap; }
  .brand-lockup .eyebrow { display: none; }
  .brand-lockup h1 { font-size: 20px; }
  .topbar-actions { width: auto; margin-left: auto; display: flex; }
  .player-identity { min-width: 0; grid-template-columns: 32px; padding: 5px; }
  .player-avatar { width: 32px; height: 32px; }
  .player-identity span:last-child { display: none; }
  .guide-button { width: auto; padding-inline: 8px; }
  .settings-menu summary { padding-inline: 8px; }
  .global-sidebar { margin: 0 -10px; padding: 7px 10px; }
  .primary-nav { grid-template-columns: repeat(var(--nav-count, 7), 78px); gap: 5px; }
  .primary-nav button { min-height: 44px; grid-template-columns: 22px minmax(0, 1fr); font-size: 11px; }
  .primary-nav button .nav-icon { width: 22px; height: 22px; font-size: 10px; }
  .primary-nav button small { display: none; }
  .context-bar { grid-template-columns: repeat(3, 180px); margin-top: 2px; padding-bottom: 2px; }
  .guidance { grid-template-columns: 1fr; }
  .home-panel-tabs button { min-height: 50px; font-size: 11px; }
  .home-panel-heading { display: grid; }
  .home-panel-heading button { width: 100%; }
  .home-queue-list, .home-character-grid { grid-template-columns: 1fr; }
  .home-battle-summary { min-height: 0; grid-template-columns: 1fr; place-items: center; padding: 22px; text-align: center; }
  .home-battle-emblem { width: 90px; height: 90px; font-size: 32px; }
  .character-workspace, .character-workspace.character-overview-only, .party-workspace, .warehouse-workspace { grid-template-columns: 1fr; }
  .character-roster .panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-stage-portrait, .character-stage.operation-open .character-stage-portrait { min-height: 270px; padding-bottom: 68px; }
  .character-portrait-ring { width: 118px; height: 118px; }
  .character-portrait-ring span { font-size: 48px; }
  .character-stage-content { padding: 13px; }
  .character-fact-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .character-thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-thumbnail { min-height: 100px; }
  .character-directory-grid { grid-template-columns: 1fr 1fr; }
  .directory-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .party-list { display: none; }
  .formation-stage { min-height: 230px; }
  .formation-slot em { display: none; }
  .party-pool-toolbar { display: grid; }
  .party-pool-toolbar .row { display: grid; grid-template-columns: 1fr 1fr; }
  .party-pool-grid { grid-template-columns: 1fr; }
  .party-lower-workspace.inspector-open { grid-template-columns: 1fr; }
  .party-stage-actions { grid-template-columns: 1fr; }
  .adventure-catalog .encounter-grid { grid-template-columns: 1fr; }
  .encounter-card { min-height: 104px; grid-template-columns: 58px minmax(0, 1fr) 14px; }
  .encounter-card-art { width: 58px; height: 58px; }
  .encounter-detail-metrics, .enemy-stat-grid { grid-template-columns: 1fr 1fr; }
  .encounter-supply-slots { grid-template-columns: 1fr 1fr; }
  .battle-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .battle-supply-toolbar { gap: 3px; }
  .battle-supply-thumb { width: 34px; padding-inline: 3px; }
  .battle-title strong { font-size: 11px; }
  .battle-title span { font-size: 8px; }
  .battle-abort { min-height: 34px !important; padding: 5px 7px !important; font-size: 10px; }
  .battle-stage, .battle-stage canvas { min-height: 420px; height: 420px; }
  .battle-unit-column { grid-template-columns: 1fr; }
  .battle-readout-drawer .battle-readout-grid { grid-template-columns: 1fr; }
  .recipe-icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facility-garrison-slots, .facility-order-workers { grid-template-columns: 1fr; }
  .production-garrison-stage-slot { min-height: 136px; }
  .work-order-field-grid { grid-template-columns: 1fr 1fr; }
  .quantity-stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .time-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .time-shortcuts > span { grid-column: 1 / -1; }
  .warehouse-toolbar { grid-template-columns: 1fr 1fr; }
  .warehouse-toolbar label { grid-column: 1 / -1; }
  .warehouse-five-slot-bar { grid-template-columns: repeat(5, minmax(74px, 1fr)); overflow-x: auto; }
}

/* Slice 7: independently designed, scene-native camp interface. */
html[data-camp-candidate="true"], html[data-camp-candidate="true"] body { width: 100%; height: 100%; overflow: hidden; }
html[data-camp-candidate="true"] body { padding-top: 28px; background: #081110; }
.camp-native-root { position: fixed; inset: 28px 0 0; overflow: hidden; isolation: isolate; color: #f4f2df; font-family: "Microsoft YaHei", system-ui, sans-serif; }
.camp-icon { width: 1em; height: 1em; display: block; overflow: visible; pointer-events: none; }
.camp-native-root :where(button, [role="button"]):focus-visible { outline: 2px solid #fff0a8; outline-offset: 3px; }
.camp-native-runtime-node { display: none !important; }
.camp-native-stage { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.camp-native-corner-hud { position: fixed; z-index: 76; top: 40px; right: 14px; left: 14px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.camp-native-seal { display: grid; grid-template-columns: 34px auto; gap: 8px; align-items: center; padding: 7px 10px 7px 7px; border: 1px solid #c1ba8270; border-radius: 16px 8px 14px 8px; background: #17221de6; box-shadow: 0 10px 28px #0007; backdrop-filter: blur(8px); }
.camp-native-seal > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d5c77d88; border-radius: 50%; background: #344234; color: #efe3a3; font-weight: 900; }
.camp-native-seal div { display: grid; gap: 1px; }
.camp-native-seal strong { font-size: 13px; letter-spacing: .08em; }
.camp-native-seal small { color: #9daf9d; font-size: 9px; }
.camp-native-system-actions { display: flex; gap: 6px; pointer-events: auto; }
.camp-native-system-actions > button, .camp-native-settings > button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #bfb77955; border-radius: 50%; background: #17221de8; color: #ebe6c7; box-shadow: 0 8px 22px #0006; cursor: pointer; }
.camp-native-settings { position: relative; }
.camp-native-settings-panel { position: absolute; top: 42px; right: 0; width: 230px; padding: 9px; display: grid; gap: 8px; border: 1px solid #777653; border-radius: 9px; background: #17221df5; box-shadow: 0 12px 32px #0009; }
.camp-native-settings-panel[hidden] { display: none; }
.camp-native-settings-panel > button { width: 100%; min-height: 34px; border: 1px solid #7a594c; border-radius: 7px; background: #33221e; color: #f1c9bc; }
.camp-native-setting-switch { min-height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border: 1px solid #6e7f66; border-radius: 8px; background: #203027; color: #f4f2df; cursor: pointer; }
.camp-native-setting-switch span, .camp-native-setting-switch strong, .camp-native-setting-switch small { display: block; min-width: 0; }
.camp-native-setting-switch strong { font-size: 12px; }
.camp-native-setting-switch small { margin-top: 3px; color: #aebba8; font-size: 9px; line-height: 1.35; }
.camp-native-setting-switch input { width: 38px; height: 22px; margin: 0; accent-color: #f0bd45; cursor: pointer; }
.camp-native-world { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(180deg, #172e31 0%, #18332d 27%, #13291f 100%); }
.camp-native-world::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 52% 52%, #809b6250 0 22%, transparent 58%), radial-gradient(circle at 16% 18%, #b4b77b20, transparent 28%), linear-gradient(125deg, transparent 0 44%, #09161370 100%); pointer-events: none; }
.camp-native-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.camp-native-atmosphere i { position: absolute; width: 28vw; height: 28vw; border-radius: 50%; background: #95c9aa0d; filter: blur(22px); }
.camp-native-atmosphere i:nth-child(1) { left: -8vw; top: 12vh; }
.camp-native-atmosphere i:nth-child(2) { right: 7vw; top: -10vw; }
.camp-native-atmosphere i:nth-child(3) { right: -9vw; bottom: -8vw; background: #68a5b217; }
.camp-native-ground { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.camp-native-ground.is-grid-mode::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(#d9e5ad17 1px, transparent 1px), linear-gradient(90deg, #d9e5ad17 1px, transparent 1px); background-size: 56px 56px; box-shadow: inset 0 0 80px #07130f88; }
.camp-native-world.is-grid-mode::after { content: "网格吸附"; position: absolute; z-index: 2; right: 18px; bottom: 14px; padding: 4px 8px; border: 1px solid #c8d89738; border-radius: 999px; background: #14231dcc; color: #bfcda7; font-size: 10px; letter-spacing: .08em; pointer-events: none; }
.camp-native-ground-plane { position: absolute; z-index: -5; left: 3%; right: 3%; top: 10%; bottom: -18%; border: 1px solid #a6b37a20; border-radius: 48% 52% 18% 20%; background: radial-gradient(circle, #d5dda511 0 1px, transparent 1.5px), linear-gradient(155deg, #314d32 0%, #223b2c 45%, #15291f 100%); background-size: 27px 23px, auto; box-shadow: inset 0 0 110px #07130fd9, 0 -20px 80px #637e4b1a; transform: perspective(900px) rotateX(4deg); }
.camp-native-path { position: absolute; z-index: -3; height: 48px; border-radius: 50%; border-top: 11px solid #c7aa6b1c; filter: blur(.2px); }
.camp-native-path.path-one { width: 70%; left: 8%; top: 33%; rotate: 7deg; }
.camp-native-path.path-two { width: 58%; left: 24%; top: 68%; rotate: -13deg; }
.camp-native-object { position: absolute; left: var(--native-x); top: var(--native-y); z-index: 5; appearance: none; border: 0; background: transparent; color: #f4f2df; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); transform-origin: center; cursor: grab; touch-action: none; user-select: none; }
.camp-native-object::before { content: ""; position: absolute; inset: -7px; z-index: -1; border: 1px solid transparent; border-radius: 18px; transition: .16s ease; }
.camp-native-object:hover::before, .camp-native-object:focus-visible::before { border-color: #d7e6a28a; background: #a7c87b12; box-shadow: 0 0 0 4px #b9dc8a0b; transform: translateY(-2px); }
.camp-native-object.is-selected { z-index: 20; }
.camp-native-object.is-selected::before { border-color: #e6e7a9; background: #b5d27f1c; box-shadow: 0 0 28px #c5dc8050, 0 0 0 4px #d9e59118; }
.camp-native-object.dragging, .camp-native-ground-drop.dragging { opacity: .45; filter: saturate(.5); }
.camp-native-facility { width: 116px; min-height: 112px; display: grid; justify-items: center; align-content: end; gap: 3px; padding: 5px; }
.camp-native-facility-art { position: relative; width: 66px; height: 54px; display: grid; place-items: center; border: 1px solid #89977380; border-radius: 17px 17px 9px 9px; background: linear-gradient(145deg, #697158, #344b3e 58%, #1c322c); box-shadow: 0 13px 20px #0007; }
.camp-native-facility-art::after { content: ""; position: absolute; width: 78px; height: 16px; bottom: -10px; z-index: -1; border-radius: 50%; background: #030b0966; }
.camp-native-facility-art i { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #d6dfa245; border-radius: 10px; background: #1a302a; color: #e9e7ae; font-style: normal; font-weight: 900; }
.camp-native-facility-art i .camp-icon { width: 21px; height: 21px; }
.camp-native-facility-art b { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #7d8778; }
.camp-native-facility-art em { position: absolute; right: 10px; bottom: 4px; width: 15px; height: 4px; border-radius: 3px; background: #342f25; }
.camp-native-facility.is-running .camp-native-facility-art { border-color: #7ed998; box-shadow: 0 0 24px #5bce822e, 0 13px 20px #0007; }
.camp-native-facility.is-running .camp-native-facility-art b { background: #88efa5; box-shadow: 0 0 10px #76e49a; }
.camp-native-facility.is-paused_unstaffed .camp-native-facility-art { border-color: #d59f69; filter: saturate(.68); }
.camp-native-facility.is-paused_unstaffed .camp-native-facility-art b { background: #e5a55f; box-shadow: 0 0 9px #d78445; }
.camp-native-facility.is-paused_output_full .camp-native-facility-art { border-color: #efb36f; box-shadow: 0 0 0 3px #ef9d4617, 0 13px 20px #0007; filter: saturate(.78); }
.camp-native-facility.is-paused_output_full .camp-native-facility-art b { background: #f2ad63; box-shadow: 0 0 10px #ee994c; }
.camp-native-facility.is-pinned { cursor: pointer; }
.camp-native-facility.is-pinned .camp-native-facility-art { border-color: #e3d980b5; box-shadow: 0 0 0 3px #d9cf7114, 0 13px 20px #0007; }
.camp-native-facility.is-pinned .camp-native-facility-art::before { content: ""; position: absolute; left: 50%; bottom: -17px; width: 9px; height: 18px; border-radius: 5px 5px 50% 50%; background: linear-gradient(#d9cf7d, #7d7545); box-shadow: 0 3px 8px #0009; transform: translateX(-50%); }
.camp-native-object-label { max-width: 112px; display: grid; justify-items: center; gap: 1px; padding: 4px 7px; border: 1px solid #b7c3941d; border-radius: 8px; background: #08130fca; backdrop-filter: blur(5px); }
.camp-native-object-label strong { font-size: 12px; }
.camp-native-object-label small { max-width: 100px; overflow: hidden; color: #aab7a4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-object-progress { width: 78px; height: 3px; overflow: hidden; border-radius: 9px; background: #020806c7; }
.camp-native-object-progress i { display: block; height: 100%; background: linear-gradient(90deg, #6dd18d, #e0df83); transition: width .2s linear; }
.camp-native-mode-mark, .camp-native-queue-mark { position: absolute; top: 25px; padding: 2px 5px; border-radius: 8px; color: #142016; font-size: 8px; font-weight: 900; }
.camp-native-mode-mark { left: 2px; background: #b3e7b9; }.camp-native-queue-mark { right: 2px; background: #e0b960; }
.camp-native-growth-mark { position: absolute; left: 50%; bottom: -9px; min-width: 60px; padding: 2px 6px; border: 1px solid #e6dc8c73; border-radius: 9px; background: #17251ee8; color: #efe59e; font-size: 8px; font-weight: 900; transform: translateX(-50%); }
.camp-native-growth-pop { position: absolute; z-index: 4; left: 50%; top: -28px; padding: 5px 9px; border: 1px solid #fff0a8; border-radius: 11px; background: #314d35f5; box-shadow: 0 0 24px #8cf5a899; color: #fff5b8; font-size: 11px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); animation: camp-native-growth-pop 1.35s ease-out both; }
.camp-native-facility.is-card-drop-valid, .camp-native-facility.is-card-drop-ready, .camp-native-facility.is-card-drop-invalid { z-index: 62; }
.camp-native-facility.is-card-drop-valid::before { border: 3px solid #7ae5a1; background: #67e38b22; box-shadow: 0 0 32px #6ae696ad, 0 0 0 8px #62de871c; }
.camp-native-facility.is-card-drop-valid::after, .camp-native-facility.is-card-drop-invalid::after { content: "同名建筑 · 可叠入"; position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 9px); padding: 5px 8px; border: 1px solid #8aeaa9; border-radius: 9px; background: #173322f2; box-shadow: 0 8px 24px #000a; color: #caffd8; font-size: 10px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.camp-native-facility.is-card-drop-ready::before { border-color: #fff09d; background: #e2db6b32; box-shadow: 0 0 42px #eeef8cdb, 0 0 0 10px #e8e57b22; }
.camp-native-facility.is-card-drop-ready::after { content: "松手叠入 · 共鸣 +1"; border-color: #fff09d; background: #3b3b1cf5; color: #fff5ad; }
.camp-native-facility.is-card-drop-invalid::before { border: 3px solid #ef806f; background: #ef695228; box-shadow: 0 0 28px #ea70588f; }
.camp-native-facility.is-card-drop-invalid::after { content: "建筑不匹配"; border-color: #ef806f; background: #3b1e1bf5; color: #ffc1b7; }
.camp-native-facility.is-growth-feedback .camp-native-facility-art { animation: camp-native-growth-pulse 1.25s ease-out both; }
.camp-native-pin-mark { position: absolute; top: 9px; left: 50%; padding: 2px 6px; border: 1px solid #e6dc8c91; border-radius: 8px; background: #222e1ee8; color: #efe7a5; font-size: 7px; font-weight: 900; transform: translateX(-50%); }
.camp-native-landmark { width: 105px; min-height: 92px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 5px; }
.camp-native-landmark-art { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid #c7c4864a; border-radius: 15px 15px 8px 8px; background: linear-gradient(145deg, #656849, #2b4037); box-shadow: 0 10px 20px #0007; color: #f2eab2; font-weight: 900; }
.camp-native-landmark-art .camp-icon { width: 25px; height: 25px; }
.camp-native-landmark strong, .camp-native-landmark small { max-width: 105px; padding: 2px 6px; overflow: hidden; border-radius: 6px; background: #07110dcc; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-landmark strong { font-size: 11px; }.camp-native-landmark small { color: #abb5a5; font-size: 8px; }
.camp-native-landmark.is-locked { opacity: .48; filter: grayscale(.8); }
.camp-native-character { width: 82px; display: grid; justify-items: center; gap: 2px; padding: 4px; }
.camp-native-character > span { width: 39px; height: 39px; display: grid; place-items: center; border: 2px solid #d8d09a; border-radius: 50% 50% 43% 43%; background: linear-gradient(145deg, #c09d68, #526154); box-shadow: 0 9px 17px #0008; color: #18221d; font-weight: 900; }
.camp-native-character > strong, .camp-native-character > small { max-width: 82px; padding: 2px 5px; overflow: hidden; border-radius: 6px; background: #07110dd9; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-character > strong { font-size: 10px; }.camp-native-character > small { color: #abb8a8; font-size: 8px; }
.camp-native-character.activity-battle > span { border-color: #b49af8; box-shadow: 0 0 20px #8c65e75e; }
.camp-native-character.activity-working > span { border-color: #7ce59c; box-shadow: 0 0 17px #66dc8e4a; }
.camp-native-character.is-at-facility { z-index: 34; width: 56px; }
.camp-native-character.is-at-facility > span { width: 28px; height: 28px; font-size: 10px; }.camp-native-character.is-at-facility > strong { font-size: 8px; }.camp-native-character.is-at-facility > small { display: none; }
.camp-native-orb { position: absolute; left: var(--native-x); top: var(--native-y); z-index: 7; width: 184px; height: 148px; overflow: hidden; border: 1px solid #b49aff8c; border-radius: 49% 49% 44% 44%; background: radial-gradient(circle, #464478e8, #101424fa); box-shadow: inset 0 0 28px #835cff5e, 0 0 35px #835cff33, 0 18px 28px #0008; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); touch-action: none; user-select: none; cursor: grab; }
.camp-native-orb::after { content: ""; position: absolute; right: 34%; bottom: -12px; left: 34%; height: 24px; border: 1px solid #78816f; border-radius: 5px 5px 13px 13px; background: #485247; }
.camp-native-orb.is-selected { z-index: 20; outline: 3px solid #dacbff99; outline-offset: 4px; }
.camp-native-orb canvas { width: 100%; height: 108px; display: block; pointer-events: none; }
.camp-native-orb > button { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; gap: 1px; padding: 0 8px 10px; border: 0; background: linear-gradient(transparent 42%, #07091bef 78%); color: #f0ebff; cursor: pointer; }
.camp-native-orb > button span { color: #c9b9fc; font-size: 8px; }.camp-native-orb > button strong { font-size: 11px; }
.camp-native-orb.is-output-full { border-color: #efb36fc4; box-shadow: inset 0 0 28px #d887455e, 0 0 35px #ef9e4d43, 0 18px 28px #0008; }
.camp-native-activity { width: 82px; display: grid; justify-items: center; gap: 2px; }
.camp-native-activity > span { width: 43px; height: 34px; display: grid; place-items: center; border: 1px solid #b6955d; border-radius: 5px; background: #5d5036; color: #f4dda1; font-weight: 900; rotate: 2deg; }
.camp-native-activity > span .camp-icon { width: 22px; height: 22px; }
.camp-native-activity strong { font-size: 10px; }.camp-native-activity small { color: #b8b9a1; font-size: 8px; }
.camp-native-ground-drop { position: absolute; left: var(--native-x); top: var(--native-y); z-index: 14; width: 72px; display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 2px 4px; align-items: center; padding: 5px 5px 9px; border: 1px solid #e7cf7299; border-radius: 10px; background: linear-gradient(145deg, #585135fa, #15251ffa); box-shadow: 0 12px 25px #0008, 0 0 18px #e0cd641f; color: #fff2b4; text-align: left; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); cursor: grab; touch-action: none; user-select: none; }
.camp-native-ground-drop.stack-medium { box-shadow: -4px 4px 0 -1px #334037, 0 12px 25px #0008, 0 0 18px #e0cd641f; }
.camp-native-ground-drop.stack-many { box-shadow: -4px 4px 0 -1px #46503b, -8px 8px 0 -2px #26342d, 0 14px 28px #0009, 0 0 20px #e0cd6430; }
.camp-native-ground-drop.is-new-output { animation: camp-result-land .4s cubic-bezier(.2, .9, .3, 1.2) both; }
.camp-native-ground-drop.claiming { pointer-events: none; animation: camp-result-claim .24s ease-in forwards; }
.camp-native-object.is-physics-dragging, .camp-native-orb.is-physics-dragging, .camp-native-ground-drop.is-physics-dragging { z-index: 35; cursor: grabbing; filter: brightness(1.13); transition: none; }
.camp-native-radial-palette { position: absolute; z-index: 30; left: var(--native-anchor-x); top: var(--native-anchor-y); width: 0; height: 0; color: #f4f1cd; pointer-events: none; }
.camp-native-radial-palette button { pointer-events: auto; cursor: pointer; }
.camp-native-radial-tether { position: absolute; z-index: -2; left: 0; top: 0; width: 60px; height: 1px; background: linear-gradient(90deg, #d8d68e99, #d8d68e12); transform-origin: left center; pointer-events: none; }
.camp-native-radial-center { position: absolute; left: 0; top: 0; width: 238px; min-height: 142px; display: grid; gap: 5px; padding: 9px; border: 1px solid #d2cc8170; border-radius: 50% 50% 16px 16px / 22px 22px 16px 16px; background: linear-gradient(150deg, #26382df5, #101c18f8); box-shadow: 0 20px 55px #000b, inset 0 1px #fff1ba15; backdrop-filter: blur(10px); transform: translate(-50%, -50%); pointer-events: auto; }
.camp-native-radial-center header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; cursor: grab; touch-action: none; user-select: none; }
.camp-native-radial-center header > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d3cc7c70; border-radius: 11px; background: #3b4c37; color: #eee49a; font-weight: 900; }
.camp-native-radial-center header div { min-width: 0; display: grid; gap: 1px; }.camp-native-radial-center header strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-radial-center header small { color: #a5b2a5; font-size: 7px; }
.camp-native-pin { min-width: 37px; min-height: 27px; padding: 3px 5px; border: 1px solid #999d6c52; border-radius: 8px; background: #1a2a21; color: #aeb8a8; font-size: 7px; touch-action: manipulation; }
.camp-native-pin.is-active { border-color: #e0d47d9c; background: #51543a; color: #fff0a9; box-shadow: 0 0 12px #d6cc7630; }
.camp-native-radial-progress { display: grid; gap: 3px; }.camp-native-radial-progress > span { display: flex; justify-content: space-between; gap: 6px; font-size: 7px; }.camp-native-radial-progress b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-radial-progress em { color: #d9ce7d; font-style: normal; }
.camp-native-radial-progress > i { height: 4px; overflow: hidden; border-radius: 5px; background: #07100c; }.camp-native-radial-progress > i b { display: block; height: 100%; background: linear-gradient(90deg, #6bd78d, #d9d77d); }
.camp-native-radial-facts { display: flex; justify-content: space-between; gap: 4px; color: #aab6a9; font-size: 7px; }.camp-native-radial-center > em { color: #f0b278; font-size: 7px; font-style: normal; text-align: center; }
.camp-native-radial-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.camp-native-radial-tools button { min-width: 0; min-height: 34px; display: grid; gap: 1px; padding: 4px; border: 1px solid #aaa86a45; border-radius: 8px; background: #1b2b21; color: #e9e2aa; }.camp-native-radial-tools b, .camp-native-radial-tools small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-radial-tools small { color: #91a094; font-size: 6px; }.camp-native-radial-tools button:disabled { opacity: .38; }
.camp-native-radial-tool-editor { min-width: 0; min-height: 34px; display: grid; grid-template-columns: 24px minmax(58px, 1fr) repeat(4, 27px); gap: 3px; align-items: stretch; }
.camp-native-radial-tool-editor > span { min-width: 0; display: grid; align-content: center; gap: 1px; padding: 2px 4px; border: 1px solid #aaa86a2d; border-radius: 7px; background: #0f1c16; }.camp-native-radial-tool-editor b, .camp-native-radial-tool-editor small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-radial-tool-editor b { color: #eee4a5; font-size: 7px; }.camp-native-radial-tool-editor small { color: #91a094; font-size: 5px; }
.camp-native-radial-tool-editor button { min-width: 0; padding: 0 3px; border: 1px solid #a2a77245; border-radius: 7px; background: #26382b; color: #deddb7; font-size: 7px; }.camp-native-radial-tool-editor button.is-primary { border-color: #d7ce7b80; background: #50633d; color: #fff1aa; }.camp-native-radial-tool-editor button:disabled { opacity: .32; }
.camp-native-radial-recipe { position: absolute; left: 0; top: 0; z-index: 3; width: 84px; min-height: 55px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 4px; align-content: center; padding: 5px; border: 1px solid #c3bc7160; border-radius: 50% 10px 10px 50%; background: #19281ff2; box-shadow: 0 9px 23px #0008; color: #eee9bd; text-align: left; transform: translate(calc(-50% + var(--radial-x)), calc(-50% + var(--radial-y))); }
.camp-native-radial-recipe > span { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #46533a; color: #e6da88; font-size: 8px; font-weight: 900; }.camp-native-radial-recipe b, .camp-native-radial-recipe small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-radial-recipe b { font-size: 7px; }.camp-native-radial-recipe small { color: #98a496; font-size: 6px; }.camp-native-radial-recipe.status-ready { border-color: #7ed596; box-shadow: 0 9px 23px #0008, 0 0 15px #62d98624; }.camp-native-radial-recipe.is-locked { opacity: .48; filter: grayscale(.75); }
.camp-native-radial-tabs { position: absolute; left: 0; top: 78px; z-index: 6; max-width: 330px; display: flex; gap: 3px; padding: 4px; overflow-x: auto; border: 1px solid #a8aa704a; border-radius: 10px; background: #101d18ed; box-shadow: 0 8px 20px #0008; transform: translateX(-50%); pointer-events: auto; scrollbar-width: none; }.camp-native-radial-tabs button { flex: 0 0 auto; display: flex; gap: 3px; align-items: center; min-height: 25px; padding: 3px 6px; border: 1px solid transparent; border-radius: 7px; background: #26362b; color: #aeb9ab; font-size: 7px; }.camp-native-radial-tabs button.is-active { border-color: #d6cc78; background: #455139; color: #fff2ac; }.camp-native-radial-tabs small { color: #c7b96e; }
.camp-native-radial-pages { position: absolute; z-index: 7; left: 0; top: 111px; display: flex; gap: 4px; align-items: center; padding: 3px; border-radius: 8px; background: #101d18e8; transform: translateX(-50%); pointer-events: auto; }.camp-native-radial-pages button { width: 24px; height: 22px; padding: 0; border: 1px solid #999d6c4a; border-radius: 6px; background: #26362b; color: #e7e2b5; }.camp-native-radial-pages span { font-size: 7px; }.camp-native-radial-pages button:disabled { opacity: .3; }
.camp-native-radial-hint { position: absolute; left: 0; top: 142px; width: 250px; color: #8f9e91; font-size: 6px; text-align: center; transform: translateX(-50%); pointer-events: none; }
.camp-native-activity-palette { position: absolute; z-index: 31; left: var(--native-anchor-x); top: var(--native-anchor-y); width: min(280px, 72vw); display: grid; gap: 4px; padding: 8px; border: 1px solid #c3b97061; border-radius: 13px; background: #14231dec; box-shadow: 0 18px 45px #000a; transform: translate(-50%, -50%); backdrop-filter: blur(9px); }.camp-native-activity-palette header { display: flex; justify-content: space-between; align-items: center; }.camp-native-activity-palette header strong { font-size: 9px; }.camp-native-activity-palette header button { width: 24px; height: 24px; padding: 0; border: 1px solid #96996b47; border-radius: 50%; background: #26362b; color: #ddd9ae; }.camp-native-activity-palette > button { display: flex; gap: 6px; align-items: center; min-height: 28px; padding: 5px 7px; border: 1px solid #929a6a32; border-radius: 8px; background: #1c2d23; color: #cbd2bf; font-size: 7px; text-align: left; }.camp-native-activity-palette > button i { width: 7px; height: 7px; border-radius: 50%; background: #d3b765; }.camp-native-activity-palette > button.is-running i { background: #75de94; }.camp-native-activity-palette > button.is-battle i { background: #ae8ef4; }.camp-native-activity-palette p { margin: 4px; color: #9ba89d; font-size: 8px; }
.camp-native-ground-drop > span { grid-row: 1 / 3; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; background: #816d35; font-size: 8px; font-weight: 900; }
.camp-native-ground-drop > span .camp-icon { width: 15px; height: 15px; }
.camp-native-ground-drop strong, .camp-native-ground-drop small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-ground-drop strong { font-size: 9px; }.camp-native-ground-drop small { color: #c9c1a2; font-size: 7px; }
.camp-native-ground-count { position: absolute; right: 4px; bottom: 2px; min-width: 19px; padding: 1px 3px; border: 1px solid #f2df8c70; border-radius: 7px; background: #101b17e8; color: #fff0a0; font-size: 8px; line-height: 1.2; text-align: center; }
.camp-native-ground-drop.grade-high { border-color: #c8a0ff; box-shadow: 0 12px 25px #0008, 0 0 20px #ad7fff42; }
.camp-native-ground-drop.grade-high.stack-medium { box-shadow: -4px 4px 0 -1px #514267, 0 12px 25px #0008, 0 0 20px #ad7fff42; }
.camp-native-ground-drop.grade-high.stack-many { box-shadow: -4px 4px 0 -1px #615075, -8px 8px 0 -2px #352c43, 0 14px 28px #0009, 0 0 22px #ad7fff55; }
.camp-native-facility-card { position: absolute; left: var(--native-x); top: var(--native-y); z-index: 38; width: 94px; min-height: 70px; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 6px; align-items: center; padding: 7px 7px 11px; border: 1px solid #e2d77d9c; border-radius: 13px 13px 8px 8px; background: linear-gradient(145deg, #667052f5, #172820fa); box-shadow: 0 13px 27px #0009, 0 0 19px #d8d47b2b; color: #fff0a9; text-align: left; transform: translate(-50%, -50%) scale(var(--camp-zoom, 1)); cursor: grab; touch-action: none; user-select: none; }
.camp-native-facility-card.stack-medium { box-shadow: -4px 4px 0 -1px #45513e, 0 13px 27px #0009, 0 0 19px #d8d47b2b; }
.camp-native-facility-card.stack-many { box-shadow: -4px 4px 0 -1px #596047, -8px 8px 0 -2px #303c34, 0 15px 30px #000a, 0 0 21px #d8d47b3b; }
.camp-native-facility-card > span { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #e6dc8b69; border-radius: 9px; background: #233b30; color: #f1e6a1; }
.camp-native-facility-card strong, .camp-native-facility-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-facility-card strong { font-size: 11px; }.camp-native-facility-card small { color: #c2cbb8; font-size: 9px; }
.camp-native-facility-card > b { position: absolute; right: 5px; bottom: 3px; min-width: 22px; padding: 1px 4px; border: 1px solid #f5e99b78; border-radius: 8px; background: #101b17e8; color: #fff3a9; font-size: 9px; text-align: center; }
.camp-native-facility-card:hover, .camp-native-facility-card:focus-visible { border-color: #fff2a3; filter: brightness(1.14); transform: translate(-50%, calc(-50% - 3px)) scale(var(--camp-zoom, 1)); }
.camp-native-facility-card.is-physics-dragging { z-index: 55; filter: brightness(1.18); cursor: grabbing; transition: none; }
.camp-native-facility-warehouse-palette { position: absolute; z-index: 45; left: var(--native-anchor-x); top: var(--native-anchor-y); width: min(360px, 78vw); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 11px; border: 1px solid #d9d17a73; border-radius: 12px; background: #13231df2; box-shadow: 0 16px 42px #000a; color: #e9e5bd; transform: translate(-50%, 68px); pointer-events: auto; }
.camp-native-facility-warehouse-palette strong { font-size: 12px; }.camp-native-facility-warehouse-palette small { grid-column: 1; color: #aebaa9; font-size: 10px; line-height: 1.45; }
.camp-native-facility-warehouse-palette button { grid-column: 2; grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #b7ba7c5c; border-radius: 50%; background: #26372c; color: #e6e2b4; cursor: pointer; }
.camp-native-world-tools { position: absolute; z-index: 32; right: 15px; bottom: 14px; display: flex; gap: 5px; padding: 5px; border: 1px solid #b9bd8060; border-radius: 14px; background: #14221be3; box-shadow: 0 10px 28px #0007; backdrop-filter: blur(8px); }
.camp-native-world-tools button { position: relative; min-width: 34px; height: 34px; padding: 0 7px; border: 1px solid transparent; border-radius: 9px; background: #25362b; color: #e8e5bd; cursor: pointer; }
.camp-native-world-tools button:hover, .camp-native-world-tools button:focus-visible { border-color: #d9dfa18a; background: #344b39; }.camp-native-world-tools button:disabled { opacity: .38; }
.camp-native-world-tools small { position: absolute; top: -7px; right: -5px; min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #d6b45d; color: #182016; font-size: 8px; font-weight: 900; }
.camp-native-world-state { position: absolute; z-index: 31; left: 15px; bottom: 14px; display: flex; gap: 10px; padding: 8px 10px; border: 1px solid #a9b77c42; border-radius: 12px; background: #101d18d9; box-shadow: 0 10px 28px #0006; backdrop-filter: blur(8px); color: #bdc8b7; font-size: 9px; }
.camp-native-world-state span { display: flex; align-items: center; gap: 5px; }.camp-native-world-state .camp-icon { width: 14px; height: 14px; color: #d9d690; }
.camp-native-world-state span.is-idle-full { color: #ffc27e; }
.camp-native-world-state button { border: 0; background: transparent; color: #ffbdba; font-size: 9px; text-decoration: underline; }
.camp-native-popover { position: absolute; z-index: 28; left: var(--native-anchor-x); top: var(--native-anchor-y); width: min(365px, 34vw); max-height: min(620px, calc(100vh - 96px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid #c7c88b73; border-radius: 20px 10px 18px 10px; background: linear-gradient(155deg, #233329f5, #101d19fa); box-shadow: 0 24px 70px #000b, inset 0 1px #f1edbd14; backdrop-filter: blur(12px); }
.camp-native-popover.opens-east { transform: translate(68px, -50%); }.camp-native-popover.opens-west { transform: translate(calc(-100% - 68px), -50%); }
.camp-native-tether { position: absolute; top: 50%; width: 70px; height: 1px; background: linear-gradient(90deg, #d6d69a, #d6d69a20); transform-origin: center; pointer-events: none; }
.camp-native-popover.opens-east .camp-native-tether { right: 100%; }.camp-native-popover.opens-west .camp-native-tether { left: 100%; rotate: 180deg; }
.camp-native-tether::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #e5e6a5; box-shadow: 0 0 12px #e6e5a2; }
.camp-native-popover-head, .camp-native-window-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid #c6c58a24; }
.camp-native-popover-head h2, .camp-native-window-head h2 { margin: 1px 0 2px; color: #faf4cf; font-size: 18px; }.camp-native-popover-head p, .camp-native-window-head p { margin: 0; color: #9fad9f; font-size: 9px; }.camp-native-popover-head small, .camp-native-window-head small { color: #d3bd73; font-size: 8px; letter-spacing: .12em; }
.camp-native-popover-glyph, .camp-native-window-glyph { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #d4ce8b66; border-radius: 12px; background: #354737; color: #f1e7a8; font-weight: 900; }
.camp-native-icon-action { width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid #aeb38242; border-radius: 50%; background: #18251e; color: #cdd5c9; cursor: pointer; }
.camp-native-popover-body { min-height: 0; display: grid; gap: 9px; align-content: start; overflow: auto; padding: 11px 12px; scrollbar-width: thin; }
.camp-native-status-line { display: flex; align-items: center; gap: 7px; color: #aebaad; font-size: 9px; }.camp-native-status-line span:first-child { display: flex; align-items: center; gap: 5px; margin-right: auto; }.camp-native-status-line i { width: 7px; height: 7px; border-radius: 50%; background: #7b8b7d; }.camp-native-status-line .is-working i, .camp-native-status-line .is-autonomy i, .camp-native-status-line .is-overdrive i { background: #7ce19b; box-shadow: 0 0 8px #6cdf91; }
.camp-native-progress { display: grid; gap: 5px; }.camp-native-progress > span { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; }.camp-native-progress em { color: #d6d98c; font-style: normal; }.camp-native-progress > i { height: 5px; overflow: hidden; border-radius: 8px; background: #050c09; }.camp-native-progress > i b { display: block; height: 100%; background: linear-gradient(90deg, #68cb88, #e2db7b); }
.camp-native-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; }.camp-native-facts div { display: grid; gap: 2px; padding: 7px; border: 1px solid #9aa56e25; border-radius: 8px; background: #0e1a15a3; }.camp-native-facts dt { color: #8e9e91; font-size: 8px; }.camp-native-facts dd { margin: 0; overflow: hidden; color: #e7e5c8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-disclosure { border: 1px solid #a6ad762b; border-radius: 9px; background: #111e18a6; }.camp-native-disclosure summary { padding: 8px 9px; color: #d6d6aa; font-size: 9px; cursor: pointer; }.camp-native-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0 7px 7px; }.camp-native-choice { min-width: 0; display: grid; gap: 2px; padding: 7px; border: 1px solid #93a26d2d; border-radius: 7px; background: #18281f; color: #e8e8ce; text-align: left; }.camp-native-choice span, .camp-native-choice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-choice span { font-size: 9px; }.camp-native-choice small { color: #8fa394; font-size: 7px; }.camp-native-choice.is-active { border-color: #86dc9b; background: #254832; }
.camp-native-fuel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.camp-native-fuel-row button { display: grid; justify-items: center; gap: 1px; min-height: 55px; padding: 5px; border: 1px solid #a2aa7332; border-radius: 9px; background: #18261f; color: #dcdcc2; }.camp-native-fuel-row button > span { color: #d9c376; font-size: 14px; }.camp-native-fuel-row button b { font-size: 8px; }.camp-native-fuel-row button small { color: #8fa096; font-size: 7px; }
.camp-native-popover-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px 12px 12px; border-top: 1px solid #c6c58a20; }.camp-native-popover-actions > :only-child { grid-column: 1 / -1; }
.camp-native-popover-actions button, .camp-native-window-actions button { min-height: 36px; padding: 7px 10px; border: 1px solid #9aa8784a; border-radius: 9px; background: #293b2e; color: #e8e6c9; cursor: pointer; }.camp-native-popover-actions button.is-primary, .camp-native-window-actions button.is-primary { border-color: #d7cf7f80; background: linear-gradient(135deg, #65733e, #3e593c); color: #fff4bd; }
.camp-native-character-state { display: grid; gap: 7px; }.camp-native-character-state > span { display: flex; align-items: center; gap: 5px; color: #d8ddc9; font-size: 10px; }.camp-native-character-state i { width: 7px; height: 7px; border-radius: 50%; background: #7ce39b; }.camp-native-character-state p, .camp-native-object-copy { margin: 0; color: #a8b5a8; font-size: 9px; line-height: 1.55; }
.camp-native-assignment { display: grid; gap: 6px; }.camp-native-assignment > small { color: #d2bf7a; font-size: 8px; }.camp-native-assignment > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.camp-native-assignment button { min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 3px; border: 1px solid #9da87530; border-radius: 8px; background: #16251d; color: #e5e5ca; }.camp-native-assignment button span { color: #e8d98b; }.camp-native-assignment button b { max-width: 100%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-assignment button small { color: #8d9c91; font-size: 7px; }
.camp-native-activity-list { display: grid; gap: 5px; }.camp-native-activity-list button { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px; border: 1px solid #9ca77227; border-radius: 8px; background: #15231c; color: #e1e2c9; text-align: left; }.camp-native-activity-list button i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #839084; }.camp-native-activity-list button.is-running i { background: #78df98; }.camp-native-activity-list button.is-battle i { background: #ad92ff; }.camp-native-activity-list span { font-size: 9px; line-height: 1.4; }
.camp-native-empty-note { margin: 0; padding: 9px; border: 1px dashed #8d987039; border-radius: 8px; color: #94a397; font-size: 9px; text-align: center; }
.camp-native-window-field { position: fixed; z-index: 60; inset: 28px 0 0; display: grid; place-items: center; padding: 5vh 5vw; background: #07110ea8; backdrop-filter: blur(3px); }
.camp-native-window-tether { position: absolute; left: var(--native-anchor-x); top: var(--native-anchor-y); width: min(26vw, 300px); height: 2px; background: linear-gradient(90deg, #e4df9299, transparent); transform-origin: left; }.camp-native-window-tether.opens-west { rotate: 180deg; }
.camp-native-window { width: min(1040px, 88vw); max-height: min(760px, 86vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #c9c98a73; border-radius: 24px 10px 21px 10px; background: linear-gradient(150deg, #26372bf9, #101d18fc); box-shadow: 0 30px 100px #000d, inset 0 1px #f4edbd14; }
.camp-native-window-body { min-height: 0; overflow: auto; padding: 14px; scrollbar-width: thin; }.camp-native-window-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 10px 14px; border-top: 1px solid #c6c58a20; }
.camp-candidate-mode.camp-native-window-open { overflow: hidden; }

@media (max-width: 680px) {
  .camp-native-ground.is-grid-mode::after { background-size: 46px 46px; }
  .camp-native-radial-center { width: 176px; min-height: 118px; padding: 7px; }.camp-native-radial-center header { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px; }.camp-native-radial-center header > span { width: 28px; height: 28px; }.camp-native-pin { min-width: 30px; padding: 2px 3px; font-size: 6px; }.camp-native-radial-tools button { min-height: 29px; }.camp-native-radial-facts span:nth-child(3) { display: none; }
  .camp-native-radial-tool-editor { grid-template-columns: 18px minmax(36px, 1fr) repeat(4, 21px); gap: 2px; }.camp-native-radial-tool-editor button { font-size: 6px; }
  .camp-native-radial-recipe { width: 64px; min-height: 45px; grid-template-columns: 19px minmax(0, 1fr); padding: 3px; }.camp-native-radial-recipe > span { width: 19px; height: 19px; }.camp-native-radial-recipe small { font-size: 5px; }.camp-native-radial-close { left: 80px; top: -60px; }.camp-native-radial-tabs { top: 64px; max-width: 230px; }.camp-native-radial-pages { top: 96px; }.camp-native-radial-hint { top: 126px; width: 210px; }
  .camp-native-corner-hud { top: 34px; right: 7px; left: 7px; }
  .camp-native-seal { grid-template-columns: 29px auto; padding: 5px 8px 5px 5px; }.camp-native-seal > span { width: 29px; height: 29px; }.camp-native-seal strong { font-size: 11px; }
  .camp-native-system-actions > button, .camp-native-settings > button { width: 32px; height: 32px; }
  .camp-native-ground-plane { left: -22%; right: -22%; top: 4%; bottom: -5%; }
  .camp-native-world-state { left: 7px; bottom: 7px; gap: 7px; padding: 6px 7px; }.camp-native-world-tools { right: 7px; bottom: 7px; gap: 3px; padding: 4px; }.camp-native-world-tools button { min-width: 30px; height: 30px; padding: 0 5px; }
  .camp-native-facility { width: 88px; min-height: 88px; }.camp-native-facility-art { width: 50px; height: 42px; }.camp-native-facility-art::after { width: 59px; }.camp-native-facility-art i { width: 26px; height: 26px; font-size: 10px; }.camp-native-object-label { max-width: 88px; padding: 3px 5px; }.camp-native-object-label strong { font-size: 9px; }.camp-native-object-label small { max-width: 78px; font-size: 7px; }.camp-native-object-progress { width: 61px; }
  .camp-native-landmark { width: 76px; min-height: 72px; }.camp-native-landmark-art { width: 39px; height: 39px; font-size: 11px; }.camp-native-landmark strong, .camp-native-landmark small { max-width: 76px; }.camp-native-landmark strong { font-size: 8px; }.camp-native-landmark small { display: none; }
  .camp-native-character { width: 58px; }.camp-native-character > span { width: 31px; height: 31px; font-size: 10px; }.camp-native-character > strong { font-size: 8px; }.camp-native-character > small { display: none; }
  .camp-native-orb { width: 120px; height: 104px; }.camp-native-orb canvas { height: 78px; }.camp-native-orb > button { padding-bottom: 7px; }.camp-native-orb > button span { display: none; }.camp-native-orb > button strong { max-width: 104px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .camp-native-activity { width: 56px; }.camp-native-activity > span { width: 34px; height: 27px; font-size: 10px; }.camp-native-activity strong { font-size: 8px; }.camp-native-activity small { display: none; }
  .camp-native-ground-drop { width: 58px; grid-template-columns: 17px minmax(0, 1fr); padding: 3px; }.camp-native-ground-drop > span { width: 17px; height: 17px; }.camp-native-ground-drop strong { font-size: 7px; }
  .camp-native-popover { position: fixed; z-index: 52; right: 7px; bottom: 47px; left: 7px; top: auto; width: auto; max-height: 46vh; border-radius: 18px 18px 8px 8px; transform: none !important; }
  .camp-native-tether { left: var(--native-anchor-x) !important; right: auto !important; top: auto; bottom: 100%; width: 1px; height: max(18px, calc((100vh - var(--native-anchor-y)) - 48vh)); background: linear-gradient(#e5e29aa0, transparent); rotate: 0 !important; }
  .camp-native-tether::before { left: -3px; top: -3px; }
  .camp-native-popover-head { padding: 9px; }.camp-native-popover-glyph { width: 32px; height: 32px; }.camp-native-popover-head h2 { font-size: 14px; }.camp-native-popover-body { padding: 8px 9px; }.camp-native-popover-actions { padding: 8px 9px 9px; }
  .camp-native-window-field { padding: 12vh 7px 48px; place-items: end center; background: #07110e8f; }
  .camp-native-window-tether { left: var(--native-anchor-x); top: var(--native-anchor-y); width: 1px; height: 20vh; background: linear-gradient(#e4df9299, transparent); rotate: 0 !important; }
  .camp-native-window { width: 100%; max-height: 74vh; border-radius: 18px 18px 8px 8px; }.camp-native-window-head { padding: 9px; }.camp-native-window-glyph { width: 32px; height: 32px; }.camp-native-window-head h2 { font-size: 14px; }.camp-native-window-body { padding: 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  .camp-native-facility.is-running .camp-native-facility-art b { animation: camp-native-breathe 1.6s ease-in-out infinite; }
  .camp-native-orb.is-active { animation: camp-native-orb-glow 2.4s ease-in-out infinite; }
}
@keyframes camp-native-breathe { 50% { scale: 1.35; opacity: .72; } }
@keyframes camp-native-orb-glow { 50% { box-shadow: inset 0 0 34px #8d68ff75, 0 0 44px #8a64ff52, 0 18px 28px #0008; } }
@keyframes camp-native-growth-pulse { 0% { filter: brightness(1); transform: scale(1); } 35% { filter: brightness(1.55) drop-shadow(0 0 22px #93efa6); transform: scale(1.14); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes camp-native-growth-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 72% { opacity: 1; transform: translate(-50%, -8px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(.95); } }

/* Scene-object windows use their own layout language; no legacy shell/panel/task classes. */
.camp-native-popover.opens-east.lifts-south { transform: translate(68px, -18%); }
.camp-native-popover.opens-east.lifts-north { transform: translate(68px, -82%); }
.camp-native-popover.opens-west.lifts-south { transform: translate(calc(-100% - 68px), -18%); }
.camp-native-popover.opens-west.lifts-north { transform: translate(calc(-100% - 68px), -82%); }
.camp-native-window button, .camp-native-window input, .camp-native-window select,
.camp-native-popover button, .camp-native-popover input, .camp-native-popover select { font: inherit; }
.camp-native-window button:not(.camp-native-icon-action), .camp-native-popover button:not(.camp-native-icon-action) { border: 1px solid #a1ad793d; border-radius: 8px; background: #1b2b22; color: #e6e4c7; cursor: pointer; }
.camp-native-window button:hover:not(:disabled), .camp-native-window button:focus-visible:not(:disabled), .camp-native-popover button:hover:not(:disabled), .camp-native-popover button:focus-visible:not(:disabled) { border-color: #d4dc9280; background: #2b4332; }
.camp-native-window button:disabled, .camp-native-popover button:disabled { opacity: .36; cursor: not-allowed; }
.camp-native-section-block { min-width: 0; display: grid; gap: 9px; align-content: start; padding: 11px; border: 1px solid #a7af7930; border-radius: 14px 7px 12px 7px; background: #111f19c4; }
.camp-native-section-block > header { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 9px; border-bottom: 1px solid #b9bc8021; padding-bottom: 8px; }
.camp-native-section-block > header > div { min-width: 0; display: grid; gap: 2px; }.camp-native-section-block > header strong { color: #eee9bf; font-size: 12px; }.camp-native-section-block > header small { color: #94a397; font-size: 8px; }.camp-native-section-block > header button { min-height: 28px; padding: 4px 8px; }
.camp-native-wide-action { width: 100%; min-height: 34px; padding: 7px 10px; }
.camp-native-feature-sheet, .camp-native-warning-sheet { display: grid; gap: 7px; padding: 12px; border: 1px solid #a5ae7638; border-radius: 13px 6px 11px 6px; background: linear-gradient(145deg, #1d3024, #111e18); }
.camp-native-feature-sheet > span { color: #d3bb70; font-size: 8px; letter-spacing: .08em; }.camp-native-feature-sheet h3 { margin: 0; color: #f0edc9; font-size: 15px; }.camp-native-feature-sheet p, .camp-native-warning-sheet p { margin: 0; color: #aab6aa; font-size: 10px; line-height: 1.6; }.camp-native-feature-sheet button { min-height: 32px; padding: 6px 9px; justify-self: start; }
.camp-native-production-readiness-meter { display: grid; gap: 3px; padding: 8px 9px; border: 1px solid #d5c5774f; border-radius: 10px; background: #0d1813a8; }.camp-native-production-readiness-meter b { color: #eee5a6; font-size: 11px; }.camp-native-production-readiness-meter small, .camp-native-production-readiness > small { color: #9eada0; font-size: 9px; line-height: 1.5; }
.camp-native-warning-sheet { border-color: #b86d5a75; background: #35201ccc; }.camp-native-warning-sheet b { color: #ffc5b8; font-size: 11px; }
.camp-native-production-layout { min-height: 0; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); gap: 11px; }.camp-native-production-layout > aside { min-height: 0; display: grid; gap: 9px; align-content: start; }
.camp-native-garrison-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.camp-native-garrison-strip > span { display: grid; justify-items: center; gap: 3px; padding: 6px 3px; border: 1px dashed #929d703f; border-radius: 9px; color: #89988c; }.camp-native-garrison-strip > span.is-filled { border-style: solid; color: #e3e1c2; background: #1c3023; }.camp-native-garrison-strip b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #304938; color: #dfd98e; }.camp-native-garrison-strip small { max-width: 100%; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-running-order { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px 8px 12px; border: 1px solid #5aa97360; border-radius: 9px; background: #163020; }.camp-native-running-order div { display: grid; gap: 2px; }.camp-native-running-order b { font-size: 9px; }.camp-native-running-order small { color: #99aa9d; font-size: 7px; }.camp-native-running-order button { width: 29px; height: 29px; padding: 0; }.camp-native-running-order > i { position: absolute; right: 7px; bottom: 5px; left: 7px; height: 3px; overflow: hidden; border-radius: 3px; background: #06100b; }.camp-native-running-order > i b { display: block; height: 100%; background: #78db93; }
.camp-native-queue-list { display: grid; gap: 4px; }.camp-native-queue-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 6px; border-radius: 7px; background: #18271f; }.camp-native-queue-list article > span { display: grid; }.camp-native-queue-list article b { font-size: 8px; }.camp-native-queue-list article small { color: #92a094; font-size: 7px; }.camp-native-queue-list article > div { display: flex; gap: 2px; }.camp-native-queue-list button { width: 24px; height: 24px; padding: 0; }
.camp-native-project-browser { min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr); }.camp-native-filter-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 5px; }.camp-native-filter-line input, .camp-native-filter-line select, .camp-native-section-block input, .camp-native-core-board select { min-width: 0; min-height: 31px; padding: 5px 7px; border: 1px solid #a1ad793b; border-radius: 7px; outline: 0; background: #09140f; color: #e0e1c4; }.camp-native-filter-line button { padding: 5px 8px; }
.camp-native-filter-chips { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }.camp-native-filter-chips button { flex: 0 0 auto; min-height: 27px; padding: 4px 8px; }.camp-native-filter-chips button.is-active { border-color: #7edb98; background: #23472f; }
.camp-native-project-groups { min-height: 0; display: grid; gap: 6px; align-content: start; overflow: auto; padding-right: 3px; scrollbar-width: thin; }.camp-native-project-groups > section { border: 1px solid #939d6b28; border-radius: 9px; overflow: hidden; }.camp-native-project-group-head { width: 100%; min-height: 31px; display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border: 0 !important; border-radius: 0 !important; background: #1b2c22 !important; text-align: left; }.camp-native-project-group-head small { color: #8fa094; }
.camp-native-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; }.camp-native-project-grid > button { min-width: 0; min-height: 63px; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px; align-content: center; padding: 6px; text-align: left; }.camp-native-project-grid > button > span { grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: #354734; color: #e2da89; }.camp-native-project-grid b, .camp-native-project-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-project-grid b { font-size: 8px; }.camp-native-project-grid small { color: #93a296; font-size: 7px; }.camp-native-project-grid .is-locked { opacity: .52; }
.camp-native-party-layout, .camp-native-character-layout, .camp-native-warehouse-layout, .camp-native-report-layout, .camp-native-core-layout { min-height: 0; display: grid; grid-template-columns: minmax(150px, .46fr) minmax(0, 1.54fr); gap: 10px; }.camp-native-party-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }.camp-native-core-layout { grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); }
.camp-native-party-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.camp-native-party-slots > button { min-width: 0; min-height: 130px; display: grid; justify-items: center; align-content: center; gap: 5px; padding: 8px; }.camp-native-party-slots > button > span { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid #d4cd8c; border-radius: 50%; background: #35483a; color: #e8dd91; font-size: 18px; font-weight: 900; }.camp-native-party-slots b, .camp-native-party-slots small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-party-slots b { font-size: 10px; }.camp-native-party-slots small { color: #97a599; font-size: 8px; }
.camp-native-roster-grid, .camp-native-garrison-roster, .camp-native-supply-list, .camp-native-equipment-list, .camp-native-source-routes, .camp-native-departure-list, .camp-native-report-characters, .camp-native-mod-inventory { display: grid; gap: 5px; align-content: start; }.camp-native-roster-grid article, .camp-native-garrison-roster > button, .camp-native-supply-list > button, .camp-native-equipment-list article, .camp-native-source-routes article, .camp-native-departure-list article, .camp-native-report-characters article, .camp-native-mod-inventory article { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px; border: 1px solid #9aa5742c; border-radius: 9px; background: #17261e; color: #e2e2c6; text-align: left; }.camp-native-roster-grid article > span, .camp-native-garrison-roster > button > span, .camp-native-supply-list > button > span, .camp-native-equipment-list article > span, .camp-native-source-routes article > span, .camp-native-departure-list article > span, .camp-native-report-characters article > span, .camp-native-mod-inventory article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #334938; color: #e4dd91; font-weight: 900; }.camp-native-roster-grid article > div, .camp-native-garrison-roster > button > div, .camp-native-supply-list > button > div, .camp-native-equipment-list article > div, .camp-native-source-routes article > div, .camp-native-departure-list article > div, .camp-native-report-characters article > div, .camp-native-mod-inventory article > div { min-width: 0; display: grid; gap: 2px; }.camp-native-roster-grid b, .camp-native-garrison-roster b, .camp-native-supply-list b, .camp-native-equipment-list b, .camp-native-source-routes b, .camp-native-departure-list b, .camp-native-report-characters b, .camp-native-mod-inventory b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-roster-grid small, .camp-native-garrison-roster small, .camp-native-supply-list small, .camp-native-equipment-list small, .camp-native-source-routes small, .camp-native-departure-list small, .camp-native-report-characters small, .camp-native-mod-inventory small { overflow: hidden; color: #92a196; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-roster-grid button, .camp-native-garrison-roster > button em, .camp-native-equipment-list button, .camp-native-source-routes button, .camp-native-mod-inventory button { min-height: 28px; padding: 4px 7px; }.camp-native-roster-grid article.is-assigned { border-color: #76ca8c66; }.camp-native-roster-grid article.is-disabled { opacity: .45; }
.camp-native-roster-mini { display: grid; gap: 5px; }.camp-native-roster-mini > button { display: grid; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 6px; align-items: center; padding: 6px; text-align: left; }.camp-native-roster-mini span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #324938; color: #dfd78d; font-weight: 900; }.camp-native-roster-mini b, .camp-native-roster-mini small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-roster-mini b { font-size: 8px; }.camp-native-roster-mini small { color: #8f9e92; font-size: 7px; }.camp-native-roster-mini .is-active { border-color: #d6d686; background: #30472f; }
.camp-native-character-layout > .camp-native-section-block > header nav { display: flex; gap: 3px; }.camp-native-character-layout > .camp-native-section-block > header nav button { width: 28px; height: 28px; padding: 0; }.camp-native-character-layout > .camp-native-section-block > header nav .is-active { border-color: #d6d682; background: #425238; color: #fff0a9; }
.camp-native-character-overview { min-height: 360px; display: grid; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; align-items: center; padding: 20px; }.camp-native-character-portrait { grid-row: 1 / 3; width: 170px; height: 250px; display: grid; place-items: center; border: 1px solid #d0c88766; border-radius: 48% 48% 25% 25%; background: radial-gradient(circle at 50% 30%, #d4bc7855, transparent 22%), linear-gradient(160deg, #496050, #1b2d24); box-shadow: inset 0 0 40px #050b08, 0 16px 34px #0008; color: #e8df9a; font-size: 72px; font-weight: 900; }.camp-native-character-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }.camp-native-character-metrics span, .camp-native-order-facts > span, .camp-native-report-summary > span { display: grid; gap: 2px; padding: 9px; border: 1px solid #9ca5732c; border-radius: 9px; background: #101d17; }.camp-native-character-metrics small, .camp-native-order-facts small, .camp-native-report-summary small { color: #8e9d91; font-size: 8px; }.camp-native-character-metrics b, .camp-native-order-facts b, .camp-native-report-summary b { font-size: 10px; }.camp-native-character-overview > p { margin: 0; color: #a6b3a6; font-size: 10px; line-height: 1.7; }
.camp-native-slot-list, .camp-native-skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.camp-native-slot-list > button, .camp-native-skill-grid article { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 67px; padding: 8px; border: 1px solid #9fa87431; border-radius: 10px; background: #17261e; color: #e5e3c4; text-align: left; }.camp-native-slot-list > button > span, .camp-native-skill-grid article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #334838; color: #e3da8e; font-weight: 900; }.camp-native-slot-list div, .camp-native-skill-grid article > div { min-width: 0; display: grid; gap: 2px; }.camp-native-slot-list b, .camp-native-skill-grid b { font-size: 9px; }.camp-native-slot-list small, .camp-native-skill-grid small { overflow: hidden; color: #91a095; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-skill-grid article.is-active { border-color: #6fd08a; background: #1b3324; }.camp-native-skill-grid button { min-height: 29px; padding: 4px 7px; }
.camp-native-attribute-list { display: grid; gap: 6px; }.camp-native-attribute-list > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0 10px; border-bottom: 1px solid #a7ad772c; }.camp-native-attribute-list > header > div { display: grid; gap: 2px; }.camp-native-attribute-list > header small { color: #93a196; font-size: 8px; }.camp-native-attribute-list > header button { padding: 6px 12px; }.camp-native-attribute-list > div { display: grid; grid-template-columns: 85px minmax(90px, 1fr) 30px 30px; gap: 6px; align-items: center; }.camp-native-attribute-list > div > span { display: flex; justify-content: space-between; gap: 6px; }.camp-native-attribute-list > div > span b { font-size: 9px; }.camp-native-attribute-list > div > span small { color: #d9cf80; }.camp-native-attribute-list > div > i { height: 5px; overflow: hidden; border-radius: 4px; background: #07100c; }.camp-native-attribute-list > div > i b { display: block; height: 100%; background: linear-gradient(90deg, #6dcc89, #d9d67d); }.camp-native-attribute-list > div > button { width: 30px; height: 28px; padding: 0; }
.camp-native-talent-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr); gap: 8px; }.camp-native-constellation { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #a8a87338; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 50%, #23372b, #08120f); }.camp-native-constellation > header, .camp-native-talent-deck > header, .camp-native-core-board > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #a9ad762a; }.camp-native-constellation > header > div, .camp-native-talent-deck > header > div, .camp-native-core-board > header > div { display: grid; gap: 2px; }.camp-native-constellation header strong, .camp-native-talent-deck header strong, .camp-native-core-board header strong { font-size: 11px; }.camp-native-constellation header small, .camp-native-constellation header span, .camp-native-talent-deck header small, .camp-native-talent-deck header span, .camp-native-core-board header small { color: #97a497; font-size: 8px; }
.camp-native-starfield { position: relative; min-height: 410px; overflow: hidden; }.camp-native-starfield svg { position: absolute; inset: 0; width: 100%; height: 100%; }.camp-native-starfield line { stroke: #82906b33; stroke-width: 3; }.camp-native-starfield line.is-lit { stroke: #d5d67b; filter: drop-shadow(0 0 5px #d8d77a); }.camp-native-star { position: absolute; left: var(--star-x); top: var(--star-y); z-index: 2; width: 18px; height: 18px; display: grid; place-items: center; padding: 0; border-radius: 50% !important; transform: translate(-50%, -50%); }.camp-native-star span { font-size: 0; }.camp-native-star span::before { content: '·'; font-size: 16px; }.camp-native-star.is-lit { border-color: #e9e68f; background: #bcb548; box-shadow: 0 0 9px #e8e586; }.camp-native-star.is-reachable { border-color: #7dcf91; background: #315c3d; }.camp-native-star.is-dark { opacity: .48; }.camp-native-star.is-focused { outline: 3px solid #f1ec9d55; outline-offset: 3px; }.camp-native-starfield > em { position: absolute; color: #93a18e88; font-size: 9px; font-style: normal; letter-spacing: .14em; pointer-events: none; }.camp-native-starfield .region-a { left: 8%; top: 47%; }.camp-native-starfield .region-b { right: 12%; bottom: 8%; }.camp-native-starfield .region-c { right: 12%; top: 8%; }
.camp-native-talent-detail { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid #a9ac7837; border-radius: 13px; background: #14231b; }.camp-native-talent-detail > span { color: #d1b96f; font-size: 8px; }.camp-native-talent-detail h3 { margin: 0; font-size: 14px; }.camp-native-talent-detail p { margin: 0; color: #a5b2a6; font-size: 9px; line-height: 1.55; }.camp-native-talent-detail > small { color: #d7d48b; }.camp-native-talent-detail > button { min-height: 32px; padding: 6px 9px; }
.camp-native-resource-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 8px; border: 1px solid #be9e544a; border-radius: 9px; background: #2c2819; }.camp-native-resource-action div { display: grid; gap: 2px; }.camp-native-resource-action b { font-size: 9px; }.camp-native-resource-action small { color: #b7a878; font-size: 7px; }.camp-native-resource-action button { min-height: 28px; padding: 4px 7px; }
.camp-native-talent-deck { display: grid; gap: 9px; }.camp-native-stance-row, .camp-native-evolution-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.camp-native-stance-row article { display: grid; gap: 5px; padding: 9px; border: 1px solid #979f7130; border-radius: 10px; background: #17251e; }.camp-native-stance-row article.is-active { border-color: #d0c66e; }.camp-native-stance-row b { font-size: 10px; }.camp-native-stance-row p { margin: 0; color: #93a194; font-size: 8px; line-height: 1.5; }.camp-native-stance-row button { min-height: 29px; }.camp-native-branch-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }.camp-native-branch-list > article { min-width: 0; display: grid; gap: 7px; padding: 8px; border: 1px solid #9aa37330; border-radius: 10px; background: #14221b; }.camp-native-branch-list article > header { display: flex; justify-content: space-between; gap: 5px; }.camp-native-branch-list header div { min-width: 0; display: grid; gap: 2px; }.camp-native-branch-list header b { font-size: 9px; }.camp-native-branch-list header small { overflow: hidden; color: #8f9f92; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-branch-list header > span { color: #c9bc77; font-size: 7px; }.camp-native-branch-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }.camp-native-branch-actions button { min-width: 0; min-height: 28px; padding: 3px; font-size: 7px; }.camp-native-evolution-row button { display: grid; gap: 2px; padding: 6px; text-align: left; }.camp-native-evolution-row button.is-active { border-color: #76cf8c; }.camp-native-evolution-row b { font-size: 8px; }.camp-native-evolution-row small { overflow: hidden; color: #8d9d91; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-core-board { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 0 10px 10px; border: 1px solid #9fa77631; border-radius: 13px; background: radial-gradient(circle at 50% 35%, #364335, #111d17 58%); }.camp-native-core-board > header { margin: 0 -10px; }.camp-native-core-controls { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); gap: 4px; }.camp-native-core-controls > button { grid-row: span 2; }.camp-native-core-controls > span { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 2px; align-items: center; padding: 3px; border: 1px solid #8e986b30; border-radius: 7px; background: #111d17; }.camp-native-core-controls > span.is-tuned { border-color: #c7ba6b66; }.camp-native-core-controls span > b { display: grid; place-items: center; color: #cfc67e; font-size: 8px; }.camp-native-core-controls span button { height: 23px; min-width: 0; padding: 1px 3px; font-size: 6px; }
.camp-native-mod-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }.camp-native-mod-slots article { min-width: 0; display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 6px; border: 1px dashed #8d976b3d; border-radius: 8px; }.camp-native-mod-slots article.is-filled { border-style: solid; background: #19291f; }.camp-native-mod-slots article > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #2d4032; color: #d7ce82; font-size: 8px; }.camp-native-mod-slots article > div { min-width: 0; }.camp-native-mod-slots article > div:nth-of-type(1) { display: grid; gap: 2px; }.camp-native-mod-slots b, .camp-native-mod-slots small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-mod-slots b { font-size: 8px; }.camp-native-mod-slots small { color: #8f9e92; font-size: 6px; }.camp-native-mod-slots article > div:last-child { display: flex; gap: 2px; }.camp-native-mod-slots button { height: 24px; min-width: 24px; padding: 1px 3px; font-size: 7px; }.camp-native-mod-inventory { min-height: 0; max-height: 500px; overflow: auto; scrollbar-width: thin; }.camp-native-mod-inventory article { grid-template-columns: 30px minmax(0, 1fr) auto; }.camp-native-mod-inventory article p { margin: 2px 0 0; color: #8c9c90; font-size: 7px; }.camp-native-mod-inventory article > div:last-child { display: grid; gap: 3px; }
.camp-native-signature-sheet { min-height: 380px; display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: 18px; align-items: center; padding: 22px; }.camp-native-signature-emblem { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #ddca7880; border-radius: 50%; background: radial-gradient(circle, #837b3b, #27382c 68%); box-shadow: 0 0 40px #c7b95633, inset 0 0 30px #f4dc7b22; color: #fff0a6; font-size: 60px; font-weight: 900; }.camp-native-signature-sheet > article { display: grid; gap: 9px; }.camp-native-signature-sheet article > span { color: #d0b96f; font-size: 8px; }.camp-native-signature-sheet h3 { margin: 0; font-size: 19px; }.camp-native-signature-sheet p { margin: 0; color: #a7b4a7; font-size: 10px; line-height: 1.7; }.camp-native-signature-sheet article > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }.camp-native-signature-sheet article > div span { display: grid; gap: 2px; padding: 9px; border-radius: 9px; background: #101d17; }.camp-native-signature-sheet small { color: #8e9e91; font-size: 8px; }.camp-native-signature-sheet footer { display: flex; gap: 6px; }.camp-native-signature-sheet footer button { min-height: 34px; padding: 6px 10px; }
.camp-native-warehouse-layout > nav { display: grid; gap: 5px; align-content: start; }.camp-native-warehouse-layout > nav button { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px; text-align: left; }.camp-native-warehouse-layout > nav button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #334839; color: #dfd78a; }.camp-native-warehouse-layout > nav button b { font-size: 9px; }.camp-native-warehouse-layout > nav button small { color: #8d9d91; font-size: 7px; }.camp-native-warehouse-layout > nav .is-active { border-color: #d3ce7b; background: #314631; }
.camp-native-inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; align-content: start; }.camp-native-inventory-grid > button { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px; align-content: center; padding: 7px; text-align: left; }.camp-native-inventory-grid > button > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #344838; color: #e2da8c; font-weight: 900; }.camp-native-inventory-grid b, .camp-native-inventory-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-inventory-grid b { font-size: 8px; }.camp-native-inventory-grid small { color: #8d9d91; font-size: 7px; }
.camp-native-map-layout { position: relative; min-height: 470px; display: grid; place-items: center; overflow: hidden; border: 1px solid #989f7030; border-radius: 16px; background: radial-gradient(circle at 22% 27%, #5e725044 0 1px, transparent 2px), linear-gradient(145deg, #2d4531, #10251e); background-size: 32px 29px, auto; }.camp-native-map-route { position: absolute; inset: 12%; }.camp-native-map-route i { position: absolute; width: 28%; border-top: 2px dashed #c3b66b55; rotate: 16deg; }.camp-native-map-route i:nth-child(1) { left: 6%; top: 22%; }.camp-native-map-route i:nth-child(2) { left: 29%; top: 39%; rotate: -11deg; }.camp-native-map-route i:nth-child(3) { right: 20%; top: 51%; }.camp-native-map-route i:nth-child(4) { right: 3%; top: 70%; rotate: -20deg; }.camp-native-encounter-grid { position: relative; z-index: 2; width: min(760px, 88%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 34px; }.camp-native-encounter-grid > button { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 8px; border-radius: 50% 12px 12px 50% !important; background: #18291ff0 !important; box-shadow: 0 10px 22px #0006; text-align: left; }.camp-native-encounter-grid > button > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #cfc67573; border-radius: 50%; background: #354536; color: #eadd8f; font-size: 8px; }.camp-native-encounter-grid > button div { min-width: 0; display: grid; gap: 2px; }.camp-native-encounter-grid b, .camp-native-encounter-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-encounter-grid b { font-size: 9px; }.camp-native-encounter-grid small { color: #91a095; font-size: 7px; }.camp-native-encounter-grid em { color: #7be19a; font-style: normal; }.camp-native-encounter-grid .is-tutorial { border-color: #d7c870; }
.camp-native-order-facts, .camp-native-report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.camp-native-material-list, .camp-native-drop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }.camp-native-material-list > span, .camp-native-drop-list > span { display: flex; justify-content: space-between; gap: 7px; padding: 7px; border: 1px solid #969f7130; border-radius: 8px; background: #14221b; font-size: 8px; }.camp-native-material-list small, .camp-native-drop-list small { color: #b4a968; }
.camp-native-order-layout, .camp-native-item-sheet, .camp-native-encounter-sheet, .camp-native-fuel-task, .camp-native-garrison-task { display: grid; gap: 9px; }.camp-native-order-product { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid #b5ac6647; border-radius: 12px; background: #202c1e; }.camp-native-order-product > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; background: #4a5235; color: #efe392; font-size: 16px; font-weight: 900; }.camp-native-order-product > div { display: grid; gap: 2px; }.camp-native-order-product b { font-size: 11px; }.camp-native-order-product small { color: #9aa69a; font-size: 8px; }.camp-native-order-targets { display: grid; gap: 5px; }.camp-native-order-targets article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 7px; border-radius: 8px; background: #132019; }.camp-native-order-targets b { font-size: 8px; }.camp-native-order-targets small { color: #92a095; font-size: 7px; }.camp-native-quantity { display: grid; gap: 6px; }.camp-native-quantity input { width: 100%; min-height: 38px; padding: 6px 9px; border: 1px solid #aaa97555; border-radius: 8px; background: #09140f; color: #eee9c4; font-size: 16px; }.camp-native-quantity > div { display: flex; gap: 4px; }.camp-native-quantity button { min-height: 29px; padding: 4px 8px; }.camp-native-order-reason { margin: 0; padding: 8px; border-radius: 8px; background: #17251d; color: #a7b4a7; font-size: 9px; }.camp-native-order-reason.is-ready { color: #9de5ad; }.camp-native-order-reason.is-error { color: #f0aaa1; }
.camp-native-inline-actions, .camp-native-supply-slots, .camp-native-party-thumbs, .camp-native-enemy-chips, .camp-native-detail-tabs { display: flex; flex-wrap: wrap; gap: 5px; }.camp-native-inline-actions button, .camp-native-supply-slots button, .camp-native-party-thumbs button, .camp-native-enemy-chips button, .camp-native-detail-tabs button { min-height: 31px; padding: 5px 8px; }.camp-native-detail-tabs .is-active, .camp-native-supply-list .is-active, .camp-native-garrison-roster .is-active { border-color: #d1c872; background: #31452e; }.camp-native-party-thumbs > span, .camp-native-party-thumbs > button { display: grid; justify-items: center; gap: 2px; padding: 5px; }.camp-native-party-thumbs b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #354a39; color: #dfd68b; }.camp-native-party-thumbs small { color: #92a094; font-size: 7px; }.camp-native-toggle { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid #959f7130; border-radius: 9px; background: #14221b; font-size: 9px; }
.camp-native-garrison-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.camp-native-garrison-slots > div { min-height: 86px; display: grid; justify-items: center; align-content: center; gap: 4px; border: 1px dashed #979f7138; border-radius: 10px; }.camp-native-garrison-slots span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #324737; color: #dfd68b; font-weight: 900; }.camp-native-garrison-slots small { color: #8e9d92; font-size: 7px; }
.camp-native-report-layout > aside { min-height: 0; display: grid; gap: 5px; align-content: start; overflow: auto; scrollbar-width: thin; }.camp-native-report-layout > aside > button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: center; padding: 6px; text-align: left; }.camp-native-report-layout aside button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #334839; color: #e1d98d; }.camp-native-report-layout aside button div { min-width: 0; display: grid; gap: 2px; }.camp-native-report-layout aside b, .camp-native-report-layout aside small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-report-layout aside b { font-size: 8px; }.camp-native-report-layout aside small { color: #8d9d91; font-size: 7px; }.camp-native-report-layout aside .is-active { border-color: #d3cb78; background: #31452f; }
.camp-native-guide-grid, .camp-native-tutorial-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }.camp-native-guide-grid > button, .camp-native-tutorial-list > button, .camp-native-tutorial-list > article { min-width: 0; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 7px; align-content: center; padding: 7px; border: 1px solid #8e956638; border-radius: 9px; background: #17271f; text-align: left; }.camp-native-tutorial-list > article > span { color: #d6c76d; font-size: 9px; font-weight: 900; }.camp-native-tutorial-list > article.is-current { border-color: #dfcf72; background: #2d3523; }.camp-native-tutorial-list > article.is-complete { border-color: #6dbb7b66; }.camp-native-tutorial-list > article div { min-width: 0; display: grid; gap: 3px; }.camp-native-guide-grid b, .camp-native-tutorial-list b { font-size: 9px; }.camp-native-guide-grid small, .camp-native-tutorial-list small { overflow: hidden; color: #8e9d91; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-tutorial-list em { color: #dfca74; font-size: 7px; font-style: normal; line-height: 1.35; }
.camp-native-affix-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.camp-native-affix-choice article { display: grid; gap: 6px; padding: 11px; border: 1px solid #959e7132; border-radius: 11px; background: #15231c; }.camp-native-affix-choice article.is-new { border-color: #d4c56b6b; background: #2d311d; box-shadow: inset 0 0 25px #d6c96e10; }.camp-native-affix-choice small { color: #a69b64; font-size: 8px; }.camp-native-affix-choice b { font-size: 11px; }.camp-native-affix-choice p { margin: 0; color: #9eab9f; font-size: 9px; line-height: 1.55; }
.camp-native-battle-layout { min-height: 0; display: grid; grid-template-columns: minmax(150px, .55fr) minmax(0, 1.9fr) minmax(150px, .55fr); gap: 7px; }.camp-native-battle-layout > aside { min-height: 0; display: grid; gap: 5px; align-content: start; overflow: auto; scrollbar-width: thin; }.camp-native-battle-layout > aside > header { display: flex; justify-content: space-between; align-items: center; padding: 5px 7px; color: #d8d7ae; }.camp-native-battle-layout > aside header strong { font-size: 9px; }.camp-native-battle-layout > aside header small { color: #8e9d93; font-size: 7px; }
.camp-native-battle-unit { display: grid; gap: 5px; padding: 7px; border: 1px solid #8ea07237; border-radius: 9px; background: #14231c; }.camp-native-battle-unit.is-friendly { border-color: #58b7b45d; }.camp-native-battle-unit.is-enemy { border-color: #c4616e5e; }.camp-native-battle-unit.is-downed { opacity: .58; filter: grayscale(.7); }.camp-native-battle-unit > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; align-items: center; }.camp-native-battle-unit > header > button { width: 30px; height: 30px; padding: 0; border-radius: 50% !important; }.camp-native-battle-unit.is-friendly > header > button { border-color: #60c9c5; background: #26524c; }.camp-native-battle-unit.is-enemy > header > button { border-color: #d16e79; background: #522831; }.camp-native-battle-unit header div { min-width: 0; display: grid; gap: 1px; }.camp-native-battle-unit header b, .camp-native-battle-unit header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.camp-native-battle-unit header b { font-size: 8px; }.camp-native-battle-unit header small { color: #90a095; font-size: 6px; }.camp-native-battle-unit header > strong { color: #cbd1bd; font-size: 7px; }
.camp-native-battle-skill { min-height: 17px; padding: 2px 5px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--skill-color, #9b88ff) 58%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--skill-color, #9b88ff) 14%, #0b1511); color: var(--skill-color, #d6c9ff); font-size: 8px; font-weight: 900; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-battle-skill[data-phase="announce"] { animation: battle-skill-phase-pulse .36s ease-in-out infinite alternate; }
.camp-native-battle-health { position: relative; height: 5px; overflow: hidden; border-radius: 5px; background: #060d0a; }.camp-native-battle-health > i { position: absolute; inset: 0 auto 0 0; background: #72d58e; }.camp-native-battle-health > b { position: absolute; inset: 0 auto 0 0; background: #64b9e8aa; }.camp-native-battle-ap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; align-items: center; color: #8f9e93; font-size: 6px; }.camp-native-battle-ap > i { height: 3px; overflow: hidden; border-radius: 4px; background: #07100c; }.camp-native-battle-ap > i b { display: block; height: 100%; background: #d0b96d; }.camp-native-battle-revive { color: #c8cdd0; font-size: 7px; }.camp-native-battle-status { min-height: 18px; display: flex; flex-wrap: wrap; gap: 3px; color: #8e9d92; font-size: 6px; }
.camp-native-battle-glass { min-width: 0; display: grid; grid-template-rows: minmax(300px, 1fr) auto auto; overflow: hidden; border: 1px solid #a895e06e; border-radius: 48% 48% 12px 12px / 9% 9% 12px 12px; background: #080d1b; box-shadow: inset 0 0 38px #7c54d94a, 0 0 24px #7656d321; }.camp-native-battle-glass canvas { width: 100%; height: 100%; min-height: 300px; display: block; }.camp-native-battle-glass > footer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 6px 9px; border-top: 1px solid #8f75c74c; background: #11152b; }.camp-native-battle-glass footer span { overflow: hidden; color: #bbb4d1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.camp-native-battle-glass footer button { min-height: 26px; padding: 3px 6px; font-size: 7px; }.camp-native-battle-glass footer label { display: flex; align-items: center; gap: 3px; color: #aaa5bf; font-size: 7px; }
.camp-native-battle-log { max-height: 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 7px 9px; overflow: hidden; border-top: 1px solid #8f75c730; background: #0d1124; }.camp-native-battle-log > div { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3px; }.camp-native-battle-log b { color: #bdb7cf; font-size: 7px; }.camp-native-battle-log ul { min-height: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; }.camp-native-battle-log li { overflow: hidden; color: #8f8aa1; font-size: 6px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }.camp-native-battle-log li span { margin-right: 5px; }

@media (max-width: 680px) {
  .camp-native-tether { height: 18vh; }
  .camp-native-production-layout, .camp-native-party-layout, .camp-native-character-layout, .camp-native-warehouse-layout, .camp-native-report-layout, .camp-native-core-layout, .camp-native-talent-layout, .camp-native-signature-sheet { grid-template-columns: 1fr; }
  .camp-native-production-layout > aside { grid-template-columns: 1fr 1fr; }.camp-native-project-grid, .camp-native-inventory-grid, .camp-native-encounter-grid, .camp-native-guide-grid, .camp-native-tutorial-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camp-native-party-slots { grid-template-columns: repeat(3, minmax(80px, 1fr)); overflow-x: auto; }.camp-native-party-slots > button { min-height: 100px; }
  .camp-native-character-layout > aside, .camp-native-warehouse-layout > nav { overflow-x: auto; }.camp-native-roster-mini, .camp-native-warehouse-layout > nav { display: flex; }.camp-native-roster-mini > button, .camp-native-warehouse-layout > nav button { min-width: 105px; }
  .camp-native-character-layout > .camp-native-section-block > header { align-items: flex-start; }.camp-native-character-layout > .camp-native-section-block > header nav { max-width: 180px; flex-wrap: wrap; justify-content: flex-end; }
  .camp-native-character-overview { min-height: 300px; grid-template-columns: 110px minmax(0, 1fr); padding: 10px; }.camp-native-character-portrait { width: 105px; height: 205px; font-size: 46px; }.camp-native-character-metrics { grid-template-columns: repeat(2, 1fr); }
  .camp-native-slot-list, .camp-native-skill-grid, .camp-native-stance-row, .camp-native-evolution-row, .camp-native-material-list, .camp-native-drop-list { grid-template-columns: 1fr; }
  .camp-native-attribute-list > div { grid-template-columns: 70px minmax(58px, 1fr) 28px 28px; }.camp-native-starfield { min-height: 330px; }.camp-native-talent-detail { order: -1; }
  .camp-native-branch-list { grid-template-columns: 1fr; }.camp-native-core-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }.camp-native-core-controls > button { grid-column: 1 / -1; grid-row: auto; }
  .camp-native-signature-sheet { min-height: 0; padding: 10px; }.camp-native-signature-emblem { width: 110px; justify-self: center; font-size: 38px; }
  .camp-native-map-layout { min-height: 400px; }.camp-native-encounter-grid { width: 92%; gap: 11px; }.camp-native-encounter-grid > button { min-height: 64px; }
  .camp-native-window[data-native-kind="battle-mirror"] { height: 74vh; }
  .camp-native-window[data-native-kind="battle-mirror"] .camp-native-window-body { overflow: hidden; padding: 6px; }
  .camp-native-window[data-native-kind="battle-mirror"] .camp-native-window-actions { padding: 6px 9px; }
  .camp-native-battle-layout { height: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 58px 58px; gap: 4px; }
  .camp-native-battle-layout > aside { min-width: 0; display: flex; gap: 3px; overflow: hidden; }
  .camp-native-battle-layout > aside > header { min-width: 34px; padding: 3px; flex-direction: column; justify-content: center; }
  .camp-native-battle-unit { min-width: 0; flex: 1 1 0; gap: 2px; padding: 3px; border-radius: 6px; }
  .camp-native-battle-unit > header { grid-template-columns: 20px minmax(0, 1fr); gap: 3px; }
  .camp-native-battle-unit > header > button { width: 20px; height: 20px; font-size: 7px; }
  .camp-native-battle-unit header > strong, .camp-native-battle-unit header small { display: none; }
  .camp-native-battle-unit header b { font-size: 6px; }
  .camp-native-battle-health { height: 3px; }
  .camp-native-battle-ap { grid-template-columns: minmax(0, 1fr); }
  .camp-native-battle-ap > span, .camp-native-battle-ap > strong { display: none; }
  .camp-native-battle-status { min-height: 10px; height: 10px; flex-wrap: nowrap; overflow: hidden; }
  .camp-native-battle-revive { overflow: hidden; font-size: 5px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  .camp-native-battle-glass { order: -1; grid-template-rows: minmax(0, 1fr) auto 54px; border-radius: 42% 42% 8px 8px / 7% 7% 8px 8px; }
  .camp-native-battle-glass canvas { min-height: 0; }
  .camp-native-battle-glass > footer { padding: 3px 6px; }
  .camp-native-battle-glass footer button { min-height: 23px; }
  .camp-native-battle-log { max-height: 54px; gap: 4px; padding: 4px 6px; }
  .camp-native-battle-log li { line-height: 1.25; }
}

/* Slice 10 readability pass: preserve the scene-first hierarchy without sub-10px labels. */
html[data-camp-candidate="true"] :where(
  .camp-native-world,
  .camp-native-popover,
  .camp-native-window,
  .camp-native-activity-palette
) :where(button, small, span, p, li, label, b, strong, em, dt, dd, input, select) {
  font-size: max(11px, 1em);
}

.camp-native-seal { grid-template-columns: 40px auto; gap: 10px; padding: 8px 12px 8px 8px; }
.camp-native-seal > span { width: 40px; height: 40px; font-size: 15px; }
.camp-native-seal strong { font-size: 15px; }
.camp-native-seal small { font-size: 11px; }
.camp-native-system-actions > button, .camp-native-system-actions summary { width: 42px; height: 42px; font-size: 15px; }

.camp-native-facility { width: 138px; min-height: 128px; gap: 4px; }
.camp-native-facility-art { width: 78px; height: 64px; }
.camp-native-facility-art::after { width: 91px; }
.camp-native-facility-art i { width: 39px; height: 39px; font-size: 15px; }
.camp-native-object-label { max-width: 134px; padding: 5px 8px; }
.camp-native-object-label strong { font-size: 15px; }
.camp-native-object-label small { max-width: 120px; font-size: 11px; }
.camp-native-object-progress { width: 96px; height: 4px; }
.camp-native-mode-mark, .camp-native-queue-mark { top: 30px; font-size: 11px; }
.camp-native-pin-mark { top: 5px; font-size: 10px; }

.camp-native-landmark { width: 128px; min-height: 112px; gap: 4px; }
.camp-native-landmark-art { width: 60px; height: 60px; font-size: 16px; }
.camp-native-landmark strong, .camp-native-landmark small { max-width: 126px; }
.camp-native-landmark strong { font-size: 14px; }
.camp-native-landmark small { font-size: 11px; }
.camp-native-object.is-pinned::before, .camp-native-orb.is-pinned::before {
  border-color: #e3d980b5;
  background: #d9cf7110;
  box-shadow: 0 0 0 3px #d9cf7114, 0 0 20px #d9cf712b;
}
.camp-native-orb.is-pinned { outline: 2px solid #e3d9807a; outline-offset: 4px; }

.camp-native-character { width: 100px; gap: 3px; }
.camp-native-character > span { width: 48px; height: 48px; font-size: 15px; }
.camp-native-character > strong, .camp-native-character > small { max-width: 98px; }
.camp-native-character > strong { font-size: 13px; }
.camp-native-character > small { font-size: 11px; }
.camp-native-character.is-at-facility { width: 66px; }
.camp-native-character.is-at-facility > span { width: 34px; height: 34px; font-size: 12px; }
.camp-native-character.is-at-facility > strong { font-size: 10px; }

.camp-native-orb { width: 220px; height: 176px; }
.camp-native-orb canvas { height: 132px; }
.camp-native-orb > button { padding-bottom: 12px; }
.camp-native-orb > button span { font-size: 11px; }
.camp-native-orb > button strong { font-size: 14px; }
.camp-native-activity { width: 100px; gap: 3px; }
.camp-native-activity > span { width: 52px; height: 42px; font-size: 15px; }
.camp-native-activity strong { font-size: 13px; }
.camp-native-activity small { font-size: 11px; }
.camp-native-ground-drop { width: 96px; grid-template-columns: 28px minmax(0, 1fr); gap: 3px 6px; padding: 7px; }
.camp-native-ground-drop > span { width: 28px; height: 28px; font-size: 11px; }
.camp-native-ground-drop strong { font-size: 12px; }
.camp-native-ground-drop small { font-size: 10px; }

.camp-native-world-state { gap: 12px; padding: 9px 12px; font-size: 12px; }
.camp-native-world-state button { font-size: 12px; }
.camp-native-world-tools button { min-width: 42px; height: 42px; font-size: 15px; }
.camp-native-world-tools small { min-width: 18px; height: 18px; font-size: 10px; }

.camp-native-radial-center { width: 310px; min-height: 190px; gap: 7px; padding: 12px; }
.camp-native-radial-center header { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; }
.camp-native-radial-center header > span { width: 42px; height: 42px; font-size: 15px; }
.camp-native-radial-center header strong { font-size: 15px; }
.camp-native-radial-center header small { font-size: 11px; }
.camp-native-pin { min-width: 54px; min-height: 34px; padding: 5px 8px; font-size: 11px; }
.camp-native-radial-progress > span, .camp-native-radial-facts, .camp-native-radial-center > em { font-size: 11px; }
.camp-native-radial-tools { gap: 6px; }
.camp-native-radial-tools button { min-height: 48px; padding: 6px; }
.camp-native-radial-tools b { font-size: 11px; }
.camp-native-radial-tools small { font-size: 10px; }
.camp-native-radial-tool-editor { min-height: 48px; grid-template-columns: 32px minmax(80px, 1fr) repeat(4, 36px); gap: 4px; }
.camp-native-radial-tool-editor b, .camp-native-radial-tool-editor button { font-size: 11px; }
.camp-native-radial-tool-editor small { font-size: 10px; }
.camp-native-radial-recipe { width: 112px; min-height: 72px; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 6px; padding: 7px; }
.camp-native-radial-recipe > span { width: 30px; height: 30px; font-size: 11px; }
.camp-native-radial-recipe b { font-size: 11px; }
.camp-native-radial-recipe small { font-size: 10px; }
.camp-native-radial-close { left: 145px; top: -96px; width: 32px; height: 32px; font-size: 17px; }
.camp-native-radial-tabs { top: 104px; max-width: 440px; gap: 5px; padding: 6px; }
.camp-native-radial-tabs button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.camp-native-radial-pages { top: 145px; }
.camp-native-radial-pages button { width: 30px; height: 28px; }
.camp-native-radial-pages span { font-size: 11px; }
.camp-native-radial-hint { top: 180px; width: 330px; font-size: 10px; line-height: 1.35; }
.camp-native-activity-palette { width: min(360px, 78vw); gap: 6px; padding: 11px; }
.camp-native-activity-palette header strong { font-size: 14px; }
.camp-native-activity-palette header button { width: auto; min-width: 34px; height: 32px; padding: 0 8px; border-radius: 9px; font-size: 11px; }
.camp-native-activity-palette > button { min-height: 38px; padding: 7px 9px; font-size: 11px; }
.camp-native-activity-palette p { font-size: 11px; }

.camp-native-window { width: min(1180px, 94vw); max-height: min(820px, 90vh); }
.camp-native-popover-head h2, .camp-native-window-head h2 { font-size: 22px; }
.camp-native-popover-head p, .camp-native-window-head p { font-size: 12px; }
.camp-native-popover-head small, .camp-native-window-head small { font-size: 11px; }
.camp-native-popover-glyph, .camp-native-window-glyph { width: 46px; height: 46px; font-size: 15px; }
.camp-native-window-head-actions { display: flex; gap: 7px; align-items: center; }
.camp-native-header-pin { min-width: 58px; height: 32px; padding: 0 9px; border: 1px solid #aeb38252; border-radius: 9px; background: #1b2b22; color: #d8dccd; font-size: 11px; cursor: pointer; }
.camp-native-header-pin.is-active { border-color: #e0d47d9c; background: #51543a; color: #fff0a9; }
.camp-native-icon-action { width: 34px; height: 34px; font-size: 17px; }
.camp-native-window-body { padding: 16px; font-size: 12px; }
.camp-native-window-actions button { min-height: 42px; padding: 8px 13px; font-size: 12px; }

@media (max-width: 680px) {
  .camp-native-seal { grid-template-columns: 34px auto; padding: 6px 9px 6px 6px; }
  .camp-native-seal > span { width: 34px; height: 34px; font-size: 12px; }
  .camp-native-seal strong { font-size: 12px; }
  .camp-native-seal small { font-size: 10px; }
  .camp-native-system-actions > button, .camp-native-system-actions summary { width: 36px; height: 36px; font-size: 13px; }
  .camp-native-world-state { gap: 7px; padding: 7px 8px; font-size: 11px; }
  .camp-native-world-tools button { min-width: 36px; height: 36px; font-size: 13px; }

  .camp-native-facility { width: 104px; min-height: 102px; }
  .camp-native-facility-art { width: 58px; height: 49px; }
  .camp-native-facility-art::after { width: 68px; }
  .camp-native-facility-art i { width: 31px; height: 31px; font-size: 12px; }
  .camp-native-object-label { max-width: 102px; }
  .camp-native-object-label strong { font-size: 13px; }
  .camp-native-object-label small { max-width: 92px; font-size: 11px; }
  .camp-native-object-progress { width: 72px; }
  .camp-native-landmark { width: 92px; min-height: 86px; }
  .camp-native-landmark-art { width: 46px; height: 46px; font-size: 13px; }
  .camp-native-landmark strong { max-width: 90px; font-size: 12px; }
  .camp-native-landmark small { display: none; }
  .camp-native-character { width: 70px; }
  .camp-native-character > span { width: 36px; height: 36px; font-size: 12px; }
  .camp-native-character > strong { max-width: 68px; font-size: 12px; }
  .camp-native-character > small { display: none; }
  .camp-native-character.is-at-facility { width: 56px; }
  .camp-native-character.is-at-facility > span { width: 29px; height: 29px; }
  .camp-native-orb { width: 148px; height: 122px; }
  .camp-native-orb canvas { height: 91px; }
  .camp-native-orb > button strong { max-width: 132px; font-size: 12px; }
  .camp-native-activity { width: 68px; }
  .camp-native-activity > span { width: 40px; height: 31px; font-size: 12px; }
  .camp-native-activity strong { font-size: 12px; }
  .camp-native-activity small { display: none; }
  .camp-native-ground-drop { width: 70px; grid-template-columns: 21px minmax(0, 1fr); padding: 4px; }
  .camp-native-ground-drop > span { width: 21px; height: 21px; font-size: 9px; }
  .camp-native-ground-drop strong { font-size: 11px; }
  .camp-native-ground-drop small { display: none; }
  .camp-native-facility-card { width: 78px; min-height: 62px; grid-template-columns: 24px minmax(0, 1fr); padding: 5px 5px 10px; }
  .camp-native-facility-card > span { width: 24px; height: 24px; }.camp-native-facility-card strong { font-size: 10px; }.camp-native-facility-card small { display: none; }
  .camp-native-facility-warehouse-palette { width: min(310px, 82vw); transform: translate(-50%, 54px); }

  .camp-native-radial-center { width: 232px; min-height: 160px; padding: 9px; }
  .camp-native-radial-center header { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; }
  .camp-native-radial-center header > span { width: 34px; height: 34px; font-size: 12px; }
  .camp-native-radial-center header strong { font-size: 12px; }
  .camp-native-radial-center header small { font-size: 10px; }
  .camp-native-pin { min-width: 44px; min-height: 30px; padding: 4px 6px; font-size: 10px; }
  .camp-native-radial-progress > span, .camp-native-radial-facts, .camp-native-radial-center > em { font-size: 10px; }
  .camp-native-radial-tools button { min-height: 40px; padding: 4px; }
  .camp-native-radial-tools b, .camp-native-radial-tools small { font-size: 10px; }
  .camp-native-radial-tool-editor { min-height: 40px; grid-template-columns: 26px minmax(60px, 1fr) repeat(4, 29px); gap: 3px; }
  .camp-native-radial-tool-editor b, .camp-native-radial-tool-editor small, .camp-native-radial-tool-editor button { font-size: 10px; }
  .camp-native-radial-recipe { width: 80px; min-height: 58px; grid-template-columns: 23px minmax(0, 1fr); padding: 4px; }
  .camp-native-radial-recipe > span { width: 23px; height: 23px; font-size: 10px; }
  .camp-native-radial-recipe b, .camp-native-radial-recipe small { font-size: 10px; }
  .camp-native-radial-close { left: 108px; top: -80px; width: 30px; height: 30px; }
  .camp-native-radial-tabs { top: 87px; max-width: 290px; padding: 4px; }
  .camp-native-radial-tabs button { min-height: 29px; padding: 4px 7px; font-size: 10px; }
  .camp-native-radial-pages { top: 123px; }
  .camp-native-radial-hint { top: 154px; width: 250px; font-size: 9px; }

  .camp-native-window-field { padding: 62px 6px 8px; }
  .camp-native-window { max-height: calc(100vh - 72px); }
  .camp-native-window-head { padding: 9px; }
  .camp-native-window-head h2 { font-size: 16px; }
  .camp-native-window-head p { font-size: 10px; }
  .camp-native-window-head small { font-size: 10px; }
  .camp-native-window-glyph { width: 36px; height: 36px; font-size: 12px; }
  .camp-native-header-pin { min-width: 48px; height: 30px; padding: 0 6px; font-size: 10px; }
  .camp-native-icon-action { width: 31px; height: 31px; }
  .camp-native-window-body { padding: 9px; font-size: 11px; }
  .camp-native-window[data-native-kind="battle-mirror"] { height: calc(100vh - 72px); }
}

/* Final surfaces use explicit readable type; compact spacing, not tiny text, keeps them single-screen. */
html[data-camp-candidate="true"] .camp-native-window small { font-size: 11px !important; }
html[data-camp-candidate="true"] .camp-native-window :where(p, li, label, dt, dd) { font-size: 12px !important; }
html[data-camp-candidate="true"] .camp-native-window :where(b, strong) { font-size: 12px !important; }
html[data-camp-candidate="true"] .camp-native-window :where(button, select) { font-size: 11px !important; }
html[data-camp-candidate="true"] .camp-native-window input { font-size: 14px !important; }

.camp-native-window[data-native-kind="battle-mirror"] { height: min(820px, 90vh); }
.camp-native-window[data-native-kind="battle-mirror"] .camp-native-window-body { overflow: hidden; }
.camp-native-battle-layout { height: 100%; }
.camp-native-battle-layout > aside { gap: 2px; }
.camp-native-battle-layout > aside > header { padding: 3px 5px; }
.camp-native-battle-unit { gap: 2px; padding: 3px 5px; }
.camp-native-battle-unit > header { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px; }
.camp-native-battle-unit > header > button { width: 26px; height: 26px; }
.camp-native-battle-health { height: 4px; }
.camp-native-battle-ap { gap: 3px; font-size: 10px; }
.camp-native-battle-revive { font-size: 10px; }
.camp-native-battle-status { min-height: 14px; gap: 2px; font-size: 10px; }
.camp-native-battle-unit { position: relative; }
.camp-native-battle-unit > header { position: relative; }
.camp-native-battle-unit .battle-live-inspector { top: 31px; width: min(280px, 72vw); display: none; text-align: left; }
.camp-native-battle-unit.is-enemy .battle-live-inspector { right: 0; left: auto; border-color: #805266; }
.camp-native-battle-unit .battle-unit-avatar:hover + .battle-live-inspector,
.camp-native-battle-unit .battle-unit-avatar:focus + .battle-live-inspector { display: grid; }
.camp-native-battle-unit:hover, .camp-native-battle-unit:focus-within { z-index: 40; }
.camp-native-battle-status { position: relative; overflow: visible; }
.camp-native-battle-skill-timers { display: grid; gap: 2px; }
.camp-native-battle-skill-timer { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 4px; align-items: center; color: #abb8ad; font-size: 8px; }
[data-live-skill-row][hidden] { display: none; }
.camp-native-battle-skill-timer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-battle-skill-timer > span em { color: var(--skill-color, #c8b9ff); font-style: normal; }
.camp-native-battle-skill-timer > strong { color: #d7ddcf; font-size: 8px !important; }
.camp-native-battle-skill-timer > i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 4px; background: #07100c; }
.camp-native-battle-skill-timer > i > b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8e78e3, #d6ca72); }
.camp-native-battle-glass footer span, .camp-native-battle-glass footer label { font-size: 11px; }
.camp-native-battle-glass footer button { font-size: 11px; }
.camp-native-battle-log b { font-size: 11px; }
.camp-native-battle-log li { font-size: 10px; }

@media (max-width: 680px) {
  html[data-camp-candidate="true"] .camp-native-window small { font-size: 10px !important; }
  html[data-camp-candidate="true"] .camp-native-window :where(p, li, label, dt, dd, b, strong) { font-size: 10px !important; }
  html[data-camp-candidate="true"] .camp-native-window :where(button, select) { font-size: 10px !important; }
  .camp-native-window[data-native-kind="battle-mirror"] .camp-native-window-body { padding: 5px; }
  .camp-native-window[data-native-kind="battle-mirror"] { height: calc(100vh - 96px); max-height: calc(100vh - 96px); }
  .camp-native-battle-unit { gap: 2px; padding: 3px; }
  .camp-native-battle-unit > header { grid-template-columns: 21px minmax(0, 1fr); gap: 3px; }
  .camp-native-battle-unit > header > button { width: 21px; height: 21px; }
  .camp-native-battle-ap, .camp-native-battle-status, .camp-native-battle-revive { font-size: 9px; }
  .camp-native-battle-layout { grid-template-rows: minmax(0, 1fr) 86px 86px; }
  .camp-native-battle-layout > aside { overflow: visible; }
  .camp-native-battle-skill-timers { max-height: 28px; overflow: hidden; }
  .camp-native-battle-skill-timer { font-size: 7px; }
  .camp-native-battle-skill-timer > strong { font-size: 7px !important; }
  .camp-native-battle-unit .battle-live-inspector { top: 24px; width: min(265px, 82vw); }
  .camp-native-battle-status { height: auto; min-height: 12px; overflow: visible; }
  .camp-native-battle-status .battle-status-popover { top: auto; bottom: calc(100% + 4px); width: min(240px, 72vw); }
  .camp-native-battle-log li { font-size: 9px !important; }
}

/* Slice 11: production-only wheel, external facility callouts, and scene-native pins. */
.camp-native-scene-pin {
  position: absolute;
  right: -14px;
  bottom: -14px;
  z-index: 52;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e4db9370;
  border-radius: 7px;
  background: #eef0cfdd;
  box-shadow: 0 3px 10px #0008;
  opacity: .045;
  cursor: pointer;
  transition: opacity .14s ease, border-color .14s ease, background .14s ease, transform .14s ease;
}
.camp-native-scene-pin .camp-icon { width: 15px; height: 15px; color: #4a5c50; }
.camp-native-object:hover > .camp-native-scene-pin,
.camp-native-object:focus-within > .camp-native-scene-pin,
.camp-native-orb:hover > .camp-native-scene-pin,
.camp-native-orb:focus-within > .camp-native-scene-pin,
.camp-native-scene-pin:hover,
.camp-native-scene-pin:focus-visible { opacity: 1; transform: translateY(-2px); }
.camp-native-scene-pin.is-active { border-color: #fff0a8; background: #ded47e; }
.camp-native-scene-pin.is-active .camp-icon { color: #26372f; }

.camp-native-radial-palette { z-index: 42; }
.camp-native-radial-wheel {
  position: absolute;
  left: 0;
  top: 0;
  width: 438px;
  height: 438px;
  border: 1px solid #eee7ad76;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 35%, #07100dcf 35.5% 49%, transparent 49.5%),
    repeating-conic-gradient(from -15deg, #b6c58124 0deg 27deg, #d9c9873a 27deg 29deg, #799b8a26 29deg 56deg, #f0e4a24a 56deg 58deg);
  box-shadow: 0 0 0 9px #0b16124d, 0 24px 65px #000a, inset 0 0 45px #d8df8d14;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.camp-native-radial-wheel::after { content: ""; position: absolute; inset: 86px; border: 1px solid #e8e0a762; border-radius: 50%; box-shadow: inset 0 0 18px #0009; }
.camp-native-radial-center {
  width: 158px;
  min-height: 136px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 11px;
  border: 1px solid #ebe4a793;
  border-radius: 19px;
  background: linear-gradient(155deg, #354837f7, #101d18fa);
  box-shadow: 0 15px 35px #000c, 0 0 0 5px #cdd88a13;
  transform: translate(-50%, -50%);
  cursor: grab;
}
.camp-native-radial-center:active { cursor: grabbing; }
.camp-native-radial-facility-art { width: 48px; height: 43px; display: grid; place-items: center; border: 1px solid #dcd68a72; border-radius: 14px 14px 8px 8px; background: #1b3028; color: #f1eaa9; font-size: 16px; font-weight: 900; box-shadow: 0 8px 16px #0008; }
.camp-native-radial-center > strong { max-width: 136px; overflow: hidden; color: #fff8ce; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-radial-center > small { max-width: 140px; overflow: hidden; color: #b9c6b8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-radial-center > em { color: #f1ad74; font-size: 9px; font-style: normal; text-align: center; }
.camp-native-radial-progress { width: 100%; }
.camp-native-radial-progress > span { font-size: 10px; }
.camp-native-radial-progress > i { height: 4px; }
.camp-native-radial-facts { width: 100%; flex-wrap: wrap; font-size: 9px; }
.camp-native-radial-facts .is-full { width: 100%; color: #ffc27e; text-align: center; }

.camp-native-radial-choice {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 54px;
  height: 56px;
  display: grid;
  grid-template-columns: 34px 0fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 0;
  align-items: center;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid #e5df9b78;
  border-radius: 15px;
  background: linear-gradient(145deg, #4f5d45f4, #18271ff8);
  box-shadow: 0 9px 20px #0009;
  color: #f5efbd;
  text-align: left;
  transform: translate(calc(-50% + var(--radial-x)), calc(-50% + var(--radial-y)));
  filter: hue-rotate(calc(var(--radial-index) * 13deg));
  transition: width .16s ease, grid-template-columns .16s ease, transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.camp-native-radial-choice > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #f1e9a85e; border-radius: 10px; background: #273d31; color: #fff2a7; font-size: 13px; font-weight: 900; }
.camp-native-radial-choice b, .camp-native-radial-choice small { min-width: 0; max-width: 0; overflow: hidden; opacity: 0; text-overflow: ellipsis; white-space: nowrap; transition: max-width .16s ease, opacity .12s ease .04s; }
.camp-native-radial-choice b { align-self: end; font-size: 12px; }
.camp-native-radial-choice small { align-self: start; color: #b5c2b5; font-size: 10px; }
.camp-native-radial-choice:hover,
.camp-native-radial-choice:focus-visible {
  z-index: 18;
  width: 174px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 7px;
  outline: 2px solid #fff1a65e;
  outline-offset: 2px;
  box-shadow: 0 14px 28px #000c, 0 0 22px #e0d78a38;
  filter: none;
  transform: translate(calc(-50% + var(--radial-x) + var(--radial-nudge-x)), calc(-50% + var(--radial-y) + var(--radial-nudge-y)));
}
.camp-native-radial-choice:hover b, .camp-native-radial-choice:hover small,
.camp-native-radial-choice:focus-visible b, .camp-native-radial-choice:focus-visible small { max-width: 112px; opacity: 1; }
.camp-native-radial-choice.is-family { border-color: #d9c4f195; background: linear-gradient(145deg, #765f82f4, #272033f8); }
.camp-native-radial-choice.is-profession { border-color: #e2c18395; background: linear-gradient(145deg, #765c35f4, #2e2419f8); }
.camp-native-radial-choice.is-subgroup { border-color: #a9d7d095; background: linear-gradient(145deg, #426b65f4, #172d2af8); }
.camp-native-radial-choice.is-tier { border-color: #a9c5e595; background: linear-gradient(145deg, #405f7af4, #172330f8); }
.camp-native-radial-choice.status-ready { border-color: #83e19b; box-shadow: 0 9px 20px #0009, 0 0 16px #5ae27f28; }
.camp-native-radial-choice.is-locked { opacity: .55; filter: grayscale(.7); }

.camp-native-radial-back { position: absolute; z-index: 24; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #ded68a73; border-radius: 18px; background: #17251eed; color: #eee9bd; box-shadow: 0 7px 17px #0008; }
.camp-native-radial-back { left: -222px; top: -204px; width: 68px; font-size: 11px; }
.camp-native-radial-palette.callouts-right .camp-native-radial-back { left: 154px; }
.camp-native-radial-pages { left: 0; top: 229px; height: 32px; padding: 4px 6px; border: 1px solid #cfc98258; border-radius: 16px; }
.camp-native-radial-pages button { width: 28px; height: 24px; }
.camp-native-radial-pages span { min-width: 34px; font-size: 10px; text-align: center; }

.camp-native-radial-callout {
  position: absolute;
  z-index: 16;
  width: 224px;
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #d9d28a61;
  border-radius: 14px;
  background: linear-gradient(145deg, #203128f5, #0c1713f7);
  box-shadow: 0 13px 30px #000a;
  pointer-events: auto;
}
.camp-native-radial-callout::after { content: ""; position: absolute; top: 50%; width: 52px; height: 1px; background: linear-gradient(90deg, #d9d28a22, #d9d28aaa); }
.camp-native-radial-palette.callouts-left .camp-native-radial-callout { left: -500px; }
.camp-native-radial-palette.callouts-left .camp-native-radial-callout::after { right: -52px; }
.camp-native-radial-palette.callouts-right .camp-native-radial-callout { left: 276px; }
.camp-native-radial-palette.callouts-right .camp-native-radial-callout::after { left: -52px; transform: rotate(180deg); }
.camp-native-radial-callout.is-workers { top: -142px; }
.camp-native-radial-callout.is-tools { top: 70px; width: 286px; }
.camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-tools { left: -562px; }
.camp-native-radial-callout.is-queue { top: -82px; width: 326px; }
.camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-queue { left: 276px; }
.camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-queue::after { left: -52px; right: auto; transform: rotate(180deg); }
.camp-native-radial-palette.callouts-right .camp-native-radial-callout.is-queue { left: -602px; }
.camp-native-radial-palette.callouts-right .camp-native-radial-callout.is-queue::after { left: auto; right: -52px; transform: none; }
.camp-native-radial-callout > header { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #f2edc3; font-size: 12px; }
.camp-native-radial-callout > header b { color: #d8cd7c; font-size: 10px; }
.camp-native-radial-callout.is-workers > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.camp-native-worker-slot { min-width: 0; height: 55px; display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 5px; align-items: center; padding: 5px; border: 1px solid #9da87552; border-radius: 10px; background: #26372c; color: #e9e7c6; cursor: grab; touch-action: none; }
.camp-native-worker-slot i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #5c6246; color: #fff0a4; font-size: 11px; font-style: normal; font-weight: 900; }
.camp-native-worker-slot small { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-worker-slot.is-empty { opacity: .42; cursor: default; }
.camp-native-worker-slot.is-empty i { background: #26342d; }

.camp-native-radial-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.camp-native-radial-tools button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 5px; align-items: center; padding: 6px; border: 1px solid #aaa86a45; border-radius: 9px; background: #1b2b21; color: #e9e2aa; text-align: left; }
.camp-native-radial-tools button > i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #354735; font-size: 12px; font-style: normal; }
.camp-native-radial-tools button > span { min-width: 0; display: grid; gap: 2px; }
.camp-native-radial-tools b, .camp-native-radial-tools small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-radial-tools b { font-size: 10px; }
.camp-native-radial-tools small { color: #a9b4aa; font-size: 8px; }
.camp-native-radial-tool-editor { min-height: 58px; grid-template-columns: 28px minmax(88px, 1fr) repeat(4, 34px); gap: 4px; }
.camp-native-radial-tool-editor b, .camp-native-radial-tool-editor button { font-size: 10px; }
.camp-native-radial-tool-editor small { font-size: 8px; }

.camp-native-live-queue { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 5px; }
.camp-native-queue-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid #98a17038; border-radius: 9px; background: #18271f; }
.camp-native-queue-row.is-active { border-color: #68c88a66; background: #173222; }
.camp-native-queue-row > span { min-width: 0; display: grid; gap: 2px; }
.camp-native-queue-row > span > b, .camp-native-queue-row > span > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-queue-row > span > b { color: #efedc9; font-size: 11px; }
.camp-native-queue-row > span > small { color: #a6b3a8; font-size: 9px; }
.camp-native-queue-row > span > i { height: 3px; overflow: hidden; border-radius: 3px; background: #07110c; }
.camp-native-queue-row > span > i > b { display: block; height: 100%; background: linear-gradient(90deg, #62cd84, #d8d779); }
.camp-native-queue-row > div { display: flex; gap: 3px; }
.camp-native-queue-row > div button { width: 28px; height: 28px; padding: 0; border: 1px solid #aab07755; border-radius: 7px; background: #293a2e; color: #efedc9; font-size: 12px; }
.camp-native-queue-row > div button.is-danger { border-color: #c883715c; color: #ffc0b2; }
.camp-native-queue-row > div button:disabled { opacity: .22; }

.camp-native-activity-palette { width: min(720px, 88vw); max-height: 76vh; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; padding: 12px; }
.camp-native-activity-palette > header > div { min-width: 0; display: grid; gap: 2px; }
.camp-native-activity-palette > header > div small { color: #9eaa9f; font-size: 10px; }
.camp-native-task-battle { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px; border: 1px solid #9177c25c; border-radius: 9px; background: #29203c; }
.camp-native-task-battle > i { width: 8px; height: 8px; border-radius: 50%; background: #ae8ef4; }
.camp-native-task-battle > span { min-width: 0; display: grid; }
.camp-native-task-battle b { color: #eee6ff; font-size: 11px; }
.camp-native-task-battle small { overflow: hidden; color: #bcb0d2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-task-battle button { min-height: 28px; padding: 4px 8px; }
.camp-native-task-groups { min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 7px; align-content: start; overflow: auto; scrollbar-width: thin; }
.camp-native-task-facility { min-width: 0; display: grid; gap: 5px; align-content: start; padding: 7px; border: 1px solid #9b9d6d3d; border-radius: 10px; background: #101c17cc; }
.camp-native-task-facility > header > button { width: 100%; min-height: 32px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px 6px; border: 0; background: transparent; color: #eee9bd; text-align: left; }
.camp-native-task-facility > header > button span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #344735; }
.camp-native-task-facility > header > button b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.camp-native-task-facility > header > button small { color: #aeb8ae; font-size: 9px; }
.camp-native-task-facility .camp-native-live-queue { grid-template-columns: 1fr; }

@media (max-width: 680px) {
  .camp-native-scene-pin { width: 25px; height: 25px; opacity: .16; }
  .camp-native-scene-pin i { width: 9px; height: 9px; }
  .camp-native-radial-wheel { width: 282px; height: 282px; }
  .camp-native-radial-wheel::after { inset: 58px; }
  .camp-native-radial-center { width: 118px; min-height: 108px; gap: 3px; padding: 7px; }
  .camp-native-radial-facility-art { width: 38px; height: 34px; font-size: 12px; }
  .camp-native-radial-center > strong { max-width: 106px; font-size: 12px; }
  .camp-native-radial-center > small { max-width: 108px; font-size: 8px; }
  .camp-native-radial-progress > span, .camp-native-radial-facts { font-size: 8px; }
  .camp-native-radial-facts span:nth-child(3) { display: inline; width: 100%; text-align: center; }
  .camp-native-radial-choice { width: 43px; height: 45px; grid-template-columns: 27px 0fr; padding: 5px 7px; border-radius: 12px; }
  .camp-native-radial-choice > span { width: 27px; height: 27px; border-radius: 8px; font-size: 10px; }
  .camp-native-radial-choice:hover, .camp-native-radial-choice:focus-visible { width: 132px; grid-template-columns: 27px minmax(0, 1fr); gap: 1px 5px; }
  .camp-native-radial-choice b { font-size: 9px; }
  .camp-native-radial-choice small { font-size: 8px; }
  .camp-native-radial-choice:hover b, .camp-native-radial-choice:hover small,
  .camp-native-radial-choice:focus-visible b, .camp-native-radial-choice:focus-visible small { max-width: 88px; }
  .camp-native-radial-back { left: -152px; top: -140px; width: 62px; height: 29px; font-size: 9px; }
  .camp-native-radial-palette.callouts-right .camp-native-radial-back { left: 90px; }
  .camp-native-radial-pages { top: 148px; height: 28px; }
  .camp-native-radial-callout,
  .camp-native-radial-palette.callouts-left .camp-native-radial-callout,
  .camp-native-radial-palette.callouts-right .camp-native-radial-callout { left: -132px; width: 264px; padding: 7px; }
  .camp-native-radial-callout::after { left: 50% !important; right: auto !important; top: auto; width: 1px; height: 35px; transform: none !important; background: linear-gradient(#d9d28aaa, #d9d28a22); }
  .camp-native-radial-callout.is-workers { top: -249px; }
  .camp-native-radial-callout.is-workers::after { bottom: -35px; }
  .camp-native-radial-callout.is-tools,
  .camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-tools { left: -132px; top: 174px; width: 264px; }
  .camp-native-radial-callout.is-tools::after { top: -35px; background: linear-gradient(#d9d28a22, #d9d28aaa); }
  .camp-native-radial-callout.is-queue,
  .camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-queue,
  .camp-native-radial-palette.callouts-right .camp-native-radial-callout.is-queue { left: -132px; top: -260px; width: 264px; transform: translateY(-100%); }
  .camp-native-radial-callout.is-queue::after,
  .camp-native-radial-palette.callouts-left .camp-native-radial-callout.is-queue::after,
  .camp-native-radial-palette.callouts-right .camp-native-radial-callout.is-queue::after { left: 50%; right: auto; top: auto; bottom: -35px; width: 1px; height: 35px; transform: none; background: linear-gradient(#d9d28aaa, #d9d28a22); }
  .camp-native-radial-callout > header { font-size: 10px; }
  .camp-native-worker-slot { height: 43px; grid-template-columns: 22px minmax(0, 1fr); padding: 4px; }
  .camp-native-worker-slot i { width: 22px; height: 22px; font-size: 9px; }
  .camp-native-worker-slot small { font-size: 8px; }
  .camp-native-radial-tools button { min-height: 47px; grid-template-columns: 20px minmax(0, 1fr); gap: 3px; padding: 4px; }
  .camp-native-radial-tools button > i { width: 20px; height: 20px; font-size: 9px; }
  .camp-native-radial-tools b { font-size: 8px; }
  .camp-native-radial-tools small { font-size: 7px; }
  .camp-native-radial-tool-editor { min-height: 46px; grid-template-columns: 22px minmax(62px, 1fr) repeat(4, 27px); gap: 2px; }
  .camp-native-radial-tool-editor b, .camp-native-radial-tool-editor button { font-size: 8px; }
  .camp-native-radial-tool-editor small { font-size: 7px; }
  .camp-native-radial-callout.is-queue .camp-native-live-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .camp-native-radial-callout.is-queue .camp-native-live-queue { max-height: 150px; overflow: auto; scrollbar-width: thin; }
  .camp-native-radial-callout.is-queue .camp-native-queue-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 4px; }
  .camp-native-radial-callout.is-queue .camp-native-queue-row > div { justify-content: flex-end; }
  .camp-native-radial-callout.is-queue .camp-native-queue-row > div button { width: 24px; height: 22px; font-size: 9px; }
  .camp-native-activity-palette { width: min(356px, 92vw); max-height: 78vh; padding: 9px; }
  .camp-native-task-groups { grid-template-columns: 1fr; }
  .camp-native-task-facility { padding: 5px; }
  .camp-native-queue-row > span > b { font-size: 10px; }
  .camp-native-queue-row > span > small { font-size: 8px; }
}

/* Slice 23 cascade overrides: keep the category/tier language above the legacy component skins. */
.recipe-icon-card.production-project-card,
.camp-native-project-grid > button,
.camp-native-inventory-grid > button,
.inventory-card,
.camp-native-order-product {
  border-color: color-mix(in srgb, var(--item-accent, #73819a) 68%, #1a2330);
  background: linear-gradient(145deg, var(--item-soft, #17202c), #0d161d);
}
.recipe-icon-card.production-project-card .recipe-product-icon,
.camp-native-project-grid > button > span,
.camp-native-inventory-grid > button > span,
.inventory-card .inventory-icon,
.camp-native-order-product > span {
  border: 1px solid color-mix(in srgb, var(--item-accent, #73819a) 70%, transparent);
  background: var(--item-soft, #26323b);
  color: var(--item-ink, #eef3fb);
}
.camp-native-radial-choice.is-recipe {
  border-color: color-mix(in srgb, var(--item-accent, #c3bc71) 75%, #223126);
  background: linear-gradient(145deg, var(--item-soft, #24362b), #101b16);
}
.camp-native-radial-choice.is-recipe > span {
  border-color: var(--item-accent, #f1e9a8);
  background: var(--item-soft, #273d31);
  color: var(--item-ink, #fff2a7);
}
.camp-native-ground-drop {
  border-color: color-mix(in srgb, var(--item-accent, #e7cf72) 72%, transparent);
  background: linear-gradient(145deg, var(--item-soft, #585135), #12201b);
  color: var(--item-ink, #fff2b4);
}
.camp-native-ground-drop > span { background: var(--item-soft, #816d35); color: var(--item-accent, #fff2b4); }
.camp-native-facility-card.appearance-facility-primary { border-color: #ddea74; border-radius: 18px 18px 8px 8px; background: linear-gradient(145deg, #526d38f5, #172b20fa); }
.camp-native-facility-card.appearance-facility-secondary { border-color: #ff9d62; border-radius: 6px; background: linear-gradient(145deg, #754128f5, #2b1b18fa); }
.camp-native-facility.facility-layer-primary .camp-native-facility-art { border-color: #79df91; border-radius: 26px 26px 10px 10px; background: linear-gradient(145deg, #667c46, #294b36 58%, #153229); box-shadow: inset 0 8px 0 #9bd16918, 0 13px 20px #0007; }
.camp-native-facility.facility-layer-secondary .camp-native-facility-art { border: 2px solid #f09a5e; border-radius: 5px; background: repeating-linear-gradient(135deg, #6b4934 0 9px, #3e3029 9px 18px); box-shadow: inset 0 0 0 4px #151d19b0, 0 13px 20px #0008; }
.camp-native-radial-back {
  width: 104px; height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 9px;
  border: 0; border-radius: 0; clip-path: polygon(0 50%, 20% 0, 100% 0, 100% 100%, 20% 100%);
  background: linear-gradient(105deg, #ffea43, #ff7b32 56%, #e83b79); box-shadow: 0 0 25px #ff983b8c;
  color: #251109; text-shadow: 0 1px #fff7a1;
}
.camp-native-radial-back > span { font-size: 24px; font-weight: 1000; line-height: 1; }
.camp-native-radial-back > b { font-size: 10px; font-weight: 1000; white-space: nowrap; }

@media (max-width: 680px) {
  .camp-native-radial-back { left: -152px; top: -140px; width: 86px; height: 34px; padding-right: 11px; }
  .camp-native-radial-palette.callouts-right .camp-native-radial-back { left: 74px; }
  .camp-native-radial-back > span { font-size: 19px; }
  .camp-native-radial-back > b { font-size: 8px; }
}