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

/*
 * SKY SUNDER visual baseline · 2026-07-30
 * Presentation-only override layer. Remove this stylesheet link to restore the
 * Phase 2 appearance. No gameplay selectors, handlers, or data live here.
 */
:root {
  --ss-surface-parchment: #f1e6c8;
  --ss-surface-parchment-muted: #ddc99a;
  --ss-surface-stone: #25252a;
  --ss-surface-void: #0e0e10;
  --ss-surface-indigo: #1b1e3a;
  --ss-surface-indigo-deep: #111225;
  --ss-surface-card: #14131b;
  --ss-surface-control: #201d2c;
  --ss-surface-control-hover: #30263f;
  --ss-surface-panel: rgba(18, 18, 28, .94);
  --ss-surface-panel-soft: rgba(18, 18, 28, .82);
  --ss-surface-overlay: rgba(8, 8, 14, .82);
  --ss-border-subtle: #665b4f;
  --ss-border-strong: #8e7858;
  --ss-border-gold: #c8a35a;
  --ss-border-focus: #a66cff;
  --ss-text-on-dark: #f3ead8;
  --ss-text-muted-on-dark: #c7bba7;
  --ss-text-on-parchment: #2b2118;
  --ss-text-muted-on-parchment: #65533f;
  --ss-font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --ss-font-body: "Lora", Georgia, "Times New Roman", serif;
  --ss-type-heading-lg: 32px;
  --ss-type-heading-md: 24px;
  --ss-type-heading-sm: 19px;
  --ss-type-action: 18px;
  --ss-type-body-lg: 17px;
  --ss-type-body: 16px;
  --ss-type-body-sm: 14px;
  --ss-type-label: 13px;
  --ss-type-caption: 12px;
  --ss-leading-body: 1.55;
  --ss-leading-reading: 1.7;
  --panel: var(--ss-surface-panel);
  --panel-edge: var(--ss-border-subtle);
  --ink: var(--ss-text-on-dark);
  --ink-dim: var(--ss-text-muted-on-dark);
}

html, body, button, input, select, textarea {
  font-family: var(--ss-font-body);
}

body {
  color: var(--ss-text-on-dark);
  text-rendering: optimizeLegibility;
}

/* New title identity. Three copies share identical geometry: one exposes only
   the wordmark, while two expose opposing halves of the sundered island. */
#titleScreen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255,248,225,.48), transparent 38%),
    linear-gradient(180deg, rgba(241,230,200,.16), rgba(17,18,37,.08) 58%, rgba(8,8,14,.5));
}
#titleScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 38% at 50% 21%, rgba(246,239,231,.78), rgba(241,230,200,.28) 48%, transparent 76%);
}
#titleScreen > * { z-index: 2; }
#titleScreen .logoWrap.ss-new-logo {
  position: relative;
  width: min(1120px, 1689.6px);
  aspect-ratio: 2155 / 730;
  line-height: 0;
  animation: none;
  filter: drop-shadow(0 9px 20px rgba(0,0,0,.42));
}
.ss-new-logo .ss-logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ss-new-logo .ss-logo-wordmark { clip-path: inset(0 0 0 29.3%); }
.ss-new-logo .ss-logo-island-left {
  clip-path: inset(0 81.7% 0 0);
  animation: ssIslandLeft 9s ease-in-out infinite;
}
.ss-new-logo .ss-logo-island-right {
  clip-path: inset(0 70.7% 0 18.3%);
  animation: ssIslandRight 9s ease-in-out infinite;
}
@keyframes ssIslandLeft {
  0%,100% { transform: translateY(-3px); }
  50% { transform: translateY(5px); }
}
@keyframes ssIslandRight {
  0%,100% { transform: translateY(5px); }
  50% { transform: translateY(-3px); }
}
@media (max-width:0px){ /* DISABLED, was: (max-height: 800px) — max-height:800 fails stage 1080 */ 
  #titleScreen {
    justify-content: flex-start;
    padding-top: 0;
    box-sizing: border-box;
  }
  #titleScreen .logoWrap.ss-new-logo {
    width: min(1040px, 1574.4px);
  }
  #titleScreen .ss-social-row {
    display: none !important;
  }
}

button,
[role="button"],
.diffBtn,
.ascBtn,
.ubtn,
.lbTab,
.sortChip,
.chatTab,
.placeOvBtn {
  font-family: var(--ss-font-display);
  font-weight: 600;
}

/* Shared tactile surfaces — opaque panel paint only.
   Do NOT add backdrop-filter here: body uses transform:scale for the 1920×1080 stage,
   and Chromium softens any element (and often its children) that samples backdrop-filter
   under that scale — worse when windowed scale ≠ 1 (Josh 2026-08-06: settings + feedback). */
.prepPanel,
#standings,
#ascentPanel,
#placeMine,
#placeFoe,
#chatBox,
#recapBubble,
.ovCard,
.howto,
.ss-surface,
#settingsOv > div {
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 28%),
    radial-gradient(circle at 15% 0, rgba(138,61,255,.06), transparent 35%),
    var(--ss-surface-panel);
  border-color: var(--ss-border-subtle);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,76,.07),
    0 16px 42px rgba(0,0,0,.48);
}

/* Systemic: no backdrop-filter on scaled-stage UI chrome (modals, scrims, rails, title chips).
   Edge polish stays via solid/semi-opaque fills + borders/shadows above. */
.ovWrap,
.ovCard,
.howto,
.ss-surface,
.ss-exit-dialog,
.ss-exit-dialog__card,
#settingsOv > div,
#exitDlg.ss-exit-dialog,
#placeMine,
#placeFoe,
#placeTop,
#placeHint,
#chatBox,
#standings,
#ascentPanel,
#recapBubble,
.prepPanel,
#ticker,
#titleScreen #leaderboard,
#titleScreen #idRow,
#titleScreen #diffRow,
.navlbl,
.navbtn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.prepPanel h2,
#standings h3,
#placeMine h3,
#placeFoe h3,
.compSec,
.ovCard h2 {
  color: var(--ss-gold-light);
  font-family: var(--ss-font-display);
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 1px 8px rgba(0,0,0,.65);
}

/* Buttons remain modular: this entire block can be removed independently. */
button.big,
#readyBtn,
#placeGo,
.ss-button--primary {
  min-height: 46px;
  border: 1px solid #f1cf7a;
  border-radius: var(--ss-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 32%),
    linear-gradient(180deg, #efd07e, #c99b3f 58%, #8f6527);
  color: #21170d;
  box-shadow:
    inset 0 0 0 2px rgba(74,42,11,.38),
    inset 0 -4px 8px rgba(62,31,6,.28),
    0 5px 14px rgba(0,0,0,.4);
}

.ubtn,
.diffBtn,
.ascBtn,
#rollBtn,
#lockBtn,
.placeOvBtn,
.sortChip,
.lbTab,
button.big.ghost,
.ss-button--secondary {
  min-height: 38px;
  padding: 8px 13px;
  border-color: #8c744f;
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 45%),
    linear-gradient(180deg, #29272d, #17171b);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,76,.08),
    0 3px 9px rgba(0,0,0,.32);
}

.ubtn:hover:not(:disabled),
.diffBtn:hover,
.ascBtn:hover,
#rollBtn:hover:not(:disabled),
#lockBtn:hover,
.placeOvBtn:hover,
button.big.ghost:hover {
  color: #f6dda2;
  border-color: var(--ss-border-gold);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(180deg, #363137, #1c1a20);
}

.diffBtn.sel,
.ascBtn.sel,
.lbTab.on,
#lockBtn.on,
.placeOvBtn.on,
.ss-button--secondary[aria-pressed="true"] {
  color: #f4ddff;
  border-color: #c8a35a;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255,255,255,.2), transparent 22%),
    radial-gradient(ellipse at 70% 75%, rgba(185,112,255,.28), transparent 38%),
    linear-gradient(135deg, #5a267e, #2d1647 58%, #681e8b);
  box-shadow:
    inset 0 0 0 2px rgba(49,20,62,.65),
    0 0 18px rgba(138,61,255,.35);
}

/* Violet crystal action: the established magic/recruit treatment for affirmative
   actions that should feel special without competing with the gold primary action. */
.ss-button--violet {
  border-color: #d9b86d;
  color: #f4dfad;
  -webkit-text-fill-color: #f4dfad;
  background:
    radial-gradient(circle at 32% 0, rgba(216,162,255,.26), transparent 38%),
    linear-gradient(135deg, rgba(88,37,126,.97), rgba(47,19,79,.98) 58%, rgba(27,12,49,.99));
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,235,189,.23),
    inset 0 0 18px rgba(161,77,230,.24),
    inset 0 0 0 2px rgba(28,10,47,.76),
    0 0 0 1px rgba(89,47,15,.7),
    0 0 15px rgba(140,57,216,.27),
    0 6px 16px rgba(0,0,0,.42);
}

.ubtn.ss-button--violet:hover:not(:disabled),
.ubtn.ss-button--violet:focus-visible {
  border-color: #e5c878;
  color: #ffe9b8;
  -webkit-text-fill-color: #ffe9b8;
  background:
    radial-gradient(circle at 40% 0, rgba(235,194,255,.4), transparent 42%),
    linear-gradient(135deg, rgba(112,49,158,.99), rgba(61,24,101,.99) 58%, rgba(32,13,59,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,239,200,.32),
    inset 0 0 20px rgba(190,101,255,.3),
    inset 0 0 0 2px rgba(30,10,50,.7),
    0 0 0 1px rgba(89,47,15,.72),
    0 0 24px rgba(157,73,230,.42),
    0 7px 18px rgba(0,0,0,.46);
}

/* Bazaar: stronger hierarchy and a readable card system. */
#prepHead {
  min-height: 64px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(13,13,20,.96), rgba(19,17,27,.88));
  border-bottom: 1px solid rgba(200,163,90,.48);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

#prepHead .title { font-size: 20px; }
#goldPill #incomeTxt { font-size: inherit; color: var(--ss-gold-light, var(--gold)); font-weight: 700; }
#prepTimer { font-size: 19px; }
#prepBody { gap: 14px; padding: 14px 16px 16px; }
.prepPanel { padding: 15px; }
.prepPanel h2 { font-size: 15px; margin-bottom: 13px; padding-bottom: 9px; }

.bld,
.abat,
.schip {
  background: linear-gradient(180deg, #1f1e24, #131318);
  border-color: #4d463d;
}
.bld { padding: 10px; margin-bottom: 9px; font-size: 14px; }
.bld .bn { font-size: 14px; }
.bld .be,
.abat .as { font-size: 12px; line-height: 1.5; color: var(--ss-text-muted-on-dark); }

#shopCards { gap: 10px; }
.card {
  min-height: 118px;
  padding: 10px 12px;
  border-width: 1px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(9,9,12,.94), rgba(20,19,26,.86)),
    var(--ss-surface-card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 5px 14px rgba(0,0,0,.28);
}
.card .cic { width: 56px; height: 56px; }
.card .cn { font-size: 16px; color: #f3ead8; }
.card .cd { font-size: 13px; line-height: 1.5; color: #c7bba7; }
.card .tag { font-size: 11px; padding: 3px 7px; }
.mpill { font-size: 10px; line-height: 18px; padding: 0 7px; }
.card .buy { min-height: 38px; font-size: 13px; }
#oddsBox { font-size: 12px; line-height: 1.65; }

/* Reading and instruction surfaces */
#tutOv .ovCard {
  max-width: 760px !important;
  padding: 30px 38px !important;
  text-align: left;
}
#tutBody {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.75;
}
#tutBody h4 { font-size: 15px; margin-top: 24px; }
.compProse,
#compDetail { font-size: 15px; line-height: 1.7; }
.ovCard .sub { font-size: 16px; color: var(--ss-text-muted-on-dark); }
.ovCard .simlist { font-size: 14px; }

#placeHint,
#hint {
  color: var(--ss-text-on-dark);
  background: rgba(12,12,18,.94);
  border: 1px solid rgba(200,163,90,.65);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  text-shadow: none;
  font-size: 14px;
  line-height: 1.6;
  padding: 11px 16px;
}
#hint { left: 16px; bottom: 16px; max-width: 560px; }

#endStats {
  font-size: 16px;
  line-height: 1.65;
  border-color: rgba(200,163,90,.62);
}

:where(button,input,select,textarea,a,[role="button"]):focus-visible {
  outline: 3px solid var(--ss-border-focus);
  outline-offset: 3px;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 1180px) — max-width:1180 fails stage 1920 */ 
  #prepBody { gap: 8px; padding-inline: 10px; }
  #townPanel { min-width: 220px; }
  #shopPanel { min-width: 330px; }
  #armyPanel { min-width: 220px; margin-right: 0; }
  #standings { display: none; }
  .pgut { display: none; }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  #prep { overflow: auto; }
  #prepBody {
    display: grid;
    grid-template-columns: 1fr;
    overflow: auto;
  }
  #townPanel, #shopPanel, #armyPanel {
    min-width: 0;
    width: auto;
    margin: 0;
    overflow: visible;
  }
  #shopPanel { order: -1; }
  #readyBtn { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-new-logo .ss-logo-island-left,
  .ss-new-logo .ss-logo-island-right { animation: none !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shared compact chat chrome. */
#chatBox {
  width: 208px !important;
  max-height: 118px;
  overflow: hidden;
}

