:root {
  --bg: #0f1014;
  --panel: #181b22;
  --panel-soft: #20242d;
  --panel-dark: #11141a;
  --border: #353b49;
  --border-soft: rgba(255, 255, 255, 0.085);
  --text: #f2efe8;
  --muted: #aeb4c2;

  --food-bg: rgba(150, 54, 45, 0.26);
  --food-border: rgba(218, 93, 74, 0.65);
  --food-glow: rgba(218, 93, 74, 0.08);

  --wood-bg: rgba(126, 87, 41, 0.28);
  --wood-border: rgba(199, 142, 65, 0.65);
  --wood-glow: rgba(199, 142, 65, 0.08);

  --gold-bg: rgba(190, 150, 44, 0.25);
  --gold-border: rgba(239, 201, 83, 0.65);
  --gold-glow: rgba(239, 201, 83, 0.08);

  --favor-bg: rgba(68, 102, 186, 0.25);
  --favor-border: rgba(112, 153, 247, 0.65);
  --favor-glow: rgba(112, 153, 247, 0.08);

  --pop-bg: rgba(170, 170, 170, 0.18);
  --pop-border: rgba(220, 220, 220, 0.45);
  --pop-glow: rgba(220, 220, 220, 0.06);

  --action-bg: rgba(255, 255, 255, 0.055);
  --action-border: rgba(255, 255, 255, 0.14);

  --portrait-ring-1: #d4b36a;
  --portrait-ring-2: #8f6b2e;
  --portrait-shadow: rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 6%, rgba(36, 115, 126, 0.18), transparent 34rem),
    linear-gradient(180deg, rgba(5, 15, 28, 0.32), #06101d 46rem, #07111d 100%);
  color: var(--text);
  font-family: var(--site-font-body, Baskervville, Georgia, serif);
  overflow-x: hidden;
}

.page {
  width: 100%;
  min-height: 100vh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.private-preview-banner {
  width: min(1480px, 100%);
  margin: 0 auto 12px;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #f7e9c1;
  background: rgba(20, 34, 58, 0.94);
  border: 1px solid rgba(221, 181, 94, 0.52);
  border-radius: var(--site-radius-md, 8px);
}

.private-preview-banner strong {
  font-family: "Cinzel", Georgia, serif;
}

.build-author-attribution {
  margin-top: 10px !important;
  font-size: 14px !important;
}

.build-author-attribution a {
  color: #e8c46f;
}

.build-card {
  width: min(1480px, 100%);
  background:
    linear-gradient(180deg, rgba(255, 232, 158, 0.055), rgba(1, 8, 18, 0.15)),
    rgba(3, 13, 27, 0.76);
  border: 1px solid rgba(221, 181, 94, 0.42);
  border-radius: var(--site-radius-md, 8px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Header */

.build-header {
  position: relative;
  min-height: 190px;
  padding: 30px 34px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 228, 157, 0.15), transparent 36%),
    radial-gradient(circle at 18% 0%, rgba(255, 228, 157, 0.1), transparent 32%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border);
}

.build-title-side {
  min-width: 0;
  max-width: 520px;
  justify-self: start;
  align-self: start;
  text-align: left;
  z-index: 2;
}

.build-portrait-side {
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.build-goal-side {
  grid-column: 3;
  justify-self: end;
  align-self: start;
  z-index: 2;
  min-width: 0;
}

.detail-god-crest {
  position: relative;
  width: 390px;
  height: 150px;
  flex: 0 0 auto;
  isolation: isolate;
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 20px rgba(255, 228, 157, 0.14));
}

.detail-god-ring,
#detailGodRing {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.detail-god-icon,
#buildPortrait {
  position: absolute;
  left: 50%;
  top: 23px;
  z-index: 5;
  width: 108px;
  height: 108px;
  transform: translateX(-50%);
  border-radius: 999px;
  object-fit: cover;
  object-position: center 28%;
  background: #111;
  pointer-events: none;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(255, 229, 166, 0.72),
    0 0 18px rgba(255, 225, 160, 0.14);
}

.kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 7px;
  color: #d6b25d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker-link {
  text-decoration: none;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.kicker-link:hover {
  color: #f7e9c1;
  text-shadow: 0 0 14px rgba(214, 178, 93, 0.34);
}

.build-title-side h1 {
  margin: 0 0 8px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.035em;
  color: #f7e9c1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 0 18px rgba(214, 178, 93, 0.12);
}

