/*
 * SKY SUNDER - Town Preparation pilot
 * Phase 3 real-screen integration, 2026-07-31.
 *
 * Presentation only. Removing this stylesheet and its companion script restores
 * the previous Phase 3 baseline. No gameplay values or event handlers live here.
 */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --ss-font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ss-action-height: 44px;
  --ss-action-min-width: 132px;
  --ss-action-padding-x: 20px;
  --ss-action-duration: 140ms;
  --ss-pilot-rail: 236px;
  --ss-pilot-banner: 304px;
  --ss-pilot-town: 376px;
  --ss-pilot-card: 218px;
}

body:has(#prep:not(.hidden)) {
  --panel: rgba(17, 17, 24, .96);
  --panel-edge: rgba(142, 120, 88, .76);
}

body:has(#prep:not(.hidden)) #prep {
  isolation: isolate;
  /* Current shop/town painting (Dave's framing at center 46% / cover). The older
     prep_town.webp sky-island plate is NOT this — voidbg1 wrongly swapped them. */
  background:
    linear-gradient(180deg, rgba(48, 17, 74, .18), rgba(31, 12, 53, .27)),
    url("town-preparation-background.png") center 46% / cover no-repeat;
  background-color: #090812;
}

body:has(#prep:not(.hidden)) #prep::before {
  content: "";
  position: absolute;
  inset: 64px 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 53% 39%, rgba(138, 61, 255, .04) 0%, rgba(70, 28, 103, .08) 42%, rgba(5, 5, 12, .28) 100%),
    linear-gradient(90deg, rgba(5, 5, 12, .20), transparent 22%, transparent 78%, rgba(5, 5, 12, .22));
}

/* --------------------------------------------------------------------------
   Header and persistent economy controls
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #prepHead {
  min-height: 68px;
  gap: 10px;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 58%),
    linear-gradient(180deg, rgba(14, 14, 19, .985), rgba(18, 17, 24, .95));
  border-bottom: 1px solid rgba(200, 163, 90, .58);
  box-shadow:
    inset 0 -1px 0 rgba(14, 14, 16, .9),
    0 8px 24px rgba(0, 0, 0, .38);
}

body:has(#prep:not(.hidden)) #prepHead .title {
  min-width: 266px;
  color: var(--ss-gold-light);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .76);
}

body:has(#prep:not(.hidden)) #prepHead .pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  color: var(--ss-text-on-dark);
  border: 1px solid rgba(142, 120, 88, .72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
    linear-gradient(180deg, #29282d, #17171b);
  box-shadow: inset 0 0 0 1px rgba(241, 230, 200, .025);
  font-size: 13px;
  line-height: 1.2;
}

/* Gold treasury type inherits the shared UI face (prep-layout owns the full stack). Do not
   reintroduce --ss-font-display here — that was the Cinzel/UI clash with the "Gold" label. */