#chatHead {
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 7px !important;
  line-height: 1;
}

#chatBox .chatTab {
  top: 0;
  min-height: 28px;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  line-height: 1;
}

#onlineRow {
  min-height: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 2px 7px !important;
  line-height: 1.2 !important;
}

#chatBox :is(#schatLog, #chatLog) {
  max-height: 24px !important;
}

#chatIn {
  min-height: 32px;
  margin: 5px !important;
  padding: 5px 7px !important;
}

/* ============================================================
   APPROVED MAIN-TOWN COMPOSITION
   Existing content only: six-banner-capable rail, ten-building
   town grid, five-card-capable Bazaar row, economy and battle.
   The open upper workspace preserves the floating-island view.
   No formation board and no opponent-intelligence feature.
   ============================================================ */
@media all{ /* was: (min-width: 1181px) — min-width:1181 holds for stage 1920 */ 
  #prepBody {
    display: grid;
    grid-template-columns:
      minmax(232px, 260px)
      minmax(330px, 380px)
      minmax(0, 1fr);
    grid-template-rows: minmax(210px, 1fr) minmax(396px, min(540px, 420px));
    gap: 12px;
    padding: 12px 252px 14px 14px;
  }
  #prepBody > .pgut { display: none; }
  #armyPanel {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    width: auto;
    margin: 0;
    overflow-y: auto;
  }
  #townPanel {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    max-height: none;
    align-self: stretch;
    overflow-y: auto;
    padding: 12px;
  }
  #shopPanel {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    width: auto;
    justify-self: stretch;
    overflow: hidden;
    padding: 12px;
  }
  #shopPanel h2 { margin-bottom: 9px; }
  #bldList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 7px;
  }
  #bldList > .bld {
    min-width: 0;
    min-height: 43px;
    height: 43px;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 6px;
    gap: 5px;
  }
  #bldList > div:not(.bld) { display: none; }
  #bldList .bld .ic {
    width: 32px;
    height: 31px;
  }
  #bldList .bld .ic .artic {
    max-width: 32px;
    max-height: 31px;
  }
  #bldList .bld .bn {
    font-size: 12px;
    line-height: 1.2;
  }
  #bldList .bld .ubtn {
    min-height: 28px;
    padding: 3px 5px;
    font-size: 10px;
    white-space: nowrap;
  }
  #townPanel #oddsBox {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(200,163,90,.26);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #shopCards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    padding: 2px;
    scroll-snap-type: x proximity;
  }
  #shopCards .card {
    flex: 0 0 clamp(180px, 180.48px, 190px);
    min-width: 180px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }
  #shopCards .card .top {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
  }
  #shopCards .card .cic {
    width: 58px;
    height: 58px;
    align-self: center;
  }
  #shopCards .card .cmeta {
    width: 100%;
    overflow: visible;
    text-align: center;
  }
  #shopCards .card .cd {
    flex: 1;
    text-align: left;
  }
  #shopCards .card .buy { margin-top: auto; }
  #shopCards .card .cardArtBg { opacity: .24; }
  #shopCards .card .cn {
    display: block;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
  #shopCards .card .tag {
    display: inline-flex;
    margin-top: 4px;
  }
  #shopCards .card .pillrow {
    justify-content: center;
  }
  #armySum {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #armySum > .abat {
    min-height: 58px;
    margin: 0;
  }
  body:has(#prep:not(.hidden)) #chatBox {
    top: 76px !important;
    right: 14px !important;
    bottom: auto !important;
    width: 222px !important;
    max-height: 150px;
    overflow: hidden;
  }
  body:has(#prep:not(.hidden)) #chatBox #schatLog,
  body:has(#prep:not(.hidden)) #chatBox #chatLog {
    max-height: 38px !important;
    overflow-y: auto;
  }
  body:has(#prep:not(.hidden)) #chatBox.popIn,
  body:has(#prep:not(.hidden)) #chatBox.popOut {
    transform-origin: 100% 0;
  }
  body:has(#prep:not(.hidden)) #chatMini {
    top: 76px !important;
    right: 14px !important;
    bottom: auto !important;
  }
  body:has(#prep:not(.hidden)) #chatToast {
    top: 120px !important;
    right: 64px !important;
    bottom: auto !important;
  }
  #standings {
    top: 236px;
    right: 14px;
    width: 222px;
    max-height: calc(1080px - 250px);
    overflow-y: auto;
  }
  body:has(#prep:not(.hidden)):has(#chatMini:not(.hidden)) #standings {
    top: 128px;
    max-height: calc(1080px - 142px);
  }
  #readyBtn { margin-right: 236px; }
}

#armyPanel h2,
#townPanel h2,
#shopPanel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e7c779;
  text-shadow: 0 1px 10px rgba(200,163,90,.12);
}
#armyPanel h2::after,
#townPanel h2::after,
#shopPanel h2::after {
  margin-left: auto;
  font-family: var(--ss-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ss-text-muted-on-dark);
}
/* The three chips that used to live here — "MAX 6", "10 BUILDINGS", "UP TO 5" — are gone at Josh's
   request (2026-07-31). They were removed from the game's markup that morning and reappeared on screen,
   because generated content in a stylesheet is not affected by deleting text from a template. Removed at
   source as well as overridden in prep-layout.css: an override alone leaves the next person to read this
   file believing the captions are still wanted. */

#armyPanel,
#townPanel,
#shopPanel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 26%),
    radial-gradient(circle at 80% 0, rgba(138,61,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(27,30,58,.96), rgba(14,14,16,.96));
  border-color: rgba(200,163,90,.56);
  box-shadow:
    inset 0 0 0 1px rgba(241,230,200,.035),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 26px rgba(0,0,0,.38);
}
#townPanel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 20% 0, rgba(200,163,90,.08), transparent 36%),
    linear-gradient(180deg, rgba(37,37,42,.97), rgba(14,14,16,.97));
}
#shopPanel {
  border-color: rgba(166,108,255,.52);
  box-shadow:
    inset 0 0 0 1px rgba(200,163,90,.14),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 28px rgba(0,0,0,.42);
}
#bldList > .bld {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 42%),
    linear-gradient(180deg, #29282c, #17171b);
  border-color: rgba(142,120,88,.7);
}
#bldList > .bld:hover {
  border-color: rgba(200,163,90,.8);
  box-shadow: inset 0 0 0 1px rgba(200,163,90,.1);
}

/* Larger text and clearer structure on persistent information surfaces. */
#standings { font-size: 14px; }
#standings h3 { font-size: 13px; }
#standings .tip { font-size: 12px; line-height: 1.45; }
.strow .nm { font-size: 13px; }
.abat { padding: 9px 10px; font-size: 13px; }
.abat .an { font-size: 14px; }
.abat .as { font-size: 12px; }
.spellchips, .pillrow { gap: 7px; }
.schip { min-height: 34px; font-size: 13px; }

/* Reading panels: left-aligned prose, useful measure, explicit hierarchy. */
#tutOv .ovCard,
#compOv .ovCard,
#patchOv .ovCard,
#simOv .ovCard,
#compoOv .ovCard {
  border-color: rgba(200,163,90,.68);
}
#compOv,
#patchOv,
#simOv,
#compoOv { z-index: 60; }
#tutOv { z-index: 62; }
#tutBody,
.compProse,
#patchBody,
#compDetail,
#compoBody {
  text-align: left;
  color: var(--ss-text-on-dark);
}
#tutBody p,
.compProse p,
#patchBody p {
  max-width: 68ch;
  margin: 0 auto 14px;
}
#tutBody h4,
#compDetail h4,
.compSec {
  color: var(--ss-gold-light);
  border-bottom-color: rgba(200,163,90,.4);
}
#compSearch,
#devCmd,
#chatIn,
#lbyCode {
  min-height: 40px;
  background: #111116;
  border-color: #665b4f;
  color: #f3ead8;
  font-size: 14px;
}
.sortChip,
.lbTab,
.chatTab {
  min-height: 32px;
  font-size: 11px;
}

/* Settings: consistent rows, larger hints, and a clearer tab hierarchy. */
#settingsOv > div {
  width: min(520px, 1804.8px) !important;
  padding: 26px 30px !important;
  border-color: rgba(200,163,90,.68) !important;
  /* Sound/Gameplay always fit the 1080 stage — keep overflow off so the 13px themed
     scrollbar does not reserve a dead gutter (Josh 2026-08-06). */
  max-height: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#settingsClose {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setTab {
  min-height: 42px;
  font-size: 12px;
}
.setTab.on {
  color: #f4ddff;
  border-color: #c8a35a;
  background: linear-gradient(135deg, #5a267e, #2d1647 58%, #681e8b);
}
.setToggle {
  min-width: 82px;
  min-height: 40px;
  font-size: 12px;
}
.setAudioRow { min-height: 44px; margin-bottom: 8px; }
.setAudioLbl { font-size: 15px; min-width: 92px; }
.setAudioSub { font-size: 13px; min-width: 92px; }
.setAudioHint {
  margin-left: 104px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ss-text-muted-on-dark);
}
/* Beat global `input{padding/min-height/box-shadow}` so thumbs travel edge-to-edge. */
#settingsOv .setAudioSlider{
  flex:1;min-width:0;cursor:pointer;--pct:0%;
  -webkit-appearance:none;appearance:none;
  height:18px;min-height:0!important;margin:0;padding:0!important;
  border:none!important;border-radius:0;background:transparent!important;
  box-shadow:none!important;accent-color:transparent;outline:none;
}
#settingsOv .setAudioSlider::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) var(--pct),#1a1530 var(--pct),#1a1530 100%);
}
#settingsOv .setAudioSlider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-4px;border-radius:50%;
  background:var(--gold);border:2px solid #120e28;box-shadow:none;
}
#settingsOv .setAudioSlider::-moz-range-track{
  height:6px;border-radius:999px;border:none;
  background:linear-gradient(90deg,var(--gold) 0,var(--gold) var(--pct),#1a1530 var(--pct),#1a1530 100%);
}
#settingsOv .setAudioSlider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2px solid #120e28;box-shadow:none;
}
#settingsOv .setAudioSlider:disabled{cursor:default}
#settingsOv .setAudioSlider:disabled::-webkit-slider-thumb{opacity:.55}
#settingsOv .setAudioSlider:disabled::-moz-range-thumb{opacity:.55}

/* Recap and endings: outcome first, useful statistics second, action last. */
#roundOverlay .ovCard {
  width: min(620px, 1804.8px);
  padding: 34px 42px;
}
#roundOverlay .ovCard h2 { font-size: 34px; }
#roStats {
  margin-top: 16px;
  padding: 14px;
  background: rgba(8,8,12,.45);
  border: 1px solid rgba(200,163,90,.35);
  border-radius: 10px;
}
#endScreen #endStats {
  min-width: min(620px, 1689.6px);
  padding: 16px 22px;
  background: rgba(13,13,18,.92);
}
#endBtns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(360px, 1651.2px);
  gap: 8px;
}
#endBtns .big { width: 100%; margin-top: 0; }

@media (max-width:0px){ /* DISABLED, was: (max-width: 1180px) — max-width:1180 fails stage 1920 */ 
  #prepBody {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.4fr);
    grid-template-rows: auto auto;
    overflow: auto;
  }
  #armyPanel,
  #shopPanel,
  #townPanel {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: stretch;
  }
  #armyPanel { grid-column: 1; grid-row: 1 / 3; }
  #shopPanel { grid-column: 2; grid-row: 1; }
  #townPanel { grid-column: 2; grid-row: 2; }
  #shopCards { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}