.build-title-side p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.goal-card {
  width: 220px;
  min-width: 190px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 228, 157, 0.12), transparent 52%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.goal-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.goal-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.goal-card-copy span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.goal-card img,
.goal-age-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.goal-card strong {
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
}

/* Shortcode icons */

.shortcode-icon {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  display: inline-block;
  vertical-align: -0.19em;
  margin: 0 0.16em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.resource-pill .shortcode-icon,
.action-box .shortcode-icon,
.note .shortcode-icon,
.phase-label .shortcode-icon,
.goal-card .shortcode-icon,
.title-block .shortcode-icon,
.build-title-side .shortcode-icon {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
}

/* Toolbar */

.build-toolbar {
  padding: 16px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(0, 0, 0, 0.13);
}

.build-picker-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.build-picker-wrap label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.build-picker {
  width: min(360px, 48vw);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.build-picker:focus {
  border-color: rgba(214, 178, 93, 0.7);
  box-shadow: 0 0 0 3px rgba(214, 178, 93, 0.12);
}

.build-picker option {
  background: #181b22;
  color: #f2efe8;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */

.small-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(214, 178, 93, 0.28), rgba(143, 107, 46, 0.22));
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.small-button:hover {
  border-color: rgba(255, 228, 157, 0.45);
  background: linear-gradient(135deg, rgba(214, 178, 93, 0.36), rgba(143, 107, 46, 0.28));
}

.small-button.secondary {
  background: rgba(255, 255, 255, 0.055);
}

.small-button.danger {
  background: rgba(170, 50, 50, 0.18);
  border-color: rgba(255, 90, 90, 0.35);
}

.small-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Table */

.build-order-table {
  width: 100%;
}

.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.build-steps-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 14px;
}

.build-steps-table col.time-col {
  width: 7.5rem;
}

.build-steps-table col.resource-col {
  width: auto;
}

.build-steps-table col.action-col {
  width: 100%;
}

.build-steps-table col.distribution-col {
  width: 13.5rem;
}

.build-steps-table thead th {
  height: 46px;
  padding: 10px 12px;
  background: rgba(4, 10, 20, 0.92);
  border-bottom: 1px solid rgba(221, 181, 94, 0.28);
  color: rgba(255, 242, 212, 0.86);
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.build-steps-table thead th:nth-child(2),
.build-steps-table thead th:nth-child(3),
.build-steps-table thead th:nth-child(4),
.build-steps-table thead th:nth-child(5) {
  text-align: center;
}

.build-steps-table tbody tr {
  height: 74px;
  background: rgba(255, 255, 255, 0.012);
}

.build-steps-table tbody tr.is-alt {
  background: rgba(255, 255, 255, 0.022);
}

.build-steps-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.048);
}

.build-steps-table tbody td {
  height: 74px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  vertical-align: middle;
  min-width: 0;
}

.time-cell {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.resource-cell {
  text-align: center;
  overflow: visible;
  width: 1%;
  white-space: nowrap;
}

.resource-cell:empty {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.012), transparent);
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}

.resource-pill strong {
  display: inline-block;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  word-break: normal;
}

.resource-pill.food {
  background:
    linear-gradient(90deg, rgba(218, 93, 74, 0.24), rgba(218, 93, 74, 0.07)),
    rgba(5, 12, 22, 0.38);
  border: 1px solid var(--food-border);
  box-shadow: inset 0 0 18px var(--food-glow);
}

.resource-pill.wood {
  background:
    linear-gradient(90deg, rgba(199, 142, 65, 0.24), rgba(199, 142, 65, 0.07)),
    rgba(5, 12, 22, 0.38);
  border: 1px solid var(--wood-border);
  box-shadow: inset 0 0 18px var(--wood-glow);
}

.resource-pill.gold {
  background:
    linear-gradient(90deg, rgba(239, 201, 83, 0.24), rgba(239, 201, 83, 0.07)),
    rgba(5, 12, 22, 0.38);
  border: 1px solid var(--gold-border);
  box-shadow: inset 0 0 18px var(--gold-glow);
}

.resource-pill.favor {
  background:
    linear-gradient(90deg, rgba(112, 153, 247, 0.24), rgba(112, 153, 247, 0.07)),
    rgba(5, 12, 22, 0.38);
  border: 1px solid var(--favor-border);
  box-shadow: inset 0 0 18px var(--favor-glow);
}