body:has(#prep:not(.hidden)) #goldPill .goldtxt,
body:has(#prep:not(.hidden)) #goldPill #goldTxt {
  color: var(--ss-gold-light);
  font-family: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body:has(#prep:not(.hidden)) #goldPill #incomeTxt {
  color: var(--ss-gold-light);
  font-family: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body:has(#prep:not(.hidden)) #prepTimer {
  min-width: 58px;
  color: #d9c2ff;
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   Shared action construction. This keeps the button family already approved
   on the review page, including the violet crystal Bazaar purchase action.
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) :is(
  #readyBtn,
  #menuBtn2,
  #rollBtn,
  #lockBtn,
  .bld .ubtn,
  .card .buy,
  .abat .disb
) {
  min-height: var(--ss-action-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--ss-action-padding-x);
  border: 1px solid #8e7858;
  border-radius: 4px;
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 43%),
    linear-gradient(180deg, #2c2b30, #17171b);
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .035),
    0 4px 11px rgba(0, 0, 0, .34);
  font-family: var(--ss-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition:
    transform var(--ss-action-duration) cubic-bezier(.2, .7, .2, 1),
    color var(--ss-action-duration) cubic-bezier(.2, .7, .2, 1),
    border-color var(--ss-action-duration) cubic-bezier(.2, .7, .2, 1),
    box-shadow var(--ss-action-duration) cubic-bezier(.2, .7, .2, 1),
    filter var(--ss-action-duration) cubic-bezier(.2, .7, .2, 1);
}

body:has(#prep:not(.hidden)) :is(
  #readyBtn,
  #menuBtn2,
  #rollBtn,
  #lockBtn,
  .bld .ubtn,
  .card .buy,
  .abat .disb
):hover:not(:disabled) {
  color: #fff0c6;
  border-color: var(--ss-border-gold);
}

body:has(#prep:not(.hidden)) :is(
  #readyBtn,
  #menuBtn2,
  #rollBtn,
  #lockBtn,
  .bld .ubtn,
  .card .buy,
  .abat .disb
):active:not(:disabled) {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

body:has(#prep:not(.hidden)) :is(
  #readyBtn,
  #menuBtn2,
  #rollBtn,
  #lockBtn,
  .bld .ubtn,
  .card .buy,
  .abat .disb
):disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
}

body:has(#prep:not(.hidden)) #readyBtn {
  min-width: 190px;
  min-height: 48px;
  margin-left: auto;
  margin-right: calc(var(--ss-pilot-rail) + 10px);
  padding-inline: 24px;
  border-color: #f1cf7a;
  color: #21170d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 30%),
    linear-gradient(180deg, #f0d98c, #c99b3f 58%, #81591e);
  box-shadow:
    inset 0 0 0 2px rgba(74, 42, 11, .4),
    inset 0 -4px 8px rgba(62, 31, 6, .26),
    0 5px 14px rgba(0, 0, 0, .4);
  font-size: 14px;
}

body:has(#prep:not(.hidden)) #menuBtn2 {
  min-width: 132px;
}

body:has(#prep:not(.hidden)) .card .buy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  border: 2px solid #d6b35f;
  color: #f7e3a7;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 27%),
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, .30), transparent 24%),
    radial-gradient(ellipse at 72% 76%, rgba(184, 120, 255, .35), transparent 40%),
    linear-gradient(135deg, #542073, #2a123e 54%, #671f87);
  box-shadow:
    inset 0 0 0 2px #5b3d17,
    inset 0 0 0 4px rgba(237, 202, 111, .28),
    inset 0 -9px 18px rgba(18, 7, 29, .6),
    0 5px 16px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 4px #130819;
}

body:has(#prep:not(.hidden)) .card .buy:hover:not(:disabled),
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn:hover:not(:disabled) {
  color: #fff4d2;
  border-color: #f0d68a;
  box-shadow:
    inset 0 0 0 2px #6a4718,
    inset 0 0 0 4px rgba(237, 202, 111, .34),
    inset 0 -9px 18px rgba(18, 7, 29, .5),
    0 0 22px rgba(138, 61, 255, .42),
    0 5px 16px rgba(0, 0, 0, .45);
}

body:has(#prep:not(.hidden)) #lockBtn.on {
  color: #f7e3a7;
  border: 2px solid #d6b35f;
  background:
    radial-gradient(ellipse at 35% 22%, rgba(255, 255, 255, .24), transparent 28%),
    linear-gradient(135deg, #542073, #2a123e 54%, #671f87);
  box-shadow:
    inset 0 0 0 2px #5b3d17,
    0 0 18px rgba(138, 61, 255, .35);
}

body:has(#prep:not(.hidden)) .abat .disb[data-x] {
  color: #ffc9c2;
  border-color: var(--ss-danger);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 44%),
    linear-gradient(180deg, #3b2023, #211316);
}

/* --------------------------------------------------------------------------
   Shared panel anatomy
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #prepBody {
  gap: 12px;
  min-height: 0;
  padding: 12px calc(var(--ss-pilot-rail) + 16px) 14px 14px;
}

body:has(#prep:not(.hidden)) .prepPanel {
  position: relative;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(200, 163, 90, .64);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 28%),
    radial-gradient(circle at 82% 0, rgba(138, 61, 255, .075), transparent 34%),
    linear-gradient(180deg, rgba(37, 37, 42, .975), rgba(14, 14, 16, .975));
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .035),
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 12px 30px rgba(0, 0, 0, .44);
  /* no backdrop-filter under body scale — see ui-theme-baseline scaled-stage chrome rule */
}

body:has(#prep:not(.hidden)) .prepPanel::before {
  content: "◆";
  position: absolute;
  top: 9px;
  left: 14px;
  color: var(--ss-border-gold);
  font-size: 8px;
  opacity: .9;
}

body:has(#prep:not(.hidden)) .prepPanel h2 {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding: 0 0 9px 16px;
  color: var(--ss-gold-light);
  border-bottom: 1px solid rgba(200, 163, 90, .34);
  font-family: var(--ss-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
}

body:has(#prep:not(.hidden)) .prepPanel h2::after {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(142, 120, 88, .48);
  border-radius: 999px;
  background: rgba(14, 14, 16, .46);
  font-size: 9px;
  letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   Large desktop composition: banner rail, open island, town and Bazaar.
   -------------------------------------------------------------------------- */

@media all{ /* was: (min-width: 1541px) — min-width:1541 holds for stage 1920 */ 
  body:has(#prep:not(.hidden)) #prepBody {
    display: grid;
    grid-template-columns:
      var(--ss-pilot-banner)
      var(--ss-pilot-town)
      minmax(0, 1fr);
    grid-template-rows: minmax(210px, 1fr) minmax(400px, min(518.4px, 430px));
  }

  body:has(#prep:not(.hidden)) #armyPanel {
    grid-column: 1;
    grid-row: 1 / 3;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  body:has(#prep:not(.hidden)) #townPanel {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    grid-column: 3;
    grid-row: 2;
    width: auto;
    min-width: 0;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Banners and spells
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #armyPanel {
  overflow-y: auto;
  scrollbar-color: rgba(200, 163, 90, .48) rgba(14, 14, 16, .3);
  scrollbar-width: thin;
}

body:has(#prep:not(.hidden)) #armySum {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body:has(#prep:not(.hidden)) #armySum > .abat {
  min-height: 116px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 5px 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(142, 120, 88, .66);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 40%),
    linear-gradient(180deg, #24232a, #151519);
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .025),
    0 5px 13px rgba(0, 0, 0, .28);
}

body:has(#prep:not(.hidden)) #armySum > .abat:hover {
  border-color: rgba(200, 163, 90, .82);
}

body:has(#prep:not(.hidden)) #armySum > .abat > .ic {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 58px;
  min-width: 58px;
  height: 74px;
  display: grid;
  place-items: center;
  align-self: start;
  overflow: visible;
  border: 1px solid rgba(200, 163, 90, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(138, 61, 255, .14), transparent 68%),
    rgba(14, 14, 16, .52);
}

body:has(#prep:not(.hidden)) #armySum > .abat > .ic .artic {
  max-width: 54px;
  max-height: 70px;
}

body:has(#prep:not(.hidden)) #armySum > .abat > .amid {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: start;
  overflow: hidden;
}

body:has(#prep:not(.hidden)) #armySum .abat .an {
  margin-bottom: 5px;
  color: var(--ss-text-on-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

body:has(#prep:not(.hidden)) #armySum .abat .as {
  color: var(--ss-text-muted-on-dark);
  font-size: 11px;
}

body:has(#prep:not(.hidden)) #armySum .abat .pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 6px;
}

body:has(#prep:not(.hidden)) #armySum .abat .mpill {
  margin: 0;
  padding: 1px 5px;
  font-size: 8px;
  line-height: 14px;
}

body:has(#prep:not(.hidden)) #armySum .abat .statline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

body:has(#prep:not(.hidden)) #armySum .abat .stx {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border: 1px solid rgba(102, 91, 79, .5);
  border-radius: 4px;
  background: rgba(14, 14, 16, .5);
  font-variant-numeric: tabular-nums;
}

body:has(#prep:not(.hidden)) #armySum .abat .stx img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

body:has(#prep:not(.hidden)) #armySum .abat .stx b {
  color: var(--ss-text-on-dark);
  font-size: 11px;
}

body:has(#prep:not(.hidden)) #armySum > .abat > .cnt:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  color: var(--ss-gold-light);
  font-size: 12px;
}

body:has(#prep:not(.hidden)) #armySum > .abat > .cnt:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  color: var(--ss-text-muted-on-dark) !important;
  font-size: 10px !important;
}

body:has(#prep:not(.hidden)) #armySum .abat .disb {
  min-width: 0;
  min-height: 30px;
  padding-inline: 7px;
  font-size: 9px;
  letter-spacing: .045em;
}

body:has(#prep:not(.hidden)) #armySum > .abat > .disb:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
  justify-self: stretch;
}

body:has(#prep:not(.hidden)) #armySum > .abat > .disb:nth-child(6) {
  grid-column: 3;
  grid-row: 3;
  min-width: 66px;
}

body:has(#prep:not(.hidden)) #armySum > .abat.empty {
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 1fr;
  border-style: dashed;
  color: var(--ss-text-muted-on-dark);
}

body:has(#prep:not(.hidden)) #armySum > .abat.empty > .ic {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  min-width: 44px;
  height: 44px;
  color: var(--ss-gold-light);
  font-size: 24px;
}

body:has(#prep:not(.hidden)) #armySum > .abat.empty > .amid {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

body:has(#prep:not(.hidden)) #armySum > .abat.empty .as {
  font-size: 11px;
  line-height: 1.45;
}

body:has(#prep:not(.hidden)) #armySum > div[style*="text-transform:uppercase"] {
  margin: 9px 0 2px !important;
  color: var(--ss-gold-light) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

body:has(#prep:not(.hidden)) #armySum .schip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  color: var(--ss-text-muted-on-dark);
  border-color: rgba(142, 120, 88, .55);
  border-radius: 4px;
  background: rgba(14, 14, 16, .52);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Town buildings
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #townPanel {
  overflow-y: auto;
}

body:has(#prep:not(.hidden)) #bldList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}

body:has(#prep:not(.hidden)) #bldList > .bld {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid rgba(142, 120, 88, .68);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
    linear-gradient(180deg, #29282c, #17171b);
}

body:has(#prep:not(.hidden)) #bldList > .bld:hover {
  border-color: rgba(200, 163, 90, .84);
}

body:has(#prep:not(.hidden)) #bldList .bld .ic {
  width: 36px;
  height: 36px;
}

body:has(#prep:not(.hidden)) #bldList .bld .ic .artic {
  max-width: 34px;
  max-height: 34px;
}

body:has(#prep:not(.hidden)) #bldList .bld .bn {
  color: var(--ss-text-on-dark);
  font-size: 12px;
  line-height: 1.2;
}

body:has(#prep:not(.hidden)) #bldList .bld .be {
  display: none;
}

body:has(#prep:not(.hidden)) #bldList .bld .pips {
  display: flex;
  gap: 2px;
  margin: 4px 0 0;
}

body:has(#prep:not(.hidden)) #bldList .bld .pips i {
  width: 5px;
  height: 4px;
  background: #423b4f;
}

body:has(#prep:not(.hidden)) #bldList .bld .pips i.on {
  background: var(--ss-fissure);
  box-shadow: 0 0 5px rgba(138, 61, 255, .5);
}

body:has(#prep:not(.hidden)) #bldList .bld .ubtn {
  min-width: 56px;
  max-width: 74px;
  min-height: 32px;
  padding: 4px 6px;
  white-space: normal;
  font-size: 9px;
  line-height: 1.12;
  letter-spacing: .035em;
}

body:has(#prep:not(.hidden)) #bldList > div:not(.bld) {
  display: none;
}

body:has(#prep:not(.hidden)) #oddsBox {
  min-height: 30px;
  margin-top: 8px;
  padding: 7px 8px 0;
  overflow: hidden;
  color: var(--ss-text-muted-on-dark);
  border-top: 1px solid rgba(200, 163, 90, .26);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Bazaar cards and comparison stats
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #shopPanel {
  border-color: rgba(166, 108, 255, .62);
  box-shadow:
    inset 0 0 0 1px rgba(200, 163, 90, .16),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 12px 32px rgba(0, 0, 0, .46);
}

body:has(#prep:not(.hidden)) #rollRow {
  min-height: 44px;
  gap: 8px;
  margin: 0 0 10px;
}

body:has(#prep:not(.hidden)) #rollBtn {
  flex: 1;
  min-height: 44px;
  padding-inline: 16px;
  font-size: 12px;
}

body:has(#prep:not(.hidden)) #lockBtn {
  width: 48px;
  min-width: 48px;
  min-height: 44px;
  padding: 0;
  font-size: 16px;
}

body:has(#prep:not(.hidden)) #shopCards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  height: calc(100% - 85px);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 9px;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(200, 163, 90, .58) rgba(14, 14, 16, .38);
  scrollbar-width: thin;
}

body:has(#prep:not(.hidden)) #shopCards .card {
  flex: 0 0 var(--ss-pilot-card);
  min-width: var(--ss-pilot-card);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 10px;
  overflow: hidden;
  border-width: 1px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, transparent 0 28%, rgba(14, 14, 16, .94) 48%),
    radial-gradient(circle at 50% 15%, rgba(138, 61, 255, .18), transparent 42%),
    linear-gradient(180deg, #29283a, #111116);
  box-shadow:
    inset 0 0 0 2px rgba(14, 14, 16, .66),
    inset 0 0 0 3px rgba(240, 214, 138, .12),
    0 6px 18px rgba(0, 0, 0, .4);
}

body:has(#prep:not(.hidden)) #shopCards .card::before,
body:has(#prep:not(.hidden)) #shopCards .card::after {
  content: "◆";
  position: absolute;
  z-index: 3;
  top: 7px;
  color: var(--ss-border-gold);
  font-size: 7px;
}

body:has(#prep:not(.hidden)) #shopCards .card::before {
  left: 8px;
}

body:has(#prep:not(.hidden)) #shopCards .card::after {
  right: 8px;
}

body:has(#prep:not(.hidden)) #shopCards .card .cardArtBg {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  filter: blur(1.5px) saturate(.74);
  opacity: .15;
}

body:has(#prep:not(.hidden)) #shopCards .card .top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

body:has(#prep:not(.hidden)) #shopCards .card .cic,
body:has(#prep:not(.hidden)) #shopCards .card .cic.framed {
  width: 82px;
  height: 82px;
  align-self: center;
  margin: 0;
}

body:has(#prep:not(.hidden)) #shopCards .card .cic.framed:not(.roundframe) .uart {
  max-width: 58px;
  max-height: 58px;
}

body:has(#prep:not(.hidden)) #shopCards .card .cmeta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: visible;
  text-align: center;
}

body:has(#prep:not(.hidden)) #shopCards .card .cn {
  min-height: 39px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--ss-gold-light);
  font-family: var(--ss-font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body:has(#prep:not(.hidden)) #shopCards .card .tag {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 9px;
}

body:has(#prep:not(.hidden)) #shopCards .card .pillrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin: 0;
}

body:has(#prep:not(.hidden)) #shopCards .card .mpill {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 5px;
  background: rgba(14, 14, 16, .52);
  font-size: 8px;
  line-height: 1;
}

/* Race pills stay neutral (same ink as weight/class) — not race-tinted, not rarity-tinted. */
body:has(#prep:not(.hidden)) #shopCards .card .ss-race-pill {
  color: #bcb4c3;
  border-color: currentColor;
}

body:has(#prep:not(.hidden)) #shopCards .card .cd {
  min-height: 39px;
  display: -webkit-box;
  overflow: hidden;
  margin: 7px 2px 8px;
  color: var(--ss-text-muted-on-dark);
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ss-pilot-stat-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: auto 0 9px;
}

.ss-pilot-stat {
  min-width: 0;
  min-height: 51px;
  display: grid;
  grid-template-rows: 15px 18px 11px;
  place-items: center;
  gap: 1px;
  padding: 5px 2px 4px;
  border: 1px solid rgba(102, 91, 79, .55);
  border-radius: 4px;
  background: rgba(14, 14, 16, .66);
}

.ss-pilot-stat__icon {
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--ss-gold-light);
  font-size: 14px;
  line-height: 1;
}

.ss-pilot-stat__icon svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.ss-pilot-stat__value {
  align-self: end;
  color: var(--ss-text-on-dark);
  font-family: var(--ss-font-ui);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ss-pilot-stat__label {
  align-self: start;
  overflow: hidden;
  color: var(--ss-text-muted-on-dark);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body:has(#prep:not(.hidden)) #shopCards .card.sold {
  justify-content: center;
  opacity: .42;
}

/* --------------------------------------------------------------------------
   Right utility rail: chat first, commanders or opponent preview below.
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) :is(#chatBox, #standings, #ascentPanel) {
  width: 224px !important;
  right: 14px !important;
  border: 1px solid rgba(200, 163, 90, .58);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 28%),
    linear-gradient(180deg, rgba(27, 30, 58, .975), rgba(14, 14, 16, .975));
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .03),
    0 10px 26px rgba(0, 0, 0, .42);
  /* no backdrop-filter under body scale — see ui-theme-baseline scaled-stage chrome rule */
}

body:has(#prep:not(.hidden)) #chatBox {
  top: 80px !important;
  bottom: auto !important;
  max-height: 142px;
  overflow: hidden;
}

body:has(#prep:not(.hidden)) #chatBox :is(#schatLog, #chatLog) {
  max-height: 36px !important;
  overflow-y: auto;
}

body:has(#prep:not(.hidden)) #chatMini {
  top: 80px !important;
  right: 14px !important;
  bottom: auto !important;
}

body:has(#prep:not(.hidden)) #chatToast {
  top: 124px !important;
  right: 64px !important;
  bottom: auto !important;
}

body:has(#prep:not(.hidden)) :is(#standings, #ascentPanel) {
  top: 232px !important;
  max-height: calc(1080px - 246px);
  overflow-y: auto;
  padding: 11px;
  font-size: 12px;
}

body:has(#prep:not(.hidden)):has(#chatMini:not(.hidden)) :is(#standings, #ascentPanel) {
  top: 132px !important;
  max-height: calc(1080px - 146px);
}

body:has(#prep:not(.hidden)) :is(#standings, #ascentPanel) h3 {
  margin: 0 0 7px;
  color: var(--ss-gold-light);
  font-size: 12px;
  line-height: 1.35;
}

body:has(#prep:not(.hidden)) #ascFlavor {
  color: var(--ss-text-muted-on-dark);
  font-size: 10px;
  line-height: 1.45;
}

body:has(#prep:not(.hidden)) .ascrow {
  min-height: 34px;
  margin-bottom: 5px;
  padding: 4px 5px;
  border-color: rgba(142, 120, 88, .36);
  background: rgba(14, 14, 16, .52);
}

body:has(#prep:not(.hidden)) .ascnm {
  color: var(--ss-text-on-dark);
  font-size: 11px;
}

body:has(#prep:not(.hidden)) #ascMeta,
body:has(#prep:not(.hidden)) :is(#standings, #ascentPanel) .tip {
  color: var(--ss-text-muted-on-dark);
  font-size: 10px;
  line-height: 1.45;
}

/* Keep the persistent utility buttons clear of the banner rail. */
body:has(#prep:not(.hidden)) #compRow {
  left: 16px;
  bottom: 64px;
  z-index: 22;
}

body:has(#prep:not(.hidden)) #setRow {
  left: 16px;
  bottom: 16px;
  z-index: 22;
}

/* --------------------------------------------------------------------------
   Responsive composition
   -------------------------------------------------------------------------- */

@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-width: 1540px) — min-width:821 holds for stage 1920; max-width:1540 fails stage 1920 */ 
  :root {
    --ss-pilot-banner: 286px;
    --ss-pilot-town: 354px;
    --ss-pilot-card: 210px;
  }

  body:has(#prep:not(.hidden)) #prepHead .title {
    min-width: 220px;
    font-size: 17px;
  }

  body:has(#prep:not(.hidden)) #prepBody {
    display: grid;
    grid-template-columns: var(--ss-pilot-banner) minmax(0, 1fr);
    grid-template-rows: minmax(330px, 1fr) minmax(260px, 410.4px);
    padding-right: calc(var(--ss-pilot-rail) + 14px);
    overflow: hidden;
  }

  body:has(#prep:not(.hidden)) #armyPanel {
    grid-column: 1;
    grid-row: 1 / 3;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(#prep:not(.hidden)) #townPanel {
    grid-column: 2;
    grid-row: 2;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:has(#prep:not(.hidden)) #shopCards .card {
    min-height: 270px;
  }
}

@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-width: 1180px) — min-width:821 holds for stage 1920; max-width:1180 fails stage 1920 */ 
  :root {
    --ss-pilot-rail: 0px;
    --ss-pilot-banner: 276px;
    --ss-pilot-card: 208px;
  }

  body:has(#prep:not(.hidden)) #prepHead {
    padding-inline: 10px;
  }

  body:has(#prep:not(.hidden)) #prepHead .title {
    min-width: 190px;
  }

  body:has(#prep:not(.hidden)) #readyBtn {
    min-width: 160px;
    margin-right: 0;
  }

  body:has(#prep:not(.hidden)) #prepBody {
    padding: 9px 10px 12px;
  }

  body:has(#prep:not(.hidden)) :is(#chatBox, #chatMini, #chatToast, #standings, #ascentPanel) {
    display: none !important;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  :root {
    --ss-pilot-card: min(248px, 1497.6px);
  }

  body:has(#prep:not(.hidden)) #prep {
    overflow-y: auto;
  }

  body:has(#prep:not(.hidden)) #prepHead {
    position: sticky;
    top: 0;
    z-index: 4;
    min-height: 64px;
    padding: 8px;
  }

  body:has(#prep:not(.hidden)) #prepHead .title {
    min-width: 100%;
    font-size: 16px;
  }

  body:has(#prep:not(.hidden)) #prepHead .pill {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 11px;
  }

  body:has(#prep:not(.hidden)) #menuBtn2 {
    min-width: 110px;
    min-height: 40px;
    padding-inline: 10px;
    font-size: 10px;
  }

  body:has(#prep:not(.hidden)) #readyBtn {
    min-width: 146px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding-inline: 13px;
    font-size: 11px;
  }

  body:has(#prep:not(.hidden)) #prepBody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    order: 1;
    min-height: 420px;
  }

  body:has(#prep:not(.hidden)) #armyPanel {
    order: 2;
    max-height: none;
    overflow: visible;
  }

  body:has(#prep:not(.hidden)) #townPanel {
    order: 3;
  }

  body:has(#prep:not(.hidden)) #shopCards {
    height: 320px;
  }

  body:has(#prep:not(.hidden)) #bldList {
    grid-template-columns: 1fr;
  }

  body:has(#prep:not(.hidden)) :is(#chatBox, #chatMini, #chatToast, #standings, #ascentPanel) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Town Preparation polish pass · 2026-07-31
   Shared tier/race semantics, utility typography, and photographed fixes.
   -------------------------------------------------------------------------- */

:root {
  --ss-tier-1: #b7bdc7;
  --ss-tier-2: #70c68b;
  /* Tier III / epic rarity chrome = purple (matches --r2 / --ss-rarity-rare), not blue. */
  --ss-tier-3: #b07fe8;
  /* Tier IV / legendary = gold (matches --r3 / --ss-rarity-legendary). */
  --ss-tier-4: #e8b64c;
}

/* Keep the display face for identity and actions; use a sturdier humanist sans
   for dense, small, and frequently scanned interface copy. */
body:has(#prep:not(.hidden)) :is(
  #prepHead .pill,
  #goldPill .goldLab,
  #goldPill .goldtxt,
  #goldPill #goldTxt,
  #goldPill #incomeTxt,
  #spellPanel .spellPowMeta,
  #bldList .bn,
  #bldList .ss-prison-info,
  #oddsBox,
  #armySum .an,
  #armySum .as,
  #armySum .stx,
  #armySum .cnt,
  #shopCards .cd,
  #shopCards .mpill,
  #shopCards .ss-unit-tier,
  #shopCards .ss-pilot-stat,
  #shopCards .ss-pilot-stat__label,
  #shopCards .ss-pilot-stat__value
) {
  font-family: var(--ss-font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body:has(#prep:not(.hidden)) :is(#chatBox, #standings, #ascentPanel) {
  font-family: var(--ss-font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body:has(#prep:not(.hidden)) #chatHead,
body:has(#prep:not(.hidden)) #chatBox .chatTab,
body:has(#prep:not(.hidden)) #onlineRow,
body:has(#prep:not(.hidden)) :is(#schatLog, #chatLog, #chatIn) {
  font-family: var(--ss-font-ui) !important;
}

body:has(#prep:not(.hidden)) #chatHead,
body:has(#prep:not(.hidden)) #chatBox .chatTab {
  font-weight: 700;
  letter-spacing: .12em;
}

body:has(#prep:not(.hidden)) #onlineRow {
  color: #d9d7df !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.3;
}

body:has(#prep:not(.hidden)) #standings {
  font-size: 14px;
}

body:has(#prep:not(.hidden)) #standings h3 {
  font-family: var(--ss-font-display, "Cinzel", serif);
  font-size: 12px;
}

/* The ornamental mark now participates in the heading row, so it cannot float
   above the baseline at unusual zoom levels. */
body:has(#prep:not(.hidden)) .prepPanel::before {
  content: none !important;
}

body:has(#prep:not(.hidden)) .prepPanel h2::before {
  content: "◆";
  flex: 0 0 auto;
  margin-right: 8px;
  color: var(--ss-gold, #c8a35a);
  font-size: 7px;
  line-height: 1;
  opacity: .92;
}

/* Two-line building labels and a narrower, inset action column preserve the
   ten-building grid without buttons crossing the panel edge. */
body:has(#prep:not(.hidden)) #bldList > .bld.ss-building-card {
  grid-template-columns: 42px minmax(0, 1fr) 64px;
  column-gap: 8px;
  padding: 8px 12px 8px 8px;
  overflow: hidden;
}

body:has(#prep:not(.hidden)) #bldList .bld .bn {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.08;
  overflow-wrap: normal;
}

body:has(#prep:not(.hidden)) #bldList .ss-building-name {
  display: block;
  min-height: 30px;
}

body:has(#prep:not(.hidden)) #bldList .bld .ubtn {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  justify-self: end;
  overflow: hidden;
  padding-inline: 5px;
}

/* Roll is the Bazaar's primary repeat action, not a quiet toolbar control. */
body:has(#prep:not(.hidden)) #rollRow {
  min-height: 62px;
  padding: 5px 0 7px;
}

body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary {
  min-height: 52px;
  max-width: 390px;
  margin-inline: auto;
  border-width: 2px;
  border-color: #f4d681;
  color: #21170d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), transparent 28%),
    linear-gradient(180deg, #f5dfa0, #d2a74e 58%, #80571e) !important;
  box-shadow:
    inset 0 0 0 2px rgba(72, 42, 12, .45),
    inset 0 -5px 9px rgba(62, 31, 6, .3),
    0 7px 18px rgba(0, 0, 0, .46);
  font-size: 15px;
  letter-spacing: .12em;
}

body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary span {
  color: #4b2b0b !important;
  font-weight: 900;
}

/* Tier is a progression cue; race owns the card atmosphere. */
body:has(#prep:not(.hidden)) #shopCards .card[data-tier="1"] {
  --ss-tier-accent: var(--ss-tier-1);
}

body:has(#prep:not(.hidden)) #shopCards .card[data-tier="2"] {
  --ss-tier-accent: var(--ss-tier-2);
}

body:has(#prep:not(.hidden)) #shopCards .card[data-tier="3"] {
  --ss-tier-accent: var(--ss-tier-3);
}

body:has(#prep:not(.hidden)) #shopCards .card[data-tier="4"] {
  --ss-tier-accent: var(--ss-tier-4);
}

body:has(#prep:not(.hidden)) #shopCards .card .tag.ss-unit-tier {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  color: var(--ss-tier-accent, var(--ss-tier-1));
  border: 1px solid color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 68%, transparent);
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: var(--ss-radius-sm, 4px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 20%, transparent),
      rgba(14, 14, 16, .76) 36% 64%,
      color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 20%, transparent));
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 9%, transparent),
    0 0 8px rgba(0, 0, 0, .3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 0 9px color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 28%, transparent);
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card {
  background-image:
    linear-gradient(180deg, rgba(14, 14, 16, .3) 0%, rgba(14, 14, 16, .48) 29%, rgba(14, 14, 16, .92) 61%),
    radial-gradient(circle at 50% 18%, rgba(var(--ss-race-rgb), .5), transparent 50%),
    linear-gradient(135deg, rgba(var(--ss-race-rgb), .3), rgba(var(--ss-race-rgb), .08) 54%, rgba(14, 14, 16, .34)),
    var(--ss-race-image, none),
    linear-gradient(180deg, #29283a, #111116) !important;
  background-size: cover, cover, cover, cover, cover !important;
  background-position: center, center, center, center, center !important;
  background-repeat: no-repeat !important;
}

@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-width: 1540px) — min-width:821 holds for stage 1920; max-width:1540 fails stage 1920 */ 
  body:has(#prep:not(.hidden)) #prepBody {
    grid-template-rows: 650px 500px;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    min-height: 650px;
  }

  body:has(#prep:not(.hidden)) #townPanel {
    min-height: 500px;
  }
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card::after {
  color: var(--ss-tier-accent, var(--ss-gold, #c8a35a));
}

/* Purchased cards retain their physical slot, but communicate state from the
   center instead of colliding with the corner ornament. */
body:has(#prep:not(.hidden)) #shopCards .card.sold.ss-purchased-card {
  flex: 0 0 var(--ss-pilot-card);
  width: var(--ss-pilot-card);
  min-width: var(--ss-pilot-card);
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: .72;
  border: 1px solid rgba(142, 120, 88, .58);
  background:
    radial-gradient(circle, rgba(138, 61, 255, .1), transparent 52%),
    linear-gradient(180deg, #232229, #111115);
}

body:has(#prep:not(.hidden)) #shopCards .card.sold.ss-purchased-card::before,
body:has(#prep:not(.hidden)) #shopCards .card.sold.ss-purchased-card::after {
  content: none;
}

body:has(#prep:not(.hidden)) #shopCards .card.sold.ss-purchased-card .cd {
  min-height: 0;
  margin: 0 !important;
  color: #ded8ca;
  font-family: var(--ss-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* Presentation-only fifth-slot signpost. The actual unlock remains governed by
   the Bazaar Monopoly relic in game logic. */
body:has(#prep:not(.hidden)) #shopCards .ss-bazaar-slot-upgrade {
  flex: 0 0 var(--ss-pilot-card);
  width: var(--ss-pilot-card);
  min-width: var(--ss-pilot-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 22px;
  border: 1px dashed rgba(200, 163, 90, .7);
  border-radius: var(--ss-radius-md, 8px);
  color: var(--ss-text-on-dark, #f1e6c8);
  background:
    radial-gradient(circle at 50% 38%, rgba(138, 61, 255, .13), transparent 44%),
    linear-gradient(180deg, rgba(42, 41, 48, .92), rgba(14, 14, 16, .96));
  box-shadow:
    inset 0 0 0 2px rgba(14, 14, 16, .66),
    0 8px 22px rgba(0, 0, 0, .34);
  font-family: var(--ss-font-ui);
  line-height: 1.35;
  text-align: center;
}

body:has(#prep:not(.hidden)) #shopCards .ss-bazaar-slot-upgrade__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 163, 90, .72);
  border-radius: 50%;
  color: var(--ss-violet-soft, #d1a5ff);
  background: rgba(14, 14, 16, .72);
  box-shadow: 0 0 20px rgba(138, 61, 255, .18);
  font-size: 18px;
}

body:has(#prep:not(.hidden)) #shopCards .ss-bazaar-slot-upgrade strong {
  color: var(--ss-gold-light, #f0d68a);
  font-family: var(--ss-font-display, "Cinzel", serif);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#prep:not(.hidden)) #shopCards .ss-bazaar-slot-upgrade span {
  font-size: 14px;
}

body:has(#prep:not(.hidden)) #shopCards .ss-bazaar-slot-upgrade small {
  max-width: 185px;
  color: #aaa6ae;
  font-size: 12px;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  body:has(#prep:not(.hidden)) #bldList > .bld.ss-building-card {
    grid-template-columns: 48px minmax(0, 1fr) 76px;
  }

  body:has(#prep:not(.hidden)) #bldList .bld .ubtn {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#prep:not(.hidden)) :is(
    #readyBtn,
    #menuBtn2,
    #rollBtn,
    #lockBtn,
    .bld .ubtn,
    .card .buy,
    .abat .disb
  ) {
    transition: none;
  }
}

/* ==========================================================================
   Phase 3 component-library alignment pass
   These rules deliberately mirror the approved library specimens rather than
   merely reskinning the original compact game widgets.
   ========================================================================== */

:root {
  --ss-pilot-banner: 320px;
  --ss-pilot-town: 500px;
  --ss-pilot-card: 248px;
}

/* Approved panel construction. */
body:has(#prep:not(.hidden)) .prepPanel {
  padding: 16px;
  border: 1px solid rgba(200, 163, 90, .62);
  border-radius: var(--ss-radius-md, 8px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 28%),
    radial-gradient(circle at 82% 0, rgba(138, 61, 255, .09), transparent 34%),
    linear-gradient(180deg, rgba(37, 37, 42, .98), rgba(14, 14, 16, .98));
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .035),
    0 8px 22px rgba(0, 0, 0, .42);
}

body:has(#prep:not(.hidden)) .prepPanel::before {
  content: "◆";
  top: 11px;
  left: 12px;
  padding: 0;
  background: transparent;
  font-size: 7px;
}

body:has(#prep:not(.hidden)) .prepPanel h2 {
  min-height: 36px;
  margin: 0 0 12px;
  padding: 0 0 11px;
  font-size: 16px;
  letter-spacing: .1em;
}

/* Approved action family. */
body:has(#prep:not(.hidden)) .ss-button {
  min-width: var(--ss-action-min-width, 112px);
  min-height: var(--ss-action-height, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ss-action-gap, 8px);
  padding: 0 var(--ss-action-padding-x, 16px);
  border: 1px solid #8e7858;
  border-radius: var(--ss-radius-sm, 4px);
  color: var(--ss-text-on-dark, #f1e6c8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 43%),
    linear-gradient(180deg, #2c2b30, #17171b);
  box-shadow:
    inset 0 0 0 1px rgba(241, 230, 200, .035),
    0 4px 11px rgba(0, 0, 0, .34);
  font-family: var(--ss-font-display, "Cinzel", serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body:has(#prep:not(.hidden)) .ss-button:hover:not(:disabled) {
  color: #fff0c6;
  border-color: var(--ss-gold, #c8a35a);
}

body:has(#prep:not(.hidden)) .ss-button:active:not(:disabled) {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

body:has(#prep:not(.hidden)) .ss-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.35);
}

body:has(#prep:not(.hidden)) .ss-button--primary,
body:has(#prep:not(.hidden)) #readyBtn {
  border-color: #f1cf7a;
  color: #21170d;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 30%),
    linear-gradient(180deg, #f0d98c, #c99b3f 58%, #81591e);
  box-shadow:
    inset 0 0 0 2px rgba(74, 42, 11, .4),
    inset 0 -4px 8px rgba(62, 31, 6, .26),
    0 5px 14px rgba(0, 0, 0, .4);
}

/* Magic purple purchase chrome — Bazaar Recruit/Acquire and YOUR TOWN building buys.
   Town scoped to #townPanel #bldList .bld .ubtn so banner Sell/Exile and other .ubtn stay dark. */
body:has(#prep:not(.hidden)) .ss-button--magic,
body:has(#prep:not(.hidden)) #shopCards .card .buy,
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #d6b35f;
  color: #f7e3a7;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 27%),
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, .3), transparent 24%),
    radial-gradient(ellipse at 72% 76%, rgba(184, 120, 255, .35), transparent 40%),
    linear-gradient(135deg, #542073, #2a123e 54%, #671f87) !important;
  box-shadow:
    inset 0 0 0 2px #5b3d17,
    inset 0 0 0 4px rgba(237, 202, 111, .28),
    inset 0 -9px 18px rgba(18, 7, 29, .6),
    0 5px 16px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 4px #130819;
}

body:has(#prep:not(.hidden)) .ss-button--magic::before,
body:has(#prep:not(.hidden)) .ss-button--magic::after,
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn::before,
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

body:has(#prep:not(.hidden)) .ss-button--magic::before,
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn::before {
  inset: 5px;
  opacity: .42;
  background:
    linear-gradient(112deg, transparent 10%, rgba(255, 255, 255, .25) 11%, transparent 13%),
    linear-gradient(38deg, transparent 42%, rgba(205, 155, 255, .18) 43%, transparent 45%),
    linear-gradient(155deg, transparent 67%, rgba(255, 255, 255, .14) 68%, transparent 70%);
}

body:has(#prep:not(.hidden)) .ss-button--magic::after,
body:has(#prep:not(.hidden)) #townPanel #bldList .bld .ubtn::after {
  inset: 3px;
  border: 1px solid rgba(255, 226, 159, .44);
}

body:has(#prep:not(.hidden)) .ss-button--danger {
  border-color: var(--ss-danger, #d95555);
  color: #ffc9c2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 44%),
    linear-gradient(180deg, #3b2023, #211316);
}

body:has(#prep:not(.hidden)) .ss-button--icon {
  width: var(--ss-action-height, 44px);
  min-width: var(--ss-action-height, 44px);
  padding: 0;
  font-size: 17px;
}

/* Full-size Town building rows from the approved compact-row specimen. */
body:has(#prep:not(.hidden)) #bldList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

body:has(#prep:not(.hidden)) #bldList > .bld.ss-building-card {
  min-height: 66px;
  grid-template-columns: 42px minmax(94px, 1fr) 72px;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(142, 120, 88, .68);
  border-radius: var(--ss-radius-md, 8px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
    linear-gradient(180deg, #29282c, #17171b);
  box-shadow: inset 0 0 0 1px rgba(241, 230, 200, .025);
}

body:has(#prep:not(.hidden)) #bldList .ss-building-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 163, 90, .45);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(138, 61, 255, .14), transparent 68%),
    rgba(14, 14, 16, .54);
}

body:has(#prep:not(.hidden)) #bldList .ss-building-icon .artic {
  max-width: 38px;
  max-height: 38px;
}

body:has(#prep:not(.hidden)) #bldList .bmid {
  min-width: 0;
  position: relative;
  z-index: 1;
}

body:has(#prep:not(.hidden)) #bldList .bld .bn {
  min-width: 0;
  color: var(--ss-text-on-dark, #f1e6c8);
  font-size: 13px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

body:has(#prep:not(.hidden)) #bldList .bld .pips {
  gap: 3px;
  margin-top: 6px;
}

body:has(#prep:not(.hidden)) #bldList .bld .pips i {
  width: 7px;
  height: 5px;
  border-radius: 1px;
}

body:has(#prep:not(.hidden)) #bldList .bld .ubtn {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 72px;
  max-width: 72px;
  min-height: 42px;
  padding: 5px 7px;
  white-space: normal;
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: .045em;
}

body:has(#prep:not(.hidden)) #bldList .bld .ubtn:disabled {
  font-size: 8px;
  overflow-wrap: anywhere;
}

/* Prison occupancy — match town purchase `.ubtn` footprint (prep-layout retunes for 1×10). */
body:has(#prep:not(.hidden)) #bldList .ss-prison-info {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  justify-self: end;
  width: 100%;
  min-width: 72px;
  max-width: 72px;
  min-height: 42px;
  padding: 5px 7px;
  border: 1px solid rgba(142, 120, 88, .68);
  border-radius: 4px;
  color: var(--ss-text-on-dark, #f1e6c8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%),
    linear-gradient(180deg, #29282c, #17171b);
  box-shadow: inset 0 0 0 1px rgba(241, 230, 200, .025);
  font-family: var(--ss-font-display, inherit);
  text-transform: uppercase;
  letter-spacing: .045em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

body:has(#prep:not(.hidden)) #bldList .ss-prison-info__n {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}

body:has(#prep:not(.hidden)) #bldList .ss-prison-info__lbl {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-dim, #9a8f7a);
}

/* Banner cards use the same row anatomy and action roles as the library. */
body:has(#prep:not(.hidden)) #armySum > .abat.ss-banner-card {
  min-height: 142px;
  padding: 12px;
  border-radius: var(--ss-radius-md, 8px);
}

body:has(#prep:not(.hidden)) #armySum > .abat.empty.ss-banner-card {
  min-height: 82px;
}

body:has(#prep:not(.hidden)) #armySum .abat .an {
  font-size: 15px;
}

body:has(#prep:not(.hidden)) #armySum .abat .mpill {
  min-height: 19px;
  padding: 2px 6px;
  font-size: 8px;
}

body:has(#prep:not(.hidden)) #armySum .abat .stx {
  min-height: 27px;
  padding: 5px 3px;
}

body:has(#prep:not(.hidden)) #armySum .abat .disb {
  min-height: 34px;
}

/* Bazaar browse card: approved 248px family, 2x2 stats, price + action row. */
body:has(#prep:not(.hidden)) #shopPanel {
  border-color: rgba(200, 163, 90, .62);
}

body:has(#prep:not(.hidden)) #shopCards {
  height: calc(100% - 92px);
  gap: 12px;
  padding: 2px 2px 10px;
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card {
  --ss-race-accent: #8a3dff;
  --ss-race-rgb: 138, 61, 255;
  flex: 0 0 var(--ss-pilot-card);
  width: var(--ss-pilot-card);
  min-width: var(--ss-pilot-card);
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(200, 163, 90, .78);
  border-radius: var(--ss-radius-md, 8px);
  background-image:
    linear-gradient(180deg, transparent 0 34%, rgba(14, 14, 16, .96) 54%),
    radial-gradient(circle at 50% 20%, rgba(var(--ss-race-rgb), .28), transparent 44%),
    linear-gradient(180deg, #29283a, #111116) !important;
  box-shadow:
    inset 0 0 0 2px rgba(14, 14, 16, .72),
    inset 0 0 0 3px rgba(240, 214, 138, .16),
    0 8px 22px rgba(0, 0, 0, .42);
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Human"] {
  --ss-race-accent: #79a2dc;
  --ss-race-rgb: 73, 111, 169;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Elf"] {
  --ss-race-accent: #74c592;
  --ss-race-rgb: 54, 132, 83;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Goblin"] {
  --ss-race-accent: #a6c85d;
  --ss-race-rgb: 112, 147, 54;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Dwarf"] {
  --ss-race-accent: #d48a55;
  --ss-race-rgb: 161, 83, 43;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Troll"] {
  --ss-race-accent: #91a65b;
  --ss-race-rgb: 91, 119, 63;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Ogre"] {
  --ss-race-accent: #d27c58;
  --ss-race-rgb: 161, 73, 49;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Mystic"] {
  --ss-race-accent: #bd8cff;
  --ss-race-rgb: 138, 61, 255;
}

body:has(#prep:not(.hidden)) #shopCards .card[data-race="Animal"] {
  --ss-race-accent: #d1a85c;
  --ss-race-rgb: 151, 111, 48;
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-pilot-unit-card:hover {
  border-color: var(--ss-race-accent);
  box-shadow:
    inset 0 0 0 2px rgba(14, 14, 16, .72),
    inset 0 0 0 3px rgba(var(--ss-race-rgb), .22),
    0 0 18px rgba(var(--ss-race-rgb), .2),
    0 8px 22px rgba(0, 0, 0, .42);
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card::before,
body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card::after {
  top: 8px;
  color: var(--ss-gold, #c8a35a);
  font-size: 9px;
}

body:has(#prep:not(.hidden)) #shopCards .card .cardArtBg {
  inset: 8px 10px auto;
  width: calc(100% - 20px);
  height: 108px;
  object-fit: contain;
  object-position: center bottom;
  opacity: .96;
  filter:
    drop-shadow(0 0 12px rgba(var(--ss-race-rgb, 138, 61, 255), .22))
    drop-shadow(0 10px 11px rgba(0, 0, 0, .72));
  -webkit-mask-image: none;
  mask-image: none;
}

body:has(#prep:not(.hidden)) #shopCards .card .top {
  display: grid;
  grid-template-rows: 110px auto;
  gap: 0;
}

body:has(#prep:not(.hidden)) #shopCards .ss-pilot-unit-card .cic {
  width: 100%;
  height: 110px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .cic,
body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .cic.framed {
  /* Baseline before prep-layout's 163px lock + itemart9 rim-overlap/clip; kept under the face size. */
  width: 100px;
  height: 100px;
  align-self: center;
  border-radius: 50%;
}
body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .cic.ss-ench-cic {
  border-radius: 0; /* enchant sigils: no circular rarity mask (prep-layout owns final chrome) */
}

body:has(#prep:not(.hidden)) #shopCards .card .cmeta {
  min-height: 0;
  gap: 6px;
  padding: 8px 12px 0;
}

body:has(#prep:not(.hidden)) #shopCards .card .cn {
  min-height: 46px;
  color: var(--ss-gold-light, #f0d68a);
  font-size: 19px;
  line-height: 1.18;
}

body:has(#prep:not(.hidden)) #shopCards .card .tag {
  min-height: 23px;
  padding: 4px 8px;
  color: var(--ss-violet-soft, #d1a5ff);
  font-size: 9px;
  letter-spacing: .08em;
}

body:has(#prep:not(.hidden)) #shopCards .card .tag.ss-unit-tier {
  min-height: 16px;
  margin: 0;
  padding: 0;
  color: var(--ss-violet-soft, #d1a5ff);
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body:has(#prep:not(.hidden)) #shopCards .card .pillrow {
  min-height: 47px;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  grid-template-rows: 21px 21px;
  align-content: start;
  justify-content: center;
  gap: 5px;
}

body:has(#prep:not(.hidden)) #shopCards .card .mpill {
  min-height: 21px;
  padding: 3px 7px;
  font-size: 9px;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-tier-pill {
  display: none;
}

/* Race / weight / class meta pills share neutral ink — no race tint, no rarity tint. */
body:has(#prep:not(.hidden)) #shopCards .card :is(.ss-race-pill, .ss-weight-pill, .ss-class-pill) {
  color: #bcb4c3;
  border-color: currentColor;
  background: rgba(14, 14, 16, .52);
  box-shadow: none;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-imprint-pill {
  grid-column: 1 / -1;
  grid-row: 2;
  width: max-content;
  min-width: 74px;
  height: 21px;
  min-height: 21px;
  justify-self: center;
  align-self: start;
  max-width: max-content;
  margin: 0;
  padding: 3px 8px;
  color: var(--ss-gold-light, #f0d68a) !important;
  border-color: rgba(200, 163, 90, .58);
  background: rgba(74, 42, 11, .24);
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  opacity: .9;
}

body:has(#prep:not(.hidden)) #shopCards .card .cd {
  min-height: 46px;
  margin: 8px 12px 10px;
  font-size: 13px;
  line-height: 1.5;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: auto 12px 10px;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat {
  min-height: 55px;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 7px 8px 6px;
  border: 1px solid rgba(102, 91, 79, .52);
  border-radius: var(--ss-radius-sm, 4px);
  background: rgba(14, 14, 16, .6);
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat__icon {
  grid-row: 1 / 3;
  width: 25px;
  height: auto;
  font-size: 18px;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat__value {
  align-self: end;
  justify-self: start;
  font-size: 19px;
  line-height: 1.05;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat__label {
  align-self: start;
  justify-self: start;
  font-size: 9px;
  letter-spacing: .07em;
}

/* Single recruit/acquire row — troop cards may include a jail-bar Imprison tab (lock-on-ROLL pattern). */
body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 12px 12px;
  align-items: stretch;
}
body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy:has(.ss-shop-exile) {
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 0;
}
body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy .ss-shop-exile {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy .buy {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding-inline: 10px;
  font-size: 12px;
}

body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .ss-unit-buy {
  margin-top: auto;
}

/* Desktop composition with enough vertical room for complete browse cards. */
@media all{ /* was: (min-width: 1541px) — min-width:1541 holds for stage 1920 */ 
  body:has(#prep:not(.hidden)) #prepBody {
    grid-template-columns:
      var(--ss-pilot-banner)
      var(--ss-pilot-town)
      minmax(0, 1fr);
    grid-template-rows: minmax(220px, 1fr) 590px;
  }
}

/* Smaller desktop: preserve component sizes and let the main preparation
   region scroll vertically instead of cropping actions or shrinking text. */
@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-width: 1540px) — min-width:821 holds for stage 1920; max-width:1540 fails stage 1920 */ 
  :root {
    --ss-pilot-banner: 300px;
    --ss-pilot-card: 248px;
  }

  body:has(#prep:not(.hidden)) #prepBody {
    grid-template-columns: var(--ss-pilot-banner) minmax(0, 1fr);
    grid-template-rows: 650px 500px;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body:has(#prep:not(.hidden)) #armyPanel {
    height: calc(1080px - 96px);
    max-height: calc(1080px - 96px);
    align-self: start;
    position: sticky;
    top: 0;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    min-height: 600px;
  }

  body:has(#prep:not(.hidden)) #townPanel {
    min-height: 430px;
  }

  body:has(#prep:not(.hidden)) #shopCards {
    height: 486px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card {
    min-height: 0;
  }
}

@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-width: 1180px) — min-width:821 holds for stage 1920; max-width:1180 fails stage 1920 */ 
  :root {
    --ss-pilot-banner: 286px;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  :root {
    --ss-pilot-card: min(248px, 1574.4px);
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    min-height: 600px;
  }

  body:has(#prep:not(.hidden)) #shopCards {
    height: 470px;
  }

  body:has(#prep:not(.hidden)) #bldList {
    grid-template-columns: 1fr;
  }

  body:has(#prep:not(.hidden)) #bldList > .bld.ss-building-card {
    grid-template-columns: 48px minmax(0, 1fr) 88px;
  }
}

/* Final cascade lock: these photographed fixes must remain authoritative after
   the broader Phase 3 component rules above. */
body:has(#prep:not(.hidden)) #bldList .bld .ubtn {
  transform: translateX(-4px);
}

body:has(#prep:not(.hidden)) #shopCards .card .tag.ss-unit-tier {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px 9px;
  color: var(--ss-tier-accent, var(--ss-tier-1)) !important;
  border: 1px solid color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 68%, transparent);
  border-left-width: 4px;
  border-right-width: 4px;
  border-radius: var(--ss-radius-sm, 4px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 20%, transparent),
      rgba(14, 14, 16, .76) 36% 64%,
      color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 20%, transparent));
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 9%, transparent),
    0 0 8px rgba(0, 0, 0, .3);
  font-family: var(--ss-font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-shadow: 0 0 9px color-mix(in srgb, var(--ss-tier-accent, var(--ss-tier-1)) 28%, transparent);
}

body:has(#prep:not(.hidden)) #shopCards .card.ss-unit-card {
  background-image:
    linear-gradient(180deg, rgba(14, 14, 16, .3) 0%, rgba(14, 14, 16, .48) 29%, rgba(14, 14, 16, .92) 61%),
    radial-gradient(circle at 50% 18%, rgba(var(--ss-race-rgb), .5), transparent 50%),
    linear-gradient(135deg, rgba(var(--ss-race-rgb), .3), rgba(var(--ss-race-rgb), .08) 54%, rgba(14, 14, 16, .34)),
    var(--ss-race-image, none),
    linear-gradient(180deg, #29283a, #111116) !important;
  background-size: cover, cover, cover, cover, cover !important;
  background-position: center, center, center, center, center !important;
  background-repeat: no-repeat !important;
}

/* Subtle brand signature in the open lower-right island space. The wide source
   is cropped by this wrapper so only the approved twin-S monogram is visible. */
body:has(#prep:not(.hidden)) #prep .ss-prep-brand-mark {
  position: absolute;
  z-index: 1;
  right: 13px;
  bottom: 18px;
  width: 210px;
  height: 250px;
  overflow: hidden;
  pointer-events: none;
  opacity: .48;
  filter:
    drop-shadow(0 0 18px rgba(138, 61, 255, .34))
    drop-shadow(0 7px 15px rgba(0, 0, 0, .6));
}

body:has(#prep:not(.hidden)) #prep .ss-prep-brand-mark img {
  position: absolute;
  top: -30px;
  left: -18px;
  width: auto;
  max-width: none;
  height: 320px;
  user-select: none;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 1540px), (max-height: 970px) — max-width:1540 fails stage 1920; max-height:970 fails stage 1080 */ 
  body:has(#prep:not(.hidden)) #prep .ss-prep-brand-mark {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Phase 3 rollout · photographed polish wave 1
   Compact chat chrome, crisp gold labels, and an intentional Bazaar action row.
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #chatBox {
  max-height: 130px;
}

body:has(#prep:not(.hidden)) #chatHead {
  min-height: 40px;
  box-sizing: border-box;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
}

body:has(#prep:not(.hidden)) #chatBox .chatTab {
  top: 0;
  min-height: 32px;
  height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  line-height: 1;
}

body:has(#prep:not(.hidden)) #onlineRow {
  min-height: 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-block: 3px !important;
}

body:has(#prep:not(.hidden)) #chatIn {
  min-height: 36px;
}

body:has(#prep:not(.hidden)) #chatBox {
  width: 208px !important;
  max-height: 118px;
}

body:has(#prep:not(.hidden)) #chatHead {
  min-height: 36px;
  height: 36px;
  gap: 5px !important;
  padding: 3px 7px !important;
}

body:has(#prep:not(.hidden)) #chatBox .chatTab {
  min-height: 28px;
  height: 28px;
  padding: 0 9px;
}

body:has(#prep:not(.hidden)) #onlineRow {
  min-height: 24px;
  padding: 2px 7px !important;
  line-height: 1.2 !important;
}

body:has(#prep:not(.hidden)) #chatIn {
  min-height: 32px;
  margin: 5px !important;
  padding: 5px 7px !important;
}

body:has(#prep:not(.hidden)) :is(
  #readyBtn.ss-button--primary,
  #rollBtn.ss-button--primary
),
body:has(#prep:not(.hidden)) :is(
  #readyBtn.ss-button--primary,
  #rollBtn.ss-button--primary
) * {
  text-shadow: none !important;
}

body:has(#prep:not(.hidden)) #rollRow {
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
}

body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-height: 52px;
  margin: 0;
  padding: 10px 22px;
  color: #21170d !important;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .13em;
}

body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:hover:not(:disabled),
body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:active:not(:disabled),
body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:focus-visible {
  color: #21170d !important;
  text-shadow: none !important;
}

body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary span,
body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:hover:not(:disabled) span,
body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:active:not(:disabled) span,
body:has(#prep:not(.hidden)) #rollBtn.ss-button--primary:focus-visible span {
  color: #4b2b0b !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Phase 3 rollout · card containment and short-viewport resilience

   Browse cards used to be forced to the Bazaar row's height while both the
   card and row hid vertical overflow. At browser zoom or a short desktop
   viewport, the price/action footer could therefore exist below the visible
   frame with no way to reach it. Cards now keep their intrinsic content
   height, while the shared row provides a single vertical fallback scroll.
   -------------------------------------------------------------------------- */

body:has(#prep:not(.hidden)) #shopCards {
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding: 12px;
}

body:has(#prep:not(.hidden)) #shopCards > :is(
  .card.ss-unit-card,
  .card.sold.ss-purchased-card,
  .ss-bazaar-slot-upgrade
) {
  box-sizing: border-box;
  height: auto;
  min-height: calc(100% - 2px);
  align-self: flex-start;
}

body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}

/* Relic and Arcanum choice cards are also content-driven. Their surrounding
   modal becomes the scroll surface on short displays, so the last choice can
   never fall beneath the viewport. */
#relicOv > .ovCard,
#boonOv > .ovCard {
  width: min(920px, calc(1920px - 24px));
  max-width: min(920px, calc(100% - 24px));
  max-height: calc(1080px - 24px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

#relicCards,
#boonCards {
  max-width: 100%;
  flex-wrap: wrap;
}

#relicCards > .card,
#boonCards > .card {
  height: auto;
  box-sizing: border-box;
}

/* ── BOON / CARD-SHOP TITLES (Josh / Dave 2026-08-02) ─────────────────────────
   Root cause: openCardShop set inline `flex:1` (= 1 1 0%) on offer cards inside a
   ~680px modal that also reserved 150px for Decline. Each offer shrank to ~130px,
   while a horizontal `.top` still parked a 56px (often empty) `.cic` on the left.
   `.cn` then wrapped in a ~70px strip beside the icon and clipped under
   `.card { overflow:hidden }`. Decline looked “more centered” because its label is
   short. Pilot decorateShop() only watches #shopCards — it does not touch #boonOv.
   Fix stays scoped to #boonCards so bazaar unit/item cards are untouched. */
#boonCards > .card {
  /* !important beats leftover inline flex:1 from openBoons / openChannelerBoon. */
  flex: 1 1 200px !important;
  min-width: 200px !important;
  max-width: 280px;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden; /* art/chrome; title is laid out to fit inside, not spill */
}

#boonCards > .card.ss-boon-decline {
  flex: 0 0 150px !important;
  min-width: 150px !important;
  max-width: 160px;
  opacity: 0.8;
}

#boonCards > .card .top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
  flex: 0 0 auto;
  overflow: visible;
}

#boonCards > .card .cic:empty {
  display: none;
}

#boonCards > .card .cic,
#boonCards > .card .cic.framed {
  align-self: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin: 0;
}

#boonCards > .card .cic.framed.roundframe {
  width: 72px;
  height: 72px;
  /* Same as bazaar itemart10: soft round cic; hard clip on .iart-face. */
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  clip-path: none;
  isolation: isolate;
}

#boonCards > .card .cic .iart-face {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  pointer-events: none;
}

#boonCards > .card .cic .iart-face .iart,
#boonCards > .card .cic .iart-face .artic {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#boonCards > .card .cic > .iart,
#boonCards > .card .cic > .artic {
  max-width: 84%;
  max-height: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#boonCards > .card .cn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 4px;
  color: var(--ss-gold-light, #f0d68a);
  font-family: var(--ss-font-display, Cinzel, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

#boonCards > .card .cd {
  text-align: left;
  overflow-wrap: break-word;
}

/* Six deployment banners must remain contained inside the full-height rail.
   The compact row size is only engaged when vertical space is limited; names,
   statistics and action controls retain the approved type sizes. */
@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-height: 800px) — min-width:821 holds for stage 1920; max-height:800 fails stage 1080 */ 
  #pmBody {
    grid-auto-rows: minmax(0, 84px);
  }

  #placeMine .abat,
  #placeFoe .abat {
    padding-block: 5px;
  }
}

/* At the short effective viewports produced by browser zoom, reclaim height
   from artwork and decorative spacing—not from the readable text or 40px+
   actions. A vertical row scrollbar remains as the final safety net for an
   unusually long localized name or description. */
@media (max-width:0px){ /* DISABLED, was: (min-width: 821px) and (max-height: 760px) — min-width:821 holds for stage 1920; max-height:760 fails stage 1080 */ 
  body:has(#prep:not(.hidden)) #prepBody {
    grid-template-rows: minmax(500px, calc(1080px - 84px)) 500px;
  }

  body:has(#prep:not(.hidden)) #shopPanel {
    min-height: 0;
  }

  body:has(#prep:not(.hidden)) #shopCards {
    height: clamp(350px, calc(1080px - 218px), 430px);
  }

  body:has(#prep:not(.hidden)) #shopCards .card .cardArtBg {
    height: 82px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .top {
    grid-template-rows: 84px auto;
  }

  body:has(#prep:not(.hidden)) #shopCards .ss-pilot-unit-card .cic {
    height: 84px;
  }

  body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .cic,
  body:has(#prep:not(.hidden)) #shopCards .ss-pilot-item-card .cic.framed {
    width: 100px;
    height: 100px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .cmeta {
    gap: 4px;
    padding-top: 5px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .cn {
    min-height: 34px;
    font-size: 18px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .pillrow {
    min-height: 41px;
    grid-template-rows: 19px 19px;
    gap: 3px 5px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .mpill,
  body:has(#prep:not(.hidden)) #shopCards .card .ss-imprint-pill {
    min-height: 19px;
    height: 19px;
    padding-block: 2px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .cd {
    min-height: 34px;
    margin-top: 5px;
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat-grid {
    gap: 6px;
    margin: 6px 12px 8px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .ss-pilot-stat {
    min-height: 48px;
    padding-block: 5px 4px;
  }

  body:has(#prep:not(.hidden)) #shopCards .card .ss-unit-buy {
    margin-bottom: 10px;
  }
}

/* Narrow/mobile preparation already scrolls as a page. Give the Bazaar row
   the same containment guarantee without forcing a tall fixed card viewport. */
@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  body:has(#prep:not(.hidden)) #shopCards {
    height: min(470px, calc(1080px - 170px));
    min-height: 340px;
  }
}