@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 */ 
  #townPanel { padding: 12px; }
  #bldList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 7px;
  }
  #bldList > .bld {
    min-width: 0;
    height: 43px;
    min-height: 43px;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 6px;
    gap: 5px;
  }
  #bldList > div:not(.bld) { display: none; }
  #bldList .bld .ic {
    width: 32px;
    height: 31px;
  }
  #bldList .bld .ic .artic {
    max-width: 32px;
    max-height: 31px;
  }
  #bldList .bld .bn {
    font-size: 12px;
    line-height: 1.2;
  }
  #bldList .bld .ubtn {
    min-height: 28px;
    padding: 3px 5px;
    font-size: 10px;
    white-space: nowrap;
  }
  #townPanel #oddsBox {
    margin-top: 6px;
    padding-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 820px) — max-width:820 fails stage 1920 */ 
  #prepBody { display: flex; flex-direction: column; }
  #shopPanel { order: 1; }
  #armyPanel { order: 2; }
  #townPanel { order: 3; }
  #shopCards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PHASE 3 GLOBAL ROLLOUT · 2026-07-31
   Shared presentation layer for all non-Town screen families.
   Town/Bazaar remains governed by town-preparation-pilot.css, loaded later.
   ========================================================================== */

:root {
  --ss-font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ss-font-reading: "Lora", Georgia, "Times New Roman", serif;
  --ss-font-body: var(--ss-font-ui);
  --ss-gold-light: #f0d28d;
  --ss-gold-bright: #ffe2a0;
  --ss-violet: #8a3dff;
  --ss-violet-light: #c790ff;
  --ss-danger: #d66a61;
  --ss-success: #66c4a9;
  --ss-radius-xs: 4px;
  --ss-radius-sm: 7px;
  --ss-radius-md: 10px;
  --ss-radius-lg: 14px;
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 24px;
  --ss-space-6: 32px;
  --ss-action-height: 44px;
  --ss-control-height: 40px;
  --ss-shadow-panel:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 16px 44px rgba(0,0,0,.54);
  --ss-shadow-control:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -2px 0 rgba(0,0,0,.52),
    0 5px 14px rgba(0,0,0,.32);
  --ss-motion-fast: 140ms;
  --ss-motion-base: 220ms;
}

html,
body,
input,
select,
textarea {
  font-family: var(--ss-font-ui);
}

body {
  font-size: var(--ss-type-body);
  letter-spacing: .005em;
}

p,
li,
input,
select,
textarea,
.sub,
.tagline {
  font-family: var(--ss-font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.logo,
button,
[role="button"],
.diffBtn,
.ascBtn,
.ubtn,
.lbTab,
.sortChip,
.chatTab,
.placeOvBtn {
  font-family: var(--ss-font-display);
}

button,
[role="button"] {
  -webkit-font-smoothing: antialiased;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ss-violet-light) !important;
  outline-offset: 2px;
}

/* Shared tactile controls -------------------------------------------------- */

.big,
.ubtn,
.diffBtn,
.ascBtn,
.placeOvBtn,
.setTab,
.setToggle,
.sortChip,
.lbTab,
.chatTab,
.pfMinBtn,
.pmMinBtn,
#miBtn,
#relicReroll,
#summitClaim {
  min-height: var(--ss-control-height);
  box-sizing: border-box;
  border: 1px solid rgba(142,120,88,.78);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(180deg, #292932, #17171d);
  box-shadow: var(--ss-shadow-control);
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  transition:
    border-color var(--ss-motion-fast) ease,
    box-shadow var(--ss-motion-fast) ease;
}

.big:hover,
.ubtn:hover,
.diffBtn:hover,
.ascBtn:hover,
.placeOvBtn:hover,
.setTab:hover,
.setToggle:hover,
.sortChip:hover,
.lbTab:hover,
.chatTab:hover,
.pfMinBtn:hover,
.pmMinBtn:hover,
#miBtn:hover,
#relicReroll:hover,
#summitClaim:hover {
  /* Border/shadow only — filter/brightness forces Electron to re-composite mix-blend plates. */
  border-color: var(--ss-border-gold);
  box-shadow:
    var(--ss-shadow-control),
    0 0 14px rgba(212, 168, 74, .22);
}

.big:active,
.ubtn:active,
.diffBtn:active,
.ascBtn:active,
.placeOvBtn:active,
.setTab:active,
.setToggle:active,
.sortChip:active,
.lbTab:active,
.chatTab:active,
.pfMinBtn:active,
.pmMinBtn:active,
#miBtn:active,
#relicReroll:active,
#summitClaim:active {
  /* Shadow-only press — filter/transform flash every image under Electron. */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

.big,
#placeGo,
#roBtn,
#miBtn,
#summitClaim,
#lbyCreate,
#nameGoBtn,
#runContBtn {
  min-height: var(--ss-action-height);
  padding: 10px 24px;
  color: #23180b !important;
  border-color: #e1bd68 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 32%),
    linear-gradient(180deg, #f2d47f 0%, #d6a83e 62%, #a8731d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 0 rgba(91,52,9,.68),
    0 0 0 2px rgba(70,47,15,.72),
    0 6px 18px rgba(0,0,0,.42) !important;
  text-shadow: none !important;
  font-weight: 700;
  letter-spacing: .1em;
}

:is(
  .big,
  #placeGo,
  #roBtn,
  #miBtn,
  #summitClaim,
  #lbyCreate,
  #nameGoBtn,
  #runContBtn
) * {
  text-shadow: none !important;
}

.big.ghost,
.big.secondary,
#roMenuBtn,
#endMenuBtn,
#diffBack,
#modeBack,
#ascBack,
#lbyBack {
  color: var(--ss-text-on-dark) !important;
  border-color: rgba(142,120,88,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(180deg, #292932, #17171d) !important;
  box-shadow: var(--ss-shadow-control) !important;
}

#runNewBtn.ss-button--violet {
  color: #f4dfad !important;
  -webkit-text-fill-color: #f4dfad !important;
  border-color: #d9b86d !important;
  background:
    radial-gradient(circle at 32% 0, rgba(216,162,255,.26), transparent 38%),
    linear-gradient(135deg, rgba(88,37,126,.97), rgba(47,19,79,.98) 58%, rgba(27,12,49,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,189,.23),
    inset 0 0 18px rgba(161,77,230,.24),
    inset 0 0 0 2px rgba(28,10,47,.76),
    0 0 0 1px rgba(89,47,15,.7),
    0 0 15px rgba(140,57,216,.27),
    0 6px 16px rgba(0,0,0,.42) !important;
}

#runNewBtn.ss-button--violet:hover:not(:disabled),
#runNewBtn.ss-button--violet:focus-visible {
  color: #ffe9b8 !important;
  -webkit-text-fill-color: #ffe9b8 !important;
  border-color: #e5c878 !important;
  background:
    radial-gradient(circle at 40% 0, rgba(235,194,255,.4), transparent 42%),
    linear-gradient(135deg, rgba(112,49,158,.99), rgba(61,24,101,.99) 58%, rgba(32,13,59,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,239,200,.32),
    inset 0 0 20px rgba(190,101,255,.3),
    inset 0 0 0 2px rgba(30,10,50,.7),
    0 0 0 1px rgba(89,47,15,.72),
    0 0 24px rgba(157,73,230,.42),
    0 7px 18px rgba(0,0,0,.46) !important;
}

.sel,
.on,
[aria-pressed="true"],
.diffBtn.sel,
.ascBtn.sel,
.sortChip.on,
.setTab.sel,
.lbTab.sel,
.chatTab.sel {
  color: var(--ss-gold-light) !important;
  border-color: rgba(200,163,90,.9) !important;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(199,144,255,.32), transparent 56%),
    linear-gradient(145deg, rgba(98,36,148,.92), rgba(43,18,74,.97) 56%, rgba(23,16,38,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -2px 0 rgba(17,7,28,.78),
    0 0 0 1px rgba(70,43,18,.78),
    0 0 16px rgba(138,61,255,.25) !important;
}

button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.35);
  opacity: .56;
}

/* Shared shell, modal, and form surfaces ---------------------------------- */

.screen:not(#prep):not(#titleScreen):not(#endScreen) {
  padding: clamp(20px, 76.8px, 52px);
  box-sizing: border-box;
}

.screen:not(#prep):not(#titleScreen) > .logo,
.screen:not(#prep):not(#titleScreen) > h1 {
  color: var(--ss-gold-light);
  text-shadow: 0 3px 16px rgba(0,0,0,.88);
}

.ovWrap {
  padding: clamp(12px, 57.6px, 34px);
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(50,37,72,.18), transparent 56%),
    rgba(6,6,11,.84);
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
}

.ovCard,
.howto,
#settingsPanel,
#scoutCard,
#matchIntro .vsWrap,
#placeMine,
#placeFoe,
#placeSpells,
#battleTop,
#armyBars,
#ticker,
#battleBottom,
#lobbyScreen > div:not(.tagline),
#standings,
#ascentPanel {
  border: 1px solid rgba(142,120,88,.78);
  border-radius: var(--ss-radius-lg);
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), transparent 25%),
    linear-gradient(160deg, rgba(31,31,39,.98), rgba(13,13,18,.98));
  box-shadow: var(--ss-shadow-panel);
}

.ovCard {
  padding: clamp(20px, 57.6px, 34px);
}

.ovCard h2,
.ovCard h3,
.ovCard h4,
#settingsPanel h2,
#scoutCard h2,
#scoutCard h3 {
  color: var(--ss-gold-light);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ovCard .sub,
.ovCard p,
.ovCard li {
  color: var(--ss-text-muted-on-dark);
}

input,
select,
textarea,
#compSearch,
#lbyCode,
#chatIn {
  min-height: var(--ss-control-height);
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(111,92,130,.72);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text-on-dark);
  background: rgba(15,13,24,.92);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.45);
}

input::placeholder,
textarea::placeholder {
  color: rgba(199,187,167,.6);
}

/* Mode, Ascent, and difficulty setup -------------------------------------- */

#modeScreen,
#ascScreen,
#diffScreen {
  justify-content: center;
  overflow: auto;
}

#ascPicks,
#diffPicks {
  width: min(1120px, 1804.8px);
  margin: clamp(20px, 43.2px, 42px) auto 0;
  align-items: stretch;
  gap: 14px;
}

#modePicks {
  width: min(420px, 1689.6px);
  margin: clamp(20px, 43.2px, 42px) auto 0;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

#modePicks .big {
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 14px 22px;
  color: var(--ss-text-on-dark) !important;
  border-color: rgba(142,120,88,.82) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(138,61,255,.11), transparent 58%),
    linear-gradient(180deg, #292932, #15151b) !important;
  box-shadow: var(--ss-shadow-control) !important;
  font-size: 18px;
}

#modePicks .big:hover {
  color: var(--ss-gold-light) !important;
  border-color: var(--ss-border-gold) !important;
  box-shadow:
    var(--ss-shadow-control),
    0 0 18px rgba(138,61,255,.15) !important;
}

#diffPicks {
  flex-wrap: wrap !important;
}

#modeBtnRow,
#ascBtnRow,
#diffBtnRow {
  transform: none !important;
  margin: clamp(22px, 54px, 54px) auto 0 !important;
  padding-bottom: 18px;
  gap: 12px;
}

#modeBtnRow .big,
#ascBtnRow .big,
#diffBtnRow .big {
  width: min(220px, 806.4px);
}

#ascMods {
  width: min(900px, 1766.4px);
  margin: 18px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(142,120,88,.56);
  border-radius: var(--ss-radius-md);
  background: rgba(15,15,21,.88);
  color: var(--ss-text-muted-on-dark);
  font-size: 15px;
  line-height: 1.5;
}

#diffScore {
  margin-top: 20px;
  color: var(--ss-gold-light);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* Reading rooms ------------------------------------------------------------ */

#tutOv .ovCard,
#patchOv .ovCard {
  color: var(--ss-text-on-parchment);
  border-color: #9b7434;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.26), transparent 24%),
    linear-gradient(135deg, rgba(104,73,28,.08), transparent 28%),
    var(--ss-surface-parchment);
  box-shadow:
    inset 0 0 0 3px rgba(104,73,28,.12),
    inset 0 0 42px rgba(104,73,28,.12),
    0 22px 64px rgba(0,0,0,.62);
}

#tutOv .ovCard h2,
#tutOv .ovCard h3,
#tutOv .ovCard h4,
#patchOv .ovCard h2,
#patchOv .ovCard h3,
#patchOv .ovCard h4 {
  color: #4b2f18 !important;
  text-shadow: none;
}

#tutOv .sub,
#patchOv .sub {
  color: var(--ss-text-muted-on-parchment) !important;
}

#tutBody,
#patchBody {
  font-family: var(--ss-font-reading);
  color: var(--ss-text-on-parchment);
  font-size: 16px;
  line-height: 1.72;
  text-align: left;
}

#tutBody p,
#tutBody li,
#patchBody p,
#patchBody li,
#tutBody div,
#patchBody div,
#tutBody span,
#patchBody span {
  font-family: var(--ss-font-reading);
  color: var(--ss-text-on-parchment) !important;
}

#tutBody strong,
#tutBody b,
#patchBody strong,
#patchBody b {
  font-family: var(--ss-font-reading);
  color: #704210 !important;
  font-weight: 700;
}