.resource-pill.pop {
  background: var(--pop-bg);
  border: 1px solid var(--pop-border);
  box-shadow: inset 0 0 18px var(--pop-glow);
}

.action-cell {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.action-box {
  display: block;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--action-bg);
  border: 1px solid var(--action-border);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow: visible;
}

.action-box > span {
  display: inline;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
}

.note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.36;
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
}

.distribution-cell {
  min-width: 0;
  overflow: hidden;
}

.villager-distribution {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  color: #f2efe8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.distribution-part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: 28px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}

.distribution-divider {
  display: inline;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 700;
}

.distribution-value {
  color: #ffffff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.distribution-icon,
.mini-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -3px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

/* Milestones */

.phase-row {
  background:
    linear-gradient(90deg, rgba(214, 178, 93, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.018) !important;
}

.phase-row td {
  border-bottom-color: rgba(214, 178, 93, 0.22);
}

.phase-cell {
  padding: 9px 14px !important;
}

.phase-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: #f7e9c1;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.phase-note {
  margin-top: 4px;
  color: rgba(242, 239, 232, 0.72);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}

.phase-row-minor {
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.012) !important;
}

.phase-row-minor td {
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.phase-row-minor .phase-label {
  color: rgba(242, 239, 232, 0.82);
  font-size: 12px;
  letter-spacing: 0.11em;
}

.phase-row-minor .phase-note {
  color: rgba(174, 180, 194, 0.72);
}

/* Empty states */

.empty-build-state {
  padding: 42px 24px;
  color: var(--muted);
  text-align: center;
}

.empty-build-state h2 {
  margin: 0 0 8px;
  color: #f7e9c1;
  font-family: "Cinzel", Georgia, serif;
  font-size: 24px;
}

.empty-build-state p {
  margin: 0;
  line-height: 1.45;
}

/* Source credit and lifecycle notices */

.build-source-credit {
  max-width: 1040px;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(204, 170, 98, 0.24);
  border-radius: 10px;
  background: rgba(9, 12, 18, 0.38);
  color: rgba(242, 225, 178, 0.78);
  font-family: Baskervville, Georgia, serif;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  text-align: center;
}

.build-source-credit p {
  margin: 0;
}

.build-source-credit p + p { margin-top: 0.45rem; }
.build-source-credit a { color: #f7e9c1; font-weight: 800; text-underline-offset: 0.2em; }
.build-status-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  color: #fff0b2;
  font-weight: 800;
}
.build-status-notice img { width: 28px; height: 28px; image-rendering: auto; }
.build-status-notice.is-deprecated { color: rgba(242, 239, 232, 0.8); }

/* Goal card layout override */

.build-goal-side .goal-card {
  width: auto !important;
  min-width: 240px;
  padding: 12px 16px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.build-goal-side .goal-icon-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 5px !important;
  grid-column: 1 !important;
}

.build-goal-side .goal-icon-stack > span {
  display: block !important;
  grid-row: 1 !important;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.build-goal-side .goal-icon-stack > img {
  display: block !important;
  grid-row: 2 !important;
  width: 58px !important;
  height: 58px !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.build-goal-side .goal-card > strong {
  display: block !important;
  grid-column: 2 !important;
  align-self: center !important;
  min-width: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.25;
}

.build-goal-side .goal-card > span,
.build-goal-side .goal-card > img {
  display: none !important;
}

/* Pantheon theme (see static/css/ds_pantheon_tokens.css for the token map).
   Scoped entirely under [data-pantheon] so a build with no resolved pantheon
   keeps the original page treatment above unchanged. */

[data-pantheon] .build-card {
  background: var(--pantheon-page);
  background: color-mix(in srgb, var(--pantheon-surface) 50%, var(--pantheon-page));
  /* The frame sprites have transparent outer margins; keep the fill inside. */
  background-clip: padding-box;
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  border-image-source: var(--pantheon-frame-full);
  border-image-slice: 51 47 51 47;
  border-image-width: 1;
  border-image-repeat: round;
  border-image-outset: 0;
  border-radius: 0;
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.28);
}

/* The ornate rule_victory_bottom art replaces the plain gold header-bottom
   border outright -- it is the boundary between the hero and the Switch
   Build toolbar, not a decorative flourish, so it spans the header's full
   inner width rather than sitting as a centered fixed-width ornament. */

[data-pantheon] .build-header {
  border-bottom: 0;
  background: linear-gradient(180deg, var(--pantheon-section-top), var(--pantheon-section-bottom));
}

[data-pantheon] .build-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: var(--pantheon-rule-victory-bottom) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 10;
}

[data-pantheon] .build-steps-table thead th {
  background: linear-gradient(180deg, var(--pantheon-table-head-top), var(--pantheon-table-head-bottom));
  border-bottom-color: var(--pantheon-table-rule);
}

[data-pantheon] .build-steps-table tbody tr {
  background: var(--pantheon-table-body);
}

[data-pantheon] .build-steps-table tbody tr.is-alt {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025)),
    var(--pantheon-table-body);
}

