/* Menus are a single, continuous space. Combat keeps its own HUD styling. */
.menu-screen {
  --menu-ink: #f3ece4;
  --menu-muted: #baadb0;
  --menu-dim: #9d8e94;
  --menu-rule: #b5a2a326;
  --menu-red: #b82e43;
  --menu-red-bright: #f28a93;
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  display: block;
  color: var(--menu-ink);
  background: radial-gradient(ellipse at 84% 15%, #431b261f, transparent 55%), #100e12;
  backdrop-filter: none;
  pointer-events: auto;
  font-size: 16px;
  animation: menu-enter 220ms ease-out both;
}
.menu-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, #07080b33, transparent 65%), radial-gradient(ellipse at 10% 0%, #7d314713, transparent 60%);
}
.menu-screen button { font-size: 16px; }
.menu-screen button:disabled { opacity: .45; cursor: default; }
.menu-screen button:focus:not(:focus-visible):not(.controller-selected) { outline: none; }
.menu-screen button:focus-visible {
  outline: 2px solid #f19b9f;
  outline-offset: 4px;
}
.menu-screen button.controller-selected {
  outline: 2px solid #f19b9f !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}
.menu-screen .eyebrow {
  color: #c29298;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 1.7px;
  font-weight: 500;
}
.menu-screen h2, .menu-screen h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--menu-ink);
}
.menu-screen .primary-button, .menu-screen .secondary-button {
  min-height: 52px;
  padding: 13px 18px;
  font-size: 16px;
  line-height: 1.25;
  border-radius: 2px;
  gap: 11px;
}
.menu-screen .primary-button {
  color: #fff3ed;
  border: 1px solid #c64959;
  background: linear-gradient(100deg, #ae263c, #812036);
  box-shadow: inset 0 1px 0 #ffabb02b, 0 6px 22px #0302043d;
  font-weight: 600;
}
.menu-screen .primary-button:not(:disabled):hover { background: linear-gradient(100deg, #c23349, #972a42); transform: translateY(-1px); }
.menu-screen .secondary-button {
  background: #c7b6b006;
  border: 1px solid #c7b6b037;
  color: #e6d9d6;
  font-weight: 400;
  box-shadow: none;
}
.menu-screen .secondary-button:not(:disabled):hover { background: #c7b6b00d; border-color: #c7b6b075; }
.menu-screen .text-button {
  background: none;
  border: 0;
  color: #d2c2c3;
  font-size: 16px;
  font-weight: 400;
  padding: 9px 0;
  min-height: 42px;
}
.menu-screen .text-button:not(:disabled):hover { color: #fff3ed; }
.menu-screen .input-key {
  height: 25px !important;
  min-width: 25px;
  font-size: 14px !important;
  font-weight: 500;
  color: #eee1de;
  background: #171318;
  border-color: #c7b6b054;
  border-radius: 4px;
  padding: 3px 6px;
}
.menu-screen .primary-button .input-key { background: #470f2329; color: #fff3ed !important; border-color: #f2bdc07d !important; }
.menu-screen .line-icon { width: 21px; height: 21px; }
.menu-screen :is(.collection-grid, .detail-copy, .character-scroll, .character-build, .pause-panel, .options-panel) {
  scrollbar-width: thin;
  scrollbar-color: #89616a77 transparent;
  overscroll-behavior: contain;
}
.menu-screen ::-webkit-scrollbar { width: 5px; height: 5px; }
.menu-screen ::-webkit-scrollbar-thumb { background: #89616a77; border-radius: 5px; }
.menu-screen ::-webkit-scrollbar-track { background: transparent; }
#ui:not([data-mode="playing"]) > .app-tools,
#ui:not([data-mode="playing"]) > .controller-nav,
#ui:not([data-mode="playing"]) > .save-status { display: none; }

/* Shared workspace: navigation, content, then persistent contextual actions. */
.menu-screen .menu-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1600px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: clamp(24px, 4vh, 44px) clamp(28px, 4vw, 76px) 18px;
  overflow: hidden;
}
.menu-screen .menu-header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 30px;
  min-height: 76px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--menu-rule);
}
.menu-screen .menu-identity { min-width: 0; }
.menu-screen .menu-identity h2 { margin: 3px 0 0; font-size: 38px; line-height: 1.05; letter-spacing: -.45px; }
.menu-screen .menu-identity p { margin-top: 8px; color: var(--menu-muted); font-size: 16px; line-height: 1.5; }
.menu-screen .workspace-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.menu-screen .workspace-nav button {
  position: relative;
  min-height: 44px;
  padding: 10px 0;
  background: none;
  border: 0;
  color: #ae9fa7;
  white-space: nowrap;
}
.menu-screen .workspace-nav button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.menu-screen .workspace-nav button[aria-current="page"] { color: #fff1e9; }
.menu-screen .workspace-nav button[aria-current="page"]::after { background: #c64a5b; }
.menu-screen .workspace-nav button:hover { color: #fff1e9; }
.menu-screen .menu-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 9px;
  min-height: 42px;
  padding: 8px 0 8px 26px;
  border: 0;
  border-left: 1px solid var(--menu-rule);
  border-radius: 0;
  color: #d7c9cb;
  background: none;
  font-size: 16px;
}
.menu-screen .menu-back:hover { color: #fff1e9; background: none; }
.menu-screen .menu-header > .menu-back:last-child { margin-left: auto; }
.menu-screen .menu-header:has(.workspace-nav) > .menu-back { margin-left: 0; }
.menu-screen .menu-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex: 0 0 auto;
  min-height: 47px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--menu-rule);
  color: #b6a6ac;
  font-size: 14px;
  line-height: 1.3;
}
.menu-screen .menu-footer > span { display: inline-flex; align-items: center; gap: 8px; }
.menu-screen .menu-footer > p { margin-left: auto; font-size: 14px; color: #9b8b94; }
.menu-screen .menu-footer .input-key { font-size: 14px !important; }

/* Collection: an open catalog and a jewel inspection surface. */
.menu-screen .collection-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 67px;
  gap: 28px;
}
.menu-screen .collection-tabs { display: flex; flex: 0 0 auto; gap: 26px; margin: 0; border: 0; }
.menu-screen .collection-tabs > button {
  min-height: 47px;
  margin: 0;
  padding: 13px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #b8a6af;
  font-size: 17px;
  background: none;
}
.menu-screen .collection-tabs > button[aria-pressed="true"] { border-bottom-color: #c54b5b; color: #f8eee7; }
.menu-screen .collection-tabs button span { font-size: 14px; color: #a18b98; margin-left: 5px; }
.menu-screen .owned-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  min-height: 42px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #b8a6af;
  white-space: nowrap;
  font-size: 15px;
}
.menu-screen .owned-toggle::before { content: ''; display: inline-block; width: 15px; height: 15px; border: 1px solid #947280; border-radius: 2px; }
.menu-screen .owned-toggle[aria-pressed="true"] { color: #f2d9dc; }
.menu-screen .owned-toggle[aria-pressed="true"]::before { border-color: #d65b6d; background: #b82e43; box-shadow: inset 0 0 0 3px #191016; }
.menu-screen .collection-count { font-size: 14px; color: #b5a2ac; white-space: nowrap; }
.menu-screen .workspace-rating { display: inline-flex; align-items: baseline; gap: 8px; padding-left: 23px; border-left: 1px solid var(--menu-rule); white-space: nowrap; }
.menu-screen .workspace-rating > span { color: #b697a6; font-size: 14px; }
.menu-screen .workspace-rating > strong { color: #f1dce3; font: 500 28px/1 'Cormorant Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
.menu-screen .collection-layout {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 1fr);
  align-items: stretch;
  gap: clamp(26px, 4vw, 64px);
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  margin: 0;
  overflow: hidden;
}
.menu-screen .collection-browser { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.menu-screen .socket-strip { flex: 0 0 auto; margin: 0 4px 17px; padding: 3px 0 15px; border-bottom: 1px solid var(--menu-rule); }
.menu-screen .socket-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #e0cbd0; font-size: 15px; line-height: 1.4; }
.menu-screen .socket-caption small { font-size: 14px; font-weight: 400; color: #aa929f; }
.menu-screen .socket-row { display: flex; align-items: center; gap: 11px; }
.menu-screen .socket-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 59px;
  height: 58px;
  padding: 4px;
  border: 1px solid #97798245;
  border-radius: 3px;
  color: #ac8594;
  background: #08060a44;
  font-size: 22px;
  transition: background 150ms ease, border-color 150ms ease;
}
.menu-screen .socket-slot img { width: 100%; height: 100%; object-fit: contain; }
.menu-screen .socket-slot span { position: absolute; right: 3px; bottom: 0; font-size: 14px; line-height: 1; color: #d5b8c5; font-weight: 400; text-shadow: 0 1px 4px #000; }
.menu-screen .socket-slot:has(img[hidden]) span { position: static; font-size: 23px; font-weight: 300; }
.menu-screen .socket-slot small { display: none; }
.menu-screen .socket-slot:hover { border-color: #cd7c8c; background: #6730431c; }
.menu-screen .socket-slot[aria-pressed="true"], .menu-screen .socket-slot.is-replacement { border-color: #dc8190; background: #67304338; }
.menu-screen .socket-strip.is-replacing .socket-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.menu-screen .socket-strip.is-replacing .socket-slot { display: flex; flex-direction: column; gap: 5px; width: 100%; height: auto; min-height: 112px; padding: 9px 7px; border-color: #b66a7e8c; }
.menu-screen .socket-strip.is-replacing .socket-slot img { width: 58px; height: 58px; }
.menu-screen .socket-strip.is-replacing .socket-slot small { display: block; font-size: 14px; line-height: 1.15; text-align: center; color: #e3c9d7; }
.menu-screen .socket-strip.is-replacing .socket-slot span { display: none; }
.menu-screen .replace-note { padding: 14px 0 0; color: #e6c9d5; font-size: 16px; line-height: 1.4; }
.menu-screen .replace-note button { min-height: 35px; margin-top: 4px; color: #bb95a8; font-size: 15px; }
.menu-screen .collection-grid[inert], .menu-screen .collection-toolbar[inert], .menu-screen .workspace-nav[inert] { opacity: .35; }
.menu-screen .collection-layout.is-empty { grid-template-columns: 1fr; }
.menu-screen .collection-layout.is-empty .collection-grid { display: none; }
.menu-screen .collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  gap: 6px 12px;
  margin: 0;
  padding: 5px 9px 8px 5px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding: 7px;
}
.menu-screen .collection-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 165px;
  padding: 10px 7px 15px;
  border: 0;
  border-bottom: 1px solid #c29ba614;
  border-radius: 2px 2px 0 0;
  background: transparent;
  color: #e6dce0;
  transition: background 160ms ease, color 160ms ease;
  scroll-margin: 8px;
}
.menu-screen .collection-tile::after { content: ''; position: absolute; bottom: -1px; left: 18%; right: 18%; height: 2px; background: transparent; }
.menu-screen .collection-tile:hover { background: #c0a4a605; color: #fff4ef; }
.menu-screen .collection-tile[aria-pressed="true"] { border-bottom-color: #c29ba633; background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--gem-color), transparent 93%), transparent 78%); color: #fff5ec; }
.menu-screen .collection-tile[aria-pressed="true"]::after { background: #ce6472; }
.menu-screen .collection-tile > .gem-art {
  display: block;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px #0008);
  opacity: 1;
  transform: translateY(0);
  transition: transform 180ms ease, opacity 180ms ease;
}
.menu-screen .collection-tile:hover > .gem-art { transform: translateY(-3px); }
.menu-screen .collection-tile > span { margin-top: 5px; font: 500 21px/1.06 'Cormorant Garamond', Georgia, serif; color: inherit; text-align: center; }
.menu-screen .collection-tile > small { margin-top: 7px; font-size: 14px; line-height: 1.3; font-weight: 400; color: #ad97a4; text-align: center; }
.menu-screen .collection-tile.gem-undiscovered > .gem-art { opacity: .68; filter: saturate(.65) drop-shadow(0 5px 15px #0008); }
.menu-screen .collection-tile.gem-undiscovered > small { color: #aa909d; }
.menu-screen .collection-tile[aria-pressed="true"].gem-undiscovered > .gem-art { opacity: .92; filter: drop-shadow(0 5px 15px #0008); }
.menu-screen .collection-empty { margin: 30px auto; padding: 15px; max-width: 290px; color: #baa6b1; text-align: center; line-height: 1.7; font-size: 16px; }
.menu-screen .collection-detail {
  position: relative;
  display: grid;
  grid-template-rows: minmax(135px, .8fr) minmax(130px, 1fr) auto;
  align-items: stretch;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 0 0 0 clamp(24px, 3vw, 48px);
  margin: 0;
  border: 0;
  border-left: 1px solid var(--menu-rule);
  overflow: hidden;
  text-align: left;
}
.menu-screen .detail-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 0 8px; overflow: hidden; }
.menu-screen .detail-visual::before { content: ''; position: absolute; width: 88%; height: 115%; top: -13%; background: radial-gradient(ellipse, color-mix(in srgb, var(--gem-color, #d55d73), transparent 92%), transparent 65%); pointer-events: none; }
.menu-screen .detail-art {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 310px);
  height: 100%;
  max-height: 300px;
  max-width: 100%;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 8px 18px #0006) drop-shadow(0 0 30px color-mix(in srgb, var(--gem-color, #d55d73), transparent 90%));
}
.menu-screen .detail-rank { position: absolute; bottom: 11px; right: 0; z-index: 2; font-size: 14px; color: #b9a0ad; letter-spacing: .4px; }
.menu-screen .detail-copy { min-height: 0; overflow-y: auto; padding: 3px 6px 12px 0; }
.menu-screen .collection-detail h3 { font: 500 clamp(32px, 2.65vw, 42px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: -.4px; color: #f6e9e7; margin: 6px 0 10px; }
.menu-screen .detail-effect-name { display: block; margin: 0 0 11px; color: color-mix(in srgb, var(--gem-color, #ef8b9b), #ecdce5 48%); font-size: 16px; line-height: 1.3; font-weight: 500; }
.menu-screen .detail-lore { font-size: 16px; color: #bca9b4; line-height: 1.55; margin: 0; }
.menu-screen .detail-power { width: 100%; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--menu-rule); font-size: 16px; line-height: 1.5; color: #e7d6de; }
.menu-screen .detail-footer { min-width: 0; padding-top: 12px; border-top: 1px solid var(--menu-rule); }
.menu-screen .detail-progress { margin: 0 0 5px; font-size: 14px; line-height: 1.4; color: #dac0cb; }
.menu-screen .detail-upgrade { margin: 0 0 11px; color: #ba9dac; font-size: 14px; line-height: 1.45; }
.menu-screen .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 0; }
.menu-screen .detail-actions:has(button[hidden]), .menu-screen .detail-actions:has(> :only-child) { grid-template-columns: 1fr; }
.menu-screen .collection-detail button { width: 100%; margin: 0; }
.menu-screen .collection-detail .detail-actions button { min-height: 52px; margin: 0; padding: 12px; font-size: 16px; }
.menu-screen .collection-detail .primary-button:disabled { color: #d0adb9; background: #3a1f2a; border-color: #875465; opacity: .65; }
.menu-screen.starter-collection .collection-layout,
.menu-screen:has([data-detail="starter"]) .collection-layout { padding-top: 26px; }
.menu-screen:has([data-detail="starter"]) .collection-grid { height: auto; max-height: none; }
.menu-screen:has([data-detail="starter"]) .collection-detail { grid-template-rows: minmax(180px, 1.15fr) minmax(160px, 1fr) auto; }
.menu-screen:has([data-detail="starter"]) .detail-art { width: min(100%, 340px); height: 100%; max-height: 340px; }
.menu-screen:has([data-detail="starter"]) .detail-footer { padding-top: 16px; }

/* Altar: the world first, with one clear destination and a quiet utility rail. */
.menu-screen.launch-screen { background: #0e0b10; display: flex; flex-direction: column; padding: 32px clamp(28px, 5.5vw, 100px) 30px; }
.menu-screen.launch-screen .launch-art { position: absolute; inset: 0; opacity: .94; background-position: 66% center; filter: saturate(.52) sepia(.1); }
.menu-screen.launch-screen .launch-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0c0a0fe8 0%, #100b13bf 31%, #100b1120 62%, #140c1433), linear-gradient(0deg, #0e0a10fa, #0e0a1040 33%, transparent 60%, #100c1266), linear-gradient(90deg, transparent 42%, #2b122427); }
.menu-screen .altar-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 51px; gap: 30px; }
.menu-screen .altar-topline > span { color: #c1a8ae; font-size: 14px; letter-spacing: 2px; }
.menu-screen .altar-topline button { min-height: 42px; border: 0; color: #d6c0c6; background: none; padding: 8px 0 8px 12px; display: flex; align-items: center; gap: 9px; }
.menu-screen .altar-topline button:hover { color: #fff2eb; }
.menu-screen .altar-wallet { display: flex; align-items: center; justify-content: flex-end; gap: 31px; margin-left: auto; }
.menu-screen .wallet-balance { display: flex; align-items: center; gap: 11px; }
.menu-screen .wallet-balance > .line-icon { width: 24px; height: 24px; color: #d4999f; }
.menu-screen .wallet-balance > div { display: flex; flex-direction: column; gap: 3px; }
.menu-screen .wallet-balance strong { color: #f6e9e2; font-size: 32px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.menu-screen .wallet-balance span { color: #c0a5b1; font-size: 14px; line-height: 1.2; }
.menu-screen .altar-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(330px, 510px) 1fr; grid-template-rows: auto auto; align-content: center; flex: 1 1 auto; min-height: 0; padding: 24px 0 34px; row-gap: clamp(22px, 3.5vh, 43px); }
.menu-screen .altar-intro { grid-column: 1; grid-row: 1; }
.menu-screen .altar-intro h1 { font: 500 clamp(63px, 6.25vw, 98px)/.83 'Cormorant Garamond', Georgia, serif; letter-spacing: -2.8px; color: #f3e7dc; text-shadow: 0 3px 25px #0005; }
.menu-screen .altar-intro h1 span { color: #d77b83; }
.menu-screen .altar-intro > p { color: #bda7b0; font-size: 14px; letter-spacing: 4px; line-height: 1.4; margin-top: 22px; }
.menu-screen .altar-power { display: inline-flex; align-items: baseline; gap: 12px; background: none; border: 0; padding: 0 0 4px; margin-top: 24px; color: #ecd9d6; }
.menu-screen .altar-power strong { font: 500 43px/.95 'Cormorant Garamond', Georgia, serif; font-variant-numeric: tabular-nums; color: #f1e7df; }
.menu-screen .altar-power span { font-size: 15px; color: #bfa7b1; }
.menu-screen .altar-power:hover strong, .menu-screen .altar-power:hover span { color: #ffb3bb; }
.menu-screen .altar-destination { grid-column: 1; grid-row: 2; width: min(450px, 100%); border-left: 2px solid #b9384b; padding-left: 24px; }
.menu-screen .altar-destination h2 { font-size: 34px; line-height: 1; margin: 6px 0 9px; }
.menu-screen .altar-destination > p, .menu-screen .altar-destination > header > p { font-size: 16px; color: #beaab4; line-height: 1.45; margin-bottom: 19px; }
.menu-screen .altar-destination .launch-enter { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 59px; padding: 15px 17px; font-size: 18px; margin-top: 18px; }
.menu-screen .launch-enter > small { margin-left: auto; font-size: 14px; font-weight: 400; color: #eed2d3; white-space: nowrap; }
.menu-screen .launch-enter > .line-icon { width: 19px; height: 19px; margin-left: 0; }
.menu-screen .altar-destination > .secondary-button { justify-content: flex-start; width: 100%; min-height: 59px; margin-top: 10px; border-color: #b695a25c; padding: 15px 17px; background: #221922e8; font-size: 18px; }
.menu-screen .altar-destination > .secondary-button small { margin-left: auto; color: #b3a0aa; font-size: 14px; font-weight: 400; }
.menu-screen .altar-destination > .secondary-button:not(:disabled):hover { color: #fff2ed; background: #34222fe8; border-color: #cf879b; }
.menu-screen .altar-destination > .secondary-button .line-icon { width: 25px; height: 25px; color: #d29eac; }
.menu-screen .altar-navigation { position: relative; z-index: 1; display: flex; align-items: center; gap: 36px; min-height: 73px; flex: 0 0 auto; border-top: 1px solid #dcc1c033; padding-top: 18px; }
.menu-screen .altar-navigation > button { display: flex; align-items: center; justify-content: flex-start; gap: 14px; color: #e5d6da; min-height: 50px; padding: 8px 4px; font-size: 18px; background: none; border: 0; }
.menu-screen .altar-navigation > button > .line-icon { width: 25px; height: 25px; color: #bd8b98; }
.menu-screen .altar-navigation > button small { padding-left: 2px; color: #ab899b; font-size: 14px; }
.menu-screen .altar-navigation > button > .line-icon:last-child { width: 19px; height: 19px; color: #aa7a8e; margin-left: 8px; }
.menu-screen .altar-navigation > button:hover { color: #fff2ed; }
.menu-screen .altar-loadout { position: relative; z-index: 1; display: inline-flex; align-items: center; vertical-align: middle; gap: 4px; margin: 0 0 0 20px; color: #ac93a3; font-size: 14px; }
.menu-screen .altar-loadout > div { display: flex; align-items: center; gap: 3px; }
.menu-screen .altar-loadout img { width: 40px; height: 43px; object-fit: contain; filter: drop-shadow(0 0 10px #08040a99); }
.menu-screen .pending-chest-note { padding: 9px 0; margin: 9px 0 0; border: 0; background: none; color: #efbbc2; font-size: 15px; line-height: 1.4; }

/* Character: power in the left rail, the equipped build beside it. */
.menu-screen .character-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 78px); flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 28px; }
.menu-screen .character-overview { min-width: 0; }
.menu-screen .character-rating { margin: 0; padding: 0 0 22px; text-align: left; border: 0; background: none; }
.menu-screen .character-rating > span { font-size: 14px; color: #c8959f; letter-spacing: 1.6px; }
.menu-screen .character-rating > strong { display: block; color: #f3e8e3; font: 500 clamp(70px, 7vw, 103px)/1.05 'Cormorant Garamond', Georgia, serif; margin: 10px 0 7px; font-variant-numeric: tabular-nums; letter-spacing: -2.5px; }
.menu-screen .character-rating > p { color: #b59daa; font-size: 16px; margin: 0; line-height: 1.5; }
.menu-screen .character-basics { display: flex; flex-direction: column; gap: 0; margin: 0; border: 0; }
.menu-screen .character-basics > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 14px; padding: 18px 0; border-top: 1px solid var(--menu-rule); background: none; text-align: left; }
.menu-screen .character-basics span { font-size: 16px; color: #c7b5bf; }
.menu-screen .character-basics strong { font-size: 24px; line-height: 1.2; color: #f3e2e5; font-weight: 400; font-variant-numeric: tabular-nums; }
.menu-screen .character-basics small { grid-column: 1 / -1; font-size: 14px; color: #ac929f; line-height: 1.5; }
.menu-screen .character-overview > p { font-size: 15px; color: #ad929f; line-height: 1.6; margin-top: 20px; }
.menu-screen .character-build { min-height: 0; overflow: auto; padding: 0 8px 8px 0; }
.menu-screen .character-build > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.menu-screen .character-build > header h3 { font-size: 31px; }
.menu-screen .character-build > header button { flex: 0 0 auto; }
.menu-screen .character-spells { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.menu-screen .character-spells article { display: grid; grid-template-columns: 63px 1fr; align-items: start; gap: 3px 19px; position: relative; padding: 18px 0; background: none; border: 0; border-top: 1px solid var(--menu-rule); }
.menu-screen .character-spells article > img { width: 60px; height: 71px; object-fit: contain; float: none; margin: 0; grid-column: 1; grid-row: 1 / 4; }
.menu-screen .character-spells article > div { grid-column: 2; }
.menu-screen .character-spells h3 { margin: 0 0 4px; font-size: 25px; }
.menu-screen .character-spells article > div > span { color: #bfa1ae; font-size: 14px; }
.menu-screen .character-spells dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 18px; font-size: 15px; margin: 8px 0 0; padding: 0; grid-column: 2; }
.menu-screen .character-spells dt { color: #b9a3af; font-size: 15px; }
.menu-screen .character-spells dd { margin: 0; color: #e6d7de; font-size: 15px; text-align: right; }
.menu-screen .character-spells article > p { grid-column: 2; min-height: 0; color: #b6a0ad; font-size: 15px; line-height: 1.55; margin-top: 9px; }
.menu-screen .stat-contribution { grid-column: 2; font-size: 14px; color: #d8a1b1; font-weight: 400; border: 0; padding: 0; margin-top: 7px; }
.menu-screen .loadout-summary { margin: 0; padding: 0; border: 0; }
.menu-screen .loadout-summary h3 { margin: 24px 0 5px; font-size: 29px; }
.menu-screen .loadout-summary > div { display: flex; align-items: center; gap: 18px; margin: 0; padding: 15px 0; border: 0; border-bottom: 1px solid var(--menu-rule); background: none; }
.menu-screen .loadout-summary img { flex: 0 0 auto; width: 61px; height: 65px; object-fit: contain; }
.menu-screen .loadout-summary p { font-size: 15px; line-height: 1.5; color: #bfa8b6; }
.menu-screen .loadout-summary strong { display: block; color: #e8d8df; font-size: 17px; font-weight: 400; margin-bottom: 3px; }
.menu-screen .loadout-summary span { display: block; font-size: 15px; color: #bda2b1; }
.menu-screen .character-attributes { margin-top: 26px; padding-top: 21px; border-top: 1px solid var(--menu-rule); }
.menu-screen .character-attributes h3 { font-size: 29px; margin-bottom: 18px; }
.menu-screen .character-attributes dl { display: grid; grid-template-columns: 1fr auto; gap: 12px 22px; font-size: 16px; line-height: 1.4; margin: 0; }
.menu-screen .character-attributes dt { color: #bfa8b4; }
.menu-screen .character-attributes dd { margin: 0; color: #ead9e0; text-align: right; font-variant-numeric: tabular-nums; }
.menu-screen .character-attributes > p { margin-top: 16px; color: #a58b9b; font-size: 14px; line-height: 1.5; }
.menu-screen .character-spells article:not(:has(> img)) { grid-template-columns: 1fr; padding-left: 81px; }
.menu-screen .character-spells article:not(:has(> img)) > div,
.menu-screen .character-spells article:not(:has(> img)) > dl,
.menu-screen .character-spells article:not(:has(> img)) > p { grid-column: 1; }
.menu-screen .loadout-summary strong small { margin-left: 7px; color: #af91a2; font-size: 14px; white-space: nowrap; }
.menu-screen .empty-build { margin: 12px 0; padding: 20px 0; color: #bca4b1; font-size: 16px; line-height: 1.65; border-top: 1px solid var(--menu-rule); }
.menu-screen .character-scroll { min-height: 0; overflow: auto; }

/* Pause and outcomes deliberately have fewer decisions. */
.menu-screen.pause-screen, .menu-screen.outcome-screen { display: flex; align-items: center; justify-content: center; padding: 34px 28px; background: linear-gradient(90deg, #0e0b12f5, #100c14d9); backdrop-filter: blur(12px); }
.menu-screen .pause-panel { position: relative; width: min(450px, 100%); max-height: 100%; overflow-y: auto; padding: 8px; }
.menu-screen .pause-panel > h2 { font-size: 63px; line-height: 1; margin: 9px 0 14px; letter-spacing: -1px; }
.menu-screen .pause-panel > p { color: #bba3b1; font-size: 16px; line-height: 1.5; }
.menu-screen .pause-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 28px; }
.menu-screen .pause-actions > button { width: 100%; min-height: 53px; justify-content: flex-start; }
.menu-screen .pause-actions > .primary-button { margin-bottom: 5px; min-height: 59px; }
.menu-screen .pause-actions > .secondary-button { background: none; border-color: #b697a330; }
.menu-screen .pause-actions > .secondary-button:hover { background: #b697a306; border-color: #b697a363; }
.menu-screen .pause-actions .line-icon:last-child { margin-left: auto; }
.menu-screen .pause-actions > button > small { margin-left: auto; font-size: 14px; color: #bca2b1; }
.menu-screen .options-panel { position: relative; padding: 0; }
.menu-screen .options-panel h3, .menu-screen .options-panel h2 { font-size: 35px; line-height: 1.1; margin-bottom: 21px; }
.menu-screen .options-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.menu-screen .options-panel > header h3, .menu-screen .options-panel > header h2 { margin: 0; }
.menu-screen .options-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.menu-screen .options-actions > button { min-height: 51px; padding: 12px; }
.menu-screen .options-panel > .secondary-button { display: inline-flex; width: 100%; margin-top: 10px; }
.menu-screen .controls-reference { padding-top: 23px; margin-top: 24px; border-color: var(--menu-rule); }
.menu-screen .controls-reference > div { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 19px; margin-top: 17px; }
.menu-screen .controls-reference p { display: flex; align-items: center; gap: 9px; font-size: 15px; color: #c6afbc; line-height: 1.3; }
.menu-screen .controls-reference .input-key { flex: 0 0 auto; }
.menu-screen .save-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 23px; padding-top: 15px; border-top: 1px solid var(--menu-rule); }
.menu-screen .save-actions > button { color: #b8a0ad; font-size: 15px; }
.menu-screen .save-actions > span { display: none; }
.menu-screen .save-status { display: flex; align-items: flex-start; justify-content: flex-start; position: static; gap: 8px; font-size: 14px; color: #a88c9c; margin-top: 12px; line-height: 1.5; max-width: 100%; }
.menu-screen .save-status .save-indicator { margin-top: 5px; flex: 0 0 auto; }
.menu-screen .outcome-modal { position: relative; width: min(550px, 100%); max-height: 100%; overflow-y: auto; padding: 10px 12px; border: 0; box-shadow: none; background: none; text-align: center; }
.menu-screen .outcome-modal::before, .menu-screen .outcome-modal::after { display: none; }
.menu-screen .outcome-modal h2 { color: var(--menu-ink); font-size: 47px; line-height: 1.03; letter-spacing: -.6px; margin: 14px 0; }
.menu-screen .outcome-modal h2 em { color: #ce96a4; font-style: normal; }
.menu-screen .outcome-modal .modal-intro { color: #c2aab8; font-size: 16px !important; line-height: 1.55; margin-top: 10px; }
.menu-screen .outcome-sigil { width: 51px; height: 59px; margin: 0 auto 20px; color: #ba546a; }
.menu-screen .outcome-sigil > .line-icon { width: 100%; height: 100%; }
.menu-screen .run-stats { display: flex; justify-content: space-between; gap: 14px; margin: 25px 0; padding: 20px 0; border-top: 1px solid var(--menu-rule); border-bottom: 1px solid var(--menu-rule); }
.menu-screen .run-stats div { display: flex; flex-direction: column; gap: 6px; }
.menu-screen .run-stats strong { font: 500 32px/1 'Cormorant Garamond', Georgia, serif; color: #ecd6de; }
.menu-screen .run-stats span { color: #b39aa8; font-size: 14px; letter-spacing: 0; line-height: 1.4; }
.menu-screen .reward-jewel { width: 160px; height: 170px; margin: 7px auto 0; }
.menu-screen .reward-jewel > div, .menu-screen .reward-jewel .gem-art { width: 100%; height: 100%; object-fit: contain; }
.menu-screen .reward-gold-art { margin: 23px auto 13px; }
.menu-screen .reward-gold-art > .line-icon { width: 73px; height: 73px; }
.menu-screen .reward-gem-name { font-size: 20px; line-height: 1.3; color: #e0b7c7; }
.menu-screen .reward-awards { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 20px; }
.menu-screen .reward-gold { display: flex; align-items: center; gap: 7px; color: #cab3c0; font-size: 16px; }
.menu-screen .reward-gold strong { color: #ebd7dd; font-size: 22px; }
.menu-screen .reward-copy-count { display: flex; align-items: center; gap: 8px; color: #dcb5c5; font-size: 16px; }
.menu-screen .normal-reward { display: flex; justify-content: center; gap: 17px; font-size: 16px; padding: 12px; margin-top: 20px; border: 0; border-top: 1px solid var(--menu-rule); border-bottom: 1px solid var(--menu-rule); background: none; color: #d6bfcd; }
.menu-screen .normal-reward img { width: 53px; height: 57px; }
.menu-screen .reward-odds { color: #a58a9a; font-size: 14px; line-height: 1.4; margin-top: 15px; }
.menu-screen .outcome-modal .pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 23px; }
.menu-screen .outcome-modal .pause-actions .primary-button { grid-column: 1 / -1; }
.menu-screen .outcome-modal .pause-actions .secondary-button { justify-content: center; }
.menu-screen .outcome-modal .pause-actions .secondary-button > .line-icon { margin: 0; }
.menu-screen .reward-gold > span { color: #c5aeb7; }

@media (min-width: 1500px) {
  .menu-screen .collection-grid { gap: 8px 18px; }
  .menu-screen .collection-tile { min-height: 181px; padding-top: 13px; }
  .menu-screen .collection-tile > .gem-art { width: 106px; height: 106px; }
}
@media (max-width: 1150px) and (min-width: 761px) {
  .menu-screen .menu-shell { padding-left: 32px; padding-right: 32px; }
  .menu-screen .menu-header { gap: 23px; }
  .menu-screen .menu-identity h2 { font-size: 34px; }
  .menu-screen .workspace-nav { gap: 21px; }
  .menu-screen .collection-layout { grid-template-columns: minmax(0, 1fr) minmax(310px, 1fr); gap: 25px; }
  .menu-screen .collection-detail { padding-left: 25px; }
  .menu-screen .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .menu-screen .collection-tile { padding-left: 2px; padding-right: 2px; min-height: 150px; }
  .menu-screen .collection-tile > .gem-art { width: 78px; height: 78px; }
  .menu-screen .collection-tile > span { font-size: 19px; }
  .menu-screen .collection-toolbar { gap: 20px; }
  .menu-screen .collection-count { display: none; }
  .menu-screen .workspace-rating { padding-left: 18px; }
  .menu-screen .socket-row { gap: 7px; }
  .menu-screen .socket-slot { width: 49px; height: 50px; }
  .menu-screen .altar-navigation { gap: 28px; }
  .menu-screen .altar-navigation > button { font-size: 17px; }
  .menu-screen .altar-navigation > button small { padding-left: 0; }
  .menu-screen .altar-loadout { gap: 8px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .menu-screen .menu-shell { padding-top: 23px; padding-bottom: 13px; }
  .menu-screen .menu-header { min-height: 65px; padding-bottom: 17px; }
  .menu-screen .menu-identity h2 { font-size: 34px; }
  .menu-screen .collection-toolbar { min-height: 59px; }
  .menu-screen .collection-layout { gap: 35px; }
  .menu-screen .collection-detail { padding-left: 33px; grid-template-rows: minmax(110px, .75fr) minmax(125px, 1fr) auto; }
  .menu-screen .collection-detail h3 { font-size: 33px; margin: 5px 0 8px; }
  .menu-screen .detail-effect-name { margin-bottom: 8px; }
  .menu-screen .detail-lore, .menu-screen .detail-power { line-height: 1.45; }
  .menu-screen .detail-power { padding-top: 9px; margin-top: 9px; }
  .menu-screen .detail-footer { padding-top: 9px; }
  .menu-screen .detail-upgrade { margin-bottom: 8px; }
  .menu-screen .collection-detail .detail-actions button { min-height: 48px; }
  .menu-screen .socket-strip { margin-bottom: 10px; padding-bottom: 11px; }
  .menu-screen .socket-slot { width: 53px; height: 49px; }
  .menu-screen .socket-caption { margin-bottom: 7px; }
  .menu-screen .menu-footer { margin-top: 12px; min-height: 40px; padding-top: 10px; }
  .menu-screen:has([data-detail="starter"]) .collection-layout { padding-top: 20px; }
  .menu-screen:has([data-detail="starter"]) .collection-detail { grid-template-rows: minmax(150px, 1fr) minmax(160px, 1fr) auto; }
  .menu-screen.launch-screen { padding-top: 24px; padding-bottom: 22px; }
  .menu-screen .altar-layout { padding-top: 12px; padding-bottom: 18px; row-gap: 16px; }
  .menu-screen .altar-intro h1 { font-size: clamp(61px, 6vw, 82px); }
  .menu-screen .altar-intro > p { margin-top: 18px; }
  .menu-screen .altar-power { margin-top: 18px; }
  .menu-screen .altar-power strong { font-size: 37px; }
  .menu-screen .altar-destination h2 { font-size: 31px; }
  .menu-screen .altar-destination > p, .menu-screen .altar-destination > header > p { margin-bottom: 13px; }
  .menu-screen .altar-destination .launch-enter { margin-top: 11px; }
  .menu-screen .altar-destination > .secondary-button { margin-top: 8px; }
  .menu-screen .altar-navigation { min-height: 64px; padding-top: 11px; }
  .menu-screen .character-layout { padding-top: 21px; }
  .menu-screen .character-overview .character-rating { padding-bottom: 12px; }
  .menu-screen .character-overview .character-rating > strong { font-size: 68px; margin: 8px 0 6px; }
  .menu-screen .character-overview .character-basics > div { padding: 11px 0; }
  .menu-screen .character-overview .character-basics strong { font-size: 22px; }
  .menu-screen .character-attributes { margin-top: 18px; padding-top: 15px; }
  .menu-screen .character-attributes h3 { font-size: 26px; margin-bottom: 10px; }
  .menu-screen .character-attributes dl { font-size: 16px; gap: 6px 16px; }
  .menu-screen .character-attributes > p { display: none; }
}

/* Narrow displays keep inspection actions visible and browse sideways. */
@media (max-width: 760px) {
  .menu-screen .menu-shell { padding: 22px 22px 13px; }
  .menu-screen .menu-header { flex-wrap: wrap; align-items: flex-start; gap: 16px; min-height: 0; padding-bottom: 17px; }
  .menu-screen .menu-identity { order: 0; flex: 1 1 auto; }
  .menu-screen .menu-identity h2 { font-size: 33px; line-height: 1; }
  .menu-screen .menu-identity .eyebrow { font-size: 14px; letter-spacing: 1.2px; }
  .menu-screen .menu-identity p { font-size: 15px; line-height: 1.45; max-width: 330px; }
  .menu-screen .menu-back { order: 1; padding: 7px 0; border: 0; margin-left: auto !important; min-height: 37px; font-size: 15px; }
  .menu-screen .workspace-nav { order: 2; margin: 0; width: 100%; gap: 28px; }
  .menu-screen .workspace-nav button { padding: 7px 0 9px; min-height: 36px; font-size: 16px; }
  .menu-screen .collection-toolbar { min-height: 58px; gap: 17px; flex-wrap: nowrap; }
  .menu-screen .collection-tabs { gap: 21px; }
  .menu-screen .collection-tabs > button { min-height: 42px; padding: 11px 0 9px; font-size: 16px; }
  .menu-screen .owned-toggle { font-size: 14px; gap: 7px; }
  .menu-screen .owned-toggle::before { width: 14px; height: 14px; }
  .menu-screen .collection-count { display: none; }
  .menu-screen .workspace-rating { padding-left: 12px; gap: 5px; }
  .menu-screen .workspace-rating > strong { font-size: 25px; }
  .menu-screen .collection-layout { display: flex; flex-direction: column; gap: 15px; overflow: hidden; }
  .menu-screen .collection-browser { flex: 0 0 auto; overflow: visible; }
  .menu-screen .socket-strip { display: block; margin: 0 0 8px; padding: 0 0 11px; }
  .menu-screen .socket-caption { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; }
  .menu-screen .socket-caption small { font-size: 14px; }
  .menu-screen .socket-row { gap: 7px; min-width: 0; }
  .menu-screen .socket-slot { width: 43px; height: 42px; padding: 3px; }
  .menu-screen .socket-strip.is-replacing .socket-slot { min-height: 105px; }
  .menu-screen .collection-layout:has(.socket-strip.is-replacing) .collection-detail,
  .menu-screen .collection-layout:has(.socket-strip.is-replacing) .collection-grid { display: none; }
  .menu-screen .collection-layout:has(.socket-strip.is-replacing) .collection-browser { overflow-y: auto; }
  .menu-screen .collection-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 119px;
    grid-template-rows: 143px;
    flex: 0 0 auto;
    width: 100%;
    height: 156px;
    min-height: 156px;
    max-height: 156px;
    gap: 7px;
    padding: 5px 5px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding: 5px;
  }
  .menu-screen .collection-tile { min-height: 0; padding: 5px 6px 12px; scroll-snap-align: start; }
  .menu-screen .collection-tile > .gem-art { width: 66px; height: 66px; }
  .menu-screen .collection-tile > span { font-size: 19px; line-height: 1.02; margin-top: 3px; }
  .menu-screen .collection-tile > small { font-size: 14px; line-height: 1.15; margin-top: 5px; }
  .menu-screen .collection-empty { margin: 10px auto; padding: 12px; max-width: none; }
  .menu-screen .collection-detail {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 114px minmax(0, 1fr);
    grid-template-rows: minmax(120px, 1fr) auto;
    align-items: stretch;
    column-gap: 16px;
    min-height: 0;
    height: auto;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--menu-rule);
    overflow: hidden;
  }
  .menu-screen .detail-visual { grid-column: 1; grid-row: 1; align-items: flex-start; padding-top: 13px; overflow: visible; }
  .menu-screen .detail-visual::before { height: 190px; top: -10px; width: 170%; }
  .menu-screen .detail-art { width: 100%; height: 155px; max-height: 155px; }
  .menu-screen .detail-rank { top: 165px; bottom: auto; left: 0; right: 0; text-align: center; }
  .menu-screen .detail-copy { grid-column: 2; grid-row: 1; min-height: 0; padding: 0 4px 13px 0; }
  .menu-screen .collection-detail h3 { font-size: 32px; margin: 5px 0 9px; }
  .menu-screen .detail-effect-name { font-size: 15px; margin-bottom: 10px; line-height: 1.35; }
  .menu-screen .detail-lore { font-size: 15px; line-height: 1.5; }
  .menu-screen .detail-power { font-size: 15px; line-height: 1.5; padding-top: 10px; margin-top: 10px; }
  .menu-screen .detail-footer { grid-column: 1 / -1; grid-row: 2; margin-top: 11px; padding-top: 12px; }
  .menu-screen .detail-progress { font-size: 14px; }
  .menu-screen .detail-upgrade { font-size: 14px; margin-bottom: 9px; }
  .menu-screen .collection-detail .detail-actions button { min-height: 50px; padding: 12px 10px; font-size: 16px; }
  .menu-screen .menu-footer { min-height: 36px; gap: 18px; margin-top: 12px; padding-top: 11px; font-size: 14px; flex-wrap: wrap; }
  .menu-screen .menu-footer > p { display: none; }
  .menu-screen .menu-footer:has(> span:nth-child(5)) > span:nth-child(-n + 2) { display: none; }
  .menu-screen:has([data-detail="starter"]) .collection-layout { padding-top: 13px; }
  .menu-screen:has([data-detail="starter"]) .collection-grid { height: 156px; min-height: 156px; max-height: 156px; }
  .menu-screen:has([data-detail="starter"]) .collection-detail { grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: minmax(150px, 1fr) auto; padding-top: 20px; }
  .menu-screen:has([data-detail="starter"]) .detail-visual { align-items: center; padding: 0; }
  .menu-screen:has([data-detail="starter"]) .detail-art { width: 100%; height: 240px; max-height: 240px; }
  .menu-screen:has([data-detail="starter"]) .detail-rank { top: auto; bottom: 15px; }
  .menu-screen:has([data-detail="starter"]) .detail-copy { align-self: center; max-height: 100%; }
  .menu-screen:has([data-detail="starter"]) .detail-footer { padding-top: 14px; }
  .menu-screen .character-layout { display: block; overflow: auto; padding-top: 23px; }
  .menu-screen .character-overview { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; margin-bottom: 28px; }
  .menu-screen .character-rating { padding-bottom: 0; }
  .menu-screen .character-rating > span { font-size: 14px; letter-spacing: .8px; }
  .menu-screen .character-rating > strong { font-size: 66px; margin: 8px 0; }
  .menu-screen .character-rating > p { font-size: 14px; }
  .menu-screen .character-basics > div { padding: 10px 0; gap: 4px 9px; }
  .menu-screen .character-basics span { font-size: 14px; }
  .menu-screen .character-basics strong { font-size: 21px; }
  .menu-screen .character-basics small { display: none; }
  .menu-screen .character-overview > p { grid-column: 1 / -1; margin: 0; font-size: 15px; }
  .menu-screen .character-overview > .character-attributes { grid-column: 1 / -1; margin-top: 0; padding-top: 17px; }
  .menu-screen .character-build { overflow: visible; padding-right: 5px; }
  .menu-screen .character-build > header { margin-bottom: 15px; }
  .menu-screen .character-build > header h3 { font-size: 29px; }
  .menu-screen .character-build > header .secondary-button { min-height: 44px; padding: 11px 14px; }
  .menu-screen .character-spells article { padding: 17px 0; }
  .menu-screen .character-attributes dl { gap: 13px 18px; font-size: 15px; }
  .menu-screen.launch-screen { padding: 19px 27px 18px; overflow-y: auto; }
  .menu-screen.launch-screen .launch-art { position: fixed; background-position: 59% center; opacity: .78; }
  .menu-screen.launch-screen .launch-shade { position: fixed; background: linear-gradient(90deg, #0e0a11f0 0%, #100a13b8 50%, #160e1599), linear-gradient(0deg, #0e0a11, #0e0a1150 65%); }
  .menu-screen .altar-topline { min-height: 38px; flex-wrap: wrap; gap: 12px 18px; }
  .menu-screen .altar-topline > span { order: 0; font-size: 14px; letter-spacing: 1.4px; }
  .menu-screen .altar-topline > button { order: 1; margin-left: auto; }
  .menu-screen .altar-wallet { order: 2; width: 100%; gap: 28px; }
  .menu-screen .wallet-balance strong { font-size: 28px; }
  .menu-screen .wallet-balance > .line-icon { width: 24px; height: 24px; }
  .menu-screen .altar-layout { display: flex; flex-direction: column; justify-content: center; flex: 1 0 auto; min-height: 0; padding: 34px 0 24px; gap: 29px; }
  .menu-screen .altar-intro h1 { font-size: clamp(58px, 13vw, 82px); line-height: .86; letter-spacing: -2px; }
  .menu-screen .altar-intro > p { font-size: 14px; letter-spacing: 3.4px; margin-top: 18px; }
  .menu-screen .altar-power { margin-top: 22px; }
  .menu-screen .altar-power strong { font-size: 39px; }
  .menu-screen .altar-destination { width: 100%; max-width: 500px; padding-left: 18px; }
  .menu-screen .altar-destination h2 { font-size: 33px; }
  .menu-screen .altar-destination > p, .menu-screen .altar-destination > header > p { font-size: 16px; margin-bottom: 14px; }
  .menu-screen .altar-destination .launch-enter { margin-top: 15px; }
  .menu-screen .altar-navigation { flex-wrap: wrap; align-items: center; gap: 8px 26px; padding-top: 12px; min-height: 0; }
  .menu-screen .altar-navigation > button { gap: 11px; font-size: 17px; min-height: 48px; padding: 8px 0; }
  .menu-screen .altar-navigation > button > .line-icon { width: 22px; height: 22px; }
  .menu-screen .altar-navigation > button small { padding-left: 0; }
  .menu-screen .altar-navigation > button > .line-icon:last-child { display: none; }
  .menu-screen .altar-navigation > button { display: grid; grid-template-columns: 23px 1fr; column-gap: 10px; row-gap: 3px; }
  .menu-screen .altar-navigation > button > .line-icon:first-child { grid-row: 1 / 3; }
  .menu-screen .altar-navigation > button small { grid-column: 2; font-size: 14px; text-align: left; }
  .menu-screen .altar-loadout { display: none; }
  .menu-screen.pause-screen, .menu-screen.outcome-screen { padding: 28px 24px; }
  .menu-screen .pause-panel { padding: 5px; }
  .menu-screen .pause-panel > h2 { font-size: 56px; }
  .menu-screen .outcome-modal { padding: 8px 3px; }
  .menu-screen .outcome-modal h2 { color: var(--menu-ink); font-size: 41px; }
  .menu-screen .run-stats { gap: 12px; }
  .menu-screen .run-stats span { font-size: 14px; }
}
@media (max-width: 480px) {
  .menu-screen .menu-shell { padding-left: 18px; padding-right: 18px; }
  .menu-screen .menu-header { gap: 15px 10px; }
  .menu-screen .menu-identity h2 { font-size: 31px; }
  .menu-screen .menu-back { font-size: 14px; gap: 6px; }
  .menu-screen .collection-tabs { gap: 17px; }
  .menu-screen .collection-tabs > button { font-size: 16px; }
  .menu-screen .collection-tabs button span { display: none; }
  .menu-screen .workspace-rating { padding-left: 9px; }
  .menu-screen .workspace-rating > strong { font-size: 24px; }
  .menu-screen .workspace-rating > span { display: none; }
  .menu-screen .collection-toolbar { gap: 14px; }
  .menu-screen .collection-detail { grid-template-columns: 97px minmax(0, 1fr); column-gap: 13px; }
  .menu-screen .collection-detail h3 { font-size: 29px; }
  .menu-screen .socket-strip { gap: 11px; }
  .menu-screen .socket-row { gap: 6px; }
  .menu-screen .socket-slot { width: 36px; height: 37px; }
  .menu-screen .menu-footer { column-gap: 16px; }
  .menu-screen .menu-footer > span { gap: 6px; }
  .menu-screen:has([data-detail="starter"]) .collection-detail { grid-template-columns: 110px minmax(0, 1fr); }
  .menu-screen .altar-navigation { column-gap: 23px; }
  .menu-screen .altar-navigation > button { font-size: 16px; gap: 9px; }
}
@media (max-width: 760px) and (max-height: 760px) {
  .menu-screen .menu-shell { padding-top: 14px; padding-bottom: 9px; }
  .menu-screen .menu-header { padding-bottom: 11px; gap: 10px; }
  .menu-screen .menu-identity h2 { font-size: 30px; }
  .menu-screen .menu-identity p { margin-top: 6px; }
  .menu-screen .collection-toolbar { min-height: 49px; }
  .menu-screen .socket-strip { margin-bottom: 5px; padding-bottom: 7px; }
  .menu-screen .socket-slot { height: 35px; width: 36px; }
  .menu-screen .collection-grid, .menu-screen:has([data-detail="starter"]) .collection-grid { grid-template-rows: 125px; height: 138px; min-height: 138px; max-height: 138px; }
  .menu-screen .collection-tile > .gem-art { width: 53px; height: 53px; }
  .menu-screen .collection-tile > span { font-size: 18px; }
  .menu-screen .collection-layout { gap: 9px; }
  .menu-screen .collection-detail { padding-top: 9px; grid-template-rows: minmax(0, 1fr) auto; }
  .menu-screen:not(:has([data-detail="starter"])) .detail-visual { overflow: hidden; padding-top: 0; }
  .menu-screen:not(:has([data-detail="starter"])) .detail-art { height: 100%; max-height: 100%; }
  .menu-screen .detail-art { height: 121px; max-height: 121px; }
  .menu-screen .detail-rank { top: 129px; }
  .menu-screen .detail-footer { margin-top: 7px; padding-top: 8px; }
  .menu-screen .detail-upgrade { margin-bottom: 7px; }
  .menu-screen .detail-progress, .menu-screen .detail-upgrade { font-size: 14px; line-height: 1.3; }
  .menu-screen .collection-detail .detail-actions button { min-height: 46px; }
  .menu-screen .menu-footer { padding-top: 8px; margin-top: 8px; min-height: 34px; }
  .menu-screen:has([data-detail="starter"]) .collection-detail { padding-top: 12px; grid-template-rows: minmax(115px, 1fr) auto; }
  .menu-screen:has([data-detail="starter"]) .detail-art { height: 200px; max-height: 200px; }
  .menu-screen .altar-layout { padding-top: 22px; gap: 22px; }
  .menu-screen .altar-intro h1 { font-size: 62px; }
  .menu-screen .altar-power { margin-top: 16px; }
}
@keyframes menu-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .menu-screen, .menu-screen * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

#ui[data-mode] .options-screen .save-status { display: flex; position: static; margin-top: 18px; font-size: 14px; line-height: 1.5; }
.menu-screen .collection-layout.is-empty { grid-template-columns: 1fr; }
.menu-screen .collection-layout.is-empty .collection-grid { display: none; }
@media (max-width: 760px) { .menu-screen .menu-footer { column-gap: 12px; } }

/* Equipment is a workbench: what you wear, what you found, and what changes. */
.menu-screen .equipment-art { display: block; width: 100%; height: 100%; color: var(--item-color, #b7a1a5); }
.menu-screen .character-equipment-link { margin-bottom: 28px; }
.menu-screen .character-equipment-link button { width: 100%; justify-content: flex-start; font-size: 20px; }
.menu-screen .character-equipment-link button > span { margin-left: auto; color: var(--menu-muted); font-size: 17px; }
.menu-screen .altar-navigation { gap: clamp(26px, 4vw, 68px); }
.menu-screen .altar-navigation > button small { font-size: 16px; }
.inventory-screen .menu-shell { max-width: 1720px; }
.inventory-screen button, .inventory-screen .primary-button, .inventory-screen .secondary-button, .inventory-screen .text-button { font-size: 20px; }
.inventory-screen .menu-header { padding-bottom: 18px; }
.inventory-screen .workspace-nav { gap: 25px; }
.inventory-screen .workspace-nav button { font-size: 18px; }
.inventory-screen .equipment-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 22px; flex-shrink: 0; }
.inventory-screen .equipment-toolbar p { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.inventory-screen .equipment-toolbar p > strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 45px; font-weight: 500; line-height: 1; color: #fff1e8; }
.inventory-screen .equipment-toolbar p > span, .inventory-screen .equipment-currency > span { color: var(--menu-muted); font-size: 18px; }
.inventory-screen .equipment-currency { display: flex; align-items: baseline; gap: 12px; }
.inventory-screen .equipment-currency strong { color: #f0bcb8; font-size: 25px; font-weight: 500; }
.inventory-screen .equipment-layout { display: grid; grid-template-columns: minmax(170px, .62fr) minmax(260px, 1fr) minmax(350px, 1.32fr); gap: clamp(20px, 2.5vw, 42px); flex: 1; min-height: 0; }
.inventory-screen .equipment-equipped, .inventory-screen .equipment-bag { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.inventory-screen .equipment-equipped > h3, .inventory-screen .equipment-bag h3 { font-family: inherit; font-size: 20px; font-weight: 500; margin: 0; }
.inventory-screen .equipment-equipped > h3 { min-height: 48px; }
.inventory-screen .equipment-slots { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; padding: 5px; margin: -5px; scrollbar-width: thin; }
.inventory-screen .equipment-slot { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; gap: 11px; align-items: center; text-align: left; width: 100%; min-height: 75px; padding: 9px 8px; background: #d9c5bd03; border: 1px solid #cbb8b513; border-radius: 2px; color: var(--menu-ink); flex-shrink: 0; }
.inventory-screen .equipment-slot:hover, .inventory-screen .equipment-card:hover { background: #ead0c80a; border-color: #c6a19f4a; transform: none; }
.inventory-screen .equipment-slot[aria-pressed="true"] { border-color: #be7f8959; background: linear-gradient(100deg, #9037431e, transparent); }
.inventory-screen .equipment-slot-art { display: block; width: 39px; height: 57px; padding: 1px 3px; }
.inventory-screen .equipment-slot-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.inventory-screen .equipment-slot-copy > strong { font-weight: 500; font-size: 18px; }
.inventory-screen .equipment-slot-copy > small { font-size: 16px; line-height: 1.3; color: var(--item-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-screen .equipment-slot > b { color: #b8a7a9; font-size: 16px; font-weight: 400; }
.inventory-screen .equipment-bag > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 39px; }
.inventory-screen .equipment-bag h3 span { display: block; font-size: 15px; color: var(--menu-dim); font-weight: 400; padding-top: 4px; }
.inventory-screen .equipment-bag > header button { font-size: 17px; min-height: 32px; padding: 3px 0; flex-shrink: 0; }
.inventory-screen .equipment-bag > header button[aria-pressed="true"] { color: #f1b2b8; }
.inventory-screen .equipment-filter-caption { font-size: 16px; line-height: 1.45; color: var(--menu-muted); margin: 12px 0 14px; }
.inventory-screen .equipment-grid { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; padding: 5px; margin: -5px; scrollbar-width: thin; overscroll-behavior: contain; }
.inventory-screen .equipment-card { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 92px; width: 100%; text-align: left; background: #d9c5bd03; border: 1px solid #cbb8b51b; border-left: 2px solid color-mix(in srgb, var(--item-color), transparent 35%); border-radius: 2px; padding: 11px 12px; flex-shrink: 0; }
.inventory-screen .equipment-card[aria-pressed="true"] { background: linear-gradient(110deg, #842c392c, #a2717011); border-color: #c5888c7a; border-left-color: var(--item-color); }
.inventory-screen .equipment-card-art { display: block; width: 42px; height: 63px; padding: 0 2px; }
.inventory-screen .equipment-card-copy { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.inventory-screen .equipment-card-copy > strong { color: var(--item-color); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.inventory-screen .equipment-card-copy > small { font-size: 15px; color: var(--menu-muted); font-weight: 400; line-height: 1.4; }
.inventory-screen .equipment-card-gain { font-size: 20px; font-weight: 500; text-align: right; color: var(--menu-muted); }
.inventory-screen .equipment-card-gain > small { display: block; font-size: 13px; color: var(--menu-dim); margin-top: 4px; }
.inventory-screen .stat-better { color: #e6d19a !important; }
.inventory-screen .stat-worse { color: #f28c99 !important; }
.inventory-screen .equipment-empty { padding: 40px 10px; text-align: center; color: var(--menu-muted); }
.inventory-screen .equipment-empty > .equipment-art { width: 50px; height: 80px; opacity: .45; margin: 0 auto 22px; }
.inventory-screen .equipment-empty > h3 { font-size: 25px; font-family: 'Cormorant Garamond', Georgia, serif; margin-bottom: 12px; }
.inventory-screen .equipment-empty > p { font-size: 18px; line-height: 1.5; margin: 0; }
.inventory-screen .equipment-detail { border-left: 1px solid var(--menu-rule); padding-left: clamp(22px, 2.5vw, 42px); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inventory-screen .equipment-detail-body { overflow-y: auto; min-height: 0; padding-right: 7px; scrollbar-width: thin; overscroll-behavior: contain; flex: 1; }
.inventory-screen .equipment-item-heading { display: grid; grid-template-columns: 83px minmax(0,1fr); gap: 19px; align-items: center; min-height: 151px; padding-bottom: 22px; }
.inventory-screen [data-equipment-hero] { height: 129px; width: 83px; background: radial-gradient(ellipse, color-mix(in srgb, var(--item-color), transparent 91%), transparent 70%); }
.inventory-screen .equipment-item-heading .eyebrow { font-size: 16px; color: var(--item-color); letter-spacing: 1px; }
.inventory-screen .equipment-item-heading h3 { color: var(--item-color); font-size: clamp(32px, 3vw, 44px); line-height: 1.02; margin: 9px 0 12px; overflow-wrap: anywhere; }
.inventory-screen .equipment-item-heading p { margin: 0; color: var(--menu-muted); font-size: 17px; line-height: 1.5; }
.inventory-screen .equipment-rating-preview { border-block: 1px solid var(--menu-rule); padding: 17px 0 19px; margin-bottom: 23px; }
.inventory-screen .equipment-rating-preview > span { color: var(--menu-muted); font-size: 17px; }
.inventory-screen .equipment-rating-preview > div { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.inventory-screen .equipment-rating-preview strong { font-size: 29px; font-weight: 500; font-variant-numeric: tabular-nums; }
.inventory-screen .equipment-rating-preview strong:first-child { color: var(--menu-muted); }
.inventory-screen .equipment-rating-preview .line-icon { color: #9c7981; width: 20px; }
.inventory-screen .equipment-rating-preview b { font-size: 18px; font-weight: 500; margin-left: auto; }
.inventory-screen .equipment-comparison-heading, .inventory-screen .equipment-comparison > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(67px, .75fr) minmax(75px, .75fr); gap: 12px; align-items: baseline; }
.inventory-screen .equipment-comparison-heading { font-size: 15px; color: var(--menu-dim); padding-bottom: 14px; }
.inventory-screen .equipment-comparison-heading > span:not(:first-child) { text-align: right; }
.inventory-screen .equipment-comparison { margin: 0; }
.inventory-screen .equipment-comparison > div { padding: 12px 0; border-top: 1px solid #cbb8b511; font-size: 20px; line-height: 1.3; }
.inventory-screen .equipment-comparison dt { color: #ddced0; }
.inventory-screen .equipment-comparison dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inventory-screen .equipment-comparison dd:first-of-type { color: #ae9da3; }
.inventory-screen .equipment-comparison dd > span { font-size: 14px; padding-left: 4px; }
.inventory-screen .equipment-affix { border-left: 2px solid var(--item-color); padding: 2px 0 2px 15px; margin-top: 20px; }
.inventory-screen .equipment-affix > strong { color: var(--item-color); font-size: 21px; font-weight: 500; }
.inventory-screen .equipment-affix > p { font-size: 19px; line-height: 1.5; color: #d8c6c3; margin: 7px 0 0; }
.inventory-screen .equipment-current-item { color: var(--menu-muted); font-size: 16px; line-height: 1.5; margin: 22px 0 13px; }
.inventory-screen .equipment-detail-footer { flex-shrink: 0; border-top: 1px solid var(--menu-rule); padding-top: 14px; margin-top: 12px; }
.inventory-screen .equipment-upgrade-note { font-size: 16px; line-height: 1.5; color: var(--menu-muted); margin: 0 0 13px; }
.inventory-screen .equipment-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; }
.inventory-screen .equipment-actions > button { min-height: 51px; padding: 12px 9px; font-size: 18px; }
.inventory-screen .equipment-actions > .equipment-salvage { grid-column: 1 / -1; min-height: 35px; padding: 7px; font-size: 16px; color: #caa7aa; }
.inventory-screen .equipment-salvage-confirm > p { margin: 0 0 17px; color: #f3c4c5; font-size: 20px; line-height: 1.4; }
.inventory-screen .equipment-salvage-confirm > div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.inventory-screen .equipment-salvage-confirm button { font-size: 18px; }
.inventory-screen .equipment-no-selection { border-left: 1px solid var(--menu-rule); padding: 70px 30px; }
.inventory-screen .equipment-no-selection h3 { font-size: 33px; }
.inventory-screen .equipment-no-selection p { font-size: 20px; color: var(--menu-muted); line-height: 1.6; }
.inventory-screen .equipment-footer { flex-wrap: wrap; gap: 13px 22px; font-size: 15px; }
.menu-screen .equipment-reward { display: grid; grid-template-columns: 47px minmax(0,1fr) 23px; align-items: center; gap: 18px; width: 100%; padding: 16px 18px; margin: 22px 0; text-align: left; border: 1px solid color-mix(in srgb, var(--item-color), transparent 65%); background: color-mix(in srgb, var(--item-color), transparent 96%); }
.menu-screen .equipment-reward > span:first-child { height: 69px; }
.menu-screen .equipment-reward > span:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }
.menu-screen .equipment-reward small { font-size: 15px; color: var(--item-color); }
.menu-screen .equipment-reward strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 500; color: var(--item-color); }
.menu-screen .equipment-reward > span > span { color: var(--menu-muted); font-size: 17px; }

@media (max-width: 1180px) and (min-width: 901px) {
  .inventory-screen .menu-shell { padding-left: 28px; padding-right: 28px; }
  .inventory-screen .equipment-layout { grid-template-columns: 139px minmax(220px,1fr) minmax(335px,1.3fr); gap: 19px; }
  .inventory-screen .equipment-slot { grid-template-columns: 32px minmax(0,1fr); gap: 7px; min-height: 73px; }
  .inventory-screen .equipment-slot-art { width: 31px; height: 51px; }
  .inventory-screen .equipment-slot > b { display: none; }
  .inventory-screen .equipment-slot-copy > small { font-size: 14px; }
  .inventory-screen .equipment-detail { padding-left: 20px; }
  .inventory-screen .equipment-card { grid-template-columns: 31px minmax(0,1fr) auto; gap: 9px; padding: 10px 8px; }
  .inventory-screen .equipment-card-art { width: 31px; height: 52px; }
  .inventory-screen .equipment-card-copy > strong { font-size: 23px; }
}
@media (max-width: 900px) {
  .inventory-screen .menu-header { flex-wrap: wrap; gap: 12px 20px; }
  .inventory-screen .workspace-nav { order: 3; width: 100%; margin-left: 0; }
  .inventory-screen .menu-back { margin-left: auto; }
  .inventory-screen .equipment-toolbar { padding: 13px 0 17px; }
  .inventory-screen .equipment-layout { grid-template-columns: minmax(230px, .85fr) minmax(320px, 1.15fr); grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
  .inventory-screen .equipment-equipped { grid-column: 1 / -1; }
  .inventory-screen .equipment-equipped > h3 { min-height: 0; margin-bottom: 10px; font-size: 17px; }
  .inventory-screen .equipment-slots { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 7px; overflow-y: visible; }
  .inventory-screen .equipment-slot { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 83px; padding: 7px; }
  .inventory-screen .equipment-slot-art { height: 42px; width: 30px; }
  .inventory-screen .equipment-slot-copy > strong { font-size: 16px; }
  .inventory-screen .equipment-slot-copy > small, .inventory-screen .equipment-slot > b { display: none; }
  .inventory-screen .equipment-detail { padding-left: 20px; }
  .inventory-screen .equipment-item-heading { grid-template-columns: 54px minmax(0,1fr); gap: 12px; min-height: 119px; }
  .inventory-screen [data-equipment-hero] { height: 100px; width: 54px; }
  .inventory-screen .equipment-card { grid-template-columns: 32px minmax(0,1fr); gap: 9px; }
  .inventory-screen .equipment-card-art { width: 32px; height: 52px; grid-row: 1 / 3; }
  .inventory-screen .equipment-card-copy > strong { font-size: 24px; }
  .inventory-screen .equipment-card-gain { grid-column: 2; text-align: left; font-size: 18px; }
  .inventory-screen .equipment-card-gain > small { display: inline; margin-left: 5px; }
  .inventory-screen .equipment-item-heading h3 { font-size: 32px; }
}
@media (max-width: 680px) {
  .menu-screen .character-equipment-link button { flex-wrap: wrap; }
  .menu-screen .character-equipment-link button > span { width: 100%; margin-left: 0; text-align: left; }
  .inventory-screen { overflow-y: auto; }
  .inventory-screen .menu-shell { height: auto; min-height: 100%; padding: 20px; }
  .inventory-screen .equipment-layout { display: flex; flex-direction: column; gap: 25px; flex: 0 0 auto; }
  .inventory-screen .equipment-slots { grid-template-columns: repeat(6, minmax(47px,1fr)); }
  .inventory-screen .equipment-grid { max-height: 290px; }
  .inventory-screen .equipment-card { grid-template-columns: 38px minmax(0,1fr) auto; min-height: 85px; }
  .inventory-screen .equipment-card-art { grid-row: auto; }
  .inventory-screen .equipment-card-gain { grid-column: auto; }
  .inventory-screen .equipment-card-gain > small { display: block; }
  .inventory-screen .equipment-detail { border-left: 0; border-top: 1px solid var(--menu-rule); padding: 25px 0 0; }
  .inventory-screen .equipment-detail-body { overflow: visible; padding: 0; }
  .inventory-screen .equipment-item-heading { grid-template-columns: 76px minmax(0,1fr); gap: 18px; }
  .inventory-screen [data-equipment-hero] { height: 122px; width: 76px; }
  .inventory-screen .equipment-item-heading h3 { font-size: 36px; }
  .inventory-screen .equipment-footer { margin-top: 25px; padding-top: 18px; }
  .inventory-screen .equipment-no-selection { border-left: 0; padding: 20px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .inventory-screen .menu-shell { padding-top: 23px; padding-bottom: 17px; }
  .inventory-screen .menu-header { min-height: 65px; padding-bottom: 14px; }
  .inventory-screen .equipment-toolbar { padding-top: 14px; padding-bottom: 15px; }
  .inventory-screen .equipment-slot { min-height: 63px; padding-block: 4px; }
  .inventory-screen .equipment-slot-art { height: 48px; }
  .inventory-screen .equipment-item-heading { min-height: 126px; padding-bottom: 15px; }
  .inventory-screen [data-equipment-hero] { height: 105px; }
  .inventory-screen .equipment-rating-preview { margin-bottom: 15px; }
}