#tutBody h4,
#patchBody h4 {
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(75,47,24,.26);
  font-size: 15px;
}

#tutOv button,
#patchOv button {
  color: var(--ss-text-on-dark) !important;
  border-color: rgba(75,47,24,.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(180deg, #292932, #17171d) !important;
}

#compCard {
  width: min(1180px, 1843.2px) !important;
  max-width: 1180px !important;
  max-height: 972px;
}

#compBody {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(420px, 1fr);
  gap: 18px;
  min-height: min(670px, 777.6px);
}

#compLeft {
  padding-right: 14px;
  border-right: 1px solid rgba(142,120,88,.42);
}

#compSearch {
  width: 100%;
  font-family: var(--ss-font-ui);
}

#compSorts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 12px;
}

#compList {
  font-family: var(--ss-font-ui);
  font-size: 14px;
}

#compDetail {
  min-width: 0;
  padding: clamp(18px, 48px, 30px);
  overflow: auto;
  color: var(--ss-text-on-parchment);
  border: 1px solid #8b6830;
  border-radius: var(--ss-radius-md);
  background:
    linear-gradient(135deg, rgba(104,73,28,.09), transparent 32%),
    var(--ss-surface-parchment);
  box-shadow:
    inset 0 0 32px rgba(104,73,28,.1),
    0 8px 22px rgba(0,0,0,.25);
  font-family: var(--ss-font-reading);
  font-size: 16px;
  line-height: 1.68;
}

#compDetail p,
#compDetail li,
#compDetail strong,
#compDetail .compProse,
#compDetail .compProse p,
#compDetail .compProse li,
#compDetail .compProse div,
#compDetail .compProse span {
  font-family: var(--ss-font-reading);
  color: var(--ss-text-on-parchment) !important;
}

#compDetail .statgrid,
#compDetail .statgrid span,
#compDetail .statgrid b,
#compDetail .compProse,
#compDetail .compProse *,
#compDetail .kwlist,
#compDetail .kwrow,
#compDetail .kwtx {
  color: var(--ss-text-on-parchment) !important;
}

#compDetail .statgrid {
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
  gap: 8px 24px;
  max-width: 520px;
  margin: 14px 0 18px;
  font-family: var(--ss-font-ui);
  font-size: 15px;
  line-height: 1.45;
}

#compDetail .statgrid span {
  color: var(--ss-text-muted-on-parchment) !important;
  font-weight: 600;
}

#compDetail .statgrid b {
  font-weight: 700;
}

#compDetail .dtag {
  margin: 0 6px 7px 0;
  padding: 3px 9px;
  color: #4b2f18 !important;
  border-color: rgba(75,47,24,.5);
  background: rgba(122,82,28,.08);
  font-family: var(--ss-font-ui);
  font-size: 11px;
  font-weight: 650;
}

#compDetail .goldtxt,
#compDetail a {
  color: #704210 !important;
}

#compDetail h3,
#compDetail h4 {
  color: #4b2f18 !important;
  text-shadow: none;
}

#compDetail h3 {
  font-size: clamp(22px, 42.24px, 30px);
  line-height: 1.18;
}

#compDetail h4 {
  margin: 22px 0 9px;
  border-bottom-color: rgba(75,47,24,.28);
  font-size: 13px;
}

/* In-run exit dialog ------------------------------------------------------ */

#exitDlg.ss-exit-dialog {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(82,40,119,.24), transparent 46%),
    rgba(5,5,10,.84);
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
}

.ss-exit-dialog__card {
  position: relative;
  width: min(420px, 1766.4px);
  box-sizing: border-box;
  overflow: hidden;
  padding: 32px 30px 28px;
  text-align: center;
  color: var(--ss-text-on-dark);
  border: 1px solid rgba(200,163,90,.78);
  border-radius: var(--ss-radius-lg);
  background:
    radial-gradient(ellipse at 50% 0, rgba(126,63,178,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(160deg, #28262e, #111116 68%);
  box-shadow:
    inset 0 0 0 1px rgba(241,230,200,.045),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 24px 72px rgba(0,0,0,.72);
}

.ss-exit-dialog__card::before,
.ss-exit-dialog__card::after {
  content: "";
  position: absolute;
  /* Centre the rules on the ornament instead of leaving them stranded above it. */
  top: 40px;
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,163,90,.65));
}

.ss-exit-dialog__card::before {
  right: calc(50% + 14px);
}

.ss-exit-dialog__card::after {
  left: calc(50% + 14px);
  transform: scaleX(-1);
}

.ss-exit-dialog__ornament {
  height: 16px;
  margin-bottom: 6px;
  color: var(--ss-fissure-soft);
  font-size: 10px;
  line-height: 16px;
  text-shadow: 0 0 12px rgba(166,108,255,.55);
}

.ss-exit-dialog__title {
  color: var(--ss-gold-light);
  font-family: var(--ss-font-display);
  font-size: clamp(19px, 38.4px, 23px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .1em;
  text-shadow: none !important;
}

.ss-exit-dialog__copy {
  max-width: 100%;
  margin: 9px auto 22px;
  color: var(--ss-text-muted-on-dark);
  font-family: var(--ss-font-reading);
  font-size: 14px;
  line-height: 1.55;
  text-shadow: none !important;
}

.ss-exit-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-exit-dialog__button {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--ss-radius-sm);
  font-family: var(--ss-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  /* `.ubtn` supplies a dark glyph shadow globally; crisp modal labels are more legible. */
  text-shadow: none !important;
  cursor: pointer;
  transition:
    border-color var(--ss-duration-fast) var(--ss-ease-standard),
    box-shadow var(--ss-duration-fast) var(--ss-ease-standard);
}

@media (min-width: 440px) {
  .ss-exit-dialog__copy {
    white-space: nowrap;
  }
}

.ss-exit-dialog__button:hover {
  /* No transform/filter — both flash the menu scene under Electron. */
  border-color: var(--ss-border-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 212, .18),
    0 0 12px rgba(212, 168, 74, .28);
}

.ss-exit-dialog__button--primary {
  color: #21170d !important;
  -webkit-text-fill-color: #21170d !important;
  border: 1px solid #e4c377 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #f1d88f, #c89a42 68%, #9c6c25) !important;
  box-shadow:
    inset 0 0 0 2px rgba(71,43,15,.28),
    inset 0 1px 0 rgba(255,255,255,.54),
    0 5px 14px rgba(0,0,0,.38) !important;
}

.ss-exit-dialog__button--secondary {
  color: var(--ss-gold-light) !important;
  border: 1px solid rgba(142,120,88,.8) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%),
    linear-gradient(180deg, #2a2930, #17171c) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 4px 12px rgba(0,0,0,.3) !important;
}

.ss-exit-dialog__button--danger {
  color: #e8b1a7 !important;
  border: 1px solid rgba(160,69,61,.78) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%),
    linear-gradient(180deg, rgba(77,35,37,.94), rgba(38,20,24,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.ss-exit-dialog__button--quiet {
  min-height: 38px;
  color: var(--ss-text-muted-on-dark) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ss-exit-dialog__button--quiet:hover {
  color: var(--ss-text-on-dark) !important;
  border-color: rgba(142,120,88,.42) !important;
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 480px) — max-height:480 fails stage 1080 */ 
  #exitDlg.ss-exit-dialog {
    padding: 6px;
  }

  .ss-exit-dialog__card {
    padding: 16px 22px 14px;
  }

  .ss-exit-dialog__ornament {
    height: 12px;
    margin-bottom: 2px;
    line-height: 12px;
  }

  .ss-exit-dialog__title {
    font-size: 18px;
  }

  .ss-exit-dialog__copy {
    margin: 4px auto 10px;
    font-size: 13px;
    line-height: 1.4;
  }

  .ss-exit-dialog__actions {
    gap: 6px;
  }

  .ss-exit-dialog__button {
    min-height: 38px;
    padding: 8px 16px;
  }

  .ss-exit-dialog__button--quiet {
    min-height: 32px;
  }
}

#compoBody,
#simBody {
  font-size: 15px;
  line-height: 1.62;
}

/* Settings, lobby, and persistent social UI ------------------------------- */

#settingsPanel,
#lobbyScreen > div:not(.tagline) {
  font-family: var(--ss-font-ui);
}

#settingsPanel {
  min-width: min(420px, 1766.4px);
}

#settingsPanel label,
#settingsPanel .setRow,
#lbyInfo,
#lbyOnline {
  font-size: 15px;
  line-height: 1.45;
}

#lobbyScreen .tagline {
  color: var(--ss-text-muted-on-dark);
  font-size: 17px;
}

#chatBox {
  border: 1px solid rgba(142,120,88,.72);
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background: rgba(13,13,18,.96);
  box-shadow: var(--ss-shadow-panel);
  font-family: var(--ss-font-ui);
}

#chatHead,
#onlineRow,
#schatLog,
#chatLog,
#chatIn,
#chatToast {
  font-family: var(--ss-font-ui);
}

#chatHead {
  border-bottom: 1px solid rgba(142,120,88,.38);
}

#onlineRow {
  color: var(--ss-text-muted-on-dark);
  font-size: 13px;
  line-height: 1.4;
}

#standings h3,
#ascentPanel h3 {
  color: var(--ss-gold-light);
}

/* Match preview, relic, boon, scout, and summit choices ------------------- */

#matchIntro {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(85,41,126,.22), transparent 54%),
    rgba(6,6,11,.82);
}

#matchIntro .vsWrap {
  width: min(980px, 1804.8px);
  padding: clamp(20px, 76.8px, 38px);
}

#miTools {
  margin-top: 18px;
}

#relicCards,
#boonCards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

#relicCards > .card,
#boonCards > .card {
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 280px;
  min-height: 220px;
  border-color: rgba(142,120,88,.78);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(138,61,255,.13), transparent 50%),
    linear-gradient(160deg, #22212b, #111117 74%);
  box-shadow: var(--ss-shadow-control);
}

#relicCards > .card:hover,
#boonCards > .card:hover {
  border-color: var(--ss-border-gold);
  box-shadow:
    var(--ss-shadow-control),
    0 0 20px rgba(138,61,255,.18);
}

#scoutCard {
  width: min(900px, 1824px);
  max-height: 950.4px;
}

#scoutHead {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(142,120,88,.4);
}

#scoutBats,
#scoutSpells {
  font-family: var(--ss-font-ui);
  font-size: 15px;
}

#scoutBats .abat {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(142,120,88,.38);
  border-radius: var(--ss-radius-sm);
  background: rgba(10,10,15,.54);
}

/* Deployment --------------------------------------------------------------- */

#placeTop {
  min-height: 64px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(200,163,90,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 58%),
    rgba(12,12,17,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.38);
}

#placeTop .title {
  color: var(--ss-gold-light);
  font-size: 18px;
}

#placeTopRow {
  gap: 10px;
}

#placeTimer {
  min-width: 58px;
  min-height: 34px;
  padding: 0 12px;
  box-sizing: border-box;
  color: var(--ss-violet-light);
}

#placeMine,
#placeFoe,
#placeSpells {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), transparent 24%),
    rgba(14,14,20,.95);
}

#placeMine,
#placeFoe {
  max-height: min(712.8px, 660px);
  overflow: auto;
}

#placeMine h3,
#placeFoe h3 {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  color: var(--ss-gold-light);
  background: rgba(14,14,20,.96);
  border-bottom: 1px solid rgba(142,120,88,.36);
}

#placeHint {
  max-width: min(860px, calc(1920px - 40px));
  max-height: 334.8px;
  overflow: auto;
  padding: 12px 16px;
  border: 1px solid rgba(142,120,88,.72);
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background: rgba(12,12,18,.94);
  box-shadow: var(--ss-shadow-panel);
  font-family: var(--ss-font-ui);
  font-size: 15px;
  line-height: 1.48;
}

/* Battle HUD --------------------------------------------------------------- */

#battleTop {
  min-height: 54px;
  padding: 8px 12px;
  gap: 10px;
  border-radius: var(--ss-radius-md);
  background: rgba(12,12,17,.94);
}

.sideTag {
  min-width: 150px;
  padding: 9px 14px;
  border-radius: var(--ss-radius-sm);
  font-size: 14px;
  color: var(--ss-text-on-dark);
  background: rgba(27,30,58,.94);
  border: 1px solid rgba(142,120,88,.56);
}

#vsTimer {
  min-width: 64px;
  color: var(--ss-gold-light);
  font-family: var(--ss-font-display);
  font-size: 22px;
}

#armyBars,
#ticker,
#battleBottom {
  background: rgba(12,12,17,.92);
}

#ticker {
  font-family: var(--ss-font-ui);
  font-size: 14px;
  line-height: 1.4;
}