[data-pantheon] .build-steps-table tbody tr:hover {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    var(--pantheon-table-body);
}

/* Milestone rows: restrained pantheon tint over a dark wash, so a major
   milestone reads as belonging to the pantheon without outshining the
   table header, and a minor milestone stays quieter still. */

[data-pantheon] .phase-row {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62)),
    linear-gradient(90deg, var(--pantheon-section-top), var(--pantheon-section-bottom)) !important;
}

[data-pantheon] .phase-row td {
  border-bottom-color: var(--pantheon-section-rule);
}

[data-pantheon] .phase-row-minor {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.74)),
    linear-gradient(90deg, var(--pantheon-section-top), var(--pantheon-section-bottom)) !important;
}

/* Milestone banners. Emphasis is presentation priority only: every major
   milestone gets this one banner and every minor milestone the quieter bar,
   whatever the author's label says. These rules key off the two classes the
   template emits from step_kind() and nothing else: no label text, no data
   attributes, no icons or generated glyphs (the only generated content is the
   empty trailing hairline). The label and recorded time are not restyled
   beyond size and colour. The stacked phone version sits in the 760px block
   below; sticky position and handoff come from the rules there. */

.build-steps-table .phase-row {
  --ms-gold: var(--pantheon-metal-light, #e8c46f);
  --ms-wash-a: var(--pantheon-section-top, #3a2d10);
  --ms-wash-b: var(--pantheon-section-bottom, #1d1608);
}

.build-steps-table .phase-row:not(.phase-row-minor) {
  background:
    linear-gradient(90deg, rgba(232, 196, 111, 0.2), rgba(232, 196, 111, 0.04) 72%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.46)),
    linear-gradient(90deg, var(--ms-wash-a), var(--ms-wash-b)) !important;
}

/* The top hairline is an inset shadow, not a border: under border-collapse the
   previous row's bottom border wins a tie and swallowed it. */
.build-steps-table .phase-row:not(.phase-row-minor) td {
  border-bottom: 1px solid rgba(169, 128, 47, 0.75);
  box-shadow: inset 0 1px 0 rgba(232, 196, 111, 0.4);
}

.build-steps-table .phase-row:not(.phase-row-minor) > td:first-child {
  box-shadow:
    inset 4px 0 0 var(--ms-gold),
    inset 0 1px 0 rgba(232, 196, 111, 0.4);
}

.build-steps-table .phase-row:not(.phase-row-minor) .phase-cell {
  padding: 13px 14px !important;
}

.build-steps-table .phase-row:not(.phase-row-minor) .phase-label {
  color: #fff3cf;
  font-size: 15px;
  letter-spacing: 0.17em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* Purely ornamental fading rule after whatever the author wrote. */
.build-steps-table .phase-row:not(.phase-row-minor) .phase-label::after {
  content: "";
  flex: 1 1 24px;
  align-self: center;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, rgba(232, 196, 111, 0.5), rgba(232, 196, 111, 0));
}

/* tr. keeps this above the phone-block [data-pantheon] .phase-row-minor rule,
   which ties on specificity and comes later in the file. */
.build-steps-table tr.phase-row-minor {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.76)),
    linear-gradient(90deg, var(--ms-wash-a), var(--ms-wash-b)) !important;
}

