@charset "UTF-8";
/* SkarCraft web redesign: presentation only. Account and map behavior stay in their existing scripts. */
:root, :root[data-account-theme="dark"] {
  color-scheme: dark;
  --annex-bg: #0c1427;
  --annex-surface: #14213b;
  --annex-inset: #101b30;
  --annex-raised: #1b2d4a;
  --annex-ink: #f5f6fa;
  --annex-muted: #aeb9ce;
  --annex-line: #ffffff1f;
  --annex-gold: #edc06c;
  --annex-accent: #244db8;
  --annex-radius: 14px;
  --royal-background: var(--annex-bg);
  --royal-surface: var(--annex-surface);
  --royal-inset: var(--annex-inset);
  --royal-ink: var(--annex-ink);
  --royal-muted: var(--annex-muted);
  --royal-gold: var(--annex-gold);
  --royal-metal: #bea26f;
  --royal-edge: var(--annex-line);
  --royal-hover: var(--annex-raised);
  --royal-disabled: #8c9bb3;
  --royal-error: #ffb5b0;
  --royal-success: #a8e0bd;
  --account-field: #0e1a2e;
  --account-field-edge: #607599;
  --account-raised: var(--annex-raised);
  --account-selected: #254884;
  --account-divider: var(--annex-line);
  --account-positive: #193b31;
  --account-negative: #402733;
  --bg: var(--annex-bg);
  --paper: var(--annex-surface);
  --card: var(--annex-surface);
  --ink: var(--annex-ink);
  --muted: var(--annex-muted);
  --gold: var(--annex-gold);
  --line: var(--annex-line);
  --forest: #254b9e;
  --deep: #101b30;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}
/* The account's existing script resolves light/dark/system and owns persistence. */
:root[data-account-theme="light"] {
  color-scheme: light;
  --annex-bg: #edf1f8;
  --annex-surface: #fff;
  --annex-inset: #f4f7fc;
  --annex-raised: #e8eef8;
  --annex-ink: #17233b;
  --annex-muted: #586981;
  --annex-line: #ced8e7;
  --annex-gold: #82612e;
  --royal-metal: #ac8749;
  --royal-disabled: #65748a;
  --royal-error: #a83237;
  --royal-success: #236943;
  --account-field: #fff;
  --account-field-edge: #a5b4ca;
  --account-selected: #dce7fc;
  --account-positive: #e5f3e9;
  --account-negative: #fff0ef;
}
.web-annex-page {
  margin: 0;
  padding-bottom: 0;
  background: var(--annex-bg);
  color: var(--annex-ink);
  font: 15px/1.65 var(--sans);
  font-synthesis: none;
}
.web-annex-page :is(h1,h2,h3,h4,.metric-value,.brand,.empty-symbol) {
  font-family: var(--sans);
  color: var(--annex-ink);
}
.web-annex-page :is(.sidebar-note strong,.avatar,.level-track li>span) { font-family: var(--sans); }
.web-annex-page :is(h1,h2,h3) { font-weight: 750; letter-spacing: -.035em; }
.web-annex-page :is(a,button,input,select,textarea,summary) { accent-color: var(--annex-accent); }
.web-annex-page :is(a,button,input,select,textarea,summary,[tabindex="0"]):focus-visible {
  outline: 3px solid var(--annex-gold);
  outline-offset: 4px;
}
.web-annex-page :is(input,select,textarea,button) { font-family: var(--sans); }
.web-annex-page :is(.header,.site-header) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1280px,calc(100% - 48px));
  min-height: 86px;
  margin: 22px auto 0;
  padding: 17px 24px;
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  background: #101b30;
  color: #f5f6fa;
  box-shadow: 0 12px 35px #0002;
}
.web-annex-page .header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0;
}
.web-annex-page .header .brand img {
  display: block;
  width: 240px;
  height: 48px;
  max-width: 100%;
  object-fit: contain;
  content: normal;
  filter: none;
}
.web-annex-page .header .brand small { display: none; }
.web-annex-page .header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px 12px;
}
.web-annex-page .header nav a {
  padding: 9px 3px;
  color: #cad4e5;
  font: 600 12px/1.4 var(--sans);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.web-annex-page .header nav a:hover,
.web-annex-page .header nav a[aria-current="page"] { color: #fff; border-bottom-color: #edc06c; }
.web-annex-page .header nav :is(.nav-account,.nav-download) {
  padding: 10px 12px;
  background: #ffffff09;
  border: 1px solid #ffffff26;
  border-radius: 7px;
}
.web-annex-page :is(.back-link,.header-account,.header-account .text-button) { color: #dce5f5; }
.web-annex-page .header-account { border-color: #ffffff26; }
.web-annex-page .header-account .rank-badge { color: #edc06c; }
.web-annex-page .eyebrow { color: var(--annex-gold); font-family: var(--sans); font-weight: 750; }
.web-annex-page :is(.button,.text-button) { border-radius: 7px; min-height: 44px; font: 650 13px/1.5 var(--sans); }
.web-annex-page .button,
:root[data-account-theme="dark"] .account-page .button {
  background: var(--annex-raised);
  color: var(--annex-ink);
  border: 1px solid var(--annex-line);
  box-shadow: none;
}
.web-annex-page .button:hover,
:root[data-account-theme="dark"] .account-page .button:hover {
  background: var(--account-selected);
  color: var(--annex-ink);
  border-color: var(--annex-gold);
}
.web-annex-page .button.primary,
:root[data-account-theme="dark"] .account-page .button.primary {
  background: #244db8;
  border-color: #244db8;
  color: #fff;
}
.web-annex-page .button.primary:hover,
:root[data-account-theme="dark"] .account-page .button.primary:hover { background: #315ecb; color: #fff; }
.web-annex-page :is(.text-button,.back-link:not(.header-actions .back-link)) { color: var(--annex-gold); }
.web-annex-page :is(input,textarea,select),
:root[data-account-theme="dark"] .account-page :is(input,textarea,select) {
  color: var(--annex-ink);
  background: var(--account-field);
  border-color: var(--account-field-edge);
  border-radius: 6px;
}
.web-annex-page :is(input,textarea)::placeholder { color: var(--annex-muted); opacity: 1; }
.web-annex-page .language-picker {
  position: static;
  inset: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 16px auto;
  padding: 8px 12px;
  border-color: var(--annex-line);
  border-radius: 8px;
  background: var(--annex-inset);
  color: var(--annex-muted);
  box-shadow: none;
  font: 13px/1.4 var(--sans);
}
.web-annex-page .language-picker>span { color: var(--annex-muted); }
.web-annex-page .language-picker button {
  min-height: 36px;
  color: var(--annex-ink);
  border-color: var(--annex-line);
  border-radius: 5px;
  background: var(--annex-surface);
  font: 600 13px/1.3 var(--sans);
}
.web-annex-page .language-picker button[aria-pressed="true"] { background: var(--annex-accent); color: #fff; }
.web-annex-page .site-visitor-stats { color: var(--annex-muted); border-color: var(--annex-line); font-family: var(--sans); }

/* Account: all existing panes, selectors, dialogs, and status states are retained. */
.web-annex-page.account-page { min-width: 0; }
.account-page.web-annex-page .login-layout { padding-top: 55px; }
.account-page.web-annex-page .login-intro h1 { font-size: clamp(38px,4.5vw,58px); line-height: 1.08; }
.account-page.web-annex-page :is(.portal-card,.metric-card,.action-dialog),
:root[data-account-theme="dark"] .account-page :is(.portal-card,.metric-card,.action-dialog) {
  border: 1px solid var(--annex-line);
  border-radius: var(--annex-radius);
  background: var(--annex-surface);
  color: var(--annex-ink);
  box-shadow: 0 8px 24px #00000008;
}
.account-page.web-annex-page .login-card::before { background: #244db8; height: 4px; }
.account-page.web-annex-page :is(.card-heading,.login-feature,.login-foot,.portal-footer,.dialog-heading,.dialog-actions) { border-color: var(--annex-line); }
.account-page.web-annex-page :is(.login-foot,.dialog-actions,.console-command-form) { background: var(--annex-inset); }
.account-page.web-annex-page .login-submit,
:root[data-account-theme="dark"] .account-page .login-submit {
  background: #244db8 !important;
  border-color: #244db8 !important;
  color: #fff !important;
}
.account-page.web-annex-page .login-submit:hover,
:root[data-account-theme="dark"] .account-page .login-submit:hover { background: #315ecb !important; }
.account-page.web-annex-page .password-field button,
:root[data-account-theme="dark"] .account-page .password-field button {
  color: var(--annex-gold);
  background: var(--annex-raised);
  border-color: var(--annex-line);
}
.account-page.web-annex-page .portal-layout { max-width: 1328px; margin: 24px auto 0; padding: 0 24px 24px; gap: 22px; }
.account-page.web-annex-page .portal-sidebar,
:root[data-account-theme="dark"] .account-page .portal-sidebar {
  align-self: start;
  background: var(--annex-inset);
  border: 1px solid var(--annex-line);
  border-radius: var(--annex-radius);
  padding: 24px 14px;
}
.account-page.web-annex-page .portal-content,
:root[data-account-theme="dark"] .account-page .portal-content { padding: 12px 0 0; background: none; }
.account-page.web-annex-page .pane-button { border-radius: 7px; color: var(--annex-muted); }
.account-page.web-annex-page .pane-button:hover { background: var(--annex-raised); color: var(--annex-ink); }
.account-page.web-annex-page .pane-button[aria-current="page"],
:root[data-account-theme="dark"] .account-page .pane-button[aria-current="page"] {
  color: var(--annex-ink);
  background: var(--account-selected);
  border-color: var(--annex-line);
}
.account-page.web-annex-page :is(.sidebar-label,.sidebar-note,.sidebar-note p) { color: var(--annex-muted); }
.account-page.web-annex-page :is(.welcome-panel,.village-banner),
:root[data-account-theme="dark"] .account-page :is(.welcome-panel,.village-banner) {
  background: var(--annex-inset);
  border-color: var(--annex-line);
  color: var(--annex-ink);
}
.account-page.web-annex-page :is(.metric-value,.player-select-button,.level-track .current small) { color: var(--annex-ink); }
.account-page.web-annex-page :is(.history-entry,.price-row,.price-pagination,.draft-entry,.connected-players li,.players-table td,.players-table th,.management-actions,.rank-management,.selected-skin-view,.village-member,.village-role,.village-invitations,.village-role-editor) { border-color: var(--annex-line); }
.account-page.web-annex-page :is(.workshop-availability>div,.confirmation-target,.read-badge,.player-flag,.server-control-state) {
  background: var(--annex-raised);
  border-color: var(--annex-line);
  color: var(--annex-muted);
}
.account-page.web-annex-page .workshop-preview-stage { background: var(--annex-inset); border-color: var(--annex-line); }
.account-page.web-annex-page :is(.read-badge,.player-flag.founder,.workshop-availability strong) { color: var(--annex-gold); }
.account-page.web-annex-page :is(.feature-feedback:not(:empty),.global-feedback:not(:empty),.management-feedback:not(:empty),.login-form .feedback,.ban-details) {
  background: var(--account-negative);
  border-color: var(--royal-error);
  color: var(--royal-error);
}
.account-page.web-annex-page :is(.feature-feedback[data-success="true"],.management-feedback[data-success="true"],.player-flag.online,.server-control-state[data-state="running"]) {
  background: var(--account-positive);
  border-color: var(--royal-success);
  color: var(--royal-success);
}
.account-page.web-annex-page :is(.danger-button,.player-flag.banned,.server-control-state[data-state="stopped"]) {
  background: var(--account-negative);
  border-color: var(--royal-error);
  color: var(--royal-error);
}
.account-page.web-annex-page .level-track li>span { background: var(--annex-raised); color: var(--annex-muted); border-color: var(--annex-line); }
.account-page.web-annex-page .level-track .reached>span { color: var(--annex-gold); background: var(--annex-raised); border-color: var(--annex-gold); }
.account-page.web-annex-page .level-track .current>span { color: #fff; background: #244db8; border-color: #244db8; outline-color: var(--annex-gold); }
.account-page.web-annex-page .server-console { background: #0a1323; color: #dbe5f6; }
.account-page.web-annex-page .action-dialog::backdrop { background: #060e1dcc; }

/* Farming guide: preserve the illustrated equipment and real recipe catalogue. */
.guide-page .site-header .brand {
  display: block;
  flex: 0 0 240px;
  width: 240px;
  height: 48px;
  overflow: hidden;
  background: url('/assets/imperial-logo.png?v=serious2') left center/contain no-repeat;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
}
.guide-page .site-header .brand span { display: none; }
.guide-page .site-header nav { border: 1px solid #ffffff26; border-radius: 7px; padding: 3px; }
.guide-page .site-header button { color: #d5dff0; min-height: 36px; border-radius: 4px; }
.guide-page .site-header button[aria-pressed="true"] { background: #244db8; color: #fff; }
.guide-page main { width: min(1240px,calc(100% - 48px)); padding: 0 0 28px; }
.guide-page .hero { padding: 64px 0 48px; }
.guide-page .hero-copy { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.guide-page .hero h1 { font-size: clamp(38px,4.6vw,64px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.guide-page :is(.hero-intro,.section-intro,.craft-description,.hero-note,.index-note,#recipe-count,.details,.gallery-loading,.empty-results,.load-error) { color: var(--annex-muted); }
.guide-page .image-missing { color: var(--annex-muted); border-color: var(--annex-line); }
.guide-page .hero-intro { font-size: 18px; }
.guide-page :is(.text-link,.chapter-number,.craft-arrow,.station,.choice-note,.ingredient-options summary,.index-mark) { color: var(--annex-gold); }
.guide-page .chapter-nav { padding: 8px 15px; border: 1px solid var(--annex-line); border-radius: 10px; background: var(--annex-inset); gap: 0 15px; justify-content: flex-start; }
.guide-page .chapter-nav a { color: var(--annex-muted); padding: 12px 0; }
.guide-page .chapter-nav a:hover { color: var(--annex-gold); }
.guide-page :is(.guide-card,.first-crafts,.recipe-header,.ingredient-options,.details,footer) { border-color: var(--annex-line); }
.guide-page :is(.equipment-card,.featured-craft,.recipe,.hero-gallery .equipment-card) {
  background: var(--annex-surface);
  border: 1px solid var(--annex-line);
  border-radius: 11px;
  box-shadow: none;
}
.guide-page .hero-gallery:before { background: #244db81a; }
.guide-page .hero-gallery .equipment-card { transform: none; }
.guide-page :is(.equipment-card figcaption,.craft-result figcaption,label,h4) { color: var(--annex-muted); }
.guide-page :is(.craft-cell,.craft-result>.item-art,.recipe-header>.item-art,.ingredient-row>.item-art,.requirement,.modifier-input) {
  background: var(--annex-inset);
  border-color: #ffffff26;
  box-shadow: none;
}
.guide-page .craft-cell.empty { background: #ffffff03; border-color: var(--annex-line); }
.guide-page .craft-cell.empty:before { color: #6f819f; }
.guide-page :is(.variant-badge,.stack-count) { color: #f5e6c7; background: #223a5e; border-color: #826b43; }
.guide-page :is(.modifier-kind,.modifier-duration) { color: var(--annex-gold); }
.guide-page .modifier-effects { background: #1b302f; border-color: #82b697; }
.guide-page footer a { color: var(--annex-gold); }

/* Cartography: theme the surrounding shell; never filter, recolor, or replace the map. */
.map-page.web-annex-page .map-wrap { width: min(1280px,calc(100% - 48px)); padding: 42px 0 24px; }
.map-page .map-heading h1 { font-size: clamp(31px,3.7vw,48px); line-height: 1.15; }
.map-page :is(.map-heading p,.map-caption,.map-wait p,.map-territory-legend p) { color: var(--annex-muted); }
.map-page :is(.map-status-bar,.map-territory-legend) { background: var(--annex-surface); color: var(--annex-ink); border-color: var(--annex-line); }
.map-page .map-status-bar { border-radius: 12px 12px 0 0; }
.map-page .map-territory-legend legend { color: var(--annex-ink); }
.map-page .map-territory-options input { accent-color: #edc06c; }
.map-page .map-window { background: #101b30; border: 1px solid var(--annex-line); border-radius: 0 0 12px 12px; box-shadow: none; }
.map-page .map-wait { background: var(--annex-inset); color: var(--annex-ink); }
.map-page .map-wait>span { color: var(--annex-gold); }
.map-page .map-caption { font-size: 13px; }
.map-page .map-caption a { color: var(--annex-gold); }
.map-page .map-difficulty-key span { color: #eef2fa; }
.map-page .map-window:fullscreen { border: 0; border-radius: 0; }
.map-lite-page :is(.toolbar label,.toolbar select,.toolbar button,.zoom button,#selection,#state,#coords) {
  background: #101b30f5;
  color: #f5f6fa;
  border-color: #889bbd80;
  border-radius: 7px;
  box-shadow: 0 4px 14px #0002;
}
.map-lite-page .toolbar select { background: #101b30; box-shadow: none; }
.map-lite-page :is(.toolbar button,.zoom button):hover { background: #244884; }
.map-lite-page #selection { border-color: #edc06c; }
.map-lite-page #coords { font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .web-annex-page .header { flex-wrap: wrap; }
  .web-annex-page .header nav { justify-content: center; width: 100%; }
  .account-page.web-annex-page .header-actions { margin-left: auto; }
  .account-page.web-annex-page .account-header { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .web-annex-page .header .brand img { width: 195px; height: 39px; }
  .account-page.web-annex-page .portal-layout { gap: 12px; }
  .account-page.web-annex-page .portal-sidebar { padding: 10px; }
  .account-page.web-annex-page .portal-content { padding-top: 10px; }
  .guide-page .site-header .brand { flex-basis: 195px; width: 195px; height: 39px; }
}
@media (max-width: 680px) {
  .web-annex-page :is(.header,.site-header) { width: calc(100% - 28px); margin-top: 14px; padding: 14px 16px; gap: 12px; border-radius: 12px; }
  .web-annex-page .header nav { gap: 4px 13px; }
  .web-annex-page .header nav a { font-size: 12px; }
  .account-page.web-annex-page .header-actions { flex-wrap: wrap; gap: 10px 14px; }
  .account-page.web-annex-page .header-account { flex-wrap: wrap; }
  .account-page.web-annex-page .login-layout { padding: 34px 18px 40px; }
  .account-page.web-annex-page .login-intro h1 { font-size: 37px; }
  .account-page.web-annex-page .portal-layout { padding: 0 14px 20px; margin-top: 18px; }
  .account-page.web-annex-page .metric-grid { grid-template-columns: 1fr; }
  .account-page.web-annex-page .metric-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 16px; }
  .account-page.web-annex-page .metric-label { margin: 0; font-size: 12px; }
  .account-page.web-annex-page .metric-value { grid-column: 2; grid-row: 1 / 3; font-size: 26px; }
  .account-page.web-annex-page .metric-foot { font-size: 11px; margin: 0; }
  .account-page.web-annex-page .definition-grid { grid-template-columns: 1fr; }
  .account-page.web-annex-page .level-track { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 8px; }
  .guide-page .site-header { flex-wrap: wrap; }
  .guide-page .site-header nav { margin-left: auto; }
  .guide-page .site-header button { font-size: 11px; padding: 7px 9px; }
  .guide-page main { width: calc(100% - 36px); }
  .guide-page .hero { padding: 35px 0 30px; }
  .guide-page .hero h1 { font-size: clamp(35px,8.8vw,52px); }
  .guide-page .hero-intro { font-size: 17px; }
  .guide-page .chapter-nav { gap: 0 15px; padding: 8px 12px; }
  .guide-page .chapter-nav a { font-size: 12px; }
  .guide-page .recipe-index h2 { font-size: 29px; }
  .map-page.web-annex-page .map-wrap { width: calc(100% - 28px); padding: 28px 0 18px; }
  .map-page .map-status-bar { align-items: flex-start; }
  .map-page .map-territory-legend { padding-inline: 12px; }
  .map-page .map-territory-options { gap: 12px; }
  .map-page .map-territory-options label { font-size: 13px; }
}
@media (max-width: 360px) {
  .web-annex-page .header .brand img { width: 185px; height: 37px; }
  .guide-page .site-header .brand { flex-basis: 185px; width: 185px; height: 37px; }
  .account-page.web-annex-page .login-form,
  .account-page.web-annex-page .login-card .card-heading,
  .account-page.web-annex-page .login-foot { padding-inline: 18px; }
  .account-page.web-annex-page .page-heading { flex-wrap: wrap; }
  .map-lite-page .toolbar { gap: 6px; }
  .map-lite-page .toolbar label { max-width: calc(100% - 50px); }
  .map-lite-page select { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .web-annex-page *, .web-annex-page *::before, .web-annex-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}