#hint {
  max-width: min(840px, calc(1920px - 36px));
  padding: 10px 15px;
  border: 1px solid rgba(142,120,88,.66);
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background: rgba(12,12,18,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
  font-family: var(--ss-font-ui);
  font-size: 15px;
  line-height: 1.42;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* Round recap and final result --------------------------------------------- */

#roundOverlay .ovCard {
  width: min(680px, 1804.8px);
  max-height: 950.4px;
  overflow: auto;
  padding: clamp(24px, 76.8px, 42px);
}

#roCap {
  margin-bottom: 8px;
  color: var(--ss-gold-bright);
  font-size: clamp(30px, 96px, 46px);
}

#roSub {
  color: var(--ss-text-on-dark);
  font-size: 17px;
  line-height: 1.5;
}

#roStats {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid rgba(142,120,88,.48);
  border-radius: var(--ss-radius-md);
  background: rgba(8,8,13,.56);
  font-family: var(--ss-font-ui);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

#roSims {
  margin-top: 14px;
  font-family: var(--ss-font-ui);
  font-size: 14px;
  line-height: 1.5;
}

#endScreen {
  padding: clamp(24px, 96px, 64px);
  box-sizing: border-box;
}

#endScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(18,14,29,.18), rgba(5,5,9,.5) 70%);
}

#endScreen > * {
  position: relative;
}

#endLogo {
  color: var(--ss-gold-bright);
  text-shadow: 0 3px 18px rgba(0,0,0,.95);
}

#endTag {
  color: var(--ss-text-on-dark);
  font-family: var(--ss-font-display);
  font-size: clamp(18px, 46.08px, 28px);
  letter-spacing: .12em;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}

#endStats {
  width: min(720px, 1766.4px);
  box-sizing: border-box;
  margin: 18px auto;
  padding: 16px 20px;
  border: 1px solid rgba(142,120,88,.72);
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background: rgba(12,12,18,.9);
  box-shadow: var(--ss-shadow-panel);
  font-family: var(--ss-font-ui);
  font-size: 16px;
  line-height: 1.52;
}

#endBtns {
  width: min(360px, 1651.2px);
  gap: 10px;
}

#endBtns .big {
  width: 100%;
}

/* Responsive safety -------------------------------------------------------- */

@media (max-width:0px){ /* DISABLED, was: (max-width: 900px) — max-width:900 fails stage 1920 */ 
  #compCard {
    max-height: 1015.2px;
    overflow: auto;
  }

  #compBody {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #compLeft {
    max-height: 367.2px;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(142,120,88,.42);
  }

  #compDetail {
    min-height: 388.8px;
  }

  #battleTop {
    width: calc(1920px - 24px);
    justify-content: center;
  }

  .sideTag {
    min-width: 0;
    max-width: 652.8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 680px) — max-width:680 fails stage 1920 */ 
  body {
    font-size: 15px;
  }

  .screen:not(#prep):not(#titleScreen):not(#endScreen) {
    padding: 18px 12px;
  }

  .ovWrap {
    padding: 8px;
  }

  .ovCard {
    padding: 18px 16px;
  }

  #modePicks,
  #ascPicks,
  #diffPicks {
    width: 1843.2px;
    gap: 10px;
  }

  #modeBtnRow .big,
  #ascBtnRow .big,
  #diffBtnRow .big {
    width: min(250px, 1612.8px);
  }

  #relicCards,
  #boonCards {
    flex-direction: column;
    align-items: center;
  }

  #relicCards > .card,
  #boonCards > .card {
    width: min(360px, 1689.6px);
    max-width: none;
  }

  #placeTop {
    min-height: 76px;
  }

  #placeTopRow {
    flex-wrap: wrap;
    justify-content: center;
  }

  #placeMine,
  #placeFoe {
    max-width: 806.4px;
  }

  #placeHint,
  #hint {
    font-size: 14px;
  }

  #battleTop {
    gap: 6px;
    padding: 6px;
  }

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

  #vsTimer {
    min-width: 44px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Phase 3 rollout · photographed polish wave 2
   Deployment cards, match preview proportions, and battle health hierarchy.
   ========================================================================== */

/* Deployment: metadata and statistics need distinct rows in the compact rail. */
#placeMine .battleOrderGuide {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 9px;
  padding: 9px 11px;
  border: 1px solid rgba(138, 61, 255, .46);
  border-left: 3px solid var(--ss-violet-light);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(90deg, rgba(138, 61, 255, .13), transparent 72%),
    rgba(14, 14, 20, .92);
  font-family: var(--ss-font-ui);
  line-height: 1.25;
}

#placeMine .battleOrderGuide strong {
  font-size: 15px;
  font-weight: 700;
}

#placeMine .battleOrderGuide span {
  color: var(--ss-text-muted-on-dark);
  font-family: var(--ss-font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#placeMine .abat {
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
}

#placeMine .abat .amid {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

#placeMine .abat .an {
  margin-bottom: 5px;
  line-height: 1.25;
}

#placeMine .abat .as {
  margin: 0;
}

#placeMine .abat .pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}

#placeMine .abat .mpill {
  min-height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 5px 9px;
  line-height: 1.05;
  font-size: 14px;
}

#placeMine .abat .statline {
  gap: 5px 12px;
  margin: 0;
  padding-top: 1px;
  row-gap: 4px;
  line-height: 1.3;
}

#placeMine .abat .stRow {
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(142, 120, 88, .28);
}

#placeMine .abat .stRow::before {
  content: "Battle order";
  flex: 0 0 100%;
  color: var(--ss-text-muted-on-dark);
  font-family: var(--ss-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

#placeMine .abat .stBtn {
  width: 43px;
  min-width: 43px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  font-size: 18px;
}

#placeMine .abat :is(.stTgt, .stWarn) {
  flex: 1 1 100%;
  margin-top: 2px;
  font-family: var(--ss-font-ui);
  font-size: 14px;
  line-height: 1.35;
}

/* Match preview: the inner VS frame must never exceed its parent card. */
#matchIntro > .ovCard {
  width: min(580px, calc(1920px - 32px));
  max-width: 580px;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(24px, 76.8px, 34px);
}

#matchIntro .vsWrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: clamp(14px, 76.8px, 28px);
  margin: 15px 0 12px;
  padding: clamp(16px, 57.6px, 24px);
}

#matchIntro .vsWrap .port {
  width: 96px;
  height: 116px;
  max-width: 32%;
}

#matchIntro .vsWrap .port .pn {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#matchIntro .vsWrap .v {
  flex: 0 0 auto;
  font-size: 22px;
}

#matchIntro #miFlavor {
  max-width: 48ch;
  margin-inline: auto;
}

/* Battle health: one balanced module, with names, timer, labels, and values. */
#battleTop {
  top: 12px;
  width: min(640px, calc(1920px - 28px));
  min-height: 54px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--ss-radius-md) var(--ss-radius-md) 0 0;
}

#battleTop .sideTag {
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#battleTop .sideTag.foe {
  justify-content: flex-end;
  text-align: right;
}

#battleTop #vsTimer {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline: 1px solid rgba(142, 120, 88, .38);
  font-size: 19px;
}

#armyBars {
  top: 65px;
  width: min(640px, calc(1920px - 28px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 7px 10px 10px;
  border-top: 0;
  border-radius: 0 0 var(--ss-radius-md) var(--ss-radius-md);
}

#armyBars .armyMeter {
  min-width: 0;
}

#armyBars .armyMeterLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--ss-text-muted-on-dark);
  font-family: var(--ss-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

#armyBars .armyMeterLabel strong {
  color: var(--ss-text-on-dark);
  font-size: 11px;
}

#armyBars .hpbar {
  width: 100%;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid rgba(142, 120, 88, .56);
  border-radius: 6px;
  background: #08080d;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .72);
}

#armyBars .hpbar i {
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: width 180ms linear;
}

#armyBars .armyMeterFoe .armyMeterLabel {
  flex-direction: row-reverse;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 620px) — max-width:620 fails stage 1920 */ 
  #matchIntro > .ovCard {
    padding: 22px 18px;
  }

  #matchIntro .vsWrap {
    gap: 10px;
    padding: 14px 10px;
  }

  #battleTop {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  }

  #battleTop .sideTag {
    padding-inline: 7px;
    font-size: 11px;
  }

  #armyBars {
    gap: 8px;
  }

  #armyBars .armyMeterLabel {
    font-size: 8px;
    letter-spacing: .04em;
  }
}

/* -------------------------------------------------------------------------
   Title screen: deep violet direction
   The original background art remains, but a deep violet treatment quiets it
   so the current gold monogram and menu become the visual focus.
   ------------------------------------------------------------------------- */
#titleScreen {
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: center;
  padding: clamp(52px, 86.4px, 92px) 28px 34px;
  background-position: center center !important;
  background-size: cover !important;
}

#titleScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 6, 27, .76), rgba(22, 9, 42, .7) 43%, rgba(5, 5, 15, .88)),
    radial-gradient(ellipse 72% 58% at 50% 33%, rgba(103, 42, 151, .46), rgba(36, 14, 66, .24) 50%, rgba(6, 5, 17, .76) 100%);
  backdrop-filter: saturate(.68) contrast(1.05);
}

#titleScreen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 50% 28%, rgba(133, 61, 196, .19), transparent 72%),
    radial-gradient(ellipse 95% 86% at 50% 50%, transparent 45%, rgba(2, 2, 9, .65) 100%);
}

#titleScreen > * {
  position: relative;
  z-index: 3;
}

/* #menuIslands was hidden here; the two-isle div was removed on 2026-07-31 when the layered menu scene
   replaced it. The scene's own rules live in assets/ui/parallax/parallax.css. */

#titleScreen .logoWrap.ss-title-logo {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  width: min(720px, 1094.4px);
  height: auto;
  aspect-ratio: auto;
  margin: 0 0 12px;
  line-height: 0;
  animation: none;
  filter:
    drop-shadow(0 8px 13px rgba(0, 0, 0, .66))
    drop-shadow(0 0 18px rgba(110, 45, 183, .22));
}

.ss-title-emblem,
.ss-title-wordmark {
  display: block;
  flex: 0 0 auto;
  background-image: url("ui/skysunder-logo-monogram-v1.png");
  background-repeat: no-repeat;
}

.ss-title-emblem {
  width: clamp(154px, 259.2px, 218px);
  aspect-ratio: .79;
  background-size: 425% auto;
  background-position: left center;
  transform: translateX(-18px);
}

.ss-title-wordmark {
  width: 100%;
  aspect-ratio: 6.35;
  margin-top: clamp(-34px, -43.2px, -20px);
  background-size: 140% auto;
  background-position: right center;
}

.ss-title-divider {
  position: relative;
  display: block;
  width: min(500px, 74%);
  height: 18px;
  margin-top: 2px;
}

.ss-title-divider::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(200, 163, 90, .8) 18%, rgba(234, 199, 120, .95) 48%, rgba(200, 163, 90, .8) 82%, transparent);
  box-shadow: 0 1px 0 rgba(35, 18, 8, .88);
}

.ss-title-divider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #d7b66f;
  background: linear-gradient(135deg, #d49cff 0%, #7c36c9 48%, #2a0e54 100%);
  box-shadow: 0 0 9px rgba(157, 76, 235, .72);
}

#titleScreen #menuBtns {
  position: relative;
  z-index: 5;
  display: grid;
  width: min(390px, 1344px);
  gap: 8px;
  margin: 6px 0 0;
}

#titleScreen #menuBtns .big {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 45px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 42px;
  overflow: hidden;
  border: 1px solid rgba(160, 132, 83, .78);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(35, 31, 43, .94), rgba(12, 12, 18, .97));
  color: #ddc99a;
  font-family: var(--ss-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-shadow: 0 1px 2px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 212, .08),
    inset 0 0 0 2px rgba(8, 7, 12, .6),
    0 5px 12px rgba(0, 0, 0, .28);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 90ms ease;
}

#titleScreen #menuBtns .big::before,
#titleScreen #menuBtns .big::after {
  content: "◇";
  position: absolute;
  top: 50%;
  color: rgba(222, 193, 131, .84);
  font-size: 11px;
  line-height: 1;
  transform: translateY(-50%);
}

#titleScreen #menuBtns .big::before {
  left: 13px;
}

#titleScreen #menuBtns .big::after {
  right: 13px;
}

/* Gold/void hover for the neutral menu row (ghost buttons). Must use !important — the shared
   `.big.ghost` resting block above also uses !important and otherwise pins ghost buttons at rest
   even while hovered. SINGLEPLAYER (#startBtn, not .ghost) keeps its violet CTA via the block below. */