.build-steps-table .phase-row-minor td {
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.build-steps-table .phase-row-minor > td:first-child {
  box-shadow: inset 2px 0 0 rgba(190, 198, 212, 0.5);
}

.build-steps-table .phase-row-minor .phase-cell {
  padding: 6px 14px !important;
}

.build-steps-table .phase-row-minor .phase-label {
  color: rgba(242, 239, 232, 0.84);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

/* Milestone rows no longer inherit the 74px instruction-row height. */
@media (min-width: 761px) {
  .build-steps-table tbody tr.phase-row:not(.phase-row-minor),
  .build-steps-table tbody tr.phase-row:not(.phase-row-minor) td {
    height: 64px;
  }

  .build-steps-table tbody tr.phase-row-minor,
  .build-steps-table tbody tr.phase-row-minor td {
    height: 38px;
  }
}

/* Pantheon Buttons: an ornate framed plaque built from frame-thin as a
   border-image, not a recolor of the old rounded pill. Primary uses the
   gold/"metal" gradient, secondary/quiet uses the stone gradient, danger
   uses the shared danger gradient; only the fill differs, the frame is
   always frame-thin so it matches whichever pantheon is active. */

[data-pantheon] .small-button {
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  border-image-source: var(--pantheon-frame-thin);
  border-image-slice: 30;
  border-image-repeat: round;
  background: linear-gradient(180deg, var(--pantheon-metal-light), var(--pantheon-metal-dark));
  color: #241a06;
  font-family: Baskervville, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

[data-pantheon] .small-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.5);
}

[data-pantheon] .small-button:active {
  transform: translateY(0);
}

[data-pantheon] .small-button.secondary {
  background: linear-gradient(180deg, var(--pantheon-stone-light), var(--pantheon-stone-dark));
  color: var(--text);
  text-shadow: none;
}

[data-pantheon] .small-button.danger {
  background: linear-gradient(180deg, var(--pantheon-danger-top), var(--pantheon-danger-bottom));
  color: #fbe4e2;
  text-shadow: none;
}

[data-pantheon] .small-button:disabled {
  filter: grayscale(0.5) brightness(0.75);
  transform: none;
  cursor: not-allowed;
}

/* frame-thin as an ornamental top edge on the desktop table header, drawn
   as a decorative overlay so the table markup/columns stay untouched. */

[data-pantheon] .table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  border-style: solid;
  border-width: 10px 0 0 0;
  border-color: transparent;
  border-image-source: var(--pantheon-frame-thin);
  border-image-slice: 30 30 30 30 fill;
  border-image-width: 10px 0 0 0;
  border-image-repeat: round;
}

@media (max-width: 820px) {
  [data-pantheon] .build-card {
    border-width: 18px;
  }
}

@media (max-width: 520px) {
  [data-pantheon] .build-card {
    border-width: 12px;
  }
}

/* Responsive */

@media (max-width: 1180px) {
  .build-header {
    min-height: 178px;
  }

  .detail-god-crest {
    width: 330px;
    height: 128px;
  }

  .detail-god-icon,
  #buildPortrait {
    top: 15px;
    width: 92px;
    height: 92px;
  }

  .build-goal-side .goal-card {
    min-width: 220px;
  }
}

@media (max-width: 1100px) {
  .build-header {
    gap: 22px;
  }

  .build-steps-table {
    font-size: 13px;
  }

  .build-steps-table thead th {
    font-size: 12px;
    padding: 11px 6px;
  }

  .build-steps-table tbody td {
    padding: 10px 6px;
  }

  .resource-pill {
    padding: 6px 7px;
    font-size: 12px;
  }

  .action-box {
    padding: 7px 8px;
    font-size: 12px;
  }

  .villager-distribution {
    gap: 5px;
    font-size: 12px;
  }

  .distribution-icon,
  .mini-icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 900px) {
  .build-header {
    grid-template-columns: 1fr;
    min-height: auto;
    justify-items: center;
    text-align: center;
  }


  .build-title-side {
    justify-self: center;
    text-align: center;
  }

  .build-portrait-side {
    position: static;
    transform: none;
    pointer-events: auto;
    order: 2;
  }

  .build-goal-side {
    grid-column: auto;
    justify-self: center;
    width: 100%;
  }

  .build-goal-side .goal-card {
    width: 100% !important;
    max-width: 100%;
  }

  .build-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .build-picker-wrap {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
  }

  .build-picker {
    width: 100%;
  }

  .toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .page {
    padding: 8px;
  }

  .build-header {
    padding: 20px;
  }

  .detail-god-crest {
    width: 260px;
    height: 100px;
  }

  .detail-god-icon,
  #buildPortrait {
    top: 11px;
    width: 72px;
    height: 72px;
  }

  .build-title-side h1 {
    font-size: 24px;
  }

  .build-title-side p {
    font-size: 13px;
  }

  .build-toolbar {
    padding: 14px 20px;
  }

  .toolbar-actions {
    width: 100%;
  }

  .toolbar-actions .small-button {
    flex: 1;
  }
}