#titleScreen #menuBtns .big.ghost:hover,
#titleScreen #menuBtns .big.ghost:focus-visible {
  border-color: #e8c878 !important;
  color: #f7edd4 !important;
  -webkit-text-fill-color: #f7edd4 !important;
  background:
    linear-gradient(180deg, rgba(62, 48, 36, .99), rgba(20, 16, 26, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 212, .22),
    inset 0 0 0 2px rgba(8, 7, 12, .48),
    0 0 0 1px rgba(212, 168, 74, .55),
    0 0 28px rgba(232, 182, 76, .42),
    0 0 10px rgba(232, 182, 76, .28),
    0 10px 22px rgba(0, 0, 0, .42) !important;
}

#titleScreen #menuBtns .big:active {
  color: #f1e6c8;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

#titleScreen #startBtn,
#titleScreen #startBtn:hover,
#titleScreen #startBtn:focus-visible,
#titleScreen #startBtn:active {
  border-color: #d9b86d !important;
  color: #f4dfad !important;
  -webkit-text-fill-color: #f4dfad !important;
  background:
    radial-gradient(circle at 32% 0, rgba(216, 162, 255, .26), transparent 38%),
    linear-gradient(135deg, rgba(88, 37, 126, .97), rgba(47, 19, 79, .98) 58%, rgba(27, 12, 49, .99)) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 189, .23),
    inset 0 0 18px rgba(161, 77, 230, .24),
    inset 0 0 0 2px rgba(28, 10, 47, .76),
    0 0 0 1px rgba(89, 47, 15, .7),
    0 0 15px rgba(140, 57, 216, .27),
    0 6px 16px rgba(0, 0, 0, .42);
}

#titleScreen #startBtn:hover,
#titleScreen #startBtn:focus-visible {
  background:
    radial-gradient(circle at 40% 0, rgba(235, 194, 255, .4), transparent 42%),
    linear-gradient(135deg, rgba(112, 49, 158, .99), rgba(61, 24, 101, .99) 58%, rgba(32, 13, 59, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 200, .32),
    inset 0 0 20px rgba(190, 101, 255, .3),
    inset 0 0 0 2px rgba(30, 10, 50, .7),
    0 0 0 1px rgba(89, 47, 15, .72),
    0 0 24px rgba(157, 73, 230, .42),
    0 7px 18px rgba(0, 0, 0, .46);
}

#titleScreen .ss-social-row {
  z-index: 5 !important;
  margin-top: 20px !important;
  opacity: .66;
  transition: opacity 140ms ease;
}

#titleScreen .ss-social-row:hover,
#titleScreen .ss-social-row:focus-within {
  opacity: 1;
}

#titleScreen #leaderboard,
#titleScreen #idRow {
  opacity: .62;
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
  transition: opacity 140ms ease;
}

#titleScreen #leaderboard:hover,
#titleScreen #leaderboard:focus-within,
#titleScreen #idRow:hover,
#titleScreen #idRow:focus-within {
  opacity: 1;
}

.ss-title-frame {
  position: absolute !important;
  inset: 14px;
  z-index: 4 !important;
  box-sizing: border-box;
  border: 1px solid rgba(200, 163, 90, .76);
  pointer-events: none;
  box-shadow:
    0 0 0 2px rgba(30, 16, 8, .84),
    0 0 0 3px rgba(200, 163, 90, .27),
    inset 0 0 42px rgba(2, 2, 8, .42);
}

.ss-title-frame::before,
.ss-title-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #c8a35a;
  background:
    linear-gradient(135deg, rgba(210, 157, 255, .98), rgba(116, 45, 190, .98) 50%, rgba(28, 10, 57, .99));
  box-shadow:
    0 0 0 3px rgba(12, 7, 20, .94),
    0 0 0 4px rgba(200, 163, 90, .45),
    0 0 14px rgba(142, 57, 224, .48);
}

.ss-title-frame::before {
  top: -12px;
}

.ss-title-frame::after {
  bottom: -12px;
}

.ss-title-corner {
  position: absolute;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  color: #c8a35a;
}

.ss-title-corner::before,
.ss-title-corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #6f5631, #d2af68, #6f5631);
}

.ss-title-corner::before {
  width: 50px;
  height: 2px;
}

.ss-title-corner::after {
  width: 2px;
  height: 50px;
}

.ss-title-corner-tl {
  top: 6px;
  left: 6px;
  border-top: 1px solid rgba(200, 163, 90, .52);
  border-left: 1px solid rgba(200, 163, 90, .52);
}

.ss-title-corner-tr {
  top: 6px;
  right: 6px;
  transform: scaleX(-1);
  border-top: 1px solid rgba(200, 163, 90, .52);
  border-left: 1px solid rgba(200, 163, 90, .52);
}

.ss-title-corner-bl {
  bottom: 6px;
  left: 6px;
  transform: scaleY(-1);
  border-top: 1px solid rgba(200, 163, 90, .52);
  border-left: 1px solid rgba(200, 163, 90, .52);
}

.ss-title-corner-br {
  right: 6px;
  bottom: 6px;
  transform: scale(-1);
  border-top: 1px solid rgba(200, 163, 90, .52);
  border-left: 1px solid rgba(200, 163, 90, .52);
}

.ss-title-corner-tl::before,
.ss-title-corner-tr::before,
.ss-title-corner-bl::before,
.ss-title-corner-br::before {
  top: 7px;
  left: 5px;
  transform: rotate(18deg);
  transform-origin: left center;
}

.ss-title-corner-tl::after,
.ss-title-corner-tr::after,
.ss-title-corner-bl::after,
.ss-title-corner-br::after {
  top: 5px;
  left: 7px;
  transform: rotate(-18deg);
  transform-origin: center top;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 1120px) — max-width:1120 fails stage 1920 */ 
  #titleScreen {
    padding-top: 64px;
  }

  #titleScreen .logoWrap.ss-title-logo {
    width: min(650px, 1267.2px);
  }

  #titleScreen #leaderboard {
    display: none !important;
  }

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

@media (max-width:0px){ /* DISABLED, was: (max-width: 760px) — max-width:760 fails stage 1920 */ 
  #titleScreen {
    padding: 54px 22px 26px;
  }

  #titleScreen .logoWrap.ss-title-logo {
    width: min(620px, 1612.8px);
  }

  #titleScreen #idRow {
    display: none !important;
  }

  #titleScreen #menuBtns {
    width: min(390px, 1574.4px);
  }

  #titleScreen .ss-social-row {
    display: none !important;
  }

  .ss-title-frame {
    inset: 9px;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 760px) and (min-width: 761px) — max-height:760 fails stage 1080; min-width:761 holds for stage 1920 */ 
  #titleScreen {
    justify-content: flex-start;
    padding-top: 36px;
  }

  #titleScreen .logoWrap.ss-title-logo {
    width: min(610px, 960px);
    margin-bottom: 2px;
  }

  #titleScreen #menuBtns {
    gap: 6px;
  }

  #titleScreen #menuBtns .big {
    min-height: 39px;
    padding-block: 8px;
  }

  #titleScreen .ss-social-row {
    margin-top: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #titleScreen *,
  #titleScreen *::before,
  #titleScreen *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Phase 3 rollout · deployment tactical frame
   Full-height army rails, integrated command crest, and battlefield vignette.
   ========================================================================== */

#placeHud {
  --ss-deploy-gutter: 14px;
  /* +25% rail width so larger type/icons fit (Dave 2026-08-07 placerail25) */
  --ss-deploy-rail: clamp(345px, 492px, 408px);
  isolation: isolate;
  overflow: hidden;
}

#placeHud::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 66% at 50% 49%, transparent 32%, rgba(8, 6, 15, .12) 62%, rgba(5, 5, 10, .54) 100%),
    linear-gradient(90deg, rgba(14, 9, 24, .42), transparent 24%, transparent 76%, rgba(14, 9, 24, .42)),
    linear-gradient(180deg, rgba(8, 7, 14, .28), transparent 24%, transparent 72%, rgba(5, 5, 10, .32)),
    linear-gradient(rgba(25, 12, 40, .14), rgba(9, 7, 20, .2));
}

#placeHud > * {
  z-index: 2;
  box-sizing: border-box;
}

/* 🚩 THE RAILS END WITH THE LAST BANNER (Josh 2026-07-31: "the banner menus for each side extend way too
   far, have them stop at the end of the last unit").

   `bottom` was the whole bug, and `height:auto` is why it did not look like one. On an absolutely
   positioned element, setting BOTH `top` and `bottom` while height is auto does not mean "grow as needed
   up to the bottom" — it means the box is STRETCHED to span the gap, and `height:auto` then resolves to
   exactly that distance. So each rail was always the full height of the stage regardless of whether it
   held two banners or six, and `#pmBody`'s `flex:1 1 auto` obligingly filled the leftover with nothing.
   Three panels' worth of empty smoked glass either side of the battlefield.

   `bottom:auto` releases it to hug its content. The max-height replaces what the stretch was accidentally
   providing — a hard stop before the panel could run off the stage — so a long roster still cannot
   overflow; it scrolls instead (see the `overflow-y` on the body below, which is the other half of this).
   `.pmMin`/`.pfMin` further down already say `bottom:auto;height:auto`, which was the minimised state
   working around this same rule; it is now redundant rather than wrong, and harmless left in place. */
#placeMine,
#placeFoe {
  top: var(--ss-deploy-gutter);
  bottom: auto;
  width: var(--ss-deploy-rail);
  height: auto;
  max-width: none;
  max-height: calc(100% - (2 * var(--ss-deploy-gutter)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(200, 163, 90, .5);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 24%),
    linear-gradient(180deg, rgba(27, 28, 39, .97), rgba(10, 10, 15, .97));
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 194, .04),
    inset 0 -24px 50px rgba(0, 0, 0, .24),
    0 18px 38px rgba(0, 0, 0, .48);
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
}

#placeMine {
  left: var(--ss-deploy-gutter);
}

#placeFoe {
  right: var(--ss-deploy-gutter);
}

#placeMine .pmHead,
#placeFoe .pfHead {
  flex: 0 0 auto;
  min-height: 54px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 14px 11px 16px;
  border-bottom: 1px solid rgba(200, 163, 90, .34);
  background:
    linear-gradient(90deg, rgba(138, 61, 255, .1), transparent 68%),
    rgba(10, 10, 15, .72);
}

#placeFoe .pfHead {
  background:
    linear-gradient(270deg, rgba(168, 67, 73, .1), transparent 68%),
    rgba(10, 10, 15, .72);
}

#placeMine h3,
#placeFoe h3 {
  position: static;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#placeMine .pmMinBtn,
#placeFoe .pfMinBtn {
  width: 30px;
  height: 30px;
  border-color: rgba(200, 163, 90, .38);
  background: rgba(8, 8, 13, .7);
}

/* `overflow:hidden` was safe only while the rail was stretched to the full stage: there was always more
   height than banners, so nothing ever reached the edge to be clipped. Now that the panel ends at its
   content, the max-height above is the only thing standing between a long roster and a silently cut-off
   banner — so the body scrolls instead of clipping. At the 1080 stage this never engages: the cap leaves
   ~1052px and eight banners at 104px plus the header come to ~900px. It is the safety net, not the plan.
   `overflow-x` stays hidden — a horizontal scrollbar on a 326px rail would be the wrong kind of fix. */
#pmBody,
#pfBody {
  flex: 0 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}

#pmBody {
  display: grid;
  grid-template-rows: auto;
  grid-auto-rows: minmax(0, 130px);
  align-content: start;
  gap: 6px;
}

#pfBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#placeMine .battleOrderGuide {
  min-height: 48px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  overflow: hidden;
}

#placeMine .battleOrderGuide strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#placeMine .battleOrderGuide span {
  font-size: 10px;
  white-space: nowrap;
}

#placeMine .abat,
#placeFoe .abat {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 53px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 8px 9px;
  overflow: hidden;
  border-color: rgba(142, 120, 88, .42);
  border-radius: 7px;
  background:
    linear-gradient(110deg, rgba(138, 61, 255, .06), transparent 42%),
    rgba(12, 12, 18, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018);
}

#placeFoe .abat {
  flex: 0 1 103px;
  background:
    linear-gradient(250deg, rgba(168, 67, 73, .055), transparent 42%),
    rgba(12, 12, 18, .72);
}

/* Portrait cell: art alone in flow; imprint is a corner badge. The base `.abat .ic`
   is inline-flex with art + imprint side-by-side — inside this rail column that
   pair is wider than the cell, and `justify-content:center` shoved both off the left. */
#placeMine .abat .ic,
#placeFoe .abat .ic {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 53px;
  min-width: 53px;
  height: 60px;
  overflow: hidden;
  font-size: 35px;
  line-height: 1;
}

#placeMine .abat .ic .artic,
#placeFoe .abat .ic .artic {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 50px;
  max-height: 58px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  transform: none !important; /* spearart2: no battle artW CSS scale in placement circles */
}
/* Bannerman pre-battle portrait: contain leaves a tiny body under the pole, and the
   old 73px square overflow-clipped inside this 53×60 cell. Cover the cut-out and
   weight the crop on the torso so the figure is centred like the other troops. */
#placeMine .abat .ic[data-u="banner"] .artic,
#placeMine .abat .ic .uart[data-u="banner"],
#placeFoe .abat .ic[data-u="banner"] .artic,
#placeFoe .abat .ic .uart[data-u="banner"] {
  width: 100%;
  height: 100%;
  max-width: 50px;
  max-height: 58px;
  object-fit: cover;
  object-position: center 42%;
}

#placeMine .abat .ic .impbadge,
#placeFoe .abat .ic .impbadge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

#placeMine .abat .ic .impbadge .impart,
#placeFoe .abat .ic .impbadge .impart {
  display: block;
  height: 20px;
  width: 20px;
  max-width: 22px;
  object-fit: contain;
}

#placeMine .abat .amid,
#placeFoe .abat .amid {
  align-self: stretch;
  justify-content: center;
  overflow: hidden;
}

#placeMine .abat .an,
#placeFoe .abat .an {
  min-width: 0;
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--ss-text-on-dark);
  font-size: 14.5px !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#placeMine .abat .pillrow,
#placeFoe .abat .pillrow {
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 4px;
  overflow: hidden;
}

#placeMine .abat .mpill,
#placeFoe .abat .mpill {
  min-height: 19px;
  margin: 0;
  padding: 1px 5px;
  font-size: 9px;
  line-height: 14px;
}

#placeMine .abat .statline,
#placeFoe .abat .statline {
  flex-wrap: nowrap;
  gap: 9px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

#placeMine .abat .statline b,
#placeFoe .abat .statline b {
  font-size: 12.5px;
}

#placeMine .abat .cnt,
#placeFoe .abat .cnt {
  align-self: center;
  margin: 0;
  color: var(--ss-gold-light);
  font-size: 14px;
}

#placeMine .abat .stRow {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 34px) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  padding: 5px 0 0;
}

#placeMine .abat .stRow::before {
  display: none;
}

#placeMine .abat .stBtn {
  width: 34px;
  min-width: 34px;
  min-height: 31px;
  height: 31px;
  padding: 0;
  font-size: 15px;
}

#placeMine .abat .formRow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0 0;
  min-width: 0;
}

#placeMine .abat .stBtn.formBtn {
  width: auto;
  min-width: 52px;
  height: 26px;
  min-height: 26px;
  padding: 0 7px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#placeMine .abat :is(.stTgt, .stWarn) {
  min-width: 0;
  grid-column: 4;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pfBody > .spellchips:last-child,
#pfBody > div:last-child:not(.abat) {
  flex: 0 0 auto;
  max-height: 50px;
  margin-top: auto !important;
  overflow: hidden;
}

.placeRailEmpty {
  display: grid;
  min-height: 90px;
  place-items: center;
  border: 1px dashed rgba(142, 120, 88, .4);
  border-radius: 7px;
  color: var(--ss-text-muted-on-dark);
  font-family: var(--ss-font-ui);
  font-size: 15px;
}

#placeMine.pmMin,
#placeFoe.pfMin {
  bottom: auto;
  height: auto;
  min-height: 0;
}

#placeTop {
  top: var(--ss-deploy-gutter);
  left: 50%;
  right: auto;
  width: min(760px, calc(1920px - (2 * var(--ss-deploy-rail)) - (4 * var(--ss-deploy-gutter))));
  min-height: 78px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px 18px 10px;
  overflow: visible;
  border: 1px solid rgba(200, 163, 90, .5);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 28%),
    linear-gradient(180deg, rgba(32, 30, 42, .97), rgba(10, 10, 15, .97));
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 194, .035),
    inset 0 -12px 24px rgba(0, 0, 0, .22),
    0 14px 34px rgba(0, 0, 0, .48);
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
}

#placeTop::after {
  /* The centred border ornament collided visually with the centred primary action. */
  content: none;
}

#placeTop .title {
  min-width: 0;
  overflow: hidden;
  color: var(--ss-gold-light);
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⚔️ BEGIN BATTLE (Josh 2026-07-31: "the battle button is impossible to see").

   It was not hidden — it was CRUSHED INTO A 54px TRACK. This row was a four-column grid laid out for the
   four controls it used to hold: `54px` for the collapse arrow, two `auto` tracks for ZONES and HELP, and
   `minmax(166px, 220px)` reserved for the button itself. All three of the others then left — the arrow was
   deleted and ZONES/HELP/TARGETS moved to the bottom-left control stack, which the markup says in its own
   comment: "BEGIN BATTLE is now the only thing on this row, so it centres on its own."

   Except the template stayed. Grid auto-placement drops the one remaining child into COLUMN ONE, so the
   primary action of the whole screen was rendered in a 54px slot — wrapped onto two lines, spilling out of
   its track, shoved left of centre — while the 166px column reserved FOR it sat empty to its right. The
   comment describing the intent was right; nothing had told the grid.

   A flex row with `justify-content:center` has no stale tracks to fall out of step with the markup: one
   child centres, and if a second is ever added the row stays centred without anyone editing a template.
   The `min-width` below restores the width column four was holding for it.

   The three `grid-template-columns` overrides further down still carry the old four-track values. They are
   inside `@media (max-width:0px)` blocks that can never match, and `grid-template-columns` is ignored on a
   flex container in any case, so they are inert twice over — left alone rather than edited blind. */
#placeTopRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#placeTimer {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(138, 61, 255, .48);
  border-radius: 6px;
  background: rgba(16, 11, 26, .78);
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(138, 61, 255, .42);
}

#placeTop .placeOvBtn {
  min-height: 34px;
  box-sizing: border-box;
  padding: 5px 11px;
  border-radius: 6px;
}

/* Sized to what column four had been reserving for it (166–220px) and to the 40px the other primary
   actions use. It shrank to 34px and 16px of padding back when it was one of four controls competing for
   a 760px row; it is the only one left, so it gets to look like the thing you press. `white-space:nowrap`
   is the belt-and-braces: the old failure mode was the label wrapping to two lines inside a track too
   narrow for it, and this makes that impossible to reproduce even if the row is ever reconstrained. */
#placeTop #placeGo {
  min-height: 40px;
  min-width: 220px;
  box-sizing: border-box;
  padding: 8px 26px;
  border-radius: 7px;
  color: #21170c;
  font-size: 14px;
  white-space: nowrap;
  text-shadow: none;
}

/* 📝 THE HINT IS PROSE, SO IT IS LAID OUT AS PROSE (Josh 2026-08-01: "make this text fit and look better
   (to big of spaces between the lines and the bolded words)").

   THE GAPS WERE NOT SPACING, THEY WERE FLEX. This was `display: flex; flex-wrap: wrap; gap: 5px 16px` —
   and a flex container turns every child into a flex ITEM. The hint is one sentence with `<b>` and
   `<span class="key">` inline, so each bold word and each keycap became its own item, each stretch of bare
   text between them became an anonymous item, and the 16px column gap was inserted around every one of
   them. That is exactly the picture Josh sent: a 16px moat around "left-click an ENEMY", around "ALLY",
   around "+10/20/30%", around each key cap — and lines breaking between fragments rather than between
   words, because flex items wrap as units and running text cannot flow across them.

   `display: block` puts it back to normal inline layout: words are separated by word spaces, bold sits
   tight against the text either side, and the line breaks fall wherever the line is full. The 5px row gap
   goes with it — line-height owns the leading now, which is what leading is for. */
#placeHint {
  width: min(780px, calc(1920px - (2 * var(--ss-deploy-rail)) - (4 * var(--ss-deploy-gutter))));
  max-width: none;
  max-height: 120px;
  box-sizing: border-box;
  display: block;
  text-align: center;
  text-wrap: pretty;          /* avoids a one-word last line; ignored where unsupported */
  overflow: auto;
  padding: 9px 14px;
  border-color: rgba(200, 163, 90, .45);
  background: rgba(10, 10, 15, .91);
  font-size: 13px;
  line-height: 1.34;
  /* Pass clicks through to the canvas — must beat #placeHud>* { pointer-events:auto }. */
  pointer-events: none;
  /* no backdrop-filter — see scaled-stage UI chrome rule above */
}
/* The keycaps were the worst of the flex gaps — a 16px moat either side of a 22px cap. Inline now, with
   just enough of their own margin to breathe against the words. */
#placeHint .key {
  margin: 0 1px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.1;
  vertical-align: baseline;
}
#placeHint b {
  color: var(--ss-gold-light);
}

#placeHint .placeHintStep {
  min-width: 0;
}

#placeHint .placeHintStep b {
  margin-right: 3px;
  color: var(--ss-gold-light);
}

/* Hug content: empty → Arcanum prompt width; with spells → chip row width (Dave 2026-08-07). */
#placeSpells {
  width: fit-content;
  max-width: min(780px, calc(1920px - (2 * var(--ss-deploy-rail)) - (4 * var(--ss-deploy-gutter))));
  padding: 6px 14px;
  box-sizing: border-box;
}
#placeSpells:has(.ps) {
  padding: 6px 8px;
  gap: 8px;
}
#placeSpells .psNone {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 4px;
}

body:has(#placeHud:not(.hidden)) #chatMini {
  right: 24px !important;
  bottom: 24px !important;
  z-index: 46;
  border-color: rgba(200, 163, 90, .55) !important;
  background: rgba(10, 10, 15, .94) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .46);
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 1220px) — max-width:1220 fails stage 1920 */ 
  #placeHud {
    --ss-deploy-rail: clamp(238px, 422.4px, 276px);
    --ss-deploy-gutter: 10px;
  }

  #placeTop {
    width: calc(1920px - (2 * var(--ss-deploy-rail)) - (4 * var(--ss-deploy-gutter)));
    padding-inline: 10px;
  }

  #placeTopRow {
    grid-template-columns: 48px auto auto minmax(142px, 190px);
    gap: 6px;
  }

  #placeTop .placeOvBtn {
    padding-inline: 8px;
    font-size: 10px;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 760px) — max-height:760 fails stage 1080 */ 
  #placeMine .pmHead,
  #placeFoe .pfHead {
    min-height: 38px;
    padding-block: 7px;
  }

  #pmBody,
  #pfBody {
    padding: 6px;
    gap: 4px;
  }

  #pmBody {
    grid-auto-rows: minmax(0, 91px);
  }

  #placeMine .battleOrderGuide {
    min-height: 31px;
    padding-block: 5px;
  }

  #placeMine .battleOrderGuide span {
    display: none;
  }

  #placeMine .abat,
  #placeFoe .abat {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 4px 6px;
  }

  #placeFoe .abat {
    flex-basis: 71px;
  }

  #placeMine .abat .ic,
  #placeFoe .abat .ic {
    width: 36px;
    min-width: 36px;
    height: 40px;
  }

  #placeMine .abat .ic .artic,
  #placeFoe .abat .ic .artic {
    max-width: 34px;
    max-height: 38px;
  }

  #placeMine .abat .ic .impbadge .impart,
  #placeFoe .abat .ic .impbadge .impart {
    height: 14px;
    width: 14px;
    max-width: 16px;
    object-fit: contain;
  }

  #placeMine .abat .an,
  #placeFoe .abat .an {
    margin-bottom: 2px;
    font-size: 10.5px !important;
  }

  #placeMine .abat .stRow {
    margin-top: 3px;
    padding-top: 3px;
  }

  #placeMine .abat .stBtn {
    min-height: 23px;
    height: 23px;
  }

  #placeTop {
    min-height: 68px;
    padding-block: 6px 8px;
  }

  #placeTop .title {
    font-size: 13px;
  }

  #placeTopRow {
    grid-template-columns: 44px auto auto minmax(132px, 178px);
  }

  #placeTimer,
  #placeTop .placeOvBtn,
  #placeTop #placeGo {
    min-height: 30px;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 540px) and (min-width: 720px) — max-height:540 fails stage 1080; min-width:720 holds for stage 1920 */ 
  #placeHud {
    --ss-deploy-rail: clamp(208px, 480px, 232px);
    --ss-deploy-gutter: 7px;
  }

  #placeMine .pmHead,
  #placeFoe .pfHead {
    min-height: 32px;
    padding: 5px 7px 5px 9px;
  }

  #placeMine h3,
  #placeFoe h3 {
    font-size: 9px;
  }

  #placeMine .pmMinBtn,
  #placeFoe .pfMinBtn {
    width: 20px;
    height: 20px;
  }

  #pmBody,
  #pfBody {
    padding: 4px;
    gap: 3px;
  }

  #pmBody {
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 49px);
  }

  #placeMine .battleOrderGuide {
    display: none;
  }

  #placeMine .abat,
  #placeFoe .abat {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 3px 5px;
  }

  #placeFoe .abat {
    flex-basis: 47px;
  }

  #placeMine .abat .ic,
  #placeFoe .abat .ic {
    width: 30px;
    min-width: 30px;
    height: 34px;
  }

  #placeMine .abat .ic .artic,
  #placeFoe .abat .ic .artic {
    max-width: 28px;
    max-height: 32px;
  }

  #placeMine .abat .ic .impbadge .impart,
  #placeFoe .abat .ic .impbadge .impart {
    height: 12px;
    width: 12px;
    max-width: 14px;
    object-fit: contain;
  }

  #placeMine .abat .an,
  #placeFoe .abat .an {
    margin: 0;
    font-size: 9.5px !important;
  }

  #placeMine .abat .pillrow,
  #placeFoe .abat .pillrow,
  #placeMine .abat .statline,
  #placeFoe .abat .statline,
  #placeMine .abat :is(.stTgt, .stWarn),
  #pfBody > .spellchips:last-child,
  #pfBody > div:last-child:not(.abat) {
    display: none;
  }

  #placeMine .abat .stRow {
    grid-template-columns: repeat(3, 23px);
    gap: 3px;
    margin-top: 3px;
    padding: 0;
    border: 0;
  }

  #placeMine .abat .stBtn {
    width: 23px;
    min-width: 23px;
    min-height: 21px;
    height: 21px;
    font-size: 10px;
  }

  #placeTop {
    min-height: 55px;
    gap: 2px;
    padding: 4px 6px 6px;
  }

  #placeTop .title {
    font-size: 10px;
  }

  #placeTopRow {
    grid-template-columns: 38px 44px 44px minmax(112px, 148px);
    gap: 4px;
  }

  #placeTimer,
  #placeTop .placeOvBtn,
  #placeTop #placeGo {
    min-height: 26px;
    height: 26px;
    padding-block: 3px;
    font-size: 8px;
  }

  #placeHint {
    max-height: 237.6px;
    padding: 6px 9px;
    gap: 3px 10px;
    font-size: 10px;
    line-height: 1.3;
  }

  #placeHint .placeHintStep:last-child {
    display: none;
  }

  #placeSpells .ps {
    padding-block: 3px;
    font-size: 9px;
  }
}