@media (max-width: 760px) {
  /* Compact phone header: title beside a small portrait, goal as one row,
     so the first steps start near the top of the first screen. */
  .build-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title portrait"
      "goal goal";
    justify-items: stretch;
    align-items: center;
    gap: 12px 12px;
    padding: 16px 16px 20px;
    text-align: left;
  }

  .build-title-side {
    grid-area: title;
    justify-self: stretch;
    text-align: left;
  }

  .kicker {
    margin-bottom: 4px;
  }

  /* Larger tap area for the god link without moving the title. */
  .kicker-link {
    position: relative;
  }

  .kicker-link::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }

  .build-title-side h1 {
    margin-bottom: 4px;
    font-size: 22px;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
  }

  .build-title-side p {
    font-size: 13.5px;
    line-height: 1.4;
  }

  .build-author-attribution {
    margin-top: 4px !important;
    font-size: 13px !important;
  }

  .build-portrait-side {
    grid-area: portrait;
    align-self: start;
  }

  .detail-god-crest {
    width: 64px;
    height: 64px;
  }

  .detail-god-ring,
  #detailGodRing {
    display: none;
  }

  .detail-god-icon,
  #buildPortrait {
    top: 0;
    width: 64px;
    height: 64px;
  }

  .build-goal-side {
    grid-area: goal;
  }

  .build-goal-side .goal-card {
    min-width: 0;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 12px;
  }

  .build-goal-side .goal-icon-stack {
    grid-template-columns: auto auto !important;
    gap: 8px !important;
  }

  .build-goal-side .goal-icon-stack > span {
    grid-row: 1 !important;
    font-size: 10px;
  }

  .build-goal-side .goal-icon-stack > picture {
    display: block;
    grid-row: 1 !important;
  }

  .build-goal-side .goal-icon-stack > img,
  .build-goal-side .goal-icon-stack > picture > img {
    display: block;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
  }

  .build-goal-side .goal-card > strong {
    font-size: 14px;
    text-align: left;
  }

  /* Picker and Back share one row when they fit. */
  .build-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    padding: 10px 12px 12px;
  }

  .build-picker-wrap {
    flex: 1 1 180px;
    width: auto;
    gap: 4px;
  }

  .build-picker-wrap label {
    font-size: 10px;
  }

  .build-picker {
    min-height: 44px;
    padding: 8px 10px;
    /* 16px keeps iOS Safari from zooming the page when the select opens. */
    font-size: 16px;
  }

  .toolbar-actions {
    width: auto;
    flex: 0 1 auto;
  }

  .toolbar-actions .small-button {
    flex: 0 0 auto;
    min-height: 44px;
  }

  /* clip, not hidden: a hidden ancestor would become the scroll container
     and stop milestone rows from sticking to the viewport. */
  .build-card {
    overflow: clip;
  }

  .table-wrap {
    overflow: visible;
  }

  .build-steps-table,
  .build-steps-table thead,
  .build-steps-table tbody,
  .build-steps-table th,
  .build-steps-table td,
  .build-steps-table tr {
    display: block;
  }

  .build-steps-table thead {
    display: none;
  }

  /* The wash sits on the table: each major milestone has its own tbody,
     and a per-tbody gradient would band at every phase boundary. */
  .build-steps-table {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.08)),
      rgba(0, 0, 0, 0.12);
  }

  .build-steps-table tbody {
    display: grid;
    gap: 8px;
    padding: 6px;
  }

  .build-steps-table tbody + tbody {
    padding-top: 0;
  }

  .build-steps-table tbody tr { height: auto; }

  /* One step = one card: a full-width header strip (time on the left, the
     villager distribution on the right in HUD order) above a full-width
     body (resource moves, action, note). The strip is built from the time
     and distribution cells themselves: both bleed to the card edges with
     negative margins and grow to fill their line, so together they read as
     one bar. The distribution's min-width leaves no room on the first line
     for anything but the time, so the body always starts on a new line;
     when the counts do not fit beside the time they wrap to a second
     strip line instead of shrinking. */
  .build-steps-table tbody tr.build-step-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    gap: 0;
    padding: 0 12px 11px;
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
      rgba(14, 17, 23, 0.9);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  }

  .build-steps-table tbody tr.build-step-row.is-alt,
  .build-steps-table tbody tr.build-step-row:hover {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
      rgba(20, 24, 32, 0.94);
  }

  .build-steps-table tbody td {
    /* Reset the desktop 74px row height: as stacked blocks, a fixed
       height lets a long note spill over the next cell. */
    height: auto;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
  }

  .build-step-row > td.is-empty {
    display: none !important;
  }

  .build-step-row .time-cell,
  .build-step-row .distribution-cell {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0 -12px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Opaque: the two cells overlap by the bleed, and a translucent fill
       would show a darker seam there. */
    background: #0b0e13;
  }

  .build-step-row .time-cell {
    flex: 1 0 auto;
    order: 1;
    min-width: 0;
    color: #f3d38a;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.03em;
  }

  .build-step-row .distribution-cell {
    flex: 1 0 auto;
    order: 2;
    justify-content: flex-end;
    /* Outer width is this minus the 24px of bleed: beside a time of up to
       54px it fills the first line, leaving no room for a resource pill. */
    min-width: calc(100% - 30px);
    max-width: none;
    overflow: visible;
  }

  .build-step-row:has(> .time-cell.is-empty) .distribution-cell {
    min-width: calc(100% + 24px);
  }

  /* Each resource move is its own line, in Food / Wood / Gold / Favor
     order, so a step with several moves reads as a short list. The pill
     keeps its natural width; empty moves are hidden and leave no gap.
     width: auto undoes the desktop 1% column width, which would otherwise
     squeeze the pill down to one character per line. */
  .resource-cell {
    flex: 0 0 100%;
    order: 3;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 9px 0 0;
    text-align: left;
    overflow: visible;
  }

  .resource-cell:not(.is-empty) ~ .resource-cell {
    margin-top: 6px;
  }

  .resource-cell::before {
    display: none;
  }

  .resource-pill {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 30px;
    white-space: normal;
    justify-content: flex-start;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .resource-pill strong {
    display: inline-block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .resource-pill .shortcode-icon {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
  }

  .action-cell {
    flex: 1 0 100%;
    order: 4;
    min-width: 0;
    margin-top: 9px;
    overflow: visible;
  }

  /* The action is the instruction itself: largest, brightest, unboxed. */
  .action-box {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.35;
  }

  .action-box .shortcode-icon {
    width: 19px;
    height: 19px;
  }

  /* Notes often carry real instructions ("Build a House", "Click
     advance"), so they stay at reading size, set off by a rule. */
  .note {
    margin-top: 6px;
    padding-left: 9px;
    border-left: 2px solid rgba(255, 255, 255, 0.16);
    color: rgba(222, 227, 236, 0.86);
    font-size: 13.5px;
    line-height: 1.42;
  }

  .action-cell > .note:first-child {
    margin-top: 0;
  }

  /* The distribution is reference, not instruction: compact icon + count
     chips without the arrows and colours of the moves below. */
  .villager-distribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 3px;
    padding: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.2;
  }

  .distribution-divider {
    display: none;
  }

  /* Icon then count, like the in-game resource panel. A fixed width keeps
     each resource in the same place on every card. */
  .distribution-part {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    min-width: 2.9em;
    height: 24px;
    padding: 0 4px;
    border: 0;
    border-radius: 5px;
    background: none;
  }

  /* Population leads the group, set apart: it is a cap, not a worker count. */
  .distribution-part.distribution-pop {
    order: -1;
    margin-right: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Unchanged counts recede; a count this step changed stands out, tying
     the moves below to the totals they produce. */
  .distribution-value {
    color: rgba(255, 255, 255, 0.66);
    font-weight: 800;
  }

  .distribution-part.is-changed .distribution-value {
    color: #ffe39a;
    font-weight: 900;
  }

  .distribution-icon,
  .mini-icon,
  .distribution-cell .shortcode-icon {
    width: 15px;
    height: 15px;
    margin: 0;
    vertical-align: -3px;
  }

  .phase-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 228, 157, 0.16);
    border-radius: 10px;
    background:
      linear-gradient(90deg, rgba(214, 178, 93, 0.14), rgba(255, 255, 255, 0.045)),
      #11141a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  /* Major milestones (age-ups, phases) stay pinned while their steps
     scroll past, so a long build always shows which phase you are in. */
  .phase-row:not(.phase-row-minor) {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 3;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 6px 14px rgba(0, 0, 0, 0.45);
  }

  .phase-row td {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent !important;
  }

  .phase-row .time-cell {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.24) !important;
    border: 1px solid rgba(255, 228, 157, 0.13);
    color: #f7e9c1;
    font-size: 11px;
    line-height: 1.1;
  }

  .phase-row .time-cell.is-empty {
    display: none;
  }

  .phase-row .phase-cell {
    min-width: 0;
    flex: 1 1 auto;
    padding: 2px 2px !important;
  }

  .phase-label {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.075em;
  }

  .phase-note {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
  }

  .phase-row-minor {
    border-color: rgba(255, 255, 255, 0.085);
    background:
      linear-gradient(90deg, rgba(148, 163, 184, 0.095), rgba(255, 255, 255, 0.025)),
      rgba(17, 20, 26, 0.74) !important;
  }

  [data-pantheon] .phase-row {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.68)),
      linear-gradient(90deg, var(--pantheon-section-top), var(--pantheon-section-bottom)) !important;
    border-color: var(--pantheon-section-rule);
  }

  [data-pantheon] .phase-row-minor {
    border-color: rgba(255, 255, 255, 0.085);
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.78)),
      linear-gradient(90deg, var(--pantheon-section-top), var(--pantheon-section-bottom)) !important;
  }

  /* Milestone banners, stacked phone cards: see the base block after the
     pantheon milestone rules. Sticky position and handoff are unchanged. */
  .build-steps-table .phase-row:not(.phase-row-minor) {
    padding: 7px 12px !important;
    border-color: rgba(232, 196, 111, 0.5);
    border-left: 4px solid var(--ms-gold);
  }

  .build-steps-table .phase-row:not(.phase-row-minor) td {
    border: 0;
    box-shadow: none;
  }

  .build-steps-table .phase-row:not(.phase-row-minor) > td:first-child {
    box-shadow: none;
  }

  .build-steps-table .phase-row:not(.phase-row-minor) .phase-cell {
    padding: 2px !important;
  }

  .build-steps-table .phase-row:not(.phase-row-minor) .phase-label {
    font-size: 12.5px;
    letter-spacing: 0.085em;
  }

  .build-steps-table .phase-row:not(.phase-row-minor) .phase-label::after {
    display: none;
  }

  .build-steps-table .phase-row-minor {
    padding: 5px 10px !important;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .build-steps-table .phase-row-minor td {
    border: 0;
  }

  .build-steps-table .phase-row-minor > td:first-child {
    box-shadow: none;
  }

  .build-steps-table .phase-row-minor .phase-cell {
    padding: 2px !important;
  }

  .build-steps-table .phase-row-minor .phase-label {
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }

  /* No table header exists in the stacked mobile card layout, so the
     frame-thin ornament has nothing to sit on top of here. */
  [data-pantheon] .table-wrap::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .page {
    padding: 6px;
  }

  .build-card {
    border-radius: 12px;
  }

  .build-header {
    padding: 14px 12px 18px;
  }

  .build-title-side h1 {
    font-size: 20px;
  }

  .detail-god-crest,
  .detail-god-icon,
  #buildPortrait {
    width: 56px;
    height: 56px;
  }

  .small-button {
    padding: 9px 12px;
    font-size: 12.5px;
  }

  [data-pantheon] .small-button {
    padding: 0 14px;
  }

  .build-toolbar {
    padding: 10px 10px 12px;
  }

  .build-steps-table tbody {
    gap: 7px;
    padding: 5px;
  }

  .build-steps-table tbody tr.build-step-row {
    padding: 0 10px 10px;
  }

  .build-step-row .time-cell,
  .build-step-row .distribution-cell {
    margin: 0 -10px;
    padding: 5px 10px;
  }

  .build-step-row .distribution-cell {
    min-width: calc(100% - 34px);
  }

  .build-step-row:has(> .time-cell.is-empty) .distribution-cell {
    min-width: calc(100% + 20px);
  }
}

@media (max-width: 360px) {
  .build-title-side h1 {
    font-size: 19px;
  }

  .toolbar-actions {
    flex: 1 1 100%;
  }

  .toolbar-actions .small-button {
    flex: 1 1 0;
  }
}