/* ========================================================================== 
   Phase 3 polish · difficulty escalation auras

   The shared tactile-button pass unintentionally flattened the original
   Hard → Brutal++ danger progression. Keep selection as a separate fill/border
   state, and express difficulty with an independent halo outside the control.
   ========================================================================== */

@keyframes ssDifficultyAura {
  0%, 100% {
    opacity: var(--ss-diff-glow-low, .2);
    transform: scale(.985);
  }
  50% {
    opacity: var(--ss-diff-glow-high, .5);
    transform: scale(1.025);
  }
}

#diffPicks .diffBtn {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

#diffPicks .diffBtn::after {
  content: "";
  position: absolute;
  inset: var(--ss-diff-glow-inset, -4px);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1px var(--ss-diff-glow-ring, transparent),
    0 0 var(--ss-diff-glow-near-size, 0) var(--ss-diff-glow-near, transparent),
    0 0 var(--ss-diff-glow-far-size, 0) var(--ss-diff-glow-far, transparent);
}

#diffPicks .diffBtn[data-diff="hard"] {
  color: #cbb0ef;
  border-color: rgba(138, 96, 190, .72);
}

#diffPicks .diffBtn[data-diff="hard"]::after {
  --ss-diff-glow-low: .18;
  --ss-diff-glow-high: .38;
  --ss-diff-glow-ring: rgba(166, 103, 226, .62);
  --ss-diff-glow-near: rgba(138, 61, 255, .42);
  --ss-diff-glow-near-size: 14px;
  --ss-diff-glow-far: rgba(104, 48, 186, .2);
  --ss-diff-glow-far-size: 25px;
  animation: ssDifficultyAura 7s ease-in-out infinite;
}

#diffPicks .diffBtn[data-diff="brutal"] {
  color: #dda1bf;
  border-color: rgba(166, 66, 116, .76);
}

#diffPicks .diffBtn[data-diff="brutal"]::after {
  --ss-diff-glow-low: .25;
  --ss-diff-glow-high: .52;
  --ss-diff-glow-ring: rgba(207, 83, 142, .66);
  --ss-diff-glow-near: rgba(177, 45, 111, .5);
  --ss-diff-glow-near-size: 18px;
  --ss-diff-glow-far: rgba(114, 32, 105, .24);
  --ss-diff-glow-far-size: 31px;
  animation: ssDifficultyAura 5.4s ease-in-out infinite;
}

#diffPicks .diffBtn[data-diff="brutalp"],
#diffPicks .diffBtn[data-diff="brutalpp"] {
  /* Retire the legacy button-level animation; the new aura does not disturb
     label contrast, selection fill, or keyboard focus. */
  animation: none;
}

#diffPicks .diffBtn[data-diff="brutalp"] {
  color: #ff9d86;
  border-color: rgba(230, 72, 62, .86);
}

#diffPicks .diffBtn[data-diff="brutalp"]::after {
  --ss-diff-glow-inset: -5px;
  --ss-diff-glow-low: .38;
  --ss-diff-glow-high: .76;
  --ss-diff-glow-ring: rgba(255, 91, 66, .78);
  --ss-diff-glow-near: rgba(239, 55, 40, .62);
  --ss-diff-glow-near-size: 23px;
  --ss-diff-glow-far: rgba(185, 35, 24, .31);
  --ss-diff-glow-far-size: 39px;
  animation: ssDifficultyAura 3.8s ease-in-out infinite;
}

#diffPicks .diffBtn[data-diff="brutalpp"] {
  color: #ffd88c;
  border-color: rgba(241, 178, 63, .94);
}

#diffPicks .diffBtn[data-diff="brutalpp"]::after {
  --ss-diff-glow-inset: -6px;
  --ss-diff-glow-low: .52;
  --ss-diff-glow-high: 1;
  --ss-diff-glow-ring: rgba(255, 211, 94, .9);
  --ss-diff-glow-near: rgba(255, 156, 42, .72);
  --ss-diff-glow-near-size: 28px;
  --ss-diff-glow-far: rgba(255, 75, 20, .42);
  --ss-diff-glow-far-size: 52px;
  animation: ssDifficultyAura 2.8s ease-in-out infinite;
}

#diffPicks .diffBtn.sel::after,
#diffPicks .diffBtn:hover::after,
#diffPicks .diffBtn:focus-visible::after {
  --ss-diff-glow-low: .62;
  --ss-diff-glow-high: 1;
}

#diffPicks .diffBtn:hover::after,
#diffPicks .diffBtn:focus-visible::after {
  animation-duration: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
  #diffPicks .diffBtn::after {
    animation: none !important;
    opacity: var(--ss-diff-glow-high, .45);
    transform: none;
  }
}

/* ========================================================================== 
   Phase 3 full consistency audit · responsive and information hierarchy

   These rules close the remaining cross-screen presentation gaps discovered
   in the live 1280×720, 844×390, and 390×844 audit. They do not alter game
   state, available actions, handlers, balance, simulation, or save data.
   ========================================================================== */

/* Reading rooms: secondary copy must remain readable on warm parchment. */
#tutOv .sub,
#patchOv .sub {
  color: #6a5036 !important;
  opacity: 1;
  font-weight: 600;
}

/* Compendium: keep its header actions and both reading columns inside the
   card at every width. The previous inline flex header could grow wider than
   a portrait viewport and put Close completely off-screen. */
#compCard {
  box-sizing: border-box;
  overflow-x: hidden;
}

#compCard > div:first-child {
  min-width: 0;
  gap: 12px;
}

#compHdr {
  min-width: 0;
}

#compBody,
#compLeft,
#compDetail,
#compList {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 900px) — max-width:900 fails stage 1920 */ 
  #compLeft {
    overflow: auto;
  }
}

@media (max-width:0px){ /* DISABLED, was: (max-width: 520px) — max-width:520 fails stage 1920 */ 
  #compCard {
    width: calc(1920px - 16px) !important;
    max-width: calc(1920px - 16px) !important;
    padding-inline: 16px;
  }

  #compCard > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
  }

  #compHdr {
    margin: 0;
    overflow: hidden;
    font-size: 19px !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #compClose {
    grid-column: 2;
    grid-row: 1;
    min-width: 76px;
  }

  #tutBtn {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
  }
}

/* Tooltips: adopt the approved dense-interface typography and tactile panel
   language. Compact landscape keeps the smaller scale so a dossier can still
   fit vertically. */
#ttBox {
  max-width: min(340px, calc(1920px - 16px));
  box-sizing: border-box;
  padding: 13px 15px;
  border-color: rgba(200, 163, 90, .76);
  border-radius: var(--ss-radius-md);
  color: var(--ss-text-on-dark);
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 28%),
    radial-gradient(circle at 15% 0, rgba(138,61,255,.1), transparent 38%),
    rgba(12, 12, 18, .98);
  box-shadow:
    inset 0 0 0 1px rgba(232,182,76,.07),
    0 14px 38px rgba(0,0,0,.66);
  font-family: var(--ss-font-ui);
  font-size: 12.5px;
  line-height: 1.52;
}

#ttBox .ttcard {
  min-width: min(252px, calc(1920px - 48px));
  font-family: var(--ss-font-ui);
  font-size: 12.5px;
  line-height: 1.48;
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 500px) and (min-width: 680px) — max-height:500 fails stage 1080; min-width:680 holds for stage 1920 */ 
  #ttBox,
  #ttBox .ttcard {
    font-size: 11.5px;
    line-height: 1.4;
  }
}

/* Compact chat keeps the requested small footprint, while its live status is
   a single readable line rather than a broken two-line fragment. */
#chatBox #onlineRow {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chatBox #onlineRow > * {
  min-width: 0;
}

/* Battle: a restrained edge vignette integrates the bright field art with
   the dark tactical HUD without changing the battlefield or its layout. */
#battleHud {
  isolation: isolate;
}

#battleHud::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 72% at 50% 48%, transparent 44%, rgba(8, 7, 14, .15) 70%, rgba(5, 5, 10, .48) 100%),
    linear-gradient(180deg, rgba(12, 7, 20, .18), transparent 27%, transparent 72%, rgba(5, 5, 10, .25));
}

#battleHud > * {
  z-index: 1;
}

/* Results: keep both decisions together as a single action family. On short
   landscape screens the footer stays reachable while the report itself
   scrolls, preventing CONTINUE from disappearing below the first view. */
#roActions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}

#roActions #roBtn {
  min-width: 174px;
  margin: 0;
  padding: 11px 36px;
  font-size: 15px;
}

#roActions #roMenuBtn {
  margin: 0;
}

@media (max-width:0px){ /* DISABLED, was: (max-height: 500px) and (min-width: 680px) — max-height:500 fails stage 1080; min-width:680 holds for stage 1920 */ 
  #roundOverlay {
    padding: 8px;
  }

  #roundOverlay .ovCard {
    width: min(760px, calc(1920px - 16px));
    max-height: calc(1080px - 16px);
    padding: 16px 22px 0;
  }

  #roundOverlay #roCap {
    margin: 0 0 4px;
    font-size: 28px;
  }

  #roundOverlay #roSub {
    font-size: 14px;
    line-height: 1.35;
  }

  #roundOverlay #roStats {
    margin: 10px 0;
    padding: 10px 12px;
    font-size: 12px;
  }

  #roundOverlay #roSims {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  #roActions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex-direction: row;
    justify-content: center;
    margin: 10px -22px 0;
    padding: 10px 22px 12px;
    border-top: 1px solid rgba(142,120,88,.4);
    background: linear-gradient(180deg, rgba(15,15,21,.96), rgba(10,10,15,.995));
    box-shadow: 0 -10px 22px rgba(0,0,0,.28);
  }

  #roActions #roBtn,
  #roActions #roMenuBtn {
    min-width: 150px;
    min-height: 38px;
    padding: 8px 18px;
  }

  #endScreen {
    padding: 12px 24px;
  }

  #endLogo {
    margin-block: 2px;
    font-size: clamp(30px, 108px, 46px) !important;
  }

  #endTag {
    font-size: 16px;
  }

  #endStats {
    margin: 8px auto;
    padding: 9px 14px;
    font-size: 13px;
    line-height: 1.35;
  }

  #endBtns {
    gap: 6px;
  }

  #endBtns .big {
    min-height: 36px;
    padding-block: 7px;
  }
}